/* お知らせ詳細（/news/<slug>）。templates/main/news.mjs
   参照: docs/design-main.md §3-8、capture/compare/news__medical-facility-criteria/slices、capture/main-current/news__medical-dx-addition-notice・news___nimNZve・news__k_zPg29w
   写真なし。グラデ帯の上に H1（茶黒 32/24・字間 0.2em）＋日付＋チップ → 点線（1120 幅）→ 本文（944 幅）→ 丸ボタン「‹ 一覧へ戻る」
   規約: 100vh 禁止・overflow-x:hidden を body に付けない・タップ標的 44px・ch 単位禁止・色はトークンのみ */

.news-article { padding-top: clamp(64px, 6vw, 80px); padding-bottom: var(--section-y); }

/* 見出し・日付・チップ（参照は 1 行目を詰めて折る。balance にしない） */
.news-article-title { font-size: var(--fs-h2); color: var(--c-ink-deep); letter-spacing: 0.2em; line-height: 1.6; }
.news-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; }
.news-article-meta .news-date { font-family: var(--f-en); font-size: 13px; letter-spacing: 0.06em; color: var(--c-ink-soft); }
.news-article-rule { margin-top: 24px; }

/* 本文（Markdown）。参照: 掲示物・ポスターは白地を含んだ画像そのものを左寄せ・原寸（最大で本文幅 944）で置く。パネルで包まない・引き伸ばさない */
.news-article-body { margin-top: clamp(32px, 4vw, 56px); }
.news-fig { margin: 32px 0 0; }
.news-fig + .news-fig { margin-top: 40px; }
.news-fig img { display: block; max-width: 100%; width: auto; height: auto; border-radius: 0; }
.news-article-body p img { border-radius: 0; }   /* 段落内の画像（asset: を外して md が解決したもの）も角丸なし */

/* 一覧へ戻る（中央。参照: SP 262px・PC 280px の固定幅ピル。幅いっぱいにはしない） */
.news-article-back { margin-top: clamp(48px, 6vw, 72px); text-align: center; }
.news-article-back .btn { min-width: 262px; }

/* 〜767: 現行 urala.com（390・2026-09-25 撮影 capture/live-design/main/news__medical-facility-criteria/ip390.png）の実測に合わせる。
   H1 は 24px（字高 22・「【施設基準につきまして】」が 1 行。--fs-h2 のままだと 390 で 27px になり 2 行に折れていた）、
   カテゴリのチップは見える枠 64×25・12px（一覧 news-index の 〜767 と同じ値）。Figma に SP の詳細ページは無い */
@media (max-width: 767px) {
  .page-news .news-article-title { font-size: 24px; }
  .page-news .news-article-meta .chip { padding: 0 10px; font-size: 12px; }
  .page-news .news-article-meta .chip::before { inset: 9.5px 0; }
}
/* 〜599: 2026-09-26 現行 urala.com（393・344・440）を最後までスクロールして出現アニメを終えた状態で DOM を実測。
   題 24px・行高 1.2（28.8）・字の上端 y144、題 → カテゴリのチップ 57、本文 14px・行高 1.7・段落の下 32、「一覧へ戻る」の文字はボタン中心の 10 左、山形は白。
   「一覧へ戻る」の下端 → 口の上端 83（旧 80 はフッターの margin-top −26 と足して 58） */
@media (max-width: 599px) {
  .page-news .news-article { padding-top: 60px; padding-bottom: 105px; }
  .page-news .news-article-title { line-height: 1.2; }
  .page-news .news-article-meta { margin-top: 22px; gap: 4px 16px; }
  /* 日付・札は現行の計算値（2026-09-28 393・344 実測）: 日付 Zen Maru 14px/1.7・字間 0.02em・#271200（「2025.12.29」61.6 幅）→ 16 → 札 13px・字間 normal・左右 8 ＋枠 1・70×25.4。
     旧は Roboto 13px・字間 0.06em・#574D45（74 幅）と 12px の札で、札が 8〜9 右に出ていた */
  .page-news .news-article-meta .news-date { font-family: var(--f-round); font-size: 14px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-deep); }
  .page-news .news-article-meta .chip { padding: 0 9px; font-size: 13px; letter-spacing: 0; }
  .page-news .news-article-meta .chip::before { inset: 9.3px 0; }
  .page-news .news-article-body { font-size: 14px; line-height: 1.7; }
  .news-article-body > * + * { margin-top: 32px; }
  .news-article-body li + li { margin-top: 0.2em; }
  .page-news .news-article-back { margin-top: 40px; }   /* 最後の掲示の画像 → ボタン 40（現行 344/393/440。旧 48） */
  .page-news .news-article-back .btn { padding-left: 36px; padding-right: 56px; }
  .page-news .news-article-back .btn-arrow { color: var(--c-white); }
}
@media (min-width: 768px) {
  .news-article-back .btn { min-width: 280px; }
  .news-article-body li + li { margin-top: 0; }   /* 参照（PC）: 箇条書きは行間 2 のみで詰める */
}
@media (min-width: 768px) and (max-width: 1079px) {
  .news-article { padding-top: 80px; }
  .news-article-rule { margin-top: 20px; }
  .news-article-body { margin-top: 56px; }
}
@media (min-width: 1080px) {
  .news-article-meta { margin-top: 20px; }
  .news-article-rule { margin-top: 32px; }
}
/* 1280〜: 点線の容器は原本の min(100% − 160, 1136)（他の下層ページと同じ実測） */
@media (min-width: 1280px) { .page-news .container-md { width: min(100% - 160px, 1136px); } }

/* ---------- 1080〜: Figma pc/news詳細（482:450・1366 幅）に合わせる（2026-09-25） ----------
   縦の並び（1366 実測。ヘッダー 89 の直下から）:
     H1 y193（ヘッダー下 104）944 幅・左 211、40px/1.7・字間 6%・#271200（PC/h1 の色違い）→ 32
     → 日付 Roboto 13px/1.8・字間 0 #574D45 → 21 → カテゴリ（白・角丸 20・左右 12・高さ 29・13px/1.8 #E56300、並びは 5 間隔）→ 38
     → 点線（1136 幅）→ 53 → 本文。画像は 944 幅の枠（Figma の灰色の箱 944×531）、文章は 752 幅で中央（左 307）16px/1.7・字間 0・#574D45、画像 → 文章 64
     → 最後の文章 → 丸ボタン 111（280×79・山形は左端から 40）→ ボタン → フッター（口の上端）124（フッター margin-top 64 ＋ 60）
   掲示物の画像は原寸より拡大しない（677 幅まで）。944 の枠の中央に置く */
@media (min-width: 1080px) {
  .page-news .news-article { padding-top: 104px; padding-bottom: 60px; }
  .page-news .news-article-title { font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-news .news-article-meta { min-height: 29px; align-items: center; margin-top: 32px; gap: 4px 21px; }   /* 札の無い記事（11/7 診療時間変更）も札 29 高の行ぶん取る（Figma 482:450: 日付の上端 → 点線 67。旧は 62.4 で点線と本文が 5.6 上に出ていた） */
  .page-news .news-article-meta .news-date { font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .page-news .news-article-meta .chip { height: 29px; padding: 0 12px; font-family: var(--f-round); font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-orange); }   /* Figma 482:450 のカテゴリ名は #E56300（一覧 477:403 のカテゴリは #574D45 で別物）。スマホの現行もオレンジ */
  .page-news .news-article-meta .chip::before { inset: 0; border: 0; border-radius: 20px; background: var(--c-white); }
  .page-news .news-article-rule { margin-top: 38px; }
  .page-news .news-article-body { max-width: 752px; margin: 53px auto 0; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-news .news-fig { margin: 64px -96px 0; }
  .page-news .news-fig + .news-fig { margin-top: 40px; }
  .page-news .news-fig img { margin-inline: auto; }
  .page-news .news-fig + :not(.news-fig) { margin-top: 64px; }
  .page-news .news-article-back { margin-top: 111px; }
  .page-news .news-article-back .btn-back { min-width: 280px; padding: 0 60px; }
  .page-news .news-article-back .btn-back > .btn-arrow { left: 28px; }   /* 枠線 2 ＋ 28 ＋ 26 枠の山形の左余白 9.75 ≒ 40（Figma 583 − 543） */
}

/* ============ 演出（docs/MOTION.md。属性は templates/main/news.mjs）============
   html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。本文の段落は動かさない。
   見出しブロック（題 rise → 日付とチップ +0.16 秒 → 点線 wipe +0.28 秒）・掲示物の画像（ml-unroll）・「一覧へ戻る」（up）だけ。
   ml-unroll: 掲示物が上から下へ広がるように現れる（clip-path だけ。縦長の掲示でも画面に見えている上端から先に出る） */
@keyframes ml-unroll { from { opacity: 0; clip-path: inset(0 0 100% 0); } 20% { opacity: 1; } to { clip-path: inset(0 0 0 0); } }
html.mo .news-fig[data-mo="ml-unroll"].is-in { animation-name: ml-unroll; animation-duration: calc(var(--mo-dur) * 1.6); }

/* ---------- 600〜1079: 現行 urala.com（STUDIO 541〜910 ／ 911〜1120）に合わせる（2026-09-28 現行を出現アニメの後に 841 / 1000 で実測） ----------
   題の上端 y196（main の 90 ＋ 106）40px/48・字間 0.2em #271200 → 32 → 日付・カテゴリ（13px。見た目 25 高・911〜 は 31 高）→ 36（911〜 32）→ 点線（容器幅）→ 56 → 本文 16px/1.7・字間 0 #271200
   （600〜910 は本文の左右を 32 内側に、911〜 は左寄せで 792 幅まで）→ 64（911〜 17）→ 掲示の画像（容器幅いっぱい・画像の間 64）→ 112 → 「一覧へ戻る」280×80。
   左右の余白は 600〜910 が 40、911〜 が 56 */
@media (min-width: 600px) and (max-width: 1079px) {
  body.page-news .main { --gutter: 40px; }
  .page-news .news-article { padding-top: 106px; }
  .page-news .news-article-title { font-size: 40px; line-height: 48px; letter-spacing: 0.2em; }
  .page-news .news-article-meta { margin-top: 22.5px; gap: 4px 16px; }
  /* 日付は現行の計算値（2026-09-28 673・841・1000 実測）: Zen Maru 17px/1.7・字間 0.02em・#271200（「2025.12.29」74.8 幅）→ 16 → 札。旧 Roboto 13px・#574D45 で札が 14〜15 左に寄っていた。1080〜 は Figma（Roboto 13）のまま */
  .page-news .news-article-meta .news-date { margin-top: 4px; font-family: var(--f-round); font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-deep); }   /* margin-top 4: 行の中央寄せのまま字の箱を 2 下げ、札の上端と揃える（現行は上揃え） */
  .page-news .news-article-meta .chip { padding: 0 13px; font-size: 13px; letter-spacing: 0; }
  .page-news .news-article-meta .chip::before { inset: 9.5px 0; background: var(--c-white); }
  .page-news .news-article-rule { margin-top: 26.5px; }
  .page-news .news-article-body { margin-top: 56px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .page-news .news-article-body > :not(.news-fig) { padding-inline: 32px; }
  .page-news .news-fig { margin-top: 64px; }
  .page-news .news-fig + .news-fig { margin-top: 64px; }
  .page-news .news-fig img { width: 100%; }
  .page-news .news-article-back { margin-top: 112px; }
  /* 「一覧へ戻る」（280×80）の下端 → 口の上端: 現行 673・841 とも 124（2026-09-28 出現アニメの後に実測。旧は --section-y のままで 112〜122 の差） */
  .page-news .news-article { padding-bottom: 110px; }
}
@media (min-width: 911px) and (max-width: 1079px) {
  body.page-news .main { --gutter: 56px; }
  .page-news .news-article-meta .chip::before { inset: 6.5px 0; }
  .page-news .news-article-rule { margin-top: 28.5px; }
  .page-news .news-article-body > :not(.news-fig) { max-width: 792px; padding-inline: 0; }
  .page-news .news-fig { margin-top: 17px; }
  .page-news .news-article { padding-bottom: 104px; }   /* ボタンの下端 → 口の上端 現行 1000 で 118 */
}

/* ---------- 〜1079 の本文の組み（2026-09-28 現行 urala.com の 4 記事を 390 / 673 / 841 / 1000 で出現アニメの後に実測） ----------
   ・カテゴリの無い記事（11月7日の診療時間変更）: 現行は空のカテゴリ欄も 1 行ぶんの高さを取るので、日付の行の高さはチップの当たり判定 44 に揃える（旧は 22 で本文が 20 上がっていた）。
   ・題は 600〜1079 も成り行きで折る（旧は見出し共通の balance で「…診療／時間変更のお知らせ」と早く折れていた。現行は「…のお／知らせ」）。
   ・段落の間: 〜599 は 32、600〜910 は 64、911〜1079 は 16（現行の段落の下余白。旧は 600〜 が 19.2）。
   ・箇条書き（医療DXの掲示）: 16px・行 22.4・#271200、項目の間 10、左は本文の左端から 20（黒丸はその外）。600〜910 も本文の 32 の内寄せには入らない。箇条書き → 画像 10。
   この節はファイルの最後に置く（上の 600〜1079 の節の画像 width: 100% を打ち消すため）。
   ・画像は原寸より拡大しない（医療DXのポスター 677 幅は 841・1000 でも 677・左寄せ。施設基準の掲示 1241 幅は容器いっぱい） */
@media (max-width: 1079px) {
  .page-news .news-article-meta { min-height: 44px; }
  .page-news .news-article-body > ul:not(.news-fig) { margin-left: 20px; padding-left: 0; padding-inline: 0; list-style: disc; }   /* 600〜910 の本文の 32 の内寄せ（> :not(.news-fig)）より強く */
  .page-news .news-article-body li { font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--c-ink-deep); }
  .page-news .news-article-body li + li { margin-top: 10px; }
  .page-news .news-article-body ul + .news-fig { margin-top: 10px; }
  .page-news .news-fig img { width: auto; max-width: 100%; margin-inline: 0; }
}
@media (max-width: 599px) {
  .page-news .news-article-body { color: var(--c-ink-deep); letter-spacing: 0; }
  .page-news .news-fig + .news-fig { margin-top: 32px; }   /* 掲示の画像の間 32（現行 390。旧 40） */
  .page-news .news-article-back { margin-top: 64px; }      /* 最後の段落・画像 → ボタン 64（現行 390 の 3 記事。旧 40） */
}
/* 「一覧へ戻る」: 現行 541〜 は 280×80・18px 字間 0.06em（旧は 〜1079 が 60 高・673 で 262 幅） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-news .news-article-back .btn { min-width: 280px; min-height: 80px; font-size: 18px; letter-spacing: 0.06em; }
  /* 山形は白の 8×13 を左 33（旧はピーチの 16 枠で細く薄く見えた）。26 枠の山形は 6.5×13・枠の左から 9.75（枠線 2 ＋ 21 ＋ 9.75 ≒ 33） */
  .page-news .news-article-back .btn-arrow { left: 21px; width: 26px; height: 26px; margin-top: -13px; color: var(--c-white); }
}
/* 911〜1079: 本文が文字で終わる記事は、最後の段落 → ボタン 64（画像で終わる記事は 112 のまま。現行 1000） */
@media (min-width: 911px) and (max-width: 1079px) {
  .page-news .news-article:has(.news-article-body > p:last-child) .news-article-back { margin-top: 64px; }
}
@media (min-width: 600px) and (max-width: 1079px) {
  .page-news .news-article-title { text-wrap: wrap; }
  .page-news .news-article-body > p + * { margin-top: 64px; }
  .page-news .news-article-body > p + .news-fig { margin-top: 64px; }
}
@media (min-width: 911px) and (max-width: 1079px) {
  .page-news .news-article-body > p + * { margin-top: 16px; }
  .page-news .news-article-body > p + .news-fig { margin-top: 17px; }
}

/* ---------- 下部 CTA の見直し案（docs/CTA.md・templates/main/_cta.mjs・news.mjs。旗がオフのときは要素が無い） ----------
   c08 電話の 1 行 .news-article-tel（診療日程の 2 本）・c09 文字リンク .news-article-more（掲示の 2 本）: 本文 → これらは今の「本文 → 戻る」の間、これら → 戻るは 32。
   戻るの上の間は幅ごとに :has() を含む強い指定があるので、同じ強さ（0,5,1）にして後に書く */
.news-article-tel, .news-article-more { margin-top: clamp(48px, 6vw, 72px); text-align: center; }
@media (max-width: 599px) { .page-news :is(.news-article-tel, .news-article-more) { margin-top: 64px; } }
@media (min-width: 600px) and (max-width: 1079px) { .page-news :is(.news-article-tel, .news-article-more) { margin-top: 112px; } }
@media (min-width: 911px) and (max-width: 1079px) { .page-news .news-article:has(.news-article-body > p:last-child) :is(.news-article-tel, .news-article-more) { margin-top: 64px; } }
@media (min-width: 1080px) { .page-news :is(.news-article-tel, .news-article-more) { margin-top: 111px; } }
body.page-news .news-article.news-article :is(.news-article-tel, .news-article-more) + .news-article-back { margin-top: 32px; }
.news-article-tel .case-cta-ic { background: var(--c-peach-soft); }   /* 電話カードの外（白っぽい地）に 1 つで置くので、受話器の丸はトップのアクセスの電話と同じピーチ */
/* c11: 戻るを枠線（btn-outline）にしたとき、山形は白ではなくオレンジ（上の 〜599・600〜1079 の白い山形は塗りのボタン用）。乗せたときは塗りに反転するので白 */
.page-news .news-article-back .btn-outline .btn-arrow { color: var(--c-orange); }
@media (hover: hover) and (pointer: fine) { .page-news .news-article-back .btn-outline:hover .btn-arrow { color: var(--c-white); } }