/* =========================================================================
   ZENDAKAI — 全国駄菓子屋会 デザインシステム (zendakai.css)
   コンセプト: 昼間の明るい駄菓子屋の店先。角はぜんぶ丸い。ぼかし影は使わない。
   正本: zendakai-web/docs/design-spec.md（実装と食い違ったらそちらを読んで直す）
   構成: 0 フォント / 1 トークン / 2 ベース / 3 アイコン / 4 文字 / 5 骨組み /
        6 ブランド / 7 アクション / 8 ラベル / 9 内容 / 10 フォーム /
        11 ページの骨格 / 12 動き・アクセシビリティ / 13 印刷
   JS は任意（zendakai-fx.js・カーソル演出と動きの切替のみ）を除き使わない。
   ダークテーマは無し（color-scheme: light 固定・昼間の店先ひとつだけ）。
   ========================================================================= */

/* ---- 0. フォント（Google Fonts・3書体まで） ------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Yuji+Syuku&family=Shippori+Antique+B1&family=Zen+Maru+Gothic:wght@400;500;700;900&family=Yusei+Magic&display=swap");
/* ---- 1. デザイントークン（:root・単一テーマ） --------------------------- */
:root{
  color-scheme: light;

  /* 色（すべて var(--*) 経由。部品側に直値の色を書かない）
     v2: 面積の主役は生成りの紙＋藍墨の線＋朱。ラムネ/きなこ/メロン/いちごは
     「版画の刷り色」のつもりで少し落ち着いた値にする（原色のままだとロゴから浮く） ---- */
  --paper:    #FFF8E7; /* わら半紙: ページ背景 */
  --paper-2:  #FFFFFF; /* 白い紙: カード面・入力欄 */
  --kraft:    #EAD7B4; /* 紙袋: 帯・フッタ・区切り面 */
  --kraft-2:  #CDB18A; /* 紙袋の濃い所: 罫線・カードの影 */
  --ink:      #14262E; /* v3: 藍墨（紋章の線の色。青緑寄りに改訂）: 文字・枠線・くっきり影（真っ黒は使わない） */
  --ink-2:    #4A5C64; /* v3: 薄めた藍墨: 補助文字 */
  --ai:       #1B3B50; /* v3: 七宝柄の藍: 柄・帯・チップの線 */
  --kids:     #588888; /* v3: 子どもたちの服の青緑: 淡い面・バッジ */
  --atari:    #E2452D; /* 朱肉（当たり判・朱印）: 主アクション・強調・テント・朱印 */
  --atari-2:  #B5301C; /* 朱の濃色: 小さい赤文字・押下・下線 */
  --ramune:   #3B76C4; /* ラムネ（版画のインク寄りに少し落とす）: 第2アクション・チップ */
  --ramune-2: #2A5A9C; /* ラムネの濃色: 本文リンク文字 */
  --soda:     #DCE9F4; /* ラムネの泡: 淡い背景帯・info */
  --kinako:   #F0C24A; /* きなこ棒（版画の刷り色）: マーカー・シール・硬貨 */
  --melon:    #4CA86A; /* メロンソーダ（版画の刷り色）: OK・完了（背景用） */
  --melon-2:  #2C7A48; /* 濃いメロン: 緑の文字 */
  --ichigo:   #E8889F; /* いちごミルク（版画の刷り色）: 遊びのアクセント */
  --line:     #06C755; /* LINE公式色: LINEボタンのみ */
  --white:    #FFFFFF;
  --focus:    var(--ramune);

  /* 書体（Google Fonts・4書体。役割を固定し混ぜない） ------------------------ */
  --ff-brush:   'Yuji Syuku','Shippori Antique B1',serif;       /* 筆文字: ヒーロー見出し・CTA帯見出し・朱印のみ */
  --ff-display: 'Shippori Antique B1','Zen Maru Gothic',sans-serif; /* v4: Potta Oneは小さいと読みにくいため読みやすいレトロ書体に変更。見出し・大きな数字・シール全部これで統一（サイズによる書体の使い分けは廃止） */
  --ff-body:    'Zen Maru Gothic',sans-serif;                  /* 本文・ボタン・ナビ */
  --ff-hand:    'Yusei Magic','Zen Maru Gothic',sans-serif;    /* 手書き: 値札・キッカー等 */

  /* 文字サイズ（流動・clamp） --------------------------------------------- */
  --fs-display: clamp(40px, 6.4vw, 68px);
  --fs-h1:      clamp(32px, 5vw, 52px);
  --fs-h2:      clamp(26px, 3.6vw, 36px);
  --fs-h3:      clamp(20px, 2.4vw, 24px);
  --fs-lead:    clamp(17px, 2vw, 20px);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-hand:    clamp(18px, 2.4vw, 24px);
  --fs-stat:    clamp(40px, 6vw, 64px);

  /* 余白（4px基準） -------------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --sec-y: clamp(48px, 8vw, 96px);

  /* 角丸（ゼロは禁止） ------------------------------------------------------ */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  /* 枠・影（くっきり・blur なし） -------------------------------------------- */
  --bw: 3px;       /* ボタン・シール・判 */
  --bw-card: 2px;  /* カード・入力欄などの通常の枠（仕様書 §2.4 の「カードは2px」を変数化） */
  --sh-1: 3px 3px 0 var(--ink);
  --sh-2: 5px 5px 0 var(--ink);
  --sh-kraft: 4px 4px 0 var(--kraft-2); /* 紙の上のカード用 */

  /* コンテナ・レイアウト --------------------------------------------------- */
  --container: 1120px;
  --container-narrow: 720px;
  --gutter: clamp(16px, 4vw, 32px);
  /* ブレークポイントの参考値（メディアクエリはカスタムプロパティを解決できないため
     @media 側では 640px / 900px を直値で使う。値の一元管理用にここにも記録する） */
  --bp-sm: 640px;
  --bp-md: 900px;

  /* 柄（CSS背景をトークン化） ------------------------------------------------ */
  --pat-awning: repeating-linear-gradient(90deg, var(--atari) 0 24px, var(--white) 24px 48px);
  --pat-awning-blue: repeating-linear-gradient(90deg, var(--ramune) 0 24px, var(--white) 24px 48px);
  --pat-dots: radial-gradient(var(--kinako) 3px, transparent 3.5px) 0 0/22px 22px;
  --pat-gingham:
    linear-gradient(90deg, rgba(43,118,210,.10) 50%, transparent 50%),
    linear-gradient(rgba(43,118,210,.10) 50%, transparent 50%);
  /* v3.1: 七宝柄。輪郭リング(円環)を2層、タイル半分(20px)ずらして重ねる定番の書き方に修正
     （v3の塗りつぶし円1層は扇形の欠片に見えたため）。藍(--ai)を12%だけ混ぜた輪、タイル40px */
  --pat-shippou:
    radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--ai) 12%, transparent) 58%, color-mix(in srgb, var(--ai) 12%, transparent) 64%, transparent 66%) 0 0/40px 40px,
    radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--ai) 12%, transparent) 58%, color-mix(in srgb, var(--ai) 12%, transparent) 64%, transparent 66%) 20px 20px/40px 40px;
  /* v4: 紙の目を強く。feTurbulenceのノイズをグレースケール化し不透明度.06で重ねる
     （SVGは埋め込み画像のためvar()が効かず直値。#はデータURI内で%23）--------------- */
  --pat-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
/* ---- 2. ベース ----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background-color: var(--paper);
  background-image: var(--pat-paper); /* v4: 紙の目 */
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* 横スクロールは .zd-table-wrap の中だけ */
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--ff-display);
  line-height: 1.25;
  letter-spacing: .02em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

p{ margin: 0 0 var(--sp-4); }
p:last-child{ margin-bottom: 0; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

/* v3: <figure>のUA既定余白(margin:1em 40px)を解除。.zd-figureを.zd-rowで横並びにしたときに
   40px×2の見えない余白でflex-wrapが誤発火し縦積みになる不具合があったため（9 内容 参照） */
figure{ margin: 0; }

img, svg{ max-width: 100%; display: block; }

a{
  color: var(--ramune-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 140ms ease;
}
a:hover{ color: var(--atari-2); }

button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }

/* v3.1: [hidden]のUA既定はdisplay:noneだが、.zd-btn/.zd-alert/.zd-form等のDS部品は
   displayを指定しているため（オリジン優先度でauthor > UAとなり）hidden属性が効かなくなる。
   !importantで確実に効くようにする（管理画面のタブ切替・ログインゲート等がhidden依存のため） */
[hidden]{ display: none !important; }

/* フォーカスリング（タップ目標は各部品側で44px以上を確保） */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* スキップリンク（フォーカス時のみ表示） */
.zd-skip{
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 1000;
  background: var(--white);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  text-decoration: none;
  transition: top 140ms ease;
}
.zd-skip:focus-visible{ top: var(--sp-3); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  a, .zd-skip{ transition: none; }
}
/* ---- 3. アイコン（JSなし・CSS mask の data URI・currentColor で着色） ----------
   17種: candy ramune coin star lantern flag pin card heart mail camera x note arrow check menu close
   mask は既定でアルファチャンネル判定のため SVG 内の fill は黒(#000)でよい（色は表示に無関係）。
   データURI内の # は %23 に、< > も %3C/%3E にエスケープ（url() の誤解釈防止）。
   穴が要る図形（コイン・ラムネ・カメラのレンズ・封筒/カードの枠・ノートの罫線・ピンの穴）は
   fill-rule="evenodd" の複合パスで作る（内側に白を重ねても mask 上は消えないため不可）。
   各図形は --zd-svg-* に url() として保持し、.zd-ico.* だけでなく .zd-kicker（candy）・
   .zd-list（candy/check）・.zd-faq-item summary（arrow）・.zd-check/.zd-radio（check）等の
   ::before/::after からも var() 経由で使い回す（同じ絵柄の二重定義を避けるため）。
   -------------------------------------------------------------------------- */
:root{
  --zd-svg-candy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 9a3 3 0 013-3h6a3 3 0 013 3v6a3 3 0 01-3 3H9a3 3 0 01-3-3V9z'/%3E%3Cpath fill='%23000' d='M6 10.5L1.5 8v8L6 13.5zM18 10.5L22.5 8v8L18 13.5z'/%3E%3C/svg%3E");
  --zd-svg-ramune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10 1h4v4.2c0 .5.3.9.7 1.3A5.5 5.5 0 0117 10.8V21a2 2 0 01-2 2h-6a2 2 0 01-2-2V10.8a5.5 5.5 0 012.3-4.3c.4-.4.7-.8.7-1.3V1zm2 8.4a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z'/%3E%3C/svg%3E");
  --zd-svg-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 3a7 7 0 110 14 7 7 0 010-14z'/%3E%3C/svg%3E");
  --zd-svg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");
  --zd-svg-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23000' x='10' y='1' width='4' height='3'/%3E%3Cellipse fill='%23000' cx='12' cy='12' rx='8' ry='9'/%3E%3Crect fill='%23000' x='10' y='20' width='4' height='3'/%3E%3C/svg%3E");
  --zd-svg-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23000' x='3' y='2' width='2' height='20'/%3E%3Cpolygon fill='%23000' points='5,4 20,9 5,14'/%3E%3C/svg%3E");
  --zd-svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
  --zd-svg-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M2 4h20v16H2V4zm2 2v12h16V6H4z'/%3E%3Crect fill='%23000' x='4' y='9' width='16' height='3'/%3E%3C/svg%3E");
  --zd-svg-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-7.5-4.7-10-9.3C.5 8.4 2 5 5.5 5c2 0 3.4 1.1 4.2 2.2A5 5 0 0112 8a5 5 0 012.3-.8C15.1 6.1 16.5 5 18.5 5 22 5 23.5 8.4 22 11.7 19.5 16.3 12 21 12 21z'/%3E%3C/svg%3E");
  --zd-svg-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M2 5h20v14H2V5zm2 2v10h16V7H4z'/%3E%3Cpath fill='%23000' d='M3.5 6.5L12 13l8.5-6.5 1.2 1.6L12 16 2.3 8.1z'/%3E%3C/svg%3E");
  --zd-svg-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M9 4h6l1.2 2H21a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4.8L9 4zm3 5a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E");
  --zd-svg-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3l7.1 8.9L4.4 21h2.6l5.7-6.8 5 6.8h3.9l-7.5-9.3L20.8 3h-2.6l-5.3 6.3L8.4 3H4z'/%3E%3C/svg%3E");
  --zd-svg-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5 2h9l5 5v15H5V2zm8 1.5V8h4.5L13 3.5zM7 12h10v1.6H7V12zm0 4h10v1.6H7V16z'/%3E%3C/svg%3E");
  --zd-svg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 9l6 6 6-6 1.4 1.4L12 17.8 4.6 10.4z'/%3E%3C/svg%3E");
  --zd-svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2L4.8 12l-1.4 1.4L9 19 20.6 7.4 19.2 6z'/%3E%3C/svg%3E");
  --zd-svg-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23000' x='3' y='5.5' width='18' height='2.6' rx='1.3'/%3E%3Crect fill='%23000' x='3' y='10.7' width='18' height='2.6' rx='1.3'/%3E%3Crect fill='%23000' x='3' y='15.9' width='18' height='2.6' rx='1.3'/%3E%3C/svg%3E");
  --zd-svg-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 5L5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4 17.6 5 12 10.6z'/%3E%3C/svg%3E");
}

.zd-ico{
  --ico: 1.2em;
  display: inline-block;
  width: var(--ico);
  height: var(--ico);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.2em;
  flex-shrink: 0;
}
.zd-ico.candy{ -webkit-mask-image: var(--zd-svg-candy); mask-image: var(--zd-svg-candy); }
.zd-ico.ramune{ -webkit-mask-image: var(--zd-svg-ramune); mask-image: var(--zd-svg-ramune); }
.zd-ico.coin{ -webkit-mask-image: var(--zd-svg-coin); mask-image: var(--zd-svg-coin); }
.zd-ico.star{ -webkit-mask-image: var(--zd-svg-star); mask-image: var(--zd-svg-star); }
.zd-ico.lantern{ -webkit-mask-image: var(--zd-svg-lantern); mask-image: var(--zd-svg-lantern); }
.zd-ico.flag{ -webkit-mask-image: var(--zd-svg-flag); mask-image: var(--zd-svg-flag); }
.zd-ico.pin{ -webkit-mask-image: var(--zd-svg-pin); mask-image: var(--zd-svg-pin); }
.zd-ico.card{ -webkit-mask-image: var(--zd-svg-card); mask-image: var(--zd-svg-card); }
.zd-ico.heart{ -webkit-mask-image: var(--zd-svg-heart); mask-image: var(--zd-svg-heart); }
.zd-ico.mail{ -webkit-mask-image: var(--zd-svg-mail); mask-image: var(--zd-svg-mail); }
.zd-ico.camera{ -webkit-mask-image: var(--zd-svg-camera); mask-image: var(--zd-svg-camera); }
.zd-ico.x{ -webkit-mask-image: var(--zd-svg-x); mask-image: var(--zd-svg-x); }
.zd-ico.note{ -webkit-mask-image: var(--zd-svg-note); mask-image: var(--zd-svg-note); }
.zd-ico.arrow{ -webkit-mask-image: var(--zd-svg-arrow); mask-image: var(--zd-svg-arrow); }
.zd-ico.check{ -webkit-mask-image: var(--zd-svg-check); mask-image: var(--zd-svg-check); }
.zd-ico.menu{ -webkit-mask-image: var(--zd-svg-menu); mask-image: var(--zd-svg-menu); }
.zd-ico.close{ -webkit-mask-image: var(--zd-svg-close); mask-image: var(--zd-svg-close); }
/* ---- 4. 文字 -------------------------------------------------------------- */
/* v2: ヒーロー見出しはロゴの書と同じ声＝筆文字。字間広め・行間ゆったり・筆致は
   線が細いので text-stroke でわずかに締める（フォント自体にweight指定は無い） */
.zd-display{
  font-family: var(--ff-brush);
  font-size: var(--fs-display);
  line-height: 1.2;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 0.4px currentColor;
}
/* 1行が8〜10字になる見出し（タグライン等）用: 2カラムのヒーローでも折り返さない大きさ */
.zd-display.long{ font-size: clamp(36px, 5.5vw, 60px); }
/* v4: 版ズレ（2色刷りのズレ風の影）をh1/h2に付ける。影は直値不可の理由なし（var()使用） */
.zd-h1{ font-family: var(--ff-display); font-size: var(--fs-h1); text-shadow: 3px 3px 0 var(--kinako); }
/* v4: 字間0.04em・行間1.3（Shippori Antique B1は詰まりにくいがレトロな余裕を持たせる） */
.zd-h2{ font-family: var(--ff-display); font-size: var(--fs-h2); letter-spacing: 0.04em; line-height: 1.3; text-shadow: 3px 3px 0 var(--kinako); }
/* v4: Shippori Antique B1は26px未満でも読みやすいため表示書体に統一（v3の本文書体900は廃止） */
.zd-h3{ font-family: var(--ff-display); font-size: var(--fs-h3); }

.zd-lead{ font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-2); font-weight: 500; }
.zd-small{ font-size: var(--fs-small); color: var(--ink-2); }
.zd-hand{ font-family: var(--ff-hand); font-size: var(--fs-hand); }

/* キッカー: 手書きの短い呼びかけ。先頭に candy アイコン（朱の濃色）。
   ブロック扱いにして必ず自分の行を持つ（h2と同じ行に並んで読めてしまう事故を防ぐ） */
.zd-kicker{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  color: var(--atari-2);
  margin: 0 0 var(--sp-2);
}
.zd-kicker::before{
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--atari-2);
  -webkit-mask-image: var(--zd-svg-candy);
  mask-image: var(--zd-svg-candy);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  flex-shrink: 0;
}

/* セクション見出しブロック: kicker + h2 + 任意の lead */
.zd-title{ margin: 0 0 var(--sp-6); }
.zd-title.zd-center{ text-align: center; }
.zd-title.zd-center .zd-kicker{ justify-content: center; }
.zd-title .zd-h2{ margin: 0 0 var(--sp-3); }
.zd-title .zd-lead{ margin: 0; }

/* 見出し下の手描き波線（きなこ色）。SVGは埋め込み画像のため var() が効かず直値。= --kinako(#F0C24A) */
.zd-h2.wavy{
  display: inline-block;
  padding-bottom: var(--sp-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q5 0 10 6 T20 6 T30 6 T40 6' fill='none' stroke='%23F0C24A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 40px 10px;
}

/* マーカー: 文字下 60% にきなこ色を敷く */
.zd-hl{
  background-image: linear-gradient(var(--kinako), var(--kinako));
  background-repeat: no-repeat;
  background-size: 100% 60%;
  background-position: 0 100%;
  padding: 0 .1em;
}

.zd-accent{ color: var(--atari-2); }
/* ---- 5. 骨組み ------------------------------------------------------------ */
.zd-container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.zd-container.narrow{ max-width: var(--container-narrow); }

.zd-section{
  padding-block: var(--sec-y);
  background: var(--paper);
}
/* v4: 活版の罫（2色刷りの区切り罫のイメージ） */
.zd-section.white{ background: var(--paper-2); border-top: 3px double var(--kraft-2); }
.zd-section.kraft{ background: var(--kraft); border-top: 3px double var(--kraft-2); }
.zd-section.soda{ background: var(--soda); }
.zd-section.gingham{
  background-color: var(--paper-2);
  background-image: var(--pat-gingham);
  background-size: 20px 20px;
  background-blend-mode: multiply;
}

.zd-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--sp-5);
}
.zd-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.zd-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.zd-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 899px){
  .zd-grid.cols-3, .zd-grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639px){
  .zd-grid.cols-2, .zd-grid.cols-3, .zd-grid.cols-4{ grid-template-columns: minmax(0,1fr); }
  /* .min-2 を足すと640px未満でも2列を保つ（メーカーロゴ・ギャラリーなど小さなカード向け） */
  .zd-grid.cols-2.min-2, .zd-grid.cols-3.min-2, .zd-grid.cols-4.min-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.zd-stack{ display: flex; flex-direction: column; gap: var(--sp-4); }

.zd-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.zd-center{ display: flex; flex-direction: column; align-items: center; text-align: center; }
/* ---- 6. ブランド ----------------------------------------------------------- */
.zd-logo{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  text-decoration: none;
}
.zd-logo:hover{ color: var(--ink); }

/* v3: 紋章(emblem.png)が透過PNG（円の縁取りごと絵柄に含まれる）になったので、
   白い円の下地・枠・::afterの仮紋章フォールバックは廃止し、画像だけを表示する */
.zd-logo-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.zd-logo-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 900px){
  .zd-logo-mark{ width: 56px; height: 56px; }
}

/* 団体名は筆文字（ロゴの書と同じ声）。640px未満はヘッダー側でさらに縮める */
.zd-logo-text{
  font-family: var(--ff-brush);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
/* バナーから筆文字を切り出した wordmark.png が用意できたら <img class="zd-logo-wordmark"> に */
.zd-logo-wordmark{
  height: 28px;
  width: auto;
  display: block;
}

/* v3: 小さなタグライン画像（tagline.png）。900px未満は幅の都合で出さず、
   900px以上だけ .zd-logo-wordmark の上に重ねて2段組みにする（ヘッダーの3段ルールは崩さない） */
.zd-logo-tagline{
  display: none;
  height: 11px;
  width: auto;
}
@media (min-width: 900px){
  .zd-logo-tagline{ display: block; }
  /* mark(縦2段ぶんの高さ)｜tagline / wordmark の2×2グリッドに組み替える。
     tagline要素が無い .zd-logo（フッタ等）でも1行目が空になるだけで従来どおり中央揃えに見える */
  .zd-logo{ display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: var(--sp-2); }
  .zd-logo-mark{ grid-column: 1; grid-row: 1 / 3; }
  .zd-logo-tagline{ grid-column: 2; grid-row: 1; align-self: end; }
  .zd-logo-wordmark{ grid-column: 2; grid-row: 2; align-self: start; }
}

/* タグライン: 団体の一文「未来の子供たちへ 駄菓子屋文化を」。ヒーロー上部・フッタに */
.zd-tagline{
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin: 0;
}

/* v3: 紋章を大きく見せる円（既定160px・.lg 240px）。emblem.pngが透過PNG（円の縁取りごと
   絵柄に含まれる）になったので、白い円の下地・枠・box-shadow・::afterの文字代替は廃止し、
   画像だけを表示する */
.zd-emblem{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.zd-emblem img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.zd-emblem.lg{ width: 240px; height: 240px; }

/* 朱印（落款）: 正方形・朱塗り・白の筆文字を縦書き。画像(seal.png)が来たら中の img が上に乗る */
.zd-seal{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  padding: 2px;
  background: var(--atari);
  border: 2px solid var(--atari-2);
  border-radius: var(--r-sm);
  color: var(--white);
  font-family: var(--ff-brush);
  font-size: 18px;
  line-height: 1.05;
  writing-mode: vertical-rl;
  white-space: nowrap;
  rotate: -4deg; /* v3: 独立プロパティ化。.zd-hero-art内の浮遊(translate)と衝突させないため */
}
.zd-seal img{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.zd-seal.sm{ width: 44px; height: 44px; font-size: 12px; }

/* 「当たり」判: 円・朱枠・内側に破線の輪・手書き朱文字・-12度に傾ける */
.zd-stamp{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--bw) solid var(--atari);
  background: var(--paper-2);
  rotate: -12deg; /* v3: 独立プロパティ化。動き時はゆれ(zd-stamp-sway)がこの値を基準に回転する */
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  color: var(--atari);
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  padding: var(--sp-2);
}
.zd-stamp::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px dashed var(--atari);
}
.zd-stamp.small{
  width: 72px;
  height: 72px;
  font-size: 13px;
}
.zd-stamp.small::before{ inset: 4px; }

/* 公式駄菓子屋さんカードのトレカ枠（縦63:88） -------------------------------- */
.zd-tcard{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 240px;
  aspect-ratio: 63 / 88;
  padding: 10px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.zd-tcard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.zd-tcard-head .kind{
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
}
.zd-tcard-head .janken{ font-size: 20px; line-height: 1; }
.zd-tcard-photos{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 4px;
}
.zd-tcard-photos .ph{
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--kraft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden;
}
.zd-tcard-photos .ph img{ width: 100%; height: 100%; object-fit: cover; }
.zd-tcard-name{
  font-family: var(--ff-display); /* v4: 表示書体に統一 */
  font-size: 16px;
  text-align: center;
}
.zd-tcard-power{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
}
.zd-tcard-power .n{ font-family: var(--ff-display); font-size: 40px; color: var(--atari); line-height: 1; }
.zd-tcard-power .l{ font-size: 12px; color: var(--ink-2); }
.zd-tcard-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px dotted var(--kraft-2);
  font-size: 11px;
  color: var(--ink-2);
}

/* ---- 6a. v3 新しいブランド部品（横ロゴ・帯・キャラクター・フェスロゴ） --------------
   design-spec.md 冒頭「ブランド資産 v3」参照。すべて assets/brand/ の実画像を表示する薄い
   ラッパー。ここでは大きさ・並びだけを定義し、動き(animation)は12節にまとめる（既存の
   .zd-sticker 等と同じ配置方針）。background の url() はこのCSSファイル自身からの相対パス
   （../assets/brand/…）で解決されるため、読み込み元HTMLの場所には依存しない -------------- */

/* 横ロゴ（logo-h.png）。フッタ上部・取り下げ申請/管理画面ログインに使う */
.zd-brand-h{
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* 手をつないだ子どもの列の帯（kids-row.webp）。ヒーロー直下・フッタ上に */
.zd-kids-row{
  display: flex;
  justify-content: center;
  padding-block: var(--sp-5);
  overflow: hidden; /* v3: ゆれのはみ出し防止 */
}
.zd-kids-row img{
  width: 100%;
  max-width: 900px;
}

/* キャラクター（おじぎ=.bow／両手=.cheer）。既定180px・900px以上220px。.smは常に120px */
.zd-chara{
  display: block;
  height: 180px;
  width: auto;
  flex-shrink: 0;
}
@media (min-width: 900px){
  .zd-chara{ height: 220px; }
}
.zd-chara.sm{ height: 120px; }

/* 駄菓子フェスの丸ロゴ（fes-logo.webp）。既定240px・900px以上320px。.smは120px */
.zd-fes-logo{
  display: block;
  width: 240px;
  height: auto;
}
@media (min-width: 900px){
  .zd-fes-logo{ width: 320px; }
}
.zd-fes-logo.sm{ width: 120px; }

/* 「全駄会」の子供柄（pattern-kids.jpg）を横に流す帯。上下に藍(--ai)2pxの罫。
   width:100%を明示（flexコンテナ内に置かれても幅0に潰れないように） */
.zd-band.kids{
  width: 100%;
  height: 72px;
  background-image: url("../assets/brand/pattern-kids.jpg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  border-block: 2px solid var(--ai);
}

/* --paper地に七宝柄の実写画像(pattern-shippou.jpg)を薄く敷く区画 */
.zd-section.shippou{ position: relative; }
.zd-section.shippou::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/brand/pattern-shippou.jpg");
  background-size: cover;
  background-position: center;
  opacity: .14;
  pointer-events: none;
}
.zd-section.shippou > .zd-container{ position: relative; z-index: 1; }

/* ---- 7. アクション --------------------------------------------------------- */
.zd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--ink);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-1);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.zd-btn:hover{ transform: translate(-1px,-1px); box-shadow: var(--sh-2); }
.zd-btn:active{ transform: translate(3px,3px); box-shadow: none; }

/* 色変種: 白字でよいのは atari / ramune / line だけ（18px以上の太字で運用） */
.zd-btn.atari{ background: var(--atari); color: var(--white); }
.zd-btn.ramune{ background: var(--ramune); color: var(--white); }
.zd-btn.kinako{ background: var(--kinako); color: var(--ink); }
.zd-btn.ghost{ background: var(--white); color: var(--ink); }
.zd-btn.line{ background: var(--line); color: var(--white); }

/* サイズ変種 */
.zd-btn.lg{ font-size: 20px; padding: 18px 36px; }
.zd-btn.sm{ font-size: 15px; padding: 8px 16px; }
.zd-btn.block{ display: flex; width: 100%; }

.zd-btn-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.zd-btn-group.zd-center{ justify-content: center; }

/* 丸い44pxアイコンボタン（SNSリンク用）。aria-label 必須 */
.zd-iconbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--sh-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.zd-iconbtn:hover{ transform: translate(-1px,-1px); box-shadow: var(--sh-2); }
.zd-iconbtn:active{ transform: translate(2px,2px); box-shadow: none; }

.zd-sns{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
/* ---- 8. ラベル（主役） ------------------------------------------------------ */

/* 値札・シール・バッジ・チップ・判は、親が display:flex の縦積み（例: .zd-card-body）の
   中に置かれても幅いっぱいに伸びない。中身の幅だけを持ち、自分から詰めて並ぶ */
.zd-tag, .zd-sticker, .zd-badge, .zd-chip, .zd-stamp{
  align-self: flex-start;
  width: fit-content;
}

/* 値札: 白面・2px ink枠・角丸6px（トークンの--r-smとは別の値。紙の値札のための固有値）・
   左に紐穴。例「10円」「入場無料」「会費無料」 */
.zd-tag{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
}
.zd-tag::before{
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.zd-tag.tilt{ rotate: -3deg; } /* v3: 独立プロパティ化（浮遊のtranslateと衝突させないため） */
.zd-tag.kinako{ background: var(--kinako); }
.zd-tag.soda{ background: var(--soda); }

/* シール: 円。白縁4px+外側ink2pxの二重リング。2行可（「入場<br>無料」） */
.zd-sticker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--ink);
  rotate: -8deg; /* v3: 独立プロパティ化（浮遊のtranslateと衝突させないため） */
  font-family: var(--ff-display);
  font-size: 17px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  padding: var(--sp-2);
}
.zd-sticker.sm{ width: 64px; height: 64px; font-size: 13px; }
.zd-sticker.lg{ width: 128px; height: 128px; font-size: 22px; }
.zd-sticker.tilt-r{ rotate: 6deg; }
.zd-sticker.atari{ background: var(--atari); color: var(--white); }
.zd-sticker.ramune{ background: var(--ramune); color: var(--white); }
.zd-sticker.kinako{ background: var(--kinako); color: var(--ink); }
.zd-sticker.ichigo{ background: var(--ichigo); color: var(--ink); }
.zd-sticker.melon{ background: var(--melon); color: var(--ink); }

/* 小さな行内ピル（受付中・満席・NEW）。既定はink面白字（暗背景なのでサイズ問わず安全）。
   朱・ラムネは12pxでは白字コントラストが不足するため、白面+濃色文字+濃色枠の形にする
   （§2.1「小さい赤文字は--atari-2、青文字は--ramune-2」に合わせた実装判断） */
.zd-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
}
.zd-badge.atari{ background: var(--paper-2); color: var(--atari-2); border: 2px solid var(--atari-2); }
.zd-badge.ramune{ background: var(--paper-2); color: var(--ramune-2); border: 2px solid var(--ramune-2); }
.zd-badge.melon{ background: var(--melon); color: var(--ink); }
.zd-badge.kinako{ background: var(--kinako); color: var(--ink); }

/* 絞り込みチップ（都道府県・カテゴリ） */
.zd-chip{
  display: inline-flex;
  align-items: center;
  appearance: none;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background: var(--kraft);
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.zd-chip.active{ background: var(--atari); color: var(--white); animation: zd-pulse 1.6s ease-in-out infinite; } /* v4: keyframeは12 動き節で定義 */
/* ---- 9. 内容 --------------------------------------------------------------
   カード・吹き出し・数字・手順・表・FAQ・案内帯・リスト・メニュー表・区切り線・
   テント・三角旗・図版・ギャラリー・アクセスをまとめる（複数ファイルに分割し末尾で結合）。
   ---------------------------------------------------------------------- */

/* カード ---------------------------------------------------------------- */
.zd-card{
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-kraft);
  outline: 1px dashed var(--kraft-2); /* v4: 切符・値札風の内側破線 */
  outline-offset: -8px;
}
.zd-card-media{
  aspect-ratio: 4/3;
  background: var(--kraft);
  border-radius: var(--r-lg) var(--r-lg) 0 0; /* 上辺だけ角丸。overflowは自分だけで持つ */
  overflow: hidden;
}
.zd-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.zd-card-body{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  padding: var(--sp-5);
}
.zd-card-title{ font-family: var(--ff-display); font-size: var(--fs-h3); margin: 0; } /* v4: 表示書体に統一 */
.zd-card-text{ font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); margin: 0; }
.zd-card-foot{ margin-top: auto; padding-top: var(--sp-3); }

/* 掲示板のお知らせ: 上辺中央にマスキングテープ */
.zd-card.notice{ position: relative; }
.zd-tape{
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 88px;
  height: 28px;
  background: rgba(255,200,61,.55); /* きなこ半透明のマスキングテープ */
  border: 1px solid rgba(42,26,16,.15);
}

/* 出展メーカー: 正方形ロゴ枠 */
.zd-card.maker .zd-card-media{
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 加盟店: 都道府県チップを写真左上に重ねる */
.zd-card.shop .zd-card-media{ position: relative; }
.zd-card.shop .zd-card-media .zd-chip{
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
}

/* hover で操作への反応として浮かせる */
.zd-card.hover{ transition: transform 140ms ease, box-shadow 140ms ease; }
.zd-card.hover:hover{ transform: translate(-2px,-2px) rotate(-1deg); box-shadow: var(--sh-2); } /* v4: わずかに傾ける */
/* 吹き出し（左下にしっぽ・.right で右しっぽ・2px ink枠と揃えた二重三角） --------- */
.zd-bubble{
  position: relative;
  background: var(--paper-2);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.zd-bubble::before, .zd-bubble::after{
  content: "";
  position: absolute;
  bottom: -14px;
  left: 28px;
  border: 14px solid transparent;
  border-bottom: 0;
  border-top-color: var(--ink);
}
.zd-bubble::after{
  bottom: -10px;
  left: 31px;
  border-width: 11px;
  border-bottom: 0;
  border-top-color: var(--paper-2);
}
.zd-bubble.right::before{ left: auto; right: 28px; }
.zd-bubble.right::after{ left: auto; right: 31px; }
.zd-bubble.hand{ font-family: var(--ff-hand); font-size: var(--fs-hand); }
.zd-bubble-who{ display: block; margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); }

/* 大きな数字 ------------------------------------------------------------- */
.zd-stats{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.zd-stat{
  flex: 1 1 160px;
  background: var(--paper-2);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
}
.zd-stat .n{ font-family: var(--ff-display); font-size: var(--fs-stat); color: var(--atari); line-height: 1; }
.zd-stat .u{ font-family: var(--ff-hand); font-size: var(--fs-hand); color: var(--atari); margin-left: 2px; white-space: nowrap; }
.zd-stat .l{ display: block; margin-top: var(--sp-2); font-size: 14px; color: var(--ink-2); }

/* 手順（本当に順番があるときだけ）。番号は10円硬貨に見立てる ------------------- */
.zd-steps{ display: flex; flex-direction: column; }
.zd-steps > li{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
}
.zd-steps > li:first-child{ padding-top: 0; }
.zd-steps > li:not(:first-child)::before{
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  height: var(--sp-5);
  border-left: 2px dashed var(--kraft-2);
}
.zd-step-no{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kinako);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 18px;
  color: var(--ink);
}
.zd-step-title{ font-family: var(--ff-display); font-size: var(--fs-h3); margin: 0 0 4px; } /* v4: 表示書体に統一 */
.zd-step-text{ margin: 0; color: var(--ink-2); }

/* md以上は横並び。点線の連結は「未満で縦」のときだけの仕様のため、横並びでは
   ::before を出さず、gap による等間隔だけで区切る */
@media (min-width: 900px){
  .zd-steps{ flex-direction: row; align-items: flex-start; gap: var(--sp-5); }
  .zd-steps > li{
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0;
  }
  .zd-steps > li:not(:first-child)::before{ content: none; }
}
/* タイムテーブル。横スクロールは wrap 側だけで持つ（本文は横に動かさない） --------- */
.zd-table-wrap{
  overflow-x: auto;
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-kraft);
}
.zd-timetable{ width: 100%; border-collapse: collapse; min-width: 480px; }
.zd-timetable thead th{
  background: var(--atari);
  color: var(--white);
  font-family: var(--ff-body); /* v3: 26px未満は本文書体の極太に */
  font-weight: 900;
  text-align: left;
  font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
}
.zd-timetable tbody td{ padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--kraft-2); }
.zd-timetable tbody tr:nth-child(odd){ background: var(--paper); }
.zd-timetable tbody tr:nth-child(even){ background: var(--paper-2); }
.zd-timetable tbody tr:last-child td{ border-bottom: 0; }
.zd-timetable td.time{ font-family: var(--ff-hand); font-size: var(--fs-hand); white-space: nowrap; }

/* よくある質問。Q=朱円白字／A=ラムネ円白字。開閉は矢印アイコンの回転のみ --------- */
.zd-faq-item{
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.zd-faq-item + .zd-faq-item{ margin-top: var(--sp-4); }
.zd-faq-item summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--ff-display); /* v4: 質問文は表示書体に統一（v3の本文書体900は廃止） */
}
.zd-faq-item summary::-webkit-details-marker{ display: none; }
.zd-faq-item .zd-q, .zd-faq-a .zd-a{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 15px;
}
.zd-faq-item .zd-q{ background: var(--atari); color: var(--white); }
.zd-faq-a .zd-a{ background: var(--ramune); color: var(--white); }
.zd-faq-item summary .zd-q-text{ flex: 1; }
.zd-faq-item summary .zd-ico.arrow{ margin-left: auto; transition: transform 140ms ease; }
.zd-faq-item[open] summary .zd-ico.arrow{ transform: rotate(180deg); }
.zd-faq-a{ display: flex; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); }

/* 案内帯: 先頭にアイコン。info=note/soda・warn=star/kinako・ok=check/薄melon ------- */
.zd-alert{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border-left: 6px solid var(--ink);
  background: var(--kraft);
  color: var(--ink);
}
.zd-alert .zd-ico{ margin-top: 3px; }
.zd-alert.info{ background: var(--soda); border-left-color: var(--ramune); }
.zd-alert.info .zd-ico{ background-color: var(--ramune-2); }
.zd-alert.warn{ background: var(--kinako); border-left-color: var(--atari); }
.zd-alert.warn .zd-ico{ background-color: var(--atari-2); }
.zd-alert.ok{ background: color-mix(in srgb, var(--melon) 16%, var(--paper-2)); border-left-color: var(--melon); }
.zd-alert.ok .zd-ico{ background-color: var(--melon-2); }
/* 箇条書き: 印は candy アイコン（朱）／ .check で check アイコン（--melon-2） ------- */
.zd-list{ display: flex; flex-direction: column; gap: var(--sp-3); }
/* li は flex にしない: <strong>＋地の文のように子が複数あると別々の列に割れて崩れる（マップ「カードの見方」で発生）。
   飴のアイコンは absolute で左に置き、中身はふつうの行内文として流す。 */
.zd-list li{ position: relative; padding-left: calc(1.1em + var(--sp-3)); line-height: 1.7; }
.zd-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--atari);
  -webkit-mask-image: var(--zd-svg-candy);
  mask-image: var(--zd-svg-candy);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.zd-list.check li::before{
  background-color: var(--melon-2);
  -webkit-mask-image: var(--zd-svg-check);
  mask-image: var(--zd-svg-check);
}

/* 駄菓子屋のメニュー表。点線リーダー＋手書きの値段（参加費・出展料の表示にも使う） --- */
.zd-price-list{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  row-gap: var(--sp-3);
  margin: 0;
}
.zd-price-list dt{
  grid-column: 1;
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin: 0;
}
.zd-price-list dt::after{
  content: "";
  flex: 1;
  min-width: var(--sp-5);
  margin: 0 var(--sp-2);
  border-bottom: 2px dotted var(--kraft-2);
  transform: translateY(-5px);
}
.zd-price-list dd{
  grid-column: 2;
  margin: 0;
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  white-space: nowrap;
}

/* 区切り線: 手描きの波線。SVGは埋め込み画像のため直値（= --kraft-2 / .atari は --atari） */
.zd-divider{
  height: 12px;
  margin-block: var(--sp-6);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 40px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q5 0 10 6 T20 6 T30 6 T40 6' fill='none' stroke='%23CDB18A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zd-divider.atari{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q5 0 10 6 T20 6 T30 6 T40 6' fill='none' stroke='%23E2452D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 日よけテント帯。下辺は白いスカラップ（半円を並べたトリム）。柄は var(--pat-awning*) で
   var()経由（グラデーションのみなのでトークンを直接使える。SVGを使わないためこの2つは
   直値化の対象外）。ヘッダー上辺・区画の区切りに使う。 ------------------------------- */
.zd-awning{
  position: relative;
  height: 20px;
  background: var(--pat-awning);
}
.zd-awning::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  background-image: radial-gradient(circle at center, var(--white) 10px, transparent 10px);
  background-size: 20px 20px;
  background-position: 0 -10px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.zd-awning.blue{ background: var(--pat-awning-blue); }
.zd-awning.thin{ height: 12px; }
.zd-awning.thin::after{
  height: 6px;
  background-size: 12px 12px;
  background-position: 0 -6px;
}

/* 三角旗の帯。紐＋朱/きなこ/ラムネ/いちご/メロンの旗、1周期(200x44)を横に繰り返す。
   SVGは埋め込み画像のため var() が効かず直値（紐=--ink(#14262E)、旗=左から
   --atari(#E2452D) --kinako(#F0C24A) --ramune(#3B76C4) --ichigo(#E8889F) --melon(#4CA86A)）。
   環境アニメ: 上辺を軸に±2deg(v4)・4sでゆれる。停止はhtml.zd-still（12節）で一括。 --------- */
.zd-bunting{
  height: 44px;
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 200px 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44'%3E%3Cline x1='0' y1='4' x2='200' y2='4' stroke='%2314262E' stroke-width='2'/%3E%3Cpolygon points='4,4 36,4 20,40' fill='%23E2452D'/%3E%3Cpolygon points='44,4 76,4 60,40' fill='%23F0C24A'/%3E%3Cpolygon points='84,4 116,4 100,40' fill='%233B76C4'/%3E%3Cpolygon points='124,4 156,4 140,40' fill='%23E8889F'/%3E%3Cpolygon points='164,4 196,4 180,40' fill='%234CA86A'/%3E%3C/svg%3E");
  transform-origin: top center;
  animation: zd-sway 4s ease-in-out infinite;
}
@keyframes zd-sway{
  0%, 100%{ transform: rotate(-2deg); } /* v4: ±1deg→±2deg */
  50%{ transform: rotate(2deg); }
}
/* 写真＋テープ角＋手書きキャプション ------------------------------------------ */
.zd-figure{ position: relative; }
.zd-figure img{
  width: 100%;
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-kraft);
}
.zd-figure::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 70px;
  height: 24px;
  z-index: 1;
  background: rgba(255,200,61,.55); /* きなこ半透明のテープ */
  border: 1px solid rgba(42,26,16,.15);
}
.zd-figure figcaption{
  margin-top: var(--sp-3);
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  color: var(--ink-2);
  text-align: center;
}

/* 正方形写真のグリッド（テープつき＝.zd-figureを流用） */
.zd-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-5) var(--sp-4);
}
.zd-gallery .zd-figure img{ aspect-ratio: 1/1; object-fit: cover; }
@media (min-width: 640px){
  .zd-gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* 会場アクセス: 地図枠（未設定時は kraft 面に pin）＋住所・行き方 ------------------ */
.zd-access{ display: grid; gap: var(--sp-5); }
.zd-map{
  position: relative;
  aspect-ratio: 16/9;
  background: var(--kraft);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zd-map .zd-ico{ --ico: 2.4em; background-color: var(--ink-2); }
.zd-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zd-access-body{ display: flex; flex-direction: column; gap: var(--sp-2); }
.zd-access-body h3{ font-family: var(--ff-display); font-size: var(--fs-h3); margin: 0; } /* v4: 表示書体に統一 */

@media (min-width: 900px){
  .zd-access{ grid-template-columns: 1.2fr 1fr; align-items: start; }
}

/* 全国駄菓子屋マップの都道府県タイル（§7の配置表どおりgrid-column/rowはHTML側のstyleで指定）。
   シール風の小さな正方形。640px未満は表示せず<select>に置き換える前提のため非表示 */
.zd-jpmap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 720px;
  min-width: 0;
}
.zd-jpmap-tile{
  appearance: none;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--ff-body); /* v3: 都道府県名(複数文字)が12pxのPotta Oneでは詰まるため本文書体の極太に */
  font-weight: 900;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.zd-jpmap-tile .n{ font-size: 10px; font-weight: 400; color: var(--ink-2); }
.zd-jpmap-tile:hover{ transform: translate(-1px,-1px); box-shadow: var(--sh-1); }
.zd-jpmap-tile.has{ background: var(--kinako); }
.zd-jpmap-tile.on{ background: var(--atari); color: var(--white); }
.zd-jpmap-tile.on .n{ color: var(--white); }
@media (max-width: 639px){
  .zd-jpmap{ display: none; }
}
@media (min-width: 900px){
  .zd-jpmap-tile{ font-size: 13px; }
}

/* 地図ライブラリ(Leaflet)の描画枠。ピンはcircleMarkerで画像は使わない（ページ固有JS側） */
.zd-map-canvas{
  height: clamp(320px, 55vh, 560px);
  border-radius: var(--r-lg);
  border: 2px solid var(--ink);
  box-shadow: var(--sh-kraft);
  overflow: hidden;
  background: var(--soda);
}
/* Leafletのポップアップの見た目をDSに寄せる（.leaflet-container前提。.zd-map-canvas配下限定にしない） */
.leaflet-container .leaflet-popup-content-wrapper{
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  box-shadow: var(--sh-1);
  font-family: var(--ff-body);
}

/* ピンの凡例 */
.zd-legend{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.zd-legend-item{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  color: var(--ink);
}
.zd-legend-item .dot{ width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.zd-legend-item .dot.open{ background: var(--atari); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink); }
.zd-legend-item .dot.closed{ background: var(--ink-2); border: 2px dashed var(--white); box-shadow: 0 0 0 1px var(--ink); }
.zd-legend-item .dot.card{ background: var(--atari); border: 3px solid var(--kinako); }

/* ---- 10. フォーム ----------------------------------------------------------- */
.zd-form{ display: flex; flex-direction: column; gap: var(--sp-5); }
.zd-field{ display: flex; flex-direction: column; gap: var(--sp-2); }
.zd-field > label{ display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }

.zd-req{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--atari);
  color: var(--white);
}

.zd-input, .zd-select, .zd-textarea{
  width: 100%;
  font-size: 17px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-md);
  color: var(--ink);
}
.zd-textarea{ min-height: 140px; resize: vertical; font-family: inherit; }
.zd-input[aria-invalid="true"], .zd-select[aria-invalid="true"], .zd-textarea[aria-invalid="true"]{
  border-color: var(--atari);
}
.zd-help{ font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.zd-error{ display: none; font-size: var(--fs-small); font-weight: 700; color: var(--atari-2); margin: 0; }
.zd-input[aria-invalid="true"] ~ .zd-error,
.zd-select[aria-invalid="true"] ~ .zd-error,
.zd-textarea[aria-invalid="true"] ~ .zd-error{ display: block; }

/* 自作チェックボックス・ラジオ: 箱/丸にink枠、checkedで朱面＋白いcheck */
.zd-check, .zd-radio{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  cursor: pointer;
}
.zd-check input, .zd-radio input{
  appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  background: var(--paper-2);
  border: var(--bw-card) solid var(--ink);
}
.zd-check input{ border-radius: var(--r-sm); }
.zd-radio input{ border-radius: 50%; }
.zd-check input:checked, .zd-radio input:checked{ background: var(--atari); border-color: var(--atari); }
.zd-check input:checked::after{
  content: "";
  position: absolute;
  inset: 3px;
  background-color: var(--white);
  -webkit-mask-image: var(--zd-svg-check); mask-image: var(--zd-svg-check);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.zd-radio input:checked::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--white);
}

.zd-fieldset{
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.zd-fieldset legend{
  font-family: var(--ff-hand);
  font-size: var(--fs-hand);
  color: var(--ink);
  padding: 0 var(--sp-2);
}
/* ---- 11. ページの骨格 ------------------------------------------------------- */

/* ヘッダー: 固定(sticky)。上辺に .zd-awning.thin、下辺3px ink。
   中は .zd-container を横並びの行として流用（新規クラスを増やさない） --------- */
.zd-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
}
.zd-header > .zd-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  /* sp-2にすることで 帯(12px)+行(44px)+下枠(3px)+上下padding を80px以内に収める */
  padding-block: var(--sp-2);
}
.zd-header-actions{ display: flex; align-items: center; gap: var(--sp-2); }
.zd-logo-text{ white-space: nowrap; }

/* 団体名はどの幅でも表示する（消さない）。640px未満だけ少し小さくして幅を詰める */
.zd-header .zd-logo-text{ font-size: 15px; }

.zd-nav{ display: flex; flex-direction: column; gap: var(--sp-4); }
.zd-nav a{ color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; }
.zd-nav a:hover{ color: var(--atari-2); }

/* デスクトップ用インラインnav（.zd-headerの行の直接の子）は900px未満で隠す */
.zd-header > .zd-container > .zd-nav{ display: none; }

/* SNS4個並びとInstagram単体ボタンは900px未満のヘッダー本体には出さない。
   4個並びはハンバーガーのパネル内（フッタにも別途あり）、単体は900px以上のみ表示 */
.zd-header-actions > .zd-iconbtn{ display: none; }
.zd-header > .zd-container .zd-sns{ display: none; }
.zd-menu[open] > .zd-stack .zd-sns{ display: flex; }

/* 640px未満は団体名を残す代わりにヘッダー本体のLINEボタンを隠す（1行を確保）。
   LINEへの導線はヒーロー・フッタ・ハンバーガーのパネル内に残す。
   ヘッダー内のLINEボタンは常に少し詰めて置く（900px到達直後の詰まりを避けるため） */
.zd-header-actions > .zd-btn.line{ display: none; padding: 8px 12px; font-size: 14px; }
@media (min-width: 640px){
  .zd-header .zd-logo-text{ font-size: 18px; }
  .zd-header-actions > .zd-btn.line{ display: inline-flex; }
}

/* パネル内に置くLINEボタン（.block）は縦積みパネルの幅いっぱいに収める */
.zd-menu .zd-btn.line{ align-self: stretch; }

/* md未満のナビ切替。summaryがハンバーガー、開くと全幅パネルに.zd-nav（縦）→.zd-sns */
.zd-menu summary{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  list-style: none;
  border-radius: 50%;
  border: var(--bw-card) solid var(--ink);
  background: var(--paper-2);
  cursor: pointer;
}
.zd-menu summary::-webkit-details-marker{ display: none; }
.zd-menu[open] > .zd-stack{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--paper);
  border-top: var(--bw-card) solid var(--ink);
  border-bottom: var(--bw-card) solid var(--ink);
  padding: var(--sp-5) var(--gutter);
}
.zd-menu[open] > .zd-stack .zd-nav a{ font-size: 18px; padding-block: var(--sp-2); }

@media (min-width: 900px){
  /* 900px到達直後は詰まりやすいため、ナビは横並びに切り替えた時点でやや小さめ・やや詰めて置く */
  .zd-header > .zd-container > .zd-nav{ display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); font-size: 15px; }
  .zd-header-actions > .zd-iconbtn{ display: inline-flex; }
  .zd-menu{ display: none; }
}

/* ヒーロー: 左に文章(.zd-stackを流用)、右に .zd-hero-art -------------------------
   v3: 背景は --pat-dots をやめ、paper.jpg（薄い紙の質感・opacity .35）→ --pat-shippou
   （さらに薄い七宝柄・opacity .5）の2枚を ::before/::after で重ねる。どちらも z-index:0の
   下敷きにし、実コンテンツ側(.zd-awning/.zd-bunting/.zd-container)をz-index:1で上に出す */
.zd-hero{
  position: relative;
  padding-block: var(--sec-y);
  background: var(--paper);
  overflow: hidden; /* v3: 浮遊する小物・柄の流れのはみ出し防止 */
}
.zd-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/brand/paper.jpg");
  background-size: cover;
  background-position: center;
  opacity: .35;
}
.zd-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--pat-shippou);
  opacity: .5;
}
.zd-hero > .zd-awning,
.zd-hero > .zd-bunting,
.zd-hero > .zd-container{ position: relative; z-index: 1; }
.zd-hero .zd-container{ display: grid; gap: var(--sp-7); align-items: center; }
.zd-hero .zd-container > .zd-stack{ align-items: flex-start; }
.zd-hero-art{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  min-height: 200px;
}
@media (min-width: 900px){
  .zd-hero .zd-container{ grid-template-columns: 1.1fr 1fr; }
  /* v3.1: hero-art内の「キャラ｜紋章(またはフェスロゴ)｜キャラ」を1段に収める。
     折り返すと2段目に落ちたキャラが紋章/朱印と重なる不具合があったため、900px以上では
     折り返しをやめて3点それぞれを縮める（900px未満は現状どおり折り返して縦積みでよい） */
  .zd-hero-art{ flex-wrap: nowrap; }
  .zd-hero-art .zd-emblem.lg{ width: 200px; height: 200px; }
  .zd-hero-art .zd-fes-logo{ width: 240px; }
  .zd-hero-art .zd-chara.cheer{ height: 150px; }
}
@media (min-width: 1100px){
  .zd-hero-art .zd-chara.cheer{ height: 180px; }
}

/* フェスLP用ヒーロー: 上辺に .zd-awning → .zd-bunting を積む */
.zd-hero.fes{ padding-top: 0; }
.zd-hero.fes .zd-container{ padding-top: var(--sec-y); }
/* v3: フェスLPヒーローの.zd-fes-logo両脇に置く.zd-charaは640px未満では非表示にする
   （画面が狭いと.zd-fes-logo自体が主役になりきれないため） */
@media (max-width: 639px){
  .zd-hero.fes .zd-hero-art > .zd-chara{ display: none; }
}
.zd-hero-date{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: var(--white);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-kraft);
  padding: var(--sp-4) var(--sp-6);
  transform: rotate(-2deg);
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.6vw, 30px); /* v3.1: --fs-h1は大きすぎ、<br>区切りの行がさらに折り返され3行になっていたため縮小 */
  white-space: nowrap; /* v3.1: 「2027年2月27日（土）」「28日（日）」の各行を折り返させない */
  color: var(--ink);
  text-align: center;
}
/* CTA帯: 全幅の朱面に白10%の水玉。白のdisplay見出し＋ボタン --------------------- */
.zd-cta-band{
  background-color: var(--atari);
  background-image: radial-gradient(color-mix(in srgb, var(--white) 14%, transparent) 3px, transparent 3.5px); /* v4: ハーフトーンを少し強く */
  background-size: 22px 22px;
  color: var(--white);
  padding-block: var(--sec-y);
  text-align: center;
  overflow: hidden; /* v3: はみ出し防止（規律。本帯自体には現状はみ出す動きはない） */
}
.zd-cta-band .zd-display,
.zd-cta-band .zd-h1,
.zd-cta-band .zd-h2{ color: var(--white); margin-bottom: var(--sp-5); }
/* CTA帯の見出しだけ --fs-display より小さく速く縮む専用サイズにする（トークンは増やさない）。
   390pxで「なかまになりませんか」(10字)が1行に収まることを優先 */
.zd-cta-band .zd-display{ font-size: clamp(30px, 6.5vw, 64px); }
.zd-cta-band .zd-lead{ color: var(--white); }
/* v3: CTA帯の両脇に添える.zd-chara.bow.smは640px未満で隠す（帯の文字を優先） */
@media (max-width: 639px){
  .zd-cta-band .zd-chara{ display: none; }
}

/* フッタ: kraft面・上辺.zd-awning.thin。既存クラス(.zd-container/.zd-stack/.zd-row/.zd-nav)
   の組み合わせだけで組み、新しいクラスは .zd-footer-mark（仕様書に明記済み）のみ ------- */
.zd-footer{ position: relative; background: var(--kraft); overflow: hidden; }
.zd-footer > .zd-container{
  position: relative;
  z-index: 1;
  padding-block: var(--sec-y);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.zd-footer-mark{
  position: absolute;
  right: -.1em;
  bottom: -.25em;
  z-index: 0;
  font-family: var(--ff-hand);
  font-size: clamp(120px, 22vw, 280px);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  white-space: nowrap;
  pointer-events: none;
}
.zd-footer .zd-row{ justify-content: space-between; align-items: flex-start; }
.zd-footer .zd-nav{ flex-direction: row; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.zd-footer small{ color: var(--ink-2); font-size: var(--fs-small); }
/* ---- 12. 動き・アクセシビリティ -----------------------------------------------
   v4:「にぎやかに」の要望でさらに動きを足した。方針変更: OSのprefers-reduced-motionでは
   自動停止しない（動きはサイト側の既定として常時有効）。止めたい訪問者は末尾の
   html.zd-still 切替（zendakai-fx.js・フッタ等の.zd-motion-toggleボタン）を使う。
   可: 浮遊（ふわふわ）・ゆれ・ゆらぎ（回転を伴う浮遊）・スクロールで現れる・ホバーで弾む・
   背景の柄や下線がゆっくり流れる・脈動。不可のまま: 点滅・マーキー・自動スライドショー・
   視線を奪う強い動き。1画面で同時に動く種類は3つまでを目安にする。
   すべて transform ではなく translate/rotate/scale/opacity の独立プロパティで動かす
   （要素個別の静的な傾きと衝突させないため）。will-changeは使わない。.zd-hero/.zd-cta-band/
   .zd-footerはoverflow:hiddenではみ出しを防ぐ。
   フォーカスリング・44pxタップ目標・14px未満禁止は各部品側（2ベース・7アクション等）
   で個別に満たしているため、ここでは動き本体と「動きを止める」全体スイッチだけを持つ。
   -------------------------------------------------------------------------- */
  /* 読み込み時の一発: ヒーロー見出しと小物がページを開いた瞬間に一度だけポップインする */
  @keyframes zd-pop{
    from{ opacity: 0; scale: .96; }
    to{ opacity: 1; scale: 1; }
  }
  .zd-hero .zd-display{ animation: zd-pop .5s ease-out both; }

  /* 浮遊: ヒーローの小物（シール・値札・朱印）がゆっくり上下する。紋章は上下せず呼吸、
     「当たり」判は次の「ゆれ」に専念させるためここでは対象外にする */
  @keyframes zd-float{
    0%, 100%{ translate: 0 0; }
    50%{ translate: 0 -6px; }
  }
  @keyframes zd-breathe{
    0%, 100%{ scale: 1; }
    50%{ scale: 1.02; }
  }
  .zd-hero-art > *:not(.zd-emblem):not(.zd-stamp):not(.zd-sticker):not(.zd-chara){
    animation: zd-pop .5s ease-out both, zd-float 5s ease-in-out infinite;
  }
  .zd-hero-art > *:nth-child(1):not(.zd-emblem):not(.zd-stamp):not(.zd-sticker):not(.zd-chara){ animation: zd-pop .5s ease-out both, zd-float 4s ease-in-out infinite; }
  .zd-hero-art > *:nth-child(2):not(.zd-emblem):not(.zd-stamp):not(.zd-sticker):not(.zd-chara){ animation: zd-pop .5s ease-out .1s both, zd-float 5s ease-in-out .7s infinite; }
  .zd-hero-art > *:nth-child(3):not(.zd-emblem):not(.zd-stamp):not(.zd-sticker):not(.zd-chara){ animation: zd-pop .5s ease-out .2s both, zd-float 6s ease-in-out 1.4s infinite; }
  .zd-hero-art > *:nth-child(4):not(.zd-emblem):not(.zd-stamp):not(.zd-sticker):not(.zd-chara){ animation: zd-pop .5s ease-out .3s both, zd-float 4s ease-in-out 2.1s infinite; }
  /* v3.1: 紋章とキャラはpop-in(opacity 0→1)を付けない。初回表示のタイミングによって
     半透明のまま止まって見えることがあったため、浮遊(・呼吸)だけにする */
  .zd-hero-art > .zd-emblem{ animation: zd-breathe 5s ease-in-out .5s infinite; }

  /* v3: キャラクター（.zd-chara）も既存のzd-floatを流用してゆっくり浮遊させる。
     .cheer（両手）は周期を短くして「少し上下に弾む」印象にする（新規keyframeは増やさない）。
     hero-art内も上のnot(.zd-chara)除外によりpop-inを付けずこの浮遊だけになる */
  .zd-chara{ animation: zd-float 5s ease-in-out infinite; }
  .zd-chara.cheer{ animation: zd-float 3s ease-in-out infinite; }

  /* v4: シールは浮遊にゆらぎ(rotate ±4deg)を重ねる。hero-art外の単独使用（8 ラベル等）でも
     常に浮遊+ゆらぎにする（後段の.zd-stickerが基底、hero-art内はポップイン付きで上書き） */
  @keyframes zd-float-rock{
    0%, 100%{ translate: 0 0; rotate: -4deg; }
    50%{ translate: 0 -6px; rotate: 4deg; }
  }
  .zd-sticker{ animation: zd-float-rock 5s ease-in-out infinite; }
  .zd-hero-art > .zd-sticker{ animation: zd-pop .5s ease-out both, zd-float-rock 5s ease-in-out infinite; }

  /* ゆれ: .zd-bunting（既存・下の通常ブロックで定義）に加え、キッカーのアイコンが
     小さくひねり、「当たり」判はゆっくり左右に揺れる */
  @keyframes zd-wiggle{
    0%, 100%{ rotate: -8deg; }
    50%{ rotate: 8deg; }
  }
  @keyframes zd-stamp-sway{
    0%, 100%{ rotate: -15deg; }
    50%{ rotate: -9deg; }
  }
  .zd-kicker::before{ animation: zd-wiggle 2.4s ease-in-out infinite; }
  .zd-stamp{ animation: zd-stamp-sway 6s ease-in-out infinite; }
  .zd-hero-art > .zd-stamp{ animation: zd-pop .5s ease-out .2s both, zd-stamp-sway 6s ease-in-out .5s infinite; }

  /* v3: .zd-kids-row（手をつないだ子どもの列）はゆれ系の仲間として左右にゆっくり平行移動する
     （回転ではなく振幅6pxの水平ゆれ。既存zd-swayファミリーの命名にならった新規keyframe） */
  @keyframes zd-sway-x{
    0%, 100%{ translate: -6px 0; }
    50%{ translate: 6px 0; }
  }
  .zd-kids-row img{ animation: zd-sway-x 10s ease-in-out infinite; }

  /* v4: 脈動（絞り込みチップの選択中） */
  @keyframes zd-pulse{
    0%, 100%{ scale: 1; }
    50%{ scale: 1.04; }
  }

  /* 柄の流れ: 縞をbackground-positionでゆっくり流す（タイル寸法の倍数にして継ぎ目を消す）。
     v3: ヒーローの水玉(zd-drift-diag)は--pat-dots廃止にともない削除（紙の質感+七宝柄は
     静止のまま。ヒーローの動きはキャラ浮遊+kids-rowのゆれ+スクロール出現の3種に絞る） */
  @keyframes zd-drift-x{
    from{ background-position-x: 0; }
    to{ background-position-x: 48px; }
  }
  @keyframes zd-wavy-drift{
    from{ background-position-x: 0; }
    to{ background-position-x: 40px; } /* v4: 波線1タイル分(40px) */
  }
  .zd-awning{ animation: zd-drift-x 20s linear infinite; } /* v4: 30s→20s。.zd-header内の.thinも同じクラスなので含む */
  .zd-h2.wavy{ animation: zd-wavy-drift 12s linear infinite; } /* v4: 見出し下の波線が横に流れる */

  /* ホバーで弾む: 押す前に軽く反応する（いずれも1回だけ） */
  @keyframes zd-btn-wiggle{
    0%, 100%{ rotate: 0deg; }
    25%{ rotate: -1deg; }
    75%{ rotate: 1deg; }
  }
  @keyframes zd-hop{
    0%, 100%{ translate: 0 0; }
    40%{ translate: 0 -2px; }
  }
  .zd-btn:hover{ animation: zd-btn-wiggle .4s ease-in-out 1; }
  .zd-card.hover:hover .zd-card-media img{ scale: 1.03; transition: scale 200ms ease; }
  .zd-chip:hover, .zd-iconbtn:hover{ animation: zd-hop .3s ease-out 1; }
  .zd-fes-logo:hover{ animation: zd-btn-wiggle .4s ease-in-out 1, zd-hop .3s ease-out 1; } /* v3: 傾いて弾む＝既存2つの流用 */

  /* スクロールで現れる: 対応ブラウザだけ。非対応環境は@supportsの外に何も書かないため
     最初から普通に表示される（消えたまま、が絶対に起きない設計） */
  @supports (animation-timeline: view()){
    @keyframes zd-rise{
      from{ opacity: 0; translate: 0 24px; }
      to{ opacity: 1; translate: 0 0; }
    }
    @keyframes zd-bounce-in{
      0%{ scale: .6; }
      60%{ scale: 1.08; }
      100%{ scale: 1; }
    }
    .zd-card, .zd-title, .zd-stat, .zd-steps > li, .zd-bubble, .zd-tcard, .zd-figure{
      animation: zd-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    /* v4: 大きな数字はスクロール出現時にバウンドしながら出る */
    .zd-stat .n{
      display: inline-block;
      animation: zd-bounce-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    .zd-grid > .zd-card:nth-child(2), .zd-grid > .zd-tcard:nth-child(2),
    .zd-stats > .zd-stat:nth-child(2), .zd-steps > li:nth-child(2),
    .zd-gallery > .zd-figure:nth-child(2){ animation-range: entry 5% entry 40%; }
    .zd-grid > .zd-card:nth-child(3), .zd-grid > .zd-tcard:nth-child(3),
    .zd-stats > .zd-stat:nth-child(3), .zd-steps > li:nth-child(3),
    .zd-gallery > .zd-figure:nth-child(3){ animation-range: entry 10% entry 45%; }
    .zd-grid > .zd-card:nth-child(4), .zd-grid > .zd-tcard:nth-child(4),
    .zd-stats > .zd-stat:nth-child(4),
    .zd-gallery > .zd-figure:nth-child(4){ animation-range: entry 15% entry 50%; }
  }

/* v4: 動きを止める全体スイッチ。OSのprefers-reduced-motionではなく、この html.zd-still
   （zendakai-fx.js が .zd-motion-toggle クリックで付け外しし、localStorageに保存する）だけで
   止める。旧・@media(prefers-reduced-motion:reduce)の全停止ブロックは廃止した */
html.zd-still *, html.zd-still *::before, html.zd-still *::after{
  animation: none !important;
  transition: none !important;
}

/* ---- 12a. カーソル演出（zendakai-fx.js が (pointer: fine) 端末だけ html に zd-fx を付ける）
   SVGは埋め込み画像のため直値（きなこ=--kinako(#F0C24A)・藍墨=--ink(#14262E)・朱=--atari(#E2452D)）。
   zd-stillの間はJS側で軌跡・紙吹雪を生成しない（カーソル形自体は演出ではないので継続表示） ---- */
html.zd-fx body{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23F0C24A' stroke='%2314262E' stroke-width='3'/%3E%3C/svg%3E") 16 16, auto;
}
html.zd-fx a,
html.zd-fx button,
html.zd-fx .zd-btn,
html.zd-fx .zd-iconbtn,
html.zd-fx .zd-chip,
html.zd-fx summary,
html.zd-fx [role="button"]{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' rx='9' ry='7' fill='%23E2452D' stroke='%2314262E' stroke-width='2'/%3E%3Cpath d='M7 16 L2 11 L2 21 Z' fill='%23E2452D' stroke='%2314262E' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M25 16 L30 11 L30 21 Z' fill='%23E2452D' stroke='%2314262E' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer;
}
/* ---- 13. 印刷（最低限: 影・柄を外し、ナビを非表示にする） ---------------------- */
@media print{
  *, *::before, *::after{
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  body{ background: var(--white); }
  .zd-header, .zd-menu, .zd-awning, .zd-bunting{ display: none !important; }
  .zd-hero, .zd-section.gingham{ background-image: none !important; }
  .zd-cta-band{
    background-color: var(--white) !important;
    background-image: none !important;
    color: var(--ink) !important;
  }
}

/* ---- 14. 全国駄菓子屋マップ v6 の部品（samples/map.html。正本: docs/design-spec.md §3.9・§7） ----
   カード画像の比率・2 行省略・拡大ダイアログ。2026-09-19 に ds/zendakai-map.css から統合。 */
/* ---- 公式駄菓子屋さんカードの実寸比率（1086:782） --------------------------
   一覧のサムネ枠（.zd-card-media と併用）・拡大ダイアログの画像に使う。
   既定の4:3を上書きし、カード端の文字が欠けないようにする。 ------------------ */
.zd-cardimg{
  aspect-ratio: 1086 / 782;
}
/* カード画像がまだ無い店（お引越し中など）のプレースホルダ。.zd-card-mediaの
   kraft地はそのまま、店名だけ中央に置く */
.zd-cardimg.placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  font-family: var(--ff-display);
  font-size: 15px;
  color: var(--ink-2);
}

/* ---- ひみつの情報の一覧内プレビュー（2行で省略。全文は拡大ダイアログへ） ------ */
.zd-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- カード拡大・写真拡大の共通ダイアログ ---------------------------------
   DSのカード面（白・藍墨2px枠・角丸r-lg・sh-2影）を踏襲する。開いた瞬間の
   ポップインは ds/zendakai.css 12節の zd-pop を再利用し新規keyframeは増やさ
   ない。html.zd-still 中に止まるのも既存の全停止ルールに乗る（1画面で同時に
   動くのはこのポップイン1種のみ）。 ------------------------------------------ */
.zd-lightbox{
  position: fixed;
  inset: var(--sp-5);
  margin: auto;
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--paper-2);
  color: var(--ink);
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-6);
}
.zd-lightbox[open]{ animation: zd-pop .25s ease-out both; }
.zd-lightbox::backdrop{ background: color-mix(in srgb, var(--ink) 55%, transparent); }

.zd-lightbox-close{ position: absolute; top: var(--sp-4); right: var(--sp-4); }

.zd-lightbox-head{ padding-right: var(--sp-8); margin-bottom: var(--sp-4); }
.zd-lightbox-head h3{ margin: 0 0 4px; }

/* お店の表面・裏面カードを並べる */
.zd-lightbox-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.zd-lightbox-media .zd-cardimg{ object-fit: contain; background: var(--kraft); }
@media (max-width: 639px){
  .zd-lightbox-media{ grid-template-columns: 1fr; }
}

/* 思い出写真・全体まっぷなど、1枚だけを大きく見せる用 */
.zd-lightbox-photo{ text-align: center; margin-bottom: var(--sp-5); }
.zd-lightbox-photo img{
  max-width: 100%;
  max-height: 70vh;
  margin-inline: auto;
  border: var(--bw-card) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-kraft);
}

/* 定義リスト（お店の全項目） */
.zd-lightbox-dl{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.zd-lightbox-dl dt{ font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.zd-lightbox-dl dd{ margin: 0; line-height: 1.8; }
@media (max-width: 639px){
  .zd-lightbox-dl{ grid-template-columns: 1fr; }
  .zd-lightbox-dl dt{ margin-top: var(--sp-3); }
}

/* マイマップの埋め込み枠は縦に広く（16:9 だと日本が小さく横長に見える）。高さは画面の 7 割前後 */
#mymap-embed .zd-map-canvas{ aspect-ratio: auto; height: clamp(480px, 72vh, 780px); }
@media (max-width: 639px){ #mymap-embed .zd-map-canvas{ height: clamp(420px, 70vh, 640px); } }

/* 数字のカウントアップ中に幅が揺れないよう等幅数字にする（zendakai-fx.js 1b） */
.zd-stat .n{ font-variant-numeric: tabular-nums; }

/* ---- 14b. 掲載店カードのスマホ表示（<640px）: 1 列・横並び（カード画像左・要点右）。詳細（.zd-card-more）は隠し、
   拡大表示（.zd-lightbox）で見せる。2 列×全項目だと 1 枚が画面 2 つ分の縦長になるため（2026-09-19） ---- */
@media (max-width: 639px){
  #list{ grid-template-columns: 1fr; gap: var(--sp-3); }
  #list .zd-card.shop{ display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: start; column-gap: var(--sp-3); }
  #list .zd-card.shop .zd-card-media{ aspect-ratio: 1086 / 782; height: auto; border-radius: var(--r-md) 0 0 var(--r-md); }
  #list .zd-card.shop .zd-cardimg{ object-fit: contain; }
  #list .zd-card.shop .zd-card-body{ padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; gap: 4px; min-width: 0; }
  #list .zd-card.shop .zd-card-title{ font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
  #list .zd-card.shop .zd-badge{ font-size: 11px; padding: 2px 8px; }
  #list .zd-card.shop .zd-card-more{ display: none; }
}