/* AI導入顧問LP — 白地＋藍1色。影・グラデーションなし。全て左揃え。カードは価格の3枚だけ。 */
@layer tokens, reset, base, layout, components, print;

@layer tokens{
:root{
  --c-bg:#FFFFFF;
  --c-accent:#17457E;
  --c-ink:#222222;
  --c-line:#E2E6EC;
  --f:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","BIZ UDPGothic","Yu Gothic Medium",sans-serif;
  --fs-xs:.8rem; --fs-s:.9rem; --fs-m:1rem; --fs-l:1.25rem; --fs-xl:1.5rem;
  --fs-h2:clamp(1.6rem,3.4vw,2.375rem); --fs-h1:clamp(2rem,4.2vw,3rem);
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem;
  --section-y:clamp(4rem,9vw,7.5rem);
  --w-page:70rem; --w-text:47.5rem; --w-wide:60rem; --gutter:clamp(1.25rem,4vw,2.5rem);
  --r:4px; --dur:.2s;
}
}

@layer reset{
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}

@layer base{
body{background:var(--c-bg);color:var(--c-ink);font-family:var(--f);font-size:var(--fs-m);font-weight:400;line-height:1.9;letter-spacing:.02em;text-align:left;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;line-break:strict;text-spacing-trim:space-first}
h1,h2,h3{font-weight:700;line-height:1.35;letter-spacing:.01em;font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase}
h1{font-size:var(--fs-h1);line-height:1.3}
h2{font-size:var(--fs-h2);max-width:var(--w-wide)}
h3{font-size:var(--fs-l)}
p{text-wrap:pretty}
a{color:var(--c-accent);text-decoration-thickness:1px;text-underline-offset:.22em}
strong,.strong{font-weight:700}
.ph{display:inline-block}
.num{font-variant-numeric:tabular-nums lining-nums}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
}

@layer layout{
.container{width:min(100% - var(--gutter)*2,var(--w-page));margin-inline:auto}
.section{padding-block:var(--section-y);border-top:1px solid var(--c-line)}
.section h2+.sub{margin-top:var(--sp-2)}
.sub{font-size:var(--fs-l);line-height:1.7;font-weight:700;color:var(--c-accent);max-width:var(--w-text)}
.col{max-width:var(--w-text);margin-top:var(--sp-6)}
.col>*+*{margin-top:var(--sp-3)}
.col--tight,h3+.col{margin-top:var(--sp-3)}
h3+.chart{margin-top:var(--sp-3)}
.section h3{margin-top:var(--sp-8)}
.note{font-size:var(--fs-s);line-height:1.8;max-width:var(--w-text);margin-top:var(--sp-2)}
}

@layer components{
.skip{position:absolute;left:-999px;top:0;background:var(--c-accent);color:var(--c-bg);padding:.5em 1em}
.skip:focus{left:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.header__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-1) var(--sp-3);min-height:4rem;padding-top:env(safe-area-inset-top)}
.header__name{font-weight:700;color:var(--c-ink);text-decoration:none}
.header__link{font-size:var(--fs-s);font-weight:700;min-height:2.75rem;display:inline-flex;align-items:center}

.btn{display:inline-flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:flex-start;text-align:left;min-height:3.25rem;padding:.7em 1.4em;border:1px solid var(--c-accent);border-radius:var(--r);background:var(--c-accent);color:var(--c-bg);font-weight:700;line-height:1.5;text-decoration:none;cursor:pointer;transition:opacity var(--dur)}
.btn:hover{opacity:.85}
.btn--line{background:var(--c-bg);color:var(--c-accent)}
.btn--block{display:flex;width:100%}
.btn:disabled{opacity:.35;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:.5em 0;color:var(--c-accent);text-decoration:underline;text-underline-offset:.22em;cursor:pointer;min-height:2.75rem}

/* ① ヒーロー: SPは H1→リード→CTA主→時刻表→CTA副 の順 */
.hero{padding-block:clamp(2rem,5vw,4rem) var(--section-y)}
.hero__grid{display:flex;flex-direction:column;gap:var(--sp-3)}
.hero__left,.hero__cta{display:contents}
.hero__eyebrow{order:1;font-size:var(--fs-xs);font-weight:700;color:var(--c-accent);line-height:1.6}
.hero h1{order:2}
.hero__lead{order:3}
.hero__lead>p+p{margin-top:var(--sp-2)}
.hero__cta-main{order:4}
.hero__table{order:5}
.hero__cta-sub{order:6}
.hero__micro{order:7;font-size:var(--fs-s);line-height:1.8}
@media (min-width:60rem){
  .hero__grid{display:grid;grid-template-columns:56fr 44fr;gap:clamp(2rem,4vw,4rem);align-items:start}
  .hero__left{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4)}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
  .hero__grid .hero__left>*,.hero__grid .hero__cta>*{order:0}
  .hero h1{margin-top:calc(var(--sp-1)*-1)}
}
.tt{border-top:2px solid var(--c-accent);border-bottom:1px solid var(--c-accent);max-height:24rem;overflow-y:auto}
@media (min-width:60rem){.tt{max-height:none;overflow:visible}}
.tt__tbl{width:100%;border-collapse:collapse;font-size:var(--fs-s);line-height:1.6}
.tt__tbl caption{text-align:left;font-weight:700;color:var(--c-accent);padding:.7em 0;font-size:var(--fs-s)}
.tt__tbl th,.tt__tbl td{padding:.55em 0;border-top:1px solid var(--c-line);vertical-align:top;text-align:left;font-weight:400}
.tt__tbl th{width:4.2em;color:var(--c-accent);font-weight:700;white-space:nowrap}
.tt__tbl .is-human th,.tt__tbl .is-human td{border-top:1px solid var(--c-accent);font-weight:700;color:var(--c-ink)}
.st{font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.st::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.4em;border:1px solid var(--c-accent);border-radius:50%}
.st--on{color:var(--c-accent)}
.st--on::before{background:var(--c-accent)}

/* ② 録画 */
.recs{max-width:var(--w-text);margin-top:var(--sp-6);display:grid;gap:var(--sp-8)}
.section .rec h3{margin-top:0}
.rec video,.rec__empty{width:100%;aspect-ratio:16/9;border:1px solid var(--c-line);border-radius:var(--r);margin-top:var(--sp-2);background:var(--c-bg)}
.rec__empty{display:flex;align-items:flex-end;padding:var(--sp-3);font-size:var(--fs-s)}
.rec figcaption{margin-top:var(--sp-2)}

/* ③⑧⑩ 番号つきの段落(罫線区切り) */
.points{list-style:none;counter-reset:pt;max-width:var(--w-text);margin-top:var(--sp-6);border-bottom:1px solid var(--c-line)}
.points>li{counter-increment:pt;display:grid;grid-template-columns:2.2rem 1fr;column-gap:var(--sp-1);padding-block:var(--sp-3);border-top:1px solid var(--c-line)}
.points>li::before{content:counter(pt) ".";grid-row:1/span 9;font-weight:700;font-size:var(--fs-l);line-height:1.35;color:var(--c-accent);font-variant-numeric:tabular-nums}
.points>li>*{grid-column:2}
.section .points h3{margin-top:0}
.points p{margin-top:var(--sp-1)}
.points .note{margin-top:var(--sp-1)}

/* ④ 診断 */
.diag{border-top:2px solid var(--c-accent);padding-top:var(--sp-3)}
.diag__progress{font-size:var(--fs-s);font-weight:700;color:var(--c-accent)}
.q legend{font-size:var(--fs-xl);font-weight:700;line-height:1.5;margin-bottom:var(--sp-2)}
.q legend .num{color:var(--c-accent)}
.js .q:not(.is-current){display:none}
.q+.q{margin-top:var(--sp-6)}
.js .q+.q{margin-top:0}
.opt-row{display:flex;gap:.8em;align-items:flex-start;min-height:3.25rem;padding:.75em 0;border-top:1px solid var(--c-line);cursor:pointer}
.q{border-bottom:1px solid var(--c-line)}
.opt-comment{display:none;width:100%;min-height:3rem;margin:0 0 var(--sp-2);padding:.6em .9em;border:1px solid var(--c-ink);border-radius:var(--r);background:var(--c-bg);font-size:1rem}
.opt-row:has(input:checked)+.opt-comment{display:block}
.sim{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding-block:var(--sp-2)}
.sim ol{padding-left:1.4em;margin-top:var(--sp-1)}
.sim li+li{margin-top:.4em}
.sim .note{margin-top:var(--sp-1)}
.opt-row input,.field--radio input,.field--check input{accent-color:var(--c-accent);width:1.15rem;height:1.15rem;margin:.4em 0 0;flex:none}
.opt-row:has(input:checked){font-weight:700;color:var(--c-accent)}
.diag__nav{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.diag__nav #diag-next{order:-1}
html:not(.js) .diag__nav{display:none}
.diag__results{margin-top:0}
.diag__results:focus{outline:none}
.result{border-top:2px solid var(--c-accent);padding-top:var(--sp-3);margin-top:var(--sp-6)}
.section .result h3{margin-top:0;font-size:var(--fs-xl);color:var(--c-accent)}
.result>*+*{margin-top:var(--sp-2)}

/* 表 */
.tbl{width:100%;max-width:var(--w-wide);border-collapse:collapse;margin-top:var(--sp-6);font-size:var(--fs-s);line-height:1.75}
h3+.tbl{margin-top:var(--sp-3)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:1em 1.25em 1em 0;border-top:1px solid var(--c-line)}
.tbl thead th{border-top:2px solid var(--c-accent);color:var(--c-accent);font-weight:700;white-space:nowrap;padding-block:.7em}
.tbl tbody th{font-weight:700;width:24%}
.tbl tbody tr:last-child>*{border-bottom:1px solid var(--c-line)}
.tbl--works tbody th{width:22%}
.tbl--works td:last-child{width:42%}
.tbl--roles{max-width:var(--w-text)}
.tbl--roles tbody th{width:auto;font-weight:400}
.tbl--roles td{width:13em;white-space:nowrap}
.tbl--roles .is-on th{font-weight:700;color:var(--c-accent)}
@media (max-width:47.99rem){
  .tbl--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl--stack,.tbl--stack tbody,.tbl--stack tr,.tbl--stack th,.tbl--stack td{display:block;width:100%}
  .tbl--stack tbody{border-top:2px solid var(--c-accent)}
  .tbl--stack tr{padding-block:var(--sp-2);border-bottom:1px solid var(--c-line)}
  .tbl--stack tbody th,.tbl--stack td{border:0!important;padding:0;width:100%}
  .tbl--stack tbody th{font-size:var(--fs-m)}
  .tbl--stack td{margin-top:.6em}
  .tbl--stack td::before{content:attr(data-l);display:block;font-size:var(--fs-xs);font-weight:700;color:var(--c-accent)}
  .tbl--roles td{width:8.5em;white-space:normal}
  .tbl--roles .st{white-space:normal}
}

/* ⑥ グラフ */
.chart{margin-top:var(--sp-6);max-width:var(--w-wide)}
.chart__scroll{overflow-x:auto;border-top:2px solid var(--c-accent);border-bottom:1px solid var(--c-line);padding-block:var(--sp-2)}
.chart__svg{min-width:40rem;width:100%;font-family:var(--f)}
.c-grid{stroke:var(--c-line);stroke-width:1}
.c-mark{stroke:var(--c-accent);stroke-width:1;stroke-dasharray:2 4}
.c-tick{font-size:12px;fill:var(--c-ink);font-variant-numeric:tabular-nums}
.c-label{font-size:13px;fill:var(--c-accent)}
.c-label--b{font-weight:700}
.c-cost{fill:none;stroke:var(--c-accent);stroke-width:4;stroke-linejoin:round}
.c-b3{fill:none;stroke:var(--c-accent);stroke-width:1.5}
.c-b2{fill:none;stroke:var(--c-accent);stroke-width:1.5;stroke-dasharray:6 5}
.c-dot{fill:var(--c-bg);stroke:var(--c-accent);stroke-width:1.5}

/* ⑦ 価格カード(カード型はここだけ) */
.cards{display:grid;gap:var(--sp-3);margin-top:var(--sp-6);max-width:var(--w-wide)}
@media (min-width:56rem){.cards{grid-template-columns:repeat(3,1fr);max-width:none}}
.card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3);border:1px solid var(--c-line);border-top:2px solid var(--c-accent);border-radius:var(--r)}
.card__no{font-size:var(--fs-xs);font-weight:700;color:var(--c-accent);margin-bottom:calc(var(--sp-1)*-1)}
.section .card h3{margin-top:0;font-size:var(--fs-l)}
.card__price{font-size:var(--fs-xl);font-weight:700;line-height:1.4;color:var(--c-accent)}
.card__price span{font-size:var(--fs-s)}
.card ul{list-style:none;font-size:var(--fs-s);line-height:1.8;flex:1}
.card li{padding-block:.7em;border-top:1px solid var(--c-line)}

/* ⑨ 会社概要 */
.company{max-width:var(--w-text);margin-top:var(--sp-6);font-size:var(--fs-s)}
.company>div{display:grid;grid-template-columns:6em 1fr;gap:var(--sp-2);padding-block:.8em;border-top:1px solid var(--c-line)}
.company>div:last-child{border-bottom:1px solid var(--c-line)}
.company dt{font-weight:700}

/* ⑪ FAQ(全文展開)・フォーム */
.faq>div{padding-block:var(--sp-3);border-top:1px solid var(--c-line)}
.faq>div:last-child{border-bottom:1px solid var(--c-line)}
.faq.col>*+*{margin-top:0}
.faq dt{font-size:var(--fs-l);font-weight:700;line-height:1.5;display:grid;grid-template-columns:1.6em 1fr}
.faq dt::before{content:"Q.";color:var(--c-accent)}
.faq dd{margin-top:var(--sp-1);padding-left:2em}
.form{display:grid;gap:var(--sp-3)}
.form.col>*+*{margin-top:0}
.field{display:grid;gap:.4em}
.field>label,.field>legend{font-weight:700;font-size:var(--fs-s)}
.req,.opt{margin-left:.6em;font-size:var(--fs-xs);font-weight:700}
.req{color:var(--c-accent)}
.opt{font-weight:400}
.field input:not([type=radio],[type=checkbox]),.field textarea,.field select{width:100%;min-height:3.25rem;padding:.6em .9em;border:1px solid var(--c-ink);border-radius:var(--r);background:var(--c-bg);font-size:1rem}
.field textarea{min-height:8rem;line-height:1.7}
.field :is(input,textarea,select):focus-visible{outline-offset:1px}
.hint{font-size:var(--fs-xs)}
.field--radio label,.field--check label{display:flex;gap:.8em;align-items:flex-start;min-height:2.75rem;padding-block:.35em;cursor:pointer}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}
.form__error{font-weight:700}
.form__done{border-top:2px solid var(--c-accent);padding-top:var(--sp-3)}

.footer{padding-block:var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom));border-top:1px solid var(--c-line);font-size:var(--fs-s)}
.footer p{max-width:var(--w-text)}
.footer p+p{margin-top:var(--sp-1)}

/* 下層(プライバシーポリシー・404) */
.doc{padding-block:var(--sp-8) var(--section-y)}
.doc h1{font-size:var(--fs-h2)}
.doc h2{font-size:var(--fs-l);margin-top:var(--sp-6)}
.doc p,.doc ul{max-width:var(--w-text);margin-top:var(--sp-2)}
.doc ul{padding-left:1.4em}

/* 公開前レビュー用: URLに ?review=1 を付けると仮置きの数字に印が付く */
.review [data-kari]{outline:2px dashed var(--c-accent);outline-offset:2px}
.review [data-kari]::after{content:"［仮置き：" attr(data-kari) "］";font-size:var(--fs-xs);font-weight:700;color:var(--c-accent)}
}

@layer print{
@media print{.header__link,.skip,.btn,.diag,.form{display:none!important}body{font-size:10.5pt}.section{padding-block:1.5rem;break-inside:auto}.tt{max-height:none;overflow:visible}}
}