/* ==========================================================================
   ぽこあぽこ ピアノ教室コンサルティング事業 — トップページ試作
   デザイン意図・使用素材は README.md を参照
   ========================================================================== */

:root{
  /* --- color tokens --- */
  --paper:      #fdfbf8;  /* 白ベース */
  --paper-2:    #f4efe6;  /* ベージュ(セクション背景) */
  --paper-3:    #ece2d3;  /* 淡いブラウン(カード/ボーダー用) */
  --ink:        #2b241d;  /* 本文色(温かみのある黒) */
  --muted:      #6f6355;  /* 補助テキスト(グレージュ) */
  --accent:     #3f5245;  /* 深緑(補助色) */
  --accent-strong: #2e3d33;
  --line:        rgba(43,36,29,0.12);
  --line-strong: rgba(43,36,29,0.24);

  /* --- spacing / radius tokens --- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --space-section: clamp(48px, 8vw, 96px);
  --space-gap: clamp(16px, 2.4vw, 28px);
  --container: 1240px;
  --container-narrow: 820px;

  --font-serif: "游明朝体","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --font-sans:  "游ゴシック体","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #1b1712;
    --paper-2:    #241f19;
    --paper-3:    #2c261e;
    --ink:        #f2ece2;
    --muted:      #b8ab97;
    --accent:     #86ab93;
    --accent-strong: #a4c9af;
    --line:        rgba(242,236,226,0.14);
    --line-strong: rgba(242,236,226,0.26);
  }
}
:root[data-theme="dark"]{
  --paper:#1b1712; --paper-2:#241f19; --paper-3:#2c261e; --ink:#f2ece2; --muted:#b8ab97;
  --accent:#86ab93; --accent-strong:#a4c9af; --line:rgba(242,236,226,0.14); --line-strong:rgba(242,236,226,0.26);
}
:root[data-theme="light"]{
  --paper:#fdfbf8; --paper-2:#f4efe6; --paper-3:#ece2d3; --ink:#2b241d; --muted:#6f6355;
  --accent:#3f5245; --accent-strong:#2e3d33; --line:rgba(43,36,29,0.12); --line-strong:rgba(43,36,29,0.24);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* 横スクロール防止の保険 */
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
}
.container-narrow{
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:break-word;
  margin:0;
  color:var(--ink);
}
@media (max-width:480px){
  /* 狭い画面ではkeep-allを解除し、通常の折返し(overflow-wrapのみ)に戻して
     はみ出しリスクを避ける */
  h1,h2,h3{ word-break:normal; }
}
h1{ font-size:clamp(1.9rem, 4.4vw, 2.9rem); line-height:1.4; }
h2{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); }
h3{ font-size:1.05rem; }

.eyebrow{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------------- header ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:16px;
}
.brand{
  font-family:var(--font-serif);
  font-size:1.05rem;
  text-decoration:none;
  line-height:1.3;
  flex-shrink:0;
}
.brand .sub{
  display:block;
  font-family:var(--font-sans);
  font-size:.66rem;
  letter-spacing:.08em;
  color:var(--muted);
}
.nav-links{
  display:flex;
  gap:clamp(14px,2vw,28px);
  list-style:none;
  margin:0;
  padding:0;
  font-size:.9rem;
}
.nav-links a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.nav-links a:hover{ border-color:var(--accent); }
.nav-links a[aria-current="page"]{
  color:var(--accent-strong);
  border-color:var(--accent-strong);
}
.nav-actions [aria-current="page"]{
  outline:2px solid var(--paper);
  outline-offset:-4px;
}

.nav-actions{ display:flex; align-items:center; gap:12px; }

.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); top:0; }
.menu-toggle[aria-expanded="true"] span::after{ transform:rotate(-45deg); top:0; }

@media (max-width:800px){
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:8px clamp(20px,4vw,48px) 16px;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ display:block; padding-block:.8em; border-bottom:1px solid var(--line); }
  .menu-toggle{ display:inline-flex; flex-shrink:0; }

  /* 375px前後でロゴ+お問い合わせボタン+ハンバーガーが収まりきらず、
     右側が overflow-x:hidden で見切れていたための調整。
     ロゴを縮小可能にし、お問い合わせボタンの余白を詰めることで
     横スクロール隠しに頼らず画面内に収める。 */
  .nav{ gap:12px; }
  .brand{ flex-shrink:1; min-width:0; }
  .nav-actions{ gap:8px; }
  .nav-actions .btn-primary{ padding:.6em 1em; font-size:.82rem; }
}

@media (max-width:400px){
  .nav{ gap:8px; }
  .brand{ font-size:.95rem; }
  .brand .sub{ font-size:.6rem; letter-spacing:.04em; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn-primary{ padding:.55em .8em; font-size:.76rem; }
}

.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.88rem;
  text-decoration:none;
  padding:.8em 1.6em;
  border-radius:var(--radius-l);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--paper); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------------- sections ---------------- */
section{ padding-block:var(--space-section); }
section.alt{ background:var(--paper-2); }
.section-head{ max-width:640px; margin-bottom:clamp(28px,4vw,44px); }
.section-head h2{ margin-top:.5em; }
.section-head p{ color:var(--muted); margin-top:1em; }

/* ---------------- hero ---------------- */
.hero{ padding-block:clamp(32px,4vw,48px) clamp(28px,3.5vw,44px); }
.hero .eyebrow{ margin-bottom:.7em; display:block; }
.hero h1{ letter-spacing:.01em; }
.hero .hero-sub{
  font-family:var(--font-serif);
  color:var(--accent);
  font-size:clamp(1.05rem,2vw,1.3rem);
  margin-top:.5em;
}
.hero .lede{
  max-width:64ch;
  color:var(--muted);
  margin-top:1.2em;
  font-size:1.02rem;
}
.hero .cta-row{ margin-top:1.5em; }
.hero-visual{
  margin-top:clamp(32px,5vw,56px);
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
}
.hero-visual img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:var(--img-pos, center);
}
@media (max-width:600px){
  .hero-visual img{ aspect-ratio:4/3; }
}

/* ---------------- card grid ---------------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--space-gap);
}
/* 6枚のお悩みカード: 1240px幅では3列×2行を基本とする */
.card-grid.is-six{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .card-grid.is-six{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .card-grid.is-six{ grid-template-columns:1fr; } }
.card{
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:1.7em 1.6em;
  display:flex;
  flex-direction:column;
  gap:.7em;
}
section.alt .card{ background:var(--paper); }
.card p{ margin:0; color:var(--muted); font-size:.92rem; }
.card .badge,
.compare-card .badge{
  align-self:flex-start;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--accent-strong);
  background:color-mix(in srgb, var(--accent) 14%, var(--paper));
  border-radius:999px;
  padding:.3em .8em;
}

.bullet-list{
  list-style:none;
  margin:1.2em 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.6em;
}
.bullet-list li{
  padding-left:1.4em;
  position:relative;
  color:var(--ink);
  font-size:.95rem;
}
.bullet-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}

.note{
  margin-top:var(--space-gap);
  color:var(--muted);
  font-size:.88rem;
  border-left:2px solid var(--line-strong);
  padding-left:1em;
}

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------- image gallery(仮画像) ---------------- */
.image-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-gap);
  margin-top:var(--space-gap);
}
.image-tile{
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--line);
  margin:0;
}
/* 実写真差し替え時のトリミング基準点。
   人物写真は差し替え時にインラインstyleの --img-pos を
   顔の位置に合わせて調整する(例: style="--img-pos:center 20%;") */
.image-tile img{
  width:100%;
  aspect-ratio:4/3;   /* 教室内観・発表会・相談風景など、風景/シーン写真向け */
  object-fit:cover;
  object-position:var(--img-pos, center);
}
/* 代表者・講師などの人物ポートレートはこちらを付与し、縦長比率にする */
.image-tile.is-portrait img{
  aspect-ratio:3/4;
}
.image-tile figcaption{
  padding:.7em 1em;
  font-size:.78rem;
  color:var(--muted);
  background:var(--paper);
}

/* ---------------- flow ---------------- */
.flow-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-gap);
}
@media (max-width:720px){ .flow-list{ grid-template-columns:1fr; } }
.flow-list.is-four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .flow-list.is-four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .flow-list.is-four{ grid-template-columns:1fr; } }
.flow-step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:1.6em 1.5em;
}
.flow-step .n{
  font-family:var(--font-serif);
  color:var(--accent);
  font-size:1.3rem;
  display:block;
  margin-bottom:.4em;
}
.flow-step p{ color:var(--muted); font-size:.9rem; margin-top:.5em; }

/* ---------------- final cta ---------------- */
.final-cta{
  background:var(--accent);
  color:var(--paper);
  text-align:center;
  border-radius:var(--radius-l);
  margin-inline:clamp(20px,4vw,48px);
  padding-block:clamp(48px,8vw,80px);
}
.final-cta h2{ color:var(--paper); max-width:22ch; margin-inline:auto; }
.final-cta p{ max-width:56ch; margin:1em auto 0; opacity:.92; }
.final-cta .btn-primary{ background:var(--paper); color:var(--accent-strong); margin-top:1.8em; }
.final-cta .btn-primary:hover{ background:var(--paper-2); }

/* ---------------- page header(下層ページ用の簡易ヒーロー) ---------------- */
.page-header{
  padding-block:clamp(48px,8vw,80px) clamp(32px,5vw,48px);
}
.page-header .eyebrow{ display:block; margin-bottom:.8em; }
.page-header p{ color:var(--muted); max-width:60ch; margin-top:1.2em; }

/* ---------------- message block(代表者メッセージ等) ---------------- */
.message-block{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:var(--space-gap);
  align-items:start;
}
.message-block .image-tile{ margin:0; }
.message-block p{ color:var(--muted); margin:0; }
@media (max-width:560px){
  .message-block{ grid-template-columns:1fr; }
  .message-block .image-tile{ max-width:200px; }
}

/* ---------------- FAQ(details/summary、JS不要で開閉可能) ---------------- */
.faq-group + .faq-group{ margin-top:2.2em; }
.faq-group h2{ font-size:1.05rem; color:var(--accent-strong); margin-bottom:.6em; }
.faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0 1.4em;
  transition:background-color .2s ease, border-color .2s ease;
}
.faq-item + .faq-item{ margin-top:.7em; }
.faq-item[open]{
  background:var(--paper-2);
  border-color:var(--line-strong);
}
.faq-item summary{
  cursor:pointer;
  padding:1.2em .2em;
  margin:0 -.2em;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-weight:600;
  border-radius:var(--radius-s);
}
.faq-item summary:hover{ color:var(--accent-strong); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-serif);
  font-size:1.2rem;
  color:var(--accent);
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.4em;
  height:1.4em;
  border-radius:50%;
  border:1px solid var(--line-strong);
  transition:transform .2s ease, background-color .2s ease;
}
.faq-item[open] summary::after{
  content:"–";
  background:var(--accent);
  color:var(--paper);
  border-color:var(--accent);
}
@media (prefers-reduced-motion: reduce){
  .faq-item, .faq-item summary::after{ transition:none; }
}
.faq-item summary .q::before{ content:"Q. "; color:var(--accent-strong); }
.faq-item .a{
  padding:0 0 1.3em;
  color:var(--muted);
  max-width:65ch;
}
.faq-item .a::before{ content:"A. "; color:var(--ink); font-weight:600; }

/* ---------------- form ---------------- */
.form{
  display:flex;
  flex-direction:column;
  gap:1.5em;
  max-width:640px;
}
.form-field{ display:flex; flex-direction:column; gap:.5em; }
.form-field label{ font-size:.9rem; }
.form-field .opt{ color:var(--muted); font-size:.78rem; font-weight:normal; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea{
  font:inherit;
  padding:.85em .95em;
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius-s);
}
.form-field textarea{ min-height:9em; resize:vertical; }
.form-field-checkbox{ flex-direction:row; align-items:flex-start; gap:.7em; }
.form-field-checkbox input{ margin-top:.3em; }
.form-field-checkbox label{ font-size:.86rem; color:var(--muted); }
.form .btn-primary{ align-self:flex-start; border:none; font:inherit; }

.prototype-notice{
  border:1px dashed var(--accent);
  color:var(--accent-strong);
  border-radius:var(--radius-m);
  padding:1em 1.2em;
  font-size:.85rem;
  max-width:640px;
  margin-bottom:2em;
}
.form-result{
  margin-top:1.4em;
  padding:1em 1.2em;
  border-radius:var(--radius-m);
  background:var(--paper-2);
  color:var(--ink);
  font-size:.9rem;
  max-width:640px;
  display:none;
}
.form-result.is-visible{ display:block; }

.form-error{
  margin-bottom:1.4em;
  padding:1em 1.2em;
  border:1px solid #c0392b;
  border-radius:var(--radius-m);
  background:#fdecea;
  color:#c0392b;
  font-size:.9rem;
  max-width:640px;
  display:none;
}
.form-error.is-visible{ display:block; }

/* ---------------- footer ---------------- */
.site-footer{
  padding-block:36px;
  font-size:.85rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:var(--space-section);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.site-footer a{ text-decoration:none; color:var(--muted); }
.site-footer a:hover{ color:var(--accent-strong); }

/* ==========================================================================
   リッチ化コンポーネント(デザイン再構成指示書対応分)
   ========================================================================== */

/* ---------------- hero: 左右分割(候補A) ---------------- */
.hero-full{
  width:100%;
  max-width:none;
  padding-inline:clamp(24px,5vw,80px);
  margin-inline:auto;
}
.hero-split{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(32px,4vw,56px);
  align-items:start;
  max-width:1560px;
  margin-inline:auto;
}
.hero-split .hero-copy{ min-width:0; }
.hero-split .hero-image{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
}
.hero-split .hero-image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:var(--img-pos, center);
}
.hero-split .hero-image figcaption{
  padding:.5em .9em;
  font-size:.74rem;
  color:var(--muted);
  background:var(--paper);
}
@media (max-width:820px){
  .hero-split{ grid-template-columns:1fr; }
  .hero-split .hero-image{ order:-1; }
  .hero-split .hero-image img{ aspect-ratio:4/3; }
}

/* ---------------- checklist(お悩みセクション等) ---------------- */
.check-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);
  align-items:start;
}
.check-row .check-intro h2{ margin-top:.5em; }
.check-row .check-intro p{ color:var(--muted); margin-top:1em; }
.checklist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:.9em;
  padding-block:1em;
  border-bottom:1px solid var(--line);
  font-size:.98rem;
}
.checklist li::before{
  content:"";
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:.15em;
  border-radius:5px;
  border:1.5px solid var(--accent);
  background:
    linear-gradient(var(--accent),var(--accent)) center/10px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 10px no-repeat;
  background-color:transparent;
  opacity:.85;
}
@media (max-width:820px){
  .check-row{ grid-template-columns:1fr; }
}

/* ---------------- numbered feature(特徴セクション) ---------------- */
.feature-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-gap);
}
.feature-list .feature{
  padding-top:1.2em;
  border-top:2px solid var(--accent);
}
.feature .feature-n{
  font-family:var(--font-serif);
  font-size:clamp(2.2rem,4vw,2.8rem);
  color:var(--accent);
  line-height:1;
  display:block;
  font-variant-numeric:tabular-nums;
}
.feature h3{ margin-top:.5em; }
.feature p{ color:var(--muted); font-size:.92rem; margin-top:.6em; }

/* ---------------- 番号付きサービスカード ---------------- */
.card.is-numbered{ position:relative; }
.card .card-n{
  font-family:var(--font-serif);
  font-size:.85rem;
  color:var(--accent);
  letter-spacing:.08em;
}

/* ---------------- 教室の歩み冒頭(文章+v3画像、この箇所専用。共通.split-rowとは別) ---------------- */
.intro-split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,4vw,56px);
  align-items:start;
  margin-bottom:clamp(28px,4vw,44px);
}
.intro-split .section-head{ max-width:none; margin-bottom:0; }
.intro-split-media{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
  margin:0;
}
.intro-split-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:var(--img-pos, center);
  display:block;
}
.intro-split-media figcaption{
  padding:.5em .9em;
  font-size:.74rem;
  color:var(--muted);
  background:var(--paper);
}
@media (max-width:780px){
  .intro-split{ grid-template-columns:1fr; }
}

/* ---------------- split-row(画像+本文 左右交互) ---------------- */
.split-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
.split-row.is-reverse .split-media{ order:2; }
.split-row .split-media{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--line);
}
.split-row .split-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:var(--img-pos, center);
}
.split-row .split-media figcaption{
  padding:.7em 1em;
  font-size:.76rem;
  color:var(--muted);
  background:var(--paper);
}
.split-row .split-body .eyebrow{ display:block; margin-bottom:.6em; }
.split-row .split-body h3{ font-size:1.3rem; }
.split-row .split-body p{ color:var(--muted); margin-top:.9em; }
.split-row + .split-row{ margin-top:var(--space-section); }
@media (max-width:780px){
  .split-row{ grid-template-columns:1fr; }
  .split-row.is-reverse .split-media{ order:-1; }
}

/* ---------------- 代表者プロフィール(実写真なし、テキスト構成) ---------------- */
.profile-block{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:clamp(24px,4vw,40px);
}
.profile-block .profile-name{
  font-family:var(--font-serif);
  font-size:1.3rem;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:.8em;
  flex-wrap:wrap;
}
.profile-block .profile-name .furigana{
  font-family:var(--font-sans);
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.profile-block .profile-title{
  font-size:.85rem;
  color:var(--accent-strong);
  margin-top:.4em;
}
.profile-block .profile-body{
  margin-top:1.4em;
  display:flex;
  flex-direction:column;
  gap:1em;
}
.profile-block .profile-body p{ margin:0; color:var(--muted); }
.callout-line{
  font-family:var(--font-serif);
  font-size:1.05rem;
  color:var(--accent-strong);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:1em;
  margin-top:1.6em;
}

/* ---------------- 外部サイトへの補助リンク(主要CTAより控えめ) ---------------- */
.external-link-note{
  margin-top:1em;
  font-size:.85rem;
}
.external-link-note a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.external-link-note a:hover{ color:var(--accent-strong); }
.external-link-note a::after{ content:" ↗"; }

/* ---------------- 実績ポイント(Achievements、本文つき) ---------------- */
.point-list{
  display:flex;
  flex-direction:column;
  gap:clamp(28px,4vw,44px);
}
.point-card{
  border-top:2px solid var(--accent);
  padding-top:1.2em;
}
.point-card .eyebrow{ display:block; margin-bottom:.5em; }
.point-card h3{ font-size:1.15rem; line-height:1.6; margin-bottom:.7em; }
.point-card p{ color:var(--muted); margin:0; }
.point-card p + p{ margin-top:1em; }

/* サービス詳細内の役割別ブロック */
.role-block{ margin-top:1.6em; }
.role-block .role-label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-strong);
  display:block;
  margin-bottom:.6em;
}
.role-block.is-callout{
  background:var(--paper-2);
  border-radius:var(--radius-m);
  padding:1.2em 1.4em;
}
.role-block.is-pending{
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-m);
  padding:1em 1.2em;
  color:var(--muted);
  font-size:.85rem;
}

/* ---------------- 引用・メッセージブロック(人物写真なし版) ---------------- */
.quote-block{
  border-left:3px solid var(--accent);
  padding:.2em 0 .2em 1.6em;
}
.quote-block p{
  font-family:var(--font-serif);
  font-size:clamp(1.05rem,2vw,1.25rem);
  color:var(--ink);
  line-height:1.9;
}
.quote-block .quote-cite{
  display:block;
  margin-top:1em;
  font-family:var(--font-sans);
  font-size:.82rem;
  color:var(--muted);
}

/* ---------------- タイムライン(横→縦) ---------------- */
.timeline{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:1.1em;
  left:0;
  right:0;
  height:1px;
  background:var(--line-strong);
}
.timeline-step{
  position:relative;
  padding:0 1.4em 0 0;
}
.timeline-step .n{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2em;
  height:2.2em;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--accent);
  color:var(--accent-strong);
  font-family:var(--font-serif);
  font-size:1rem;
}
.timeline-step h3{ margin-top:.9em; font-size:1rem; }
.timeline-step p{ color:var(--muted); font-size:.88rem; margin-top:.5em; }
@media (max-width:720px){
  .timeline{ grid-template-columns:1fr; gap:1.6em; }
  .timeline::before{ top:0; bottom:0; left:1.1em; right:auto; width:1px; height:auto; }
  .timeline-step{ padding-left:3.2em; }
  .timeline-step .n{ position:absolute; left:0; top:0; }
}

/* ---------------- 比較グリッド(料金プラン) ---------------- */
.compare-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-gap);
  align-items:stretch;
}
@media (max-width:820px){
  .compare-grid{ grid-template-columns:1fr; }
}
.compare-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:1.8em 1.6em;
  display:flex;
  flex-direction:column;
  gap:.9em;
}
.compare-card .price{
  font-family:var(--font-serif);
  font-size:1.1rem;
  color:var(--muted);
}
.compare-card .cta-row{ margin-top:auto; padding-top:.8em; }

/* ---------------- 2カラム(お問い合わせ) ---------------- */
.two-col{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
@media (max-width:860px){
  .two-col{ grid-template-columns:1fr; }
}
.two-col .col-aside h2{ font-size:1.2rem; }
.two-col .col-aside p{ color:var(--muted); margin-top:1em; font-size:.94rem; }
.two-col .col-aside .aside-list{
  list-style:none;
  margin:1.6em 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1em;
}
.two-col .col-aside .aside-list li{
  padding-top:1em;
  border-top:1px solid var(--line);
  font-size:.92rem;
  color:var(--muted);
}
.two-col .col-aside .aside-list strong{ color:var(--ink); display:block; margin-bottom:.3em; }

/* ---------------- Before/After(相談後に目指す状態) ---------------- */
.state-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-gap);
}
.state-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--paper);
}
.state-card h3{ padding:1.2em 1.4em .6em; font-size:1rem; }
.state-card .state-before,
.state-card .state-after{ padding:.9em 1.4em; font-size:.9rem; }
.state-card .state-before{ color:var(--muted); }
.state-card .state-before::before{
  content:"Before";
  display:block;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:.4em;
}
.state-card .state-after{
  background:var(--paper-2);
  color:var(--ink);
}
.state-card .state-after::before{
  content:"目指す状態";
  display:block;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--accent-strong);
  margin-bottom:.4em;
}

/* ---------------- 小さな補足ラベル ---------------- */
.tag{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.05em;
  padding:.3em .8em;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 14%, var(--paper));
  color:var(--accent-strong);
}

/* ---------------- セクション間の区切り ---------------- */
.section-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
  width:100%;
}

/* ---------------- a11y ---------------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--accent);
  color:var(--paper);
  padding:.7em 1.2em;
  z-index:100;
  border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{ left:0; }