@charset "utf-8";

/* トップページ（index.html）専用スタイル
   他ページへ影響させないため、index.html からのみ読み込む */

/* ===== 予約ボタン（メインビジュアル直下） ===== */
#yoyakuBtn{ width:900px; margin:45px auto 0 auto; }
#yoyakuBtn ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
#yoyakuBtn li{ flex:1; }
#yoyakuBtn a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:74px; padding:16px 12px; box-sizing:border-box;
  background:#617c54; color:#fff; text-decoration:none; line-height:1.4;
  transition:background 0.3s, color 0.3s, border-color 0.3s;
}
#yoyakuBtn li:nth-of-type(2) a{
    background-color: #fff;
    color: #617c54;
    border: #617c54 solid 3px;
}
#yoyakuBtn a:hover{ background:#97a990; }
/* アウトラインボタン：ホバーで塗りつぶしに変化 */
#yoyakuBtn li:nth-of-type(2) a:hover{ background:#97a990; border-color:#97a990; color:#fff; }
/* 別タブで開くことを示すアイコン（こどもクリニックのボタンと同じ記号） */
.extIcon{
  width:0.72em; height:0.72em; margin-left:0.5em;
  vertical-align:baseline; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:square;
}
#yoyakuBtn .btnMain{ font-size:150%; font-weight:bold; white-space:nowrap; }
#yoyakuBtn .yoyakuNote{ text-align:center; margin:32px 0 0; }
#yoyakuBtn .yoyakuNote a{
  display:inline; background:none; color:#617c54;
  text-decoration:underline; font-size:90%; padding:0; min-height:0;
}
#yoyakuBtn .yoyakuNote a:hover{ background:none; color:#97a990; }
@media screen and (max-width: 768px){
  #yoyakuBtn{ width:560px; }
    #yoyakuBtn .btnMain{ font-size:100%; font-weight:normal; white-space:nowrap; }
}
@media screen and (max-width: 640px){
  #yoyakuBtn{ width:480px; }
  #yoyakuBtn ul{ flex-direction:column; gap:16px; }
  #yoyakuBtn a{ min-height:80px; }
  #yoyakuBtn .yoyakuNote{ margin-top:26px; }
  #yoyakuBtn .yoyakuNote a{ font-size:80%; }
}

/* ===== SNSアイコン ===== */
#section-sns.contents {
  width: 90%;
  max-width: 800px;
  text-align: center;
  margin: 30px auto;
  padding: 0 20px;
}
#section-sns .sns-links {
  display: flex;
  justify-content: space-between;
  max-width: 480px;
  margin: 0 auto;
  gap: 0;
  flex-wrap: wrap;
}
#section-sns .sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: 0.3s;
  /* 各項目を等幅にし、アイコン間の間隔を均等にする */
  flex: 1 1 0;
  min-width: 0;
}
#section-sns .sns img {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
#section-sns .sns .sns-label {
  margin-top: 6px;
  /* font-size: 12px; */
  color: #555;
  letter-spacing: 0.05em;
}
#section-sns .sns:hover {
  transform: translateY(-4px);
}
@media screen and (max-width: 768px) {
  #section-sns .sns-links {
      max-width: 460px;
      margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #section-sns.contents {
      padding: 0 20px;
  }
  #section-sns .sns-links {
      width: 100%;
      max-width: 540px;
      margin: 0 auto;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 0;
  }
  #section-sns .sns img {
      margin-bottom: 8px;
}
}

/* ===== 受診案内セクション（妊娠初診の方へ／婦人科の方へ） ===== */
#first, #fujinka{ width:900px; margin:100px auto 100px auto; padding:0 0 70px 0; border-bottom:#CCC 2px solid; scroll-margin-top:40px; }
#fujinka{ margin-top:0; }
.sectionTitle{
  margin:0 0 25px 0; padding:0;
  font-size:153.9%; font-weight:bold; color:#617c54;
}
.noteSmall{ margin:28px 0 0 0; font-size:85%; color:#666; line-height:1.8; }
/* 文節の途中で改行されないようにまとまり単位で折り返す */
#first .nb, #fujinka .nb{ display:inline-block; }
.sectionBtn{ margin:30px 0 0 0; }
.sectionBtn a{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:438px; min-height:74px; padding:18px 24px; box-sizing:border-box;
  background:#617c54; color:#fff; text-decoration:none; line-height:1.4;
  transition:background 0.3s, color 0.3s, border-color 0.3s;
}
.sectionBtn a:hover{ background:#97a990; }
.sectionBtn .btnMain{ font-size:115%; }
.sectionBtn .btnSub{ font-size:85%; margin-top:4px; }
@media screen and (max-width: 768px){
  #first, #fujinka{ width:700px; }
  .sectionBtn a{ width:268px; }
}
@media screen and (max-width: 640px){
  #first, #fujinka{ width:600px; }
  .sectionBtn a{ width:480px; max-width:100%; min-height:80px; }
}

/* ===== お知らせ／最新情報の間隔 ===== */
@media screen and (max-width: 768px){
  #news{ margin-top:50px; }
}