/* ===========================================================
   ZAI 株式会社 — main.css  v2
   見出し=丸ゴシック / 本文=標準ゴシック / オレンジ＋緑 / メンフィス
   =========================================================== */
:root{
  --f-head:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; /* 見出し=丸ゴシック */
  --f-body:"Noto Sans JP",system-ui,sans-serif;                       /* 本文=標準ゴシック */
  --f-en:"Baloo 2",sans-serif;
  --f-pixel:"DotGothic16",sans-serif;                                 /* 8bit JP */
  --f-pixel-en:"Press Start 2P",monospace;

  --orange:#F0792A;
  --orange-soft:#FFAE63;
  --orange-deep:#D85F16;
  --green:#1FA269;
  --mint:#57C08A;
  --green-deep:#15402f;     /* 暗い面（ネイビーの代替） */
  --cream:#F6EFE0;
  --paper:#FBF6EC;
  --ink:#33302a;            /* 本文色（暖色ダーク、紺は使わない） */
  --line:#e6dcc8;

  --r:18px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.85;font-weight:500}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal}
.wrap{width:min(1140px,92vw);margin-inline:auto}

/* ---------- headings (丸ゴシック / vw / 「、。」運用) ---------- */
.sec-eyebrow{font-family:var(--f-en);font-weight:700;letter-spacing:.18em;
  font-size:clamp(.72rem,1.1vw,.85rem);color:var(--orange);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;margin-bottom:.7em}
.sec-eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--orange)}
.sec-eyebrow.light{color:var(--orange-soft)}
.sec-eyebrow.light::before{background:var(--orange-soft)}

.sec-title{font-family:var(--f-head);font-weight:900;
  font-size:clamp(2rem,5.6vw,3.8rem);line-height:1.16;letter-spacing:.01em;
  text-wrap:balance;word-break:keep-all;color:var(--ink);margin-bottom:.4em}
.sec-title.sm{font-size:clamp(1.7rem,4.2vw,2.5rem)}
.sec-title.light{color:#fff}
.t-accent{color:var(--orange)}
.t-accent2{color:var(--orange-soft)}
.t-green{color:var(--green)}
/* PC/スマホで出し分ける改行・要素 */
.br-sp,.sh-sp{display:none}
@media(max-width:640px){.br-sp{display:inline}.br-pc{display:none}.sh-sp{display:inline}.sh-pc{display:none}}

.sec-lead{font-family:var(--f-body);font-size:clamp(.98rem,1.7vw,1.14rem);
  color:#5b5446;max-width:62ch;text-wrap:pretty;font-weight:500}
.sec-lead.light{color:#d8e7dd}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-head);font-weight:700;font-size:clamp(.95rem,1.3vw,1.02rem);
  padding:.95em 1.9em;border-radius:999px;cursor:pointer;border:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn--primary{background:var(--orange);color:#fff;box-shadow:0 8px 0 var(--orange-deep)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--orange-deep)}
.btn--primary:active{transform:translateY(2px);box-shadow:0 4px 0 var(--orange-deep)}
.btn--ghost{background:transparent;color:var(--green);border:2.5px solid var(--green)}
.btn--ghost:hover{transform:translateY(-3px);background:var(--green);color:#fff}

/* ===========================================================
   LOADER — リングコマンドUIが ZAI の周りを回る
   =========================================================== */
.loader{position:fixed;inset:0;z-index:1000;background:var(--cream);
  display:grid;place-items:center;overflow:hidden}
.loader__ring{position:absolute;width:min(420px,78vw);aspect-ratio:1;border-radius:50%;opacity:0}
.orbit{position:absolute;inset:0;border-radius:50%}
.orbit::after{content:"";position:absolute;border-radius:50%}
.orbit--1{border:3px dashed var(--orange);animation:spin 8s linear infinite}
.orbit--2{inset:14%;border:3px solid var(--green);animation:spin 11s linear infinite reverse}
.orbit--3{inset:28%;border:3px dotted var(--orange-soft);animation:spin 6s linear infinite}
/* もののアイコン（ブロック）が回る */
.orbit--1::after{width:30px;height:30px;background:var(--orange);border-radius:8px;top:-15px;left:calc(50% - 15px)}
.orbit--2::after{width:24px;height:24px;background:var(--green);border-radius:7px;top:-12px;left:calc(50% - 12px)}
.orbit--3::after{width:20px;height:20px;background:var(--mint);border-radius:6px;top:-10px;left:calc(50% - 10px)}
.orbit--4{inset:0;animation:spin 9s linear infinite reverse}
.orbit--4::after{width:26px;height:26px;background:var(--orange-soft);border-radius:50%;top:calc(50% - 13px);left:-13px}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__logo{font-family:var(--f-en);font-weight:800;color:var(--green);
  font-size:clamp(3.6rem,13vw,6.5rem);letter-spacing:.04em;z-index:2}
.loader__tag{position:absolute;bottom:30%;font-family:var(--f-head);font-weight:700;
  color:var(--orange);letter-spacing:.14em;font-size:clamp(.95rem,2.2vw,1.1rem);opacity:0;z-index:2}
.loader__sound{position:absolute;bottom:48px;display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-head);font-weight:700;font-size:.86rem;color:var(--green);
  background:#fff;border:2px solid var(--green);border-radius:999px;padding:.4em 1.1em;z-index:3}
.loader__skip{position:absolute;top:24px;right:24px;font-family:var(--f-head);font-weight:700;
  background:none;border:none;color:#9a8f7a;cursor:pointer;font-size:.85rem;z-index:3}
.loader__skip:hover{color:var(--orange)}

/* wave wipe transition */
.wavewipe{position:fixed;inset:0;z-index:999;pointer-events:none;transform:translateY(100%)}
.wavewipe svg{width:100%;height:100%}

/* ===========================================================
   NAV
   =========================================================== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:120;display:flex;align-items:center;
  justify-content:space-between;padding:16px clamp(18px,4vw,44px);transition:background .35s,padding .35s,box-shadow .35s;
  /* ヘッダーの帯：最上部でもクリーム地を敷き、ロゴと項目が絵に埋もれないようにする */
  background:rgba(251,246,236,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(51,48,42,.07)}
.nav.scrolled{background:rgba(251,246,236,.96);padding-block:12px;box-shadow:0 2px 24px rgba(51,48,42,.1)}
.nav__brand{font-family:var(--f-en);font-weight:800;font-size:1.7rem;color:var(--green);display:inline-flex;align-items:center;gap:.18em}
.nav__brand-dot{width:11px;height:11px;border-radius:50%;background:var(--orange);margin-top:.5em}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav__links a{font-family:var(--f-head);font-weight:700;font-size:.95rem;color:var(--ink);position:relative;transition:color .2s}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2.5px;background:var(--orange);border-radius:2px;transition:width .3s var(--ease)}
.nav__links a:not(.nav__cta):hover::after{width:100%}
.nav__cta{background:var(--green);color:#fff!important;padding:.55em 1.2em;border-radius:999px}
.nav__cta:hover{background:var(--orange)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:3px;background:var(--ink);border-radius:3px;transition:.3s}
.nav__burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* 右上から円状に広がる全画面メニュー（全項目が画面に収まる） */
.drawer{position:fixed;inset:0;z-index:115;background:var(--green-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,1.1vh,12px);
  clip-path:circle(0% at calc(100% - 40px) 36px);transition:clip-path .55s var(--ease);
  pointer-events:none;padding:8vh 24px}
.drawer.open{clip-path:circle(160% at calc(100% - 40px) 36px);pointer-events:auto}
.drawer a{font-family:var(--f-head);font-weight:700;color:#fff;border:none;
  font-size:clamp(1.05rem,3.2vh,1.6rem);line-height:1.15;padding:clamp(3px,.7vh,9px) .4em;
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s,color .2s}
.drawer.open a{opacity:1;transform:none}
.drawer a:nth-child(1){transition-delay:.12s}.drawer a:nth-child(2){transition-delay:.16s}
.drawer a:nth-child(3){transition-delay:.20s}.drawer a:nth-child(4){transition-delay:.24s}
.drawer a:nth-child(5){transition-delay:.28s}.drawer a:nth-child(6){transition-delay:.32s}
.drawer a:nth-child(7){transition-delay:.36s}.drawer a:nth-child(8){transition-delay:.40s}
.drawer a:nth-child(9){transition-delay:.44s}.drawer a:nth-child(10){transition-delay:.48s}
.drawer a:hover{color:var(--orange-soft)}
.nav__burger.open span{background:#fff}

/* ===========================================================
   HERO — 6層パララックス（画面全体ビジュアル）
   =========================================================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--cream)}
.hero__scene{position:absolute;inset:0}
.hl{position:absolute;inset:-8%;will-change:transform;pointer-events:none}
.hl--bg img,.hl--fg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hl--bg{inset:0;z-index:1}                                                                 /* 6層目：背景（空＋山なりSVG）・固定 */
.hl--clouds{z-index:2}                                                                     /* 5層目：雲 */
.hl--mid{z-index:3;inset:0}                                                                /* 4層目：もの */
.hl--people{z-index:4;inset:0}                                                             /* 3層目：人 */
.hl--text{inset:0;z-index:5;display:grid;place-items:center;text-align:center;pointer-events:none} /* 2層目：テキスト */
.hero__copy{pointer-events:auto}                                                           /* ボタンを押せるように */
/* 個別オブジェクト/人物：PCは端に小さく配置 */
.hl--mid img,.hl--people img{position:absolute;height:auto}
.person{filter:drop-shadow(0 14px 18px rgba(51,48,42,.12))}
.p1{left:1.5%;top:30%;width:clamp(120px,12.5vw,200px)}
.p2{right:1.5%;top:24%;width:clamp(120px,13vw,210px)}
/* もっと画面の中で散らばるように配置 */
.o1{left:6%;top:7%;width:clamp(64px,6.5vw,104px)}        /* 箱（左上） */
.o2{left:2%;top:54%;width:clamp(48px,5vw,80px)}          /* 鉢植え（左中下） */
.o3{left:22%;bottom:6%;width:clamp(56px,5.5vw,90px)}     /* モンステラ（左下・中寄り） */
.o4{right:8%;top:10%;width:clamp(70px,7vw,116px)}        /* 端材（右上） */
.o5{right:2%;top:46%;width:clamp(56px,5.5vw,90px)}       /* ペンキ缶（右中） */
.o6{right:24%;top:14%;width:clamp(58px,6vw,94px)}        /* レンチ（上・中寄り） */
.o7{right:26%;bottom:8%;width:clamp(60px,6vw,96px)}      /* スマホ（下・中寄り） */
.o8{left:14%;top:64%;width:clamp(44px,4.6vw,72px)}       /* 重複・ふわーっと */
.o9{right:14%;top:22%;width:clamp(40px,4.2vw,66px)}
.o10{left:31%;bottom:5%;width:clamp(42px,4.4vw,68px)}
.obj--soft{opacity:.92}
.hl--text::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(48% 42% at 50% 46%,rgba(246,239,224,.72),rgba(246,239,224,0) 72%)}
.hl--fg{z-index:6}                                                                         /* 1層目：手前のもの＋風景 */
/* 常に動くモーショングラフィックス（CSS translate はGSAPのtransformと合成される） */
.hl--clouds{animation:m-drift 16s ease-in-out infinite alternate}
.hl--people{animation:m-floatB 7s ease-in-out infinite alternate}
.hl--fg{animation:m-sway 12s ease-in-out infinite alternate}
@keyframes m-drift{from{translate:-1.6% 0}to{translate:1.6% 0}}
@keyframes m-floatA{from{translate:0 -1.2%}to{translate:0 1.3%}}
@keyframes m-floatB{from{translate:0 1%}to{translate:0 -1.5%}}
@keyframes m-sway{from{translate:-1% .3%}to{translate:1% -.3%}}
/* 小さな浮遊シェイプ */
.hero__motion{position:absolute;inset:0;z-index:5;pointer-events:none}
.hero__motion .ms{position:absolute;display:block}
.ms1{width:30px;height:30px;border-radius:50%;border:6px solid var(--orange-soft);top:18%;left:14%;animation:m-spin 9s linear infinite,m-bob 4s ease-in-out infinite alternate}
.ms2{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:24px solid var(--green);top:26%;right:18%;animation:m-spin 12s linear infinite reverse,m-bob 5s ease-in-out infinite alternate}
.ms3{width:22px;height:22px;background:var(--orange);border-radius:6px;bottom:30%;left:22%;animation:m-spin 14s linear infinite,m-bob 4.6s ease-in-out infinite alternate}
@keyframes m-spin{to{rotate:360deg}}
@keyframes m-bob{from{translate:0 -10px}to{translate:0 12px}}

.hero__copy{position:relative;width:min(900px,92vw);padding:0 4vw}
.hero__eyebrow{font-family:var(--f-en);font-weight:700;letter-spacing:.14em;color:var(--green);
  font-size:clamp(.78rem,1.4vw,.98rem);margin-bottom:1em}
.hero__title{font-family:var(--f-head);font-weight:900;
  font-size:clamp(3.4rem,12vw,8.5rem);line-height:.98;letter-spacing:.01em;color:var(--ink);
  word-break:keep-all;text-wrap:balance;text-shadow:0 3px 22px rgba(246,239,224,.65)}
.hero__title .line{display:block}
.hero__title .accent{color:var(--orange);position:relative;display:inline-block}
.hero__title .accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.1em;height:.15em;background:var(--mint);border-radius:6px;z-index:-1}
.hero__sub{margin:1.3em auto 0;font-family:var(--f-body);font-size:clamp(1rem,1.9vw,1.22rem);font-weight:700;color:#4b4435;max-width:38ch}
.hero__sub span{display:block;white-space:nowrap}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2em;justify-content:center}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:7;
  font-family:var(--f-en);font-weight:700;letter-spacing:.2em;font-size:.72rem;color:#7a6f57;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll span{width:2px;height:38px;background:linear-gradient(var(--orange),transparent);border-radius:2px;animation:scrolldot 1.8s infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.reveal{opacity:0;transform:translateY(28px)}

/* ===========================================================
   PROBLEM
   =========================================================== */
.problem{padding:clamp(90px,12vw,160px) 0;background:var(--paper)}
.problem__head .sec-lead{margin-top:1.1em}
.problem__body{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(24px,4vw,56px);align-items:start;margin:54px auto 0}
.problem__art img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px;display:block}
.problem__cards{display:flex;flex-direction:column;gap:14px}
.cards-title{font-family:var(--f-head);font-weight:900;font-size:clamp(1.25rem,2.6vw,1.8rem);color:var(--ink);margin-bottom:4px;letter-spacing:.01em}
.pcard{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:22px 26px;display:flex;gap:18px;align-items:center;transition:transform .35s var(--ease),box-shadow .35s}
.pcard:hover{transform:translateX(6px);box-shadow:0 14px 30px rgba(51,48,42,.08)}
.pcard__ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--cream);display:grid;place-items:center}
.pcard__txt{min-width:0}
.pcard__txt h3{font-family:var(--f-head);font-weight:900;font-size:1.18rem;color:var(--ink);margin-bottom:.15em}
.pcard__txt p{font-size:.92rem;color:#6a6354;text-wrap:pretty;line-height:1.75}
.problem__punch{margin:3.4em auto 0;font-family:var(--f-head);font-weight:900;text-align:center;
  font-size:clamp(1.15rem,4.4vw,2.2rem);line-height:1.55;color:var(--ink);text-wrap:balance;
  overflow-wrap:anywhere;max-width:100%}

/* ===========================================================
   RPG BATTLE (8bit / ドラクエ風)
   =========================================================== */
.rpg{padding:clamp(90px,12vw,160px) 0;background:var(--green-deep);position:relative;overflow:hidden;z-index:1}
.rpg::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.05) 0 2px,transparent 3px);background-size:42px 42px}
.rpg__head{position:relative;z-index:2}
.rpg__mute{margin-top:18px;display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-pixel);
  background:#000;color:#fff;border:2px solid #fff;border-radius:0;padding:.55em 1em;cursor:pointer;font-size:.8rem}
.rpg__mute[aria-pressed="true"]{opacity:.5}
.rpg__home{position:relative;z-index:2;width:min(720px,94vw);margin:40px auto 0;min-height:120px}
/* ドラクエ風ウィンドウ：黒地＋白二重枠（枠は最小限に） */
.rpg__window{background:#000;border:4px solid #fff;border-radius:6px;padding:14px;
  box-shadow:0 0 0 4px #000,0 24px 60px rgba(0,0,0,.5)}
.rpg__window.in{animation:popin .45s var(--ease)}
@keyframes popin{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
.rpg__field{display:flex;flex-direction:column;gap:8px;background:#000;padding:4px}
.rpg__enemy{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-pixel);color:#fff;font-size:.8rem}
.rpg__lv{color:var(--orange-soft);margin-left:.6em}
/* ゲージ＝ユーザーのお金 */
.rpg__money{display:flex;align-items:center;gap:8px;font-family:var(--f-pixel);font-size:.62rem;color:#fff}
.rpg__money-cap{color:var(--orange-soft);white-space:nowrap}
.rpg__money b{font-size:.7rem;color:#fff;white-space:nowrap}
.rpg__hpbar{width:96px;height:12px;border:2px solid #fff;background:#000}
.rpg__hpbar i{display:block;height:100%;width:100%;background:var(--mint);transition:width .6s steps(8)}
.rpg__stage{position:relative;display:grid;place-items:center;min-height:210px;
  background:linear-gradient(180deg,#0c2a1e,#06170f)}
.rpg__char{width:min(180px,40vw);image-rendering:auto}
.rpg__char.idle{animation:idlebob 1.6s ease-in-out infinite}
@keyframes idlebob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.015)}}
.rpg__pop{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--f-pixel);font-size:1.5rem;color:#fff;text-shadow:2px 2px 0 #000}
/* 下段：左＝説明（流れてくる）／右半分＝大きいコマンド */
.rpg__bottom{display:flex;gap:10px;margin-top:10px;align-items:stretch}
.rpg__msg{flex:1;min-width:0;font-family:var(--f-pixel);color:#fff;background:#000;border:3px solid #fff;border-radius:4px;
  padding:16px 16px;height:8.5em;line-height:1.95;font-size:.96rem;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2em}
.rpg__msg .ln{display:block;opacity:0;transform:translateX(-14px)}
.rpg__msg .ln.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
/* コマンド：右半分・大きく目立つ */
.rpg__menu{flex:1;border:3px solid #fff;border-radius:4px;background:#000;padding:16px 16px;display:flex;flex-direction:column}
.rpg__menu-h{font-family:var(--f-pixel);color:var(--orange-soft);font-size:1rem;margin-bottom:14px}
.rpg__cmds{list-style:none;display:flex;flex-direction:column;gap:10px}
.cmd{width:100%;font-family:var(--f-pixel);font-size:1.22rem;color:#fff;background:none;border:none;
  padding:.5em .3em .5em 1.5em;text-align:left;cursor:pointer;position:relative;transition:color .12s,transform .12s}
.cmd::before{content:"▶";position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;color:var(--orange-soft)}
.cmd:hover{color:var(--orange-soft);transform:translateX(3px)}
.cmd:hover::before{opacity:1}
.cmd--win{color:var(--mint)}
.cmd--win:hover{color:#fff}
.rpg__cmds.locked .cmd{opacity:.4;pointer-events:none}
.rpg__again{margin-top:auto;align-self:flex-start;font-family:var(--f-pixel);font-size:.9rem;background:var(--orange);color:#fff;border:3px solid #fff;border-radius:4px;padding:.7em 1.4em;cursor:pointer}
.rpg__again[hidden]{display:none}
/* クリア時の大きな「つぎへ」 */
.rpg__next{margin:14px auto 0;display:block;font-family:var(--f-pixel);font-size:clamp(1.1rem,2.4vw,1.55rem);
  background:var(--mint);color:#06231a;border:4px solid #fff;border-radius:6px;padding:.75em 2.6em;cursor:pointer;
  box-shadow:0 6px 0 #0d6b48;transition:transform .15s;animation:nextpulse 1.1s ease-in-out infinite}
.rpg__next:hover{transform:translateY(-2px)}
.rpg__next[hidden]{display:none}
@keyframes nextpulse{50%{transform:scale(1.04)}}
/* 本ページの起動画面（はじめる/とじる無し）／クリア後は戦闘UIを表示 */
.qtitle--inline{min-height:380px}
#battleHome #battle{display:none}
#battleHome.played #battle{display:block}
#battleHome.played #qtitleInline{display:none}
[hidden]{display:none!important}
@media(max-width:640px){
  .rpg__bottom{flex-direction:column;gap:8px}
  .rpg__menu{padding:12px 14px}
  .rpg__menu-h{font-size:.84rem;margin-bottom:7px}
  .rpg__cmds{gap:2px}                 /* どうするコマンドの行間を詰める */
  .cmd{font-size:1.02rem;padding:.3em .3em .3em 1.4em}
  .rpg__msg{height:8em;line-height:1.7;font-size:.86rem}  /* 縦幅固定 */
  .rpg__char{width:min(130px,38vw)}
  .rpg__stage{min-height:170px}
}

/* ===== 全画面エンカウント・ポップアップ ===== */
.battle-overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;
  background:rgba(6,16,10,.93)}
.battle-overlay__inner{position:relative;width:min(720px,94vw)}
.battle-overlay__close{position:absolute;top:-44px;right:0;display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-pixel);font-size:.72rem;color:#fff;background:none;border:2px solid #fff;border-radius:4px;padding:.45em .9em;cursor:pointer}
.battle-overlay__close:hover{background:var(--orange);border-color:var(--orange)}
/* ざいっぽクエスト 起動画面 */
.qtitle{position:relative;overflow:hidden;background:#0a0a0a;border:4px solid #fff;border-radius:6px;
  box-shadow:0 0 0 4px #000,0 24px 60px rgba(0,0,0,.5);padding:clamp(34px,6vw,60px) 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:440px;text-align:center}
.qtitle[hidden]{display:none}
.qtitle__scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px)}
.qtitle__pre{font-family:var(--f-pixel);color:var(--mint);font-size:.78rem;letter-spacing:.24em;position:relative;z-index:2}
.qtitle__logo{font-family:var(--f-pixel);color:#fff;font-size:clamp(2.1rem,8vw,3.6rem);line-height:1.12;
  letter-spacing:.04em;text-shadow:5px 5px 0 var(--orange-deep);position:relative;z-index:2}
.qtitle__logo .q-em{color:var(--orange-soft);text-shadow:5px 5px 0 #0d6b48}
.qtitle__zombie{width:clamp(78px,16vw,120px);image-rendering:auto;position:relative;z-index:2;
  animation:idlebob 1.6s ease-in-out infinite}
.qtitle__start{font-family:var(--f-pixel);font-size:1.15rem;color:#fff;background:var(--orange);
  border:3px solid #fff;border-radius:4px;padding:.7em 1.8em;cursor:pointer;position:relative;z-index:2;margin-top:4px;transition:background .15s,transform .15s}
.qtitle__start:hover{background:var(--orange-deep);transform:translateY(-2px)}
.qtitle__press{font-family:var(--f-pixel);color:#fff;font-size:.74rem;letter-spacing:.16em;position:relative;z-index:2;animation:qblink 1s steps(1) infinite}
@keyframes qblink{50%{opacity:0}}
/* 画面を黒く覆うエンカウント・マスク（ランダムなパターンで覆う→開く） */
.encmask{position:fixed;inset:0;z-index:600;background:#000;pointer-events:none;opacity:0}
.encmask.go{opacity:1}
.encmask.v-iris.go{animation:enc-iris 1.05s ease-in-out forwards}
.encmask.v-wipe.go{animation:enc-wipe 1.05s ease-in-out forwards}
.encmask.v-vwipe.go{animation:enc-vwipe 1.05s ease-in-out forwards}
.encmask.v-diag.go{animation:enc-diag 1.05s ease-in-out forwards}
@keyframes enc-iris{0%{clip-path:circle(0% at 50% 50%)}38%{clip-path:circle(150% at 50% 50%)}60%{clip-path:circle(150% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}
@keyframes enc-wipe{0%{clip-path:inset(0 100% 0 0)}38%{clip-path:inset(0)}60%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes enc-vwipe{0%{clip-path:inset(0 0 100% 0)}38%{clip-path:inset(0)}60%{clip-path:inset(0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes enc-diag{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}38%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}60%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}
.battle-overlay.go{animation:ovzoom .5s var(--ease)}
@keyframes ovzoom{0%{transform:scale(1.1);opacity:0}100%{transform:scale(1);opacity:1}}
/* 戦闘UIが順々に出る */
.rpg__field,.rpg__msg,.rpg__menu{opacity:1}
.rpg__window.seq .rpg__field{animation:seqin .45s var(--ease) both .05s}
.rpg__window.seq .rpg__msg{animation:seqin .45s var(--ease) both .28s}
.rpg__window.seq .rpg__menu{animation:seqin .45s var(--ease) both .5s}
@keyframes seqin{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.flash{animation:flash .4s}
@keyframes flash{0%,100%{filter:none}50%{filter:brightness(2.4)}}
.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.hop{animation:hop .6s var(--ease)}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-26px) scale(1.06)}100%{transform:translateY(0)}}

/* 解説：PCは3枚横並び（余白あり）／スマホはカルーセル */
.rpg__explain{position:relative;z-index:2;margin-top:clamp(40px,6vw,72px)}
.rpg__explain-h{font-family:var(--f-en);font-weight:700;letter-spacing:.14em;color:var(--orange-soft);font-size:.82rem;text-align:center;margin-bottom:24px}
/* 上段：すてる／ほうち の2枚（スマホはカルーセル）。下段：ざいっぽを横長で1行まるごと使って詳しく */
.exp-track{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.exp-card{background:#fff;border-radius:20px;padding:22px;text-align:center}
.exp-card__img{background:var(--cream);border-radius:14px;overflow:hidden;margin-bottom:16px}
.exp-card__img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.exp-card h3{font-family:var(--f-head);font-weight:900;font-size:1.15rem;color:var(--ink);margin-bottom:.4em}
.exp-card p{font-size:.92rem;color:#6a6354;line-height:1.8}
/* 横長カード（ざいっぽ） */
.exp-card--wide{margin-top:clamp(20px,3vw,40px);text-align:left;display:grid;
  grid-template-columns:minmax(0,clamp(220px,26vw,320px)) minmax(0,1fr);
  gap:clamp(20px,3vw,38px);align-items:stretch;padding:clamp(22px,2.6vw,32px);
  border:2px solid rgba(240,121,42,.28);box-shadow:0 18px 40px rgba(21,64,47,.18)}
.exp-card--wide .exp-card__img{margin-bottom:0;display:grid;place-items:center;padding:16px}
.exp-card--wide .exp-card__img img{aspect-ratio:1;object-fit:contain}
.exp-card--wide h3{font-size:clamp(1.24rem,1.9vw,1.62rem);margin-bottom:.5em}
.exp-card .exp-card__badge{display:inline-block;font-family:var(--f-head);font-weight:700;font-size:.76rem;
  letter-spacing:.04em;color:#fff;background:var(--orange);padding:.35em 1em;border-radius:999px;margin-bottom:.9em}
.exp-card__lead{font-size:1rem;color:#5b5446;line-height:1.85;margin-bottom:1.1em}
.exp-card__lead strong{font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,rgba(240,121,42,.32) 0)}
.exp-points{list-style:none;display:grid;gap:.85em;border-top:1px solid var(--line);padding-top:1.1em}
.exp-points li{position:relative;padding-left:1.15em;font-size:.9rem;color:#6a6354;line-height:1.85}
.exp-points li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.exp-points b{display:block;font-family:var(--f-head);font-weight:900;color:var(--ink);font-size:.95rem}
.exp-dots{display:none}
.rpg__note{max-width:780px;margin:clamp(36px,5vw,60px) auto 0;text-align:center;color:#eaf3ec;position:relative;z-index:2}
.rpg__note p{font-size:clamp(1rem,1.7vw,1.18rem);line-height:2}
.rpg__note strong{color:#fff;font-weight:700;background:linear-gradient(transparent 62%,rgba(240,121,42,.42) 0)}
.rpg__note em{font-weight:700}
.rpg__note-sub{margin-top:1.4em;font-size:.96rem;color:#bcd3c4;line-height:1.9}
@media(max-width:760px){
  .exp-track{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px;padding:4px 9vw;scrollbar-width:none}
  .exp-track::-webkit-scrollbar{display:none}
  .exp-card{scroll-snap-align:center}
  .exp-card h3{font-size:1.05rem} /* 「すてる＝お金を捨てる」が375pxでも1行に収まる大きさ */
  /* スマホ：横長カードはカルーセルの外に、幅いっぱいで置く */
  .exp-card--wide{display:block;text-align:center;padding:22px;margin-top:18px;box-shadow:none}
  .exp-card--wide .exp-card__img{margin-bottom:16px}
  .exp-card--wide .exp-card__img img{aspect-ratio:16/9}
  .exp-points{text-align:left}
  .exp-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .exp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
  .exp-dots i.on{background:var(--orange)}
}

/* タップした場所からSVGアイコンが弾ける */
.tapfx{position:absolute;pointer-events:none;z-index:20;width:42px;height:42px;transform:translate(-50%,-50%)}
.tapfx svg{width:100%;height:100%}
.tapfx.go{animation:tapfx .8s var(--ease) forwards}
@keyframes tapfx{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-30px))) scale(1.15) rotate(10deg)}}

/* ===========================================================
   FLOW / JOURNEY（画面幅いっぱいの一枚舞台）
   =========================================================== */
.flow{padding:clamp(90px,12vw,160px) 0 clamp(60px,8vw,110px);background:var(--paper);text-align:center;position:relative;z-index:2}
.flow__head{display:flex;flex-direction:column;align-items:center}
.flow__head .sec-lead{margin-top:1.1em;text-align:center}
.flow__body{position:relative;margin-top:clamp(28px,4vw,52px);cursor:pointer}
.journey{position:relative;width:100%;height:clamp(420px,72vh,640px);overflow:hidden;background:var(--cream);
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.journey__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.journey__prog{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.journey__prog i{width:8px;height:8px;border-radius:50%;background:rgba(51,48,42,.18);transition:.3s}
.journey__prog i.on{background:var(--orange);transform:scale(1.25)}
.journey__tag{position:absolute;top:18px;right:clamp(16px,3vw,40px);z-index:3;background:var(--orange);color:#fff;font-family:var(--f-head);font-weight:700;font-size:clamp(.8rem,1.2vw,1rem);padding:.4em 1.1em;border-radius:999px;box-shadow:0 8px 20px rgba(240,121,42,.4);opacity:0;transform:rotate(6deg) scale(.7);transition:.4s var(--ease)}
.journey__tag.on{opacity:1;transform:rotate(6deg) scale(1)}
/* 舞台の空の部分に重ねる説明パネル（役者は下半分で動く） */
.journey__cap{position:absolute;left:clamp(16px,4vw,64px);top:clamp(52px,6vw,76px);z-index:3;text-align:left;display:grid;gap:8px;justify-items:start;
  max-width:min(560px,80vw);padding:clamp(16px,2vw,26px) clamp(18px,2.4vw,30px);border-radius:22px;
  background:rgba(251,246,236,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 44px rgba(51,48,42,.14)}
.journey__chip{font-family:var(--f-en);font-weight:700;font-size:.74rem;letter-spacing:.12em;background:var(--green);color:#fff;padding:.32em 1.05em;border-radius:999px}
.journey__title{font-family:var(--f-head);font-weight:900;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.25;color:var(--ink)}
.journey__desc{font-size:clamp(.92rem,1.15vw,1.06rem);color:#5b5446;line-height:1.75}
.flow__tapper{margin-top:clamp(18px,2.6vw,30px)}
.flow__hint{margin-top:.8em;font-size:.85rem;color:#a99a80;font-weight:500}
@media(max-width:760px){
  .journey{height:min(72vh,560px)}
  .journey__cap{left:12px;right:12px;top:56px;max-width:none;justify-items:center;text-align:center;padding:14px 16px;gap:6px}
  .journey__title{font-size:1.3rem}
  .journey__desc{font-size:.88rem}
}

/* ===========================================================
   REAL LIFE（実写・ナチュラル／メンフィスから離れる）
   =========================================================== */
/* 全面実写：背景写真＋テキストオーバーレイ（100vh） */
.real{position:relative;z-index:3;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#241d12}
.real__bg{position:absolute;inset:0;background:url(../IMG/real-hero.webp) center/cover no-repeat;transform:scale(1.04)}
.real__scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,15,9,.74) 0%,rgba(20,15,9,.5) 40%,rgba(20,15,9,.12) 75%)}
.real__content{position:relative;z-index:2;width:min(1140px,92vw);margin-inline:auto;padding:0 4vw;max-width:760px}
.real__content .sec-lead{margin-top:1.2em;color:#f3ece0}

/* ===========================================================
   ZAIPPO STORY（横スクロール・ピン留め）
   =========================================================== */
.story{position:relative;z-index:3;background:var(--green-deep)}
.story__pin{height:100vh;overflow:hidden}
.story__track{display:flex;height:100vh;align-items:stretch;will-change:transform}
.spanel{position:relative;flex:0 0 auto;height:100vh;display:flex;align-items:center;justify-content:center;padding:8vh 6vw;overflow:hidden}
.spanel--intro{flex-basis:min(720px,82vw);background:var(--green-deep);flex-direction:column;text-align:center;gap:1em;color:#eaf3ec}
.story__kicker{font-family:var(--f-en);font-weight:700;letter-spacing:.2em;color:var(--orange-soft);font-size:.84rem}
.story__kicker.light{color:#fff}
.story__big{font-family:var(--f-head);font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.18;color:#fff;text-wrap:balance;word-break:keep-all}
.story__lead{font-family:var(--f-body);font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.95;max-width:36ch;color:#d8e7dd}
.story__scrollhint{font-family:var(--f-en);font-weight:700;letter-spacing:.18em;color:var(--orange-soft);font-size:.86rem;margin-top:.6em;animation:hintpulse 1.4s ease-in-out infinite}
@keyframes hintpulse{50%{transform:translateX(9px)}}
.spanel--photo{flex-basis:min(1100px,90vw);background-size:cover;background-position:center}
.spanel--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,9,.12),rgba(20,15,9,.5))}
.spanel__card{position:absolute;z-index:2;width:min(440px,82%);background:rgba(255,255,255,.95);border-radius:20px;padding:30px 32px;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.spanel__card--bl{left:6%;bottom:9%}
.spanel__card--tr{right:6%;top:11%}
.spanel__card--bc{left:50%;bottom:9%;transform:translateX(-50%);text-align:center}
.spanel__no{font-family:var(--f-en);font-weight:800;letter-spacing:.1em;color:var(--orange);font-size:.82rem;display:block;margin-bottom:.4em}
.spanel__card h3{font-family:var(--f-head);font-weight:900;font-size:clamp(1.4rem,2.4vw,1.95rem);color:var(--ink);margin-bottom:.4em}
.spanel__card p{font-family:var(--f-body);font-size:.98rem;line-height:1.9;color:#4b4435}
.spanel--statement{flex-basis:min(760px,84vw);background:var(--cream);flex-direction:column;text-align:center;gap:.5em}
.story__statement{font-family:var(--f-head);font-weight:900;font-size:clamp(2.4rem,6vw,4rem);color:var(--ink);line-height:1.14}
.spanel--statement p{font-family:var(--f-body);font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.95;max-width:36ch;color:#5b5446}
.spanel__inset{width:min(400px,74%);aspect-ratio:16/10;border-radius:18px;background-size:cover;background-position:center;box-shadow:0 20px 44px rgba(51,48,42,.2);margin-top:1.2em}
.spanel--future{flex-basis:min(1200px,96vw);background-size:cover;background-position:center;justify-content:flex-start}
.spanel--future::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,14,8,.86),rgba(18,14,8,.45) 58%,rgba(18,14,8,.08))}
.spanel__future{position:relative;z-index:2;max-width:min(580px,88%);color:#fff;display:flex;flex-direction:column;gap:.55em;align-items:flex-start;text-align:left}
.spanel__future h3{font-family:var(--f-head);font-weight:900;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.18;color:#fff}
.spanel__future p{font-family:var(--f-body);font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.95;color:#f0e9dd}
.spanel__future .btn{margin-top:.9em}
@media(max-width:768px){
  .story__pin{height:auto;overflow:visible}
  .story__track{flex-direction:column;height:auto}
  .spanel{flex-basis:auto!important;width:100%;height:auto;min-height:78vh;padding:12vh 7vw}
  .spanel__card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%}
  .spanel__card--bc{text-align:left}
  .spanel--photo,.spanel--future{align-items:flex-end}
}

/* ===========================================================
   COST
   =========================================================== */
.cost{padding:clamp(90px,12vw,160px) 0;background:var(--green-deep);position:relative;overflow:hidden}
.cost .sec-lead{margin:1.1em 0 0}
.costsim{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,46px);margin-top:48px;align-items:center}
.costsim__controls{display:flex;flex-direction:column;gap:28px}
.ctrl__top{display:flex;justify-content:space-between;align-items:baseline;color:#fff;font-family:var(--f-head);font-weight:700;margin-bottom:12px;font-size:.98rem}
.ctrl__top output{font-family:var(--f-en);font-size:1.6rem;color:var(--orange-soft);margin-left:auto;font-weight:700}
.ctrl input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:8px;background:rgba(255,255,255,.18);outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--orange);border:4px solid #fff;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ctrl input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--orange);border:4px solid #fff;cursor:pointer}
.costsim__result{background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.18);border-radius:22px;padding:30px}
.costsim__bars{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
.cbar__cap{font-size:.82rem;color:#cfe3d6;font-weight:700;display:block;margin-bottom:6px}
.cbar__track{height:26px;border-radius:8px;background:rgba(0,0,0,.3);overflow:hidden}
.cbar__track i{display:block;height:100%;border-radius:8px;width:0;transition:width .7s var(--ease)}
.cbar--now .cbar__track i{background:repeating-linear-gradient(135deg,#b8a98c 0 12px,#9c8d70 12px 24px)}
.cbar--zai .cbar__track i{background:linear-gradient(90deg,var(--green),var(--mint))}
.cbar b{display:block;text-align:right;font-family:var(--f-en);font-weight:700;color:#fff;margin-top:6px;font-size:1.1rem}
.costsim__label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:2px dashed rgba(255,255,255,.22);padding-top:20px}
.costsim__label-cap{color:#cfe3d6;font-weight:700}
.costsim__label-num{font-family:var(--f-en);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--orange-soft);line-height:1}
.costsim__badge{margin-left:auto;background:var(--orange);color:#fff;font-family:var(--f-en);font-weight:800;font-size:1.5rem;padding:.2em .6em;border-radius:12px;transform:rotate(-4deg);box-shadow:0 8px 20px rgba(240,121,42,.4)}
.costsim__note{margin-top:18px;font-size:.78rem;color:#a9c1b1;line-height:1.7}

/* ===========================================================
   SERVICE / PHILOSOPHY (two-column with art)
   =========================================================== */
.service{padding:clamp(90px,12vw,160px) 0;background:var(--cream)}
.service__head .sec-lead{margin-top:1.1em}
.service__body{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(24px,4vw,56px);align-items:start;margin:50px auto}
.service__art img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px;display:block}
.service__cards{display:flex;flex-direction:column;gap:16px}
.scard{background:#fff;border:2px solid var(--line);border-radius:20px;padding:26px 28px;position:relative;overflow:hidden}
.scard__no{font-family:var(--f-en);font-weight:800;font-size:2rem;color:var(--orange);display:block;line-height:1}
.scard h3{font-family:var(--f-head);font-weight:900;font-size:1.25rem;margin:.2em 0 .3em;color:var(--ink)}
.scard p{color:#6a6354;font-size:.94rem}
.price{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:8px 30px;max-width:680px;margin-inline:auto}
.price__row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-weight:700}
.price__row:last-child{border-bottom:none}
.price__row b{font-family:var(--f-head);color:var(--ink)}
.price__row span{color:#6a6354;font-size:.95rem;text-align:right}
.price__free{color:var(--green)!important;font-family:var(--f-en);font-weight:800;font-size:1.4rem}

.philo{padding:clamp(90px,12vw,160px) 0;background:var(--paper)}
.philo__body{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:44px}
.philo__art img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px;display:block}
.philo__mvv{display:flex;flex-direction:column;gap:16px}
.mvv{background:#fff;border-radius:18px;padding:24px 28px;border:2px solid var(--line)}
.mvv__k{font-family:var(--f-en);font-weight:700;letter-spacing:.14em;font-size:.74rem;color:var(--orange)}
.mvv:nth-child(2) .mvv__k{color:var(--green)}
.mvv:nth-child(3) .mvv__k{color:var(--orange-deep)}
.mvv h3{font-family:var(--f-head);font-weight:900;font-size:1.35rem;color:var(--ink);margin:.1em 0 .3em}
.mvv p{font-size:.95rem;color:#5b5446}

/* ===========================================================
   MESSAGE
   =========================================================== */
.message{padding:clamp(90px,12vw,160px) 0;background:var(--cream)}
.message__inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
.message__visual img{width:100%;height:auto;border-radius:26px;display:block}
.message__text{margin-bottom:1.1em;color:#4b4435}
.message__sign{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:1.05rem;margin-top:1.2em}

/* ===========================================================
   COMPANY
   =========================================================== */
.company{padding:clamp(90px,12vw,160px) 0;background:var(--paper)}
.company__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;margin-top:38px;align-items:start}
.company__table{background:#fff;border:2px solid var(--line);border-radius:var(--r);overflow:hidden}
.company__table>div{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid var(--line)}
.company__table>div:last-child{border-bottom:none}
.company__table dt{background:var(--cream);padding:18px 20px;font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:.92rem}
.company__table dd{padding:18px 20px;font-size:.95rem;color:#4b4435}
.company__grid{align-items:stretch}
.company__map{border-radius:var(--r);overflow:hidden;border:2px solid var(--line);min-height:320px;background:var(--cream)}
.company__map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.partners{margin-top:54px}
.partners__cap{font-family:var(--f-en);font-weight:700;letter-spacing:.1em;color:var(--orange);font-size:.8rem;margin-bottom:16px}
.partners__list{list-style:none;display:flex;flex-wrap:wrap;gap:14px}
.partners__list li{background:#fff;border:2px solid var(--line);border-radius:999px;padding:.7em 1.5em;font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:.95rem}

/* ===========================================================
   NEWS
   =========================================================== */
.news{padding:clamp(90px,12vw,160px) 0;background:var(--cream)}
.news__list{list-style:none;margin-top:38px;border-top:2px solid var(--line)}
.news__list li{display:flex;align-items:center;gap:18px;padding:22px 6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.news__list time{font-family:var(--f-en);font-weight:700;color:var(--ink);min-width:96px}
.news__tag{font-family:var(--f-en);font-weight:700;font-size:.72rem;letter-spacing:.08em;color:#fff;padding:.3em .9em;border-radius:6px}
.tag--ir{background:var(--orange)}.tag--media{background:var(--mint)}.tag--award{background:var(--green)}.tag--info{background:var(--orange-deep)}
.news__list p{flex:1;min-width:240px;color:#4b4435;font-size:.98rem}

/* ===========================================================
   FAQ
   =========================================================== */
.faq{padding:clamp(90px,12vw,160px) 0;background:var(--paper)}
.faq__list{margin-top:38px;display:flex;flex-direction:column;gap:14px}
.qa{background:#fff;border:2px solid var(--line);border-radius:16px;padding:6px 24px;transition:border-color .3s}
.qa[open]{border-color:var(--orange)}
.qa summary{list-style:none;cursor:pointer;font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:1.05rem;padding:18px 30px 18px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--f-en);font-size:1.6rem;color:var(--orange);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa p{padding:0 0 20px;color:#5b5446;font-size:.96rem}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{padding:clamp(90px,12vw,160px) 0;background:var(--green-deep);position:relative;overflow:hidden}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
.contact__meta{color:#cfe3d6;margin-top:1.8em;font-weight:700}
.contact__meta a{font-family:var(--f-en);font-size:1.6rem;color:var(--orange-soft)}
.cform{background:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:18px}
.cform label{display:flex;flex-direction:column;gap:8px;font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:.92rem}
.cform input,.cform textarea{font-family:var(--f-body);font-weight:500;font-size:1rem;padding:14px 16px;border:2px solid var(--line);border-radius:12px;color:var(--ink);background:var(--paper);width:100%}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--orange)}
.cform__check{flex-direction:row!important;align-items:center;font-weight:500!important;font-size:.9rem!important;line-height:1.6}
/* チェックボックスは .cform input の width:100% を打ち消して固定幅にする（文字の折り返し防止） */
.cform__check input[type="checkbox"]{flex:none;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none}
/* 「プライバシーポリシー」と「に同意する」の途中では折り返さない */
.cform__check-txt{flex:1 1 auto;min-width:0}
.cform__check-txt>*{white-space:nowrap}
.cform__check a{color:var(--orange);text-decoration:underline}
.cform__done{color:var(--green);font-weight:700;text-align:center}
.cform__error{color:var(--orange-deep);font-weight:700;text-align:center}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{background:#241d12;color:#cabfa8;padding:60px 0 34px}
.foot__inner{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.foot__brand{font-family:var(--f-en);font-weight:800;font-size:2rem;color:#fff;display:flex;align-items:center;gap:.4em}
.foot__brand span{width:11px;height:11px;border-radius:50%;background:var(--orange)}
.foot__brand p{font-family:var(--f-head);font-size:.95rem;font-weight:700;color:var(--orange-soft)}
.foot__nav{display:flex;gap:22px;flex-wrap:wrap}
.foot__nav a{font-family:var(--f-head);font-weight:700;font-size:.92rem;transition:color .2s}
.foot__nav a:hover{color:var(--orange-soft)}
.foot__copy{width:100%;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;margin-top:10px;font-size:.82rem;color:#8c8068}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media(max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
  .problem__body,.service__body,.philo__body,.message__inner,.company__grid,.contact__inner,.costsim{grid-template-columns:1fr}
}
/* スマホ最適化 */
@media(max-width:640px){
  .wrap{width:92vw}
  .hero{min-height:88svh}
  .hero__title{font-size:clamp(2.9rem,15vw,4.6rem)}
  .hero__sub{font-size:clamp(.78rem,3.9vw,.94rem)}
  .hero__copy{padding:0 5vw}
  /* スマホ：人物・ものを画面内（中央寄り）に見えるよう再配置 */
  .p1{left:-3%;right:auto;top:7%;width:40vw}
  .p2{right:-3%;top:5%;width:42vw}
  .o1{left:36%;top:1%;bottom:auto;width:17vw}
  .o4{left:3%;right:auto;top:auto;bottom:15%;width:21vw}
  .o3{left:32%;bottom:3%;width:22vw}
  .o7{right:3%;top:auto;bottom:4%;width:21vw}
  .o2,.o5,.o6{display:none}
  .rpg__home{width:96vw}
  .rpg__char{width:min(150px,42vw)}
  .rpg__msg{font-size:.9rem}
  .real{min-height:92svh}
  .real__content{padding:0 7vw;max-width:100%}
  .real__scrim{background:linear-gradient(180deg,rgba(20,15,9,.35) 0%,rgba(20,15,9,.7) 100%)}
  .company__table>div{grid-template-columns:92px 1fr}
  .company__table dt,.company__table dd{padding:14px 14px;font-size:.88rem}
  .company__map iframe,.company__map{min-height:260px}
  .partners__list{gap:10px}
  .news__list li{gap:8px 12px}.news__list time{min-width:84px}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .costsim__label-num{font-size:1.8rem}
  .btn{font-size:.95rem;padding:.9em 1.6em}
  .flow__tapper{margin-top:18px}
  /* スマホでは横スクロール厳禁 */
  .story,.story__pin,.story__track,.spanel{overflow-x:hidden;max-width:100vw}
  .story__scrollhint{animation:hintpulseY 1.4s ease-in-out infinite}
}
@keyframes hintpulseY{50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ===========================================================
   ロゴ（IMG/logo.svg＝背景なし／IMG/logo-card.svg＝白地つき。暗い背景では白地つきを使う）
   =========================================================== */
.nav__logo{height:34px;width:auto;display:block}
.loader__logo{line-height:0;margin:0}
.loader__logo img{height:clamp(64px,10vw,120px);width:auto;display:block}
.foot__logo{height:48px;width:auto;display:block;border-radius:8px}
@media(max-width:640px){.nav__logo{height:28px}.foot__logo{height:40px}}

/* 日本語の折り返し：句点で行を分け、文節（BudouX）でしか折らない。BudouX が付けるインライン指定と同じものを予備で */
[data-budoux]{word-break:keep-all;overflow-wrap:anywhere}