/* 医療コラムの記事（キー column-single。Figma 医療コラム記事ページ_PC 1604:218617・SP）
   元：医院\nishinippori-scratch\HTML\医療コラム記事ページ_PC_1604-218617\公開用\css\style.css の s01〜s04（ヘッダー・予約の帯・フッターは共通の部品）。
   パンくず・題名・前後の記事は assets/nn/news/style.css（先に読み込む）。ここは記事の頭・本文（ブロック）・目次・途中の予約の案内・監修医師。
   本文はブロックのまま出す（inc/custom/nn-posts.php の nn_post_body）：
     段落 p.p-medLead（導入文）→ 目次 .nn-toc → 見出し2ごとの箱 .p-medSec（h2・p・h3・p／.p-medCard（h3＋本文＋箇条書き））
     → 予約の案内 .nn-ctaMid → まとめ・参考文献 → 監修医師 aside.nn-colDoctor
   ホバーは PC だけ（@media (hover: hover)）・0.3秒／Ease Out。 */

/* 静的 HTML と同じ書体（明朝は Shippori Mincho B1 を先に） */
.nn-main--column-single {
  --nn-ff-mincho: "Shippori Mincho B1", var(--font-family-heading, "Shippori Mincho"), "Noto Serif JP", serif;
  --nn-ink: var(--color-text-secondary, #333);
  --nn-border-secondary: var(--color-border-secondary, #bdbdbd);
  font-family: var(--font-family-body, "Noto Sans JP", sans-serif);
  text-spacing-trim: space-all;
}
.nn-main--column-single :where(*, *::before, *::after) { box-sizing: border-box; }

/* 題名の箱は 1160px（2行目が 27字で 1135px） */
.nn-main--column-single .nn-pt-title-wrap { width: min(1160px, 100% - var(--nn-gutter) * 2); }

/* ===== 記事の頭（x=160・幅 1120px） ===== */
.nn-colArt { width: min(var(--nn-inner), 100% - var(--nn-gutter) * 2); margin-inline: auto; }
.nn-colArt-meta { color: var(--nn-ink); font-size: 16px; line-height: 28.8px; letter-spacing: 2.08px; }
.nn-colArt-doctor {
  display: inline-block; padding-block: 10px; margin-block: -10px;
  text-decoration: underline !important; text-underline-offset: 4px;
  transition: opacity .3s ease-out;
}
.nn-colArt-photo { margin-top: 20px; border-radius: 10px; overflow: hidden; aspect-ratio: 1120 / 650; }
.nn-colArt-photo :where(figure) { height: 100%; margin: 0; }
.nn-colArt-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 本文 ===== */
.nn-colArt-body { color: var(--nn-text); font-size: 16px; line-height: 26px; letter-spacing: .1em; }
.nn-colArt-body :where(p, h2, h3, ul, ol, figure) { margin: 0; }
.nn-colArt-body :where(ul, ol) { list-style: none; padding: 0; }
.nn-colArt-body a:not([class]) { color: var(--color-text-link, #6bbde3); text-decoration: underline; text-underline-offset: 3px; }

/* 導入文（幅 960px・行 32px・段落の間 20px。写真から 40px） */
.nn-colArt-body > .p-medLead { max-width: 960px; color: var(--nn-ink); line-height: 32px; }
.nn-colArt-body > .p-medLead:first-child { margin-top: 40px; }
.nn-colArt-body > .p-medLead + .p-medLead { margin-top: 20px; }
.nn-colArt-body > :first-child:not(.p-medLead) { margin-top: 40px; }

/* 目次（白いカード・2列。項目 500×56px・下に点線。注意書き「ページ内目次」） */
.nn-toc {
  margin-top: 40px; padding: 18px 40px 38px; border-radius: 10px;
  background: var(--nn-white); box-shadow: var(--nn-shadow-card);
}
.nn-toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: space-between; column-gap: 30px; }
.nn-toc-item {
  display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 7px 14px 7px 3px;
  border-bottom: 1px dashed var(--nn-border-secondary);
  color: var(--nn-text); font-size: 16px; line-height: 1.2; letter-spacing: .1em; text-decoration: none;
  transition: color .3s ease-out;
}
.nn-toc-text { flex: 1; min-width: 0; }
.nn-toc-arrow {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 10px; background: var(--nn-white);
}
.nn-toc-arrow img { width: 16px; height: 16px; }

/* 見出し2ごとの箱（前の箱・目次から 80px） */
.nn-colArt-body > .p-medSec { margin-top: 80px; }
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h2 {
  position: relative; padding-top: 18px; border-top: 1px solid var(--nn-gray);
  color: var(--nn-accent-deep);
  font-family: var(--nn-ff-mincho); font-size: 28px; font-weight: 700; line-height: 34px; letter-spacing: .05em;
  scroll-margin-top: 20px;
}
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 2px;
  border-radius: 0 0 50px 50px; background: var(--nn-accent-deep);
}
/* 見出し2の下の本文の列（x=163・幅 954px。まとまりの間 32px・見出しから 32px） */
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > :not(h2, .wp-block-group__inner-container) { max-width: 954px; margin-left: 3px; }
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >* + * { margin-top: 32px; }
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >p + p { margin-top: 12px; }

/* 見出し3（左に 4px のオレンジの線）。見出し3＋本文は左 12px・間 12px・本文の幅 922px */
.nn-colArt-body .p-medSec h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--nn-ff-mincho); font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: .05em;
}
.nn-colArt-body .p-medSec h3::before {
  content: ""; flex: none; align-self: stretch; width: 4px; min-height: 28px; border-radius: 1px; background: var(--nn-accent);
}
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3,
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3 ~ :is(p, ul, ol) { padding-left: 12px; }
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3 + * { margin-top: 12px; }
.nn-colArt-body .p-medCard { padding-left: 12px; }
.nn-colArt-body :is(.p-medCard, .p-medCard > .wp-block-group__inner-container) >:not(h3) { max-width: 922px; }
.nn-colArt-body :is(.p-medCard, .p-medCard > .wp-block-group__inner-container) >* + * { margin-top: 12px; }

/* 本文の画像の仮の枠（Figma の「Image」：灰色 #d9d9d9・角 10px。x=163・幅 1120px で本文の列より右へ 3px はみ出す。
   見出し2「禁煙すると…」の下は 1120×763、「禁煙を成功させる…」の下は 1120×650。写真を入れたら中の img を枠いっぱいに出す） */
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > .nn-colImg {
  max-width: none; width: 100%; aspect-ratio: 1120 / 650;
  border-radius: 10px; overflow: hidden; background: var(--color-extra-d9d9d9, #d9d9d9);
}
.nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > .nn-colImg--763 { aspect-ratio: 1120 / 763; }
.nn-colArt-body .nn-colImg img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 箇条書き（■ 8px・ゴールド。項目の間 4px） */
.nn-colArt-body .p-medSec ul { display: flex; flex-direction: column; gap: 4px; padding-inline: 2px; }
.nn-colArt-body .p-medSec ul > li { position: relative; max-width: 871px; padding-left: 16px; }
.nn-colArt-body .p-medSec ul > li::before {
  content: ""; position: absolute; top: 9px; left: 0; width: 8px; height: 8px; background: var(--nn-gold);
}
/* 箇条書き＋補足文章（見出しは太字・補足は点なし／小さな「・」の並び） */
.nn-colArt-body ul[data-nn-list] > li::before { top: 8px; }
.nn-colList-head { display: block; font-weight: 700; }
.nn-colArt-body .p-medSec .nn-colList-sub { gap: 0; padding: 0; }
.nn-colArt-body .p-medSec .nn-colList-sub > li { padding-left: 24px; }
.nn-colArt-body .p-medSec .nn-colList-sub > li::before {
  top: 11px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

/* 参考文献（番号つき・左 24px） */
.nn-colArt-body .p-medSec ol { padding-left: 24px; list-style: decimal; }
.nn-colArt-body .p-medSec ol > li { overflow-wrap: anywhere; }

/* ===== 途中の予約の案内（幅 760px・中央。前後 80px） ===== */
.nn-ctaMid {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: min(760px, 100%); margin: 80px auto 0; padding: 20px;
  border-radius: 10px; background: var(--nn-white); box-shadow: var(--nn-shadow-card);
}
.nn-ctaMid-text { font-size: 16px; line-height: 26px; letter-spacing: .1em; text-align: center; }
.nn-ctaMid-btns { display: flex; justify-content: center; gap: 20px; width: 100%; }
.nn-ctaMid-btns > li { flex: 0 1 241px; min-width: 0; }
.nn-ctaMid-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 66px; padding: 13px 12px 12px; border-radius: 4px;
  color: var(--nn-white); text-decoration: none;
  transition: background-color .3s ease-out;
}
.nn-ctaMid-btn--web { background: var(--nn-accent); }
.nn-ctaMid-btn--line { background: var(--nn-line-green-soft); }
.nn-ctaMid-pill {
  display: block; width: min(182px, 100%); padding: 4px 0; border-radius: 50px; background: var(--nn-white);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .05em; text-align: center; white-space: nowrap;
}
.nn-ctaMid-btn--web .nn-ctaMid-pill { color: var(--nn-accent); }
.nn-ctaMid-btn--line .nn-ctaMid-pill { color: var(--nn-line-green-soft); }
.nn-ctaMid-main { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.nn-ctaMid-btn--line .nn-ctaMid-main { gap: 0; }
.nn-ctaMid-main img { flex: none; }
.nn-ctaMid-main .nn-ctaMid-arrow { margin-left: 8px; }
.nn-ctaMid-btn--line .nn-ctaMid-main .nn-ctaMid-arrow { margin-left: 12px; }
.nn-ctaMid-label {
  font-family: var(--nn-ff-mincho); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap;
}
.nn-colArt-body > .nn-ctaMid + .p-medSec { margin-top: 80px; }

/* ===== 監修医師（幅 954px・中央。参考文献から 80px） ===== */
.nn-colDoctor {
  display: flex; flex-direction: column; gap: 20px;
  width: min(954px, 100%); margin: 80px auto 0; padding: 32px;
  border-radius: 10px; background: var(--nn-white);
}
.nn-colDoctor > h3 {
  display: flex; align-items: center; gap: 8px; min-height: 28px;
  font-family: var(--nn-ff-mincho); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: .05em;
}
.nn-colDoctor > h3::before {
  content: ""; flex: none; align-self: stretch; width: 4px; min-height: 28px; border-radius: 1px; background: var(--nn-accent);
}
.nn-colDoctor__row { display: flex; align-items: flex-start; gap: 32px; }
.nn-colDoctor__photo { flex: none; width: 160px; }
.nn-colDoctor__photo img { width: 160px; height: 180px; border-radius: 5px; object-fit: cover; }
.nn-colDoctor__info {
  flex: 1 1 698px; min-width: 0; display: flex; flex-direction: column;
  font-size: 12px; line-height: 14px; letter-spacing: .1em;
}
/* 医院名（下線）・名前（明朝 20px）・経歴・主な資格 */
.nn-colDoctor__info > p:first-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nn-colDoctor__info > h3 {
  margin-top: 8px; font-family: var(--nn-ff-mincho); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: .1em;
}
.nn-colDoctor__info > h3 + p { margin-top: 16px; }
.nn-colDoctor__info > p:not(:first-child):not(h3 + p) { margin-top: 8px; }
.nn-colDoctor__info li { position: relative; padding-left: 18px; }
.nn-colDoctor__info li::before { content: "•"; position: absolute; left: 7px; }

/* 前後の記事：監修医師から 80px */
.nn-main--column-single .nn-artnav { margin-top: 80px; }

/* ===== ホバー（PC だけ） ===== */
@media (hover: hover) {
  .nn-colArt-doctor:hover { opacity: .7; }
  .nn-toc-item:hover { color: var(--nn-accent-deep); }
  .nn-ctaMid-btn--web:hover { background: var(--nn-accent-deep); }
  .nn-ctaMid-btn--line:hover { background: var(--nn-line-green); }
}

/* ===== 間の幅 ===== */
@media (max-width: 1024px) {
  .nn-toc { padding-inline: 28px; }
  .nn-toc-list { column-gap: 24px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > :not(h2, .wp-block-group__inner-container) { margin-left: 0; }
}
@media (max-width: 900px) {
  .nn-toc-list { grid-template-columns: minmax(0, 1fr); }
}

/* ===== スマホ（Figma の SP：幅 390px） ===== */
@media (max-width: 767px) {
  .nn-main--column-single .nn-pt--article .nn-pt-title-wrap { width: auto; padding: 46px 0 60px; }
  .nn-main--column-single .nn-pt--article .nn-pt-title { line-height: 1.2; }
  .nn-main--column-single .nn-pt--article .nn-pt-title::after { margin-top: 20px; }

  .nn-colArt { width: calc(100% - 40px); }
  .nn-colArt-meta { font-size: 14px; line-height: 1.8; letter-spacing: .1em; }
  .nn-colArt-photo { margin-top: 24px; aspect-ratio: 350 / 237; }
  .nn-colArt-body { font-size: 14px; line-height: 1.6; }
  .nn-colArt-body > .p-medLead { line-height: 28px; }

  .nn-toc { padding: 10px 16px 24px; }
  .nn-toc-item { min-height: 48px; padding: 8px 6px 8px 3px; font-size: 14px; }

  .nn-colArt-body > .p-medSec { margin-top: 64px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h2 { padding-top: 14px; font-size: 18px; line-height: 22px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h2::before { width: 60px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > :not(h2, .wp-block-group__inner-container) { width: calc(100% - 6px); margin-left: 3px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >* + * { margin-top: 24px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h2 + * { margin-top: 32px; }
  .nn-colArt-body .p-medSec h3 { font-size: 16px; line-height: 19px; }
  .nn-colArt-body .p-medSec h3::before { min-height: 19px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3,
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3 ~ :is(p, ul, ol) { padding-left: 4px; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) >h3 + * { margin-top: 8px; }
  .nn-colArt-body .p-medCard { padding-left: 4px; }
  .nn-colArt-body :is(.p-medCard, .p-medCard > .wp-block-group__inner-container) >* + * { margin-top: 8px; }
  .nn-colArt-body .p-medSec ul { padding: 0; line-height: 20px; }
  .nn-colArt-body .p-medSec ul > li { padding-left: 14px; }
  .nn-colArt-body .p-medSec ul > li::before { top: 7px; width: 6px; height: 6px; }
  .nn-colArt-body .p-medSec .nn-colList-sub > li { padding-left: 18px; }
  .nn-colArt-body .p-medSec .nn-colList-sub > li::before { top: 8px; left: 6px; width: 4px; height: 4px; }
  .nn-colArt-body .p-medSec ol { padding-left: 22px; }
  /* 画像の仮の枠（SP：1つ目は x=20・350×238、2つ目は x=23・344×200） */
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > .nn-colImg { width: calc(100% - 6px); aspect-ratio: 344 / 200; }
  .nn-colArt-body :is(.p-medSec, .p-medSec > .wp-block-group__inner-container) > .nn-colImg--763 { width: 100%; margin-left: 0; aspect-ratio: 350 / 238; }

  .nn-ctaMid { margin-top: 72px; padding: 20px; }
  .nn-ctaMid-text { font-size: 14px; line-height: 22px; }
  .nn-ctaMid-btns { flex-direction: column; gap: 16px; }
  .nn-ctaMid-btns > li { flex: none; }
  .nn-ctaMid-btn { min-height: 80px; padding: 12px; gap: 8px; justify-content: center; }
  .nn-ctaMid-pill { width: min(220px, 100%); }
  .nn-ctaMid-main { padding-left: 0; }
  .nn-ctaMid-label { font-size: 18px; }
  .nn-colArt-body > .nn-ctaMid + .p-medSec { margin-top: 64px; }

  .nn-colDoctor { margin-top: 64px; padding: 28px 16px; gap: 16px; }
  .nn-colDoctor > h3 { min-height: 19px; font-size: 16px; line-height: 19px; }
  .nn-colDoctor > h3::before { min-height: 19px; }
  .nn-colDoctor__row { flex-direction: column; gap: 16px; }
  .nn-colDoctor__photo { width: 100%; }
  .nn-colDoctor__photo img { width: 100%; height: auto; aspect-ratio: 318 / 250; object-position: 50% 25%; }
  .nn-colDoctor__info { flex: none; width: 100%; }

  .nn-main--column-single .nn-artnav { margin-top: 64px; padding-bottom: 68px; }
}