@charset "UTF-8";
/* dept.css — 診療科ページ共通（内科ページ / 外科・小児科ページ）

   PSD: design/01_内科、呼吸器内科、睡眠障害内科、禁煙外来_03.psd
        design/02_外科、小児科_04.psd
   PSDは@2x（実装値 = PSD実測 ÷ 2）。横方向のレイアウト値だけコンテナ比
   1120/1098 ＝ ×1.02 を掛けている（他の下層ページと同じ扱い）。

   ＊「ご来院の方へ」も以前はこのCSSを読んでいたが、PSDのタイポが別物なので
     assets/css/visit.css に独立させた（functions.php の共有から外してある）。
     いま .dot-grid を使うのは診療科ページだけ。*/

/* アイコン付きページ内リンクは下層ページ共通パーツになったので common.css の
   .anchor-nav--icon に移動した（parts/anchor-nav.php から出力）。
   ここに .dept-anchor を復活させないこと。*/

/* PSDの「内科・アレルギー科」はPhotoshopの文字詰めで 171px に収まっているが、
   CSS既定だと「・」が全角のままで約189pxになり、カラム183.5pxから溢れて折り返す
   （「科」だけ2行目に落ちて矢印の位置もずれる）。約物を詰める palt を当てて
   PSDと同じ1行に収める。.anchor-nav--icon を使うのは診療科ページだけ。*/
.anchor-nav--icon .anchor-nav__label {
  font-feature-settings: "palt";
}

/* 診療科セクション。
   科目ごとに .section で分けて地色をミント/白の交互にしてある（PSD 01/02 準拠）。
   科目間のアキと id（アンカーの着地点）は .section 側が持つので、ここには
   .dept + .dept や scroll-margin-top を置かない（.dept はもう兄弟にならない）。*/

/* 見出し。PSD: NotoSansJP-Bold 72px(=36px) / tracking50(=.05em) / #004A8E。
   line-height:1.4 だと文字インクの下に約7.7px出るので、+40px で
   PSD の「見出しインク下端→本文ブロック上端 48px」になる。*/
.dept__head {
  font-size: calc(36 * var(--s));
  line-height: 1.4;
  font-weight: 700;
  color: #004A8E;
  letter-spacing: .05em;
  margin-bottom: calc(40 * var(--s));
}

/* PSD実測 @1x: バッジ円150／アキ45.5／本文607／アキ56.5／写真237（計1098）。
   ×1.02 して 1120 に収める。写真の右端＝コンテナ右端。
   下マージンは PSD実測の「写真下端→最初のボックス上端 64px」。
   .info-box の margin-top(22px) とはマージン相殺するので、大きい方をここに持たせる。*/
.dept__main {
  display: grid;
  /* バッジ153 + gap36 + 本文1fr + gap36 + 写真241.5 = .container(1120) のとき
     本文653.5px。PSDは写真253/ガター46.5だったが、本文の1行が長くて読みづらい
     ため、写真列を実寸(.dept__photo の241.5)まで詰めガターも縮めて本文へ回した。 */
  grid-template-columns: calc(153 * var(--s)) minmax(0, 1fr) calc(241.5 * var(--s));
  column-gap: calc(36 * var(--s));
  align-items: start;
  margin-bottom: calc(64 * var(--s));
}

/* バッジ円。PSDの ColorOverlay はセクション地色の反転（ミント地→白丸／白地→ミント丸）で、
   線（Stroke）も影も無効。円は300px(@2x)＝150px。*/
.dept__badge {
  display: block;
  width: calc(150 * var(--s));
  height: calc(150 * var(--s));
  border-radius: 50%;
  background: var(--mint);
}
.section--mint .dept__badge {
  background: var(--white);
}
/* 画像は円と同じ300×300(@2x)のキャンバスに切り出した badge-icon-*.png。
   円いっぱいに置くだけでPSDと同じ位置・大きさになる。
   旧 badge-*.png はトリム済みで大きさがバラバラなので使わない。*/
.dept__badge img {
  width: 100%;
  height: 100%;
}

/* 本文。PSD: Regular 32px(=16px) / 行送り62px(=31px) / #333333。
   段落は1つのテキストレイヤーの改行なので、段落間に追加のアキは無い。
   PSDは本文1行目のインク上端が写真の上端と揃うので、行送りの上半分ぶん引き上げる。*/
.dept__desc {
  margin-top: calc(-8 * var(--s));
  color: #333333;
  line-height: 1.9375;
}
.dept__desc p {
  margin: 0;
}
/* 段落が続くと壁のように見えて読みづらいので間を空ける。
   1つ目には付けないので、見出しとの間隔は変わらない。 */
.dept__desc p+p {
  margin-top: calc(24 * var(--s));
}

/* 写真。PSD: 幅237(×1.02=241.5)／角丸10px／縦長マスク(4:5)でクロップ表示 */
.dept__photo {
  width: calc(241.5 * var(--s));
  margin-left: auto;
  border-radius: calc(10 * var(--rs));
  overflow: hidden;
}
.dept__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ドット付きの項目リスト（症状・疾患）
   PSD実測: 文字数に応じて幅が変わるタグが自然に折り返す配置（4列固定グリッドではない）*/
.dot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(27 * var(--s)) calc(77 * var(--s));
}
.dot-grid li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  color: var(--ink);
}
.dot-grid li::before {
  content: "";
  width: calc(10 * var(--s));
  height: calc(10 * var(--s));
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* 診療科ページの項目リスト。PSD実測 @1x:
   Bold 20px / tracking25(=.025em) / #333333、行送り32px、行ピッチ45.5（＝行間13.5）。
   横アキは 39.5〜68px とばらつく（手置きで行を埋めている）ので中央値の48pxを採る。
   ドットは38px(@2x)＝19px、ドット→文字 12px。*/
.dept .dot-grid {
  gap: calc(13.5 * var(--s)) calc(34 * var(--s));
}
.dept .dot-grid li {
  gap: calc(8 * var(--s));
  font-size: calc(19 * var(--s));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .025em;
  color: #333333;
}
.dept .dot-grid li::before {
  width: calc(19 * var(--s));
  height: calc(19 * var(--s));
}
/* PSD 02「当院で扱っている予防接種」のようにドットの付かない本文。
   ＊上のアキは .info-box の padding-top（common.css・45px）が持つ。ここで足さない。*/
.dept .info-box>p {
  font-size: calc(20 * var(--s));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .025em;
  color: #333333;
}
/* 禁煙外来 適応条件。PSDは他と同じ .info-box で、凡例（タブ）の右に注記が付く。
   注記は Regular 34px(=17px) / tracking50 / #1B1C1C。*/
.kinen-cond__note {
  margin-left: calc(15.5 * var(--s));
  font-size: calc(17 * var(--s));
  font-weight: 400;
  letter-spacing: .05em;
  color: #1b1c1c;
}
/* 番号は本文と同じ NotoSansJP-Bold（Roboto にしない）。
   PSD実測: 番号のインク17px＋アキ17.5px で本文が始まる／行送り40px（＝2.0）*/
.kinen-cond ol {
  counter-reset: c;
}
.kinen-cond li {
  padding-left: calc(34.5 * var(--s));
  text-indent: calc(-34.5 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 700;
  line-height: 2;
  letter-spacing: .025em;
  color: #333333;
}
.kinen-cond li::before {
  counter-increment: c;
  content: counter(c) ".";
  display: inline-block;
  width: calc(34.5 * var(--s));
  text-indent: 0;
  color: var(--teal);
}
/* 「※35歳未満は④は不要」は④の行の右に置く（PSD実測アキ20px）*/
.kinen-cond li .kinen-cond__note {
  margin-left: calc(20 * var(--s));
}
/* PSD実測: 条件ボックス下端→ボタン上端 56px */
.kinen-link {
  margin-top: calc(56 * var(--s));
  text-align: center;
}
/* PSD実測は 570×70／文字20px／左アキ53.5・右アキ17.5／アイコン円33px だが、
   このボタンだけ他より一回り大きく浮くため、トップの問診票DLボタン
   （index.css の .form-dl .btn）と同じ寸法にそろえた（ユーザー指示）。
   横幅はラベルの文字量で決まるので指定しない（PSDの570pxにも合わせない）。

   palt は残す: 「（TDS）」はPSDでも約物半角で組まれていて、CSS既定の全角
   カッコだと約40px横に伸びる。
   ＊症状・疾患リストの「（痛風）」等は逆にPSDも全角なので palt を当てないこと
   （「慢性閉塞性肺疾患・肺気腫（COPD）」のPSD実測331.5pxは全角組みと一致する）。*/
.kinen-link .btn {
  height: calc(51.5 * var(--s));
  padding: 0 calc(12.5 * var(--s)) 0 calc(44 * var(--s));
  gap: calc(21 * var(--s));
  font-size: calc(16 * var(--s));
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: "palt";
}
.kinen-link .btn__arrow {
  width: calc(26 * var(--s));
  height: calc(26 * var(--s));
}

@media (max-width: 768px) {
  .anchor-nav--icon {
    margin-bottom: 80px;
  }
  /* --- SPは「アイコン → 見出し → 本文 → 写真」の縦一列（ユーザー支給のカンプ）。
     PSDの横3カラム（バッジ｜本文｜写真）は解除する。

     アイコンはセクションの上辺をまたぐので、セクションを基準に絶対配置する。
     DOM順は 見出し → .dept__main(バッジ・本文・写真) だが、絶対配置で
     フローから外れるので並べ替えは要らない（見出し→本文→写真がそのまま残る）。
     負マージンで in-flow のまま持ち上げる手もあるが、それだとセクションの
     上padding(SPは60px)を式に埋め込むことになり、padding を変えると崩れる。
     ＊dept.css は診療科ページ(internal / surgery)でしか読まれないので、
       .section に position を足しても他ページには影響しない。 --- */
  .section {
    position: relative;
  }
  #internal, #kokyuki, #suimin, #surgery {
    padding-bottom: 130px;
  }
  .dept__main {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: 24px;
  }
  /* 円の中心をセクションの上辺に乗せる（top = -半径）。
     地色は白＋ティールの線。ミント地・白地のどちらの境目にも掛かるので、
     PC側の「セクション地色の反転」ではなく常に白にする。 */
  .dept__badge {
    position: absolute;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border: 2px solid var(--teal);
    background: #fff;
  }
  .section--mint .dept__badge {
    background: #fff;
    border-width: 1px;
  }
  /* 円の下端(セクション上辺+40)から見出しまで約28px。
     セクションの上padding 60px では足りないぶんだけ足す */
  .dept {
    padding-top: 8px;
  }
  .dept__desc {
    margin-top: 0;
  }
  .dept__photo {
    width: 100%;
    aspect-ratio: 4/3;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 6px;
  }

  .dept__head {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
  }
  /* 以下は font-size 以外もPC値を継承すると375pxで一桁pxになる箇所 */
  .dept__main {
    margin-bottom: 42px;
  }
  .kinen-cond li {
    padding-left: 24px;
    text-indent: -24px;
  }
  .kinen-cond li::before {
    width: 24px;
  }
  .kinen-link {
    margin-top: 32px;
  }
  .kinen-link .btn__arrow {
    width: 24px;
    height: 24px;
  }
  .dept .dot-grid {
    gap: 10px 24px;
  }
  .dept .dot-grid li {
    gap: 8px;
    font-size: 16px;
  }
  .dept .dot-grid li::before {
    width: 14px;
    height: 14px;
  }
  .dept .info-box>p {
    font-size: 16px;
  }
  .kinen-cond li {
    font-size: 16px;
  }
  /* 凡例が長い（「健康保険で禁煙治療（禁煙外来）の適応となる条件」＋注記）ので、
     絶対配置のタブのままだと箱からはみ出す。SPでは普通の見出しに落とす。*/
  .kinen-cond {
    padding-top: 24px;
  }
  .kinen-cond .info-box__title {
    position: static;
    display: block;
    padding: 0;
    margin-bottom: 14px;
    background: none;
  }
  /* 絶対配置をやめるので、線をまたぐ前提の白マスク（common.css）も消す。
     残すと .info-box を基準に絶対配置されて箱の中を白く塗りつぶす。*/
  .kinen-cond .info-box__title::before {
    content: none;
  }
  /* 注記は横に置けないので、凡例・④行とも改行して真下に出す。
     li は text-indent:-34.5px のぶら下げなので、注記側で打ち消す */
  .kinen-cond__note {
    display: block;
    margin-left: 0;
    font-size: 14px;
  }
  .kinen-cond li .kinen-cond__note {
    margin-left: 0;
    text-indent: 0;
  }
  /* 文字が長く2行に落ちるので、行送りを詰めて上下paddingを削り、
     min-height で高さを揃える（1行でも2行でもボタンの高さが変わらない）*/
  /* SPは <br class="pc_none"> でラベルが2行になるので、高さは固定せず
     auto + min-height のままにする（トップの .form-dl .btn は1行なので46px固定）。
     左右のアキだけトップに合わせる。 */
  .kinen-link .btn {
    line-height: 1.5;
    height: auto;
    min-height: 56px;
    padding: 2px 10px 2px 20px;
    font-size: 15px;
    gap: 12px;
  }
}