/* お知らせ一覧（/news・/news/list/<category>）。templates/main/news-index.mjs
   参照: docs/design-main.md §3-7、capture/compare/news/slices/{pc1280,open841,fold344}-ref-01.png
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ）/ 1080〜
   規約: 100vh 禁止・center+overflow-x 併用禁止・overflow-x:hidden を body に付けない・タップ標的 44px・ch 単位禁止・色はトークンのみ */

.news-index { padding-top: clamp(8px, 2vw, 32px); padding-bottom: var(--section-y); }

/* ---- ヒーロー写真（角丸 24。〜1079 は 3:2 の写真、1080〜 は横長 3:1 の帯画像）---- */
.news-hero { max-width: 1080px; margin-inline: auto; border-radius: var(--r-l); overflow: clip; }
.news-hero picture { display: block; }
.news-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* 768〜: 下辺の中央だけを「なだらかな山」で切り抜く（参照: 幅の約 42%・高さ 40px の丘。左右の下辺は直線のまま）。
   マスク 2 層の和: 上層＝下 48px を除く全面、下層＝下 48px に山形の切り欠き SVG（横は幅に追従・縦は 48px 固定）。背後のグラデがそのまま見える */
@media (min-width: 768px) {
  .news-hero {
    --news-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 48' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H1000V48H720C640 48 600 8 500 8S360 48 280 48H0Z'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(#000, #000), var(--news-notch);
    -webkit-mask-size: 100% calc(100% - 47px), 100% 48px;
    -webkit-mask-position: top, bottom;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(#000, #000), var(--news-notch);
    mask-size: 100% calc(100% - 47px), 100% 48px;
    mask-position: top, bottom;
    mask-repeat: no-repeat;
  }
}
@media (min-width: 1080px) { .news-hero img { aspect-ratio: 3 / 1; } }
/* 1280〜: 容器は原本の min(100% − 160, 1136)。写真は症状一覧の帯写真と同じ min(100vw − 200, 1170)（1280: 1080 ／ 1440〜: 1170） */
@media (min-width: 1280px) {
  .page-news-index .container { width: min(100% - 160px, 1136px); }
  /* 2026-09-25 Figma pc/news catch（482:290）: 1366 で写真 1170×386・左 98（= 100vw − 196）。容器（1136）より広いので左右に負の余白を等分して中央に置く
     （旧: width だけ広げて margin 0 → 1366 で左 115〜右 1281 に右寄りではみ出していた） */
  .news-hero { max-width: none; width: min(100vw - 196px, 1170px); margin-inline: calc((100% - min(100vw - 196px, 1170px)) / 2); }
}

/* ---- 見出し（ラベル NEWS ＋ H1）。参照: 写真の下端から NEWS まで 344=20px / 841・1280=約 32px ---- */
.news-head { padding-top: 20px; padding-bottom: clamp(32px, 4vw, 64px); }
@media (min-width: 768px) { .news-head { padding-top: 28px; } }
/* 〜599: 参照の H1 は 28px（--fs-h1 は 344 で 38px になるため、この帯だけ参照値に合わせる） */
@media (max-width: 599px) { .news-head h1.sec-title { font-size: 28px; } }

/* ---- 本体: 〜1079 はカテゴリー → 記事行の縦積み、1080〜 は 2 カラム（記事 1fr ／ カテゴリー 288）---- */
.news-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.news-main { min-width: 0; }

/* カテゴリー: 〜1079 はラベル｜縦線｜チップ（〜599 はチップ縦積み、600〜 は横並び。狭ければ折り返す） */
.news-cats { order: -1; display: flex; align-items: stretch; gap: 20px; background: transparent; border-radius: 0; padding: 0; }
.news-cats-title { display: flex; align-items: center; flex: none; padding-right: 20px; border-right: 1px solid var(--c-line-2); font-size: 18px; letter-spacing: 0.2em; color: var(--c-ink-deep); line-height: 1.5; }
.news-cats-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }   /* チップの当たり判定 44px（見た目 32px）なので gap 0 で見た目の間隔が 12px */
.news-cats-list li { display: flex; }
@media (min-width: 600px) {
  .news-cats-list { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 8px; }
}

/* 記事行（共通 .news-list を使用）。参照: 日付 12px・チップ 12px（ピル 28px）・タイトル 16px。〜1079 はタイトルが 2 行目、1080〜 は 1 行 */
.news-index-list .news-link { padding-block: 16px; }
.news-index-list .news-date { flex: none; font-size: 12px; }
.news-index-list .chip { font-size: 12px; padding: 0 14px; }
.news-index-list .chip::before { inset: 8px 0; }
.news-index-list .news-title { padding-left: 8px; }

@media (min-width: 768px) {
  .news-cats { gap: 24px; }
  .news-cats-title { font-size: 20px; padding-right: 24px; }
  .news-cats-list { gap: 0 12px; }
}
/* 768〜1079: 参照（841）は日付＋チップ／タイトルの 2 段のまま（共通 .news-list は 768〜 で 1 行にするので戻す） */
@media (min-width: 768px) and (max-width: 1079px) {
  .news-index-list .news-title { flex-basis: 100%; min-width: 0; }
}

/* 1080〜: 2 カラム。カテゴリーは白カード（H2 ＋ 点線 ＋ チップ縦積み）。参照: カード 288 幅・内側 40/32・行間 64 */
@media (min-width: 1080px) {
  .news-body { grid-template-columns: minmax(0, 1fr) 288px; column-gap: 72px; align-items: start; }
  .news-cats { order: 2; display: block; background: var(--c-white); border-radius: var(--r-l); padding: 40px 32px; }
  .news-cats-title { display: block; padding: 0 0 24px; border-right: 0; border-bottom: var(--dash); margin-bottom: 18px; }
  .news-cats-list { flex-direction: column; align-items: flex-start; gap: 0; }
  .news-index-list .news-link { padding-block: 10px; min-height: 64px; }
  .news-index-list .news-title { padding-left: 12px; }
}

/* ---------- 〜599: 参照 440/393/344 の実測に合わせる（capture/sp-compare/main__news 2026-09-24） ----------
   見出し: 写真の下端 → 「NEWS」の字頭 14（15px/0.23em・中央の字間補正なし）、英字 → H1 29、H1 の字の下端 → カテゴリーのチップ上端 80。
   カテゴリー: ラベル 17px・字間 0.08em・オレンジ（参照 89 幅・字高 16）、区切りは点線（3 描いて 2 空ける・#C5B5A8・x151・長さ 69）、区切り → チップ 25。
   チップ: 見た目 26 高（当たり判定 44 のまま −7 で重ねて見た目の間隔 12）、14px・字間 0・左右 13。
   記事行: 上に点線（最後の行の下は線なし）、日付 Zen Maru 13px・字間 0（2026-09-28 現行の計算値。「2026.05.01」55.5 幅）→ チップ 6 右（13px・見た目 25 高・左右 10）、
   タイトル 14px・行送り 24・左余白 0（参照は 440 で「【重要】…（6/25・6/26）」が 1 行に入る）。行の点線 → 1 段目の中心 29.5、タイトルの字頭 → 次の点線 35。
   カテゴリー → 最初の点線 48。最後のタイトルの字の下端 → 口の上端 139.5 */
@media (max-width: 599px) {
  .page-news-index .news-head { padding-top: 7px; padding-bottom: 60px; }
  /* 2 周目: 英字は 16px（参照 440「NEWS」191〜245・字高 13。15px は 192〜244・字高 12。料金表・FAQ・プライバシー・症状一覧も同じ 16px）。行の箱は 25.5 に据え置き */
  .page-news-index .news-head .sec-head.center .sec-label { font-size: 16px; line-height: 25.5px; letter-spacing: 0.23em; text-indent: 0; }   /* 共通の body.area-main .sec-head.center .sec-label（0,4,1）より強く */
  .page-news-index .news-head .sec-head > .sec-label + * { margin-top: -10px; }
  .page-news-index .news-index { padding-bottom: 146px; }
  .page-news-index .news-body { gap: 48px; }

  .page-news-index .news-cats { gap: 25px; }
  /* 2 周目: 18px・字間 0.06em（参照「カテゴリー」の字頭 23/41/61/82/99 = 送り 19・字高 16。17px/0.08em は送り 18.25・字高 15）。字が広がったぶん右の余白 40 → 36（点線は x151 のまま） */
  .page-news-index .news-cats-title { position: relative; border-right: 0; padding-right: 36px; font-size: 18px; letter-spacing: 0.06em; color: var(--c-orange); }
  .page-news-index .news-cats-title::after { content: ""; position: absolute; right: 0; top: 4px; bottom: 8px; width: 1px; background: repeating-linear-gradient(to bottom, var(--c-line-2) 0 3px, transparent 3px 5px); }
  .page-news-index .news-cats-list li + li { margin-top: -7px; }
  .page-news-index .news-cats .chip { padding: 0 13px; font-size: 14px; letter-spacing: 0; }   /* 現行 ALL／お知らせ: 14px・字間 normal・左右 12 ＋枠 1（こちらの枠は ::before の内側なので 13）・幅 51（2026-09-28 実測。旧 13px/0.06em で 53） */
  .page-news-index .news-cats .chip::before { inset: 9px 0; }

  .page-news-index .news-index-list .news-row { border-top: var(--dash); border-bottom: 0; }
  .page-news-index .news-index-list .news-link { min-height: 0; padding: 7px 0 16px; gap: 0 8px; }   /* 日付 → 札の枠 8（現行 393 実測） */
  /* 日付は現行の計算値どおり Zen Maru Gothic 13px・字間 0（「2026.05.01」の幅 55.5 = 参照のインク 20〜75。旧の「参照は Roboto 11px」は誤り。2026-09-28 現行を実測） */
  .page-news-index .news-index-list .news-date { font-family: var(--f-round); font-size: 13px; letter-spacing: 0; line-height: 44px; }
  .page-news-index .news-index-list .chip { padding: 0 9px; font-size: 13px; letter-spacing: 0; }   /* 現行「お知らせ」札: 13px・字間 normal・左右 8 ＋枠 1・70×25.4（2026-09-28 実測。旧 12px・左右 10 で 73×25） */
  .page-news-index .news-index-list .chip::before { inset: 9.3px 0; }
  .page-news-index .news-index-list .news-title { margin-top: -3px; padding-left: 0; font-size: 14px; line-height: 1.7; letter-spacing: 0; }   /* 2 周目: 字間 0（参照「【11月7日(土)】診療時間変更のお知らせ」29〜269。0.02em は 29〜275） */
  /* 札のある行: 現行は日付の行が札の 25.4 高になり（札の無い行は日付の 23.4）、題が 2 下がる（2026-09-28 393 実測。旧は札の行ごとに 2 ずつ上へずれ、最後の行で −5） */
  .page-news-index .news-index-list .news-link:has(.chip) .news-title { margin-top: -1px; }
}

/* .news-wd（日付の曜日「（水）」）は 1080〜 だけ。〜1079 は原本の表示（曜日なし）のまま */
.news-wd { display: none; }

/* ---------- 1080〜: Figma pc/news（477:403・1366 幅）に合わせる（2026-09-25） ----------
   縦の並び（1366 実測。ヘッダー 89 の直下から）: 写真 y151（ヘッダー下 62）1170×386・角丸 50・下辺中央を山形に切り欠き（mask「Vectorz」444:2922）
     → 20 → 英字 18px/1.7・字間 25% → 0 → H1 40px/1.7・字間 6% → 51 → 記事の一覧（944 幅・中央）
   記事行（news 482:735）: 上に点線、行 = 上 16 ＋ 中身 35 ＋ 下 16 ＋ 点線（送り 67）。日付 13px/1.8・字間 0 #574D45（Zen Maru・曜日付き）→ 24
     → カテゴリ（白・角丸 40・左右 24・高さ 35・16px #574D45）→ 24 → 題 16px/1.7・字間 0・オレンジ
   Figma は一覧の 100 下に丸ボタン 280×79 を置き、その 112 下がフッター。content にボタンの中身が無いので出さず、一覧の下端 → フッター（口の上端）を 112 にする（フッター margin-top 64 ＋ 48）
   カテゴリー: Figma pc/news には無い（2 カラムの白カードは 944 幅の一覧と並ばない）。content の ALL／お知らせ は残すので、一覧の上に 1 行で置く。
     見た目は Figma のコラム一覧（899:13288）のカテゴリー: 見出し 20px/1.7・字間 6% オレンジ（PC/h4）、項目 16px/1.7 #574D45 ＋ 5px の丸 → 8 → 字。今いるカテゴリはオレンジ */
@media (min-width: 1080px) {
  .page-news-index .news-index { padding-top: 62px; padding-bottom: 48px; }
  .page-news-index .news-hero {
    border-radius: 50px;
    --news-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1170 48' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H1170V48H877C843.3 48 809.8 42.3 778.2 30.5C731.8 13.3 662.5 2.4 585 2.4C507.5 2.4 438.2 13.3 391.8 30.5C360.2 42.3 326.7 48 293 48H0Z'/%3E%3C/svg%3E");
  }
  .page-news-index .news-hero img { aspect-ratio: 1170 / 386; }

  .page-news-index .news-head { padding-top: 20px; padding-bottom: 51px; }
  .page-news-index .news-head .sec-head { gap: 0; }
  .page-news-index .news-head .sec-label { font-size: 18px; line-height: 1.7; letter-spacing: 0.25em; }
  .page-news-index .news-head h1.sec-title { font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; }

  .page-news-index .news-body { grid-template-columns: minmax(0, 1fr); width: min(100%, 944px); margin-inline: auto; gap: 24px; }
  .page-news-index .news-cats { order: -1; display: flex; align-items: center; gap: 24px; background: transparent; border-radius: 0; padding: 0; }
  .page-news-index .news-cats-title { display: flex; align-items: center; margin: 0; padding: 0 24px 0 0; border-bottom: 0; border-right: 1px solid var(--c-line-2); font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .page-news-index .news-cats-list { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 24px; }
  .page-news-index .news-cats .chip { gap: 8px; height: 44px; min-width: 44px; padding: 0; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-news-index .news-cats .chip::before { position: static; inset: auto; z-index: auto; width: 5px; height: 5px; border: 0; border-radius: 50%; background: currentColor; flex: none; }
  .page-news-index .news-cats .chip.is-active { color: var(--c-orange); }

  .page-news-index .news-wd { display: inline; }
  .page-news-index .news-index-list .news-link { flex-wrap: nowrap; align-items: center; gap: 0 24px; min-height: 66px; padding: 15.5px 0; }   /* 点線 1px を含めて送り 67 */
  .page-news-index .news-index-list .news-date { font-family: var(--f-round); font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink-soft); white-space: nowrap; }
  .page-news-index .news-index-list .chip { flex: none; height: 35px; padding: 0 24px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-news-index .news-index-list .chip::before { inset: 0; border: 0; border-radius: 40px; background: var(--c-white); }
  .page-news-index .news-index-list .news-title { flex: 1 1 auto; min-width: 0; padding-left: 0; font-size: 16px; line-height: 1.7; letter-spacing: 0; }
}
/* カテゴリーの項目は文字色だけ変える（共通の a.chip:hover は白字＋オレンジ塗り。塗りの無いこの形だと字が消える） */
@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
  .page-news-index .news-cats a.chip:hover { color: var(--c-orange); }
  .page-news-index .news-cats a.chip:hover::before { background: currentColor; }
}

/* ============ 演出（docs/MOTION.md。属性は templates/main/news-index.mjs）============
   html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。動かすのは opacity / translate / scale / clip-path だけ。
   ヒーロー写真（ml-window）: 角丸の窓が内側から開き、写真は 1.08 → 1 にゆっくり落ち着く（枠 .news-hero はもともと overflow:clip＋角丸なので拡大は長めでよい）。
   見出し（pageHead）+0.28 秒 → カテゴリ +0.36 秒 → 記事の行 +0.44 秒から stagger */
@keyframes ml-window { from { opacity: 0; clip-path: inset(7% 6% 7% 6% round 48px); } 35% { opacity: 1; } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes ml-settle { from { scale: 1.08; } }
html.mo .news-hero[data-mo="ml-window"].is-in { animation-name: ml-window; animation-duration: calc(var(--mo-dur) * 1.8); }
html.mo .news-hero[data-mo="ml-window"].is-in img { animation: ml-settle calc(var(--mo-dur) * 3.5) cubic-bezier(.25, .6, .3, 1) var(--mo-d, 0ms) backwards; }

/* ---------- 600〜1079: 現行 urala.com（STUDIO 541〜910 ／ 911〜1120）に合わせる（2026-09-28 現行を出現アニメの後に 841 / 1000 で実測） ----------
   共通: 写真の上端 y120（main の 90 ＋ 30）→ 写真 → 20 → 英字 NEWS 18px/25.2 字間 0.25em → すぐ下に H1 40px/68 → 48 → 本体。
   600〜910（841）: 左右の余白 40。写真は 3:2。カテゴリーは 1 行（高さ 66 の中で縦の中央）:「カテゴリー」20px/34 字間 0.06em オレンジ → 26 → 点線の縦線 → 24 → チップ（14px・見た目 26 高・左右 13・枠 1px・白地・間 10）。
     → 40 → 記事の行（上に点線、上 17 → 日付 Zen Maru 13px・チップ 13px 見た目 25 高 → 8 → 題 16px/1.7 字間 0 → 16）。
   911〜1079（1000）: 左右の余白 56。写真は横長の帯（888×292）。本体は 2 カラム（記事 1fr ｜ 72 ｜ カテゴリーの白カード 288・角丸 16・内側 32/40）。
     カード: 「カテゴリー」20px/34 オレンジ → 下 21 に点線 → 20 → チップ（16px・見た目 37 高・枠 2px・送り 55）。
     記事の行は 1 行組み（上下 17・日付 13px → 12 → チップ 13px 見た目 31 高 → 24 → 題 16px/1.7。チップは題の縦の中央）。 */
@media (min-width: 600px) and (max-width: 1079px) {
  body.page-news-index .main { --gutter: 40px; }
  .page-news-index .news-index { padding-top: 30px; }
  .page-news-index .news-hero { max-width: none; }
  .page-news-index .news-head { padding-top: 20px; padding-bottom: 48px; }
  .page-news-index .news-head .sec-head { gap: 0; }
  .page-news-index .news-head .sec-head.center .sec-label { font-size: 18px; line-height: 25.2px; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-news-index .news-head .sec-head > .sec-label + * { margin-top: 0; }
  .page-news-index .news-head h1.sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }
  .page-news-index .news-body { gap: 40px; }
  .page-news-index .news-cats { min-height: 66px; align-items: center; gap: 24px; }
  .page-news-index .news-cats-title { position: relative; align-self: center; padding-right: 26px; border-right: 0; font-size: 20px; line-height: 34px; letter-spacing: 0.06em; color: var(--c-orange); }
  .page-news-index .news-cats-title::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, var(--c-line-2) 0 3px, transparent 3px 5px); }
  .page-news-index .news-cats-list { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; }
  .page-news-index .news-cats .chip { padding: 0 13px; font-size: 14px; letter-spacing: 0; }
  .page-news-index .news-cats .chip::before { inset: 9px 0; background: var(--c-white); }
  .page-news-index .news-cats .chip.is-active::before { background: var(--c-orange); }
  .page-news-index .news-index-list .news-row { border-top: var(--dash); border-bottom: 0; }
  .page-news-index .news-index-list .news-link { min-height: 0; padding: 7px 0 16px; gap: 0 8px; }   /* 日付 → 札の枠 8（現行 841 実測） */
  .page-news-index .news-index-list .news-date { font-family: var(--f-round); font-size: 13px; letter-spacing: 0; line-height: 44px; }   /* 現行 Zen Maru Gothic 13px（〜599 と同じ） */
  .page-news-index .news-index-list .chip { padding: 0 13px; font-size: 13px; letter-spacing: 0; }
  .page-news-index .news-index-list .chip::before { inset: 9.5px 0; background: var(--c-white); }
  .page-news-index .news-index-list .news-title { flex-basis: 100%; min-width: 0; margin-top: -1px; padding-left: 0; font-size: 16px; line-height: 1.7; letter-spacing: 0; }
  /* 最後の題の字の下端 → 口の上端: 現行 673・841 とも 176（2026-09-28 出現アニメの後に実測。旧は --section-y のままで 110〜120）。行の下 16 ＋ フッターの margin-top 14 を引いた値 */
  .page-news-index .news-index { padding-bottom: 146px; }
}
@media (min-width: 911px) and (max-width: 1079px) {
  body.page-news-index .main { --gutter: 56px; }
  .page-news-index .news-hero img { aspect-ratio: 1170 / 386; }
  .page-news-index .news-body { grid-template-columns: minmax(0, 1fr) 288px; column-gap: 72px; align-items: start; }
  .page-news-index .news-cats { order: 2; display: block; min-height: 0; background: var(--c-white); border-radius: 16px; padding: 31px 32px 33px; }
  .page-news-index .news-cats-title { display: block; padding: 0 0 20px; border-bottom: var(--dash); margin-bottom: 20px; }
  .page-news-index .news-cats-title::after { content: none; }
  .page-news-index .news-cats-list { flex-direction: column; align-items: flex-start; gap: 11px 0; }
  .page-news-index .news-cats .chip { padding: 0 14px; font-size: 16px; }
  .page-news-index .news-cats .chip::before { inset: 3.5px 0; border-width: 2px; }
  .page-news-index .news-index-list .news-link { flex-wrap: nowrap; align-items: center; gap: 0; padding: 17px 0 16px; }
  .page-news-index .news-index-list .news-date { flex: none; min-width: 64px; margin-right: 12px; font-family: var(--f-round); font-size: 13px; letter-spacing: 0; line-height: 27px; }
  .page-news-index .news-index-list .chip { flex: none; margin: -6.5px 24px -6.5px 0; }   /* 当たり判定 44 のまま、行の高さは見た目の 31 で決める（現行 1 行の行 64） */
  .page-news-index .news-index-list .chip::before { inset: 6.5px 0; }
  .page-news-index .news-index-list .news-title { flex: 1 1 0; margin-top: 0; }
  .page-news-index .news-index { padding-bottom: 140px; }   /* 最後の題 → 口の上端 現行 1000 で 170 */
}