@charset "UTF-8";
/* ==========================================================================
   みなと整体院 LP
   構成：1. 設定（CSS変数） / 2. ベース / 3. 共通パーツ / 4. セクション別 / 5. レスポンシブ
   色・余白・角丸は「1. 設定」でまとめて変更できます。
   ========================================================================== */

/* ==========================================================================
   1. 設定（ここを変えればサイト全体のトーンが変わります）
   ========================================================================== */
:root {
  /* --- ベース --- */
  --c-bg:            #ffffff;
  --c-text:          #2f3a37;   /* 純黒を避けた濃いグレーグリーン */
  --c-text-weak:     #6b7873;
  --c-border:        #e2eae6;

  /* --- 面の色（セクション背景） --- */
  --c-green-bg:      #f2f8f5;   /* 薄いグリーン */
  --c-blue-bg:       #eef4f8;   /* 薄いブルー */

  /* --- アクセント --- */
  --c-green:         #4a9d7e;
  --c-green-dark:    #35755d;
  --c-blue:          #5b8fb0;
  --c-blue-dark:     #416b87;

  /* --- CTA（LINEブランドカラー。LINE導線のみに使用） --- */
  --c-line:          #06c755;
  --c-line-dark:     #05a648;

  /* --- タイポグラフィ --- */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --fz-body:   1rem;      /* 16px：30〜50代の可読性を優先 */
  --lh-body:   1.9;

  /* --- 余白 --- */
  --sp-section:  4rem;    /* セクション上下（スマホ） */
  --sp-gap:      1.25rem;
  --container:   1080px;
  --container-narrow: 760px;
  --pad-x:       1.25rem;

  /* --- 装飾 --- */
  --radius:      14px;
  --radius-sm:   10px;
  --shadow:      0 2px 12px rgba(47, 58, 55, .06);
  --shadow-lift: 0 6px 24px rgba(47, 58, 55, .10);

  /* --- スマホ固定CTAの高さ（本文下部の余白計算に使用） --- */
  --fixed-cta-h: 74px;
}

/* ==========================================================================
   2. ベース
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--fixed-cta-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
p  { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--c-green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #fff; padding: .75rem 1rem; z-index: 200;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* viewport-fit=cover を指定しているため、横向きのiPhoneでノッチ側に
     本文が潜らないよう、左右余白は「通常の余白」と「safe-area」の大きい方を採用する。
     縦向き（inset=0）では従来どおり var(--pad-x) が使われ、見た目は変わらない。 */
  padding-left:  max(var(--pad-x), env(safe-area-inset-left,  0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: var(--container-narrow); }

.sp-only { display: inline; }
.pc-only { display: none; }
/* スマホ幅でのみ効く改行。375pxでH1が「終わらせな／いために」と
   分断されるのを防ぐために使用（600px以上では無効化） */
.br-sp { display: inline; }

/* ==========================================================================
   3. 共通パーツ
   ========================================================================== */

/* --- セクション --- */
.section { padding-block: var(--sp-section); }
.section--green { background: var(--c-green-bg); }
.section--blue  { background: var(--c-blue-bg); }

.section__eyebrow {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-green);
  text-align: center;
}
.section__title {
  margin: 0 0 1.5rem;
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: center;
  letter-spacing: .01em;
}
.section__lead {
  max-width: 44em;
  margin-inline: auto;
  margin-bottom: 2rem;
  text-align: left;
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn__text { display: flex; flex-direction: column; line-height: 1.35; }
.btn__text strong { font-size: 1.0625rem; }
.btn__text small  { font-size: .75rem; font-weight: 400; opacity: .92; }
.btn__icon { flex: none; display: inline-flex; }

/* LINE（最重要CTA） */
.btn--line {
  background: var(--c-line);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6, 199, 85, .28);
}
.btn--line:hover { background: var(--c-line-dark); box-shadow: var(--shadow-lift); }

.btn--lg { width: 100%; max-width: 420px; min-height: 66px; }
.btn--sm { min-height: 40px; padding: .35rem 1rem; font-size: .875rem; box-shadow: none; }

/* 電話（サブCTA：LINEより弱い見た目） */
.btn--ghost {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  font-weight: 600;
  font-size: .9375rem;
  min-height: 48px;
  box-shadow: none;
}
.btn--ghost:hover { background: #f7faf9; }
.btn--ghost .btn__text        { align-items: center; }
.btn--ghost .btn__text strong { font-size: .9375rem; }
.btn--ghost .btn__text small  { font-size: .8125rem; color: var(--c-text-weak); }
.tel-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* --- 写真プレースホルダー（仮画像で誤魔化さず、必要な写真を明示する） --- */
.photo-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 200px;
  padding: 2rem 1.25rem 1.25rem;
  background:
    repeating-linear-gradient(45deg, #f6faf8 0 10px, #eef5f1 10px 20px);
  border: 2px dashed #b7cfc4;
  border-radius: var(--radius);
  text-align: center;
  color: var(--c-text-weak);
}
.photo-ph__tag {
  position: absolute;
  top: .625rem; left: .625rem;
  padding: .15rem .6rem;
  background: var(--c-green);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 999px;
}
.photo-ph__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}
.photo-ph__hint { margin: 0; font-size: .75rem; line-height: 1.7; }

.photo-ph--hero     { min-height: 300px; aspect-ratio: 4 / 5; }
.photo-ph--portrait { aspect-ratio: 4 / 5; }
.photo-ph--wide     { aspect-ratio: 3 / 2; }
.photo-ph--map      { min-height: 240px; }
.photo-ph--qr       { min-height: 140px; width: 140px; padding: 1.75rem .5rem .5rem; }
.photo-ph--qr .photo-ph__label { font-size: .75rem; }

/* --- 実写真 ---
   比率はプレースホルダーと同じ値を指定しているため、写真を入れても
   セクションの高さはほぼ変わりません。
   object-fit: cover は、差し替え画像の比率が多少ずれても崩れないための保険です。 */
.photo {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--c-green-bg);   /* 読み込み中の下地 */
}
.photo--hero     { aspect-ratio: 4 / 5; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide     { aspect-ratio: 3 / 2; }
.photo--access   { aspect-ratio: 3 / 2; }
/* ロゴは写真と違い、切り抜かず全体を収める（余白付きの白いブランドカード） */
.photo--logo {
  object-fit: contain;
  background: #fff;
  padding: 1.25rem;
  border: 1px solid var(--c-border);
}

.photo-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.photo-grid--3 { margin-top: 1rem; }
/* 実写真と未提供のプレースホルダーが混在する列で、高さを揃える */
.photo-grid--3 .photo-ph { aspect-ratio: 3 / 2; min-height: 0; }

/* --- 未確定情報のマーキング --- */
.is-tbd {
  background: #fff6df;
  border-bottom: 1px dashed #d8b25e;
  padding: 0 .15em;
}
.tbd-tag {
  display: inline-block;
  margin-inline: .35em;
  padding: .05em .5em;
  background: #fff2d4;
  border: 1px solid #e3c07c;
  border-radius: 999px;
  color: #8a6520;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- 補足ボックス --- */
.note-box {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem;
  background: var(--c-green-bg);
  border-left: 4px solid var(--c-green);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
}
.note-box--plain {
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-blue);
}

.disclaimer {
  margin-top: 1.5rem;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--c-text-weak);
  text-align: center;
}

/* ==========================================================================
   4. セクション別
   ========================================================================== */

/* --- ヘッダー --- */
.site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--c-border);
  /* Safari 18以降は非プレフィックス版に対応済み。18.x系に非プレフィックス版が
     効かない回帰報告があるため、互換性フォールバックとして両方を指定している */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-block: .5rem;
}
.site-header__brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .15rem; line-height: 1.4; min-width: 0;
}
.site-header__name  { font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; }
.site-header__sub   { font-size: .6875rem; color: var(--c-text-weak); }
.site-header__logo  { display: block; height: 34px; width: auto; }

.site-header__nav { display: flex; align-items: center; gap: 1.25rem; }
.site-header__nav > a:not(.btn) {
  display: none;
  color: var(--c-text);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
}

/* --- 1. ファーストビュー --- */
.hero {
  position: relative;
  padding-block: 2.25rem 3rem;
  background:
    linear-gradient(180deg, #f4faf7 0%, #eef4f8 100%);
}
.hero__inner { display: flex; flex-direction: column; gap: 1.75rem; }

.hero__eyebrow {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-green-dark);
}
.hero__title {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  line-height: 1.55;
  letter-spacing: .005em;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, #cfe9dd 62%);
  padding-inline: .05em;
}
.hero__lead { font-size: .9375rem; line-height: 1.9; color: #48544f; }

.hero__badges {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.hero__badges li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #dbe9e2;
  border-radius: var(--radius-sm);
}
.hero__badges strong { font-size: .9375rem; color: var(--c-green-dark); white-space: nowrap; }
.hero__badges span   { font-size: .75rem; color: var(--c-text-weak); }

.hero__cta { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.hero__cta .btn--ghost { width: 100%; max-width: 420px; }
.hero__note {
  margin: .25rem 0 0;
  font-size: .75rem;
  color: var(--c-text-weak);
  text-align: center;
}

/* --- 2. 共感 --- */
.empathy { max-width: 44em; margin-inline: auto; }
.empathy__text { font-size: .9375rem; }
.empathy__text strong { background: linear-gradient(transparent 62%, #d8ecf7 62%); }

/* --- 3. お悩み --- */
.worry-card {
  max-width: 44em;
  margin: 2.5rem auto 0;
  padding: 1.75rem 1.25rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.worry-card__title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  text-align: center;
  color: var(--c-green-dark);
}
.checklist { display: grid; gap: .75rem; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  font-size: .9375rem;
  line-height: 1.75;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 20px; height: 20px;
  border: 2px solid var(--c-green);
  border-radius: 5px;
  background: #fff;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6px; top: .55em;
  width: 8px; height: 4px;
  border-left: 2.5px solid var(--c-green);
  border-bottom: 2.5px solid var(--c-green);
  transform: rotate(-45deg);
}
.worry-card__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  font-size: .875rem;
  color: var(--c-text-weak);
}

/* --- 4. 施術について --- */
.approach { display: grid; gap: 1rem; counter-reset: step; }
.approach__item {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.approach__num {
  position: absolute;
  top: -.7rem; left: 1.25rem;
  padding: .1rem .7rem;
  background: var(--c-green);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 999px;
}
.approach__title { margin: 0 0 .5rem; font-size: 1.0625rem; }
.approach__item p { font-size: .9375rem; margin: 0; }

/* --- 5. 選ばれる理由 --- */
.reasons { display: grid; gap: 1rem; }
.reason {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem 1.25rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.reason__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: .6rem;
  background: var(--c-blue);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  border-radius: 50%;
}
.reason__title { margin: 0 0 .5rem; font-size: 1.0625rem; color: var(--c-blue-dark); }
.reason p { margin: 0; font-size: .9375rem; }

/* --- 中間CTA --- */
.cta-band {
  padding-block: 2.5rem;
  background: linear-gradient(180deg, #f4faf7 0%, #ecf5f0 100%);
  border-block: 1px solid #e0ece6;
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.cta-band__text { margin: 0; font-size: .9375rem; font-weight: 600; }
.cta-band .btn--line { width: 100%; max-width: 400px; }

/* --- 6. 施術者プロフィール --- */
.profile { display: grid; gap: 1.75rem; }
.profile__photo { max-width: 340px; margin-inline: auto; width: 100%; }
.profile__role { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 700; color: var(--c-green); }
.profile__name { margin: 0 0 1.25rem; font-size: 1.375rem; font-weight: 700; }

.profile__facts {
  display: grid;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.1rem;
  background: var(--c-green-bg);
  border-radius: var(--radius-sm);
}
.profile__facts li { display: grid; grid-template-columns: 5.5em 1fr; gap: .5rem; font-size: .875rem; }
.profile__facts span   { color: var(--c-text-weak); font-size: .8125rem; padding-top: .1em; }
.profile__facts strong { font-weight: 600; line-height: 1.8; }
.profile__text { font-size: .9375rem; }

/* --- 7. お客様の声 --- */
.voices { display: grid; gap: 1rem; }
.voice {
  padding: 1.5rem 1.25rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.voice__who {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .1rem .7rem;
  background: var(--c-blue-bg);
  color: var(--c-blue-dark);
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
}
.voice__title { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.65; color: var(--c-green-dark); }
.voice__text  { margin: 0; font-size: .9375rem; }

/* --- 8. 施術の流れ --- */
.flow { position: relative; display: grid; gap: 0; max-width: 40em; margin-inline: auto; }
.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.flow__item:last-child { padding-bottom: 0; }
.flow__item::before {
  content: "";
  position: absolute;
  left: 19px; top: 34px; bottom: 0;
  width: 2px;
  background: #d6e7de;
}
.flow__item:last-child::before { display: none; }
.flow__no {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 2px solid var(--c-green);
  color: var(--c-green-dark);
  font-size: .9375rem;
  font-weight: 700;
  border-radius: 50%;
}
.flow__item h3 { margin: .4rem 0 .3rem; font-size: 1rem; }
.flow__item p  { margin: 0; font-size: .875rem; color: #55615c; }

/* --- 9. 料金 --- */
.price-cards { display: grid; gap: 1rem; max-width: 40em; margin-inline: auto; }
.price-card {
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.price-card--first { border: 2px solid var(--c-green); box-shadow: var(--shadow); }
.price-card__label {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .1rem .8rem;
  background: var(--c-blue-bg);
  color: var(--c-blue-dark);
  font-size: .8125rem;
  font-weight: 700;
  border-radius: 999px;
}
.price-card--first .price-card__label { background: var(--c-green); color: #fff; }
.price-card__amount { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 700; }
.price-card__num { font-size: 2.25rem; line-height: 1.2; letter-spacing: -.01em; }
.price-card--first .price-card__num { color: var(--c-green-dark); }
.price-card__detail { margin: 0 0 1rem; font-size: .875rem; color: var(--c-text-weak); }
.price-card__list { display: grid; gap: .4rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.price-card__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .875rem;
  line-height: 1.7;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .65em;
  width: 6px; height: 6px;
  background: var(--c-green);
  border-radius: 50%;
}

.price-notes {
  max-width: 40em;
  margin: 2rem auto 0;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border-radius: var(--radius);
}
.price-notes h3 { margin: 0 0 1rem; font-size: 1rem; color: var(--c-green-dark); }
.price-notes ul { display: grid; gap: .9rem; }
.price-notes li { font-size: .875rem; line-height: 1.8; }
.price-notes__tbd {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
  font-size: .8125rem;
  color: var(--c-text-weak);
}

/* --- 10. FAQ --- */
.faq { display: grid; gap: .75rem; }
.faq__item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 60px;
  padding: 1rem 1.1rem;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
.faq__q::before {
  content: "Q";
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-right: .1rem;
  background: var(--c-green-bg);
  color: var(--c-green-dark);
  font-size: .8125rem;
  border-radius: 50%;
}
.faq__q > span { flex: 1; }
.faq__q::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-green);
  border-bottom: 2px solid var(--c-green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.faq__q[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__q:hover { background: #fafcfb; }

.faq__a { padding: 0 1.1rem 1.25rem; }
.faq__a p {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--c-green-bg);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
}
.faq__a[hidden] { display: none; }

/* --- 11. アクセス --- */
.access { display: grid; gap: 2rem; }
.info-table {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.info-table__row {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: .5rem 1rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--c-border);
  font-size: .875rem;
}
.info-table__row:last-child { border-bottom: 0; }
.info-table dt { color: var(--c-text-weak); font-weight: 600; font-size: .8125rem; padding-top: .15em; }
.info-table dd { margin: 0; line-height: 1.8; }
.access__tbd {
  margin: 1rem 0 0;
  font-size: .8125rem;
  color: var(--c-text-weak);
}
.access__media { display: grid; gap: 1rem; }

/* --- 12. 最終CTA --- */
.reserve {
  padding-block: var(--sp-section);
  background: linear-gradient(180deg, #eef4f8 0%, #f4faf7 100%);
  text-align: center;
}
.reserve__eyebrow {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-green);
}
.reserve__title { margin: 0 0 1rem; font-size: 1.375rem; line-height: 1.6; }
.reserve__lead  { font-size: .9375rem; text-align: left; max-width: 34em; margin-inline: auto; }

.reserve__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.reserve__actions .btn--ghost { width: 100%; max-width: 420px; }
.reserve__qr { display: none; }
.reserve__note { margin: 0; font-size: .75rem; line-height: 1.8; color: var(--c-text-weak); }

.reserve__steps-title {
  margin: 2.5rem 0 1rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--c-green-dark);
}
.reserve__steps {
  display: grid;
  gap: .5rem;
  max-width: 22em;
  margin-inline: auto;
  counter-reset: rstep;
  text-align: left;
}
.reserve__steps li {
  counter-increment: rstep;
  position: relative;
  padding: .7rem 1rem .7rem 2.75rem;
  background: rgba(255, 255, 255, .8);
  border-radius: var(--radius-sm);
  font-size: .875rem;
}
.reserve__steps li::before {
  content: counter(rstep);
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--c-green);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 50%;
}

/* --- フッター --- */
.site-footer {
  padding-block: 2.5rem;
  background: #f6f9f8;
  border-top: 1px solid var(--c-border);
}
.site-footer__inner { display: grid; gap: 1.75rem; }
.site-footer__name  { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; }
/* フッターはキャッチコピー入りのフルロゴを、読める大きさで表示する */
.site-footer__logo  { display: block; width: auto; height: 54px; margin-bottom: .85rem; }
.site-footer__addr  { margin: 0; font-size: .8125rem; color: var(--c-text-weak); line-height: 1.9; }
.site-footer__nav   { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer__nav a { color: var(--c-text); text-decoration: none; font-size: .8125rem; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__copy  { margin: 0; font-size: .75rem; color: var(--c-text-weak); }

/* --- スマホ固定CTA --- */
.fixed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: .5rem;
  /* 下：ホームインジケーター分／左右：横向き時のノッチ分を確保 */
  padding-top:    .5rem;
  padding-right:  max(.75rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  padding-left:   max(.75rem, env(safe-area-inset-left,  0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 14px rgba(47, 58, 55, .08);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.fixed-cta.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fixed-cta { transition: none; }
}

.fixed-cta__tel {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 62px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-text-weak);
  text-decoration: none;
  font-size: .6875rem;
  font-weight: 600;
}
.fixed-cta__line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
  background: var(--c-line);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 10px rgba(6, 199, 85, .3);
}
.fixed-cta__line span   { display: flex; flex-direction: column; line-height: 1.3; }
.fixed-cta__line strong { font-size: 1rem; }
.fixed-cta__line small  { font-size: .6875rem; font-weight: 400; }

/* --- 控えめなフェードイン --- */
.js-reveal { opacity: 0; transform: translateY(14px); }
.js-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal.is-revealed { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   5. レスポンシブ
   ========================================================================== */

/* --------------------------------------------------------------------------
   スマートフォンの視認性・情報密度の調整（〜599px 限定）

   狙い：本文の読みやすさは維持したまま、1枚あたりのカード高さと
         セクション余白を詰めて、スクロール量を減らす。
   ・タブレット／PC（600px以上）には一切影響しません
   ・この @media ブロックを丸ごと削除すれば、調整前の状態に戻ります
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {

  :root {
    --lh-body:     1.8;      /* 1.9 → 1.8。1行あたり1.6px縮み、全体で最も効く */
    --sp-section:  3.25rem;  /* 4rem → 3.25rem。セクションごとに上下12pxずつ削減 */
    --fixed-cta-h: 60px;     /* 74px → 60px（下部固定CTAの占有高さ） */
  }

  /* --- 見出しまわりの余白 --- */
  .section__title { margin-bottom: 1.25rem; }
  .section__lead  { margin-bottom: 1.5rem; }
  .note-box       { margin-top: 1.5rem; padding: 1.1rem; }
  .photo-grid     { margin-top: 1.5rem; }

  /* --- カード内の本文：行送りだけ少し詰める（文字サイズは維持） --- */
  .reason p,
  .approach__item p,
  .voice__text,
  .flow__item p,
  .price-notes li,
  .info-table dd { line-height: 1.75; }

  /* --- FV --- */
  .hero__badges li { padding: .6rem .85rem; }

  /* --- お悩みチェックリスト --- */
  .worry-card        { margin-top: 2rem; padding: 1.5rem 1.15rem; }
  .worry-card__title { margin-bottom: 1rem; }
  .checklist         { gap: .6rem; }
  .worry-card__foot  { margin-top: 1.25rem; padding-top: 1rem; }

  /* --- 施術について --- */
  .approach__item { padding: 1.3rem 1.15rem 1.1rem; }

  /* --- 選ばれる理由 ---
     番号バッジが1行を専有していたのを見出しの左に移動し、
     本文はカード幅いっぱいに回り込ませる（1枚あたり約60px削減） */
  .reasons { gap: .75rem; }
  .reason {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: .65rem;
    align-items: center;
    padding: 1.15rem 1.15rem 1.2rem;
  }
  .reason__no    { width: 26px; height: 26px; margin-bottom: 0; font-size: .8125rem; }
  .reason__title { grid-column: 2; margin-bottom: 0; font-size: 1rem; }
  .reason p      { grid-column: 1 / -1; margin-top: .5rem; }

  /* --- 施術者プロフィール --- */
  .profile        { gap: 1.5rem; }
  .profile__facts { gap: .5rem; padding: 1rem; margin-bottom: 1.25rem; }

  /* --- お客様の声 --- */
  .voices      { gap: .75rem; }
  .voice       { padding: 1.25rem 1.15rem; }
  .voice__who  { margin-bottom: .6rem; }
  .voice__title{ margin-bottom: .5rem; }
  .disclaimer  { margin-top: 1.25rem; }

  /* --- 施術の流れ --- */
  .flow__item    { padding-bottom: 1.1rem; }
  .flow__item h3 { margin: .3rem 0 .25rem; }

  /* --- 料金 --- */
  .price-card       { padding: 1.3rem 1.15rem; }
  .price-card__list { gap: .3rem; padding-top: .85rem; }
  .price-notes      { margin-top: 1.5rem; padding: 1.3rem 1.15rem; }
  .price-notes ul   { gap: .75rem; }

  /* --- FAQ --- */
  .faq        { gap: .6rem; }
  .faq__q     { min-height: 54px; padding: .85rem 1rem; }
  .faq__a     { padding: 0 1rem 1rem; }
  .faq__a p   { padding: .9rem 1rem; }

  /* --- アクセス --- */
  .access            { gap: 1.5rem; }
  .info-table__row   { padding: .75rem 1rem; }

  /* --- 最終CTA --- */
  .reserve__actions    { margin-top: 1.5rem; gap: .85rem; }
  .reserve__steps-title{ margin-top: 2rem; }
  .reserve__steps li   { padding: .6rem 1rem .6rem 2.6rem; }

  /* --- 下部固定CTA：LINE優先は維持したまま、高さのみ圧縮 --- */
  .fixed-cta {
    gap: .4rem;
    padding-top:    .375rem;
    padding-right:  max(.625rem, env(safe-area-inset-right, 0px));
    padding-bottom: calc(.375rem + env(safe-area-inset-bottom, 0px));
    padding-left:   max(.625rem, env(safe-area-inset-left,  0px));
  }
  .fixed-cta__tel        { width: 56px; font-size: .625rem; gap: 0; }
  .fixed-cta__tel svg    { width: 17px; height: 17px; }
  .fixed-cta__line       { padding: .4rem; gap: .4rem; }
  .fixed-cta__line svg   { width: 18px; height: 18px; }
  .fixed-cta__line strong{ font-size: .9375rem; }
  .fixed-cta__line small { font-size: .625rem; }
}

/* --- 小さめのスマホ --- */
@media (max-width: 359px) {
  .hero__title { font-size: 1.5rem; }
  .section__title { font-size: 1.25rem; }
}

/* --- タブレット以上 --- */
@media (min-width: 600px) {
  :root { --sp-section: 5rem; --pad-x: 2rem; }

  .br-sp { display: none; }   /* H1の改行制御はスマホ幅のみ */

  .hero__badges { grid-template-columns: repeat(3, 1fr); }
  .hero__badges li { flex-direction: column; align-items: flex-start; gap: .15rem; }

  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* 3カラム時は枠が小さくなるため、未提供プレースホルダーの表示を簡略化する
     （タグを絶対配置から通常配置に戻し、ラベルとの重なりを防ぐ） */
  .photo-grid--3 .photo-ph        { padding: .6rem .5rem; gap: .15rem; }
  .photo-grid--3 .photo-ph__tag   { position: static; font-size: .625rem; }
  .photo-grid--3 .photo-ph__label { font-size: .75rem; }
  .photo-grid--3 .photo-ph__hint  { display: none; }
  .voices { grid-template-columns: repeat(2, 1fr); }
  .price-cards { grid-template-columns: repeat(2, 1fr); }
  .approach { grid-template-columns: repeat(3, 1fr); }
  .reasons { grid-template-columns: repeat(2, 1fr); }
}

/* --- PC --- */
@media (min-width: 900px) {
  :root { --sp-section: 6.5rem; --fixed-cta-h: 0px; }

  body { padding-bottom: 0; }
  .sp-only { display: none; }
  .pc-only { display: inline; }

  /* スマホ固定CTAはPCでは非表示（ヘッダー内のLINEボタンが導線） */
  .fixed-cta { display: none; }

  .site-header { position: sticky; top: 0; z-index: 90; }
  .site-header__nav > a:not(.btn) { display: inline; }
  .site-header__nav > a:not(.btn):hover { color: var(--c-green-dark); }

  .section__title { font-size: 1.875rem; }
  .section__lead  { text-align: center; }

  .hero { padding-block: 4rem 5rem; }
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
  .hero__body   { flex: 1 1 58%; }
  .hero__visual { flex: 1 1 42%; max-width: 400px; }
  /* 「その日だけで終わらせないために。」が2行で収まるサイズに固定 */
  .hero__title  { font-size: 2rem; }
  .hero__lead   { font-size: 1rem; }
  .hero__badges { grid-template-columns: 1fr; gap: .4rem; }
  .hero__badges li { flex-direction: row; align-items: baseline; gap: .75rem; }
  .hero__cta { align-items: flex-start; }
  .hero__cta .btn--lg { max-width: 380px; }
  .hero__cta .btn--ghost { max-width: 380px; }
  .hero__note { text-align: left; }

  .voices  { grid-template-columns: repeat(3, 1fr); }
  .reasons { grid-template-columns: repeat(3, 1fr); }

  .profile {
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 940px;
    margin-inline: auto;
  }
  .profile__photo { max-width: none; }

  .access { grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: start; }

  .cta-band__inner { flex-direction: row; justify-content: center; gap: 2rem; }
  .cta-band__text  { font-size: 1.0625rem; }
  .cta-band .btn--line { width: auto; min-width: 320px; }

  .reserve__title { font-size: 2rem; }
  .reserve__lead  { text-align: center; }
  .reserve__qr {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, .75);
    border-radius: var(--radius);
  }
  .reserve__qr-text { margin: 0; font-size: .8125rem; text-align: left; color: var(--c-text-weak); }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2rem 3rem;
  }
  .site-footer__copy { grid-column: 1 / -1; }
}

/* --- 印刷（院内での確認用） --- */
@media print {
  .fixed-cta, .site-header__nav, .skip-link { display: none !important; }
  body { padding-bottom: 0; }
  .js-reveal { opacity: 1 !important; transform: none !important; }
  .faq__a[hidden] { display: block !important; }
}