@charset "UTF-8";
/* ===== フッター SNS欄（2026-09 追加・再構成） =====
   フッターのスタイルは各ページCSS（branch.css / front-page/style.css など）に
   それぞれコンパイルされているため、既存CSSを全部作り直さずに済むよう
   追加分だけをこのファイルに分けて、functions.php の common_stylesheet() で
   全ページに読み込んでいる。
   同じ内容を scss/module/_footer.scss にも入れてあるので、将来 SCSS を
   再コンパイルしても消えない（その場合は定義が重複するが内容は同じ）。

   注意：このCSSはページ別CSSより「先に」読み込まれるため、既存スタイルを
   上書きしたい箇所はセレクタを1段深くして詳細度を上げている。 */

/* --- ボタン（5つとも共通。旧 .footer__facebook-link / .footer__insta-link は不使用） --- */
.footer__sns-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  line-height: 42px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.footer__sns-btn__icon-img {
  width: 24px;
  margin: 0 8px 0 11px;
  flex-shrink: 0;
}
.footer__sns-btn__icon {
  width: 24px;
  margin: 0 8px 0 11px;
  font-size: 21px;
  text-align: center;
  flex-shrink: 0;
}
.footer__sns-btn__label {
  flex: 1 1 auto;
}
.footer__sns-btn__arrow {
  max-width: 36px;
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  /* 隙間の調整 */
  margin-right: -1px;
  flex-shrink: 0;
}
.footer__sns-btn__arrow img {
  width: 12px;
}
.footer__sns-btn--fb {
  color: #3b5998;
}
.footer__sns-btn--fb .footer__sns-btn__arrow {
  background-color: #3b5998;
}
.footer__sns-btn--insta {
  color: #e73162;
}
.footer__sns-btn--insta .footer__sns-btn__arrow {
  background-color: #e73162;
}
.footer__sns-btn--line {
  color: #06c755;
}
.footer__sns-btn--line .footer__sns-btn__arrow {
  background-color: #06c755;
}
.footer__sns-btn--x {
  color: #000;
}
.footer__sns-btn--x .footer__sns-btn__arrow {
  background-color: #000;
}

/* --- 院ごとのグループと見出し --- */
.footer__sns-group__title {
  color: #846c53;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 6px;
}
.footer__sns-group + .footer__sns-group {
  margin-top: 14px;
}
.footer__sns-box .footer__list_sns {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__sns-box .footer__sns_item {
  margin: 0 0 8px 0;
}
.footer__sns-box .footer__sns_item:last-child {
  margin-bottom: 0;
}
.footer__sns-box .footer__sns_item::before {
  display: none;
}

/* --- PC（1100px以上）：2グループを横並びにして縦の間延びを抑える --- */
@media screen and (min-width: 1100px) {
  /* SNS側を「中身の幅」で置く。％で取るとロゴ側に余白が残らず、
     院名「糖尿病クリニックグループ」がSNSに重なってしまうため。 */
  .footer__top-contents .footer__sns-box {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .footer__logo-box {
    flex: 0 1 auto;
    min-width: 0;
  }
  /* ロゴ側が狭まっても「糖尿病クリニックグループ」が途中で割れないように */
  .footer__title--span {
    white-space: nowrap;
  }
  /* 一番長いラベル（浦和院 公式Instagram）に合わせて全ボタンを同じ幅にする。
     max-content だけだと左右のグループで幅が変わるため min-width で揃える。 */
  .footer__sns-group {
    flex: 0 0 auto;
    width: max-content;
    min-width: 260px;
  }
  .footer__sns-group + .footer__sns-group {
    margin-top: 0;
  }
  .footer__sns-btn {
    max-width: none;
    width: 100%;
    min-width: 0;
  }
  /* ラベルを折り返さないことでボタン＝グループの幅が確定する */
  .footer__sns-btn__label {
    white-space: nowrap;
    padding-right: 4px;
  }
  /* ボタン幅を確保するとロゴ側が狭くなるため、院名を少しだけ小さくする */
  .footer__title {
    font-size: 2.4rem;
  }
}

/* --- タブレット・スマホ（768px以下）：ロゴの下に1列で並べる --- */
@media screen and (max-width: 768px) {
  .footer__top-contents {
    flex-wrap: wrap;
  }
  .footer__top-contents .footer__sns-box {
    width: 100%;
    flex-basis: 100%;
    margin-top: 16px;
  }
  .footer__sns-btn {
    max-width: none;
    font-size: 1.4rem;
  }
  /* 旧SP用アイコン（マークアップ上は削除済み。戻した場合の保険） */
  .footer-sp__facebook-link,
  .footer-sp__insta-link,
  .footer-sp__sns-icons {
    display: none !important;
  }
}