/* HIROSHIMA DAYS — /hiroshima/ の見た目。クリーム地にティール・赤・黄。角丸と有機的な写真の切り抜き。 */
:root {
  --hd-cream: #f7f3ea; --hd-teal: #0f4c5c; --hd-teal-2: #1f6f7a; --hd-red: #e63946; --hd-yellow: #f4c542;
  --hd-ink: #1d2a2e; --hd-mute: #6b7a7f; --hd-line: #e4ddd0;
  --hd-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --hd-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hd { margin: 0; overflow-x: hidden; background: var(--hd-cream); color: var(--hd-ink); font-family: var(--hd-font); line-height: 1.8; font-size: 16px; }
body.hd a { color: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 9999; top: -100px; left: 16px; padding: 12px 18px; background: #fff; color: #000; }
.skip-link:focus { top: 16px; }

/* ヘッダー: 右上に「記事を探す」「メニュー」。記事ページでは左にロゴ、トップではロゴはヒーローの中 */
.hd-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 4.5vw; max-width: 1040px; margin: 0 auto; box-sizing: border-box; }   /* 記事本文（.content-area）と同じ幅 */
/* スクロールしても上に貼り付いて付いてくる（2026-09-20 本人指示）。
   ヘッダーは本文と同じ 1040px 幅なので、背景だけ ::before で画面の横いっぱいに敷く。
   トップ（.hd-header--home）はヒーローに重ねる absolute なので、この指定は効かない＝今までどおり。 */
.hd-header { position: sticky; top: 0; z-index: 40; }
.hd-header::before { content: ""; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--hd-cream); box-shadow: 0 1px 0 var(--hd-line), 0 8px 20px rgba(15, 76, 92, .05); }
.hd-header--home { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1040px; box-sizing: border-box; z-index: 5; justify-content: flex-end; padding: 16px 4.5vw; }   /* 本文と同じ幅に収める */
.hd-header--home::before { display: none; }
.hd-logo { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-decoration: none; }
.hd-logo__mark { grid-row: 1 / span 2; width: 40px; height: 40px; }
.hd-logo__text { font-family: var(--hd-display); font-weight: 800; font-size: 20px; letter-spacing: .02em; color: var(--hd-teal); line-height: 1.1; }
.hd-logo__text b { color: var(--hd-red); }
.hd-logo__text--light { color: #fff; } .hd-logo__text--light b { color: var(--hd-yellow); }
.hd-logo__tag { font-size: 11px; color: var(--hd-mute); letter-spacing: .06em; }
.hd-topnav { display: flex; align-items: center; gap: 1.4rem; font-size: 12px; font-weight: 700; color: var(--hd-teal); position: relative; }
.hd-topnav__item { display: inline-flex; align-items: center; gap: .35rem; color: var(--hd-teal); text-decoration: none; cursor: pointer; list-style: none; }
.hd-topnav__item::-webkit-details-marker { display: none; }
.hd-topnav__item:hover { color: var(--hd-red); }
.hd-menu { position: relative; }
.hd-menu__panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: .6rem 0; background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(15,76,92,.18); display: flex; flex-direction: column; }
.hd-menu__panel a { padding: .55rem 1.2rem; color: var(--hd-ink); text-decoration: none; font-weight: 700; font-size: 13px; }
.hd-menu__panel a:hover { background: var(--hd-cream); color: var(--hd-red); }

.hd-main { max-width: 1040px; margin: 0 auto; padding: 0 4.5vw 4rem; }

/* 有機的な写真の枠 */
.hd-blob { overflow: hidden; background: #dfe8e8; border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; }
.hd-blob--b { border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; }
.hd-blob--c { border-radius: 50% 50% 42% 58% / 58% 42% 58% 42%; }
.hd-blob--s { border-radius: 22px; }
.hd-blob img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ヒーロー: 画像のとおり。左に水彩の枠に入ったロゴ、上にレモン、下に路面電車、中央右に写真、右下に波と鳥居 */
.hd-hero { position: relative; padding: 0 0 2rem; }
.hd-hero__art { position: relative; height: 600px; margin-top: 40px; margin-bottom: -200px; }   /* 右上の「記事を探す／メニュー」と枠が重ならないよう少し下げる。イラストは高さの 7 割までに収まるので、下の空きは負のマージンで詰める（% 指定の位置を変えないため高さは触らない） */
.hd-hero__brand { position: absolute; left: 0; top: calc(30% - 50px); width: 31%; min-width: 320px; padding: 2.6rem 2rem 2.4rem; text-align: center; z-index: 3; background: #fff; border-radius: 50%; box-shadow: 0 6px 24px rgba(15, 76, 92, .08); }   /* 楕円の白背景（水彩の枠は使わない） */
.hd-hero__logo { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--hd-display); font-weight: 800; font-size: clamp(17px, 1.7vw, 22px); color: var(--hd-teal); letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.hd-hero__logo .hd-logo__mark { width: 38px; height: 38px; flex: none; }
.hd-hero__logo b { color: var(--hd-red); }
.hd-hero__tag { margin: .6rem 0 0; font-size: 11.5px; font-weight: 700; color: var(--hd-teal); letter-spacing: .04em; white-space: nowrap; }
.hd-hero__lemonback { position: absolute; left: calc(7% - 110px); top: calc(-2% + 30px); width: 39%; z-index: 0; }   /* レモンの後ろの薄い水色のにじみ */
.hd-hero__lemon { position: absolute; left: calc(7% - 35px); top: calc(-2% + 30px); width: 20%; z-index: 4; }
.hd-hero__tram { position: absolute; left: -16px; top: calc(30% + 30px); width: 38.5%; z-index: 4; }   /* 画像自体が右下がりなので回転はしない */   /* ロゴの楕円（top 30%-50px, 高さ約148px）の真下 */
.hd-hero__photo { position: absolute; left: 18%; top: -4%; width: 82%; aspect-ratio: 1672 / 941; height: auto; background-size: cover; background-position: center; z-index: 1;
  -webkit-mask: url("img/frame-hero-mask.webp?v=1") center / 100% 100% no-repeat; mask: url("img/frame-hero-mask.webp?v=1") center / 100% 100% no-repeat; }   /* 枠と同じ箱に置き、枠の開口部の形で切り抜く */
.hd-hero__frame { position: absolute; left: 18%; top: -4%; width: 82%; height: auto; z-index: 2; pointer-events: none; }   /* 本文幅の中に収める（右端＝本文の右端） */
.hd-hero__torii { position: absolute; right: -40px; top: calc(59% - 100px); width: 36%; z-index: 4; }   /* 枠の下端（枠画像の見える部分は高さの94.8%まで）に鳥居の上端が触れる位置 */
.hd-deco { position: absolute; border-radius: 50%; pointer-events: none; z-index: 4; }
.hd-deco--dot1 { width: 14px; height: 14px; left: 2%; top: 14%; background: var(--hd-red); }
@media (max-width: 960px) { .hd-hero__art { height: 480px; } .hd-hero__brand { min-width: 220px; } }
@media (max-width: 760px) {
  .hd-hero__art { height: auto; margin-bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 3.5rem; }
  .hd-hero__brand, .hd-hero__photo { position: static; width: 100%; min-width: 0; }
  .hd-hero__brand { padding: 2.4rem 1.6rem; }
  .hd-hero__photo { height: 220px; }
  .hd-hero__lemon, .hd-hero__lemonback, .hd-hero__frame, .hd-deco { display: none; }
  .hd-hero__tram { position: static; width: 60%; }
  .hd-hero__torii { position: static; width: 70%; }
}
/* スマホの並べ替え（2026-09-20 本人指示）: 景色の写真を一番上、ロゴをその下、
   電車と鳥居のイラストは一番下に左右で並べる。非表示のレモン・枠・丸は格子に入らない */
@media (max-width: 600px) {
  .hd-hero__art {
    /* minmax(0,1fr) にしないと、画面幅いっぱいの写真に引っ張られて桁が広がる */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* ロゴ・電車・鳥居はすべて絶対配置なので、格子に要る行は写真だけ。
       下の余白も、絵の一番下（電車の見え下端 264px）＝写真の行の下端 267px でちょうど収まる
       ので 0 でよい。60px 取っていたぶん、NEW STORIES との間が空きすぎていた（2026-09-20） */
    grid-template-areas: "photo photo";
    align-items: start; column-gap: .6rem; row-gap: 1rem;
    padding-bottom: 0;
  }
  /* ヒーローだけ画面いっぱいに広げ、ここで切る。写真は画面より左右にはみ出す大きさなので、
     clip しないとページの横幅が広がって実機で右に余白が出る（overflow: clip は hidden と違い
     スクロール箱を作らないので、縦スクロールには影響しない） */
  .hd-hero { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 4.5vw; overflow-x: clip; }
  /* イラストの下端（電車 264px）から NEW STORIES まで 10px（2026-09-20 本人指示で 30px からさらに 20px 詰め）。
     写真の行の下端が 267px なので、ここは 7px にしている */
  .hd-hero + .hd-section { margin-top: 7px; }
  .hd-hero__art { margin-top: 0; padding-top: 0; }
  /* 写真（2026-09-20 本人指示でさらに 2 割拡大）。
     箱 660px = 132vw、高さ 317px。前回の見え幅 550×264 のちょうど 1.2 倍で、形は変わらない。
     margin-top はマスク上部の透明 15.7%（317px の約 50px）ぶん。絵の上端が画面の最上部に来る */
  .hd-hero__photo { grid-area: photo; width: 132vw; margin-left: calc(50% - 66vw);
    margin-top: -50px; height: 317px;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  /* ロゴの白い楕円（2026-09-20 本人指示で 2 割縮小 → 写真の中央へ）。
     写真の見えている範囲は縦 0〜233px なので、その中心 116px に置く。
     幅 80%・上下パディング 2.4rem→1.5rem で、455×145 の 0.8 倍＝364×116 になる（文字は縮めない）。
     スマホは position: static で z-index が効かず DOM 順で写真が上に来てしまうため絶対配置にする */
  .hd-hero__brand { grid-area: auto; position: absolute; z-index: 2;
    left: 50%; top: 116px; transform: translate(-50%, -50%);
    /* もう一回り小さく＆透ける白に（2026-09-20 本人指示）。364×116 の 0.8 倍＝291×93。
       白ベタと影をやめて写真を出す。文字は記事ヘッダーと同じ大きさのまま */
    width: 64%; padding: 26px 1rem;
    background: transparent; box-shadow: none;
    /* 白ベタが無くなると写真の街並みに文字が埋もれるので、文字の後ろだけ白くぼかして浮かせる */
    text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 20px rgba(255, 255, 255, .8), 0 1px 2px rgba(255, 255, 255, .95);
    /* 記事ヘッダーの .hd-logo とそっくり同じ組みにする（2026-09-20 本人指示）。
       40px の丸が2行ぶんを受け持ち、右に大文字（20px）→キャッチ（10px）。
       h1 を display: contents にして、中の svg と span を直接この格子に載せている */
    display: grid; grid-template-columns: 40px auto; column-gap: 12px;
    justify-content: center; align-items: center; text-align: left; }
  .hd-hero__logo { display: contents; font-size: 20px; }
  .hd-hero__logo .hd-logo__mark { grid-row: 1 / span 2; width: 40px; height: 40px; }
  .hd-hero__logo > span { grid-column: 2; grid-row: 1; letter-spacing: .02em; line-height: 1.1; }
  .hd-hero__tag { grid-column: 2; grid-row: 2; margin: 0;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: #fff;
    /* 白文字にする（2026-09-20 本人指示）。親の白いぼかしのままだと白地に白で消えるので、
       キャッチだけ影を濃いティールに差し替える */
    text-shadow: 0 1px 3px rgba(15, 76, 92, .65), 0 0 12px rgba(15, 76, 92, .45); }
  /* 電車と鳥居は白い楕円の下半分に重ねる（2026-09-20 本人指示）。格子の行に置くと楕円の
     負マージンと噛み合って位置が読めないので、.hd-hero__art（position: relative）を基準に
     絶対配置する。top はそれぞれの絵の上の透明余白（電車15%・鳥居9.8%）を引いて、
     見えている上端が揃うように決めている。楕円（z-index:2）より前 */
  /* レモンは左上に出す（2026-09-20 本人指示）。後ろの水色のにじみ（lemonback）は
     クリーム地の上で効く絵なので、写真の上では使わずレモンだけ。透明余白は左8.5%・上9.4% */
  .hd-hero__lemon { display: block; grid-area: auto; position: absolute; z-index: 3;
    left: -14px; top: 0; width: 96px; }
  /* 後ろの青いにじみも出す（2026-09-20 本人指示）。PC と同じ比率（レモンの 1.95 倍の幅、
     左に 0.4 レモンぶんずらす）。レモン(z:3)の後ろ、写真の前 */
  .hd-hero__lemonback { display: block; grid-area: auto; position: absolute; z-index: 2;
    left: -20px; top: -28px; width: 187px; }
  /* 左右に 30px ずつ振る（2026-09-20 本人指示）。絵には左右に透明の余白があるので、
     画面の外に出るのは鳥居の右端 1.7px だけ（ヒーローの overflow-x: clip で切れる） */
  .hd-hero__tram { grid-area: auto; position: absolute; z-index: 3; left: -30px; top: 155px;
    width: 200px; max-width: 42%; }
  .hd-hero__torii { grid-area: auto; position: absolute; z-index: 3; right: -30px; top: 165px;
    width: 200px; max-width: 42%; }
}

/* セクション見出し */
.hd-section { margin: 3.2rem 0; }
.hd-main--after-article { padding-top: 0; padding-bottom: 2rem; }
.hd-main--after-article .hd-section:first-child { margin-top: 0; }   /* 記事下（あわせて読みたい → CATEGORY）: 本文との間は本文側の余白に任せる */
/* あわせて読みたい: アイキャッチ付きの内部リンク 4 枚 */
.hd-related__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.hd-related__link, body.hd a.hd-related__link { display: block; color: inherit; text-decoration: none; }
.hd-related__photo { display: block; aspect-ratio: 16 / 10; margin-bottom: .6rem; border-radius: 16px; overflow: hidden; background: #dfe8e8; }
.hd-related__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.hd-related__link:hover img { transform: scale(1.04); }
.hd-related__photo--band { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hd-teal), var(--hd-teal-2)); color: #fff; font-family: var(--hd-display); font-weight: 800; letter-spacing: .12em; font-size: 12px; }
.hd-related__title { display: block; margin-top: .35rem; font-weight: 700; font-size: 14.5px; line-height: 1.55; color: var(--hd-teal); }
.hd-related__link:hover .hd-related__title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .hd-related__list { grid-template-columns: repeat(2, 1fr); gap: .9rem; } }
.hd-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--hd-line); padding-bottom: .5rem; }
.hd-section__title { margin: 0; font-family: var(--hd-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); color: var(--hd-teal); letter-spacing: .02em; }
.hd-section__title em { font-style: normal; color: var(--hd-red); }
.hd-section__title small { font-family: var(--hd-font); font-size: 14px; color: var(--hd-mute); margin-left: .6rem; font-weight: 700; }
.hd-section__sub { font-family: var(--hd-font); font-size: 60%; color: var(--hd-ink); }
.hd-more { font-size: 13px; font-weight: 700; color: var(--hd-red); text-decoration: none; white-space: nowrap; }
.hd-spark { color: var(--hd-red); font-size: 70%; }
.hd-empty { color: var(--hd-mute); }

/* NEW STORIES */
.hd-stories { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem; }
.hd-card__link { display: block; text-decoration: none; }
.hd-card--lead { grid-row: span 2; }
.hd-card--lead .hd-card__photo { height: 300px; margin-bottom: 1rem; border-radius: 28px; }   /* 大きいアイキャッチは にじみ形ではなく角丸の長方形 */
.hd-card:not(.hd-card--lead) .hd-card__link { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; }
.hd-card:not(.hd-card--lead) .hd-card__photo { height: 120px; border-radius: 22px; }
.hd-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--hd-display); font-weight: 800; color: var(--hd-teal); background: linear-gradient(135deg, #dfe8e8, #cfe0e3); letter-spacing: .1em; }
.hd-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 12px; color: var(--hd-mute); font-family: var(--hd-display); }
.hd-label { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--hd-red); color: #fff; font-family: var(--hd-font); font-size: 11px; font-weight: 700; }
.hd-card__title { margin: 0 0 .4rem; font-size: 18px; line-height: 1.5; font-weight: 900; color: var(--hd-teal); }
.hd-card--lead .hd-card__title { font-size: 22px; }
.hd-card__excerpt { margin: 0; font-size: 13.5px; color: var(--hd-mute); }
.hd-card__link:hover .hd-card__title { color: var(--hd-red); }
@media (max-width: 760px) { .hd-stories { grid-template-columns: 1fr; } .hd-card--lead { grid-row: auto; } .hd-card--lead .hd-card__photo { height: 220px; } .hd-card:not(.hd-card--lead) .hd-card__link { grid-template-columns: 110px 1fr; } .hd-card:not(.hd-card--lead) .hd-card__photo { height: 90px; } }

/* 特集バナー: 水彩のティール地（画像）に歩く人 */
.hd-feature { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; margin: 5rem 0; padding: 2.6rem 3rem; color: #fff; isolation: isolate; }
.hd-feature__bg { position: absolute; inset: -6% -2%; width: 104%; height: 112%; object-fit: fill; z-index: -1; pointer-events: none; }
.hd-feature__title { margin: 0 0 .6rem; font-size: clamp(28px, 4vw, 42px); font-weight: 900; line-height: 1.2; }
.hd-feature__title::after { content: ""; display: block; width: 120px; height: 5px; margin-top: .5rem; background: var(--hd-red); border-radius: 3px; }
.hd-feature__lead { margin: 0 0 1.4rem; font-size: 15px; line-height: 1.9; }
.hd-feature__photo { height: 240px; position: relative; z-index: 1; }
.hd-feature__walker { position: absolute; left: 30%; bottom: 6%; width: 200px; opacity: .9; pointer-events: none; }
.hd-feature__leaf { position: absolute; right: 4%; top: 4%; width: 70px; z-index: 2; pointer-events: none; }
@media (max-width: 760px) { .hd-feature { grid-template-columns: 1fr; padding: 2rem 1.6rem; } .hd-feature__photo { height: 180px; } .hd-feature__walker { display: none; } }
/* スマホはイラストの背景（banner-teal.webp）をやめて、同じ色のベタ枠にする（2026-09-20 本人指示）。
   色はイラストの地の色そのもの（不透明部分の平均 #024554）。絵は上下6%・左右2%はみ出していたので、
   ベタにするぶん角を丸めて枠らしく見せる */
@media (max-width: 600px) {
  .hd-feature__bg { display: none; }
  .hd-feature { background: #024554; border-radius: 20px; }
  /* 上下の空きを 80px → 32px に（2026-09-20 本人指示）。隣の節の余白（3.2rem）と相殺して
     大きいほうが効くので、前後の節の側も一緒に詰めないと変わらない */
  .hd-feature { margin: 32px 0; }
  .hd-section:has(+ .hd-feature) { margin-bottom: 32px; }
  .hd-feature + .hd-section { margin-top: 32px; }
}

/* ボタン */
.hd-btn { display: inline-block; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
.hd-btn--red { background: var(--hd-red); color: #fff; }
.hd-btn--red:hover { background: #c92f3c; }
.hd-btn--outline { border: 2px solid var(--hd-red); color: var(--hd-red); }
.hd-btn--outline:hover { background: var(--hd-red); color: #fff; }

/* PICK UP */
.hd-list { list-style: none; margin: 0; padding: 0; }
.hd-list__item { border-bottom: 1px solid var(--hd-line); }
.hd-list__link { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; align-items: center; padding: 1.1rem 0; text-decoration: none; }
.hd-list__photo { height: 100px; }
.hd-list__title { margin: 0 0 .3rem; font-size: 17px; font-weight: 900; color: var(--hd-teal); line-height: 1.5; }
.hd-list__link:hover .hd-list__title { color: var(--hd-red); }
.hd-list__excerpt { margin: 0; font-size: 13px; color: var(--hd-mute); }
@media (max-width: 600px) { .hd-list__link { grid-template-columns: 100px 1fr; } .hd-list__photo { height: 76px; } .hd-list__excerpt { display: none; } }

/* CATEGORY */
.hd-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }   /* 1行3カラム */
@media (max-width: 760px) { .hd-cats { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
@media (max-width: 420px) { .hd-cats { grid-template-columns: 1fr; } }
body.hd .hd-cat, body.hd .hd-cat:hover { color: #fff; }   /* body.hd a { color: inherit } より強くして白に */
.hd-cat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem 1.2rem 1.6rem; border-radius: 999px; color: #fff; text-decoration: none; transition: transform .2s; }
.hd-cat::after { content: "→"; flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.18); font-weight: 700; }
.hd-cat:hover { transform: translateY(-2px); }
.hd-cat--1, .hd-cat--5 { background: var(--hd-red); } .hd-cat--2, .hd-cat--6 { background: var(--hd-teal); } .hd-cat--3 { background: #d94a2b; } .hd-cat--4 { background: var(--hd-teal-2); }
.hd-cat.is-active { outline: 3px solid var(--hd-yellow); outline-offset: 2px; }
.hd-cat__name { display: block; font-size: 19px; font-weight: 900; }
.hd-cat__count { display: block; font-size: 11px; opacity: .85; }
.hd-cat__text { min-width: 0; }

/* ABOUT: 大見出し（ABOUT は赤）→ 左に水彩の枠に入れた地図、右に文言とボタン */
.hd-about { margin: 3.5rem 0 1rem; }
.hd-about__title { margin: 0 0 1.6rem; font-family: var(--hd-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 400; color: var(--hd-teal); letter-spacing: .02em; }
.hd-about__title em { font-style: normal; font-weight: 800; color: var(--hd-red); }
.hd-about__title b { font-weight: 800; }
.hd-about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.4rem; align-items: center; }
.hd-about__art { position: relative; }
.hd-about__map { display: block; width: 100%; height: auto; }
.hd-about__lead { font-size: 20px; font-weight: 900; color: var(--hd-teal); margin: 0 0 .8rem; }
.hd-about__copy p { margin: 0 0 1.2rem; }
@media (max-width: 760px) { .hd-about__grid { grid-template-columns: 1fr; } }

/* フッター: 波の絵の稜線から下が全部ティール。波は帯の中に食い込ませて一体に見せる */
.hd-footer { position: relative; margin-top: 4rem; color: #fff; --hd-footer-bg: #006078; }
.hd-footer__top { position: relative; z-index: 1; }
.hd-footer__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 72%; display: block; z-index: 0; }
.hd-footer__art { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 4.5vw; }
.hd-footer__wave { display: block; width: 100%; height: auto; margin-top: 15px; margin-bottom: -6px; }   /* 15px 下げ、下端は切らずに帯の上に重ねる（top が z-index:1 で帯より前面） */
.hd-footer__mata { position: absolute; z-index: 2; right: 4.5vw; bottom: 68%; width: 26px; height: auto; }
.hd-footer__inner { background: var(--hd-footer-bg); padding: 1.7rem 0 2.2rem; }   /* 波の絵の下端がにじんで上の余白が広く見えるので、上を 8px 詰めて見た目で揃える */
.hd-footer__row, .hd-footer__copy { max-width: 1040px; margin-left: auto; margin-right: auto; padding: 0 4.5vw; box-sizing: border-box; }   /* 中身も本文と同じ幅に */
.hd-footer__row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2.5rem; align-items: center; }
.hd-footer__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.hd-logo__mark--light { width: 40px; height: 40px; flex: none; }
.hd-footer__tag { display: block; font-size: 11px; opacity: .85; }
.hd-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; font-size: 12px; font-weight: 700; }
.hd-footer__links a { color: #fff; text-decoration: none; opacity: .9; }
.hd-footer__links a:hover { opacity: 1; text-decoration: underline; }
.hd-footer__sns { display: flex; gap: .9rem; }
.hd-footer__sns a { color: #fff; opacity: .9; display: inline-flex; }
.hd-footer__sns a:hover { opacity: 1; }
.hd-footer__copy { margin: 1.8rem auto 0; text-align: center; font-size: 11px; opacity: .8; }
.hd-footer__copy a { color: #fff; text-decoration: none; }
.hd-footer__copy a:hover { text-decoration: underline; }
@media (max-width: 760px) { .hd-footer__row { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hd-footer__mata { width: 18px; bottom: 74%; } }

/* 見出しの飾り（パーツ集から切り出したもの） */
.hd-section__title--deco { position: relative; }
.hd-title-deco { position: absolute; pointer-events: none; }
.hd-title-deco--strokes { width: 22px; left: auto; right: -28px; top: -6px; }   /* 「STORIES」の最後の S の横 */
.hd-title-deco--star { position: static; display: inline-block; width: 30px; vertical-align: middle; margin-left: .3rem; }
.hd-section__title--red { color: var(--hd-red); }
.hd-title-spark { display: inline-block; width: 28px; height: auto; vertical-align: super; margin-left: .1rem; }

/* 記事ページ（共通の article_detail.html がこの枠で描かれる） */
.hd .content-area { max-width: 1040px; margin: 0 auto; padding: 1.5rem 4.5vw 3rem; }   /* トップ（.hd-main）と同じ幅 */
.hd .entry-header { margin-bottom: 1.6rem; }
.hd .entry-meta { font-family: var(--hd-display); font-size: 12px; color: var(--hd-mute); margin: 0 0 .5rem; }
.hd .entry-title { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.4; font-weight: 900; color: var(--hd-teal); margin: 0; }
.hd .entry-thumbnail img { width: 100%; height: auto; border-radius: 26px; }
.hd .entry-content { line-height: 2; color: var(--hd-ink); }
.hd .entry-content a { color: var(--hd-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hd .entry-content img { border-radius: 14px; }
.hd .entry-content figcaption { color: var(--hd-mute); }
/* 見出し: h2 はティールの帯（左に黄色のアクセント）、h3 は太いティールのバー、h4 は黄色のマーカー下線 */
.hd .entry-content h2 { position: relative; margin: 3.2rem 0 1.4rem; padding: .75rem 1.2rem .75rem 1.5rem; font-size: 1.38rem; line-height: 1.5; font-weight: 800; color: #fff; background: var(--hd-teal); border-radius: 12px; }
.hd .entry-content h2::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 0 4px 4px 0; background: var(--hd-yellow); }
.hd .entry-content h3 { position: relative; margin: 2.4rem 0 1rem; padding: .2rem 0 .2rem 1rem; font-size: 1.18rem; line-height: 1.5; font-weight: 800; color: var(--hd-teal); border-left: 5px solid var(--hd-teal); }
.hd .entry-content h4 { margin: 1.9rem 0 .7rem; font-size: 1.04rem; line-height: 1.6; font-weight: 800; color: var(--hd-ink); }
.hd .entry-content h4::after { content: ""; display: block; width: 3.2rem; height: 3px; margin-top: .3rem; border-radius: 2px; background: var(--hd-yellow); }
.hd .entry-content > h2:first-child { margin-top: 1rem; }
/* 目次（script.js が最初の h2 の前に差し込む） */
.hd-toc { margin: 2rem 0 2.6rem; padding: 1.1rem 1.4rem 1.2rem; background: #fff; border: 1px solid var(--hd-line); border-radius: 16px; box-shadow: 0 4px 18px rgba(15, 76, 92, .06); }
.hd-toc__head { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 2px dotted var(--hd-line); }
.hd-toc__en { font-family: var(--hd-display); font-weight: 800; font-size: 11px; letter-spacing: .16em; color: var(--hd-red); }
.hd-toc__title { font-weight: 800; font-size: 1.05rem; color: var(--hd-teal); }
.hd-toc__toggle { margin-left: auto; padding: .1rem .7rem; border: 1.5px solid var(--hd-line); border-radius: 999px; background: none; color: var(--hd-mute); font: 700 11px/1.8 var(--hd-font); cursor: pointer; }
.hd-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.hd-toc__list > li { counter-increment: toc; position: relative; padding-left: 2rem; margin: .35rem 0; line-height: 1.7; }
.hd-toc__list > li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--hd-display); font-weight: 800; font-size: 12px; color: var(--hd-red); }
.hd-toc__sub { margin: .2rem 0 .3rem; padding-left: .2rem; list-style: none; }
.hd-toc__sub > li { position: relative; padding-left: 1rem; margin: .15rem 0; font-size: .92rem; line-height: 1.6; }
.hd-toc__sub > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--hd-teal); opacity: .5; }
.hd .hd-toc a { color: var(--hd-ink); text-decoration: none; }
.hd .hd-toc a:hover { color: var(--hd-teal); text-decoration: underline; text-underline-offset: 3px; }
/* 長い見出しは折り返さず1行で切る（2026-09-20 本人指示）。2行になると番号や点との段差が出て読みにくい */
.hd-toc__list a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hd-toc.is-closed .hd-toc__list { display: none; }
.hd-toc.is-closed .hd-toc__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.hd-toc.is-closed .hd-toc__more { display: none; }
/* 「目次をすべて見る」。畳むのはスマホだけなので、ボタンもスマホだけ出す */
.hd-toc__more { display: none; width: 100%; margin-top: .7rem; padding: .45rem; border: 1.5px solid var(--hd-line); border-radius: 999px; background: none; color: var(--hd-teal); font: 700 12px/1.8 var(--hd-font); cursor: pointer; }
.hd-toc__more:hover { color: var(--hd-red); }
.hd .entry-content :is(h2, h3, h4)[id] { scroll-margin-top: 90px; }   /* 目次から飛んだとき、固定ヘッダーの下に隠れないように */
/* リスト・引用・区切り線 */
.hd .entry-content ul, .hd .entry-content ol { padding-left: 1.5rem; }
.hd .entry-content li { margin: .25rem 0; }
.hd .entry-content ul li::marker { color: var(--hd-red); }
.hd .entry-content ol li::marker { color: var(--hd-teal); font-weight: 800; }
.hd .entry-content blockquote:not(.instagram-media):not(.twitter-tweet) { margin: 1.8rem 0; padding: 1rem 1.3rem; background: #f3eee3; border-left: 4px solid var(--hd-teal); border-radius: 0 14px 14px 0; color: #3b4a4f; }
.hd .entry-content hr { border: 0; border-top: 2px dotted var(--hd-line); margin: 2.4rem 0; }
/* タグ（記事ページの上部。カテゴリーは赤の塗り、タグはティールの枠線） */
.hd .entry-terms { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; padding: 0; list-style: none; }
.hd .entry-term { display: inline-block; padding: .15rem .8rem; border-radius: 999px; font-family: var(--hd-font); font-size: 12px; font-weight: 700; line-height: 1.7; text-decoration: none; }
.hd .entry-term--cat, body.hd a.entry-term--cat { background: var(--hd-red); color: #fff; }
.hd .entry-term--tag { border: 1.5px solid var(--hd-teal); color: var(--hd-teal); }
.hd .entry-term--tag::before { content: "#"; opacity: .6; margin-right: .1em; }
/* 表: 角丸の枠、見出し行は深いティールのグラデーション、項目名の列はクリームに金のアクセント、偶数行に淡い縞 */
.hd .entry-content .table-wrap, .hd .entry-content .scroll-box { margin: 1.8rem 0; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 76, 92, .07); }
.hd .entry-content table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.8rem 0; font-size: .93rem; line-height: 1.75; background: #fffdf9; border: 1px solid #dfd5c3; border-radius: 14px; overflow: hidden; }
.hd .entry-content .table-wrap > table, .hd .entry-content .scroll-box > table { margin: 0; }
.hd .entry-content th, .hd .entry-content td { padding: .8rem 1.1rem; border: 0; border-bottom: 1px solid #e8e0d0; text-align: left; vertical-align: top; }
.hd .entry-content tr:last-child > th, .hd .entry-content tr:last-child > td { border-bottom: 0; }
.hd .entry-content th { background: #f3eee3; color: var(--hd-teal); font-weight: 800; }
.hd .entry-content tr > th:first-child:not(:only-child) { width: 28%; min-width: 6.5em; border-right: 1px solid #e8e0d0; box-shadow: inset 3px 0 0 #c9a45c; }
.hd .entry-content thead th, .hd .entry-content tr:has(> th + th) > th { background: linear-gradient(135deg, #0f4c5c, #17626f); color: #fff; letter-spacing: .04em; width: auto; min-width: 0; border-right: 0; border-bottom-color: #0f4c5c; box-shadow: none; }
.hd .entry-content tbody tr:nth-child(even) > td { background: #faf6ee; }
.hd .entry-content td > p { margin: 0 0 .6em; }
.hd .entry-content td > p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .hd .entry-content th, .hd .entry-content td { padding: .65rem .75rem; font-size: .88rem; }
  .hd .entry-content tr > th:first-child:not(:only-child) { width: 34%; min-width: 5.5em; }
  .hd .entry-content h2 { font-size: 1.22rem; }
}
.hd .post-list .post h2 a { color: var(--hd-teal); }
.hd .to-top, body.hd a.to-top { background: var(--hd-teal); color: #fff; }   /* body.hd a { color: inherit } に負けて矢印が黒くならないよう白を明示 */

/* 画像の無い記事: 大きな楕円の代わりに細い帯 */
.hd-card__band { height: 54px; margin-bottom: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--hd-teal), var(--hd-teal-2)); color: #fff; display: flex; align-items: center; padding: 0 1.2rem; font-family: var(--hd-display); font-weight: 800; letter-spacing: .12em; font-size: 12px; }
.hd-card:not(.hd-card--lead) .hd-card__band { height: auto; min-height: 90px; margin: 0; border-radius: 22px; justify-content: center; text-align: center; align-self: start; }
.hd-list__photo--none { background: linear-gradient(135deg, #dfe8e8, #cfe0e3); }

/* ─── スマホでヘッダーを詰める（2026-09-20 本人指示）────────────────────
   「記事を探す」「メニュー」の文字とロゴ下のキャッチを隠し、アイコンとロゴだけにする。
   読み上げ用のラベルはリンク側の aria-label に持たせてあるので、意味は失われない。 */
@media (max-width: 600px) {
  .hd-topnav__label { display: none; }
  .hd-topnav__item { gap: 0; }
  .hd-topnav { gap: 1rem; }
  /* キャッチはスマホでも出す。ロゴ文字の下（2 行目）に置く（2026-09-20 本人指示）。
     幅が足りないので折り返さず少し小さく。2 行組みなのでロゴ丸は共通CSSのまま span 2 でよい */
  .hd-logo__tag { font-size: 10px; letter-spacing: .02em; white-space: nowrap; line-height: 1.4; }
  /* メニューの summary は details の行box にベースラインで載るため、虫眼鏡より 3px 上に出る。
     details を flex にして、2つのアイコンの中心を揃える */
  .hd-menu { display: flex; align-items: center; }
}

/* ─── スマホの目次は左の余白を詰める（2026-09-20 本人指示）───────────────
   .hd .entry-content ol の padding-left 1.5rem が効いて、番号の前に 24px の空きが
   できていた。カードの内側・リストの字下げをまとめて詰めて、文字を左へ寄せる。 */
@media (max-width: 600px) {
  .hd-toc { padding: 1rem 1.1rem 1.1rem; }
  .hd .entry-content .hd-toc__list { padding-left: 0; }
  .hd-toc__list > li { padding-left: 1.5rem; }
  /* 小見出しは親 li の字下げの中にあるので、ここでさらに下げず、点の分だけにする */
  .hd .entry-content .hd-toc__sub { padding-left: 0; }
  .hd-toc__sub > li { padding-left: .9rem; }
  /* スマホは 4 行まで。残りは「目次をすべて見る」で開く（2026-09-20 本人指示） */
  .hd-toc.is-clipped .hd-toc__list li.is-over { display: none; }
  .hd-toc__more { display: block; }
}