:root{
  --bg:#FFFEF8; --paper:#FFFFFF; --cream:#FFF6DA; --yellow:#F9C94A; --yellow-deep:#E8AE12;
  --ink:#333027; --sub:#6B6553; --line:#EDE4C8; --green:#06C755; --green-ink:#FFFFFF;
  --note:#FFF0B8;
  --side:248px;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.85;margin:0}
a{color:inherit}
h1,h2,h3{word-break:keep-all;overflow-wrap:anywhere;font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;text-wrap:balance;margin:0;line-height:1.45}
.note{background:var(--note);font-size:12px;padding:6px 16px;text-align:center;color:#5a4a10}
/* ---------- sidebar (PC) ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--paper);border-right:1px solid var(--line);padding:28px 22px;display:flex;flex-direction:column;gap:22px;z-index:5}
.side .logo img{width:170px;display:block}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{text-decoration:none;font-weight:700;font-size:14px;padding:8px 10px;border-radius:8px}
.side nav a:hover,.side nav a:focus-visible{background:var(--cream);outline:none}
.side nav a.cur{background:var(--cream)}
.side .sbtn{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.side .sbtn .btn{flex-direction:column;gap:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:999px;padding:14px 26px;font-size:15px;line-height:1.3;text-align:center}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn-line{background:var(--green);color:var(--green-ink)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink);background:transparent}
.btn small{display:block;font-size:11px;font-weight:500;opacity:.9}
.arrow{font-family:sans-serif}
/* ---------- top bar (SP) ---------- */
.topbar{display:none}
main{margin-left:var(--side)}
.wrap{max-width:1040px;margin:0 auto;padding-inline:40px}
section{padding-block:72px}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--yellow-deep)}
.h2{font-size:clamp(22px,2.6vw,30px);margin-top:6px}
.lead{color:var(--sub);max-width:40em;margin-top:12px}
/* hero */
.hero{background:var(--yellow);padding-block:0}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:24px;align-items:end;padding-top:56px}
.hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:900}
.hero h1 .mark{background:linear-gradient(transparent 62%,#fff 62%)}
.hero p.sub{margin-top:18px;font-size:16px;font-weight:500;max-width:30em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-bottom:56px}
.hero .ill{align-self:end;justify-self:center}
.hero .ill img{width:min(340px,100%);display:block}
.kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kw span{background:rgba(255,255,255,.7);border-radius:6px;font-size:12px;font-weight:700;padding:3px 10px}
/* proof */
.proof{background:var(--paper);border-bottom:1px solid var(--line);padding-block:28px}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--yellow)}
.stat b{font-family:"Zen Maru Gothic",sans-serif;font-size:30px;line-height:1.2;font-variant-numeric:tabular-nums}
.stat b small{font-size:14px;margin-left:2px}
.stat span{font-size:12px;color:var(--sub);line-height:1.5}
/* roadmap */
.road{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:34px;position:relative;counter-reset:s}
.road::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:3px;background:var(--line)}
.road a{position:relative;text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-inline:4px}
.road .n{width:46px;height:46px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:18px;border:4px solid var(--bg)}
.road .t{font-weight:700;font-size:14px;line-height:1.5}
.road .d{font-size:12px;color:var(--sub);line-height:1.6}
.road a > div{display:flex;flex-direction:column;gap:2px}
.road a:hover .n{background:var(--ink);color:var(--yellow)}
.road-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.road-cta p{font-size:13px;color:var(--sub);margin:0}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.pillar .tag{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.06em}
.pillar h3{font-size:19px}
.pillar ul{margin:0;padding-left:1.1em;font-size:13px;color:var(--sub);line-height:1.8}
.pillar .more{margin-top:auto;font-weight:700;font-size:13px;border-top:1px dashed var(--line);padding-top:10px}
.pillar:hover{border-color:var(--yellow-deep)}
/* strength */
.strength{background:var(--cream)}
.str-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.str-grid figure{margin:0;display:flex;flex-direction:column;gap:12px}
.str-grid img{height:120px;width:auto;object-fit:contain;align-self:flex-start}
.str-grid h3{font-size:17px}
.str-grid p{margin:0;font-size:14px;color:var(--sub)}
/* video funnel */
.video{background:var(--ink);color:#fff}
.video .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.video .eyebrow{color:var(--yellow)}
.video .lead{color:#DCD6C4}
.player{aspect-ratio:16/9;max-width:100%;border-radius:12px;background:#4a463b;display:grid;place-items:center;position:relative;overflow:hidden}
.player::after{content:"約60分";position:absolute;right:12px;bottom:10px;font-size:12px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:4px}
.play{width:68px;height:68px;border-radius:50%;background:var(--yellow);display:grid;place-items:center}
.play i{width:0;height:0;border-left:20px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.flow{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.flow li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.flow li b{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:14px}
.flow li span{font-size:14px;color:#EFEAD9}
.flow li span strong{color:#fff}
.video .btn{margin-top:24px}
/* articles */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.art{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.thumb{aspect-ratio:16/9;max-width:100%;border-radius:10px;background:var(--cream);border:1px solid var(--line);display:flex;align-items:flex-end;padding:12px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:17px;line-height:1.4}
.art .cat{font-size:11px;font-weight:700;color:var(--yellow-deep)}
.art h3{font-size:15px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700}
.art time{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cats a{font-size:13px;font-weight:700;text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 14px}
/* faq */
.faq{margin-top:24px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;gap:10px}
.faq summary::before{content:"Q";color:var(--yellow-deep);font-family:"Zen Maru Gothic",sans-serif;font-weight:900}
.faq details p{margin:10px 0 0;color:var(--sub);font-size:14px}
/* final cta */
.final{background:var(--yellow);text-align:center}
.final h2{font-size:clamp(22px,2.6vw,30px)}
.final p{margin:12px auto 0;max-width:34em}
.final .btn{margin-top:22px}
footer{background:var(--paper);border-top:1px solid var(--line);padding-block:40px;font-size:13px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
footer dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
footer dt{color:var(--sub)}
footer dd{margin:0}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
footer a{text-decoration:none}
footer .copy{grid-column:1/-1;color:var(--sub);font-size:12px;border-top:1px solid var(--line);padding-top:16px}
.spbar{display:none}

/* ---------- tablet / phone ---------- */
@media (max-width:960px){
  .side{display:none}
  main{margin-left:0}
  .topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px;align-items:center;gap:12px}
  .topbar img{height:40px;width:auto;display:block}
  .topbar nav{display:flex;gap:4px;overflow-x:auto;margin-left:auto;scrollbar-width:none}
  .topbar nav a{white-space:nowrap;text-decoration:none;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--cream)}
  .wrap{padding-inline:20px}
  .road{grid-template-columns:1fr;gap:14px}
  .road::before{left:22px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .road a{flex-direction:row;text-align:left;align-items:flex-start;gap:14px}
  .road .n{flex:none}
  .pillars,.arts,.str-grid{grid-template-columns:1fr}
  .video .wrap{grid-template-columns:1fr}
  .proof .wrap{grid-template-columns:repeat(2,1fr);row-gap:20px}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:14.5px}
  section{padding-block:52px}
  .hero .wrap{grid-template-columns:1fr;padding-top:34px;gap:0}
  .hero .ctas{padding-bottom:10px}
  .hero .ctas .btn{width:100%}
  .hero .ill img{width:240px}
  .topbar nav{display:none}
  .spbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:7;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,254,248,.96);border-top:1px solid var(--line)}
  .spbar .btn{flex:1;padding:12px 10px;font-size:14px}
  footer{padding-bottom:110px}
  .str-grid img{height:96px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.pillar,.road .n{transition:background-color .2s,border-color .2s,color .2s}
}

/* ---------- 下層ページ共通 ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.crumbs{font-size:12px;color:var(--sub);padding-top:20px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}
.phead{background:var(--cream);border-bottom:1px solid var(--line)}
.phead .wrap{padding-block:18px 36px}
.phead h1{font-size:clamp(24px,3vw,34px);font-weight:900;margin-top:10px}
.phead .meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--sub);margin-top:12px;font-variant-numeric:tabular-nums}
.phead .meta .cat{background:var(--yellow);color:var(--ink);font-weight:700;border-radius:4px;padding:0 8px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding-block:44px 72px}
.layout.single{grid-template-columns:minmax(0,1fr)}
/* 記事本文 */
.prose{max-width:720px;font-size:16px;line-height:2}
.prose > *+*{margin-top:1em}
.prose p{margin:0}
.prose h2{font-size:22px;margin-top:2.4em;padding:10px 14px;background:var(--cream);border-left:6px solid var(--yellow)}
.prose h3{font-size:18px;margin-top:2em;padding-bottom:6px;border-bottom:2px solid var(--line)}
.prose h4{font-size:16px;margin-top:1.6em}
.prose img{height:auto;border-radius:8px}
.prose ul,.prose ol{padding-left:1.4em}
.prose table{border-collapse:collapse;width:100%;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;vertical-align:top}
.prose th{background:var(--cream)}
.prose .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .tbl table{min-width:540px}
.prose td:first-child{font-weight:700}
.prose a{color:#8A5A00;text-underline-offset:3px}
.prose blockquote{margin:0;padding:12px 16px;border-left:4px solid var(--line);color:var(--sub)}
.prose .yt{position:relative;aspect-ratio:16/9;max-width:100%}
.prose .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}
.prose .lead-box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.prose .todo{background:var(--note);border-radius:8px;padding:10px 14px;font-size:13px}
.eyecatch{border-radius:12px;max-width:100%;height:auto;display:block}
/* 記事下のCTA */
.cta-box{margin-top:48px;background:var(--yellow);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:10px;max-width:720px}
.cta-box h2{font-size:20px}
.cta-box p{margin:0;font-size:14px}
.cta-box .btn{align-self:flex-start}
/* サイドバー（記事） */
.aside{display:flex;flex-direction:column;gap:24px;font-size:14px}
.aside h2{font-size:15px;border-bottom:2px solid var(--yellow);padding-bottom:6px}
.aside ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.aside a{text-decoration:none}
.aside .mini{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
/* 一覧 */
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art .thumb.img{padding:0;overflow:hidden}
.art .thumb.img img{width:100%;height:100%;object-fit:cover;display:block}
/* ステップ前後リンク */
.stepnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;max-width:720px}
.stepnav a{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:14px 16px;text-decoration:none;font-weight:700;font-size:14px;display:flex;flex-direction:column;gap:2px}
.stepnav a span{font-size:11px;color:var(--sub);font-weight:500}
.stepnav .next{text-align:right;grid-column:2}
/* 会社概要など */
.dl{display:grid;grid-template-columns:9em 1fr;border-top:1px solid var(--line);max-width:720px}
.dl dt,.dl dd{margin:0;padding:14px 10px;border-bottom:1px solid var(--line)}
.dl dt{font-weight:700;background:var(--cream)}
.draft-banner{background:#FFE1E1;color:#7A1F1F;text-align:center;font-size:12px;padding:6px 16px}
@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .list{grid-template-columns:1fr}
  .prose{font-size:15.5px}
  .prose h2{font-size:19px}
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0}
  .stepnav{grid-template-columns:1fr}
  .stepnav .next{grid-column:1}
}
/* 左メニューがある幅でも本文を狭くしすぎない：関連欄は本文の下へ */
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .aside{max-width:720px}
}

.prose .checked{display:inline-block;font-size:13px;font-weight:700;background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:2px 10px;font-variant-numeric:tabular-nums}

/* ---------- 2026-10-11 オーナー修正：LINE特典を強く ---------- */
.eyebrow-hero{display:inline-block;background:#fff;border-radius:999px;padding:4px 14px;font-weight:900;font-size:13px;margin:0 0 14px;letter-spacing:.04em}
.btn-xl{padding:18px 30px;font-size:17px;box-shadow:0 6px 0 #04913f;flex-direction:column;gap:2px;line-height:1.4}
.btn-xl small{font-size:12px;font-weight:500;opacity:.95}
.btn-xl:hover{transform:translateY(2px);box-shadow:0 4px 0 #04913f}
.btn-line:not(.btn-xl){box-shadow:0 4px 0 #04913f}
@media (prefers-reduced-motion:no-preference){.btn-xl{transition:transform .15s,box-shadow .15s}}
.proof.one .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.proof-note{margin:0;color:var(--sub);font-size:14px}
.offer-sec{background:var(--cream)}
.offer{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:26px}
.offer-main,.offer-bonus{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.offer-main{border-color:var(--green)}
.offer .tag{align-self:flex-start;font-size:12px;font-weight:900;border-radius:6px;padding:2px 10px;background:var(--green);color:#fff}
.offer-bonus .tag{background:var(--yellow);color:var(--ink)}
.offer h3{font-size:20px}
.offer ul{margin:0;padding-left:1.2em;color:var(--sub);font-size:14px}
.offer p{margin:0;color:var(--sub);font-size:14px}
.offer-btn{grid-column:1/-1;justify-self:center}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:24px}
.clip{margin:0;display:flex;flex-direction:column;gap:8px}
.clip figcaption{font-size:14px;font-weight:700;line-height:1.5}
.clip-v{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:12px;overflow:hidden;background:var(--ink)}
.clip-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-v.placeholder{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#efe6c9 0 12px,#f6efd9 12px 24px);color:var(--sub);text-align:center;font-weight:700;font-size:14px}
.clip-v.placeholder small{font-weight:500;font-variant-numeric:tabular-nums}
.cta-mid{margin:2.2em 0;background:var(--cream);border:2px solid var(--green);border-radius:14px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cta-mid p{margin:0;flex:1 1 260px;font-weight:700;font-size:15px;line-height:1.7}
.cta-mid .btn{flex:0 0 auto}
.prose .cta-mid a.btn{color:#fff;text-decoration:none}
@media (max-width:960px){.offer{grid-template-columns:1fr}}
@media (max-width:640px){.btn-xl{width:100%;font-size:16px;padding:16px 18px}.clips{grid-template-columns:repeat(2,1fr)}}
/* 大きいボタンは矢印を文字の中に収める／ちょい見せはウェビナーの横長（16:9）、ショートだけ縦長 */
.btn-xl .arrow{display:none}
.btn-xl::after{content:"";}
.clips.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.clips.wide .clip-v{aspect-ratio:16/9}
.clips.shorts{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (max-width:640px){.clips.wide{grid-template-columns:1fr}.clips.shorts{grid-template-columns:repeat(2,1fr)}}
.prose td:first-child,.prose th:first-child{white-space:nowrap}
.clip-v video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.clip .clip-btn{align-self:flex-start;font-size:13px;padding:9px 16px}
