/* ============================================================
   Tempura OS — 海外展開AIエージェント LP（子LP・記事・download・privacy・404）
   ------------------------------------------------------------
   2026-09-06: 親LP（assets/css/ep.css）と同じデザインシステムに揃えた。
   2026-09-16: このファイルが受け持つ子ページの地を紺→白へ反転した。トークン名は据え置き。
   ・地は白 #FFFFFF、帯は #F2F6FC。地の上の文字は #0F172A／#4A5361
   ・紺が残るのは固定ヘッダーとモバイルのナビだけ（--navy／--on-navy／--line-navy）
   ・白いカード（background:#fff）は必ず color:var(--ink) をセットで持つ
   ・カードの中の受け皿は --card-2 #EEF3F9（紺をカードの中に出さない）
   ・角丸はカード18px／ボタン12px。小さなラベルは2〜3px（ピル型 999px は禁止）
   ・書体は Nunito Sans（英字）＋ Zen Kaku Gothic New（日本語）＋ JetBrains Mono（ラベル）
   ・色の値と考え方は ep.css が正。ここは ep.css を写した派生
   ============================================================ */

:root{
  --blue-50:#EDF5FE;
  --blue-100:#D7E8FC;
  --blue-200:#AED0FA;   /* 白地では枠線・境界線にだけ使う。文字色には使わない（文字は --blue-600） */
  --blue-500:#0A5AE8;   /* ボタン */
  --blue-600:#094BC2;
  --blue-700:#08398F;
  --blue-800:#062B6B;
  --sky:#183566;        /* 旧ヒーロー上端の紺。2026-09-16 の反転でヒーローは白になったため未使用 */
  --base:#FFFFFF;       /* 地。2026-09-16 に紺→白へ反転。呼び出し側158箇所を活かすため名前は据え置き */
  --base-2:#F2F6FC;     /* 帯・フッター。2026-09-16 に紺→白へ反転。名前は据え置き */
  --card-2:#EEF3F9;     /* 白いカードの内側の受け皿 */
  --line-dark:#C6D2DF;  /* 地の上の罫線。2026-09-16 に紺→白へ反転。名前は据え置き */
  --on-dark:#0F172A;    /* 地の上の本文。2026-09-16 に紺→白へ反転。名前は据え置き */
  --on-dark-sub:#4A5361;/* 地の上の脇文。2026-09-16 に紺→白へ反転。名前は据え置き */
  /* 紺のまま残す面（固定ヘッダー／モバイルのナビ／モバイル下部のCTAバー）。値は反転前のもの */
  --navy:#0F2247;
  --on-navy:#FFFFFF;
  --line-navy:rgba(255,255,255,.22);
  --text:#0F172A;       /* 白いカードの中の文字 */
  --text-sub:#4A5361;   /* 白いカードの中の脇文（白地 7.06:1） */
  --line:#C6D2DF;       /* 白いカードの中の罫線 */
  --accent:#E8552D;
  --accent-deep:#C9401C;
  /* エージェント識別色（色相218・明度の階段）。値を変えたら
     tools/agent-pages.js の AGENTS[].color と tools/illus-export.py の定数も合わせる。 */
  --c-market:#0A5AE8;
  --c-reg:#2141B3;
  --c-partner:#0B8BCF;
  --c-ana:#4B4FD6;
  --c-geo:#0C9DB3;
  --ok:#12A870;
  --du-ground:#0B1220;  /* ダークUIイラストの地色（tools/illus-darkui.py の STYLE と1対1） */

  /* 旧トークン名の互換。値は新システムに寄せてある */
  --ink:#0F172A;
  --ink-2:#0F172A;
  --paper:#FFFFFF;
  --sub:#4A5361;
  --signal:#0A5AE8;
  --deep:#062B6B;
  --line-d:var(--line-dark);
  --line-d2:#E2E9F1;

  --f-en:"Nunito Sans","Zen Kaku Gothic New",sans-serif;
  --f-mono:"JetBrains Mono",monospace;
  --f-jp:"Zen Kaku Gothic New",sans-serif;

  --fs-body:clamp(15.5px, 15px + .18vw, 17px);
  --max:1200px;
  --pad:28px;
  --r:18px;             /* カード */
  --r-card:18px;
  --r-btn:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 2px 6px rgba(8,43,102,.06),0 18px 44px rgba(8,43,102,.10);
  --shadow-dark:0 2px 6px rgba(8,43,102,.06),0 18px 44px rgba(8,43,102,.10); /* 2026-09-16 白地では濃い影が汚れるので --shadow と同値にした */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--base);color:var(--on-dark);
  font-family:var(--f-jp);font-weight:400;font-size:var(--fs-body);line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;line-break:strict;word-break:normal;
}

/* ---------- 改行（2026-09-18）----------
   本文は通常の日本語禁則で折り返す（line-break:strict で句読点を行頭に置かない）。
   以前は body 全体に word-break:keep-all を掛けていたが、幅の狭い段落（比較表のセル等）では
   文節が入り切らず、最後の手段の overflow-wrap:anywhere が働いて「、」「。」が行頭に来ていた。
   文節で折り返す keep-all は、行数が少なく文節の切れ目を <wbr> で指定している見出し・リードだけに使う。
   text-wrap:pretty は最終行に1〜2文字だけ落ちるのを防ぐ（非対応ブラウザは無視するだけ）。 */
p,dd,li,td,th,figcaption{word-break:normal;overflow-wrap:break-word;text-wrap:pretty}
h1,h2,h3,h4,.lead,.hero__sub,.chero__what,.dl__lead,.cta__head p,.dlhero__lead,.pain__voice{
  word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
/* カードの一行説明など短い一文は、通常禁則のまま行の長さを均等にそろえる（balance）。
   文節で折る keep-all を掛けると、幅が足りないとき overflow-wrap の強制改行が禁則を無視して
   「採点し／、優先順位」「リサ／ーチ」のように割れた。通常禁則なら句読点・長音は行頭に来ず、
   balance で最終行に1〜2文字だけ落ちるのも防げる（2026-09-18） */
p:has(wbr),.pain__fix,.mod__what,.cmp__cell p{text-wrap:balance}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue-500);color:#fff}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}

/* ---------- atoms ---------- */
.wrap{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto}
/* 小さなラベル：白地では墨線＋墨文字、反転（--d）はベタ塗り＋白文字 */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--line);padding:5px 10px;border-radius:2px;line-height:1}
.tag--d{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag--mute{color:var(--on-dark-sub);background:transparent;border-color:var(--line-dark)}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--blue-600);flex:none;border-radius:2px}
.eyebrow--d{color:var(--blue-600)}
.h2{font-family:var(--f-jp);font-weight:900;font-size:clamp(25px,21px + 1.2vw,38px);line-height:1.45;letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
.h2 em{font-style:normal;color:var(--blue-600)}
.en{font-family:var(--f-en);font-weight:800}
/* 見出し下の一文。薄いグレーにしない（地の上も白いカードの中も墨） */
.lead{color:var(--on-dark);font-size:15px;line-height:2;max-width:38em}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-inline:auto}

.btn{
  --bg:var(--blue-500);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;background:var(--bg);color:var(--fg);border:1.5px solid var(--bg);border-radius:var(--r-btn);
  font-family:var(--f-jp);font-weight:700;font-size:15px;letter-spacing:.03em;line-height:1;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn .arw{width:15px;height:1.5px;background:currentColor;position:relative;flex:none;transition:width .25s var(--ease)}
.btn .arw::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.btn:hover .arw{width:22px}
.btn--line{--bg:#fff;--fg:var(--blue-600);border-color:var(--blue-200)}
.btn--line:hover{border-color:var(--blue-500);background:var(--blue-50)}
.btn--dark{--bg:#fff;--fg:var(--blue-600);border-color:var(--blue-200)}
.btn--dark:hover{background:var(--blue-50);border-color:var(--blue-500)}
.btn--acc{--bg:var(--accent-deep);--fg:#fff}
.btn--sm{padding:11px 17px;font-size:13.5px}
.btn--wide{width:100%}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}

/* ---------- section frames ---------- */
.sec{padding-block:clamp(64px,8.5vh,110px);position:relative}
.sec--mist{background:var(--base-2)}
.sec--dark{background:var(--blue-800);color:#fff;border-block:1px solid var(--line-dark)}
.sec--dark .lead{color:var(--blue-100)}
.sec--tight{padding-block:clamp(48px,6vh,76px)}
.sec__head{margin-bottom:clamp(32px,5vh,54px)}
.sec__head h2{margin-top:14px}
.sec__head .lead{margin-top:16px}

/* ============================================================
   HEADER（白地の上に常に紺のソリッド。スクロール前後で見た目を変えない）
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto;z-index:800;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 var(--pad);height:64px;color:var(--on-navy);
  background:rgba(15,34,71,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-navy);
  transition:background .25s,box-shadow .25s}
.hdr.solid{background:rgba(15,34,71,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-navy)}
.hdr__logo{display:flex;align-items:center;gap:10px;flex:none}
.hdr__logo .mark{width:26px;height:26px;flex:none;background:url("/assets/img/marks/os-dark.svg") center/contain no-repeat}
.hdr__logo b{font-family:var(--f-en);font-weight:800;font-size:19px;letter-spacing:.01em}
.hdr__logo b i{font-style:normal;color:var(--blue-200)}
.hdr__nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.hdr__nav a{font-size:13.5px;font-weight:500;color:var(--on-navy);padding-block:6px;transition:color .2s}
.hdr__nav a:hover{color:var(--blue-200)}
.hdr__nav a.on{color:var(--blue-200)}
.hdr__acts{display:flex;align-items:center;gap:10px;flex:none}
.hdr__burger{display:none;width:40px;height:40px;position:relative;color:var(--on-navy)}
.hdr__burger i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),top .25s}
.hdr__burger i:nth-child(1){top:15px}
.hdr__burger i:nth-child(2){top:23px}
body.nav-open .hdr__burger i:nth-child(1){top:19px;transform:rotate(45deg)}
body.nav-open .hdr__burger i:nth-child(2){top:19px;transform:rotate(-45deg)}
.hdr__nav .nav-cta{display:none}
/* ---------- ヘッダー：業界別ドロップダウン ---------- */
.hdr__dd{position:relative}
.hdr__ddbtn{display:inline-flex;align-items:center;gap:5px}
.hdr__ddbtn::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.hdr__dd:hover .hdr__ddbtn::after,.hdr__dd:focus-within .hdr__ddbtn::after,.hdr__dd.is-open .hdr__ddbtn::after{transform:rotate(225deg);margin-top:3px}
/* ボタンとパネルの隙間で :hover が切れないようにする当たり判定のブリッジ */
.hdr__dd::before{content:"";position:absolute;left:50%;top:100%;width:572px;height:14px;transform:translateX(-50%)}
.hdr__ddmenu{
  position:absolute;left:50%;top:100%;margin-top:14px;padding:20px 22px 6px;
  display:grid;grid-template-columns:repeat(3,160px);gap:0 24px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.hdr__dd:hover .hdr__ddmenu,.hdr__dd:focus-within .hdr__ddmenu,.hdr__dd.is-open .hdr__ddmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.hdr__dd.dd-force-closed .hdr__ddmenu{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate(-50%,4px)!important}
.hdr__ddgrp{padding-bottom:16px}
.hdr__ddgrp p{font-size:11px;color:var(--text-sub);margin-bottom:9px}
.hdr__ddgrp a{display:block;font-size:13px;color:var(--text);padding-block:5px;line-height:1.45}
.hdr__ddmenu a:hover{color:var(--blue-600)}
@media (prefers-reduced-motion:reduce){.hdr__ddmenu,.hdr__ddbtn::after{transition:none}}

/* ============================================================
   HERO（旧親LP用。index.html は ep.css を使うので現在は未使用だが、白に揃えておく）
   ============================================================ */
.hero{position:relative;background:linear-gradient(180deg,#F2F6FC 0%,#F8FAFD 55%,var(--base) 100%);color:var(--on-dark);padding:clamp(104px,13vh,140px) 0 0;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 42% at 88% 0%,rgba(174,208,250,.34),transparent 62%),
             radial-gradient(40% 36% at 4% 8%,rgba(174,208,250,.24),transparent 64%)}
.hero__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(90deg,rgba(8,43,102,.07) 1px,transparent 1px);background-size:calc(100% / 8) 100%;
  -webkit-mask-image:linear-gradient(#000,transparent 88%);mask-image:linear-gradient(#000,transparent 88%)}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,60px);align-items:center;text-align:left;padding-bottom:clamp(44px,6vh,72px)}
.hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hero h1{font-weight:900;font-size:clamp(28px,3.9vw,50px);line-height:1.4;letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
.hero h1 em{font-style:normal;color:var(--blue-600)}
.hero__sub{margin:20px 0 0;max-width:31em;color:var(--on-dark-sub);font-size:15px;line-height:2}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__claim{margin-top:clamp(28px,4vh,40px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}
.hero__claim div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;color:var(--ink)}
.hero__claim b{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--blue-600)}
.hero__claim p{margin-top:6px;font-size:12.8px;line-height:1.7;font-weight:700}
.hero__vis{position:relative}
.hero__vis svg{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(8,43,102,.14))}


/* ============================================================
   STATEMENT
   ============================================================ */
.stm{text-align:center}
.stm h2{font-size:clamp(23px,3.2vw,40px);font-weight:900;line-height:1.5}
.stm h2 em{font-style:normal;color:var(--blue-600)}
.stm p{margin:22px auto 0;max-width:40em;color:var(--on-dark-sub);font-size:14.5px;line-height:2.1}

/* ============================================================
   AGENTS（番号付き）
   ============================================================ */
.agents{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.agent{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 28px;
  display:flex;gap:18px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.agent:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.agent__no{width:34px;height:34px;flex:none;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:700}
.agent h3{font-size:17.5px;font-weight:700;line-height:1.5}
.agent__do{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.agent__do span{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;padding:4px 8px;border-radius:2px;background:#fff;border:1px solid var(--line);color:var(--text)}
.agent p{margin-top:13px;font-size:13.5px;line-height:1.95;color:var(--text-sub)}

/* ============================================================
   CTA帯（資料ダウンロード・反復）＝白いカード
   ============================================================ */
.dlband{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(26px,3.6vw,40px);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden}
.dlband>*{position:relative}
.dlband__tx b{display:block;font-size:clamp(17px,2vw,23px);font-weight:900;line-height:1.5}
.dlband__tx p{margin-top:8px;font-size:13.5px;color:var(--text-sub)}
.dlband__acts{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   STAGES（子LPへの入口）
   ============================================================ */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stage{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 24px;overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.stage::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.stage:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.stage:hover::before{transform:scaleX(1)}
.stage__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stage__no{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:76px;color:var(--blue-600);line-height:.85;letter-spacing:-.03em}
.stage h3{margin-top:16px;font-size:20px;font-weight:700}
.stage__en{margin-top:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)}
.stage p{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--text-sub)}
.stage__fn{margin-top:18px;display:flex;flex-direction:column;gap:7px;padding-top:16px;border-top:1px solid var(--line)}
.stage__fn span{position:relative;padding-left:18px;font-size:12.5px;color:var(--text)}
.stage__fn span::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--blue-500);border-radius:2px}
.stage__go,.agent__go{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--blue-600)}
.stage__go i,.agent__go i{width:16px;height:1.5px;background:currentColor;position:relative;transition:width .25s var(--ease)}
.stage__go i::after,.agent__go i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.stage:hover .stage__go i{width:26px}
.agent__go{margin-top:16px}
.agent:hover .agent__go i{width:26px}

/* ============================================================
   SERVICE（カテゴリ別グリッド）
   ============================================================ */
.svcat{margin-top:26px}
.svcat__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.svcat__h b{font-size:15px;font-weight:700}
.svcat__h span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:4px 9px;border-radius:2px}
.svcat__h i{flex:1;height:1px;background:var(--line-dark)}
.svgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sv{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 22px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.sv:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.sv b{display:block;font-size:14.5px;font-weight:700;line-height:1.55}
.sv p{margin-top:9px;font-size:12.8px;line-height:1.85;color:var(--text-sub)}

/* ============================================================
   REASON
   ============================================================ */
.reason{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rs{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 30px}
.rs__ic{display:block;width:auto;height:auto;background:none;font-style:italic;
  font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--blue-600)}
.rs h3{margin-top:16px;font-size:17px;font-weight:700;line-height:1.55}
.rs p{margin-top:11px;font-size:13.3px;line-height:1.95;color:var(--text-sub)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.fact{background:var(--blue-800);color:#fff;border-radius:var(--r);padding:24px 22px;outline:1px solid var(--line-dark)}
.fact dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-200)}
.fact dd{margin-top:8px;font-family:var(--f-en);font-weight:800;font-size:30px;line-height:1}
.fact dd span{font-family:var(--f-jp);font-size:13px;font-weight:500;margin-left:6px;color:var(--blue-100)}
.fact p{margin-top:10px;font-size:12.5px;color:var(--blue-100);line-height:1.8}

/* ============================================================
   MARKETS
   ============================================================ */
.mkgroup{margin-top:24px}
.mkgroup__h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.mkgroup__h b{font-size:15px;font-weight:700}
.mkgroup__h em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--on-dark-sub)}
.mkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mk{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.mk:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mk__code{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--blue-600)}
.mk b{display:block;margin-top:8px;font-size:15.5px;font-weight:700}
.mk em{font-style:normal;font-family:var(--f-en);font-weight:700;font-size:10.5px;color:var(--text-sub);letter-spacing:.04em}
.mk p{margin-top:10px;font-size:12.4px;line-height:1.8;color:var(--text-sub)}
.mknote{margin-top:20px;font-size:12.5px;color:var(--on-dark-sub)}

/* ============================================================
   SCOPE（アコーディオン。地の上に罫線で組む）
   ============================================================ */
.ph-list{border-top:1px solid var(--line)}
.ph{border-bottom:1px solid var(--line-dark)}
.ph__btn{width:100%;display:grid;grid-template-columns:56px 1fr 150px 26px;gap:clamp(10px,2vw,26px);align-items:center;padding:20px 4px;text-align:left;transition:padding-left .3s var(--ease)}
.ph__btn:hover{padding-left:10px}
.ph__no{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:46px;line-height:.9;letter-spacing:-.03em;color:var(--blue-600);transition:color .3s}
.ph.open .ph__no,.ph__btn:hover .ph__no{color:var(--ink)}
.ph__ttl b{display:block;font-weight:700;font-size:clamp(15px,1.6vw,18px);line-height:1.5;color:var(--on-dark)}
.ph__ttl em{display:block;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-sub);margin-top:4px}
.ph__stage{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-sub);text-align:right}
.ph__ico{justify-self:end;width:16px;height:16px;position:relative}
.ph__ico i{position:absolute;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),background .3s}
.ph__ico i:first-child{top:50%;left:0;width:100%;height:2px;margin-top:-1px}
.ph__ico i:last-child{left:50%;top:0;height:100%;width:2px;margin-left:-1px}
.ph.open .ph__ico i:last-child{transform:scaleY(0)}
.ph.open .ph__ico i{background:var(--blue-600)}
.ph__panel{overflow:hidden;height:0;transition:height .5s var(--ease)}
.ph__inner{padding:0 0 26px;margin-left:clamp(0px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,40px)}
.ph__inner .desc{grid-column:1/-1;padding:6px 0 12px;font-size:13.5px;line-height:1.95;color:var(--on-dark-sub);max-width:46em}
.ph__inner ul{list-style:none}
.ph__inner li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line-dark);font-size:13.2px;line-height:1.75;position:relative;color:var(--on-dark)}
.ph__inner li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--blue-600);border-radius:2px}

/* ============================================================
   DOWNLOAD CARDS
   ============================================================ */
.dlcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dlcard{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.dlcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.dlcard__doc{width:44px;height:56px;border-radius:5px;background:var(--card-2);border:1px solid var(--line);position:relative;overflow:hidden}
.dlcard__doc::before{content:"";position:absolute;left:0;top:0;width:100%;height:9px;background:var(--blue-500)}
.dlcard__doc::after{content:"";position:absolute;left:8px;top:20px;right:8px;height:2px;background:var(--line);
  box-shadow:0 7px 0 var(--line),0 14px 0 var(--line),0 21px 0 var(--line)}
.dlcard b{display:block;margin-top:16px;font-size:16px;font-weight:700;line-height:1.55}
.dlcard p{margin-top:10px;font-size:13px;line-height:1.9;color:var(--text-sub)}
.dlcard__meta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.dlcard__meta span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--text);background:#fff;border:1px solid var(--line);padding:4px 8px;border-radius:2px}
.dlcard .btn{margin-top:20px}

/* ============================================================
   FAQ（地の上に罫線）
   ============================================================ */
.qa-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line-dark)}
.qa__btn{width:100%;display:grid;grid-template-columns:26px 1fr 18px;gap:14px;align-items:start;padding:18px 2px;text-align:left}
.qa__q{font-family:var(--f-en);font-weight:800;font-size:15px;color:var(--blue-600);line-height:1.7}
.qa__btn b{font-weight:700;font-size:14.8px;line-height:1.7;color:var(--on-dark)}
.qa__ico{position:relative;width:15px;height:15px;margin-top:5px;justify-self:end}
.qa__ico i{position:absolute;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.qa__ico i:first-child{top:50%;left:0;width:100%;height:2px;margin-top:-1px}
.qa__ico i:last-child{left:50%;top:0;height:100%;width:2px;margin-left:-1px}
.qa.open .qa__ico i:last-child{transform:scaleY(0)}
.qa__panel{overflow:hidden;height:0;transition:height .45s var(--ease)}
.qa__inner{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:0 0 22px}
.qa__a{font-family:var(--f-en);font-weight:800;font-size:15px;color:var(--on-dark-sub)}
.qa__inner p{font-size:13.5px;line-height:1.95;color:var(--on-dark-sub)}

/* ============================================================
   CONTACT + FORM
   ============================================================ */
.cta{background:linear-gradient(180deg,var(--base) 0%,#F2F6FC 100%);color:var(--on-dark);position:relative;overflow:hidden;padding-block:clamp(64px,9vh,110px)}
.cta>*{position:relative}
.cta__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.cta h2{margin-top:14px;font-weight:900;font-size:clamp(24px,3vw,38px);line-height:1.5}
.cta h2 em{font-style:normal;color:var(--blue-600)}
.cta__tx{margin-top:18px;max-width:30em;color:var(--on-dark-sub);font-size:14px;line-height:2}
.cta__note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;flex-direction:column;gap:8px}
.cta__note span{position:relative;padding-left:18px;font-size:12.5px;color:var(--on-dark-sub)}
.cta__note span::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--blue-600);border-radius:2px}

.cform{display:flex;flex-direction:column;gap:18px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow);padding:clamp(22px,2.8vw,34px)}
.cform[hidden],.cform__done[hidden]{display:none}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column;gap:7px;border:0;min-width:0}
.fld label,.fld legend{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);padding:0}
.fld label i,.fld legend i{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;background:var(--accent-deep);color:#fff;border-radius:3px;line-height:1;font-weight:700}
.fld label i.opt,.fld legend i.opt{background:var(--text-sub);color:#fff}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea,.cform select{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-family:var(--f-jp);font-size:15px;line-height:1.7;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.cform textarea{resize:vertical;min-height:104px}
.cform input::placeholder,.cform textarea::placeholder{color:#8B93A1}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:2px solid var(--blue-100);outline-offset:0;border-color:var(--blue-500);background:#fff}
.sel{position:relative}
.sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-5px;pointer-events:none;
  border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(45deg)}
.cform select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.fld--chk{gap:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;padding:8px 14px;border:1.5px solid var(--blue-200);border-radius:10px;
  font-size:13px;line-height:1;color:var(--text);background:#fff;transition:background .15s,color .15s,border-color .15s}
.chip:hover span{border-color:var(--blue-500)}
.chip input:checked+span{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--blue-500);outline-offset:2px}
.agree{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--ink)}
.agree input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;flex:none;position:relative;cursor:pointer;background:#fff;transition:all .2s var(--ease)}
.agree input:checked{background:var(--blue-500);border-color:var(--blue-500)}
.agree input:checked::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.fld__err{font-size:12px;color:#C21807;display:none}
.fld.is-err .fld__err{display:block}
.fld.is-err input,.fld.is-err textarea,.fld.is-err select{border-color:#C21807}
.cform__done{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(26px,3.2vw,40px)}
.cform__done h3{margin-top:16px;font-size:clamp(18px,2vw,23px);font-weight:700}
.cform__done p{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--text-sub)}
.cform__again{margin-top:20px;padding:11px 20px;border:1.5px solid var(--blue-200);border-radius:var(--r-btn);font-size:12.5px;font-weight:700;color:var(--blue-600);transition:border-color .25s}
.cform__again:hover{border-color:var(--blue-500)}

/* ============================================================
   FOOTER（帯色）
   ============================================================ */
.ftr{background:var(--base-2);color:var(--on-dark);padding:clamp(44px,5vw,72px) 0 30px;border-top:1px solid var(--line-dark)}
.ftr__top{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);padding-bottom:clamp(30px,5vh,48px);border-bottom:1px solid var(--line-dark)}
.ftr__top>div:first-child{flex:1 1 300px;min-width:260px;max-width:420px}
.ftr__col{flex:1 1 150px;min-width:140px}
.ftr .hdr__logo{position:static;height:auto;padding:0}
.ftr .hdr__logo b{color:var(--on-dark)}
.ftr .hdr__logo b i{color:var(--blue-600)}
/* ヘッダーは紺のままなので -dark 版。フッターは白い帯になったので明るい面用のマークに差し替える */
.ftr .hdr__logo .mark{background-image:url("/assets/img/marks/os.svg")}
.ftr__cap{margin-top:16px;font-size:14.5px;font-weight:700;line-height:2.1}
.ftr__co{margin-top:14px;font-size:11px;line-height:2;color:var(--on-dark-sub);max-width:34em}
.ftr__col h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600);font-weight:400}
.ftr__col ul{list-style:none;margin-top:10px}
.ftr__col a{display:block;padding:6px 0;font-size:13px;color:var(--on-dark);transition:color .2s}
.ftr__col a:hover{color:var(--blue-600)}
.ftr__bt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:20px;flex-wrap:wrap;
  font-size:12px;color:var(--on-dark-sub)}
.ftr__bt a:hover{color:var(--ink)}

/* ============================================================
   子LP
   ============================================================ */
.sub-hero{background:linear-gradient(180deg,#F2F6FC 0%,#F8FAFD 55%,var(--base) 100%);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(104px,14vh,150px) 0 clamp(40px,6vh,64px)}
.sub-hero__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 88% 0%,#E2ECFA 0%,rgba(226,236,250,0) 100%);opacity:.85}
/* 2026-09-24: 人物イラスト1枚を右カラムに追加。左は見出し群(head)と本文+ボタン(body)の
   2ブロックのまま、右は絵(art)が2行分を通しで占める。1080px以下は1カラムに畳み、
   絵はh1の直後（本文の前）に来る順番で積む */
.sub-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,56px);align-items:end}
/* 絵のあるサブヒーロー（prepare/prelaunch/after）だけ領域指定。404・privacy・resources は従来の2カラムのまま */
.sub-hero__in--art{grid-template-areas:"head art" "body art"}
.sub-hero__head{grid-area:head}
.sub-hero__body{grid-area:body}
.sub-hero__art{grid-area:art;display:block;width:100%;height:auto;align-self:end}
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-sub)}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;opacity:.5}
/* 大きな番号は淡い青。本文の2〜3倍＋イタリック */
.sub-hero__no{margin:10px 0 6px;font-family:var(--f-en);font-style:italic;font-weight:800;font-size:clamp(72px,11vw,140px);line-height:.82;letter-spacing:-.04em;color:var(--blue-600);opacity:.34}
.sub-hero h1{font-weight:900;font-size:clamp(25px,3.4vw,44px);line-height:1.42;word-break:keep-all;overflow-wrap:anywhere}
.sub-hero h1 em{font-style:normal;color:var(--blue-600)}
.sub-hero__en{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:12px}
.sub-hero__tx{color:var(--on-dark-sub);font-size:14.5px;line-height:2;max-width:34em}
.sub-hero__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pain{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px}
.pain b{display:block;font-family:var(--f-en);font-style:italic;font-weight:800;font-size:40px;line-height:.9;letter-spacing:-.02em;color:var(--pc,var(--blue-500))}
.pain h3{margin-top:12px;font-size:16px;font-weight:700;line-height:1.55}
.pain p{margin-top:11px;font-size:13.2px;line-height:1.9;color:var(--text-sub)}
.pain__fix{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.6px;line-height:1.8;color:var(--ink)}
.pain__fix b{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--blue-600);margin-bottom:5px}

.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mod{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.mod:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mod__no{display:block;font-family:var(--f-en);font-style:italic;font-weight:800;font-size:44px;line-height:.9;
  color:var(--pc,var(--blue-500));letter-spacing:-.02em}
.mod h3{margin-top:14px;font-size:17px;font-weight:700;line-height:1.55}
.mod__en{margin-top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.mod p{margin-top:12px;font-size:13.3px;line-height:1.9;color:var(--text-sub)}
.mod__out{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.mod__out span{font-family:var(--f-mono);font-size:10px;padding:4px 8px;border-radius:2px;background:#fff;border:1px solid var(--ink);color:var(--ink)}

.scope-box{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.scope-box__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--card-2)}
.scope-box__h span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sub)}
.scope-box__h b{font-size:14.5px;font-weight:700;color:var(--ink)}
.scope-cols{display:grid;grid-template-columns:1fr 1fr}
.scope-cols ul{list-style:none;padding:6px 20px 18px}
.scope-cols ul:first-child{border-right:1px solid var(--line)}
.scope-cols li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);font-size:13.2px;line-height:1.75;position:relative}
.scope-cols li:last-child{border-bottom:0}
.scope-cols li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:2px;background:var(--blue-500);border-radius:2px}

/* 資料ダウンロード（子LP）＝白いカード */
.dl{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,52px);align-items:center;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow);padding:clamp(24px,3.4vw,42px)}
.dl .eyebrow{color:var(--blue-600)}
.dl .eyebrow::before{background:var(--blue-600)}
.dl__doc{position:relative}
.dl__sheet{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:22px 20px;transform:rotate(-2deg)}
.dl__sheet+.dl__sheet{position:absolute;inset:0;transform:rotate(2.5deg) translate(10px,10px);z-index:-1;opacity:.6}
.dl__sheet .bar{height:8px;width:52px;background:var(--blue-500);border-radius:3px}
.dl__sheet h4{margin-top:14px;font-size:15px;font-weight:700;line-height:1.5}
.dl__sheet .rows{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.dl__sheet .rows i{display:block;height:6px;background:var(--line);border-radius:3px}
.dl__sheet .rows i:nth-child(2){width:88%}
.dl__sheet .rows i:nth-child(4){width:72%}
.dl__sheet .rows i:nth-child(5){width:90%}
.dl__meta{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.dl__meta span{font-family:var(--f-mono);font-size:10px;color:var(--text);background:#fff;border:1px solid var(--line);padding:4px 8px;border-radius:2px}
.dl h2{font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.5}
.dl__lead{margin-top:14px;font-size:13.8px;line-height:1.95;color:var(--text-sub)}
.dl__list{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:8px}
.dl__list li{position:relative;padding-left:20px;font-size:13.2px;line-height:1.8}
.dl__list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;background:var(--blue-500);border-radius:2px}
.dlform{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlform .fld--full{grid-column:1/-1}
.dlform .btn{grid-column:1/-1}
.dlform input[type=text],.dlform input[type=email],.dlform input[type=tel]{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-family:var(--f-jp);font-size:15px;line-height:1.7;padding:12px 14px;transition:border-color .2s}
.dlform input:focus{outline:2px solid var(--blue-100);outline-offset:0;border-color:var(--blue-500)}
.dlform .docpick{grid-column:1/-1}
.docpick{margin-top:8px;border:1px solid var(--ink);border-radius:3px;background:#fff}
.docpick__grp{border-bottom:1px solid var(--line)}
.docpick__grp:last-child{border-bottom:0}
.docpick__grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-size:13.5px;font-weight:700;color:var(--ink)}
.docpick__grp>summary::-webkit-details-marker{display:none}
.docpick__grp>summary::after{content:"+";font-family:var(--f-mono);font-size:17px;font-weight:400;line-height:1;color:var(--text-sub)}
.docpick__grp[open]>summary::after{content:"–"}
.docpick__list{padding:0 16px 13px;display:flex;flex-direction:column}
.docpick__row{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;font-size:13px;line-height:1.6;color:var(--ink);border-top:1px solid var(--line);cursor:pointer}
.docpick__row:first-child{border-top:0}
.docpick__row input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--blue-500)}
.dl__done{border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;background:var(--card-2);color:var(--ink)}
.dl__done b{display:block;font-size:16px;font-weight:700}
.dl__done p{margin-top:10px;font-size:13.2px;line-height:1.9;color:var(--text-sub)}
.dl__done p a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.dl__done .btn{margin-top:16px}
.dl__done[hidden]{display:none}
.dlform[hidden]{display:none}
.dl__more{margin-top:16px;font-size:12.6px}
.dl__more a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pager a{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:7px;transition:box-shadow .3s,transform .3s}
.pager a:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pager a.is-next{text-align:right;align-items:flex-end}
.pager em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.pager b{font-size:15.5px;font-weight:700}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hdr{height:58px;padding:0 16px;gap:14px}
  .hdr__nav{position:fixed;inset:58px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);border-bottom:1px solid var(--line-navy);padding:8px 20px 20px;display:none}
  body.nav-open .hdr__nav{display:flex}
  body.nav-open .hdr{background:var(--navy)}
  .hdr__nav a{font-size:16px;padding-block:13px;border-bottom:1px solid var(--line-navy)}
  .hdr__nav .nav-cta{display:block;border-bottom:0;color:var(--blue-200);font-weight:700}
  /* 業界別：モバイルは常に9業界を展開して並べる（入れ子の開閉は付けない） */
  .hdr__dd{position:static}
  .hdr__dd::before{display:none}
  .hdr__ddbtn::after{display:none}
  .hdr__ddmenu{
    position:static;margin-top:0;padding:0 0 4px;display:block;
    background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
  }
  .hdr__ddgrp{padding:8px 0 0}
  .hdr__ddgrp p{font-size:11.5px;color:rgba(255,255,255,.6);margin-bottom:2px;padding-left:14px}
  .hdr__ddgrp a{font-size:15px;padding:9px 0 9px 14px;color:var(--on-navy)}
  .hdr__acts .btn{display:none}
  .hdr__acts .btn.keep{display:inline-flex}
  .hdr__logo{position:relative;z-index:2}
  .hdr__burger{display:block;z-index:2}
  .agents,.stages,.reason,.facts,.mods,.dlcards{grid-template-columns:1fr 1fr}
  .svgrid,.mkgrid{grid-template-columns:repeat(2,1fr)}
  .cta__grid,.sub-hero__in,.dl{grid-template-columns:1fr}
  .sub-hero__in--art{grid-template-areas:"head" "art" "body"}
  .sub-hero__art{align-self:center}
  .hero__claim{grid-template-columns:1fr}
  .ftr__top>div:first-child{flex:1 1 100%;max-width:none}
}
@media (max-width:768px){
  .sub-hero__art{width:min(100%,420px);margin-inline:auto}
}
@media (max-width:760px){
  :root{--pad:18px}
  .hdr{gap:10px}
  .hdr__logo{gap:7px}
  .hdr__logo b{font-size:16px}
  .hdr__acts .btn.keep{padding:10px 12px;font-size:12px}
  .hdr__acts .btn.keep .arw{display:none}
  .agents,.stages,.reason,.facts,.mods,.dlcards,.pains,.pager,.cform__row,.ph__inner,.scope-cols,.dlform{grid-template-columns:1fr}
  .svgrid,.mkgrid{grid-template-columns:1fr}
  .scope-cols ul:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .ph__btn{grid-template-columns:36px 1fr 20px}
  .ph__stage{display:none}
  .ph__inner{margin-left:0}
  .pager a.is-next{text-align:left;align-items:flex-start}
  .ftr__col{flex:1 1 44%}
  .dlband{flex-direction:column;align-items:flex-start}
  .dlband__acts{width:100%}
  .dlband__acts .btn{width:100%}
}

/* ============================================================
   ARTICLES — 一覧
   ============================================================ */
.arts-hero__in{position:relative;z-index:2}
.arts-hero h1{font-weight:900;font-size:clamp(27px,3.8vw,48px);line-height:1.42;margin-top:14px;word-break:keep-all;overflow-wrap:anywhere}
.arts-hero h1 em{font-style:normal;color:var(--blue-600)}
.arts-hero__tx{margin-top:18px;color:var(--on-dark-sub);font-size:14.5px;line-height:2;max-width:38em}
.arts-hero__stat{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-dark)}
.arts-hero__stat div{display:flex;align-items:baseline;gap:8px}
.arts-hero__stat b{font-family:var(--f-en);font-weight:800;font-size:26px;color:var(--on-dark);line-height:1}
.arts-hero__stat span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-sub)}

/* 絞り込み：ep.css の .uc__tab と同じ作り（白＋青線、選択中はベタ塗り） */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filters button{padding:11px 18px;border:1.5px solid var(--blue-200);border-radius:var(--r-btn);font-size:13px;font-weight:700;line-height:1;
  color:var(--blue-700);background:#fff;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.filters button:hover{background:var(--blue-50);border-color:var(--blue-500)}
.filters button.on{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.filters button i{font-style:normal;font-family:var(--f-mono);font-size:10px;opacity:.7;margin-left:6px}

.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.artcard{display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s;position:relative;overflow:hidden}
.artcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.artcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.artcard:hover::before{transform:scaleX(1)}
.artcard[hidden]{display:none}
.artcard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.artcard__cat{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--ink);padding:5px 9px;border-radius:2px;line-height:1}
.artcard__no{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:34px;color:var(--blue-500);line-height:.9;letter-spacing:-.02em}
.artcard h3{margin-top:15px;font-size:16px;font-weight:700;line-height:1.62}
.artcard p{margin-top:11px;font-size:12.8px;line-height:1.9;color:var(--text-sub)}
.artcard__meta{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--text-sub)}
.artcard__meta i{font-style:normal;width:3px;height:3px;border-radius:50%;background:var(--line)}
.artgrid__more{margin-top:26px;display:flex;justify-content:center}
.artgrid__none{padding:40px 0;text-align:center;color:var(--on-dark-sub);font-size:13.5px}

/* ============================================================
   ARTICLES — 記事本文
   ============================================================ */
.art-hero{background:linear-gradient(180deg,#F2F6FC 0%,#F8FAFD 55%,var(--base) 100%);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(100px,13vh,140px) 0 clamp(34px,5vh,52px)}
.art-hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at 90% 0%,#E2ECFA 0%,rgba(226,236,250,0) 100%);opacity:.85}
.art-hero__in{position:relative;z-index:2;max-width:46em}
.art-hero__cat{margin:16px 0 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.art-hero h1{font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.48;word-break:keep-all;overflow-wrap:anywhere}
.art-hero h1 em{font-style:normal;color:var(--blue-600)}
.art-hero__tx{margin-top:18px;color:var(--on-dark-sub);font-size:14.5px;line-height:2}
.art-hero__meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-dark);display:flex;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-sub)}
.art-hero__meta i{font-style:normal;opacity:.5}

.artbody{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(28px,4vw,58px);align-items:start}
.artside{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.toc{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px}
.toc b{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)}
.toc ol{list-style:none;counter-reset:t;margin-top:12px}
.toc li{counter-increment:t}
.toc a{display:grid;grid-template-columns:22px 1fr;gap:6px;padding:7px 0;font-size:12.6px;line-height:1.7;color:var(--text-sub);transition:color .25s}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-en);font-style:italic;font-weight:800;font-size:17px;color:var(--blue-600);padding-top:1px;line-height:1}
.toc a:hover{color:var(--blue-600)}
.toc a:hover::before{color:var(--blue-500)}
/* 脇のCTA：濃紺のベタ塗り＋白文字。地に溶けないよう縁を1本 */
.sidecta{background:var(--blue-800);color:#fff;border-radius:var(--r);padding:22px 20px 24px;position:relative;overflow:hidden;outline:1px solid var(--line-dark)}
.sidecta>*{position:relative}
.sidecta b{display:block;font-size:15px;font-weight:700;line-height:1.6}
.sidecta p{margin-top:9px;font-size:12.4px;line-height:1.85;color:var(--blue-100)}
.sidecta .btn{margin-top:16px;width:100%;padding:12px 18px;font-size:13px;--bg:#fff;--fg:var(--blue-700)}

/* 記事本文は白地に墨文字。表・箇条書き・注記は白いカード＋罫線で区切る */
.prose{max-width:44em;font-size:15.5px;line-height:2.05;color:var(--on-dark)}
.prose>*+*{margin-top:20px}
.prose h2{margin-top:52px;font-size:clamp(19px,2.2vw,25px);font-weight:900;line-height:1.55;padding-left:16px;
  border-left:4px solid var(--blue-500);scroll-margin-top:92px;color:var(--on-dark)}
.prose h3{margin-top:36px;font-size:16.5px;font-weight:700;line-height:1.65;color:var(--on-dark)}
.prose h3::before{content:"";display:inline-block;width:9px;height:2px;background:var(--blue-600);border-radius:2px;
  vertical-align:middle;margin-right:9px;margin-top:-2px}
.prose p{color:var(--on-dark)}
.prose strong{font-weight:700;color:var(--on-dark);background:linear-gradient(transparent 64%,rgba(232,85,45,.35) 64%)}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{list-style:none;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.prose li{position:relative;padding:8px 0 8px 22px;font-size:13.8px;line-height:1.9}
.prose li+li{border-top:1px solid var(--line)}
.prose li a{color:var(--blue-600)}
.prose li strong{color:var(--ink)}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:2px;background:var(--blue-500);border-radius:2px}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o;padding-left:38px}
.prose ol li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:4px;
  font-family:var(--f-en);font-style:italic;font-size:22px;font-weight:800;color:var(--blue-500);line-height:1;letter-spacing:-.02em}
.prose .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;background:#fff;color:var(--ink)}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);line-height:1.75;vertical-align:top}
.prose th{background:var(--card-2);font-weight:700;font-size:12.3px;white-space:nowrap}
.prose td:first-child{font-weight:700}
.prose tr:last-child td{border-bottom:0}
.prose table a{color:var(--blue-600)}
.prose table strong{color:var(--ink);background:none}
.prose .note{background:#fff;color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--blue-500);border-radius:0 var(--r) var(--r) 0;padding:18px 20px;font-size:13.4px;line-height:1.95}
.prose .note b{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:7px}
.prose .note a{color:var(--blue-600)}
.prose .note strong{color:var(--ink)}
.prose .quote{border-left:3px solid var(--blue-500);padding:2px 0 2px 20px;font-size:14px;line-height:2;color:var(--on-dark-sub)}
.prose code{font-family:var(--f-mono);font-size:.9em;background:var(--card-2);border:1px solid var(--line);padding:.1em .45em;border-radius:3px}
.prose pre{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;overflow-x:auto;font-size:13px;line-height:1.8}
.prose pre code{background:none;padding:0}
.prose>h2:first-child{margin-top:0}

.artend{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dark);max-width:44em}
.artend__dis{font-size:12.2px;line-height:1.9;color:var(--on-dark-sub)}
.artend__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.artend__tags span{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;padding:5px 10px;border-radius:2px;border:1px solid var(--line-dark);color:var(--on-dark)}

.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.artpager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}

@media (max-width:1080px){
  .artgrid,.related{grid-template-columns:1fr 1fr}
  .artbody{grid-template-columns:minmax(0,1fr)}
  .artside{position:static;flex-direction:row;flex-wrap:wrap}
  .toc,.sidecta{flex:1 1 300px}
  .prose{max-width:none}
}
@media (max-width:760px){
  .artgrid,.related,.artpager{grid-template-columns:1fr}
  .artside{flex-direction:column}
  .prose{font-size:14.8px}
  .prose h2{margin-top:40px}
}

/* ---- form backend states ---- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form__err{margin-top:14px;font-size:14px;color:#C21807;font-weight:700;line-height:1.8}
.form__err[hidden]{display:none}
.cform.is-busy .btn,.dlform.is-busy .btn{opacity:.6;cursor:progress}

/* ---- thanks panel next action / consent link ---- */
.done__next{margin-top:22px}
.agree a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.agree a:hover{color:var(--blue-600)}

/* ============================================================
   v7 — 追加コンポーネント（白いカード群）
   ============================================================ */
.uimock{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-dark);overflow:hidden}
.uimock__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card-2)}
.uimock__bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.uimock__bar span{margin-left:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--text-sub)}

.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prob{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.prob__ic{width:44px;height:44px;border-radius:4px;background:var(--ink);display:grid;place-items:center;color:#fff}
.prob__ic svg{width:22px;height:22px}
.prob h3{margin-top:14px;font-size:15.5px;font-weight:700;line-height:1.6}
.prob p{margin-top:9px;font-size:12.8px;line-height:1.85;color:var(--text-sub)}

/* 資料一覧（download.html「ほかの資料」— フェーズ別は流れ、エージェント別は罫線一覧） */
.docflow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.docflow__step{position:relative;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 24px}
.docflow__step:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;translate:0 -50%;width:9px;height:9px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:translateY(-50%) rotate(45deg);z-index:1}
.docflow__step img{width:100%;height:auto;aspect-ratio:900/636;object-fit:contain;border-radius:6px;margin-top:14px;border:1px solid var(--line)}
.docflow__step h3{margin-top:14px;font-size:14.2px;font-weight:700;line-height:1.6}
.docflow__step p{margin-top:8px;font-size:12.4px;line-height:1.85;color:var(--text-sub)}
.docflow__step .btn{margin-top:16px;width:100%;justify-content:center}
@media(max-width:760px){
  .docflow{grid-template-columns:1fr}
  .docflow__step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-11px;transform:translateX(-50%) rotate(135deg)}
}

.doclist{margin-top:4px;border-top:1px solid var(--line)}
.doclist__row{display:grid;grid-template-columns:40px 1fr auto;gap:18px;align-items:center;padding:20px 6px;border-bottom:1px solid var(--line)}
.doclist__no{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:1.9em;line-height:1;color:var(--blue-500)}
.doclist__body b{display:block;font-size:14.5px;font-weight:700;line-height:1.6}
.doclist__body p{margin-top:6px;font-size:12.4px;line-height:1.8;color:var(--text-sub)}
.doclist__meta{margin-top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--text-sub)}
@media(max-width:640px){
  .doclist__row{grid-template-columns:32px 1fr}
  .doclist__row .btn{grid-column:1/-1;margin-top:12px;width:100%;justify-content:center}
}

.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.prod:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.prod__top{display:flex;align-items:center;gap:12px}
.prod__ic{width:46px;height:46px;flex:none;border-radius:4px;background:var(--ink);display:grid;place-items:center;color:#fff}
.prod__ic svg{width:24px;height:24px}
.prod__no{margin-left:auto;font-family:var(--f-en);font-style:italic;font-size:30px;letter-spacing:-.02em;color:var(--blue-600);font-weight:800;line-height:1}
.prod h3{margin-top:14px;font-size:16.5px;font-weight:700;line-height:1.5}
.prod__en{margin-top:4px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.prod p{margin-top:11px;font-size:12.9px;line-height:1.85;color:var(--text-sub)}
.prod__do{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.prod__do span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;padding:4px 8px;border-radius:2px;background:#fff;border:1px solid var(--line);color:var(--text)}
.prod .agent__go{margin-top:auto;padding-top:16px}

.diagram{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,34px);box-shadow:var(--shadow)}
.diagram svg{width:100%;height:auto}
.diagram__cap{margin-top:14px;text-align:center;font-size:12px;color:var(--text-sub)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:st}
.step{position:relative;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.step::before{counter-increment:st;content:"0" counter(st);display:block;font-family:var(--f-en);font-style:italic;font-weight:800;
  font-size:58px;color:var(--blue-500);line-height:.85;letter-spacing:-.03em}
.step b{display:block;margin-top:12px;font-size:14.5px;font-weight:700;line-height:1.55}
.step p{margin-top:8px;font-size:12.4px;line-height:1.8;color:var(--text-sub)}
.step em{display:block;margin-top:10px;font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--blue-600)}
.step:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;margin-top:-4px;z-index:2;
  border-top:2px solid var(--blue-600);border-right:2px solid var(--blue-600);transform:rotate(45deg)}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba__col{border-radius:var(--r);padding:26px 24px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.ba__col--after{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}
.ba__ttl{font-size:13px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.ba__ttl i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;padding:4px 8px;border-radius:2px;background:var(--ink);color:#fff}
.ba__col--after .ba__ttl i{background:#fff;color:var(--blue-600)}
.ba ul{list-style:none;margin-top:16px;display:flex;flex-direction:column}
.ba li{padding:12px 0 12px 24px;position:relative;font-size:13.2px;line-height:1.8;border-top:1px solid var(--line)}
.ba__col--after li{border-top-color:rgba(255,255,255,.25)}
.ba__col:not(.ba__col--after) li{color:var(--text-sub)}
.ba__col:not(.ba__col--after) li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:2px;background:var(--line);border-radius:2px}
.ba__col--after li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.2)}
.ba__col--after li::after{content:"";position:absolute;left:4px;top:21px;width:3.5px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}

.mod__ic{width:40px;height:40px;border-radius:4px;background:var(--ink);display:grid;place-items:center;color:#fff}
.mod__ic svg{width:20px;height:20px}

.rel-agents{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel-agent{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.rel-agent:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.rel-agent em{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.rel-agent b{font-size:13.8px;font-weight:700;line-height:1.5}
.rel-agent span{font-size:11.8px;color:var(--text-sub);line-height:1.7}

@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr}
  .hero__vis{max-width:560px}
  .probs,.prods,.steps,.rel-agents{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .probs,.prods,.steps,.ba,.rel-agents{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
}

/* ============================================================
   v8 — 5色システム・ひし形マーク
   ============================================================ */
.prod{--pc:var(--blue-500);border-top:3px solid var(--pc)}
.prod--m{--pc:var(--c-market)}
.prod--r{--pc:var(--c-reg)}
.prod--p{--pc:var(--c-partner)}
.prod--a{--pc:var(--c-ana)}
.prod--g{--pc:var(--c-geo)}
.prod__cloud{position:relative;width:52px;height:52px}
.prod__cloud::before{content:"";position:absolute;left:0;top:4px;width:44px;height:44px;background:var(--pc);transform:rotate(45deg);border-radius:4px}
.prod h3{color:var(--ink);font-weight:900}
.prod .agent__go{color:var(--pc)}
.prod:hover{border-color:var(--pc)}
.prod p{min-height:auto}

/* オレンジの下線強調（任意の場所で使う） */
.u-acc{box-shadow:inset 0 -2px 0 var(--accent);padding-bottom:1px}

/* 課題カード＝イラスト主体 */
.prob__art{aspect-ratio:900/636;background:var(--du-ground);border-radius:10px;overflow:hidden;margin-bottom:14px}
.prob__art img{width:100%;height:100%;object-fit:contain}

/* 図解の色分け用 */
.dg-m{color:var(--c-market)}.dg-r{color:var(--c-reg)}.dg-p{color:var(--c-partner)}.dg-a{color:var(--c-ana)}.dg-g{color:var(--c-geo)}

/* 無料・ページ数のバッジ（ベタ塗り＋白文字、角丸3px） */
.speed{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:13px;color:#fff;
  background:var(--accent-deep);border-radius:3px;padding:8px 14px;line-height:1}
.speed i{font-style:normal;color:#fff;font-family:var(--f-en);font-weight:800;letter-spacing:.08em}

/* ============================================================
   v9 — 折りたたみ・強調整理
   ============================================================ */
.fold summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--ink);padding:9px 16px;border:1.5px solid var(--ink);border-radius:3px;
  background:#fff;transition:border-color .25s}
.fold summary:hover{border-color:var(--blue-500)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"＋";font-weight:700;color:var(--blue-600)}
.fold[open] summary::after{content:"－"}
.fold>*:not(summary){margin-top:14px}
.fld--chk .fold summary{font-size:12.5px}
.fld--chk .fold summary i{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;background:var(--text-sub);color:#fff;border-radius:3px;font-weight:700}

/* 子LPヒーローのイメージパネル */
.sub-hero__vis{margin-top:24px}
.sub-hero__vis svg{width:100%;max-width:440px;height:auto;filter:drop-shadow(0 14px 30px rgba(8,43,102,.14))}

/* 問い合わせ左のマスコット */
.cta__mascot{margin-top:30px}
.cta__mascot img{width:150px;height:auto}


/* ============================================================
   2026-08-25 指摘対応：箇条書き→図解、ピル/薄塗り禁止、担当エージェント表示
   ============================================================ */
.ba__flow{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ba__flow div{position:relative;border:0;border-radius:6px;padding:12px 11px;background:var(--card-2);color:var(--ink)}
.ba__flow div i{display:block;font-style:italic;font-family:var(--f-en);font-size:30px;font-weight:800;line-height:.9;letter-spacing:-.02em;color:var(--blue-600);background:none}
.ba__flow div b{display:block;margin-top:4px;font-size:12.4px;line-height:1.5}
.ba__flow div p{margin-top:5px;font-size:11.5px;line-height:1.7;color:var(--text-sub)}
.ba__flow div:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:7px;height:7px;margin-top:-4px;z-index:2;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);background:transparent}
.ba__col--after .ba__flow div{background:rgba(255,255,255,.14);color:#fff}
.ba__col--after .ba__flow div p{color:rgba(255,255,255,.85)}
.ba__col--after .ba__flow div i{display:block;color:#fff;opacity:.5;background:none!important;box-shadow:none;padding:0;width:auto;height:auto}
.ba__col--after .ba__flow div:not(:last-child)::after{border-color:#fff}

.pain__art{aspect-ratio:4/3;background:#fff;border-radius:10px;overflow:hidden;margin-bottom:14px}
.pain__art img{width:100%;height:100%;object-fit:cover}
.mod__art{float:right;width:160px;aspect-ratio:4/3;margin:0 0 10px 16px;background:#fff;border-radius:10px;overflow:hidden}
.mod__art img{width:100%;height:100%;object-fit:cover}
.mod::after{content:"";display:block;clear:both}

.ph__inner--one{grid-template-columns:1fr}
.ph__agt{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--on-dark-sub)}
.ph__agt>span:first-child{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ph__stage .agt{margin-left:6px}
/* 担当エージェントの札：白地＋墨線、左端だけエージェント色 */
.agt{display:inline-block;font-family:var(--f-jp);font-size:11.5px;font-weight:700;letter-spacing:.02em;line-height:1;text-transform:none;
  padding:6px 9px 6px 8px;border:1px solid #fff;border-left-width:4px;border-radius:2px;background:#fff;color:var(--ink)}
.agt--m{border-left-color:var(--c-market)}.agt--r{border-left-color:var(--c-reg)}.agt--p{border-left-color:var(--c-partner)}
.agt--a{border-left-color:var(--c-ana)}.agt--g{border-left-color:var(--c-geo)}
@media (max-width:760px){
  .ba__flow{grid-template-columns:1fr}
  .ba__flow div:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-7px;margin:0 0 0 -4px;transform:rotate(135deg)}
  .mod__art{float:none;width:100%;margin:8px 0 0}
}
.dl__fold{margin-top:16px}
.dl__flow{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl__flow div{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:12px 12px;background:#fff;color:var(--ink)}
.dl__flow div i{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:700;background:var(--ink);color:#fff;border-radius:3px}
.dl__flow div b{font-size:12.6px;font-weight:500;line-height:1.7}
@media (max-width:760px){.dl__flow{grid-template-columns:1fr}}

/* ---- v10: Before/After のイラスト ---- */
.ba__art{margin-top:16px;height:120px;display:flex;align-items:center;justify-content:center;gap:14px;
  background:#fff;border-radius:8px;padding:10px}
.ba__art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ba__col--after .ba__art{background:#fff}

/* ---- v10: 子LP Before/After（対応スコープの置き換え） ---- */
.gain{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gain__col{border-radius:var(--r);padding:26px 24px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.gain__col--after{background:var(--pc,var(--blue-500));color:#fff;border-color:transparent}
.gain__ttl{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:900}
.gain__ttl i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;padding:4px 8px;border-radius:2px;background:var(--ink);color:#fff}
.gain__col--after .gain__ttl i{background:#fff;color:var(--pc,var(--blue-600))}
.gain__art{margin-top:16px;height:132px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:12px}
.gain__col--after .gain__art{background:#fff}
.gain__art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gain__list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.gain__list div{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:8px}
.gain__list em{font-style:italic;font-family:var(--f-en);font-weight:800;font-size:26px;line-height:.95;letter-spacing:-.02em;color:var(--blue-600)}
.gain__list b{font-size:13.4px;font-weight:700;line-height:1.6;display:block}
.gain__list p{font-size:11.8px;line-height:1.7;margin-top:3px;color:var(--text-sub)}
.gain__col--after .gain__list p{color:rgba(255,255,255,.88)}
.gain__col--after .gain__list em{color:#fff;opacity:.6}
@media (max-width:760px){.gain{grid-template-columns:1fr}}

/* mod カードは番号が大きくなったので余白調整 */
.mod h3{margin-top:6px}
.pain h3{margin-top:6px}
.rs h3{margin-top:8px}

/* ============================================================
   v11 — 検索 / 国旗 / 視線誘導の三角 / 体験セクション
   ============================================================ */
.ressearch{position:relative;margin-bottom:14px;max-width:520px}
.ressearch input{width:100%;padding:13px 16px 13px 42px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--f-jp);font-size:14px;color:var(--ink);background:#fff;transition:border-color .25s}
.ressearch input::placeholder{color:#8B93A1}
.ressearch input:focus{outline:2px solid var(--blue-200);outline-offset:0;border-color:var(--blue-500)}
.ressearch__ic{position:absolute;left:15px;top:50%;width:14px;height:14px;margin-top:-8px;border:2px solid var(--text-sub);border-radius:50%;pointer-events:none}
.ressearch__ic::after{content:"";position:absolute;right:-5px;bottom:-4px;width:7px;height:2px;background:var(--text-sub);transform:rotate(45deg)}
.resnone{padding:44px 0;text-align:center;color:var(--on-dark-sub);font-size:13.5px}
.resnone[hidden]{display:none}

/* 国旗 */
.flag{display:inline-block;width:20px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:7px;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(8,43,102,.12) inset}
.mk b .flag{margin-right:8px}

/* Before→After の視線誘導（縦長・横短の三角） */
.ba,.gain{position:relative}
.ba__arrow,.gain__arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:34px;height:56px;display:grid;place-items:center;background:#fff;border-radius:4px}
.ba__arrow::before,.gain__arrow::before{content:"";width:0;height:0;
  border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:16px solid var(--accent)}
.gain__arrow{background:#fff}
@media (max-width:760px){
  .ba__arrow,.gain__arrow{width:56px;height:34px}
  .ba__arrow::before,.gain__arrow::before{border-left:20px solid transparent;border-right:20px solid transparent;
    border-top:16px solid var(--accent);border-bottom:0}
}

/* 選ばれる理由（進め方の3択） */
.why__grid{display:grid;grid-template-columns:1fr 1fr 1.24fr;gap:16px;align-items:start}
.why__col{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px}
.why__col--os{background:var(--blue-800);border-color:var(--blue-800);color:#fff;outline:1px solid var(--line-dark);
  margin-top:-22px;padding:34px 26px 28px;box-shadow:var(--shadow-dark)}
.why__no{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:40px;line-height:.9;
  letter-spacing:-.02em;color:var(--blue-600)}
.why__col--os .why__no{font-size:48px;color:var(--accent)}
.why__ttl{font-size:16px;font-weight:700;margin-top:8px;line-height:1.6}
.why__col--os .why__ttl{font-size:19px}
.why__art{margin:16px 0 18px}
.why__art svg{width:100%;height:auto}
.why__pt{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:baseline;
  padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.8}
.why__col--os .why__pt{border-top-color:var(--line-dark)}
.why__pt i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:var(--text-sub);white-space:nowrap;transform:translateY(-1px)}
.why__col--os .why__pt i{color:var(--blue-200)}
.why__pt b{font-weight:700}
.why__pt span{color:var(--text-sub)}
.why__col--os .why__pt span{color:var(--blue-100)}
@media (max-width:980px){
  .why__grid{grid-template-columns:1fr}
  .why__col--os{margin-top:0}
  .why__no{font-size:34px}
  .why__col--os .why__no{font-size:40px}
}

/* 体験セクション（ep.css の .uc と同じ作り） */
.uc{background:var(--base-2);color:var(--on-dark);padding-block:clamp(56px,7.5vh,92px)}
.uc h2{text-align:center;font-weight:900;font-size:clamp(22px,2.8vw,34px);line-height:1.5}
.uc__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 22px}
.uc__tab{padding:12px 22px;border-radius:var(--r-btn);font-size:13.5px;font-weight:700;color:var(--blue-700);
  background:#fff;border:1.5px solid var(--blue-200);transition:background .25s,color .25s,border-color .25s}
.uc__tab:hover{background:var(--blue-50)}
.uc__tab.is-on{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.uc__panel{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,3vw,40px);background:#fff;color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow);border-radius:calc(var(--r) + 6px);padding:clamp(20px,2.6vw,32px)}
.uc__panel[hidden]{display:none}
.uc__steps{display:flex;flex-direction:column;gap:8px;position:relative}
.ucstep{border-radius:14px;background:var(--card-2);overflow:hidden;transition:background .25s}
.ucstep.is-on{background:#fff;box-shadow:0 0 0 1.5px var(--uc,var(--blue-500)) inset}
.ucstep__btn{width:100%;display:grid;grid-template-columns:32px 1fr 20px;gap:12px;align-items:center;
  padding:15px 16px;text-align:left}
.ucstep__no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-family:var(--f-en);font-weight:800;font-size:14px;line-height:1;
  background:#fff;color:var(--text-sub);box-shadow:0 0 0 1.5px var(--line) inset}
.ucstep.is-on .ucstep__no{background:var(--uc,var(--blue-500));color:#fff;box-shadow:none}
.ucstep.is-done .ucstep__no{background:var(--uc,var(--blue-500));color:transparent;box-shadow:none;position:relative}
.ucstep.is-done .ucstep__no::after{content:"";position:absolute;left:10px;top:7px;width:5px;height:10px;
  border-right:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(42deg)}
.ucstep__ttl{font-size:14.5px;font-weight:700;line-height:1.6}
.ucstep.is-on .ucstep__ttl{color:var(--uc,var(--blue-600))}
.ucstep__ico{justify-self:end;position:relative;width:14px;height:14px;opacity:.5}
.ucstep__ico::before,.ucstep__ico::after{content:"";position:absolute;background:var(--text);border-radius:2px}
.ucstep__ico::before{top:6px;left:0;width:14px;height:2px}
.ucstep__ico::after{left:6px;top:0;width:2px;height:14px;transition:transform .3s var(--ease)}
.ucstep.is-on .ucstep__ico{opacity:0}
.ucstep__body{height:0;overflow:hidden;transition:height .4s var(--ease)}
.ucstep__inner{padding:0 16px 16px 60px;font-size:13.5px;line-height:1.95;color:var(--text-sub)}
.uc__vis{background:var(--card-2);border-radius:var(--r);display:grid;place-items:center;padding:18px;min-height:320px}
.uc__vis svg{width:100%;height:auto;max-height:340px}
.uc__vis>div{display:none}
.uc__vis>div.is-on{display:block;width:100%}
@media (max-width:900px){.uc__panel{grid-template-columns:1fr}.uc__vis{min-height:240px;order:-1}}

.dlcard__mascot{position:relative;display:block;width:52px;height:52px}
.dlcard__mascot::before{content:"";position:absolute;left:0;top:4px;width:44px;height:44px;background:var(--pc,var(--blue-500));transform:rotate(45deg);border-radius:4px}

.dl__cover{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);display:block}
.dl__doc{display:flex;flex-direction:column}

.dlcard__illus{aspect-ratio:4/3;background:var(--du-ground);border-radius:10px;overflow:hidden}
.dlcard__illus img{width:100%;height:100%;object-fit:cover}

/* 背景画像は既定で繰り返さない（タイル化事故の再発防止） */
[style*="background-image"]{background-repeat:no-repeat}

/* 子LPヒーローのマーク（エージェント色のひし形） */
.sub-hero__mascot{position:relative;display:block;width:64px;height:64px;margin-bottom:6px}
.sub-hero__mascot::before{content:"";position:absolute;left:0;top:5px;width:54px;height:54px;background:var(--pc,var(--blue-500));transform:rotate(45deg);border-radius:6px}

/* ============================================================
   /download — 5分でわかる Tempura OS（資料請求）
   ============================================================ */
.dlhero{background:linear-gradient(180deg,#F2F6FC 0%,#F8FAFD 55%,var(--base) 100%);color:var(--on-dark);position:relative;overflow:hidden;
  padding:clamp(104px,14vh,150px) 0 clamp(44px,6vh,72px)}
.dlhero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:center}
.dlhero h1{margin-top:16px;font-weight:900;font-size:clamp(28px,3.9vw,50px);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.dlhero h1 em{font-style:normal;color:var(--blue-600)}
.dlhero__lead{margin-top:20px;max-width:30em;color:var(--on-dark-sub);font-size:15px;line-height:2}
.dlhero__acts{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
/* 表紙は白地の絵なので、白地の上では罫線で輪郭を出す */
.dlhero__cover img{width:100%;height:auto;border-radius:var(--r);outline:1px solid var(--line);box-shadow:var(--shadow)}
.dlhero .speed{margin-top:18px}
@media (max-width:900px){.dlhero__in{grid-template-columns:1fr}.dlhero__cover{order:-1;max-width:460px}}

/* ===== fog → answer（ペイン→丸ごとお任せ）2026-08-28 ===== */
.fog{display:flex;align-items:center;gap:36px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:38px 44px}
.fog__art{flex:0 0 185px}
.fog__art img{width:100%;height:auto}
.fog__q{display:inline-block;clear:both;float:left;font-size:13.2px;font-weight:700;color:var(--text-sub);transform:rotate(var(--r1,0deg));margin-bottom:7px;letter-spacing:.02em}
.fog__voice{clear:both;padding-top:12px;font-size:clamp(21px,2.6vw,30px);font-weight:900;line-height:1.65;color:var(--ink)}
.ansr{margin-top:48px;text-align:center}
.ansr__pre{display:inline-block;font-weight:900;font-size:14px;letter-spacing:.14em;color:var(--blue-600);border-bottom:2px solid var(--blue-200);padding-bottom:4px}
.ansr__h{margin-top:16px;font-size:clamp(23px,3.1vw,38px);font-weight:900;line-height:1.55}
.ansr__h em{font-style:normal;color:var(--blue-600)}
.ansr__sub{margin:16px auto 0;max-width:36em;color:var(--on-dark-sub);font-size:14px;line-height:2}
.phtrail{margin-top:32px;display:flex;align-items:stretch;gap:10px;text-align:left}
.phst{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 16px;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.phst:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.phst img{height:70px;width:auto}
.phst__ph{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--blue-600)}
.phst strong{font-size:15px;font-weight:900;line-height:1.55}
.phst__ags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.phst .agt{border-color:var(--ink)}
.phtrail__arw{flex:0 0 auto;align-self:center;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid var(--ink)}
@media (max-width:760px){
  .fog{flex-direction:column;align-items:flex-start;padding:26px 20px;gap:18px}
  .fog__art{flex-basis:auto;width:130px}
  .phtrail{flex-direction:column}
  .phtrail__arw{transform:rotate(90deg);align-self:center}
}

/* ============================================================
   AIに相談 — 右下に常駐するボタン（ep.css と同じ作り）
   マークアップは assets/js/main.js の末尾が差し込む（全ページ共通）
   ============================================================ */
.aic{position:fixed;right:18px;bottom:18px;z-index:700}
.aic>summary{list-style:none;cursor:pointer}
.aic>summary::-webkit-details-marker{display:none}
.aic>summary:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}

.aic__btn{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px 11px 13px;border-radius:var(--r-btn);
  background:var(--blue-500);color:#fff;
  box-shadow:var(--shadow);outline:1px solid var(--line);
  transition:transform .25s var(--ease),background .2s;
}
.aic__btn:hover{transform:translateY(-2px)}
.aic[open] .aic__btn{background:var(--blue-600)}

/* プロダクトのマーク（ひし形）をそのままアイコンにする。汎用のAIアイコンは使わない */
.aic__cloud{position:relative;display:block;width:18px;height:18px;flex:none}
.aic__cloud::before{content:"";position:absolute;left:1px;top:1px;width:16px;height:16px;background:#fff;border-radius:3px;transform:rotate(45deg)}

.aic__lb{font-weight:700;font-size:13px;letter-spacing:.05em;white-space:nowrap;line-height:1}

.aic__pop{
  position:absolute;right:0;bottom:calc(100% + 10px);
  width:min(330px,calc(100vw - 36px));
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px 16px 13px;
  animation:aicIn .18s var(--ease);
}
@keyframes aicIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.aic__h{font-weight:700;font-size:13.5px;line-height:1.7;letter-spacing:.01em;margin-bottom:12px}
.aic__h::after{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-top:9px}

.aic__list{border-top:1px solid var(--line)}
.aic__row{display:flex;align-items:center;gap:12px;padding:11px 6px 11px 2px;
  border-bottom:1px solid var(--line);transition:background .18s var(--ease)}
.aic__row:hover{background:var(--card-2)}
.aic__row:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px}
.aic__i{width:22px;height:22px;flex:none;display:grid;place-items:center}
.aic__i svg{width:20px;height:20px}
.aic__n{font-family:var(--f-en);font-weight:700;font-size:13.5px;letter-spacing:.005em;color:var(--text)}

/* 矢印は LP の .btn .arw と同じ作り（既製アイコンを持ち込まない） */
.aic__go{margin-left:auto;flex:none;position:relative;width:14px;height:1.5px;
  background:var(--line);transition:width .2s var(--ease),background .2s}
.aic__go::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1.5px solid var(--line);border-right:1.5px solid var(--line);
  transform:rotate(45deg);transition:border-color .2s}
.aic__row:hover .aic__go{width:20px;background:var(--ink)}
.aic__row:hover .aic__go::after{border-color:var(--ink)}

.aic__note{font-size:11px;line-height:1.75;color:var(--text-sub);margin-top:11px}

@media(max-width:640px){
  .aic{right:14px;bottom:14px}
  .aic__btn{padding:10px 13px 10px 11px;gap:8px}
  .aic__lb{font-size:12px}
  .aic__pop{width:min(330px,calc(100vw - 28px));padding:14px 14px 12px}
}
@media(prefers-reduced-motion:reduce){
  .aic__btn,.aic__pop,.aic__row,.aic__go{transition:none;animation:none}
}

/* ---------- 資料ダウンロード（main.js 注入。.aic の直上、/download を除く） ---------- */
.dlc{position:fixed;right:18px;bottom:72px;z-index:690;width:222px}
.dlc__x{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:2px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;padding:0}
.dlc__x::before,.dlc__x::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--ink)}
.dlc__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.dlc__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dlc__x:hover{border-color:var(--blue-500)}
.dlc__link{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow);padding:9px;transition:transform .2s var(--ease)}
.dlc__link:hover{transform:translateY(-2px)}
.dlc__cover{width:72px;height:51px;object-fit:contain;border-radius:2px;flex:none;outline:1px solid var(--line)}
.dlc__body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.dlc__tag{align-self:flex-start;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;padding:2px 6px;border-radius:2px;line-height:1.5}
.dlc__ttl{font-size:12px;line-height:1.4;font-weight:700;color:var(--ink)}
.dlc__go{margin-top:auto;width:28px;height:28px;border-radius:50%;background:var(--blue-500);position:relative;flex:none}
.dlc__go::before{content:"";position:absolute;left:50%;top:7px;width:1.6px;height:9px;background:#fff;transform:translateX(-50%)}
.dlc__go::after{content:"";position:absolute;left:50%;top:12.5px;width:5.5px;height:5.5px;
  border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translateX(-50%) rotate(45deg)}
/* ep.css の .mcta と同じ判定幅（768px）に揃える。子LPには帯は出ないが、
   両ファイルで同じCSSにしておく。 */
@media(max-width:768px){.dlc{display:none}}
@media(prefers-reduced-motion:reduce){.dlc__link{transition:none}}

/* ===== Gemini生成イラスト（_illus-gen → assets/img/illus/gen）2026-08-30 ===== */
/* エージェントカードの図版。ひし形マークの代わりに、そのエージェント固有の絵を置く */
.prod__art{display:block;margin:-6px 0 2px;height:104px}
.prod__art img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
/* 4:3 の絵を横長の枠に収める。周囲の余白は絵の側に含まれている */
.phst img{height:82px;width:auto;object-fit:contain}
.ba__art img{max-height:100%}
@media (max-width:900px){.prod__art{height:88px}}

/* 子LPの図版枠を、gen イラスト（4:3・余白込みの構図）に合わせて広げる。
   旧 Loose Drawing は正方形だったため、同じ高さだと絵が一回り小さく見える */
/* 2026-09-06 ダークUI絵に差し替え：枠は aspect-ratio 4/3 ＋ 地色 --du-ground（上の定義が正） */

/* ダークUIイラスト（地色 #0B1220）を紺の地に直接置くときは、縁を1本引く */
img[src*="/assets/img/ui/"]{border-radius:var(--r)}
.pain__art img,.mod__art img{outline:0;border-radius:8px}

/* ============================================================
   印刷（社内回覧用）：白地・墨色に戻す
   ============================================================ */
@media print{
  /* 2026-09-16 の反転で画面側が既に白地・墨文字になったので、地のトークンは上書きしない。
     帯（--base-2 #F2F6FC）だけ紙で無駄にインクを使うので白へ戻す */
  :root{--base-2:#fff}
  body{background:#fff;color:#0F172A}
  .hdr,.aic,.mcta,.dlc{display:none!important}
  .hero,.sub-hero,.art-hero,.dlhero,.cta,.sec--mist,.sec--dark,.ftr,.uc{background:#fff!important;color:#0F172A!important}
  .hero__bg,.sub-hero__bg,.art-hero__bg{display:none}
  .rv{opacity:1!important;transform:none!important}
  .ph__panel,.qa__panel,.ucstep__body{height:auto!important;overflow:visible!important}
  .ph__ttl b,.qa__btn b,.prose,.prose h2,.prose h3,.prose p,.ph__inner li,.ftr,.ftr__col a,.hdr__logo b{color:#0F172A!important}
  .ph__ico i,.qa__ico i{background:#0F172A}
  .prose a{color:#094BC2}
  .fact,.sidecta,.why__col--os,.ba__col--after,.gain__col--after{background:#fff!important;color:#0F172A!important;border:1px solid #C6D2DF}
  .btn,.hero__acts,.sub-hero__acts,.dlhero__acts,.dlband__acts{display:none!important}
  .pain,.mod,.dlcard,.artcard,.toc,.dl,.ph,.qa{break-inside:avoid}
}

/* ---- 資料3点セット（download.html、2026-09-06） ---- */
.prob__no{display:block;font-family:var(--f-en);font-style:italic;font-weight:800;font-size:2.4em;line-height:.9;color:var(--blue-500);margin-bottom:6px} /* 番号は本文の2〜3倍＋イタリック */
.dl__files{display:grid;gap:8px;margin-top:16px}
.dl__files .btn{margin-top:0;justify-content:flex-start}

/* ヒーロー表示中は資料DLバナーを隠す（main.js が body に dlc-hold を付け外しする） */
.dlc{transition:opacity .24s ease,visibility .24s}
.dlc-hold .dlc{opacity:0;visibility:hidden;pointer-events:none}

/* 本番で4pxの横はみ出し（疑似要素由来）が出て横スクロールバーが見えていた（2026-09-24 以前から）。
   hidden ではなく clip にする：スクロール容器を作らないので .hero__pin の sticky を壊さない */
html{overflow-x:clip}