/* ==========================================================================
   lower-typography.css — 下層ページの文字設定（2026-09-16）
   - 見出し（h1〜h6・headline-*）以外はゴシック体に統一
   - 本文で見出し並みに大きい文字を抑える
   - 禁則処理と折り返しの調整（行頭の「ー」「、」を防ぐ／見出しの孤立語を減らす）
   トップページ（index.html）では読み込まない
   ========================================================================== */

/* ---- 書体：見出し以外はゴシック ---- */
main {
  font-family:
    "Yu Gothic", "游ゴシック体", "游ゴシック", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "メイリオ", sans-serif;
}
main h1, main h2, main h3, main h4, main h5, main h6,
main [class*="headline-"],
main .sec-13,
main .common-text.bg-deco p,
main .common-box .box-item__head dt,
main .common-box .box-item__head dd {
  font-family:
    "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho",
    "MS Mincho", serif;
}
/* 見出し内の英字ラベル（Cormorant）はそのまま */

/* ---- 文字サイズ：本文で見出し並みのものを抑える ---- */
main .common-lead { font-size: 1.8rem; }
main .p-worry__ttl { font-size: 1.8rem; }
main .p-treat__name { font-size: 2rem; }
main .mid-cta__lead { font-size: 2rem; }
main .step-list li .title { font-size: 1.8rem; }
main .faq-box dt span { font-size: 1.7rem; }
main .common-table table thead th { font-size: 1.6rem; }
main .p-flow__ttl { font-size: 2rem; }
main .common-text.bg-deco p { font-size: 2rem; }
main .common-box .box-item__head dt { font-size: 2.4rem; }
main .common-box .box-item__head dd { font-size: 2rem; }
main .common-box .box-item__head dd p span { font-size: 1.6rem; }
main .p-product__name { font-size: 2rem; }
main .p-prod__name { font-size: 1.8rem; }
@media screen and (max-width: 1400px) {
  main .common-lead { font-size: max(1.28vw, 1.5rem); }
  main .common-table table thead th { font-size: max(1.05vw, 1.4rem); }
}
@media screen and (max-width: 767px) {
  main .common-lead { font-size: 3.6vw; }
  main .p-worry__ttl { font-size: 4.2vw; }
  main .p-treat__name { font-size: 4.6vw; }
  main .mid-cta__lead { font-size: 4.2vw; }
  main .step-list li .title { font-size: 4.2vw; }
  main .faq-box dt span { font-size: 3.8vw; }
  main .common-table table thead th { font-size: 3.4vw; }
  main .p-flow__ttl { font-size: 4.6vw; }
  main .common-text.bg-deco p { font-size: 4.4vw; }
  main .common-box .box-item__head dt { font-size: 5.2vw; }
  main .common-box .box-item__head dd { font-size: 4.4vw; }
  main .p-product__name { font-size: 4.6vw; }
  main .p-prod__name { font-size: 4.2vw; }
}

/* ---- 折り返し ---- */
main {
  line-break: strict;        /* 行頭に「ー」「、」「。」を置かない */
  overflow-wrap: anywhere;   /* 長い英数字がはみ出さない */
}
/* text-wrap: balance は日本語では語の途中で折り返して右余白が空くため使わない。
   短い文の改行位置は <br class="sp"> で指定する */


/* 折り返しの方針（2026-09-16 最終）
   自動の文節折り返し（wbr／balance）は不自然な改行が多く出たため撤回。
   通常の文字単位で折り返し、行頭禁則（line-break: strict）のみ効かせる。
   改行位置の調整が必要な箇所は、目視で <br class="sp"> / <br class="pc"> を置いて制御する */
main {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}


/* スマホの表：上下の余白を詰めてスクロール量を減らす（2026-09-17） */
@media screen and (max-width: 767px) {
  main .common-table.typ01 dl,
  main .common-table.typ02 dl { padding: 3.6vw 0; line-height: 1.7; }
  main .common-table.typ03 table thead th { padding: 3vw 0; }
  main .common-table.typ03 table tbody th,
  main .common-table.typ03 table tbody td { padding: 2.8vw 1vw; line-height: 1.5; }
  main .common-table.typ04 table thead th,
  main .common-table.typ04 table tbody th { padding: 3.2vw 3.6vw 1.6vw; }
  main .common-table.typ04 table thead td,
  main .common-table.typ04 table tbody td { padding: 0 3.6vw 3.2vw; }
}

/* 「◯◯を見る」ボタン：長い文言が矢印と重ならないよう、幅を文言に合わせ矢印分の余白を確保（AUN③ #31〜36、2026-09-17。トップは parts.css を読まずボタン装飾が無いため、下層専用のこのファイルに置く） */
.btn.detail {
  width: fit-content;
  min-width: 275px;
  max-width: 100%;
}
.btn.detail a {
  padding: 0 62px 0 32px;
  white-space: nowrap;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .btn.detail {
    width: fit-content;
    min-width: 65.24%;
    max-width: 100%;
  }
  .btn.detail a {
    padding: 0 13.5vw 0 6vw;
  }
}

/* ==========================================================================
   スマホのセクション間余白の調整（AUN⑤ SP表示確認 2026-09-19）
   - グレー帯（.column-area.bg-gray）の上下余白が「前要素の下余白 60px ＋ 帯の内側 55px」で
     二重になり、見出しが下がりすぎていたため、帯の内側 12vw（約47px）に統一し、
     帯の直前要素の下余白は 0、帯の直後は 3vw に詰める
   - ステップ一覧（.step-list）の SP 用下余白 28.9vw は最後の項目に矢印が無いため不要
   - 料金表直後の「◯◯を見る」ボタン、ステップ直後の「診療の流れを見る」ボタンを上へ
   - ハイドラブースターの製品ラベル（PEEL+ 等）はカード上端に寄せる
   ========================================================================== */
@media screen and (max-width: 767px) {
  .column-area.bg-gray {
    padding: 12vw 0;
  }
  section.column-area.bg-gray.sp_mb60 {
    margin-bottom: 3vw !important;
  }
  section:has(+ section.column-area.bg-gray) > .sp_mb60:last-child,
  section.sp_mb60:has(+ section.column-area.bg-gray) {
    margin-bottom: 0 !important;
  }
  /* 中段CTA（背景付き）は帯と接して見えるため、間に少し余白を残す */
  section.sp_mb60:has(> .mid-cta):has(+ section.column-area.bg-gray) {
    margin-bottom: 6vw !important;
  }
  /* 帯の中の最後の要素の下余白（sp_mb30 等）は帯の内側余白と重なるため 0 に */
  .column-area.bg-gray .common-inner > :last-child {
    margin-bottom: 0 !important;
  }
  .step-list {
    padding-bottom: 0;
  }
  .column-area .btn.detail.mt100 {
    margin-top: 8vw !important;
  }
  .common-table.sp_mb60:has(+ .btn.detail) {
    margin-bottom: 6vw !important;
  }
  .p-prodname {
    margin-top: 0;
  }
  /* 年代ページの長い見出し：1文目が1行に収まる大きさに（AUN⑤ #27・#29） */
  .headline-02__2.is-fit {
    font-size: 5.2vw;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   お悩み別（body.lp-concern・8ページ）／年代別（body.lp-age・3ページ）の
   スマホの余白（AUN⑥ SP表示確認 2026-09-24）
   - AUN⑤ で帯の前後を詰めすぎ、白背景とベージュ帯が接して見えていたため、
     帯の前後に白場を戻す（字面から帯の端まで約40px）
   - 見出し＋リード文の組は、見出しを少し上げてリード文との間を空ける
   - Q&A・「代表的なお悩みと施術例」は見出しの上下の白場をそろえる
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 帯の直前：最後の要素の下に白場を作る（AUN⑤ では 0） */
  :is(.lp-concern, .lp-age) section:has(+ section.column-area.bg-gray) > .sp_mb60:last-child,
  :is(.lp-concern, .lp-age) section.sp_mb60:has(+ section.column-area.bg-gray) {
    margin-bottom: 8vw !important;
  }
  /* 中段CTA（背景付き）の直後は AUN⑤ の 6vw のまま */
  :is(.lp-concern, .lp-age) section.sp_mb60:has(> .mid-cta):has(+ section.column-area.bg-gray) {
    margin-bottom: 6vw !important;
  }
  /* Q&A の直後の帯：質問ボックスの内側余白があるため、ほかの帯の前と字面をそろえる */
  :is(.lp-concern, .lp-age) section:has(+ section.column-area.bg-gray) > div:has(> .faq-box):last-child {
    margin-bottom: 4vw !important;
  }
  /* 帯の直後：3vw → 9vw */
  :is(.lp-concern, .lp-age) section.column-area.bg-gray.sp_mb60 {
    margin-bottom: 9vw !important;
  }
  /* ページ末尾の帯（その他のお悩み）の直後は、AUN⑤ の 3vw のまま */
  :is(.lp-concern, .lp-age) section.column-area.bg-gray.sp_mb60:has(+ .sec-13) {
    margin-bottom: 3vw !important;
  }
  /* 見出し＋リード文の帯：見出しを上げる（内側の上 12vw → 10vw） */
  :is(.lp-concern, .lp-age) .column-area.bg-gray:has(> .common-inner > .headline-02__2.mb10:first-child) {
    padding-top: 10vw;
  }
  /* 見出しとリード文の間：10px → 4vw（帯の中・白背景とも） */
  :is(.lp-concern, .lp-age) .headline-02__2.mb10 {
    margin-bottom: 4vw !important;
  }
  /* Q&A：見出しの上下の白場をそろえる（下 30px → 2vw） */
  :is(.lp-concern, .lp-age) .headline-02__2:has(+ div > .faq-box) {
    margin-bottom: 2vw !important;
  }
  /* 代表的なお悩みと施術例：見出しの上下の白場をそろえる（下 30px → 8.5vw） */
  .lp-age .headline-02__2.sp_mb30:has(+ .p-grid) {
    margin-bottom: 8.5vw !important;
  }
}

/* ==========================================================================
   PRX-T33「PRX-T33（コラーゲンピール）とは」を PC で1行に（AUN⑥ #3 2026-09-24）
   - 1行の幅が枠より約5％長く「は」だけが次の行に落ちていたため、
     括弧の前後の空きを詰め（palt）、字間を 0 にする。SP は従来どおり2行
   ========================================================================== */
@media screen and (min-width: 768px) {
  .headline-03__1.is-oneline {
    font-feature-settings: "palt";
    letter-spacing: 0;
    white-space: nowrap;
  }
}
/* 1400px 以下は文字サイズが画面幅に比例し、枠に対して数px 長くなるため少し小さく（3vw → 2.9vw） */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .headline-03__1.is-oneline {
    font-size: 2.9vw;
  }
}