/* 現場のAI係の道具箱 ── サイト全体の白地テーマ（2026-09-21）
   全ページが読み込む（トップ＋下層6ページ）。旧 style.css（紺地の図面テーマ）は廃止。
   規律は base.css（文字4段＋表示用1・余白3段・角丸3段・.btn の作り・:active・:focus-visible）。
   ここで足すのは色と配置だけ。font-size は base の変数を使う。
   ブランドの正本：ネイビー #0d1b2e／ライム #c3f53c（土台の色は残し、地だけ白にする） */

:root{
  --navy:#0d1b2e;
  --lime:#c3f53c;
  --gray:#7f93ad;      /* 青灰・注記 */
  --bg:#f7f8f5;         /* 地 */
  --card:#ffffff;       /* カード */
  --line:rgba(13,27,46,.12);
  --maxw:1200px;
}

/* base.css は body の色・地を決めていないので、ここで白地に */
body{
  color:var(--navy);
  background:var(--bg);
}
a{color:var(--navy)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}
.mono{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;letter-spacing:.04em}
.cap{color:var(--gray)}

/* ============================================================
   ヘッダー（上に固定・白・下に細い線）
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  row-gap:0;column-gap:24px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:0 0 auto}
.brand img{width:36px;height:36px;display:block}
.brand b{font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1.3}

.nav-menu{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
.nav-menu ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-menu li{flex:0 0 auto}
.nav-menu a{font-size:16px;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.nav-menu a:hover{color:var(--gray)}
/* お問い合わせは ul の外（スマホでは1段目の右に置くため） */
.site-header .btn-contact{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:44px;box-sizing:border-box;background:var(--lime);color:var(--navy);padding:0 22px;
  border-radius:999px;font-weight:800;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.site-header .btn-contact:hover{color:var(--navy);transform:translateY(-1px);box-shadow:3px 3px 0 rgba(195,245,60,.45)}
.site-header .btn-contact:active{transform:translateY(1px);box-shadow:none}

/* スマホ＝1段目：ロゴ＋お問い合わせ／2段目：4つの見出し（横に流れる） */
@media (max-width:640px){
  .site-header .wrap{padding-top:8px;padding-bottom:0;column-gap:12px}
  .brand{order:1;flex:1 1 auto;min-width:0;padding-bottom:8px}
  .brand b{font-size:14px}
  .site-header .btn-contact{order:2;min-height:40px;padding:0 14px;font-size:14px;margin-bottom:8px}
  .nav-menu{order:3;width:100%;flex:1 1 100%;justify-content:flex-start;border-top:1px solid var(--line)}
  .nav-menu ul{width:100%;overflow-x:auto;flex-wrap:nowrap;gap:18px;padding:9px 0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-menu ul::-webkit-scrollbar{display:none}
  .nav-menu a{font-size:14px}
}

/* ============================================================
   ヒーロー（1画面目・軽く）
   ============================================================ */
.hero-top{padding:32px 0 16px}
.hero-top .kicker{font-size:var(--fs-cap);color:var(--gray);margin:0 0 8px}
.hero-top h1{font-size:clamp(26px,5vw,38px);line-height:1.25;letter-spacing:-.02em;
  font-weight:800;margin:0 0 12px;color:var(--navy)}
.hero-top .lead-top{font-size:var(--fs-body);color:var(--gray);line-height:1.6;margin:0;max-width:760px}

/* ============================================================
   節の見出し＝英字の大見出し＋小さな日本語の副題
   ============================================================ */
h2.sec-head{margin:0 0 24px;line-height:1}
h2.sec-head .sec-eng{display:block;font-size:clamp(26px,4vw,38px);font-weight:800;
  letter-spacing:.05em;color:var(--navy)}
h2.sec-head .sec-jp{display:block;font-size:var(--fs-body);font-weight:400;color:var(--gray);margin-top:6px}

section{padding:56px 0;scroll-margin-top:96px}
#tools{padding-top:24px}

/* ============================================================
   カード（PICK UP／道具）
   ============================================================ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:960px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards-grid{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:0 1px 2px rgba(13,27,46,.05)}
.card-thumb{position:relative;aspect-ratio:16/9;background:#eef0ea;overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 紺地のサムネ（t01・t03〜05）は左上に紺のパッチを敷いてからタグを置く。
   パッチは % 指定＝aspect-ratio 固定の .card-thumb と一緒に伸縮するので、
   どの列幅でも画像側の帯・ラベル文字を隠しきれる（2026-09-21・重なり対策）。
   地が白い t02 はパッチ無し（隠す文字が無いのでそのまま）。 */
.card-thumb.thumb-dark::before{content:"";position:absolute;top:0;left:0;width:46%;height:22%;
  background:var(--navy);border-radius:0 0 var(--r-l) 0;z-index:1}
.card-tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-block;font-size:var(--fs-cap);
  font-weight:800;padding:5px 14px;border-radius:var(--r-pill)}
.tag-now{background:var(--lime);color:var(--navy)}
.tag-free{background:#fff;color:var(--navy);border:1px solid var(--lime)}
.tag-soon{background:#fff;color:var(--gray);border:1px dashed var(--line)}

.card-body{padding:var(--sp-3);display:flex;flex-direction:column;flex:1;gap:8px}
.card-name{font-size:var(--fs-sub);font-weight:700;color:var(--navy);margin:0}
.card-desc{font-size:var(--fs-cap);color:var(--gray);line-height:1.6;margin:0}
.card-price{font-size:var(--fs-cap);color:var(--navy);font-weight:700;margin:4px 0 0}
.card-price .price-note{display:block;color:var(--gray);font-weight:400;margin-top:2px}
.card-cta{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px}
.card-cta .btn{width:100%}

.btn-fill{background:var(--lime);color:var(--navy)}
.btn-fill:hover{box-shadow:3px 3px 0 rgba(195,245,60,.45)}
.btn-line{border:1px solid var(--navy);color:var(--navy);background:transparent}
.btn-line:hover{background:rgba(13,27,46,.05)}

/* ============================================================
   DOWNLOAD／無料でもらえるもの
   ============================================================ */
.dl-card{display:flex;gap:32px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:var(--sp-3)}
.dl-thumb{flex:0 0 300px}
.dl-thumb img{width:100%;border-radius:var(--r-s);display:block;border:1px solid var(--line)}
.dl-body{flex:1;min-width:0}
.dl-body h3{margin:0 0 8px;color:var(--navy)}
.dl-body p{margin:0 0 8px;color:var(--gray);font-size:var(--fs-body)}
.dl-body .cap{display:block;margin:0 0 16px}
@media (max-width:768px){
  .dl-card{flex-direction:column;align-items:stretch}
  .dl-thumb{flex:none}
}

/* ============================================================
   NOTE／記事
   ============================================================ */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.cta-row .btn{min-width:220px}
@media (max-width:560px){.cta-row .btn{width:100%}}

/* ============================================================
   ABOUT（既存文をそのまま・creedは白地用の色に）
   ============================================================ */
#about p{color:var(--navy);max-width:720px}
.creed{display:flex;align-items:center;gap:24px;margin:56px 0 16px;text-align:center}
.creed-rule{position:relative;flex:1;height:1px;background:var(--navy);min-width:24px}
.creed-rule::before,.creed-rule::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--navy)}
.creed-rule::before{left:0}
.creed-rule::after{right:0}
.creed-rule.l::after{display:none}
.creed-rule.r::before{display:none}
.creed-text{margin:0;flex:0 1 auto;font-size:var(--fs-h2);font-weight:800;line-height:1.55;color:var(--navy);letter-spacing:.02em}
@media (max-width:700px){
  .creed{flex-direction:column;gap:16px;margin:40px 0 16px}
  .creed-rule{width:120px;flex:0 0 auto}
  .creed-rule.l::after,.creed-rule.r::before{display:block}
}
@media (max-width:560px){.creed-text{font-size:var(--fs-sub)}}

/* ============================================================
   WHO（既存文をそのまま）
   ============================================================ */
#who .lead{color:var(--gray);max-width:720px}
#who .lead a{color:var(--navy);text-decoration:underline}

/* ============================================================
   HONESTLY（左に細い紺の縦線の囲み）
   ============================================================ */
.notice-box{border-left:3px solid var(--navy);background:var(--card);padding:16px 24px;
  border-radius:0 var(--r-s) var(--r-s) 0}
.notice-box p{margin:0 0 12px;color:var(--navy)}
.notice-box p:last-child{margin-bottom:0}

/* ============================================================
   フッター
   ============================================================ */
footer{border-top:1px solid var(--line);padding:24px 0 64px;font-size:var(--fs-cap);color:var(--gray)}
footer a{color:var(--gray);text-decoration:underline}
footer strong{color:var(--navy)}

/* ============================================================
   スマホ全体
   ============================================================ */
@media (max-width:560px){
  section{padding:40px 0}
  #tools{padding-top:16px}
}

/* ============================================================
   ==== 下層ページ（2026-09-21） ====
   対象：sougou-eizen／sekou-keikakusho／dl/*（4ページ）。
   旧 style.css（紺地の図面テーマ）で使っていた class 名はそのまま使い、
   ここで白地の色・配置に作り替える。HTML の骨組みは変えていない
   （ヘッダー・フッターの差し替えと、チェックサム表の table-wrap だけが例外）。
   .reveal と .fu／.fu1〜4 は意図してここに書かない＝旧テーマの登場アニメが
   無くなり、常に表示された状態になる。
   ============================================================ */

/* ── ヒーロー（.hero／.sheet／.stamp）＝白い1枚のカードに ── */
.hero{padding:32px 0 24px}
.sheet{position:relative;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--card);box-shadow:0 1px 2px rgba(13,27,46,.05)}
.stamp{position:absolute;top:-12px;left:var(--sp-3);background:var(--lime);color:var(--navy);
  font-size:var(--fs-cap);font-weight:800;letter-spacing:.08em;padding:4px 14px;border-radius:var(--r-pill)}
.sheet-in{padding:40px var(--sp-3) var(--sp-3)}
.target{font-size:var(--fs-cap);color:var(--gray);margin:0 0 8px}
.hero h1{color:var(--navy);margin:0 0 var(--sp-2)}
.hero h1 em{font-style:normal;color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:4px}
.sub{font-size:var(--fs-body);color:var(--gray);margin:0 0 var(--sp-3);max-width:640px}

/* 所要時間の寸法線（.dim／.bar） */
.dim{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2);color:var(--navy);font-size:var(--fs-cap)}
.dim .bar{position:relative;height:1px;background:var(--line);flex:1;max-width:280px}
.dim .bar::before,.dim .bar::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--navy)}
.dim .bar::before{left:0}
.dim .bar::after{right:0}

/* 表題欄の4マス（CHAPTERS／PAGES／PRICE など） */
.block{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin:0 0 var(--sp-3)}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-2)}
.cell:last-child{border-right:0}
.cell dt{font-size:var(--fs-cap);letter-spacing:.1em;color:var(--gray);margin:0 0 4px}
.cell dd{margin:0;font-size:var(--fs-sub);font-weight:700;line-height:1.3;color:var(--navy)}
.cell dd small{color:var(--gray);font-weight:400;margin-left:2px}
.cell.price dd{color:var(--navy);font-size:var(--fs-h2)}
.cell.price .cap{display:block;font-size:var(--fs-cap);color:var(--gray)}
@media (max-width:900px){.block{grid-template-columns:1fr 1fr}.cell:nth-child(2n){border-right:0}}
@media (max-width:560px){.block{grid-template-columns:1fr}.cell{border-right:0}}

/* ヒーローのボタン2つ（横並び→スマホは縦積み。幅100%は base.css の .btn が面倒を見る） */
.cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 0}
.btn-main{background:var(--lime);color:var(--navy)}
.btn-main:hover{box-shadow:3px 3px 0 rgba(195,245,60,.45)}
.btn-ghost{border:1px solid var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:rgba(13,27,46,.05)}
.btn[aria-disabled="true"]{background:transparent;color:var(--gray);border:1px dashed var(--line)}
.btn[aria-disabled="true"]:hover{box-shadow:none;background:transparent}

@media (max-width:560px){
  .hero{padding:24px 0 16px}
  .sheet-in{padding:32px var(--sp-2) var(--sp-2)}
  .dim .bar{max-width:none}
}

/* ── ページ内目次（nav.toc）＝白の丸いチップ。スマホは横に流す ── */
.toc{position:sticky;top:65px;z-index:40;background:#fff;border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
.toc ul{display:flex;gap:10px;list-style:none;margin:0;padding:10px 0;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.toc ul::-webkit-scrollbar{display:none}
.toc a{display:inline-block;font-size:var(--fs-cap);font-weight:700;color:var(--navy);text-decoration:none;
  white-space:nowrap;padding:6px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.toc a:hover{border-color:var(--navy);background:rgba(13,27,46,.04)}
@media (max-width:640px){.toc{top:106px}}

/* 目次つきページは、固定ヘッダー＋固定目次の分だけ余分に逃げる */
.toc ~ main section{scroll-margin-top:132px}

/* ── 節の見出し（p.kicker ＋ h2）＝小さな青灰のラベル＋紺の太字見出し ── */
.kicker{font-size:var(--fs-cap);color:var(--gray);letter-spacing:.08em;font-weight:700;margin:0 0 8px}
.lead{color:var(--gray)}
.lead a{color:var(--navy);text-decoration:underline}

/* ── カード（できること／使い方の分岐など） ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{display:block;position:relative;border:1px solid var(--line);padding:var(--sp-3);
  background:var(--card);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(13,27,46,.05);overflow:visible}
.card p{margin:0;color:var(--gray)}
.card h3{margin:0 0 8px;color:var(--navy)}
.card .tagno{font-size:var(--fs-cap);color:var(--gray);letter-spacing:.1em;margin:0 0 8px;font-weight:700}
.card .btn{margin-top:var(--sp-2)}
@media (max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}

/* 状態のしるし（DLページの「配布自由」など。色は .tag-free 等＝top.css 側の定義を流用） */
.tag{display:inline-block;font-size:var(--fs-cap);font-weight:800;padding:4px 14px;
  border-radius:var(--r-pill);vertical-align:middle;margin-left:8px}

/* ── 章立て（.sheet2／.row） ── */
.sheet2{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s)}
.row{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid var(--line);align-items:center}
.row:last-child{border-bottom:0}
.row .no{padding:var(--sp-2) 0;text-align:center;color:var(--navy);font-weight:700;
  font-size:var(--fs-cap);border-right:1px solid var(--line)}
.row .nm{padding:var(--sp-2)}
.row .nm small{color:var(--gray)}
@media (max-width:560px){.row{grid-template-columns:48px 1fr}}

/* ── 画面の図解（figure.fig） ── */
figure.fig{margin:var(--sp-3) 0;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);padding:var(--sp-2)}
figure.fig img{width:100%;border-radius:var(--r-s)}
figure.fig figcaption{font-size:var(--fs-cap);color:var(--gray);margin-top:var(--sp-1);padding:0 2px}

/* ── 表（仕様・章立て・所要時間・チェックサム） ── */
.scroll,.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:0 0 var(--sp-3);font-size:var(--fs-body)}
th,td{border:1px solid var(--line);padding:var(--sp-2);text-align:left;vertical-align:top}
th{background:#eef1ec;color:var(--navy);font-size:var(--fs-cap);letter-spacing:.05em;
  white-space:nowrap;font-weight:700}
code{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;word-break:break-all}
p code,li code,td code,dd code{background:rgba(195,245,60,.20);color:var(--navy);padding:0 4px;border-radius:var(--r-s)}

/* ── 見本のギャラリー（#sample）＝PC 3列／タブレット2列／スマホ1列 ── */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin:0 0 var(--sp-2)}
.gallery .shot{display:block;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
  background:var(--card);text-decoration:none;color:var(--navy);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.gallery .shot:hover{transform:translateY(-3px);border-color:var(--navy)}
.gallery .shot.wide{grid-column:1 / -1}
.gallery .shot img{width:100%;height:auto;display:block}
.gallery .shot-cap{display:block;padding:6px var(--sp-2);background:#fff;color:var(--gray);
  font-size:var(--fs-cap);border-top:1px solid var(--line)}
.gallery .shot-cap b{color:var(--navy);letter-spacing:.05em;margin-right:.6em}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.gallery{grid-template-columns:1fr}.gallery .shot.wide{grid-column:auto}}

/* ── 手順（.step-h・.steps-jump）＝番号は紺の丸・見出しは太字・所要時間は青灰 ── */
.step-h{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-1);
  padding-top:var(--sp-2);border-top:1px solid var(--line);scroll-margin-top:132px}
.step-h .no{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
  padding:0 8px;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-size:var(--fs-cap);
  font-weight:800;letter-spacing:.02em}
.step-h .t{font-size:var(--fs-sub);font-weight:700;color:var(--navy)}
.step-h .min{font-size:var(--fs-cap);color:var(--gray);margin-left:auto}
.anchor{scroll-margin-top:132px}

.steps-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-3)}
.steps-jump a{font-size:var(--fs-cap);color:var(--navy);text-decoration:none;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 14px;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.steps-jump a:hover{border-color:var(--navy);background:rgba(13,27,46,.04)}
.steps-jump a:active{opacity:.7}

ol.steps{margin:0 0 var(--sp-3);padding-left:1.4em}
ol.steps li{margin-bottom:var(--sp-2)}
ul.plain{margin:0 0 var(--sp-3);padding-left:1.2em;color:var(--navy)}
ul.plain li{margin-bottom:var(--sp-1)}

/* 詰まりやすい所（.stuck） */
.stuck{border-left:3px solid var(--lime);background:rgba(195,245,60,.08);
  padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.stuck b{color:var(--navy)}
.stuck ul{margin:0;padding-left:1.2em}
.stuck li{margin-bottom:var(--sp-1)}
.stuck li:last-child{margin-bottom:0}

/* ── 注意書き（.note）＝トップの .notice-box と同じ調子（左に紺の縦線） ── */
.note{border-left:3px solid var(--navy);background:var(--card);padding:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.note p{margin:0 0 12px;color:var(--navy)}
.note p:last-child{margin-bottom:0}

/* ── FAQ（dl.faq） ── */
dl.faq{margin:0 0 var(--sp-3)}
dl.faq dt{font-weight:700;margin-top:var(--sp-3);border-left:3px solid var(--navy);
  padding-left:var(--sp-2);color:var(--navy)}
dl.faq dt:first-child{margin-top:0}
dl.faq dd{margin:var(--sp-1) 0 0 var(--sp-2);color:var(--gray)}

/* ── 購入（.buybox・.pricerow）＝トップの .card と同じ線と角丸 ── */
.buybox{border:1px solid var(--line);border-radius:var(--r-l);padding:var(--sp-3);
  background:var(--card);box-shadow:0 1px 2px rgba(13,27,46,.05)}
.buybox .pricerow{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-2)}
.buybox .pricerow b{font-size:var(--fs-h2);color:var(--navy);font-weight:800;letter-spacing:-.02em}
.buybox .pricerow span{font-size:var(--fs-cap);color:var(--gray)}
.buybox .cta{margin-top:0}

.back{display:inline-block;margin:var(--sp-3) 0 0;font-size:var(--fs-cap);color:var(--navy)}
.mt3{margin-top:var(--sp-3)}
.price-note{color:var(--gray)}

@media (max-width:560px){
  .step-h .min{margin-left:0;width:100%}
}