/* =========================================================
   せっつキッズファクトリー 2026 モック 共通スタイル
   ========================================================= */
:root{
  --ink:#1C262F;
  --ink2:#42546A;
  --ink3:#5E7285;          /* 注釈：コントラスト確保のため濃くしている */
  --paper:#F8F6F2;
  --white:#fff;
  --safety:#FFD000;        /* 操作できるものにだけ使う */
  --spark:#FF4B1F;
  --ok:#0A7A55;
  --line:#C2CFDA;
  --line2:#E4EAF0;
  --soft:#F2F5F8;
  --fs:15.5px;
  --g:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --m:"Roboto Mono",ui-monospace,monospace;
}
html[data-fs="l"]{--fs:17px}
html[data-fs="xl"]{--fs:18.5px}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--g);
  font-size:var(--fs);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{text-wrap:pretty}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
.m{font-family:var(--m);font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.note{font-size:12.5px;color:var(--ink3);font-weight:700;line-height:1.7}

/* ---------- モック説明バー ---------- */
.mockbar{background:#12324A;color:#DCE8F2;font-size:12.5px;padding:9px 0;border-bottom:2px solid var(--ink)}
.mockbar__in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mockbar b{background:var(--spark);color:#fff;font-family:var(--m);font-size:11px;padding:3px 9px;border-radius:4px;letter-spacing:.1em}
.dummy-chip{display:inline-block;font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#5A6B7C;color:#fff;border-radius:3px;padding:1px 6px;vertical-align:1px;margin-left:6px}

/* ---------- ヘッダー ---------- */

.hd{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:2px solid var(--ink)}
.hd__stripe{height:6px;background:repeating-linear-gradient(45deg,var(--safety),var(--safety) 12px,var(--ink) 12px,var(--ink) 24px)}
.hd__in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.hd__logo{text-decoration:none;font-weight:900;font-size:17px;line-height:1.15;letter-spacing:-.02em;white-space:nowrap}
.hd__logo small{display:block;font-family:var(--m);font-size:9px;letter-spacing:.14em;color:var(--ink3);font-weight:500;margin-top:2px}
.hd__act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.me{background:var(--safety);border:2px solid var(--ink);border-radius:20px;padding:2px 13px;font-size:13px;font-weight:900;white-space:nowrap}

/* ページ間ナビ（モック用） */
.pagenav{background:var(--soft);border-bottom:2px solid var(--ink)}
.pagenav__in{max-width:1080px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:8px;overflow-x:auto}
.pagenav__lbl{font-family:var(--m);font-size:10px;letter-spacing:.12em;color:var(--ink3);font-weight:700;white-space:nowrap;padding-right:2px}
.pagenav a{white-space:nowrap;text-decoration:none;font-size:13px;font-weight:700;border:2px solid var(--line);
  background:var(--white);border-radius:20px;padding:5px 14px}
.pagenav a:hover{border-color:var(--ink)}
.pagenav a[aria-current="page"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pagenav__sep{width:2px;height:20px;background:var(--line);flex:none;margin:0 4px}

/* ---------- ボタン ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);
  background:var(--white);color:var(--ink);font-family:var(--g);font-weight:700;font-size:14.5px;
  padding:12px 24px;min-height:46px;border-radius:6px;text-decoration:none;cursor:pointer;
  transition:transform .12s,box-shadow .12s}
.b--key{background:var(--safety);box-shadow:3px 3px 0 var(--ink)}
.b--key:hover{transform:translate(3px,3px);box-shadow:none}
.b--dark{background:var(--ink);color:var(--white)}
.b--dark:hover{background:#2E3E4D}
.b--ghost{border-color:var(--line);color:var(--ink2);background:var(--white)}
.b--ghost:hover{background:var(--soft)}
.b--s{padding:8px 15px;min-height:38px;font-size:13px}
.b--full{width:100%}
.b[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ダミー要素 */

/* ---------- セクション ---------- */
.s{padding:76px 0}
.s--w{background:var(--white);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.s--i{background:#233342;color:var(--white)}
.s--tight{padding:52px 0}
.sh{text-align:center;margin-bottom:44px}
.sh--left{text-align:left}
.sh__en{display:inline-block;font-family:var(--m);font-size:12.5px;color:var(--spark);letter-spacing:.15em;
  font-weight:900;margin-bottom:10px;border-bottom:2px solid var(--spark);padding-bottom:2px}
.s--i .sh__en{color:var(--safety);border-color:var(--safety)}
.sh h2{font-size:clamp(24px,4vw,33px);font-weight:900;line-height:1.45;margin-bottom:16px}
.sh p{margin:0 auto;color:var(--ink2);font-size:15px;max-width:680px;line-height:1.9}
.sh--left p{margin-left:0}
.s--i .sh p{color:#CBDCE8}

/* ---------- カード・表 ---------- */
.card{background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:24px;margin-bottom:20px}
.card>h3{font-size:17px;font-weight:900;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--line2);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card>h3 small{margin-left:auto;font-size:12.5px;color:var(--ink3);font-weight:700}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.two>*,.two--even>*{min-width:0}
.two--even{grid-template-columns:1fr 1fr}
@media(max-width:900px){.two,.two--even{grid-template-columns:1fr}}
.t{width:100%;border-collapse:collapse;font-size:14px}
.t th,.t td{border-bottom:1px solid var(--line2);padding:11px 10px;text-align:left;vertical-align:top}
.t th{background:var(--soft);font-family:var(--m);font-size:11.5px;color:var(--ink2);font-weight:900;letter-spacing:.04em;white-space:nowrap}
.t th:first-child,.t td:first-child{white-space:nowrap}

.t td.tm,.t .tm{font-family:var(--m);font-weight:700;white-space:nowrap}
.t tr:last-child td{border-bottom:none}

/* 状態バッジ */
.st{display:inline-block;font-size:11.5px;font-weight:900;border:2px solid;border-radius:4px;padding:1px 8px;white-space:nowrap}
.st--ok{border-color:var(--ok);color:var(--ok);background:#E9F7F1}
.st--few{border-color:#B47100;color:#8A5600;background:#FFF6E0}
.st--no{border-color:var(--line);color:var(--ink3);background:var(--soft)}
.st--alert{border-color:var(--spark);color:var(--spark);background:#FFF1EC}

/* ---------- フォーム ---------- */
.f{margin-bottom:18px}
.f>label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:6px}
.req{background:var(--spark);color:#fff;font-size:10px;padding:1px 6px;border-radius:3px;font-weight:900}
.opt-tag{background:var(--line2);color:var(--ink2);font-size:10px;padding:1px 6px;border-radius:3px;font-weight:900}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=time],input[type=password],select,textarea{
  width:100%;font-family:var(--g);font-size:15px;padding:11px 12px;min-height:46px;
  border:2px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink)}
textarea{line-height:1.8;min-height:auto}
select{cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--white);color:var(--ink2);border-radius:30px;
  padding:10px 18px;min-height:44px;font-family:var(--g);font-size:14px;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--safety);border-color:var(--ink);color:var(--ink)}
.radio{display:flex;gap:10px;flex-wrap:wrap}
.radio label{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:6px;
  padding:10px 16px;min-height:46px;font-weight:700;font-size:14px;cursor:pointer;background:var(--white)}
.radio input{accent-color:var(--spark);width:18px;height:18px}
.radio label:has(input:checked){border-color:var(--ink);background:#FFFBEB}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.checks{grid-template-columns:1fr}}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:700}
.checks input{width:18px;height:18px;margin-top:3px;accent-color:var(--ok)}
.switch{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;padding:12px 0;border-bottom:1px solid var(--line2)}
.switch:last-of-type{border-bottom:none}
.switch input{margin-left:auto;width:22px;height:22px;accent-color:var(--ok)}

/* ---------- タブ ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:2px solid var(--ink);background:var(--white);border-radius:30px;padding:10px 20px;min-height:44px;
  font-family:var(--g);font-size:14px;font-weight:900;cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:var(--white)}
.panel{display:none}
.panel.on{display:block}

/* ---------- アラート ---------- */
.alert{border:2px solid var(--spark);background:#FFF4F0;border-radius:8px;padding:16px 20px;margin-bottom:20px;
  display:flex;gap:14px;align-items:flex-start}
.alert>*{min-width:0}
.alert .st{flex:none}
.alert b{color:var(--spark);display:block;font-size:14.5px}
.alert p{margin:4px 0 0;font-size:13.5px}
.alert--info{border-color:var(--ink);background:#FFFBEB}
.alert--info b{color:var(--ink)}

/* ---------- バス（リアルタイム） ---------- */
.busnow{background:#233342;color:var(--white);border:2px solid var(--ink);border-radius:8px;padding:18px 20px;margin-bottom:20px}
.busnow__lbl{font-size:12.5px;color:#B9CBDB;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap;letter-spacing:0}
.busnow__t{display:block;font-family:var(--m);font-size:38px;color:var(--safety);line-height:1.1;font-weight:700;margin:4px 0 2px;letter-spacing:-.02em}
.busnow__sub{display:block;font-size:13.5px;color:#CBDCE8;letter-spacing:0;line-height:1.6}
.busnow__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid #3A4C5C;font-size:13.5px;color:#CBDCE8;letter-spacing:0}
.busnow__row b{background:#3A4C5C;color:#fff;border-radius:4px;padding:2px 8px;font-size:11.5px;font-weight:900}
.busnow__row .m{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.live{display:inline-flex;align-items:center;gap:5px;font-family:var(--m);font-size:10.5px;letter-spacing:.08em;
  background:var(--ok);color:#fff;border-radius:3px;padding:1px 7px;font-weight:700}
.live i{width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- マップ ---------- */
.map{height:250px;border:2px solid var(--ink);border-radius:8px;background:var(--white);position:relative;overflow:hidden;
  background-image:linear-gradient(to right,var(--line2) 1px,transparent 1px),linear-gradient(to bottom,var(--line2) 1px,transparent 1px);
  background-size:28px 28px}
.pin{position:absolute;transform:translate(-50%,-100%);font-size:11.5px;font-weight:900;background:var(--white);
  border:2px solid var(--ink);border-radius:20px;padding:3px 10px;white-space:nowrap}
.pin--me{background:var(--safety)}
.pin--bus{background:var(--ink);color:var(--white)}
.pin--next{background:var(--spark);color:#fff}

/* ---------- モーダル・トースト ---------- */
.scrim{position:fixed;inset:0;background:rgba(28,38,47,.6);z-index:80;display:none}
.scrim.on{display:block}
.modal{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;max-width:92vw;
  max-height:86vh;overflow-y:auto;background:var(--paper);border:2px solid var(--ink);border-radius:12px;display:none}
.modal.on{display:block}
.mhead{background:var(--ink);color:var(--white);padding:16px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2}
.mhead b{font-size:16px}
.mhead button{margin-left:auto;background:none;border:none;color:var(--white);font-size:24px;cursor:pointer;line-height:1}
.mbody{padding:22px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(160%);background:var(--ink);color:#fff;
  padding:14px 24px;border-radius:8px;font-weight:900;font-size:14px;z-index:99;transition:transform .25s;
  box-shadow:4px 4px 0 var(--safety);max-width:90vw;text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ---------- フッター ---------- */
.ft{background:var(--ink);color:#A9BCCB;padding:52px 0 44px;font-size:13.5px}
.ft__g{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:36px}
@media(max-width:760px){.ft__g{grid-template-columns:repeat(2,1fr)}}
.ft h4{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--safety);margin:0 0 12px;font-weight:900}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{padding:4px 0}
.ft a{color:#DCE8F2;text-decoration:none}
.ft a:hover{color:var(--safety)}

/* =========================================================
   ページ固有
   ========================================================= */
/* --- TOP ヒーロー --- */
.hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:50%;background:#203140;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;z-index:0}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 20px}
.hero__l{padding:60px 40px 60px 0;max-width:620px;width:100%}
.hero__tag{display:inline-block;background:var(--safety);color:var(--ink);font-weight:900;font-size:13px;
  padding:4px 14px;border-radius:20px;margin-bottom:16px;border:2px solid var(--ink)}
.hero h1{font-size:clamp(29px,4.6vw,48px);font-weight:900;line-height:1.32;letter-spacing:-.02em;margin:0 0 18px}
.hero__p{color:#D5E1EA;margin:0 0 26px;font-size:16px;max-width:44ch;line-height:1.9}
.hero__facts{border-top:1px solid #3A4C5C;margin:0 0 26px;max-width:46ch}
.hero__facts div{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid #3A4C5C;font-size:14px}
.hero__facts dt{width:5.5em;flex:none;color:#9DB2C4;font-weight:700}
.hero__facts dd{margin:0;font-weight:700}

.hero__r{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center}
.hero__r span{font-family:var(--m);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.32)}
@media(max-width:900px){
  .hero::before{left:0;bottom:50%}
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero__l{padding:40px 0;margin:0 auto;display:flex;flex-direction:column;align-items:center}
  .hero__p,.hero__facts{max-width:none;width:100%;text-align:left}
  .hero__r{min-height:230px;order:-1}
}
.ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--ink3);background:var(--soft);
  background-image:linear-gradient(to right,rgba(28,38,47,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(28,38,47,.05) 1px,transparent 1px);
  background-size:26px 26px}

/* --- 開催概要 --- */
.outline{border:2px solid var(--ink);border-radius:8px;background:var(--white);overflow:hidden;margin-top:32px}
.outline table{width:100%;border-collapse:collapse;font-size:14.5px}
.outline th,.outline td{border-bottom:1px solid var(--line2);padding:12px 16px;text-align:left;vertical-align:top}
.outline tr:last-child th,.outline tr:last-child td{border-bottom:none}
.outline th{width:7em;background:var(--soft);font-weight:900;color:var(--ink2);white-space:nowrap}

/* --- 3ステップ --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--white);border:2px solid var(--ink);padding:30px 24px 24px;border-radius:8px;position:relative}
.step__no{position:absolute;top:-16px;left:20px;background:var(--spark);color:var(--white);font-family:var(--m);
  font-size:15px;font-weight:900;padding:5px 14px;border-radius:20px;border:2px solid var(--ink)}
.step h4{font-size:18px;font-weight:900;margin:10px 0 10px;line-height:1.5}
.step p{margin:0;font-size:14px;color:var(--ink2);line-height:1.8}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:34px}}

/* --- AI診断 --- */
.ai{background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:30px 34px;margin-bottom:40px}
.ai__top{display:grid;grid-template-columns:108px 1fr;gap:22px;align-items:center;margin-bottom:26px}
.ai__ch svg{width:108px;height:auto}
.ai__name{text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--spark);margin-top:8px;font-weight:900}
.bub{position:relative;background:var(--soft);color:var(--ink);border:2px solid var(--ink);border-radius:12px;
  padding:18px 22px;font-size:15px;font-weight:700;line-height:1.75}
.bub::before{content:"";position:absolute;left:-11px;top:26px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--ink)}
.bub::after{content:"";position:absolute;left:-7px;top:26px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--soft)}
.bub small{display:block;font-weight:500;font-size:13px;color:var(--ink2);margin-top:8px}
.q{margin-bottom:16px;display:flex;align-items:center;gap:16px}
.q>p{margin:0;font-size:14.5px;font-weight:900;width:150px;flex-shrink:0}
.opts{display:flex;flex-wrap:wrap;gap:8px;flex:1}
@media(max-width:700px){
  .ai{padding:22px 18px}
  .ai__top{grid-template-columns:78px 1fr;gap:14px}
  .ai__ch svg{width:78px}
  .q{flex-direction:column;align-items:flex-start;gap:8px}
  .q>p{width:auto}
}

/* --- 診断のおすすめ --- */
.reco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:820px){.reco{grid-template-columns:1fr}}
.reco__c{border:2px solid var(--ink);border-radius:8px;background:var(--white);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.reco__ph{height:112px;border-bottom:2px solid var(--ink)}
.reco__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.reco__tag{align-self:flex-start;font-size:11px;font-weight:900;border:2px solid var(--line);border-radius:4px;padding:1px 8px;color:var(--ink2);white-space:nowrap}
.reco__co{font-size:12px;font-weight:900;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reco__n{font-size:17px;font-weight:900;line-height:1.45}
.reco__m{font-size:12.5px;color:var(--ink2);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.reco__c .b{margin-top:auto}

/* --- 工場一覧 --- */
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px;background:var(--soft);
  padding:14px 16px;border-radius:8px;border:2px solid var(--line)}
.filter select{width:auto;min-width:150px}
.filter__c{margin-left:auto;font-size:14px;font-weight:900;background:var(--white);border:2px solid var(--ink);padding:3px 14px;border-radius:20px}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:940px){.list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.list{grid-template-columns:1fr}}
.fc{background:var(--white);border:2px solid var(--ink);border-radius:8px;overflow:hidden;display:flex;
  flex-direction:column;text-decoration:none;transition:transform .15s,box-shadow .15s}
.fc:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.fc__ph{height:164px;border-bottom:2px solid var(--ink)}
.fc__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.fc__cat{font-family:var(--m);font-size:11px;letter-spacing:.06em;color:var(--ink2);font-weight:900;margin-bottom:6px}
.fc__n{font-size:20px;font-weight:900;margin:0 0 10px;line-height:1.4}
.fc__desc{margin:0 0 14px;font-size:13.5px;color:var(--ink2);line-height:1.8}
.fc__stop{font-size:12.5px;color:var(--ink3);margin:0;font-weight:700}
.pl{border-top:1px solid var(--line2);margin:14px 0 0;padding:8px 0 0;font-size:13.5px}
.pl__row{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--line2)}
.pl__row:last-child{border-bottom:none}
.pl__tag{flex:none;width:6.2em;font-size:11px;font-weight:900;color:var(--ink3);white-space:nowrap;letter-spacing:-.02em}
.pl__name{flex:1;min-width:0;font-weight:700;line-height:1.5}
.pl__more{font-size:12px;color:var(--ink3);font-weight:700;padding-top:8px}
.fc__f{margin-top:auto;padding-top:16px;border-top:2px dashed var(--line2);display:flex;align-items:center;
  justify-content:space-between;font-weight:900;font-size:14.5px;color:var(--spark)}

/* --- 機能ボックス --- */
.fn{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fn__box{background:#1B2834;border:2px solid #32475A;border-radius:8px;padding:22px 20px;position:relative;overflow:hidden}
.fn__box::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--safety)}
.fn__box h4{font-size:16px;font-weight:900;margin:0 0 8px;line-height:1.5;color:var(--white)}
.fn__box p{margin:0;font-size:13.5px;color:#B4C7D6;line-height:1.8}
@media(max-width:860px){.fn{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fn{grid-template-columns:1fr}}

/* --- ニュース・FAQ --- */
.news{list-style:none;margin:0;padding:0;background:var(--white);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.news li{border-bottom:1px solid var(--line2)}
.news li:last-child{border-bottom:none}
.news a{display:flex;gap:16px;padding:16px 20px;text-decoration:none;align-items:baseline;font-size:14px;font-weight:500}
.news a:hover{background:#FFFBEB}
.news time{font-family:var(--m);font-size:12.5px;color:var(--ink2);white-space:nowrap;font-weight:900}
.faq{background:var(--white);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;font-weight:900;font-size:15px;padding:18px 22px;list-style:none;display:flex;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--m);color:var(--spark);font-weight:900;font-size:17px}
.faq summary:hover{background:var(--soft)}
.faq p{margin:0;padding:0 22px 20px 48px;color:var(--ink2);font-size:14px;line-height:1.8}

/* --- ファクトリーソウルズ --- */
.fs{display:grid;grid-template-columns:.9fr 1.1fr;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--white)}
@media(max-width:800px){.fs{grid-template-columns:1fr}}

.fs__cards{display:flex;gap:10px;margin-bottom:18px}
.fs__card{flex:1;aspect-ratio:2/3;border:2px solid var(--ink);border-radius:6px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:9px;color:var(--ink3);
  transform:rotate(-3deg)}
.fs__card:nth-child(2){transform:rotate(2deg)}
.fs__card:nth-child(3){transform:rotate(5deg)}

/* --- 企業ページ --- */
.crumb{font-size:13px;color:var(--ink2);padding:20px 0 0;font-weight:700}
.crumb a{text-decoration:none}
.chero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;padding:22px 0 8px;align-items:start}
.chero>*{min-width:0}
@media(max-width:880px){.chero{grid-template-columns:1fr;gap:26px}}
.cat{display:inline-block;font-family:var(--m);font-size:11.5px;letter-spacing:.06em;background:var(--soft);
  border:2px solid var(--ink);padding:2px 10px;border-radius:4px;font-weight:900}
.chero h1{font-size:clamp(29px,5vw,44px);font-weight:900;line-height:1.3;letter-spacing:-.02em;margin:14px 0 16px}
.facts{border:2px solid var(--ink);border-radius:8px;background:var(--white);overflow:hidden;margin:0}
.facts div{display:flex;border-bottom:1px solid var(--line2);font-size:14px}
.facts div:last-child{border-bottom:none}
.facts dt{width:8.5em;flex:none;background:var(--soft);padding:10px 14px;font-weight:900;color:var(--ink2);font-size:13px;white-space:nowrap}
.facts dd{margin:0;padding:10px 14px;font-weight:700}
.photo{border:2px solid var(--ink);border-radius:8px;height:320px;overflow:hidden}

.bp{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--white)}
@media(max-width:800px){.bp{grid-template-columns:1fr}}
.bp__l{background:#233342;color:var(--white);padding:32px}
.bp__l h3{font-size:21px;font-weight:900;margin:0 0 12px;line-height:1.5}
.bp__l p{color:#CBDCE8;font-size:14px;margin:0 0 14px}
.bp__r{padding:34px;display:flex;align-items:center;justify-content:center}
.bpcard{display:block;width:100%;max-width:520px;text-decoration:none;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--white);box-shadow:6px 6px 0 var(--ink);
  transition:transform .15s,box-shadow .15s}
.bpcard:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.bpcard__ph{height:220px;border-bottom:3px solid var(--ink)}
.bpcard__b{padding:22px 24px}

.bpcard__b h4{font-size:22px;font-weight:900;margin:0 0 10px;line-height:1.5}
.bpcard__b p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.8}
.bpcard__go{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;
  border-top:2px dashed var(--line2);font-weight:900;font-size:14.5px;color:var(--spark)}
.prog{border:2px solid var(--ink);border-radius:10px;background:var(--white);overflow:hidden;margin-bottom:22px}
.prog__head{display:flex;gap:22px;padding:24px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.prog__ph{width:150px;height:112px;flex:none;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.prog__b{flex:1;min-width:240px}
.prog__b h3{font-size:20px;font-weight:900;margin:0 0 8px}
.prog__b p{margin:0;font-size:14px;color:var(--ink2);max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{font-size:12px;font-weight:900;border:2px solid var(--line);border-radius:4px;padding:2px 10px;color:var(--ink2)}
.tag--pay{border-color:var(--ink);color:var(--ink)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:20px 24px 24px}
.slot{border:2px solid var(--ink);border-radius:8px;padding:12px 12px 13px;background:var(--white);display:flex;flex-direction:column;gap:6px;align-items:stretch}
.slot--free{background:#EFF9F5;border-color:var(--ok)}
.slot--few{background:#FFF8E6;border-color:#B47100}
.slot--full{background:var(--soft);border-color:var(--line);color:var(--ink3)}
.slot__t{font-family:var(--m);font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.02em}
.slot__l{font-size:12px;font-weight:900;font-family:var(--m);margin-bottom:2px}
.walkin{padding:20px 24px 24px;font-size:14px;color:var(--ink2)}
.near{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:22px}
.near a{border:2px solid var(--ink);border-radius:8px;background:var(--white);padding:14px 16px;text-decoration:none;display:block}
.near a:hover{background:#FFFBEB}
.near b{display:block;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.near span{font-size:12.5px;color:var(--ink2);font-weight:700}
.notes{border:2px solid var(--spark);border-radius:8px;background:#FFF4F0;padding:24px}
.notes h3{color:var(--spark);font-size:17px;font-weight:900;margin:0 0 12px}
.notes ul{margin:0;padding-left:22px;font-size:14px;line-height:1.9}

/* --- マイページ --- */
.top{background:#233342;color:var(--white);padding:26px 0 24px;border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:0 20px}
.top h1{font-size:clamp(20px,3.2vw,26px);font-weight:900}
.top p{margin:4px 0 0;color:#CBDCE8;font-size:14px}
.count{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.count div{background:#1B2834;border:2px solid #32475A;border-radius:8px;padding:10px 18px;text-align:center;min-width:100px}
.count b{display:block;font-family:var(--m);font-size:25px;font-weight:700;color:var(--safety);line-height:1.2}
.count span{font-size:11.5px;font-weight:700;color:#B4C7D6}
.plan{list-style:none;margin:0;padding:0}
.plan__item{border:2px solid var(--ink);border-radius:8px;background:var(--white);padding:16px 18px;
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.plan__t{font-family:var(--m);font-size:20px;font-weight:700;width:66px;flex:none}
.plan__b{flex:1;min-width:200px}
.plan__b b{font-size:16px;font-weight:900;display:block}
.plan__b span{font-size:13px;color:var(--ink2);font-weight:700}
.plan__move{display:flex;gap:12px;align-items:center;padding:10px 0 10px 22px;margin-left:32px;
  border-left:3px dashed var(--line);font-size:13.5px;font-weight:700;color:var(--ink2)}
.plan__move.warn{color:var(--spark);border-color:var(--spark)}
.qr{width:190px;height:190px;margin:0 auto 14px;border:8px solid #fff;outline:2px solid var(--ink);border-radius:6px;
  background:repeating-linear-gradient(0deg,var(--ink) 0 8px,#fff 8px 16px),
             repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px)}
.qrid{font-family:var(--m);font-size:13px;font-weight:700;letter-spacing:.1em;text-align:center}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:600px){.stamps{grid-template-columns:repeat(3,1fr)}}
.stamp{aspect-ratio:1;border:2px dashed var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:var(--ink3);background:var(--soft);text-align:center;padding:4px;line-height:1.35}
.stamp.got{border:2px solid var(--ok);background:#E9F7F1;color:var(--ok)}
.stamp.gift{border:2px solid var(--ink);background:var(--safety);color:var(--ink)}
.progress{height:10px;background:var(--line2);border-radius:5px;overflow:hidden;margin:14px 0 8px}
.progress i{display:block;height:100%;background:var(--ok)}

.msg--bot{background:var(--white)}
.msg--me{background:var(--safety);margin-left:auto}

/* --- 会員登録 --- */
.steps-bar{display:flex;gap:0;border:2px solid var(--ink);border-radius:8px;overflow:hidden;margin-bottom:28px;background:var(--white)}
.steps-bar div{flex:1;padding:12px 8px;text-align:center;font-size:13px;font-weight:900;color:var(--ink3);
  border-right:2px solid var(--line2);position:relative}
.steps-bar div:last-child{border-right:none}
.steps-bar div.on{background:var(--safety);color:var(--ink)}
.steps-bar div.done{background:var(--soft);color:var(--ink2)}
.steps-bar b{display:block;font-family:var(--m);font-size:11px}

/* --- 管理サイト --- */
.adm{max-width:1240px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
@media(max-width:900px){.adm{grid-template-columns:1fr}}
.side{background:var(--white);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.side h4{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);padding:14px 16px 6px;font-weight:700;margin:0}
.side a{display:block;padding:10px 16px;text-decoration:none;font-weight:700;font-size:14px;border-left:4px solid transparent}
.side a:hover{background:var(--soft)}
.side a[aria-current="page"]{background:#FFFBEB;border-left-color:var(--safety)}
.side .sep{height:1px;background:var(--line2);margin:8px 0}
.panelbox{background:var(--white);border:2px solid var(--ink);border-radius:8px;margin-bottom:22px;overflow:hidden}
.panelbox__h{padding:16px 22px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.panelbox__h h2{font-size:17px;font-weight:900}
.panelbox__h p{margin:0;font-size:13px;color:var(--ink2)}
.panelbox__b{padding:22px}
.panelbox__f{padding:18px 22px;border-top:2px solid var(--ink);background:var(--soft);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:820px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi div{background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:16px 18px;min-width:0}
.kpi b{display:block;font-family:var(--m);font-size:28px;font-weight:700;line-height:1.2}
.kpi span{font-size:12px;font-weight:900;color:var(--ink2);white-space:nowrap}
.bar{height:8px;background:var(--line2);border-radius:4px;overflow:hidden;width:130px;margin-top:5px}
.bar i{display:block;height:100%;background:var(--ok)}
.bar i.full{background:var(--spark)}
.gen{background:var(--soft);border:2px solid var(--line);border-radius:8px;padding:18px;margin-bottom:18px}
.gen__row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
@media(max-width:820px){.gen__row{grid-template-columns:repeat(2,1fr)}}
.sum{display:flex;gap:20px;flex-wrap:wrap;padding:14px 16px;background:var(--soft);font-weight:900;font-size:13.5px;border-top:2px solid var(--ink)}
.pv{border:2px solid var(--ink);border-radius:8px;background:var(--white);overflow:hidden;max-width:460px}
.pv__ph{height:120px;border-bottom:2px solid var(--ink)}
.pv__b{padding:16px 18px}
.pv__b h3{font-size:17px;font-weight:900;margin:0 0 6px}
.pv__b p{margin:0;font-size:13px;color:var(--ink2)}
.pvslots{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pvslot{font-family:var(--m);font-size:11.5px;font-weight:700;border:2px solid var(--ok);background:#EFF9F5;border-radius:4px;padding:2px 8px}
.scan{background:#111A22;border:2px solid var(--ink);border-radius:10px;padding:28px;text-align:center;color:#fff}
.scan__frame{width:230px;height:230px;margin:0 auto 18px;border:3px solid var(--safety);border-radius:12px;position:relative;
  background:#0B1218;display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:11px;color:#5E7285}
.scan__line{position:absolute;left:8px;right:8px;height:3px;background:var(--spark);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:14px}50%{top:210px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.mockbar,.util,.hd,.pagenav,.tabs,.top,.ft,.b{display:none!important}.panel{display:block!important}}

/* =========================================================
   INTERACTION LAYER  ―「工場に入る」体験をWebで再現する
   ========================================================= */

/* ---------- 00. 開場：シャッターが巻き上がる ---------- */
.shutter{position:fixed;inset:0;z-index:200;pointer-events:none;transform-origin:top;
  background:
    repeating-linear-gradient(180deg,
      #223141 0 22px, #1a2735 22px 24px, #2b3d4f 24px 26px, #1a2735 26px 28px);
  box-shadow:inset 0 -18px 40px rgba(0,0,0,.45)}
.shutter::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0 18px,transparent 18px calc(100% - 18px),rgba(0,0,0,.35) calc(100% - 18px) 100%)}
.shutter__rail{position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--ink);
  border-top:2px solid #3D5C77;display:flex;align-items:center;justify-content:center}
.shutter__rail::before{content:"";width:120px;height:8px;border-radius:4px;background:#4E6B84}
.shutter__stripe{position:absolute;left:0;right:0;bottom:26px;height:12px;
  background:repeating-linear-gradient(45deg,var(--safety) 0 12px,var(--ink) 12px 24px)}
.shutter__txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:2;color:var(--safety);font-family:var(--m);letter-spacing:.3em;font-size:12px;text-align:center;padding:0 20px}
.shutter__txt b{font-family:var(--g);font-size:22px;letter-spacing:.04em;color:#fff;margin-top:10px;font-weight:900}
.shutter__bar{width:180px;height:3px;background:rgba(255,255,255,.18);margin-top:22px;overflow:hidden}
.shutter__bar i{display:block;height:100%;width:0;background:var(--safety);animation:openBar .95s cubic-bezier(.5,0,.2,1) forwards}
@keyframes openBar{to{width:100%}}
.shutter.go{animation:rollUp .95s cubic-bezier(.7,0,.2,1) forwards}
.shutter.go .shutter__txt{animation:fadeOut .3s ease forwards}
@keyframes rollUp{to{transform:scaleY(0)}}
@keyframes fadeOut{to{opacity:0}}

/* ---------- 01. 火花キャンバス ---------- */
#sparks{position:fixed;inset:0;z-index:95;pointer-events:none}

/* ---------- 03. 見出し：中抜き→塗り ---------- */
.fill-head{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;
  background-size:0% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(28,38,47,.35);transition:background-size 1.1s cubic-bezier(.16,1,.3,1)}
.is-in .fill-head{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.s--i .fill-head{background-image:linear-gradient(#fff,#fff);-webkit-text-stroke-color:rgba(255,255,255,.4)}

/* ---------- 04. 本文：行ごとにせり上がる ---------- */

/* ---------- 05. 出現 ---------- */
html.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
html.js [data-rv].is-in{opacity:1;transform:none}
html.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
html.js .wipe.is-in{clip-path:inset(0 0 0 0)}
.split{display:inline-block;overflow:hidden;vertical-align:bottom}
html.js .split>i{display:inline-block;font-style:normal;transform:translateY(110%);opacity:0;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease}
html.js .split.is-in>i{transform:none;opacity:1}

/* ---------- 06. 数字は刻印する ---------- */
.press{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);border-radius:8px;
  overflow:hidden;background:var(--white);margin-top:34px}
@media(max-width:700px){.press{grid-template-columns:1fr}}
.press__c{padding:22px;border-left:2px solid var(--ink);text-align:center;position:relative;overflow:hidden}
.press__c:first-child{border-left:none}
@media(max-width:700px){.press__c{border-left:none;border-top:2px solid var(--ink)}.press__c:first-child{border-top:none}}
.press__c b{display:block;font-family:var(--m);font-size:clamp(38px,6vw,58px);font-weight:700;line-height:1}
html.js .press__c b{transform:scale(2.4) rotate(-8deg);opacity:0}
html.js .press__c.is-in b{animation:stampIn .42s cubic-bezier(.3,1.6,.4,1) forwards}
html.js .press__c:nth-child(2).is-in b{animation-delay:.16s}
html.js .press__c:nth-child(3).is-in b{animation-delay:.32s}
@keyframes stampIn{60%{transform:scale(.93) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
.press__c span{display:block;font-size:12.5px;font-weight:900;color:var(--ink2);margin-top:8px}
.press__c::after{content:"";position:absolute;inset:0;background:var(--safety);opacity:0;pointer-events:none}
.press__c.is-in::after{animation:stampFlash .5s ease forwards}
@keyframes stampFlash{0%{opacity:.5}100%{opacity:0}}

/* ---------- 07. カード：チルト・ズーム・ラベル反転 ---------- */
.fc{position:relative;transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease}
.fc__ph{position:relative;overflow:hidden}
.fc__ph>.ph,.fc__ph.ph{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.fc:hover .fc__ph{transform:none}
.fc:hover{box-shadow:8px 8px 0 var(--ink)}
.fc__ph::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-18deg);opacity:0}
.fc:hover .fc__ph::after{animation:shine .75s ease forwards}
@keyframes shine{from{left:-70%;opacity:1}to{left:130%;opacity:1}}
.fc__cat{display:inline-block;transition:background .2s,padding .2s,color .2s}
.fc:hover .fc__cat{background:var(--safety);color:var(--ink);padding:1px 8px;border-radius:3px}
.fc__f span:last-child{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fc:hover .fc__f span:last-child{transform:translateX(8px)}

/* ---------- 08. 溶接ビード（セクションの継ぎ目） ---------- */
.bead{height:16px;position:relative;background:var(--ink);overflow:hidden}
.bead::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,208,0,.9) 0 10px,rgba(255,208,0,0) 10px 22px);
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  animation:beadRun 5s linear infinite}
@keyframes beadRun{to{background-position:44px 0}}

/* ---------- 09. マグネットボタン ---------- */
.b{position:relative;will-change:transform}
.b--key{transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .18s}

/* ---------- 10. カーソル（図面の照準） ---------- */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:120;
  pointer-events:none;opacity:0;transition:opacity .3s,width .18s,height .18s,margin .18s}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--spark)}
.cursor::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.cursor::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.cursor.on{opacity:.9}
.cursor.hot{width:46px;height:46px;margin:-23px 0 0 -23px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(180deg)}}
@media(hover:none),(max-width:900px){.cursor{display:none}}

/* ---------- 11. ヒーロー ---------- */
.hero::before{animation:gridDrift 26s linear infinite}
@keyframes gridDrift{to{background-position:32px 32px}}
.hero__tag{animation:tagPop .7s cubic-bezier(.2,1.4,.4,1) .1s both}
@keyframes tagPop{from{transform:scale(.86) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  font-family:var(--m);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.6);text-align:center}
.scrollcue i{display:block;width:1px;height:34px;background:rgba(255,255,255,.35);margin:8px auto 0;position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--safety);animation:cueRun 1.8s ease-in-out infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:900px){.scrollcue{display:none}}

/* ---------- 12. 立入禁止テープ（静止・帯として） ---------- */
.tiger{height:14px;background:repeating-linear-gradient(45deg,var(--safety) 0 14px,var(--ink) 14px 28px);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}

/* ---------- 13. ボルト ---------- */
.ai__ch svg{animation:boltFloat 4.5s ease-in-out infinite}
@keyframes boltFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
.bolt-eye{animation:blink 5.2s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bolt-ant{animation:antBlink 1.6s ease-in-out infinite}
@keyframes antBlink{0%,100%{opacity:1}50%{opacity:.3}}
.bub{transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.bub.pop{transform:scale(1.02)}

/* ---------- 14. 残席・その他 ---------- */
.st--few{animation:fewPulse 2.4s ease-in-out infinite}
@keyframes fewPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,113,0,0)}50%{box-shadow:0 0 0 4px rgba(180,113,0,.16)}}
.sh__en{position:relative}
.sh__en::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:currentColor;
  transition:width .9s cubic-bezier(.16,1,.3,1) .2s}
.is-in .sh__en::after{width:100%}
.slot{transition:transform .2s cubic-bezier(.2,1.4,.4,1),box-shadow .2s}
.slot:hover{transform:translateY(-3px);box-shadow:4px 4px 0 var(--ink)}
.grain{position:fixed;inset:0;z-index:94;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
[data-rv], .split>i, .press__c b{opacity:1!important;transform:none!important;animation:none!important}
  .wipe{clip-path:none!important}
  .fill-head{background-size:100% 100%!important;-webkit-text-stroke-color:transparent!important}
  .cursor,#sparks,.grain,.shutter{display:none!important}
  .hero::before,.bead::before,.ai__ch svg,.bolt-eye,.bolt-ant,.st--few,.scrollcue i::after{animation:none!important}
}

/* =========================================================
   INTERACTION LAYER 2 ― 工具・コンベア・観音開き・突き抜け
   ========================================================= */

/* ---------- 工具カーソル ---------- */
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;transition:opacity .3s,transform .18s cubic-bezier(.2,1.6,.4,1)}
.cursor::before,.cursor::after{display:none}
.cursor svg{width:100%;height:100%;filter:drop-shadow(1px 1px 0 rgba(28,38,47,.5))}
.cursor.hot{transform:scale(1.25) rotate(-18deg);width:38px;height:38px;margin:-19px 0 0 -19px;animation:none}
.cursor.tap{transform:scale(.82) rotate(28deg)}
.cursor.spin svg{animation:toolSpin .5s cubic-bezier(.3,1.6,.4,1)}
@keyframes toolSpin{to{transform:rotate(360deg)}}

/* ---------- ページ遷移カーテン ---------- */
.veil{position:fixed;inset:0;z-index:190;pointer-events:none;transform:scaleY(0);transform-origin:top;
  transition:transform .52s cubic-bezier(.76,0,.24,1);
  background:
    repeating-linear-gradient(180deg,
      #223141 0 22px, #1a2735 22px 24px, #2b3d4f 24px 26px, #1a2735 26px 28px);
  box-shadow:inset 0 -18px 40px rgba(0,0,0,.4)}
.veil::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0 18px,transparent 18px calc(100% - 18px),rgba(0,0,0,.35) calc(100% - 18px) 100%)}
.veil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--ink);
  border-top:2px solid #3D5C77;
  box-shadow:0 -12px 0 0 var(--ink), 0 -24px 0 0 transparent}
.veil__stripe{position:absolute;left:0;right:0;bottom:24px;height:12px;
  background:repeating-linear-gradient(45deg,var(--safety) 0 12px,var(--ink) 12px 24px)}
/* 閉まるときは上から降りてくる／開くときは上へ巻き上がる */
.veil.down{transform:scaleY(1);transform-origin:top}
.veil.up{transform:scaleY(0);transform-origin:top}

/* ---------- コンベア出現（横から流れて、カチッと止まる） ---------- */

/* ---------- フリップして現れる（シャッターがめくれる） ---------- */
.fn{perspective:1400px}
html.js .flip{transform:rotateX(-92deg);transform-origin:top center;opacity:0;
  transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .5s}
html.js .flip.is-in{transform:none;opacity:1}

/* ---------- 突き抜ける巨大文字 ---------- */

/* ---------- 観音開き ---------- */
.sio{height:210vh;position:relative}
.sio__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.sio__half{position:absolute;top:0;width:50.5%;height:100%;background:#123A5E;will-change:transform;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;display:flex;align-items:center;justify-content:center;
  font-family:var(--m);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.35)}
.sio__half--l{left:0;border-right:2px solid var(--ink)}
.sio__half--r{right:0;border-left:2px solid var(--ink)}
.sio__behind{text-align:center;color:#fff;padding:0 20px}
.sio__behind b{display:block;font-size:clamp(26px,5vw,46px);font-weight:900;line-height:1.35}
.sio__behind span{display:block;margin-top:12px;color:#B4C7D6;font-size:14px}

/* ---------- 工程ライン（SVGパス描画） ---------- */

/* ---------- 横に流れる写真帯 ---------- */
.hs{height:260vh;position:relative}
.hs__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;background:var(--paper)}
.hs__track{display:flex;gap:22px;padding:0 6vw;will-change:transform}
.hs__item{flex:0 0 62vw;max-width:520px;height:62vh;border:2px solid var(--ink);border-radius:10px;
  display:grid;place-items:center;background:var(--soft);font-family:var(--m);font-size:12px;color:var(--ink3)}

/* ---------- 暗いセクションのスポットライト ---------- */
.s--i{position:relative;overflow:hidden}
.s--i::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(255,208,0,.10),transparent 70%)}

/* ---------- ボタン：文字が入れ替わる／枠線が描かれる ---------- */
.swap{display:inline-block;overflow:hidden;line-height:1.35;height:1.35em;vertical-align:bottom}
.swap i{display:block;font-style:normal;transition:transform .38s cubic-bezier(.19,1,.22,1)}
.b:hover .swap i{transform:translateY(-100%)}
.b--ghost{position:relative}
.b--ghost::before,.b--ghost::after{content:"";position:absolute;width:0;height:0;pointer-events:none}
.b--ghost::before{top:-2px;left:-2px;border-top:2px solid var(--spark);border-left:2px solid var(--spark)}
.b--ghost::after{bottom:-2px;right:-2px;border-bottom:2px solid var(--spark);border-right:2px solid var(--spark)}
.b--ghost:hover::before,.b--ghost:hover::after{width:calc(100% + 4px);height:calc(100% + 4px);
  transition:width .22s,height .22s .22s}

/* ---------- 見出しホバーでグリッチ ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:"";position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none;
  -webkit-text-stroke:0;background:none}
.glitch:hover::before{content:attr(data-t);opacity:.8;color:var(--spark);animation:gl1 .3s steps(2) 2}
.glitch:hover::after{content:attr(data-t);opacity:.8;color:#31D0F0;animation:gl2 .3s steps(2) 2}
@keyframes gl1{0%{transform:translate(-3px,1px);clip-path:inset(0 0 62% 0)}100%{transform:translate(2px,-1px);clip-path:inset(46% 0 0 0)}}
@keyframes gl2{0%{transform:translate(3px,-1px);clip-path:inset(52% 0 0 0)}100%{transform:translate(-2px,1px);clip-path:inset(0 0 58% 0)}}

/* ---------- タイプライター ---------- */
.tw::after{content:"";display:inline-block;width:.5em;height:1em;background:var(--spark);
  vertical-align:-2px;margin-left:2px;animation:caret .8s step-end infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- スロットがカチャッと出る ---------- */
.slot{transform-origin:top center}

@media(prefers-reduced-motion:reduce){
  .conv,.flip{opacity:1!important;transform:none!important;animation:none!important}
.sio, .hs{height:auto}
.sio__sticky, .hs__sticky{position:static;height:auto;padding:60px 0}
  .veil{display:none}
  .cursor{display:none}
}

/* 予約枠のボタンを小さめに揃える */
.slot .b{padding:8px 6px;min-height:38px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.slot .b:hover{transform:translate(2px,2px);box-shadow:none}
.slot--full .b{box-shadow:none}

/* 企業ページ：ヒーロー写真を1枚で大きく */
.chero__img{position:relative}
.chero__img .photo{height:min(70vh,520px);overflow:hidden}
.chero__img .ph{transition:transform .1s linear;will-change:transform}
@media(max-width:880px){.chero__img .photo{height:300px}}

/* 出現：カードが交互に振り込まれる */
html.js .conv{opacity:0;transform:translate(-52px,18px) rotate(-3deg)}
html.js .conv:nth-child(even){transform:translate(52px,18px) rotate(3deg)}
html.js .conv.is-in{animation:convIn .7s cubic-bezier(.2,1.4,.35,1) forwards}
html.js .conv:nth-child(even).is-in{animation-name:convInR}
@keyframes convIn{0%{opacity:0;transform:translate(-52px,18px) rotate(-3deg)}
  72%{opacity:1;transform:translate(5px,-3px) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes convInR{0%{opacity:0;transform:translate(52px,18px) rotate(3deg)}
  72%{opacity:1;transform:translate(-5px,-3px) rotate(-.6deg)}100%{opacity:1;transform:none}}

/* 出現：見出しが横から滑り込む */
.sh h2{overflow:hidden}
.sh .fill-head{display:inline-block;transform:translateX(-24px);transition:background-size 1.1s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.is-in .fill-head{transform:none}

/* 枠内パララックス（写真だけがゆっくり動く） */
.fc__ph{overflow:hidden}
.fc__ph .ph{will-change:transform}

/* 横スクロール帯 */
.hs__item{position:relative;overflow:hidden}
.hs__item::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,208,0,.14))}

@media(prefers-reduced-motion:reduce){
  .conv,.conv:nth-child(even){opacity:1!important;transform:none!important;animation:none!important}
  .sh .fill-head{transform:none!important}
}

/* =========================================================
   LAYER 4 ― タイポの統一とポップ化
   ========================================================= */
:root{--fs:16px}
body{line-height:1.95;font-weight:500}

/* --- 本文の基準を1つに揃える --- */
.s p,.card p,.step p,.fn__box p,.walkin,.prog__b p,.sh p,.faq p,.notes li,.hero__p{
  font-size:16px;line-height:1.95;font-weight:500;letter-spacing:.01em}
.note,.ops-note{font-size:13px;line-height:1.8;font-weight:700}
.s h3,.card h3,.prog__b h3{letter-spacing:.01em}
.lead-h{font-size:clamp(22px,3.2vw,28px);font-weight:900;line-height:1.6;margin:0 0 20px;letter-spacing:.01em}
.sh h2{letter-spacing:.01em}
.fc__desc{font-size:15px;line-height:1.9;font-weight:500}
.facts dd,.outline td,.t td{font-weight:600}

/* --- ボタンは全部ポップに --- */
.b{border:3px solid var(--ink);border-radius:12px;font-weight:900;font-size:15.5px;
  padding:13px 26px;min-height:52px;box-shadow:5px 5px 0 var(--ink);
  transition:transform .14s cubic-bezier(.2,1.5,.4,1),box-shadow .14s,background .18s}
.b:hover{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.b:active{transform:translate(5px,5px) scale(.97)}
.b--key{background:var(--safety);color:var(--ink)}
.b--key:hover{background:#FFDE4D}
.b--ghost{background:var(--white);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--spark)}
.b--ghost:hover{background:#FFF1EC;box-shadow:0 0 0 var(--spark)}
.b--dark{background:var(--ink);color:var(--white);box-shadow:5px 5px 0 var(--safety)}
.b--dark:hover{background:#2C3D4D;box-shadow:0 0 0 var(--safety)}
.b--s{border-width:2.5px;border-radius:9px;padding:9px 16px;min-height:42px;font-size:13.5px;box-shadow:3px 3px 0 var(--ink)}
.b--s:hover{transform:translate(3px,3px)}
.b--s.b--ghost{box-shadow:3px 3px 0 var(--spark)}
.slot .b{box-shadow:3px 3px 0 var(--ink)}

/* --- 数字・見出しの重心を上げる --- */
.press__c b, .kpi b{letter-spacing:-.02em}
.sh__en{font-size:13px;letter-spacing:.18em}

/* --- カードの角を少し丸く、影を強く --- */
.card,.panelbox,.outline,.faq,.news,.fc,.prog,.bp,.notes{border-radius:12px}
.step{border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
.fc:hover{box-shadow:9px 9px 0 var(--ink)}
.chip{border-width:2.5px;font-weight:900}
.tab{border-width:2.5px;font-weight:900;box-shadow:3px 3px 0 transparent}
.tab[aria-selected="true"]{box-shadow:3px 3px 0 var(--safety)}

/* =========================================================
   工場の門（全社共通デザイン）
   ========================================================= */
.sio__sticky{background:#0E1A24}
.sio__photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--m);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.28);
  background:#16283a;background-size:cover;background-position:center}
.sio__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.sio__behind{position:relative;z-index:1;opacity:0;transition:opacity .4s ease .12s,transform .55s cubic-bezier(.16,1,.3,1) .12s;
  transform:translateY(18px) scale(.97)}
.sio__behind.show{opacity:1;transform:none}

/* 門扉のデザイン（金属＋リベット＋安全帯） */
.sio__half{z-index:3;background:
    repeating-linear-gradient(180deg,#2A3D4F 0 26px,#22323F 26px 28px,#33485C 28px 30px,#22323F 30px 32px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.sio__half::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle 3px at 22px 22px,rgba(255,255,255,.22),transparent 60%);
  background-size:64px 64px}
.sio__half--l{border-right:6px solid var(--ink)}
.sio__half--r{border-left:6px solid var(--ink)}
.sio__half::after{content:"";position:absolute;top:0;bottom:0;width:16px;
  background:repeating-linear-gradient(45deg,var(--safety) 0 12px,var(--ink) 12px 24px)}
.sio__half--l::after{right:0}
.sio__half--r::after{left:0}

/* 門の言葉：見せ方を3パターン用意 */
.gate-t{display:inline-block;font-size:clamp(26px,5vw,46px);font-weight:900;line-height:1.4;color:#fff}
.gate-t--outline{-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-stroke:8px var(--ink)}
.gate-t--plate{background:var(--ink);padding:.18em .5em;border-radius:12px;border:3px solid var(--safety);
  box-shadow:7px 7px 0 rgba(0,0,0,.45)}
.gate-t--shadow{text-shadow:0 4px 0 var(--ink),0 0 26px rgba(0,0,0,.75)}
.gate-s{display:block;margin-top:14px;font-size:15px;font-weight:700;color:#EAF1F6;
  text-shadow:0 2px 6px rgba(0,0,0,.8)}

@media(prefers-reduced-motion:reduce){.sio__behind{opacity:1;transform:none}}

/* =========================================================
   LAYER 5 ― 押しやすさ・ボタンの色・バス時刻表
   ========================================================= */

/* --- 操作できるものを最前面に --- */
.chip,.tab,.b,button,select,input,textarea,a{position:relative;z-index:2}
.chip{cursor:pointer}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--safety);border-color:var(--ink);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink)}

/* --- 白背景に白ボタンを置かない --- */
.b--ghost{background:var(--soft);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.b--ghost:hover{background:#E8EEF4;box-shadow:0 0 0 var(--ink)}
.b--s.b--ghost{box-shadow:3px 3px 0 var(--ink)}
.b--2{background:var(--spark);color:#fff;border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.b--2:hover{background:#FF6136;box-shadow:0 0 0 var(--ink)}
/* 濃紺の面で使う白ボタン */
.b--light{background:var(--white);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--safety)}
.b--light:hover{background:#FFF8DC;box-shadow:0 0 0 var(--safety)}

/* --- バス時刻表（停留所を選んで縦に読む） --- */
.busbox{border:2px solid var(--ink);border-radius:12px;background:var(--white);overflow:hidden}
.busbox__head{padding:16px 18px;border-bottom:2px solid var(--ink);display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--soft)}
.busbox__head select{max-width:280px}
.busbox__body{padding:18px}
.bus-h{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;margin:0 0 10px}
.bus-h span{font-family:var(--m);font-size:11px;letter-spacing:.1em;background:var(--ink);color:#fff;border-radius:4px;padding:2px 8px}
.times{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.times b{font-family:var(--m);font-size:15px;font-weight:700;border:2px solid var(--line);border-radius:8px;
  padding:7px 12px;background:var(--white);min-width:72px;text-align:center}
.times b.next{background:var(--safety);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.times b.past{opacity:.38}

/* --- 全停留所の一覧 --- */
.allbus{border-top:2px solid var(--ink);background:var(--soft)}
.allbus summary{cursor:pointer;padding:14px 18px;font-weight:900;font-size:14.5px;list-style:none;display:flex;gap:10px;align-items:center}
.allbus summary::-webkit-details-marker{display:none}
.allbus summary::before{content:"＋";font-family:var(--m);color:var(--spark);font-weight:900}
.allbus[open] summary::before{content:"−"}
.allbus__body{padding:4px 18px 20px;background:var(--white);border-top:2px solid var(--line2)}
.allstop{padding:14px 0;border-bottom:1px dashed var(--line)}
.allstop:last-child{border-bottom:none}
.allstop>b{display:block;font-size:14.5px;font-weight:900;margin-bottom:8px}
.allstop .times{margin-bottom:6px}
.allstop .times b{font-size:13.5px;padding:5px 9px;min-width:0;box-shadow:none}
.gate-t.gz-s{font-size:clamp(20px,3.4vw,30px)}
.gate-t.gz-m{font-size:clamp(26px,5vw,46px)}
.gate-t.gz-l{font-size:clamp(32px,7vw,64px)}

/* --- バスの系統タブ --- */
.busbox__tabs{display:flex;border-bottom:2px solid var(--ink)}
.bustab{flex:1;background:var(--soft);border:none;border-right:2px solid var(--ink);cursor:pointer;
  font-family:var(--g);font-weight:900;font-size:15px;padding:12px 8px;color:var(--ink2);line-height:1.3}
.bustab:last-child{border-right:none}
.bustab small{display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:2px}
.bustab[aria-selected="true"]{background:var(--safety);color:var(--ink)}
.bustab[aria-selected="true"] small{color:var(--ink2)}
.busnext{margin-left:auto;font-family:var(--m);font-size:14px;font-weight:700;background:var(--ink);color:var(--safety);
  border-radius:6px;padding:5px 12px;white-space:nowrap}
.bus-h{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;margin:0 0 12px;flex-wrap:wrap}
.bus-h span{font-size:12.5px;background:var(--ink);color:#fff;border-radius:4px;padding:3px 10px;font-family:var(--g)}
.bub__t{display:block;font-size:16px;font-weight:900;line-height:1.7}
.bub small{display:block;font-weight:500;font-size:14px;color:var(--ink2);margin-top:8px;line-height:1.85}

/* =========================================================
   LAYER 6 ― ホバーの遊びを全面的に戻す
   ========================================================= */
html{scroll-padding-top:150px}

/* --- 見出し・タイトルのグリッチ（ホバー時だけ複製を出す） --- */
.glitch{position:relative;display:inline-block;cursor:default}
.glitch::before,.glitch::after{content:"";position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none;
  -webkit-text-stroke:0;background:none;white-space:nowrap}
.glitch:hover::before{content:attr(data-t);opacity:.9;color:var(--spark);animation:gl1 .28s steps(2) 3}
.glitch:hover::after{content:attr(data-t);opacity:.9;color:#31D0F0;animation:gl2 .28s steps(2) 3}
.fc:hover .fc__n::before{content:attr(data-t);opacity:.9;color:var(--spark);animation:gl1 .28s steps(2) 3}
.fc:hover .fc__n::after{content:attr(data-t);opacity:.9;color:#31D0F0;animation:gl2 .28s steps(2) 3}

/* --- カード：ホバーで持ち上がる（傾きはなし） --- */
.fc{transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s}
.fc:hover{transform:translate(-4px,-6px)}
.fc:hover .fc__ph .ph{transform:scale(1.1)}
.fc__ph .ph{transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* --- ステップ番号がくるっと回る --- */
.step__no{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.step:hover .step__no{transform:rotate(-12deg) scale(1.12)}
.step:hover{box-shadow:9px 9px 0 var(--ink);transform:translate(-3px,-3px)}
.step{transition:transform .2s cubic-bezier(.2,1.6,.4,1),box-shadow .2s}

/* --- マイページ機能：左の黄色いバーが伸びる --- */
.fn__box{transition:transform .2s cubic-bezier(.2,1.6,.4,1),border-color .2s}
.fn__box::before{transition:width .25s cubic-bezier(.2,1.6,.4,1)}
.fn__box:hover{transform:translate(-3px,-3px);border-color:var(--safety)}
.fn__box:hover::before{width:10px}

/* --- チップ：ホバーで少し跳ねる --- */
.chip{transition:transform .16s cubic-bezier(.2,1.8,.4,1),background .18s,box-shadow .18s}
.chip:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:3px 3px 0 var(--ink)}
.chip[aria-pressed="true"]:hover{transform:translateY(-3px) rotate(1.5deg)}

/* --- 時間枠：ホバーで浮いて時刻が跳ねる --- */
.slot__t{display:inline-block;transition:transform .2s cubic-bezier(.2,1.8,.4,1)}
.slot:hover .slot__t{transform:translateY(-2px) scale(1.06)}

/* --- バスの時刻タイル --- */
.times b{transition:transform .16s cubic-bezier(.2,1.8,.4,1),box-shadow .16s}
.times b:hover{transform:translateY(-3px);box-shadow:3px 3px 0 var(--ink);border-color:var(--ink)}

/* --- 表の行がふわっと色づく --- */
.t tbody tr{transition:background .18s}
.t tbody tr:hover{background:#FFFBEB}

/* --- リンク：下線がにょきっと伸びる --- */
.ft a,.crumb a,.faq summary{position:relative}
.ft a::after,.crumb a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--safety);
  transition:width .25s cubic-bezier(.16,1,.3,1)}
.ft a:hover::after,.crumb a:hover::after{width:100%}

/* --- FAQ：開くとQが回る --- */
.faq summary::before{transition:transform .3s cubic-bezier(.2,1.6,.4,1);display:inline-block}
.faq details[open] summary::before{transform:rotate(-14deg) scale(1.2)}
.faq summary:hover{background:#FFFBEB}

/* --- バッジがぷるんと反応 --- */
.st{transition:transform .18s cubic-bezier(.2,1.8,.4,1)}
.fc:hover .st,.slot:hover .st{transform:scale(1.08)}

/* --- タブ：押すと沈む --- */
.tab,.bustab{transition:transform .16s cubic-bezier(.2,1.6,.4,1),background .2s,box-shadow .16s}
.tab:hover,.bustab:hover{transform:translateY(-2px)}
.tab:active,.bustab:active{transform:translateY(1px)}

/* --- 画像プレースホルダ：ホバーで方眼が動く --- */
.ph{transition:background-position .5s ease}
.fc:hover .ph,.bpcard:hover .ph{background-position:8px 8px}

/* --- サイドナビ：ホバーで右にずれる --- */
.side a{transition:transform .18s cubic-bezier(.2,1.6,.4,1),background .18s,border-color .18s}
.side a:hover{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .fc:hover,.step:hover,.fn__box:hover,.chip:hover,.times b:hover,.tab:hover,.bustab:hover,.side a:hover{transform:none!important}
  .glitch:hover::before,.glitch:hover::after,.fc:hover .fc__n::before,.fc:hover .fc__n::after{animation:none!important;opacity:0!important}
}

/* =========================================================
   LAYER 7 ― 全ページに遊びを行き渡らせる
   ========================================================= */

/* --- ボタンは形を完全に統一し、色だけで役割を分ける --- */
.b{border-radius:12px!important}
.b--s{border-radius:9px!important}
.b--full{width:100%}

/* --- ロゴ：ホバーでナットが回る --- */
.hd__logo{display:inline-block;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.hd__logo:hover{transform:translateY(-2px) rotate(-1deg)}
.hd__logo small{transition:letter-spacing .3s}
.hd__logo:hover small{letter-spacing:.22em;color:var(--spark)}

/* --- ページ移動バー：ぷるんと反応 --- */
.pagenav a{transition:transform .16s cubic-bezier(.2,1.8,.4,1),box-shadow .16s,background .18s}
.pagenav a:hover{transform:translateY(-3px);box-shadow:3px 3px 0 var(--ink);background:var(--safety);border-color:var(--ink)}
.pagenav a[aria-current="page"]:hover{background:var(--ink);color:#fff}

/* --- KPI：跳ねて数字が拡大 --- */
.kpi div{transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s}
.kpi div:hover{transform:translate(-3px,-4px);box-shadow:7px 7px 0 var(--ink)}
.kpi b{display:block;transition:transform .22s cubic-bezier(.2,1.8,.4,1)}
.kpi div:hover b{transform:scale(1.08)}

/* --- パネル：枠が黄色く灯る --- */
.panelbox{transition:box-shadow .2s,border-color .2s}
.panelbox:hover{box-shadow:6px 6px 0 rgba(28,38,47,.12)}

/* --- 刻印カード：ホバーでもう一度押される --- */
.press__c b{transition:transform .2s cubic-bezier(.2,1.8,.4,1)}
.press__c:hover b{transform:scale(1.06) rotate(-2deg)}

/* --- スタンプ：くるっと回る --- */
.stamp{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.stamp:hover{transform:rotate(-8deg) scale(1.08)}
.stamp.got:hover{transform:rotate(8deg) scale(1.12)}
.stamp.gift:hover{transform:scale(1.14)}

/* --- QRコード：少し傾いて浮く --- */
.qr{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.qr:hover{transform:rotate(-2deg) scale(1.03)}

/* --- 予定表：行が右にずれて時刻が跳ねる --- */
.plan__item{transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s}
.plan__item:hover{transform:translateX(5px);box-shadow:5px 5px 0 var(--ink)}
.plan__t{display:inline-block;transition:transform .2s cubic-bezier(.2,1.8,.4,1)}
.plan__item:hover .plan__t{transform:scale(1.1)}

/* --- 参加メンバー行 --- */

/* --- ヒートマップ：セルが持ち上がる --- */
.cell{transition:transform .14s cubic-bezier(.2,1.8,.4,1),box-shadow .14s;cursor:pointer}
.cell:hover{transform:scale(1.12);box-shadow:0 0 0 2px var(--ink);position:relative;z-index:3}

/* --- 棒グラフ：伸びて色が変わる --- */
.bar2 i{transition:transform .2s cubic-bezier(.2,1.6,.4,1),filter .2s;transform-origin:bottom}
.bar2:hover i{transform:scaleY(1.06);filter:brightness(1.06)}
.bar2:hover em{color:var(--spark)}
.trend i{transition:transform .16s,background .16s;transform-origin:bottom}
.trend i:hover{transform:scaleY(1.08);background:var(--spark)}

/* --- カルーセル写真：ホバーで少し傾く --- */
.hs__item{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.hs__item:hover{transform:rotate(-1deg) scale(1.02)}

/* --- カードゲームの3枚：ホバーで扇が開く --- */
.fs__cards:hover .fs__card:nth-child(1){transform:rotate(-12deg) translateY(-8px)}
.fs__cards:hover .fs__card:nth-child(2){transform:rotate(0deg) translateY(-16px) scale(1.05)}
.fs__cards:hover .fs__card:nth-child(3){transform:rotate(12deg) translateY(-8px)}
.fs__card{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}

/* --- 写真の帯・アップロード枠 --- */
.shot{transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s}
.shot:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
[data-dummy]{transition:transform .18s,border-color .18s,background .18s}
[data-dummy]:hover{border-color:var(--spark)}

/* --- 読み取り枠：ホバーで枠が脈打つ --- */
.scan__frame{transition:box-shadow .25s}
.scan:hover .scan__frame{box-shadow:0 0 0 6px rgba(255,208,0,.25)}

/* --- 入力欄：フォーカスで黄色く灯る --- */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:4px 4px 0 var(--safety);transform:translate(-1px,-1px)}
input,select,textarea{transition:box-shadow .18s,transform .18s,border-color .18s}

/* --- ステップバー（会員登録）：現在地が跳ねる --- */
.steps-bar div{transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.steps-bar div.on{transform:scale(1.04)}

/* --- 全停留所の見出し：開くと＋が回る --- */
.allbus summary::before{display:inline-block;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.allbus[open] summary::before{transform:rotate(180deg)}
.allbus summary:hover{background:#FFFBEB}

/* --- 予約枠：空きのある枠はホバーで少し弾む --- */
.slot--free:hover,.slot--few:hover{transform:translateY(-4px) rotate(-1deg)}

/* --- ボルト：クリックすると回る --- */
.ai__ch{cursor:pointer}
.ai__ch.spin svg{animation:boltSpin .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes boltSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .kpi div:hover,.plan__item:hover,.member:hover,.cell:hover,.shot:hover,.hs__item:hover,
  .stamp:hover,.qr:hover,.pagenav a:hover,.slot--free:hover,.slot--few:hover,.fs__cards:hover .fs__card{transform:none!important}
}

/* 会社名の下に業種を置く（横並びにしない） */
.chero h1{display:block;width:100%;margin-bottom:14px}
.chero>div>.cat{display:inline-block;margin:0 0 22px}

/* =========================================================
   LAYER 8 ― 見出しは「英字 → タイトル」の縦並び・左寄せ
   ========================================================= */
.sh{text-align:center;margin-bottom:44px}
.sh__en{display:block;width:fit-content;margin:0 0 14px;text-align:left}
.sh h2{display:block;width:100%;margin:0 0 18px;text-align:left}
.sh h2 .fill-head{display:block;width:100%;transform:none}
.is-in .sh h2 .fill-head{transform:none}
.sh p{margin:0 auto;max-width:680px;text-align:center}
.sh--left p{margin-left:0;text-align:left}

/* 見出しのグリッチは、縦並びを崩さないように */
.sh h2.glitch{display:block}
.panelbox__h h2.glitch,.card>h3.glitch,.step h4.glitch,.fn__box h4.glitch,.fc__n.glitch{display:block}
.kpi span.glitch{display:block}



/* --- バスの順路（矢印つき） --- */
.route{position:relative}
.route__ar{font-size:15px;font-weight:900;color:var(--spark);line-height:1;margin:2px 0 2px 6px;letter-spacing:0}
.allstop>b{display:flex;gap:6px;align-items:baseline}
.bus-h__no{font-style:normal;font-family:var(--m);font-size:11.5px;font-weight:700;color:var(--ink3);
  border:1.5px solid var(--line);border-radius:4px;padding:2px 7px}

/* =========================================================
   LAYER 9 ― スマートフォン最適化
   来場者・受付担当のほぼ全員がスマホで開く前提の調整。
   ここより上の指定を打ち消す形で書いているので
   このブロックごと削れば元の見た目に戻ります。
   ========================================================= */

/* ---------------------------------------------------------
   9-0. 土台（全画面共通）
   --------------------------------------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;                 /* 横漏れを止める。hidden と違い sticky を壊さない */
}

/* タップ時の青い箱を消し 代わりに自前の押した感を出す */
a,button,.b,.chip,.tab,.slot,.fc,.side a,.pagenav a,summary{-webkit-tap-highlight-color:transparent}

/* 写真を入れたときに崩れないようにしておく（現在はプレースホルダ） */
.photo,.fc__ph,.reco__ph,.prog__ph,.bpcard__ph,.pv__ph,.hs__item,.sio__photo,
.shot__ph,.chero__img .photo,.pv-gate__photo{overflow:hidden}
.photo>img,.fc__ph>img,.reco__ph>img,.prog__ph>img,.bpcard__ph>img,.pv__ph>img,
.hs__item>img,.sio__photo>img,.shot__ph>img,.ph>img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ph{position:relative}

/* 画面内リンクの着地位置（固定ヘッダーのぶん下げる） */
html{scroll-padding-top:96px}
section[id],div[id]{scroll-margin-top:96px}

/* ---------------------------------------------------------
   9-1. タッチ端末：ホバー演出を無効化して 押した感に置き換える
        （指では hover が残り続けて 触った要素が光ったままになる）
   --------------------------------------------------------- */
@media(hover:none){
  .fc:hover,.bpcard:hover,.kpi div:hover,.plan__item:hover,.hs__item:hover,
  .times b:hover,.shot:hover,.stamp:hover,.qr:hover,.cell:hover,.step:hover,
  .fn__box:hover,.chip:hover,.tab:hover,.bustab:hover,.side a:hover,
  .slot--free:hover,.slot--few:hover,.panelbox:hover,.press__c:hover b,
  .hd__logo:hover,.fs__cards:hover .fs__card{transform:none!important;box-shadow:none!important}
  .pagenav a:hover{transform:none;box-shadow:none;background:var(--white);border-color:var(--line)}
  .pagenav a[aria-current="page"]:hover{background:var(--ink);border-color:var(--ink)}
  .b--key:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
  .bpcard:hover{box-shadow:6px 6px 0 var(--ink)!important}
  .b--ghost:hover::before,.b--ghost:hover::after{width:0;height:0}
  .b:hover .swap i{transform:none}
  .glitch:hover::before,.glitch:hover::after{opacity:0;animation:none}
  input:focus,select:focus,textarea:focus{transform:none}

  /* 押した瞬間だけ沈む */
  .b:active{transform:translate(2px,2px)!important;box-shadow:none!important}
  .fc:active,.bpcard:active,.plan__item:active,.kpi div:active{transform:scale(.985)!important}
  .chip:active,.tab:active,.times b:active,.side a:active,.pagenav a:active{transform:scale(.96)!important}
  .slot .b:active{transform:translate(1px,1px)!important}
}

/* ---------------------------------------------------------
   9-2. ヘッダー・ページ移動バー
   --------------------------------------------------------- */
@media(max-width:768px){
  .mockbar{font-size:11.5px;padding:7px 0;line-height:1.55}
  .mockbar__in{padding:0 14px;gap:8px;flex-wrap:nowrap;align-items:flex-start}
  .mockbar b{flex:none;margin-top:2px}
  .mockbar__in>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .hd__in{padding:8px 14px;gap:10px;flex-wrap:nowrap}
  .hd__logo{font-size:15px;letter-spacing:-.03em;min-width:0}
  .hd__logo small{font-size:8px;letter-spacing:.1em;margin-top:1px}
  .hd__act{gap:6px;flex-wrap:nowrap}
  .hd__act .b--s{padding:0 12px;min-height:40px;font-size:12.5px;white-space:nowrap}
  .me{font-size:11.5px;padding:3px 10px;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
  .hd__stripe{height:5px}

  /* 横スクロールする移動バー。指で流せるように端をぼかす */
  .pagenav{position:relative}
  .pagenav__in{padding:7px 14px;gap:6px;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
  .pagenav__in::-webkit-scrollbar{display:none}
  .pagenav a{scroll-snap-align:start;display:inline-flex;align-items:center;
    min-height:38px;font-size:12.5px;padding:0 13px}
  .pagenav__lbl{font-size:9.5px}
  .pagenav__sep{margin:0 2px}
  .pagenav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,rgba(242,245,248,0),var(--soft))}
}
@media(max-width:400px){
  .hd__logo{font-size:13.5px}
  .hd__logo small{display:none}
  .hd__act .b--s{padding:0 10px;font-size:12px}
}

/* ---------------------------------------------------------
   9-3. セクションの余白・見出し
   --------------------------------------------------------- */
@media(max-width:768px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));
        padding-right:max(16px,env(safe-area-inset-right))}
  .s{padding:52px 0}
  .s--tight{padding:34px 0}
  .sh{margin-bottom:26px}
  .sh h2{font-size:clamp(21px,6.4vw,29px);line-height:1.4;margin-bottom:12px}
  .sh__en{font-size:11px;margin-bottom:10px}
  .sh p{font-size:14.5px;line-height:1.85}
  .card{padding:18px 16px;border-radius:10px;margin-bottom:16px}
  .card>h3{font-size:16px;margin-bottom:14px;padding-bottom:10px;gap:8px}
  .card>h3 small{font-size:11.5px;margin-left:0;flex:1 0 100%}
  .alert{padding:13px 14px;gap:10px;border-radius:10px}
  .alert b{font-size:13.5px}
  .alert p{font-size:12.5px}
  .note{font-size:12px}
}

/* ---------------------------------------------------------
   9-4. カードは2段組み ― 一覧は縦に伸ばさず並べて見せる
   --------------------------------------------------------- */
@media(max-width:768px){
  .list{grid-template-columns:repeat(2,1fr);gap:12px}
  .reco{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
  .fn{grid-template-columns:repeat(2,1fr);gap:12px}
  .near{grid-template-columns:repeat(2,1fr);gap:10px}
  .slots{grid-template-columns:repeat(2,1fr);gap:10px;padding:16px 14px 18px}
  .adm .shots{grid-template-columns:repeat(2,1fr);gap:10px}

  /* --- 工場カード（コンパクト版） --- */
  .fc{border-radius:10px}
  .fc__ph{height:auto;aspect-ratio:4/3}
  .fc__ph span{display:none}
  .fc__b{padding:12px 12px 14px}
  .fc__cat{font-size:10px;margin-bottom:4px;letter-spacing:0}
  .fc__n{font-size:15.5px;line-height:1.35;margin-bottom:6px}
  .fc__desc{font-size:12.5px;line-height:1.7;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fc__stop{font-size:11px;line-height:1.5}
  .pl{margin-top:10px;padding-top:6px;font-size:12px}
  .pl__row{flex-wrap:wrap;gap:3px 6px;padding:6px 0}
  .pl__tag{order:1;width:auto;flex:none;font-size:9.5px;padding:1px 6px;border-radius:3px;
    background:var(--soft);border:1px solid var(--line2);color:var(--ink2)}
  .pl__row .st{order:2;margin-left:auto;font-size:10px;padding:0 6px;border-width:1.5px}
  .pl__name{order:3;flex:1 0 100%;font-size:12.5px;line-height:1.45}
  .pl__more{font-size:11px;padding-top:6px}
  .fc__f{padding-top:10px;font-size:12.5px}

  /* --- おすすめカード --- */
  .reco__c{border-radius:10px}
  .reco__ph{height:auto;aspect-ratio:16/10}
  .reco__b{padding:11px 11px 13px;gap:4px}
  .reco__tag,.reco__co{font-size:10px;padding:0 6px}
  .reco__n{font-size:15px;line-height:1.4}
  .reco__m{font-size:11px;gap:4px;margin-bottom:4px}
  .reco__c .b{font-size:12.5px;padding:0 8px;min-height:40px}

  /* --- 機能ボックス --- */
  .fn__box{padding:16px 14px;border-radius:8px}
  .fn__box h4{font-size:14.5px;margin-bottom:6px}
  .fn__box p{font-size:12.5px;line-height:1.7}
  .fn__box br{display:none}

  /* --- 近くの工場 --- */
  .near a{padding:12px 13px}
  .near b{font-size:13.5px}
  .near span{font-size:11.5px}
}
@media(max-width:340px){
  .list,.reco,.fn{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   9-5. 写真枠 ― 高さ固定をやめて 画面幅に追従させる
   --------------------------------------------------------- */
@media(max-width:768px){
  .ph{background-size:20px 20px;font-size:9.5px;letter-spacing:.1em;text-align:center;padding:0 10px}
  .photo{height:auto;aspect-ratio:4/3}
  .chero__img .photo{height:auto;aspect-ratio:4/3}
  .bpcard__ph{height:auto;aspect-ratio:16/9;border-bottom-width:2px}
  .pv{max-width:none}
  .pv__ph{height:auto;aspect-ratio:16/9}
  .map{height:220px}
  .pin{font-size:10.5px;padding:2px 8px}
  .adm .pv-gate{height:auto;aspect-ratio:16/10}
}

/* ---------------------------------------------------------
   9-6. 入力まわり ― iOS の自動ズームを止め 指で押せる大きさに
   --------------------------------------------------------- */
@media(max-width:768px){
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=time],input[type=password],select,textarea{
    font-size:16px;                /* 16px 未満だと iOS が勝手に拡大する */
    min-height:50px;padding:12px 13px;border-radius:8px}
  textarea{min-height:auto}
  .f{margin-bottom:16px}
  .f>label{font-size:13px}
  .chips{gap:7px}
  .chip{padding:11px 15px;min-height:48px;font-size:13.5px}
  .radio{flex-direction:column;gap:8px}
  .radio label{width:100%;min-height:50px}
  .checks label{font-size:13.5px}
  .switch{padding:13px 0;font-size:13.5px}
  .switch input{width:26px;height:26px}
  .tabs{gap:6px}
  .tab{padding:9px 15px;min-height:44px;font-size:13px}

  /* 選択肢は2列に並べて 親指の届く範囲に収める */
  .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
  .opts .chip{width:100%;padding:11px 6px;font-size:13px;text-align:center;justify-content:center}

  /* 絞り込みバー */
  .filter{padding:12px;gap:8px;border-radius:10px}
  .filter select{flex:1 1 calc(50% - 4px);min-width:0;width:auto}
  .filter input[type=text]{flex:1 1 100%;max-width:none!important}
  .filter .b{flex:1 1 auto}
  .filter__c{margin-left:0;flex:1 1 100%;text-align:center;font-size:13px}

  /* ボタンは指の幅に合わせる */
  .b{padding:12px 18px;min-height:50px;font-size:14px}
  .b--s{padding:0 14px;min-height:42px;font-size:12.5px}
}

/* ---------------------------------------------------------
   9-7. モーダル ― 下から出るシートにする
   --------------------------------------------------------- */
@media(max-width:640px){
  .modal{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-width:100%;
    max-height:88vh;max-height:88dvh;border-radius:16px 16px 0 0;
    border-width:2px 0 0;overscroll-behavior:contain}
  .modal.on{animation:sheetUp .26s cubic-bezier(.2,1,.3,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .mhead{padding:20px 16px 14px;border-radius:14px 14px 0 0;position:sticky}
  .mhead::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
  .mhead b{font-size:15px;line-height:1.4}
  .mhead button{width:44px;height:44px;font-size:26px;flex:none}
  .mbody{padding:18px 16px calc(22px + env(safe-area-inset-bottom))}
  .mbody .t{font-size:13px}
  .mbody .t th,.mbody .t td{padding:9px 8px}
  /* モーダル末尾のボタン列は縦積みの全幅に */
  .mbody>div[style*="flex-wrap:wrap"]>.b{width:100%;flex:1 1 100%}
  .mbody p>.b:only-child{width:100%}
  .scrim{background:rgba(28,38,47,.66)}
}

/* ---------------------------------------------------------
   9-8. 管理画面 ― サイドナビを横並びのタブに
   --------------------------------------------------------- */
@media(max-width:900px){
  .adm{padding:14px 14px calc(28px + env(safe-area-inset-bottom));gap:14px}
  .adm>main{min-width:0}

  .side{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .side::-webkit-scrollbar{display:none}
  .side h4{flex:none;padding:0 2px;font-size:9.5px}
  .side a{flex:none;display:inline-flex;align-items:center;white-space:nowrap;
    border-left:none;border:2px solid var(--line);border-radius:20px;
    padding:0 14px;min-height:40px;font-size:13px;scroll-snap-align:start}
  .side a[aria-current="page"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
  .side .sep{width:2px;height:20px;margin:0 2px;flex:none}

  .panelbox{border-radius:10px;margin-bottom:16px}
  .panelbox__h{padding:14px;gap:8px}
  .panelbox__h h2{font-size:16px}
  .panelbox__h p{font-size:12px;flex:1 0 100%}
  .panelbox__b{padding:16px 14px}
  .panelbox__f{padding:14px}
  /* 見出し右のボタン群は 折り返して全幅に */
  .panelbox__h span[style*="margin-left:auto"]{margin-left:0!important;width:100%;gap:8px!important}
  .panelbox__h span[style*="margin-left:auto"] .b{flex:1 1 auto}

  .kpi{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi div{padding:12px 13px}
  .kpi b{font-size:24px}
  .kpi span{font-size:11px;white-space:normal;line-height:1.4}

  .gen{padding:14px}
  .gen__row{grid-template-columns:1fr;gap:10px}
  .sum{gap:10px 16px;padding:12px 14px;font-size:12.5px}
}

/* ---------------------------------------------------------
   9-9. 表 ― 見出し付きの表はカードに積み替える
        （td の data-l は mock.js が自動で付けます）
   --------------------------------------------------------- */
@media(max-width:768px){
  .t--stack{display:block;font-size:13.5px}
  .t--stack thead{display:none}
  .t--stack tbody{display:block}
  .t--stack tbody tr{display:block;background:var(--white);border:2px solid var(--ink);
    border-radius:10px;padding:10px 13px;margin-bottom:10px}
  .t--stack tbody tr:last-child{margin-bottom:0}
  .t--stack tbody td{display:flex;gap:10px;align-items:flex-start;
    padding:7px 0;border-bottom:1px dotted var(--line2);white-space:normal}
  .t--stack tbody td:last-child{border-bottom:none;padding-bottom:0}
  .t--stack tbody td::before{content:attr(data-l);flex:none;width:6em;padding-top:3px;
    font-family:var(--m);font-size:10.5px;font-weight:900;color:var(--ink3);letter-spacing:.02em}
  .t--stack tbody td[data-l=""]::before{display:none}
  /* 1列目は見出し行として大きく */
  .t--stack tbody td:first-child{font-size:16px;font-weight:900;padding:2px 0 9px;
    border-bottom:2px solid var(--line2);margin-bottom:3px;align-items:baseline}
  .t--stack tbody td:first-child::before{padding-top:4px}
  /* 「該当なし」などの1セル行 */
  .t--stack tbody td[colspan]{display:block;text-align:center;font-size:14px;
    border-bottom:none;padding:12px 0;margin:0}
  .t--stack tbody td[colspan]::before{display:none}
  .t--stack tbody td .b{width:100%}
  /* 値は 1 つの箱にまとめてから並べる。
     直接ぶら下げると span も br も個別の flex 要素になり
     「待機中 6名」のような補足が縦積みになってしまう。 */
  .t--stack tbody td>.t-v{flex:1;min-width:0;line-height:1.7}
  .t--stack tbody td .bar{display:block;width:100%;max-width:220px;margin-top:6px}

  /* 見出しなしの表（項目：値）はそのまま 詰めるだけ */
  .t{font-size:13.5px}
  .t th,.t td{padding:10px 8px}

  /* ヒートマップは横スクロールで見せる（ページ内 <style> に勝つよう .adm を付ける） */
  .adm .heat{font-size:11.5px}
  .adm .heat thead th{font-size:10px;padding:6px 3px}
  .adm .heat tbody th{font-size:11.5px;padding:6px 8px}
  .adm .cell{padding:10px 2px;font-size:11px}
  .adm .bars{height:150px;gap:6px}
  .adm .bar2 small{font-size:9.5px}
}

/* ---------------------------------------------------------
   9-10. マイページ
   --------------------------------------------------------- */
@media(max-width:768px){
  .top{padding:20px 0 18px}
  .top__in{gap:14px}
  .top h1{font-size:20px}
  .top p{font-size:13px}
  .count{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
  .count div{min-width:0;padding:9px 8px}
  .count b{font-size:21px}
  .count span{font-size:10.5px}

  .plan__item{padding:14px;gap:8px 12px;border-radius:10px}
  .plan__t{font-size:18px;width:auto;flex:none}
  .plan__b{flex:1 1 100%;min-width:0}
  .plan__b b{font-size:15px}
  .plan__b span{font-size:12.5px}
  .plan__item>.b{width:100%}
  .plan__move{margin-left:8px;padding:8px 0 8px 16px;font-size:12.5px}

  .qr{width:min(62vw,220px);height:auto;aspect-ratio:1;border-width:6px}
  .qrid{font-size:12px}
  .stamps{grid-template-columns:repeat(4,1fr);gap:8px}
  .stamp{font-size:10px;padding:3px}
}

/* ---------------------------------------------------------
   9-11. 会員登録 ― 5段のステップバーを1行に収める
   --------------------------------------------------------- */
@media(max-width:640px){
  .steps-bar{border-radius:10px;margin-bottom:22px}
  .steps-bar div{flex:0 1 auto;font-size:0;padding:11px 7px;min-width:0;line-height:1.4}
  .steps-bar div b{font-size:10px;letter-spacing:0;white-space:nowrap}
  .steps-bar div.on{flex:1 1 auto;font-size:12px;padding:11px 12px;transform:none}
  .steps-bar div.on b{display:inline;margin-right:7px}
  .steps-bar div.done b::after{content:" ✓";color:var(--ok)}
  .steps-bar div.on b::after{content:none}
}

/* ---------------------------------------------------------
   9-12. TOP ページ
   --------------------------------------------------------- */
@media(max-width:768px){
  .hero__l{padding:30px 0 28px}
  .hero h1{font-size:clamp(23px,7.2vw,34px);line-height:1.4;margin-bottom:14px}
  .hero__p{font-size:14.5px;line-height:1.85;margin-bottom:20px}
  .hero__tag{font-size:12px;padding:3px 12px}
  .hero__facts{margin-bottom:22px}
  .hero__facts div{gap:10px;padding:8px 0;font-size:13px}
  .hero__facts dt{width:4.8em}
  .hero__r{min-height:190px}

  .steps{gap:28px}
  .step{padding:26px 18px 20px}
  .step h4{font-size:16.5px}
  .step p{font-size:13.5px}
  .outline{margin-top:24px}
  .outline table{font-size:13.5px}
  .outline th{width:5.6em;padding:10px 11px;font-size:13px}
  .outline td{padding:10px 11px}

  .news a{flex-direction:column;gap:3px;padding:13px 16px;font-size:13.5px}
  .faq summary{padding:15px 16px;font-size:14px;gap:10px}
  .faq p{padding:0 16px 17px 40px;font-size:13.5px}

  .ai{padding:20px 15px;border-radius:10px}
  .ai__top{margin-bottom:20px}
  .bub{padding:15px 16px;font-size:14px}
  .bub small{font-size:12.5px}

  .fs{border-radius:10px}
  .fs__cards{gap:8px}
}

/* ---------------------------------------------------------
   9-13. 企業ページ
   --------------------------------------------------------- */
@media(max-width:768px){
  .crumb{font-size:12px;padding-top:16px}
  .chero{gap:18px;padding-top:16px}
  .chero h1{font-size:clamp(24px,7.4vw,34px);margin:12px 0 14px}
  .chero>div>.cat{margin-bottom:16px}
  .facts div{font-size:13.5px}
  .facts dt{width:6.4em;padding:9px 11px;font-size:12px}
  .facts dd{padding:9px 11px}

  .bp{border-radius:10px}
  .bp__l{padding:22px 18px}
  .bp__l h3{font-size:18px}
  .bp__l p{font-size:13.5px}
  .bp__r{padding:16px}
  .bpcard__b{padding:16px 16px 18px}
  .bpcard__b h4{font-size:18px}
  .bpcard__b p{font-size:13px}

  .prog{border-radius:10px}
  .prog__head{padding:14px;gap:12px}
  .prog__ph{width:100%;height:auto;aspect-ratio:16/9;flex:1 1 100%}
  .prog__b{min-width:0;flex:1 1 100%}
  .prog__b h3{font-size:17px}
  .prog__b p{font-size:13.5px}
  .meta{gap:6px;margin-top:11px}
  .tag{font-size:11px;padding:1px 8px}
  .slot{padding:11px 10px}
  .slot__t{font-size:18px}
  .slot__l{font-size:11px}
  .slot .b{min-height:44px;font-size:12.5px}
  .walkin{padding:16px 14px 20px;font-size:13.5px}
  .notes{padding:18px 16px}
  .notes h3{font-size:15.5px}
  .notes ul{padding-left:18px;font-size:13.5px}

  /* 観音開きは残しつつ 高さを詰める */
  .sio{height:150vh}
  .sio__sticky{height:100svh}
  .sio__behind b{font-size:clamp(21px,6.6vw,32px)}
  .sio__behind span{font-size:13px}
}

/* 横に流れる写真帯 → 指で送れるカルーセルに置き換える
   （JS 側の translateX は打ち消す） */
@media(max-width:900px){
  .hs{height:auto}
  .hs__sticky{position:static;height:auto;padding:6px 0 2px;display:block;
    overflow:visible;background:transparent}
  .hs__track{transform:none!important;overflow-x:auto;padding:4px 16px 16px;gap:12px;
    scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain}
  .hs__track::-webkit-scrollbar{display:none}
  .hs__item{flex:0 0 78vw;max-width:none;height:auto;aspect-ratio:4/3;
    scroll-snap-align:center}
}

/* ---------------------------------------------------------
   9-14. シャトルバス
   --------------------------------------------------------- */
@media(max-width:768px){
  .busnow{padding:15px 16px;border-radius:10px}
  .busnow__t{font-size:32px}
  .busnow__sub{font-size:12.5px}
  .busnow__lbl{font-size:11.5px}
  .busnow__row{font-size:12.5px;gap:8px}
  .busbox{border-radius:10px}
  .busbox__head{padding:13px 14px;gap:8px}
  .busbox__head select{max-width:none;width:100%}
  .busbox__body{padding:14px}
  .busbox__tabs{overflow-x:auto;scrollbar-width:none}
  .busbox__tabs::-webkit-scrollbar{display:none}
  .bustab{white-space:nowrap;flex:1 0 auto;min-height:46px}
  /* 時刻は等間隔のグリッドにして 押し間違いを減らす */
  .times{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .times b{font-size:14px;padding:9px 4px;text-align:center;border-radius:8px}
  .allbus summary{padding:14px;font-size:13.5px}
  .allbus__body{padding:4px 12px 16px}
}
@media(max-width:360px){
  .times{grid-template-columns:repeat(3,1fr)}
}

/* ---------------------------------------------------------
   9-15. 当日チェックイン（受付担当のスマホ専用画面）
   --------------------------------------------------------- */
@media(max-width:768px){
  .scan{padding:18px 14px;border-radius:10px}
  .scan__frame{width:min(74vw,280px);height:min(74vw,280px);margin-bottom:16px}
  .scan__line{animation-name:scanM}
  @keyframes scanM{0%,100%{top:8%}50%{top:92%}}
  .scan .b{width:100%}
}

/* ---------------------------------------------------------
   9-16. 通知・フッター・下端の安全領域
   --------------------------------------------------------- */
@media(max-width:640px){
  .toast{left:14px;right:14px;max-width:none;
    bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translateY(220%);padding:13px 18px;font-size:13.5px}
  .toast.on{transform:none}
}
@media(max-width:768px){
  .ft{padding:36px 0 calc(30px + env(safe-area-inset-bottom));font-size:13px}
  .ft__g{gap:20px;margin-bottom:26px}
  .ft h4{font-size:10px;margin-bottom:9px}
}

/* ---------------------------------------------------------
   9-17. 演出の負荷を下げる（スマホは描画コストが響く）
   --------------------------------------------------------- */
@media(max-width:768px){
  .grain,.cursor,.scrollcue{display:none!important}
  .s--i::before{display:none}
  .hs__item::after{opacity:.6}
}

/* =========================================================
   LAYER 10 ― オープニング（シャッター → タイトルコール）
   シャッターが巻き上がると黒い画面が現れ タイトルが出て
   そのままフェードアウトして本編に入る。
   ========================================================= */
.opening{position:fixed;inset:0;z-index:196;background:#000;pointer-events:none;
  display:grid;place-items:center;text-align:center;padding:0 24px}
.opening__t{opacity:0}
/* letter-spacing の余白は最後の文字の後ろにも付くので
   同じ幅を text-indent で戻して 見た目の中央を合わせる */
.opening__t b{display:block;font-family:var(--m);font-weight:700;color:#fff;
  font-size:clamp(16px,5vw,42px);letter-spacing:.2em;text-indent:.2em;line-height:1.35}
.opening__t i{display:block;font-style:normal;font-family:var(--m);font-weight:700;color:#fff;
  font-size:clamp(30px,9.2vw,72px);letter-spacing:.14em;text-indent:.14em;line-height:1.1;margin-top:10px}
.opening__t u{display:block;width:0;height:2px;background:var(--safety);margin:20px auto 0;text-decoration:none}
.opening.show .opening__t{animation:titleIn .9s cubic-bezier(.16,1,.3,1) forwards}
.opening.show .opening__t u{animation:titleRule .8s cubic-bezier(.16,1,.3,1) .4s forwards}
@keyframes titleIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes titleRule{to{width:min(220px,46vw)}}
.opening.out{animation:openingOut .75s ease forwards}
@keyframes openingOut{to{opacity:0}}

/* シャッター側の文言が長くなったぶん 小さい画面では文字を落とす */
/* シャッター1枚目は この一文だけ。英字の行は置かない */
.shutter__txt b{margin-top:0}
@media(max-width:520px){
  .shutter__txt b{font-size:17px;line-height:1.6}
  .shutter__bar{width:150px;margin-top:20px}
}
@media(max-width:360px){
  .shutter__txt b{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){.opening{display:none!important}}

/* =========================================================
   10. 2026年9月 参加企業コメントを受けた修正
   ========================================================= */

/* ---------- 公開ページのグローバルナビ ---------- */
.gnav{background:var(--ink);border-bottom:2px solid var(--ink)}
.gnav__in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:4px}
.gnav a{color:#fff;text-decoration:none;font-weight:900;font-size:14px;padding:11px 14px;border-bottom:4px solid transparent}
.gnav a:hover,.gnav a:focus-visible{border-bottom-color:var(--safety)}
@media(max-width:640px){
  .gnav__in{padding:0 6px;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
  .gnav a{font-size:11.5px;padding:10px 2px;text-align:center;line-height:1.35;letter-spacing:-.03em}
}

/* ---------- バス：予定であることの表示 ---------- */
.plan-tag{font-size:10.5px;border:1px solid #6F8699;border-radius:3px;padding:0 6px;color:#CBDCE8;font-weight:700}

/* ---------- 企業ページの扉：自動で開く ---------- */
.sio{height:min(78vh,680px);height:min(78svh,680px)}
.sio__sticky{position:relative;height:100%}
.sio.is-open .sio__half--l{animation:gateL 2.1s linear forwards}
.sio.is-open .sio__half--r{animation:gateR 2.1s linear forwards}
.sio.is-done .sio__half{animation:none;visibility:hidden}
/* 引っかかって止まり 少し戻り また動く */
@keyframes gateL{
  0%{transform:translateX(0)}
  8%{transform:translateX(-4%) translateY(1px)}
  14%{transform:translateX(-3.4%)}
  22%{transform:translateX(-3.4%) translateY(-1px)}
  34%{transform:translateX(-19%)}
  40%{transform:translateX(-17.5%) translateY(1px)}
  50%{transform:translateX(-17.5%)}
  66%{transform:translateX(-52%)}
  71%{transform:translateX(-50%) translateY(-1px)}
  78%{transform:translateX(-50%)}
  100%{transform:translateX(-103%)}}
@keyframes gateR{
  0%{transform:translateX(0)}
  8%{transform:translateX(4%) translateY(-1px)}
  14%{transform:translateX(3.4%)}
  22%{transform:translateX(3.4%) translateY(1px)}
  34%{transform:translateX(19%)}
  40%{transform:translateX(17.5%) translateY(-1px)}
  50%{transform:translateX(17.5%)}
  66%{transform:translateX(52%)}
  71%{transform:translateX(50%) translateY(1px)}
  78%{transform:translateX(50%)}
  100%{transform:translateX(103%)}}
@media(max-width:768px){.sio{height:62svh}}

/* トップのシャッターも同じく ぎこちなく巻き上がる */
.shutter.go{animation:rollUpGigi 1.25s linear forwards}
@keyframes rollUpGigi{
  0%{transform:scaleY(1)}
  12%{transform:scaleY(.95)}
  20%{transform:scaleY(.96)}
  30%{transform:scaleY(.96)}
  48%{transform:scaleY(.7)}
  56%{transform:scaleY(.72)}
  64%{transform:scaleY(.72)}
  100%{transform:scaleY(0)}}

/* ---------- トップのヒーロー（写真が主役） ---------- */
.hero--photo{min-height:min(70vh,640px);min-height:min(70svh,640px);display:flex;align-items:flex-end;background:#16283a}
.hero--photo::before{display:none}
.hero__photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--m);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.3);background:#20384d;background-size:cover;background-position:center}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,36,0) 30%,rgba(14,26,36,.82) 100%)}
.hero__body{position:relative;z-index:1;max-width:1080px;width:100%;margin:0 auto;padding:40px 20px 44px}
.hero__date{display:inline-block;background:var(--safety);color:var(--ink);font-weight:900;font-size:clamp(15px,2vw,19px);
  padding:6px 14px;border:2px solid var(--ink);border-radius:4px;margin-bottom:16px}
.hero__title{font-size:clamp(44px,9.2vw,112px);font-weight:900;line-height:1.02;letter-spacing:-.045em;margin:0;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero__title span{display:block}
.hero__year{display:inline-block;font-family:var(--m);font-size:.34em;letter-spacing:.02em;vertical-align:middle;
  background:#fff;color:var(--ink);border-radius:4px;padding:0 .28em;margin-left:.2em;text-shadow:none}
.hero__catch{font-size:clamp(16px,2.2vw,22px);font-weight:900;margin:18px 0 0;color:#fff}
.hero__meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;padding:0;list-style:none;color:#D5E1EA;font-weight:700;font-size:14.5px}
.hero--photo + .tiger{margin-top:0}

/* ---------- ヒーロー直下の入口 ---------- */
.entry{background:var(--white);border-bottom:2px solid var(--ink)}
.entry__in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.entry a{display:flex;flex-direction:column;gap:2px;padding:18px 20px;text-decoration:none;border-right:2px solid var(--ink)}
.entry a:first-child{border-left:2px solid var(--ink)}
.entry a:hover,.entry a:focus-visible{background:var(--safety)}
.entry b{font-size:17px;font-weight:900}
.entry span{font-size:13px;color:var(--ink2);font-weight:700;line-height:1.5}
@media(max-width:820px){
  .entry__in{grid-template-columns:1fr 1fr}
  .entry a{border-left:none!important;border-right:none;border-bottom:2px solid var(--ink)}
  .entry a:nth-child(odd){border-right:2px solid var(--ink)}
  .entry a:nth-last-child(-n+2){border-bottom:none}
  .entry b{font-size:15.5px}
}

/* ---------- 工場マップ（タップで各社ページへ） ---------- */
a.pin{text-decoration:none;cursor:pointer}
a.pin:hover,a.pin:focus-visible{background:var(--safety);z-index:2}
.map--factories{height:320px;margin-bottom:28px}
@media(max-width:600px){.map--factories{height:260px}.map--factories .pin{font-size:10.5px;padding:2px 6px}}

/* 工場カード：体験のタイトルを全部並べる */
.pl__type{font-size:11px;font-weight:900;color:var(--ink3);margin:10px 0 2px}
.pl__type:first-child{margin-top:0}

/* ---------- バス：乗る場所と降りる場所で調べる ---------- */
.od{background:var(--white);border:2px solid var(--ink);border-radius:10px;padding:22px;margin-bottom:22px}
.od__row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.od__row .f{margin:0}
.od__swap{min-height:46px;min-width:46px;border:2px solid var(--ink);background:var(--white);border-radius:8px;font-weight:900;cursor:pointer;font-size:16px}
.od__swap:hover{background:var(--safety)}
.od__res{margin-top:18px}
.od__head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-bottom:10px}
.od__head b{font-size:16px}
.trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.trip{border:2px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--soft)}
.trip__tm{font-family:var(--m);font-size:19px;font-weight:700;letter-spacing:-.02em}
.trip__tm small{font-size:13px;color:var(--ink2)}
.trip__sub{display:block;font-size:12px;color:var(--ink2);font-weight:700}
.trip--early{border-color:var(--ink);background:var(--white)}
@media(max-width:600px){
  .od{padding:16px}
  .od__row{grid-template-columns:1fr;gap:8px}
  .od__swap{justify-self:center;transform:rotate(90deg)}
  .trips{grid-template-columns:1fr 1fr}
  .trip__tm{font-size:16px}
}
.bus-sub{font-size:16px;font-weight:900;margin:26px 0 10px}

/* ---------- トレカ大会の詳細 ---------- */
.cg-table{max-width:620px;margin:0 auto 24px;text-align:left}

/* ---------- チーム（別行動） ---------- */
.teambar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0 0}
.teambar__lbl{font-size:13px;font-weight:900;color:var(--ink2);margin-right:4px}
.tchip{border:2px solid var(--line);background:var(--white);border-radius:30px;padding:7px 14px;font-weight:900;font-size:13.5px;cursor:pointer;font-family:inherit;color:var(--ink2)}
.tchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ttag{display:inline-block;font-size:11.5px;font-weight:900;border:2px solid var(--ink);border-radius:4px;padding:0 7px;background:var(--safety);color:var(--ink);white-space:nowrap}
.ttag--all{background:var(--white)}
.team-edit{display:grid;gap:10px;margin:0 0 16px}
.team-row{display:grid;grid-template-columns:1fr 110px 40px;gap:8px;align-items:center}
.team-row input,.team-row select{margin:0}
.team-row button{min-height:44px;border:2px solid var(--line);border-radius:8px;background:var(--white);cursor:pointer;font-weight:900}
.sum-ok{color:var(--ok);font-weight:900}
.sum-ng{color:var(--spark);font-weight:900}
.people{display:grid;gap:8px}
.people__row{display:grid;grid-template-columns:5.5em 1fr 1fr;gap:8px;align-items:center;font-size:13.5px;font-weight:700}
.people__row select{margin:0}
.clash{border:2px solid var(--spark);background:#FFF4F0;border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:13.5px}
.clash b{color:var(--spark)}

/* ---------- スタンプ：各社のロゴが入る ---------- */
.stamp__logo{display:block;font-family:var(--m);font-size:9px;letter-spacing:.1em;opacity:.55;margin-bottom:2px}
.stamp{flex-direction:column;text-align:center;line-height:1.25}

/* ---------- 当日チェックイン：次にすることを大きく出す ---------- */
.ck{max-width:640px}
.ck-now{background:var(--ink);color:#fff;border-radius:10px;padding:18px 20px;margin-bottom:14px;border:2px solid var(--ink)}
.ck-now small{display:block;font-size:12px;color:#B4C7D6;font-weight:900}
.ck-now b{display:block;font-size:22px;line-height:1.45;margin-top:4px}
.ck-now p{margin:6px 0 0;color:#D5E1EA;font-size:14px}
.ck-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ck-choice button{min-height:92px;border:2px solid var(--ink);border-radius:10px;background:var(--white);font-family:inherit;
  font-size:17px;font-weight:900;cursor:pointer;padding:10px;line-height:1.4;color:var(--ink)}
.ck-choice button small{display:block;font-size:12px;color:var(--ink2);font-weight:700;margin-top:2px}
.ck-choice button.key{background:var(--safety)}
.ck-back{background:none;border:none;font-weight:900;color:var(--ink2);text-decoration:underline;cursor:pointer;font-size:14px;padding:6px 0;font-family:inherit}
.ck-hit{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--white);margin-bottom:8px}
.ck-hit b{font-size:16px}
.ck-hit .note{display:block}
.ck-hit button{margin-left:auto;flex:none}
.ck-count{display:flex;gap:10px;align-items:center;margin:8px 0 16px}
.ck-count button{width:54px;height:54px;border:2px solid var(--ink);border-radius:10px;background:var(--white);font-size:24px;font-weight:900;cursor:pointer}
.ck-count output{font-family:var(--m);font-size:34px;font-weight:700;min-width:2.2em;text-align:center}
.practice{border:3px solid var(--ink);border-radius:10px;padding:14px 16px;margin-bottom:16px;
  background:repeating-linear-gradient(45deg,#FFF6CC 0 14px,#fff 14px 28px)}
.practice b{font-size:15px}
.switch{display:inline-flex;align-items:center;gap:10px;font-weight:900;cursor:pointer}
.switch input{width:22px;height:22px;accent-color:var(--ink)}
@media(max-width:600px){.ck-choice{grid-template-columns:1fr}.ck-choice button{min-height:74px}}

@media(max-width:640px){
  .hero--photo{min-height:62svh}
  .hero__body{padding:28px 18px 28px}
  .hero__meta{font-size:13px;gap:2px 14px}
  .hero__catch{margin-top:12px}
  .gnav a+a{border-left:1px solid #3A4C5C}
}
.pin--park{background:var(--soft);color:var(--ink2);border-style:dashed}
.od__swap svg{width:20px;height:20px;margin:0 auto}
.gate-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;color:#fff;font-weight:900;font-size:13px;
  display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity .4s}
.sio.is-done .gate-cue{opacity:.85}
.gate-cue i{width:2px;height:22px;background:var(--safety)}

/* =========================================================
   11. 見せ方の追加（フジロック公式の手法を工場向けに）
   ========================================================= */
:root{--steel:#2E5BB4;--steel2:#1F3F86;--sand:#E7D5B2}

/* ---------- ヘッダー：ロゴ枠・ピル型ナビ・キャラ付きボタン ---------- */
.hd__pill{display:none}
@media(min-width:960px){
  .hd__pill{display:flex;align-items:center;margin:0 auto;border:2.5px solid var(--ink);border-radius:40px;padding:4px 10px;background:var(--white)}
  .hd__pill a{text-decoration:none;font-weight:900;font-size:14px;padding:6px 12px;border-radius:20px;position:relative}
  .hd__pill a+a::before{content:"";position:absolute;left:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--spark);transform:translateY(-50%)}
  .hd__pill a:hover,.hd__pill a:focus-visible{background:var(--safety)}
  .gnav{display:none}
  .hd__act{margin-left:0}
}
.hd__cta{position:relative;padding-right:40px!important}
.hd__cta .bolt-mini{position:absolute;right:-10px;top:-14px;width:40px;height:40px;transform:rotate(12deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hd__cta:hover .bolt-mini{transform:rotate(-8deg) translateY(-4px)}

/* ---------- 開場演出：稜線が層ごとに立ち上がり タイトルが弾む ---------- */
.opening--town{background:var(--paper)}
.opening--town .sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:46vh}
.sky__b{fill:var(--steel)}
.sky__m{fill:var(--steel2)}
.sky__f{fill:var(--ink)}
.opening--town .sky path{transform:translateY(100%);transform-box:fill-box}
.opening--town.show .sky__b{animation:skyUp .7s cubic-bezier(.34,1.4,.64,1) forwards}
.opening--town.show .sky__m{animation:skyUp .7s cubic-bezier(.34,1.4,.64,1) .18s forwards}
.opening--town.show .sky__f{animation:skyUp .7s cubic-bezier(.34,1.4,.64,1) .34s forwards}
@keyframes skyUp{to{transform:translateY(0)}}
.opening__plate{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.2) rotate(-8deg);opacity:0;
  background:var(--white);border:4px solid var(--ink);border-radius:28px;padding:22px 34px;text-align:center;box-shadow:8px 8px 0 var(--ink)}
.opening__plate small{display:block;font-family:var(--m);font-weight:700;color:var(--spark);font-size:14px;letter-spacing:.08em}
.opening__plate b{display:block;font-size:clamp(28px,5vw,52px);line-height:1.12;font-weight:900;letter-spacing:-.04em;margin-top:6px}
.opening--town.show .opening__plate{animation:platePop .7s cubic-bezier(.34,1.56,.64,1) .75s forwards}
@keyframes platePop{to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}}

/* ---------- ヒーロー：写真の下端に稜線が重なる ---------- */
.hero--photo{padding-bottom:0}
.hero--photo .sky{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(60px,11vw,140px);z-index:1}
.hero--photo .sky__f{fill:var(--paper)}
.hero__body{padding-bottom:clamp(70px,11vw,150px)}
.hero__plate{display:inline-block;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:22px;
  padding:14px 26px 18px;box-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg);margin-top:4px}
.hero__plate .hero__title{color:var(--ink);text-shadow:none;font-size:clamp(38px,7.2vw,92px)}
.hero__plate .hero__year{background:var(--spark);color:#fff}
.hero__catch{text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(max-width:640px){.hero__plate{padding:10px 16px 12px;border-radius:16px;box-shadow:4px 4px 0 var(--ink)}}

/* ---------- 弾む出現 ---------- */
[data-pop]{opacity:0;transform:translateY(26px) scale(.94)}
[data-pop].popped{opacity:1;transform:none;transition:opacity .35s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
[data-pop="rot"]{transform:translateY(20px) rotate(-10deg) scale(.8)}
[data-pop="rot"].popped{transform:rotate(-5deg)}

/* ---------- ふきだしのタグ ---------- */
.bubble{display:inline-block;position:relative;background:var(--spark);color:#fff;font-weight:900;font-size:clamp(15px,1.8vw,19px);
  padding:12px 22px;border:3px solid var(--ink);border-radius:6px;transform:rotate(-5deg);margin-bottom:14px}
.bubble::after{content:"";position:absolute;left:28px;bottom:-14px;width:18px;height:18px;background:var(--spark);
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.bubble--y{background:var(--safety);color:var(--ink)}
.bubble--y::after{background:var(--safety)}

/* ---------- 背景の大きな薄い英字 ---------- */
[data-ghost]{position:relative;isolation:isolate}
[data-ghost]::before{content:attr(data-ghost);position:absolute;left:50%;top:-.05em;transform:translateX(-50%);z-index:-1;
  font-family:var(--m);font-weight:700;font-size:clamp(64px,15vw,210px);line-height:1;letter-spacing:-.04em;white-space:nowrap;
  color:rgba(28,38,47,.055);pointer-events:none}
.s--i[data-ghost]::before,.s--steel[data-ghost]::before{color:rgba(255,255,255,.08)}

/* ---------- 写真を横に並べ 下を稜線で区切る ---------- */
.pstrip{position:relative;padding:40px 0 0;overflow:hidden;background:var(--paper)}
.pstrip__row{display:grid;grid-template-columns:.8fr 1.2fr 1fr 1.1fr .9fr;gap:14px;padding:0 0 0;align-items:end}
.pstrip__ph{border-radius:16px;border:2.5px solid var(--ink);min-height:260px;display:flex;align-items:center;justify-content:center;
  font-family:var(--m);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55);background:#3A5570;background-size:cover;background-position:center}
.pstrip__ph:nth-child(2){min-height:320px;background-color:#46627d}
.pstrip__ph:nth-child(3){min-height:290px;background-color:#2f4861}
.pstrip__ph:nth-child(4){min-height:340px;background-color:#506c86}
.pstrip__ph:first-child{border-left:none;border-radius:0 16px 16px 0}
.pstrip__ph:last-child{border-right:none;border-radius:16px 0 0 16px}
.pstrip .sky{display:block;width:100%;height:clamp(70px,10vw,130px);margin-top:-60px;position:relative;z-index:1}
.pstrip .sky__f{fill:var(--white)}
@media(max-width:760px){
  .pstrip__row{grid-template-columns:repeat(5,70vw);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
  .pstrip__row::-webkit-scrollbar{display:none}
  .pstrip__ph{scroll-snap-align:center;min-height:220px!important;border:2.5px solid var(--ink)!important;border-radius:14px!important}
  .pstrip .sky{margin-top:-30px}
}

/* ---------- セクションの色面と稜線の区切り ---------- */
.s--steel{background:var(--steel);color:#fff}
.s--steel .sh h2,.s--steel .sh p{color:#fff}
.s--steel .sh__en{color:var(--safety);border-color:var(--safety)}
.s--sand{background:var(--sand)}
.divider{display:block;line-height:0;position:relative;z-index:1}
.divider .sky{display:block;width:100%;height:clamp(50px,8vw,110px)}
.divider--to-steel{background:var(--paper)}
.divider--to-steel .sky__b{fill:#8FA9D9}.divider--to-steel .sky__m{fill:#5F82C7}.divider--to-steel .sky__f{fill:var(--steel)}
.divider--to-sand{background:var(--white)}
.divider--to-sand .sky__b{fill:#F1E6D0}.divider--to-sand .sky__m{fill:#EBDDC0}.divider--to-sand .sky__f{fill:var(--sand)}
.divider--to-paper{background:var(--steel)}
.divider--to-paper .sky__b{fill:#5F82C7}.divider--to-paper .sky__m{fill:#C7D3EA}.divider--to-paper .sky__f{fill:var(--paper)}
.s--steel .outline{color:var(--ink)}
.s--steel .note{color:#DCE6F6}
.s--sand.s--w{border:none}

/* ---------- ポイント：ふきだし型の吹き出しとチェックの印 ---------- */
.fn__box{position:relative}
.fn__box::before{content:"";position:absolute;left:-12px;top:-14px;width:34px;height:34px;z-index:2;
  background:var(--spark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  clip-path:polygon(50% 0,61% 12%,76% 7%,80% 22%,95% 25%,90% 40%,100% 50%,90% 60%,95% 75%,80% 78%,76% 93%,61% 88%,50% 100%,39% 88%,24% 93%,20% 78%,5% 75%,10% 60%,0 50%,10% 40%,5% 25%,20% 22%,24% 7%,39% 12%)}

/* ---------- よくある質問：太枠の丸いカードと＋ボタン ---------- */
.faq{border:3px solid var(--ink);border-radius:28px;padding:10px 26px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{padding:22px 54px 22px 0;position:relative;font-size:16px}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:36px;height:36px;margin-top:-18px;border:2.5px solid var(--ink);border-radius:50%;
  background:linear-gradient(var(--ink),var(--ink)) center/14px 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 14px no-repeat;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--safety)}
.faq summary:hover{background:transparent}
.faq summary:hover::after{background-color:var(--safety)}
.faq p{padding:0 54px 22px 30px}
@media(max-width:600px){.faq{padding:4px 16px;border-radius:20px}.faq summary{font-size:14.5px}}

/* ---------- 下のバー：シャトルバスが進む ---------- */
body.has-way{padding-bottom:60px}
.way{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white);border-top:2.5px solid var(--ink);height:56px}
.way__in{max-width:1080px;margin:0 auto;height:100%;padding:0 150px 0 40px;display:flex;align-items:center}
.way__track{position:relative;flex:1;height:8px;border-radius:6px;background:var(--line2);margin-top:14px}
.way__fill{position:absolute;left:0;top:0;bottom:0;background:var(--spark);border-radius:6px}
.way__tick{position:absolute;top:-10px;width:2px;height:8px;background:var(--line);transform:translateX(-1px)}
.way__tick.on{background:var(--spark)}
.way__bus{position:absolute;top:-24px;width:52px;transform:translateX(-50%);transition:left .12s linear}
.way__bus svg{width:52px;height:28px;display:block;animation:busBob .5s ease-in-out infinite alternate}
@keyframes busBob{to{transform:translateY(-2px)}}
.way__lbl{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-weight:900;font-size:12.5px;
  background:var(--safety);border:2px solid var(--ink);border-radius:6px;padding:1px 10px}
.way__lbl::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;background:var(--safety);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.way__lbl.bump{animation:lblBump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes lblBump{0%{transform:translateX(-50%) scale(.6)}100%{transform:translateX(-50%) scale(1)}}
@media(max-width:640px){
  body.has-way{padding-bottom:50px}
  .way{height:48px}.way__in{padding:0 96px 0 26px}
  .way__bus,.way__bus svg{width:42px}.way__bus svg{height:23px}.way__bus{top:-20px}
  .way__lbl{font-size:11px;bottom:28px}
}

/* ---------- 右下に浮かぶ丸い予約ボタン ---------- */
.fbadge{position:fixed;right:18px;bottom:22px;z-index:75;width:132px;height:132px;border-radius:50%;background:var(--white);border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);display:flex;align-items:center;justify-content:center;text-decoration:none;
  transform:scale(0) rotate(-40deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.fbadge.on{transform:none}
.fbadge:hover{background:var(--safety)}
.fbadge__ring{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);animation:ring 18s linear infinite}
.fbadge__ring text{font-family:var(--m);font-weight:700;font-size:10px;letter-spacing:.14em;fill:var(--ink)}
@keyframes ring{to{transform:rotate(360deg)}}
.fbadge__t{text-align:center;line-height:1.1}
.fbadge__t b{display:block;font-size:26px;font-weight:900}
.fbadge__t small{display:block;font-size:10.5px;font-weight:900;color:var(--spark);margin-top:3px}
body.has-way .fbadge{bottom:28px}
@media(max-width:640px){.fbadge{width:92px;height:92px;right:10px;box-shadow:3px 3px 0 var(--ink)}.fbadge__t b{font-size:19px}.fbadge__ring text{font-size:12px}
  body.has-way .fbadge{bottom:18px}}

@media(prefers-reduced-motion:reduce){
  [data-pop]{opacity:1!important;transform:none!important}
  .fbadge__ring,.way__bus svg{animation:none}
}
.divider--steel-to-sand{background:var(--steel)}
.divider--steel-to-sand .sky__b{fill:#8FA9D9}.divider--steel-to-sand .sky__m{fill:#C9B891}.divider--steel-to-sand .sky__f{fill:var(--sand)}
.divider--sand-to-paper{background:var(--sand)}
.divider--sand-to-paper .sky__b{fill:#D8C39C}.divider--sand-to-paper .sky__m{fill:#EFE6D6}.divider--sand-to-paper .sky__f{fill:var(--paper)}
.s--steel{border:none}
.s--steel .fs__card{background:var(--white);color:var(--ink)}
.s--steel p{color:#fff}
.s--steel .outline td,.s--steel .outline th{color:var(--ink)}
.s--steel .b--light{background:var(--white)}
.sh .bubble{margin-bottom:18px}
.sh .bubble{display:table;margin:0 0 18px}
.sh:not(.sh--left) .bubble{margin-left:0}
.hero--photo .sky__f{fill:var(--white)}
.pstrip + .s--w{border-top:none}
@media(max-width:640px){
  .hero__plate .hero__title{font-size:8.2vw;letter-spacing:-.05em}
  .fbadge{width:76px;height:76px}.fbadge__t b{font-size:16px}.fbadge__t small{font-size:8.5px}.fbadge__ring text{font-size:13px}
  .bubble{font-size:14px;padding:8px 14px}
}

/* ---------- ヒーロー：イラスト（工場の丘・歯車の太陽・雲の吹き出し） ---------- */
.hero--art{position:relative;min-height:min(86vh,780px);min-height:min(86svh,780px);display:flex;align-items:flex-start;justify-content:center;background:#F3EEE4;overflow:hidden;padding:0}
.hero--art::before{display:none}
.hart{position:absolute;inset:0;width:100%;height:100%}
.hero__body--art{position:relative;z-index:2;text-align:center;padding:clamp(28px,5vw,60px) 20px 0;max-width:980px}
.hero__body--art .hero__date{margin-bottom:6px}
.hero__cloud{position:relative;display:inline-block;padding:clamp(40px,6vw,70px) clamp(46px,8vw,110px) clamp(46px,6.5vw,76px);margin-top:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 340' preserveAspectRatio='none'%3E%3Cpath d='M92 120 C70 50 170 20 220 60 C250 10 350 10 380 58 C430 18 530 40 520 110 C590 130 590 230 520 250 C540 310 450 330 400 300 C360 340 260 340 220 305 C170 335 80 320 90 262 C20 250 10 150 92 120Z' fill='%23fff' stroke='%231C262F' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform:rotate(-2.5deg);filter:drop-shadow(6px 7px 0 rgba(28,38,47,.9))}
.hero__cloud small{display:block;font-family:var(--m);font-weight:700;font-size:clamp(11px,1.3vw,14px);letter-spacing:.18em;color:var(--steel,#2E5BB4)}
.hero__cloud .hero__title{color:var(--ink);text-shadow:none;font-size:clamp(34px,6.6vw,86px);line-height:1.02;margin:4px 0 0}
.hero__cloud .hero__title span:first-child{color:var(--spark)}
.hero__cloud .hero__year{background:var(--steel,#2E5BB4);color:#fff}
.hero--art .hero__catch{color:var(--ink);text-shadow:none;font-size:clamp(16px,2vw,21px);margin-top:14px}
.hero--art .hero__meta{justify-content:center;color:var(--ink2)}
.hero--art .hero__meta li{background:rgba(255,255,255,.75);border-radius:20px;padding:2px 12px}
.hcloud{animation:hdrift 38s ease-in-out infinite alternate}.hcloud--b{animation-duration:46s;animation-direction:alternate-reverse}.hcloud--c{animation-duration:30s}
@keyframes hdrift{to{transform:translateX(60px)}}
.hsun__gear{animation:hspin 24s linear infinite;transform-origin:0 0}@keyframes hspin{to{transform:rotate(360deg)}}
.hsmoke circle{animation:hsmoke 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.hsmoke circle:nth-child(2){animation-delay:.5s}.hsmoke circle:nth-child(3){animation-delay:1s}
@keyframes hsmoke{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.12)}}
.hcrane__hook{animation:hswing 4s ease-in-out infinite;transform-origin:230px 20px}@keyframes hswing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.hbus{animation:hbus 16s linear infinite}@keyframes hbus{from{transform:translateX(-160px)}to{transform:translateX(1500px)}}
.hkid{animation:hbob 1.6s ease-in-out infinite}.hkid:nth-of-type(2){animation-delay:.3s}@keyframes hbob{50%{transform:translateY(-6px)}}
.hkid{transform-box:fill-box}
.hspark{animation:htw 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.hspark--b{animation-delay:.6s}@keyframes htw{50%{opacity:.2}}
.hbird{animation:hbird 2.4s ease-in-out infinite}@keyframes hbird{50%{transform:translateY(-8px)}}
@media(max-width:640px){.hero--art{min-height:78svh}.hart{height:100%}.hero__cloud{padding:36px 30px 42px}}
@media(prefers-reduced-motion:reduce){.hcloud,.hsun__gear,.hsmoke circle,.hcrane__hook,.hbus,.hkid,.hspark,.hbird{animation:none}}

/* ---------- 写真の帯：自動で横に流れる ---------- */
.pstrip__row--auto{display:flex;gap:14px;width:max-content;animation:pmarq 48s linear infinite;align-items:end;padding:0}
.pstrip:hover .pstrip__row--auto{animation-play-state:paused}
.pstrip__row--auto .pstrip__ph{width:clamp(200px,24vw,320px);flex:none;border-radius:16px!important;border:2.5px solid var(--ink)!important;opacity:1!important;transform:none!important}
@keyframes pmarq{to{transform:translateX(-50%)}}
@media(max-width:760px){.pstrip__row--auto{overflow:visible;scroll-snap-type:none;padding:0}}
@media(prefers-reduced-motion:reduce){.pstrip__row--auto{animation:none}}

/* ---------- 地図：やわらかく、ピンは吹き出しに ---------- */
.map--pop{border:3px solid var(--ink)!important;border-radius:22px!important;box-shadow:6px 6px 0 var(--ink);overflow:hidden;background:#F3EEE4}
.map--pop .leaflet-tile-pane{filter:sepia(.35) saturate(1.35) hue-rotate(-12deg) brightness(1.04) contrast(.92)}
.fpin{background:none;border:none}
.fpin b{display:inline-block;white-space:nowrap;background:var(--safety);color:var(--ink);font:900 13px/1 var(--g,inherit);padding:8px 12px;border:2.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);transform:translate(-50%,-100%) rotate(-3deg);position:absolute;left:0;top:-10px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.fpin b::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:var(--safety);border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.fpin:hover b{transform:translate(-50%,-110%) rotate(2deg) scale(1.08)}
.fpin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--spark);border:2.5px solid var(--ink)}
.map--pop .leaflet-control-zoom a{border:2px solid var(--ink)!important;font-weight:900;color:var(--ink)}

.hero__cloud .hero__title{font-size:clamp(30px,5.6vw,74px)}
.hero__cloud .hero__title span{display:block;white-space:nowrap}
@media(max-width:640px){.hero__cloud .hero__title{font-size:8.4vw}.hero__cloud{padding:34px 26px 40px}}