/* =========================================================
   marche.css — 川崎ナチュラル＆アースフェス 出店者まわり共通スタイル
   トーンの基準は marche/index.html（地球キービジュアル）。
   配色：ベージュ #f4f2ea / 深緑 #123626 / 水色 #157089 / 緑 #2f7a4e
   フォント：全体を Noto Sans JP に統一。メインタイトル(.title / .page-hero h1)のみ Shippori Mincho。
   ========================================================= */
:root{
  --bg:#f4f2ea; --ink:#1f4a39; --ink-soft:#46544d; --head:#123626;
  --water:#157089; --water-deep:#0d5168; --leaf:#2f7a4e; --leaf-deep:#235e3b;
  --earth:#c47f3a; --plum:#7a5ca0; --panel:#eef3ec; --mint:#aae0d6;
  --line:rgba(47,122,78,.16); --card:#fff;
  --font-jp:"Noto Sans JP",sans-serif;
  --font-mincho:"Noto Sans JP",sans-serif;   /* 統一：旧 Shippori Mincho（見出し）→ Noto Sans JP */
  --font-en:"Noto Sans JP",sans-serif;        /* 統一：旧 Cormorant Garamond（英）→ Noto Sans JP */
  --font-title:"Shippori Mincho",serif;       /* メインタイトル専用（ここだけ明朝を残す） */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-jp);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- Header ---- */
.m-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(16px,4vw,40px);background:rgba(244,242,234,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.m-logo{font-family:var(--font-en);font-weight:600;font-size:clamp(16px,2vw,20px);color:var(--water);letter-spacing:.04em;line-height:1.2}
.m-logo small{display:block;font-family:var(--font-jp);font-weight:400;font-size:11px;color:var(--ink-soft);letter-spacing:.08em}
.m-back{font-size:13px;color:var(--water);font-weight:500;border:1.5px solid var(--water);border-radius:24px;padding:8px 18px;transition:.25s;white-space:nowrap}
.m-back:hover{background:var(--water);color:#fff}

/* ---- Page Hero ---- */
.page-hero{position:relative;text-align:center;padding:clamp(56px,9vw,104px) 20px clamp(48px,7vw,84px);background:linear-gradient(150deg,#0f3324 0%,#16513c 45%,#1f7a6e 100%);color:#fff;overflow:hidden}
.page-hero::after{content:"";position:absolute;top:-25%;right:-8%;width:480px;height:480px;background:radial-gradient(circle,rgba(170,224,214,.18) 0%,transparent 70%);border-radius:50%}
.page-hero-inner{position:relative;z-index:1;max-width:860px;margin:0 auto}
.ph-eyebrow{font-family:var(--font-en);font-weight:600;letter-spacing:.4em;font-size:13px;text-transform:uppercase;color:var(--mint)}
.page-hero h1{font-family:var(--font-title);font-weight:700;font-size:clamp(28px,5vw,52px);letter-spacing:.06em;line-height:1.3;margin:14px 0}
.page-hero h1 .accent{color:var(--mint)}
.ph-sub{font-size:clamp(14px,1.8vw,17px);color:rgba(255,255,255,.85);line-height:1.9}
.ph-badge{display:inline-block;margin-top:22px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:30px;padding:10px 22px;font-size:14px;letter-spacing:.04em}

/* ---- Section ---- */
.sec{padding:clamp(48px,7vw,92px) clamp(16px,4vw,24px)}
.wrap{max-width:1020px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}
.center{text-align:center}
.eyebrow{font-family:var(--font-en);font-weight:600;letter-spacing:.4em;font-size:14px;color:var(--water);text-transform:uppercase}
.h2{font-family:var(--font-mincho);font-weight:600;font-size:clamp(26px,3.8vw,38px);color:var(--head);margin-top:12px;letter-spacing:.04em;line-height:1.4}
.h3{font-family:var(--font-mincho);font-weight:600;font-size:clamp(19px,2.4vw,24px);color:var(--head);letter-spacing:.03em;margin-bottom:14px}
.lead{font-family:var(--font-mincho);font-weight:500;color:#1f5a40;font-size:clamp(16px,2vw,19px);line-height:2;margin-top:22px}
.section-sub{color:var(--ink-soft);font-size:15px;line-height:2;margin-top:14px}
.panel{background:var(--panel)}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--font-jp);font-weight:500;font-size:clamp(13px,1.3vw,15px);letter-spacing:.06em;padding:clamp(12px,1.3vw,16px) clamp(24px,2.8vw,40px);border:none;border-radius:4px;cursor:pointer;box-shadow:0 6px 18px rgba(20,60,46,.2);transition:.2s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-water{background:var(--water);color:#fff}.btn-water:hover{background:var(--water-deep)}
.btn-leaf{background:var(--leaf);color:#fff}.btn-leaf:hover{background:var(--leaf-deep)}
.btn-outline{background:#fff;color:var(--water);box-shadow:0 4px 14px rgba(20,60,46,.12);border:1.5px solid var(--water)}.btn-outline:hover{background:var(--water);color:#fff}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ---- Generic cards ---- */
/* auto-fill: 出展者が1〜2件でもカードは通常サイズのまま左から並ぶ（横いっぱいに伸びない） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin-top:40px;justify-content:start}
.card{background:var(--card);border-radius:12px;padding:28px 26px;border:1px solid var(--line);border-top:3px solid var(--water);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,90,64,.12)}
.card .tag{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--water);background:#dff0f4;padding:3px 12px;border-radius:20px;font-weight:500}
.card .name{font-family:var(--font-mincho);font-weight:700;font-size:19px;color:var(--head);margin:14px 0 6px;letter-spacing:.03em}
.card .desc{font-size:13.5px;color:#586560;line-height:1.9}
.card.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#9aa89f;border-top-color:#cfd8d0;background:#fafaf7;min-height:160px}
.card.soon .cs{font-family:var(--font-en);font-size:20px;letter-spacing:.12em}

/* ---- Spec / price table ---- */
.spec{max-width:720px;margin:32px auto 0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 14px 36px rgba(20,60,46,.08);border:1px solid var(--line)}
.spec .row{display:flex;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:none}
.spec .k{width:150px;flex:none;padding:16px 20px;font-size:14px;font-weight:700;background:var(--panel);color:var(--head);display:flex;align-items:center}
.spec .v{padding:16px 20px;font-size:15px;line-height:1.8;color:var(--ink)}
.spec .v b{font-weight:700;color:var(--head)}
.price{color:var(--earth);font-weight:700}

/* ---- Plan cards ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:36px}
.plan{background:#fff;border-radius:14px;padding:30px 26px;text-align:center;border:1px solid var(--line);border-top:4px solid var(--water)}
.plan:nth-child(2){border-top-color:var(--earth)}
.plan:nth-child(3){border-top-color:var(--leaf)}
.plan .pname{font-family:var(--font-mincho);font-weight:700;font-size:20px;color:var(--head)}
.plan .pprice{font-family:var(--font-mincho);font-size:30px;color:var(--water-deep);font-weight:700;margin:10px 0}
.plan .pprice small{font-size:14px;color:var(--ink-soft);font-weight:400}
.plan .pdesc{font-size:13px;color:var(--ink-soft);line-height:1.9;margin-top:8px}

/* ---- Merit list ---- */
.merits{max-width:760px;margin:32px auto 0;display:grid;gap:14px}
.merit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;display:flex;gap:14px;align-items:flex-start}
.merit .ic{flex:none;width:30px;height:30px;border-radius:50%;background:#dff0f4;color:var(--water);display:flex;align-items:center;justify-content:center;font-weight:700}
.merit b{color:var(--head)}
.merit p{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-top:3px}

/* ---- Steps ---- */
.steps{counter-reset:step;max-width:760px;margin:36px auto 0;display:grid;gap:16px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px 20px 66px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--water);color:#fff;font-family:var(--font-en);font-weight:600;display:flex;align-items:center;justify-content:center}
.step b{color:var(--head)}
.step p{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-top:4px}

/* ---- Download buttons ---- */
.dl-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn-dl{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--water);color:var(--water);font-weight:500;font-size:14px;padding:13px 24px;border-radius:6px;transition:.2s;box-shadow:0 4px 14px rgba(20,60,46,.1)}
.btn-dl:hover{background:var(--water);color:#fff;transform:translateY(-2px)}
.btn-dl .ext{font-family:var(--font-en);font-size:12px;font-weight:600;opacity:.7}

/* ---- Notice / callout ---- */
.notice{background:var(--panel);border-left:4px solid var(--leaf);border-radius:0 10px 10px 0;padding:16px 20px;font-size:14px;line-height:1.9;color:var(--ink)}
.callout{background:#dff0f4;border-radius:12px;padding:20px 24px;font-size:14px;line-height:1.9;color:var(--water-deep)}

/* ---- Form ---- */
.form-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,44px);box-shadow:0 14px 36px rgba(20,60,46,.06);max-width:680px;margin:32px auto 0}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:500;color:var(--head);margin-bottom:6px}
.req{color:#c0392b;font-size:12px;margin-left:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid #cdd6cf;border-radius:8px;font-family:inherit;font-size:15px;background:#fafdfb;color:var(--ink)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--water);background:#fff;box-shadow:0 0 0 3px rgba(21,112,137,.12)}
.form-note{font-size:13px;color:var(--ink-soft);line-height:1.8;text-align:center;margin-bottom:22px}
.submit-btn{display:block;width:100%;max-width:320px;margin:26px auto 0;background:var(--water);color:#fff;border:none;border-radius:30px;padding:15px;font-size:16px;font-weight:500;font-family:inherit;cursor:pointer;transition:.25s;box-shadow:0 8px 22px rgba(21,112,137,.25)}
.submit-btn:hover{background:var(--water-deep);transform:translateY(-2px)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.form-msg{margin-top:18px;text-align:center;font-size:14px;line-height:1.8;display:none}
.form-msg.show{display:block}
.form-msg.ok{color:var(--leaf-deep)}
.form-msg.err{color:#c0392b}

/* ---- Terms body ---- */
.terms-body{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(24px,4vw,52px);box-shadow:0 14px 36px rgba(20,60,46,.05)}
.terms-body .intro{font-size:14.5px;color:var(--ink-soft);line-height:2;margin-bottom:8px}
.terms-body h2{font-family:var(--font-mincho);font-weight:700;font-size:clamp(17px,2.2vw,21px);color:var(--head);margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--panel)}
.terms-body h3{font-family:var(--font-mincho);font-weight:700;font-size:16px;color:var(--head);margin:24px 0 10px}
.terms-body p{font-size:14.5px;line-height:2;color:var(--ink);margin:10px 0}
.terms-body ol,.terms-body ul{margin:10px 0 10px 1.5em}
.terms-body li{font-size:14.5px;line-height:2;color:var(--ink);margin:6px 0}
.terms-body ol ol{margin-top:6px;list-style:lower-roman}
.terms-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.terms-body th,.terms-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;line-height:1.7;vertical-align:top}
.terms-body th{background:var(--panel);color:var(--head);font-weight:700}
.terms-divider{border:none;border-top:1px solid var(--line);margin:34px 0}
.terms-meta{text-align:center;font-size:13.5px;color:var(--ink-soft);line-height:2;margin-top:8px}

/* ---- Application form sheet (terms page) ---- */
.appform{max-width:820px;margin:30px auto 0;background:#fff;border:1px dashed var(--water);border-radius:14px;padding:clamp(24px,4vw,44px)}
.appform .blank{display:inline-block;min-width:120px;border-bottom:1px solid #9aa89f}

/* ---- Footer ---- */
.m-footer{background:var(--head);color:#cfe3d6;text-align:center;padding:44px 24px;font-size:13px;letter-spacing:.04em;line-height:1.9}
.m-footer .brand{font-family:var(--font-en);font-size:20px;color:#fff;letter-spacing:.06em;margin-bottom:10px}
.m-footer .brand .star{color:#c79a4e;margin:0 6px}
.m-footer a{color:#fff;text-decoration:underline}

/* ---- inter-page link banner ---- */
.link-banner{background:linear-gradient(135deg,#eef6f1,#e3f0ea);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:16px 20px;font-size:14px}
.link-banner a{color:var(--water);font-weight:500;text-decoration:underline}

/* ---- Anchor offset for sticky header ---- */
:target{scroll-margin-top:90px}

/* ---- Responsive ---- */
@media (max-width:768px){
  .spec .row{flex-direction:column}
  .spec .k{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .m-logo{font-size:15px}
}
@media (max-width:600px){
  .form-box,.terms-body,.appform{padding:20px}
  .step{padding:18px 18px 18px 60px}
  .merit{flex-direction:column;gap:8px}
}

/* =========================================================
   出展者ディレクトリ（exhibitors_data.json → generate_exhibitors.py で生成）
   一覧カード(.excard) と 詳細ページ(.ex-detail)。
   設計方針（2026-06-11 全面簡素化）：
   ・既存マルシェ(index.html / exhibitor.html)の静かな世界観に揃える。独自の視覚言語を足さない。
   ・インラインSVGアイコンは全廃。CSSが当たらなくても文字として素直に成立（グレースフルに劣化）。
   ・カテゴリ＝単色テキストピル.tag（index.html と同値の3トーン）。識別の主役はカード上罫3px。
   ・外部リンク＝白地＋水色罫＋水色文字のアウトライン1トーン（白地白枠/白文字事故を構造的に回避）。
   ・基本情報＝既存.spec流用／当日枠＝既存.notice流用（専用パーツを増やさない）。
   ========================================================= */

/* ---- 一覧グリッド：少数でも行が埋まる固定列（プレースホルダ補充と列数を一致） ---- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ---- カテゴリチップ：白地＋カテゴリ色の細枠＋色ドット（一覧・詳細共通） ---- */
.ex-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid;border-radius:999px;padding:4px 12px 4px 11px;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.6;white-space:nowrap}
.ex-chip .dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.ex-chip.cat-experience{color:#0d5168;border-color:rgba(21,112,137,.45)}
.ex-chip.cat-experience .dot{background:#157089}
.ex-chip.cat-food{color:#8f5a1d;border-color:rgba(196,127,58,.5)}
.ex-chip.cat-food .dot{background:#c47f3a}
.ex-chip.cat-goods{color:#235e3b;border-color:rgba(47,122,78,.5)}
.ex-chip.cat-goods .dot{background:#2f7a4e}
.excard .ex-chip{align-self:flex-start}
.ex-info .ex-chip{margin-bottom:10px;font-size:12.5px;padding:5px 14px 5px 12px}

/* ---- 一覧カード（.card 派生：画像＋縦並びの差分だけ） ---- */
.excard{display:flex;flex-direction:column;text-align:left}
.excard.cat-experience{border-top-color:#157089}
.excard.cat-food{border-top-color:#c47f3a}
.excard.cat-goods{border-top-color:#2f7a4e}
.excard .ex-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:14px}
.excard .ex-thumb-ph{display:flex;align-items:center;justify-content:center;background:#fafaf7;color:#c2cdbf;font-size:40px;border-radius:8px;margin-bottom:14px;aspect-ratio:4/3;width:100%}
.excard .name{margin:12px 0 4px}
.excard .place{font-size:12.5px;color:#7a857f;letter-spacing:.02em;margin:0 0 8px;line-height:1.6}
.excard .desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.excard .more{margin-top:auto;padding-top:14px;color:var(--water-deep);font-weight:600;font-size:13px}
.excard .more .arw{display:inline-block;transition:transform .2s}
.excard:hover .more .arw{transform:translateX(3px)}

/* ---- プレースホルダ（準備中）：実カードと同サイズで行を埋める ---- */
.card.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;min-height:300px;background:#fbfaf6;border:1px solid var(--line);border-top:3px solid #cfd8d0;color:#7a857f}
.card.soon .cs-jp{font-size:14px;color:#7a857f;font-weight:500;letter-spacing:.06em}
.card.soon .cs{font-size:12px;letter-spacing:.14em;color:#9aa89f}

/* =========================================================
   詳細ページ（白カードの中を exhibitor.html の作法で静かに積む）
   ========================================================= */
.ex-detail{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(28px,4vw,48px);box-shadow:0 14px 36px rgba(20,60,46,.08)}
.ex-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);align-items:start}
.ex-media img,.ex-media .ex-thumb-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;box-shadow:0 0 0 1px rgba(35,94,59,.12)}
.ex-media .ex-thumb-ph{display:flex;align-items:center;justify-content:center;background:#fafaf7;color:#c2cdbf;font-size:64px;box-shadow:inset 0 0 0 1px rgba(35,94,59,.12)}
/* 店名 h1：Shippori Mincho はここ1か所だけ（制約どおり）。
   keep-all＝カタカナ語の途中で折らない（括弧で自然に折れる）。24px上限で2行に収める */
.ex-name{font-family:var(--font-title);font-weight:700;font-size:clamp(22px,2.6vw,24px);color:var(--head);line-height:1.35;letter-spacing:.03em;margin:6px 0 4px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.ex-brand{font-size:13px;color:var(--water);letter-spacing:.04em;line-height:1.7;margin:0 0 10px}
.ex-lead{font-size:15px;line-height:1.9;color:var(--ink);margin:0 0 4px}

/* こだわり（values）：帯状ピルをやめ、中黒区切りの地味なテキストに降格 */
.ex-values{font-size:13.5px;line-height:1.8;color:var(--leaf-deep);margin:8px 0 0}
.ex-values .vlabel{color:var(--ink-soft);margin-right:6px}

/* セクション小見出し：英大文字を廃止し、既存 .h3 トーンの素直な日本語見出しに */
.ex-block{margin-top:36px}
.ex-block-head{font-family:var(--font-mincho);font-weight:600;font-size:clamp(17px,2.1vw,20px);color:var(--head);letter-spacing:.03em;margin-bottom:14px}
.ex-divider{height:1px;background:var(--line);border:none;margin:32px 0 0}

/* 基本情報：専用 .ex-spec を新設せず、既存 .spec を流用 */
.ex-detail .spec{max-width:none;margin:0;box-shadow:none}

/* ---- 外部リンク：円形アイコンボタン＋小キャプション（SVGはタグ自身にwidth/height属性＝壊れない） ---- */
.ex-links{display:flex;flex-wrap:wrap;gap:18px 22px;margin-top:6px}
.ex-link{display:inline-flex;flex-direction:column;align-items:center;gap:7px;min-width:46px;max-width:110px;border-radius:12px;text-align:center}
.ex-link .ic{width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--water);color:var(--water);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(20,60,46,.08);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.ex-link .lbl{font-size:11.5px;font-weight:500;color:var(--ink-soft);letter-spacing:.02em;line-height:1.45}
.ex-link:hover .ic{background:var(--water);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,60,46,.18)}
.ex-link:active .ic{transform:translateY(0);box-shadow:0 3px 8px rgba(20,60,46,.14)}

/* 戻る導線（同じ水色アウトライン・主従はサイズで付ける） */
.ex-back{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:10px 22px;border-radius:999px;background:#fff;color:var(--water);border:1.5px solid var(--water);font-weight:600;font-size:14px;transition:.2s}
.ex-back:hover{background:var(--water);color:#fff}

/* レスポンシブ（アイコンリンクは横並びのまま折返し） */
@media (max-width:760px){
  .ex-detail-grid{grid-template-columns:1fr}
}
/* PC幅：画像を右カラムの高さに揃え、画像下の空白をなくす
   （aspect-ratio:4/3 はグリッド行高さ計算時の最低高さの保険として生きる。max-heightでクロップ過剰を防止） */
@media (min-width:761px){
  .ex-media{align-self:stretch}
  .ex-media img,.ex-media .ex-thumb-ph{height:100%;max-height:430px}
}

/* フォーカス可視・モーション抑制（出展者まわり） */
.excard:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:12px}
.ex-link:focus-visible,.ex-back:focus-visible{outline:2px solid var(--head);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .excard,.excard .more .arw,.ex-link,.ex-link .ic,.ex-back,.card{transition:none}
  .ex-link:hover .ic,.ex-back:hover,.card:hover,.excard:hover{transform:none}
}