:root{
  --bg:#F2F3F5; --text:#23272A; --brand:#355C45; --brand-soft:#E7EEE6; --cta:#5865F2; --border:#E3E5E8;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;line-height:1.7;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border);background:#fff;}
.nav a{color:var(--text);text-decoration:none;margin-left:16px;font-size:14px;}
.nav .logo{font-weight:700;color:var(--brand);margin-left:0;font-size:16px;}
main{max-width:760px;margin:0 auto;padding:32px 24px;}
h1{font-size:26px;line-height:1.4;}
.eyebrow{color:var(--brand);font-weight:700;font-size:12px;letter-spacing:.05em;}
.btn-primary{display:inline-block;background:var(--brand);color:#fff;font-weight:700;padding:14px 22px;border-radius:10px;text-decoration:none;margin-top:12px;}
.flow{display:flex;gap:10px;margin:24px 0;flex-wrap:wrap;}
.flow div{flex:1;min-width:140px;background:var(--brand-soft);border-radius:10px;padding:14px;}
.site-footer{max-width:760px;margin:0 auto;padding:20px 24px 40px;font-size:12px;color:#6b6355;border-top:1px solid var(--border);}
.site-footer .links{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;}

.cat-cards{ display:flex; gap:14px; flex-wrap:wrap; margin:20px 0 8px; }
.cat-cards .cat-card{ flex:1; min-width:160px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px 14px; }
.cat-cards .ic{ width:28px; height:28px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-bottom:10px; }
.cat-cards b{ display:block; font-size:13px; margin-bottom:5px; }
.cat-cards span{ display:block; font-size:11.5px; color:#948c79; line-height:1.6; }
main a{ color:var(--brand); }
.site-footer a{ color:var(--brand); }


/* ===== Hero（案E：参考LP再現・2026-09-23 独立レビュー反映済み） ===== */
.hero-band{
  background:var(--brand-soft);
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-top:-32px;
  padding:44px 24px 40px;
  text-align:center;
}
.hero-band .eyebrow{ margin-bottom:14px; }
.hero-band h1{ font-size:26px; font-weight:800; line-height:1.4; margin:0 0 14px; letter-spacing:-.01em; }
.hero-band .sub{ font-size:13.5px; color:#4c4638; line-height:1.85; margin:0 auto 18px; max-width:440px; }

.hero-flow{ display:flex; gap:8px; justify-content:center; max-width:480px; margin:0 auto 20px; flex-wrap:wrap; }
.hero-flow div{ flex:1; min-width:120px; background:#fff; border-radius:10px; padding:10px 8px 9px; font-size:11.5px; line-height:1.5; }
.hero-flow b{ display:block; font-size:12px; margin-bottom:2px; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:320px; margin:0 auto 10px; }
.hero-oval{ position:absolute; width:220px; height:220px; background:#fff; border-radius:50%; }
.hero-phone-img{ position:relative; z-index:1; width:200px; height:auto; display:block; max-width:100%; }

.hero-callout{ font-size:11.5px; color:var(--brand); font-weight:700; margin:0 0 14px; }
.hero-band .btn-primary{ border-radius:30px; }
.hero-badges{ display:flex; gap:14px; justify-content:center; margin:20px 0 12px; }
.seal{ width:68px; height:68px; border-radius:50%; border:2px solid var(--brand); outline:1px solid rgba(53,92,69,.25); outline-offset:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; }
.seal .ic{ font-size:12px; }
.seal b{ font-size:7.5px; color:#6b6355; font-weight:600; display:block; }
.seal .big{ font-size:11.5px; font-weight:800; color:var(--brand); line-height:1.2; }
.hero-finenote{ display:block; font-size:10.5px; color:#6b6355; max-width:420px; margin:0 auto; line-height:1.7; }

.nav-cta{ background:var(--brand); color:#fff !important; padding:7px 16px; border-radius:20px; font-size:12.5px; font-weight:700; margin-left:16px; }

/* ===== Hero: PC(横幅の広い画面)では2カラム、モバイルでは縦積み ===== */
.hero-grid{ max-width:520px; margin:0 auto; }

@media (min-width:860px){
  .hero-band{ padding:70px 56px 76px; }
  .hero-grid{ display:flex; align-items:center; gap:50px; max-width:1080px; margin:0 auto; text-align:left; }
  .hero-copy{ flex:1; }
  .hero-band h1{ font-size:41px; margin:0 0 18px; }
  .hero-band .sub{ margin:0 0 22px; max-width:400px; }
  .hero-flow{ justify-content:flex-start; margin:0 0 22px; max-width:420px; }
  .hero-callout{ margin:0 0 20px; text-align:left; }
  .hero-badges{ justify-content:flex-start; margin:0 0 12px; }
  .hero-finenote{ text-align:left; margin:0; max-width:400px; }
  .hero-visual{ flex:1; height:380px; margin:0; }
  .hero-oval{ width:300px; height:300px; }
  .hero-phone-img{ width:230px; }
}

/* 2026-10-02 内部リンク改善: 共通ナビ。スマホではロゴの下にナビを1行で並べ、早見表は隠す */
.nav a{white-space:nowrap;}
@media (max-width:640px){
  .nav{flex-wrap:wrap;row-gap:8px;padding:12px 16px;}
  .nav nav{width:100%;display:flex;align-items:center;}
  .nav nav a{margin-left:0;margin-right:14px;font-size:13px;}
  .nav .nav-opt{display:none;}
  .nav-cta{margin-left:auto !important;margin-right:0 !important;padding:6px 14px;}
}