/* ==============================================
   OUTDOOR RESORT.notes - Common CSS
   SERENDEC コーディング規約準拠版
   規約参照: sere-coding/CLAUDE.md v1.0
   ============================================== */

/* =============================================
   Reset / Base
   ============================================= */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
  /* === カラー（プライマリ）＝theme.json プリセットへのエイリアス。
     Site Editor での色変更・Style Variation 切替が共通UI（ヘッダー/フッター/カード等）に反映される。
     ライトモードの値は theme.json と同一なので既存の見た目は不変。 === */
  --color-primary: var(--wp--preset--color--primary);
  --color-primary-mid: var(--wp--preset--color--primary-mid);
  --color-primary-light: var(--wp--preset--color--primary-light);

  /* === カラー（背景） === */
  --color-bg: var(--wp--preset--color--bg);
  --color-bg-gray: var(--wp--preset--color--bg-gray);
  --color-bg-sand: var(--wp--preset--color--bg-sand);
  --color-bg-footer: #f0ece6;   /* theme.json未定義の微差シェード。ダークVariation対応時に custom トークン化予定 */
  --color-bg-start: var(--color-bg);
  --color-mint-top: #f1f8f4;     /* 同上（CTAグラデ用） */
  --color-mint-bottom: #e4f1ea;
  --color-white: var(--wp--preset--color--white);

  /* === カラー（テキスト） === */
  --color-text: var(--wp--preset--color--text);
  --color-text-muted: var(--wp--preset--color--text-muted);
  --color-text-title: #1e2d26;   /* 微差シェード（同上・ダーク対応で custom 化予定） */
  --color-text-copy: #3a3a38;
  --color-text-article: #4a4a48;
  --color-text-section: #3a3a38;
  --color-text-footer: rgba(78,93,85,0.9);

  /* === カラー（ボーダー・タグ）＝primary から派生（color-mix で primary 変更に追従） === */
  --color-border: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  --color-border-soft: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
  --color-tag-bg: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
  --color-pager-active-bg: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
  --color-pager-active-border: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);

  /* === フォント === */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-family-serif: 'Cormorant Garamond','Noto Serif JP', serif;
  --font-size-base: 16px;

  /* === シャドウ === */
  --shadow-base: 0 10px 24px rgba(14,61,46,0.05);

  /* === 余白（8の倍数） === */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* === レイアウト === */
  --max-width: 980px;
  --max-width-wide: 1280px;

  /* Fixed header/subnav offsets */
  --orn-header-h: 118px;
  --orn-subnav-h: 52px;
  --orn-fixed-top: calc(var(--orn-header-h) + var(--orn-subnav-h));
}
  html { font-size:16px; scroll-behavior:smooth; }
  body {
    background: linear-gradient(to bottom, var(--color-bg-start) 0%, #f7f4ef 22%, #f7f4ef 100%);
    color: var(--color-text); font-family: var(--font-family-base); font-weight:300; line-height:1.86;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  body :where(p) { font-size: 16px; }
  body :where(h1) { font-size: 28px; }
  body :where(h2) { font-size: 24px; }
  body :where(h3) { font-size: 22px; }
  body :where(h4) { font-size: 20px; }
  body :where(h5) { font-size: 20px; }
  body :where(h6) { font-size: 18px; }
  a { text-decoration: none; color: inherit; }
  img { display:block; width:100%; height:100%; object-fit:cover; }
  .l-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(14,61,46,0.08);
    padding: 0 40px; height: 118px; display:flex; align-items:center; justify-content:space-between; gap:28px;
  }
  .l-header__brand { display:flex; align-items:center; gap:18px; min-width:0; flex-shrink:0; }
  .l-header__logo { display:flex; align-items:center; flex-shrink:0; }
  .l-header__logo img { height:92px; width:auto; object-fit:contain; display:block; }
  .l-header__logo-fallback { display:none; color:var(--color-primary); font-size:13px; letter-spacing:0.2em; font-weight:400; }
  .l-header__tagline {
    display:inline-flex; align-items:center; gap:14px; padding-top:6px; color:rgba(42,42,40,0.58);
    font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif; font-size:17px; font-weight:300; letter-spacing:0.12em; line-height:1;
    white-space:nowrap; user-select:none;
  }
  /* No.72: PC +2px（15px→17px）。SPは下記 @media(max-width:900px) で「グロナビ」= .l-subnav__link と同じ11pxへ */
  .l-header__tagline::before { content:''; width:28px; height:1px; background:rgba(14,61,46,0.18); }
  .l-header__nav { display:flex; gap:26px; align-items:center; margin-left:auto; }
  .l-header__nav a { font-size:12px; letter-spacing:0.12em; color:var(--color-text-muted); font-weight:400; transition:color .2s, background-color .2s, transform .2s; white-space:nowrap; }
  .l-header__nav a:hover { color:var(--color-primary-light); } /* No.47 ホバー色を淡く（テーマ既存の淡い緑トークンへ） */
  .l-header__nav .c-button--cta {
    display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 18px; border-radius:0; border:none;
    background:linear-gradient(180deg, var(--color-mint-top) 0%, var(--color-mint-bottom) 100%); color:var(--color-primary); box-shadow:none; letter-spacing:0.1em;
  }
  .l-header__nav .c-button--cta:hover { background:linear-gradient(180deg,#edf6f1 0%, #dbece4 100%); transform:translateY(-1px); }
  .l-subnav { position:fixed; top:var(--orn-header-h); left:0; right:0; z-index:98; background:rgba(255,255,255,0.98); border-bottom:1px solid rgba(14,61,46,0.08); }
  .l-subnav__inner { max-width:1280px; margin:0 auto; padding:0 40px; }
  .l-subnav__list { list-style:none; display:flex; align-items:center; justify-content:center; gap:30px; min-height:52px; white-space:nowrap; }
  /* 2026-08-06 死んだセレクタ監査で発覚：`.l-subnav__link`（旧・このすぐ下にあった実装）は実マークアップと不一致で
     一度も効いていなかったため削除。ただし調査の結果、正しいセレクタ（`.wp-block-navigation-item__content`）を使った
     "生きている"実装が434行目以降に既に存在していた（ホバー色・下線は機能済み）＝現在地強調だけが元々未実装だった。
     二重実装を避けるため、ここには何も置かず、現在地強調は434行目以降の実装に追記する（下記参照）。 */
  .l-page { padding:calc(var(--orn-fixed-top) + 36px) 32px 88px; }
  .l-container { max-width: 980px; margin:0 auto; }
  .l-footer { background:var(--color-bg-footer); color:var(--color-text-footer); padding:60px 40px 40px; border-top:1px solid rgba(14,61,46,0.08); margin-top:76px; }
  .l-footer__inner { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:28px; align-items:center; justify-items:center; text-align:center; }
  .l-footer__brand { display:flex; flex-direction:column; align-items:center; }
  .l-footer__logo img { height:92px; width:auto; object-fit:contain; display:block; }
  .l-footer__logo-fallback { display:none; color:var(--color-text-footer); font-size:13px; letter-spacing:0.2em; }
  .l-footer__concept { font-family: var(--font-family-serif); font-size:15px; color:rgba(78,93,85,0.78); margin-top:16px; letter-spacing:0.1em; font-weight:300; text-align:center; }
  .l-footer__copy { font-size:11px; color:rgba(78,93,85,0.68); margin-top:48px; letter-spacing:0.08em; text-align:center; }
  .l-footer__nav { display:flex; flex-direction:row; flex-wrap:wrap; gap:16px; text-align:center; justify-content:center; }
  .l-footer__nav a { font-size:12px; letter-spacing:0.1em; transition:color .2s; color:rgba(78,93,85,0.9); }
  .l-footer__nav a:hover { color:var(--color-primary-light); } /* No.47 ホバー色を淡く */

  @media (max-width: 1180px) {
    .l-header__tagline { font-size:13px; gap:12px; letter-spacing:0.09em; }
    .l-header__tagline::before { width:18px; }
  }
  @media (max-width: 900px) {
    /* 2026-08-06 SAM様指摘：SPでタグラインとグロナビがくっついて見える。
       原因はヘッダー高さ118px固定に対し中身が超過していたこと（padding12+ロゴ93+タグライン19+padding10=134px）。
       同日のタグライン11px→16px拡大で不足が表面化し、タグライン下端116px／サブナビ上端118px＝隙間2pxになっていた。
       .l-subnav は position:fixed で top:var(--orn-header-h) に貼り付くため、余白はこの変数で作る。
       138pxでロゴ上13px・タグライン下12pxとほぼ対称。--orn-fixed-top は calc 連動のため本文位置は自動追随。 */
    :root { --orn-subnav-h: 48px; --orn-header-h: 138px; }

    .p-notes__logo-image { width: 60%; max-width: 360px; min-width: 180px; }
    .p-notes-article .p-notes__logo-image { width: 60%; max-width: 260px; min-width: 150px; }

    .p-notes__logo { width: 60%; max-width: 520px; min-width: 220px; }

    .l-header { padding:12px 16px 10px; height:var(--orn-header-h); gap:10px 14px; justify-content:center; }
    .l-header__brand { width:100%; justify-content:center; flex-direction:column; gap:0; }
    .l-header__logo img { height:93px; }
    /* 2026-08-06 加藤さん指示：「心動く」をグロナビと同じ大きさに。
       旧11px指定は「.l-subnav__link と同じ」を狙ったコメントだったが、そのセレクタは実マークアップ(.wp-block-navigation-item__content)と
       一致せず一度も適用されておらず、グロナビは無指定のブラウザ既定16pxで表示されていた（実測で確認）。
       グロナビ側（実際に見えている16px）に合わせてタグラインを16pxへ拡大。 */
    .l-header__tagline { display:block; padding-top:0; margin-top:-8px; font-size:16px; letter-spacing:0.08em; line-height:1.2; white-space:nowrap; text-align:center; color:rgba(42,42,40,0.56);}
    .l-header__tagline::before { content:none; }
    /* Header main nav is intentionally hidden on <=900px; subnav keeps facility/about routes reachable. */
    .l-header__nav { display:none; }
    .l-subnav__inner { position:relative; padding:0 16px; }
    .l-subnav__inner::after {
      /* 2026-08-06 加藤さん指示：「>」が目立たないためサイズを拡大（26px→36px、領域幅も追随） */
      content:'›'; position:absolute; right:0; top:0; bottom:0; width:40px; display:flex; align-items:center; justify-content:flex-end;
      padding-right:8px; font-size:36px; line-height:1; color:rgba(42,42,40,0.72);
      background:linear-gradient(to left, rgba(255,255,255,0.96) 42%, rgba(255,255,255,0)); pointer-events:none;
    }
    .l-subnav__list { justify-content:flex-start; gap:22px; min-height:48px; padding-right:34px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
    .l-subnav__list::-webkit-scrollbar { display:none; }
    .l-subnav__link { font-size:11px; letter-spacing:0.1em; }
    .l-page { padding:calc(var(--orn-fixed-top) + 12px) 20px 82px; }
    .l-footer__inner { grid-template-columns:1fr; }
    .l-footer__nav { text-align:center; flex-direction:row; flex-wrap:wrap; gap:16px; justify-content:center; }
    .l-footer__logo img { height:60px; }
  }


  .p-notes__layout { /* grid handled by wp:columns block */ }
  .p-notes__intro { margin-bottom: 16px; }
  .p-notes__kicker {
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(14,61,46,0.54); margin-bottom:8px;
  }
  
  .p-notes__logo { width: 60%; max-width: 720px; min-width: 320px; margin: 0 auto; display: block; height: auto; object-fit: contain; }
  .p-notes__logo-wrap { margin-bottom: 8px; display:flex; justify-content:center; }
  .p-notes__logo-image {
    display:block;
    width: 60%;
    max-width: 456px;
    min-width: 220px;
    height:auto;
    object-fit:contain;
  }
  .p-notes-article .p-notes__logo-image {
    width: 60%;
    max-width: 336px;
    min-width: 180px;
  }

  .p-notes__subtitle {
    font-family:'Noto Serif JP',serif; line-height:1.78; font-weight:300; letter-spacing:0.04em; color:var(--color-text-title);
  }
  /* 2026-08-06 SAM様指示：Notes一覧のリード一文だけ中央寄せ。
     素の .p-notes__subtitle は他6テンプレートと共有のため触らず、専用修飾クラスにだけ当てる。 */
  .p-notes__subtitle--center {
    text-align:center;
  }
  .p-notes__lead {
    margin-top:8px; font-size:13px; line-height:1.92; color:var(--color-text-article); max-width: 640px;
  }
  .p-notes__grid {
    margin-top: 18px;
  }
  .p-notes__grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: stretch;
  }
  .p-notes__grid .wp-block-post-template > li { display: flex; flex-direction: column; align-self: stretch; }
  .p-notes__grid .wp-block-post-template > li > .c-note-card { flex: 1; }
  .c-note-card {
    background:rgba(255,255,255,0.92); border:1px solid var(--color-border); border-radius:20px; overflow:hidden; box-shadow:0 8px 22px rgba(14,61,46,0.035);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease; display:flex; flex-direction:column;
  }
  .c-note-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,61,46,0.08); background:var(--color-bg); }
  .c-note-card__image { aspect-ratio:16/9; background:var(--color-bg-sand); overflow:hidden; }
  .c-note-card img { transition: transform .5s ease; }
  .c-note-card:hover img { transform:scale(1.03); }
  .c-note-card__body { padding:14px 14px 16px; display:flex; flex-direction:column; min-height: 238px; }
  .c-note-card__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .c-tag { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; background:var(--color-tag-bg); color:rgba(14,61,46,0.74); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; }
  .c-note-card__date { font-size:9px; letter-spacing:0.07em; color:rgba(42,42,40,0.48); }
  .c-note-card__title { font-family:'Noto Serif JP',serif; line-height:1.72; font-weight:300; letter-spacing:0.02em; color:var(--color-text-title); margin-bottom:8px; }
  .c-note-card__copy { font-size:11.5px; line-height:1.82; color:var(--color-text-copy); margin-bottom:12px; flex:1; }
  .c-note-card__read { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.1em; color:var(--color-primary); }
  .c-note-card__read::after { content:'→'; }

  .p-notes__sidebar { position:sticky; top:186px; }
  .c-side-box {
    background:rgba(255,255,255,0.86); border:1px solid var(--color-border); border-radius:18px; padding:18px 18px 16px; box-shadow:var(--shadow-base);
  }
  .c-side-box__title {
    letter-spacing:0.18em; text-transform:uppercase; color:rgba(14,61,46,0.52); margin-bottom:12px;
  }
  .c-category-list { display:flex; flex-direction:column; gap:8px; list-style:none; padding:0; margin:0; }
  /* wp:categories 標準出力は <li><a>名前</a> (件数) で件数がアンカー外のテキストノード。
     そのため pill はアンカーではなく li に付け、li を flex/space-between にして名前と件数を1つの pill 内へ収める。 */
  .c-category-list li {
    list-style:none;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:36px; padding:0 12px; border-radius:999px;
    border:1px solid rgba(14,61,46,0.10); background:rgba(255,255,255,0.86);
    font-size:11px; letter-spacing:0.08em; color:rgba(42,42,40,0.52);
    transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  }
  .c-category-list li:hover { transform:translateY(-1px); border-color:rgba(14,61,46,0.18); background:rgba(14,61,46,0.05); }
  .c-category-list li a { flex:1; min-width:0; color:#56615a; text-decoration:none; letter-spacing:0.08em; }
  .c-category-list li:hover a { color:var(--color-primary-light); } /* No.47 ホバー色を淡く */
  /* 自前マークアップ版（施設/目的別チップ等）は従来どおりアンカー側を pill にする */
  .category-link {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(14,61,46,0.10); background:rgba(255,255,255,0.86);
    font-size:11px; letter-spacing:0.08em; color:#56615a; text-decoration:none; width:100%;
    transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  }
  .category-link:hover { transform:translateY(-1px); border-color:rgba(14,61,46,0.18); background:rgba(14,61,46,0.05); color:var(--color-primary-light); } /* No.47 ホバー色を淡く */
  .category-link.is-active { transform:translateY(-1px); border-color:rgba(14,61,46,0.18); background:rgba(14,61,46,0.05); color:var(--color-primary); }
  .category-count { font-size:10px; color:rgba(42,42,40,0.46); letter-spacing:0.08em; }
  .c-side-box__note {
    margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border-soft); font-size:11px; line-height:1.82; color:#6b6b67;
  }

  .c-pager { margin-top:28px; display:flex; justify-content:flex-start; align-items:center; gap:8px; }
  .c-pager a, .c-pager span {
    min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:11px; letter-spacing:0.12em; color:#59635d;
    border:1px solid rgba(14,61,46,0.10); background:rgba(255,255,255,0.8);
  }
  .c-pager .is-current { background:var(--color-pager-active-bg); color:var(--color-primary); border-color:var(--color-pager-active-border); }

  .p-notes-article { max-width: 760px; margin: 0 auto; }
  .c-breadcrumb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 12px; font-size:10px; letter-spacing:0.14em; color:rgba(42,42,40,0.50); text-transform:uppercase; }
  .c-breadcrumb a { color:rgba(14,61,46,0.72); }
  /* No.29: 詳細ページのアイキャッチはアップロード原寸比で表示（固定16/9トリミング解除）。 */
  .p-notes-article__hero { border-radius:22px; overflow:hidden; background:var(--color-bg-sand); box-shadow:var(--shadow-base); margin:16px 0 22px; }
  .p-notes-article__hero img { height:auto; object-fit:unset; }
  .p-notes-article__lead { font-size:13px; line-height:1.95; color:var(--color-text-article); margin:16px 0 28px; }
  .p-notes-article__section { margin-top: 28px; }
  .p-notes-article__section h2 {
    font-variant-numeric: lining-nums proportional-nums; font-feature-settings: 'lnum' 1, 'pnum' 1; line-height:1.78; font-weight:300; letter-spacing:0.03em; color:#364039; margin-bottom: 10px;
  }

  /* No.3 heading design 案A (基調色統一) 2026-07-27 */
  /* 本文4器（Notes / 読者投稿 / ヒント / 特集）の H3〜H6 のみに適用。素のh3等でグローバルに当てない（サイドボックス等の別コンポーネントを壊さないため）。色は既存CSS変数を使用。 */

  /* H3: 上下線（SAMの透明黒バグ → text-title に修正） */
  .p-notes-article__section h3,
  .p-reader-single .wp-block-post-content h3,
  .p-hint-single h3,
  .p-feature-single .article-body h3 {
    padding:0.5em 0;
    border-top:solid 1px var(--color-text-muted);
    border-bottom:solid 1px var(--color-text-muted);
    color:var(--color-text-title);
    margin:1.6em 0 0.8em;
  }

  /* H4: 左端に固定サイズのベージュ円を背景として置き、テキストを上に重ねる。
     骨格＝楠本さん指定（固定の丸＋z-indexで重ね・文字数/フォントサイズと連動させない）、
     寸法＝SAM様ご提示の .heading-bg-circle（40px円・opacity .7・top50%+translateY・padding-left20px）に合わせた。
     SAM様の #e8e2d9 は既存変数 --color-bg-sand と同値のため変数を使う。
     フォント・文字色はSAM様了承のうえ本文テーマ側（--color-text-title）を維持＝bold/#333は当てない。
     旧実装は ::first-letter に padding+border-radius:50% を当てており、円ではなく
     先頭1文字の字幅なりの楕円になって文字ごとに形が変わっていた（加藤さん指摘）。 */
  .p-notes-article__section h4,
  .p-reader-single .wp-block-post-content h4,
  .p-hint-single h4,
  .p-feature-single .article-body h4 {
    padding:12px 10px 12px 20px;
    position:relative;
    z-index:1;
    color:var(--color-text-title);
    margin:1.4em 0 0.6em;
  }
  .p-notes-article__section h4::before,
  .p-reader-single .wp-block-post-content h4::before,
  .p-hint-single h4::before,
  .p-feature-single .article-body h4::before {
    content:"";
    position:absolute;
    /* SAM様原案は top:50%。1行見出しでは下式と同値（実測30.59px vs 30.6px）だが、
       2行以上になると円が行間まで下がって1行目から離れるため、1行目の中心へ固定する。
       0.93em = 本文 line-height 1.86em の半分、12px = 上パディング。 */
    top:calc(12px + 0.93em);
    left:0;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    background:var(--color-bg-sand);
    border-radius:50%;
    z-index:-1;
    opacity:0.7;
  }

  /* H5: タグ風（SAMのセミコロン欠落＋:before未完＝●なしバグを修正。●は primary 緑で表示） */
  .p-notes-article__section h5,
  .p-reader-single .wp-block-post-content h5,
  .p-hint-single h5,
  .p-feature-single .article-body h5 {
    padding:0.5em 0.9em;
    display:inline-block;
    line-height:1.3;
    background:var(--color-bg-sand);
    vertical-align:middle;
    border-radius:25px 0 0 25px;
    color:var(--color-text-title);
    margin:1.4em 0 0.6em;
  }
  .p-notes-article__section h5::before,
  .p-reader-single .wp-block-post-content h5::before,
  .p-hint-single h5::before,
  .p-feature-single .article-body h5::before {
    content:'\25CF';
    color:var(--color-primary);
    margin-right:8px;
  }

  /* H6: 角アクセント（SAMの水色を基調ベージュ＋グレーに置換し1色へ確定。水色は不使用） */
  .p-notes-article__section h6,
  .p-reader-single .wp-block-post-content h6,
  .p-hint-single h6,
  .p-feature-single .article-body h6 {
    background:var(--color-bg-sand);
    box-shadow:0 0 0 5px var(--color-bg-sand);
    border:dashed 2px var(--color-text-muted);
    padding:0.2em 0.5em;
    position:relative;
    display:inline-block;
    color:var(--color-text-title);
    margin:1.4em 0 0.6em 10px;
  }
  .p-notes-article__section h6::after,
  .p-reader-single .wp-block-post-content h6::after,
  .p-hint-single h6::after,
  .p-feature-single .article-body h6::after {
    position:absolute;
    content:'';
    left:-7px;
    top:-7px;
    border-width:0 0 15px 15px;
    border-style:solid;
    border-color:var(--color-bg-sand) var(--color-bg-sand) var(--color-text-muted);
    box-shadow:1px 1px 1px rgba(0,0,0,.15);
  }

  .p-notes-article__section p { font-size:16px; line-height:1.96; color:var(--color-text-section); margin-bottom: 14px; }
  .p-notes-article__back { margin-top: 36px; padding-top: 22px; border-top:1px solid var(--color-border-soft); }
  .c-article-cta {
    margin-top: 32px; padding: 18px 20px; border-radius:20px; border:1px solid var(--color-border); background:rgba(255,255,255,0.90); box-shadow: var(--shadow-base);
  }
  .c-article-cta__title { letter-spacing:0.18em; text-transform:uppercase; color:rgba(14,61,46,0.52); margin-bottom:8px; }
  .c-article-cta__copy { font-size:12px; line-height:1.84; color:var(--color-text-copy); margin-bottom: 14px; }
  .c-article-cta__link {
    display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px;
    border:none; background:linear-gradient(180deg, var(--color-mint-top) 0%, var(--color-mint-bottom) 100%); color:var(--color-primary); font-size:11px; letter-spacing:0.1em;
  }

  @media (max-width: 980px) {
    .p-notes__sidebar { position:static; }
  }
  @media (max-width: 900px) {
    .p-notes__grid .wp-block-post-template { grid-template-columns: 1fr; gap: 16px; }
    .c-note-card__body { min-height:0; }
  }


/* === Utility === */
.is-hidden { display: none !important; }

/* === article ページの c-note-card__meta 上マージン === */
.p-notes-article .c-note-card__meta {
  margin-top: 14px;
}

/* === WordPress admin bar offset === */
body.admin-bar .l-header { top: 32px; }
body.admin-bar .l-subnav { top: calc(var(--orn-header-h) + 32px); }
/* モバイル（≤782px）は管理バーが 46px になるため追従（Pitfall 2）。 */
@media screen and (max-width: 782px) {
  body.admin-bar .l-header { top: 46px; }
  body.admin-bar .l-subnav { top: calc(var(--orn-header-h) + 46px); }
}

/* =====================================================
   Fix: WordPress is-layout-flow grid margin override
===================================================== */
.p-notes__grid .wp-block-post-template > .wp-block-post {
  margin-block-start: 0 !important;
}

/* =====================================================
   Global Nav: Hover + Ripple
   WordPress Block Nav renders .wp-block-navigation-item__content on <a>
===================================================== */

/* --- ヘッダーナビ: position/overflow + ホバー背景 --- */
.l-header__nav .wp-block-navigation-item__content {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding: 4px 6px;
  margin: 0 -6px;
}

.l-header__nav .wp-block-navigation-item__content:hover {
  background-color: rgba(14, 61, 46, 0.06);
}

/* CTAボタン内の <a> は既存スタイルを維持（padding/radius リセット） */
.l-header__nav .c-button--cta .wp-block-navigation-item__content {
  padding: 0;
  border-radius: 0;
  margin: 0;
  background-color: transparent;
}

/* --- サブナビ: position/overflow + ホバー下線アニメーション --- */
.l-subnav__list .wp-block-navigation-item__content {
  position: relative;
  overflow: hidden;
  padding-bottom: 6px;
  color: rgba(42, 42, 40, 0.72);
  transition: color .2s ease;
}

.l-subnav__list .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(14, 61, 46, 0.28);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  z-index: 1;
}

.l-subnav__list .wp-block-navigation-item__content:hover {
  color: var(--color-primary-light); /* No.47 ホバー色を淡く */
}

.l-subnav__list .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

/* 2026-08-06 死んだセレクタ監査：現在地強調（is-current）は元々未実装だった。
   WP標準の[aria-current="page"]（wp:navigationが現在ページに自動付与）で判定。
   WPコアのグローバルスタイル（.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   というクラス2重指定で詳細度(0,3,0)にブーストされたcolor:inherit）に勝つため、同程度の詳細度になるよう
   `.l-subnav__list .wp-block-navigation-item__content[aria-current="page"]`（(0,3,0)）で指定する。 */
.l-subnav__list .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--color-primary);
}

.l-subnav__list .wp-block-navigation-item__content[aria-current="page"]::after {
  transform: scaleX(1);
}

/* =====================================================
   Site-wide: position/overflow for Ripple
===================================================== */
.c-note-card {
  position: relative;
}

.c-note-card__read,
.category-link,
.c-category-list li a,
.c-pager a,
.c-article-cta__link,
.c-breadcrumb a {
  position: relative;
  overflow: hidden;
}

/* =====================================================
   Material Design Ripple 共通
===================================================== */
.c-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(14, 61, 46, 0.15);
  transform: scale(0);
  animation: ripple-expand 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* Scoped article text links */
.p-notes-article a:not(.wp-element-button):not(.c-tag),
.p-notes__grid .c-note-card__copy a,
.wp-block-post-content a:not(.wp-element-button) {
	color: var(--orn-link-color, #E08A3C);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.p-notes-article a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):hover { color: #bf6f27; }

/* No.47 リンクボタンのホバー（2026-08-06 SAM様指示で仕様変更）
   旧実装はホバー時にミントの背景と緑の文字色を上書きしていたため、
   ボタンの地色に関係なく緑へ変わっていた（黒が緑になる／緑ボタンは薄くなり過ぎる）。
   新仕様＝色相は変えず「少し白っぽく薄くなる」だけに統一する。
   opacity は地色の上に背景（白系）が透けるため、黒でも緑でも橙でも同じ効き方になる。
   ※ filter:brightness は黒(#000)に効かないので採用しない。 */
.wp-block-button__link,
.wp-element-button,
.c-button,
.p-reader-filter__submit { transition: opacity .2s, transform .2s; }
.wp-block-button__link:hover,
.wp-element-button:hover,
.c-button:hover,
.p-reader-filter__submit:hover {
	opacity: .78;
	transform: translateY(-1px);
}

/* No.48 ヒント記事タイトルの左寄せ（一覧＝archive-hint / 個別＝single-hint）
   テーマCSSにセンタリング指定は無いため、Site Editor(DB)側のグローバル/テンプレ指定が
   中央寄せの出所の可能性が高い。ここで明示的に左寄せを宣言（Notes側 .p-notes__subtitle には波及させない＝ヒント配下に限定）。
   ※STG反映後に実描画で左寄せを確認。まだ中央なら Site Editor 側の指定除去が必要（DB作業）。 */
.p-hint-archive .p-notes__subtitle,
.p-hint-single .p-hint-single__title,
.p-hint-single__title { text-align: left; }

/* No.1/No.41/No.62/No.73 目次（TOC）
   共通挙動（feature/notes 双方）＝common.js の initTableOfContents() が生成（h2〜h6対応）。
   開閉トグルはNo.1で廃止＝常時展開。.js-toc__item--sub がh2以外のインデント下位表示（階層飛ばしでも崩れないフラット表示）。 */
.js-toc__item--sub { padding-left: 1.1em; }

/* Notes記事の目次（アイキャッチ下・単カラム用の見た目） */
.p-notes-toc {
  margin: 20px 0 28px;
  padding: 16px 18px;
  border: 1px solid rgba(14, 61, 46, 0.10);
  border-radius: 12px;
  background: rgba(14, 61, 46, 0.02);
}
.p-notes-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-notes-toc__title { font-family: 'Noto Serif JP', serif; font-size: var(--wp--preset--font-size--card); letter-spacing: 0.08em; color: var(--color-text-title, #2a2a28); }
.p-notes-toc__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.p-notes-toc__list li { margin: 0; }
.p-notes-toc__list a { color: var(--color-text-article, #2a2a28); text-decoration: none; font-size: 14px; line-height: 1.7; }
.p-notes-toc__list a:hover { color: var(--color-primary-light, #2d7a58); text-decoration: underline; } /* No.47 ホバー色を淡く */
.p-notes-toc__list .js-toc__item--sub a { font-size: 13px; }

/* No.64: authored article headings/body text fixed across post-like pages. */
.p-notes-article__section h1,
.p-reader-single .wp-block-post-content h1,
.p-hint-single__body h1,
.p-feature-single .article-body h1 { font-size: 28px; }
.p-notes-article__section h2,
.p-reader-single .wp-block-post-content h2,
.p-hint-single__body h2,
.p-feature-single .article-body h2 { font-size: 24px; }
.p-notes-article__section h3,
.p-reader-single .wp-block-post-content h3,
.p-hint-single__body h3,
.p-feature-single .article-body h3 { font-size: 22px; }
.p-notes-article__section h4,
.p-reader-single .wp-block-post-content h4,
.p-hint-single__body h4,
.p-feature-single .article-body h4 { font-size: 20px; }
.p-notes-article__section h5,
.p-reader-single .wp-block-post-content h5,
.p-hint-single__body h5,
.p-feature-single .article-body h5 { font-size: 20px; }
.p-notes-article__section h6,
.p-reader-single .wp-block-post-content h6,
.p-hint-single__body h6,
.p-feature-single .article-body h6 { font-size: 18px; }
.p-notes-article__section p,
.p-reader-single .wp-block-post-content p,
.p-hint-single__body p,
.p-feature-single .article-body p { font-size: 16px; }

/* 2026-08-06 §22横展開：施設カード(.facility-card-full)・記事一覧(#reader-list)で対応した
   「固定ヘッダーでアンカー先が隠れる」問題は、目次(js-toc)から見出しへ飛ぶ場合にも同じ原理で起こりうる。
   目次が対象とする4種の記事本文（Notes/読者投稿/ガイド/特集）の見出し全てに一括で適用。 */
:is(.p-notes-article__section, .p-reader-single .wp-block-post-content, .p-hint-single__body, .p-feature-single .article-body) :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--orn-fixed-top) + 16px);
}


/* No.22 image captions: shared post content style */
.wp-block-post-content figcaption {
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: rgba(42, 42, 40, 0.52);
}