/* ============================================================
   site-nav.css — アサ研 共通ナビゲーション（ヘッダーメニュー／フッターサイトマップ）
   既存の各ページ <style> の後に読み込むこと（上書き用）。
   デザイントークン（--paper, --ink, --hemp, --rule 系, --font-display,
   --font-body, --rail）は各ページの <style> で定義済みのものを利用する。
   ============================================================ */

/* ------------------------------------------------------------
   ヘッダーメニューの方針
   - PC : 4つのカテゴリを最初から並べ、クリックで各カテゴリの
          ドロップダウンが開く（カテゴリごとの <details>）
   - スマホ: 「メニュー」ボタン1つ（ハンバーガー）で全体を開き、
          中では全カテゴリの項目を最初から並べて見せる
   リンクを二重に持たずに両立させるため、
   - 全体の開閉は チェックボックス + label（CSSだけで両モードを切替可能）
   - カテゴリの開閉は <details>（PCのドロップダウン）
   を使い、スマホでは details の中身をCSSで強制表示している。
   ------------------------------------------------------------ */

header nav.primary-nav{
  gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem;
}
header nav.primary-nav > *{ flex-shrink: 0; }

/* position は指定しないこと。ここに position:relative を付けると、
   スマホのパネル（position:absolute）の基準がこの要素になってしまい、
   ボタン幅に潰れて文字が縦積みになる。基準は header（sticky）に任せる。 */
.site-menu{ position: static; display: flex; align-items: center; }

/* 開閉スイッチ本体。見えないがフォーカスは当たるようにしておく */
.menu-switch{
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}

/* ハンバーガー（スマホのみ表示） */
.menu-toggle{
  display: none; align-items: center; gap: .55em;
  cursor: pointer; font-size: .85rem; color: var(--ink-soft);
  padding: .5em .3em; user-select: none;
}
.menu-toggle:hover{ color: var(--hemp-deep); }
.menu-switch:focus-visible ~ .menu-toggle{ outline: 2px solid var(--hemp); outline-offset: 2px; }
.menu-icon{ position: relative; display: inline-block; width: 18px; height: 13px; flex-shrink: 0; }
.menu-icon span{
  position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.menu-icon span:nth-child(1){ top: 0; }
.menu-icon span:nth-child(2){ top: 5.5px; }
.menu-icon span:nth-child(3){ top: 11px; }
.menu-switch:checked ~ .menu-toggle .menu-icon span:nth-child(1){ top: 5.5px; transform: rotate(45deg); }
.menu-switch:checked ~ .menu-toggle .menu-icon span:nth-child(2){ opacity: 0; }
.menu-switch:checked ~ .menu-toggle .menu-icon span:nth-child(3){ top: 5.5px; transform: rotate(-45deg); }

/* カテゴリ見出し（PCではドロップダウンのトリガー） */
.menu-group > summary{
  display: flex; align-items: center; gap: .4em;
  cursor: pointer; list-style: none;
  font-size: .85rem; color: var(--ink-soft);
  padding: .5em 0;
  transition: color .2s ease;
}
.menu-group > summary::-webkit-details-marker{ display: none; }
.menu-group > summary:hover,
.menu-group > summary:focus-visible{ color: var(--hemp-deep); }
.menu-group[open] > summary{ color: var(--hemp-deep); }

.menu-group a{
  font-size: .88rem; color: var(--ink-soft); text-decoration: none;
  transition: color .2s ease;
}
.menu-group a:hover, .menu-group a:focus-visible{ color: var(--hemp-deep); text-decoration: underline; }
.menu-group a[aria-current="page"]{ color: var(--hemp-deep); font-weight: 600; }
.menu-group ul{ display: flex; flex-direction: column; }

/* ============ PC（861px以上）: カテゴリを常時表示＋ドロップダウン ============ */
@media (min-width: 861px){
  .menu-toggle{ display: none; }
  .site-menu-panel{ display: block; }
  .site-menu-panel-inner{
    display: flex; align-items: center; gap: 1.5rem;
  }
  /* ドロップダウンの基準にする */
  .menu-group{ position: relative; }
  /* PCではカテゴリを先に並べ、参加申請CTAを右端に置く
     （スマホはDOM順のまま ［参加申請］［☰］ とする） */
  .site-menu{ order: 1; }
  header nav.primary-nav a.nav-cta{ order: 2; margin-left: .8rem; }

  /* ▾ の三角。開くと反転する */
  .menu-group > summary::after{
    content: ""; width: 0; height: 0; margin-top: .15em;
    border: 4px solid transparent; border-top-color: currentColor;
    transition: transform .2s ease;
  }
  .menu-group[open] > summary::after{ transform: rotate(180deg); margin-top: -.2em; }

  .menu-group > ul{
    position: absolute; top: calc(100% + .5rem); left: -1rem;
    min-width: 15rem; z-index: 30;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 16px 28px -12px rgba(32, 38, 30, .28);
    padding: .9rem 1.2rem; gap: .7rem;
  }
  /* 右端のカテゴリはドロップダウンを右揃えにして画面外に出さない */
  .menu-group:last-child > ul{ left: auto; right: -1rem; }
}

/* ============ スマホ（860px以下）: ハンバーガー1つ ============ */
@media (max-width: 860px){
  .menu-toggle{ display: inline-flex; }

  .site-menu-panel{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 28px -10px rgba(32, 38, 30, .2);
  }
  .menu-switch:checked ~ .site-menu-panel{ display: block; }

  .site-menu-panel-inner{
    max-width: 74rem; margin: 0 auto;
    padding: 1.6rem var(--rail) 2.2rem;
    display: flex; flex-direction: column; gap: 1.8rem;
  }

  /* スマホでは全カテゴリを開いたまま見せる。
     details は閉じていても中身をCSSで表示する（下2行が要）。 */
  .menu-group > ul{
    display: flex !important;
    position: static; border: 0; box-shadow: none; padding: 0;
    margin-top: .9rem; gap: .7rem;
  }
  .menu-group::details-content{ content-visibility: visible !important; }

  /* 見出しは開閉トリガーではなくラベルとして扱う */
  .menu-group > summary{
    pointer-events: none;
    font-family: var(--font-display); font-weight: 500; font-size: .92rem;
    color: var(--hemp-deep);
    padding: 0 0 .5rem; border-bottom: 1px solid var(--rule);
  }
  .menu-group > summary::after{ display: none; }
}

/* ---------- フッター: サイトマップ ---------- */
.footer-sitemap{
  margin: 0 0 2.2rem; padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.footer-brand{
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-size: 1rem; color: var(--ink-soft);
  margin-bottom: 1.8rem;
}
.footer-logomark{ width: 1.6em; height: 1.6em; flex-shrink: 0; }

.footer-cols{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 900px){ .footer-cols{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .footer-cols{ grid-template-columns: 1fr; gap: 0; } }

.footer-col summary{
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  color: var(--hemp-deep);
  padding-bottom: .5rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
  cursor: default; list-style: none;
}
.footer-col summary::-webkit-details-marker{ display: none; }
.footer-col ul{ display: flex; flex-direction: column; gap: .6rem; }
.footer-col a{ font-size: .85rem; color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible{
  color: var(--hemp-deep); text-decoration: underline;
}
.footer-col a[aria-current="page"]{ color: var(--hemp-deep); font-weight: 600; }

/* 狭い画面: フッターの各グループを折りたためるアコーディオンに変える */
@media (max-width: 720px){
  .footer-col{ border-bottom: 1px solid var(--rule); }
  .footer-col:first-child{ border-top: 1px solid var(--rule); }
  .footer-col summary{
    cursor: pointer; border-bottom: none; margin-bottom: 0;
    padding: .9rem 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .footer-col summary::after{
    content: "+"; font-family: var(--font-display); font-size: 1.15rem; color: var(--hemp);
  }
  .footer-col[open] summary::after{ content: "–"; }
  .footer-col ul{ padding-bottom: 1rem; }
}

/* ============================================================
   麻の葉文様のテクスチャ（全ページ共通）
   ------------------------------------------------------------
   これまで文様はヒーロー・帯・深緑セクション・参加方法セクション
   だけに使っていた。地の面にも薄く敷いて全体のトーンを揃える。

   濃度は地色ごとに変える。白い区画をいちばん薄くして
   「白＝静か／ベージュ＝中間／深緑＝主張」の階調を壊さないこと。
   本文の可読性を守るため、文様は ::before に敷き、
   中身は z-index で必ず上に置く。
   ============================================================ */
:root{ --asanoha: url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='70' height='40' viewBox='0 0 140 80' preserveAspectRatio='none'%3e%3cg opacity='.3'%3e%3cpath fill='%232d5a3d' d='M4 1h42l21 36zM3 3l63 36h-42zM1 4l21 36-21 36zM3 77l21-36h42zM46 79h-42l63-36zM69 44v41h-24zM95 85h-24v-41zM73 43l63 36h-42zM74 41h42l21 36zM118 40l21-36v72zM137 3l-21 36h-42zM94 1h42l-63 36zM71 36v-41h24zM45-5h24v41z'/%3e%3c/g%3e%3c/svg%3e"); }

.section-white, .section-deep, .news-strip, footer{
  position: relative; overflow: hidden;
}
.section-white::before, .section-deep::before, .news-strip::before, footer::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--asanoha);
  /* 広い面には少し大きめの柄。細かすぎるとノイズに見える */
  background-size: 108px 62px;
}
/* 白地は文様が沈みやすいので、濃度は地色ごとに実測で調整している。
   数値を触るときは必ず等倍で見て、本文の可読性を確かめること。 */
.section-white::before{ opacity: .075; }
.section-deep::before{ opacity: .09; }
.news-strip::before{ opacity: .08; }
footer::before{ opacity: .075; }

/* 中身を文様の上に置く */
.section-white > .section-inner,
.section-deep > .section-inner,
.news-strip > .news-strip-inner,
footer > .footer-inner{ position: relative; z-index: 1; }