@charset "utf-8";

/* ============================================================
   GlobalBox — service site
   配色はブランドガイドライン Ver.3.3（2026-08-14）の実測値。
   正本 https://share.bad-corp.com/brand_guideline/corporate/
   ============================================================ */

:root{
  --blue:#004da0;
  --blue-light:#4593d0;
  --blue-pale:#bbdff6;
  --cta:#BF5700;
  --cta-hover:#AD4E00;
  --cta-active:#9E4700;
  --text:#1A1A1A;
  --text-2:#4A4A4A;
  --text-3:#4F4F4F;
  --bg:#ffffff;
  --bg-2:#f5f7fc;
  --bg-warm:#fbf5ed;
  --line:#e2e6ee;
  --line-2:#cfd6e4;
  --ok:#2C7035;
  --ng:#8a3a38;
  --err:#d93938;
  --maxw:1080px;
  --narrow:820px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
  font-feature-settings:"palt";
}
img{max-width:100%;height:auto}
a{color:var(--blue)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.narrow{max-width:var(--narrow);margin-inline:auto}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.brand{display:flex;flex-direction:column;justify-content:center;line-height:1.25;text-decoration:none;color:var(--text);min-height:48px}
.brand strong{font-size:20px;font-weight:700;letter-spacing:.02em;color:var(--blue)}
.brand span{font-size:11px;letter-spacing:.14em;color:var(--text-3)}
.head-cta{
  display:inline-flex;align-items:center;background:var(--cta);color:#fff;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.04em;padding:12px 24px;border-radius:4px;
  line-height:1.4;min-height:44px;white-space:nowrap;
}
.head-cta:hover{background:var(--cta-hover)}
.head-cta:active{background:var(--cta-active)}

/* スキップリンク（キーボード利用者が毎ページのメニューを飛ばして本文へ行けるように。WCAG 2.4.1） */
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:#fff;color:var(--blue);padding:10px 16px;border:2px solid var(--blue);border-radius:4px;text-decoration:none;font-weight:700}
.skip:focus{top:8px}

/* グローバルナビ（2026-09-26 サイト化）。PCは横並び、960px以下はボタンで開閉。
   JS無効時は .js が付かないので、開閉せず常に表示される（どの環境でも全ページへ辿れる） */
.gnav{display:flex;align-items:center;gap:22px}
.gnav ul{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.gnav ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.02em;border-bottom:2px solid transparent}
.gnav ul a:hover{color:var(--blue)}
.gnav ul a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
.nav-toggle{display:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--blue);background:#fff;border:1px solid var(--blue);border-radius:4px;padding:8px 14px;min-height:44px;cursor:pointer}
.nav-toggle[aria-expanded="true"]{background:var(--blue);color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--bg-warm);padding:76px 0 68px;border-bottom:1px solid var(--line)}
.lead-label{
  display:inline-block;font-size:12px;letter-spacing:.16em;color:var(--blue);
  border:1px solid var(--blue);border-radius:2px;padding:4px 12px;margin:0 0 24px;line-height:1.6;
}
/* FVは文章＋図の2カラム。図は主張そのもの（購買プロセスのどこで勝負が決まるか）を描く */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,460px);gap:48px;align-items:center}
.hero__fig{margin:0;min-width:0}
/* インラインSVGにも当てる。<svg width="460"> の属性幅だけだと375pxで109pxはみ出す（2026-09-07 stg実測） */
.hero__fig svg,.hero__fig img{display:block;width:100%;height:auto}
.hero h1{font-size:clamp(25px,3.8vw,40px);line-height:1.55;margin:0 0 26px;font-weight:700;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{font-size:clamp(15px,1.6vw,17px);margin:0 0 12px;color:var(--text-2);max-width:46em}
.hero strong{color:var(--text)}
.hero .src{font-size:12px;color:var(--text-3);margin-top:22px;line-height:1.8}

/* ---------- section ---------- */
section{padding:68px 0}
section + section{border-top:1px solid var(--line)}
.sec-alt{background:var(--bg-2)}
.sec-warm{background:var(--bg-warm)}
/* 見出しの上に短い青いバー。テキストだけの縦並びにリズムを作る（装飾はこの1箇所に集約し、h2ごとのHTML変更を避ける） */
h2{font-size:clamp(21px,2.5vw,27px);line-height:1.6;margin:0 0 12px;font-weight:700;letter-spacing:.01em}
section h2::before{content:"";display:block;width:36px;height:3px;background:var(--blue);margin:0 0 14px;border-radius:2px}
h2 + .sub{color:var(--text-2);margin:0 0 34px;font-size:15px;max-width:46em}
h3{font-size:17px;line-height:1.7;margin:0 0 8px;font-weight:700}
p{margin:0 0 18px;max-width:46em}
p:last-child{margin-bottom:0}

/* ---------- problems ---------- */
.probs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:24px;margin:0;padding:0;list-style:none}
.prob{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.prob:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,77,160,.08);border-color:var(--blue-pale)}
.prob .n{display:block;font-size:12px;letter-spacing:.14em;color:var(--blue);margin:0 0 14px}
.prob .ico{margin-bottom:14px}
.prob p{font-size:14px;color:var(--text-2);margin:0;line-height:1.85}

/* ---------- example ---------- */
.ex{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;margin:0 0 20px;max-width:var(--narrow)}
.ex-row{display:grid;grid-template-columns:118px 1fr;border-top:1px solid var(--line)}
.ex-row:first-child{border-top:0}
.ex-k{background:var(--bg-2);padding:14px 16px;font-size:12px;letter-spacing:.06em;color:var(--text-3);line-height:1.7}
.sec-alt .ex-k{background:var(--bg-warm)}
.ex-v{padding:14px 16px;font-size:15px;line-height:1.8;word-break:break-word}
.ex-v code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:14px;background:var(--bg-2);padding:2px 6px;border-radius:3px;
}
.sec-alt .ex-v code{background:var(--bg-warm)}
.ex-bad code{color:var(--ng)}
.ex-good code{color:var(--ok)}
.note{font-size:14px;color:var(--text-2);line-height:1.9;max-width:46em}
.note code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:13px;background:#fff;border:1px solid var(--line);padding:1px 5px;border-radius:3px;
}

/* ---------- two columns ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:34px}
.col .ico{margin-bottom:12px}
.col h3{color:var(--blue)}
.col p{font-size:15px;color:var(--text-2);margin:0}

/* ---------- diagnosis 5 axes ---------- */
.axes{margin:0;padding:0;list-style:none;display:grid;gap:0;border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden}
.axis{display:grid;grid-template-columns:230px 1fr;border-top:1px solid var(--line)}
.axis:first-child{border-top:0}
.axis dt{padding:20px 22px 20px 58px;background:var(--bg-2);line-height:1.6;position:relative}
.axis dt .ico{position:absolute;left:22px;top:22px}
.sec-warm .axis dt{background:var(--bg-warm)}
.axis dt b{display:block;font-size:15px;font-weight:700;color:var(--blue)}
.axis dt span{display:block;font-size:12px;color:var(--text-3);letter-spacing:.02em;margin-top:2px}
.axis dd{margin:0;padding:20px 22px;font-size:14px;color:var(--text-2);line-height:1.85}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;margin:0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.step{padding:28px 24px;border-left:1px solid var(--line)}
.step:first-child{border-left:0}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;margin:0 0 12px;line-height:1}
.step h3{font-size:16px;margin:0 0 6px}
.step .price{font-size:13px;color:var(--blue);font-weight:700;margin:0 0 8px;letter-spacing:.02em}
.step p{font-size:14px;color:var(--text-2);margin:0;line-height:1.85}

/* ---------- price ---------- */
.price-lead{margin:0 0 28px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px;margin:0 0 28px;padding:0;list-style:none}
.plan{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 22px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,77,160,.08)}
.plan.is-rec{border-color:var(--blue);border-width:2px;position:relative}
.plan .tag{position:absolute;top:-11px;left:22px;background:var(--blue);color:#fff;font-size:11px;
  letter-spacing:.1em;padding:3px 12px;border-radius:2px;line-height:1.6}
.plan h3{font-size:16px;margin:0 0 4px}
.plan .hours{font-size:12px;color:var(--text-3);margin:0 0 14px;line-height:1.6}
.plan .amount{font-size:26px;font-weight:700;color:var(--text);line-height:1.3;margin:0 0 4px;letter-spacing:.01em}
.plan .amount small{font-size:13px;font-weight:400;color:var(--text-2);letter-spacing:0}
.plan .tax{font-size:12px;color:var(--text-3);margin:0 0 16px}
.plan p.desc{font-size:14px;color:var(--text-2);margin:0;line-height:1.85}

.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);margin:0 0 24px;font-size:15px}
.price-table th,.price-table td{border-top:1px solid var(--line);padding:15px 18px;text-align:left;line-height:1.75}
.price-table thead th{border-top:0;background:var(--bg-2);font-size:13px;letter-spacing:.04em;color:var(--text-3);font-weight:700}
.sec-warm .price-table thead th{background:var(--bg-warm)}
.price-table td.num{white-space:nowrap;font-weight:700}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.adhoc{border-left:3px solid var(--line-2);padding:2px 0 2px 18px;margin:0;font-size:14px;color:var(--text-2);line-height:1.9;max-width:46em}

/* ---------- target ---------- */
.target{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px}
.target div{border-left:3px solid var(--blue);padding:4px 0 4px 16px}
.target h3{font-size:15px;margin:0 0 4px}
.target p{font-size:14px;color:var(--text-2);margin:0}

/* ---------- faq ---------- */
.faq{margin:0;padding:0;border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{
  padding:20px 52px 20px 22px;font-size:15px;font-weight:700;cursor:pointer;position:relative;
  line-height:1.75;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{background:var(--bg-2)}
.faq .a{padding:0 22px 22px;font-size:14px;color:var(--text-2);line-height:1.9;margin:0}
.faq .a p{margin:0 0 12px;font-size:14px}
.faq .a p:last-child{margin:0}

/* ---------- form ---------- */
/* 版面はページに1つ。フォームも .wrap の左端に揃える（中央寄せにすると見出しとズレる） */
.form{max-width:var(--narrow)}
.form__row{margin:0 0 22px}
.form label.lb{display:block;font-size:14px;font-weight:700;margin:0 0 7px;line-height:1.7}
/* 必須の印は控えめに。CTAオレンジは送信ボタン（第一導線）のためだけに残す */
.form .req{display:inline-block;color:var(--text-3);font-size:11px;letter-spacing:.06em;
  margin-left:8px;line-height:1.6;vertical-align:1px;font-weight:400}
.form .req::before{content:"（"}
.form .req::after{content:"）"}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-2);border-radius:4px;background:#fff;
  font-family:inherit;font-size:16px;line-height:1.7;color:var(--text);
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form__hint{font-size:12px;color:var(--text-3);margin:6px 0 0;line-height:1.7}

.form-privacy{display:flex;align-items:flex-start;gap:12px;margin:0 0 22px}
.form-privacy input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:var(--blue)}
.form-privacy label{font-size:14px;line-height:1.7;color:var(--text-2)}
/* 同意文中のリンクはタップ領域を確保する（WCAG 2.5.8 最小24px） */
.form-privacy label a{display:inline-block;padding:4px 0;min-height:24px}

.bad-turnstile{margin:0 0 22px}
.ts-fail{background:var(--bg-warm);border:1px solid var(--line);border-radius:4px;padding:16px 18px;
  font-size:13px;color:var(--text-2);line-height:1.85;margin:0 0 22px}

.form__btnwrap{text-align:center}
.btn{
  display:inline-block;background:var(--cta);color:#fff;text-decoration:none;border:0;
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.04em;padding:17px 52px;text-align:center;
  border-radius:4px;line-height:1.6;min-height:52px;cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.btn:hover{background:var(--cta-hover);box-shadow:0 8px 18px rgba(0,77,160,.14);transform:translateY(-1px)}
.btn:active{background:var(--cta-active)}
.btn:disabled{background:var(--text-3);cursor:default}
.form__msg{margin:18px 0 0;padding:14px 16px;border-radius:4px;font-size:14px;line-height:1.8;text-align:left}
.form__msg.is-ng{background:#fdf1f1;border:1px solid var(--err);color:var(--err)}
.form__msg.is-ok{background:#f1f8f2;border:1px solid var(--ok);color:var(--ok)}

/* ---------- cta box ---------- */
.cta-box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px 32px;text-align:center;max-width:var(--narrow);margin-inline:auto}
.cta-box h2{margin-bottom:12px}
.cta-box p{margin-inline:auto;color:var(--text-2);font-size:15px}

/* ---------- 下層ページ（2026-09-26 サイト化で追加） ---------- */
/* MV：左にテキスト、右にイラスト（2026-09-26 五月女「テキストばかりで安っぽく見える」への対応）。
   背景はドット柄（右上・ゆっくり流れる）と淡い円（左下）。色はガイドラインVer.3.3のパレットだけを使う */
.page-head{position:relative;overflow:hidden;background:var(--bg-warm);padding:36px 0 48px;border-bottom:1px solid var(--line)}
.page-head::before{content:"";position:absolute;top:-40px;right:-40px;width:420px;height:300px;pointer-events:none;
  background-image:radial-gradient(var(--blue-pale) 1.6px,transparent 1.8px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);opacity:.9}
.page-head::after{content:"";position:absolute;left:-120px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:var(--blue-pale);opacity:.18;pointer-events:none}
.page-head .wrap{position:relative;z-index:1}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:44px;align-items:start}
/* 目次や表でテキスト側が長くなっても、イラストは見出しの横に置く（中央揃えだと見出しの横が空く） */
.page-head__fig{min-width:0;margin-top:-8px}
.page-head__fig .il{display:block;width:100%;height:auto}
/* 文章の少ないページ（料金・コラム一覧・FAQ・運営会社・お問い合わせ）はMVを低く。高さがイラストで決まっていたため、イラストと余白を小さくする */
.page-head--compact{padding:28px 0 32px}
.page-head--compact .page-head__grid{grid-template-columns:minmax(0,1fr) 220px;align-items:center}
.page-head--compact .page-head__fig{margin-top:0}
.page-head--compact .crumbs ol{margin-bottom:8px}
.page-head h1{font-size:clamp(23px,3.2vw,34px);line-height:1.55;margin:0 0 20px;font-weight:700;letter-spacing:.01em}
.page-head .prose p{color:var(--text-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 18px;padding:0;list-style:none;font-size:12px;color:var(--text-3);line-height:1.7}
/* リンクだけ上下に余白（押せる高さ24px）を付けたため、現在地の文字と高さがずれていた（2026-09-27 五月女指摘）。各項目を同じ高さの中央に揃える */
.crumbs li{display:inline-flex;align-items:center;min-height:24px}
.crumbs li + li::before{content:"／";margin:0 8px;color:var(--line-2)}
.crumbs a{display:inline-block;padding:5px 0;color:var(--text-3)}/* 押せる高さ24px以上（WCAG 2.5.8。/qc 実測で14pxだった） */
.catch{font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--blue);margin:0 0 18px;line-height:1.7}
.post__meta{font-size:13px;color:var(--text-3);margin:-8px 0 20px}

/* 本文（原稿の段落・箇条書き・表をそのまま流し込む器） */
.prose{margin:0 0 20px}
.prose:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em;max-width:46em}
.prose li{margin:0 0 8px}
.prose li:last-child{margin-bottom:0}
.prose code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:.9em;background:var(--bg-2);padding:1px 5px;border-radius:3px;word-break:break-word}
.prose .note{font-size:13px;color:var(--text-3)}
.prose + h3,.cta-row + h3,.faq + h3{margin-top:30px}
.sample{white-space:pre-wrap;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:13px;line-height:1.75;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:18px;margin:0;max-width:var(--narrow);overflow-x:auto}
.sec-alt .sample,.sec-alt .prose code{background:#fff}

/* 表（本文中の比較・料金・要点）。thead付きは列見出し、行頭thは行見出し */
.data-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);margin:0 0 20px;font-size:14px}
.data-table th,.data-table td{border-top:1px solid var(--line);padding:12px 16px;text-align:left;vertical-align:top;line-height:1.75}
.data-table thead th{border-top:0;background:var(--bg-2);font-size:13px;color:var(--text-3);font-weight:700}
.data-table tbody th{font-weight:700;white-space:nowrap}
.sec-alt .data-table thead th{background:var(--bg-warm)}
.prose .table-scroll{max-width:var(--narrow)}

/* 目次 */
.toc{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 22px;margin:8px 0 22px;max-width:var(--narrow)}
.toc__ttl{font-size:13px;font-weight:700;color:var(--text-3);margin:0 0 6px;letter-spacing:.06em}
.toc ol{margin:0;padding-left:1.4em;font-size:14px;line-height:1.9}
.toc a{display:inline-block;padding:6px 0}
/* 目次から飛んだ見出しが固定ヘッダーの下に潜らないように */
[id^="s"]{scroll-margin-top:96px}

/* 導線。オレンジ（.btn）は診断への導線だけ。金額はボタンに入れず直下に小さく（2026-09-26 五月女） */
.cta-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 28px;margin:24px 0 0}
.cta-main{display:flex;flex-direction:column;align-items:flex-start}
.btn-note{font-size:12px;color:var(--text-3);margin:8px 0 0;line-height:1.6}
.cta-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;list-style:none;align-self:center}
.more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--blue)}
.more::after{content:"→";margin-left:6px;transition:transform .2s ease}
.more:hover::after{transform:translateX(3px)}
/* 最後の導線：右側に地球の線画を薄く敷く（装飾。内容は持たない） */
.sec-final{position:relative;overflow:hidden;background:var(--bg-warm)}
.sec-final::after{content:"";position:absolute;right:-60px;top:50%;width:320px;height:320px;transform:translateY(-50%);pointer-events:none;opacity:.55;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23bbdff6' stroke-width='1.4'%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Cellipse cx='100' cy='100' rx='34' ry='80'/%3E%3Cpath d='M20 100h160M30 62h140M30 138h140'/%3E%3Cellipse cx='100' cy='100' rx='96' ry='26' stroke-dasharray='4 5' transform='rotate(-14 100 100)'/%3E%3C/svg%3E")}
.sec-final .wrap{position:relative;z-index:1}

/* 交互セクションの右上にドット（装飾） */
.sec-alt{position:relative;overflow:hidden}
.sec-alt::before{content:"";position:absolute;top:0;right:0;width:220px;height:160px;pointer-events:none;
  background-image:radial-gradient(var(--blue-pale) 1.5px,transparent 1.7px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(225deg,#000 20%,transparent 70%);mask-image:linear-gradient(225deg,#000 20%,transparent 70%)}
.sec-alt .wrap{position:relative;z-index:1}

/* 本文の小見出し：左に淡い青の線（本文との区切りをはっきりさせる） */
main section > .wrap > h3{padding-left:12px;border-left:3px solid var(--blue-light)}

/* ---------- イラストの動き（2026-09-26） ----------
   読み込み時に部品が順に現れ（in）、線が描かれ（draw）、棒が伸び（grow/growy）、
   その後は1か所だけゆっくり浮遊（float）、小さな星が瞬く（twinkle）。
   動きを減らす設定の人には一切動かさない（最初から完成形）。 */
@media (prefers-reduced-motion:no-preference){
  .il .in{opacity:0;animation:ilIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
  .il .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:ilDraw 1.4s ease-out forwards;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
  .il .grow{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:ilGrow 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
  .il .growy{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);animation:ilGrowY .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
  .il .float{transform-box:fill-box;animation:ilFloat 6s ease-in-out infinite;animation-delay:1.2s}
  .il .twinkle{transform-box:fill-box;transform-origin:center;animation:ilTwinkle 3.2s ease-in-out infinite}
  .il .twinkle:nth-of-type(2n){animation-delay:1.1s}
  .page-head::before{animation:dotDrift 40s linear infinite}
}
/* 破線（dasharray付き）は描画アニメをかけると破線が消えるので、描かずに順に現れる動きにする */
@media (prefers-reduced-motion:no-preference){
  .il .draw[stroke-dasharray]{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:ilIn .8s ease-out forwards;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
}
@keyframes ilIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ilDraw{to{stroke-dashoffset:0}}
@keyframes ilGrow{to{transform:scaleX(1)}}
@keyframes ilGrowY{to{transform:scaleY(1)}}
@keyframes ilFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ilTwinkle{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dotDrift{from{background-position:0 0}to{background-position:18px 36px}}

/* スクロールで見出しのバーが伸びる（app.js が section に .is-seen を付ける。JS無効なら最初から表示） */
.js main section:not(.page-head):not(.hero) h2::before{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js main section.is-seen h2::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .js main section:not(.page-head):not(.hero) h2::before{transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ---------- 読みやすさの部品（2026-09-27 五月女「文章ばかりで分かりにくい」への対応） ----------
   原稿の文言は変えず、並べ方だけを変える。実測で「文章だけが続く区間」が最長1,003pxあったのを分割する */

/* MV直下の帯：目次・要点・最初のボタンをMVから出し、MVは見出しとリードだけにする */
.intro-band{padding:28px 0;background:#fff}
/* 帯はMVの続き。次のセクションとの区切り線は付けず、目次の下の余白を上（28px）と揃える（2026-09-27 五月女指摘） */
.intro-band + section{border-top:0;padding-top:0}
.intro-band .wrap > * + *{margin-top:18px}
/* 目次は全幅の枠に、番号付きのチップを横に詰めて並べる（2026-09-27 五月女指摘）。
   全幅＋2段組 → 左段の右が空く／枠を中身幅に → 枠の右が空く、の両方を避ける。項目が長いページは自然に折り返す */
.intro-band .toc{margin:0;max-width:none}
.intro-band .toc ol{list-style:none;padding:0;counter-reset:toc;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 10px}
/* 枠の幅を均等な列に分け、各項目を列いっぱいにする（チップを左詰めにすると、項目の少ないページで右が空く） */
.intro-band .toc li{counter-increment:toc;margin:0}
.intro-band .toc a{display:flex;height:100%;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--text);text-decoration:none;font-size:14px;line-height:1.5}
.intro-band .toc a::before{content:counter(toc);display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--blue);font-size:12px;font-weight:700;font-family:"Helvetica Neue",Arial,sans-serif}
.intro-band .toc a:hover{border-color:var(--blue-light);color:var(--blue)}
.intro-band .toc a{text-wrap:balance}/* 「〜変わるの／か」のように1文字だけ次の行に落ちるのを防ぐ */
.intro-band .cta-row{margin-top:18px}

/* 要点（料金・納品・納品物・その後）をタイルで */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0}
.fact{background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:4px;padding:14px 16px}
.fact dt{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.06em;margin:0 0 4px}
.fact dd{margin:0;font-size:15px;font-weight:700;color:var(--text);line-height:1.6}

/* H3が続く箇所：番号付きのカードにして区切りを見せる */
.points{display:grid;gap:16px;margin:0 0 20px}
.points--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.point{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 24px}
.sec-alt .point{border-color:#fff}
.point__no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue-pale);color:var(--blue);font-weight:700;font-size:14px;letter-spacing:.02em;font-family:"Helvetica Neue",Arial,sans-serif}
.point__body h3{margin:6px 0 8px}
.point__body .prose{margin:0}
.point__body .prose p{font-size:15px}
.point__body .cta-row{margin-top:8px}

/* 「見当のつけ方」「お渡しするもの」：本文と役割が違う段落を囲みで分ける */
.callout{position:relative;margin:14px 0 0;padding:12px 16px;border-radius:4px;font-size:14px;line-height:1.85;max-width:46em}
.callout__label{display:block;font-size:12px;letter-spacing:.06em;margin:0 0 2px}
.callout--hint{background:var(--bg-2);border-left:3px solid var(--blue-light);color:var(--text-2)}
.callout--hint .callout__label{color:var(--blue)}
.callout--deliver{background:#fff;border:1px dashed var(--blue-light);color:var(--text-2)}
.callout--deliver .callout__label{color:var(--blue)}
.sec-alt .callout--hint{background:#fff}

/* 太字の見出しが付いた番号付きリスト（5つの観点・手順・誤解など）＝番号の丸つきカード */
.prose ol.nlist{list-style:none;padding:0;counter-reset:n;display:grid;gap:10px;max-width:var(--narrow)}
.prose ol.nlist > li{counter-increment:n;position:relative;margin:0;padding:14px 16px 14px 58px;background:#fff;border:1px solid var(--line);border-radius:6px}
.prose ol.nlist > li::before{content:counter(n);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",Arial,sans-serif}
.prose ol.nlist > li > b:first-child{color:var(--blue)}
.sec-alt .prose ol.nlist > li{border-color:#fff}

/* 太字の見出しが付いた箇条書き・ふつうの箇条書き：チェックの印で拾い読みしやすく */
.prose ul{list-style:none;padding-left:0}
.prose ul > li{position:relative;padding-left:26px}
.prose ul > li::before{content:"";position:absolute;left:4px;top:.72em;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) translateY(-4px)}
.prose ul.klist{display:grid;gap:8px}
.prose ul.klist > li > b:first-child{color:var(--blue)}

/* 数字の比較（地域別の割合）＝棒で見せる。数値は文字でも出す */
.bars{margin:6px 0 22px;max-width:var(--narrow);background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.bars figcaption{font-size:13px;font-weight:700;color:var(--text-3);margin:0 0 10px}
.bars ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bars ul > li{display:grid;grid-template-columns:9em minmax(0,1fr) 3.4em;align-items:center;gap:12px;padding:0}
.bars ul > li::before{content:none}
.bars__label{font-size:14px;color:var(--text-2)}
.bars__track{height:12px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.bars__fill{display:block;height:100%;width:var(--v);background:var(--blue-light);border-radius:6px}
.bars li:nth-child(4) .bars__fill{background:var(--blue)}
.bars__val{font-weight:700;color:var(--blue);text-align:right;font-family:"Helvetica Neue",Arial,sans-serif}
@media (prefers-reduced-motion:no-preference){
  .js .bars[data-reveal] .bars__fill{width:0;transition:width 1s cubic-bezier(.2,.7,.2,1) .15s}
  .js .bars[data-reveal].is-in .bars__fill{width:var(--v)}
}

/* ---------- 追加提案A〜D（2026-09-27） ---------- */
/* A：主張そのものである数字を大きく見せる（/why/） */
.stats{display:grid;gap:14px;margin:4px 0 24px;max-width:var(--narrow)}
.stats--two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;padding:18px 22px}
.stat__num{margin:0;font-family:"Helvetica Neue",Arial,sans-serif;font-size:clamp(44px,6vw,60px);font-weight:700;line-height:1;color:var(--blue);letter-spacing:-.01em}
.stat__num span{font-size:.45em;margin-left:2px}
.stat__cap{margin:0 0 6px;font-size:14px;font-weight:700;line-height:1.7;color:var(--text)}
.stat__src{margin:6px 0 0;font-size:12px;color:var(--text-3)}
.stat__dots{display:block;width:100%;max-width:258px;height:auto;margin-top:4px}

/* B：英語の質問例を入力欄風に。［ ］の中が置き換える場所 */
.prompt{margin:10px 0 0;border:1px solid var(--blue-light);border-radius:10px;background:#fff;overflow:hidden;max-width:46em}
.prompt__label{margin:0;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--blue);background:var(--bg-2);border-bottom:1px solid var(--line)}
.prompt__en{margin:0;padding:12px 14px 4px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.7;color:var(--text)}
.prompt__ja{margin:0;padding:0 14px 12px;font-size:13px;color:var(--text-3)}
.prompt .ph{background:var(--blue-pale);color:var(--blue);border-radius:3px;padding:0 3px;font-weight:700}
.prompt p{max-width:none}/* 段落の最大幅（46em）が効くと見出し帯が途中で切れる */
.prompt + p{margin-top:14px}
/* 「含まれないもの」はチェックでなく×の印（チェックだと「含まれる」と読める） */
.prose ul.xlist > li::before{content:"×";border:0;transform:none;width:auto;height:auto;top:0;left:4px;color:var(--text-3);font-weight:700}

/* C：番号の代わりにアイコン（/service/）・作業ごとのアイコン（/price/） */
.point__no--ico .ico{width:22px;height:22px}
.prose ul.ilist{display:grid;gap:10px;max-width:var(--narrow)}
.prose ul.ilist > li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;margin:0;background:#fff;border:1px solid var(--line);border-radius:6px}
.prose ul.ilist > li::before{content:none}
.prose ul.ilist .ico{width:36px;height:36px;padding:7px;border-radius:50%;background:var(--blue-pale)}

/* D：目次のある長いページで、画面の広いPCにだけ横に付いてくる目次（app.js が生成） */
.side-toc{display:none}
/* 1440pxでは目次の右端が本文の左端に近すぎるため、1480px以上だけに出す（実測） */
@media (min-width:1480px){
  .side-toc{display:block;position:fixed;top:112px;left:max(16px,calc(50% - 540px - 196px));width:176px;z-index:20;
    font-size:12.5px;line-height:1.6;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .side-toc.is-on{opacity:1;visibility:visible;transform:none}
  .side-toc__ttl{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-3);margin:0 0 8px}
  .side-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .side-toc a{display:block;padding:5px 0 5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--text-2);text-decoration:none}
  .side-toc a:hover{color:var(--blue)}
  .side-toc a[aria-current="true"]{color:var(--blue);font-weight:700;border-left-color:var(--blue)}
}

/* 料金ページのプランをカードで（旧LPの .plans を流用） */
.plans--page{margin:6px 0 20px}
.plans--page .plan h3{padding-left:0;border-left:0}
/* 段落ブロックの中に置くため、箇条書きのチェック印と字下げを打ち消す */
.prose .plans{max-width:none}/* 箇条書きの最大幅（46em）が効くと4枚が3枚＋1枚に折り返す */
.prose .plans > li{padding:26px 22px;margin:0}
.prose .plans > li::before{content:none}

/* トップのSEO・GEOの2枚 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px;margin:0 0 20px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px}
.card p{font-size:15px;color:var(--text-2)}
.card .cta-row{margin-top:10px}

/* コラム一覧 */
.posts{display:grid;gap:18px;margin:0 0 10px;padding:0;list-style:none;max-width:var(--narrow)}
.post{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px 24px}
.post__tag{display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--blue);border:1px solid var(--blue-pale);border-radius:2px;padding:1px 8px;margin:0 0 8px;line-height:1.7}
.post h3{margin:0 0 8px}
.post h3 a{display:inline-block;padding:4px 0;color:var(--text);text-decoration:none}/* 1行のとき高さ19px→24px以上に（WCAG 2.5.8） */
.post h3 a:hover{color:var(--blue);text-decoration:underline}
.post p{font-size:14px;color:var(--text-2);margin:0 0 6px}
.post .post__date{font-size:12px;color:var(--text-3);margin:0}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:36px 0;font-size:13px;color:var(--text-3);line-height:1.9}
.site-foot a{color:var(--text-3)}
.site-foot .co{color:var(--text-2);font-size:14px;margin:0 0 6px}
/* B.A.Dの他サービス一覧（Setup/service_links から生成。2026-09-24） */
.site-foot .svc{margin:0 0 6px}
.site-foot .svc a{white-space:nowrap}
.site-foot .svc-ttl{display:inline-block;color:var(--text-2);font-weight:700;margin-right:12px}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 18px;padding:0;list-style:none}
.foot-nav a{display:inline-flex;align-items:center;min-height:36px;color:var(--text-2);font-size:13px}

/* ---------- icons（単色線画・currentColor。色は親から継承） ---------- */
.ico{display:block;width:28px;height:28px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:36px;height:36px}
.ico--sm{width:22px;height:22px}

/* ---------- motion ----------
   ①FV図：段階が順に現れる（主張の順序＝時間の順序を動きで示す）
   ②スクロール到達で浮き上がる：.js が付いたときだけ初期非表示。JS無効なら最初から全文が見える
   ③数値カウントアップは app.js。最終値は HTML に書いてある
   すべて prefers-reduced-motion で止める（前庭障害への配慮。WCAG 2.3.3） */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* FV図（案D）：帯が左から伸びて85%で止まる → オレンジの線が上から落ちる → 点が19個順に埋まり、20個目だけ空く → 結論 */
@keyframes hmWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hmDrop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hmPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.js .hm-band{animation:hmWipe .9s cubic-bezier(.2,.7,.2,1) both}
.js .hm-mark{animation:hmDrop .35s ease-out both;animation-delay:.9s}
.js .hm-marklabel,.js .hm-note{animation:fadeUp .5s ease-out both;animation-delay:1.15s}
.js .hm-dots circle{transform-box:fill-box;transform-origin:center;animation:hmPop .3s ease-out both;animation-delay:calc(1.35s + var(--i,0) * .045s)}
.js .hm-empty{animation:fadeUp .5s ease-out both;animation-delay:2.25s}
.js .hm-95{animation:fadeUp .5s ease-out both;animation-delay:2.35s}
.js .hm-end{animation:fadeUp .5s ease-out both;animation-delay:2.6s}

/* 本文の画面図（案C）：空いた「御社」の枠だけゆっくり明滅させ、目をそこへ運ぶ */
.screen{margin:0 0 36px;max-width:560px}
.screen svg{display:block;width:100%;height:auto}
.screen figcaption{font-size:12px;color:var(--text-3);margin-top:10px;line-height:1.7}
@keyframes scBlink{50%{opacity:.35}}
.js .sc-miss{animation:scBlink 1.8s ease-in-out infinite}

.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
/* .is-in 後は hover 用の box-shadow / border-color も遷移対象に含める。
   ここに opacity を残さないと、.is-in が付いた瞬間に transition が差し替わりフェードが走らない */
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease}
/* 兄弟要素は少しずつ遅らせて「順に並ぶ」感じにする */
.js [data-reveal]:nth-child(2){transition-delay:.08s}
.js [data-reveal]:nth-child(3){transition-delay:.16s}
.js [data-reveal]:nth-child(4){transition-delay:.24s}
.js [data-reveal]:nth-child(5){transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hm-band,.js .hm-mark,.js .hm-marklabel,.js .hm-note,.js .hm-dots circle,.js .hm-empty,.js .hm-95,.js .hm-end,.js .sc-miss{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .prob,.plan{transition:none}
  .prob:hover,.plan:hover{transform:none}
}

/* ---------- thanks ---------- */
.thanks{padding:96px 0;text-align:center}
.thanks h1{font-size:clamp(21px,2.6vw,28px);margin:0 0 20px;line-height:1.6}
.thanks p{margin-inline:auto;color:var(--text-2);font-size:15px}
.thanks .btn{margin-top:32px}

@media (max-width:960px){
  .site-head .wrap{flex-wrap:wrap}
  .nav-toggle{display:inline-block;margin-left:auto}
  .gnav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:12px;padding:0 0 16px}
  .gnav ul{flex-direction:column;gap:0}
  .gnav ul li + li{border-top:1px solid var(--line)}
  .gnav ul a{display:flex;border-bottom:0}
  .head-cta{justify-content:center}
  /* JS有効時だけ閉じておく。JS無効ならボタンは効かないが、メニューは開いたまま＝全ページへ辿れる */
  .js .gnav{display:none}
  .js .gnav.is-open{display:flex}
}
@media (max-width:900px){
  /* MVのイラストは見出しの上に小さく（スマホでも最初の画面で「絵のあるページ」と分かるように） */
  .page-head__grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .intro-band .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-band .toc a{font-size:13px}
  .point{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px}
  .bars ul > li{grid-template-columns:7em minmax(0,1fr) 3em;gap:8px}
  .page-head__fig{order:-1;max-width:220px;margin-top:0}
  .page-head--compact .page-head__grid{grid-template-columns:minmax(0,1fr)}
  .page-head--compact .page-head__fig{max-width:160px}
  .sec-final::after{width:220px;height:220px;right:-80px;opacity:.4}
  /* 1fr は min が auto＝子の固有幅に引きずられる。minmax(0,1fr) で列幅を画面幅に固定する */
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero__fig{max-width:460px}
}
@media (max-width:760px){
  .axis{grid-template-columns:1fr}
  .axis dt{padding-bottom:0;background:#fff}
  .sec-warm .axis dt{background:#fff}
  .axis dd{padding-top:8px}
  .step{border-left:0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
}
@media (max-width:600px){
  .hero{padding:52px 0 46px}
  section{padding:52px 0}
  .ex-row{grid-template-columns:1fr}
  .ex-k{padding-bottom:0;background:#fff}
  .sec-alt .ex-k{background:#fff}
  .ex-v{padding-top:6px}
  .cta-box{padding:32px 20px}
  .head-cta{padding:11px 16px;font-size:13px}
  .btn{padding:17px 36px;width:100%}
  /* ボタンを包む枠を画面幅にする。枠が下の注記の長さで決まると、ボタンが中途半端な幅になる（2026-09-26 五月女指摘・実機） */
  .cta-main{width:100%;align-items:stretch}
  .btn-note{text-align:center}
}