@charset "UTF-8";

/* =========================================================
   ムダトリ 共通スタイル
   配色：印鑑の朱 × 医療のティール（日本の事務仕事の色）
   チャート用2色は dataviz バリデータで両モード ALL PASS 済み
   ========================================================= */

:root{
  --paper:#F4F7F6;
  --card:#FFFFFF;
  --card-2:#FAFCFB;
  --ink:#16232A;
  --ink-2:#4B5D66;
  --ink-3:#7B8C94;
  --rule:#D2DBDE;
  --rule-soft:#E6ECED;

  --teal:#008C82;        /* チャート・マーク */
  --teal-text:#006F69;   /* 文字用（コントラスト確保） */
  --teal-deep:#005B56;
  --teal-soft:#DEF0ED;
  --amber:#A9700A;       /* 人の時間 */
  --amber-soft:#F6EBD8;
  --shu:#BC5039;         /* 現状のコスト・注意 */
  --shu-soft:#F7E7E2;
  --ai:#1A6FA8;          /* 藍：お客様に残る利益・情報 */
  --ai-text:#155B8A;
  --ai-soft:#E2EEF7;

  --shadow:0 1px 2px rgba(22,35,42,.05), 0 10px 30px -18px rgba(22,35,42,.28);
  --r:3px;

  --f-disp:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HiraMinProN-W3","Noto Serif JP",serif;
  --f-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","YuGothic","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --f-num:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --nav-h:52px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1315;
    --card:#141E21;
    --card-2:#101A1C;
    --ink:#E6EEEF;
    --ink-2:#A3B4B9;
    --ink-3:#72868D;
    --rule:#27363B;
    --rule-soft:#1C2629;
    --teal:#38A99D;
    --teal-text:#5CC4B7;
    --teal-deep:#7FD6C9;
    --teal-soft:#0F2B29;
    --amber:#B58A33;
    --amber-soft:#2A2216;
    --shu:#E08064;
    --shu-soft:#31201B;
    --ai:#4E90CC;
    --ai-text:#7FB4E0;
    --ai-soft:#122736;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0C1315; --card:#141E21; --card-2:#101A1C;
  --ink:#E6EEEF; --ink-2:#A3B4B9; --ink-3:#72868D;
  --rule:#27363B; --rule-soft:#1C2629;
  --teal:#38A99D; --teal-text:#5CC4B7; --teal-deep:#7FD6C9; --teal-soft:#0F2B29;
  --amber:#B58A33; --amber-soft:#2A2216;
  --shu:#E08064; --shu-soft:#31201B;
  --ai:#4E90CC; --ai-text:#7FB4E0; --ai-soft:#122736;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.75;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--teal-text)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:620px;margin:0 auto;padding:0 22px}

/* ---------- サイトヘッダー / ナビ ---------- */
.site{
  position:sticky;top:0;z-index:40;
  background:var(--card);border-bottom:1px solid var(--rule);
}
.site-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:0 22px;height:var(--nav-h)}
.logo{
  font-family:var(--f-disp);font-size:18px;font-weight:600;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:center;gap:9px;
}
.logo .mark{width:19px;height:19px;flex-shrink:0;display:block}
.nav{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;margin-left:auto;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-size:12.5px;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:6px 11px;border-radius:var(--r);transition:color .15s,background .15s;
}
.nav a:hover{color:var(--teal-text);background:var(--teal-soft)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--shu)}
@media(max-width:620px){
  .site-in{gap:8px;padding:0 16px}
  .logo{font-size:16px}
  .logo .mark{width:17px}
  .nav a{padding:6px 7px;font-size:12px}
}

/* ---------- ページ見出し ---------- */
.phead{padding:52px 0 34px;border-bottom:1px solid var(--rule-soft)}
.eyebrow{font-size:10.5px;letter-spacing:.2em;color:var(--teal-text);font-weight:700;margin-bottom:14px}
.phead h1{
  font-family:var(--f-disp);font-size:clamp(26px,6.6vw,38px);
  line-height:1.5;font-weight:600;text-wrap:balance;letter-spacing:.01em;
}
.phead .sub{margin-top:18px;color:var(--ink-2);font-size:15px;max-width:30em;text-wrap:pretty}

/* ---------- セクション ---------- */
section{padding:48px 0;border-bottom:1px solid var(--rule-soft)}
section:last-of-type{border-bottom:0}
h2{font-family:var(--f-disp);font-size:clamp(21px,5.2vw,27px);line-height:1.55;font-weight:600;text-wrap:balance}
h3{font-size:15.5px;font-weight:700;line-height:1.65;margin-bottom:7px}
.copy{margin-top:16px;color:var(--ink-2);font-size:15px;max-width:31em;text-wrap:pretty}
.copy + .copy{margin-top:14px}
.copy strong{color:var(--ink);font-weight:700}
.lead{font-size:16.5px;line-height:1.9;color:var(--ink);max-width:29em;text-wrap:pretty}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;background:var(--teal);color:#fff;
  border:1px solid var(--teal);border-radius:var(--r);
  padding:14px 26px;font-size:15px;font-weight:700;font-family:var(--f-body);
  cursor:pointer;text-decoration:none;letter-spacing:.03em;
  transition:background .15s,border-color .15s,transform .08s;
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn:active{transform:translateY(1px)}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--teal-text);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 22px;font-size:14px;font-weight:700;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.btn-ghost:hover{border-color:var(--teal);background:var(--teal-soft)}
:root[data-theme="dark"] .btn{color:#08191A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#08191A}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.note{font-size:12.5px;color:var(--ink-3)}

/* ---------- 次のページへの導線 ---------- */
.nextlink{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--rule);background:var(--card);
  padding:20px 22px;margin-top:44px;text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s;
}
.nextlink:hover{border-color:var(--teal);background:var(--teal-soft)}
.nextlink .k{font-size:11px;letter-spacing:.16em;color:var(--teal-text);font-weight:700}
.nextlink .t{font-family:var(--f-disp);font-size:17px;font-weight:600;margin-top:5px;line-height:1.5}
.nextlink .arw{font-size:19px;color:var(--teal-text);flex-shrink:0}

/* ---------- 図版まわり ---------- */
figure{margin:28px 0 0}
figure svg{display:block;width:100%;max-width:460px;height:auto;background:var(--card);border:1px solid var(--rule)}
figcaption{
  font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.75;
  padding-left:13px;border-left:2px solid var(--rule);
}
.fig-lbl{font-family:var(--f-body);font-size:11px;fill:var(--ink-3)}
.fig-name{font-family:var(--f-body);font-size:12.5px;fill:var(--ink)}
.fig-num{font-family:var(--f-num);font-size:12px;fill:var(--ink-2)}
.fig-rule{stroke:var(--rule);stroke-width:1}
.fig-teal{fill:var(--teal)}
.fig-amber{fill:var(--amber)}
.fig-grey{fill:var(--rule)}
.fig-ai{fill:var(--ai)}
.fig-shu{fill:var(--shu)}

/* ---------- 対比（2枚並び） ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
@media(min-width:600px){.duo{grid-template-columns:1fr 1fr}}
.duo > div{background:var(--card);padding:24px 22px}
.duo .hl{background:var(--teal-soft)}
.duo .k{font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.duo .hl .k{color:var(--teal-text);font-weight:700}
.duo .big{font-family:var(--f-disp);font-size:21px;font-weight:600;line-height:1.55}
.duo .hl .big{color:var(--teal-text)}
.duo .d{font-size:13.5px;color:var(--ink-2);margin-top:12px;line-height:1.8}

/* ---------- 番号なしの要点リスト ---------- */
.points{margin-top:26px;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.points > div{background:var(--card);padding:20px 22px}
.points p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-top:5px}

/* ---------- 表 ---------- */
.scroll-x{overflow-x:auto;margin-top:24px;border:1px solid var(--rule);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:top;line-height:1.7}
th{background:var(--card-2);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);font-weight:700;white-space:nowrap}
td.num{font-family:var(--f-num);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
td.rate{color:var(--teal-text);font-weight:700}
tr:last-child td{border-bottom:0}
/* 狭い画面では表の補助列を隠して、横スクロールを起こさない */
@media(max-width:600px){
  .hide-sp{display:none}
  table{min-width:0}
}
.src{font-size:11.5px;color:var(--ink-3);margin-top:13px;line-height:1.8}

/* ---------- FAQ ---------- */
.faq{margin-top:24px;border:1px solid var(--rule);background:var(--card)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:15px 17px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;gap:11px;align-items:flex-start;line-height:1.65;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--f-disp);color:var(--teal-text);flex-shrink:0}
.faq summary:hover{background:var(--card-2)}
.faq .a{padding:0 17px 17px 41px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.faq .a p + p{margin-top:10px}

/* ---------- 強調ボックス ---------- */
.box{border:1px solid var(--rule);background:var(--card);padding:22px;margin-top:26px}
.box-shu{border-color:var(--shu);background:var(--shu-soft)}
.box-teal{border-color:var(--teal);background:var(--teal-soft)}
.box .k{font-size:11.5px;letter-spacing:.12em;font-weight:700;margin-bottom:11px}
.box-shu .k{color:var(--shu)}
.box-teal .k{color:var(--teal-text)}
.box p{font-size:14px;line-height:1.9}
.box p + p{margin-top:11px}

/* ---------- フッター ---------- */
.site-foot{border-top:1px solid var(--rule);background:var(--card);margin-top:8px}
.site-foot .in{max-width:760px;margin:0 auto;padding:34px 22px 44px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:20px}
.foot-nav a{font-size:13px;color:var(--ink-2);text-decoration:none}
.foot-nav a:hover{color:var(--teal-text);text-decoration:underline}
.site-foot .fine{font-size:11.5px;color:var(--ink-3);line-height:1.9;max-width:46em}


/* =========================================================
   診断ツール（diagnosis.html）
   ========================================================= */
/* ============ 診断ツール ============ */
.tool{
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);
  margin-top:26px;overflow:hidden;
}
.tool-head{
  padding:16px 20px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--card-2);
}
.tool-head h3{margin:0;font-size:14px;letter-spacing:.04em}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.preset{
  font-family:var(--f-body);font-size:11.5px;padding:6px 11px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  border-radius:var(--radius);cursor:pointer;transition:.15s;line-height:1.4;
}
.preset:hover{border-color:var(--teal);color:var(--teal)}
.preset[aria-pressed="true"]{background:var(--teal-soft);border-color:var(--teal);color:var(--teal);font-weight:700}

.fields{padding:6px 20px 20px}
.field{padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.field:last-child{border-bottom:0}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field label{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.field .unit{font-size:11px;color:var(--ink-3);margin-left:4px;white-space:nowrap}
.val-wrap{display:flex;align-items:baseline;gap:2px;flex-shrink:0}
.val-wrap .yen{font-size:13px;color:var(--ink-3)}
.val-wrap input{
  font-family:var(--f-num);font-size:16px;font-weight:600;
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  width:9.5ch;text-align:right;padding:2px 2px 3px;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.val-wrap input.narrow{width:4.5ch}
.val-wrap input::-webkit-outer-spin-button,
.val-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.val-wrap input:focus{outline:none;border-bottom-color:var(--teal);background:var(--teal-soft)}
.val-wrap input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;
  height:20px;margin-top:5px;background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{height:2px;background:var(--rule);border-radius:2px}
input[type="range"]::-moz-range-track{height:2px;background:var(--rule);border-radius:2px}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:19px;height:19px;margin-top:-8.5px;
  background:var(--card);border:2px solid var(--teal);border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
input[type="range"]::-moz-range-thumb{
  width:15px;height:15px;background:var(--card);border:2px solid var(--teal);
  border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18);
}
input[type="range"]:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}

details.more{border-top:1px solid var(--rule);background:var(--card-2)}
details.more > summary{
  padding:13px 20px;font-size:13px;color:var(--ink-2);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px;
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"＋";color:var(--teal);font-weight:700;font-size:12px}
details.more[open] > summary::before{content:"−"}
details.more > summary:hover{color:var(--teal)}
details.more .fields{padding-top:0}

.tool-foot{padding:18px 20px;border-top:1px solid var(--rule);background:var(--card-2)}
.tool-foot .btn{width:100%;text-align:center}

/* ============ 結果 ============ */
#result[hidden]{display:none}
.result-head{
  margin-top:30px;padding-bottom:12px;border-bottom:2px solid var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.result-head h3{font-family:var(--f-disp);font-size:19px;font-weight:600;margin:0;letter-spacing:.03em}
.result-head .stamp{
  font-size:10.5px;letter-spacing:.14em;color:var(--shu);
  border:1px solid var(--shu);padding:3px 9px;border-radius:var(--radius);
}

.summary{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0;margin-bottom:26px}
@media(min-width:560px){.summary{grid-template-columns:1fr 1fr}}
.sum-cell{background:var(--card);padding:20px}
.sum-cell .k{font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:8px}
.sum-cell .v{
  font-size:clamp(27px,7.4vw,34px);font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.sum-cell .v .u{font-size:.52em;font-weight:600;margin-left:2px;letter-spacing:0}
.sum-cell .sub{font-size:12px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.sum-cell.now .v{color:var(--ink)}
.sum-cell.cut{background:var(--teal-soft)}
.sum-cell.cut .v{color:var(--teal)}
.sum-cell.cut .k{color:var(--teal)}

.split{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:26px}
@media(min-width:560px){.split{grid-template-columns:1fr 1fr}}
.split-cell{background:var(--card);padding:16px 18px}
.split-cell .k{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:7px;margin-bottom:6px}
.split-cell .k i{width:9px;height:9px;border-radius:50%;flex-shrink:0;font-style:normal}
.split-cell .k .dot-cash{background:var(--teal)}
.split-cell .k .dot-time{background:var(--amber)}
.split-cell .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.split-cell .v .u{font-size:.6em;font-weight:600;margin-left:1px}
.split-cell .d{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.6}

/* 項目別テーブル */
.karte{border:1px solid var(--rule);background:var(--card);margin-bottom:26px}
.karte-cap{
  padding:12px 16px;border-bottom:1px solid var(--rule);
  font-size:12px;letter-spacing:.08em;color:var(--ink-2);background:var(--card-2);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
}
.karte-cap .legend{display:flex;gap:12px;font-size:10.5px;color:var(--ink-3)}
.karte-cap .legend span{display:flex;align-items:center;gap:5px}
.karte-cap .legend i{width:14px;height:6px;display:block;font-style:normal}
.lg-now{background:var(--rule)}
.lg-cut{background:var(--teal)}
.lg-labor{background:var(--amber);width:7px !important;height:7px !important;border-radius:50%}
.row{padding:13px 16px;border-bottom:1px solid var(--rule-soft)}
.row:last-child{border-bottom:0}
.row.zero{opacity:.5}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.row-name{font-size:13px;color:var(--ink);line-height:1.5}
.row-nums{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.row-nums b{color:var(--teal);font-weight:700}
.row-name .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-right:7px;vertical-align:1.5px}
.row-name .tag{font-style:normal;font-size:10px;color:var(--ink-3);border:1px solid var(--rule);padding:1px 5px;margin-left:7px;white-space:nowrap}
.bar{height:9px;background:var(--rule-soft);position:relative;overflow:hidden}
.bar .now{position:absolute;inset:0 auto 0 0;background:var(--rule);width:0}
.bar .cut{position:absolute;inset:0 auto 0 0;background:var(--teal);width:0}
.animate .bar .now,.animate .bar .cut{transition:width .7s cubic-bezier(.22,.7,.3,1)}

/* 打ち手トップ3 */
.moves{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:26px}
.move{background:var(--card);padding:16px 18px;display:flex;gap:14px}
.move .rank{
  font-family:var(--f-num);font-size:11px;color:var(--shu);
  border:1px solid var(--shu);width:24px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;margin-top:2px;
}
.move .m-body{min-width:0}
.move .m-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.move .m-name{font-size:14px;font-weight:700}
.move .m-amt{font-size:13px;color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums}
.move p{font-size:13px;color:var(--ink-2);line-height:1.75}

.roi{border:1px solid var(--teal);background:var(--teal-soft);padding:20px;margin-bottom:22px}
.roi .k{font-size:11.5px;letter-spacing:.1em;color:var(--teal);font-weight:700;margin-bottom:10px}
.roi p{font-size:14px;line-height:1.85;color:var(--ink)}
.roi p b{font-variant-numeric:tabular-nums}
.roi .plan-line{margin-top:12px;padding-top:12px;border-top:1px solid var(--teal);font-size:13px;color:var(--ink);line-height:1.85}
.disclaim{font-size:11.5px;color:var(--ink-3);line-height:1.8}

/* ---------- 先行登録（診断結果ページ） ---------- */
.lead-box{
  border:1px solid var(--teal);background:var(--card);
  padding:22px;margin-bottom:22px;
}
.lead-box .k{
  font-size:11.5px;letter-spacing:.1em;color:var(--teal-text);
  font-weight:700;margin-bottom:10px;
}
.lead-box p{font-size:14px;line-height:1.85;color:var(--ink-2);margin:0}
.lead-box p strong{color:var(--ink);font-weight:700}
.lead-note{font-size:12px;color:var(--ink-3);line-height:1.8;margin-top:10px !important}
.lead-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.lead-row input[type="email"]{
  flex:1 1 240px;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  padding:13px 14px;font-size:15px;font-family:var(--f-body);
}
.lead-row input[type="email"]::placeholder{color:var(--ink-3)}
.lead-row .btn{flex-shrink:0}
.lead-msg{margin-top:14px !important;font-size:13.5px;font-weight:700;color:var(--teal-text)}
.lead-msg.err{color:var(--shu)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   トップページ専用
   ========================================================= */
.hero{padding:62px 0 50px;border-bottom:1px solid var(--rule-soft)}
.hero h1{
  font-family:var(--f-disp);font-size:clamp(29px,7.6vw,46px);
  line-height:1.42;font-weight:600;text-wrap:balance;letter-spacing:.005em;
}
.hero .lead{margin-top:26px}
.hero .sign,.hero-photo .sign{
  margin-top:26px;font-size:12.5px;color:var(--ink-3);
  padding-left:14px;border-left:2px solid var(--shu);line-height:1.8;
}


/* =========================================================
   料金プラン（pricing.html）
   ========================================================= */
/* ============ 料金 ============ */
.plans{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:24px}
.plan{background:var(--card);padding:22px 20px}
.plan.rec{background:var(--teal-soft);position:relative}
.plan .p-name{font-family:var(--f-disp);font-size:17px;font-weight:600;letter-spacing:.05em}
.plan.rec .p-name{color:var(--teal)}
.plan .p-tag{font-size:10px;letter-spacing:.14em;color:var(--teal);border:1px solid var(--teal);padding:2px 7px;margin-left:9px;border-radius:var(--radius);vertical-align:2px}
.plan .p-price{font-size:26px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.plan .p-price .u{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.plan li{font-size:13px;color:var(--ink-2);padding-left:17px;position:relative;line-height:1.7}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--teal)}



/* =========================================================
   提供者（about.html）
   ========================================================= */
/* ============ 提供者 ============ */
.who{border:1px solid var(--rule);background:var(--card);padding:24px 20px;margin-top:22px}
.who .n{font-family:var(--f-disp);font-size:20px;font-weight:600;letter-spacing:.05em}
.who .r{font-size:12px;color:var(--ink-3);margin-top:4px;letter-spacing:.06em}
.who p{font-size:13.5px;color:var(--ink-2);line-height:1.85;margin-top:14px}
.contact{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft);font-size:13.5px}
.contact a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal);word-break:break-all}
.contact a:hover{background:var(--teal-soft)}

/* =========================================================
   写真・モーション・強調表現
   ========================================================= */

/* ---------- 写真ヒーロー ---------- */
.hero-photo{position:relative;overflow:hidden;background:#0A1113;isolation:isolate}
.hero-photo .bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
  filter:saturate(.62) contrast(1.04);
  transform:scale(1.04);
  animation:heroIn 1.4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes heroIn{from{transform:scale(1.12);opacity:.4}to{transform:scale(1.04);opacity:1}}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(8,17,19,.58) 0%,rgba(8,17,19,.80) 52%,rgba(8,17,19,.94) 100%);
}
.hero-photo .inner{
  position:relative;z-index:2;padding:70px 0 58px;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.80); --ink-3:rgba(255,255,255,.56);
  --rule:rgba(255,255,255,.22); --shu:#E08064;
}
.hero-photo .eyebrow{color:#6BD0C2}
.hero-photo h1{
  font-family:var(--f-disp);color:#fff;font-weight:600;
  font-size:clamp(28px,7.4vw,56px);line-height:1.38;letter-spacing:.005em;
  text-wrap:balance;max-width:15em;
}
.hero-photo .lead{color:rgba(255,255,255,.82);margin-top:26px;text-wrap:pretty}
.hero-photo .sign{color:rgba(255,255,255,.55);border-left-color:#E08064}
.hero-photo .note{color:rgba(255,255,255,.6)}
.hero-photo .btn{background:#fff;color:#0A1113;border-color:#fff}
.hero-photo .btn:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.hero-photo .credit{
  position:absolute;right:10px;bottom:8px;z-index:2;
  font-size:9.5px;color:rgba(255,255,255,.32);letter-spacing:.04em;
}

/* ---------- セクションを区切る写真帯 ---------- */
.band{position:relative;overflow:hidden;background:#0A1113;height:clamp(190px,44vw,320px)}
.band img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.03);display:block}
.band .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 22px 24px;
  background:linear-gradient(180deg,transparent,rgba(8,17,19,.88));
  color:#fff;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(17px,4.6vw,24px);line-height:1.6;text-wrap:balance;
}
.band .cap .in{max-width:716px;margin:0 auto;display:block}

/* ---------- 大きな数字 ---------- */
.stats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:30px}
@media(min-width:620px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--card);padding:26px 22px;transition:background .18s}
.stat:hover{background:var(--card-2)}
.stat .v{
  font-size:clamp(32px,8.4vw,44px);font-weight:700;line-height:1.08;
  color:var(--teal-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat .v .u{font-size:.42em;font-weight:600;margin-left:3px;letter-spacing:0}
.stat .k{font-size:12.5px;color:var(--ink-2);margin-top:12px;line-height:1.75}
.stat .s{font-size:10.5px;color:var(--ink-3);margin-top:7px}

/* ---------- 引き文（大きめの一文） ---------- */
.pull{
  font-family:var(--f-disp);font-size:clamp(20px,5.4vw,30px);
  line-height:1.7;font-weight:600;margin-top:34px;
  padding-left:20px;border-left:3px solid var(--teal);text-wrap:balance;
}

/* ---------- スクロールで現れる ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv-on .rv{transition:opacity .75s cubic-bezier(.22,.7,.3,1),transform .75s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1 !important;transform:none !important}}

/* ---------- ヘッダーのスクロール変化 ---------- */
.site{transition:box-shadow .22s ease, border-color .22s ease}
.site.scrolled{box-shadow:0 2px 16px -6px rgba(10,17,19,.22)}
:root[data-theme="dark"] .site.scrolled{box-shadow:0 2px 16px -4px rgba(0,0,0,.6)}

/* ---------- ホバーの手応え ---------- */
.points > div{transition:background .18s ease}
.points > div:hover{background:var(--card-2)}
.nextlink .arw{transition:transform .22s cubic-bezier(.22,.7,.3,1)}
.nextlink:hover .arw{transform:translateX(6px)}
.plan{transition:background .18s ease}
.faq summary{transition:background .15s ease}

/* =========================================================
   料金（成果報酬モデル）
   ========================================================= */

/* ---------- 「0円」を大きく見せる ---------- */
.zero{
  border:1px solid var(--rule);background:var(--card);
  padding:clamp(26px,7vw,40px) clamp(22px,5vw,34px);margin-top:28px;
}
.zero .lbl{font-size:12px;letter-spacing:.14em;color:var(--ink-3);font-weight:700}
.zero .big{
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(46px,15vw,88px);line-height:1.06;
  color:var(--ink);letter-spacing:-.01em;margin-top:14px;
}
.zero .big em{font-style:normal;font-size:.42em;color:var(--ink-2);margin-left:6px;font-weight:600}
.zero .sub{font-size:14.5px;color:var(--ink-2);margin-top:18px;line-height:1.95;max-width:26em}
.zero .sub b{color:var(--teal-text)}
.zero .head{flex-shrink:0}
@media(min-width:640px){
  .zero{display:inline-flex;align-items:center;gap:clamp(28px,5vw,44px);padding-right:clamp(28px,5vw,44px)}
  .zero .sub{margin-top:0;padding-left:clamp(28px,5vw,44px);border-left:1px solid var(--rule);max-width:24em}
}

/* ---------- 料金プラン（期間で料率が変わる） ---------- */
.tiers{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
@media(min-width:720px){.tiers{grid-template-columns:repeat(3,1fr);gap:16px}}
.tier{
  border:1px solid var(--rule);background:var(--card);
  padding:26px 22px 24px;position:relative;
  display:flex;flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
}
.tier:hover{border-color:var(--teal)}
.tier.best{border-color:var(--teal);border-width:2px;background:var(--teal-soft)}
.tier .badge{
  position:absolute;top:-1px;right:16px;transform:translateY(-50%);
  background:var(--teal);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;padding:4px 11px;white-space:nowrap;
}
:root[data-theme="dark"] .tier .badge{color:#08191A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tier .badge{color:#08191A}}
.tier .t-name{font-family:var(--f-disp);font-size:17px;font-weight:600;letter-spacing:.05em}
.tier .t-rate{
  font-size:clamp(40px,11vw,54px);font-weight:700;line-height:1.05;
  margin-top:12px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);
}
.tier.best .t-rate{color:var(--teal-text)}
.tier .t-rate .u{font-size:.36em;font-weight:600;margin-left:2px;letter-spacing:0}
.tier .t-of{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.7}
.tier .t-off{
  display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;
  color:var(--ai-text);border:1px solid var(--ai);padding:3px 9px;
}
.tier .t-note{font-size:13px;color:var(--ink-2);margin-top:16px;line-height:1.85;flex:1}
.tier .t-cancel{font-size:11.5px;color:var(--ink-3);margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft)}

/* ---------- 対象/対象外の対比 ---------- */
.scope{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
@media(min-width:600px){.scope{grid-template-columns:1fr 1fr}}
.scope > div{background:var(--card);padding:22px 20px}
.scope .h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;margin-bottom:12px}
.scope .h i{width:10px;height:10px;border-radius:50%;flex-shrink:0;font-style:normal}
.scope .yes .h{color:var(--teal-text)}
.scope .yes .h i{background:var(--teal)}
.scope .no .h{color:var(--ink-3)}
.scope .no .h i{background:var(--rule);border:1px solid var(--ink-3)}
.scope ul{list-style:none;display:grid;gap:9px}
.scope li{font-size:13px;color:var(--ink-2);line-height:1.7;padding-left:15px;position:relative}
.scope li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1.5px;background:var(--rule)}
.scope .d{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.8}

/* =========================================================
   ページごとにレイアウトの型を変える
   ========================================================= */

.wrap-wide{max-width:1040px;margin:0 auto;padding:0 22px}

/* --- 削り方：広い画面では見出しを左に固定して、本文だけ流す --- */
@media(min-width:900px){
  .sidehead{display:grid;grid-template-columns:290px 1fr;gap:48px;align-items:start}
  .sidehead > .sh-h{position:sticky;top:calc(var(--nav-h) + 32px)}
  .sidehead > .sh-b{min-width:0}
  .sidehead h2{font-size:25px;line-height:1.5}
}
.sidehead .sh-h .eyebrow{margin-bottom:10px}

/* --- 運営者：中央に寄せた読み物 --- */
.reading{max-width:760px;margin:0 auto;padding:0 22px}
.reading .lede{
  font-family:var(--f-disp);font-size:clamp(20px,5.4vw,27px);
  line-height:1.9;font-weight:600;text-wrap:balance;max-width:22em;
}
.reading p.t{font-size:15.5px;line-height:2.05;color:var(--ink-2);margin-top:26px;max-width:31em;text-wrap:pretty}
.reading p.t strong{color:var(--ink)}
.reading .rule{height:1px;background:var(--rule);margin:44px 0}
.reading .sig{
  margin-top:42px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--f-disp);font-size:17px;letter-spacing:.08em;
}
.reading .sig small{display:block;font-family:var(--f-body);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:8px}
.portrait{margin:38px 0 0}
.portrait img{width:100%;max-width:620px;display:block;filter:saturate(.68) contrast(1.02)}
.portrait figcaption{
  font-size:11.5px;color:var(--ink-3);margin-top:11px;
  padding-left:0;border-left:0;max-width:620px;text-align:right;
}
/* 固有名詞を途中で改行させない */
.nobr{white-space:nowrap}

/* --- 診断：見出しを詰めてツールを上に持ってくる --- */
.phead.tight{padding:32px 0 22px}
.phead.tight h1{font-size:clamp(23px,5.6vw,30px)}
.phead.tight .sub{margin-top:13px;font-size:14px}

/* セクション内に置く大見出し（料金ページなど、phead を使わないページ用） */
.page-h1{
  font-family:var(--f-disp);font-size:clamp(27px,7.2vw,42px);
  line-height:1.44;font-weight:600;text-wrap:balance;letter-spacing:.01em;
  margin-top:4px;
}
/* 狭い画面でだけ、意味の切れ目で改行する */
.brk{display:none}
@media(max-width:560px){ .brk{display:block} .page-h1{text-wrap:initial} }

/* =========================================================
   3段階（診断 → 削減 → 見張り）
   ========================================================= */
.phases{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
@media(min-width:760px){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{background:var(--card);padding:24px 22px;position:relative;display:flex;flex-direction:column}
.phase .pn{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);font-weight:700}
.phase .pt{font-family:var(--f-disp);font-size:19px;font-weight:600;margin-top:9px;letter-spacing:.04em}
.phase .pp{
  font-size:clamp(24px,6vw,30px);font-weight:700;line-height:1.2;margin-top:14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);
}
.phase .pp .u{font-size:.44em;font-weight:600;margin-left:2px;letter-spacing:0;color:var(--ink-2)}
.phase .pw{font-size:11.5px;color:var(--ink-3);margin-top:7px}
.phase .pd{font-size:13px;color:var(--ink-2);margin-top:14px;line-height:1.8;flex:1}
.phase.p1 .pp{color:var(--ink-3)}
.phase.p2{background:var(--teal-soft)}
.phase.p2 .pp{color:var(--teal-text)}
.phase.p2 .pn{color:var(--teal-text)}
.phase.p3{background:var(--ai-soft)}
.phase.p3 .pp{color:var(--ai-text)}
.phase.p3 .pn{color:var(--ai-text)}

/* 見張りプランの内訳 */
.watch{border:1px solid var(--ai);background:var(--ai-soft);padding:24px 22px;margin-top:26px}
.watch .k{font-size:11.5px;letter-spacing:.12em;color:var(--ai-text);font-weight:700;margin-bottom:12px}
.watch .price{font-size:clamp(30px,8vw,40px);font-weight:700;line-height:1.15;color:var(--ai-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.watch .price .u{font-size:.36em;font-weight:600;margin-left:3px;letter-spacing:0}
.watch ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.watch li{font-size:13.5px;color:var(--ink-2);padding-left:18px;position:relative;line-height:1.8}
.watch li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1.5px;background:var(--ai)}
.watch li b{color:var(--ink)}
.watch .note-b{font-size:13px;color:var(--ink);margin-top:18px;padding-top:16px;border-top:1px solid var(--ai);line-height:1.85}

/* =========================================================
   自社コストの公開（運営者ページ）
   ========================================================= */
.owncost{border:1px solid var(--rule);background:var(--card);margin-top:26px;max-width:520px}
.owncost .h{
  padding:15px 18px;border-bottom:1px solid var(--rule);background:var(--card-2);
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);font-weight:700;
}
.owncost table{min-width:0;width:100%}
.owncost td{padding:11px 18px;font-size:13.5px;border-bottom:1px solid var(--rule-soft)}
.owncost td:last-child{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.owncost tr.total td{
  border-bottom:0;border-top:2px solid var(--ink);background:var(--card-2);
  font-weight:700;padding-top:13px;padding-bottom:13px;
}
.owncost tr.total td:last-child{font-size:16px}
.owncost .note{padding:14px 18px;font-size:12px;color:var(--ink-3);line-height:1.8;border-top:1px solid var(--rule-soft)}

/* 結果の共有 */
.share-box{
  border:1px solid var(--ai);background:var(--ai-soft);
  padding:20px 22px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.share-box p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin:0;max-width:24em}
.share-box p strong{color:var(--ink)}
.share-box .btn-ghost{border-color:var(--ai);color:var(--ai-text);flex-shrink:0}
.share-box .btn-ghost:hover{background:var(--card);border-color:var(--ai-text)}