section{
  background-color:#f9f9f9;
  box-shadow: 0px 0px 15px -5px #777777;
  border-radius: 10px;
  margin-bottom:2rem;
}


h2 {
  font-size: 3rem;             /* 大きめで視認性重視（例: 30px） */
  font-weight: bold;           /* 太字で見出しらしさを強調 */
  color: #ff9500;              /* 病院系で使われる安心感のある青色 */
  text-align: center;          /* 中央揃え（必要に応じて） */
  line-height: 1.4;            /* 行間にゆとり */
  letter-spacing: 0.05em;      /* 少し文字間を空けて読みやすく */
}


/* メインイメージ　　メインイメージ 　メインイメージ　　メインイメージ*/
/* スライダーのサイズ */
.slider-wrap {
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background-color:#60BCFF;
}
/* 画像の表示(オブジェクトフィットなど) */
.slide-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ズームする アニメーション */
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}
/* 
このクラス名で、ズームするアニメーションを呼び出せる */
.slick-animation {
  animation: fadezoom 5s 0s forwards;
}

/* メインイメージ　　メインイメージ 　メインイメージ　　メインイメージ　　終わり*/

/* maininfo   section*/

.maininfo {
  color: #333;
  padding: 20px 0;
}

.maininfo .container{
  max-width:1200px;
  width:95%;
  margin:0 auto;

}
.maininfo .row {
  display: flex;                /* 横並びにする */
  align-items: stretch;         /* 高さをそろえるために stretch を指定 */
  justify-content: space-between; /* カラム間のスペースを均等に */
  gap: 2%;                      /* col同士の隙間を調整（任意） */
  flex-wrap: wrap;              /* スマホなど狭い画面で折り返せるように */
}

.maininfo .col {
  flex: 1 1 48%;                /* 48%幅を基本としつつ、折り返し可能に */
  margin-bottom: 10px;          /* 下の余白 */
  border: 1px solid #333;       /* 枠線 */
  padding: 1.5rem;              /* 内側の余白 */
  box-sizing: border-box;       /* paddingを幅に含める */
}

/* .maininfo .col{
  width:48%;
  height:900px;
  margin-bottom:10px;
  border:1px solid #333;
} */


.maininfo .col .inner{
  margin:0 30px;
}


.maininfo h3 {
  font-size: 2rem;
  margin-bottom:1rem;
  color: var(--link-hover-color); 
  border-radius:10px;
  padding:0.5rem;
  font-weight:500;
  text-align: center;
  background-color: var(--main-bg-color);
}
.maininfo h4 {
  font-size:2.0rem;
}

.maininfo p {
  margin-bottom: 1.5rem;
  font-size:1.8rem;
}

.maininfo ul {
  margin-left: 2rem;
  list-style: none;
  padding-left: 0;
}

.maininfo ul li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  font-size:1.4rem;
  position: relative;
}

.maininfo ul li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0056b3;
  font-weight: bold;
}

.maininfo a {
  color: #0056b3;
  text-decoration: none;
}

.maininfo a:hover {
  text-decoration: underline;
}

.maininfo .highlight {
  background-color: #ffffe0;
  padding: 0.5rem;
  border-radius: 4px;
}
/* 休診代診のお知らせ */
.maininfo .table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.maininfo .table th,
.maininfo .table td {
  border: 1px solid #ddd;
  padding: 0.8rem;
  text-align: left;
  font-size:1.4rem;
}

.maininfo .table th {
  background-color: #f2f2f2;
  color: #333;
}

/* maininfo テーブルcss gpt */

/* 全体のテーブルスタイル */
.maininfo-table {
  width: 100%; /* テーブルを親要素いっぱいに広げる */
  border-collapse: collapse; /* 枠線の重なりを解消 */
  font-size: 1.6rem; /* ユーザーの好みのフォントサイズ */
  text-align: center; /* セル内の文字を中央揃え */
  margin: 20px 0; /* テーブル周りの余白 */
}

/* テーブルヘッダー（1行目） */
.maininfo-table tr:first-child td {
  background-color: #f4f4f4; /* ヘッダーの背景色 */
  font-weight: bold; /* 太字にする */
  color: #333; /* 文字色 */
}

/* 各セルのスタイル */
.maininfo-table td {
  border: 1px solid #ddd; /* セルの境界線 */
  padding: 10px 15px; /* 内側の余白 */
}

/* 偶数行の背景色 */
.maininfo-table tr:nth-child(even) {
  background-color: #fafafa;
}

/* 奇数行の背景色 */
.maininfo-table tr:nth-child(odd) {
  background-color: #fff;
}

/* 非診療日のスタイル */
.maininfo-table td:contains('／') {
  color: #999; /* グレーで目立たなくする */
}

/* ホバー時のスタイル */
.maininfo-table tr:hover {
  background-color: #f0f8ff; /* 行全体を薄い青色でハイライト */
}

                        /* maininfoの中のテーブル基本デザイン */
.notice-table {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 1.6rem;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.notice-table th,
.notice-table td {
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: left;
}

.notice-table thead {
  background-color: #f0f6fb;
  font-weight: bold;
}

/* リンク部分 */
.notice-link {
  text-align: center;
  margin-top: 2rem;
}

.notice-link a {
  color: #3cae00;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.6rem;
}

.notice-link a:hover {
  text-decoration: underline;
}
                          /* maininfoの中のテーブル基本デザイン 終わり*/

@media(max-width:768px){
  .maininfo .row{
      display:block;
  }
  .maininfo .col{
      width:100%;
      margin:0 auto;
      margin-bottom:1rem;
  }
  .maininfo .col .inner{
  margin:0 1rem;
}
}
/* maininfo　　終わり */



/* news  sectionお知らせメニュー */
.news{
  width:100%;
  margin-top:2rem;
}
.news .container{
  justify-content:flex-start;
  align-items:center;
  width:90%;
  margin: 0 auto;
  display: flex;
}
.news .important_info{
  border-right:1px solid #7a7a7a;
  padding:8rem 3rem;
  margin-right:1rem;
  background-color:#c53a3a;
  border:1px solid black;
}
.news .important_info h4{
  font-size: 2.2rem;
  font-weight:400;
  color:#fff;
}


.news .news_list {
  margin: 0;
  padding: 0;
}

.news .news_list_item {
  padding: 25px 0;
  border-bottom: 1px solid #E6E6E6;

}

.news .news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}

.news .news_list_item a {
  position: relative;
  display: flex;
  padding-right: 3rem;
}

.news .news_list_date {
  font-size: 2rem;
  display: flex;
  margin-right: 15px;
  align-items: center;
}

.news .news_item {
  background: #fbe4f5;
  border-radius: 14px;
  width: 6em;
  text-align: center;
  margin-left: 20px;
}
@media(max-width:768px){
  .news .container {
    flex-direction: column;
    align-items: stretch;
  }

  .news .important_info {
    border-right: none;         
    border: 1px solid #7a7a7a;  
    padding:1rem;           
    margin: 0 0 2rem 0;         
    text-align: center;         
  }

  .news .important_info h4 {
    font-size: 1.8rem;  
    padding: 1rem;      
  }
  .news .news_list_date {
  display: block;
}
.news .news_item {
  margin-left: 0px;
}

}

/* secondlink section*/

/* .secondlink {
  
} */

.secondlink .container {
  width:95%;
  margin: 0 auto;
}

.secondlink .boxs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; 
  justify-content: center;
  align-items:center;
}

.secondlink .box {
  flex: 1 1 calc(30% - 20px);
  min-width: 150px;
  max-width: 400px;
  margin-bottom:2rem;
  box-shadow:5px 5px #bababa;
  border-radius:5px;
}

.secondlink .text {
  background: #fff;
  border: 1px solid #333;
  font-size: 2rem;
  padding: 10rem 1rem 5rem;
  text-align: center;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.secondlink [class^="text"] {
  background: #fff;
  border: 1px solid #333;
  font-size: 2rem;
  padding: 10rem 1rem 5rem;
  text-align: center;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.secondlink [class^="text"]:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(248, 187, 252, 0.4);
}

/* 各textクラスに個別の背景色を指定 */
.secondlink .text1:hover {
  background-color: #bbf7fc;
}

.secondlink .text2:hover {
  background-color: #f4f69e;
}

.secondlink .text3:hover {
  background-color: #fbcfe8;
}

.secondlink .text4:hover {
  background-color: #d1c3fa;
}

.secondlink .text5:hover {
  background-color: #b4f5bb;
}

.secondlink [class^="text"]::before,
.secondlink [class^="text"]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.secondlink [class^="text"]::before {
  top: 15%;
  width: 5rem;
  height: 5rem;
}


.secondlink .text1::before {
  background-image: url("../image/icooon-mono/gairai.svg");
}

.secondlink .text2::before {
  background-image: url("../image/icooon-mono/nyuuin.svg");
}

.secondlink .text3::before {
  background-image: url("../image/icooon-mono/care.svg");
}

.secondlink .text4::before {
  background-image: url("../image/icooon-mono/about.svg");
}

.secondlink .text5::before {
  background-image: url("../image/icooon-mono/recruit.svg");
}
.secondlink [class^="text"]::after {
  bottom: 10px;
  width: 2.5rem;
  height: 2.5rem;
  background: url("../image/icooon-mono/arrow.svg") no-repeat center/contain;
}
/* secondlink 終わり*/

/* about section*/

/* .about {
  
} */
.about .container {
  width:90%;
  margin: 0 auto;
}
.about .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 画像エリア */
.about .col40 {
  width:50%;
}
.about .aboutimage{
  width: 100%;
}
.about .aboutimage img {
  width: 100%;
  height: auto;
  /* object-fit:cover; */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* テキストエリア */
.about .col60 {
  width:50%;
}
.about .home_about {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.about .home_about h2 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
  color: #333;
}
.about .home_about_text {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}
.about .home_about a {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.about .home_about a:hover {
  background-color: #0056b3;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .about .col40 {
    width:100%;
  }
  .about .col60 {
    width:100%;
  }
 /* about　終わり */
 /* pickup */
}
/* .pickup{
 
} */
.pickup .container{
  width:90%;
  margin:0 auto;
}
.pickup .boxs{
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}
.pickup .box {
  width: 32%;
  border-radius: 10px;
  background-color: #ffffff;
  transition: all 0.8s ease; /* 背景色・影・拡大すべてに適用 */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* 初期のうっすら影 */
  transform: scale(1); /* 初期はそのままの大きさ */
}

.pickup .box:hover {
  background-color: #f8c5f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
  transform: scale(1.03); /* 少し拡大して浮く感じに */
}

.pickup h3{
  font-size:2.6rem;
  text-align: center;
  padding: 2rem;
}
.pickup p{
  font-size:1.6rem;
  line-height:2.5rem;
  letter-spacing:0.5rem;
  padding:1rem;

}
.pickup .box-image{
  width:100%;
}
.pickup .box-image img{
  width:100%;
}

@media(max-width:768px){
  .pickup .box{
      width:49%;
  }

  .pickup h3{
  font-size:2rem;
  padding: 1rem;
}
}




/* care */

:root {
  --font-noto: 'Noto Sans JP', sans-serif;


  --base-color: #998969;
  --sub-color: #AE9F7F;
  --color-black: #565656;
  --color-gray: #F4F4F2;
  --color-white: #Fff;
}

.l-inner {
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
}

.c-button {
  font-size: 18px;
  line-height: calc(21.6/18);
  font-weight: 400;
  display: block;
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--base-color);
  background-color: var(--color-white);
  padding: 21px 48px 23px;
  text-align: center;
  color: var(--base-color);
  letter-spacing: 0.1em;
  transition: color .4s, background-color .4s;
}

.c-button::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px var(--base-color);
  border-right: solid 2px var(--base-color);
  position: absolute;
  top: 50%;
  right: 36px;
  margin-top: -4px;
  transform: rotate(45deg);
  transition: border-color .4s;
}


.c-button:hover {
  background-color: var(--base-color);
  color: var(--color-white);
}


.c-button:hover::after {
  border-color: var(--color-white);
}


.p-textImgBox {
  margin-top: 60px;
  counter-increment: number 1;
}



.p-textImgBox__inner {
  display: block;
}




.p-textImgBox__textBox {
  position: relative;
  background-color: var(--color-white);
  padding: 60px 88px 42px;
  width: 100%;
  z-index: 1;
}




.p-textImgBox__textBox::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 53px;
  background-color: var(--color-white);
  top: -53px;
  left: 0;
  z-index: -1;
}



.p-textImgBox__title {
  font-size: 22px;
  line-height: calc(26.4/22);
  font-weight: 600;
  color: var(--color-black);
  text-align: center;
}
.p-textImgBox__text {
  font-size: 16px;
  line-height: calc(27.2/16);
  font-weight: 400;
  color: var(--color-black);
  margin-top: 39px;
}


.p-textImgBox__img {
  width: 100%;
  max-width: 500px;
  display: block;
  position: relative;
  z-index: 5;
  margin-right: auto;
  margin-left: auto;
}



.p-textImgBox__img img {
  aspect-ratio: 600 / 400;
  height: auto;
  object-fit: cover;
}


.p-textImgBox__button {
  margin-top: 40px;
}


.p-textImgBox__number::before {
  position: absolute;
  font-size: 70px;
  letter-spacing: 0.1em;
  line-height: calc(84/70);
  color: var(--base-color);
  right: 25px;
  font-weight: 100;
  content: "0"counter(number) " ";
  top: 0;
}

@media screen and (min-width: 760px) {
  .l-inner {
    max-width: 1232px;
    padding-right: 16px;
    padding-left: 16px;
  }
  .p-contents {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .p-textImgBox {
    margin-top: 62px;
    background-color:#c3e3f9;
  }
  .p-textImgBox__inner {
    display: flex;
  }
  .p-textImgBox__textBox {
    padding: 60px 72px 48px;
    margin-top: 50px;
    background-color:#dbc1a3;
  }
  .p-textImgBox__textBox::before {
    width: 150px;
    height: 100%;
    top: 0;
    left: -150px;
    background-color:#dbc1a3;
  }
.care h3 {
font-size: 2.6rem;
text-align: center;
padding: 2rem;
} 
  .p-textImgBox__img {
    max-width: 600px;
  }
  .p-textImgBox__number::before {
    right: 50px;
    top: -50px;
  }
  .p-textImgBox:nth-child(even) .p-textImgBox__inner {
    flex-direction: row-reverse;
  }
  .p-textImgBox:nth-child(even) .p-textImgBox__textBox::before {
    left: initial;
    right: -150px;
  }
  .p-textImgBox:nth-child(even) .p-textImgBox__number::before {
    right: initial;
    left: 50px;
  }
}

/* care  終わり*/



/* spare */
.spare{
  background-color:#d7fad9;
  margin-bottom:2rem;
}
.spare .container{
  max-width:1200px;
  width:90%;
  margin:0 auto;
  background-color:whitesmoke;
}
.spare .cards{
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.spare .cards .card{
  width:23%;
  min-width:250px;

}
.spare .cards .link{
  display: block;
  width:100%;
  height: 290px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0px 5px 12px rgba(0, 40, 94, 0.2);
  box-sizing: border-box;
  padding-top: 157px;
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #333;
  position: relative;
}
.spare .cards .link:hover{
  background-color:#60BCFF;
  color:#fff;
}
.spare .cards .link::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  transition: all .3s;
}
.spare .cards .link001::before{
  width:72px;
  height: 70px;
  background:url(../img/sec7/7.svg) no-repeat 0 0/contain;
  top:58px;
}
.spare .cards .link-text{
  display:block;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}
.spare .cards .link-text::before{
  font-family:"Cormorant",sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  color:#999;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all .3s;
}

.spare .link-text001::before{
  content:"Outpatient";
}
.spare .link-text001::after{
  content:"";
  width:24px;
  height:24px;
  position: absolute;
  bottom: -50px;
  left:0;
  left: calc(50% - 12px);
  transition: all .3s;
}

@media(max-width:768px){
  .spare .container{
    width:95%;
  }
  .spare .card{
    width:45%;
  }
}
/* spare 終わり */

/* access */
/* .access {
 
} */

.access .container {
  max-width: 1200px;
  margin: 0 auto;
}

.access .row {
  display: flex;
  flex:wrap;
  align-items: flex-start;
}
.access .googlemap{
  width: 50%;
  height:400px;
}
.access .text{
  width: 50%;
}
.access .googlemap iframe {
  width: 100%; /* mapのiframeを親要素に合わせる */
  height: 100%; /* 必要に応じて高さを調整 */
  border-radius: 8px; /* 角を少し丸くする */
  border: 1px solid #ddd; /* 枠線を設定 */
}


.access .text h3 {
  font-size: 2.4rem; /* タイトルのフォントサイズ */
  margin-bottom: 1rem;
  color: #333;
}

.access .text p {
  font-size: 1.6rem; /* テキストのフォントサイズ */
  margin-bottom: 0.5rem;
  color: #555;
  line-height: 1.6; /* 行間の調整 */
}
@media(max-width:768px){
  .access .googlemap{
    width: 100%;
  }
  .access .text{
    width: 100%;
  }
}