/* =====================================================================
   MCPGATE LP — site.css（土台）
   A案「GATE — 青の建築」のトークン ＋ design-spec.md §2 の調整
   - フレーム max-width は廃止。可変ガター clamp(20px,5vw,96px) でフルブリード
   - クラス接頭辞は mg-。セクション固有は mg-xx- の2段（例 .mg-pr-）
   - 共通部品はここだけで定義し、セクション側は上書きしない
   ===================================================================== */

:root{
  /* 色 — AoBase実測値 */
  --blue:#368dc8;
  --blue-deep:#247db9;
  --teal:#73becd;
  --blue-light:#c7e0ee;
  --grad:linear-gradient(90deg,#247db9 0%,#368dc8 48%,#73becd 100%);
  --grad-v:linear-gradient(180deg,#247db9 0%,#73becd 100%);
  /* ボタン・バッジ専用の暗いグラデ（白文字で 4.9:1 以上）。装飾（点・下線・グラデ文字）は --grad のまま */
  --grad-btn:linear-gradient(90deg,#1B4F78 0%,#1F6FA8 60%,#2176B0 100%);
  /* 明るい地で「文字」として使う青（白地 5.4:1／--ground 5.1:1）。アイコン・線は --blue-deep のまま */
  --blue-text:#1F6FA8;

  /* 色 — ゲートの内側（濃紺） */
  --navy:#0F2438;
  --navy-2:#143654;
  --navy-3:#1B4F78;
  --seam-dark:rgba(199,224,238,.16);
  --cell-dark:rgba(255,255,255,.035);
  --on-dark:#EEF5FA;
  --on-dark-soft:rgba(238,245,250,.78);
  --on-dark-faint:rgba(238,245,250,.62);   /* design-spec: 白62%以上 */

  /* 色 — 紙と線 */
  --ink:#14202B;
  --ink-soft:#3F4C58;
  --muted:#5A6773;                          /* design-spec: コントラスト4.5:1 */
  --ground:#F5F8FB;
  --paper:#FFFFFF;
  --line:#D6DEE5;
  --line-soft:#E8EEF3;
  --marker:#FFE97B;

  /* 文脈色（.mg-dark で差し替える。共通部品はこちらを参照する） */
  --mg-bg:var(--paper);
  --mg-fg:var(--ink);
  --mg-fg-soft:var(--ink-soft);
  --mg-fg-faint:var(--muted);
  --mg-rule:var(--line);
  --mg-rule-soft:var(--line-soft);
  --mg-cell:var(--paper);
  --mg-accent:var(--blue-deep);
  --mg-accent-2:var(--teal);
  --mg-accent-text:var(--blue-text);        /* 文字色としてのアクセント（.mg-dark では teal） */

  /* フォント */
  --font-jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:"Kumbh Sans","Avenir Next","Century Gothic",sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* 角丸 — 非対称（左上だけ大きい） */
  --r-panel:36px 14px 14px 14px;
  --r-panel-sm:24px 10px 10px 10px;
  --r-tag:10px 4px 4px 4px;
  --r-pill:999px;

  /* 影 — 浮かせるのはCTAと台帳だけ */
  --shadow-soft:0 2px 14px rgba(36,125,185,.10);
  --shadow-lift:0 24px 56px -28px rgba(15,36,56,.45);

  /* モーション */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:.18s;
  --dur:.7s;
  --dur-slow:1.2s;

  /* レイアウト */
  --gutter:clamp(20px,5vw,96px);
  --head-h:60px;
  --sec-y:clamp(72px,9vw,124px);
}
@media (max-width:640px){
  :root{ --head-h:56px; }
}

/* ===================== リセット ===================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{ width:100%; overflow-x:clip; }
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--font-jp); font-size:15px; line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
h1,h2,h3,h4{ font-family:var(--font-jp); color:var(--mg-fg); font-weight:900; }
table{ border-collapse:collapse; width:100%; }
code,kbd,pre{ font-family:var(--font-mono); font-size:.92em; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.mg-dark :focus-visible{ outline-color:var(--teal); }
section[id],footer[id],div[id]{ scroll-margin-top:calc(var(--head-h) + 16px); }
input,select,textarea,summary,button{ scroll-margin-top:calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion:no-preference){ html:not(.qa){ scroll-behavior:smooth; } }

.mg-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nw{ white-space:nowrap; }
.mg-mono{ font-family:var(--font-mono); }
.mg-en{ font-family:var(--font-en); }
br.sp{ display:none; }
@media (max-width:760px){ br.sp{ display:inline; } br.pc{ display:none; } }

/* ===================== 文脈: 濃紺 ===================== */
.mg-dark{
  --mg-bg:var(--navy);
  --mg-fg:var(--on-dark);
  --mg-fg-soft:var(--on-dark-soft);
  --mg-fg-faint:var(--on-dark-faint);
  --mg-rule:var(--seam-dark);
  --mg-rule-soft:rgba(199,224,238,.10);
  --mg-cell:rgba(15,36,56,.62);
  --mg-accent:var(--teal);
  --mg-accent-2:var(--blue-light);
  --mg-accent-text:var(--teal);
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:var(--on-dark);
}
.mg-ground{ --mg-bg:var(--ground); --mg-cell:var(--paper); background:var(--ground); }
.mg-paper{ --mg-bg:var(--paper); background:var(--paper); }

/* ===================== レイアウト ===================== */
.mg-wrap{ width:100%; padding-inline:var(--gutter); }
.mg-sec{ position:relative; padding-block:var(--sec-y); background:var(--mg-bg); color:var(--mg-fg); }
.mg-sec + .mg-sec:not(.mg-dark){ border-top:1px solid var(--mg-rule-soft); }

/* 未着手セクションの置き場（qa のときだけ見せる） */
.mg-todo{ display:none; }
html.qa .mg-todo{
  display:block; padding:28px var(--gutter); text-align:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(214,222,229,.35) 10px 11px);
}
html.qa .mg-todo::after{ content:attr(data-todo) " — todo"; }

/* ===================== タイポスケール ===================== */
.mg-h1{
  font-size:clamp(36px,4.7vw,68px); font-weight:900; line-height:1.28; letter-spacing:.05em;
  color:var(--mg-fg); word-break:keep-all; overflow-wrap:anywhere;
}
.mg-h2 h2, .mg-title{
  font-size:clamp(27px,3.3vw,44px); font-weight:900; line-height:1.4; letter-spacing:.04em;
  color:var(--mg-fg); text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere;
}
.mg-h3{ font-size:clamp(18px,1.6vw,22px); font-weight:700; line-height:1.5; letter-spacing:.03em; color:var(--mg-fg); }
.mg-lead{ font-size:clamp(15px,1.15vw,16.5px); line-height:2; color:var(--mg-fg-soft); max-width:600px; text-wrap:pretty; }
.mg-body{ font-size:15px; line-height:1.95; color:var(--mg-fg-soft); text-wrap:pretty; }
.mg-small{ font-size:13px; line-height:1.8; color:var(--mg-fg-faint); }
.mg-lead code, .mg-body code{ color:var(--mg-accent-text); }
/* 日本語本文は文節単位で折り返す（Chromium 119+。非対応ブラウザは無視され normal のまま） */
.mg-lead, .mg-body, .mg-small, .mg-hero p, .mg-sec p{ word-break:auto-phrase; }

/* 銘板ラベル — 最小11px */
.mg-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mg-fg-faint); line-height:1.6; font-weight:400;
}
.mg-tag b{ color:var(--mg-accent-text); font-weight:500; }
.mg-tag i{ width:10px; height:10px; border-radius:3px 1px 1px 1px; background:var(--grad); display:inline-block; vertical-align:-1px; margin-right:10px; }

/* 価格数字・巨大背景文字（セクション側が使う） */
.mg-figure{ font-family:var(--font-en); font-weight:800; font-size:clamp(54px,6.4vw,92px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--mg-fg); }
.mg-bgword{
  position:absolute; left:-.02em; bottom:-.18em; z-index:0; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--font-en); font-weight:800; font-size:clamp(120px,22vw,330px); line-height:1; letter-spacing:-.04em;
  color:rgba(20,32,43,.035);
}
.mg-dark .mg-bgword{ color:rgba(255,255,255,.035); }
.mg-bgword ~ *{ position:relative; z-index:1; }

/* グラデ文字 */
.mg-gradtext{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================== アイコン（24px / stroke 1.5 / round） ===================== */
.mg-ic{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mg-ic--sm{ width:16px; height:16px; }
.mg-ic--xs{ width:14px; height:14px; }

/* ===================== 銘板行（セクション冒頭） ===================== */
.mg-tagrow{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:14px; border-bottom:1px solid var(--mg-rule); margin-bottom:clamp(36px,5vw,56px);
}
.mg-tagrow > .mg-tag{ display:inline-block; white-space:nowrap; } /* inline-flex だと <b> 前後の半角スペースが消えるので inline-block */
.mg-tagrow > .mg-tag > .mg-ic{ vertical-align:-3px; }
.mg-tagrow > .mg-tag ~ .mg-tag{ text-align:right; }
@media (max-width:640px){ .mg-tagrow > .mg-tag ~ .mg-tag{ display:none; } }

/* 署名線画「点→門→3点」 — site.js が .mg-tagrow に自動挿入。門の足が罫線に立つ */
.mg-sig{
  position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:132px; height:20px;
  pointer-events:none; color:var(--mg-fg-faint); overflow:visible;
}
@media (max-width:640px){ .mg-sig{ left:auto; right:0; transform:none; } }
.mg-sig path{ fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.mg-sig .mg-sig__gate{ stroke:var(--mg-accent); }
.mg-sig circle{ fill:currentColor; }
.mg-sig .mg-sig__in{ fill:var(--mg-accent); }
html.js:not(.reduced):not(.qa) .mg-sig path{ stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200); }
html.js:not(.reduced):not(.qa) .mg-sig circle{ opacity:0; }
html.js:not(.reduced):not(.qa) .mg-sig.is-in path{ stroke-dashoffset:0; transition:stroke-dashoffset .9s var(--ease-out); }
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__gate{ transition-delay:.25s; }
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__out{ transition-delay:.5s; }
html.js:not(.reduced):not(.qa) .mg-sig.is-in circle{ opacity:1; transition:opacity .4s var(--ease-out); }
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__c1{ transition-delay:.05s; }
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__in{ transition-delay:.45s; }
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__c2,
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__c3,
html.js:not(.reduced):not(.qa) .mg-sig.is-in .mg-sig__c4{ transition-delay:.9s; }

/* ===================== 8:4見出し（左H2／右リード下揃え） ===================== */
.mg-h2{
  display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:24px clamp(32px,4vw,64px);
  align-items:end; margin-bottom:clamp(36px,5vw,56px);
}
.mg-h2 > h2{ margin:0; }
.mg-h2 > .mg-lead{ max-width:none; justify-self:stretch; }
@media (max-width:900px){ .mg-h2{ grid-template-columns:minmax(0,1fr); gap:16px; } .mg-h2 > .mg-lead{ max-width:600px; } }

/* ===================== ボタン ===================== */
.mg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-jp); font-weight:700; font-size:14.5px; letter-spacing:.02em;
  padding:0 8px 0 26px; height:54px; border-radius:var(--r-pill); white-space:nowrap; border:1.5px solid transparent;
  transition:filter var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mg-btn__orb{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22); flex:none; transition:transform var(--dur-fast) var(--ease-out);
}
.mg-btn__orb .mg-ic{ width:16px; height:16px; stroke-width:1.75; }
.mg-btn:hover .mg-btn__orb{ transform:translateX(3px); }
.mg-btn--grad{ background:var(--grad-btn); color:#fff; box-shadow:var(--shadow-soft); }
.mg-btn--grad:hover{ filter:brightness(1.06); }
.mg-btn--line{ background:transparent; color:var(--mg-fg); border-color:var(--mg-rule); padding:0 26px; }
.mg-btn--line:hover{ border-color:var(--mg-accent); color:var(--mg-accent); }
.mg-btn--white{ background:var(--paper); color:var(--blue-text); border-color:var(--line); }
.mg-btn--white .mg-btn__orb{ background:var(--blue-light); color:var(--blue-text); }
.mg-btn--white:hover{ border-color:var(--blue); }
.mg-dark .mg-btn--white{ border-color:transparent; }
.mg-btn--sm{ height:44px; font-size:13.5px; padding-left:20px; }
.mg-btn--sm .mg-btn__orb{ width:30px; height:30px; }
.mg-btn--sm.mg-btn--line{ padding:0 20px; }
.mg-btn--block{ width:100%; }

/* ===================== 区画（grid gap:1px） ===================== */
.mg-cells{
  display:grid; gap:1px; background:var(--mg-rule); border:1px solid var(--mg-rule);
  border-radius:var(--r-panel); overflow:hidden;
}
.mg-cells > *{ background:var(--mg-cell); min-width:0; }
.mg-cells--sm{ border-radius:var(--r-panel-sm); }
.mg-cells--sq{ border-radius:0; }
.mg-cell{ padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px); }
.mg-cells--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mg-cells--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mg-cells--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .mg-cells--3, .mg-cells--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .mg-cells--2, .mg-cells--3, .mg-cells--4{ grid-template-columns:minmax(0,1fr); } .mg-cells{ border-radius:var(--r-panel-sm); } }

/* ===================== パネル（非対称角丸） ===================== */
.mg-panel{
  background:var(--mg-cell); border:1px solid var(--mg-rule); border-radius:var(--r-panel);
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px);
}
.mg-panel--sm{ border-radius:var(--r-panel-sm); }
.mg-panel--lift{ box-shadow:var(--shadow-soft); }
.mg-dark .mg-panel{ backdrop-filter:blur(4px); }

/* ===================== 黄色マーカー（1ビューポートに1回まで） ===================== */
.mg-marker{
  background-image:linear-gradient(transparent 62%, var(--marker) 62%);
  background-repeat:no-repeat; padding:0 2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.mg-dark .mg-marker{ background-image:none; background-color:var(--marker); color:var(--ink); padding:0 5px; }

/* ===================== 実テーブル ===================== */
.mg-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; line-height:1.8; color:var(--mg-fg-soft); }
.mg-table th, .mg-table td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--mg-rule); background:var(--mg-cell); }
.mg-table thead th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--mg-fg-faint); }
.mg-table tbody th{ font-weight:700; color:var(--mg-fg); white-space:nowrap; }
.mg-table tr:last-child th, .mg-table tr:last-child td{ border-bottom:0; }
.mg-table--cells{ border:1px solid var(--mg-rule); border-radius:var(--r-panel-sm); overflow:hidden; background:var(--mg-rule); }
.mg-table--cells th, .mg-table--cells td{ border-right:1px solid var(--mg-rule); }
.mg-table--cells th:last-child, .mg-table--cells td:last-child{ border-right:0; }
.mg-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mg-table-wrap > .mg-table{ min-width:560px; }

/* ===================== チップ ===================== */
.mg-chip{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:var(--r-tag);
  border:1px solid var(--mg-rule); background:var(--mg-cell); font-size:12.5px; font-weight:500; color:var(--mg-fg-soft); white-space:nowrap;
}
.mg-chip .mg-ic{ width:14px; height:14px; color:var(--mg-accent); }

/* ===================== 出現（IO で .in 付与） ===================== */
html.js:not(.reduced):not(.qa) .fx{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--fx-d,0s); }
html.js:not(.reduced):not(.qa) .fx.in{ opacity:1; transform:none; }

/* ===================== モーション停止（reduced / qa） ===================== */
html.reduced *, html.reduced *::before, html.reduced *::after,
html.qa *, html.qa *::before, html.qa *::after{ animation:none !important; transition:none !important; }

/* =====================================================================
   ヘッダー（区画グリッド・画面幅いっぱい）
   ===================================================================== */
.mg-head{ position:sticky; top:0; z-index:40; background:var(--ground); border-bottom:1px solid transparent; transition:border-color var(--dur-fast); }
.mg-head.is-scrolled{ border-bottom-color:var(--line); }
.mg-head__grid{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1px; background:var(--line); }
.mg-head__cell{ background:var(--ground); display:flex; align-items:center; height:var(--head-h); padding:0 22px; min-width:0; }
.mg-head__cell--logo{ padding-left:var(--gutter); }
.mg-head__cell--cta{ padding:0 var(--gutter) 0 22px; }
.mg-logo{ display:inline-flex; align-items:center; min-height:44px; gap:10px; font-family:var(--font-en); font-weight:800; font-size:17px; letter-spacing:.08em; color:var(--ink); line-height:1; }
.mg-logo .mg-ic{ width:22px; height:22px; color:var(--blue-deep); }
.mg-logo__sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--muted); font-weight:400; margin-left:6px; text-transform:uppercase; }
.mg-nav{ display:flex; gap:clamp(18px,2.2vw,30px); }
.mg-nav a{ font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; transition:color var(--dur-fast); padding:6px 0; }
.mg-nav a:hover{ color:var(--blue-text); }
.mg-head__cta{ height:42px; font-size:13.5px; padding-left:20px; }
.mg-head__cta .mg-btn__orb{ width:30px; height:30px; }
.mg-head__cta--sp{ display:none; }
.mg-head__cell--burger{ display:none; }
.mg-head__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px 4px 4px 4px; color:var(--ink); margin-right:-8px; }
.mg-head__burger .mg-ic{ width:22px; height:22px; }
.mg-head__burger .mg-ic--x{ display:none; }
.mg-head.is-open .mg-head__burger .mg-ic--bars{ display:none; }
.mg-head.is-open .mg-head__burger .mg-ic--x{ display:block; }
.mg-head__menu{ display:none; background:var(--ground); border-top:1px solid var(--line); }
.mg-head__menu ul{ padding:6px var(--gutter) 14px; }
.mg-head__menu a{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; font-size:15px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-soft); }
.mg-head__menu a .mg-ic{ width:16px; height:16px; color:var(--muted); }
.mg-head__menu li:last-child a{ border-bottom:0; }
.mg-head.is-open .mg-head__menu{ display:block; border-bottom:1px solid var(--line); box-shadow:0 18px 32px -18px rgba(15,36,56,.28); }
body.mg-menu-open::before{ content:""; position:fixed; inset:0; z-index:30; background:rgba(15,36,56,.18); }
@media (max-width:960px){
  .mg-head__grid{ grid-template-columns:minmax(0,1fr) auto auto; }
  .mg-head__cell--nav{ display:none; }
  .mg-head__cell--cta{ padding-right:14px; }
  .mg-head__cell--burger{ display:flex; padding:0 var(--gutter) 0 10px; }
  .mg-head__burger{ display:inline-flex; }
  .mg-head__cta--pc{ display:none; }
  .mg-head__cta--sp{ display:inline-flex; height:44px; font-size:13px; padding:0 7px 0 16px; gap:8px; }
  .mg-head__cta--sp .mg-btn__orb{ width:28px; height:28px; }
  .mg-head__cta--sp .mg-btn__orb .mg-ic{ width:13px; height:13px; }
  /* JSなし: バーガーが動かないのでメニューを常時展開してページ内ナビへ届くようにする */
  html.no-js .mg-head__menu{ display:block; }
  html.no-js .mg-head__cell--burger{ display:none; }
}
@media (max-width:640px){
  .mg-head__cell{ padding:0 14px; }
  .mg-head__cell--logo{ padding-left:var(--gutter); }
  .mg-logo{ font-size:15px; }
  .mg-logo__sub{ display:none; }
}

/* =====================================================================
   ヒーロー（セクション01）
   ===================================================================== */
.mg-hero{
  position:relative; overflow:hidden; background:var(--ground); color:var(--ink);
  --mg-bg:var(--ground);
  border-bottom:1px solid var(--line);
}
@media (min-width:761px){
  /* 上限は 1020px（1080 高さのディスプレイで fold の下に素の白帯が出ないように）。1440×900 では従来どおり 840px */
  .mg-hero{ min-height:min(1020px, max(680px, calc(100vh - var(--head-h)))); min-height:min(1020px, max(680px, calc(100svh - var(--head-h)))); max-height:none; }
}
.mg-hero__canvas{ position:absolute; inset:0; z-index:0; }
.mg-hero__canvas canvas{ display:block; width:100%; height:100%; }
html.no-js .mg-hero__canvas{ display:none; }
.mg-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--ground) 0%, rgba(245,248,251,.94) 34%, rgba(245,248,251,.6) 50%, rgba(245,248,251,0) 62%);
}
.mg-hero__inner{ position:relative; z-index:3; padding-top:clamp(36px,5.5vh,60px); padding-bottom:clamp(150px,18vh,190px); }
.mg-hero__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:22px; }
.mg-hero__row .mg-tag{ white-space:nowrap; }
.mg-pill{
  display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px 0 10px; border-radius:var(--r-pill);
  border:1px solid var(--blue-light); background:var(--paper); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--blue-text); white-space:nowrap;
}
.mg-pill i{ width:7px; height:7px; border-radius:50%; background:var(--grad); display:inline-block; }
.mg-hero__copy{ max-width:840px; }
.mg-hero__h1{ margin-bottom:clamp(16px,2.2vh,22px); }
/* 平易なサブ見出し: H1のブランドコピーを「何のサービスか」に翻訳する1行 */
.mg-hero__catch{
  font-size:clamp(18px,1.8vw,25px); font-weight:700; letter-spacing:.04em; line-height:1.6;
  color:var(--ink); margin-bottom:clamp(12px,1.8vh,18px); text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere;
}
.mg-hero__catch::before{ content:""; display:inline-block; width:12px; height:12px; border-radius:4px 1px 1px 1px; background:var(--grad); margin-right:12px; vertical-align:0; }
.mg-hero__h1 .mg-ln{ display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.mg-hero__h1 .mg-ln > span{ display:block; will-change:transform; }
html.js:not(.reduced):not(.qa) .mg-hero__h1 .mg-ln > span{ transform:translateY(112%); }
html.js:not(.reduced):not(.qa) .mg-hero__h1.is-in .mg-ln > span{ transform:none; transition:transform 1.1s var(--ease-out); }
html.js:not(.reduced):not(.qa) .mg-hero__h1.is-in .mg-ln:nth-child(2) > span{ transition-delay:.09s; }
.mg-hero__lead{ font-size:clamp(15px,1.2vw,17px); line-height:2; color:var(--ink-soft); max-width:620px; margin-bottom:clamp(24px,3.4vh,32px); text-wrap:pretty; }
.mg-hero__ctas{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mg-hero__micro{ margin-top:16px; display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.7; color:var(--muted); flex-wrap:wrap; }
.mg-hero__micro::before{ content:""; width:28px; height:1px; background:var(--line); flex:none; }
.mg-hero__chips{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.mg-hero__chips .mg-chip{ height:30px; font-size:12px; background:rgba(255,255,255,.7); }

/* 紙面いっぱいのワードマーク — MCPは線、GATEは面 */
.mg-wordmark{
  position:absolute; left:var(--gutter); bottom:-.07em; z-index:2; pointer-events:none; user-select:none;
  font-family:var(--font-en); font-weight:800; text-transform:uppercase;
  font-size:clamp(56px,11vw,160px); line-height:1; letter-spacing:-.035em; white-space:nowrap; color:var(--ink);
}
.mg-wordmark__hollow{ color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.mg-wordmark__solid{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ゲートの銘板とレーン札（座標は site.js がキャンバスのマウントに CSS 変数で渡す） */
.mg-gate-tag, .mg-lane-tag{ position:absolute; z-index:2; pointer-events:none; font-family:var(--font-mono); text-transform:uppercase; }
.mg-gate-tag{
  left:var(--gate-x,62.5%); top:calc(var(--gate-bot,60%) + 16px); transform:translateX(-50%);
  text-align:center; font-size:11px; letter-spacing:.16em; color:var(--ink); line-height:1.7; white-space:nowrap;
  background:var(--ground); padding:3px 12px 5px; border-radius:var(--r-tag);
}
.mg-gate-tag small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:none; color:var(--muted); }
.mg-lane-tag{
  right:var(--gutter); transform:translateY(-50%);
  font-size:11px; letter-spacing:.14em; color:var(--blue-text);
  background:var(--ground); padding:2px 8px; border:1px solid var(--blue-light); border-radius:var(--r-tag);
}
.mg-lane-tag--0{ top:var(--lane-0,32%); } .mg-lane-tag--1{ top:var(--lane-1,40%); } .mg-lane-tag--2{ top:var(--lane-2,48%); }

/* ミニ動作カード（MOCK-H）— PCだけ */
.mg-hero__card{
  position:absolute; z-index:3; right:var(--gutter); top:calc(var(--lane-2,48%) + 44px); width:300px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel-sm); box-shadow:var(--shadow-soft); padding:18px 20px 16px;
}
.mg-hero__card h3, .mg-hero__card__h{ font-size:15px; font-weight:700; letter-spacing:.03em; margin-bottom:10px; }
.mg-hero__card ol{ display:flex; flex-direction:column; gap:6px; }
.mg-hero__card li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.mg-hero__card li i{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; transition:background-color .25s, border-color .25s; }
.mg-hero__card li i .mg-ic{ width:11px; height:11px; stroke-width:2; opacity:0; }
.mg-hero__card li.on i{ background:var(--blue-deep); border-color:var(--blue-deep); }
.mg-hero__card li.on i .mg-ic{ opacity:1; }
.mg-hero__card__done{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--blue-text); opacity:0; transition:opacity .4s; }
.mg-hero__card__done .mg-ic{ width:14px; height:14px; }
.mg-hero__card.is-done .mg-hero__card__done{ opacity:1; }
html.no-js .mg-hero__card li i .mg-ic, html.reduced .mg-hero__card li i .mg-ic, html.qa .mg-hero__card li i .mg-ic{ opacity:1; }
html.no-js .mg-hero__card li i, html.reduced .mg-hero__card li i, html.qa .mg-hero__card li i{ background:var(--blue-deep); border-color:var(--blue-deep); }
html.no-js .mg-hero__card__done, html.reduced .mg-hero__card__done, html.qa .mg-hero__card__done{ opacity:1; }

@media (max-width:1180px){ .mg-hero__card{ display:none; } }
@media (min-width:761px) and (max-width:1100px){ .mg-lane-tag{ display:none; } }
/* 1600px以上: ヒーローが1020pxまで伸びるので、本文ブロックをワードマーク上の余白に縦中央寄せして空白を上下へ分散する */
@media (min-width:1600px){
  .mg-hero{ display:flex; flex-direction:column; }
  .mg-hero__inner{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(36px,4vh,48px); padding-bottom:clamp(170px,19vh,210px); }
}

/* SP: コピーの下に高さ約340pxのキャンバス帯を独立して切る */
@media (max-width:760px){
  .mg-hero{ display:flex; flex-direction:column; min-height:0; max-height:none; }
  .mg-hero__scrim{ display:none; }
  .mg-hero__inner{ order:1; padding-top:28px; padding-bottom:0; }
  .mg-hero__canvas{ order:2; position:relative; inset:auto; height:340px; width:100%; margin-top:26px; border-top:1px solid var(--line-soft); }
  .mg-wordmark{ order:3; position:relative; left:auto; bottom:auto; margin:6px 0 -.1em var(--gutter); font-size:clamp(56px,18vw,84px); }
  .mg-hero__row{ margin-bottom:16px; }
  .mg-hero__h1 .mg-ln{ display:block; }
  .mg-hero__catch{ font-size:17px; }
  .mg-hero__lead{ font-size:15px; margin-bottom:22px; }
  .mg-hero__micro{ font-size:14px; }
  .mg-hero__ctas{ flex-direction:column; align-items:stretch; gap:10px; }
  .mg-hero__ctas .mg-btn{ width:100%; }
  .mg-hero__chips{ margin-top:16px; }
  .mg-gate-tag{ top:calc(var(--gate-bot,70%) + 10px); }
  .mg-lane-tag{ right:12px; }
}
@media (max-width:360px){ .mg-lane-tag{ display:none; } }

/* =====================================================================
   フッター（セクション15・濃紺・区画グリッド）
   ===================================================================== */
.mg-foot{ position:relative; color:var(--on-dark); }
.mg-foot__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.25fr); gap:1px; background:var(--seam-dark); border-top:1px solid var(--seam-dark); }
.mg-foot__cell{ background:var(--navy); padding:clamp(32px,4vw,52px) clamp(20px,2.2vw,32px) clamp(28px,3.5vw,44px); min-width:0; }
.mg-foot__cell--brand{ padding-left:var(--gutter); }
.mg-foot__cell:last-child{ padding-right:var(--gutter); }
.mg-foot .mg-logo{ color:var(--on-dark); }
.mg-foot .mg-logo .mg-ic{ color:var(--teal); }
.mg-foot__sig{ width:132px; height:20px; margin:18px 0 14px; color:var(--on-dark-faint); overflow:visible; }
.mg-foot__sig path{ fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.mg-foot__sig .mg-sig__gate{ stroke:var(--teal); }
.mg-foot__sig circle{ fill:currentColor; }
.mg-foot__sig .mg-sig__in{ fill:var(--teal); }
.mg-foot__tagline{ font-family:var(--font-en); font-weight:800; font-size:14px; letter-spacing:.04em; color:var(--on-dark-soft); }
.mg-foot__h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:16px; font-weight:500; }
.mg-foot__list{ display:flex; flex-direction:column; gap:10px; }
.mg-foot__list a, .mg-foot__list button{ font-size:13.5px; line-height:1.6; color:var(--on-dark-soft); text-align:left; transition:color var(--dur-fast); display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px; white-space:nowrap; position:relative; max-width:100%; }
.mg-foot__list a:hover{ color:var(--on-dark); }
.mg-foot__list .mg-ic{ width:13px; height:13px; color:var(--on-dark-faint); }
.mg-foot__list [aria-disabled="true"]{ color:var(--on-dark-faint); cursor:default; }
.mg-foot__list [aria-disabled="true"] small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; border:1px solid var(--seam-dark); border-radius:4px; padding:0 6px; line-height:1.6; white-space:nowrap; flex:none; }
.mg-tip{ position:relative; }
.mg-tip::before{ content:""; position:absolute; inset:-11px -8px; }
.mg-tip::after{
  content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 8px); z-index:5; white-space:nowrap;
  background:var(--paper); color:var(--ink); font-size:12px; font-weight:500; letter-spacing:.02em; line-height:1; padding:8px 10px; border-radius:8px 4px 4px 4px;
  box-shadow:var(--shadow-soft); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity var(--dur-fast), transform var(--dur-fast);
}
.mg-tip.is-tip::after{ opacity:1; transform:none; }
.mg-foot__bottom{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px; background:var(--seam-dark); border-top:1px solid var(--seam-dark); }
.mg-foot__bottom > div{ background:var(--navy); padding:16px var(--gutter); display:flex; align-items:center; gap:14px; min-width:0; }
.mg-foot__bottom .mg-tag{ color:var(--on-dark-faint); }
.mg-foot__bottom a.mg-tag:hover{ color:var(--on-dark); }
@media (max-width:960px){
  .mg-foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mg-foot__list{ gap:0; }
  .mg-foot__list a, .mg-foot__list button{ min-height:44px; padding-block:6px; }
  .mg-foot__bottom a.mg-tag{ display:inline-flex; align-items:center; min-height:44px; }
  .mg-foot__cell--brand{ grid-column:1 / -1; padding-right:var(--gutter); }
  .mg-foot__cell{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
@media (max-width:520px){
  .mg-foot__grid{ grid-template-columns:minmax(0,1fr); }
  .mg-foot__bottom{ grid-template-columns:minmax(0,1fr); }
}