/* =========================================================================
   みんなの里山キャンプ場 ｜ 実用型「発車標 / DEPARTURE BOARD」
   アートディレクション：空港の発車標・スコアボード・案内サインの機能美。
   高コントラストの暗地×明文字、超特大の等幅数字、太い色面で「即決」させる。
   自己完結（外部ライブラリ/CDN/フォント読み込みなし）。
   ========================================================================= */

:root{
  /* --- 発車標パレット：濃緑黒の地 × 琥珀/緑の発光サイン --- */
  --board:#0c1310;        /* いちばん深い地（発車標の黒） */
  --board-2:#111b15;      /* パネル地 */
  --board-3:#16241c;      /* 一段明るいパネル */
  --board-line:rgba(214,232,210,.16);
  --board-line-soft:rgba(214,232,210,.10);

  --cream:#f4efe2;        /* 明文字（地 #0c1310 上 ≈ 16.5:1） */
  --cream-dim:#cdd6c8;    /* 副文字（地 #0c1310 上 ≈ 11:1 / パネル上でも AA余裕） */
  --cream-quiet:#a7b2a3;  /* 注記（地 #0c1310 上 ≈ 6.7:1） */

  --amber:#f6b73e;        /* 琥珀の発光（暗地上 ≈ 10.8:1） */
  --amber-deep:#d6911c;   /* 琥珀（やや沈め） */
  --green:#54e08a;        /* 出発シグナルの緑（暗地上 ≈ 11.5:1） */
  --green-deep:#2faa61;

  --ink:#120d03;          /* 明色面（琥珀ブロック）の上の濃文字 ≈ 11:1+ */
  --paper:#f4efe2;

  --shadow:0 26px 60px rgba(0,0,0,.45);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--board);color:var(--cream);
  font-family:var(--sans);line-height:1.7;
  /* 地に薄い走査線：発車標/LED の質感（装飾・aria非対象） */
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(246,183,62,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(84,224,138,.06), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  background-attachment:fixed;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.01em}
.wrap{width:min(1200px,calc(100% - 36px));margin:0 auto}
.num,.tab,.yen,.flip,.dep-fare,.bigboard-figure,.access-eta{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 可視ヘルパ（読み上げのみ） */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* フォーカス可視化（高コントラスト） */
a:focus-visible,.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ===== デモ帯 ===== */
.demo-banner{
  background:#000;color:var(--cream);font-size:12.5px;line-height:1.6;
  padding:9px 16px;text-align:center;position:relative;z-index:80;
  border-bottom:1px solid var(--board-line);
}

/* ===== 他案ナビ ===== */
.demo-nav{background:var(--board-2);border-bottom:1px solid var(--board-line);position:relative;z-index:70}
.demo-nav-inner{width:min(1200px,calc(100% - 36px));margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 18px;
  align-items:center;justify-content:space-between;padding:10px 0}
.demo-nav-inner strong{font-size:12.5px;font-weight:800;color:var(--cream-dim);letter-spacing:.02em}
.demo-nav-links{display:flex;flex-wrap:wrap;gap:7px}
.demo-nav-links a{font-size:12.5px;font-weight:800;text-decoration:none;color:var(--cream-dim);
  border:1.5px solid var(--board-line);border-radius:999px;padding:5px 13px}
.demo-nav-links a:hover{border-color:var(--amber);color:var(--amber)}
.demo-nav-links a.current{background:var(--amber);color:var(--ink);border-color:var(--amber)}

/* =========================================================================
   発車標バー（sticky）：常時「行ける / いくら / 予約」を表示
   ========================================================================= */
.board-bar{
  position:sticky;top:0;z-index:60;background:rgba(8,13,11,.94);
  -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1.5px solid var(--board-line);
}
.board-bar-inner{width:min(1200px,calc(100% - 36px));margin:0 auto;display:flex;align-items:center;
  gap:18px;padding:10px 0;min-height:60px}
.board-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.board-brand-logo{width:42px;height:42px;border-radius:10px;background:var(--cream);display:grid;
  place-items:center;flex:0 0 auto;overflow:hidden}
.board-brand-logo img{width:100%;height:100%;object-fit:cover}
.board-brand-text{display:flex;flex-direction:column;font-weight:900;font-size:15px;color:var(--cream);line-height:1.15}
.board-brand-text small{font-size:9.5px;letter-spacing:.18em;font-weight:800;color:var(--amber);margin-bottom:1px}

.board-bar-readout{display:flex;gap:8px;margin:0 auto 0 6px;flex:1 1 auto;flex-wrap:nowrap;overflow:hidden}
.readout{display:flex;flex-direction:column;gap:1px;padding:5px 13px;border-radius:8px;
  background:var(--board-3);border:1px solid var(--board-line);min-width:0}
.readout dt{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--cream-quiet);margin:0}
.readout dd{margin:0;font-family:var(--mono);font-weight:800;font-size:16px;color:var(--cream);
  white-space:nowrap}
.readout--fare dd{color:var(--amber)}
.readout--fare dd .yen{font-size:12px;margin-right:1px}

.board-bar-cta{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-decoration:none;background:var(--amber);color:var(--ink);font-weight:900;font-size:14.5px;
  line-height:1.05;padding:9px 18px;border-radius:9px;min-height:48px}
.board-bar-cta small{font-size:10px;font-weight:800;color:#4a3608;margin-top:2px;letter-spacing:.01em}
.board-bar-cta .dot{width:8px;height:8px;border-radius:50%;background:var(--green-deep);
  display:inline-block;margin-right:7px;box-shadow:0 0 0 3px rgba(47,170,97,.3);animation:pulse 1.8s infinite}
.board-bar-cta:hover{filter:brightness(1.05)}

@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(47,170,97,.30)}50%{box-shadow:0 0 0 6px rgba(47,170,97,.05)}}

/* =========================================================================
   共通：セクション見出し（サイン見出し）
   ========================================================================= */
.section{padding:74px 0}
.board-head{margin-bottom:34px;max-width:62ch}
.kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;font-family:var(--mono);
  font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--cream-quiet);text-transform:uppercase}
.kicker--invert{color:rgba(255,255,255,.85)}
.led{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(84,224,138,.8);flex:0 0 auto}
.led--amber{background:var(--amber);box-shadow:0 0 8px rgba(246,183,62,.8)}
.led--green{background:var(--green);box-shadow:0 0 10px rgba(84,224,138,.9)}
.board-head h2{font-size:clamp(28px,4.6vw,46px);font-weight:900;color:var(--cream);letter-spacing:-.02em}
.section-lead{margin:14px 0 0;color:var(--cream-dim);font-size:16px;max-width:56ch}

/* =========================================================================
   HERO：巨大発車標
   ========================================================================= */
.hero{padding:62px 0 16px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;font-family:var(--mono);
  font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
.hero h1{font-size:clamp(36px,7.4vw,86px);font-weight:900;color:var(--cream);letter-spacing:-.035em;line-height:1.02}
.hero h1 .h1-tail{display:block;color:var(--amber);margin-top:4px}
.hero-lead{margin:22px 0 0;max-width:54ch;color:var(--cream-dim);font-size:clamp(16px,1.6vw,19px)}

/* 大型ボード（主役3数字） */
.bigboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:38px 0 0}
.bigboard-cell{background:linear-gradient(180deg,var(--board-3),var(--board-2));
  border:1.5px solid var(--board-line);border-radius:16px;padding:24px 22px 22px;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.bigboard-cell::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--amber),transparent 70%)}
.bigboard-label{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  font-weight:800;color:var(--cream-quiet);text-transform:uppercase}
.bigboard-figure{margin:0;font-family:var(--mono);font-weight:800;color:var(--amber);
  font-size:clamp(46px,7vw,82px);line-height:.96;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:1px;flex-wrap:wrap}
.bigboard-figure--word{color:var(--cream)}
/* 時刻は OPEN/CLOSE の2段表示でセル内に確実に収める（発車標の到発表示風） */
.bigboard-time{display:flex;flex-direction:column;gap:6px}
.bigtime-row{margin:0;display:flex;align-items:baseline;gap:12px}
.bigtime-tag{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--ink);background:var(--cream-dim);border-radius:5px;padding:2px 7px;flex:0 0 auto;
  width:54px;text-align:center}
.bigtime-val{font-family:var(--mono);font-weight:800;color:var(--cream);
  font-size:clamp(36px,5.2vw,52px);line-height:1;letter-spacing:-.01em}
.bigboard-figure .unit{font-size:.5em;color:var(--cream);margin-right:2px;align-self:flex-start;margin-top:.12em}
.bigboard-figure .suffix{font-size:.42em;color:var(--cream-dim);align-self:flex-end;margin-bottom:.18em;margin-left:2px}
.bigboard-figure .colon{color:var(--cream-dim);margin:0 -1px}
.bigboard-figure .dash{font-size:.5em;color:var(--cream-dim);margin:0 6px;align-self:center}
.bigboard-sub{margin:12px 0 0;font-size:13px;color:var(--cream-dim)}

/* split-flap 風の入場 */
.flip{display:inline-block;transform-origin:center;backface-visibility:hidden}
.flip.is-flip{animation:flipin .55s cubic-bezier(.2,.7,.2,1) both}
.flip.is-set{animation:none}
@keyframes flipin{
  0%{transform:rotateX(-90deg);opacity:0}
  55%{transform:rotateX(12deg);opacity:1}
  100%{transform:rotateX(0);opacity:1}
}

.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:34px 0 0}
.hero-note{margin:20px 0 0;font-size:12.5px;color:var(--cream-quiet);max-width:62ch;line-height:1.65}

/* =========================================================================
   ボタン
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:900;font-size:15px;min-height:52px;padding:12px 26px;border-radius:11px;
  letter-spacing:.01em;transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--amber);color:var(--ink);box-shadow:0 14px 30px rgba(246,183,62,.22)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--board-line)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-cta{background:var(--green);color:#0a1a10;box-shadow:0 16px 36px rgba(84,224,138,.24);font-size:16px;min-height:58px;padding:14px 30px}
.btn-cta:hover{filter:brightness(1.06)}
.btn-disabled,.btn.is-disabled{background:transparent;color:var(--cream-quiet);
  border:1.5px dashed var(--board-line);cursor:default;pointer-events:none;font-weight:800}

/* =========================================================================
   料金ボード（発車標の「便」一覧）
   ========================================================================= */
.section--board{background:
  linear-gradient(180deg,rgba(246,183,62,.05),transparent 30%),var(--board)}
.depboard{border:1.5px solid var(--board-line);border-radius:16px;overflow:hidden;background:var(--board-2);
  box-shadow:var(--shadow)}
.depboard-head{display:grid;grid-template-columns:1.15fr .8fr 1.6fr;gap:0;background:#0a0f0c;
  border-bottom:1.5px solid var(--board-line)}
.depboard-head span{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.12em;
  color:var(--cream-quiet);padding:13px 22px;text-transform:uppercase}
.dh-fare{text-align:right}
.depboard-row{display:grid;grid-template-columns:1.15fr .8fr 1.6fr;gap:0;align-items:center;
  border-bottom:1px solid var(--board-line-soft);transition:background .15s ease}
.depboard-row:last-child{border-bottom:0}
.depboard-row:hover{background:var(--board-3)}
.dep-plan{display:flex;align-items:center;gap:14px;padding:20px 22px;font-weight:900;font-size:18px;color:var(--cream)}
.dep-no{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink);background:var(--amber);
  border-radius:6px;padding:3px 7px;flex:0 0 auto;letter-spacing:.04em}
.dep-fare{padding:20px 22px;text-align:right;font-family:var(--mono);font-weight:800;color:var(--amber);
  display:flex;align-items:baseline;justify-content:flex-end;gap:1px}
.dep-fare .yen{font-size:18px;color:var(--cream)}
.dep-fare .num{font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.01em}
.dep-note{padding:20px 22px;color:var(--cream-dim);font-size:14px}
.dep-note b{color:var(--cream);font-weight:800}

/* オプション運賃チップ */
.addon-strip{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.addon-strip li{display:flex;align-items:center;gap:10px;background:var(--board-2);
  border:1.5px solid var(--board-line);border-radius:999px;padding:9px 16px}
.addon-k{font-size:13px;font-weight:800;color:var(--cream-dim)}
.addon-v{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--amber)}
.addon-v small{font-size:11px;color:var(--cream-quiet);margin-left:1px}
.addon-v--free{color:var(--green)}

.notice{margin:24px 0 0;font-size:12.5px;color:var(--cream-quiet);max-width:74ch;line-height:1.7;
  padding-left:14px;border-left:2px solid var(--board-line)}

/* =========================================================================
   設備・体験（案内サインのボード）
   ========================================================================= */
.section--signs{background:var(--board-2)}
.signgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sign{background:var(--board);border:1.5px solid var(--board-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sign--photo .sign-media{aspect-ratio:16/10;background:var(--board-3);position:relative}
.sign--photo .sign-media img{filter:saturate(1.02) contrast(1.02)}
.sign-body{padding:20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.sign-body--center{align-items:flex-start;justify-content:center;text-align:left;min-height:170px}
.sign-glyph{font-size:18px;color:var(--amber);line-height:1}
.sign-glyph--big{font-size:48px;color:var(--green);line-height:1;margin-bottom:4px}
.sign h3{font-size:19px;font-weight:900;color:var(--cream)}
.sign p{margin:0;font-size:14px;color:var(--cream-dim)}
.sign--mark{background:linear-gradient(180deg,var(--board-3),var(--board))}

/* =========================================================================
   予約の流れ（搭乗ステップ）
   ========================================================================= */
.section--flow{background:var(--board)}
.flowboard{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1.5px solid var(--board-line);border-radius:16px;overflow:hidden;background:var(--board-2)}
.flowstep{position:relative;padding:26px 22px 28px;border-right:1px solid var(--board-line-soft)}
.flowstep--last,.flowstep:last-child{border-right:0}
.flowstep-no{display:block;font-family:var(--mono);font-size:clamp(40px,5vw,62px);font-weight:800;
  color:var(--amber);line-height:1;letter-spacing:-.02em;margin-bottom:14px;opacity:.95}
.flowstep h3{font-size:18px;font-weight:900;color:var(--cream);margin-bottom:7px}
.flowstep p{margin:0;font-size:13.5px;color:var(--cream-dim)}

/* =========================================================================
   アクセス（到着案内ボード）
   ========================================================================= */
.section--access{background:var(--board-2)}
.accessboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.access-cell{background:var(--board);border:1.5px solid var(--board-line);border-radius:16px;padding:26px 24px;
  box-shadow:var(--shadow)}
.access-eta{margin:0 0 10px;font-family:var(--mono);font-weight:800;color:var(--amber);
  display:flex;align-items:baseline;gap:4px;line-height:1}
.access-eta .num{font-size:clamp(48px,6vw,68px);letter-spacing:-.02em}
.access-unit{font-size:20px;color:var(--cream-dim);font-weight:800}
.access-pin{margin:0 0 10px;font-size:54px;line-height:1;color:var(--green)}
.access-cell h3{font-size:18px;font-weight:900;color:var(--cream);margin-bottom:8px}
.access-cell p{margin:0;font-size:14px;color:var(--cream-dim)}
.access-address{font-style:normal;display:block;color:var(--cream);font-weight:700;margin-bottom:4px}

/* =========================================================================
   最終CTA（出発案内）
   ========================================================================= */
.finalboard{padding:80px 0;background:
  radial-gradient(900px 420px at 85% 0%, rgba(84,224,138,.12), transparent 60%),
  linear-gradient(180deg,var(--board),#0a120d);
  border-top:1.5px solid var(--board-line)}
.finalboard h2{font-size:clamp(30px,5.2vw,58px);font-weight:900;color:var(--cream);letter-spacing:-.025em;
  line-height:1.05;margin-top:4px}
.finalboard-lead{margin:18px 0 0;max-width:56ch;color:var(--cream-dim);font-size:17px}
.finalboard-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0}
.finalboard-note{margin:22px 0 0;font-size:12.5px;color:var(--cream-quiet)}

/* =========================================================================
   sticky 予約レール（モバイル中心・常時「予約」）
   ========================================================================= */
.reserve-rail{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;align-items:center;
  gap:12px;padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,13,11,.97);border-top:1.5px solid var(--board-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reserve-rail-info{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.reserve-rail-info strong{font-size:14px;font-weight:900;color:var(--cream);white-space:nowrap}
.reserve-rail-info strong .yen{color:var(--amber)}
.reserve-rail-info small{font-size:10.5px;color:var(--cream-quiet)}
.reserve-rail-btn{flex:0 0 auto;display:inline-flex;align-items:center;background:var(--amber);color:var(--ink);
  font-weight:900;font-size:14.5px;padding:12px 18px;border-radius:10px;text-decoration:none;min-height:48px}
.reserve-rail-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--green-deep);display:inline-block;
  margin-right:7px}

/* =========================================================================
   フッター
   ========================================================================= */
.footer{background:#080d0a;border-top:1px solid var(--board-line);padding:40px 0 56px}
.footer-inner{display:flex;flex-direction:column;gap:8px}
.footer-brand{font-size:13.5px;font-weight:800;color:var(--cream-dim)}
.footer-address{font-style:normal;font-size:13px;color:var(--cream-quiet)}
.footer-note,.footer-legal{margin:0;font-size:12px;color:var(--cream-quiet);line-height:1.7;max-width:78ch}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:920px){
  .bigboard{grid-template-columns:1fr;gap:12px}
  .signgrid,.accessboard{grid-template-columns:1fr 1fr}
  .flowboard{grid-template-columns:1fr 1fr}
  .flowstep{border-right:0;border-bottom:1px solid var(--board-line-soft)}
  .flowstep:nth-child(odd){border-right:1px solid var(--board-line-soft)}
  .flowstep:nth-last-child(-n+2){border-bottom:0}
  .board-bar-readout{display:none} /* バーが詰まらないよう、要約 readout はモバイルで省略（数字は本文に大きく出る） */
}
@media (max-width:760px){
  .reserve-rail{display:flex}
  body{padding-bottom:82px}
  .section{padding:54px 0}
  .hero{padding:44px 0 8px}
  .depboard-head{display:none} /* 行ラベルは各行内のレイアウトで自明にする */
  .depboard-row{grid-template-columns:1fr auto;grid-template-areas:"plan fare" "note note";
    padding:16px 18px;gap:6px 12px;align-items:center}
  .dep-plan{grid-area:plan;padding:0;font-size:16px}
  .dep-fare{grid-area:fare;padding:0;justify-content:flex-end}
  .dep-fare .num{font-size:26px}
  .dep-note{grid-area:note;padding:0;font-size:13px}
}
@media (max-width:560px){
  .signgrid,.accessboard{grid-template-columns:1fr}
  .flowboard{grid-template-columns:1fr}
  .flowstep{border-right:0!important;border-bottom:1px solid var(--board-line-soft)}
  .flowstep:last-child{border-bottom:0}
  .demo-nav-inner{flex-direction:column;align-items:flex-start}
  .board-brand-text small{font-size:9px}
  .board-bar-cta small{display:none}
}

/* =========================================================================
   モーション無効（prefers-reduced-motion）
   sticky / 情報は静止でも全て可視。flip は確定値で即表示。
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .flip{transform:none!important;opacity:1!important}
  .board-bar-cta .dot{box-shadow:0 0 0 3px rgba(47,170,97,.3)!important}
}