/* =========================================================
   CAIO代行 ＆ 自走AI組織構築プラン LP
   株式会社クローバ経営研究所
========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --gold:#c9861f;
  --gold-lt:#d9971f;
  --bg0:#fffaf2;
  --bg1:#fff8ec;
  --bg2:#fef2de;
  --card:#ffffff;
  --ink:#2c2416;
  --tx:#4a3f2e;
  --tx2:#8c7c62;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg0); color:var(--tx); line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Noto Serif JP',serif; line-height:1.5; }
a{ color:var(--gold); }
img{ max-width:100%; }
.container{ max-width:1160px; margin:0 auto; padding:0 22px; }

/* ---------- 共通パーツ ---------- */
.sec{ padding:90px 0; }
.sec-dark{ background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%); }
.sec-soft{ background:var(--bg0); }
.sec-gold{ background:linear-gradient(180deg,#fff6e0 0%,#ffecc4 100%); }

.sec-title{
  text-align:center; font-size:clamp(26px,4.2vw,42px); font-weight:900;
  margin-bottom:26px; color:var(--ink);
}
.sec-title .sub{
  display:block; font-size:clamp(13px,1.8vw,17px); font-weight:400;
  color:var(--gold); letter-spacing:2px; margin-bottom:12px;
}
.sec-lead{
  text-align:center; max-width:820px; margin:0 auto 48px;
  color:var(--tx); font-size:16px; line-height:2;
}
.sec-lead strong{ color:var(--gold); }
.sec-note{ text-align:center; margin-top:34px; color:var(--tx2); font-size:13.5px; }
.badge-wrap{ text-align:center; }
.badge{
  display:inline-block; background:var(--gold); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:1px;
  padding:5px 16px; border-radius:20px; margin-bottom:16px;
}
.mini-title{
  text-align:center; font-size:clamp(19px,2.6vw,25px); color:var(--ink);
  margin:64px 0 28px;
}
.mini-title::after{
  content:""; display:block; width:48px; height:2px; background:var(--gold);
  margin:14px auto 0;
}

.btn{
  display:inline-block; text-decoration:none; border-radius:12px;
  padding:17px 30px; font-weight:800; font-size:16px; line-height:1.55;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn small{ display:block; font-weight:500; font-size:12px; opacity:.78; margin-top:5px; }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-lt) 100%);
  color:#fff; box-shadow:0 10px 30px rgba(201,134,31,.28);
}
.btn-ghost{
  border:1px solid rgba(201,134,31,.5); color:var(--gold);
  background:rgba(201,134,31,.06);
}
.btn-ghost:hover{ background:rgba(201,134,31,.14); }
.btn-block{ display:block; max-width:600px; margin:30px auto 0; text-align:center; }
.btn-lg{ font-size:19px; padding:21px 44px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; padding:110px 0 90px;
  background:
    radial-gradient(circle at 82% 22%, rgba(217,151,31,.20) 0%, transparent 55%),
    radial-gradient(circle at 10% 85%, rgba(217,151,31,.10) 0%, transparent 50%),
    linear-gradient(135deg,#fffaf0 0%,#fff2da 100%);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(201,134,31,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(201,134,31,.06) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 70% 40%,#000 0%,transparent 70%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center;
}
.hero-visual img{
  display:block; width:100%; border-radius:20px;
  box-shadow:0 24px 54px rgba(120,84,20,.22);
  border:1px solid rgba(201,134,31,.28);
}
.hero-label{
  display:inline-block; background:var(--gold); color:#fff;
  font-weight:800; font-size:13px; letter-spacing:1px;
  padding:8px 22px; border-radius:30px; margin-bottom:26px;
}
.hero h1{
  font-size:clamp(28px,5.2vw,52px); font-weight:900; margin-bottom:26px;
  background:linear-gradient(120deg,var(--ink) 0%,var(--gold-lt) 60%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .h1-sub{
  display:block; -webkit-text-fill-color:var(--gold); color:var(--gold);
  font-size:clamp(14px,2.2vw,20px); font-weight:600; letter-spacing:2px; margin-bottom:14px;
}
.hero-lead{ font-size:clamp(17px,2.4vw,22px); margin-bottom:28px; color:var(--ink); }
.hero-lead strong{ color:var(--gold); }
.hero-points{ list-style:none; display:flex; flex-direction:column; gap:10px; max-width:700px; }
.hero-points li{ position:relative; padding-left:28px; color:var(--tx); font-size:15.5px; }
.hero-points li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:900; }
.hero-points strong{ color:var(--gold); }

.hero-price{
  display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap;
  margin:34px 0 30px; padding:22px 26px;
  background:rgba(201,134,31,.08); border:1px solid rgba(201,134,31,.3); border-radius:14px;
  max-width:700px;
}
.hp-item{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.hp-tag{
  display:block; width:100%; font-size:12px; font-weight:700;
  color:var(--gold); letter-spacing:1px; margin-bottom:2px;
}
.hp-num{ font-family:'Noto Serif JP',serif; font-size:44px; font-weight:900; color:var(--gold-lt); line-height:1; }
.hp-unit{ font-size:14px; color:var(--tx); }
.hp-sep{ color:rgba(44,36,22,.2); font-size:24px; padding-bottom:6px; }

.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---------- カードグリッド ---------- */
.grid4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.card{
  background:var(--card); border:1px solid rgba(201,134,31,.18); border-radius:16px;
  padding:26px 22px; box-shadow:0 3px 16px rgba(120,84,20,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(201,134,31,.18); }
.card .ico{ font-size:30px; line-height:1; margin-bottom:12px; }
.card h3{ font-size:18px; color:var(--ink); margin-bottom:8px; }
.card p{ color:var(--tx); font-size:14.5px; line-height:1.85; }
.card-lg{ padding:30px 26px; }
.card .ph{
  display:inline-block; background:rgba(201,134,31,.14); color:var(--gold);
  font-size:12px; font-weight:800; padding:4px 14px; border-radius:20px; margin-bottom:12px;
}

/* ---------- 根本原因 ---------- */
.root-box{
  max-width:920px; margin:0 auto;
  background:linear-gradient(135deg,rgba(201,134,31,.12) 0%,rgba(201,134,31,.03) 100%);
  border:1px solid rgba(201,134,31,.32); border-radius:20px; padding:38px 32px;
}
.root-lead{ color:var(--tx); font-size:15.5px; line-height:2; text-align:center; }
.root-lead strong{ color:var(--gold); }
.root-core{
  margin:26px auto; padding:26px 20px; text-align:center;
  font-family:'Noto Serif JP',serif; font-size:clamp(20px,3.4vw,30px); font-weight:900;
  color:var(--ink); background:rgba(255,255,255,.6); border:1px dashed rgba(201,134,31,.5); border-radius:14px;
}
.root-core strong{ color:var(--gold); }
.root-flow{
  display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:28px;
}
.rf{
  background:rgba(201,134,31,.05); border:1px solid rgba(201,134,31,.18); border-radius:12px;
  padding:18px 16px; text-align:center; color:var(--tx2); font-weight:700; font-size:15px;
}
.rf span{ display:block; font-weight:400; font-size:13px; margin-top:6px; }
.rf-on{ background:rgba(201,134,31,.14); border-color:rgba(201,134,31,.5); color:var(--ink); }
.rf-on span{ color:var(--gold); }
.rf-arrow{ color:rgba(44,36,22,.3); font-size:20px; }
.root-start{
  max-width:920px; margin:34px auto 0; background:var(--card);
  border:1px solid rgba(201,134,31,.2); border-radius:16px; padding:30px 28px;
}
.root-start h3{ color:var(--gold); font-size:19px; margin-bottom:12px; }
.root-start p{ color:var(--tx); font-size:15px; }
.root-start strong{ color:var(--ink); }

/* ---------- CAPD ---------- */
.capd{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; }
.capd-item{
  background:var(--card); border:1px solid rgba(201,134,31,.22); border-radius:16px;
  padding:26px 18px; text-align:center; box-shadow:0 3px 14px rgba(120,84,20,.05);
}
.capd-l{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#fff; font-family:'Noto Serif JP',serif;
  font-size:26px; font-weight:900;
}
.capd-item h3{ font-size:16px; color:var(--ink); margin-bottom:8px; }
.capd-item p{ font-size:13.5px; color:var(--tx); line-height:1.8; }
.capd-arrow{ align-self:center; color:var(--gold); font-size:22px; }
.capd-quote{
  display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;
  max-width:820px; margin:46px auto 0;
}
.q-before,.q-after{
  border-radius:14px; padding:22px 18px; text-align:center; font-size:13px; font-weight:700;
}
.q-before{ background:rgba(201,134,31,.05); border:1px solid rgba(201,134,31,.16); color:var(--tx2); }
.q-after{ background:rgba(201,134,31,.13); border:1px solid rgba(201,134,31,.4); color:var(--gold); }
.q-before span,.q-after span{
  display:block; margin-top:8px; font-family:'Noto Serif JP',serif;
  font-size:clamp(15px,2.2vw,20px); font-weight:900;
}
.q-after span{ color:var(--ink); }
.q-arrow{ color:var(--gold); font-size:26px; }

/* ---------- ツール ---------- */
.demo-box{
  max-width:1000px; margin:0 auto;
  background:linear-gradient(135deg,rgba(201,134,31,.1) 0%,rgba(201,134,31,.03) 100%);
  border:1px solid rgba(201,134,31,.3); border-radius:20px; padding:36px 30px;
}
.demo-head h3{ font-size:25px; color:var(--ink); margin-bottom:10px; }
.demo-head p{ color:var(--tx); font-size:15px; }
.demo-head strong{ color:var(--gold); }
.demo-list{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px; margin:24px 0 4px;
}
.demo-list li{
  background:var(--card); border:1px solid rgba(201,134,31,.16); border-radius:10px; padding:12px 16px;
  color:var(--tx); font-size:14px;
}
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.tool{
  background:var(--card); border:1px solid rgba(201,134,31,.22); border-radius:14px;
  padding:20px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 3px 12px rgba(120,84,20,.05);
}
.tool .t-ico{ font-size:28px; flex:none; }
.tool b{ display:block; color:var(--ink); font-size:15.5px; }
.tool i{ display:block; font-style:normal; color:var(--tx2); font-size:12.5px; margin-top:2px; }
.tools-note{
  max-width:860px; margin:30px auto 0; text-align:center; line-height:1.95;
  background:rgba(201,134,31,.09); border:1px dashed rgba(201,134,31,.45);
  border-radius:12px; padding:18px 24px; color:var(--tx); font-size:15px;
}
.tools-note strong{ color:var(--gold); }

.kk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:18px; }
.kk{ background:var(--card); border:1px solid rgba(201,134,31,.2); border-radius:16px; padding:24px 20px; box-shadow:0 3px 12px rgba(120,84,20,.05); }
.kk h4{
  color:var(--gold); font-size:16px; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid rgba(201,134,31,.25);
}
.kk ul{ list-style:none; }
.kk li{ position:relative; padding-left:17px; margin-bottom:9px; color:var(--tx); font-size:13.5px; line-height:1.7; }
.kk li::before{ content:"▪"; position:absolute; left:0; color:var(--gold); }

.only-box{
  max-width:1000px; margin:56px auto 0; text-align:center;
  background:linear-gradient(135deg,rgba(201,134,31,.13) 0%,rgba(201,134,31,.03) 100%);
  border:1px solid rgba(201,134,31,.36); border-radius:20px; padding:36px 32px;
}
.only-box h3{ color:var(--ink); font-size:clamp(20px,3vw,28px); margin:6px 0 14px; }
.only-box h3 strong{ color:var(--gold); }
.only-box p{ color:var(--tx); font-size:15px; }
.only-seal{
  margin-top:22px; padding:20px 22px; border-radius:12px;
  background:rgba(255,255,255,.6); border:1px dashed rgba(201,134,31,.4);
  color:var(--tx); font-size:14.5px; line-height:1.95;
}
.only-seal strong{ color:var(--gold); }

/* ---------- タイムライン ---------- */
.timeline{ max-width:920px; margin:0 auto; position:relative; }
.tl{ display:grid; grid-template-columns:120px 1fr; gap:24px; padding-bottom:26px; position:relative; }
.tl::before{
  content:""; position:absolute; left:59px; top:70px; bottom:0; width:2px;
  background:linear-gradient(180deg,rgba(201,134,31,.5),rgba(201,134,31,.1));
}
.tl-last::before{ display:none; }
.tl-m{
  width:120px; height:120px; border-radius:50%; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(201,134,31,.24),rgba(201,134,31,.05));
  border:1px solid rgba(201,134,31,.4);
  font-family:'Noto Serif JP',serif; font-size:40px; font-weight:900; color:var(--gold); line-height:1;
}
.tl-m span{ font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:600; color:var(--tx2); margin-top:6px; }
.tl-b{ background:var(--card); border:1px solid rgba(201,134,31,.2); border-radius:16px; padding:24px 26px; box-shadow:0 3px 14px rgba(120,84,20,.05); }
.tl-b h3{ color:var(--gold); font-size:20px; margin-bottom:12px; }
.tl-b ul{ padding-left:20px; }
.tl-b li{ color:var(--tx); font-size:15px; line-height:1.9; margin-bottom:8px; }
.tl-b strong{ color:var(--ink); }

/* ---------- 料金 ---------- */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
.plan{
  position:relative; background:var(--card); border:1px solid rgba(201,134,31,.24);
  border-radius:20px; padding:36px 30px; box-shadow:0 4px 18px rgba(120,84,20,.06);
}
.plan-reco{
  border-color:var(--gold); box-shadow:0 16px 40px rgba(201,134,31,.2);
  background:linear-gradient(160deg,rgba(201,134,31,.09) 0%,var(--card) 60%);
}
.plan-reco-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#fff; font-size:12px; font-weight:800;
  padding:6px 22px; border-radius:20px; white-space:nowrap;
}
.plan-tag{ font-family:'Noto Serif JP',serif; font-size:19px; font-weight:900; color:var(--ink); margin-bottom:14px; }
.plan-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.plan-price .num{ font-family:'Noto Serif JP',serif; font-size:62px; font-weight:900; color:var(--gold-lt); line-height:1; }
.plan-price .unit{ font-size:15px; color:var(--tx); }
.plan-sub{ color:var(--gold); font-size:14px; font-weight:700; margin-bottom:20px; }
.plan-list{ list-style:none; }
.plan-list li{
  position:relative; padding-left:24px; margin-bottom:11px;
  color:var(--tx); font-size:14.5px; line-height:1.85;
}
.plan-list li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:900; }
.plan-list b{ color:var(--ink); }
.plan-fit{
  margin-top:22px; padding:14px 16px; text-align:center; border-radius:10px;
  background:rgba(201,134,31,.09); border:1px solid rgba(201,134,31,.28);
  color:var(--gold); font-size:14px; font-weight:700;
}
.plan-extra{
  max-width:1000px; margin:26px auto 0; background:var(--card);
  border:1px solid rgba(201,134,31,.16); border-radius:16px; padding:24px 28px;
}
.plan-extra h3{ color:var(--gold); font-size:18px; margin-bottom:8px; }
.plan-extra p{ color:var(--tx); font-size:14.5px; }
.plan-notes{
  max-width:1000px; margin:22px auto 0;
  background:linear-gradient(135deg,rgba(201,134,31,.11) 0%,rgba(201,134,31,.03) 100%);
  border:1px solid rgba(201,134,31,.32); border-radius:16px; padding:26px 28px;
}
.plan-notes h3{ color:var(--ink); font-size:18px; margin-bottom:10px; }
.plan-notes p{ color:var(--tx); font-size:15px; }
.plan-notes strong{ color:var(--gold); }

/* ---------- 実績 / 事例 ---------- */
.roi{
  max-width:860px; margin:0 auto; text-align:center;
  background:linear-gradient(135deg,rgba(201,134,31,.13) 0%,rgba(201,134,31,.03) 100%);
  border:1px solid rgba(201,134,31,.38); border-radius:20px; padding:34px 28px;
}
.roi-label{
  display:inline-block; background:var(--gold); color:#fff; font-size:12px; font-weight:800;
  padding:5px 18px; border-radius:20px; margin-bottom:18px;
}
.roi-body{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.roi-i{ display:flex; flex-direction:column; align-items:center; }
.roi-n{ font-family:'Noto Serif JP',serif; font-size:clamp(38px,7vw,62px); font-weight:900; color:var(--tx2); line-height:1; }
.roi-u{ font-size:14px; color:var(--tx2); margin-top:4px; }
.roi-c{ font-size:13px; color:var(--tx2); }
.roi-on .roi-n{ color:var(--gold-lt); }
.roi-on .roi-u{ color:var(--gold); }
.roi-arrow{ font-size:30px; color:var(--gold); }

.case{ background:var(--card); border:1px solid rgba(201,134,31,.2); border-radius:16px; padding:26px 24px; box-shadow:0 3px 14px rgba(120,84,20,.05); }
.case-name{ font-family:'Noto Serif JP',serif; font-size:19px; font-weight:900; color:var(--ink); margin-bottom:14px; }
.case-name span{ display:block; font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:400; color:var(--gold); margin-top:4px; }
.case-before,.case-after{ color:var(--tx); font-size:14px; line-height:1.85; margin-bottom:12px; }
.case-before b,.case-after b{
  display:inline-block; font-size:11px; font-weight:800; margin-right:8px;
  padding:2px 10px; border-radius:12px; background:rgba(140,124,98,.14); color:var(--tx2);
}
.case-after b{ background:rgba(201,134,31,.16); color:var(--gold); }
.case-voice{
  margin-top:16px; padding:14px 16px; border-radius:10px;
  background:rgba(201,134,31,.09); border-left:3px solid var(--gold);
  color:var(--ink); font-size:14.5px; font-weight:600;
}

/* ---------- 講師 ---------- */
.profile{ max-width:860px; margin:0 auto; background:var(--card); border:1px solid rgba(201,134,31,.22); border-radius:20px; padding:34px 30px; box-shadow:0 4px 16px rgba(120,84,20,.06); }
.profile-list{ list-style:none; }
.profile-list li{ position:relative; padding-left:24px; margin-bottom:12px; color:var(--tx); font-size:15px; line-height:1.9; }
.profile-list li::before{ content:"●"; position:absolute; left:0; font-size:9px; top:8px; color:var(--gold); }
.profile-list strong{ color:var(--gold); }
.profile-quote{
  margin-top:24px; padding:22px 24px; border-radius:12px; text-align:center;
  background:rgba(201,134,31,.09); border:1px dashed rgba(201,134,31,.4);
  font-family:'Noto Serif JP',serif; font-size:clamp(16px,2.4vw,21px); color:var(--ink);
}
.profile-quote strong{ color:var(--gold); }

/* ---------- FAQ ---------- */
.faq{ max-width:880px; margin:0 auto; }
.faq details{
  background:var(--card); border:1px solid rgba(201,134,31,.18);
  border-radius:12px; margin-bottom:12px; overflow:hidden; box-shadow:0 3px 12px rgba(120,84,20,.04);
}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 52px 20px 24px; position:relative;
  font-weight:700; font-size:16px; color:var(--ink); font-family:'Noto Serif JP',serif;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"＋"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:18px; font-weight:700;
}
.faq details[open] summary::after{ content:"−"; }
.faq details p{ padding:0 24px 22px; color:var(--tx); font-size:15px; }
.faq details p strong{ color:var(--gold); }

/* ---------- CTA / footer ---------- */
.cta{
  padding:96px 0; text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(217,151,31,.22) 0%, transparent 55%),
    linear-gradient(135deg,#fff6df 0%,#ffecc4 100%);
}
.cta h2{ font-size:clamp(28px,5vw,46px); font-weight:900; color:var(--gold); margin-bottom:18px; }
.cta-lead{ color:var(--tx); font-size:16px; margin-bottom:26px; }
.cta-lead strong{ color:var(--ink); }
.cta-list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.cta-list li{
  background:var(--card); border:1px solid rgba(201,134,31,.22);
  border-radius:24px; padding:9px 20px; color:var(--tx); font-size:14px;
}
.cta-btns{ display:flex; flex-direction:column; align-items:center; gap:16px; }

.footer{ background:var(--bg2); padding:52px 0 34px; text-align:center; border-top:2px solid rgba(201,134,31,.3); }
.f-title{ font-family:'Noto Serif JP',serif; font-size:20px; font-weight:900; color:var(--gold); margin-bottom:8px; }
.footer p{ color:var(--tx2); font-size:14px; }
.f-links{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.f-links a{ font-size:13.5px; text-decoration:none; border-bottom:1px solid rgba(201,134,31,.4); }
.f-copy{ margin-top:26px; color:var(--tx2); font-size:12px; }

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .capd{ grid-template-columns:1fr; }
  .capd-arrow{ transform:rotate(90deg); text-align:center; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:2; }
  .hero-visual img{ max-width:520px; margin:0 auto; }
}
@media (max-width:768px){
  .sec{ padding:66px 0; }
  .hero{ padding:80px 0 66px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ text-align:center; }
  .hero-price{ gap:14px; }
  .hp-sep{ display:none; }
  .root-flow{ grid-template-columns:1fr; }
  .rf-arrow{ text-align:center; }
  .capd-quote{ grid-template-columns:1fr; }
  .q-arrow{ transform:rotate(90deg); text-align:center; }
  .tl{ grid-template-columns:1fr; gap:14px; }
  .tl::before{ display:none; }
  .tl-m{ width:auto; height:auto; border-radius:14px; flex-direction:row; gap:8px; padding:12px 18px; font-size:28px; }
  .tl-m span{ margin-top:0; }
  .roi-arrow{ transform:rotate(90deg); }
  .btn-lg{ font-size:17px; padding:18px 26px; }
}

/* ---- 料金：3プラン表示（2026-07-27） ---- */
.plans3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 1140px; }
.plans3 .plan { padding: 32px 24px; }
.plans3 .plan-tag { font-size: 18px; }
.plans3 .plan-price .num { font-size: 54px; }
.plans3 .plan-list li { font-size: 14px; }