/* ==========================================================================
   グローバルリセット
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* SP（〜1023px）：画面が広いとき（856pxなど）に中身だけが横に広がりすぎないよう、
   各セクションの中身（見出し・文章・画像・カードなど）を最大600pxで中央に置く。
   背景色・装飾は画面いっぱいのまま（375px・320pxでは中身が600pxより狭いため、見た目は変わらない）。
   各セクションの「1023px以下」のブロックで、中身を包む要素の max-width にこの値を使う */
:root {
  --sp-content-max: 600px;
  /* SP：写真の最大幅（正方形の写真は高さも同じ）。各写真の「1023px以下」のブロックで使う */
  --sp-photo-max: 480px;
  /* hover・タップ時の色（Page Top・パンくずのHOME / Guideのボタン）。
     デモ（demo/）では demo.css でお店の色に置き換える。紺（#181c39）はどの色でも同じため変数にしない */
  --hover-main: #3b82c5;
  --hover-light: #91d2e5;
}

/* 色を変える矢印・三角（Features・Guide・menu-price のボタンの矢印、Page Top の三角）
   画像（SVG）は色がファイルの中に書かれているため、同じ画像を mask に使って形だけを残し、
   色は background-color で塗る（Accessセクションの設備アイコンと同じしくみ）。
   もとの画像は object-position で枠の外に出して見えなくする（img の大きさ・形は変わらない）。
   画像は --icon-mask、ふだんの色（もとのSVGと同じ色）は background-color で、各セクションに書く */
.features__button-icon,
.guide__button-icon,
.menu-price__button-icon,
.top-page-button__icon {
  object-position: -9999px 0;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

/* ==========================================================================
   共通ヘッダー（Figma: header / node-id 58:216, nav-item / node-id 14:19,
   SP-header / node-id 160:732）
   使い方: header.php を各ページから <?php include 'header.php'; ?> で読み込む
   ブレークポイント: 1023px以下でSPレイアウト（ハンバーガーメニュー）に切り替え
   1024px（Figma node-id 349:1665）〜1920pxの間は clamp()/vw でフォントサイズ・
   余白・要素サイズを滑らかに補間する。1920px超は上限値で固定（clamp）。
   1920px超は、ロゴとボタンが画面の両端に離れすぎないよう、1920px時の幅（1820px）で中央に置く
   ========================================================================== */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 30px max(clamp(25px, calc(-3.57px + 2.79vw), 50px), calc((100% - 1820px) / 2));
  background-color: #ffffff;
}

.header__logo {
  display: block;
  flex-shrink: 0;
  width: clamp(247px, calc(164.71px + 8.04vw), 319px);
  max-width: 100%;
}

.header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴの hover（ヘッダー・SPメニュー・フッターのロゴ共通）
   hover対応デバイス（PC）のみ、マウスオーバー時に上へ3px浮き上がる（0.3秒・ease でゆっくり）。
   タップのみのデバイス（SP）は :hover が押下後も残るため付けない。
   キーボード操作用に :focus-visible でも同じように浮き上がる */
@media (hover: hover) {
  .header__logo,
  .header__sp-menu-logo,
  .cta-footer__logo {
    transition: transform 0.3s ease;
  }

  .header__logo:hover,
  .header__sp-menu-logo:hover,
  .cta-footer__logo:hover {
    transform: translateY(-3px);
  }
}

.header__logo:focus-visible,
.header__sp-menu-logo:focus-visible,
.cta-footer__logo:focus-visible {
  transform: translateY(-3px);
}

.header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, calc(-13.71px + 2.9vw), 42px);
}

.header__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(239px, calc(187.57px + 5.02vw), 284px);
  max-width: 100%;
}

.header__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-decoration: none;
}

/* 電話番号の hover / タップ（見本のためリンク先は仮の #）
   フッターの電話ボタンと同じ考え方で、PC（hover対応デバイス）はマウスオーバー時に
   上へ浮き上がり(translateY)＋番号の色を --hover-main（#3b82c5）に、0.25秒・ease で変化させる。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ番号の色を変える。
   キーボード操作用に :focus-visible は両方で有効（色のみ）。
   電話番号がリンク（a）のときだけに付ける（template-a・デモ（demo/）とも、いまは仮の # のリンク） */
@media (hover: hover) {
  a.header__phone {
    transition: transform 0.25s ease;
  }

  a.header__phone .header__phone-number {
    transition: color 0.25s ease;
  }

  a.header__phone:hover {
    transform: translateY(-4px);
  }

  a.header__phone:hover .header__phone-number {
    color: var(--hover-main);
  }
}

@media (hover: none) {
  a.header__phone:active .header__phone-number {
    color: var(--hover-main);
  }
}

a.header__phone:focus-visible .header__phone-number {
  color: var(--hover-main);
}

.header__phone-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.header__phone-number {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, calc(14.86px + 0.89vw), 32px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #181c39;
  white-space: nowrap;
}

.header__hours {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, calc(11.86px + 0.11vw), 14px);
  line-height: normal;
  letter-spacing: 0.08em;
  color: #181c39;
  text-align: center;
  white-space: nowrap;
}

.header__hours-label {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
}

.header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(11px, calc(-0.43px + 1.12vw), 21px);
}

.header__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: clamp(183px, calc(160.14px + 2.23vw), 203px);
  height: clamp(60px, calc(58.86px + 0.11vw), 61px);
  padding: 12px clamp(14px, calc(2.57px + 1.12vw), 24px);
  border-radius: 17px;
  background-color: #3b82c5;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.header__nav-item:hover,
.header__nav-item:focus-visible {
  background-color: #225a90;
}

/* PC版（hover対応デバイス）のみ: hover時に上へ浮き上がり、影を付ける（MenuSelectのボタンと同じ動き）。
   SP版のメニュー（.header__sp-menu 内）と、タップのみのデバイスには適用しない。
   色・浮き上がり・影は同じ 0.25秒・ease で変化する（色は上記の hover 色のまま）。
   影の色は hover 時のボタン色（#225a90）に合わせている */
@media (hover: hover) {
  .header__actions .header__nav-item {
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .header__actions .header__nav-item:hover {
    box-shadow: 0 10px 22px rgba(34, 90, 144, 0.4);
    transform: translateY(-4px);
  }
}

.header__nav-item-title {
  display: block;
  width: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, calc(13.86px + 0.11vw), 16px);
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.header__nav-item-sub {
  display: block;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.header__hamburger img {
  display: block;
  width: 100%;
  height: 100%;
}

/* SP版のメニュー（Figma: menu-overlay-sp / node-id 156:768）
   .header__sp-menu       … 画面全体の背景（白70%）。押すとメニューを閉じる
   .header__sp-menu-panel … メニュー本体。画面の上中央に、上から下へスライドして開く
   PC版（1024px〜）では表示しない */
.header__sp-menu {
  display: none;
}

/* 1023px以下: SPレイアウト（ロゴ + ハンバーガーメニュー）に切り替え */
@media (max-width: 1023px) {
  .header {
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    padding: 0 22px;
  }

  .header__logo {
    width: 174px;
  }

  .header__actions {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }

  /* --- SP メニュー: 背景（閉じている間は非表示。閉じるアニメーション中は表示を保つ） --- */
  .header__sp-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.7);
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }

  .header__sp-menu.is-open {
    visibility: visible;
    transition-delay: 0s;
  }

  /* --- SP メニュー: 本体（300ms・ease-in で上から下へスライド） ---
     SP版で画面の幅が広いとき（1020pxなど）は、テンプレB・Cとそろえて最大480pxで中央に置く
     （375px・320pxでは画面幅いっぱいのため、見た目は変わらない） */
  .header__sp-menu-panel {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    min-width: 320px;
    max-width: 480px;
    padding: 41px 27.5px;
    background-color: #f5f5f5;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in;
  }

  .header__sp-menu.is-open .header__sp-menu-panel {
    transform: translateY(0);
  }

  /* 374px以下: min-width 320px のままだとスクロールバー分などで画面幅を超えて
     右側の余白・閉じるボタンが切れるため、画面幅いっぱい（100%）に合わせる */
  @media (max-width: 374px) {
    .header__sp-menu-panel {
      min-width: 0;
    }
  }

  .header__sp-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__sp-menu-logo {
    display: block;
    flex-shrink: 0;
    width: 174px;
  }

  .header__sp-menu-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .header__sp-menu-close {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .header__sp-menu-close img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* --- SP メニュー: ナビ（項目の間に青い区切り線） --- */
  .header__sp-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .header__sp-menu-item {
    display: flex;
    align-items: center;
    gap: 17px;
    width: 100%;
    padding: 12px 8px;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .header__sp-menu-item-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0.06em;
    color: #181c39;
  }

  /* タップ時（Figma: menu-nav-item-home-sp / node-id 413:1433 の「デフォルト」→「バリアント2」）
     背景 → #e9f6fa、名前（ホーム等）の文字色 → #3b82c5。英字（—home 等）は元から #3b82c5 で変化なし。
     3項目とも共通 */
  .header__sp-menu-item:active,
  .header__sp-menu-item:focus-visible {
    background-color: #e9f6fa;
  }

  .header__sp-menu-item:active .header__sp-menu-item-title,
  .header__sp-menu-item:focus-visible .header__sp-menu-item-title {
    color: #3b82c5;
  }

  .header__sp-menu-item-sub {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 11px;
    line-height: normal;
    color: #3b82c5;
  }

  .header__sp-menu-divider {
    position: relative;
    display: block;
    height: 0;
  }

  .header__sp-menu-divider::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #3b82c5;
  }

  /* --- SP メニュー: 電話番号 --- */
  .header__sp-menu-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    border-radius: 5px;
    background-color: #3b82c5;
  }

  .header__sp-menu-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
  }

  .header__sp-menu-phone-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
  }

  .header__sp-menu-phone-number {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: normal;
    letter-spacing: 0.06em;
    color: #ffffff;
    white-space: nowrap;
  }

  .header__sp-menu-hours {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }

  .header__sp-menu-hours-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
  }
}

/* ==========================================================================
   セクションタイトル共通クラス（Figma: Section-Header / node-id 171:891）
   使い方:
   <div class="section-title">
     <p class="section-title__label">Problems</p>
     <h2 class="section-title__heading">こんなお悩み、ありませんか？</h2>
   </div>
   ========================================================================== */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  word-break: break-word;
}

.section-title__label {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.84px;
  color: #000000;
}

.section-title__heading {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
  color: #181c39;
}

.section-title__break {
  display: none;
}

/* 1023px以下: SPレイアウト（ラベル/見出しのフォントサイズを縮小） */
@media (max-width: 1023px) {
  .section-title__label {
    font-size: 12px;
    letter-spacing: 0.72px;
  }

  .section-title__heading {
    font-size: 28px;
  }

  .section-title__break {
    display: block;
  }
}

/* ==========================================================================
   FV（ファーストビュー）共通クラス
   Figma:
     Topページ    1920px node-id 171:885 / 1024px node-id 346:1647 / SP node-id 161:750
     Menu        1920px node-id 334:1236 / 1024px node-id 349:1656 / SP node-id 171:1154
     About       1920px node-id 126:638  / 1024px node-id 396:4418 / SP node-id 175:1664
   使い方:
     <div class="fv fv--top">…</div>    … Topページ
     <div class="fv fv--menu">…</div>   … Menuページ
     <div class="fv fv--about">…</div>  … Aboutページ（PC側のデザインはMenuと共通、写真と文言・一部の差分のみ上書き）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え（1024px以上はPCレイアウト。ヘッダー・パンくずと共通）
   ヘッダー直後に隙間なく配置する想定のため margin は付与しない
   ========================================================================== */
.fv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
}

.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  pointer-events: none;
}

/* max-width は「文字の幅1400px（Figma）＋左右余白40px×2」= 1480px。
   1480px以上は文字の左端が (幅−1400)÷2（1920pxで260px）になりFigma・パンくずと一致し、
   1480px未満は左右の余白40pxが画面端との余白になる */
.fv__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
  gap: 28px;
  color: #181c39;
  word-break: break-word;
}

.fv__title {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.fv__title-line {
  margin: 0;
}

.fv__lead {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fv__lead-line {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Topページ FV（Figma: Top-page-FV / node-id 171:885, 346:1647, 161:750）
   -------------------------------------------------------------------------- */
.fv--top {
  height: 750px;
}

.fv--top .fv__title-line {
  font-size: 56px;
  line-height: 76px;
  letter-spacing: 2.9px;
}

.fv--top .fv__title-line--intro {
  font-size: 32px;
}

.fv--top .fv__lead-line {
  font-size: 24px;
  line-height: normal;
  letter-spacing: 2.64px;
}

/* 1920px超: 高さ750pxのままだと写真が横に引き伸ばされて上下が切れ、看護師の顔が切れるため、
   1920pxと同じ縦横比（750 / 1920）で高さを伸ばし、写真の見え方を1920pxと同じにする */
@media (min-width: 1921px) {
  .fv--top {
    height: 39.0625vw;
  }
}

@media (max-width: 1023px) {
  .fv--top {
    height: 600px;
  }

  /* 看護師と高齢女性の顔2人が入るよう、画像の表示位置を右寄せにする
     （Figma SP-FV: 画像を高さ632px・左-437pxで配置 = 画像の横46%〜86%を表示。
       cover 表示でこれに合わせた object-position の X = 約79%） */
  .fv--top .fv__bg {
    object-position: 79% 50%;
  }

  /* 文字の幅は最大600px（左右の余白19px×2を足した幅で中央に置き、他のセクションの中身と左端を揃える） */
  .fv--top .fv__content {
    max-width: calc(var(--sp-content-max) + 38px);
    padding: 0 19px;
  }

  .fv--top .fv__overlay {
    display: block;
    background: linear-gradient(to right, #ffffff 8.654%, rgba(255, 255, 255, 0.67) 49.038%, rgba(255, 255, 255, 0) 100%);
  }

  .fv--top .fv__title-line {
    font-size: 30px;
    letter-spacing: -1.2px;
  }

  .fv--top .fv__title-line--intro {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .fv--top .fv__lead-line {
    font-size: 16px;
    letter-spacing: normal;
  }
}

/* --------------------------------------------------------------------------
   Menu/Aboutページ共通 FV（Figma: Fv / node-id 334:1236, 349:1656, 171:1154）
   PC側（高さ・オーバーレイ・文字サイズ）はAboutと同じ値のため、セレクタをまとめて共有する
   Aboutだけ異なる部分は、この下の「Aboutページ FV」ブロックで上書きする
   -------------------------------------------------------------------------- */
.fv--menu,
.fv--about {
  height: 322px;
}

/* 1024px以上（PCレイアウト）の範囲は、顔を含まない範囲だけを切り出した
   menu-page-FV-pc.png（顔から下のみ）を使用し、上寄せでトリミングする
   （右側の観葉植物が見えるよう右寄せ／menu.php側でpictureタグにより出し分け） */
.fv--menu .fv__bg {
  object-position: 95% 0%;
}

.fv--menu .fv__overlay,
.fv--about .fv__overlay {
  display: block;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.5) 47.115%, rgba(255, 255, 255, 0) 100%);
}

.fv--menu .fv__title-line,
.fv--about .fv__title-line {
  font-size: 40px;
  line-height: 76px;
  letter-spacing: 2px;
}

.fv--menu .fv__lead-line,
.fv--about .fv__lead-line {
  font-size: 20px;
  line-height: normal;
  letter-spacing: 2.2px;
}

.fv--menu .fv__title-line--short,
.fv--menu .fv__lead-break,
.fv--about .fv__lead-break {
  display: none;
}

@media (max-width: 1023px) {
  .fv--menu {
    height: 200px;
  }

  .fv--menu .fv__bg {
    object-position: 50% 50%;
  }

  .fv--menu .fv__content {
    max-width: calc(var(--sp-content-max) + 32px);
    padding: 0 16px;
    gap: 20px;
  }

  .fv--menu .fv__overlay {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.674) 31.25%, rgba(255, 255, 255, 0.41) 70.192%, rgba(255, 255, 255, 0) 100%);
  }

  .fv--menu .fv__title-line {
    font-size: 20px;
    line-height: normal;
    letter-spacing: -0.8px;
  }

  .fv--menu .fv__title-line--full {
    display: none;
  }

  .fv--menu .fv__title-line--short {
    display: block;
  }

  .fv--menu .fv__lead-line {
    font-size: 16px;
    letter-spacing: normal;
  }

  .fv--menu .fv__lead-break {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Aboutページ FV（Figma: about-page-fv / node-id 126:638, 396:4418, SP-FV 175:1664）
   Menuとの差分のみをここで上書きする
   - 写真: about-page-fv.png（1536×1024）。ベッドは画像の縦70%〜下端にあるため、
     縦位置を下寄りにして常にベッドが帯（PC322px / SP200px）に入るようにする
       1024px以上: 幅いっぱいに表示され、縦は82%位置で切り出す（Figma 1920px=約81%, 1024px=約86%）
       481〜1023px: SPの帯は200px固定で、幅が広がるほど写真が縦に大きくなるため80%位置に寄せる
       480px以下: Figma SP版（375px）と同じ中央基準（50%）
   - SPの境界はTop/Menu・パンくずと同じ1023px（Figma 1024px版がPCレイアウトのため）
   - SPのオーバーレイの段階位置とタイトルの字間がMenuと異なる
   -------------------------------------------------------------------------- */
.fv--about .fv__bg {
  object-position: 50% 82%;
}

@media (max-width: 1023px) {
  .fv--about {
    height: 200px;
  }

  .fv--about .fv__bg {
    object-position: 50% 50%;
  }

  .fv--about .fv__content {
    max-width: calc(var(--sp-content-max) + 32px);
    padding: 0 16px;
    gap: 20px;
  }

  .fv--about .fv__overlay {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.674) 42.308%, rgba(255, 255, 255, 0.41) 70.192%, rgba(255, 255, 255, 0) 100%);
  }

  .fv--about .fv__title-line {
    font-size: 20px;
    line-height: normal;
    letter-spacing: 1.6px;
  }

  .fv--about .fv__lead-line {
    font-size: 16px;
    letter-spacing: normal;
  }

  .fv--about .fv__lead-break {
    display: block;
  }
}

@media (min-width: 481px) and (max-width: 1023px) {
  .fv--about .fv__bg {
    object-position: 50% 80%;
  }
}

/* ==========================================================================
   共通パンくずリスト（Figma: breadcrumb-container / 1920px node-id 334:1241,
   SP node-id 171:1159）
   使い方: breadcrumb.php を、呼び出し側で $current_page をセットしてから
     <?php $current_page = '施術メニュー'; include 'breadcrumb.php'; ?>
   で読み込む（FVの直下に配置。余白はFV側ではなくこの部品側で持つ）
   配置: 下のセクションのコンテンツ幅（max-width 1400px）に対して左寄せ（FVの文字位置には揃えない）。
     左右余白は menu-cards / faq / menu-select と同じ clamp()（1024pxで62px〜1920pxで260px）で、
     1024px以上は下のセクションと左端・幅が一致する（Figma: 1920px 260px/1400px、1024px 62px/900px）。
     1023px以下は16px（SP版Figmaの16px、幅343px@375px）
   1024px〜1920pxの間は clamp()/vw で文字サイズ・余白・行の高さを
     SP値（1024px時点）〜1920px値へ滑らかに補間する（1024px版のデザインは無いため）
   ========================================================================== */
.breadcrumb {
  padding-top: clamp(0px, calc(-20.57px + 2.009vw), 18px);
  padding-right: clamp(62px, calc(-164.29px + 22.1vw), 260px);
  padding-left: clamp(62px, calc(-164.29px + 22.1vw), 260px);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  min-height: clamp(33px, calc(45.86px - 0.67vw), 39px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item--home {
  align-self: stretch;
}

.breadcrumb__link {
  display: flex;
  align-items: center;
  padding-right: clamp(10px, calc(-8.29px + 1.786vw), 26px);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, calc(9.57px + 0.335vw), 16px);
  line-height: normal;
  color: #181c39;
  text-decoration: none;
  white-space: nowrap;
}

/* HOMEの hover / タップ: 文字を --hover-main（#3b82c5）にする（Page Top と同じ色）。
   PC（hover対応デバイス）はマウスオーバー時に、色を 0.3秒・ease で変え、
   ほかのボタンと同じく上へ4px浮き上がらせる（0.25秒・ease。Features のボタンに合わせて translate を使う）。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える（浮き上がりなし）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .breadcrumb__link {
    transition: color 0.3s ease, translate 0.25s ease;
  }

  .breadcrumb__link:hover {
    color: var(--hover-main);
    translate: 0 -4px;
  }
}

@media (hover: none) {
  .breadcrumb__link:active {
    color: var(--hover-main);
  }
}

.breadcrumb__link:focus-visible {
  color: var(--hover-main);
}

.breadcrumb__item--current {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: normal;
  color: #000000;
  white-space: nowrap;
}

.breadcrumb__separator {
  margin-right: clamp(12px, calc(-1.71px + 1.339vw), 24px);
}

/* 1023px以下: SPレイアウト（左右余白16px） */
@media (max-width: 1023px) {
  .breadcrumb {
    padding-right: 16px;
    padding-left: 16px;
  }

  .breadcrumb__list {
    max-width: var(--sp-content-max);
  }
}

/* ==========================================================================
   Problemsセクション（Figma: Problems-section / node-id 171:889, 349:1701, 161:834）
   使い方:
     <section class="problems">
       <div class="problems__box">
         <div class="problems__content">
           <div class="section-title">…</div>
           <div class="problems__list">
             <div class="problems__item">
               <div class="problems__image"><img ...></div>
               <h3 class="problems__item-title">…</h3>
               <p class="problems__item-text">…</p>
             </div>
             …
           </div>
         </div>
       </div>
     </section>
   FVとの間隔はこのセクションの padding-top で確保する（FV側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は clamp()/vw で背景の余白・パディング・間隔を滑らかに補間する
   ========================================================================== */
.problems {
  padding-top: 150px;
  padding-right: clamp(40px, calc(-17.14px + 5.58vw), 90px);
  padding-left: clamp(40px, calc(-17.14px + 5.58vw), 90px);
}

/* max-width: 1920px超で背景のボックスだけが画面いっぱいに広がらないよう、1920px時の幅（1740px）で止める
   （MenuSelect・Profile のパネルと同じ） */
.problems__box {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1740px;
  margin: 0 auto;
  padding: clamp(60px, calc(31.43px + 2.79vw), 85px) clamp(22px, calc(-147.14px + 16.52vw), 170px);
  border-radius: 20px;
  background-color: #f5f5f5;
}

.problems__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
}

.problems__list {
  display: flex;
  gap: clamp(20px, calc(-31.43px + 5.02vw), 65px);
  width: 100%;
  padding: 55px 0 0;
}

.problems__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(16px, calc(-1.14px + 1.67vw), 31px);
}

.problems__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
}

.problems__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.problems__item-title {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  color: #181c39;
  word-break: break-word;
}

.problems__item-text {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #181c39;
  word-break: break-word;
}

/* 1023px以下: SPレイアウト（背景なしの940pxボックス構造をやめ、セクション自体が
   16px余白のグレー背景ボックスとなり、タイトル・カードを48px間隔で縦積みにする） */
@media (max-width: 1023px) {
  .problems {
    margin-top: 70px;
    padding: 100px 16px 35px;
    background-color: #f2f2f7;
  }

  .problems__box {
    display: block;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .problems__content {
    gap: 48px;
    max-width: var(--sp-content-max);
    margin: 0 auto;
  }

  .problems__list {
    flex-direction: column;
    gap: 48px;
    padding: 0;
  }

  .problems__item-title {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .problems__item-text {
    font-size: 16px;
  }

  /* 画面が広いとき（1023pxなど）に写真が大きくなりすぎないよう、幅は最大480pxで中央に置く
     （375px・320pxでは480pxより狭いため見た目は変わらない） */
  .problems__image {
    max-width: var(--sp-photo-max);
    margin: 0 auto;
  }
}

/* ==========================================================================
   Featuresセクション（Figma: Features-section / node-id 171:896, 352:1768, 161:877）
   使い方:
     <section class="features">
       <div class="features__container">
         <div class="features__col">
           <div class="features__group">
             <div class="section-title">…</div>
             <div class="features__text">
               <p class="features__subheading">…</p>
               <p class="features__desc">…</p>
             </div>
           </div>
           <div class="features__image features__image--mobile"><img ...></div>
           <a class="features__button" href="#">
             <span class="features__button-text">詳しい想いを見る</span>
             <img class="features__button-icon" ...>
           </a>
         </div>
         <div class="features__image features__image--desktop"><img ...></div>
       </div>
     </section>
   Problemsとの間隔はこのセクションの padding-top で確保する（Problems側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は clamp()/vw で余白・間隔・画像幅・見出しフォントサイズを滑らかに補間する
   ========================================================================== */
.features {
  padding-top: 150px;
  padding-right: clamp(62px, calc(-164.29px + 22.1vw), 260px);
  padding-left: clamp(62px, calc(-164.29px + 22.1vw), 260px);
}

.features__container {
  display: flex;
  align-items: stretch;
  gap: clamp(30px, calc(-64.86px + 9.26vw), 113px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.features__col {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: clamp(26px, calc(-33.43px + 5.8vw), 78px);
}

.features__group {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: 100%;
}

.features__text {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: 100%;
}

.features__subheading {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(25px, calc(17px + 0.78vw), 32px);
  line-height: normal;
  color: #181c39;
}

.features__desc {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #181c39;
  word-break: break-word;
}

.features__image {
  position: relative;
  flex-shrink: 0;
  width: clamp(401px, calc(268.43px + 12.95vw), 517px);
  overflow: hidden;
}

.features__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features__image--mobile {
  display: none;
}

.features__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 324px;
  height: 61px;
  padding: 0 32px;
  border: 1px solid #3b82c5;
  border-radius: 10px;
  text-decoration: none;
}

.features__button-text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #3b82c5;
  white-space: nowrap;
}

.features__button-icon {
  --icon-mask: url('../images/icon-arrow-right.svg');
  display: block;
  flex-shrink: 0;
  width: 27px;
  height: auto;
  background-color: #3b82c5;
}

/* ボタンの hover / タップ: 矢印・外枠・文字を --hover-light（#91d2e5）にする（Guide・menu-price のボタンと同じ）。
   PC（hover対応デバイス）はマウスオーバー時に、色を 0.3秒・ease で変え、
   ほかのボタンと同じく上へ4px浮き上がらせる（0.25秒・ease）。
   浮き上がりは transform ではなく translate を使う（このボタンは .js-reveal で、スクロール表示の
   transform の指定のほうが優先されるため）。transition も同じ理由で上書きされるため、
   「スクロール表示アニメーション」の中でも指定している。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える（浮き上がりなし）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .features__button {
    transition: border-color 0.3s ease, translate 0.25s ease;
  }

  .features__button-text {
    transition: color 0.3s ease;
  }

  .features__button-icon {
    transition: background-color 0.3s ease;
  }

  .features__button:hover {
    border-color: var(--hover-light);
    translate: 0 -4px;
  }

  .features__button:hover .features__button-text {
    color: var(--hover-light);
  }

  .features__button:hover .features__button-icon {
    background-color: var(--hover-light);
  }
}

@media (hover: none) {
  .features__button:active {
    border-color: var(--hover-light);
  }

  .features__button:active .features__button-text {
    color: var(--hover-light);
  }

  .features__button:active .features__button-icon {
    background-color: var(--hover-light);
  }
}

.features__button:focus-visible {
  border-color: var(--hover-light);
}

.features__button:focus-visible .features__button-text {
  color: var(--hover-light);
}

.features__button:focus-visible .features__button-icon {
  background-color: var(--hover-light);
}

/* 1023px以下: SPレイアウト（1カラム縦積み、画像はテキストとボタンの間に配置） */
@media (max-width: 1023px) {
  .features {
    padding: 100px 16px 100px;
  }

  .features__container {
    flex-direction: column;
    gap: 48px;
    max-width: var(--sp-content-max);
  }

  .features__col {
    gap: 48px;
  }

  .features__group {
    gap: 48px;
  }

  .features__text {
    gap: 23px;
  }

  .features__subheading {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .features__desc {
    font-size: 16px;
  }

  .features__image--desktop {
    display: none;
  }

  /* 写真の幅は最大480pxで中央に置く（375px・320pxでは480pxより狭いため見た目は変わらない） */
  .features__image--mobile {
    display: block;
    width: 100%;
    max-width: var(--sp-photo-max);
    height: 320px;
    margin: 0 auto;
  }

  .features__button {
    width: 100%;
    padding: 0 41.5px;
  }
}

/* ==========================================================================
   Guideセクション（Figma: Guide-section / node-id 171:904, 353:1663, 161:1009）
   使い方:
     <section class="guide">
       <div class="guide__box">
         <div class="guide__content">
           <div class="section-title">…</div>
           <p class="guide__lead">…</p>
           <div class="guide__list">
             <div class="guide__item">
               <div class="guide__step-bar">
                 <div class="guide__step-icon"><img ...></div>
                 <p class="guide__step-label"><span class="guide__step-label-text">STEP </span><span class="guide__step-label-num">01</span></p>
                 <img class="guide__step-connector" ...>
               </div>
               <h3 class="guide__item-title">…</h3>
               <p class="guide__item-text">…</p>
             </div>
             …
           </div>
           <div class="guide__cta">
             <a class="guide__button" href="#">
               <span class="guide__button-text">施術メニューを見る</span>
               <img class="guide__button-icon" ...>
             </a>
           </div>
         </div>
       </div>
     </section>
   Featuresとの間隔はこのセクションの padding-top で確保する（Features側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は clamp()/vw で背景の余白・カード間隔を滑らかに補間する
   ========================================================================== */
.guide {
  padding-top: 150px;
  padding-right: clamp(40px, calc(-17.14px + 5.58vw), 90px);
  padding-left: clamp(40px, calc(-17.14px + 5.58vw), 90px);
}

/* max-width: 1920px超で背景のボックスだけが画面いっぱいに広がらないよう、1920px時の幅（1740px）で止める */
.guide__box {
  max-width: 1740px;
  margin: 0 auto;
  padding: 85px clamp(22px, calc(-147.14px + 16.52vw), 170px);
  border-radius: 20px;
  background-color: rgba(59, 130, 197, 0.9);
}

.guide__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.guide .section-title__label,
.guide .section-title__heading {
  color: #ffffff;
}

.guide__lead {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #ffffff;
  word-break: break-word;
}

.guide__list {
  display: flex;
  gap: clamp(20px, calc(-20px + 3.91vw), 55px);
  width: 100%;
}

.guide__item {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 17px;
}

.guide__step-bar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.guide__step-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.guide__step-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.guide__step-icon--repeat {
  width: 48px;
}

.guide__step-label {
  margin: 0;
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: 1.28px;
  color: #ffffff;
  white-space: nowrap;
}

.guide__step-label-text {
  font-size: 16px;
}

.guide__step-label-num {
  font-size: 24px;
}

.guide__step-connector {
  display: block;
  flex-shrink: 0;
  width: 83px;
  height: auto;
}

.guide__item-title {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 2px;
  color: #ffffff;
  word-break: break-word;
}

.guide__item-text {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #ffffff;
  word-break: break-word;
}

.guide__cta {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.guide__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 324px;
  height: 61px;
  padding: 0 32px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  text-decoration: none;
}

.guide__button-text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  white-space: nowrap;
}

.guide__button-icon {
  --icon-mask: url('../images/icon-arrow-right-white.svg');
  display: block;
  flex-shrink: 0;
  width: 27px;
  height: auto;
  background-color: #ffffff;
}

/* ボタンの hover / タップ: 矢印・外枠・文字を --hover-light（#91d2e5）にする。
   PC（hover対応デバイス）はマウスオーバー時に、色を 0.3秒・ease で変え、
   ほかのボタンと同じく上へ4px浮き上がらせる（0.25秒・ease。Features のボタンに合わせて translate を使う）。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える（浮き上がりなし）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .guide__button {
    transition: border-color 0.3s ease, translate 0.25s ease;
  }

  .guide__button-text {
    transition: color 0.3s ease;
  }

  .guide__button-icon {
    transition: background-color 0.3s ease;
  }

  .guide__button:hover {
    border-color: var(--hover-light);
    translate: 0 -4px;
  }

  .guide__button:hover .guide__button-text {
    color: var(--hover-light);
  }

  .guide__button:hover .guide__button-icon {
    background-color: var(--hover-light);
  }
}

@media (hover: none) {
  .guide__button:active {
    border-color: var(--hover-light);
  }

  .guide__button:active .guide__button-text {
    color: var(--hover-light);
  }

  .guide__button:active .guide__button-icon {
    background-color: var(--hover-light);
  }
}

.guide__button:focus-visible {
  border-color: var(--hover-light);
}

.guide__button:focus-visible .guide__button-text {
  color: var(--hover-light);
}

.guide__button:focus-visible .guide__button-icon {
  background-color: var(--hover-light);
}

/* 1023px以下: SPレイアウト（背景付きボックス構造をやめ、セクション自体が
   青背景となり、タイトル・リード文・カード・ボタンを48px間隔で縦積みにする） */
@media (max-width: 1023px) {
  .guide {
    padding: 100px 16px 35px;
    background-color: #3b82c5;
  }

  .guide__box {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .guide__content {
    gap: 48px;
    max-width: var(--sp-content-max);
  }

  .guide__lead {
    font-size: 16px;
  }

  .guide__list {
    flex-direction: column;
    gap: 48px;
  }

  .guide__item {
    width: 100%;
  }

  .guide__step-label-text {
    font-size: 12px;
  }

  .guide__step-label-num {
    font-size: 20px;
  }

  .guide__item-title {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .guide__item-text {
    font-size: 16px;
  }

  .guide__cta {
    justify-content: flex-start;
  }

  .guide__button {
    width: 100%;
    padding: 0 41.5px;
  }
}

/* ==========================================================================
   Reception-photoセクション（Figma: reception-photo / node-id 171:914, 161:1035）
   使い方:
     <section class="reception-photo">
       <div class="reception-photo__frame">
         <img class="reception-photo__image" src="images/reception-photo.png" alt="">
       </div>
     </section>
   Guideとの間隔はこのセクションの padding-top で確保する（Guide側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は画像を aspect-ratio で幅いっぱいに表示し、高さをvw相当で
   滑らかに補間する（フルブリードのためpadding-top以外の左右余白は持たない）
   ========================================================================== */
.reception-photo {
  padding-top: 150px;
}

.reception-photo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 621.89;
  overflow: hidden;
}

.reception-photo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 53%;
  opacity: 0.6;
}

/* 1023px以下: SPレイアウト（縦横比・余白・クロップ位置を切り替え） */
@media (max-width: 1023px) {
  .reception-photo {
    padding-top: 100px;
  }

  /* 写真の幅は最大480pxで中央に置く（375px・320pxでは画面幅いっぱいのまま） */
  .reception-photo__frame {
    max-width: var(--sp-photo-max);
    margin: 0 auto;
    aspect-ratio: 375 / 320;
  }

  .reception-photo__image {
    object-position: 50% 50%;
  }
}

/* ==========================================================================
   Menu-Priceセクション（Figma: menu-price-section / node-id 171:915, 163:785）
   使い方:
     <section class="menu-price">
       <div class="menu-price__content">
         <div class="section-title">…</div>
         <div class="menu-price__main-list">
           <div class="menu-price__main-item">
             <div class="menu-price__card">
               <div class="menu-price__icon menu-price__icon--spine"><img ...></div>
               <div class="menu-price__card-text">
                 <div class="menu-price__card-header">
                   <span class="menu-price__tag">…</span>
                   <p class="menu-price__card-title">…</p>
                 </div>
                 <p class="menu-price__card-desc">…</p>
               </div>
             </div>
             <div class="menu-price__price">
               <p class="menu-price__price-text">
                 <span class="menu-price__price-label">初回限定</span>
                 <span class="menu-price__price-amount">￥3,980</span>
                 <span class="menu-price__price-note">（通常 ￥6,600）</span>
               </p>
             </div>
           </div>
           …
         </div>
         <div class="menu-price__divider" aria-hidden="true"></div>
         <div class="menu-price__sub-list">
           <div class="menu-price__sub-item">
             <div class="menu-price__card-header">…</div>
             <p class="menu-price__card-desc">…</p>
           </div>
           …
         </div>
         <div class="menu-price__cta">
           <a class="menu-price__button" href="#">
             <span class="menu-price__button-text">さらに詳細を知る</span>
             <img class="menu-price__button-icon" ...>
           </a>
         </div>
       </div>
     </section>
   Reception-photoとの間隔はこのセクションの padding-top で確保する（Reception-photo側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は clamp()/vw で余白・間隔を滑らかに補間する
   ========================================================================== */
.menu-price {
  padding-top: 150px;
  padding-right: clamp(62px, calc(-164.29px + 22.1vw), 260px);
  padding-left: clamp(62px, calc(-164.29px + 22.1vw), 260px);
}

.menu-price__content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.menu-price__main-list {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, calc(-21.16px + 4.02vw), 56px);
  width: 100%;
  padding-top: 30px;
}

.menu-price__main-item {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.menu-price__card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.menu-price__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 160px;
  border-radius: 20px;
  background-color: #f5f5f5;
}

.menu-price__icon img {
  display: block;
  width: auto;
  height: 140px;
}

.menu-price__icon--hand img {
  height: 110px;
}

.menu-price__card-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
}

.menu-price__card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.menu-price__tag {
  flex-shrink: 0;
  padding: 5px 9px;
  border-right: 2px solid #181c39;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  color: #181c39;
  white-space: nowrap;
}

.menu-price__card-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  color: #181c39;
  word-break: break-word;
}

.menu-price__card-desc {
  margin: 0;
  width: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #181c39;
  word-break: break-word;
}

.menu-price__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 6px 20px;
  background-color: #3b82c5;
}

.menu-price__price-text {
  margin: 0;
  white-space: nowrap;
}

.menu-price__price-amount-group {
  white-space: nowrap;
}

.menu-price__price-label,
.menu-price__price-note {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
}

.menu-price__price-label {
  font-size: 20px;
}

.menu-price__price-amount {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  color: #ffffff;
}

.menu-price__price-note {
  font-size: 14px;
}

.menu-price__divider {
  width: 100%;
  height: 1px;
  background-color: #181c39;
  opacity: 0.15;
}

.menu-price__sub-list {
  display: flex;
  gap: clamp(20px, calc(-20px + 3.91vw), 55px);
  width: 100%;
}

.menu-price__sub-item {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
}

.menu-price__cta {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.menu-price__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 324px;
  height: 61px;
  padding: 0 32px;
  border: 1px solid #3b82c5;
  border-radius: 10px;
  text-decoration: none;
}

.menu-price__button-text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #3b82c5;
  white-space: nowrap;
}

.menu-price__button-icon {
  --icon-mask: url('../images/icon-arrow-right.svg');
  display: block;
  flex-shrink: 0;
  width: 27px;
  height: auto;
  background-color: #3b82c5;
}

/* ボタンの hover / タップ: 矢印・外枠・文字を --hover-light（#91d2e5）にする（Features・Guide のボタンと同じ）。
   PC（hover対応デバイス）はマウスオーバー時に、色を 0.3秒・ease で変え、
   ほかのボタンと同じく上へ4px浮き上がらせる（0.25秒・ease。Features のボタンに合わせて translate を使う）。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える（浮き上がりなし）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .menu-price__button {
    transition: border-color 0.3s ease, translate 0.25s ease;
  }

  .menu-price__button-text {
    transition: color 0.3s ease;
  }

  .menu-price__button-icon {
    transition: background-color 0.3s ease;
  }

  .menu-price__button:hover {
    border-color: var(--hover-light);
    translate: 0 -4px;
  }

  .menu-price__button:hover .menu-price__button-text {
    color: var(--hover-light);
  }

  .menu-price__button:hover .menu-price__button-icon {
    background-color: var(--hover-light);
  }
}

@media (hover: none) {
  .menu-price__button:active {
    border-color: var(--hover-light);
  }

  .menu-price__button:active .menu-price__button-text {
    color: var(--hover-light);
  }

  .menu-price__button:active .menu-price__button-icon {
    background-color: var(--hover-light);
  }
}

.menu-price__button:focus-visible {
  border-color: var(--hover-light);
}

.menu-price__button:focus-visible .menu-price__button-text {
  color: var(--hover-light);
}

.menu-price__button:focus-visible .menu-price__button-icon {
  background-color: var(--hover-light);
}

/* 1880px〜1024px: このセクション限定の中間ブレークポイント
   （Figma: menu-price-section(1880px) / node-id 356:1745）
   1881px〜1920pxは上記の基本スタイル（左揃え・横一列・clamp()レスポンシブ）のまま。
   1880px以下では以下のみ変更する:
     - main-menu-item: タグ+タイトルを縦積みに、アイコンをカードの高さいっぱいにストレッチ
     - price: テキストを中央揃えの2行（ラベル／金額）に変更
     - sub-menu-list: 横一列(flex)からグリッド(2列)に変更し、ブロックとして中央揃えにする
       （3件中3件目は1列目・2行目に自動配置され、2列目・2行目は空白のまま）
   他のセクションの1023px/1024pxのグローバルなブレークポイント定義には影響しない。 */
@media (max-width: 1880px) and (min-width: 1024px) {
  .menu-price__main-list {
    gap: 20px;
  }

  .menu-price__icon {
    width: 150px;
  }

  .menu-price__icon--spine img {
    height: 180px;
  }

  .menu-price__main-item .menu-price__card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .menu-price__main-item .menu-price__tag {
    border-right: none;
    padding: 5px 9px;
  }

  .menu-price__price {
    justify-content: center;
  }

  .menu-price__price-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    white-space: normal;
  }

  .menu-price__sub-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 430px));
    column-gap: 53px;
    row-gap: 53px;
    justify-content: center;
  }
}

/* 1023px以下: SPレイアウト（アイコン+テキストの横並びカードを縦積みにし、
   区切り線を非表示、サブメニューは1カラム縦積みにする） */
@media (max-width: 1023px) {
  .menu-price {
    padding: 100px 16px 100px;
  }

  .menu-price__content {
    gap: 48px;
    max-width: var(--sp-content-max);
  }

  .menu-price__main-list {
    flex-direction: column;
    gap: 40px;
    padding-top: 0;
  }

  .menu-price__main-item {
    gap: 20px;
  }

  .menu-price__card {
    align-items: stretch;
    gap: 12px;
  }

  .menu-price__icon {
    width: 48px;
    border-radius: 4px;
  }

  .menu-price__icon--spine {
    padding: 0 15px;
  }

  .menu-price__icon--hand {
    padding: 0 3px;
  }

  .menu-price__icon img {
    width: 100%;
    height: auto;
  }

  .menu-price__card-header {
    gap: 5px;
  }

  .menu-price__tag {
    padding: 0 6px 0 0;
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .menu-price__card-title {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  /* 「オーダーメイド整体コース」カードのみ見出しがすぐ折り返すため、
     SP版限定でこのカードのみフォントサイズを縮小する（他のカード・他の画面幅には適用しない） */
  .menu-price__card-title.menu-price__card-title--sm {
    font-size: 16px;
  }

  .menu-price__card-desc {
    font-size: 16px;
  }

  .menu-price__price {
    padding: 6px 12px;
  }

  .menu-price__price-label {
    font-size: 16px;
    font-weight: 700;
  }

  .menu-price__price-amount {
    font-size: 20px;
  }

  .menu-price__price-note {
    font-size: 12px;
    font-weight: 700;
  }

  .menu-price__divider {
    display: none;
  }

  .menu-price__sub-list {
    flex-direction: column;
    gap: 32px;
  }

  .menu-price__sub-item {
    gap: 12px;
  }

  .menu-price__cta {
    justify-content: flex-start;
  }

  .menu-price__button {
    width: 100%;
    padding: 0 41.5px;
  }
}

/* ==========================================================================
   Voiceセクション（Figma: voice-section / node-id 171:955, 363:1746, 166:817）
   使い方:
     <section class="voice">
       <div class="voice__box">
         <div class="voice__content">
           <div class="section-title">…</div>
           <div class="voice__card">
             <div class="voice__text">
               <p class="voice__title">…<br>…</p>
               <p class="voice__desc">…</p>
               <div class="voice__profile">
                 <div class="voice__profile-icon"><img ...></div>
                 <div class="voice__profile-meta">
                   <p class="voice__profile-course">…</p>
                   <p class="voice__profile-person">…</p>
                 </div>
               </div>
             </div>
             <div class="voice__image voice__image--01"><img ...></div>
           </div>
           <div class="voice__divider" aria-hidden="true"></div>
           <div class="voice__card voice__card--reverse">
             <div class="voice__image voice__image--02"><img ...></div>
             <div class="voice__text">…</div>
           </div>
         </div>
       </div>
     </section>
   voice__card--reverse は画像を左・テキストを右にする2件目のカード用修飾子
   （デスクトップ幅では flex-direction: row-reverse、SP幅ではテキストが常に上に
   来るよう column に戻す）
   Menu-Priceとの間隔はこのセクションの padding-top で確保する（Menu-Price側に margin は付けない）
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px〜1920pxの間は clamp()/vw で背景の左右余白・画像幅を滑らかに補間する
   voice__box（背景）と voice__content（コンテンツ）は幅が異なり、その差分が左右均等な
   余白になる（Figma: 1920pxで背景1740px・コンテンツ1400px、1024pxで背景944px・
   コンテンツ900px）。voice の padding が背景の外側余白、voice__content の
   max-width が背景内側の余白を作る
   voice__card は align-items: stretch により voice__text と voice__image の高さを
   常に揃え、voice__image 側は object-fit: cover で歪みなく枠いっぱいに表示する
   voice-image-02（男性の顔写真）は「顔を見せない」意図のため、object-positionでは
   なくソース画像自体を肩から下でトリミングした voice-image-02-cropped.jpeg を使用
   ========================================================================== */
.voice {
  padding-top: 150px;
  padding-right: clamp(40px, calc(-17.14px + 5.58vw), 90px);
  padding-left: clamp(40px, calc(-17.14px + 5.58vw), 90px);
}

/* max-width: 1920px超で背景のボックスだけが画面いっぱいに広がらないよう、1920px時の幅（1740px）で止める */
.voice__box {
  max-width: 1740px;
  margin: 0 auto;
  padding: 80px 0;
  border-radius: 20px;
  background-color: #f5f5f5;
}

.voice__content {
  display: flex;
  flex-direction: column;
  gap: 70px;
  width: 100%;
  max-width: clamp(900px, calc(328.61px + 55.8vw), 1400px);
  margin: 0 auto;
}

.voice__card {
  display: flex;
  align-items: stretch;
  gap: 35px;
  width: 100%;
}

.voice__card--reverse {
  flex-direction: row-reverse;
}

.voice__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 35px;
}

.voice__title {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  line-height: normal;
  color: #181c39;
  word-break: break-word;
}

.voice__desc {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #000000;
  word-break: break-word;
}

.voice__profile {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  width: 100%;
}

.voice__profile-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.voice__profile-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.voice__profile-meta {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
}

.voice__profile-course {
  margin: 0;
  color: #3b82c5;
}

.voice__profile-person {
  margin: 0;
  color: #181c39;
}

.voice__image {
  position: relative;
  flex-shrink: 0;
  width: clamp(365px, calc(-17.82px + 37.39vw), 700px);
  overflow: hidden;
}

.voice__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice__image--01 img {
  object-position: 72% 50%;
}

/* 顔を見せない意図のため、画像自体を顔より下(肩から下)でトリミング済みの
   voice-image-02-cropped.jpeg を使用。object-positionの数値だけでは
   常にどこかに顔の一部が写り込んでしまい確実に隠せないため、
   ソース画像の時点で顔を除去する方式にしている */
.voice__image--02 img {
  object-position: 50% 50%;
}

.voice__divider {
  width: 100%;
  height: 1px;
  background-color: #181c39;
  opacity: 0.15;
}

/* 1023px以下: SPレイアウト（カードを縦積みにし、テキストを常に上・画像を常に下に配置） */
@media (max-width: 1023px) {
  .voice {
    padding: 100px 16px 35px;
    background-color: #f5f5f5;
  }

  .voice__box {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .voice__content {
    gap: 48px;
    max-width: var(--sp-content-max);
  }

  .voice__card {
    flex-direction: column;
    align-items: stretch;
    gap: 35px;
  }

  .voice__card--reverse {
    flex-direction: column;
  }

  .voice__title {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .voice__desc {
    font-size: 16px;
  }

  .voice__profile {
    gap: 6px;
  }

  .voice__profile-meta {
    gap: 0;
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  /* 写真の幅は最大480pxで中央に置く（375px・320pxでは480pxより狭いため見た目は変わらない） */
  .voice__image {
    width: 100%;
    max-width: var(--sp-photo-max);
    margin: 0 auto;
    aspect-ratio: 343 / 255;
  }

  .voice__image--01 img {
    object-position: 65% 68%;
  }

  .voice__divider {
    display: none;
  }
}

/* ==========================================================================
   Top-Page-buttonセクション（Figma: Top-Page-button / 1920px node-id 171:961,
   SP node-id 166:823）
   使い方: 各ページから <?php include 'top-page-button.php'; ?> で読み込む
   （top-page-button.php の出力するHTML構造は以下）
     <section class="top-page-button">
       <div class="top-page-button__content">
         <a class="top-page-button__link" href="#">
           <img class="top-page-button__icon" src="images/icon-page-top-arrow.svg" alt="">
           <span class="top-page-button__text">Page Top</span>
         </a>
       </div>
     </section>
   voice-sectionとの間隔はこのセクションの padding-top で確保する（voice側にmarginは
   付けない）: PC版(1024px〜)150px / SP版(〜375px)100px
   CTA-sectionとの間隔は cta-footer 側の padding-top（既存の実装で150px/100px確保済み）
   でまかなうため、このセクション自体に下方向の余白は付けない
   コンテンツ幅の中で右揃えに配置する。左右の余白・コンテンツ最大幅は voice-section と
   同じ値（padding: clamp(40px,90px)、content max-width: clamp(900px,1400px)）を使い、
   他セクションと右端を揃える
   1024px専用デザインは用意されていないため、1024px〜1920pxの間はアイコン・文字サイズを
   1920px版基準のvw比率で比例縮小しつつ、SP版の値を下限にclamp()で固定する
   （letter-spacingはフォントサイズの6%で一定のため、em単位で追従させる）
   ブレークポイント: 1023px以下でSP版デザインに切り替え
   ========================================================================== */
.top-page-button {
  padding-top: 150px;
  padding-right: clamp(40px, calc(-17.14px + 5.58vw), 90px);
  padding-left: clamp(40px, calc(-17.14px + 5.58vw), 90px);
}

.top-page-button__content {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: clamp(900px, calc(328.61px + 55.8vw), 1400px);
  margin: 0 auto;
}

.top-page-button__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.top-page-button__icon {
  --icon-mask: url('../images/icon-page-top-arrow.svg');
  display: block;
  flex-shrink: 0;
  width: clamp(19.92px, 1.49vw, 28.58px);
  height: auto;
  background-color: #181c39;
}

.top-page-button__text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #181c39;
  white-space: nowrap;
}

/* Page Top の hover / タップ: 三角と文字を --hover-main（#3b82c5）にする。
   PC（hover対応デバイス）はマウスオーバー時に、色を 0.3秒・ease で変え、
   ほかのボタンと同じく上へ4px浮き上がらせる（0.25秒・ease。Features のボタンに合わせて translate を使う）。
   SP（タップのみのデバイス）は :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える（浮き上がりなし）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .top-page-button__link {
    transition: translate 0.25s ease;
  }

  .top-page-button__link:hover {
    translate: 0 -4px;
  }

  .top-page-button__icon {
    transition: background-color 0.3s ease;
  }

  .top-page-button__text {
    transition: color 0.3s ease;
  }

  .top-page-button__link:hover .top-page-button__icon {
    background-color: var(--hover-main);
  }

  .top-page-button__link:hover .top-page-button__text {
    color: var(--hover-main);
  }
}

@media (hover: none) {
  .top-page-button__link:active .top-page-button__icon {
    background-color: var(--hover-main);
  }

  .top-page-button__link:active .top-page-button__text {
    color: var(--hover-main);
  }
}

.top-page-button__link:focus-visible .top-page-button__icon {
  background-color: var(--hover-main);
}

.top-page-button__link:focus-visible .top-page-button__text {
  color: var(--hover-main);
}

@media (max-width: 1023px) {
  .top-page-button {
    padding: 100px 16px 0;
  }

  .top-page-button__content {
    max-width: var(--sp-content-max);
  }

  .top-page-button__icon {
    width: 19.92px;
  }

  .top-page-button__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   CTA+フッターセクション（Figma: CTA-section / 1920px node-id 145:1047,
   SP node-id 166:831）
   使い方:
     <section class="cta-footer">
       <div class="cta-footer__box">
         <div class="cta-footer__wrapper">
           <div class="cta-footer__container">
             <div class="cta-footer__text-block">
               <a class="cta-footer__logo" href="index.php"><img src="images/Logo-white.png" alt="…"></a>
               <p class="cta-footer__subheading">…<br class="cta-footer__subheading-break">…</p>
               <p class="cta-footer__address">…</p>
               <div class="cta-footer__timetable">
                 <div class="cta-footer__timetable-row cta-footer__timetable-row--header">
                   <p class="cta-footer__timetable-label">診療時間</p>
                   <p class="cta-footer__timetable-day">月</p>…
                 </div>
                 <div class="cta-footer__timetable-row cta-footer__timetable-row--morning">…</div>
                 <div class="cta-footer__timetable-row cta-footer__timetable-row--afternoon">…</div>
               </div>
             </div>
             <div class="cta-footer__button-group">
               <div class="cta-footer__phone-box">
                 <p class="cta-footer__phone-label">…</p>
                 <p class="cta-footer__phone-number">…</p>
               </div>
               <a class="cta-footer__mail-box" href="#">
                 <p class="cta-footer__mail-label">…</p>
                 <p class="cta-footer__mail-cta">…</p>
               </a>
             </div>
           </div>
           <p class="cta-footer__copyright">© 2026 やまと整骨院 All Rights Reserved.</p>
         </div>
       </div>
     </section>
   全ページ共通パーツのため cta-footer.php として切り出し、各ページ最下部から
   <?php include 'cta-footer.php'; ?> で読み込む。
   前セクションとの間隔はこのセクションの padding-top で確保する（前セクション側に margin は付けない）:
     PC版(1024px〜) 150px / SP版(〜375px) 100px
   ブレークポイント: 1023px以下でSPレイアウトに切り替え（電話・メールのCTAボタンを
   間隔15pxで縦に並べる）
   1024px〜1920pxの間は背景ボックスの余白・ブロック幅・ロゴサイズなど「レイアウト値」のみ
   clamp()/vw で滑らかに補間する。cta-container内のボタン文字サイズ・letter-spacing・
   timetable-section内の文字サイズ／間隔は1920pxの値のまま固定している。
   1024px版デザイン（別途指示予定）ではこれらの文字サイズ自体が縮小される見込みのため、
   本ステップでは「1920px版からそのまま縮小した際に、どの幅から窮屈になり崩れ始めるか」を
   ローカルサーバー上のDevToolsで確認できる状態にすることを優先している（意図的に未対応）。
   ========================================================================== */
.cta-footer {
  padding-top: 150px;
}

.cta-footer__box {
  padding: clamp(43px, calc(0.71px + 4.13vw), 80px) 0;
  background-color: #3b82c5;
}

.cta-footer__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(49px, calc(0.97px + 4.69vw), 91px);
  width: 100%;
}

.cta-footer__container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.cta-footer__text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(19px, calc(0.67px + 1.79vw), 35px);
  width: clamp(339px, calc(-0.46px + 33.15vw), 636px);
}

.cta-footer__logo {
  display: block;
  flex-shrink: 0;
  width: clamp(170px, calc(-0.29px + 16.63vw), 319px);
}

.cta-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.cta-footer__subheading {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  color: #ffffff;
  word-break: break-word;
}


.cta-footer__address {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  color: #ffffff;
  word-break: break-word;
}

.cta-footer__timetable {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  color: #ffffff;
  text-align: center;
}

.cta-footer__timetable-row {
  display: flex;
  align-items: center;
  gap: 23px;
  width: max-content;
  padding: 0 13px 11px;
  border-bottom: 1px solid #ffffff;
}

.cta-footer__timetable-row--header {
  align-items: center;
  padding-bottom: 15px;
}

.cta-footer__timetable-row--morning {
  align-items: flex-end;
}

.cta-footer__timetable-label {
  margin: 0;
  flex-shrink: 0;
  width: 170px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  text-align: left;
  white-space: nowrap;
}

.cta-footer__timetable-day {
  margin: 0;
  flex-shrink: 0;
  width: 32px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
}

.cta-footer__timetable-mark {
  margin: 0;
  flex-shrink: 0;
  width: 32px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 2.88px;
}

.cta-footer__timetable-mark--cross {
  font-size: 34px;
  letter-spacing: 2.04px;
}

.cta-footer__button-group {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, calc(0.05px + 3.12vw), 60px);
  width: clamp(331px, calc(0.76px + 32.25vw), 620px);
  text-align: center;
  color: #3b82c5;
}

.cta-footer__phone-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(11px, calc(0.76px + 1vw), 20px);
  width: 100%;
  padding: clamp(13px, calc(0.4px + 1.23vw), 24px) 8%;
  border-radius: 20px;
  background-color: #ffffff;
  /* リンク（a）にしたため、リンクの色・下線を付けず、文字色は .cta-footer__button-group の色を受け継ぐ */
  color: inherit;
  text-decoration: none;
}

.cta-footer__phone-label {
  margin: 0;
  width: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
}

.cta-footer__phone-number {
  margin: 0;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 2.88px;
}

.cta-footer__mail-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(11px, calc(0.76px + 1vw), 20px);
  width: 100%;
  padding: clamp(13px, calc(0.4px + 1.23vw), 24px) 0;
  border-radius: 20px;
  background-color: #ccecf6;
  text-decoration: none;
  cursor: pointer;
}

.cta-footer__mail-label {
  margin: 0;
  width: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  line-height: normal;
  letter-spacing: 1.5px;
  color: #3b82c5;
}

.cta-footer__mail-cta {
  margin: 0;
  width: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 40px;
  line-height: normal;
  letter-spacing: 2.4px;
  color: #3b82c5;
}

/* 電話・メールボタンの hover / タップ（Figma: CTA/phone / node-id 56:176）
   色: どちらも hover 時は背景が #91d2e5（Brand/Secondary）になり、文字色は #3b82c5 のまま。
   PC（hover対応デバイス）: マウスオーバー時に色変化＋上へ浮き上がり(translateY)＋影を、
   同じ 0.25秒・ease でなめらかに変化させる（ヘッダー・MenuSelectのボタンと同じ動き）。
   transition は元の状態側に指定しているため、マウスを外したときも同じ動きで戻る。
   影の色は、フッター背景（#3b82c5）の上で光って見えないよう、背景に近い暗めのネイビー系にしている
   （ボタン色に合わせると発光して見えるため）。
   SP（タップのみのデバイス）: :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える
   （浮き上がり・影・transition は付けない）。
   キーボード操作用に :focus-visible は両方のボタンで有効（色のみ）。
   電話ボタンは見本のためリンク先が仮（#）のリンク */
@media (hover: hover) {
  .cta-footer__phone-box,
  .cta-footer__mail-box {
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .cta-footer__phone-box:hover,
  .cta-footer__mail-box:hover {
    background-color: #91d2e5;
    box-shadow: 0 10px 15px rgba(20, 60, 110, 0.3);
    transform: translateY(-4px);
  }
}

@media (hover: none) {
  .cta-footer__phone-box:active,
  .cta-footer__mail-box:active {
    background-color: #91d2e5;
  }
}

.cta-footer__phone-box:focus-visible,
.cta-footer__mail-box:focus-visible {
  background-color: #91d2e5;
}

.cta-footer__copyright {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: normal;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* 1500px〜1024px: このセクション限定の中間ブレークポイント
   （Figma: CTA-section(1024px) / node-id 368:1923）
   1501px〜1920pxは上記の基本スタイル（clamp()によるレスポンシブ）のまま。
   1500px以下では、上記のclamp()による滑らかな補間をやめ、1024px版デザインの
   固定値にそのまま切り替える（menu-price セクションの1880px中間ブレークポイントと
   同様の実装パターン）。CTAボタン・timetable-section内のフォントサイズ／文字間隔も
   1024px版デザイン通りに縮小する。
   cta-footer__wrapper は max-width: 900px で幅を固定した上で margin: 0 auto により
   セクション全体の中で左右中央に配置する（画面幅が900pxを超えた分は左右均等の
   余白になる。Figmaの1024px幅フレームでは cta-wrapper が x=62、左右均等
   （(1024-900)/2=62px）の位置に配置されており、この左右中央寄せと一致する）。
   cta-text-blockは flex-grow で残り幅（900px - button-group幅347px - gap20px = 533px）
   まで伸びるため、timetable-rowの必要幅（147+18×8+23×8=475px）は常に収まり、
   行の中身が縮まないのに外枠（下線を含む）だけが縮んで下線が短くなる不具合を回避している。
   他のセクションの1023px/1024pxのグローバルなブレークポイント定義には影響しない。 */
@media (max-width: 1500px) and (min-width: 1024px) {
  .cta-footer__box {
    padding: 80px 0;
  }

  .cta-footer__wrapper {
    flex-direction: column;
    gap: 91px;
    max-width: 900px;
    margin: 0 auto;
  }

  .cta-footer__container {
    flex-direction: row;
    gap: 20px;
    max-width: none;
    margin: 0;
  }

  .cta-footer__text-block {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    gap: 35px;
  }

  .cta-footer__logo {
    width: 319px;
  }

  .cta-footer__timetable-row {
    padding: 0 0 11px;
  }

  .cta-footer__timetable-row--header {
    padding-bottom: 15px;
  }

  .cta-footer__timetable-label {
    width: 147px;
  }

  .cta-footer__timetable-day {
    width: 18px;
    font-size: 20px;
    letter-spacing: 1.2px;
  }

  .cta-footer__timetable-mark {
    width: 18px;
    font-size: 36px;
    letter-spacing: 2.16px;
  }

  .cta-footer__timetable-mark--cross {
    font-size: 28px;
    letter-spacing: 1.68px;
  }

  .cta-footer__button-group {
    width: 347px;
  }

  .cta-footer__phone-box,
  .cta-footer__mail-box {
    gap: 20px;
    padding: 24px 0;
  }

  .cta-footer__phone-label,
  .cta-footer__mail-label {
    font-size: 20px;
    letter-spacing: 1.2px;
  }

  .cta-footer__phone-number {
    font-size: 36px;
    letter-spacing: 2.16px;
  }

  .cta-footer__mail-cta {
    font-size: 32px;
    letter-spacing: 1.92px;
  }
}

/* 1023px以下: SPレイアウト（テキストブロックと電話・メールのCTAボタン2つを
   1本のカラムに縦積みにする。cta-footer__button-group内は電話・メールボタンの
   間隔を15px空ける（Figma: SP-cta-text-block(メールボタンあり) / node-id 375:2022）。
   timetable-sectionの列幅・フォントサイズも SP版デザイン(node-id 166:831)の値に
   切り替える） */
@media (max-width: 1023px) {
  .cta-footer {
    padding-top: 100px;
  }

  .cta-footer__box {
    padding: 48px 12px;
  }

  .cta-footer__wrapper {
    gap: 35px;
  }

  .cta-footer__container {
    flex-direction: column;
    align-items: stretch;
    gap: 35px;
    max-width: var(--sp-content-max);
  }

  .cta-footer__text-block {
    gap: 35px;
    width: 100%;
  }

  .cta-footer__logo {
    width: 174px;
  }

  .cta-footer__subheading {
    font-size: 16px;
    letter-spacing: 0.96px;
  }

  .cta-footer__address {
    font-size: 16px;
  }

  .cta-footer__timetable-row {
    gap: 0;
    width: 100%;
    justify-content: space-between;
    padding: 0 0 10px;
  }

  .cta-footer__timetable-row--header {
    padding-bottom: 10px;
  }

  .cta-footer__timetable-label {
    width: 100px;
    font-size: 14px;
    letter-spacing: 0.84px;
  }

  .cta-footer__timetable-day {
    font-size: 14px;
    letter-spacing: 0.84px;
  }

  .cta-footer__timetable-mark {
    font-size: 20px;
    letter-spacing: 1.2px;
  }

  .cta-footer__timetable-mark--cross {
    font-size: 16px;
    letter-spacing: 0.96px;
  }

  /* 画面が広いとき（1023pxなど）にボタンが横に広がりすぎないよう、幅は最大480pxで中央に置く
     （375px・320pxでは480pxより狭いため見た目は変わらない。高さは余白・文字サイズが固定値のため幅で変わらない） */
  .cta-footer__button-group {
    gap: 15px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .cta-footer__phone-box,
  .cta-footer__mail-box {
    gap: 10px;
    padding: 24px 0;
  }

  .cta-footer__phone-label,
  .cta-footer__mail-label {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .cta-footer__phone-number {
    font-size: 32px;
    letter-spacing: 1.92px;
  }

  .cta-footer__mail-cta {
    font-size: 30px;
    letter-spacing: 1.8px;
  }

  .cta-footer__copyright {
    font-size: 11px;
  }
}

/* 374px以下（320px等）: timetable-rowの必要幅（ラベル100px + 32px×8列 = 356px）が
   表示領域（320pxで296px）を超えて表がはみ出し、ページ全体が横に広がってしまうため、
   曜日・○×の列だけを固定幅32pxから「残り幅を8等分」に切り替えて画面内に収める。
   375px以上は上記のSP版の値のまま変えない */
@media (max-width: 374px) {
  .cta-footer__timetable-day,
  .cta-footer__timetable-mark {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
}

/* ==========================================================================
   MenuCardセクション（Figma: MenuCard-section / 1920px node-id 334:1257,
   1024px node-id 383:1717, SP: SP-menu-card-container /
   node-id 171:1270, 171:1328, 173:918, 174:980, 174:1192）
   使い方:
     <section class="menu-cards">
       <div class="menu-cards__list">
         <article class="menu-card menu-card--color-a menu-card--img-left" id="course-01">
           <div class="menu-card__body">
             <div class="menu-card__image"><img ...></div>
             <div class="menu-card__content">
               <div class="menu-card__title">
                 <div class="menu-card__title-main">
                   <p class="menu-card__tag">…</p>
                   <h2 class="menu-card__name">…</h2>
                 </div>
                 <p class="menu-card__catch">…</p>
               </div>
               <div class="menu-card__details">
                 <div class="menu-card__group menu-card__group--audience">…</div>
                 <div class="menu-card__group menu-card__group--treatment">…</div>
                 <div class="menu-card__arrow"><img ...></div>
               </div>
               <p class="menu-card__result">…</p>
             </div>
           </div>
           <div class="menu-card__footer">
             <div class="menu-card__duration">…</div>
             <div class="menu-card__price">…</div>
             <a class="menu-card__cta" href="#">…</a>
           </div>
         </article>
         …
       </div>
     </section>
   5枚とも共通クラス .menu-card をベースにし、下記2つの修飾クラスを独立して付け替える:
     ヘッダー色  … .menu-card--color-a（青背景・白文字）/ .menu-card--color-b（薄い水色背景・青文字）
     写真の位置  … .menu-card--img-left / .menu-card--img-right
   どちらもPC版(1024px〜)のみの差分。SP版はFigma上、全カードがヘッダー色・写真位置とも
   同一デザイン（薄い水色ヘッダー、写真はタイトルと詳細の間）のため修飾クラスは効かない。
   各カードのid（course-01〜course-05）はページ内リンク（アンカー）用。
   写真の切り抜き位置はカードごとに異なるため、id指定で object-position を調整している。
   前セクションとの間隔はこのセクションの padding-top で確保する（前セクション側に margin は付けない）
   ブレークポイント:
     1480px以上      … 1920px基準。1920px値を上限に clamp()/vw の線形補間で縮小する
                        （補間式は「1024pxでの値 v1」「1920pxでの値 v2」から
                          calc((v1 - (v2 - v1) * 1024 / 896)px + ((v2 - v1) / 896 * 100)vw)）
     1024〜1479px    … 1024px版デザイン。下記「1024px〜1479px」ブロックで、既存クラスに対して
                        1024px版で値が異なる部分だけを上書きする
     1023px以下      … SPレイアウト
   ========================================================================== */
.menu-cards {
  padding-top: 150px;
  padding-right: clamp(62px, calc(-164.29px + 22.1vw), 260px);
  padding-left: clamp(62px, calc(-164.29px + 22.1vw), 260px);
}

.menu-cards__list {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ヘッダー色の既定値（SP版と同じ薄い水色）。PC版の修飾クラスで上書きする */
.menu-card {
  --menu-card-head-bg: #e9f6fa;
  --menu-card-head-fg: #3b82c5;
  overflow: hidden;
  border-radius: 20px;
  background-color: #ffffff;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* min-height: 写真(高さ672px @1920px)に合わせてカードの高さを確保する。
   .menu-card__content はこの高さいっぱいに広がり、子要素は space-between で均等配置される。
   1024〜1479pxは下記ブロックで1024px版の値(635px)に切り替える。SP版は display: contents のため無効 */
.menu-card__body {
  display: flex;
  align-items: stretch;
  min-height: clamp(500px, calc(303.4px + 19.2vw), 672px);
}

/* SP版のみ改行する箇所（PC版では1行につなげる） */
.menu-card__br {
  display: none;
}

/* --- 写真 --- */
.menu-card__image {
  position: relative;
  flex-shrink: 0;
  width: clamp(320px, calc(106.29px + 20.87vw), 507px);
  overflow: hidden;
}

.menu-card__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#course-01 .menu-card__image img {
  object-position: 50% 100%;
}

#course-02 .menu-card__image img {
  object-position: 50% 88%;
}

#course-03 .menu-card__image img {
  object-position: 56% 33%;
}

/* --- コンテンツ（タイトル・詳細・結果） ---
   Figma: 高さ=Fill container / 間隔=自動(space-between) / padding-bottom=20px（PC版のみ。
   SP版は display: contents でラップを外すため影響しない） */
.menu-card__content {
  display: flex;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}

.menu-card__title {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, calc(9.71px + 1vw), 29px) clamp(32px, calc(12.57px + 1.9vw), 49px);
  background-color: var(--menu-card-head-bg);
  color: var(--menu-card-head-fg);
}

.menu-card__title-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(20px, calc(2.86px + 1.67vw), 35px);
}

.menu-card__tag {
  margin: 0;
  padding: 5px clamp(14px, calc(4.86px + 0.89vw), 22px);
  border: 2px solid currentColor;
  font-weight: 700;
  font-size: clamp(24px, calc(10.29px + 1.34vw), 36px);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.menu-card__name {
  margin: 0;
  font-weight: 700;
  font-size: clamp(26px, calc(10px + 1.56vw), 40px);
  line-height: normal;
  word-break: break-word;
}

.menu-card__catch {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, calc(10px + 0.78vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
  word-break: break-word;
}

.menu-card__details {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(10.86px + 0.89vw), 28px);
  width: 100%;
  max-width: 753px;
}

.menu-card__group {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
}

.menu-card__group-head {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 15px;
  width: clamp(120px, calc(80px + 3.91vw), 155px);
}

.menu-card__group-icon {
  display: block;
  height: auto;
}

.menu-card__group-icon--person {
  width: clamp(46px, calc(30px + 1.56vw), 60px);
}

.menu-card__group-icon--edit {
  width: clamp(60px, calc(37.14px + 2.23vw), 80px);
}

.menu-card__group-label {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, calc(11.14px + 0.67vw), 24px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #3b82c5;
  text-align: center;
  white-space: nowrap;
}

.menu-card__list {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-card__check {
  display: block;
  flex-shrink: 0;
  width: clamp(30px, calc(17.43px + 1.23vw), 41px);
  height: auto;
}

.menu-card__item-text {
  min-width: 0;
  font-size: clamp(15px, calc(9.29px + 0.56vw), 20px);
  line-height: normal;
  color: #000000;
  word-break: break-word;
}

.menu-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
}

.menu-card__arrow img {
  display: block;
  width: clamp(28px, calc(17.71px + 1vw), 37px);
  height: auto;
}

.menu-card__result {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid #3b82c5;
  border-bottom: 1px solid #3b82c5;
  font-weight: 700;
  font-size: clamp(18px, calc(10px + 0.78vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #3b82c5;
  text-align: center;
  word-break: break-word;
}

/* --- フッター（施術時間・価格・予約ボタン） --- */
.menu-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 25px;
  padding: clamp(20px, calc(8.57px + 1.12vw), 30px) 20px;
  background-color: #3b82c5;
  color: #ffffff;
}

.menu-card__duration {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
}

.menu-card__duration-icon {
  display: block;
  flex-shrink: 0;
  width: clamp(40px, calc(22.86px + 1.67vw), 55px);
  height: auto;
}

.menu-card__duration-text {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, calc(10px + 0.78vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.menu-card__duration-num {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, calc(14.57px + 1.12vw), 36px);
}

.menu-card__price {
  display: flex;
  align-items: center;
  gap: clamp(20px, calc(5.14px + 1.45vw), 33px);
  padding: 3px 0 0 10px;
  border-bottom: 3px solid #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

.menu-card__price-label {
  margin: 0;
  font-size: clamp(18px, calc(10px + 0.78vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
}

.menu-card__price-body {
  margin: 0;
  letter-spacing: 0.06em;
}

.menu-card__price-yen {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, calc(14.29px + 1.34vw), 40px);
}

.menu-card__price-amount {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(44px, calc(21.14px + 2.23vw), 64px);
  letter-spacing: 0;
}

.menu-card__price-note {
  font-weight: 400;
  font-size: clamp(14px, calc(7.14px + 0.67vw), 20px);
  letter-spacing: 0;
}

.menu-card__price-normal {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(18px, calc(8.86px + 0.89vw), 26px);
}

.menu-card__cta {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #3b82c5;
  text-decoration: none;
}

.menu-card__cta-text {
  font-weight: 700;
  font-size: clamp(18px, calc(10px + 0.78vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.menu-card__cta-icon {
  display: block;
  flex-shrink: 0;
  width: clamp(22px, calc(12.86px + 0.89vw), 30px);
  height: auto;
}

/* 予約ボタンの色変化（Figma: menu-card-footer-cta / node-id 114:651）
   hover・タップ時は、背景 #3b82c5・文字と矢印を白に反転する（矢印は青のSVGを filter で白にする）。
   PC（hover対応デバイス）: マウスオーバー時に色変化＋上へ浮き上がり(translateY)＋影を、
   同じ 0.25秒・ease でなめらかに変化させる（他のボタンと同じ動き）。
   transition は元の状態側に指定しているため、マウスを外したときも同じ動きで戻る。
   影の色は、フッター背景（#3b82c5）と同じ色のボタンの上で光って見えないよう、
   CTAフッターのボタンと同じ暗めのネイビー系・低い不透明度にしている。
   SP（タップのみのデバイス）: :hover が押下後も残るため使わず、タップ中(:active)だけ色を変える
   （transition・浮き上がり・影は付けない）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .menu-card__cta {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .menu-card__cta-icon {
    transition: filter 0.25s ease;
  }

  .menu-card__cta:hover {
    background-color: #3b82c5;
    color: #ffffff;
    box-shadow: 0 10px 15px rgba(20, 60, 110, 0.3);
    transform: translateY(-4px);
  }

  .menu-card__cta:hover .menu-card__cta-icon {
    filter: brightness(0) invert(1);
  }
}

@media (hover: none) {
  .menu-card__cta:active {
    background-color: #3b82c5;
    color: #ffffff;
  }

  .menu-card__cta:active .menu-card__cta-icon {
    filter: brightness(0) invert(1);
  }
}

.menu-card__cta:focus-visible {
  background-color: #3b82c5;
  color: #ffffff;
}

.menu-card__cta:focus-visible .menu-card__cta-icon {
  filter: brightness(0) invert(1);
}

/* --- PC版（1024px〜）のみ: ヘッダー色・写真位置の修飾クラス --- */
@media (min-width: 1024px) {
  .menu-card--color-a {
    --menu-card-head-bg: #3b82c5;
    --menu-card-head-fg: #ffffff;
  }

  .menu-card--color-b {
    --menu-card-head-bg: #e9f6fa;
    --menu-card-head-fg: #3b82c5;
  }

  .menu-card--img-left .menu-card__body {
    flex-direction: row;
  }

  .menu-card--img-right .menu-card__body {
    flex-direction: row-reverse;
  }
}

/* 1024px〜1479px: 1024px版デザイン（Figma: MenuCard-section / node-id 383:1717）
   1480px以上の1920px基準スタイルに対し、1024px版で値が異なるプロパティだけを上書きする
   （クラスは共通のまま。新規クラスは作らない）。
   各値は「1024px = Figma値」〜「1480px = 1920px基準の clamp() が1480pxで返す値」を
   直線補間している（1480pxで見た目に段差が出ない）。
     clamp(min, calc((f1 - 1024 * s)px + (100 * s)vw), max)   s = (f2 - f1) / (1480 - 1024)
   1024px版で 1920px版と異なる主な点:
     - カード間隔75px、写真321px幅×高さ635px（カード高さの下限）、content の padding-bottom 11px
     - タイトル: 左右padding18px、タグとコース名の間隔9px、コース名32px
     - 詳細: 見出し(アイコン+ラベル)と一覧の間隔なし、見出し幅125px・高さ107px（一覧の上端揃え）
     - 結果テキスト: 22px、カード2以外は2行に改行（SPと同じ位置）
     - フッター: 施術時間と価格を縦積みにして左、予約ボタンを右（高さいっぱい）に配置（grid） */
@media (min-width: 1024px) and (max-width: 1479px) {
  .menu-cards__list {
    gap: clamp(75px, calc(18.86px + 5.48vw), 100px);
  }

  .menu-card__body {
    min-height: clamp(587.56px, calc(741.53px - 10.4vw), 635px);
  }

  /* --- 写真（幅の狭い枠では x 方向の切り抜き位置が効く。Figma 1024px版の切り抜きに合わせる） --- */
  .menu-card__image {
    width: clamp(321px, calc(109.54px + 20.65vw), 415.17px);
  }

  #course-02 .menu-card__image img {
    object-position: 88% 88%;
  }

  #course-03 .menu-card__image img {
    object-position: 27% 33%;
  }

  #course-04 .menu-card__image img {
    object-position: 0% 50%;
  }

  #course-05 .menu-card__image img {
    object-position: 70% 50%;
  }

  /* --- コンテンツ --- */
  .menu-card__content {
    padding-bottom: clamp(11px, calc(-9.21px + 1.97vw), 20px);
  }

  .menu-card__title {
    padding: clamp(24.51px, calc(39.08px - 0.98vw), 29px) clamp(18px, calc(-32.95px + 4.98vw), 40.69px);
  }

  .menu-card__title-main {
    flex-wrap: nowrap;
    column-gap: clamp(9px, calc(-32.71px + 4.07vw), 27.58px);
  }

  .menu-card__tag {
    padding-inline: clamp(16px, calc(11.44px + 0.45vw), 18.03px);
    font-size: clamp(24px, calc(10.25px + 1.34vw), 30.12px);
  }

  .menu-card__name {
    font-size: clamp(32px, calc(29.56px + 0.24vw), 33.09px);
    white-space: nowrap;
  }

  .menu-card__catch {
    font-size: clamp(18px, calc(10.04px + 0.78vw), 21.54px);
  }

  .menu-card__details {
    gap: clamp(16px, calc(-2.04px + 1.76vw), 24.03px);
  }

  .menu-card__group {
    gap: clamp(0px, calc(-33.68px + 3.29vw), 15px);
  }

  .menu-card__group-head {
    align-self: flex-start;
    width: clamp(125px, calc(96.1px + 2.82vw), 137.87px);
    height: clamp(107px, calc(84.76px + 2.17vw), 116.9px);
  }

  .menu-card__group-icon--person {
    width: clamp(47px, calc(33.33px + 1.34vw), 53.09px);
  }

  .menu-card__group-icon--edit {
    width: clamp(68px, calc(63.19px + 0.47vw), 70.14px);
  }

  .menu-card__group-label {
    font-size: clamp(20px, calc(17.63px + 0.23vw), 21.06px);
  }

  .menu-card__check {
    width: clamp(35.63px, calc(53.05px - 1.18vw), 41px);
  }

  .menu-card__item-text {
    font-size: clamp(17px, calc(15.7px + 0.13vw), 17.58px);
  }

  .menu-card__arrow img {
    width: clamp(30px, calc(24.36px + 0.55vw), 32.51px);
  }

  .menu-card__result {
    font-size: clamp(21.54px, calc(23.02px - 0.1vw), 22px);
  }

  .menu-card__result .menu-card__br {
    display: block;
  }

  #course-02 .menu-card__result .menu-card__br {
    display: none;
  }

  /* --- フッター: 左に施術時間・価格（縦積み）、右に予約ボタン（高さいっぱい） --- */
  .menu-card__footer {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 7px 25px;
    padding: clamp(25.15px, calc(40.9px - 1.06vw), 30px) 20px;
  }

  .menu-card__duration {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .menu-card__duration-icon {
    width: clamp(47.58px, calc(71.67px - 1.63vw), 55px);
  }

  .menu-card__duration-text {
    font-size: clamp(21.54px, calc(32.76px - 0.76vw), 25px);
  }

  .menu-card__duration-num {
    font-size: clamp(31.15px, calc(46.9px - 1.06vw), 36px);
  }

  .menu-card__price {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    gap: clamp(7px, calc(-37.01px + 4.3vw), 26.6px);
  }

  .menu-card__price-label {
    font-size: clamp(21.54px, calc(32.76px - 0.76vw), 25px);
  }

  .menu-card__price-yen {
    font-size: clamp(34.12px, calc(53.2px - 1.29vw), 40px);
  }

  .menu-card__price-amount {
    font-size: clamp(54.14px, calc(86.13px - 2.16vw), 64px);
  }

  .menu-card__price-note {
    font-size: clamp(17.06px, calc(26.61px - 0.65vw), 20px);
  }

  .menu-card__price-normal {
    font-size: clamp(22.03px, calc(34.91px - 0.87vw), 26px);
  }

  .menu-card__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .menu-card__cta-text {
    font-size: clamp(21.54px, calc(32.76px - 0.76vw), 25px);
  }

  .menu-card__cta-icon {
    width: clamp(26.03px, calc(38.91px - 0.87vw), 30px);
  }
}

/* 1023px以下: SPレイアウト（Figma: SP-menu-card-container）
   タイトル → 写真(343px角) → こんな方へ → 施術内容 → 矢印 → 結果 → フッター を
   間隔18pxで縦積みにする。PC版の body/content/details は display: contents で
   ラップを外し、order でタイトルを写真より上に配置する。 */
@media (max-width: 1023px) {
  .menu-cards {
    padding: 100px 16px 0;
  }

  .menu-cards__list {
    gap: 65px;
    max-width: var(--sp-content-max);
  }

  .menu-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
    border-radius: 0;
    background-color: transparent;
  }

  .menu-card__body,
  .menu-card__content,
  .menu-card__details,
  .menu-card__title-main {
    display: contents;
  }

  .menu-card__br {
    display: block;
  }

  .menu-card__title {
    order: -2;
    align-items: flex-start;
    padding: 29px 23px;
    border-radius: 10px;
  }

  .menu-card__tag {
    padding: 5px 22px;
    font-size: 20px;
  }

  .menu-card__name {
    font-size: 28px;
    white-space: nowrap;
  }

  /* 「骨盤・姿勢矯正コース」「オーダーメイド整体コース」は文字数が多く28pxでは収まらないため、
     SP版のみ25pxにし、幅をコンテナいっぱいにして折り返し可能にする（320pxでも2行以内） */
  #course-01 .menu-card__name,
  #course-02 .menu-card__name {
    width: 100%;
    font-size: 25px;
    white-space: normal;
  }

  /* 375pxで1行に収めるため、「オーダーメイド整体コース」のみ文字間隔を-4%にする */
  #course-02 .menu-card__name {
    letter-spacing: -0.04em;
  }

  .menu-card__catch {
    font-size: 18px;
  }

  /* 正方形の写真は、幅・高さとも最大480pxで中央に置く（375px・320pxでは480pxより狭いため見た目は変わらない） */
  .menu-card__image {
    order: -1;
    width: 100%;
    max-width: var(--sp-photo-max);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }

  #course-01 .menu-card__image img {
    object-position: 50% 14%;
  }

  #course-02 .menu-card__image img {
    object-position: 50% 40%;
  }

  #course-03 .menu-card__image img {
    object-position: 50% 73%;
  }

  .menu-card__group {
    flex-direction: column;
    align-items: center;
  }

  .menu-card__group--audience {
    gap: 2px;
  }

  .menu-card__group--treatment {
    gap: 13px;
  }

  .menu-card__group-head {
    align-self: auto;
    gap: 7px;
    width: 100%;
    height: 133px;
  }

  .menu-card__group-icon--person {
    width: 60px;
  }

  .menu-card__group-icon--edit {
    width: 80px;
  }

  .menu-card__group--audience .menu-card__group-label {
    font-size: 18px;
  }

  .menu-card__group--treatment .menu-card__group-label {
    font-size: 24px;
  }

  .menu-card__list {
    flex: none;
    gap: 17px;
    width: 100%;
  }

  .menu-card__item {
    align-items: flex-start;
    gap: 8px;
  }

  .menu-card__check {
    width: 25px;
    margin-block: -2px;
  }

  .menu-card__item-text {
    font-size: 16px;
  }

  .menu-card__arrow {
    width: 100%;
    height: 49px;
  }

  .menu-card__arrow img {
    width: 37px;
  }

  .menu-card__result {
    padding: 14px 0;
    font-size: 18px;
  }

  .menu-card__footer {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    padding: 12px 16px;
    border-radius: 5px;
  }

  .menu-card__duration-icon {
    width: 45px;
  }

  .menu-card__duration-text {
    font-size: 18px;
  }

  .menu-card__duration-num {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  .menu-card__price {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 3px 0 0;
    border-bottom: none;
  }

  /* 375pxで「初回限定￥3,980（通常￥6,600）」が1行に収まるよう、
     375pxで14px（下限）〜430pxで18px（上限）に画面幅で滑らかに変化させる */
  .menu-card__price-label {
    font-size: clamp(14px, calc(7.27vw - 13.27px), 18px);
  }

  .menu-card__price-yen {
    font-size: 24px;
  }

  .menu-card__price-amount {
    font-size: 36px;
  }

  .menu-card__price-note {
    font-size: 16px;
  }

  .menu-card__price-normal {
    font-family: inherit;
    font-size: inherit;
  }

  .menu-card__cta {
    justify-content: center;
    width: 100%;
  }

  .menu-card__cta-text {
    font-size: 18px;
  }

  .menu-card__cta-icon {
    width: 30px;
  }
}

/* ==========================================================================
   MenuSelectセクション（Figma: MenuSelect-section / 1980px版 node-id 334:1245,
   1024px版 node-id 387:3887, SP版 node-id 171:1267）
   各メニューカード（#course-01〜#course-05）へジャンプするページ内リンク。
   使い方:
     <section class="menu-select">
       <div class="menu-select__panel">
         <div class="menu-select__container">
           <div class="section-title">…</div>
           <nav class="menu-select__body">
             <div class="menu-select__primary">        … 大ボタン（1行目・2行目）
               <a class="menu-select__button" href="#course-01">
                 <span class="menu-select__inner">
                   <span class="menu-select__lead">…</span>
                   <span class="menu-select__title">
                     <span class="menu-select__tag">…</span> <span class="menu-select__sep">│</span><span class="menu-select__name">…</span>
                   </span>
                 </span>
               </a>
             </div>
             <div class="menu-select__other">          … 小ボタン（3つ。lead なし）
     前セクションとの間隔はこのセクションの padding-top で確保する（前セクション側に margin は付けない）
   ブレークポイント（MenuCardセクションと同じ）:
     1480px以上      … PC版。ボタン文字は1行。3つ並びの小ボタンが収まるよう、
                        1760px以上は25px、1480pxでは22pxまで clamp()/vw で縮小する
     1024〜1479px    … 1024px版。大ボタンは縦積み、小ボタンは「タグ／コース名」の2行表示（区切り線なし）
     1023px以下      … SPレイアウト（全ボタン縦積み・1行表示）
   パネル（背景）の左右余白と、コンテナ幅は MenuCard の一覧幅（.menu-cards）に揃えている:
     パネル余白  … 1024px: 40px / 1920px: 90px を線形補間
     コンテナ幅  … 1024px: 900px / 1920px: 1400px（= .menu-cards__list と同幅）
   Figmaの線は内側描画のため、ボタンの上下 padding 16px は「border 2px + padding 14px」で再現している
   ========================================================================== */
.menu-select {
  --menu-select-title-size: clamp(22px, calc(6.14px + 1.0714vw), 25px);
  padding: 100px clamp(40px, calc(-17.14px + 5.58vw), 90px) 0;
}

.menu-select__panel {
  max-width: 1740px;
  margin: 0 auto;
  padding: 55px clamp(22px, calc(-147.15px + 16.52vw), 170px);
  border-radius: 20px;
  background-color: #e9f6fa;
}

.menu-select__container {
  display: flex;
  flex-direction: column;
  gap: 59px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 0;
}

/* Figma の Section-Header はタイトルの行高が normal（ヘッダー高さ 98px）。共通クラスの行高 1 を上書きする */
.menu-select .section-title__heading {
  line-height: normal;
}

.menu-select__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.menu-select__primary,
.menu-select__other {
  display: flex;
  width: 100%;
}

.menu-select__primary {
  gap: 61px;
}

.menu-select__other {
  justify-content: center;
  gap: 25px;
}

.menu-select__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 14px 0;
  border: 2px solid #3b82c5;
  border-radius: 5px;
  background-color: #ffffff;
  color: #3b82c5;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-style: normal;
  text-decoration: none;
}

/* 色変化: hover対応デバイス（PC）はマウスオーバー時のみ（クリック時の :active は別指定しない）。
   色・浮き上がり(translateY)・影は同じ時間・イージングでなめらかに変化させる（PCのみ）。
   transition は元の状態側に指定しているため、マウスを外したときも同じ動きで戻る。
   タップのみのデバイス（SP）は :hover が押下後も残るため使わず、タップ中(:active)だけ変える
   （アニメーション・浮き上がり・影は付けない）。
   キーボード操作用に :focus-visible は両方で有効（色のみ） */
@media (hover: hover) {
  .menu-select__button {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .menu-select__button:hover {
    background-color: #3b82c5;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(59, 130, 197, 0.45);
    transform: translateY(-4px);
  }
}

@media (hover: none) {
  .menu-select__button:active {
    background-color: #3b82c5;
    color: #ffffff;
  }
}

.menu-select__button:focus-visible {
  background-color: #3b82c5;
  color: #ffffff;
}

.menu-select__primary .menu-select__button {
  flex: 1 1 0;
}

.menu-select__other .menu-select__button {
  flex: 0 1 450px;
}

/* ボタン内の文字ブロック。ブロック自体はボタンの中央、行は左揃え（Figma: Menu_inner） */
.menu-select__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.menu-select__lead {
  font-weight: 400;
  font-size: calc(var(--menu-select-title-size) * 0.8);
  line-height: normal;
}

.menu-select__title {
  font-weight: 700;
  font-size: var(--menu-select-title-size);
  line-height: normal;
  letter-spacing: 0.06em;
}

/* 幅が足りず折り返す場合も、タグ・コース名は語の途中で切らない */
.menu-select__tag,
.menu-select__name {
  display: inline-block;
}

/* 1024px〜1479px: 1024px版デザイン（Figma: node-id 387:3887） */
@media (min-width: 1024px) and (max-width: 1479px) {
  .menu-select {
    --menu-select-title-size: 25px;
  }

  .menu-select__body {
    gap: 27px;
  }

  .menu-select__primary {
    flex-direction: column;
    gap: 27px;
  }

  .menu-select__primary .menu-select__button {
    flex: none;
    width: 100%;
  }

  .menu-select__other .menu-select__button {
    flex: 1 1 0;
  }

  .menu-select__other .menu-select__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .menu-select__other .menu-select__sep {
    display: none;
  }
}

/* 1023px以下: SPレイアウト（Figma: node-id 171:1267）
   Figma上、大ボタンだけ文字幅に合わせた幅（326px）になっているが、SPの他ボタン・
   MenuCardの一覧と同様に全ボタンをコンテンツ幅いっぱいに揃えている。 */
@media (max-width: 1023px) {
  .menu-select {
    --menu-select-title-size: 18px;
    padding: 70px 0 0;
  }

  .menu-select__panel {
    max-width: none;
    padding: 48px 16px;
    border-radius: 0;
  }

  .menu-select__container {
    gap: 33px;
    max-width: var(--sp-content-max);
    padding: 0;
  }

  .menu-select .section-title {
    gap: 1px;
  }

  .menu-select .section-title__label {
    line-height: normal;
  }

  .menu-select__body {
    align-items: stretch;
    gap: 33px;
  }

  .menu-select__primary,
  .menu-select__other {
    flex-direction: column;
    gap: 16px;
  }

  .menu-select__primary .menu-select__button,
  .menu-select__other .menu-select__button {
    flex: none;
    width: 100%;
  }

  .menu-select__button {
    padding: 8px 6px;
  }

  .menu-select__primary .menu-select__button {
    padding: 20px 6px;
  }

  /* 小見出しは1行目の上下の余白をカット（Figma: text-box-trim）。非対応ブラウザでは余白が少し広くなるだけ */
  .menu-select__lead {
    font-size: 16px;
    text-box: trim-both cap alphabetic;
  }
}

/* ==========================================================================
   Clinic-exterior-photoセクション（Figma: clinic-exterior-photo / node-id 334:1256, 171:1268）
   使い方:
     <section class="clinic-exterior-photo">
       <div class="clinic-exterior-photo__frame">
         <img class="clinic-exterior-photo__image" src="images/clinic-exterior-photo.png" alt="">
       </div>
     </section>
   MenuSelectとの間隔はこのセクションの padding-top で確保する（MenuSelect側に margin は付けない）。
   MenuCardとの間隔は .menu-cards 側の padding-top がそのまま働く
   ブレークポイント: 1023px以下でSPレイアウトに切り替え
   1024px以上は 1920px版の縦横比(1920 / 761)を保ったまま幅いっぱいに表示し、高さを連続的に縮小する
   （フルブリードのため padding-top 以外の左右余白は持たない）
   Figmaの切り抜き位置（画像を枠より大きく拡大してトリミング）は、枠に対する%で再現している
   ========================================================================== */
.clinic-exterior-photo {
  padding-top: 150px;
}

.clinic-exterior-photo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 761;
  overflow: hidden;
}

.clinic-exterior-photo__image {
  position: absolute;
  top: -78.36%;
  left: -33.59%;
  display: block;
  width: 142.71%;
  height: 262.74%;
  max-width: none;
  opacity: 0.6;
}

/* 1023px以下: SPレイアウト（縦横比・余白・切り抜き位置を切り替え） */
@media (max-width: 1023px) {
  .clinic-exterior-photo {
    padding-top: 100px;
  }

  /* 写真の幅は最大480pxで中央に置く（375px・320pxでは画面幅いっぱいのまま） */
  .clinic-exterior-photo__frame {
    max-width: var(--sp-photo-max);
    margin: 0 auto;
    aspect-ratio: 375 / 320;
  }

  .clinic-exterior-photo__image {
    top: -14.56%;
    left: -36.78%;
    width: 151.17%;
    height: 129.27%;
  }
}

/* ==========================================================================
   FAQセクション（Figma: FAQ-section 1980px版 node-id 334:1263, SP版 node-id 174:1141）
   使い方:
     <section class="faq">
       <div class="faq__container">
         <div class="section-title">…</div>
         <div class="faq__list">
           <div class="faq-item">
             <div class="faq-item__question">
               <img class="faq-item__icon" src="images/icon-faq-q.svg" alt="">
               <h3 class="faq-item__question-text">…</h3>
             </div>
             <p class="faq-item__answer">…</p>
           </div>
           …
         </div>
       </div>
     </section>
   Q&A は全項目とも共通クラス .faq-item で構成し、項目ごとの個別スタイルは持たない。
   前セクションとの間隔はこのセクションの padding-top で確保する（前セクション側に margin は付けない。
   他セクションと同じ PC版150px / SP版100px）
   左右余白とコンテナ幅（1400px）は MenuCard の一覧（.menu-cards）と同じ
   ブレークポイント:
     1024px以上 … 1920px版デザインをベースに clamp()/vw の線形補間で連続的に縮小する。
                  1024px版デザインはないため、下限値には SP版の値（文字18px/16px・アイコン23×25px・
                  項目の上下余白20px・見出しとの間隔45px）を使い、1024pxで SP版と同じ大きさになる
                  （補間式は menu-cards と同じ: calc((v1 - (v2 - v1) * 1024 / 896)px + ((v2 - v1) / 896 * 100)vw））
     1023px以下 … SPレイアウト（下限値がそのまま効くため、構造が違う部分だけ上書きする）
   ========================================================================== */
.faq {
  padding: 150px clamp(62px, calc(-164.29px + 22.1vw), 260px) 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-style: normal;
}

.faq__container {
  display: flex;
  flex-direction: column;
  gap: clamp(45px, calc(-7.57px + 5.134vw), 91px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Figma の Section-Header はタイトルの行高が normal。共通クラスの行高 1 を上書きする（MenuSelect と同じ） */
.faq .section-title__heading {
  line-height: normal;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(20px, calc(6.29px + 1.339vw), 32px) 20px;
  border-top: 1px solid #3b82c5;
}

.faq-item__question {
  display: flex;
  align-items: flex-end;
  gap: 13px;
}

.faq-item__icon {
  display: block;
  flex-shrink: 0;
  width: clamp(23px, calc(13.86px + 0.893vw), 31px);
  height: clamp(25px, calc(14.71px + 1.004vw), 34px);
}

.faq-item__question-text {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, calc(10px + 0.781vw), 25px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #3b82c5;
}

.faq-item__answer {
  margin: 0;
  font-weight: 400;
  font-size: clamp(16px, calc(11.43px + 0.446vw), 20px);
  line-height: normal;
  color: #000000;
}

/* 回答中の強調（PC版のみ Medium。SP版は通常の太さ） */
.faq-item__em {
  font-weight: 500;
}

/* SP版のみ改行する箇所（PC版では1行につなげる） */
.faq-item__br {
  display: none;
}

/* 1023px以下: SPレイアウト（Figma: node-id 174:1141）
   項目間隔は PC版(28px)より広い45px、項目の左右余白はなし、Qアイコンは質問の1行目に揃える。
   回答文は上下の余白をカット（Figma: text-box-trim）。非対応ブラウザでは余白が少し広くなるだけ */
@media (max-width: 1023px) {
  .faq {
    padding: 100px 16px 0;
  }

  .faq__container {
    max-width: var(--sp-content-max);
  }

  .faq .section-title {
    gap: 1px;
  }

  .faq .section-title__label {
    line-height: normal;
  }

  .faq__list {
    gap: 45px;
  }

  .faq-item {
    gap: 25px;
    padding: 20px 0;
  }

  .faq-item__question {
    align-items: flex-start;
  }

  .faq-item__answer {
    text-box: trim-both cap alphabetic;
  }

  .faq-item__em {
    font-weight: 400;
  }

  .faq-item__br {
    display: block;
  }
}

/* ==========================================================================
   Profileセクション（Figma: Profile-section 1920px版 node-id 134:672,
   1024px版 node-id 401:1314, SP版 node-id 175:1691）
   使い方:
     <section class="profile">
       <div class="profile__panel">
         <div class="profile__container">
           <div class="section-title">…</div>
           <div class="profile__content">
             <div class="profile__photo"><img class="profile__photo-image" src="images/profile-photo.png" alt="…"></div>
             <div class="profile__text">
               <div class="profile__name-group">
                 <p class="profile__badge">…</p>
                 <div class="profile__name">
                   <h3 class="profile__name-ja">…</h3>
                   <p class="profile__name-en">…</p>
                 </div>
               </div>
               <p class="profile__message">…</p>
               <div class="profile__block">          … 経歴・資格（同じ構造）
                 <h3 class="profile__block-title">…</h3>
                 <ul class="profile__list"><li>…</li></ul>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>
   前セクション（パンくず）との間隔はこのセクションの padding-top で確保する（前側に margin は付けない）。
   パネル（背景）の左右余白・コンテナ幅は MenuSelect と同じ:
     パネル余白  … 1024px: 40px / 1920px: 90px を線形補間
     コンテナ幅  … 1024px: 900px / 1920px: 1400px（内側余白 22px〜170px）
   ブレークポイント:
     1600px以上      … 1920px版。バッジ・氏名・英名を1行に並べ、写真は 468×623px 固定（Figmaの切り抜きを%で再現）。
                        1920px版の名前の行は677px必要なため、テキスト幅がそれを確保できる1600px（テキスト幅約682px）から切り替える
     1024〜1599px    … 1024px版。バッジの下に氏名・英名を置く。写真は幅を 349px(1024px)〜468px(1600px) で
                        線形補間し、高さはテキストに合わせて伸ばす（object-fit: cover で右寄せ表示）
     1023px以下      … SPレイアウト（テキストの下に写真。写真は幅いっぱいの正方形）
   ========================================================================== */
.profile {
  padding: 100px clamp(40px, calc(-17.14px + 5.58vw), 90px) 0;
}

.profile__panel {
  max-width: 1740px;
  margin: 0 auto;
  padding: 85px clamp(22px, calc(-147.15px + 16.52vw), 170px);
  background-color: #f5f5f5;
}

.profile__container {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Figma の Section-Header はタイトルの行高が normal。共通クラスの行高 1 を上書きする（MenuSelect と同じ） */
.profile .section-title__heading {
  line-height: normal;
}

.profile__content {
  display: flex;
  align-items: stretch;
  gap: 71px;
}

/* 写真: 1024〜1599px は枠いっぱいに cover 表示（高さはテキストに合わせて伸びる） */
.profile__photo {
  position: relative;
  flex-shrink: 0;
  width: clamp(349px, calc(137.4px + 20.66vw), 468px);
  overflow: hidden;
}

.profile__photo-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 20%;
}

.profile__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 37px;
  min-width: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #000000;
  word-break: break-word;
}

.profile__name-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
}

.profile__badge {
  margin: 0;
  padding: 5px 23px;
  border: 1px solid #bfc6b4;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.profile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 53px;
  text-align: center;
  white-space: nowrap;
}

.profile__name-ja {
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: normal;
}

.profile__name-en {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: normal;
}

.profile__message {
  margin: 0;
}

.profile__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile__block-title {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
}

.profile__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1600px以上: 1920px版（Figma: node-id 134:672）
   バッジ・氏名・英名を1行に並べる。写真は 468×623px 固定で、Figmaの切り抜き（画像を枠より大きく拡大）を枠に対する%で再現する */
@media (min-width: 1600px) {
  .profile__content {
    align-items: center;
  }

  .profile__photo {
    width: 468px;
    height: 623px;
  }

  .profile__photo-image {
    inset: auto;
    top: -20.26%;
    left: -26.07%;
    width: 125.97%;
    height: 141.94%;
    max-width: none;
    object-fit: fill;
  }

  .profile__name-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 53px;
  }
}

/* 1023px以下: SPレイアウト（Figma: node-id 175:1691）
   背景パネルは画面幅いっぱい。写真はテキストの下に、幅いっぱいの正方形で配置し、Figmaの切り抜きを枠に対する%で再現する。
   各テキストは上下の余白をカット（Figma: text-box-trim）。非対応ブラウザでは余白が少し広くなるだけ */
@media (max-width: 1023px) {
  .profile {
    padding: 70px 0 0;
  }

  .profile__panel {
    max-width: none;
    padding: 48px 16px;
  }

  .profile__container {
    gap: 33px;
    max-width: var(--sp-content-max);
  }

  .profile .section-title {
    gap: 1px;
  }

  .profile .section-title__label {
    line-height: normal;
  }

  .profile__content {
    flex-direction: column;
    gap: 33px;
  }

  /* 正方形の写真は、幅・高さとも最大480pxで中央に置く（375px・320pxでは480pxより狭いため見た目は変わらない） */
  .profile__photo {
    order: 1;
    width: 100%;
    max-width: var(--sp-photo-max);
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }

  .profile__photo-image {
    inset: auto;
    top: -26.86%;
    left: -22.74%;
    width: 122.74%;
    height: 184.11%;
    max-width: none;
    object-fit: fill;
  }

  .profile__text {
    gap: 37px;
    font-size: 16px;
  }

  .profile__name-group {
    gap: 15px;
  }

  .profile__badge {
    padding: 7px 16px;
    font-size: 16px;
    text-box: trim-both cap alphabetic;
  }

  .profile__name {
    gap: 0 23px;
  }

  .profile__name-ja {
    font-size: 32px;
  }

  .profile__name-en {
    font-size: 15px;
  }

  .profile__message {
    text-box: trim-both cap alphabetic;
  }

  .profile__block {
    gap: 20px;
  }

  .profile__block-title {
    font-size: 16px;
    text-box: trim-both cap alphabetic;
  }

  .profile__list {
    text-box: trim-both cap alphabetic;
  }
}

/* ==========================================================================
   Accessセクション（Figma: Access-container 1920px版 node-id 145:1197,
   1024px版 node-id 404:1346, SP版 node-id 176:1746）
   使い方:
     <section class="access">
       <div class="access__container">
         <div class="section-title">…</div>
         <div class="access__content">
           <div class="access__text">
             <div class="access__info">
               <p class="access__address">…</p>
               <p class="access__line">…</p>
             </div>
             <div class="access__facilities">
               <p class="access__facilities-title">…</p>
               <ul class="access__facilities-list">
                 <li class="access__facility">
                   <span class="access__icon access__icon--car" aria-hidden="true"></span>
                   <span class="access__facility-label">…</span>
                 </li>
                 …
               </ul>
             </div>
             <div class="access__firsttime">…</div>
           </div>
           <div class="access__map"><iframe …></iframe></div>
         </div>
       </div>
     </section>
   前セクション（Profile）との間隔はこのセクションの padding-top で確保する（前側に margin は付けない）。
   地図はFigmaでは画像（access-map-image）だが、Googleマップの iframe に置き換えている。
   iframe の width / height は属性ではなく CSS（.access__map の枠いっぱい）で決める。
   Figmaの地図枠には角丸の指定がないため角丸は付けない。
   設備アイコンは既存の images/icon-*.svg（currentColor）を mask に使い、Figmaと同じ #c9c9c9 で塗る。
   左右余白・コンテナ幅は FAQ / Features と同じ（1024px: 62px・900px / 1920px: 260px・1400px）。
   1024px〜1920pxの間は clamp()/vw で地図の幅・カラム間隔・設備アイコンの幅/間隔/文字サイズを
   1024px版〜1920px版の値へ線形補間する。
   ブレークポイント:
     1600px以上      … 地図とテキストを縦中央揃えにする（1920px版）。1024px版は下揃え
     1200px以上      … 住所（郵便番号＋住所）を1行にする（1920px版）。それ未満は2行（1024px版）
     1023px以下      … SPレイアウト（テキストの下に地図。設備は2列のグリッド）
   ========================================================================== */
.access {
  padding: 150px clamp(62px, calc(-164.29px + 22.1vw), 260px) 0;
}

.access__container {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Figma の Section-Header はタイトルの行高が normal。共通クラスの行高 1 を上書きする（Profile と同じ） */
.access .section-title__heading {
  line-height: normal;
}

.access__content {
  display: flex;
  align-items: flex-end;
  gap: clamp(30px, calc(-148.29px + 17.41vw), 186px);
}

.access__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 55px;
  min-width: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #000000;
  word-break: break-word;
}

.access__info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.access__address {
  margin: 0;
  font-weight: 700;
  font-size: 25px;
  line-height: 49px;
  letter-spacing: 1.5px;
}

.access__address-gap,
.access__line-break {
  display: none;
}

.access__line {
  margin: 0;
}

.access__facilities {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.access__facilities-title {
  margin: 0;
}

.access__facilities-list {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, calc(-19.14px + 2.455vw), 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.access__facility {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  width: clamp(117px, calc(90.7px + 2.567vw), 140px);
  font-size: clamp(18px, calc(15.71px + 0.2232vw), 20px);
  text-align: center;
}

.access__icon {
  display: block;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  background-color: #c9c9c9;
  -webkit-mask: var(--access-icon) center / contain no-repeat;
  mask: var(--access-icon) center / contain no-repeat;
}

.access__icon--car {
  --access-icon: url('../images/icon-car.svg');
}

.access__icon--wheelchair {
  --access-icon: url('../images/icon-wheelchair.svg');
}

.access__icon--card {
  --access-icon: url('../images/icon-card.svg');
}

.access__icon--calendar {
  --access-icon: url('../images/icon-calendar.svg');
}

.access__facility-label {
  display: block;
  width: 100%;
}

/* Figma では幅 560px 固定（1024px版ではテキスト列より少し広く、カラム間隔に食い込む）。同じ見た目にするため固定幅にする */
.access__firsttime {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 560px;
}

.access__firsttime-title,
.access__firsttime-text {
  margin: 0;
}

.access__map {
  flex-shrink: 0;
  width: clamp(380px, calc(172px + 20.31vw), 562px);
  height: 542px;
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 1200px以上: 住所（郵便番号＋住所）を1行にする。行の高さも 1920px版（normal）に戻す */
@media (min-width: 1200px) {
  .access__address {
    line-height: normal;
  }

  .access__address-gap {
    display: inline;
  }

  .access__address-break {
    display: none;
  }
}

/* 1600px以上: 1920px版（Figma: node-id 145:1197）。地図とテキストを縦中央揃えにする */
@media (min-width: 1600px) {
  .access__content {
    align-items: center;
  }
}

/* 1023px以下: SPレイアウト（Figma: node-id 176:1746）
   テキストの下に地図（幅いっぱい・高さ343px）を置く。設備アイコンは2列のグリッド。
   各テキストは上下の余白をカット（Figma: text-box-trim）。非対応ブラウザでは余白が少し広くなるだけ */
@media (max-width: 1023px) {
  .access {
    padding: 100px 16px 0;
  }

  .access__container {
    gap: 34px;
    max-width: var(--sp-content-max);
  }

  .access .section-title {
    gap: 1px;
  }

  .access .section-title__label {
    line-height: normal;
  }

  .access__content {
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }

  .access__text {
    flex: none;
    font-size: 16px;
  }

  .access__address {
    font-size: 18px;
    line-height: normal;
    letter-spacing: 1.08px;
  }

  .access__address-gap,
  .access__dash-pc {
    display: none;
  }

  .access__address-break,
  .access__line-break {
    display: inline;
  }

  .access__line,
  .access__facilities-title,
  .access__firsttime-title,
  .access__firsttime-text {
    text-box: trim-both cap alphabetic;
  }

  .access__facilities-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    width: 279px;
    max-width: 100%;
  }

  .access__facility {
    align-self: start;
    justify-content: center;
    gap: 16px;
    width: auto;
    padding: 14px 0;
    font-size: 16px;
  }

  .access__facility-label {
    text-box: trim-both cap alphabetic;
  }

  .access__firsttime {
    width: 100%;
  }

  .access__map {
    width: 100%;
    height: 343px;
  }
}

/* ==========================================================================
   共通スクロール表示アニメーション（js/scroll-reveal.js とセット）
   使い方: 動かしたい要素に class="js-reveal" を付ける。各ページで js/scroll-reveal.js を読み込む
   動き: 画面に入ったら、下から少し浮き上がりながらふわっと表示する（一度表示したら戻さない）
   対象: 各セクションの中身（見出し・文章・画像・カード）だけ。セクションの背景・装飾、
         FV・ヘッダー・フッター（cta-footer）には付けない（背景を動かすと境目に隙間が出るため）
   仮の値: 下の変数で距離・速さ・イージング・時間差を調整する
     --reveal-distance : 浮き上がる距離
     --reveal-duration : 表示にかかる時間
     --reveal-easing   : 動きの緩急（最後にゆっくり止まる）
     --reveal-stagger  : 同時に画面に入った要素を順番に出すときの時間差（JSが読み取る）
   隠すのは JS が html に .is-reveal-ready を付けたときだけ。JSが動かない環境や
   OSで「動きを減らす」設定の人（prefers-reduced-motion: reduce）には最初から表示する
   ========================================================================== */
:root {
  --reveal-distance: 30px;
  --reveal-duration: 0.9s;
  --reveal-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-stagger: 0.15s;
}

@media (prefers-reduced-motion: no-preference) {
  .is-reveal-ready .js-reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--reveal-duration) var(--reveal-easing),
      transform var(--reveal-duration) var(--reveal-easing);
  }

  .is-reveal-ready .js-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Features のボタンはボタン自体が .js-reveal のため、上の transition がボタンの hover の
     transition（外枠の色・浮き上がり）を上書きしてしまう。表示の動きに hover の分を足す */
  .is-reveal-ready .features__button.js-reveal {
    transition:
      opacity var(--reveal-duration) var(--reveal-easing),
      transform var(--reveal-duration) var(--reveal-easing),
      border-color 0.3s ease,
      translate 0.25s ease;
  }
}

/* ==========================================================================
   sample-site-barセクション（サービスLPに戻るための追従ボタン）
   Figma: sample-site-bar / 1920px node-id 420:1322, SP node-id 416:1327
   使い方: sample-site-bar.php を各ページの cta-footer の後ろから
   <?php include 'sample-site-bar.php'; ?> で読み込む
   表示位置（下の余白16px）:
     PC版(1024px〜) 386×110px。画面の右下に固定（右の余白16px）
     SP版(〜1023px) 343×75px。画面の下・横中央に固定（左右は最低16pxあける）
     375pxより広いSP幅（タブレットなど）でも343pxのまま中央に置く
   重なり対策:
     - z-index は SPメニュー（.header__sp-menu / z-index: 1000）より下にして、
       メニューが開いている間はメニューを上に表示する
     - iPhoneのセーフエリア（画面下のバー）がある場合は、その分だけ上にずらす
       （env(safe-area-inset-bottom)。セーフエリアがない端末では 0）
     - 帯でページの一番下（フッターのコピーライト）が隠れないよう、コピーライトが画面に入ったら
       帯をふわっと隠す（js/script.js で .is-hidden を付け外しする。少し上に戻ると再び表示）。
       サービスLPの追従ボタンと同じ考え方で、フッターの下に余白は足さない
   ========================================================================== */
:root {
  --sample-site-bar-height: 110px;
  --sample-site-bar-bottom: 16px;
}

.sample-site-bar {
  position: fixed;
  right: 16px;
  bottom: calc(var(--sample-site-bar-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 386px;
  height: var(--sample-site-bar-height);
  padding: 9px 0;
  border: 2px solid #3b82c5;
  border-radius: 5px;
  background-color: #e9f6fa;
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* コピーライトが画面に入っている間は隠す（visibility: hidden でキーボード操作の対象からも外す） */
.sample-site-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* padding-left の 0.3em は、Figmaの文字の先頭にある半角スペース分 */
.sample-site-bar__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  padding: 4px 18px 4px calc(18px + 0.3em);
  border-radius: 8px;
  background-color: #3b82c5;
  font-size: 25px;
}

/* hover: 枠全体（.sample-site-bar）がリンクのため、hoverは枠に付ける。
   他のボタン（ヘッダーのボタン・MenuSelectのボタン）と同じ動き。
   hover対応デバイス（PC）のみ、枠全体の浮き上がり(translateY(-4px))・影と、
   内側のボタンの色を 0.25秒・ease で変化させる。
   影の色は hover 時のボタン色（#225a90）に合わせている。
   タップのみのデバイス（SP）は :hover が押下後も残るため使わず、タップ中(:active)だけボタンの色を変える
   （アニメーション・浮き上がり・影は付けない）。
   キーボード操作用に :focus-visible は両方で有効（ボタンの色のみ） */
@media (hover: hover) {
  .sample-site-bar {
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  .sample-site-bar__button {
    transition: background-color 0.25s ease;
  }

  .sample-site-bar:hover {
    box-shadow: 0 10px 22px rgba(34, 90, 144, 0.4);
    transform: translateY(-4px);
  }

  .sample-site-bar:hover .sample-site-bar__button {
    background-color: #225a90;
  }
}

@media (hover: none) {
  .sample-site-bar:active .sample-site-bar__button {
    background-color: #225a90;
  }
}

.sample-site-bar:focus-visible .sample-site-bar__button {
  background-color: #225a90;
}

.sample-site-bar__button-text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* アイコンはFigmaと同じく、下向きの矢印（24×23）を-90度回転して右向きにする */
.sample-site-bar__button-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 24px;
}

.sample-site-bar__button-icon img {
  display: block;
  transform: rotate(-90deg);
}

.sample-site-bar__note {
  flex-shrink: 0;
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #181c39;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  :root {
    --sample-site-bar-height: 75px;
  }

  /* SP版は画面下の横中央（左右は最低16pxあける） */
  .sample-site-bar {
    left: 16px;
    gap: 4px;
    width: auto;
    max-width: 343px;
    margin: 0 auto;
  }

  .sample-site-bar__button {
    gap: 22px;
    font-size: 16px;
  }

  .sample-site-bar__button-text {
    letter-spacing: 0;
  }

  .sample-site-bar__note {
    font-size: 12px;
  }
}

/* ==========================================================================
   文字の改行のルール（見出し・ボタン・カードなどの短い文）
   画面の幅に収まらないときは、単語の途中や「1〜2文字だけが次の行に落ちる」改行にならないよう、
     - 「、」「。」「？」の位置を優先して改行する … 区切りごとに <span class="text-part"> で囲む
       （inline-block のため、span の境目が先に改行される）
     - それでも収まらないときは、HTMLの <wbr> の位置（文節の区切り）で改行する
   長い本文の段落には使わない（ふつうの折り返しのまま）。
   各セクションの word-break: break-word より後に書く必要があるため、このファイルの最後に置く。
   ※文言を変えたときは <wbr> の位置も見直すこと
   ========================================================================== */
.section-title__heading,
.features__subheading,
.problems__item-title,
.guide__item-title,
.menu-price__card-title,
.voice__profile-course,
.cta-footer__address,
.menu-card__name,
.menu-card__catch,
.menu-card__item-text,
.menu-card__result,
.faq-item__question-text,
.profile__list,
.access__address,
.access__line {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.text-part {
  display: inline-block;
}