/* =====================================================================
   2026-11 HP改善 第1回（下書き）：温かい白＋深緑。実物の画面を見せる。
   対象は .b2 の中だけ。ヘッダーは .hd-ed の変数を上書きして合わせる。
   ===================================================================== */
body:has(.b2){
  --b-bg:#FAF8F3;--b-alt:#F2EFE7;--b-card:#FFFFFF;--b-ink:#1A1D1B;--b-sub:#5C605B;--b-line:#E2DDD1;
  --b-g:#1F5A3A;--b-g2:#2E7650;--b-gs:#E8F0EA;--b-warn:#A8461F;
  --e-bg:var(--b-bg);
  background:var(--b-bg)}
html.dark body:has(.b2){
  --b-bg:#111412;--b-alt:#171B18;--b-card:#1C211E;--b-ink:#ECEDE8;--b-sub:#A6ABA5;--b-line:#2D332F;
  --b-g:#8BC49C;--b-g2:#A6D6B4;--b-gs:#1E2B23;--b-warn:#E59A78}
.b2{color:var(--b-ink);font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-feature-settings:"palt";line-height:1.8}
.b2 .nb{display:inline-block}
.b2 h1,.b2 h2,.b2 h3,.b2 p,.b2 ul,.b2 ol,.b2 dl,.b2 dd,.b2 figure{margin:0;padding:0}
.b2 ul,.b2 ol{list-style:none}
.hd-ed .hd-cta{background:var(--b-g)!important;color:#fff!important}

/* ボタン */
.b-btn{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;min-height:56px;padding:12px 26px;background:var(--b-g);color:#fff;font-weight:700;font-size:1.02rem;line-height:1.4;border-radius:6px;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s}
.b-btn:hover{background:var(--b-g2)}
html.dark .b-btn{color:#0F1511}
.b-btn svg{flex:none}
.b-btn.wide{width:100%}
.b-btn.inv{background:#fff;color:var(--b-g)}
html.dark .b-btn.inv{background:var(--b-g);color:#0F1511}
.b-btn:focus-visible,.b-chip input:focus-visible+span,.b-fld input:focus-visible,.b-fld textarea:focus-visible{outline:3px solid var(--b-g2);outline-offset:2px}

/* ヒーロー */
.b-hero{padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px);border-bottom:1px solid var(--b-line)}
.b-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.b-eye{font-size:.9rem;font-weight:700;color:var(--b-g);letter-spacing:.04em}
.b-h1{font-weight:900;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.28;letter-spacing:-.02em;margin-top:12px!important}
.b-sub{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--b-sub);margin-top:18px!important}
.b-acts{margin-top:26px}
.b-assure{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.88rem;color:var(--b-sub);margin-top:14px!important}
.b-assure svg{color:var(--b-g)}
.b-assure span{display:inline-flex;align-items:center;gap:6px;margin-right:10px}
.b-strong{margin-top:22px!important}
.b-strong a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--b-g);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* 完成画面の見本 */
.b-shots{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);gap:10px;align-items:center;background:var(--b-alt);border:1px solid var(--b-line);border-radius:14px;padding:clamp(14px,2.4vw,26px)}
.b-shots figcaption{grid-column:1/-1;font-size:.78rem;color:var(--b-sub);margin-top:6px}
.b-phone,.b-pc{background:var(--b-card);border:1px solid var(--b-line);box-shadow:0 10px 28px -16px rgba(30,40,30,.35);font-size:.8rem;line-height:1.5}
.b-phone{border-radius:18px;padding:14px 12px 16px;border-width:6px;border-color:var(--b-ink)}
.b-pc{border-radius:8px;padding:14px}
.b-scr-t{font-weight:900;font-size:.9rem;display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--b-ink);padding-bottom:6px;margin-bottom:8px!important}
.b-scr-t small{font-weight:500;font-size:.7rem;color:var(--b-sub)}
.b-f{border:1px solid var(--b-line);border-radius:6px;padding:5px 8px;margin-bottom:6px}
.b-f small{display:block;font-size:.66rem;color:var(--b-sub)}
.b-f b{font-family:'Inter','Zen Kaku Gothic New',sans-serif;font-size:.86rem}
.b-f.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;padding:0}
.b-f.two>div{border:1px solid var(--b-line);border-radius:6px;padding:5px 8px}
.b2 .w{color:var(--b-warn)}
.b-sbtn{display:block;text-align:center;background:var(--b-g);color:#fff;font-weight:700;border-radius:6px;padding:7px;margin-top:8px}
html.dark .b-sbtn{color:#0F1511}
.b-arrow{color:var(--b-g)}
.b-tbl{width:100%;border-collapse:collapse;font-family:'Inter','Zen Kaku Gothic New',sans-serif;font-size:.76rem}
.b-tbl th{font-weight:700;color:var(--b-sub);text-align:right;padding:4px 4px;border-bottom:1px solid var(--b-line);white-space:nowrap}
.b-tbl td{text-align:right;padding:5px 4px;border-bottom:1px solid var(--b-line);white-space:nowrap}
.b-tbl th:first-child,.b-tbl td:first-child{text-align:left}
.b-bars{display:flex;align-items:flex-end;gap:10px;height:56px;margin-top:10px;position:relative}
.b-bars i{display:block;width:22px;height:var(--h);background:var(--b-g);border-radius:3px 3px 0 0;opacity:.85}
.b-bars i.w{background:var(--b-warn)}
.b-bars span{margin-left:auto;font-size:.68rem;color:var(--b-sub);align-self:flex-start}

/* セクション共通 */
.b-sec{padding:clamp(56px,8vw,104px) 0}
.b-sec.alt{background:var(--b-alt)}
.b-h2{font-weight:900;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.4;letter-spacing:-.01em}
.b-lead{color:var(--b-sub);font-size:1.02rem;margin-top:12px!important;max-width:44em}
.b-small{font-size:.86rem;color:var(--b-sub);margin-top:12px!important}
.b-small.c{text-align:center}
.b-note{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--b-sub);margin-top:22px!important}
.b-note svg{flex:none;margin-top:5px;color:var(--b-g)}

/* 困りごとの流れ */
.b-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px!important;counter-reset:f}
.b-flow li{background:var(--b-card);border:1px solid var(--b-line);border-radius:10px;padding:18px;position:relative}
.b-flow li+li::before{content:"";position:absolute;left:-12px;top:30px;width:12px;height:2px;background:var(--b-g)}
.b-flow b{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:900}
.b-flow b span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--b-gs);color:var(--b-g);font:700 .85rem/1 'Inter',sans-serif}
.b-flow p{font-size:.92rem;color:var(--b-sub);margin-top:8px!important}
.b-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.b-kinds p{font-size:.9rem;color:var(--b-sub);border-top:2px solid var(--b-ink);padding-top:10px}
.b-kinds b{display:block;color:var(--b-ink);font-size:1rem}

/* 改善前と後 */
.b-ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.b-col{background:var(--b-card);border:1px solid var(--b-line);border-radius:12px;padding:22px}
.b-col.after{border:2px solid var(--b-g)}
.b-tag{font-weight:900;font-size:.95rem;margin-bottom:10px!important}
.b-col.after .b-tag{color:var(--b-g)}
.b-col li{padding:10px 0 10px 26px;border-top:1px solid var(--b-line);position:relative;font-size:.98rem}
.b-col li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:10px;border-radius:50%;border:2px solid var(--b-sub)}
.b-col.after li::before{border-color:var(--b-g);background:var(--b-g)}
.b-col li.gone{color:var(--b-g);font-weight:700}

/* 得意分野 */
.b-tokui{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.b-list li{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--b-line);font-weight:700}
.b-list li svg{flex:none;margin-top:6px;color:var(--b-g)}
.b-list.sm li{font-weight:500;font-size:.92rem;padding:8px 0}

/* 料金 */
.b-draft{display:inline-block;margin-top:16px!important;font-size:.8rem;font-weight:700;color:var(--b-warn);border:1px dashed var(--b-warn);border-radius:4px;padding:3px 10px}
.b-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.b-plan{background:var(--b-card);border:1px solid var(--b-line);border-radius:12px;padding:22px;display:flex;flex-direction:column}
.b-plan.hl{border:2px solid var(--b-g)}
.b-pn{font-weight:900}
.b-pp{font:900 clamp(1.8rem,3vw,2.3rem)/1.1 'Inter','Zen Kaku Gothic New',sans-serif;letter-spacing:-.02em;margin:10px 0!important}
.b-pp small{font-size:.45em;font-weight:700;margin-left:2px}
.b-plan>p:not(.b-pn):not(.b-pp):not(.b-mt){font-size:.9rem;color:var(--b-sub)}
.b-mt{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--b-line);font-weight:700;font-size:.9rem;color:var(--b-g)}
.b-plan>p:nth-child(3){margin-bottom:14px!important}
.b-terms{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:22px!important}
.b-terms>div{display:grid;grid-template-columns:8.5em 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--b-line);font-size:.9rem}
.b-terms dt{font-weight:700}
.b-terms dd{color:var(--b-sub)}
.b-tbd{font-style:normal;color:var(--b-warn);font-weight:700;border-bottom:1px dashed}
.b-others{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.b-others p{background:var(--b-card);border:1px solid var(--b-line);border-radius:10px;padding:14px 18px;font-size:.9rem;color:var(--b-sub)}
.b-others b{display:block;color:var(--b-ink)}
.b-others a{color:var(--b-g);font-weight:700}

/* 流れ */
.b-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px!important}
.b-steps li{border-top:3px solid var(--b-g);padding-top:12px}
.b-steps li>span{font:900 1.3rem/1 'Inter',sans-serif;color:var(--b-g)}
.b-steps b{display:block;font-weight:900;margin-top:6px}
.b-steps p{font-size:.84rem;color:var(--b-sub);margin-top:4px!important;line-height:1.7}

/* 相談フォーム */
.b-form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
.b-form{background:var(--b-card);border:1px solid var(--b-line);border-radius:14px;padding:clamp(18px,3vw,32px);position:relative}
.b-form fieldset{border:0;padding:0;margin:0 0 22px}
.b-form legend{font-weight:900;margin-bottom:10px;padding:0}
.b-form legend small{font-weight:500;font-size:.78rem;color:var(--b-sub);margin-left:8px}
.b-chips{display:flex;flex-wrap:wrap;gap:8px}
.b-chip{position:relative;cursor:pointer}
.b-chip input{position:absolute;opacity:0;width:1px;height:1px}
.b-chip span{display:inline-block;padding:9px 14px;border:1.5px solid var(--b-line);border-radius:999px;font-size:.9rem;line-height:1.3;background:var(--b-bg);transition:border-color .15s,background-color .15s}
.b-chip:hover span{border-color:var(--b-g)}
.b-chip input:checked+span{background:var(--b-g);border-color:var(--b-g);color:#fff;font-weight:700}
html.dark .b-chip input:checked+span{color:#0F1511}
.b-fld{margin-bottom:16px}
.b-fld label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.b-fld .req,.b-fld .opt{font-size:.72rem;font-weight:700;margin-left:8px;padding:1px 6px;border-radius:3px}
.b-fld .req{background:var(--b-g);color:#fff}
html.dark .b-fld .req{color:#0F1511}
.b-fld .opt{border:1px solid var(--b-line);color:var(--b-sub)}
.b-fld input,.b-fld textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:11px 12px;border:1.5px solid var(--b-line);border-radius:8px;background:var(--b-bg);color:var(--b-ink)}
.b-fld input[aria-invalid="true"]{border-color:var(--b-warn)}
.b-status{min-height:1.6em;margin-top:12px!important;font-size:.92rem;font-weight:700;text-align:center}
.b-status.err{color:var(--b-warn)}
.b-status.info{color:var(--b-sub)}
.b-done{background:var(--b-card);border:2px solid var(--b-g);border-radius:14px;padding:32px;text-align:center}
.b-done>span{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--b-gs);color:var(--b-g)}
.b-done h3{font-weight:900;font-size:1.3rem;margin-top:10px!important}
.b-done p{color:var(--b-sub);margin-top:6px!important}

/* 締め */
.b-close{background:var(--b-g);color:#fff;padding:clamp(48px,7vw,88px) 0;text-align:center}
html.dark .b-close{background:#16261C}
.b-brand{font-weight:900;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.4;margin-bottom:24px!important}

/* スマホ・タブレット */
@media(max-width:1024px){
  .b-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
}
@media(max-width:900px){
  .b-hero-in,.b-tokui,.b-form-wrap{grid-template-columns:1fr}
  .b-flow{grid-template-columns:1fr 1fr}
  .b-flow li:nth-child(3)::before{display:none}
  .b-plans{grid-template-columns:1fr}
  .b-terms{grid-template-columns:1fr}
}
@media(max-width:600px){
  .b-shots{grid-template-columns:1fr;gap:8px}
  .b-arrow{justify-self:center;transform:rotate(90deg)}
  .b-phone{max-width:300px;justify-self:center;width:100%;box-sizing:border-box}
  .b-flow{grid-template-columns:1fr}
  .b-flow li+li::before{left:30px;top:-12px;width:2px;height:12px}
  .b-kinds,.b-ba,.b-others{grid-template-columns:1fr}
  .b-steps{grid-template-columns:1fr}
  .b-terms>div{grid-template-columns:1fr;gap:2px}
  .b-btn:not(.wide){width:100%}
}
@media(prefers-reduced-motion:reduce){.b2 *{transition:none!important}}

.b-mt small{display:block;font-weight:500;font-size:.8rem;color:var(--b-sub);margin-top:4px}
.b2 p,.b2 li,.b2 dd{text-wrap:pretty}

/* 前のトップ（活字のインパクト）との合体 */
.b2 .e-hero{border-bottom:0}
.b2 .b-hero{background:var(--b-alt);border-top:2px solid var(--e-line)}
.b2 .e-jobs{background:var(--b-bg)}

/* 2026-11-06 最初の画面の約束1行 */
.e-lead{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:700;line-height:1.7;margin-top:18px!important;color:var(--e-ink,inherit)}