/* ══════════════════════════════════════════════════════════════
   RE:SLIDE ／ デッキ版（2026-08-25 自作デザインを実装）
   ------------------------------------------------------------
   ゆうたさんがCanvaで組んだ13枚を、そのまま動くページにしたもの。
   デザインの寸法は書き出し（1920×1080）から起こしている。

   単位のきまり：**1u = 画面幅の1%**（1920px時に19.2px）
     --u: min(1vw, 1.7778vh) にすると 56.25u の高さが必ず画面に収まる。
     だから 1920px の値は「px ÷ 19.2」で u に直せる。
       例）見出し60px → 3.13u ／ 本文18px → 0.94u ／ 中身の幅1726px → 89.9u
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 色（書き出しから採取） */
  --ink:#1A1A18; --sub:#6E6A5E;
  --key:#1B5E8C;          /* 濃い青。見出し・表の頭・帯 */
  --key-d:#144A6E; --key-l:#2E7BB0;
  --blue-bg:#1B5E8C;      /* 02 の地 */
  --blue-ct:#2E7BB0;      /* 14 の地 */
  --warm:#F7F5F1;         /* 薄い地 */
  --gray:#E5E1DA;         /* 03 の地。warmより一段濃い */
  --line:#E3E0D9;
  --ghost:#DEDAD2;        /* 英字の透かし */
  --white:#fff;
  --ja:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  --en:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --e:cubic-bezier(.22,1,.36,1);

  /* **スマホは 100vh も 100dvh も当てにならない。**
     アドレスバーの出入りで実際の見える高さが変わるので、
     JS が入れる --vh（window.innerHeight）を基準にする */
  --vh: 100dvh;
  --u: min(1vw, calc(var(--vh) * 0.017778));
  --sw: calc(var(--u)*90);      /* 中身の幅 1726/1920 */
  --top: calc(var(--u)*6.6);    /* 見出しの上端 */
}

*{ margin:0; padding:0; box-sizing:border-box }
html,body{ height:100%; overflow:hidden; background:var(--ink) }
body{
  font-family:var(--ja); color:var(--ink);
  font-size:calc(var(--u)*.94); line-height:1.8; letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
b,strong{ font-weight:700 }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }

/* ───────── デッキ本体 ───────── */
.deck{
  display:flex; height:var(--vh);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none;
}
.deck::-webkit-scrollbar{ display:none }
.sl{
  position:relative; flex:0 0 100vw; width:100vw; height:var(--vh);
  scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; align-items:start; justify-items:center;
  padding-top:var(--top); background:var(--white); overflow:hidden;
}
.sl.warm{ background:var(--warm) }
.sl.gray{ background:var(--gray) }
.sl.key { background:var(--blue-bg); color:#fff }
.sl.ct  { background:var(--blue-ct); color:#fff }
.sl.fv  { align-items:center; padding-top:0; background:var(--key) }

.st{ position:relative; z-index:2; width:var(--sw); max-height:calc(var(--u)*43.5) }
/* 見出しは上で固定、その下の中身は残りの高さの真ん中へ */
.st:has(> .sh){ height:calc(var(--u)*43.5); display:flex; flex-direction:column }
.st:has(> .sh) > .sh{ flex:0 0 auto }
.st:has(> .sh) > .sh + *{ margin-top:auto }
.st:has(> .sh) > :last-child{ margin-bottom:auto }

/* ───────── 上のバー ───────── */
.hd{
  position:fixed; top:calc(var(--u)*1.67); left:calc(var(--u)*1.67); right:calc(var(--u)*1.67);
  z-index:40; display:flex; align-items:center; justify-content:space-between; pointer-events:none;
}
.hd > *{ pointer-events:auto }
.hd .brand{
  display:flex; align-items:center; gap:calc(var(--u)*1.4);
  height:calc(var(--u)*2.76); padding:0 calc(var(--u)*1.6);
  background:var(--warm);
}
.hd .brand img{ width:calc(var(--u)*5.2) }
.hd .brand .sv{
  font-family:var(--en); font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.16em;
  padding-left:calc(var(--u)*1.4); border-left:1px solid #CFCAC1; color:var(--ink);
}
.hd .hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  width:calc(var(--u)*17.5); height:calc(var(--u)*2.76);
  background:var(--key); color:#fff; font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.06em;
  transition:background .2s var(--e);
}
.hd .hbtn:hover{ background:var(--key-d) }
.hd .hbtn .ar{ font-family:var(--en); font-weight:400 }
/* 青地の枚では、ボタンを白地に反転する */
.deck[data-bg="key"] ~ .hd .hbtn{ background:#fff; color:var(--key) }
.deck[data-bg="key"] ~ .hd .hbtn:hover{ background:rgba(255,255,255,.86) }

/* ノンブルと社名 */
.no{
  position:absolute; right:0; bottom:calc(var(--u)*2.2); z-index:3;
  min-width:calc(var(--u)*6.2); height:calc(var(--u)*2.4); padding:0 calc(var(--u)*1.4);
  display:grid; place-items:center; background:var(--white);
  border-radius:calc(var(--u)*1.2) 0 0 calc(var(--u)*1.2);
  font-family:var(--en); font-size:calc(var(--u)*1); font-weight:700; color:var(--ink);
}
.cp{
  position:absolute; left:calc(var(--u)*1.2); bottom:calc(var(--u)*1); z-index:3;
  font-family:var(--en); font-size:calc(var(--u)*.73); color:var(--sub);
}
.sl.key .cp,.sl.ct .cp,.sl.fv .cp{ color:rgba(255,255,255,.62) }

/* ───────── 見出し ───────── */
.sh{ text-align:center }
.sh .en{
  display:block; font-family:var(--en); font-weight:700;
  font-size:calc(var(--u)*3.13); letter-spacing:.06em; line-height:1.1; color:var(--ghost);
}
.sl.key .sh .en,.sl.ct .sh .en{ color:rgba(255,255,255,.32) }
.sh .ja{
  display:block; margin-top:calc(var(--u)*.9);
  font-size:calc(var(--u)*2.08); font-weight:700; letter-spacing:.04em; line-height:1.4;
}
.sh .rule{
  display:block; width:calc(var(--u)*3.2); height:1px; margin:calc(var(--u)*.9) auto 0;
  background:currentColor; opacity:.32;
}
.sh .msg{
  margin-top:calc(var(--u)*1.2); font-size:calc(var(--u)*1.35); line-height:1.7; letter-spacing:.04em;
}
/* 左寄せの見出し（理由01〜03） */
.rh{ text-align:left }
.rh .en{
  display:block; font-family:var(--en); font-weight:700;
  font-size:calc(var(--u)*3.13); letter-spacing:.05em; line-height:1.1; color:var(--ghost);
}
.rh .ja{ display:block; margin-top:calc(var(--u)*1); font-size:calc(var(--u)*2.08); font-weight:700; color:var(--key) }
.rh .lead{ margin-top:calc(var(--u)*1); font-size:calc(var(--u)*1.04); line-height:1.75; font-weight:700 }

/* ───────── 共通の部品 ───────── */
.card{
  background:#fff; border-radius:calc(var(--u)*.6);
  box-shadow:0 calc(var(--u)*.2) calc(var(--u)*1.1) rgba(26,26,24,.07);
}
.close{ margin-top:calc(var(--u)*2); text-align:center; font-size:calc(var(--u)*1.35); font-weight:700; line-height:1.7 }
.close .k{ color:var(--key) }
.sl.key .close,.sl.ct .close{ color:#fff }
.note{ margin-top:calc(var(--u)*.6); text-align:center; font-size:calc(var(--u)*.73); color:var(--sub) }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  height:calc(var(--u)*3); padding:0 calc(var(--u)*2.4); border-radius:calc(var(--u)*.2);
  background:#fff; color:var(--key); border:1px solid rgba(27,94,140,.4);
  font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.06em;
  transition:background .2s var(--e), color .2s var(--e);
}
.btn:hover{ background:var(--key); color:#fff; border-color:var(--key) }
.btn .ar{ font-family:var(--en) }

/* ══════════════ 01 FV ══════════════ */
/* **背景は敷き直さず、デザインと同じ1枚の画像を使う。**
   その場でタイルを組むと、画面幅ごとに並びが変わってデザインと合わなくなる */
.fv .bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.fv .bg img{ width:100%; height:100%; object-fit:cover }
.fv .st{ display:grid; grid-template-columns:1fr 1.04fr; gap:calc(var(--u)*4.4); align-items:center; color:#fff }
.fv .kicker{ font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.9) }
.fv h1{ margin-top:calc(var(--u)*1.5); font-size:calc(var(--u)*4.4); font-weight:700; line-height:1.4; letter-spacing:.02em }
.fv .sub{ margin-top:calc(var(--u)*1.8); font-size:calc(var(--u)*1.25); line-height:1.75 }
.fv .lead{ margin-top:calc(var(--u)*2.6); font-size:calc(var(--u)*.83); color:rgba(255,255,255,.86) }
.fv .cta{
  margin-top:calc(var(--u)*.7); display:inline-flex; align-items:center; justify-content:center; gap:.8em;
  height:calc(var(--u)*3.2); padding:0 calc(var(--u)*3);
  background:#fff; color:var(--key); font-size:calc(var(--u)*1.04); font-weight:700; letter-spacing:.06em;
  transition:transform .25s var(--e);
}
.fv .cta:hover{ transform:translateX(calc(var(--u)*.4)) }
.fv .cta .ar{ font-family:var(--en) }

/* PCのモック。**中で資料が切り替わる** */
/* PCの筐体。**画面・ふち・台の3つで組む**（採寸：箱 42.66u × 32.19u） */
.mock{ position:relative; width:calc(var(--u)*42.66) }
.mock .pc{
  padding:calc(var(--u)*.55); background:#2A3138; border-radius:calc(var(--u)*.5);
  box-shadow:0 calc(var(--u)*1.8) calc(var(--u)*4.4) rgba(0,0,0,.34);
}
.mock .screen{
  position:relative; aspect-ratio:16/10; background:#fff; overflow:hidden;
  border-radius:calc(var(--u)*.2);
}
.mock .foot{
  width:106%; height:calc(var(--u)*.68); margin:0 auto;
  background:linear-gradient(#3A4148,#242A30);
  border-radius:0 0 calc(var(--u)*.45) calc(var(--u)*.45);
  display:grid; place-items:center;
}
.mock .foot .notch{ width:12%; height:calc(var(--u)*.16); border-radius:99px; background:rgba(255,255,255,.22) }
.mock .sc{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--e) }
.mock .sc.on{ opacity:1 }
.mock .sc img{ width:100%; height:100%; object-fit:contain; background:#fff }
.mock .dots{
  position:absolute; left:0; right:0; bottom:calc(var(--u)*.8); z-index:3;
  display:flex; justify-content:center; gap:calc(var(--u)*.4);
}
.mock .dots i{ width:calc(var(--u)*.34); height:calc(var(--u)*.34); border-radius:50%; background:rgba(26,26,24,.2) }
.mock .dots i.on{ background:var(--key) }

.fv .facts{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(16,62,94,.94); backdrop-filter:blur(3px);
}
.fv .facts .f{ padding:calc(var(--u)*1.4) calc(var(--u)*2) calc(var(--u)*3.4); text-align:center; color:#fff }
.fv .facts .f + .f{ border-left:1px solid rgba(255,255,255,.28) }
.fv .facts .v{ font-family:var(--en); font-size:calc(var(--u)*2.4); font-weight:700; line-height:1.15 }
.fv .facts .v small{ font-family:var(--ja); font-size:calc(var(--u)*1.15); font-weight:700; margin-left:.2em }
.fv .facts .k{ margin-top:calc(var(--u)*.2); font-size:calc(var(--u)*.83); color:rgba(255,255,255,.82) }

/* ══════════════ 02 SERVICE ══════════════ */
.def{ text-align:center }
.def .body{ font-size:calc(var(--u)*2.4); font-weight:700; line-height:1.6; letter-spacing:.02em }
.def .cap{ margin-top:calc(var(--u)*2); font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.1em }
.cols4{ margin-top:calc(var(--u)*1.2); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(var(--u)*1.2) }
.scope .c{ position:relative; padding:calc(var(--u)*3) calc(var(--u)*1.5) calc(var(--u)*1.8); text-align:center }
.scope .c .n{
  position:absolute; top:calc(var(--u)*-1.5); left:50%; transform:translateX(-50%);
  width:calc(var(--u)*3); height:calc(var(--u)*3); border-radius:50%;
  background:var(--key-d); color:#fff; display:grid; place-items:center;
  font-family:var(--en); font-size:calc(var(--u)*1.04); font-weight:700;
}
.scope .c b{ display:block; font-size:calc(var(--u)*1.25); color:var(--key) }
.scope .c .bar{ display:block; width:calc(var(--u)*2.4); height:1px; margin:calc(var(--u)*.9) auto; background:var(--line) }
.scope .c p{ font-size:calc(var(--u)*.94); line-height:1.75; color:var(--ink); text-align:left }

/* ══════════════ 03 PROBLEM ══════════════ */
.stmt{ text-align:center; font-size:calc(var(--u)*2.6); font-weight:700; line-height:1.55; letter-spacing:.02em }
.cols3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*1.6) }
.voice{ padding:calc(var(--u)*2.2) calc(var(--u)*2) }
.voice .q{ font-family:var(--en); font-size:calc(var(--u)*1.25); font-weight:700 }
.voice .t{ margin-top:calc(var(--u)*1.2); font-size:calc(var(--u)*1.25); font-weight:700; line-height:1.5 }
.voice .bar{ display:block; height:1px; margin:calc(var(--u)*.9) 0; background:var(--line) }
.voice .d{ font-size:calc(var(--u)*.94); line-height:1.75 }

/* ══════════════ 04 WORKS ══════════════ */
.tabs{ display:flex; justify-content:center; gap:calc(var(--u)*.8) }
.tab{
  width:calc(var(--u)*13); height:calc(var(--u)*2.6); border-radius:calc(var(--u)*.2);
  border:1px solid var(--line); background:#fff; color:var(--sub);
  font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.04em; transition:all .2s var(--e);
}
.tab:hover{ color:var(--ink); border-color:#CFC9BB }
.tab.on{ background:var(--key); border-color:var(--key); color:#fff }
.wk{ margin-top:calc(var(--u)*1.8); display:grid; grid-template-columns:.72fr 1.28fr; gap:calc(var(--u)*3.4); align-items:start }
.panel{ display:none }
.panel.on{ display:block }
.wk .co{ font-size:calc(var(--u)*1.35); font-weight:700; letter-spacing:.04em }
.wk .meta{ margin-top:calc(var(--u)*1.4); border-top:1px solid var(--line) }
.wk .mrow{
  display:grid; grid-template-columns:calc(var(--u)*9) minmax(0,1fr); gap:calc(var(--u)*.8);
  padding:calc(var(--u)*.9) 0; border-bottom:1px solid var(--line); font-size:calc(var(--u)*.94);
}
.wk .mk{ color:var(--sub) }
.wk .pts{ margin-top:calc(var(--u)*1.4); list-style:none }
.wk .pts li{
  position:relative; padding-left:calc(var(--u)*1.3); margin-top:calc(var(--u)*.9);
  font-size:calc(var(--u)*.9); line-height:1.7; color:var(--ink);
}
.wk .pts li::before{
  content:""; position:absolute; left:0; top:calc(var(--u)*.6);
  width:calc(var(--u)*.5); height:calc(var(--u)*.5); border-radius:50%; background:var(--key);
}

/* 資料を1枚ずつめくって見せる窓 */
.viewer{ position:relative }
/* **窓の大きさは高さで決める。**幅（16:10）で決めると、下のサムネイルと
   結びの一行が1枚に収まらなくなる。中の資料は contain なので比率は崩れない */
.viewer .stage{
  position:relative; height:calc(var(--u)*23); background:var(--warm);
  border:1px solid var(--line); overflow:hidden;
}
.viewer .stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .35s var(--e);
}
.viewer .stage img.on{ opacity:1 }
.viewer .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:calc(var(--u)*2.8); height:calc(var(--u)*2.8); border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 calc(var(--u)*.1) calc(var(--u)*.6) rgba(0,0,0,.16);
  display:grid; place-items:center; font-family:var(--en); font-size:calc(var(--u)*1.4); color:var(--key);
  transition:background .2s var(--e);
}
.viewer .nav:hover{ background:#fff }
.viewer .nav.prev{ left:calc(var(--u)*1) }
.viewer .nav.next{ right:calc(var(--u)*1) }
.viewer .nav:disabled{ opacity:.3; cursor:default }
.viewer .bar{
  margin-top:calc(var(--u)*.8); display:flex; align-items:center; gap:calc(var(--u)*1.2);
}
.viewer .cnt{ font-family:var(--en); font-size:calc(var(--u)*.9); font-weight:700; color:var(--sub); white-space:nowrap }
.viewer .cnt b{ color:var(--key); font-size:calc(var(--u)*1.15) }
.viewer .thumbs{ display:flex; gap:calc(var(--u)*.4); overflow-x:auto; scrollbar-width:none; flex:1 }
.viewer .thumbs::-webkit-scrollbar{ display:none }
.viewer .thumbs button{
  flex:0 0 calc(var(--u)*3.6); aspect-ratio:16/10; border:1px solid var(--line); background:#fff;
  overflow:hidden; opacity:.5; transition:opacity .2s var(--e), border-color .2s var(--e);
}
.viewer .thumbs button.on{ opacity:1; border-color:var(--key) }
.viewer .thumbs img{ width:100%; height:100%; object-fit:cover }

/* ══════════════ 05 REASON 扉 ══════════════ */
.rcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*1.6) }
.rcards .c{ padding:calc(var(--u)*2.2) calc(var(--u)*2) }
.rcards .n{ font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.1em; color:var(--key) }
.rcards .t{ margin-top:calc(var(--u)*.7); font-size:calc(var(--u)*1.56); font-weight:700; line-height:1.45; color:var(--key) }
.rcards .fig{
  position:relative; margin:calc(var(--u)*1.6) 0; height:calc(var(--u)*10);
  display:grid; place-items:center; overflow:hidden;
}
/* **画像は高さで決める。**max-height:100% は入れ子の条件で効かないことがある */
.rcards .fig img{ height:100%; width:100%; object-fit:contain }
.rcards .d{ font-size:calc(var(--u)*.94); line-height:1.75 }

/* 理由02の棒グラフ。**値札は棒の上、丸は2本の間**に置く */
.chart{
  position:relative; width:100%; height:100%;
  display:flex; align-items:flex-end; justify-content:center; gap:calc(var(--u)*6.4);
  padding-bottom:calc(var(--u)*.2); border-bottom:1px solid rgba(27,94,140,.5);
}
.chart .b{ position:relative; width:calc(var(--u)*3.4); background:var(--line) }
.chart .b.us{ background:var(--key) }
.chart .b i{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  margin-bottom:calc(var(--u)*.4); font-style:normal; font-size:calc(var(--u)*.78);
  font-weight:700; line-height:1.35; white-space:nowrap; text-align:center;
}
.chart .half{
  position:absolute; left:50%; top:14%; transform:translateX(-50%);
  width:calc(var(--u)*4.4); height:calc(var(--u)*4.4); border-radius:50%;
  background:var(--key); color:#fff; display:grid; place-items:center; text-align:center;
  font-size:calc(var(--u)*.8); font-weight:700; line-height:1.3;
}
/* 理由03のパズル。**継ぎ目に丸い凸凹を作って、噛み合っていることを見せる** */
.puzzle{ position:relative; display:flex; align-items:center; justify-content:center; width:100% }
.puzzle span{
  width:calc(var(--u)*8.6); height:calc(var(--u)*6.4); background:var(--key); color:#fff;
  display:grid; place-items:center; font-size:calc(var(--u)*1.25); font-weight:700;
}
.puzzle span:first-child{ border-radius:calc(var(--u)*.2) 0 0 calc(var(--u)*.2) }
.puzzle span:last-child{ border-radius:0 calc(var(--u)*.2) calc(var(--u)*.2) 0 }
.puzzle::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--u)*1.7); height:calc(var(--u)*1.7); border-radius:50%;
  background:#fff; box-shadow:0 0 0 calc(var(--u)*.18) var(--key);
}

/* ══════════════ 06 理由01 ══════════════ */
/* 採寸：枠 28.91u幅 ／ ラベルの箱 2.24u高 ／ ラベルと画像の間 0.57u */
.works3{ margin-top:calc(var(--u)*1.6); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*1.51) }
.works3 .lb{
  height:calc(var(--u)*2.24); display:grid; place-items:center; background:#fff;
  border:1px solid var(--line); font-size:calc(var(--u)*1.04); font-weight:700; color:var(--key);
}
.works3 img{ margin-top:calc(var(--u)*.57); width:100%; aspect-ratio:551/476; object-fit:cover }

/* ══════════════ 07 理由02（比較表）══════════════ */
.cmpw{ margin-top:calc(var(--u)*1.8); overflow-x:auto; -webkit-overflow-scrolling:touch }
.cmp{ width:100%; min-width:calc(var(--u)*70); border-collapse:collapse; font-size:calc(var(--u)*.94) }
.cmp th,.cmp td{ padding:calc(var(--u)*.9) calc(var(--u)*.8); border:1px solid var(--line); text-align:center; line-height:1.5 }
.cmp thead th{ font-weight:700; background:var(--gray) }
.cmp thead th.us{ background:var(--key); color:#fff }
.cmp th.k{ background:var(--gray); font-weight:700; white-space:nowrap }
.cmp td.us{ background:#EAF2F8; font-weight:700; color:var(--key) }
.cmpn{ margin-top:calc(var(--u)*.7); text-align:right; font-size:calc(var(--u)*.73); color:var(--sub) }

/* ══════════════ 08 理由03 ══════════════ */
.two{ margin-top:calc(var(--u)*1.8); display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*2.4) }
.two .c{ padding:calc(var(--u)*1.8) }
.two .n{ font-family:var(--en); font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.14em; color:var(--key) }
.two .t{ margin-top:calc(var(--u)*.3); font-size:calc(var(--u)*1.35); font-weight:700; color:var(--key) }
.two ol{ margin-top:calc(var(--u)*1.2); list-style:none }
.two ol li{
  display:grid; grid-template-columns:calc(var(--u)*2.2) minmax(0,1fr); gap:calc(var(--u)*.9);
  align-items:start; margin-top:calc(var(--u)*.9); font-size:calc(var(--u)*1.04); line-height:1.6;
}
.two ol li i{
  font-style:normal; font-family:var(--en); font-size:calc(var(--u)*.73); font-weight:700;
  background:var(--key); color:#fff; border-radius:calc(var(--u)*.16);
  display:grid; place-items:center; height:calc(var(--u)*1.5); margin-top:calc(var(--u)*.2);
}
.two figure{ margin-top:calc(var(--u)*1.1) }
.two figure img{ width:100%; aspect-ratio:791/242; object-fit:cover }

/* ══════════════ 09 PRICE ══════════════ */
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*2.4) }
.plan{ padding:calc(var(--u)*2.4) calc(var(--u)*2.4) calc(var(--u)*2); text-align:center }
.plan .tier{ font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.08em; color:var(--key) }
.plan .nm{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*1.66); font-weight:700 }
.plan .pv{ margin-top:calc(var(--u)*1); font-family:var(--en); font-size:calc(var(--u)*4.4); font-weight:700; line-height:1.05; color:var(--key) }
.plan.b .pv{ color:var(--ink) }
.plan .pv .u{ font-family:var(--ja); font-size:calc(var(--u)*1.35); color:var(--ink); margin-left:.15em }
.plan .d{ margin-top:calc(var(--u)*1.4); font-size:calc(var(--u)*.94); line-height:1.75; text-align:left }
.plan .fitl{
  margin-top:calc(var(--u)*1.6); height:calc(var(--u)*2.4); display:grid; place-items:center;
  border:1px solid rgba(27,94,140,.45); color:var(--key);
  font-size:calc(var(--u)*.94); font-weight:700; letter-spacing:.04em;
}
.plan .fit{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*.94) }

/* ══════════════ 10 FLOW ══════════════ */
.flow{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:calc(var(--u)*.78) }
.step .who{
  height:calc(var(--u)*1.82); display:grid; place-items:center;
  background:var(--gray); color:var(--ink); font-size:calc(var(--u)*.83); font-weight:700; letter-spacing:.06em;
}
.step.you .who{ background:var(--key); color:#fff }
.step .bd{
  border:1px solid var(--line); border-top:0; background:#fff;
  padding:calc(var(--u)*1.4) calc(var(--u)*1.2) calc(var(--u)*1.6); text-align:center;
  display:flex; flex-direction:column; align-items:center; height:calc(var(--u)*24.7);
}
.step .n{ font-family:var(--en); font-size:calc(var(--u)*1.04); font-weight:700; color:var(--key) }
.step .t{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*1.15); font-weight:700; line-height:1.4 }
/* アイコンはデザインの書き出しから切り出した画像。**丸ごと1枚**なので地色は付けない */
.step .ic{ margin:calc(var(--u)*1.1) 0; width:calc(var(--u)*7.29); height:calc(var(--u)*7.29) }
.step .ic img{ width:100%; height:100% }
.step .d{ font-size:calc(var(--u)*.94); line-height:1.7; text-align:left }

/* ══════════════ 11 Q&A ══════════════ */
.faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--u)*2) calc(var(--u)*4) }
.faq .qa{ padding-bottom:calc(var(--u)*1.4); border-bottom:1px solid var(--line) }
.faq .q{ display:grid; grid-template-columns:calc(var(--u)*1.8) minmax(0,1fr); gap:calc(var(--u)*.8); align-items:start }
.faq .q i{
  font-style:normal; font-family:var(--en); font-size:calc(var(--u)*.73); font-weight:700;
  background:var(--key); color:#fff; height:calc(var(--u)*1.5); display:grid; place-items:center;
  border-radius:calc(var(--u)*.14); margin-top:calc(var(--u)*.24);
}
.faq .q b{ font-size:calc(var(--u)*1.04); font-weight:700; line-height:1.55 }
.faq .a{ margin-top:calc(var(--u)*1); padding-left:calc(var(--u)*2.6); font-size:calc(var(--u)*.9); line-height:1.7; color:var(--sub) }

/* ══════════════ 12 ASTRA ══════════════ */
/* 採寸（13.png）：左42.7u ＋ あき2.08u ＋ 右43.4u
   **右の3枚は、左の会社カードと同じ高さに収める。**
   stretch ＋ 3等分の行にすることで、いちばん下の RE:SLIDE の下端が
   会社概要カードの下端とそろい、3枚の間隔も等しくなる */
.about{
  display:grid; grid-template-columns:calc(var(--u)*42.7) minmax(0,1fr);
  gap:calc(var(--u)*2.08); align-items:stretch;
}
.about .co{ padding:calc(var(--u)*2.4) }
.about .lg{ width:calc(var(--u)*11); margin:0 auto }
.about .cr{ margin-top:calc(var(--u)*1.4); font-size:calc(var(--u)*1.04); font-weight:700; text-align:center }
.about .nt{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*.9); color:var(--sub); text-align:center }
.about .mt{ margin-top:calc(var(--u)*1.6); border-top:1px solid var(--line) }
.about .mrow{
  display:grid; grid-template-columns:calc(var(--u)*7.5) minmax(0,1fr); gap:calc(var(--u)*.8);
  padding:calc(var(--u)*.9) calc(var(--u)*.6); border-bottom:1px solid var(--line); font-size:calc(var(--u)*.94);
}
.about .mk{ color:var(--sub) }
.about .co .btn{ margin-top:calc(var(--u)*1.6) }
/* 枚数が変わっても、左の会社カードと同じ高さに収まるようにする */
.svs{ display:grid; grid-auto-rows:minmax(0,1fr); gap:calc(var(--u)*1.15) }
/* 採寸：内側の余白 上1.61u／左1.67u ／ ラベル1.04u ／ 見出し1.77u ／ 本文0.99u
   ／ ボタン 9.22u × 1.82u ／ カード全体 10.26u */
/* 採寸（13.png・カード1）
     カード 10.26u高 ／ 内側 上1.5u・左1.67u・下0.83u
     ラベル 1.04u（lh1.1）→ 0.64u下に 見出し 1.77u（lh1.2）
     → 0.17u下に 本文 0.99u（lh1.3）→ 0.69u下に ボタン 9.22u × 1.82u
   **中身を縦に積む指定が要る。**span は既定で inline なので、
   これが無いとラベル・見出し・本文・ボタンが1行につながる */
.svc{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  min-height:calc(var(--u)*10.26);
  padding:calc(var(--u)*1.5) calc(var(--u)*1.67) calc(var(--u)*.83);
  transition:transform .2s var(--e);
}
.svc:hover{ transform:translateX(calc(var(--u)*.3)) }
.svc .k{ display:block; font-family:var(--en); font-size:calc(var(--u)*1.04); font-weight:700;
  letter-spacing:.12em; color:var(--key); line-height:1.1 }
.svc .t{ display:block; margin-top:calc(var(--u)*.64); font-size:calc(var(--u)*1.77);
  font-weight:700; color:var(--key); line-height:1.2 }
.svc .d{ display:block; margin-top:calc(var(--u)*.17); font-size:calc(var(--u)*.99);
  color:var(--sub); line-height:1.3 }
.svc .go{
  margin-top:calc(var(--u)*.69); display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  width:calc(var(--u)*9.22); height:calc(var(--u)*1.82); border:1px solid rgba(27,94,140,.45);
  font-size:calc(var(--u)*.8); font-weight:700; color:var(--key);
}
.svc:hover .go{ background:var(--key); color:#fff; border-color:var(--key) }

/* ══════════════ 12 CONTACT ══════════════
   採寸（12.png・1920×1080 → u は px÷19.2）
     左の列   x 4.9u ／ 右の列 x 45.83u（フォーム幅 48.13u・2列 23.49u＋あき1.09u）
     CONTACT  上 12.76u（字面）
     お問い合わせ 上 17.03u
     本文2行   上 20.83u
     罫線      上 30.6u ／ 幅 34.32u
     目次      1行目 33.75u ／ 送り 2.39u ／ 番号の列 1.77u・見出しは 2.86u の位置
     送信ボタン 17.4u × 3.8u
   **中身の器は .ctg。**枚の地が .sl.ct なので、.ct にすると section にも当たる
   ══════════════════════════════════════ */
.sl.ct{ padding-top:calc(var(--u)*12.15) }
.ctg{
  display:grid; grid-template-columns:calc(var(--u)*40.9) minmax(0,1fr);
  gap:0; align-items:start;
}
.ctg .en{ font-family:var(--en); font-size:calc(var(--u)*3.4); font-weight:700; letter-spacing:.04em; line-height:1.1 }
.ctg .ja{ margin-top:calc(var(--u)*1.08); font-size:calc(var(--u)*2.08); font-weight:700; line-height:1.35 }
.ctg .msg{ margin-top:calc(var(--u)*.62); font-size:calc(var(--u)*1.15); line-height:1.72 }
.ctg .rule{ margin:calc(var(--u)*6.3) 0 0; width:calc(var(--u)*34.32); height:1px; background:rgba(255,255,255,.45) }
.ctg .idx{ list-style:none; margin-top:calc(var(--u)*2.45) }
.ctg .idx li{
  display:grid; grid-template-columns:calc(var(--u)*2.86) 1fr; align-items:baseline;
  height:calc(var(--u)*2.39); font-size:calc(var(--u)*1.04); font-weight:700;
}
.ctg .idx li span{ font-family:var(--en); letter-spacing:.06em }
.ctg .idx a:hover{ text-decoration:underline }

.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--u)*1) calc(var(--u)*1.09); max-width:calc(var(--u)*48.13) }
.form .full{ grid-column:1 / -1 }
.form label{ display:block; font-size:calc(var(--u)*.87); font-weight:700; margin-bottom:calc(var(--u)*.62) }
.form .req{ margin-left:.6em; font-weight:700 }
.form input,.form select,.form textarea{
  font:inherit; font-size:calc(var(--u)*.94); width:100%;
  height:calc(var(--u)*2.97); padding:0 calc(var(--u)*.9);
  border:1px solid rgba(255,255,255,.55); border-radius:calc(var(--u)*.14);
  background:transparent; color:#fff;
}
.form textarea{ height:calc(var(--u)*8); padding:calc(var(--u)*.75) calc(var(--u)*.9); resize:none; line-height:1.7 }
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.6) }
.form select option{ color:var(--ink) }
.form .send{ grid-column:1 / -1; display:flex; align-items:center; gap:calc(var(--u)*1.6); margin-top:calc(var(--u)*.6) }
.form .send button{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  width:calc(var(--u)*17.4); height:calc(var(--u)*3.8);
  background:#fff; color:var(--key); font-size:calc(var(--u)*1.04); font-weight:700; letter-spacing:.06em;
}
.form .send button:hover{ background:rgba(255,255,255,.88) }
.fmsg{ font-size:calc(var(--u)*.83) }
.fmsg.ok{ color:#CDEBD3 } .fmsg.ng{ color:#FFD9D2 }

/* ═════════ 下のバー ═════════ */
/* **下のバーは画面いっぱいに引かない。**
   両端はデザインどおり「社名」と「ノンブル」の場所なので、そこを空ける */
.nav-b{
  position:fixed; left:calc(var(--u)*10); right:calc(var(--u)*10); bottom:0; z-index:40;
  display:flex; align-items:center; gap:calc(var(--u)*1.4); padding:calc(var(--u)*.8) 0;
}
.nav-b .cnt{ font-family:var(--en); font-size:calc(var(--u)*.83); font-weight:700; color:var(--sub); white-space:nowrap }
.deck[data-bg="key"] ~ .nav-b .cnt,.deck[data-bg="dark"] ~ .nav-b .cnt{ color:rgba(255,255,255,.8) }
.nav-b .dots{ display:flex; gap:calc(var(--u)*.4); flex:1 }
.nav-b .dot{ flex:1; height:calc(var(--u)*.22); border-radius:calc(var(--u)*.11); background:var(--line); cursor:pointer }
.nav-b .dot.on{ background:var(--key) }
.deck[data-bg="key"] ~ .nav-b .dot{ background:rgba(255,255,255,.32) }
.deck[data-bg="key"] ~ .nav-b .dot.on{ background:#fff }
.nav-b .arw{ display:flex; gap:calc(var(--u)*.4) }
.nav-b .arw button{
  width:calc(var(--u)*2.2); height:calc(var(--u)*2.2); border-radius:50%;
  border:1px solid var(--line); color:var(--sub); font-family:var(--en); font-size:calc(var(--u)*1);
  display:grid; place-items:center; transition:all .2s var(--e);
}
.nav-b .arw button:hover{ background:var(--warm) }
.nav-b .arw button:disabled{ opacity:.3; cursor:default }
.deck[data-bg="key"] ~ .nav-b .arw button{ border-color:rgba(255,255,255,.45); color:#fff }

.hint{
  position:fixed; left:50%; bottom:calc(var(--u)*4); transform:translateX(-50%); z-index:41;
  display:flex; align-items:center; gap:.8em; padding:calc(var(--u)*.7) calc(var(--u)*1.8);
  border-radius:99px; background:rgba(0,0,0,.42); color:#fff; font-size:calc(var(--u)*.85);
  white-space:nowrap; pointer-events:none;
  animation:hintIn .6s var(--e) both, hintOut .6s var(--e) 4.6s forwards;
}
.hint .m{ font-family:var(--en); animation:slide 1.6s var(--e) infinite }
@keyframes hintIn{ from{opacity:0;transform:translate(-50%,calc(var(--u)*1.2))} }
@keyframes hintOut{ to{opacity:0;visibility:hidden} }
@keyframes slide{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(.45em)} }

/* ═════════ スマホ（横向き）═════════ */
@media (max-width:900px){
  :root{
    /* **vh ではなく、JS が測った --vh を使う。**
       アドレスバーのぶんを含む vh だと、下が見切れる */
    --u: min(2.35vw, calc(var(--vh) * 0.028));
    --sw: calc(100vw - var(--u)*5.5);
    --top: calc(var(--u)*3.2);
  }
  /* ── スマホ横は「1枚に収める」。中で動かさない（2026-08-25）──
     見出しが枠287pxのうち73〜107pxを食っていたので、まずそこを削る */
  .sh{ margin-bottom:calc(var(--u)*.9) }
  .sh .en{ font-size:calc(var(--u)*1.7) }
  .sh .ja{ margin-top:calc(var(--u)*.4); font-size:calc(var(--u)*1.25) }
  .sh .rule{ margin-top:calc(var(--u)*.6); width:calc(var(--u)*2.6) }
  .sh .msg{ margin-top:calc(var(--u)*.6); font-size:calc(var(--u)*.9); line-height:1.55 }
  .rh .en{ font-size:calc(var(--u)*1.7) }
  .rh .ja{ margin-top:calc(var(--u)*.4); font-size:calc(var(--u)*1.25) }
  .rh .lead{ margin-top:calc(var(--u)*.5); font-size:calc(var(--u)*.82); line-height:1.6 }
  .close{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*.9); line-height:1.5 }

  /* 01 モックは**高さから決める。**幅から決めると、画面が低い端末で背が余る */
  .mock{ width:100%; max-width:calc(var(--vh) * 0.72); margin-inline:auto }
  .fv .st{ gap:calc(var(--u)*1.5); padding-bottom:calc(var(--u)*5.6); grid-template-columns:1fr .92fr }
  .fv h1{ font-size:calc(var(--u)*1.85); line-height:1.32 }
  .fv .kicker{ font-size:calc(var(--u)*.8); margin-bottom:0 }
  .fv .sub{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*.9); line-height:1.6 }
  .fv .lead{ margin-top:calc(var(--u)*1); font-size:calc(var(--u)*.76) }
  .fv .cta{ height:calc(var(--u)*2.6); padding:0 calc(var(--u)*2); font-size:calc(var(--u)*.9) }
  .mock .dots{ display:none }

  /* 02 対応領域 */
  .def .body{ font-size:calc(var(--u)*1.25); line-height:1.4 }
  .def .cap{ margin-top:calc(var(--u)*.5); font-size:calc(var(--u)*.72) }
  .cols4{ margin-top:calc(var(--u)*.7); gap:calc(var(--u)*.7) }
  .scope .c{ padding:calc(var(--u)*1.7) calc(var(--u)*.7) calc(var(--u)*.7) }
  .scope .c b{ font-size:calc(var(--u)*.86) }
  .scope .c p{ font-size:calc(var(--u)*.7); line-height:1.55 }

  /* 03 課題 */
  .stmt{ font-size:calc(var(--u)*1.25); line-height:1.35 }
  .voice{ padding:calc(var(--u)*.8) calc(var(--u)*.8) }
  .voice .q{ font-size:calc(var(--u)*.9) }
  .voice .t{ margin-top:calc(var(--u)*.35); font-size:calc(var(--u)*.86); line-height:1.35 }
  .voice .d{ font-size:calc(var(--u)*.7); line-height:1.55 }

  /* 04 実績 */
  .viewer .stage{ height:calc(var(--u)*10.4) }
  .tabs{ margin-bottom:calc(var(--u)*.8) }

  /* 05 選ばれる理由 */
  .rcards .c{ padding:calc(var(--u)*1) calc(var(--u)*.9) }
  .rcards .t{ font-size:calc(var(--u)*1); margin-top:calc(var(--u)*.4) }
  .rcards .fig{ height:calc(var(--u)*4.8); margin:calc(var(--u)*.55) 0 }
  .rcards .d{ font-size:calc(var(--u)*.74); line-height:1.6 }

  /* 06 資料・図解・LP */
  .works3{ margin-top:calc(var(--u)*.6); gap:calc(var(--u)*.8) }
  .works3 .lb{ height:calc(var(--u)*1.8); font-size:calc(var(--u)*.85) }
  .works3 img{ aspect-ratio:16/9 }

  /* 09 料金 */
  .plan{ padding:calc(var(--u)*1) }
  .plan .nm{ font-size:calc(var(--u)*1.05); margin-top:calc(var(--u)*.3) }
  .plan .pv{ font-size:calc(var(--u)*2); margin-top:calc(var(--u)*.3) }
  .plan .d{ font-size:calc(var(--u)*.74); line-height:1.6; margin-top:calc(var(--u)*.6) }
  .plan .fitl{ height:calc(var(--u)*1.7); font-size:calc(var(--u)*.74); margin-top:calc(var(--u)*.7) }
  .plan .fit{ font-size:calc(var(--u)*.74); margin-top:calc(var(--u)*.4) }

  /* 10 流れ */
  .step .bd{ height:calc(var(--u)*9.6); padding:calc(var(--u)*.5) calc(var(--u)*.4) }
  .step .who{ height:calc(var(--u)*1.4); font-size:calc(var(--u)*.7) }
  .step .n{ font-size:calc(var(--u)*.8) }
  .step .t{ font-size:calc(var(--u)*.78); margin-top:calc(var(--u)*.2); line-height:1.3 }
  .step .ic{ width:calc(var(--u)*2.2); height:calc(var(--u)*2.2); margin:calc(var(--u)*.28) 0 }
  .step .d{ font-size:calc(var(--u)*.66); line-height:1.5 }

  /* 11 質問 */
  .faq{ gap:calc(var(--u)*.8) calc(var(--u)*2) }
  .faq .q b{ font-size:calc(var(--u)*.82) }
  .faq .a{ margin-top:calc(var(--u)*.4); font-size:calc(var(--u)*.72); line-height:1.55 }
  .faq .qa{ padding-bottom:calc(var(--u)*.7) }

  /* 13 運営会社 */
  .about{ grid-template-columns:1fr 1.15fr; gap:calc(var(--u)*1) }
  .about .co{ padding:calc(var(--u)*1) }
  .about .lg{ width:calc(var(--u)*6.5) }
  .about .cr{ margin-top:calc(var(--u)*.6); font-size:calc(var(--u)*.8) }
  .about .mt{ margin-top:calc(var(--u)*.7) }
  .about .mrow{ padding:calc(var(--u)*.25) calc(var(--u)*.3); font-size:calc(var(--u)*.68);
    grid-template-columns:calc(var(--u)*6) minmax(0,1fr) }
  .about .co .btn{ margin-top:calc(var(--u)*.7); height:calc(var(--u)*2); font-size:calc(var(--u)*.74) }
  /* PCでの「3枚を会社カードと同じ高さに」はスマホでは効かせない */
  .svs{ gap:calc(var(--u)*.6); grid-template-rows:none }
  .svc{ height:auto; min-height:0; padding:calc(var(--u)*.8) calc(var(--u)*1) }
  .svc .k{ font-size:calc(var(--u)*.76) }
  .svc .t{ margin-top:calc(var(--u)*.25); font-size:calc(var(--u)*.95); line-height:1.3 }
  .svc .d{ display:none }
  .svc .go{ margin-top:calc(var(--u)*.4); width:calc(var(--u)*7.5); height:calc(var(--u)*1.5);
    font-size:calc(var(--u)*.7) }

  /* CONTACT の上の余白は採寸値（12.15u）だが、それはPCの話。
     スマホでは他の枚と同じ位置に戻さないと下が切れる */
  .sl.ct{ padding-top:calc(var(--u)*3.2) }
  .ctg{ grid-template-columns:calc(var(--u)*32) minmax(0,1fr) }
  .ctg .en{ font-size:calc(var(--u)*2.3) }
  .ctg .ja{ margin-top:calc(var(--u)*.6); font-size:calc(var(--u)*1.3) }
  .ctg .msg{ margin-top:calc(var(--u)*.8); font-size:calc(var(--u)*.86); line-height:1.6 }
  .ctg .rule{ margin-top:calc(var(--u)*1.4); width:calc(var(--u)*26) }
  .ctg .idx{ margin-top:calc(var(--u)*1) }
  .ctg .idx li{ height:calc(var(--u)*1.7); font-size:calc(var(--u)*.78);
    grid-template-columns:calc(var(--u)*2.6) 1fr }
  .form{ gap:calc(var(--u)*.6) calc(var(--u)*.9); max-width:none }
  .form label{ margin-bottom:calc(var(--u)*.3) }
  .form input,.form select{ height:calc(var(--u)*2.2) }
  .form textarea{ height:calc(var(--u)*4.4) }
  .form .send{ margin-top:calc(var(--u)*.2) }
  .form .send button{ width:calc(var(--u)*12); height:calc(var(--u)*2.5); font-size:calc(var(--u)*.86) }
  .st,.st:has(> .sh){ height:auto; max-height:calc(var(--vh) - var(--u)*7.6);
    overflow-y:auto; scrollbar-width:none;
    mask-image:linear-gradient(#000 calc(100% - var(--u)*1.6), transparent);
    -webkit-mask-image:linear-gradient(#000 calc(100% - var(--u)*1.6), transparent) }
  .st::-webkit-scrollbar{ display:none }
  /* ── ここから下は「消せないもの」だけ ── */
  .no{ display:none } .cp{ display:none }
  .hd{ top:calc(var(--u)*.9); left:calc(var(--u)*.9); right:calc(var(--u)*.9); padding:0 }
  .hd .brand{ height:calc(var(--u)*2.3); padding:0 calc(var(--u)*1) }
  .hd .brand img{ width:calc(var(--u)*4.4) }
  .hd .brand .sv{ font-size:calc(var(--u)*.8); padding-left:calc(var(--u)*1) }
  .hd .hbtn{ width:calc(var(--u)*12); height:calc(var(--u)*2.3); font-size:calc(var(--u)*.8) }
  .btn{ height:calc(var(--u)*2); padding:0 calc(var(--u)*1.4); font-size:calc(var(--u)*.74) }
  .note{ display:none }

  /* 04 実績 */
  .tab{ width:calc(var(--u)*10.4); height:calc(var(--u)*2); font-size:calc(var(--u)*.76) }
  .wk{ margin-top:calc(var(--u)*.9); grid-template-columns:.8fr 1.2fr; gap:calc(var(--u)*1.4) }
  .wk .co{ font-size:calc(var(--u)*1) }
  .wk .meta{ margin-top:calc(var(--u)*.7) }
  .wk .mrow{ padding:calc(var(--u)*.4) 0; font-size:calc(var(--u)*.76);
    grid-template-columns:calc(var(--u)*7) minmax(0,1fr) }
  .wk .pts{ margin-top:calc(var(--u)*.7) }
  .wk .pts li{ font-size:calc(var(--u)*.74); margin-top:calc(var(--u)*.45); line-height:1.55 }
  .wk .pts li:nth-child(3){ display:none }
  .viewer .thumbs{ display:none }
  .viewer .bar{ margin-top:calc(var(--u)*.4) } .viewer .cnt{ font-size:calc(var(--u)*.74) }
  .viewer .nav{ width:calc(var(--u)*2); height:calc(var(--u)*2); font-size:calc(var(--u)*1) }

  /* 07 比較表 */
  .cmp{ font-size:calc(var(--u)*.72); min-width:calc(var(--u)*82) }
  .cmp th,.cmp td{ padding:calc(var(--u)*.28) calc(var(--u)*.4); line-height:1.3 }
  .cmpn{ font-size:calc(var(--u)*.66); margin-top:calc(var(--u)*.4) }
  .cmpw{ margin-top:calc(var(--u)*.8) }

  /* 08 構成・デザイン */
  .two{ margin-top:calc(var(--u)*.8); gap:calc(var(--u)*1.2) }
  .two .c{ padding:calc(var(--u)*.9) }
  .two .t{ font-size:calc(var(--u)*1) } .two .n{ font-size:calc(var(--u)*.72) }
  .two ol{ margin-top:calc(var(--u)*.7) }
  .two ol li{ font-size:calc(var(--u)*.76); margin-top:calc(var(--u)*.4);
    grid-template-columns:calc(var(--u)*1.9) minmax(0,1fr) }
  .two figure{ display:none }

  /* 09 料金 */
  .plans{ gap:calc(var(--u)*1) }
  .plan .tier{ font-size:calc(var(--u)*.74) } .plan .pv .u{ font-size:calc(var(--u)*.86) }

  /* 13 会社 */
  .about .nt{ display:none }

  /* 下のバー */
  .nav-b{ left:calc(var(--u)*2); right:calc(var(--u)*2); padding:calc(var(--u)*.6) 0; gap:calc(var(--u)*1) }
  .nav-b .arw{ display:none } .nav-b .cnt{ font-size:calc(var(--u)*.74) }
  .hint{ font-size:calc(var(--u)*.85); bottom:calc(var(--u)*4) }
}

/* ══════════════ スマホ 縦向き ══════════════
   **縦でも資料型（横送り）のまま見られるようにする。**
   ただし横に3列4列は入らないので、すべて1〜2列に畳み、
   1枚の中で縦に動かせるようにする。
   単位は幅から取る（縦は高さに余裕があるので、文字を大きくできる） */
@media (max-width:900px) and (orientation:portrait){
  :root{
    --u: min(4.3vw, calc(var(--vh) * 0.021));
    --sw: calc(100vw - var(--u)*6);
    --top: calc(var(--u)*5.4);
  }
  .st,.st:has(> .sh){ height:auto; max-height:calc(var(--vh) - var(--u)*11) }
  .sh .en{ font-size:calc(var(--u)*2.6) } .sh .ja{ font-size:calc(var(--u)*1.7) }
  .sh .msg{ font-size:calc(var(--u)*1) }
  .rh .en{ font-size:calc(var(--u)*2.2) } .rh .ja{ font-size:calc(var(--u)*1.5) }
  .rh .lead{ font-size:calc(var(--u)*.9) }

  /* 多列はすべて畳む */
  /* FVだけは中身を真ん中に置いているので、上のバーの下に潜る。
     縦向きでは上から並べる */
  .sl.fv{ align-items:start }
  .fv .st{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*1.6);
    padding:calc(var(--u)*4.2) 0 calc(var(--u)*4) }
  .fv h1{ font-size:calc(var(--u)*2.05); line-height:1.4 } .fv .sub{ font-size:calc(var(--u)*.95) }
  .fv .kicker{ font-size:calc(var(--u)*.78) } .fv .lead{ font-size:calc(var(--u)*.78) }
  .fv .cta{ height:calc(var(--u)*2.8); font-size:calc(var(--u)*.95) }
  .mock{ max-width:none }
  .fv .facts{ position:static; margin-top:calc(var(--u)*1.4); margin-bottom:calc(var(--u)*3.4) }
  .fv .facts .f{ padding:calc(var(--u)*.7) calc(var(--u)*.3) }
  /* 数字は折り返させない。折れると「3,000枚／超」のように割れる */
  .fv .facts .v{ font-size:calc(var(--u)*1.15); white-space:nowrap }
  .fv .facts .v small{ font-size:calc(var(--u)*.66) }
  .fv .facts .k{ font-size:calc(var(--u)*.62); white-space:nowrap }
  /* 上のバーは、ロゴとボタンが重なるので両方小さくする */
  .hd{ top:calc(var(--u)*.8); left:calc(var(--u)*.8); right:calc(var(--u)*.8) }
  .hd .brand{ height:calc(var(--u)*2); padding:0 calc(var(--u)*.7); gap:calc(var(--u)*.7) }
  .hd .brand img{ width:calc(var(--u)*3.4) }
  .hd .brand .sv{ font-size:calc(var(--u)*.66); padding-left:calc(var(--u)*.7) }
  .hd .hbtn{ width:calc(var(--u)*9.2); height:calc(var(--u)*2); font-size:calc(var(--u)*.66); gap:.4em }
  .cols4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cols3{ grid-template-columns:minmax(0,1fr) }
  .voice{ padding:calc(var(--u)*1.1) calc(var(--u)*1.2) }
  .voice .t{ font-size:calc(var(--u)*1.1) } .voice .d{ font-size:calc(var(--u)*.85) }
  .scope .c p{ font-size:calc(var(--u)*.82) } .scope .c b{ font-size:calc(var(--u)*1) }
  .def .body{ font-size:calc(var(--u)*1.5) } .stmt{ font-size:calc(var(--u)*1.5) }
  .tabs{ flex-wrap:wrap } .tab{ width:calc(var(--u)*13); height:calc(var(--u)*2.4); font-size:calc(var(--u)*.85) }
  .wk{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*1.4) }
  .wk .pts li:nth-child(3){ display:block }
  .viewer .stage{ height:calc(var(--u)*24) }
  .viewer .thumbs{ display:flex }
  .rcards{ grid-template-columns:minmax(0,1fr) }
  .rcards .fig{ height:calc(var(--u)*11) }
  .rcards .t{ font-size:calc(var(--u)*1.3) } .rcards .d{ font-size:calc(var(--u)*.85) }
  .works3{ grid-template-columns:minmax(0,1fr) }
  .two{ grid-template-columns:minmax(0,1fr) } .two figure{ display:block }
  .plans{ grid-template-columns:minmax(0,1fr) }
  .plan .pv{ font-size:calc(var(--u)*2.6) } .plan .d{ font-size:calc(var(--u)*.85) }
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--u)*.9) }
  .step .bd{ height:auto; min-height:calc(var(--u)*16); padding:calc(var(--u)*1) calc(var(--u)*.8) }
  .step .t{ font-size:calc(var(--u)*1) } .step .d{ font-size:calc(var(--u)*.78) }
  .step .ic{ width:calc(var(--u)*4); height:calc(var(--u)*4) }
  .faq{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*1) }
  .faq .q b{ font-size:calc(var(--u)*.95) } .faq .a{ font-size:calc(var(--u)*.85) }
  .about{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*1.2) }
  .about .nt{ display:block }
  .svs{ grid-template-rows:none } .svc{ min-height:0 } .svc .d{ display:block; font-size:calc(var(--u)*.85) }
  .ctg{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*2) }
  .ctg .en{ font-size:calc(var(--u)*2.6) } .ctg .ja{ font-size:calc(var(--u)*1.5) }
  .form{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .form input,.form select{ height:calc(var(--u)*2.8) } .form textarea{ height:calc(var(--u)*7) }
  .form .send button{ width:calc(var(--u)*18); height:calc(var(--u)*3) }
  .no{ display:none } .cp{ display:none }
  .nav-b .arw{ display:none }
}

/* 縦のまま読む（逃げ道） */
html.v,html.v body{ overflow:auto; height:auto; background:#fff }
html.v{ --u: min(3.5vw, 15px) }
html.v .deck{ display:block; height:auto; overflow:visible; scroll-snap-type:none }
html.v .sl{ display:block; width:100%; height:auto; padding:calc(var(--u)*5) calc(var(--u)*4.5) }
html.v .st,html.v .st:has(> .sh){ width:100%; height:auto; max-height:none; overflow:visible; mask-image:none; -webkit-mask-image:none }
html.v .fv .facts{ position:static; margin-top:calc(var(--u)*3) }
html.v .no,html.v .cp,html.v .nav-b,html.v .hint{ display:none }
html.v .hd{ position:sticky }
html.v .cols3,html.v .cols4,html.v .rcards,html.v .works3,html.v .two,html.v .plans,
html.v .flow,html.v .faq,html.v .about,html.v .ctg,html.v .form,html.v .wk,html.v .fv .st{ grid-template-columns:1fr }
html.v .step .bd{ height:auto }
html.v .two figure,html.v .about .nt,html.v .viewer .thumbs{ display:block }
html.v .wk .pts li:nth-child(3){ display:block }

@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } }