@charset "utf-8";
/* =========================================================
   GALLINE BLACK MANNER — 日本語ランディングページ
   トンマナ：Aura / GALLINE カタログ準拠
   （黒・ネイビー・メタリック・光沢／写真はカラー）
   ========================================================= */

:root{
  /* ---- カタログから採取した配色 ---- */
  --ink:      #0e141d;   /* 最暗部（黒に近いネイビー） */
  --ink-2:    #141d28;
  --navy:     #22303f;
  --navy-2:   #2f4256;   /* カタログ見出し帯 */
  --navy-3:   #3f5969;
  --steel:    #5b7897;
  --steel-2:  #7a8fb2;   /* カタログの面色 */
  --steel-lt: #c1cbda;
  --paper:    #eef1f5;
  --paper-2:  #e1e6ee;
  --white:    #ffffff;
  --line-green:#06c755;

  --text-d:   #e7ecf3;   /* 暗地の本文 */
  --text-dm:  #9dabbd;   /* 暗地の副文 */
  --text-l:   #17212c;   /* 明地の本文 */
  --text-lm:  #5b6879;   /* 明地の副文 */

  --line:     rgba(255,255,255,.14);
  --line-d:   rgba(14,20,29,.13);

  /* メタリック */
  --metal: linear-gradient(118deg,#ffffff 0%,#c9d3df 22%,#f4f7fa 42%,#93a3b6 62%,#e8edf3 80%,#aab7c7 100%);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 44%, rgba(255,255,255,0) 100%);

  --w:        1140px;
  --w-narrow: 760px;
  --pad:      clamp(22px, 5vw, 44px);
  --sec:      clamp(72px, 10vw, 128px);

  --ff: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --ff-en: "Archivo", "Helvetica Neue", Arial, var(--ff);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--text-d);
  font-family:var(--ff); font-weight:400; line-height:1.9;
  letter-spacing:.02em; font-size:17px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,table{ margin:0; }
ul,ol{ padding:0; list-style:none; }
strong{ font-weight:700; }
::selection{ background:var(--steel-2); color:#0e141d; }

/* ---------- レイアウト ---------- */
.wrap{ width:min(100% - var(--pad)*2, var(--w)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - var(--pad)*2, var(--w-narrow)); margin-inline:auto; }
.sec{ padding-block:var(--sec); position:relative; }
.sec--tight{ padding-block:clamp(52px,7vw,84px); }

.s-ink{   background:var(--ink);   color:var(--text-d); }
.s-ink2{  background:var(--ink-2); color:var(--text-d); }
.s-navy{  background:var(--navy);  color:var(--text-d); }
.s-navy2{ background:var(--navy-2);color:#fff; }
.s-steel{ background:var(--steel-2); color:#101821; }
.s-paper{ background:var(--paper); color:var(--text-l); }
.s-white{ background:var(--white); color:var(--text-l); }

/* 光沢の面（暗いセクションの上端に薄い光） */
.s-ink::before,.s-ink2::before,.s-navy::before,.s-navy2::before{
  content:""; position:absolute; inset:0 0 auto 0; height:180px;
  background:var(--gloss); pointer-events:none;
}

/* ---------- タイポグラフィ ---------- */
.kicker{
  font-family:var(--ff-en); font-weight:700; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--steel-2); margin-bottom:18px; line-height:1;
}
.s-paper .kicker,.s-white .kicker{ color:var(--steel); }
.s-steel .kicker{ color:#23313f; }

.h2,.h3,.lead,.fv__h1,.fv__sub,.shout,.card h3,.step p,.checks li,.small,.note,
.stat span,.figure figcaption,.faq summary,.faq p,.cmp td,.spec td,.big{
  word-break:auto-phrase; line-break:strict;
}
.h2{
  font-size:clamp(26px,4.6vw,42px); font-weight:700; line-height:1.5;
  letter-spacing:.005em; margin-bottom:20px;
}
.h3{ font-size:clamp(19px,2.4vw,25px); font-weight:700; line-height:1.65; }
/* 中央寄せ見出しは幅を絞って、手動の <br> なしでも2行に落ち着かせる */
.center .h2{ max-width:20em; margin-inline:auto; }
.lead{ font-size:clamp(16px,1.7vw,18.5px); line-height:2.05; color:var(--text-dm); }
.s-paper .lead,.s-white .lead{ color:var(--text-lm); }
.s-steel .lead{ color:#2b3a49; }
.small{ font-size:15px; line-height:1.95; color:var(--text-dm); }
.s-paper .small,.s-white .small{ color:var(--text-lm); }
.note{ font-size:12.5px; line-height:1.85; color:#7e8b9c; margin-top:18px; }
.s-paper .note,.s-white .note{ color:#8b95a4; }
.center{ text-align:center; }

/* メタリック文字 */
.metal{
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.c-steel{ color:var(--steel-2); }
.s-paper .c-steel,.s-white .c-steel{ color:var(--steel); }
.hl{ background:linear-gradient(transparent 62%, rgba(122,143,178,.45) 62%); padding:0 .08em; }
.inv{ background:var(--navy-2); color:#fff; padding:.08em .4em; display:inline-block; }
.s-ink .inv,.s-ink2 .inv,.s-navy .inv{ background:var(--steel-2); color:#101821; }

/* ---------- ヘッダー（固定・CTAはここだけ） ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:60px; display:flex; align-items:center;
  background:rgba(14,20,29,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:background .3s;
}
.hdr.is-stuck{ background:rgba(14,20,29,.94); }
.hdr__in{ width:min(100% - var(--pad)*2, var(--w)); margin-inline:auto;
  display:flex; align-items:center; gap:14px; }
.hdr__logo{ display:block; }
.hdr__logo img{ height:19px; width:auto; }
.hdr__cta{
  margin-left:auto; font-size:13px; font-weight:700; text-decoration:none; letter-spacing:.02em;
  color:#fff; padding:11px 20px; white-space:nowrap; border-radius:2px;
  background:linear-gradient(180deg,#42596f 0%,#28394c 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px rgba(0,0,0,.35);
}
.hdr__cta:hover{ background:linear-gradient(180deg,#54708a 0%,#33475d 100%); }

/* ---------- FV ---------- */
.fv{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:96px 56px; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% 18%, #2b3c50 0%, rgba(43,60,80,0) 62%),
    radial-gradient(900px 600px at 8% 88%, #1b2735 0%, rgba(27,39,53,0) 60%),
    var(--ink);
}
.fv::after{ /* 斜めのネイビー面（カタログの版面） */
  content:""; position:absolute; right:-14%; top:-18%; width:62%; height:136%;
  background:linear-gradient(160deg, rgba(122,143,178,.16), rgba(47,66,86,.05));
  transform:skewX(-11deg); pointer-events:none;
}
.fv__in{ position:relative; z-index:2; display:grid; gap:clamp(28px,4vw,52px);
  grid-template-columns:1fr; align-items:center; }
.fv__logo{ height:26px; width:auto; margin-bottom:26px; }
.fv__h1{
  font-size:clamp(33px,7.4vw,62px); font-weight:700; line-height:1.36;
  letter-spacing:.01em; color:#fff; margin-bottom:20px;
}
.fv__h1 em{ font-style:normal; display:inline-block; }
.fv__h1 .n{
  font-family:var(--ff-en); font-weight:900; font-size:1.42em; letter-spacing:-.03em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; line-height:1;
}
/* 見出しに添える出典ラベル（言い切らず、事実ベースで示す） */
.fv__qual{
  display:block; margin-top:16px; padding-left:14px;
  font-size:13px; font-weight:400; letter-spacing:.1em; line-height:1.6;
  color:var(--steel-2); border-left:2px solid var(--steel);
}
.fv__sub{ font-size:clamp(15.5px,1.85vw,18px); color:#b9c5d4; line-height:2.0; margin-bottom:28px; max-width:30em; }
.fv__how{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:470px; }
.fv__how li{
  border:1px solid var(--line); padding:14px 12px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fv__how b{ display:block; font-family:var(--ff-en); font-size:12px; letter-spacing:.14em;
  color:var(--steel-2); margin-bottom:6px; }
.fv__how span{ font-size:13.5px; font-weight:700; line-height:1.55; color:#fff; }
.fv__media{ position:relative; }
.fv__media img,
.fv__media video{
  width:100%; height:auto; display:block; border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.55); background:#0e141d;
}
/* 動画の再生／一時停止ボタン（右下・控えめ） */
.fv__vbtn{
  position:absolute; right:10px; bottom:10px; z-index:3;
  width:38px; height:38px; padding:0; cursor:pointer;
  font-family:var(--ff-en); font-size:11px; line-height:1; color:#fff;
  background:rgba(14,20,29,.7); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.34); border-radius:2px;
  transition:background .2s;
}
.fv__vbtn:hover{ background:rgba(14,20,29,.92); }
.fv__tag{
  position:absolute; left:0; bottom:-1px; z-index:2;
  background:rgba(14,20,29,.82); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-left:0; border-bottom:0;
  padding:9px 16px; font-size:12.5px; letter-spacing:.06em; color:#dbe3ec;
}
.fv__note{ font-size:11.5px; color:#78889b; margin-top:16px; line-height:1.75; }
.fv__scroll{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  font-family:var(--ff-en); font-size:10px; letter-spacing:.34em; color:rgba(255,255,255,.4);
}
.fv__scroll::after{ content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); }
@media (min-width:900px){
  .fv__in{ grid-template-columns:1.02fr .98fr; }
  .fv__logo{ height:30px; }
}

/* ---------- 汎用 ---------- */
.grid{ display:grid; gap:clamp(14px,2vw,22px); }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
.g4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){
  .g2{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(4,1fr); }
}

.card{
  border:1px solid var(--line); padding:clamp(22px,2.6vw,30px);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.s-paper .card,.s-white .card{
  background:#fff; border-color:var(--line-d);
  box-shadow:0 1px 2px rgba(14,20,29,.06), 0 10px 24px rgba(14,20,29,.05);
}
.card__no{ font-family:var(--ff-en); font-weight:700; font-size:11.5px; letter-spacing:.24em;
  color:var(--steel-2); margin-bottom:12px; text-transform:uppercase; }
.s-paper .card__no,.s-white .card__no{ color:var(--steel); }
.card h3{ font-size:18px; font-weight:700; line-height:1.65; margin-bottom:10px; }
.card p{ font-size:15px; line-height:1.95; color:var(--text-dm); }
.s-paper .card p,.s-white .card p{ color:var(--text-lm); }

.figure{ margin:0; }
.figure img{ width:100%; }
.figure figcaption{ font-size:12.5px; color:var(--text-dm); margin-top:10px; line-height:1.75; }
.s-paper .figure figcaption,.s-white .figure figcaption{ color:var(--text-lm); }
.img-16x9 img{ aspect-ratio:16/9; object-fit:cover; }
.img-3x2  img{ aspect-ratio:3/2;  object-fit:cover; }
.img-4x3  img{ aspect-ratio:4/3;  object-fit:cover; }
.img-1x1  img{ aspect-ratio:1/1;  object-fit:cover; }
.img-3x4  img{ aspect-ratio:3/4;  object-fit:cover; }
.shadow img{ box-shadow:0 18px 40px rgba(0,0,0,.35); }

.split{ display:grid; gap:clamp(24px,3.4vw,52px); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-l{ grid-template-columns:1.18fr .82fr; }
  .split--wide-r{ grid-template-columns:.82fr 1.18fr; }
  .split--rev > :first-child{ order:2; }
}

/* 大きな一言 */
.shout{ font-size:clamp(25px,5.4vw,48px); font-weight:700; line-height:1.48; }
.big{ font-size:clamp(21px,3.2vw,30px); font-weight:700; line-height:1.65; }

/* 使い方 4ステップ */
.how{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .how{ grid-template-columns:repeat(4,1fr); } }
.how figure{ margin:0; background:#fff; border:1px solid var(--line-d); }
.how img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.how figcaption{ padding:16px 16px 20px; }
.how b{ display:block; font-family:var(--ff-en); font-size:26px; font-weight:900;
  letter-spacing:-.03em; color:var(--steel); line-height:1; margin-bottom:8px; }
.how span{ display:block; font-size:15.5px; font-weight:700; line-height:1.6; color:var(--text-l); }
.how em{ display:block; font-style:normal; font-size:13px; line-height:1.75;
  color:var(--text-lm); margin-top:6px; font-weight:400; }

/* 数値タイル */
.stats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.s-paper .stats,.s-white .stats{ background:var(--line-d); border-color:var(--line-d); }
.stat{ background:var(--ink-2); padding:clamp(24px,3vw,34px) 18px; text-align:center; position:relative; }
.s-paper .stat,.s-white .stat{ background:#fff; }
.stat b{ display:block; font-family:var(--ff-en); font-weight:900; font-size:clamp(30px,5.6vw,52px);
  letter-spacing:-.03em; line-height:1.05;
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }
.s-paper .stat b,.s-white .stat b{
  background:linear-gradient(118deg,#2f4256,#5b7897 45%,#22303f 80%);
  -webkit-background-clip:text; background-clip:text; }
.stat b u{ font-style:normal; text-decoration:none; font-size:.4em; letter-spacing:.03em; margin-left:.1em; }
.stat span{ display:block; font-size:13px; color:var(--text-dm); margin-top:12px; line-height:1.7; }
.s-paper .stat span,.s-white .stat span{ color:var(--text-lm); }
.stats--3{ grid-template-columns:1fr; }
@media (min-width:760px){ .stats--3{ grid-template-columns:repeat(3,1fr); } }

/* チェックリスト */
.checks{ display:grid; gap:10px; }
.checks li{
  display:flex; gap:14px; align-items:flex-start; font-size:clamp(15.5px,2vw,18px);
  font-weight:700; line-height:1.75;
}
.checks li::before{
  content:""; flex:0 0 22px; width:22px; height:22px; margin-top:5px;
  background:var(--steel-2);
  -webkit-mask:linear-gradient(45deg,transparent 42%,#000 42%,#000 56%,transparent 56%) no-repeat 4px 2px/13px 13px,
        linear-gradient(-45deg,transparent 56%,#000 56%,#000 70%,transparent 70%) no-repeat -1px 3px/11px 11px;
          mask:linear-gradient(45deg,transparent 42%,#000 42%,#000 56%,transparent 56%) no-repeat 4px 2px/13px 13px,
        linear-gradient(-45deg,transparent 56%,#000 56%,#000 70%,transparent 70%) no-repeat -1px 3px/11px 11px;
}

/* 小見出しラベル（ブロックの種類を示す） */
.sub-label{
  font-family:var(--ff); font-weight:700; font-size:12.5px; letter-spacing:.16em;
  color:var(--steel); text-align:center; margin-bottom:16px;
}
.s-ink .sub-label,.s-ink2 .sub-label,.s-navy .sub-label{ color:var(--steel-2); }
/* ブロック内に置くブランドマーク */
.brand-mark{ height:22px; width:auto; margin-bottom:18px; }

/* 認証ロゴ列 */
.badges{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,52px); padding:clamp(24px,3vw,34px) 20px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.s-paper .badges,.s-white .badges{ border-color:var(--line-d); background:#fff; }
.badges img{ height:26px; width:auto; opacity:.9; }
/* ロゴ＋説明でテキスト項目と体裁を揃える */
.b-txt--logo img{ height:24px; margin-bottom:7px; }
.badges .b-txt{ font-family:var(--ff-en); font-weight:700; font-size:14px; letter-spacing:.1em;
  color:var(--text-dm); }
.s-paper .badges .b-txt,.s-white .badges .b-txt{ color:var(--text-lm); }
.badges .b-txt small{ display:block; font-size:10.5px; letter-spacing:.06em; font-weight:400; margin-top:3px; }

/* 証拠グリッド */
.proof{ display:grid; gap:1px; grid-template-columns:repeat(2,1fr);
  background:var(--line); border:1px solid var(--line); }
@media (min-width:860px){ .proof{ grid-template-columns:repeat(4,1fr); } }
.proof figure{ background:#fff; padding:14px; margin:0; display:flex; flex-direction:column; }
.proof img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:#fff; }
.proof figcaption{ margin-top:auto; padding-top:10px; font-size:12px; color:var(--text-lm);
  text-align:center; line-height:1.7; }

/* 比較表 */
.cmp{ width:100%; border-collapse:collapse; font-size:15px; background:#fff; }
.cmp th,.cmp td{ padding:16px 14px; line-height:1.8; border:1px solid var(--line-d); }
.cmp .c-key{ text-align:center; font-weight:700; font-size:13.5px; background:var(--navy-2); color:#fff;
  white-space:nowrap; letter-spacing:.06em; }
.cmp .c-them{ color:var(--text-lm); text-align:center; background:var(--paper); }
.cmp .c-us{ background:#fff; font-weight:700; text-align:center; color:var(--text-l); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll > table{ min-width:560px; }

/* 仕様表 */
.spec{ width:100%; border-collapse:collapse; font-size:16px; }
.spec th,.spec td{ padding:16px 4px; text-align:left; border-bottom:1px solid var(--line); line-height:1.85; }
.spec th{ width:9em; font-weight:700; color:var(--steel-2); white-space:nowrap; vertical-align:top;
  font-size:13.5px; letter-spacing:.08em; }
.s-paper .spec th,.s-white .spec th{ color:var(--steel); }
.s-paper .spec th,.s-paper .spec td,.s-white .spec th,.s-white .spec td{ border-bottom-color:var(--line-d); }

/* FAQ */
.faq details{ border-bottom:1px solid var(--line-d); }
.faq summary{ cursor:pointer; list-style:none; padding:24px 42px 24px 0; position:relative;
  font-weight:700; font-size:17px; line-height:1.75; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:13px; height:1px;
  background:var(--steel); }
.faq summary::before{ content:""; position:absolute; right:12px; top:50%; width:1px; height:13px;
  margin-top:-6px; background:var(--steel); transition:opacity .25s; }
.faq details[open] summary::before{ opacity:0; }
.faq p{ padding:0 0 26px; font-size:15.5px; line-height:2.05; color:var(--text-lm); }

/* CTA */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  font-weight:700; font-size:16.5px; padding:20px 38px; letter-spacing:.03em; color:#fff;
  background:linear-gradient(180deg,#4a6379 0%,#28394c 100%);
  border:1px solid rgba(255,255,255,.26); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(0,0,0,.4);
  transition:filter .2s;
}
.cta:hover{ filter:brightness(1.12); }
.cta--line{
  background:linear-gradient(180deg,#0ad866 0%,#05a747 100%); color:#fff;
  border-color:rgba(255,255,255,.3); font-size:15.5px; padding:18px 30px;
}
.cta__line-mark{ font-family:var(--ff-en); font-weight:900; font-size:11.5px; letter-spacing:.12em;
  background:#fff; color:#06c755; padding:3px 7px; line-height:1.2; border-radius:2px; }
.ftr__line{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:14px;
  font-weight:700; color:#fff; border:1px solid var(--line); padding:12px 18px; border-radius:2px;
}
.ftr__line:hover{ background:rgba(6,199,85,.16); border-color:#06c755; }
.ftr__line .cta__line-mark{ background:#06c755; color:#fff; }

/* フォーム */
.notify{ display:grid; gap:12px; margin-top:30px; }
.notify input{
  width:100%; padding:19px 18px; font-size:16px; font-family:inherit;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.05); color:#fff; border-radius:2px;
}
.notify input::placeholder{ color:#76849a; }
.notify input:focus{ outline:none; border-color:var(--steel-2); }
.notify button{
  padding:19px 26px; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer;
  color:#fff; border:1px solid rgba(255,255,255,.26); border-radius:2px;
  background:linear-gradient(180deg,#4a6379 0%,#28394c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.notify button:hover{ filter:brightness(1.12); }
@media (min-width:640px){ .notify{ grid-template-columns:1fr auto; } }

/* フッター */
.ftr{ background:#080d14; padding:56px 0 104px; border-top:1px solid var(--line); }
.ftr img{ height:22px; width:auto; }
.ftr .small{ color:#7b8798; }

/* 下部固定CTA（スマホのみ） */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:99;
  background:rgba(14,20,29,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  transform:translateY(130%); transition:transform .35s ease;
}
.dock.is-on{ transform:translateY(0); }
.dock a{
  display:block; text-align:center; text-decoration:none; color:#fff; font-weight:700; font-size:16px;
  padding:16px; border-radius:2px; border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg,#4a6379 0%,#28394c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
@media (min-width:900px){ .dock{ display:none !important; } }

/* スクロール表示 */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.s-paper .rule,.s-white .rule{ background:var(--line-d); }

/* ユーティリティ */
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}.mt-xl{margin-top:64px}
.mb-m{margin-bottom:28px}
/* 日本語は 1em ≒ 全角1文字。ch は半角基準で狭すぎるため em で指定する */
.maxw-46{max-width:34em}.maxw-60{max-width:38em}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width:760px){
  body{ font-size:17px; line-height:1.95; }
  .h2{ font-size:clamp(24px,6.4vw,30px); line-height:1.55; }
  .h3{ font-size:19.5px; }
  .shout{ font-size:clamp(24px,7vw,32px); line-height:1.55; }
  .big{ font-size:21px; line-height:1.7; }
  .kicker{ font-size:10.5px; letter-spacing:.2em; margin-bottom:14px; }
  .mt-xl{ margin-top:48px } .mt-l{ margin-top:34px }
  .card{ padding:22px 20px; }

  /* FV：写真を上、コピーを下に。1画面に収める */
  .fv{ min-height:0; padding-block:78px 44px; }
  .fv::after{ display:none; }
  .fv__in{ gap:24px; }
  .fv__logo{ height:22px; margin-bottom:18px; }
  .fv__h1{ font-size:clamp(29px,8.2vw,38px); line-height:1.42; margin-bottom:16px; }
  .fv__qual{ font-size:12px; margin-top:12px; padding-left:11px; }
  .fv__sub{ font-size:15.5px; margin-bottom:22px; }
  .fv__how{ max-width:none; gap:7px; }
  .fv__how li{ padding:11px 6px; }
  .fv__how b{ font-size:10.5px; letter-spacing:.08em; margin-bottom:4px; }
  .fv__how span{ font-size:12.5px; }
  /* 動画はコピー・注記のあとに置く（スマホで最上部に来ないように） */
  .fv__media{ margin-top:6px; }
  .fv__scroll{ display:none; }

  /* 比較表：横スクロールをやめ縦積みカードに */
  .tbl-scroll{ overflow:visible; }
  .tbl-scroll > table{ min-width:0; }
  .cmp{ display:block; background:transparent; }
  .cmp thead{ display:none; }
  .cmp tbody{ display:grid; gap:12px; }
  .cmp tbody tr{ display:flex; flex-direction:column; border:1px solid var(--line-d); background:#fff; }
  .cmp th,.cmp td{ display:block; width:100%; border:0; padding:0; }
  .cmp .c-key{ order:-1; text-align:left; padding:12px 16px; font-size:12.5px; letter-spacing:.12em; white-space:normal; }
  .cmp .c-them,.cmp .c-us{ text-align:left; padding:15px 16px; }
  .cmp .c-them{ border-bottom:1px solid var(--line-d); }
  .cmp .c-them::before,.cmp .c-us::before{
    content:attr(data-l); display:block; font-size:11px; letter-spacing:.16em;
    color:var(--steel); margin-bottom:5px; font-weight:700;
  }

  /* 仕様表：縦積み */
  .spec th,.spec td{ display:block; width:auto; }
  .spec th{ padding:18px 0 3px; border-bottom:0; font-size:12px; letter-spacing:.14em; }
  .spec td{ padding:0 0 16px; }

  .stat{ padding:22px 14px; }
  .stat b{ font-size:clamp(28px,8.6vw,40px); }
  .stat span{ font-size:12.5px; margin-top:9px; }

  .badges{ gap:18px 26px; padding:22px 16px; }
  .badges img{ height:21px; }
  .badges .b-txt{ font-size:12.5px; }

  .proof figure{ padding:11px; }
  .proof figcaption{ font-size:11px; }

  .faq summary{ font-size:16.5px; padding:22px 38px 22px 0; }
  .faq p{ font-size:15.5px; }

  .hdr__cta{ font-size:12px; padding:9px 13px; }
  .hdr.is-stuck .hdr__cta{ display:none; }
  .ftr{ padding-bottom:112px; }
}

@media (max-width:420px){
  .cta{ width:100%; font-size:15.5px; padding:18px 22px; }
  .cta--line{ font-size:14.5px; padding:17px 16px; gap:8px; }
  /* 使い方は2×2に保つ（縦積みにすると長くなりすぎる） */
  .how{ gap:10px; }
  .how figcaption{ padding:12px 12px 15px; }
  .how b{ font-size:21px; margin-bottom:5px; }
  .how span{ font-size:14px; line-height:1.55; }
  .how em{ font-size:12px; margin-top:4px; }
  .fv__how li{ padding:10px 4px; }
  .fv__how span{ font-size:12px; }
}