/* =========================================================
   marche-bg.css — マルシェ共通の「1枚絵背景」
   ---------------------------------------------------------
   マルシェTOP・出店者一覧・出展者用ページで共有して読み込む。
   背景はこの1ファイルに集約し、各ページで二重定義しない。
   画像下端は背景色 #10601d へフェード済みで、段差・見切れが出ない。
   ========================================================= */
body{
  background-image:url(images/onepiece-bg.png);
  background-size:100% auto;
  background-position:top center;
  background-repeat:no-repeat;
  background-color:#10601d;
}
/* 背景の上でも見出しが読めるよう、見出し・英字ラベルは白系の単色に（TOPと統一・発光なし） */
.eyebrow{color:#ffffff}
.h2{color:#ffffff}
.section-sub{color:#e8f1ea}
/* セクションの地色（薄緑など）を透明にし、1枚絵背景を透けさせる（TOPと同じ見え方）。
   本文・テーブル・カード等は各自の半透明白カードで可読性を確保している */
.panel{background:transparent}

/* 出展者紹介ページのヒーローを、マルシェTOPと同じ見せ方に揃える。
   背景画像（onepiece-bg.png）上部の地球＋ロゴの直下にタイトルを置き、
   タイトルは濃緑＋白いにじみ（発光ではなく可読性のための白フチ）でTOPと同じ読みやすさにする。
   ※TOP(index.html)はインライン<style>が後に来て優先するため、ここの定義はTOPに影響しない。 */
.hero{max-width:1020px;margin:0 auto;text-align:center;padding:32vw 24px 28px}
.title{font-family:"Shippori Mincho",serif;font-weight:700;font-size:clamp(30px,5.4vw,56px);letter-spacing:.08em;line-height:1.2;color:#123626;text-shadow:0 2px 12px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.8)}
.subtitle{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:clamp(17px,3vw,30px);letter-spacing:.3em;margin-top:12px;color:#0f3324;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.info-row{margin:26px auto 0;display:inline-flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.85);border-radius:14px;padding:clamp(16px,1.8vw,24px) clamp(24px,3vw,44px);box-shadow:0 10px 28px rgba(20,60,46,.2)}
.info-row .date{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:clamp(32px,4.8vw,54px);line-height:1.05;color:#0d5168;letter-spacing:.02em}
.info-row .date sup{font-size:.5em;margin-left:6px;color:#c47f3a;font-weight:700}
.info-row .vline{width:1px;height:clamp(38px,4vw,56px);background:rgba(20,60,46,.3)}
.info-row .place{text-align:left;font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:#163f2e;font-weight:500}
.info-row .place b{font-weight:700;font-size:clamp(19px,2.2vw,25px);display:block;color:#0f3324}
@media (max-width:600px){.hero{padding-top:36vw}.info-row .date{font-size:30px}}

/* 項目1：下層ページの背景を「横帯」で分断しない。
   告知バナー（link-banner）のベタ塗り帯をやめ、半透明白にして1枚絵背景を透けさせる。
   文字はこの半透明白の上で引き続き読める。※terms.htmlは1枚絵背景を読み込まないため影響なし。 */
.link-banner{background:rgba(255,255,255,.72)}
/* 項目2：CONTACTの副導線（出店をお考えの事業者さま）を、メインの問い合わせボタンより控えめな
   テキストリンクにする（リンク先・文言は変えない）。深緑背景でも読めるよう白系の色。 */
.cta-quiet{display:inline-block;margin-top:14px;font-size:13.5px;color:#eaf4ee;text-decoration:underline;text-underline-offset:3px;letter-spacing:.04em}
.cta-quiet:hover{color:#ffffff}
/* 項目3関連：背景に地球がある下層ページでヒーローを削除した際、本文が地球と重ならないよう
   地球を見せる余白を確保する（TOP・一覧ページと同じく「地球の下から本文が始まる」見え方に揃える） */
.hero-gap{height:clamp(230px,38vw,450px)}
/* 第7弾 項目2：Coming Soonの案内を「全幅のベタ塗り帯」でなく、中央の控えめな一文（半透明白のpill）にする */
.soon-note{display:inline-block;margin:8px 0 0;padding:8px 22px;font-size:14px;line-height:1.7;color:#1f3a2e;background:rgba(255,255,255,.66);border-radius:20px}
.soon-note b{color:#0d5168}
/* 第7弾 項目3：CONTACTの副導線（出店検討の事業者向け）を、メイン導線と十分に離して別カテゴリだと分かるようにする */
.cta-sep{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)}
/* 第7弾 項目1：固定ヘッダーと背景1枚絵の重なりを避け、ヘッダーの真下から1枚絵が始まるようにする。
   背景画像をヘッダー高さぶん（約64px）下げ、ヘッダーの裏は背景色（#10601d）にする。
   ※ヘッダーのある下層ページ（has-fixed-header）だけに効かせ、ヘッダーの無いTOPは対象外。 */
body.has-fixed-header{background-position:center 64px}
@media (max-width:600px){body.has-fixed-header{background-position:center 56px}}

/* 第9弾：スマホ幅（狭い画面）だけの調整。PC（601px以上）には一切効かない。
   ・見出しの字間を詰め、語の途中で折れないよう keep-all で自然に折り返す
   ・緑背景の上で沈む文字（Coming Soon案内・出店検討リンク）を読める色にする（発光なし） */
@media (max-width:600px){
  .title{letter-spacing:.02em;word-break:keep-all}
  .subtitle{letter-spacing:.04em;word-break:keep-all}
  .h2{letter-spacing:.01em;word-break:keep-all}
  .eyebrow{letter-spacing:.2em}
  .soon-note{color:#0f3324;background:rgba(255,255,255,.9)}
  .cta-quiet{color:#ffffff}
}