/* ==========================================================
   サオドワ合同会社 コーポレートサイト（saodowa.com）
   B案：モノクロ・フルページスクロール
   ========================================================== */

/* ---------- 基本 ---------- */
:root{
  --white:#FFFFFF;   /* 白ページ背景 */
  --black:#0F0F0F;   /* 黒ページ背景 */
  --ink:#151515;     /* 文字 */
  --sub:#666666;     /* 補足文字 */
  --line:#DDDDDD;    /* 線 */
  --pale:#F4F4F2;    /* 淡い面 */
  --accent:#111111;  /* 強調（ボタン・点・線） */
  --teamph:url("../img/mission-road.jpg"); /* 仲間ページの代替表示の背景 */
  --en:"Saira","Helvetica Neue",Arial,sans-serif;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --rail:clamp(28px,3.4vw,52px);
  --ease:cubic-bezier(.77,0,.18,1);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:72px; }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--white); color:var(--ink); font-family:var(--jp); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.btn{ display:inline-flex; align-items:center; padding:14px 30px; border:1px solid #111; background:#111; color:#fff; font-size:14px; letter-spacing:.08em; transition:background .35s, color .35s; }
.btn:hover{ background:#fff; color:#111; }

/* ---------- ヘッダー ---------- */
.header{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:calc(18px + env(safe-area-inset-top,0px)) clamp(20px,4vw,56px) 18px calc(var(--rail) + 40px); transition:background .6s, color .6s, border-color .6s; border-bottom:1px solid transparent; }
.header.solid{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-color:var(--line); }
.logo{ display:block; width:84px; }
.logo img{ width:100%; height:auto; display:block; transition:filter .6s; }
.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); font-size:13.5px; letter-spacing:.14em; }
.nav ul{ display:flex; gap:clamp(18px,2.4vw,34px); list-style:none; }
.nav ul a{ position:relative; padding:4px 0; transition:color .4s; }
.nav ul a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
.nav ul a:hover,.nav ul a.on{ color:var(--accent); }
.nav ul a:hover::after,.nav ul a.on::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- 左のルート（停車地＝ページ送りの印） ---------- */
.rail{ position:fixed; z-index:25; left:var(--rail); top:14vh; bottom:14vh; width:1px; background:var(--line); }
.rail .fill{ position:absolute; left:0; top:0; width:1px; height:100%; background:var(--accent); transform-origin:top; transform:scaleY(0); transition:transform 1.1s var(--ease), background 1.1s var(--ease); }
.rail button{ position:absolute; left:-9px; width:19px; height:19px; margin-top:-9px; border:0; background:transparent; cursor:pointer; }
.rail button::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--white); border:1.5px solid #BDBDBD; transition:background .5s, border-color .5s, transform .5s, opacity .5s; }
.rail button.on::before{ inset:3px; background:var(--accent); border-color:var(--accent); }
.rail button span{ position:absolute; left:24px; top:50%; transform:translate(-6px,-50%); white-space:nowrap; font-size:12px; letter-spacing:.14em; color:var(--sub); opacity:0; transition:color .4s, opacity .4s, transform .4s; pointer-events:none; }
.rail button:hover span,.rail button.on span{ opacity:1; transform:translate(0,-50%); }
.rail button.on span{ color:var(--accent); }
.count{ position:fixed; z-index:25; left:calc(var(--rail) - 8px); bottom:calc(5vh + env(safe-area-inset-bottom,0px)); font-family:var(--en); font-size:11px; letter-spacing:.14em; color:var(--sub); }
.count b{ font-weight:400; color:var(--accent); }

/* ---------- セクション（1画面＝1セクション） ---------- */
.fp-wrap{ position:relative; }
.sec{ position:relative; min-height:100svh; display:flex; align-items:center; padding:96px clamp(20px,6vw,96px) 64px calc(var(--rail) + clamp(48px,6vw,96px)); }
.in{ width:100%; max-width:1120px; }
.tag{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(28px,4vh,48px); }
.tag .n{ font-family:var(--en); font-size:13px; color:var(--accent); letter-spacing:.1em; }
.tag h2{ font-size:clamp(26px,2.6vw,34px); font-weight:500; letter-spacing:.14em; }
.tag .en{ font-family:var(--en); font-size:13px; color:var(--sub); letter-spacing:.12em; }
.lg{ font-size:clamp(20px,2vw,26px); font-weight:500; line-height:1.75; letter-spacing:.06em; }
.p{ font-size:15px; line-height:2.05; color:var(--sub); letter-spacing:.04em; }
.lg + .p, .p + .p{ margin-top:14px; }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; }

/* 入場の動き：通常は「画面に入ったら」、フルページ時は「そのページが表示されたら」 */
.rv{ opacity:0; transform:translateY(18px); transition:opacity 1s ease-out, transform 1s cubic-bezier(.2,.7,.2,1); }
.rv.on,.sec.active .rv{ opacity:1; transform:none; }
.sec.active .rv:nth-child(2){ transition-delay:.12s; } .sec.active .rv:nth-child(3){ transition-delay:.24s; } .sec.active .rv:nth-child(4){ transition-delay:.36s; }

/* フルページ時：ページ全体を1画面ずつスライド */
html.fp, html.fp body{ height:100%; overflow:hidden; }
html.fp .fp-wrap{ transition:transform 1.1s var(--ease); will-change:transform; }
html.fp .sec{ height:100vh; min-height:0; overflow:hidden; }
html.fp .rv{ transition-delay:0s; }
html.fp .rv.on{ opacity:0; transform:translateY(18px); }
html.fp .sec.active .rv{ opacity:1; transform:none; }
html.fp .sec.active .rv{ transition-delay:.35s; }
html.fp .sec.active .rv:nth-child(2){ transition-delay:.47s; } html.fp .sec.active .rv:nth-child(3){ transition-delay:.59s; } html.fp .sec.active .rv:nth-child(4){ transition-delay:.71s; }

/* ---------- 01 トップ：夜明け前の黒い空と、白い道 ---------- */
.hero{ padding:0; display:block; overflow:hidden; } /* 背景は「黒いページ」の .hero.is-dark で指定 */
.hero .sun{ position:absolute; left:58%; top:58%; width:520px; height:220px; transform:translate(-50%,-60%); border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 65%); }
.cloud{ position:absolute; border-radius:50%; background:rgba(255,255,255,.07); filter:blur(18px); }
.cloud.c1{ width:340px; height:46px; top:20%; left:-360px; animation:drift 70s linear infinite; }
.cloud.c2{ width:520px; height:60px; top:33%; left:-560px; animation:drift 95s linear -40s infinite; }
.cloud.c3{ width:260px; height:36px; top:12%; left:-300px; animation:drift 80s linear -20s infinite; opacity:.8; }
@keyframes drift{ to{ transform:translateX(calc(100vw + 700px)); } }
.road{ position:absolute; inset:0; width:100%; height:100%; }
.road .edge{ stroke:#4A4A4A; stroke-width:1.2; fill:none; vector-effect:non-scaling-stroke; }
.road .surface{ fill:url(#asphalt); }
.road .lane{ stroke:#E6E6E6; stroke-width:2; fill:none; stroke-dasharray:14 22; vector-effect:non-scaling-stroke; animation:run 2.2s linear infinite; }
@keyframes run{ to{ stroke-dashoffset:-36; } }
.horizon{ position:absolute; left:0; right:0; top:61%; height:1px; background:#3A3A3A; transform-origin:left; animation:draw 2.2s var(--ease) .2s both; }
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero .copy{ position:absolute; left:calc(var(--rail) + clamp(48px,6vw,96px)); right:clamp(20px,6vw,96px); top:calc(61% - 24px); transform:translateY(-100%); }
.hero h1{ font-family:var(--en); font-weight:200; font-size:clamp(38px,6vw,92px); line-height:1.02; color:#fff; }
.hero h1 span{ display:block; animation:up 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 span:nth-child(2){ animation-delay:.25s; }
@keyframes up{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.hero .below{ position:absolute; left:calc(var(--rail) + clamp(48px,6vw,96px)); right:clamp(20px,6vw,96px); top:calc(61% + 32px); animation:up 1.4s ease-out .8s both; }
.hero .sub{ font-size:clamp(16px,1.5vw,19px); font-weight:500; letter-spacing:.2em; color:#fff; }
.hero .lead{ margin-top:12px; font-size:14px; line-height:2; color:var(--sub); }
.hint{ position:absolute; right:clamp(20px,6vw,96px); bottom:calc(32px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:12px; font-family:var(--en); font-size:11px; letter-spacing:.24em; color:#8C8C8C; }
.hint i{ display:block; width:1px; height:44px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.hint i::after{ content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:#fff; animation:hint 2s ease-in-out infinite; }
@keyframes hint{ to{ top:100%; } }

/* ---------- 各ページ ---------- */
/* 02 使命 */
.photo-wide{ aspect-ratio:4/3; max-height:58vh; width:100%; border-radius:4px; background-size:cover; background-position:center; }
.sec.active .photo-wide{ animation:kb 9s ease-out .5s both; }
@keyframes kb{ from{ background-size:118%; } to{ background-size:104%; } }
.note{ margin-top:24px; padding-left:16px; border-left:2px solid var(--accent); font-size:14px; line-height:2; }
/* 03 事業 */
.rows > div{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; padding:28px 0; border-top:1px solid var(--line); }
.rows > div:last-of-type{ border-bottom:1px solid var(--line); }
.rows .no{ font-family:var(--en); font-weight:200; font-size:52px; line-height:1; color:var(--accent); }
.rows .p{ margin-top:10px; max-width:42em; }
.foot-note{ margin-top:20px; font-size:13.5px; color:var(--sub); }
/* 04 強み */
.three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,36px); }
.three article{ padding:30px 26px 28px; background:var(--pale); border-radius:4px; }
.three .k{ font-family:var(--en); font-size:13px; color:var(--accent); letter-spacing:.1em; }
.three h3{ margin-top:10px; font-size:19px; font-weight:500; letter-spacing:.06em; }
.three .p{ margin-top:12px; font-size:14px; line-height:2; }
.three .f{ margin-top:16px; padding-top:14px; border-top:1px dashed #CFCFCF; font-size:13px; color:var(--accent); line-height:1.8; }
/* 05 数字 */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,40px); }
.stats div{ border-left:1px solid var(--line); padding-left:20px; }
.stats .v{ font-family:var(--en); font-weight:200; font-size:clamp(52px,6vw,88px); line-height:1; }
.stats .v small{ font-family:var(--jp); font-size:17px; margin-left:4px; }
.stats .l{ margin-top:12px; font-size:13px; color:var(--sub); letter-spacing:.1em; }
.mix{ margin-top:clamp(36px,6vh,64px); }
.mix p{ font-size:16px; font-weight:500; letter-spacing:.06em; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.chips span{ display:inline-flex; align-items:baseline; gap:8px; padding:10px 18px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; }
.chips b{ font-family:var(--en); font-weight:300; font-size:20px; color:var(--accent); }
.mix small{ display:block; margin-top:12px; font-size:12.5px; color:var(--sub); }
/* 06 逸話 */
.q{ font-size:clamp(26px,3vw,40px); font-weight:500; letter-spacing:.08em; line-height:1.6; }
.q-by{ margin-top:14px; font-size:13px; color:var(--sub); }
/* 07 想い */
.msg .grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,72px); align-items:center; }
.msg .photo{ border-radius:4px; overflow:hidden; aspect-ratio:4/3; max-height:62vh; }
.msg .photo img{ width:100%; height:100%; object-fit:cover; object-position:46% 35%; display:block; }
.sign{ margin-top:22px; font-size:13px; color:var(--sub); letter-spacing:.1em; }
.sign b{ font-size:19px; font-weight:500; color:var(--ink); margin-left:12px; letter-spacing:.2em; }
/* 08 仲間 */
.partner-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
.team{ position:relative; border-radius:4px; aspect-ratio:4/3; max-height:60vh; background:var(--pale); }
.team img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
/* 集合写真が届くまでの代替表示 */
.team-ph{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:28px; font-size:13px; letter-spacing:.08em; color:#fff;
  background:linear-gradient(180deg,rgba(43,52,64,0) 40%,rgba(43,52,64,.5) 100%), var(--teamph) center/cover no-repeat; }
.team-ph b{ font-family:var(--en); font-weight:300; font-size:28px; letter-spacing:.02em; }
.partner-box{ padding:clamp(4px,1vw,12px) 0; }
.partner-box .btn{ margin-top:28px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tags span{ padding:6px 14px; border:1px solid #CFCFCF; border-radius:999px; font-size:12.5px; background:#fff; }
/* 09 概要 */
.co-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); }
.co{ display:grid; grid-template-columns:7.5em 1fr; border-top:1px solid var(--line); }
.co dt,.co dd{ padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.8; }
.co dt{ color:var(--sub); letter-spacing:.1em; }
.biz{ padding:24px 26px; background:var(--pale); border-radius:4px; }
.biz h3{ font-size:13px; color:var(--accent); letter-spacing:.12em; font-weight:500; }
.biz ul{ list-style:none; margin-top:12px; }
.biz li{ padding:8px 0; border-bottom:1px solid #E2E2E2; font-size:14px; }
.biz li:last-child{ border-bottom:0; }
/* 10 お問い合わせ＋フッター */
.end{ flex-direction:column; justify-content:center; text-align:center; padding-bottom:0; }
.end .in{ margin:auto 0; }
.end .big{ font-family:var(--en); font-weight:200; font-size:clamp(40px,6vw,88px); line-height:1.05; }
.end .p{ margin:22px auto 0; max-width:34em; }
.end .row{ margin-top:36px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 40px; }
.tel{ font-family:var(--en); font-size:30px; font-weight:300; }
.tel small{ display:block; font-family:var(--jp); font-size:12px; color:var(--sub); }
.footer{ width:100%; padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px)); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; font-size:12px; color:#8C8C8C; border-top:1px solid rgba(255,255,255,.16); text-align:left; }
.footer ul{ display:flex; flex-wrap:wrap; gap:6px 20px; list-style:none; }
.footer a:hover{ color:#fff; }

/* 写真はすべてモノクロに */
.photo-wide,.msg .photo img,.team img,.team-ph{ filter:grayscale(1) contrast(1.05); }

/* ---------- 黒いページ（トップ・逸話・お問い合わせ） ---------- */
.is-dark{ background:var(--black); color:#F2F2F2; }
.is-dark .p,.is-dark .lead,.is-dark .q-by,.is-dark .tel small{ color:#A6A6A6; }
.is-dark .bgword{ -webkit-text-stroke-color:rgba(255,255,255,.13); }
.is-dark .btn{ background:#fff; color:#111; border-color:#fff; }
.is-dark .btn:hover{ background:transparent; color:#fff; }
.is-dark .tel{ color:#fff; }
.is-dark .door-in::before,.is-dark .door-in::after{ background:var(--black); }
/* トップは黒の中に地平線のグラデーション（.is-dark より後に書いて優先させる） */
.hero.is-dark{ background:linear-gradient(180deg,#0B0B0B 0%, #141414 61%, #0F0F0F 61%); }

/* 黒いページにいる間は、ヘッダー・ルートも白黒反転 */
body.on-dark .header{ color:#fff; }
body.on-dark .header.solid{ background:rgba(15,15,15,.88); border-color:rgba(255,255,255,.1); }
body.on-dark .logo img{ filter:invert(1); }
body.on-dark .nav ul a:hover, body.on-dark .nav ul a.on{ color:#fff; }
body.on-dark .nav ul a::after{ background:#fff; }
body.on-dark .header .btn{ background:#fff; color:#111; border-color:#fff; }
body.on-dark .header .btn:hover{ background:transparent; color:#fff; }
body.on-dark .rail{ background:rgba(255,255,255,.18); }
body.on-dark .rail .fill{ background:#fff; }
body.on-dark .rail button::before{ background:var(--black); border-color:#555; }
body.on-dark .rail button.on::before{ background:#fff; border-color:#fff; }
body.on-dark .rail button.on::after{ border-color:#fff; }
body.on-dark .rail button span{ color:#999; } body.on-dark .rail button.on span{ color:#fff; }
body.on-dark .count{ color:#8C8C8C; } body.on-dark .count b{ color:#fff; }

/* ====== セクション切り替え時の演出 ====== */
/* 1) 切り替えの瞬間、光の帯が画面を斜めに駆け抜ける（白地では黒、黒地では白に反転して見える） */
.swipe{ position:fixed; inset:0; z-index:20; pointer-events:none; overflow:hidden; }
.swipe i{ position:absolute; left:-20%; right:-20%; height:30vh; top:110%; transform:skewY(-8deg); mix-blend-mode:difference;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 44%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.16) 56%, rgba(255,255,255,0) 100%); }
.swipe.down i{ animation:passDown 1.15s var(--ease) both; }
.swipe.up i{ animation:passUp 1.15s var(--ease) both; }
@keyframes passDown{ from{ top:110%; } to{ top:-60%; } }
@keyframes passUp{ from{ top:-60%; } to{ top:110%; } }

/* 2) 背景の大きな英字（輪郭だけ）が、ページごとにすべり込む */
.bgwrap{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bgword{ position:absolute; right:-.04em; bottom:-.12em; z-index:0; pointer-events:none; white-space:nowrap;
  font-family:var(--en); font-weight:200; font-style:italic; font-size:clamp(120px,17vw,260px); line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px #E0E0E0; opacity:0; transform:translateX(12%); transition:opacity 1.4s ease-out, transform 1.8s cubic-bezier(.2,.7,.2,1); }
.sec.active .bgword{ opacity:1; transform:none; transition-delay:.25s; }
.sec > .in{ position:relative; z-index:1; }

/* 3) 見出しが下からせり上がり、英字ラベルの横に線が引かれる */
.tag h2{ clip-path:inset(0 0 100% 0); transform:translateY(40%); transition:clip-path .9s var(--ease), transform .9s var(--ease); }
.sec.active .tag h2{ clip-path:inset(-10% 0 -10% 0); transform:none; transition-delay:.4s; }
.tag .en{ position:relative; padding-right:64px; }
.tag .en::after{ content:""; position:absolute; right:0; top:50%; width:48px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.sec.active .tag .en::after{ transform:scaleX(1); transition-delay:.8s; }

/* 4) 写真は「ドアが開く」ように中央から左右へ開いて現れる */
.door-in{ position:relative; overflow:hidden; }
.door-in::before,.door-in::after{ content:""; position:absolute; top:0; bottom:0; width:50.5%; z-index:2; background:var(--white); transition:transform 1.3s var(--ease); }
.door-in::before{ left:0; } .door-in::after{ right:0; }
.sec.active .door-in::before{ transform:translateX(-101%); transition-delay:.5s; }
.sec.active .door-in::after{ transform:translateX(101%); transition-delay:.5s; }
.door-in > *{ transition:transform 2.4s cubic-bezier(.2,.6,.2,1) .5s; }
.door-in img{ transform:scale(1.12); }
.sec.active .door-in img{ transform:scale(1); }

/* 5) カードと行は、少しずつ時間差で浮かび上がる */
.three article,.rows > div,.stats > div,.chips span,.biz li{ opacity:0; transform:translateY(22px); transition:opacity .8s ease-out, transform .9s cubic-bezier(.2,.7,.2,1); }
.sec.active .three article,.sec.active .rows > div,.sec.active .stats > div,.sec.active .chips span,.sec.active .biz li{ opacity:1; transform:none; }
.sec.active .three article:nth-child(1),.sec.active .rows > div:nth-child(1),.sec.active .stats > div:nth-child(1){ transition-delay:.55s; }
.sec.active .three article:nth-child(2),.sec.active .rows > div:nth-child(2),.sec.active .stats > div:nth-child(2){ transition-delay:.7s; }
.sec.active .three article:nth-child(3),.sec.active .stats > div:nth-child(3){ transition-delay:.85s; }
.sec.active .chips span:nth-child(1){ transition-delay:1.1s; } .sec.active .chips span:nth-child(2){ transition-delay:1.2s; } .sec.active .chips span:nth-child(3){ transition-delay:1.3s; } .sec.active .chips span:nth-child(4){ transition-delay:1.4s; }
.sec.active .biz li:nth-child(1){ transition-delay:.7s; } .sec.active .biz li:nth-child(2){ transition-delay:.78s; } .sec.active .biz li:nth-child(3){ transition-delay:.86s; } .sec.active .biz li:nth-child(4){ transition-delay:.94s; } .sec.active .biz li:nth-child(5){ transition-delay:1.02s; } .sec.active .biz li:nth-child(6){ transition-delay:1.1s; }

/* 6) 引用とコピーは、1行ずつ現れる */
.q .ln,.end .big .ln{ display:block; overflow:hidden; }
.q .ln > span,.end .big .ln > span{ display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.sec.active .q .ln > span,.end.active .big .ln > span{ transform:none; }
.sec.active .q .ln:nth-child(1) > span,.end.active .big .ln:nth-child(1) > span{ transition-delay:.45s; }
.sec.active .q .ln:nth-child(2) > span,.end.active .big .ln:nth-child(2) > span{ transition-delay:.62s; }

/* 7) 停車地に着いたとき、点から波紋が広がる */
.rail button.on::after{ content:""; position:absolute; inset:3px; border-radius:50%; border:1px solid var(--accent); animation:ripple 1.4s ease-out .9s both; }
@keyframes ripple{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(3.2); opacity:0; } }

/* ---------- 動きを減らす設定の時は、演出をすべて無効化 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rv,.three article,.rows > div,.stats > div,.chips span,.biz li{ opacity:1; transform:none; }
  .tag h2{ clip-path:none; transform:none; } .door-in::before,.door-in::after,.swipe{ display:none; }
  .q .ln > span,.end .big .ln > span{ transform:none; } .bgword{ opacity:1; transform:none; }
}

/* ---------- タブレット・スマホ（通常スクロール） ---------- */
@media (max-width: 1023px){
  .rail,.count{ display:none; }
  .header{ padding-left:20px; }
  .nav ul{ display:none; }
  .sec{ padding-left:20px; padding-right:20px; }
  .hero .copy,.hero .below{ left:20px; right:20px; }
  .two,.three,.stats,.msg .grid,.co-grid,.partner-grid{ grid-template-columns:1fr; }
  .rows > div{ grid-template-columns:1fr; gap:6px; }
  .stats div{ border-left:0; border-top:1px solid var(--line); padding:18px 0 0; }
  .hero{ min-height:720px; }
}
@media (max-width: 600px){ .nav .btn{ padding:10px 16px; font-size:12px; } .co{ grid-template-columns:6em 1fr; } }

/* ==========================================================
   下層ページ（お問い合わせ・送信完了・プライバシーポリシー）
   通常スクロール。ヘッダーは常に .solid、フッターは黒帯。
   ========================================================== */
.sub-main{ position:relative; overflow:hidden; min-height:70svh; padding:calc(136px + env(safe-area-inset-top,0px)) clamp(20px,6vw,96px) clamp(72px,10vh,120px) calc(var(--rail) + clamp(48px,6vw,96px)); }
.sub-main > .in{ position:relative; z-index:1; width:100%; max-width:780px; }
.sub-main .tag{ margin-bottom:clamp(24px,4vh,40px); }
.sub-main .tag h1{ font-size:clamp(26px,2.6vw,34px); font-weight:500; letter-spacing:.14em; clip-path:inset(0 0 100% 0); transform:translateY(40%); transition:clip-path .9s var(--ease), transform .9s var(--ease); }
.sub-main .p a.u, .sub-main .prose a.u, .sub-main .consent a.u{ text-decoration:underline; text-underline-offset:4px; }
.sub-main .p a.u:hover, .sub-main .prose a.u:hover, .sub-main .consent a.u:hover{ color:var(--sub); }
/* 入場の動き（読み込み後に body.loaded） */
.loaded .sub-main .bgword{ opacity:1; transform:none; transition-delay:.15s; }
.loaded .sub-main .tag h1{ clip-path:inset(-10% 0 -10% 0); transform:none; transition-delay:.2s; }
.loaded .sub-main .tag .en::after{ transform:scaleX(1); transition-delay:.6s; }
.sub-main .lg, .sub-main .p, .sub-main .form, .sub-main .prose, .sub-main .form-alert, .done .big, .done .row{ opacity:0; transform:translateY(18px); transition:opacity 1s ease-out, transform 1s cubic-bezier(.2,.7,.2,1); }
.loaded .sub-main .lg, .loaded .sub-main .p, .loaded .sub-main .form, .loaded .sub-main .prose, .loaded .sub-main .form-alert, .loaded .done .big, .loaded .done .row{ opacity:1; transform:none; }
.loaded .sub-main .lg{ transition-delay:.3s; } .loaded .sub-main .p{ transition-delay:.42s; } .loaded .sub-main .form-alert{ transition-delay:.5s; } .loaded .sub-main .form, .loaded .sub-main .prose{ transition-delay:.54s; }

/* フォーム */
.form{ margin-top:clamp(32px,5vh,56px); }
.form .row{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:10px 28px; padding:22px 0; border-top:1px solid var(--line); }
.form .row:last-of-type{ border-bottom:1px solid var(--line); }
.form .lbl{ font-size:14px; letter-spacing:.08em; padding-top:12px; line-height:1.6; }
.req,.opt{ display:inline-block; margin-left:10px; padding:2px 7px; font-size:11px; letter-spacing:.1em; line-height:1.4; vertical-align:middle; }
.req{ background:#111; color:#fff; }
.opt{ border:1px solid #BDBDBD; color:var(--sub); }
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea{ width:100%; padding:12px 14px; border:1px solid #CFCFCF; border-radius:0; background:#fff; font:inherit; font-size:15px; line-height:1.6; color:var(--ink); transition:border-color .3s; -webkit-appearance:none; appearance:none; }
.form input:focus,.form textarea:focus{ border-color:#111; outline:none; }
.form input:focus-visible,.form textarea:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.form textarea{ min-height:200px; resize:vertical; }
.form .radios{ display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:12px; }
.form .radios label,.form .consent label{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; cursor:pointer; }
.form input[type="radio"],.form input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:#111; cursor:pointer; }
.form .help{ margin-top:8px; font-size:12.5px; color:var(--sub); }
.form .err{ margin-top:8px; font-size:13px; color:#B3261E; }
.form .row.is-error input,.form .row.is-error textarea{ border-color:#B3261E; }
.form .consent.is-error label{ color:#B3261E; }
.form-alert{ margin-top:28px; padding:14px 20px; border:1px solid #B3261E; color:#B3261E; font-size:14px; line-height:1.8; }
.form .consent{ margin-top:32px; text-align:center; }
.form .consent .err{ text-align:center; }
.form .submit{ margin-top:28px; text-align:center; }
.btn.lg{ padding:18px 64px; font-size:15px; letter-spacing:.14em; cursor:pointer; font-family:inherit; }
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* 送信完了 */
.done{ display:flex; align-items:center; }
.done .in{ text-align:center; margin:0 auto; }
.done .big{ font-family:var(--en); font-weight:200; font-size:clamp(40px,6vw,88px); line-height:1.05; }
.done .lg{ margin-top:28px; }
.done .p{ margin:18px auto 0; max-width:36em; }
.done .row{ margin-top:36px; }
.loaded .done .big{ transition-delay:.1s; } .loaded .done .row{ transition-delay:.6s; }

/* 文章ページ */
.prose{ margin-top:clamp(32px,5vh,56px); }
.prose .lead{ font-size:15px; line-height:2.05; color:var(--sub); letter-spacing:.04em; }
.prose h2{ margin-top:44px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:18px; font-weight:500; letter-spacing:.1em; }
.prose p{ margin-top:14px; font-size:14.5px; line-height:2; letter-spacing:.03em; }
.prose ul{ margin-top:12px; padding-left:1.4em; }
.prose li{ margin-top:4px; font-size:14.5px; line-height:2; letter-spacing:.03em; }
.prose .date{ margin-top:44px; font-size:13px; color:var(--sub); text-align:right; line-height:2; }

/* 下層ページのフッター（黒帯） */
.footer-sub{ padding:8px clamp(20px,6vw,96px) 0 calc(var(--rail) + clamp(48px,6vw,96px)); }
.footer-sub .footer{ border-top:0; }

@media (prefers-reduced-motion: reduce){
  .sub-main .tag h1{ clip-path:none; transform:none; }
  .sub-main .lg, .sub-main .p, .sub-main .form, .sub-main .prose, .sub-main .form-alert, .done .big, .done .row{ opacity:1; transform:none; }
}
@media (max-width: 1023px){
  .sub-main{ padding-left:20px; padding-right:20px; padding-top:calc(112px + env(safe-area-inset-top,0px)); }
  .footer-sub{ padding-left:20px; padding-right:20px; }
  .form .row{ grid-template-columns:1fr; gap:8px; }
  .form .lbl{ padding-top:0; }
}
@media (max-width: 600px){
  .btn.lg{ width:100%; justify-content:center; padding:16px 20px; }
  .form .radios{ flex-direction:column; gap:12px; }
}