:root{
    --navy:#1B4F6F;          /* ブランド主役色 */
    --navy-deep:#102E40;     /* 背景深部 */
    --navy-ink:#0C2230;      /* 最深 */
    --teal:#2BA89A;          /* アクセント1 */
    --amber:#E29A36;         /* アクセント2 */
    --paper:#F6F4EE;         /* 明るい面 */
    --paper-2:#FBFAF6;
    --ink:#16262F;           /* 明色面のテキスト */
    --muted:#5C6B73;
    --line:rgba(27,79,111,.16);
    --line-on-dark:rgba(255,255,255,.14);
    --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    --sans:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --maxw:1080px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper-2);
    line-height:1.78;
    font-size:18px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit;}
  h1,h2,h3{font-weight:700; line-height:1.4; letter-spacing:.01em;}

  /* ---- 共通レイアウト：左インデックス列 + 右コンテンツ ---- */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  .section{padding:96px 0; border-bottom:1px solid var(--line); position:relative;}
  .section-grid{display:grid; grid-template-columns:140px 1fr; gap:40px;}
  .idx{font-family:var(--mono); font-size:14px; color:var(--teal); padding-top:6px;}
  .idx .num{display:block; font-size:14px; letter-spacing:.08em;}
  .idx .label{display:block; color:var(--muted); margin-top:6px; letter-spacing:.04em; line-height:1.6;}
  .eyebrow{font-family:var(--mono); font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin:0 0 18px;}
  .section h2{font-size:clamp(26px,3.4vw,34px); margin:0 0 24px;}
  .lead{font-size:20px; color:var(--ink); max-width:62ch;}

  /* ============ HERO ============ */
  header.hero{
    background:
      radial-gradient(900px 500px at 78% -10%, rgba(43,168,154,.22), transparent 60%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
    color:#EAF1F4; position:relative; overflow:hidden;
  }
  /* ハーネス＝制御線モチーフ（控えめな縦の細線） */
  header.hero::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(to right, var(--line-on-dark) 1px, transparent 1px);
    background-size:140px 100%;
    background-position:140px 0;
    opacity:.5; pointer-events:none;
  }
  .hero-inner{max-width:var(--maxw); margin:0 auto; padding:30px 24px 96px; position:relative; z-index:1;}
  .topbar{display:flex; justify-content:space-between; align-items:center; padding:14px 0 64px; font-family:var(--mono); font-size:15px; letter-spacing:.06em; color:rgba(234,241,244,.7);}
  .topbar .brand{color:#EAF1F4;}
  .topnav a{margin-left:22px; text-decoration:none; color:rgba(234,241,244,.7); transition:color .2s;}
  .topnav a:hover{color:#fff;}
  .hero-eyebrow{font-family:var(--mono); font-size:14.5px; letter-spacing:.1em; color:var(--teal); margin:0 0 22px;}
  .hero h1{
    font-family:var(--serif);
    font-size:clamp(28px,4.4vw,46px);
    font-weight:600; line-height:1.42; letter-spacing:.01em;
    margin:0 0 28px; max-width:20ch;
  }
  .hero h1 .accent{color:var(--amber);}
  .hero-sub{font-size:20px; color:rgba(234,241,244,.82); max-width:54ch; margin:0 0 40px;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-main{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; margin-top:4px;}
  .hero-portrait img{width:100%; max-width:360px; border-radius:16px; display:block; margin-left:auto; box-shadow:0 24px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; text-decoration:none; font-size:17px; font-weight:500; transition:transform .15s, background .2s, border-color .2s;}
  .btn-primary{background:var(--teal); color:#04241F;}
  .btn-primary:hover{background:#37c0b0; transform:translateY(-1px);}
  .btn-ghost{border:1px solid var(--line-on-dark); color:#EAF1F4;}
  .btn-ghost:hover{border-color:rgba(255,255,255,.45);}
  .hero-meta{margin-top:54px; display:flex; gap:36px; flex-wrap:wrap; font-family:var(--mono); font-size:15px; color:rgba(234,241,244,.6); border-top:1px solid var(--line-on-dark); padding-top:24px;}
  .hero-meta b{display:block; color:#EAF1F4; font-size:17px; font-weight:500; margin-bottom:2px;}

  /* ============ 結論ブロック（アンサーファースト：AI引用対策） ============ */
  .answer{background:var(--paper); border-bottom:1px solid var(--line);}
  .answer .answer-box{
    border-left:3px solid var(--teal); padding:4px 0 4px 28px; margin-left:0;
  }
  .answer p{font-size:21px; line-height:1.95; margin:0; max-width:64ch;}
  .answer .who{font-weight:700;}

  /* ============ サービス ============ */
  .cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px;}
  .card{border:1px solid var(--line); border-radius:12px; padding:26px 26px 28px; background:#fff; transition:border-color .2s, transform .15s;}
  .card:hover{border-color:var(--teal); transform:translateY(-2px);}
  .card .c-no{font-family:var(--mono); font-size:13.5px; color:var(--amber); letter-spacing:.08em;}
  .card h3{font-size:20px; margin:12px 0 10px;}
  .card p{font-size:17px; color:var(--muted); margin:0; line-height:1.8;}
  .price-note{margin-top:26px; font-family:var(--mono); font-size:15px; color:var(--muted);}
  .price-note b{color:var(--ink); font-weight:500;}

  /* ============ 強み ============ */
  .strength{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:8px;}
  .strength .item{padding:20px 0; border-top:1px solid var(--line);}
  .strength .item h3{font-size:18px; margin:0 0 8px; display:flex; align-items:baseline; gap:10px;}
  .strength .item h3 .k{font-family:var(--mono); font-size:13.5px; color:var(--teal);}
  .strength .item p{margin:0; font-size:17px; color:var(--muted);}
  .practice{display:grid; grid-template-columns:300px 1fr; gap:34px; align-items:center; margin-top:40px; padding-top:36px; border-top:1px solid var(--line);}
  .practice img{width:100%; border-radius:12px; display:block; box-shadow:0 14px 36px rgba(16,46,64,.16);}
  .practice figcaption{font-size:17px; color:var(--muted); line-height:1.95;}
  .practice figcaption b{display:block; color:var(--ink); font-weight:500; font-size:18px; margin-bottom:8px;}

  /* ============ 経歴（タイムライン） ============ */
  .timeline{margin-top:8px; border-left:1px solid var(--line); padding-left:28px;}
  .tl{position:relative; padding:0 0 26px;}
  .tl::before{content:""; position:absolute; left:-33px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--paper-2); border:2px solid var(--teal);}
  .tl .yr{font-family:var(--mono); font-size:14.5px; color:var(--amber);}
  .tl h3{font-size:18px; margin:4px 0 4px;}
  .tl p{margin:0; font-size:17px; color:var(--muted);}

  /* ============ 発信ハブ ============ */
  .channels{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
  .ch{border:1px solid var(--line); border-radius:12px; padding:24px; text-decoration:none; display:block; background:#fff; transition:border-color .2s, transform .15s;}
  .ch:hover{border-color:var(--amber); transform:translateY(-2px);}
  .ch .ch-k{font-family:var(--mono); font-size:13.5px; color:var(--teal); letter-spacing:.06em;}
  .ch h3{font-size:19px; margin:10px 0 6px;}
  .ch p{margin:0; font-size:16px; color:var(--muted);}

  /* ============ FAQ ============ */
  .faq details{border-bottom:1px solid var(--line); padding:6px 0;}
  .faq summary{cursor:pointer; list-style:none; padding:18px 0; font-size:19px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .mk{font-family:var(--mono); color:var(--teal); transition:transform .2s; flex:none;}
  .faq details[open] summary .mk{transform:rotate(45deg);}
  .faq .ans{padding:0 0 20px; color:var(--muted); font-size:17.5px; max-width:64ch;}

  /* ============ CTA / 問い合わせ ============ */
  .contact{
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color:#EAF1F4; border:none;
  }
  .contact h2{color:#fff;}
  .contact .lead{color:rgba(234,241,244,.82);}
  .contact .hero-cta{margin-top:32px;}

  /* ============ フッター ============ */
  footer{background:var(--navy-ink); color:rgba(234,241,244,.65); padding:48px 0 40px; font-size:15.5px;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
  footer .corp b{display:block; color:#EAF1F4; font-weight:500; margin-bottom:8px;}
  footer .corp span{display:block; line-height:1.9;}
  footer .fnav{font-family:var(--mono); font-size:14.5px;}
  footer .fnav a{display:block; text-decoration:none; color:rgba(234,241,244,.65); margin-bottom:8px;}
  footer .fnav a:hover{color:#fff;}
  footer .copy{width:100%; border-top:1px solid var(--line-on-dark); padding-top:20px; margin-top:8px; font-family:var(--mono); font-size:13px; color:rgba(234,241,244,.45);}

  /* ---- 動きはごく控えめ ---- */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---- レスポンシブ ---- */
  @media (min-width:761px) and (max-width:1000px){
    .hero-main{grid-template-columns:1fr; gap:40px;}
    .hero-portrait img{max-width:340px; margin:0;}
    .channels{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .section{padding:64px 0;}
    .section-grid{grid-template-columns:1fr; gap:18px;}
    .idx{padding-top:0;}
    .cards,.strength,.channels{grid-template-columns:1fr;}
    .hero-main{grid-template-columns:1fr; gap:36px;}
    .hero-portrait{order:-1;}
    .hero-portrait img{max-width:240px; margin:0 auto; aspect-ratio:1/1; object-fit:cover; object-position:center 20%;}
    .practice{grid-template-columns:1fr; gap:20px;}
    .practice img{max-width:300px;}
    .topnav{display:none;}
    .hero-meta{gap:24px;}
  }
  :focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;}

/* ===== 追加：料金プラン・ステップ（services.html 等で使用）===== */
.plan-price{font-family:var(--mono); font-size:24px; color:var(--ink); font-weight:500; margin:14px 0 4px;}
.plan-price small{font-size:14.5px; color:var(--muted); font-weight:400;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.step{border:1px solid var(--line); border-radius:12px; padding:22px; background:#fff; transition:border-color .2s, transform .15s;}
.step:hover{border-color:var(--teal); transform:translateY(-2px);}
.step .s-no{font-family:var(--mono); font-size:14.5px; color:var(--teal); letter-spacing:.08em;}
.step h3{font-size:18px; margin:10px 0 8px; color:var(--ink);}
.step p{font-size:16px; color:var(--muted); margin:0; line-height:1.8;}
.theme-list{list-style:none; padding:0; margin:8px 0 0;}
.theme-list li{padding:6px 0 6px 18px; position:relative; font-size:17px; color:var(--muted); line-height:1.7;}
.theme-list li::before{content:"–"; position:absolute; left:0; color:var(--teal);}
@media (min-width:761px) and (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;}
}

/* ===== 追加：料金表・記入テンプレート ===== */
.price-table{width:100%; border-collapse:collapse; margin-top:6px;}
.price-table th, .price-table td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); font-size:18px;}
.price-table th{font-size:15px; color:var(--muted); font-weight:500; letter-spacing:.02em;}
.price-table td.price{font-family:var(--mono); font-weight:500; text-align:right; white-space:nowrap;}
.price-table tr:last-child td{border-bottom:none;}
.intake{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:24px 26px; margin-top:28px;}
.intake h4{font-size:18px; margin:0 0 6px; color:var(--ink);}
.intake > p{font-size:16px; color:var(--muted); margin:0 0 8px;}

/* ===== 追加：STEP間の矢印 ===== */
.step{position:relative;}
.step::after{content:"→"; position:absolute; right:-15px; top:50%; transform:translateY(-50%); font-family:var(--mono); color:var(--teal); font-size:20px; font-weight:500; z-index:2; line-height:1;}
.step:nth-child(3n)::after, .step:last-child::after{display:none;}
@media (min-width:761px) and (max-width:1000px){
  .step:nth-child(3n)::after{display:block;}
  .step:nth-child(2n)::after{display:none;}
  .step:last-child::after{display:none;}
}
@media (max-width:760px){
  .steps{row-gap:38px;}
  .step::after{content:"↓"; right:auto; left:50%; top:auto; bottom:-26px; transform:translateX(-50%);}
  .step:nth-child(3n)::after{display:block;}
  .step:last-child::after{display:none;}
}

/* ===== 追加：記入テンプレート（コピペ用）===== */
.intake-template{background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin:12px 0 14px; font-family:var(--sans); font-size:17px; line-height:2.1; color:var(--ink); white-space:pre-wrap; word-break:break-word;}
.copy-btn{font-family:var(--sans); font-size:16px; font-weight:500; background:var(--teal); color:#04241F; border:none; border-radius:8px; padding:10px 18px; cursor:pointer; transition:background .2s;}
.copy-btn:hover{background:#37c0b0;}
.copy-btn.copied{background:var(--ink); color:#fff;}