@charset "UTF-8";
/* ==========================================================================
   受付ナビ 販促LP  —  Figma page LP_V6 (egOsKIphBM3xxk1YPMFYpe / 901:4) の実装
   デスクトップ基準幅 1440px。タブレット / モバイルは Figma 未設計のため
   本CSSでの設計判断（README 参照）。
   ========================================================================== */

/* ---------- 1. トークン ---------- */
:root{
  --navy:#123B66;
  --blue:#0017C1;
  --yellow:#FFC72C;
  --teal:#0FA3B0;
  --bg:#F7F9FB;
  --line:#D7DDE3;
  --ink:#24313F;
  --sub:#667069;
  --faq-bg:#EEF2F7;

  /* 左右余白：1440px で 96px、狭くなるほど詰める */
  --pad: clamp(24px, 6.67vw, 96px);
  --wrap: 1440px;

  --sh-card: 0 8px 24px rgba(18,59,102,.08);
  --sh-board: 0 8px 24px rgba(18,59,102,.10);
  --sh-soft: 0 4px 12px rgba(18,59,102,.08);
}

/* S14 写真: セクション下端の波と同一の 1440 座標系マスク。
   要素を全幅にして width:100% で伸ばすことで、どの画面幅でも
   セクションの波と切り口が完全に一致する */
.mask-wave{
  -webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20780'%20preserveAspectRatio='none'><path%20fill='white'%20d='M0.00,732.30%20C15.00,731.17%2060.00,726.83%2090.00,725.50%20C120.00,724.17%20150.00,723.72%20180.00,724.30%20C210.00,724.88%20240.00,726.72%20270.00,729.00%20C300.00,731.28%20330.00,734.88%20360.00,738.00%20C390.00,741.12%20420.00,744.95%20450.00,747.70%20C480.00,750.45%20510.00,753.17%20540.00,754.50%20C570.00,755.83%20600.00,756.28%20630.00,755.70%20C660.00,755.12%20690.00,753.28%20720.00,751.00%20C750.00,748.72%20780.00,745.12%20810.00,742.00%20C840.00,738.88%20870.00,735.05%20900.00,732.30%20C930.00,729.55%20960.00,726.83%20990.00,725.50%20C1020.00,724.17%201050.00,723.72%201080.00,724.30%20C1110.00,724.88%201140.00,726.72%201170.00,729.00%20C1200.00,731.28%201230.00,734.88%201260.00,738.00%20C1290.00,741.12%201320.00,744.95%201350.00,747.70%20C1380.00,750.45%201425.00,753.37%201440.00,754.50%20L1440,0%20L0,0%20Z'/></svg>");
          mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20780'%20preserveAspectRatio='none'><path%20fill='white'%20d='M0.00,732.30%20C15.00,731.17%2060.00,726.83%2090.00,725.50%20C120.00,724.17%20150.00,723.72%20180.00,724.30%20C210.00,724.88%20240.00,726.72%20270.00,729.00%20C300.00,731.28%20330.00,734.88%20360.00,738.00%20C390.00,741.12%20420.00,744.95%20450.00,747.70%20C480.00,750.45%20510.00,753.17%20540.00,754.50%20C570.00,755.83%20600.00,756.28%20630.00,755.70%20C660.00,755.12%20690.00,753.28%20720.00,751.00%20C750.00,748.72%20780.00,745.12%20810.00,742.00%20C840.00,738.88%20870.00,735.05%20900.00,732.30%20C930.00,729.55%20960.00,726.83%20990.00,725.50%20C1020.00,724.17%201050.00,723.72%201080.00,724.30%20C1110.00,724.88%201140.00,726.72%201170.00,729.00%20C1200.00,731.28%201230.00,734.88%201260.00,738.00%20C1290.00,741.12%201320.00,744.95%201350.00,747.70%20C1380.00,750.45%201425.00,753.37%201440.00,754.50%20L1440,0%20L0,0%20Z'/></svg>");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

/* ---------- 2. ベース ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* モバイル／タブレット専用の要素。1200px 以上（カンプ再現層）では出さない */
.sp{ display:none; }
/* 375px カンプの行割りを再現する改行。767px 以下でだけ効かせる */
.br-sp{ display:none; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--navy); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- 3. レイアウト共通 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
  z-index:1;
}

/* セクションは Figma の重なり量ぶん、前のセクションへ食い込ませる。
   Figma のページ内 z 順は Hero が最前面 → 手前ほど大きい z-index を与える。 */
.sec{ position:relative; }
.sec + .sec, main + .foot{ margin-top:calc(var(--joint, 0px) * -1 * var(--joint-scale, 1)); }
.sec__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.sec--hero{ z-index:20; }
.sec--s2  { z-index:19; --joint:40px; }
.sec--s3  { z-index:17; --joint:90px; } /* Figma の z 順では S4 が S3 より手前 */
.sec--s4  { z-index:18; --joint:70px; }
.sec--s5  { z-index:16; --joint:60px; }
.sec--s6  { z-index:15; --joint:0px;  }
.sec--s7  { z-index:14; --joint:40px; }
.sec--s8  { z-index:13; --joint:80px; }
.sec--s9  { z-index:12; --joint:90px; }
.sec--s10 { z-index:11; --joint:20px; }
.sec--s11 { z-index:10; --joint:20px; }
.sec--s12 { z-index:9;  --joint:50px; }
.sec--faq { z-index:8;  --joint:116px; }
.sec--cta { z-index:7;  --joint:60px; }
.foot     { position:relative; z-index:8; } /* カンプでは紺帯は S15 フレーム内＝写真より手前 */

/* 波形 */
.wave{ position:absolute; left:0; width:100%; display:block; z-index:0; bottom:0; }
.wave--s2 { height:76px; }
.wave--s4 { height:90px; }
.wave--s6 { height:80px; }
.wave--s14{ height:60px; }
.wave--s5a{ height:96px; }
.wave--s5b{ height:64px; }
/* Figma のベクター 901:386 は S4 内 y=12 から始まる。top:0 だと曲線が 12px 上にずれる */
.wave--s4top{ top:12px; bottom:auto; height:58px; }
.wave--s4shadow{ top:12px; bottom:auto; height:58px; z-index:-1;
                 transform:translateY(-6px); filter:blur(9px); }

/* ---------- 4. タイポグラフィ部品 ---------- */
.eyebrow{
  font-size:16px; line-height:24px; font-weight:700; color:var(--navy);
  margin-bottom:24px;
}
.h2{
  font-size:38px; line-height:52px; font-weight:700; color:var(--navy);
}
.h2--lg{ font-size:40px; line-height:56px; }
.h2--center{ text-align:center; }
.h2--white{ color:#fff; font-size:36px; line-height:1.2; }

.lead{ font-size:15px; line-height:27px; color:var(--ink); }
.lead--center{ text-align:center; margin-inline:auto; max-width:1000px; }
.note{ font-size:14px; line-height:22px; color:var(--sub); }
.note--center{ text-align:center; }

/* 見出し行の左ラベル（Figma では H2 と同じ行の x=96 に置かれている） */
@media (min-width:1024px){
  .sec--s2 .wrap > .eyebrow,
  .sec--s3 .wrap > .eyebrow,
  .sec--s4 .wrap > .eyebrow,
  .sec--s5 .wrap > .eyebrow,
  .sec--s12 .wrap > .eyebrow{
    position:absolute; top:4px; left:var(--pad); margin:0;
  }
}

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; text-decoration:none; white-space:nowrap;
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--blue); color:#fff; font-size:19px;
  min-width:300px; height:58px; border-radius:10px;
}
.btn--yellow{
  background:var(--yellow); color:var(--navy); font-size:19px;
  min-width:400px; height:64px; border-radius:12px;
  box-shadow:0 6px 16px rgba(153,115,0,.30);
}
.btn--white{
  background:#fff; color:var(--navy); font-size:16px;
  height:48px; padding-inline:26px; border-radius:8px;
}

.chip{
  display:inline-block;
  border:1px solid var(--navy); border-radius:19px;
  padding:9px 20px; font-size:15px; line-height:20px; color:var(--navy);
  background:#fff;
}

/* 丸番号（S4 カード） */
.num{
  width:36px; height:36px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-size:17px; font-weight:700; line-height:36px; text-align:center;
  flex:0 0 auto;
}

/* ✔ 箇条書き */
.ticks li{
  font-size:14px; line-height:22px; color:var(--ink);
  padding-left:22px; position:relative; margin-top:6px;
}
.ticks li::before{ content:"✔"; position:absolute; left:0; color:var(--ink); }

/* 丸チェック箇条書き */
.checks li, .assurance li{
  display:flex; align-items:center; gap:12px;
  font-size:16px; font-weight:700; color:var(--navy);
  margin-top:20px;
}
.checks li::before, .assurance li::before{
  content:"✓"; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  color:#fff; font-size:15px; line-height:28px; text-align:center;
}
.checks li::before{ background:var(--blue); }
.assurance li::before{ background:var(--teal); }

/* ==========================================================================
   Hero
   ========================================================================== */
.gnav{ background:var(--navy); position:relative; z-index:30; }
.gnav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(24px,11.1vw,160px);
  min-height:80px; display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.brand__mark{
  width:60px; height:60px; border-radius:14px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; flex:0 0 auto;
}
.brand__text{ display:block; }
.brand__name{ display:block; font-size:28px; font-weight:700; line-height:1.2; color:#fff; }
.brand__sub{ display:block; font-size:14px; line-height:1.3; color:#D9E3F0; }

.gnav__menu{ margin-left:auto; display:flex; align-items:center; gap:40px; }
.gnav__list{ display:flex; gap:48px; }
.gnav__list a{ font-size:16px; color:#fff; text-decoration:none; }
.gnav__list a:hover{ text-decoration:underline; }
.gnav__cta{ min-width:180px; }
.gnav__toggle{ display:none; }

.sec--hero{ background:#fff; padding:110px 0 117px; }
.sec--hero__bg{ bottom:8px; }
/* 描画順: ::before(z:-1, 写真) → ::after(グラデーション)。
   写真は白フェード完了位置(下端-8px)で終え、端数DPRのヘアラインを防ぐ */
.sec--hero__bg::before{
  content:""; position:absolute; inset:0 0 8px 0; z-index:-1;
  background:url(../images/bg-hero.jpg) center/cover;
}
.sec--hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 0 84.5%, rgba(255,255,255,.5) 94%, #fff calc(100% - 8px)),
    linear-gradient(to right, rgba(255,255,255,.93) 0%, rgba(255,255,255,.72) 32.7%, rgba(255,255,255,0) 52.8%);
}
.sec--hero .wrap{ padding-inline:clamp(24px,11.1vw,160px); }
.hero{ display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); align-items:start; gap:40px; }
.hero__h{
  font-size:54px; line-height:70px; font-weight:700; color:var(--navy);
  margin:22px 0 0;
}
.hero__lead{ font-size:17px; line-height:30px; color:var(--ink); margin:46px 0 34px; }
.hero__points{
  display:grid; grid-template-columns:repeat(2,minmax(0,250px)); gap:16px 20px;
  margin-top:38px;
}
.hero__points li{
  display:flex; align-items:center; gap:16px;
  min-height:84px; padding:16px 18px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-size:15px; line-height:22px; font-weight:700; color:var(--navy);
}
.hero__points img{
  width:auto; height:48px; flex:0 0 auto;
  filter:drop-shadow(2px 3px 5px rgba(26,33,51,.14));
}

/* Figma の端末群の外接矩形 x=715..1410 / y=282..833（695×551）を 1 枚の比率ボックスに置き換え、
   子要素はその中の % で配置する。右へはみ出す分は body の overflow-x:hidden で切る（Figma と同じ）。 */
.hero__devices{
  position:relative; width:auto; padding-top:79.28%; margin-top:92px;
  margin-right:clamp(-130px, -9.03vw, 0px);
}
.hero__glow{
  position:absolute; left:41%; top:4%; width:57.6%; height:45.4%;
  background:var(--navy); opacity:.14; filter:blur(55px); border-radius:50%;
}
.hero__devices img{ position:absolute; }
.hero__ipad{
  left:36.26%; top:0; width:63.74%;
  filter:drop-shadow(4px 8px 8px rgba(18,59,102,.10)) drop-shadow(0 16px 30px rgba(18,59,102,.05));
}
.hero__ph{ filter:drop-shadow(4px 8px 8px rgba(18,59,102,.14)) drop-shadow(0 16px 30px rgba(18,59,102,.08)); }
.hero__ph--l{ left:1.45%;  top:13.60%; width:29.50%; transform:rotate(-2.5deg); }
.hero__ph--c{ left:27.63%; top:9.26%;  width:33.81%; z-index:2; }
.hero__ph--r{ left:59.14%; top:12.70%; width:26.47%; transform:rotate(2.5deg); }

/* ==========================================================================
   S2 課題提起
   ========================================================================== */
.sec--s2{ padding:80px 0 132px; }
.sec--s2::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:72px; background:#fff; z-index:0; }
.sec--s2 .lead--center{ margin-top:24px; }
.issues{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px;
  margin-top:50px;
}
.issue{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--sh-card); padding:22px 22px 26px;
}
.issue__head{ display:flex; align-items:center; gap:12px; }
.issue__num{
  width:40px; height:32px; border-radius:6px; background:#F4F7FB; border:1px solid var(--line);
  color:#9AA4B0; font-size:15px; font-weight:700; line-height:30px; text-align:center; flex:0 0 auto;
}
.issue__title{ font-size:18px; font-weight:700; color:var(--navy); }
.issue__art{
  width:187px; height:187px; margin:24px auto 0;
  border-radius:50%; background:#F4F7FB; display:grid; place-items:center;
}
.issue__art img{ width:140px; height:140px; object-fit:contain; }
.issue__cap{ margin-top:20px; text-align:center; font-size:16px; line-height:24px; color:var(--ink); }

/* ==========================================================================
   S3 役割
   ========================================================================== */
.sec--s3{ padding:80px 0 134px; }
.sec--s3__bg{
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 33.9%),
    linear-gradient(to right, rgba(255,255,255,.15) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.86) 72%, rgba(255,255,255,.10) 100%),
    url(../images/bg-s3.jpg);
  background-size:cover;
  background-position:center;
}
.roles{
  display:grid; grid-template-columns:300px 20px 300px 20px 300px;
  justify-content:center; align-items:start; margin-top:66px;
}
.role{ text-align:center; }
.role__circle{
  width:150px; height:150px; border-radius:50%; background:#fff;
  box-shadow:0 8px 22px rgba(18,59,102,.14);
  display:grid; place-items:center; margin:0 auto;
}
.role__circle img{ width:96px; height:96px; object-fit:contain; }
.role__name{ display:block; margin-top:22px; font-size:20px; font-weight:700; color:var(--navy); }
.role__desc{ display:block; margin-top:14px; font-size:15px; line-height:24px; color:var(--ink); }
.role__arrow{ justify-self:center; margin-top:69px; }
.role__arrow svg{ width:94px; height:12px; max-width:none; }

/* ==========================================================================
   S4 選べる受付
   ========================================================================== */
.sec--s4{
  padding:118px 0 80px;
  /* カンプは S4 本体グループ全体に下端フェードマスク（92.1%→透明）。
     白ボード・波・写真ごと S5 の青へ溶ける */
  -webkit-mask-image:linear-gradient(to bottom, #000 0 calc(100% - 60px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0 calc(100% - 60px), transparent 100%);
}
.sec--s4::before{
  content:""; position:absolute; left:0; right:0; top:70px; bottom:88px;
  background:#fff; z-index:0;
}
.sec--s4__photo{
  /* Figma では写真は白ボード（とその波形下端）より手前。z-index:0 のままだと
     後続の波 SVG に覆われ、人物の下半身が切れる */
  position:absolute; right:0; top:97px; width:30.3%; bottom:0; z-index:1;
  background-image:
    linear-gradient(to right, #fff 0, rgba(255,255,255,0) 160px),
    url(../images/photo-s4.jpg);
  background-size:cover; background-position:center;
}
.ways{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
  max-width:1060px; margin-top:52px;
}
/* ===== ピクセルパーフェクト（デスクトップ）：セクション高を Figma 実測値に固定 =====
   フロー任せだと行送りで数px〜50px伸び、つなぎ目・フェード帯・マスク位置が連鎖的にずれる。
   高さを固定すれば、各境界・下端バンドの y はカンプと完全一致する。
   カンプは 1440px 固定設計。1200px 以上では常に 1440px 版を等比拡縮して見せる。
   コンテンツだけ 1440px 固定・背景は全幅、という混在にすると 1440px 超で
   写真(654px)と全幅に伸びる波の縮尺が食い違い、切り口に段差が出るため。
   root に zoom を掛けると以降のメディアクエリは常に 1440px 幅として評価される。 */
@media (min-width:1200px){
  html{ zoom:calc(100vw / 1440); }
}
@media (min-width:1200px){
  .sec--hero{ height:933px; padding:0; }
  .sec--s2  { height:720px; }
  .sec--s3  { height:590px; }
  .sec--s4  { height:760px; }
  .sec--s5  { height:820px; }
  .sec--s6  { height:620px; }
  .sec--s7  { height:760px; padding-bottom:0; }
  .sec--s8  { height:700px; }
  .sec--s9  { height:720px; }
  .sec--s10 { height:420px; padding:0; }
  .s10__band{ height:400px; }
  .sec--s11 { height:900px; }
  .sec--s12 { height:480px; padding:0; }
  .s12__card{ height:450px; }
  .sec--faq { height:780px; }
  .sec--cta { height:720px; padding-bottom:0; }
  .sec--hero .wrap{ padding-top:110px; }
  /* S7: カンプのステップボードは y=500..700（下端余白60） */
  /* フッターはカンプの紺帯160px */
  .foot{ height:160px; overflow:hidden; }
  .foot .foot__inner{ min-height:0; padding-top:20px; }
  .foot .foot__legal{ padding-block:10px 0; }
}
@media (min-width:1200px){
  /* カンプの S15 は写真560px+紺160px=720px が密着。写真下端にフッターを接続する */
  .foot{ --joint:160px; }
  .foot__inner{ padding-inline:64px; }              /* カンプのロゴ x=64 */
}
.way{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--sh-card); padding:22px 24px 26px;
  display:flex; flex-direction:column;
}
.way__head{ display:flex; align-items:center; gap:12px; }
.way__title{ font-size:22px; font-weight:700; color:var(--navy); }
.way__sub{ margin-top:18px; font-size:14px; color:var(--sub); }
.way__art{
  flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  margin:26px 0 30px; min-height:213px;
}
.way__dev{
  width:100px; filter:drop-shadow(2px 5px 10px rgba(18,59,102,.18));
}
.way__dev--wide{ width:118px; }
.way__dev--roster{ width:150px; }
.way__arrow{ width:42px; flex:0 0 auto; }
.way__art--stack{ gap:20px; align-items:flex-start; }
.way__modal{
  width:98px; flex:0 0 auto; margin-top:36px;
  border:1.5px solid var(--line); border-radius:10px;
  box-shadow:0 5px 12px rgba(18,59,102,.25);
}

/* ==========================================================================
   S5 区分色
   ========================================================================== */
.sec--s5{
  padding:110px 0 91px;
  background:linear-gradient(to bottom, #E4ECF6 0%, #F1F5FA 100%);
}
.sec--s5 .lead--center{ margin-top:22px; }
.swatches{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:48px;
}
.swatches li{
  min-width:150px; height:46px; border-radius:23px;
  background:var(--sw); color:var(--swf);
  font-size:15px; font-weight:700; line-height:46px; text-align:center;
  box-shadow:0 4px 10px rgba(18,59,102,.14);
  padding-inline:16px;
}
.badges{ display:flex; justify-content:center; gap:90px; margin-top:20px; }
.badges img{ width:170px; filter:drop-shadow(2px 8px 16px rgba(18,59,102,.18)); }
.sec--s5 .note--center{ margin-top:25px; color:var(--ink); }

/* ==========================================================================
   S6 配信
   ========================================================================== */
.sec--s6{
  padding:72px 0 96px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 calc(100% - 40px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0 calc(100% - 40px), transparent 100%);
}
.sec--s6::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:78px; background:#fff; z-index:0; }
.sec--s6__bg{
  z-index:1;   /* Figma では背景写真は白地波より手前 */
  background-image:url(../images/bg-s67.jpg);
  background-size:cover; background-position:center;
  opacity:.14;
}
.split{ display:grid; grid-template-columns:minmax(0,470px) minmax(0,1fr); gap:36px; align-items:start; }
.split__copy .lead{ margin-top:42px; }
.split__copy .note{ margin-top:34px; }
.split__copy .h2{ margin-top:28px; }

.sec--s6 .wrap, .sec--s7 .wrap{ padding-right:clamp(24px,4.86vw,70px); }
.s6__media{ display:grid; grid-template-columns:minmax(0,310px) minmax(0,440px); gap:26px; justify-content:end; }
.s6__paper{
  width:100%; border:1px solid var(--line); border-radius:6px;
  filter:drop-shadow(6px 12px 24px rgba(18,59,102,.16)) drop-shadow(1px 2px 4px rgba(18,59,102,.08));
}
.features li{
  display:flex; align-items:center; gap:18px;
  min-height:76px; padding:12px 22px; margin-bottom:14px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--sh-soft);
  font-size:17px; font-weight:700; color:var(--navy);
}
.features li::before{
  content:"✓"; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%; background:var(--blue);
  color:#fff; font-size:18px; line-height:34px; text-align:center;
}

/* ==========================================================================
   S7 参加券忘れ
   ========================================================================== */
.sec--s7{
  padding:84px 0 60px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 calc(100% - 80px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0 calc(100% - 80px), transparent 100%);
}
.sec--s7__bg{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 52.8%),
    url(../images/bg-s67.jpg);
  background-size:cover; background-position:center;
}
.s7__media{ position:relative; max-width:810px; margin-left:auto; }
.s7__roster{
  width:69.1%; margin-left:0;
  filter:drop-shadow(2px 8px 16px rgba(18,59,102,.18));
}
.s7__dialog{
  position:absolute; left:65.4%; top:28.2%; width:34.6%;
  border-radius:10px; box-shadow:0 8px 20px rgba(18,59,102,.28);
}
.stepboard{
  max-width:1040px; margin:40px auto 0;
  background:rgba(255,255,255,.96); border-radius:16px;
  box-shadow:0 6px 18px rgba(18,59,102,.10);
  padding:22px 32px 24px;
}
.steps{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.step{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; gap:8px 12px; align-items:center; }
.step__n{
  grid-column:1; grid-row:1;
  width:28px; height:28px; border-radius:50%; background:var(--blue);
  color:#fff; font-size:14px; font-weight:700; line-height:28px; text-align:center;
}
.step img{ grid-column:1; grid-row:2; width:60px; height:60px; object-fit:contain; }
.step__t{
  grid-column:2; grid-row:1 / span 2; width:128px;
  font-size:15px; line-height:21px; font-weight:700; color:var(--navy);
}
.step__arrow img{ width:38px; }
.stepboard .note{ margin-top:24px; }
@media (min-width:1200px){ .stepboard .note{ white-space:nowrap; } }

/* ==========================================================================
   S8 スキャン
   ========================================================================== */
.sec--s8{ padding:92px 0 160px; }
.sec--s8__bg{
  background-image:
    linear-gradient(to right, rgba(247,249,251,.86) 0%, rgba(247,249,251,0) 50%),
    url(../images/bg-s8.jpg);
  background-size:cover; background-position:center;
  -webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20700'%20preserveAspectRatio='none'><filter%20id='b'%20x='-10%'%20y='-40%'%20width='120%'%20height='200%'><feGaussianBlur%20stdDeviation='10'/></filter><path%20fill='white'%20filter='url(%23b)'%20d='M0.00,684.30%20C10.00,684.18%2040.00,684.18%2060.00,683.60%20C80.00,683.02%20100.00,681.90%20120.00,680.80%20C140.00,679.70%20160.00,678.52%20180.00,677.00%20C200.00,675.48%20220.00,673.63%20240.00,671.70%20C260.00,669.77%20280.00,667.23%20300.00,665.40%20C320.00,663.57%20340.00,661.92%20360.00,660.70%20C380.00,659.48%20400.00,658.72%20420.00,658.10%20C440.00,657.48%20460.00,657.03%20480.00,657.00%20C500.00,656.97%20520.00,657.15%20540.00,657.90%20C560.00,658.65%20580.00,659.95%20600.00,661.50%20C620.00,663.05%20640.00,665.37%20660.00,667.20%20C680.00,669.03%20700.00,670.82%20720.00,672.50%20C740.00,674.18%20760.00,675.75%20780.00,677.30%20C800.00,678.85%20820.00,680.63%20840.00,681.80%20C860.00,682.97%20880.00,684.00%20900.00,684.30%20C920.00,684.60%20940.00,684.18%20960.00,683.60%20C980.00,683.02%201000.00,681.90%201020.00,680.80%20C1040.00,679.70%201060.00,678.52%201080.00,677.00%20C1100.00,675.48%201120.00,673.63%201140.00,671.70%20C1160.00,669.77%201180.00,667.10%201200.00,665.40%20C1220.00,663.70%201240.00,662.72%201260.00,661.50%20C1280.00,660.28%201300.00,658.85%201320.00,658.10%20C1340.00,657.35%201360.00,657.03%201380.00,657.00%20C1400.00,656.97%201430.00,657.75%201440.00,657.90%20L1440,-40%20L0,-40%20Z'/></svg>");
          mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20700'%20preserveAspectRatio='none'><filter%20id='b'%20x='-10%'%20y='-40%'%20width='120%'%20height='200%'><feGaussianBlur%20stdDeviation='10'/></filter><path%20fill='white'%20filter='url(%23b)'%20d='M0.00,684.30%20C10.00,684.18%2040.00,684.18%2060.00,683.60%20C80.00,683.02%20100.00,681.90%20120.00,680.80%20C140.00,679.70%20160.00,678.52%20180.00,677.00%20C200.00,675.48%20220.00,673.63%20240.00,671.70%20C260.00,669.77%20280.00,667.23%20300.00,665.40%20C320.00,663.57%20340.00,661.92%20360.00,660.70%20C380.00,659.48%20400.00,658.72%20420.00,658.10%20C440.00,657.48%20460.00,657.03%20480.00,657.00%20C500.00,656.97%20520.00,657.15%20540.00,657.90%20C560.00,658.65%20580.00,659.95%20600.00,661.50%20C620.00,663.05%20640.00,665.37%20660.00,667.20%20C680.00,669.03%20700.00,670.82%20720.00,672.50%20C740.00,674.18%20760.00,675.75%20780.00,677.30%20C800.00,678.85%20820.00,680.63%20840.00,681.80%20C860.00,682.97%20880.00,684.00%20900.00,684.30%20C920.00,684.60%20940.00,684.18%20960.00,683.60%20C980.00,683.02%201000.00,681.90%201020.00,680.80%20C1040.00,679.70%201060.00,678.52%201080.00,677.00%20C1100.00,675.48%201120.00,673.63%201140.00,671.70%20C1160.00,669.77%201180.00,667.10%201200.00,665.40%20C1220.00,663.70%201240.00,662.72%201260.00,661.50%20C1280.00,660.28%201300.00,658.85%201320.00,658.10%20C1340.00,657.35%201360.00,657.03%201380.00,657.00%20C1400.00,656.97%201430.00,657.75%201440.00,657.90%20L1440,-40%20L0,-40%20Z'/></svg>");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
          mask-repeat:no-repeat, no-repeat;
}
.sec--s8 .lead{ margin-top:42px; }
.sec--s8 .ticks{ margin-top:22px; }
.s8__media{ display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.s8__phone{ margin:0; position:relative; }
.s8__phone img{
  width:300px;
  filter:drop-shadow(0 10px 14px rgba(31,23,13,.35)) drop-shadow(0 2px 3px rgba(31,23,13,.18));
}
/* 端末の接地影（Figma の 2 枚のぼかし楕円） */
.s8__phone::before,.s8__phone::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  border-radius:50%; z-index:-1;
}
.s8__phone::before{ bottom:-16px; width:340px; height:30px; background:rgba(31,23,13,.42); filter:blur(12px); }
.s8__phone::after { bottom:-24px; width:280px; height:12px; background:rgba(20,15,8,.55);  filter:blur(5px); }
.s8__arrow{ width:72px; flex:0 0 auto; }

/* ==========================================================================
   S9 ダッシュボード
   ========================================================================== */
.sec--s9{ background:var(--bg); padding:70px 0 48px; }
.sec--s9__bg{
  left:50%; background-position:center top;
  background-image:
    linear-gradient(to right, var(--bg) 0%, rgba(247,249,251,0) 50%),
    url(../images/bg-s9.jpg);
  background-size:cover; background-position:center;
}
.sec--s9 .lead{ margin-top:44px; }
.sec--s9 .checks{ margin-top:34px; }
.sec--s9 .note{ margin-top:44px; }
.s9__media{ position:relative; padding-bottom:60px; }
.s9__board{
  width:100%; max-width:760px; margin-left:auto;
  filter:drop-shadow(2px 10px 22px rgba(18,59,102,.20));
}
.s9__phone{
  position:absolute; left:-4%; bottom:0; width:19.7%;
  filter:drop-shadow(-4px 10px 20px rgba(18,59,102,.28));
}

/* ==========================================================================
   S10 機能一覧
   ========================================================================== */
.sec--s10{ padding:0 0 20px; }
.s10__band{ background:var(--navy); border-radius:0 0 20px 20px; padding:42px 0 56px; }
.flow{ display:flex; align-items:center; gap:26px; margin-top:39px; }
.flow__card{
  flex:1 1 0; min-width:0;
  background:#fff; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:16px 12px 20px; text-align:center;
}
.flow__n{
  display:inline-block; padding-bottom:4px; border-bottom:2px solid var(--blue);
  font-size:16px; font-weight:700; color:var(--blue); line-height:1.2;
}
.flow__card img{ width:84px; height:84px; object-fit:contain; margin:14px auto 0; }
.flow__t{ display:block; margin-top:24px; font-size:17px; font-weight:700; color:var(--navy); }
.flow__sep{ flex:0 0 auto; color:#fff; font-size:26px; font-weight:700; line-height:1; }

/* ==========================================================================
   S11 端末・オプション
   ========================================================================== */
.sec--s11{ background:var(--bg); padding:78px 0 80px; }
.sec--s11__bg{
  left:58.3%;
  background-image:
    linear-gradient(to right, var(--bg) 0%, rgba(247,249,251,0) 33.3%),
    url(../images/photo-s11.jpg);
  background-size:cover; background-position:center;
}
.sec--s11 .h2{ margin-bottom:34px; }
.boards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1024px; }
.board{
  background:#fff; border-radius:18px; box-shadow:var(--sh-board);
  padding:26px 32px 32px;
}
.board__h{ font-size:20px; font-weight:700; color:var(--navy); line-height:1.3; }
.board__lead{ margin-top:16px; font-size:16px; line-height:26px; color:var(--ink); }
.sec--s11 .board:last-child .board__lead{ font-size:14px; line-height:22px; }

.devices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:26px; }
.devices > li{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-soft);
  padding:18px 12px 22px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.devices__t{ font-size:14px; line-height:22px; font-weight:700; color:var(--navy); }
.devices__img{ flex:1 0 auto; display:grid; place-items:center; margin:18px 0; }
.devices__img img{ width:110px; height:140px; object-fit:contain; }
.devices__tag{
  width:100%; max-width:186px; height:30px; border-radius:15px; background:var(--teal);
  color:#fff; font-size:14px; font-weight:700; line-height:30px; text-align:center;
}

.options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 16px; margin-top:26px; }
.options > li{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-soft);
  padding:12px 14px 14px; min-height:144px;
}
.options__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.options__row img{ width:48px; height:48px; object-fit:contain; }
.tag{
  border:1px solid var(--navy); border-radius:14px; background:#fff;
  color:var(--navy); font-size:12px; font-weight:700; line-height:26px;
  padding-inline:12px; white-space:nowrap;
}
.options__t{ margin-top:8px; font-size:16px; line-height:24px; font-weight:700; color:var(--navy); }
.options__d{ margin-top:4px; font-size:14px; line-height:20px; color:var(--sub); }

/* ==========================================================================
   S12 導入の流れ
   ========================================================================== */
.sec--s12{ padding-bottom:30px; }
.s12__card{
  background:#fff; border-radius:60px/54px;
  box-shadow:0 -6px 20px rgba(18,59,102,.09), 0 8px 20px rgba(18,59,102,.07);
  padding:62px 0 77px;
}
.sec--s12 .note--center{ margin-top:16px; }
.intro{ display:flex; margin-top:46px; }
.intro__step{ flex:1 1 0; min-width:0; position:relative; text-align:center; }
.intro__n{
  display:block; width:52px; height:52px; border-radius:50%; margin:0 auto;
  background:var(--blue); box-shadow:0 4px 10px rgba(0,23,193,.28);
  color:#fff; font-size:22px; font-weight:700; line-height:52px;
}
.intro__step img{ width:92px; height:92px; object-fit:contain; margin:18px auto 0; }
.intro__t{ display:block; margin-top:17px; font-size:15px; font-weight:700; color:var(--navy); }
.intro__step:not(:last-child)::after{
  content:""; position:absolute; top:23px; height:6px;
  left:calc(100% - 35px); width:70px;
  background-image:radial-gradient(circle at center, var(--blue) 3px, transparent 3.5px);
  background-size:14px 6px; background-repeat:repeat-x; background-position:center;
}

/* ==========================================================================
   S14 FAQ
   ========================================================================== */
.sec--faq{ padding:104px 0 144px; }
.sec--faq::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:56px;
  background:var(--faq-bg); z-index:0;
}
.sec--faq__photo{
  /* 全幅要素。写真(654x981 @ y=-20)と左フェード(280px)は右端基準で配置する。
     z-index:1 は必須。Figma では写真グループが地色の波より手前で、
     0 のままだと後続の .wave--s14 が写真を y=720 で水平に切ってしまう */
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(to right, var(--faq-bg) 0, rgba(238,242,247,0) 280px),
    url(../images/photo-s14.jpg);
  background-size:654px 100%, 654px auto;
  background-position:right top, right -20px;
  background-repeat:no-repeat, no-repeat;
}
.faq{
  max-width:720px; margin-top:46px;
  background:#fff; border-radius:18px; box-shadow:var(--sh-board);
  padding:12px 26px;
}
.faq__row{ border-bottom:1px solid var(--line); }
.faq__row:last-child{ border-bottom:0; }
.faq__h{ margin:0; font-size:inherit; font-weight:inherit; }
.faq__q{
  display:flex; align-items:flex-start; gap:20px; width:100%;
  padding:20px 0; border:0; background:none; text-align:left; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; color:var(--navy); line-height:1.5;
}
.faq__q:hover .faq__text{ text-decoration:underline; }
.faq__q:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.faq__no{ color:var(--blue); flex:0 0 auto; }
.faq__text{ flex:1 1 auto; }
.faq__mark{
  flex:0 0 auto; width:16px; height:16px; position:relative; margin-top:4px; color:var(--blue);
}
.faq__mark::before, .faq__mark::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:opacity .2s ease, transform .2s ease;
}
.faq__mark::before{ width:16px; height:2px; }
.faq__mark::after { width:2px; height:16px; }
.faq__row.is-open .faq__mark::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
.faq__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.faq__row.is-open .faq__panel{ grid-template-rows:1fr; }
/* 0fr で完全に潰すため、padding を持たないラッパを行の中身にする */
.faq__inner{ min-height:0; overflow:hidden; }
.faq__a{
  margin:0; padding:0 36px 22px 46px;
  font-size:16px; line-height:26px; color:var(--ink);
}
@media (prefers-reduced-motion:reduce){
  .faq__panel, .faq__mark::before, .faq__mark::after{ transition:none; }
}
/* 相談カード：押下できる要素ではないので hover / focus / cursor を与えない */
.faq__callout{
  position:absolute; right:26.25%; top:146px; width:220px; min-height:96px;
  display:grid; place-items:center; text-align:center;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 6px 20px rgba(18,59,102,.12);
  font-size:16px; line-height:22px; font-weight:700; color:var(--navy);
  cursor:default;
}

/* ==========================================================================
   S15 お問い合わせ
   ========================================================================== */
.sec--cta{ background:var(--faq-bg); padding:92px 0 64px; }
.sec--cta__bg{
  bottom:auto; height:560px;
  background-image:
    linear-gradient(to right, rgba(251,246,238,.97) 0%, rgba(251,246,238,.90) 50%, rgba(251,246,238,.15) 72%, rgba(251,246,238,0) 100%),
    url(../images/bg-s15.jpg);
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 21.4%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 21.4%, #000 100%);
}
.sec--cta .split{ grid-template-columns:minmax(0,600px) minmax(0,1fr); }
.sec--cta .lead{ font-size:16px; line-height:28px; margin:34px 0 42px; }
.assurance{ padding-top:58px; }
.assurance li{ margin-top:22px; }

/* ==========================================================================
   フッター
   ========================================================================== */
.foot{ background:var(--navy); color:#fff; border-top:1px solid rgba(255,255,255,.2); }
.foot__inner{ min-height:112px; display:flex; align-items:center; gap:32px; padding-top:24px; }
.foot .brand__mark{ width:48px; height:48px; border-radius:12px; border:0; }
.foot .brand__name{ font-size:22px; }
.foot .brand__sub{ color:rgba(255,255,255,.7); }
.foot__nav{ margin-inline:auto; }
.foot__nav ul{ display:flex; gap:40px; }
.foot__nav a{ font-size:16px; text-decoration:none; }
.foot__nav a:hover{ text-decoration:underline; }
.foot__cta{ min-width:180px; height:44px; font-size:14px; border-radius:10px; }
.foot__legal{
  display:flex; align-items:center; justify-content:center; gap:24px;
  padding-block:20px 28px; font-size:14px; line-height:20px; color:rgba(255,255,255,.6);
}
.foot__policy{ margin-left:auto; }
.foot__policy a{ text-decoration:none; }
.foot__policy a:hover{ text-decoration:underline; }

/* ==========================================================================
   フロー版レーン（〜1199px）
   Figma page `LP_V6_SP`（375px / 768px カンプ）を正本とする。
     〜767px      … 375px カンプ
     768〜1199px  … 768px カンプ
     〜1023px     … ヘッダーはハンバーガー（1024px 以上はインラインナビ）
   1200px 以上は下のピクセルパーフェクト層がそのまま効く。
   ========================================================================== */
@media (max-width:1199.98px){
  :root{ --pad:32px; }

  /* 波・背景写真・下端マスクは 1440px カンプ専用の仕掛け。フロー版では
     段差や写真の欠けになるため止め、写真は「帯」として置き直す */
  .wave{ display:none; }
  .sec__bg, .sec--s4__photo, .sec--faq__photo, .hero__glow, .s7__dialog{ display:none; }
  .sec--s2::before{ display:none; }
  .sec--s4, .sec--s6, .sec--s7{ -webkit-mask-image:none; mask-image:none; }
  .sec + .sec, main + .foot{ margin-top:0; }
  .sp{ display:block; }

  /* 全幅の帯（本文の左右余白を抜けて画面いっぱいに出す） */
  .sp-band, .hero__devices, .s8__media{ width:100vw; margin-inline:calc(50% - 50vw); }
  .sp-band, .sp-photo{ background-repeat:no-repeat; }

  /* ---- 文字 ---- */
  .h2, .h2--lg{ font-size:34px; line-height:48px; }
  .h2--white{ font-size:26px; line-height:38px; }
  .h2--center{ text-align:left; }
  .lead, .lead--center{ font-size:16px; line-height:28px; max-width:620px; text-align:left; margin-inline:0; }
  .note, .note--center{ font-size:14px; line-height:22px; text-align:left; }
  .eyebrow{ font-size:16px; line-height:24px; margin-bottom:12px; }

  /* ---- セクションの上下（接合は 120px 以内） ---- */
  .sec--hero{ padding:24px 0 56px; background:#fff; }
  .sec--s2{ padding:64px 0 56px; background:var(--bg); }
  .sec--s3, .sec--s4, .sec--s6, .sec--s8{ padding:64px 0 56px; background:#fff; }
  .sec--s5{ padding:64px 0 56px; }
  .sec--s7, .sec--s9, .sec--s11{ padding:64px 0 56px; background:var(--bg); }
  .sec--s10{ padding:0; }
  .s10__band{ padding:44px 0 52px; border-radius:0 0 20px 20px; }
  .sec--s12{ padding:32px 16px 40px; background:var(--bg); }
  .sec--faq{ padding:64px 0 56px; }
  .sec--faq::before{ bottom:0; }
  .sec--cta{ padding:0 0 56px; background:#FBF6EE; }

  /* ---- ヘッダー ---- */
  .gnav__inner{ min-height:72px; gap:16px; }
  /* ロゴタイルが 40px のため、リンクとしての押下領域を 44px に揃える */
  .brand{ gap:12px; padding-block:2px; }
  /* 1024〜1199px はインラインナビが出る帯。行高 24px のままだと
     タッチ端末（iPad 横 1024px 等）で押しにくいので 44px にする。
     1200px 以上はカンプ再現層なので触らない */
  .gnav__list a{ padding-block:10px; }
  .brand__mark{ width:40px; height:40px; border-radius:10px; }
  .brand__mark img{ width:28px; height:28px; }
  .brand__name{ font-size:21px; }
  .brand__sub{ display:none; }

  /* ---- Hero ---- */
  .hero{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .hero__copy{ display:contents; }
  .hero__devices{ order:5; }
  .hero__points{ order:6; }
  .hero__h{ font-size:40px; line-height:56px; margin:14px 0 0; }
  .hero__lead{ font-size:16px; line-height:28px; margin:14px 0 0; max-width:620px; }
  .hero__copy > p:nth-of-type(3){ margin:24px 0 0; }
  /* .hero__copy が display:contents のため chip は .hero の flex 子になる。
     align-items:stretch を継いで全幅に伸びるので、内容幅のピルに戻す */
  .chip{ align-self:flex-start; font-size:14px; line-height:20px; padding:7px 16px; border-radius:18px; }
  .btn--primary{ min-width:0; width:min(327px,100%); height:56px; font-size:17px; border-radius:10px; }
  .hero__devices{
    position:relative; display:block; overflow:hidden;
    height:460px; padding:0; margin-block:32px 0;
    background-image:url(../images/bg-hero.jpg);
    background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  }
  .hero__ipad{ display:none; }
  .hero__devices img{ position:absolute; z-index:1; }
  .hero__ph{ display:block; transform:none; }
  .hero__ph--l{ left:calc(50% - 246px); top:58px; width:155px; }
  .hero__ph--c{ left:calc(50% - 97px);  top:8px;  width:210px; z-index:2; }
  .hero__ph--r{ left:calc(50% + 107px); top:56px; width:140px; }
  .hero__devices::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:110px; z-index:0;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.72) 55%, #fff);
  }
  .hero__points{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:32px 0 0; max-width:none; }
  .hero__points li{
    flex-direction:column; justify-content:flex-start; text-align:center;
    gap:4px; min-height:96px; padding:10px 8px 6px; font-size:14px; line-height:20px;
  }
  .hero__points img{ height:38px; }

  /* ---- S2 課題提起（アイコン左・文章右） ---- */
  .issues{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:28px; }
  .issues > li:last-child{ max-width:none; }
  .issue{ display:grid; grid-template-columns:68px minmax(0,1fr);
          column-gap:16px; align-items:center; height:auto; padding:16px; }
  .issue__art{ grid-column:1; grid-row:1/3; width:68px; height:68px; margin:0; background:none; }
  .issue__art img{ width:68px; height:68px; }
  .issue__head{ grid-column:2; grid-row:1; display:block; }
  .issue__num{ display:block; margin-bottom:6px; height:26px; line-height:24px; font-size:13px; }
  .issue__title{ display:block; font-size:16px; line-height:24px; }
  .issue__cap{ grid-column:2; grid-row:2; margin:6px 0 0; text-align:left;
               font-size:12px; line-height:19px; color:var(--sub); }

  /* ---- S3 役割 ---- */
  .sp-band--s3{
    height:240px; margin-block:28px 0;
    background-image:url(../images/bg-s3.jpg);
    /* 男性の髪の上端は原画 y=180。60% だと開始 y=185 で頭が切れるため、
       カウンター下端を削って 50%（開始 y≒154）まで上げる */
    background-size:249.7% auto; background-position:100% 50%;
  }
  .roles{ display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:28px;
          background:var(--bg); border-radius:16px; padding:18px 12px; }
  .role{ display:grid; grid-template-columns:56px minmax(0,1fr);
         column-gap:12px; align-items:center; text-align:left; }
  .role__circle{ grid-column:1; grid-row:1/3; width:56px; height:56px; margin:0; }
  .role__circle img{ width:34px; height:34px; }
  .role__name{ grid-column:2; grid-row:1; margin:0; font-size:17px; line-height:26px; }
  .role__desc{ grid-column:2; grid-row:2; margin:2px 0 0; font-size:14px; line-height:22px; }
  .role__arrow{ display:block; margin:0; text-align:center; }
  .role__arrow svg{ display:none; }
  .role__arrow::after{ content:"↓"; color:#7B8794; font-size:16px; line-height:20px; }

  /* ---- S4 選べる受付（実機左・説明右） ---- */
  .ways{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:32px; max-width:none; }
  .way{ display:grid; grid-template-columns:300px minmax(0,1fr);
        column-gap:24px; align-items:center; padding:24px; }
  /* 実機は基底の「中央寄せ flex」のまま使う。絶対配置で座標指定すると
     カード幅が変わったときに左右の余白が食い違う（実機で指摘あり） */
  .way__art{ grid-column:1; grid-row:1/4; position:static;
             display:flex; align-items:center; justify-content:center;
             gap:5.4%; height:250px; min-height:0; margin:0; }
  .way__art img{ position:static; }
  /* 幅は枠に対する % で持つ。px 固定だと 320px 幅でカードからはみ出す */
  .way__art .way__arrow{ width:12.5%; flex:0 0 auto; }
  .way:nth-child(1) .way__dev{ width:37.5%; }
  .way:nth-child(2) .way__dev{ width:38%; }
  .way:nth-child(3) .way__art{ gap:4%; }
  .way:nth-child(3) .way__dev--roster{ width:56%; }
  .way:nth-child(3) .way__modal{ width:38.5%; margin:0; }
  .way__head{ grid-column:2; grid-row:1; }
  .way__title{ font-size:22px; line-height:32px; }
  .num{ width:36px; height:36px; line-height:36px; font-size:17px; }
  .way__sub{ grid-column:2; grid-row:2; margin:12px 0 0; font-size:15px; line-height:24px; }
  .way .ticks{ grid-column:2; grid-row:3; position:static; margin-top:16px; }
  .way .ticks li{ height:auto; margin-top:6px; font-size:15px; line-height:24px; }

  /* ---- S5 区分色 ---- */
  .swatches{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
             max-width:428px; margin:32px 0 0; }
  .swatches li{ min-width:0; width:101px; height:36px; line-height:36px;
                font-size:13px; border-radius:18px; padding-inline:0; }
  .badges{ justify-content:center; gap:24px; margin-top:32px; }
  .badges img{ width:218px; }
  .badges__nav{ display:none; }
  .sec--s5 .note--center{ margin-top:24px; }

  /* ---- S6 配信 ---- */
  .split, .sec--cta .split{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .split__copy .h2{ margin-top:12px; }
  .split__copy .lead{ margin-top:20px; }
  .split__copy .note{ margin-top:24px; }
  .sec--s6 .wrap, .sec--s7 .wrap{ padding-right:var(--pad); }
  /* Hero は base で padding-inline:clamp(24px,11.1vw,160px)。375px では 41.6px になり
     本文幅が 292px まで痩せるので、他セクションと同じ左右余白へ戻す */
  .sec--hero .wrap{ padding-inline:var(--pad); }
  .s6__media{ display:block; }
  .s6__paper{ display:block; width:340px; max-width:100%; margin:0 auto; }
  .features{ margin-top:24px; }
  .features li{ height:auto; min-height:0; margin:0 0 10px; padding:0; gap:10px;
                background:none; border:0; box-shadow:none; font-size:15px; line-height:24px; }
  .features li::before{ width:26px; height:26px; line-height:26px; font-size:14px; }

  /* ---- S7 参加券忘れ ---- */
  .s7__media{ max-width:none; margin:0; }
  /* 〜767px は画面の一部を拡大した crop。実機画像のベゼル
     （外周の金属エッジ #B4B4B4 → 黒ベゼル #161616、実測で画面幅の約3%）を
     CSS で再現して「タブレットの画面」として読めるようにする。
     768px 以上は実機画像そのもの（本物のベゼル付き）なので枠は付けない */
  .s7__rosterpic{
    display:block; padding:8px; background:#161616;
    border:1px solid #B4B4B4; border-radius:14px;
    box-shadow:0 8px 20px rgba(18,59,102,.20);
  }
  .s7__roster{ display:block; width:100%; margin:0; border:0; border-radius:3px; filter:none; }
  .s7__cap{ margin:8px 0 0; font-size:13px; line-height:20px; color:var(--sub); }
  .s7__qr{ margin:28px 0 0; text-align:center; }
  .s7__qr img{ width:220px; margin-inline:auto; filter:drop-shadow(0 6px 16px rgba(18,59,102,.16)); }
  .s7__qr figcaption{ margin-top:8px; font-size:13px; line-height:20px; color:var(--sub); }
  .stepboard{ max-width:none; margin-top:32px; padding:20px 16px; }
  .steps{ display:flex; flex-wrap:nowrap; gap:16px; }
  .step{ flex:1 1 0; }
  .step__arrow{ display:none; }
  .step img{ width:56px; height:56px; }
  .step__t{ max-width:none; font-size:14px; line-height:21px; }
  .stepboard .note{ margin-top:20px; }

  /* ---- S8 スキャン ---- */
  .s8__media{
    margin-top:32px; padding:40px 0; gap:17px;
    justify-content:center; align-items:flex-start;
    background-image:url(../images/bg-s8.jpg);
    background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  }
  .s8__phone{ width:300px; }
  .s8__phone img{ width:300px; filter:drop-shadow(0 12px 18px rgba(31,23,13,.38)); }
  .s8__phone::before, .s8__phone::after{ display:none; }
  .s8__arrow{
    width:44px; height:44px; box-sizing:border-box; padding:14px 10px; align-self:center;
    background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(31,23,13,.35);
  }
  .s8__result{ display:none; }

  /* ---- S9 ダッシュボード ---- */
  .s9__media{ padding:0; }
  .s9__board{ width:100%; margin:0; }
  .s9__phone{ display:none; }
  .s9__cap{ margin:8px 0 0; font-size:13px; line-height:20px; color:var(--sub); }
  .s9__crops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; }
  .s9__crops figure{ margin:0; }
  .s9__crops img{ width:100%; border:1px solid var(--line); border-radius:10px; }
  .s9__crops figcaption{ margin-top:8px; font-size:13px; line-height:20px; color:var(--sub); }
  .sec--s9 .checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                    gap:12px 24px; margin-top:28px; }
  .sec--s9 .checks li{ margin-top:0; }

  /* ---- S10 機能一覧 ---- */
  .flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; }
  .flow__sep{ display:none; }
  .flow__card{ height:auto; padding:14px 12px 16px; }
  .flow__card img{ width:64px; height:64px; margin-top:12px; }
  .flow__t{ margin-top:14px; font-size:15px; line-height:22px; }

  /* ---- S11 端末・オプション ---- */
  .sp-photo--s11{
    height:280px; margin:24px 0 0; border-radius:16px;
    background-image:url(../images/photo-s11.jpg);
    background-size:cover; background-position:50% 17%;
  }
  .boards{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:28px; max-width:none; }
  .board{ position:static; padding:24px; }
  .board__h{ font-size:20px; line-height:30px; }
  .board__lead{ margin-top:10px; }
  .devices{ position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
            width:auto; gap:24px; margin-top:20px; }
  .devices > li{ position:static; height:auto; padding:16px 12px; }
  .devices__t{ position:static; width:auto; font-size:14px; line-height:22px; }
  .devices__img{ position:static; margin:14px 0; }
  .devices__img img{ width:88px; height:112px; }
  .devices__tag{ position:static; width:100%; max-width:none;
                 height:30px; line-height:30px; font-size:13px; }
  .options{ position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
            width:auto; gap:16px; margin-top:20px; }
  .options > li{ position:static; height:auto; min-height:0; padding:12px; }
  .options__row{ position:static; }
  .options__row img{ width:32px; height:32px; }
  .options__t{ position:static; width:auto; margin-top:8px; font-size:14px; line-height:21px; }
  .options__d{ position:static; width:auto; margin-top:4px; font-size:12px; line-height:18px; }
  .tag{ font-size:11px; line-height:22px; }

  /* ---- S12 導入の流れ（縦タイムライン） ---- */
  .s12__card{ border-radius:32px; padding:32px 0 40px; }
  .sec--s12 .wrap{ padding-inline:20px; }
  .sec--s12 .note--center{ margin-top:12px; }
  .intro{ display:flex; flex-direction:column; margin-top:28px; row-gap:0; }
  .intro__step{ display:grid; grid-template-columns:48px 44px minmax(0,1fr);
                align-items:center; column-gap:12px; text-align:left;
                flex:0 0 auto; padding-bottom:40px; }
  .intro__step:last-child{ padding-bottom:0; }
  /* 基底の .intro__n に text-align が無く、.intro__step の text-align:left を
     継いで数字が左に寄る。丸の中で中央に置く */
  .intro__n{ grid-column:1; justify-self:center; margin:0; text-align:center;
             width:44px; height:44px; line-height:44px; font-size:19px; }
  .intro__step img{ grid-column:2; width:44px; height:44px; margin:0; }
  .intro__t{ grid-column:3; margin:0; font-size:16px; line-height:24px; }
  .intro__step:not(:last-child)::after{
    content:""; display:block; position:absolute;
    left:24px; right:auto; top:44px; width:3px; height:40px;
    background:#9FB4CC; border-radius:2px; transform:translateX(-50%);
  }

  /* ---- S14 FAQ ---- */
  .sec--faq .wrap{ display:grid; grid-template-columns:minmax(0,1fr) 140px;
                   column-gap:14px; align-items:center; }
  .sec--faq .wrap > .eyebrow{ grid-column:1/-1; grid-row:1; }
  .sec--faq .h2{ grid-column:1/-1; grid-row:2; white-space:normal; }
  .faq__photo{
    grid-column:2; grid-row:3; width:140px; height:186px; margin:24px 0 0; border-radius:16px;
    background-image:url(../images/photo-s14.jpg);
    background-size:275px auto; background-position:-112px -64px; background-repeat:no-repeat;
  }
  .faq__callout{
    grid-column:1; grid-row:3; position:static; width:auto; max-width:none;
    min-height:0; margin:24px 0 0; padding:18px 16px; font-size:16px; line-height:24px;
  }
  .faq{ grid-column:1/-1; grid-row:4; max-width:none; margin-top:28px;
        background:none; box-shadow:none; padding:0; }
  .faq__row{ background:#fff; border-bottom:0; border-radius:12px; margin-bottom:8px; }
  .faq__q{ gap:8px; padding:14px 16px; font-size:15px; line-height:24px; }
  .faq__a{ padding:0 16px 14px; font-size:14px; line-height:22px; }

  /* ---- S15 お問い合わせ ---- */
  .sp-band--s15{
    height:200px; margin-block:0 32px;
    background-image:url(../images/bg-s15.jpg);
    background-size:142.2% auto; background-position:100% 50%;
  }
  .sec--cta .h2{ font-size:28px; line-height:40px; margin-top:12px; }
  .sec--cta .lead{ margin:20px 0 28px; }
  .btn--yellow{ min-width:0; width:min(327px,100%); height:56px;
                font-size:17px; border-radius:12px; }
  .assurance{ padding-top:0; margin-top:32px; }
  .assurance li{ margin-top:8px; font-size:15px; }
  .assurance li::before{ width:24px; height:24px; line-height:24px; font-size:13px; }

  /* ---- フッター ---- */
  .foot__inner{ flex-wrap:wrap; gap:20px; min-height:0; padding-top:24px; }
  .foot .brand__mark{ width:40px; height:40px; border-radius:10px; }
  .foot .brand__mark img{ width:28px; height:28px; }
  .foot .brand__name{ font-size:20px; }
  .foot .brand__sub{ display:block; font-size:12px; }
  .foot__nav{ margin-left:0; width:100%; }
  .foot__nav ul{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
  .foot__nav a{ display:block; padding:10px 0; font-size:15px; }
  .foot__legal{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---- ヘッダー：1023px 以下はハンバーガー ---- */
@media (max-width:1023.98px){
  .gnav__toggle{
    display:grid; place-items:center; margin-left:auto;
    width:44px; height:44px; background:none; border:0; cursor:pointer;
  }
  .gnav__bars, .gnav__bars::before, .gnav__bars::after{
    display:block; width:24px; height:2px; background:#fff; content:""; position:relative;
  }
  .gnav__bars::before{ position:absolute; top:-8px; }
  .gnav__bars::after { position:absolute; top:8px; }
  .gnav__menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); padding:8px var(--pad) 24px;
    border-top:1px solid rgba(255,255,255,.2);
  }
  .gnav__menu.is-open{ display:flex; }
  .gnav__list{ flex-direction:column; gap:0; }
  .gnav__list a{ display:block; padding:14px 0; }
  .gnav__cta{ margin-top:12px; }
}

/* ==========================================================================
   モバイル（〜767px） — 375px カンプ
   ========================================================================== */
/* 768〜1199px は「全体像だけで読める」帯。拡大 crop は 767px 以下に限る
   （S8 と同じ考え方）
   ・S7 … 実機画像そのものを 704px で置く。CSS のベゼルは不要
   ・S9 … ダッシュボードを 704px で置くと 1.59倍縮小で都道府県名・全5分科会・
          合計まで読めるため、拡大 crop は出さない。出すと「横スクロールで
          全分科会を確認できます」が、既に全部見えている絵の下に付いて矛盾する */
@media (min-width:768px) and (max-width:1199.98px){
  .s7__rosterpic{ padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
  .s7__roster{ border-radius:0; }
  .s9__cap, .s9__crops{ display:none; }
}

@media (max-width:767.98px){
  :root{ --pad:24px; }
  .h2, .h2--lg{ font-size:30px; line-height:42px; }
  .h2--white{ font-size:24px; line-height:34px; }
  .sec--s3 .h2, .sec--cta .h2{ font-size:28px; line-height:40px; }
  .lead, .lead--center, .hero__lead{ max-width:none; }
  /* 本文の <br> は 1440px カンプの行割り。327px では 1〜4 文字だけ次行に落ちる
     （例「…リアルタイム管理。」→「管理。」）ので解除して自然折り返しに任せる。
     .note の <br> は「※ で始まる別項目」の区切りなので必ず残す。 */
  .lead br, .hero__lead br, .board__lead br,
  .role__desc br, .step__t br, .options__t br{ display:none; }
  /* 対応端末カードの「参加者：／スマートフォン／（ブラウザ）」は
     3行で 1 項目を表すラベルなので <br> を残す */

  /* 見出しの行割りは .br-sp（HTML 側）で決める。balance は語中で折る場合があり
     （例「大会に合わせ／て選べる受付」）カンプと変わるため使わない。
     auto-phrase は対応ブラウザでのみ文節境界で折る保険 */
  .br-sp{ display:inline; }
  .h2, .hero__h{ word-break:auto-phrase; }
  /* S6 の 1440px 用 <br>（「参加券を、」の後）は 30px では 2 行目が 360px になる。
     .br-sp で入れ直すのでこちらは消す */
  .sec--s6 .h2 br:not(.br-sp){ display:none; }

  /* Hero — カンプ: ヘッダー64 →20→ chip(32) →12→ H1 →12→ リード →20→ CTA */
  .gnav__inner{ min-height:64px; }
  .sec--hero{ padding-top:20px; }
  .chip{ font-size:13px; line-height:18px; padding:6px 14px; border-radius:16px; }
  .hero__h{ font-size:32px; line-height:44px; margin-top:12px; }
  .hero__lead{ margin-top:12px; }
  .hero__copy > p:nth-of-type(3){ margin-top:20px; }
  .hero__devices{ height:470px; background-size:193.7% auto; background-position:89.6% 50%; }
  .hero__ph--l{ left:calc(50% - 181.5px); top:152px; width:126px; }
  .hero__ph--c{ left:calc(50% - 85.5px);  top:92px;  width:172px; }
  .hero__ph--r{ left:calc(50% + 74.5px);  top:160px; width:112px; }
  .hero__devices::after{ height:104px; }
  .hero__points{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
  .hero__points li{ min-height:88px; }
  .hero__points img{ height:34px; }

  /* S4 */
  .way{ grid-template-columns:minmax(0,1fr); column-gap:0; padding:20px; }
  .way__head{ grid-column:1; grid-row:1; }
  .way__title{ font-size:20px; line-height:30px; }
  .num{ width:32px; height:32px; line-height:32px; font-size:16px; }
  .way__sub{ grid-column:1; grid-row:2; margin:10px 0 0; font-size:14px; line-height:22px; }
  .way__art{ grid-column:1; grid-row:3; height:240px; margin:20px 0 0; }
  .way .ticks{ grid-column:1; grid-row:4; margin-top:18px; }
  .way .ticks li{ font-size:14px; line-height:22px; }
  /* 実機の幅は <1200px の % 指定をそのまま使う（枠が 287px なので
     カンプの 108/34/108・162/112 とほぼ同値になる） */

  /* S5 チップ 3＋2＋2 ／ 参加証カルーセル */
  .swatches{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
             justify-content:start; gap:8px; max-width:319px; }
  .swatches li{ width:auto; }
  .swatches li:nth-child(4){ grid-column:1; grid-row:2; }
  .swatches li:nth-child(5){ grid-column:2; grid-row:2; }
  .swatches li:nth-child(6){ grid-column:1; grid-row:3; }
  .swatches li:nth-child(7){ grid-column:2; grid-row:3; }
  /* 2・3 行目は半カラム分ずらして中央へ（列幅が可変なので % で指定する） */
  .swatches li:nth-child(n+4){ transform:translateX(calc(50% + 8px)); }
  .badges{
    display:flex; margin-top:32px;
    width:100vw; margin-inline:calc(50% - 50vw);
    /* スライド 232px を中央にし、隣を 28px 覗かせる（375px 幅で gap 43.5px） */
    padding-inline:calc((100vw - 232px) / 2);
    gap:max(16px, calc((100vw - 232px) / 2 - 28px));
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .badges::-webkit-scrollbar{ display:none; }
  .badges li{ flex:0 0 232px; scroll-snap-align:center; }
  .badges img{ width:232px; }
  .badges__nav{ display:flex; justify-content:center; margin-top:0; }
  .badges__dot{
    width:44px; height:44px; padding:0; border:0; background:none;
    display:grid; place-items:center; cursor:pointer;
  }
  .badges__dot span{ display:block; width:8px; height:8px; border-radius:50%; background:#B7C3D2; }
  .badges__dot[aria-current="true"] span{ background:var(--navy); }

  /* S6 */
  .s6__paper{ width:280px; }

  /* S7：4ステップを縦1列のボードへ */
  .stepboard{ padding:6px 14px; }
  .steps{ flex-direction:column; gap:0; }
  .step{
    display:grid; grid-template-columns:26px 44px minmax(0,1fr);
    align-items:center; column-gap:12px; padding:10px 0;
    border-top:1px solid #E7ECF1;
  }
  .step:first-child{ border-top:0; }
  .step__n{ grid-column:1; grid-row:1; width:26px; height:26px; line-height:26px; font-size:13px; }
  .step img{ grid-column:2; grid-row:1; width:44px; height:44px; }
  .step__t{ grid-column:3; grid-row:1; text-align:left; font-size:15px; line-height:22px; }
  .stepboard .note{ margin-top:0; padding:14px 0 8px; }
  .s7__qr img{ width:200px; }

  /* S8：実機は 150px。読める大きさは拡大 crop が担う */
  .s8__media{ padding:43px 0; gap:0; }
  .s8__phone{ width:150px; }
  .s8__phone img{ width:150px; }
  .s8__arrow{ width:34px; height:34px; padding:12px 8px; margin-inline:9px; }
  .s8__result{ display:block; margin:24px 0 0; }
  .s8__result img{ width:100%; border:1px solid var(--line); border-radius:10px; }
  .s8__result figcaption{ margin-top:8px; font-size:13px; line-height:20px; color:var(--sub); }

  /* S9 */
  .sec--s9 .checks{ grid-template-columns:minmax(0,1fr); }
  .s9__crops{ grid-template-columns:minmax(0,1fr); gap:20px; }

  /* S10 / S11 */
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-photo--s11{ height:260px; }
  .devices{ gap:14px; }
  .devices > li{ padding:14px 8px; }
  .devices__t{ font-size:13px; line-height:20px; }
  .devices__img img{ width:76px; height:97px; }
  .devices__tag{ display:grid; place-items:center; height:36px;
                 padding:0 4px; font-size:11px; line-height:16px; }
  .options{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .options > li{ padding:12px 10px; }

  /* S15 */
  .sp-band--s15{ height:200px; }

  /* 極小幅（320px）では H1 の「速さも、確かさも、」9字×32px=288px が
     本文幅 272px を超えて 4 行になる */
  @media (max-width:374.98px){
    .hero__h{ font-size:29px; line-height:42px; }
  }

  /* フッター */
  .foot__nav ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   デスクトップ ピクセルパーフェクト層（>=1200px）
   セクション高を Figma 実測値に固定したうえで、主要ブロックを Figma の
   x/y/w に絶対配置する。1440px 基準・中央寄せ座標。
   1199px 以下は上のフロー版レイアウトがそのまま効く。
   ========================================================================== */
@media (min-width:1200px){
  .sec > .wrap{ position:absolute; inset:0; max-width:none; padding:0; }
  .sec > .wrap > *{ position:absolute; margin:0; }
  .split{ position:static; display:block; }
  .sec > .wrap > .split{ position:absolute; inset:0; width:auto; }
  .sec--s7 .stepboard{ position:absolute; left:calc(50% - 720px + 310px); top:500px;
                       width:1040px; height:200px; margin:0; padding:22px 32px 0; }
  .split > *{ position:absolute; margin:0; }
  .split__copy > .eyebrow{ position:static; }
  .hero__copy{ left:calc(50% - 720px + 160px); top:110px; width:520px; position:absolute; }
  .hero__devices{ left:calc(50% - 720px + 715px); top:202px; width:695px; height:551px; position:absolute; padding-top:0; margin:0; }
  .hero__h{ margin:20px 0 0; }
  .hero__lead{ margin:46px 0 0; }
  .hero__copy > p:nth-of-type(3){ position:absolute; top:426px; margin:0; }
  .hero__points{ position:absolute; top:522px; margin:0; }
  .sec--s2 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:84px; }
  .sec--s2 .h2{ left:calc(50% - 720px + 390px); top:80px; width:738px; }
  .sec--s2 .lead{ left:calc(50% - 720px + 220px); top:156px; width:1000px; }
  .issues{ left:calc(50% - 720px + 99px); top:258px; width:1242px; gap:42px; }
  .issue{ height:330px; }
  .sec--s3 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:76px; }
  .sec--s3 .h2{ left:calc(50% - 720px + 304px); top:88px; width:833px; }
  .roles{ left:calc(50% - 720px + 250px); top:200px; width:940px; display:grid; grid-template-columns:300px 20px 300px 20px 300px; }
  .sec--s4 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:120px; }
  .sec--s4 .h2{ left:calc(50% - 720px + 422px); top:126px; width:456px; }
  .ways{ left:calc(50% - 720px + 48px); top:210px; width:1060px; height:470px; gap:26px; max-width:none; }
  /* S4 写真は Figma 実測 436x653 @ (1004,97)。box を 1px でも変えると
     cover の拡大率が変わり、木目・人物の位置がカンプとずれる */
  /* Figma 実寸(436x653)のまま右端に固定する。幅を伸ばすと背景画像も拡大され
     被写体が枠外に出る。右端 pin なら 1440px で Figma と同座標、広幅でも白が残らない */
  .sec--s4__photo{ left:auto; right:0; width:436px;
                   top:97px; height:653px; bottom:auto; }
  /* カード内: Figma の ✔ 行は y=604/632（カード上端 210 から 394/422） */
  .way{ position:relative; padding:22px 24px 0; }
  .way__art{ position:absolute; left:0; right:0; top:0; height:auto;
             display:block; margin:0; min-height:0; }
  .way__art img{ position:absolute; }
  /* カード1: 参加券PDF(74,334) → 矢印(182,432) → 参加証(240,334)。カード x=48 */
  .way:nth-child(1) .way__art img:nth-child(1){ left:26px; top:124px; width:100px; }
  .way:nth-child(1) .way__art img:nth-child(2){ left:134px; top:222px; width:42px; }
  .way:nth-child(1) .way__art img:nth-child(3){ left:192px; top:124px; width:100px; }
  /* カード2: 待機(432,344) → 矢印(558,422) → 成功(604,344)。カード x=410 */
  .way:nth-child(2) .way__art img:nth-child(1){ left:22px; top:134px; width:118px; }
  .way:nth-child(2) .way__art img:nth-child(2){ left:148px; top:212px; width:40px; }
  .way:nth-child(2) .way__art img:nth-child(3){ left:194px; top:134px; width:118px; }
  /* カード3: 名簿(802,330)・QRモーダル(972,366)。カード x=772 */
  .way:nth-child(3) .way__art img:nth-child(1){ left:30px; top:120px; width:150px; }
  .way:nth-child(3) .way__art img:nth-child(2){ left:200px; top:156px; width:98px; margin:0; }
  .way .ticks{ position:absolute; left:26px; top:394px; }
  .way .ticks li{ margin-top:0; height:28px; }
  .sec--s5 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:120px; }
  .sec--s5 .h2{ left:calc(50% - 720px + 473px); top:118px; width:494px; }
  .sec--s5 .lead{ left:calc(50% - 720px + 240px); top:186px; width:960px; }
  .swatches{ left:calc(50% - 720px + 153px); top:258px; width:1134px; gap:14px; flex-wrap:nowrap; }
  .badges{ left:calc(50% - 720px + 375px); top:324px; width:690px; gap:90px; }
  /* Figma では 1 行（h=17）。枠幅 376px に対し文字幅 364px しか余裕が無く、
     環境差で「す。」だけ折り返す。nowrap ＋ 中央基準で置き直す（Figma も中心 720px） */
  .sec--s5 .note{ left:50%; transform:translateX(-50%); top:712px;
                  width:auto; white-space:nowrap; }
  .badges img{ width:170px; }
  .sec--s6 .split__copy{ left:calc(50% - 720px + 96px); top:72px; width:460px; }
  .s6__media{ left:calc(50% - 720px + 555px); top:56px; width:815px; display:block; }
  .s6__paper{ position:absolute; left:0; top:0; width:330px; }
  .features{ position:absolute; left:375px; top:32px; width:440px; }
  .features li{ height:76px; margin:0 0 14px; }
  .sec--s6 .split__copy .lead{ margin-top:42px; }
  .sec--s6 .split__copy .note{ margin-top:18px; }
  .sec--s7 .split__copy{ left:calc(50% - 720px + 96px); top:92px; width:470px; }
  .s7__media{ left:calc(50% - 720px + 560px); top:64px; width:810px; height:397px; display:block; max-width:none; }
  .s7__roster{ position:absolute; left:0; top:0; width:560px; margin:0; }
  .s7__dialog{ position:absolute; left:530px; top:112px; width:280px; }
  .sec--s8 .split__copy{ left:calc(50% - 720px + 96px); top:92px; width:470px; }
  .s8__media{ left:calc(50% - 720px + 560px); top:117px; width:720px; height:423px; display:block; justify-content:flex-start; }
  .s8__phone{ position:absolute; top:0; width:300px; }
  .s8__phone:first-of-type{ left:0; }
  .s8__phone:last-of-type{ left:420px; }
  .s8__phone img{ width:300px; }
  .s8__arrow{ position:absolute; left:324px; top:200.5px; width:72px; }
  .sec--s8 .lead{ margin-top:42px; }
  .sec--s8 .ticks{ position:absolute; top:328px; margin:0; }
  /* 改行は原稿の <br> だけで決める。
     Figma のテキスト枠幅を px で固定すると、たとえば S9 の「受付の進み具合を、」は
     9文字×38px＝342px でちょうど枠と同値になり、フォントが 1px 広く描画されただけで
     折り返して見出しが 1 行増える。すると高さが伸びて、位置を固定した注記と重なる。
     nowrap にすれば環境やフォント読込状態に関係なくカンプどおりの行数になる。 */
  .hero__h,
  .split__copy .h2, .split__copy .lead,
  .sec--s11 .h2{ white-space:nowrap; width:auto; }
  /* 注記は Figma でも枠内で折り返す設計（S9: 380px 幅 → 4行 × 22px = 88px）。
     nowrap にすると右の実機画像の裏へ流れ出るため、幅指定のまま折り返させる。 */
  .sec--s6 .split__copy .note{ width:440px; }
  .sec--s9 .split__copy .note{ position:absolute; top:502px; width:380px; margin:0; }
  .sec--s8 .ticks li{ margin-top:0; height:30px; }
  .sec--s9 .split__copy{ left:calc(50% - 720px + 96px); top:82px; width:470px; }
  .s9__media{ left:calc(50% - 720px + 500px); top:70px; width:820px; height:600px; display:block; padding:0; }
  .s9__board{ position:absolute; left:60px; top:0; width:760px; margin:0; }
  .s9__phone{ position:absolute; left:0; top:280px; width:150px; }
  .sec--s9 .lead{ margin-top:44px; }
  .sec--s9 .checks{ margin-top:33px; }
  .sec--s9 .checks li{ margin-top:0; height:48px; }
  .sec--s9 .checks li:last-child{ height:28px; }   /* Figma: 最後の項目は 540..568 */
  .sec--s9 .note{ margin-top:16px; }
  .sec--s10 .wrap{ position:absolute; inset:0; max-width:none; padding:0; }
  .sec--s10 .wrap > *{ position:absolute; margin:0; }
  .sec--s10 .h2{ left:calc(50% - 720px + 80px); top:42px; }
  .flow{ left:calc(50% - 720px + 80px); top:124px; width:1280px; height:220px; gap:0; margin:0; }
  .flow__card{ flex:0 0 170px; }
  .flow__sep{ flex:0 0 52px; text-align:center; }
  .flow__card{ height:220px; padding:16px 12px 0; }
  .flow__n{ padding-bottom:1px; }
  .flow__card img{ margin-top:14px; }
  .flow__t{ margin-top:24px; line-height:20px; }
  .sec--s11 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:78px; }
  .sec--s11 .h2{ left:calc(50% - 720px + 96px); top:126px; width:460px; }
  .boards{ left:calc(50% - 720px + 48px); top:260px; width:1024px; height:560px; gap:24px; max-width:none; }
  /* Figma の一行見出しは折り返さない（ブラウザとFigmaで字幅がわずかに異なるため） */
  .h2--center, .h2--white, .sec--faq .h2{ white-space:nowrap; }
  /* S11 ボード内部：Figma 実測座標 */
  .board{ position:relative; padding:26px 32px 0; }
  .board__lead{ margin-top:8px; }
  .devices{ position:absolute; left:24px; top:178px; width:440px; gap:16px; margin:0; }
  .devices > li{ height:358px; padding:0; position:relative; }
  .devices__t{ position:absolute; left:11px; top:18px; width:190px; }
  .devices__img{ position:absolute; left:51px; top:110px; margin:0; }
  .devices__tag{ position:absolute; left:13px; top:290px; width:186px; }
  .options{ position:absolute; left:24px; top:90px; width:452px; gap:9px 20px; margin:0; }
  .options > li{ height:144px; padding:0; position:relative; }
  .options__row{ position:absolute; left:16px; right:16px; top:12px; }
  .options__row img{ margin:0; }
  .options__t{ position:absolute; left:16px; top:66px; width:184px; margin:0; }
  /* Figma 901:180 = (848,750) → カード(832,656) から 94px。
     幅は Figma の枠 184px だとブラウザが「再案内メ|ールを配信」と割ってしまう
     （12文字=168px・13文字=182px で 184px にわずかに収まるため）。
     176px にすると 13 文字目が入らず、カンプと同じ「再案内|メールを配信」になる。 */
  .options__d{ position:absolute; left:16px; top:94px; width:176px; margin:0; }
  .sec--s12 .wrap{ position:absolute; inset:0; max-width:none; padding:0; }
  .sec--s12 .wrap > *{ position:absolute; margin:0; }
  .sec--s12 .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:72px; }
  .sec--s12 .h2{ left:calc(50% - 720px + 435px); top:62px; width:570px; }
  /* 同上。枠幅 362px に対し文字幅 364px で、そもそも 2px 足りていない */
  .sec--s12 .note{ left:50%; transform:translateX(-50%); top:130px;
                   width:auto; white-space:nowrap; }
  .intro{ left:calc(50% - 720px + 18px); top:176px; width:1404px; margin:0; }
  .intro__step:not(:last-child)::after{ left:calc(100% - 26px); right:auto; width:62px; }
  .sec--faq .wrap > .eyebrow{ position:absolute; left:calc(50% - 720px + 96px); top:104px; }
  .sec--faq .h2{ left:calc(50% - 720px + 96px); top:150px; width:400px; }
  .faq{ left:calc(50% - 720px + 64px); top:214px; width:720px; margin:0; max-width:none; }
  .faq__callout{ left:calc(50% - 720px + 842px); top:250px; width:220px; height:96px; margin:0; }
  .sec--cta .split__copy{ left:calc(50% - 720px + 96px); top:92px; width:600px; }
  .assurance{ left:calc(50% - 720px + 700px); top:150px; width:400px; padding:0; }
  .sec--cta .h2{ margin-top:24px; }
  .sec--cta .lead{ margin:16px 0 0; }
  .sec--cta .split__copy > p:last-child{ position:absolute; top:345px; margin:0; }
  .assurance li{ margin-top:0; height:50px; }
}