/* =============================================================
   六本松皮ふ科 AGA・FAGA LP スタイル（WP組み込み）
   - 全クラスに `aga-` プレフィックス
   - デザインプロト（ropponmatsu-aga/index.html）の <style> を移植
   - テーマヘッダー/フッターを使うため、プロトの site-header /
     footer 系スタイルは削除。page-nav は sticky top:0 に変更
   - SP固定電話CTA は他LP（acne/pore/environ）に合わせて追加
   ============================================================= */

.aga-lp,
.aga-stickycta {
  --bg: #ffffff;
  --surface: #ffffff;
  --soft: #f6f5f1;
  --tint: #faf6ed;
  --ink: #332b24;
  --sub: #644b2f;
  --muted: #8c837a;
  --accent: #cfa326;
  --accent-deep: #8b6f30;
  --accent-ink: #3d2d0c;
  --line: #dbcda7;
  --neutral-line: #e2e4df;
}

html { scroll-behavior: smooth; }

/* ===== RESET & BASE（LP範囲のみ） ===== */
.aga-lp *, .aga-lp *::before, .aga-lp *::after,
.aga-stickycta *, .aga-stickycta *::before, .aga-stickycta *::after { box-sizing: border-box; }

.aga-lp {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.aga-lp img { display: block; width: 100%; height: auto; border: 0; }
.aga-lp a { color: inherit; text-decoration: none; }
.aga-lp p, .aga-lp h1, .aga-lp h2, .aga-lp h3, .aga-lp h4, .aga-lp ul { margin-top: 0; }
/* テーマ reset（default.css）の `strong { font: inherit }` で太字が失われるため明示 */
.aga-lp strong { font-weight: 700; }
.aga-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.aga-source-mark { display: none; }

/* ===== PAGE NAV ===== */
.aga-page-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.aga-page-nav::-webkit-scrollbar { display: none; }
.aga-page-nav ul {
  display: flex;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aga-page-nav a {
  display: block;
  padding: 14px 14px 13px;
  border-bottom: 2px solid transparent;
  color: var(--sub);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.aga-page-nav a:hover, .aga-page-nav a:focus-visible, .aga-page-nav a.active {
  background: var(--tint);
  border-bottom-color: var(--accent);
  color: var(--accent-ink);
}

/* ===== ANCHOR OFFSET（sticky サブナビの高さぶん） ===== */
.aga-hero, .aga-feature-section, .aga-ranking-intro, .aga-closing-section, .aga-contact-section { scroll-margin-top: 58px; }

/* ===== HERO ===== */
.aga-hero { padding: 58px 0 82px; background: var(--surface); }
.aga-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.03fr;
  gap: 54px;
  align-items: center;
}
.aga-eyebrow {
  margin: 0 0 17px;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}
.aga-hero h1 {
  margin: 0;
  color: var(--accent-ink);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}
.aga-hero h1 .aga-title-line { display: block; }
.aga-hero h1 .aga-title-sub { font-size: 28px; line-height: 1.6; }
.aga-hero h1 .aga-title-divider {
  display: block;
  width: 38px;
  height: 2px;
  margin: 17px 0;
  overflow: hidden;
  background: var(--accent);
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.aga-visual {
  overflow: hidden;
  border-radius: 8px;
  background: var(--soft);
  aspect-ratio: 940 / 788;
}
.aga-visual img { height: 100%; object-fit: cover; }

.aga-intro-copy { width: min(100%, 900px); margin: 64px auto 0; }
.aga-concern-block {
  margin-bottom: 38px;
  padding: 28px 32px 30px;
  border-radius: 8px;
  background: var(--tint);
}
.aga-concern-question {
  margin: 0 0 22px;
  color: var(--accent-ink);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
}
.aga-concern-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.aga-concern-list li {
  position: relative;
  padding: 3px 18px 3px 25px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85;
}
.aga-concern-list li:first-child { border-left: 0; }
.aga-concern-list li::before {
  content: '';
  position: absolute;
  left: 9px;
  top: .92em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.aga-intro-body { padding: 0 18px; }
.aga-intro-body p { margin: 0 0 16px; font-size: 15px; line-height: 2; }
.aga-intro-body > p:first-child { margin-bottom: 22px; font-size: 16px; line-height: 2.05; }
.aga-intro-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 22px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.aga-intro-triad li {
  position: relative;
  padding-left: 17px;
  font-size: 15px;
  font-weight: 600;
}
.aga-intro-triad li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ===== FEATURE SECTIONS ===== */
.aga-feature-section { padding: 86px 0; background: var(--surface); }
.aga-feature-section.aga-tone { background: var(--soft); }
.aga-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.aga-feature-grid.aga-reverse .aga-section-media { order: 2; }
.aga-feature-grid.aga-reverse .aga-section-body { order: 1; }
.aga-section-media { margin-top: 4px; }
.aga-section-body h2 {
  margin: 0 0 24px;
  color: var(--accent-ink);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}
.aga-section-body h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 15px;
  background: var(--accent);
}
.aga-section-body h3 {
  margin: 27px 0 11px;
  color: var(--accent-deep);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
}
.aga-section-body h4 {
  margin: 23px 0 9px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.75;
}
.aga-copy p { margin: 0 0 16px; font-size: 15px; line-height: 2; }
.aga-copy p:last-child { margin-bottom: 0; }
.aga-plain-list {
  display: grid;
  gap: 7px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}
.aga-plain-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}
.aga-plain-list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: .84em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.aga-quote-list {
  display: grid;
  gap: 9px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}
.aga-quote-list li {
  position: relative;
  padding-left: 17px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.85;
}
.aga-quote-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .88em;
  width: 7px;
  height: 2px;
  background: var(--accent);
}
.aga-detail-list { margin: 18px 0 0; border-top: 1px solid var(--neutral-line); }
.aga-detail-item { padding: 14px 0; border-bottom: 1px solid var(--neutral-line); }
.aga-detail-item p { margin: 0; font-size: 14px; line-height: 1.9; }
.aga-detail-item strong { color: var(--accent-deep); }
.aga-emphasis {
  margin: 22px 0;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}
.aga-emphasis p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.9; }

/* ===== RANKING INTRO ===== */
.aga-ranking-intro { padding: 84px 0; background: var(--tint); }
.aga-ranking-intro-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 56px;
  align-items: center;
}
.aga-ranking-intro h2 {
  margin: 0 0 22px;
  color: var(--accent-ink);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.55;
}
.aga-ranking-intro .aga-visual { background: #fff; }

.aga-step-list { margin-top: 24px; border-top: 1px solid var(--neutral-line); }
.aga-step-item { padding: 18px 0; border-bottom: 1px solid var(--neutral-line); }
.aga-step-item h4 { margin: 0 0 7px; color: var(--accent-deep); font-size: 15px; }
.aga-step-item p { margin: 0; font-size: 14px; line-height: 1.95; }

/* ===== CLOSING ===== */
.aga-closing-section { padding: 88px 0; background: var(--tint); }
.aga-closing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.aga-closing-section h2 {
  margin: 0 0 22px;
  color: var(--accent-ink);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 29px;
  line-height: 1.55;
}

/* ===== COMPLIANCE NOTES ===== */
.aga-compliance { padding: 30px 0 42px; background: var(--surface); }
.aga-compliance ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aga-compliance li {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.9;
  margin-bottom: 4px;
}

/* ===== CONTACT ===== */
.aga-contact-section {
  padding: 52px 0;
  background: var(--accent-ink);
  color: #fff;
}
.aga-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 64px;
  align-items: center;
}
.aga-contact-heading {
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.55;
}
/* a要素のため、common.css の `a, a:visited { color:#3d2d0c }` (0,1,1) と
   `.aga-lp a { color:inherit }` (0,1,1) に勝つよう詳細度を上げる */
.aga-lp a.aga-closing-cta-tel,
.aga-lp a.aga-closing-cta-tel:visited {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  transition: background-color .2s ease, transform .2s ease;
}
.aga-lp a.aga-closing-cta-tel:hover, .aga-lp a.aga-closing-cta-tel:focus-visible {
  background: #e1bd4b;
  color: var(--accent-ink);
  transform: translateY(-1px);
}
.aga-closing-cta-tel svg { width: 19px; height: 19px; flex: 0 0 19px; }
.aga-closing-cta-note { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }

/* ===== STICKY MOBILE CTA（他LPに合わせて追加） ===== */
.aga-stickycta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  padding: 12px 16px;
}
a.aga-stickycta-btn,
a.aga-stickycta-btn:visited {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: #fff;
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.aga-stickycta-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .aga-wrap { width: min(100% - 30px, 1120px); }
  .aga-page-nav { position: static; }
  .aga-page-nav .aga-wrap { width: 100%; }
  .aga-page-nav ul { min-width: 0; padding: 0 12px; }
  .aga-page-nav a { padding: 12px 11px 11px; font-size: 11.5px; }
  .aga-hero, .aga-feature-section, .aga-ranking-intro, .aga-closing-section, .aga-contact-section { scroll-margin-top: 16px; }
  .aga-hero { padding: 38px 0 58px; }
  .aga-hero-grid, .aga-feature-grid, .aga-ranking-intro-grid, .aga-closing-grid, .aga-contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .aga-hero-grid .aga-visual { order: -1; }
  .aga-hero h1 { font-size: 29px; line-height: 1.55; }
  .aga-hero h1 .aga-title-sub { font-size: 23px; }
  .aga-intro-copy { margin-top: 40px; }
  .aga-concern-block { margin-bottom: 30px; padding: 23px 20px 24px; }
  .aga-concern-question { margin-bottom: 16px; font-size: 18px; }
  .aga-concern-list, .aga-intro-triad { grid-template-columns: 1fr; }
  .aga-concern-list li {
    padding: 10px 0 10px 17px;
    border-top: 1px solid var(--line);
    border-left: 0;
    font-size: 14px;
  }
  .aga-concern-list li::before { left: 0; }
  .aga-intro-body { padding: 0; }
  .aga-intro-body > p:first-child { font-size: 15px; }
  .aga-intro-triad { gap: 6px; }
  .aga-feature-section, .aga-ranking-intro, .aga-closing-section { padding: 60px 0; }
  .aga-contact-section { padding: 38px 0 40px; }
  .aga-contact-heading { font-size: 20px; }
  .aga-feature-grid.aga-reverse .aga-section-media, .aga-feature-grid .aga-section-media { order: -1; }
  .aga-feature-grid.aga-reverse .aga-section-body, .aga-feature-grid .aga-section-body { order: 2; }
  .aga-section-body h2 { font-size: 22px; }
  .aga-ranking-intro h2 { font-size: 25px; }
  .aga-closing-section h2 { font-size: 24px; }
  .aga-copy p, .aga-plain-list li, .aga-quote-list li { font-size: 14px; }

  .aga-stickycta { display: block; }
  body.page-aga { padding-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =============================================================
   WP統合時の調整（/aga/ ページのみ）
   - 最終CTA直下の Google Map (contentbottom widget) を密着させる
   - common.css の `.under-page .contentbottom { margin-top: 30px }` は
     共通パーツのため触らず、こちら側で上書きする
   ============================================================= */
.page-aga .contentbottom { margin-top: 0 !important; }