/* ==========================================================================
   外国人材 定着コンパス — サイト見た目案 v3
   ミキワメの実測値を寸法として採用。横は 1280→1120 の 0.875 倍、縦は等倍。
   色は自社値のまま、役割の構造だけ移植する。
     #0078c8 = 彼らの teal の役割（ラベル文字・矢印・ヘアライン・副ボタンの塗り）
     #005f9e = 彼らの赤の役割（主CTAの面。1ページで1動作だけ）
     #f5b942 = 彼らの黄の役割（面ではなく線と文字）
     #0b2545 = 本文インク・吹き出し・フッター地（黒とグレーを混ぜない）
   ========================================================================== */
:root{
  /* --- 面（6色だけ。近似の白を足さない） --- */
  --c-bg:#f7fbfe; --c-surface:#ffffff; --c-tint-1:#eef5fb; --c-tint-2:#e3eef7; --c-ink-900:#0b2545;
  --g-hero:linear-gradient(284deg,#0078c8 -5%,#005f9e 95%);
  --g-band:linear-gradient(156deg,#005f9e 36%,#0078c8 82%);
  --g-catch:linear-gradient(#ffffff,#eef5fb 58%);
  /* --- 線と文字 --- */
  --c-brand-500:#0078c8; --c-brand-600:#0068ae; --c-brand-700:#005f9e; --c-brand-800:#004b7d;
  --c-logo-navy:#003870; --c-text-mute:#556a80;
  --c-line:#d9e4ee; --c-line-strong:#a9c6dd; --c-line-form:#7f93a8;
  --c-accent:#f5b942; --c-danger:#c0392b;
  --c-footer-link:rgba(255,255,255,.7); --c-footer-line:rgba(255,255,255,.22);
  /* --- 影の台帳（7本。面には一切かけない） --- */
  --sh-float:0 8px 24px rgba(11,37,69,.08);
  --sh-overlap:0 2px 6px rgba(11,37,69,.10);
  --sh-row:0 0 6px rgba(11,37,69,.16);
  --sh-btn:0 2px 4px rgba(11,37,69,.16);
  --sh-bubble:0 4px 12px rgba(11,37,69,.10);
  --sh-hover:0 15px 30px -5px rgba(11,37,69,.15),0 0 5px rgba(11,37,69,.10);
  /* --- 角丸ラダー（要素が大きいほど半径も大きく） --- */
  --r-4:4px; --r-12:12px; --r-24:24px; --r-72:72px; --r-104:40px; --r-pill:9999px;
  /* --- 幅（3段。狭くするほど読み物になる） --- */
  --w-1120:1120px; --w-960:960px; --w-860:860px; --gutter:32px;
  /* --- 縦の基準は 56px 一本。崩すのは重なりの受け皿だけ --- */
  --sec-y:56px;
  --header-total:112px;
  /* フッターの引き上げ量。受け皿はこの値から導出する（2か所に書くと必ずズレる） */
  --footer-pull:96px;
  --f-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --f-num:"Inter",var(--f-sans);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--c-bg); color:var(--c-ink-900);
  font-family:var(--f-sans); font-size:16px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* 装飾のはみ出しを受ける。hidden にすると sticky が死ぬので clip */
  overflow-x:clip;
  line-break:strict; word-break:auto-phrase; text-spacing-trim:space-all;
}
h1,h2,h3,h4,.pivot,.faq summary{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.nw{white-space:nowrap}
.br-pc{display:none}
@media (min-width:64em){ .br-pc{display:inline} }
a{color:var(--c-brand-600)}
:focus-visible{outline:3px solid var(--c-brand-500); outline-offset:2px}
svg{display:block}
img{max-width:100%}

.wrap{max-width:var(--w-1120); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1}
.wrap--read{max-width:var(--w-960)}
.sec{padding-block:var(--sec-y); position:relative}
.sec--sm{padding-block:40px}
.sec--lg{padding-block:88px}
.sec--tint{background:var(--c-tint-1)}
.sec--white{background:var(--c-surface)}
/* 同じ地の節が続くときは、paddingを帯の外側だけに持たせる（継ぎ目に谷を作らない） */
.sec--tint + .sec--tint,.sec--white + .sec--white{padding-top:0}
.sec--tint:has(+ .sec--tint),.sec--white:has(+ .sec--white){padding-bottom:0}
.sec--catch{background:var(--g-catch)}
section[id]{scroll-margin-top:var(--header-total)}

/* ---- 見出しブロック：英字ラベル（黄の下線）→ h2 の2段。総高は97か154の二値 ---- */
.sec-head{margin-bottom:36px; text-align:center}
.sec-head--left{text-align:left}
.sec-head--list{margin-bottom:24px}
.sec-head--band{margin-bottom:52px}
.eyebrow{margin:0 0 16px; height:23px; line-height:23px}
.eyebrow span{
  display:inline; font-size:14px; font-weight:700; letter-spacing:.04em; line-height:normal;
  color:var(--c-brand-500); padding-bottom:4px; border-bottom:5px solid var(--c-accent);
}
.h2{font-size:40px; font-weight:700; line-height:1.45; letter-spacing:.08em;
  color:var(--c-ink-900); margin:0}
.h2--sm{font-size:30px}
.h2 em{font-style:normal; color:var(--c-brand-500)}
.h2 b{font-weight:700; color:var(--c-brand-500)}
.h3{font-size:36px; font-weight:700; line-height:1.45; letter-spacing:.08em; color:var(--c-ink-900); margin:0}
.lead{font-size:16px; font-weight:400; line-height:1.8;
  color:var(--c-ink-900); margin:20px auto 0; max-width:36em}
.sec-head--left .lead{margin-inline:0}
.note{font-size:12px; line-height:1.7; color:var(--c-text-mute); margin:16px 0 0; max-width:52em}

/* 色反転の帯の中では、ラベルは白 */
.on-band .eyebrow span{color:#fff}
.on-band .h2,.on-band .h3,.on-band .lead,.on-band p{color:#fff}

/* ---- ボタン：60pxのピル＋矢印。hoverは3速度（沈み＝即時／塗り .4s／矢印 .3s） ---- */
.cta-unit{display:inline-flex; flex-direction:column; align-items:center; position:relative}
.bubble{
  position:relative; margin-bottom:14px; height:36px; min-width:140px; padding:8px 16px;
  border-radius:var(--r-12); background:var(--c-ink-900); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.04em; line-height:20px; white-space:nowrap;
  box-shadow:var(--sh-bubble);
}
.bubble em{font-style:normal; color:var(--c-accent)}
.bubble::after{content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px;
  transform:translateX(-50%) rotate(45deg); background:var(--c-ink-900)}
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  height:60px; padding:0 32px; border-radius:var(--r-pill); border:0;
  font-size:16px; font-weight:700; line-height:1; letter-spacing:.04em;
  text-decoration:none; cursor:pointer; box-shadow:var(--sh-btn);
}
.btn__t{position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px;
  transition:color .4s ease-in-out}
/* 矢印は円のチップ。ミキワメは4px角丸の正方形だが、そこは形を変えている（後述） */
.btn .ic{width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  transition:transform .3s ease-in-out}
.btn .ic svg{width:14px; height:14px}
.btn__wipe{position:absolute; inset:-2px; z-index:0; transform:translateX(-105%);
  transition:transform .35s var(--ease)}
.btn--primary{background:var(--c-brand-700); color:#fff; border:2px solid #fff}
.btn--primary .ic{background:#fff; color:var(--c-brand-700)}
.btn--primary .btn__wipe{background:#fff}
.btn--secondary{background:var(--c-surface); color:var(--c-ink-900); border:1px solid var(--c-line)}
.btn--secondary .ic{background:var(--c-brand-500); color:#fff}
.btn--secondary .btn__wipe{background:var(--c-brand-500)}
.btn--warm{background:var(--c-accent); color:var(--c-ink-900)}
.btn--warm .ic{background:var(--c-ink-900); color:var(--c-accent)}
.btn--warm .btn__wipe{background:var(--c-ink-900)}
.btn--sm{height:42px; padding:0 24px; font-size:14px; letter-spacing:.04em}
.btn--sm .ic{width:22px; height:22px}
.btn--sm .ic svg{width:11px; height:11px}
@media (hover:hover){
  .btn:hover{transform:translateY(3px)}          /* transition に入れない＝即時に沈む */
  .btn:hover .btn__wipe{transform:translateX(0)}
  .btn:hover .ic{transform:scale(.86)}
  .btn--primary:hover .btn__t{color:var(--c-brand-700)}
  .btn--primary:hover .ic{background:var(--c-brand-700); color:#fff}
  .btn--secondary:hover .btn__t{color:#fff}
  .btn--secondary:hover .ic{background:#fff; color:var(--c-brand-500)}
  .btn--warm:hover .btn__t{color:var(--c-accent)}
}
.btn-row{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:56px; align-items:flex-end}
.sec-head--left ~ .btn-row,.btn-row--left{justify-content:flex-start}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  color:var(--c-brand-600); text-decoration:none}
.link-arrow svg{width:14px; height:14px; transition:transform .3s var(--ease)}
@media (hover:hover){ .link-arrow:hover{text-decoration:underline} .link-arrow:hover svg{transform:translateX(4px)} }

/* ---- カード：枠線ではなく影の種類で見分ける ---- */
.card{position:relative; background:var(--c-surface); border-radius:var(--r-12); padding:24px;
  box-shadow:var(--sh-row); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.card--float{box-shadow:var(--sh-float)}
.card--frame{box-shadow:none; border:1px solid var(--c-line)}
@media (hover:hover){ .card:hover{transform:translateY(-4px); box-shadow:var(--sh-hover)} }
.card__no{display:block; font-family:var(--f-num); font-size:18px; font-weight:700;
  line-height:1.5; color:var(--c-brand-500); letter-spacing:.04em}
.card h3{font-size:18px; font-weight:700; line-height:1.6; color:var(--c-ink-900); margin:8px 0 0}
.card__sub{font-size:14px; font-weight:700; line-height:1.6; color:var(--c-ink-900); margin:8px 0 0}
.card p{font-size:14px; line-height:1.7; margin:12px 0 0; color:var(--c-text-mute)}
.card__ic{display:block; margin-bottom:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.card--wide{grid-column:span 2}
/* 透かしの巨大数字（3項目だけ） */
.card{overflow:hidden}
.card--ghost{overflow:hidden}
.ghost{position:absolute; top:-42px; right:8px; z-index:0;
  font-family:var(--f-num); font-size:140px; font-weight:700; line-height:1;
  color:rgba(0,120,200,.12); pointer-events:none}
.card > *:not(.ghost){position:relative; z-index:2}

.ico{width:24px; height:24px; fill:none; stroke:var(--c-brand-500); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.tick{list-style:none; margin:16px 0 0; padding:0}
.tick li{position:relative; padding-left:28px; margin-top:12px; font-size:14px; line-height:1.7}
.tick li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:var(--r-4); background:var(--c-brand-500)}
.steplist{counter-reset:s; list-style:none; margin:16px 0 0; padding:0}
.steplist li{counter-increment:s; position:relative; padding-left:32px; margin-top:12px;
  font-size:14px; line-height:1.7}
.steplist li::before{content:counter(s); position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%; background:var(--c-tint-1);
  color:var(--c-brand-700); font-family:var(--f-num); font-size:11px; font-weight:700;
  display:grid; place-items:center}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; justify-content:center}
.chips li{font-size:12px; font-weight:700; line-height:1.5; color:var(--c-brand-600);
  background:var(--c-surface); border-radius:var(--r-4); padding:6px 12px; box-shadow:var(--sh-row)}

/* ---- 強い器 ---- */
.gate{background:var(--c-surface); border-radius:var(--r-12); padding:32px;
  border-left:6px solid var(--c-brand-500); box-shadow:var(--sh-overlap); text-align:left}
.gate b{display:block; font-size:18px; line-height:1.6; color:var(--c-ink-900)}
.gate p{font-size:14px; line-height:1.9; margin:12px 0 0; color:var(--c-ink-900)}
.honest{background:var(--c-surface); border-radius:var(--r-12); padding:32px; margin-top:32px;
  border-left:6px solid var(--c-accent); box-shadow:var(--sh-overlap); text-align:left}
.honest b{display:block; font-size:17px; color:var(--c-ink-900); margin-bottom:8px}
.honest p{font-size:14px; line-height:1.9; margin:0; color:var(--c-ink-900)}
.honest p + p{margin-top:12px}

/* ---- 数字帯 ---- */
.figures{background:var(--c-surface); padding-block:56px; position:relative; z-index:1}
.figures__grid{display:grid; grid-template-columns:repeat(5,1fr)}
.figures__cell{padding:0 24px}
.figures__cell + .figures__cell{border-left:1px solid var(--c-line)}
.figures__cell:first-child{padding-left:0}
.figures__n{font-family:var(--f-num); font-size:48px; font-weight:700; line-height:1;
  color:var(--c-brand-500); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:4px}
.figures__n span{font-family:var(--f-sans); font-size:20px; font-weight:700; color:var(--c-ink-900)}
.figures__label{font-size:14px; font-weight:700; color:var(--c-ink-900); margin:16px 0 0; letter-spacing:.08em}
.figures__desc{font-size:12px; line-height:1.7; color:var(--c-text-mute); margin:4px 0 0}

.lic{display:grid; grid-template-columns:repeat(3,1fr); margin:36px 0 0; padding:32px;
  background:var(--c-tint-1); border-radius:var(--r-12)}
.lic div + div{border-left:1px solid var(--c-line-strong); padding-left:32px}
.lic b{display:block; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-text-mute); margin-bottom:8px}
.lic .num{font-family:var(--f-num); font-size:24px; font-weight:700; color:var(--c-ink-900);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- 図版：角丸は必ず親枠が持ち、中の画像には付けない ---- */
.figframe{border-radius:var(--r-12); overflow:hidden; background:var(--c-surface); box-shadow:var(--sh-float)}
.figframe__bar{height:3px; background:var(--c-brand-500)}
.figframe__body{padding:32px}
.figcap{font-size:12px; line-height:1.7; color:var(--c-text-mute); margin:16px 0 0}
.fig-full{margin-top:36px}
.slot{aspect-ratio:16/10; display:grid; place-items:center; padding:16px;
  background:var(--c-tint-1); border-radius:var(--r-12)}
.slot span{font-size:12px; font-weight:700; color:var(--c-text-mute); text-align:center}

/* ---- 装飾：素材ゼロでCSSだけ。opacityを下げず色自体を淡くする ---- */
.deco{position:absolute; border-radius:50%; z-index:0; pointer-events:none;
  background:rgba(0,120,200,.06)}
.deco--r{width:648px; height:668px; right:-114px; top:-104px}
.deco--l{width:560px; height:560px; left:-114px; bottom:-61px}
.deco--cross{width:600px; height:600px; right:-140px; top:-192px}
.watermark{position:absolute; left:50%; transform:translateX(-50%); z-index:0; pointer-events:none;
  font-family:var(--f-num); font-size:140px; font-weight:700; line-height:1;
  color:rgba(0,120,200,.08); white-space:nowrap; letter-spacing:.04em}

/* ---- ヘッダー：2段（40+72）。下辺だけ角丸。20px 浮かせる ---- */
.gnav{position:sticky; top:0; z-index:60}
.gnav__top{height:40px; background:var(--c-ink-900)}
.gnav__top .wrap{height:100%; display:flex; align-items:center; justify-content:flex-end; gap:8px}
.gnav__top a{font-size:12px; font-weight:400; color:#fff; text-decoration:none; padding:0 12px;
  transition:opacity .3s ease-out}
@media (hover:hover){ .gnav__top a:hover{opacity:.5} }
/* 白い帯そのものは .gnav__main、横並びは中の .wrap が持つ。
   ここを取り違えると、中身が縦に積まれて紺の上段へはみ出す（2026-09-01に実際に発生）。*/
.gnav__main{height:72px; background:var(--c-surface);
  border-radius:0 0 var(--r-24) var(--r-24); margin-inline:20px}
.gnav__main > .wrap{height:100%; display:flex; align-items:center; gap:16px;
  padding-inline:32px; max-width:var(--w-1120)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo__mark{width:34px; height:34px; flex:none; object-fit:contain}
.logo__txt{font-size:15px; font-weight:700; color:var(--c-logo-navy); white-space:nowrap; letter-spacing:.04em}
.logo__tag{display:block; font-size:12px; font-weight:700; color:var(--c-text-mute); white-space:nowrap; margin-top:1px}
.gnav__links{display:flex; gap:16px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.gnav__links a{display:block; padding:25px 0; font-size:14px; font-weight:700; color:var(--c-ink-900);
  text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s var(--ease)}
@media (hover:hover){ .gnav__links a:hover{border-bottom-color:var(--c-brand-500)} }
.gnav__links a[aria-current="page"]{border-bottom-color:var(--c-brand-500); color:var(--c-brand-700)}
.gnav__cta{display:flex; gap:8px; flex:none; margin-left:24px}
.burger{display:none; width:48px; height:48px; flex:none; margin-left:auto; border:0; border-radius:var(--r-4);
  background:var(--c-ink-900); cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px}
.burger i{display:block; width:22px; height:2px; background:#fff}
.drawer{position:fixed; left:0; right:0; top:var(--header-total); bottom:0; background:var(--c-surface);
  z-index:55; overflow-y:auto; padding:16px var(--gutter) 40px}
.drawer ul{list-style:none; margin:0; padding:0}
.drawer a{display:flex; align-items:center; justify-content:space-between; height:53px;
  font-size:14px; font-weight:700; color:var(--c-ink-900); text-decoration:none;
  border-bottom:1px solid var(--c-line)}
.drawer .btn{width:100%; margin-top:16px}
.skip{position:absolute; left:-9999px; top:0; background:var(--c-brand-700); color:#fff;
  padding:10px 16px; font-size:14px; font-weight:700; z-index:100}
.skip:focus{left:0}

/* ---- 下層の見出し帯 ---- */
.phero{background:var(--g-catch); padding-block:56px; text-align:center; position:relative; overflow:clip}
.phero h1{font-size:40px; font-weight:700; line-height:1.45; letter-spacing:.08em;
  color:var(--c-ink-900); margin:0}
.phero .lead{margin-top:20px}

/* ---- ヒーロー：青のグラデ。左は見出し、右は実画面 ---- */
.hero{background:var(--g-hero); position:relative; overflow:clip; padding-block:72px 0}
.hero__in{display:flex; justify-content:space-between; align-items:flex-start; gap:32px}
.hero__l{width:548px; flex:none; padding-bottom:72px}
.hero__kicker{margin:0 0 20px; height:23px; line-height:23px}
.hero__kicker span{display:inline; font-size:14px; font-weight:700; color:#fff;
  padding-bottom:4px; border-bottom:5px solid var(--c-accent)}
.hero h1{font-size:44px; font-weight:700; line-height:1.45; letter-spacing:.08em; color:#fff; margin:0}
.hero__sub{font-size:18px; font-weight:700; line-height:1.7; color:#fff; margin:24px 0 0; opacity:.92}
.hero p{font-size:14px; line-height:1.9; margin:20px 0 0; color:#fff; opacity:.86; max-width:32em}
.hero .btn-row{justify-content:flex-start; margin-top:40px}
.hero .btn--secondary{background:#fff; border-color:#fff}
.hero__r{width:auto; flex:none; align-self:flex-end; position:relative}


/* ---- 重なり：負マージン＋受け皿。transform も absolute も使わない ---- */
.panel-round{background:var(--c-bg); border-radius:0 0 var(--r-72) var(--r-72);
  padding:56px 0 224px; position:relative; z-index:0}
.lift{max-width:var(--w-860); margin:-168px auto 0; background:var(--c-surface);
  border-radius:var(--r-12); box-shadow:var(--sh-overlap); padding:40px; position:relative; z-index:2}
.band-full{background:var(--g-band); padding-block:88px 176px; position:relative; overflow:clip}
.cut{background:var(--c-surface); margin-top:-96px; border-radius:var(--r-72) 0 0 0;
  position:relative; z-index:1; padding-block:136px 88px}
.cta-box{max-width:var(--w-1120); margin:56px auto -88px; padding:60px 80px;
  border-radius:var(--r-24); background:var(--g-band); position:relative; z-index:5; text-align:center}
.cta-box h2{font-size:36px; font-weight:700; line-height:1.45; color:#fff; margin:0; letter-spacing:.08em}
.cta-box .btn-row{margin-top:40px}

/* ---- 料金 ---- */
.price{background:var(--c-surface); border-radius:var(--r-24); overflow:hidden;
  max-width:720px; margin-inline:auto; box-shadow:var(--sh-float); text-align:left}
table{border-collapse:collapse; width:100%}
.price th,.price td{text-align:left; padding:24px 32px; border-bottom:1px solid var(--c-line)}
.price thead th{background:var(--c-tint-1); font-size:14px; font-weight:700; color:var(--c-ink-900); padding-block:16px}
.price tbody th{font-size:16px; font-weight:700}
.price tbody tr:last-child th,.price tbody tr:last-child td{border-bottom:0}
.price .yen{font-family:var(--f-num); font-size:40px; font-weight:700; line-height:1.1;
  color:var(--c-ink-900); font-variant-numeric:tabular-nums}
.price .tax{display:block; font-size:12px; color:var(--c-text-mute); margin-top:4px}
.figure-card{background:var(--c-surface); border-radius:var(--r-24); padding:40px; max-width:480px;
  margin:0 auto 36px; box-shadow:var(--sh-float); text-align:left}
.figure-card b{font-size:14px; color:var(--c-text-mute)}
.figure-card .m{font-family:var(--f-num); font-size:40px; font-weight:700; color:var(--c-ink-900);
  line-height:1.2; margin-top:8px; font-variant-numeric:tabular-nums}
.figure-card .y{font-family:var(--f-num); font-size:26px; font-weight:700; color:var(--c-brand-600);
  line-height:1.3; font-variant-numeric:tabular-nums}
.notes{list-style:none; margin:36px auto 0; padding:0; max-width:52em; text-align:left}
.notes li{position:relative; padding-left:24px; margin-top:12px; font-size:14px; line-height:1.9}
.notes li::before{content:""; position:absolute; left:0; top:10px; width:6px; height:6px;
  border-radius:var(--r-4); background:var(--c-brand-500)}
.fold{margin:24px auto 0; max-width:52em; text-align:left; border-top:1px solid var(--c-line); padding-top:24px}
.fold summary{cursor:pointer; list-style:none; font-size:14px; font-weight:700; color:var(--c-ink-900);
  display:flex; align-items:center; gap:8px}
.fold summary::-webkit-details-marker{display:none}
.fold summary svg{width:12px; height:12px; transition:transform .3s var(--ease)}
.fold[open] summary svg{transform:rotate(180deg)}
.fold ol{margin:16px 0 0; padding-left:1.3em; font-size:12px; line-height:1.9; color:var(--c-text-mute)}

/* ---- トライアル ---- */
.trial{border-radius:var(--r-24); background:var(--c-surface); box-shadow:var(--sh-float);
  /* 2026-09-02 実測: 右列 auto が503pxまで太り、文章の列が385pxで見出しが3行に割れていた。右列は固定幅に。 */
  padding:56px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:center; text-align:left}
.trial h2{font-size:36px; font-weight:700; line-height:1.45; color:var(--c-ink-900); margin:0; letter-spacing:.08em}

/* ---- 導入の流れ ---- */
.flow{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.flow li{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-12); padding:24px}
.flow b{display:inline-block; height:36px; padding:6px 8px; min-width:64px; text-align:center;
  border-radius:var(--r-12); background:var(--c-brand-500); color:var(--c-accent);
  font-family:var(--f-num); font-size:14px; font-weight:700; line-height:24px; letter-spacing:.04em}
.flow h3{font-size:18px; font-weight:700; color:var(--c-ink-900); margin:16px 0 0}
.flow p{font-size:14px; line-height:1.7; margin:12px 0 0; color:var(--c-text-mute)}
.monthly{margin-top:36px; padding:32px; background:var(--c-tint-2); border-radius:var(--r-12); text-align:left}
.monthly b{color:var(--c-ink-900); font-size:18px}

/* ---- 会社 ---- */
.company{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:56px; align-items:start; text-align:left}
.profile{background:var(--c-surface); border-radius:var(--r-12); overflow:hidden; box-shadow:var(--sh-row)}
.profile dl{margin:0; display:grid; grid-template-columns:auto 1fr}
.profile dt{font-size:12px; font-weight:700; color:var(--c-text-mute); line-height:1.7;
  padding:16px; background:var(--c-tint-1); border-bottom:1px solid var(--c-line); white-space:nowrap}
.profile dd{margin:0; font-size:14px; line-height:1.7; color:var(--c-ink-900);
  padding:16px; border-bottom:1px solid var(--c-line)}
.profile dt:last-of-type,.profile dd:last-of-type{border-bottom:0}
.history{list-style:none; margin:0; padding:0; border-left:2px solid var(--c-line-strong)}
.history li{position:relative; padding:0 0 24px 24px}
.history li:last-child{padding-bottom:0}
.history li::before{content:""; position:absolute; left:-6px; top:10px; width:10px; height:10px;
  border-radius:50%; background:var(--c-surface); border:2px solid var(--c-line-strong)}
.history li:last-child::before{background:var(--c-brand-700); border-color:var(--c-brand-700)}
.history time{font-family:var(--f-num); font-size:14px; font-weight:700; color:var(--c-brand-700)}
.history p{font-size:14px; line-height:1.7; margin:4px 0 0}
.promise{margin-top:32px; padding:32px; background:var(--c-tint-1); border-radius:var(--r-12)}
.promise b{display:block; font-size:18px; color:var(--c-ink-900); margin-bottom:12px}

/* ---- 表 ---- */
.tbl{border-radius:var(--r-12); overflow:auto; background:var(--c-surface); box-shadow:var(--sh-row); text-align:left}
.tbl table{min-width:640px}
.tbl th,.tbl td{padding:16px 20px; border-bottom:1px solid var(--c-line);
  font-size:14px; line-height:1.7; text-align:left; vertical-align:top}
.tbl thead th{background:var(--c-tint-1); font-size:14px; font-weight:700; color:var(--c-ink-900)}
.tbl tbody th{font-weight:700; white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .mute{color:var(--c-text-mute); font-size:12px}

/* ---- FAQ ---- */
.faq{background:var(--c-surface); border-radius:var(--r-24); overflow:hidden; text-align:left; box-shadow:var(--sh-row)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; list-style:none; padding:24px 48px; font-size:18px; font-weight:700;
  color:var(--c-ink-900); display:flex; align-items:center; gap:16px; line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px; height:14px; margin-left:auto; flex:none; color:var(--c-brand-500);
  transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 48px 24px; font-size:14px; line-height:1.9; margin:0; max-width:56em; color:var(--c-ink-900)}

/* ---- フォーム ---- */
.form{max-width:var(--w-860); text-align:left}
.field{margin-top:24px}
.field > label{display:block; font-size:14px; font-weight:700; color:var(--c-ink-900); margin-bottom:8px}
.req{display:inline-block; font-size:12px; font-weight:700; color:var(--c-danger);
  border:1px solid var(--c-danger); border-radius:var(--r-4); padding:1px 6px; margin-left:8px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%; border:1px solid var(--c-line-form); border-radius:var(--r-4);
  padding:0 12px; font-size:16px; font-family:inherit; color:var(--c-ink-900); background:var(--c-surface)}
input[type=text],input[type=email],input[type=tel]{height:48px}
textarea{min-height:120px; padding:12px; line-height:1.7; resize:vertical}
.radio{display:flex; align-items:center; gap:12px; height:56px; padding:0 20px; cursor:pointer;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-12);
  font-size:14px; font-weight:700; color:var(--c-ink-900)}
.radio + .radio{margin-top:8px}
.radio input{appearance:none; width:20px; height:20px; border-radius:50%; margin:0;
  border:1px solid var(--c-line-form); flex:none; background:var(--c-surface)}
.radio input:checked{border:6px solid var(--c-brand-500)}
.radio:has(input:checked){border:2px solid var(--c-brand-500); background:var(--c-tint-1)}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.7}
.check input{width:20px; height:20px; margin:4px 0 0; flex:none; accent-color:var(--c-brand-500)}

/* ---- 締めのCTAとフッター ---- */
.band{background:var(--g-band); padding:144px 0 144px; color:#fff; text-align:center; position:relative; overflow:clip}
.band h2{font-size:36px; font-weight:700; line-height:1.45; color:#fff; margin:0; letter-spacing:.08em}
.band p{font-size:16px; line-height:1.7; color:rgba(255,255,255,.86); margin:20px auto 0; max-width:44em}
.band .btn--secondary{background:#fff; border-color:#fff}
.final{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:36px; text-align:left}
.final__c{background:var(--c-surface); border-radius:var(--r-12); padding:32px; color:var(--c-ink-900)}
.final__c h3{font-size:18px; font-weight:700; margin:0 0 12px; color:var(--c-ink-900)}
.final__c p{font-size:14px; line-height:1.7; color:var(--c-text-mute); margin:0 0 24px; max-width:none}
.final__c .btn-row{margin-top:0; justify-content:flex-start}
.tel{margin-top:36px; font-size:14px; color:rgba(255,255,255,.86)}
.tel a{color:#fff; font-family:var(--f-num); font-weight:700; text-decoration:none}

.footer{background:var(--c-ink-900); color:var(--c-footer-link); margin-top:calc(-1 * var(--footer-pull));
  border-radius:var(--r-104) var(--r-104) 0 0; padding:88px 0 36px; position:relative; z-index:2}
.footer__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}

.footer h4{font-size:14px; font-weight:700; line-height:24px;
  letter-spacing:.04em; color:#fff; margin:0 0 12px}
.footer h4 i{width:24px; height:24px; border-radius:var(--r-4); background:var(--c-brand-500);
  margin-left:8px; display:grid; place-items:center; flex:none}
.footer h4 i svg{width:12px; height:12px; color:#fff}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-top:0}
.footer li + li{margin-top:12px}
.footer a{color:var(--c-footer-link); text-decoration:none; font-size:12px; line-height:1.7; letter-spacing:normal}
@media (hover:hover){ .footer a:hover{text-decoration:underline} }
.footer__biz{margin-top:48px; padding-top:24px; border-top:1px solid var(--c-footer-line)}
.footer__biz dl{display:grid; grid-template-columns:auto 1fr; gap:6px 32px; margin:0; font-size:14px}
.footer__brand{display:flex; align-items:center; gap:12px; margin-bottom:24px}
.footer__logo{width:40px; height:40px; flex:none; object-fit:contain}
.footer__biz dt{font-size:12px; font-weight:700; color:var(--c-footer-link); line-height:1.7; white-space:nowrap}
.footer__biz dd{margin:0; color:#fff; font-size:14px; line-height:1.7}
.footer__biz dd a{color:#fff; font-size:14px; letter-spacing:normal}
.footer__name{font-size:18px; font-weight:700; color:#fff; margin:0; line-height:1.4}
.footer__tag{font-size:12px; color:var(--c-footer-link); margin:2px 0 0; letter-spacing:.04em}
.copy{font-size:12px; font-weight:400; line-height:18px; letter-spacing:.04em; margin-top:24px; padding-top:24px; text-align:center}


/* ---- v3で定義を落としていた部品（当社の売りが素の箇条書きで出ていた） ---- */
.h2--lg{font-size:48px}

/* 2026-09-02 追加。同じ落とし方で3つ残っていた＝機能ページの山場「企業への共有」が、
   罫も角丸パネルも無い素の節で出ていた。HTMLは初版から付いていて、CSSだけ無かった。 */
.sec--rule{border-top:1px solid var(--c-line)}
.sec-head--lg{margin-bottom:52px}
/* .wrap の中に入るので、左右は wrap の gutter に足す分だけ。外へは負マージンで逃がさない。 */
/* 節の地が白なので、罫を1本入れないと面が消える（影だけでは白地に白が見えない）。 */
.panel-sec{background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-24); padding:56px 40px; box-shadow:var(--sh-float)}
@media (max-width:48em){
  .panel-sec{padding:28px 16px; border-radius:var(--r-12)}
}
.steps{display:flex; flex-direction:column; gap:72px; margin-top:36px; text-align:left}
.step{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center}
.step:nth-child(even) .step__fig{order:-1}
.step__no{display:block; font-family:var(--f-num); font-size:18px; font-weight:700;
  color:var(--c-brand-500); letter-spacing:.04em}
.step h3{font-size:30px; font-weight:700; line-height:1.45; letter-spacing:.08em;
  color:var(--c-ink-900); margin:8px 0 0}
.step p{font-size:14px; line-height:1.7; margin:16px 0 0; color:var(--c-ink-900)}
/* 実画面のキャプチャ(2026-09-02 開発DBのデモ機関を伏せ字で撮影)。16:10 の枠に上端・左端を基準で収める */
.step__fig{aspect-ratio:16/10; border-radius:var(--r-12); overflow:hidden; background:var(--c-tint-1);
  box-shadow:var(--sh-float); border:1px solid var(--c-line)}
.step__fig img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top}

/* ---- 端末の外枠（2026-09-02 ユーザー指摘「画面だけでなく外枠も」）。画像を使わずCSSで描く ---- */
.device{position:relative}
/* スマホ: 暗いベゼル＋ノッチ＋ステータスバー。下端は置き場(ヒーロー等)で切られる前提 */
.device--phone{background:#0d1526; border-radius:46px 46px 0 0; padding:12px 12px 0; box-shadow:var(--sh-float)}
.device--phone .device__screen{border-radius:34px 34px 0 0; overflow:hidden; background:#f0f5fb}
.device__status{position:relative; height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; font-family:var(--f-num); font-size:13px; font-weight:700; color:var(--c-ink-900); background:#f0f5fb}
.device__notch{position:absolute; left:50%; top:9px; width:96px; height:26px; margin-left:-48px; border-radius:13px; background:#0d1526}
.device__sys{display:flex; gap:6px; align-items:center; color:var(--c-ink-900)}
.device__sys svg{width:18px; height:12px; fill:currentColor}
.device__sys svg + svg{width:26px}
.device--phone img{display:block; width:100%; height:auto}
/* PC: ブラウザの枠（丸3つ＋アドレスバー）。16:10 の固定は外し、バー＋画像の自然な高さにする */
.device--browser{aspect-ratio:auto; background:var(--c-surface); border-radius:var(--r-12); overflow:hidden;
  border:1px solid var(--c-line); box-shadow:var(--sh-float)}
.device__bar{height:34px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#e9eff5; border-bottom:1px solid var(--c-line)}
.device__bar i{width:10px; height:10px; border-radius:50%; background:#c9d6e2}
.device__bar span{margin-left:10px; flex:1; height:20px; border-radius:10px; background:var(--c-surface);
  font-size:11px; color:var(--c-text-mute); display:flex; align-items:center; justify-content:center; letter-spacing:.02em}
.device--browser img{display:block; width:100%; height:auto; object-fit:unset}
/* できないこと：当社の一番の武器。できることと同じ器で並べる */
.cant{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; text-align:left}
.cant li{background:var(--c-surface); border-radius:var(--r-12); padding:24px;
  border-left:4px solid var(--c-ink-900); box-shadow:var(--sh-row)}
.cant b{display:block; font-size:18px; font-weight:700; line-height:1.6; color:var(--c-ink-900)}
.cant span{display:block; font-size:14px; line-height:1.7; color:var(--c-text-mute); margin-top:12px}
/* フッターは常に持ち上がるので、どのページの最後の節にも受け皿を持たせる。
   ホームだけ .band が受け皿を持っていて、他の7ページは本文がフッターに食われていた（2026-09-01）。*/
/* 2026-09-02 実測: 以前は main [data-page] > section:last-child と書いていたが、data-page 属性はモック時代の名残で
   本番のHTMLには存在せず、この受け皿は一度も効いていなかった（お問い合わせページでフッターがカードに被って発覚）。 */
main > section:last-child{padding-bottom:calc(var(--footer-pull) + 56px)}

/* ============ レスポンシブ ============ */
@media (max-width:70em){
  .hero__in{flex-direction:column; align-items:center}
  .hero__l{width:100%; text-align:center}
  .hero .btn-row,.hero__kicker{justify-content:center; text-align:center}
  .hero p{margin-inline:auto}
  .hero__r{align-self:center}
}
@media (max-width:64em){
  :root{--header-total:112px}
  .grid-3,.flow,.footer__cols,.figures__grid,.cant{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:1fr; gap:24px}
  .step:nth-child(even) .step__fig{order:0}
  .steps{gap:48px}
  .footer__cols{grid-template-columns:repeat(2,1fr); gap:32px 24px}
  .trial,.company,.final{grid-template-columns:1fr; gap:32px}
  .gnav__links{display:none}
  .burger{display:flex}
  .figures__cell{padding:16px 24px}
  .figures__cell:nth-child(odd){padding-left:0; border-left:0}
  .lic{grid-template-columns:1fr; gap:24px}
  .lic div + div{border-left:0; padding-left:0; border-top:1px solid var(--c-line-strong); padding-top:24px}
  .cta-box{padding:40px 32px}
  .deco--r,.deco--l,.deco--cross{display:none}
}
@media (max-width:48em){
  :root{--gutter:24px; --sec-y:36px; --header-total:58px; --r-72:40px; --r-104:40px; --footer-pull:64px}
  /* 2026-09-02 実測: 細い上段の4リンクが40pxの帯に3行で折り返して崩れていた。
     スマホでは上段を出さない（4本ともドロワーにある）。--header-total は本段だけの58pxに。 */
  .gnav__top{display:none}
  .gnav__main{height:58px; margin-inline:12px; padding-inline:16px}
  .hero{padding-block:40px 0}
  /* 2026-09-02 実測: 宛先の1行(監理団体・監理支援機関と、登録支援機関のご担当者へ)が2行に折り返し、
     height:23px 固定のせいで2行目が見出しに重なっていた。折り返しを許す。 */
  .hero__kicker{height:auto; line-height:1.9}
  .hero__kicker span{line-height:1.9; padding-bottom:2px}
  .hero__r{width:100%; margin-top:64px; align-self:auto}
  .hero h1{font-size:28px; letter-spacing:.04em}
  .hero__sub{font-size:16px}
  .phero{padding-block:36px}
  .phero h1,.h2{font-size:24px; letter-spacing:.04em}
  .h2--sm,.h3,.trial h2,.band h2,.cta-box h2{font-size:22px}
  .lead,body{font-size:14px}
  .grid-3,.grid-2,.flow,.footer__cols,.figures__grid,.cant{grid-template-columns:1fr}
  .h2--lg{font-size:28px}
  .step h3{font-size:22px}
  /* 2026-09-02 実測: ヘッダーの小ボタンは幅50pxに潰れたまま右端を4pxはみ出し、全ページに横スクロールを作っていた。
     スマホではドロワーに同じ2本のCTAがあるので、ヘッダー側は出さない（SmartHR・ミキワメも同じ）。 */
  .gnav__main .btn{display:none}
  .gnav__top .btn{width:auto}
  /* 実バグ：吹き出しが折り返せず、最終CTAのカードを120pxはみ出させていた（clipで隠れて気付けない） */
  .bubble{white-space:normal; min-width:0; height:auto; padding:8px 12px; line-height:1.6}
  .bubble::after{bottom:-5px}
  .final{grid-template-columns:minmax(0,1fr)}
  .band{padding:112px 0 96px}
  .card--wide{grid-column:auto}
  .btn{width:100%}
  .btn-row{flex-direction:column; gap:44px; align-items:stretch}
  .cta-unit{width:100%}
  .figures__cell{padding:20px 0; border-left:0; border-top:1px solid var(--c-line)}
  .figures__cell:first-child{border-top:0; padding-top:0}
  .trial,.gate,.honest,.promise,.monthly,.figure-card,.cta-box,.final__c{padding:24px}
  .figframe__body{padding:20px}
  .price th,.price td{padding:20px}
  .price .yen{font-size:32px}
  .faq summary,.faq .a{padding-inline:20px}
  .profile dl{grid-template-columns:1fr}
  .profile dt{border-bottom:0; padding-bottom:0; background:var(--c-surface)}
  .profile dd{padding-top:4px}
  .panel-round{padding:36px 0 152px}
  .lift{margin-top:-96px; padding:24px}
  .band-full{padding-block:56px 112px}
  .cut{margin-top:-56px; padding-block:80px 56px}
  .cta-box{margin-bottom:-56px}
  .band{padding:40px 0 96px}
  .footer{padding:64px 0 32px}
  .watermark{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important; animation-duration:0ms !important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}
/* ---- 重なりの微調整（受け皿と負マージンの対） ---- */
.panel-round{background:var(--c-surface)}
.figures--lift{background:transparent; padding-block:0; margin-bottom:56px; position:relative; z-index:2}
.figures--lift .wrap{max-width:var(--w-1120); margin-top:-168px; background:var(--c-surface);
  border-radius:var(--r-12); box-shadow:var(--sh-overlap); padding:40px 32px}
/* 青帯の上に載るカードは、地の文だけ白にする（カードの中まで白にしない） */
.on-band .card,.on-band .figframe{color:var(--c-ink-900)}
.on-band .card h3,.on-band .card .card__sub{color:var(--c-ink-900)}
.on-band .card p{color:var(--c-text-mute)}
.on-band .link-arrow{color:#fff}
.on-band .note{color:rgba(255,255,255,.8)}
.on-band .chips li{color:var(--c-brand-600)}
@media (max-width:64em){
  .figures--lift .wrap{margin-top:-120px; padding:32px 24px}
}
@media (max-width:48em){
  .figures--lift .wrap{margin-top:-88px; padding:24px}
  .figures--lift{margin-bottom:36px}
}

/* 図はスマホで縮むと文字が3.6pxになって読めない（2026-09-01実測）。
   縮めずに横スクロールさせる。最小幅800pxは「図の最小文字12px × 800/960 = 10px」から逆算した値。
   横スクロールする領域には role/aria-label/tabindex/端のフェード の4点を必ず付ける。 */
@media (max-width:48em){
  .figframe__body{overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; padding:16px}
  .figframe__body > svg{min-width:800px}
  .figframe__body:focus-visible{outline:3px solid var(--c-brand-500); outline-offset:-3px}
  .figframe{position:relative}
  .figframe::after{content:""; position:absolute; right:0; top:3px; bottom:0; width:40px;
    pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0),var(--c-surface))}
  .fighint{display:block}
}
.fighint{display:none; font-size:12px; color:var(--c-text-mute); margin:8px 0 0}

/* ---- お問い合わせフォーム（2026-09-02: 製品のフォームへ飛ばすのをやめ、このサイト専用の受け口 /api/contact に） ---- */
.cform fieldset{border:0; padding:0; margin:0; min-width:0}
.cform legend{display:block; font-size:14px; font-weight:700; color:var(--c-ink-900); margin-bottom:8px; padding:0}
.radios{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.radios .radio{margin:0}
/* 選択中の枠は太くせず（1px→2pxで箱が1px動く）内側に1本足す */
.radio:has(input:checked){border:1px solid var(--c-brand-500); box-shadow:inset 0 0 0 1px var(--c-brand-500)}
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.cform button.btn{font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none}
.cform button.btn:disabled{opacity:.6; cursor:progress}
.cform .btn-row{margin-top:28px}
.cform__err{margin:20px 0 0; padding:12px 16px; border-radius:var(--r-4); background:var(--c-surface); border:1px solid var(--c-danger); color:var(--c-danger); font-size:14px; font-weight:700; line-height:1.6}
.cform__err:focus{outline:2px solid var(--c-danger); outline-offset:2px}
@media (max-width:48em){
  .radios{grid-template-columns:1fr}
}
/* 同意欄: .field > label（太字・block）より後ろで上書きしないと、チェックボックスと文が密着して太字になる（2026-09-02 実見） */
.cform .field > .check{display:flex; font-weight:400; margin:0}

/* ---- ヒーローの3画面構成（ミキワメ型: モニター＋手前にスマホ＋右上にレポート札。2026-09-02 ユーザー提案） ----
   位置と大きさは全部「箱の幅に対する％」で書く＝スマホでも同じ構図のまま縮む。
   モニターは「絵」として描く: 黒い薄い縁 → 画面（斜めの反射） → 銀のあご → アルミの首（下広がり）→ 台 → 床の影。
   暗い箱1つ＋短い首では「モニターに見えない」（ユーザー指摘 2026-09-02・2回）。写真の合成は素材が無いので、部品ごとに陰影を描く。 */
.hero__r.trio{flex:1 1 auto; min-width:0; width:auto; max-width:640px; margin-right:-80px} /* 右へ少し食み出させて大きく見せる（ヒーローは全幅なので窓の内側に収まる） */
.trio{aspect-ratio:600/440; position:relative}

/* モニター本体 */
.trio__monitor{position:absolute; right:0; bottom:4%; width:84%}
.mon__body{position:relative; border-radius:2.4% / 3.6%; box-shadow:0 44px 90px -24px rgba(0,0,0,.65), 0 14px 28px rgba(0,0,0,.28)}
.mon__panel{background:linear-gradient(#262b36,#0d1016 35%); border-radius:2.4% 2.4% 0 0 / 3.6% 3.6% 0 0; padding:1.6% 1.6% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mon__screen{position:relative; overflow:hidden; border-radius:.7% / 1.1%; background:#fff}
.mon__screen img{display:block; width:100%; height:auto}
.mon__glare{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.06) 36%, rgba(255,255,255,0) 50%)}
/* あご: 画面の下の黒縁のあと、アルミの帯。上端に白のハイライト、下端に影の線 */
.mon__chin{position:relative; height:0; padding-top:8.2%; border-radius:0 0 2.4% 2.4% / 0 0 3.6% 3.6%;
  background:linear-gradient(#eef0f3,#cfd4db 55%,#b4bbc5); box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.18)}
.mon__chin i{position:absolute; left:50%; top:50%; width:2.2%; padding-top:2.2%; margin:-1.1% 0 0 -1.1%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #f6f7f9, #9aa2ad)} /* 中央の小さなロゴ位置の凹み */
/* 首: 下広がりのアルミ。あごの直下は影で暗い */
.mon__neck{position:relative; width:17%; aspect-ratio:1/1.05; margin:0 auto; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);
  background:linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0) 45%), linear-gradient(90deg,#8f97a2 0%,#d5dae1 28%,#f2f4f7 50%,#d0d5dc 72%,#8f97a2 100%)}
/* 台: 平たい板。上面（明）と手前の縁（暗）の2段 */
.mon__base{position:relative; width:46%; aspect-ratio:30/1; margin:-1px auto 0; border-radius:6px 6px 3px 3px;
  background:linear-gradient(90deg,#c9cfd7,#f3f5f7 30%,#f7f8fa 50%,#eef0f3 70%,#c9cfd7); box-shadow:inset 0 1px 0 #fff}
.mon__base::after{content:""; position:absolute; left:1.5%; right:1.5%; top:100%; height:70%; border-radius:0 0 8px 8px;
  background:linear-gradient(#b3bac4,#8a929d)}
/* 床の影（台の下に落ちる） */
.mon__shadow{position:absolute; left:14%; right:14%; bottom:-3.5%; height:7%; border-radius:50%; background:rgba(0,0,0,.5); filter:blur(9px)}

/* 手前のスマホ */
.trio__phone{position:absolute; left:0; bottom:0; z-index:2}
/* 幅は .device--phone 側の規則（.hero .device--phone{width:330px} と同じ詳細度）に負けないよう、ここで持つ */
.trio .device--phone{width:29%; margin:0; border-radius:26px 26px 0 0; padding:7px 7px 0}
.trio .device--phone .device__screen{border-radius:19px 19px 0 0}
.trio .device__status{height:24px; padding:0 12px; font-size:8px}
.trio .device__notch{width:52px; height:14px; margin-left:-26px; top:5px; border-radius:7px}
.trio .device__sys{gap:3px}
.trio .device__sys svg{width:10px; height:7px}
.trio .device__sys svg + svg{width:14px}

/* 右上の札 */
.trio__card{position:absolute; right:-3%; top:0; width:46%; z-index:3; background:#fff; border-radius:var(--r-12); box-shadow:var(--sh-float); padding:8px; border:1px solid var(--c-line)}
.trio__card img{display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--c-line)}
.trio__card b{display:block; font-size:11px; font-weight:700; color:var(--c-ink-900); margin:7px 2px 1px; line-height:1.4}

@media (max-width:70em){
  /* 縦積みでは flex:1 が高さに効いてしまうので外す */
  .hero__r.trio{flex:none; width:min(600px,100%)}
}
@media (max-width:48em){
  .hero__in{gap:0}
  .hero__r.trio{width:100%; margin-top:8px; margin-right:0}
  .hero__l{padding-bottom:24px}
  .trio .device--phone{width:34%}
  .trio__card{width:50%; right:0}
  .trio__card b{font-size:10px}
}

/* ---- 法的情報（/legal/）。本文は製品の正本から生成（legal のモジュール）。見出し・箇条書きの規則は製品の表示と同じ ---- */
.legal{padding-block:40px 64px}
.legal__crumb{font-size:13px; margin:0 0 16px}
.legal__crumb a{color:var(--c-text-mute); text-decoration:none}
.legal__crumb a:hover{color:var(--c-brand-700); text-decoration:underline}
.legal__doc{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-12); overflow:hidden}
.legal__head{padding:40px 40px 28px; border-bottom:1px solid var(--c-line)}
.legal__head h1{font-size:26px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--c-ink-900); margin:0}
.legal__meta{margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.legal__badge{display:inline-block; font-size:12px; color:var(--c-text-mute); border:1px solid var(--c-line); border-radius:var(--r-pill); padding:3px 12px}
.legal__body{padding:32px 40px 40px}
.legal__body p{font-size:14px; line-height:1.9; color:var(--c-ink-900); margin:14px 0 0}
.legal__body h2{font-size:15px; font-weight:700; color:var(--c-ink-900); margin:36px 0 0; padding-top:20px; border-top:1px solid var(--c-line); scroll-margin-top:calc(var(--header-total) + 16px)}
.legal__body h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal__body h3{font-size:14px; font-weight:700; color:var(--c-ink-900); margin:24px 0 0}
.legal__body .legal__li{margin-top:8px; padding-left:1.5em; text-indent:-1.5em}
.legal__body .legal__li--num{padding-left:1.7em; text-indent:-1.7em}
.legal__body .legal__li--paren{padding-left:2.7em; text-indent:-1.5em}
.legal__toc{background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-12); padding:20px 24px; margin:0 0 32px}
.legal__toc-t{font-size:12px; font-weight:700; color:var(--c-text-mute); margin:0}
.legal__toc ol{margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px}
.legal__toc li a{font-size:13px; color:var(--c-ink-900); text-decoration:none}
.legal__toc li a:hover{color:var(--c-brand-700); text-decoration:underline}
.legal__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.legal__card{display:block; text-decoration:none; color:inherit}
.legal__card h3{margin:0; font-size:16px}
.legal__card p{margin:8px 0 0; font-size:13px; color:var(--c-text-mute)}
@media (max-width:48em){
  .legal__head{padding:28px 20px 20px}
  .legal__head h1{font-size:21px}
  .legal__body{padding:20px 20px 28px}
  .legal__toc ol,.legal__grid{grid-template-columns:1fr}
}