@charset "UTF-8";
/* ==========================================================================
   pages.css
   ページ固有のレイアウト（TOPのファーストビューなど）
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP ─ ファーストビュー
   実写（自然光の部屋で調律するグランドピアノ職人の後ろ姿）の上にテキストを重ねる構成。
   可読性は「文字に装飾を足す」のではなく「写真側をごくわずかに明るく整える」方法で
   確保しています。写真そのものの雰囲気を壊さないよう、ベールは薄く留めています。
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* 写真の縦横比（16:9）に近い高さを保ち、どの幅でも構図が崩れないようにする */
  min-height: clamp(31.25rem, 54vw, 48.75rem);
  padding-block: clamp(2.5rem, 3.6vw, 3.5rem);
  background-color: var(--color-ivory);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 被写体の位置調整はこの変数だけで完結します（写真差し替え時の微調整用）。
     x: right固定＝人物とピアノを常に画面右側へ残す。
     y: 22%＝頭部に十分な余白を残しつつ、足元側から詰める。 */
  --hero-photo-focus: right 22%;
  object-position: var(--hero-photo-focus);
  /* 写真自体はほぼ無加工。サイト全体のアイボリー基調に馴染ませる、ごく控えめな補正のみ。 */
  filter: brightness(1.04) saturate(0.96);
  /* 横方向にごくわずかだけ拡大し、左端を基準に右へ流す。
     ピアノの奥（右端）が数%切れる代わりに、人物の頭が文字の右端から離れ、
     文字と髪が重ならないようにするための調整（人物・ピアノの拡大率自体は変えていません）。 */
  transform: scaleX(1.17);
  transform-origin: left center;
}
/* 文字側を明るく整えるベール。写真そのものの調子を活かすため、
   ハイライト部分（カーテン・窓）は元々明るいので、ベールは左に寄せて薄くかける。
   写真を差し替えて全体が暗い場合は、各stopの数値を底上げしてください。 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 左側（文字が乗る範囲）だけ白みを少し強めて可読性を補い、
     46%以降（被写体側）は従来のまま変更していない。 */
  background: linear-gradient(
    92deg,
    rgba(246, 241, 231, 0.78) 0%,
    rgba(246, 241, 231, 0.72) 16%,
    rgba(246, 241, 231, 0.54) 32%,
    rgba(246, 241, 231, 0.26) 46%,
    rgba(246, 241, 231, 0.10) 60%,
    rgba(246, 241, 231, 0) 74%
  );
}

.hero__inner { position: relative; }

.hero__body { max-width: 60rem; }

/* 所在地＋業種（専門性と地域を短く示す） */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: -22px; /* PC専用：-15px→-22px（さらに7px上へ） */
  font-size: var(--fs-xsmall);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-wood);
}
.hero__eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background-color: var(--color-wood-soft);
}
/* 「ピアノ」の字間と、「・」の前後だけを詰める（.hero__eyebrowはflexのため、
   テキスト全体を1つのspanにまとめてから内部でカーニングする） */
.hero__eyebrow-word { letter-spacing: -0.5px; }
.hero__eyebrow-dot { margin-left: -0.5px; letter-spacing: -0.5px; }

/* メインキャッチ
   ・font-feature-settings: "palt" で日本語の字間を自然に詰める
   ・letter-spacing で詰めすぎを戻し、大きくしても窮屈に見せない */
.hero__title {
  margin-top: -5.08px; /* PC専用：3.92px→-5.08px（さらに9px上へ） */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.625rem, 7.875vw, 7.0875rem); /* PC専用：108px→113.4px（現状比105%）。1024px以下の別clampは変更していない */
  line-height: 1.32;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  color: #232c28;
  /* 1行目「ピアノの音を」だけを、2行目「心地よく整える」の左端と視覚的に揃うよう
     左へ。text-indentは強制改行（<br>）後の行には適用されないため、1行目にだけ効く。
     「ピ」と「心」は字面（グリフ内の余白）が異なり、ボックスの左端は同じでも
     視覚的には「ピ」が14px（108px時）ほど右から始まって見えるため、
     Canvasでグリフのインク開始位置を実測して値を決めている。 */
  text-indent: -0.13em;
  /* ごく薄い白の光彩。装飾ではなく、写真の上でも文字を読みやすくするための補助。
     不透明度を上げすぎない・ぼかしを詰めすぎないことで「光っている」と気づかれない強さに留める。
     （元は 0.5/0.3/0.15・2px/10px/20px → 0.58/0.38/0.2・3px/12px/24px から、あと一段強めている） */
  text-shadow:
    0 0 4px rgba(255, 253, 246, 0.66),
    0 0 14px rgba(255, 253, 246, 0.46),
    0 0 28px rgba(255, 253, 246, 0.26),
    /* PC専用：既存の光彩は削除せず、さらにごく薄く・ふんわり広がる層を追加 */
    0 0 44px rgba(255, 253, 246, 0.14);
}
/* 助詞（の／を）：サイズのみ70%に。色は通常文字（親のcolor）を継承する。
   フォントの都合上、font-sizeを下げるとブラウザの基準線計算がわずかにズレて
   浮いて見えるため、vertical-alignで基準線を合わせている（数値は実測して調整）。 */
.hero__title-particle {
  font-size: 0.7em;
  vertical-align: -0.119em;
}
/* 【調整中・未確定】letter-spacingではなくmargin-leftで直接、対象文字だけを動かす方式。
   1440pxで見比べながら、まず変化が明確に分かる強さまで動かした状態。最終値ではない。 */
/* 「アノ」：ノを左へ（-6px→-9px、現在値からさらに3px詰めた） */
.hero__title-no { margin-left: -9px; }
/* 「ノの」：のを左へ（-6px→-9px、現在値からさらに3px詰めた） */
.hero__title-particle--no { margin-left: -9px; }
/* 「を」だけ基準の位置から少し上へ（の のアンダー位置と揃うよう実測して調整） */
.hero__title-particle--wo { vertical-align: -0.08em; }

.hero__title-green { color: var(--color-green); }
/* 「心地」：地を右へ（8px→11px、現在値からさらに3px広げた。PC専用値） */
.hero__title-chi { margin-left: 11px; }
/* 「よく」：くを左へ */
.hero__title-ku { margin-left: -4px; }
/* 「整え」：えを右へ */
.hero__title-e { margin-left: 5px; }

/* 白い光彩（親から継承）のみ。黒縁取りは可読性への効果より
   「影が付いて見える」印象が強く出たため、色を一段濃くする方向に戻した。 */
.hero__title-brown {
  color: var(--color-gold-brown);
  /* PC専用：「音」「整える」だけ、親から継承する光彩に加えてもう一段ふんわり強化する。
     既存の4層はそのまま維持し、さらに柔らかく広がる層を追加している。 */
  text-shadow:
    0 0 4px rgba(255, 253, 246, 0.66),
    0 0 14px rgba(255, 253, 246, 0.46),
    0 0 28px rgba(255, 253, 246, 0.26),
    0 0 44px rgba(255, 253, 246, 0.14),
    0 0 60px rgba(255, 253, 246, 0.1),
    0 0 78px rgba(255, 253, 246, 0.08);
}
/* スマホ専用ハイライト演出のための複製オーバーレイ。PC・初期状態ともに
   display:noneで完全に無効化し、@media (max-width:600px)側でのみ有効化する。 */
.hero__title-shine {
  display: none;
}

.hero__lead {
  /* メインキャッチとの間の余白を広げる：40px→52px（約12px下へ）。PC専用の固定値に変更（元clamp(2rem,2.8vw,2.5rem)、最大値40pxから）。 */
  margin-top: 52px;
  /* 1.2倍サイズでも2文＝2行の構成を保つための最小限の拡張（元は34rem）。
     今回さらに文字サイズ105%・カーニング追加により2行目「はじめての方も、〜」の
     自然幅が実測638.23pxまで増えたため、40rem(640px)に再調整。
     スマホは@media (max-width:600px)側で36remに固定し直しているため影響しない。 */
  max-width: 40rem;
  font-size: calc(var(--fs-lead) * 1.2 * 1.05 * 1.05); /* 21.42px→22.491px（PC専用、さらに現状比105%） */
  font-weight: 400; /* 500→400（PC専用、可読性のため1段階だけ細く戻す） */
  line-height: 1.9;
  letter-spacing: 0; /* 文字種ごとの指定に置き換えるため、一律の字間はリセット */
  /* 濃いグレー〜チャコールグレー。メインキャッチの黒に近い色（#232c28）よりは弱いが、
     元の#4a4744より一段階読みやすいコントラストへ */
  color: #38352f;
  /* PC専用：既存の白い光彩は削除せず、さらにごく薄く・ふんわり広がる層を追加。文字色は変更していない。 */
  text-shadow:
    0 0 2px rgba(255, 253, 246, 0.55),
    0 0 8px rgba(255, 253, 246, 0.34),
    0 0 16px rgba(255, 253, 246, 0.16),
    0 0 30px rgba(255, 253, 246, 0.12);
}
/* PC専用のサブキャッチ個別カーニング（現在値からの相対調整）。
   これらのクラスはスマホ専用メディアクエリ内で別の値が定義されているが、
   ここではPCにのみ適用されるベース値として追加・更新している。 */
.hero__lead-ni-cho { margin-right: 1.2px; } /* 「に調」0.7px→1.2px（+0.5px） */
.hero__lead-o-ki { margin-right: 1.2px; }   /* 「お気」0.7px→1.2px（+0.5px） */
.hero__lead-go { margin-right: 1.2px; }     /* 「ご相」0.7px→1.2px（+0.5px） */
.hero__lead-ho { margin-right: -0.5px; }    /* 「方も」0px→-0.5px（PC新規） */
.hero__lead-dan-ku { margin-right: -0.5px; } /* 「談く」（「相→く」）0px→-0.5px（PC新規） */
.hero__lead-no-jo { margin-right: 0.5px; }  /* 「の状」0px→+0.5px（PC新規） */
.hero__lead-ki-karu { margin-right: 0.5px; } /* 「気軽」（「気→軽」）0px→+0.5px（PC新規） */
.hero__lead-i-maru { margin-right: 1px; }   /* 「い→。」0px→+1px（PC新規） */

/* PC専用：サブキャッチ1文目「一台一台の状態に合わせて、丁寧に調律します。」の
   下だけに、極細の金茶ラインを一度だけ左→右へ伸ばす。スマホ版の.hero__lead-line2-glow
   と考え方は同じだが、こちらはPC専用span（.hero__lead-pc-line1）にのみ適用され、
   スマホ側の実装（幅・位置・色・タイミング等）には一切影響しない。 */
.hero__lead-pc-line1 {
  display: inline-block;
  position: relative;
}
.hero__lead-pc-line1::after {
  content: "";
  position: absolute;
  left: 0;
  /* line-height由来のline box下端ではなく、実測した文字グリフの実際の下端
     （wrapper自身のbottomから約9.8px上）を基準に算出。グリフ下端から約3pxの
     余白になるよう、正の値でbox内側へ持ち上げている。 */
  bottom: 6.8px;
  width: 97%; /* 90%→97%（1文全体の下線として自然に見える長さへ延長） */
  height: 1px;
  background: linear-gradient(90deg,
    rgba(122, 95, 61, 0) 0%,
    rgba(122, 95, 61, 0.6) 4%,
    rgba(122, 95, 61, 0.6) 96%,
    rgba(122, 95, 61, 0) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  animation: hero-lead-pc-line1-underline 1.45s cubic-bezier(0.22, 1, 0.36, 1) 2.9s forwards;
}
@keyframes hero-lead-pc-line1-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* スマホ表示時のみ改行位置を指定するための<br>。PC表示では常に非表示（＝PC側の改行に影響しない）。
   表示切り替えは @media (max-width: 600px) 側で行う。 */
.hero__lead-break-mobile { display: none; }
/* スマホ表示時のみ「心地よく」と「整える」の間で改行するための<br>。PC表示では常に非表示。 */
.hero__title-break-mobile { display: none; }

/* スマホ専用の改行制御用<br>群。PC表示では常に非表示（＝PC側の改行・文章には一切影響しない）。
   表示切り替えは @media (max-width: 600px) 側で行う。 */
.price-lead-break-mobile,
.contact-lead-break-mobile,
.worry-note-break-mobile,
.symptom-lead-break-mobile,
.repair-note-break-mobile,
.page-hero__lead-fv-break,
.profile-hero__lead-break-mobile,
.maker-lead-break-mobile,
.flow-lead-break-mobile,
.price-hero-lead-break-mobile,
.price-tuning-lead-break-mobile,
.price-repair-lead-break-mobile,
.about-fv-lead-break-mobile,
.tuning-fv-lead-break-mobile,
.maker-note-break-mobile,
.message-note-break-mobile,
.profile-role-break-mobile,
.form-hint-break-mobile,
.form-hint2-break-mobile,
.frequency-note-break-mobile,
.care-title-break-mobile,
.service-tuning-break-mobile,
.service-repair-break-mobile,
.works-note-break-mobile,
.reason1-text-break-mobile,
.reason2-text-break-mobile,
.tuner-teaser-break-mobile {
  display: none;
}

/* サブキャッチのカーニング（文字種別）。ひらがな・カタカナ・記号などその他は現状維持。 */
.hero__lead-hira { letter-spacing: -0.3px; }
/* 漢字はひらがなより字面が詰まって見えるため、+1pxでひらがなと視覚的に揃えている（1440pxで確認のうえ決定） */
.hero__lead-kanji { letter-spacing: 2.5px; }
/* 「、」の直後だけ-1.5px（1440pxで確認のうえ決定） */
.hero__lead-comma { letter-spacing: -5.3px; } /* -4px→-4.5px→-5.3px（PC専用。「、丁」「、気」をさらに詰める） */

/* CTA（ボタン自体のサイズ・色・内部余白・矢印は変更せず、
   サブキャッチとの間の余白だけを少し広げてボタン位置を下げている。
   元は clamp(1.75rem, 2.4vw, 2.25rem)） */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: clamp(2.25rem, 2.9vw, 2.75rem);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  min-height: 64px;
  padding: 0 2.4em;
  border-radius: 3px;
  background-color: var(--color-green);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 12px 26px -18px rgba(34, 58, 48, 0.9);
  transition: background-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.hero__cta:hover {
  background-color: var(--color-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -18px rgba(34, 58, 48, 0.95);
}
/* ボタン内テキストのカーニング（.hero__ctaはinline-flexのため、
   テキスト全体を1つのspanにまとめてから内部で指定する。矢印側の並びには影響しない） */
.hero__cta-word { letter-spacing: 2px; }
.hero__cta-dot { margin-left: -0.5px; letter-spacing: -0.5px; }

.hero__cta-arrow {
  font-family: var(--font-en);
  font-size: 0.875em;
  opacity: 0.85;
  transition: transform var(--transition);
}
/* PC版のみ：ホバー時に矢印だけごくわずかに右へ。既存の色・背景・シャドー設計は変更していない。 */
.hero__cta:hover .hero__cta-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   TOP ─ ヒーロー登場アニメーション
   ページを開いた瞬間の第一印象だけを対象にした、控えめな一回限りの初動演出。
   背景→エリア表記→メインキャッチ（2ブロック）→サブキャッチ→CTAの順に、
   ごく短い時間差でフェードイン/フェードアップさせる。
   文字内容・改行・カーニング・色・レイアウト・余白は一切変更していない
   （.hero__title-block--1/--2は既存の改行・文字spanをそのまま包むラッパーのみ追加）。
   数値は.heroスコープのCSS変数にまとめ、スマホ幅では@media側で上書きしてテンポと
   移動量をPCよりひかえめにしている。 */
.hero {
  /* 背景：opacityは素早く見せ、scaleだけ長くゆっくり収束させる（2つの別アニメーションに分離） */
  --hero-intro-bg-fade-dur: 1.1s;
  --hero-intro-bg-dur: 9s;
  --hero-intro-bg-scale-from: 1.048;
  --hero-intro-bg-zoom-easing: cubic-bezier(0.4, 0, 0.6, 1);
  --hero-intro-line-delay: 0.15s;
  --hero-intro-line-dur: 0.5s;
  --hero-intro-eyebrow-delay: 0.3s;
  --hero-intro-eyebrow-dur: 0.5s;
  --hero-intro-eyebrow-y: 3px;
  /* メインキャッチ：マスク開示（clip-path）＋フェード。1行目をしっかり見せてから2行目が続く。
     2行目には「整える」の余韻を持たせるため、1行目よりわずかに長い。 */
  --hero-intro-title1-delay: 0.68s;
  --hero-intro-title1-dur: 1.1s;
  --hero-intro-title2-delay: 1.1s;
  --hero-intro-title2-dur: 1.25s;
  /* 「音を」「整える」：2行目の開示が完了してから少し間を空けて、ゆっくり立ち上がりゆっくり消える白い霞。
     文字の形に沿って光らせるため、別レイヤー（矩形になり得る）ではなくfilter: drop-shadow()の
     3層（近・中・遠）で実装している。各層のピーク不透明度をPC/スマホで個別に設定する。 */
  --hero-intro-glow-delay: 2.6s;
  --hero-intro-glow-dur: 1.7s;
  --hero-intro-glow-a1: 0.95;
  --hero-intro-glow-a2: 1;
  --hero-intro-glow-a3: 0.65;
  --hero-intro-glow-b1: 3.5px;
  --hero-intro-glow-b2: 28px;
  --hero-intro-glow-b3: 55px;
  --hero-intro-lead-delay: 1.9s;
  --hero-intro-lead-dur: 0.6s;
  --hero-intro-lead-y: 4px;
  --hero-intro-cta-delay: 2.2s;
  --hero-intro-cta-dur: 0.5s;
  --hero-intro-cta-y: 5px;
  /* マスク領域の左側に確保する安全マージン（clip-pathの左insetに使用）。
     text-indent等により「ピ」「心」の実際のグリフが要素自身の左端よりも左へはみ出して
     描画されるため、0だと見切れる。左端の値だけ常に一定（アニメーションでは動かさない）。 */
  --hero-intro-mask-left-safe: -20px;
}

@keyframes hero-intro-bg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-intro-bg-zoom {
  from { transform: scale(var(--hero-intro-bg-scale-from)); }
  to   { transform: scale(1); }
}
/* スマホ版ヒーロー背景専用：引き→寄りがはっきり分かるよう、終了scaleを
   1（PC/従来の中立値）より少しだけ寄せる。PC側のhero-intro-bg-zoomは
   変更していない。 */
@keyframes hero-intro-bg-zoom-mobile {
  from { transform: scale(var(--hero-intro-bg-scale-from)); }
  to   { transform: scale(1.08); }
}
@keyframes hero-intro-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes hero-intro-fade-up {
  from { opacity: 0; transform: translateY(var(--hero-intro-y, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}
/* メインキャッチ：左→右にマスクが退きながら文字が静かに浮かび上がる（マスク自体は透明＝clip-pathのみ）。
   左insetは常に--hero-intro-mask-left-safeで固定し、右insetだけを100%→0%へ動かす。 */
@keyframes hero-intro-mask-reveal {
  from { clip-path: inset(0 100% 0 var(--hero-intro-mask-left-safe)); opacity: 0; }
  to   { clip-path: inset(0 0% 0 var(--hero-intro-mask-left-safe)); opacity: 1; }
}
/* 「音を」「整える」の白い霞。既存のtext-shadowには一切触れず、
   filter: drop-shadow()を文字そのものに重ねる（文字の形に沿って光るため、
   矩形の別レイヤーにならない）。近距離・中距離・遠距離の3層。
   0→32%でゆっくり見え始め、60%でピーク、72%までピーク付近を維持し、その後ゆっくり消える。 */
@keyframes hero-intro-glow {
  0% {
    filter:
      drop-shadow(0 0 var(--hero-intro-glow-b1) rgba(255, 253, 246, 0))
      drop-shadow(0 0 var(--hero-intro-glow-b2) rgba(255, 250, 240, 0))
      drop-shadow(0 0 var(--hero-intro-glow-b3) rgba(255, 250, 240, 0));
  }
  32% {
    filter:
      drop-shadow(0 0 var(--hero-intro-glow-b1) rgba(255, 253, 246, calc(var(--hero-intro-glow-a1) * 0.26)))
      drop-shadow(0 0 var(--hero-intro-glow-b2) rgba(255, 250, 240, calc(var(--hero-intro-glow-a2) * 0.26)))
      drop-shadow(0 0 var(--hero-intro-glow-b3) rgba(255, 250, 240, calc(var(--hero-intro-glow-a3) * 0.26)));
  }
  58%, 78% {
    filter:
      drop-shadow(0 0 var(--hero-intro-glow-b1) rgba(255, 253, 246, var(--hero-intro-glow-a1)))
      drop-shadow(0 0 var(--hero-intro-glow-b2) rgba(255, 250, 240, var(--hero-intro-glow-a2)))
      drop-shadow(0 0 var(--hero-intro-glow-b3) rgba(255, 250, 240, var(--hero-intro-glow-a3)));
  }
  100% {
    filter:
      drop-shadow(0 0 var(--hero-intro-glow-b1) rgba(255, 253, 246, 0))
      drop-shadow(0 0 var(--hero-intro-glow-b2) rgba(255, 250, 240, 0))
      drop-shadow(0 0 var(--hero-intro-glow-b3) rgba(255, 250, 240, 0));
  }
}
@keyframes hero-intro-shadow {
  from { box-shadow: 0 12px 26px -18px rgba(34, 58, 48, 0); }
  to   { box-shadow: 0 12px 26px -18px rgba(34, 58, 48, 0.9); }
}
/* スマホ専用：発光（filter/text-shadow方式）を廃止し、文字内部だけを薄いハイライトが
   一度だけ左→右へ通過する演出に変更。background-clip: textで、グラデーションを
   グリフの内側だけに閉じ込めているため、背景側に矩形や白い面が漏れることはない。 */
/* animation自体はlinearのまま、キーフレームの区間ごとの移動量を変えることで
   「ゆっくり入る→中央付近で少し留まる→ゆっくり抜ける」進み方を作っている。 */
@keyframes hero-intro-mobile-shine {
  0%   { background-position: 85% 0, 0 0; }
  20%  { background-position: 75% 0, 0 0; }
  40%  { background-position: 53% 0, 0 0; }
  50%  { background-position: 50% 0, 0 0; }
  62%  { background-position: 47% 0, 0 0; }
  82%  { background-position: 25% 0, 0 0; }
  100% { background-position: 15% 0, 0 0; }
}
/* スマホ専用：「整える」だけに付ける、ごく弱いscale収束。中心基準でわずかに拡大縮小する
   単純な動きのため、開始・終了とも文字の見た目の位置は変わらない（0%/100%とも
   scale(1)＝無変形のため、アニメーション前後で自動的に元の位置に一致する）。
   前半0%→45%は中間keyframeを置かず、1つのcubic-bezierだけで連続補間する
   （以前は26%に中間scaleを置いていたため、そこで速度の継ぎ目ができ「ど、ど」と
   2段階に見えていた。継ぎ目そのものをなくすことで解消している）。
   45%〜55%は最大scale(1.04)付近での滞在、55%→100%は元のサイズへの収束。 */
@keyframes hero-intro-mobile-converge {
  0%   { transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  45%  { transform: scale(1.06); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55%  { transform: scale(1.06); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { transform: scale(1); }
}
/* スマホ専用：「心地よく」の補助的な登場演出。位置はわずかに下（4px）から本来の位置へ、
   opacityは0→1へ。拡大縮小・発光は含まない、静かなfade+settleのみ。 */
@keyframes hero-intro-green-settle {
  from { opacity: 0.45; top: 3px; }
  to   { opacity: 1; top: 0; }
}

/* TOPヒーロー初回アクセス時の表示崩れ対策。
   原因調査の結果、Webフォント（Jost/Noto Sans JP/Noto Serif JP、display:swap）が
   未読み込みの状態でヒーローの登場アニメーション（animation-delayによる固定タイマー
   駆動）が開始・進行してしまうと、フォールバックフォントの字形幅で計算された
   状態のままアニメーションが進み、実フォントへの差し替わり時に見た目の寸法が
   ずれる（サイト内遷移でTOPへ戻る場合はフォントが既にキャッシュ済みのため
   発生しない）。アニメーション自体（keyframes・duration・delay・easing）は
   一切変更せず、開始タイミングだけをフォント確定後へ遅らせるため、
   .is-hero-ready が付与されるまでヒーロー内の全アニメーションを
   「開始前（fromキーフレーム）」の状態で一時停止しておく。
   .is-hero-readyの付与はJS側（フォント確定後、または安全のためのタイムアウト
   後）で行う。スクロール処理・scrollToとは無関係の、別の仕組みで対応している。 */
.hero:not(.is-hero-ready) * {
  animation-play-state: paused;
}

.hero__bg {
  opacity: 0;
  transform: scale(var(--hero-intro-bg-scale-from));
  animation:
    hero-intro-bg-fade var(--hero-intro-bg-fade-dur) ease-out forwards,
    hero-intro-bg-zoom var(--hero-intro-bg-dur) var(--hero-intro-bg-zoom-easing) forwards;
}
.hero__eyebrow::before {
  transform-origin: left center;
  transform: scaleX(0);
  animation: hero-intro-line var(--hero-intro-line-dur) ease-out var(--hero-intro-line-delay) forwards;
}
.hero__eyebrow-text {
  --hero-intro-y: var(--hero-intro-eyebrow-y);
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--hero-intro-eyebrow-y));
  animation: hero-intro-fade-up var(--hero-intro-eyebrow-dur) ease-out var(--hero-intro-eyebrow-delay) forwards;
}
.hero__title-block--1 {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% 0 var(--hero-intro-mask-left-safe));
  animation: hero-intro-mask-reveal var(--hero-intro-title1-dur) cubic-bezier(0.7, 0, 0.3, 1) var(--hero-intro-title1-delay) forwards;
}
.hero__title-block--2 {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% 0 var(--hero-intro-mask-left-safe));
  animation: hero-intro-mask-reveal var(--hero-intro-title2-dur) cubic-bezier(0.7, 0, 0.3, 1) var(--hero-intro-title2-delay) forwards;
}
/* 「音」「を」「整える」だけに白い霞を重ねる。既存の色・text-shadowは変更しない
   （filter: drop-shadow()はtext-shadowとは別プロパティのため、既存の光彩に一切干渉しない）。
   別レイヤー（矩形の疑似要素）を使わないため、.hero__title-block--1/2のclip-pathに
   よって矩形に切り取られる問題が起きない。アニメーション終了後（forwardsなし）は
   自動的にfilter未指定の状態へ戻り、既存のtext-shadowだけが残る。 */
.hero__title-block--1 .hero__title-brown,
.hero__title-block--1 .hero__title-particle--wo,
.hero__title-block--2 .hero__title-brown {
  animation: hero-intro-glow var(--hero-intro-glow-dur) linear var(--hero-intro-glow-delay);
}
/* フェードアップの対象は.hero__lead自体ではなく内側のhero__lead-innerにする。
   .hero__lead自身はスマホ版::before（人物ぼかしの静的レイヤー）のホストのため、
   opacityを0→1でアニメーションさせると::beforeの見え方までフェード（親のopacityは
   子孫要素の描画全体に乗算されるため）してしまい、「人物ぼかしが時間差で現れる」
   状態になる。テキスト側だけを別要素でフェードさせることで、ぼかしは常に静的にする。 */
.hero__lead {
  position: relative;
}
.hero__lead-inner {
  --hero-intro-y: var(--hero-intro-lead-y);
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--hero-intro-lead-y));
  animation: hero-intro-fade-up var(--hero-intro-lead-dur) ease-out var(--hero-intro-lead-delay) forwards;
}
/* スマホ専用のサブキャッチ文言（.hero__lead-inner--mobile）はPCでは常に非表示にし、
   PC専用文言（.hero__lead-inner--pc）はそのまま維持する。アニメーション自体は
   共通の.hero__lead-innerクラスにすでに定義済みのため、変更していない。 */
.hero__lead-inner--mobile {
  display: none;
}
/* .hero__actionsは今回からアニメーション対象にしない（スマホ::beforeのホストのため）。
   代わりに実際のボタン（.hero__cta）自体をフェードアップさせる。
   .hero__actionsにはCTA以外の兄弟要素がないため、見え方は従来と同じになる。 */
.hero__actions {
  position: relative;
}
.hero__cta {
  --hero-intro-y: var(--hero-intro-cta-y);
  opacity: 0;
  transform: translateY(var(--hero-intro-cta-y));
  /* 通常時のbox-shadowは既存値のまま。表示直後だけ0から立ち上がらせる。 */
  animation:
    hero-intro-fade-up var(--hero-intro-cta-dur) ease-out var(--hero-intro-cta-delay) forwards,
    hero-intro-shadow var(--hero-intro-cta-dur) ease-out var(--hero-intro-cta-delay) forwards;
}

/* 動きに敏感なユーザーへの配慮：背景ズーム・マスク移動・白い霞は無効化し、単純なフェードのみにする。 */
@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .hero__eyebrow::before,
  .hero__eyebrow-text,
  .hero__lead-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__title-block--1,
  .hero__title-block--2 {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
  .hero__title-block--1 .hero__title-brown,
  .hero__title-block--1 .hero__title-particle--wo,
  .hero__title-block--2 .hero__title-brown {
    animation: none;
    filter: none;
    transform: none;
  }
  .hero__title-shine {
    animation: none;
  }
  .hero__title-green {
    animation: none;
    opacity: 1;
    top: 0;
  }
  .hero__lead-line2-glow::after {
    animation: none;
    transform: scaleX(1);
  }
  .hero__lead-pc-line1::after {
    animation: none;
    transform: scaleX(1);
  }
  .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
    box-shadow: 0 12px 26px -18px rgba(34, 58, 48, 0.9);
  }
}

.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(47, 74, 63, 0.3);
  font-size: 0.9375rem;
  color: var(--color-green);
}
.hero__link:hover { border-bottom-color: currentColor; }

.hero__note {
  margin-top: var(--space-sm);
  font-size: var(--fs-xsmall);
  color: var(--color-green-muted);
}
.hero__note a {
  border-bottom: 1px solid var(--color-wood-soft);
  color: var(--color-wood);
}
.hero__note a:hover { color: var(--color-green-dark); }

/* 事務所名・調律技師名・所属（1行にまとめて、圧迫感を出さない） */
.hero__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: clamp(1.5rem, 2vw, 1.875rem);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-ivory-line);
  max-width: 44rem;
}
.hero__identity-name {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: #3b4742;
}
/* ファーストビューでは所属バッジもアイボリーに合わせる */
.hero .assoc {
  background-color: transparent;
  border-color: var(--color-wood-soft);
  color: var(--color-green);
}
.hero .assoc::before { background-color: var(--color-wood); }

/* ファーストビュー下の安心材料（アイボリーに合わせて調整） */
.hero-points {
  border-top: 1px solid var(--color-ivory-line);
  border-bottom: 1px solid var(--color-ivory-line);
  background-color: var(--color-ivory);
}
.hero-points__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.hero-points__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-ink);
  text-align: center;
}
.hero-points__item::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-wood-soft);
}
.hero-points__item + .hero-points__item {
  border-left: 1px solid var(--color-ivory-line);
}

/* --------------------------------------------------------------------------
   TOP ─ 相談ハードルを下げる導入セクション
   -------------------------------------------------------------------------- */
.intro-message {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.intro-message__title {
  font-size: var(--fs-h2);
  line-height: 1.7;
  letter-spacing: 0.10em;
}
/* スマホ幅では「こんなお悩み、ありませんか？」が1行に収まらず、
   「か？」の2文字だけ次行へ孤立するため、読点の位置で改行位置を補う。
   PC表示では常に非表示（＝PC側の改行に影響しない）。 */
.worry-title-break-mobile { display: none; }
.intro-message__text {
  max-width: 38rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--fs-lead);
  text-align: center; /* Messageエリア内はすべて中央揃え（このクラス内だけの指定） */
}
/* Messageメイン見出し／本文：PC・スマホで行数と改行位置を完全固定するための構造。
   PC用（.im-set--pc）とスマホ用（.im-set--sp）を別々に用意し、各行を
   display:block; white-space:nowrap; にすることでブラウザによる途中折り返しを禁止する。
   表示するセットだけをメディアクエリで切り替える（テキスト内容自体は変更していない）。 */
.im-set { display: block; }
.im-line { display: block; white-space: nowrap; }
.im-set--sp { display: none; }
.intro-message__sign {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
/* スマホ：屋号＋氏名をPC表示ではそのまま1行、スマホでは2行に分ける改行。 */
.intro-message__sign-break-mobile { display: none; }

/* --------------------------------------------------------------------------
   TOP ─ 調律師紹介
   -------------------------------------------------------------------------- */
.profile__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
}
.profile__role {
  font-family: var(--font-sans);
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   下層ページ ─ 記事本文の基本形
   -------------------------------------------------------------------------- */
.prose > * + * { margin-top: var(--space-md); }
.prose h3 {
  margin-top: var(--space-xl);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}
.prose h4 { margin-top: var(--space-lg); }
.prose ul { margin-top: var(--space-sm); }

/* 目次（下層ページ） */
.toc {
  padding: var(--space-lg);
  background-color: var(--color-base-subtle);
  border-radius: var(--radius-md);
}
.toc__title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-en);
  font-size: var(--fs-xsmall);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.toc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-2xs) var(--space-lg);
  font-size: var(--fs-small);
}
.toc__list a { border-bottom: 1px solid transparent; }
.toc__list a:hover {
  color: var(--color-accent-dark);
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   調律師についてページ ─ プロフィール表・経歴
   -------------------------------------------------------------------------- */
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.profile-hero__body > * + * { margin-top: var(--space-md); }
.profile-hero__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.8;
  color: var(--color-text-strong);
}

/* 調律師の氏名ブロック */
.tuner-name {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-ivory-line);
}
.tuner-name > * + * { margin-top: var(--space-xs); }
.tuner-name__role {
  font-size: var(--fs-xsmall);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.tuner-name__ja {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--color-text-strong);
}

.history {
  display: grid;
  gap: 0;
}
.history__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
}
.history__item:first-child { border-top: 1px solid var(--color-border); }
.history__year {
  font-family: var(--font-en);
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   料金ページ
   -------------------------------------------------------------------------- */
.price-note {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(38, 48, 44, 0.035);
  font-size: var(--fs-small);
}
.price-note__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
  letter-spacing: 0.10em;
}
@media (max-width: 600px) {
  /* 「追加費用は事前にご説明します」の「ます」だけ孤立して2行目に落ちるため、この見出しだけ字間を少し詰める */
  #notes .price-note:nth-of-type(2) .price-note__title {
    letter-spacing: 0.06em;
  }
}

/* --------------------------------------------------------------------------
   お問い合わせページ
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}
.contact-aside { display: grid; gap: var(--space-lg); }

/* ==========================================================================
   下層ページ（調律について／修理・メンテナンス／料金案内／調律師について／
   お問い合わせ）─ TOPページで確立したアイボリー×深緑×金茶×墨色の世界観を
   FVより下に展開する。対象は body.page-tuning / .page-repair / .page-price /
   .page-about / .page-contact に限定しており、TOPページ（body.page-home）や
   FVには一切影響しない。文字・下線アニメーションは今回追加せず、色・shadow・
   border・radius・hover・余白のみを調整する。
   ========================================================================== */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) {
  --sub-shadow-1: 0 4px 14px rgba(38, 48, 44, 0.035);
  --sub-shadow-1-hover: 0 6px 18px rgba(38, 48, 44, 0.05);
  --sub-shadow-2: 0 8px 24px rgba(30, 35, 32, 0.06);
}

/* --------------------------------------------------------------------------
   カード共通（対応内容カード／説明ブロック）：白背景＋薄い金茶border＋
   ごく薄いshadowのLevel1に統一。サイドの情報パネルはさらに一段静かに
   （border主体・shadowなし）して、主役カードと役割を分ける。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .def-list__item {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  box-shadow: var(--sub-shadow-1);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card:hover {
  border-color: var(--color-wood-soft);
  box-shadow: var(--sub-shadow-1-hover);
  transform: translateY(-2px);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card__title,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .def-list__term {
  font-family: var(--font-serif);
  color: var(--color-ink);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card__icon {
  background-color: var(--color-ivory);
  color: var(--color-green);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .info-panel {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .info-panel__title {
  color: var(--color-ink);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .info-panel__tel,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .contact-list__tel {
  color: var(--color-wood);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) a.contact-list__tel:hover {
  color: var(--color-green-dark);
}

/* --------------------------------------------------------------------------
   症状・悩みリスト（TOPの.worry-list__itemと同じ役割・同じ強さ）：
   常時shadowなし、hoverでのみごく軽く浮く。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .worry-list__item {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color var(--transition), transform var(--transition);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .worry-list__item::before {
  background-color: var(--color-wood);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .worry-list__item:hover {
  border-color: var(--color-wood-soft);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   REASON相当のカード（大切にしている3つのこと）：TOPの.reasonと同じ
   Level2の強さで、ページ内の主役カードとして少し存在感を持たせる。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason {
  padding: clamp(2.25rem, 3vw, 2.75rem) clamp(1.75rem, 2.4vw, 2.25rem) clamp(2rem, 2.8vw, 2.5rem);
  background-color: #fdfbf6;
  border: 1px solid var(--color-ivory-line);
  border-radius: 14px;
  box-shadow: var(--sub-shadow-2);
  transition: border-color var(--transition);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason:hover {
  border-color: var(--color-wood-soft);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason__num {
  color: var(--color-wood);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason__num::after {
  background-color: var(--color-ivory-line);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason__title {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   FAQ：TOPと同じトーン。開いたときだけごく薄いshadowで面が浮く。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__item {
  background-color: #fff;
  border-color: var(--color-ivory-line);
  border-radius: 10px;
  transition: border-color var(--transition);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__item:hover {
  border-color: var(--color-wood-soft);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__item[open] {
  border-color: var(--color-wood-soft);
  box-shadow: 0 8px 24px rgba(38, 48, 44, 0.05);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__q {
  color: var(--color-ink);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__q::before {
  color: var(--color-green);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__q::after {
  border-color: var(--color-wood-soft);
}

/* --------------------------------------------------------------------------
   対応メーカー：グレー罫線→金茶系の細い区切り線へ。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .brand-list {
  border-color: var(--color-ivory-line);
  background-color: var(--color-ivory-line);
  border-radius: 10px;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .brand-list__item {
  background-color: #fff;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .brand-list__name {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   テーブル（料金表・プロフィール表）：見出し行と罫線を金茶系トーンへ。
   構造（列幅・display:block変換等）はページごとの既存指定を維持する。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .table thead th {
  background-color: var(--color-ivory);
  border-bottom-color: var(--color-wood-soft);
  color: var(--color-ink);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .table th,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .table td {
  border-bottom-color: var(--color-ivory-line);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .table tbody th,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .table td.is-price {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   フォーム：入力欄の罫線とfocusをTOPと同じ金茶／深緑トーンへ。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__input,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__select,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__textarea {
  background-color: #fff;
  border-color: var(--color-ivory-line);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__input:focus,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__select:focus,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__textarea:focus {
  border-color: var(--color-green);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__privacy {
  background-color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   CTAボタン・リンク：既定のチャコールから、TOPと同じ深緑トーンへ。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .button--primary,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__submit {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .button--primary:hover,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .form__submit:hover {
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .link-arrow {
  color: var(--color-wood);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .link-arrow:hover {
  color: var(--color-green-dark);
}

/* --------------------------------------------------------------------------
   注記ボックス・経歴リスト：グレー罫線→金茶系へ。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .note-box {
  border-color: var(--color-ivory-line);
  box-shadow: 0 8px 24px rgba(38, 48, 44, 0.04);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .history__item,
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .history__item:first-child {
  border-color: var(--color-ivory-line);
}

/* --------------------------------------------------------------------------
   FLOW（当日の流れ／修理の流れ）：TOPと同じ「線で流れを見せる」静止構造の
   ままとし、罫線・番号・見出しの色だけを金茶×墨色トーンへ。今回はライン
   アニメーションを追加しない（TOPの縦横アニメーション線は移植しない）。
   -------------------------------------------------------------------------- */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .flow__item {
  border-top-color: var(--color-ivory-line);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .flow__item:last-child {
  border-bottom-color: var(--color-ivory-line);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .flow__num {
  color: var(--color-wood-soft);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .flow__title {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   調律についてページ固有：作業内容カード（調律／整調／整音）は、対応内容
   カードより少し専門的な見え方にするため、上端にごく細い金茶アクセントを
   添える（色は既存の--color-wood-soft、太さ2pxのみでshadowは増やさない）。
   -------------------------------------------------------------------------- */
.page-tuning .def-list__item {
  border-top: 2px solid var(--color-wood-soft);
}

@media (max-width: 600px) {
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .card:hover,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .def-list__item {
    box-shadow: 0 4px 14px rgba(38, 48, 44, 0.025);
    transform: none;
  }
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .reason:hover {
    box-shadow: 0 4px 14px rgba(30, 35, 32, 0.05);
  }
}

/* ==========================================================================
   下層ページ ─ FVより下のセクション見出し演出（小タイトル→大タイトル→ライン）。
   TOPページのタイトル下線（.section-title__text / .js-title-line）と同じ
   世界観・仕組み（左右insetによる実幅追従・scaleXアニメーション・一度だけ再生）
   を踏襲しつつ、下層ページ専用のクラス名（.sub-reveal / .sub-title）で実装し、
   TOP側のCSS・JSには一切触れない。FV・ヘッダーは対象外。
   ========================================================================== */
/* 小タイトル（英字ラベル）：静かなフェードアップのみ。ラインは付けない。 */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* 大タイトル（日本語見出し）：小タイトルより少し遅れてフェードアップし、
   直後にタイトル直下のラインが左→右へ伸びる。.sub-titleは日本語タイトル
   文字列（2行の場合は2行目）だけを囲むinline-blockとして扱い、その実幅の
   左右端から一定量内側に入った長さを::afterで自動算出する（固定pxや
   ％計算は使用しない）。 */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title.is-revealed {
  opacity: 1;
  transform: none;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  right: 10px;
  /* line-height由来の余白を差し引き、実際の文字の見た目下端から近い位置にする
     （TOPの.section-title__text／.media__titleと同じ実測補正値を踏襲）。 */
  margin-top: -4px;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.58;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.5s;
}
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title.is-revealed::after {
  transform: scaleX(1);
}
/* media__title（TUNER相当の写真＋テキスト構成）はフォントサイズが一段小さいため、
   縦距離の補正値だけ個別化する（TOPの#profile .section-title__textと同じ考え方）。 */
:is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .media__title .sub-title::after {
  margin-top: -1px;
}

@media (max-width: 600px) {
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title::after {
    left: 8px;
    right: 8px;
    margin-top: -2.5px;
  }
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .media__title .sub-title::after {
    margin-top: -0.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-reveal,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .sub-title::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   TOP ─ ヒーロー直下〜フッター直前のデザインシステム
   ヒーローで確立したアイボリー×深緑×ブラウン×チャコールの世界観を、
   TOPページ下部にも展開する。対象セクションのIDだけに限定して上書きしており、
   .section / .card などの共通クラス自体は変更していない（他ページには影響しない）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   セクション背景 ─ 白／グレーの骨組み感をなくし、ごく繊細な明度差で流れを作る
   -------------------------------------------------------------------------- */
.page-home #message  { background-color: #fbf9f4; }
.page-home #worry    { background-color: var(--color-ivory); border-top: 1px solid var(--color-ivory-line); }
.page-home #reason   { background-color: #fbf9f4; }
.page-home #service  { background-color: var(--color-ivory); border-top: 1px solid var(--color-ivory-line); }
.page-home #profile  { background-color: #fbf9f4; }
.page-home #price    { background-color: var(--color-ivory); border-top: 1px solid var(--color-ivory-line); }
.page-home #flow     { background-color: #fbf9f4; }
.page-home #faq      { background-color: var(--color-ivory); border-top: 1px solid var(--color-ivory-line); }
.page-home #contact  { background-color: #fbf9f4; }

/* --------------------------------------------------------------------------
   見出しシステム共通 ─ 英字ラベル＋短い木目色ライン＋明朝の日本語見出し
   （ヒーローのeyebrow「――― 東京都八王子市｜…」と同じ語法をTOP下部にも展開）
   -------------------------------------------------------------------------- */
.page-home #message .section-label,
.page-home #worry .section-label,
.page-home #reason .section-label,
.page-home #service .section-label,
.page-home #profile .section-label,
.page-home #price .section-label,
.page-home #flow .section-label,
.page-home #faq .section-label,
.page-home #contact .section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  color: var(--color-wood);
}
/* 英字ラベル左側の短線装飾はTOPページ内すべてで廃止し、英字のみで見せる。 */
.page-home #message .section-label,
.page-home #worry .section-label,
.page-home #reason .section-label,
.page-home #service .section-label,
.page-home #profile .section-label,
.page-home #price .section-label,
.page-home #flow .section-label,
.page-home #faq .section-label,
.page-home #contact .section-label {
  gap: 0;
}
.page-home #message .section-title,
.page-home #worry .section-title,
.page-home #reason .section-title,
.page-home #service .section-title,
.page-home #profile .media__title,
.page-home #price .section-title,
.page-home #flow .section-title,
.page-home #faq .section-title,
.page-home #contact .section-title {
  color: var(--color-ink);
}
.page-home #message .section-head,
.page-home #worry .section-head,
.page-home #reason .section-head,
.page-home #service .section-head,
.page-home #price .section-head,
.page-home #flow .section-head,
.page-home #faq .section-head,
.page-home #contact .section-head {
  margin-bottom: clamp(2.75rem, 4.5vw, 4rem);
}
.page-home #message .intro-message__text,
.page-home #worry .worry-list__item,
.page-home #reason .reason__text,
.page-home #service .card__text,
.page-home #profile .media__body,
.page-home #price .price-summary__sub-value,
.page-home #flow .flow__text,
.page-home #faq .faq__a,
.page-home #contact .section-lead {
  color: #4a4744; /* 本文はチャコールに温かみを少し足した色。既存var(--color-text)より馴染む */
}

/* --------------------------------------------------------------------------
   02. 導入メッセージ
   -------------------------------------------------------------------------- */
.page-home #message .intro-message__title { color: var(--color-ink); }
.page-home #message .intro-message__sign {
  position: relative;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  color: var(--color-green-muted);
}

/* --------------------------------------------------------------------------
   03. こんなお悩み、ありませんか？
   -------------------------------------------------------------------------- */
.page-home #worry .worry-list__item {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  box-shadow: none;
}
.page-home #worry .worry-list__item::before { background-color: var(--color-wood); }
.page-home #worry .note-box {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-top: 2px solid var(--color-green);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(38, 48, 44, 0.05);
}
.page-home #worry .button--primary {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.page-home #worry .button--primary:hover {
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

/* --------------------------------------------------------------------------
   04. 選ばれる3つの理由（信頼を伝えるブランドカード：番号を主役に、写真は使わない）
   サービス内容カードとは意図的に違う構成にしている
   （同じアイコン丸バッジ・同じシャドウの強さ・同じ見出し位置を踏襲しない）。
   -------------------------------------------------------------------------- */
.page-home #reason .reason-title-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--color-wood);
}
.page-home #reason .reason {
  padding: clamp(2.25rem, 3vw, 2.75rem) clamp(1.75rem, 2.4vw, 2.25rem) clamp(2rem, 2.8vw, 2.5rem);
  background-color: #fdfbf6;
  border: 1px solid var(--color-ivory-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(30, 35, 32, 0.06);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
/* hoverはカード全体を浮かせず、番号と細線だけが反応する（詳細は本ファイル末尾） */
.page-home #reason .reason:hover {
  border-color: var(--color-wood-soft);
}
.page-home #reason .reason__head {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  margin-bottom: var(--space-md);
}
.page-home #reason .reason__icon {
  display: inline-flex;
  flex: none;
  color: var(--color-wood-soft);
  opacity: 0.9;
}
.page-home #reason .reason__icon svg { width: 22px; height: 22px; }
.page-home #reason .reason__num {
  font-family: var(--font-en);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-wood);
  letter-spacing: 0.01em;
}
.page-home #reason .reason__num::after {
  width: 22px;
  background-color: var(--color-ivory-line);
}
/* ごく淡いリズムづけ：3枚目だけ番号とアクセント線を深緑に寄せる */
.page-home #reason .reason:nth-of-type(3) .reason__num { color: var(--color-green); }
.page-home #reason .reason:nth-of-type(3) .reason__icon { color: var(--color-green-muted); }
.page-home #reason .reason__title {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   05. サービス内容（主要カード：ごく薄い常時シャドウで1段だけ分離）
   -------------------------------------------------------------------------- */
.page-home #service .card {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  /* REASONの主役カード（0.06）より明確に軽く。border主体、影は添える程度に留める */
  box-shadow: 0 4px 14px rgba(38, 48, 44, 0.035);
}
/* hoverは大きなshadowを付けず、背景がごくわずかに温かくなる程度（詳細は本ファイル末尾） */
.page-home #service .card:hover {
  border-color: var(--color-wood-soft);
}
.page-home #service .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.2em;
  border-radius: 50%;
  background-color: var(--color-ivory);
  color: var(--color-green);
}
.page-home #service .card__icon svg { width: 20px; height: 20px; }
.page-home #service .card__title {
  font-family: var(--font-serif);
  color: var(--color-ink);
}
.page-home #service .link-arrow { color: var(--color-wood); }
.page-home #service .link-arrow:hover { color: var(--color-green-dark); }

/* --------------------------------------------------------------------------
   06. 調律師紹介
   -------------------------------------------------------------------------- */
.page-home #profile .media__figure {
  border-radius: 10px;
  border: 1px solid var(--color-ivory-line);
  overflow: hidden;
}
.page-home #profile .profile__name {
  border-top-color: var(--color-ivory-line);
  font-family: var(--font-serif);
  color: var(--color-ink);
}
.page-home #profile .assoc {
  border-color: var(--color-ivory-line);
  background-color: #fff;
}
.page-home #profile .assoc::before { background-color: var(--color-wood); }
.page-home #profile .link-arrow { color: var(--color-wood); }
.page-home #profile .link-arrow:hover { color: var(--color-green-dark); }

/* --------------------------------------------------------------------------
   07. 料金について（簡易料金案内：代表料金2つを主役に、補足3項目は静かに）
   -------------------------------------------------------------------------- */
.page-home #price .price-summary {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(38, 48, 44, 0.06);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: left;
}
.page-home #price .price-summary__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-ivory);
  color: var(--color-wood);
}
.page-home #price .price-summary__icon svg { width: 20px; height: 20px; }
.page-home #price .price-summary__heading {
  margin-bottom: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-ink);
}
.page-home #price .price-summary__item + .price-summary__item {
  margin-top: 20px;
}
.page-home #price .price-summary__label {
  margin-bottom: 3px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.page-home #price .price-summary__amount {
  font-family: var(--font-en);
  font-size: clamp(1.4rem, 1.7vw, 1.625rem); /* 本文比 約1.4〜1.65倍 */
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}
.page-home #price .price-summary__unit {
  margin-left: 0.3em;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-text-muted);
}
.page-home #price .price-summary__sub {
  margin-top: clamp(1.75rem, 4vw, 2rem);
  padding-top: clamp(1.75rem, 4vw, 2rem);
  border-top: 1px solid var(--color-ivory-line);
}
.page-home #price .price-summary__sub-item + .price-summary__sub-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(141, 124, 96, 0.3);
}
.page-home #price .price-summary__sub-label {
  margin-bottom: 2px;
  font-size: var(--fs-small);
  color: var(--color-wood);
}
.page-home #price .price-summary__sub-value {
  font-size: var(--fs-small);
}
.page-home #price .button--primary {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.page-home #price .button--primary:hover {
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}
.page-home #price .button--outline:hover { border-color: var(--color-green); color: var(--color-green-dark); }

/* --------------------------------------------------------------------------
   08. ご依頼の流れ（カード化せず、罫線区切りのタイムライン調のまま精度を上げる）
   -------------------------------------------------------------------------- */
.page-home #flow .flow__num { color: var(--color-wood-soft); }
.page-home #flow .flow__title {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   09. よくあるご質問
   -------------------------------------------------------------------------- */
.page-home #faq .faq__item {
  background-color: #fff;
  border-color: var(--color-ivory-line);
  border-radius: 10px;
}
.page-home #faq .faq__item[open] {
  border-color: var(--color-wood-soft);
  box-shadow: 0 8px 24px rgba(38, 48, 44, 0.05);
}
.page-home #faq .faq__q { color: var(--color-ink); }
.page-home #faq .faq__q::before { color: var(--color-green); }
.page-home #faq .faq__q::after { border-color: var(--color-wood-soft); }

/* --------------------------------------------------------------------------
   10. お問い合わせフォーム
   -------------------------------------------------------------------------- */
.page-home #contact .form__input,
.page-home #contact .form__select,
.page-home #contact .form__textarea {
  background-color: #fff;
  border-color: var(--color-ivory-line);
}
.page-home #contact .form__input:focus,
.page-home #contact .form__select:focus,
.page-home #contact .form__textarea:focus {
  border-color: var(--color-green);
}
.page-home #contact .form__submit {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.page-home #contact .form__submit:hover {
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}
.page-home #contact .link-arrow { color: var(--color-wood); }

/* --------------------------------------------------------------------------
   セクション余白 ─ PCでは上下・見出し→本文をゆったり、カード間は詰めすぎない。
   カードが並ぶ情報セクション（CHECK/REASON/SERVICE/PRICE/FLOW/FAQ）は基準の
   テンポを維持し、文字と余白だけで見せる静かなセクション（MESSAGE）・
   編集的な人物紹介（TUNER）・最後のCTA（CONTACT）はひと呼吸ぶんだけ広くして、
   全セクションが同じテンポに見えるのを避けている（差は最小限に留める）。 */
.page-home #worry, .page-home #reason, .page-home #service, .page-home #price, .page-home #flow, .page-home #faq {
  padding-block: clamp(5rem, 8vw, 9rem);
}
.page-home #message, .page-home #profile, .page-home #contact {
  padding-block: clamp(5.5rem, 8.75vw, 10rem);
}
.page-home #worry .card-grid,
.page-home #service .card-grid { gap: clamp(1.75rem, 2.8vw, 2.75rem); }
.page-home #reason .reason-list { gap: clamp(2.25rem, 3.5vw, 3.5rem); }
.page-home #worry .worry-list { gap: clamp(0.85rem, 1.4vw, 1.25rem); }
.page-home #worry .note-box { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------------------
   RESPONSIVE（将来のスマホ対応の受け皿）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 画面が狭いと文字と被写体が重なるため、背景はベールを強めて質感として残す */
  .hero { min-height: 0; padding-block: clamp(2.5rem, 6vw, 4rem); }
  .hero__bg::after {
    background: linear-gradient(
      90deg,
      rgba(246, 241, 231, 0.97) 0%,
      rgba(246, 241, 231, 0.94) 55%,
      rgba(246, 241, 231, 0.86) 100%
    );
  }
  .hero__title { font-size: clamp(2.25rem, 6.4vw, 3.75rem); }
  .profile-hero,
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* 登場アニメーション：スマホはPCよりテンポを速く・移動量を控えめにする
     （待ち時間を長く感じやすいため。背景のスケール変化もPCよりさらに弱くしている）。 */
  .hero {
    --hero-intro-bg-fade-dur: 0.9s;
    /* 背景ズームのみ強化：12〜14秒かけて、開始(引き)→終了(寄り)がはっきり
       分かる速度でゆっくり寄せる（PC側の値・keyframesには一切触れない）。 */
    --hero-intro-bg-dur: 13s;
    --hero-intro-bg-scale-from: 1;
    --hero-intro-bg-zoom-easing: linear;
    --hero-intro-line-delay: 0.1s;
    --hero-intro-line-dur: 0.4s;
    --hero-intro-eyebrow-delay: 0.22s;
    --hero-intro-eyebrow-dur: 0.4s;
    --hero-intro-eyebrow-y: 2px;
    --hero-intro-title1-delay: 0.52s;
    --hero-intro-title1-dur: 0.95s;
    --hero-intro-title2-delay: 0.84s;
    --hero-intro-title2-dur: 1s;
    --hero-intro-lead-delay: 1.54s;
    --hero-intro-lead-dur: 0.5s;
    --hero-intro-lead-y: 3px;
    --hero-intro-cta-delay: 1.77s;
    --hero-intro-cta-dur: 0.45s;
    --hero-intro-cta-y: 4px;
    /* -9px→-15px→-18px→-20pxへ拡張。「整える」のscale収束を最大scale(1.06)まで
       強めたため、左端のグリフが確実にクリップされないよう安全マージンを
       さらに広げた（左方向にのみ拡張するため、「ピ」「心」側の見え方に影響はない）。 */
    --hero-intro-mask-left-safe: -20px;
  }
  /* PC専用の-8pxに影響されないよう、スマホは元の0（margin-top未指定）に固定 */
  .hero__eyebrow { margin-top: 0; }
  /* PC専用に新規追加した「気→軽」「い→。」はスマホでは未指定（0px）に固定する */
  .hero__lead-ki-karu { margin-right: 0; }
  .hero__lead-i-maru { margin-right: 0; }

  /* スマホ幅ではPC用img（hero-photo.jpg）を表示せず、.hero__bgのbackground-imageに
     スマホ専用画像を指定する。PC用img自体・そのCSSプロパティは変更していない。 */
  .hero__bg img { display: none; }
  .hero__bg {
    background-image: url("../images/hero-photo-mobile-bu.png");
    background-size: cover;
    background-position: 55% center;
    background-repeat: no-repeat;
    /* スマホのみ、終了scaleを1（従来の中立値）より少し寄せた専用keyframesに
       差し替える（fadeアニメーションは共通のまま）。background-positionは
       この変更では動かさない。 */
    animation-name: hero-intro-bg-fade, hero-intro-bg-zoom-mobile;
  }
  /* スマホ専用画像は加工なしでそのまま見せるため、PC用veil（1024px以下で強めたグラデーション）を
     スマホ幅だけ無効化する。1024px/PC側の.hero__bg::afterは変更していない。 */
  .hero__bg::after {
    background: none;
  }

  /* メインキャッチ：位置のみ少し下へ（20px→34px、+14px）。
     色・カーニング・横位置・行間比率は変更なし。
     文字サイズ：全体の基本サイズを現状比108%に拡大（36px→38.88px）。
     1行目「ピアノの音を」はこの基本サイズのまま。
     2行目「心地よく」は基本サイズからさらに103%（38.88px→40.0464px、変更なし）。
     3行目「整える」は、2行目と同じ40.0464pxから、さらに現状比107%（40.0464px→42.849648px）。
     1.03em×1.07＝1.1021emとして正確に計算している。
     line-height（1.32）は数値のまま変更していないため、比率は維持される。 */
  .hero__title {
    position: relative;
    z-index: 0;
    margin-top: 34px;
    font-size: 40.0464px; /* 38.88px→40.0464px（全体+3%。2行目・3行目はこの基準に対するem指定のため、比率を保ったまま同率で拡大される） */
    /* 既存の白い光彩（PC/共通）を、スマホでは少しだけ強めて可読性を補強する。3行すべてに継承される。 */
    text-shadow:
      0 0 4px rgba(255, 253, 246, 0.76),
      0 0 14px rgba(255, 253, 246, 0.53),
      0 0 28px rgba(255, 253, 246, 0.3);
  }
  /* メインキャッチ背面だけに、ごく薄い白の柔らかいレイヤーを追加し、
     「音」「整える」付近の可読性を補う。サブキャッチ側へは広げていない。 */
  .hero__title::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8px -12px;
    background: rgba(255, 253, 246, 0.26); /* 0.4→0.26（約35%弱め） */
    filter: blur(14px);
    pointer-events: none;
  }
  /* 「心地よく」：補助的な演出として、少しだけ下から控えめにフェードインさせる。
     初期opacityは0ではなく0.45にしている。0にすると、.hero__title-block--2の
     マスク開示（0.84〜1.84s）の間「心地よく」の行だけ空白に見えてしまうため、
     マスク開示中は控えめに（最大0.45まで）見え、開示が終わるタイミング（1.84s）から
     本来のopacity・位置へ静かに整う、という一続きの流れにしている。
     transformではなくposition:relative + topを使うことで、「整える」で必要だった
     display:inline-block化（＝グリフのはみ出し量が変わり位置がずれる副作用）を
     避けている。拡大縮小・発光は追加していない。 */
  .hero__title-green {
    font-size: 1.03em;
    position: relative;
    opacity: 0.45;
    top: 3px;
    animation: hero-intro-green-settle 0.55s ease-out 1.84s forwards;
  }
  /* 「整える」：51.4771px→53.536px（現在値から+4%）。1.324em×1.04＝1.37696em */
  /* 「整える」はfont-sizeが「心地よく」より大きいため、同じグリフ由来のはみ出し量
     （text-indent/palt起因）が小さくなり、結果として左端が「心」より約5.2px右に
     見えてしまう。カーニング・改行・文字サイズには触れず、ブロック全体の横位置だけを
     実測値に基づいて左へ補正し、「心」の左端と揃える。 */
  /* display: inline-blockはscale収束アニメーションを効かせるために必要
     （transformは通常のinline要素には適用されないため）。inline-block化すると
     文字の実測はみ出し量が変化し、以前の-5.2px補正が不要になった（実測で
     margin-left:0のとき「心」の左端と誤差0pxで一致することを確認済み）。 */
  .hero__title-line3 { font-size: 1.37696em; margin-left: 0; display: inline-block; }
  /* 「音」「整える」の茶色を、スマホのみ少し濃く（#8f7048→#7a5f3d）。方向性は維持し、暗くしすぎない。
     text-shadowはPC専用の強化5層に影響されないよう、inheritで親（.hero__title）の値にそのまま戻す。 */
  .hero__title-brown { color: #7a5f3d; text-shadow: inherit; }
  /* スマホのみ：発光（PC用drop-shadow）を廃止。「音」本体（.hero__title-block--1
     .hero__title-brown）と「を」（.hero__title-particle--wo）はアニメーションだけ
     止め、既存の静的text-shadowはそのまま残す（「整える」側はこのあとscale収束の
     animationで上書きするため、ここには含めない）。 */
  .hero__title-block--1 .hero__title-brown,
  .hero__title-block--1 .hero__title-particle--wo {
    animation: none;
  }
  /* 「音」「整える」：文字本体の色（#7a5f3d／text-shadow）は一切変更しない。
     ベース文字の真上に、同じ文字を複製した専用オーバーレイ（.hero__title-shine、
     HTML側で追加）だけを重ね、そのオーバーレイにのみbackground-clip: textで
     ごく薄いハイライトを描く。ベースとオーバーレイは別要素のため、文字色が
     変わって見えることはない。オーバーレイはPCでは常にdisplay:noneで無効。 */
  .hero__title-block--1 .hero__title-brown,
  .hero__title-block--2 .hero__title-brown {
    position: relative;
  }
  .hero__title-shine {
    display: inline-block;
    position: absolute;
    inset: 0;
    color: transparent;
    text-shadow: none;
    pointer-events: none;
    background-size: 300% 100%;
    background-position: -140% 0;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
  }
  /* 「音」：opacity 0.55→0.70、幅約32%→約37%（通常倍率でも明確に分かる強さへ）。 */
  .hero__title-block--1 .hero__title-shine {
    background-image: linear-gradient(100deg,
      transparent 0%, transparent 43.8%,
      rgba(255, 253, 246, 0.7) 50%,
      transparent 56.2%, transparent 100%);
    animation: hero-intro-mobile-shine 2.1s linear 1.95s;
  }
  /* 「整える」：opacity・幅は現状維持（0.55／約32%）。delayだけscale開始（2.15s）の
     0.4s後（2.55s）へずらし、「scaleがゆっくり大きくなり始める→光が通る」の順にしている。 */
  .hero__title-block--2 .hero__title-shine {
    background-image: linear-gradient(100deg,
      transparent 0%, transparent 44.7%,
      rgba(255, 253, 246, 0.55) 50%,
      transparent 55.3%, transparent 100%);
    animation: hero-intro-mobile-shine 1.7s linear 2.55s;
  }
  /* scaleは0%がscale(1)のため、開始直後に「どんっ」と大きくなることはない。
     全体3.0秒：立ち上がり約1.35秒（0→45%、中間keyframeなしの単一cubic-bezier補間）、
     最大付近での保持約0.3秒（45→55%）、収束約1.35秒（55→100%）。easingはkeyframe側の
     各区間で個別に指定済みのため、ここではlinearを指定し二重にeasingがかからないようにしている。 */
  .hero__title-block--2 .hero__title-brown {
    animation: hero-intro-mobile-converge 3s linear 2.15s;
  }
  /* 「心地よく」と「整える」の間で改行し、3行構成にする */
  .hero__title-break-mobile { display: inline; }

  /* サブキャッチ：文字サイズを現状比90%に縮小（20.4px→18.36px）。
     メインキャッチとの間隔を、メインキャッチの下げ幅（+14px）より大きく広げるため
     margin-topを32px→48px（+16px）に。line-height比率（1.9）・カーニング・
     4行の改行位置・色・横位置は変更なし。
     CTAはこのあとに続く要素のため、.hero__actionsのmargin-topは変更せず、
     サブキャッチとの現在の視覚的距離を保ったまま自動的に下へ追従する。
     position/z-indexは直後の::before（背景の白い柔らかいレイヤー）を
     サブキャッチの文字より下・写真より上に固定するためだけに追加している。 */
  .hero__lead {
    position: relative;
    z-index: 0;
    max-width: 36rem; /* PC専用の38.2remに影響されないよう、スマホは元の36remに固定 */
    margin-top: 48px;
    font-size: calc(var(--fs-lead) * 1.08 * 0.95 * 0.97 * 0.97 * 0.95 * 0.95 * 0.95 * 0.95); /* 14.0705px→13.367px（さらに現状比95%）。改行位置はスマホ専用<br>で固定済みのため文字サイズ変更の影響を受けない */
    font-weight: 400; /* 500→400（太すぎたため1段階だけ戻す。PC側は別ルールのため影響なし） */
    /* 文字色をスマホのみわずかに濃く（#38352f→#2d2a25）。真っ黒にはせず、
       温かみのあるダークチャコール方向へ。可読性向上分だけの最小限の変更。 */
    color: #26221c;
    /* 文字色は変更せず、外周だけにごく弱い白〜生成りの光彩を入れて背景との
       境界を自然に分離させる（内部を塗るのではなく、あくまで輪郭のすぐ外側）。
       近距離・中距離・遠距離の3層とも、指定範囲内に収まるよう調整済み。 */
    text-shadow:
      0 0 3px rgba(255, 255, 250, 0.68),
      0 0 7px rgba(255, 255, 250, 0.44),
      0 0 13px rgba(255, 255, 248, 0.26);
  }
  .hero__lead-inner--pc {
    display: none;
  }
  .hero__lead-inner--mobile {
    display: inline-block;
  }
  /* サブキャッチ4行を「前半2行＝主文」「後半2行＝補足文」として見せるが、差は
     ごくわずかに留める。帯や装飾は使わず、文字サイズ・opacity・余白だけで
     階層を作っている。カーニング・letter-spacingは追加していない。 */
  .hero__lead-primary {
    display: block;
    font-size: 1.01em;
  }
  .hero__lead-secondary {
    display: block;
    margin-top: 3px;
    font-size: 0.99em;
    opacity: 0.86;
  }
  /* サブキャッチの指定文字間だけを個別調整するカーニング。全体のletter-spacingは
     変更せず、対象文字だけをspanで区切ってmargin-rightで局所的に詰め・広げている。 */
  .hero__lead-gap-no1,
  .hero__lead-gap-ni1,
  .hero__lead-gap-wa,
  .hero__lead-gap-ni2,
  .hero__lead-gap-wo,
  .hero__lead-gap-no2,
  .hero__lead-gap-o,
  .hero__lead-gap-go,
  .hero__lead-gap-i {
    margin-right: 0.8px; /* 0.5px→0.8px（さらに+0.3px） */
  }
  .hero__lead-gap-hou {
    margin-right: -0.5px;
  }
  .hero__lead-gap-sei {
    margin-right: -0.8px; /* -0.5px→-0.8px（さらに-0.3px） */
  }
  .hero__lead-gap-ai,
  .hero__lead-gap-dan {
    margin-right: -0.3px; /* 新規：「合わ」「談く」を詰める */
  }
  /* 「丁寧に音を整えます。」の下だけに、極細の金茶系ラインを1本追加。
     文字自体（色・太さ・カーニング・位置等）には一切触れず、::afterを文字の
     下側に独立配置している。widthではなくtransform: scaleX()で伸ばすことで
     レイアウト再計算を発生させず、なめらかに描画される。アニメーション完了後も
     forwardsでscaleX(1)のまま薄く残し、この1行だけに静かな視線誘導を持たせる。 */
  .hero__lead-line2-glow {
    position: relative;
    display: inline-block;
  }
  .hero__lead-line2-glow::after {
    content: "";
    position: absolute;
    left: 0;
    /* line-height由来のline box下端ではなく、実測した文字グリフの実際の下端
       （wrapper自身のbottomから約6.06px上）を基準に算出。正の値でbox内側へ
       持ち上げ、グリフ下端から約3pxの余白にしている（従来の1.5pxからさらに
       1.5pxだけ下へ）。 */
    bottom: 3px;
    width: 94%;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(122, 95, 61, 0) 0%,
      rgba(122, 95, 61, 0.64) 4%,
      rgba(122, 95, 61, 0.64) 96%,
      rgba(122, 95, 61, 0) 100%);
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
    animation: hero-lead-line2-underline 1.25s cubic-bezier(0.22, 1, 0.36, 1) 2.39s forwards;
  }
  @keyframes hero-lead-line2-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  /* サブキャッチ背面だけに、輪郭のない柔らかい光を置いて可読性を補う。
     単色の矩形塗りではなくradial-gradientで中心から外側へ完全に透明までフェード
     させたうえ、さらにblurで滲ませているため、境界線・矩形感が出ない。
     insetを上下左右非対称に拡張し（左右・上方向を特に広く、下方向はCTAの
     ::beforeと二重に強くならないよう控えめに）、中心も文字左側寄りへずらすことで
     「文字の左側〜中央付近が少し明るい」自然光に近い見え方にしている。
     opacityは前回比+28%程度に強め、上側は.hero__title::beforeと、下側は
     .hero__actions::beforeと（強く重ねず）ゆるやかにつながるようにしている。 */
  .hero__lead::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -46px -58px -26px -58px;
    /* 中心を42%/44%→40%/58%へ下げ、1行目より2〜4行目側が自然に強く
       光を受けるようにしている（行ごとの帯ではなく、単一の楕円グラデーションの
       中心をずらすことで実現）。opacityは前回よりさらに約25%強化。 */
    background: radial-gradient(ellipse at 40% 58%,
      rgba(255, 250, 238, 0.4) 0%,
      rgba(255, 250, 238, 0.22) 46%,
      rgba(255, 250, 238, 0) 80%);
    filter: blur(28px);
    pointer-events: none;
  }

  /* CTA：サブキャッチとの間隔を広げ、縦方向に約12px下げる（36px→48px）。
     横幅・高さ・色・シャドー・文字・カーニング・矢印・左右位置は変更なし。
     position/z-indexは直後の::before（CTA背面の白い柔らかいレイヤー）を
     CTAボタンより下・写真より上に固定するためだけに追加している。 */
  .hero__actions {
    position: relative;
    z-index: 0;
    margin-top: 48px;
  }
  /* CTA背面の人物の黒い部分だけを、ごく薄い白ぼかしで柔らかくする。
     CTAボタン自体（背景色・シャドー・角丸・文字等）は一切変更していない。
     人物全体・ピアノ全体・ヒーロー全体は対象外で、CTA周辺の局所的な範囲のみ。 */
  .hero__actions::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px -14px;
    background: rgba(255, 253, 246, 0.23); /* 0.35→0.23（約35%弱め） */
    filter: blur(18px);
    pointer-events: none;
  }

  .hero__cta { width: 100%; justify-content: center; }
  .hero-points__item + .hero-points__item {
    border-left: none;
    border-top: 1px solid var(--color-ivory-line);
  }
  .history__item { grid-template-columns: 1fr; gap: var(--space-2xs); }

  /* メインキャッチ カーニング（スマホのみ上書き。PC側の値はここでは変更していない）
     アノ：-8.5px→-8.2px（+0.3px）
     心地：5.5px→5.3px（-0.2px）／整え：4px→3.7px（変更なし・前回のまま） */
  .hero__title-no { margin-left: -8.2px; }
  .hero__title-particle--no { margin-left: -8.5px; }
  .hero__title-chi { margin-left: 5.3px; }
  .hero__title-e { margin-left: 3.7px; }

  /* サブキャッチ：意味のまとまりで4行になるよう、指定位置の<br>だけ表示する */
  .hero__lead-break-mobile { display: inline; }

  /* サブキャッチ カーニング（スマホのみ上書き）
     「、」直後：-3px→-3.5px（-0.5px、両方の「、」に適用） */
  .hero__lead-comma { letter-spacing: -3.8px; } /* 「、」直後：-3.5px→-3.8px（-0.3px） */
  /* 以下は指定された1箇所ずつの文字間のみを対象にした個別調整（PC側には影響しない） */
  .hero__lead-ni-ai { margin-right: 0.6px; }  /* 「に合」0.3px→0.6px（+0.3px） */
  .hero__lead-go { margin-right: 1px; }       /* 「ご相」1px（変更なし） */
  .hero__lead-ritsu { margin-right: -0.3px; } /* 「律し」-0.3px（変更なし） */
  .hero__lead-ho { margin-right: -0.8px; }    /* 「方も」-0.8px（変更なし） */
  .hero__lead-ki { margin-right: -0.1px; }    /* 「気に」-0.1px（変更なし） */
  /* 前回追加した1文字ずつの調整（今回変更なしの3件はそのまま） */
  .hero__lead-ni-cho { margin-right: 0.8px; } /* 「に調」0.5px→0.8px（+0.3px） */
  .hero__lead-o-ki { margin-right: 0.5px; }   /* 「お気」+0.5px（変更なし） */
  .hero__lead-ni-go { margin-right: 0.5px; }  /* 「にご」+0.5px（変更なし） */
  .hero__lead-ai-wa { margin-right: -0.5px; } /* 「合わ」-0.5px（変更なし） */
  .hero__lead-dan-ku { margin-right: -1px; }  /* 「談く」-1px（変更なし） */
  /* 今回新規追加した1文字ずつの調整（現在値0px基準、+0.3px） */
  .hero__lead-no-jo { margin-right: 0.3px; }  /* 「の状」0px→+0.3px */
  .hero__lead-se-te { margin-right: 0.3px; }  /* 「せて」（わせての「せ→て」）0px→+0.3px */
  .hero__lead-ha-ji { margin-right: 0.3px; }  /* 「はじ」（はじめての「は→じ」）0px→+0.3px */
  .hero__lead-ji-me { margin-right: 0.3px; }  /* 「じめ」（はじめての「じ→め」）0px→+0.3px */
  .hero__lead-me-te { margin-right: 0.3px; }  /* 「めて」（はじめての「め→て」）0px→+0.3px */
}

/* ==========================================================================
   TOP ─ ヒーロー直下〜フッター直前のスマホ専用調整
   PCの余白・シャドウをそのまま縮小するのではなく、スマホとして自然な密度・
   立体感に個別調整している。ヒーロー本体（.hero関連）はここでは変更していない。
   ========================================================================== */
@media (max-width: 600px) {
  .worry-title-break-mobile { display: inline; }
  .intro-message__sign-break-mobile { display: inline; }
  /* 今回追加：指定行数に固定するためのスマホ専用<br>を表示する */
  .price-lead-break-mobile,
  .contact-lead-break-mobile,
  .worry-note-break-mobile,
  .symptom-lead-break-mobile,
  .repair-note-break-mobile,
  .page-hero__lead-fv-break,
  .profile-hero__lead-break-mobile,
  .maker-lead-break-mobile,
  .flow-lead-break-mobile,
  .price-hero-lead-break-mobile,
  .message-note-break-mobile,
  .profile-role-break-mobile,
  .form-hint-break-mobile,
  .form-hint2-break-mobile,
  .frequency-note-break-mobile,
  .care-title-break-mobile,
  .service-tuning-break-mobile,
  .service-repair-break-mobile,
  .works-note-break-mobile,
  .reason1-text-break-mobile,
  .reason2-text-break-mobile,
  .tuner-teaser-break-mobile {
    display: inline;
  }
  /* TUNER氏名：折り返し禁止（1行固定）。位置・font-weight・文字色・カーニングは変更しない。 */
  .profile__name-text {
    white-space: nowrap;
  }
  /* TUNER肩書き：氏名の横並びから、氏名の下へ移動する（1行表示・横スクロール防止）。
     PC（このメディアクエリの外）は元のflex横並びのまま変更していない。 */
  .profile__name {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
  .profile__role {
    white-space: nowrap;
  }
  /* 氏名の下へ移動したため、横並び時代の右シフト（12px）は不要になったので解除する。 */
  .profile__role--shift-mobile {
    margin-left: 0;
  }
  /* TUNER本文：指定の3行（ピアノは一台一台〜／だからこそ〜確認し、／お客様の〜）に
     固定する（上記<br class="tuner-teaser-break-mobile">で改行位置を追加済み）。
     2行目（24文字）が16pxのままだと354px必要になり、コンテナ幅335pxを超えて
     さらに折り返してしまうため、実測のうえ最小限font-sizeを下げて3行に収める。 */
  .profile-teaser-text {
    font-size: 14.5px; /* 16px→14.5px */
  }
  /* TOP「サービス内容」：「ピアノのことを、トータルでサポート。」の「、→ト」だけを
     さらに詰める。見出し全体・.is-thin自体のletter-spacingは変更していない。 */
  #service .section-title .kern-comma-tight {
    letter-spacing: -0.6em;
  }
  /* TOP「選ばれる3つの理由」01：指定3行の2行目（22文字）がletter-spacing:0でも
     コンテナ幅を超えるため、実測のうえ最小限font-sizeを下げてから字間を広げる
     （改行位置は上記<br>で固定済み）。 */
  #reason .reason:nth-of-type(1) .reason__text {
    font-size: 13px; /* 14px→13px */
    letter-spacing: 0.3px;
  }
  /* 02：1文目（32文字）はコンテナ幅の物理的な制約上、どのフォントサイズでも
     1行には収まらないため、広めの字間は使わず控えめな値に留める
     （<br>による2文単位の改行位置自体は維持）。 */
  #reason .reason:nth-of-type(2) .reason__text {
    letter-spacing: 0.1px;
  }
  /* TOP下3項目（はじめての方も歓迎／調律・修理・調整に対応／ご相談・お見積り無料）：
     詰まり感を解消するため、全体のletter-spacingだけを少し広げる。個別文字ペアの
     調整ではなく、3項目共通のこのクラス自体を少し広げる方針で対応。 */
  .hero-points__item {
    letter-spacing: 1.06px; /* 0.64px→1.06px（+約0.03em相当） */
  }
  /* TOP「料金について」：文章全体の字間を明確に広げる（指定3行は上記<br>で固定済みのため、
     字間を広げても崩れない）。文字サイズ・改行位置は現状維持。 */
  #price .section-lead {
    letter-spacing: 0.09em;
  }
  /* TOP「お問い合わせ」：文章全体の字間を明確に広げる。指定3行（新しい改行位置）を
     維持する必要最小限の範囲でのみ文字サイズを16px→15pxに縮小する。 */
  #contact .section-lead {
    letter-spacing: 0.09em;
    font-size: 13px; /* 3行目を1行に収めるため、-2px(14px)では11px不足したことを実測確認したうえで13pxまで調整 */
  }
  /* 「どこに相談すればいいのか分からない」だけが2行に折り返すため、
     このカード（TOPページの悩みリストのみ）だけ字間をごくわずかに詰めて1行に収める。
     他のカードには影響させない。 */
  .page-home #worry .worry-list__item:nth-child(6) {
    letter-spacing: -0.05px; /* -0.35px→-0.05px（1行を維持できる範囲で明確に広げる） */
  }
  /* お悩みカード6個：詰まり感をなくすため、カードごとに現状の余白を確認したうえで
     文字間隔を広げる（改行・カード幅・文字サイズは維持）。 */
  .page-home #worry .worry-list__item:nth-child(1),
  .page-home #worry .worry-list__item:nth-child(2),
  .page-home #worry .worry-list__item:nth-child(4) {
    letter-spacing: 1.64px; /* 0.64px→1.64px */
  }
  /* 「鍵盤のタッチに違和感がある」：既存の1行維持用の値(0.2px)から、
     1行を維持できる範囲で広げる。 */
  .page-home #worry .worry-list__item:nth-child(3) {
    letter-spacing: 1.2px; /* 0.2px→1.2px */
  }
  /* 「子どもがピアノを始める前に整えたい」：新しい文章を1行に収めるため実測のうえ調整
     （getClientRectsで行数を直接検証し、-0.7px境界のため-0.8pxに設定）。 */
  .page-home #worry .worry-list__item:nth-child(5) {
    letter-spacing: -0.8px; /* 0.64px→-0.8px */
  }
  /* お悩みパート説明文（note-box）：詰まり感の指摘を受け、指定4行を維持できる範囲でさらに広げる。 */
  #worry .note-box p {
    letter-spacing: 1.6px; /* 0.64px→1.3px→1.6px */
  }
  /* 「ピアノにも、人にも、丁寧に。」：「、→人」「、→丁」の2箇所をさらに詰める。
     見出し全体のletter-spacingは変更しない。 */
  #profile .media__title .kern-comma-tight {
    letter-spacing: -5.5px; /* -4.4px→-5.5px */
  }
  /* Messageメイン見出し・本文：スマホ幅ではPC用セットを隠し、スマホ専用の行セットを表示する */
  .im-set--pc { display: none; }
  .im-set--sp { display: block; }
  /* 指定の行数（見出し3行・本文5行）を1行ずつ確実に収めるため、
     スマホ専用セットのみ文字サイズを縮小する（PC側のフォントサイズは無変更）。 */
  .intro-message__title .im-set--sp .im-line { font-size: 20px; }
  .intro-message__text .im-set--sp .im-line { font-size: 11.5px; }
  .page-home #message, .page-home #worry, .page-home #reason, .page-home #service, .page-home #profile, .page-home #price, .page-home #flow, .page-home #faq, .page-home #contact {
    padding-block: clamp(3rem, 10vw, 4.5rem);
  }
  .page-home #message .section-head,
  .page-home #worry .section-head,
  .page-home #reason .section-head,
  .page-home #service .section-head,
  .page-home #price .section-head,
  .page-home #flow .section-head,
  .page-home #faq .section-head,
  .page-home #contact .section-head {
    margin-bottom: clamp(2rem, 7vw, 2.75rem);
  }
  /* カードの立体感を弱め、画面幅の狭さに合わせて過剰な影を避ける。
     REASON（0.05）より軽い0.03に留め、影の強弱をスマホでも維持する */
  .page-home #service .card {
    box-shadow: 0 4px 14px rgba(38, 48, 44, 0.03);
  }
  .page-home #service .card:hover {
    box-shadow: 0 4px 14px rgba(38, 48, 44, 0.03);
    transform: none;
  }
  /* 「ピアノ調律」カード本文：指定2行（音程や全体のバランスを確認し、／一台一台の
     状態に合わせて丁寧に調律します。）に収めるため、この本文だけ最小限font-sizeを下げる。 */
  .page-home #service .card-grid .card:first-child .card__text {
    font-size: 13px; /* 14px→13px */
  }
  .page-home #reason .reason {
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 14px rgba(30, 35, 32, 0.05);
  }
  .page-home #reason .reason:hover {
    box-shadow: 0 4px 14px rgba(30, 35, 32, 0.05);
    transform: none;
  }
  .page-home #reason .reason__num { font-size: 2.1rem; }
  .page-home #reason .reason__icon svg { width: 20px; height: 20px; }
  .page-home #worry .note-box,
  .page-home #faq .faq__item[open] {
    box-shadow: none;
  }
  .page-home #worry .worry-list__item {
    padding: var(--space-sm) var(--space-md);
  }
  .page-home #service .card__icon,
  .page-home #price .price-summary__icon {
    width: 36px;
    height: 36px;
  }
  .page-home #service .card__icon svg,
  .page-home #price .price-summary__icon svg {
    width: 18px;
    height: 18px;
  }
  .page-home #flow .flow__item {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-lg);
  }
}

/* ==========================================================================
   調律について（tuning.html）─ スマホ幅でのカーニング起因の孤立行を補正
   ========================================================================== */
@media (max-width: 600px) {
  /* 「調律の頻度は、年に1回が目安です。」：見出し全体の字間が詰まりすぎているため広げる
     （「す。」孤立防止も兼ねる。1行を維持できる範囲で確認済み）。 */
  #frequency .media__title {
    letter-spacing: 1.3px; /* 0.04em(0.8px)→1.3px */
    font-size: 18px; /* 「調律の頻度は、年に1回が目安です。」を1行に収めるため20px→18px */
  }
  /* 「間隔があいてしまっても問題ありません。／状態に合わせて、段階的に整えていく方法も
     ご提案できます。」を指定2行に収めるため、この本文だけ最小限font-sizeを下げる。 */
  #frequency .u-small {
    font-size: 12px; /* 14px→12px（2行目が長く、-1px/-2pxの間では収まらないため実測のうえ12pxに調整） */
  }
  /* 「ピアノを長く、心地よく保つために。」の「に。」孤立を防ぐ（「ピアノ」以外の
     字間は下の.care-title-wideで個別に広げるため、ここは基準値のまま変更しない） */
  #care .media__title { letter-spacing: 0.01em; }
  /* 「ピアノを長く、心地よく保つために。」：「ピアノ」の字間は維持したまま、
     それ以外の部分（を長く／心地よく保つために。）だけを広げる。 */
  #care .media__title .care-title-wide {
    letter-spacing: 1px; /* 0.01em(0.2px)→1px。「ピアノ」部分は対象外 */
  }
  /* 3見出しの「、」直後（、→ピ／、→年／、→心）をさらに詰める。
     親要素のletter-spacingではなく、この「、」のspanだけを個別に上書きする。 */
  #about-tuning .media__title .kern-comma-tight,
  #frequency .media__title .kern-comma-tight,
  #care .media__title .kern-comma-tight {
    letter-spacing: -6px; /* -5px→-6px（さらに詰める） */
  }
  /* FVサブキャッチ・「上記以外のメーカー〜」：指定行数固定用のスマホ専用<br>を表示する */
  .tuning-fv-lead-break-mobile,
  .maker-note-break-mobile {
    display: inline;
  }
  /* 「対応メーカー」直下の説明文：指定3行を維持できる範囲で明確に広げる。 */
  #maker .section-lead {
    letter-spacing: 1.8px; /* 0.64px→1.8px */
  }
  /* 「上記以外のメーカーもご相談ください。／お手持ちのピアノの状態を確認したうえで
     お答えします。」を指定2行に収めるため、この文章だけ最小限font-sizeを下げる。 */
  #maker .u-center.u-small {
    font-size: 13px; /* 14px→13px */
  }
}

/* ==========================================================================
   修理・メンテナンス（repair.html）─ スマホ幅の字間調整
   ========================================================================== */
@media (max-width: 600px) {
  /* 「修理が必要かどうか分からない状態でも構いません。〜」：指定4行を維持できる範囲で広げる。 */
  #flow .note-box p {
    letter-spacing: 1.34px; /* 0.64px→1.34px */
  }
  /* 「下記に当てはまらない症状でも、お気軽にお問い合わせください。」：指定2行を維持できる範囲でさらに広げる。 */
  #symptom .section-lead {
    letter-spacing: 3px; /* 0.64px→2px→3px */
  }
  /* 「こんな症状に対応します」8カード：カードごとに現状の折り返しを確認したうえでさらに広げる。
     2番目・6番目のカードは、わずかな字間拡大でも改行位置が変わってしまうため対象外（現状維持）。 */
  #symptom .worry-list__item:nth-child(1) { letter-spacing: 1.1px; }   /* 1px→1.1px（改行を維持できる上限付近） */
  #symptom .worry-list__item:nth-child(3) { letter-spacing: 1.8px; }   /* 1.2px→1.8px */
  #symptom .worry-list__item:nth-child(4) { letter-spacing: 2.2px; }   /* 1.64px→2.2px */
  #symptom .worry-list__item:nth-child(5) { letter-spacing: 1.64px; }  /* 1.24px→1.64px */
  #symptom .worry-list__item:nth-child(7) { letter-spacing: 1.34px; }  /* 1.14px→1.34px */
  #symptom .worry-list__item:nth-child(8) { letter-spacing: 1.34px; }  /* 1.14px→1.34px */
}

/* ==========================================================================
   料金案内（price.html）─ スマホ幅の字間調整・改行固定
   ========================================================================== */
@media (max-width: 600px) {
  .price-tuning-lead-break-mobile,
  .price-repair-lead-break-mobile {
    display: inline;
  }
  /* 指定4行（年に1回程度を目安とした、／通常の調律の料金です。／長期間調律されて
     いない場合は、／状態を確認したうえでご相談させていただきます。）に収めるため、
     4行目のみ収まりきらないことを実測で確認したうえで、本文だけ最小限font-sizeを
     下げる（字間はこれまでどおり変更しない）。 */
  #tuning-price .section-lead {
    letter-spacing: 0.82px; /* 0.64px→0.75px→0.8px→0.82px（改行維持の物理的な上限） */
    font-size: 15px; /* 17px→15px */
  }
  /* 文章B：親要素全体は広げず基準値に戻し、「。→確」「、→ご」の2境界だけを
     下のspanで個別に広げる（他の句読点・文字間は現状維持）。指定3行（1行目「修理は
     症状や交換部品によって費用が変わります。」が単語途中で折れないよう）にするため、
     本文だけ最小限font-sizeを下げる。 */
  #repair-price .section-lead {
    letter-spacing: 0.86px; /* 0.64px→0.86px（詰まり感の指摘を受け、指定3行を維持できる範囲で広げる） */
    font-size: 14px; /* 17px→14px（-2pxでは1行目が「変わり／ます。」と単語途中で折れるため実測のうえ14pxに調整） */
  }
  .repair-price-kern-maru { margin-right: 2.5px; }  /* 「。→確」 */
  .repair-price-kern-ten { margin-right: 2.5px; }   /* 「、→ご」 */
  /* 「調律料金」「修理・調整料金」：スマホのみ、内容/対象/料金の3列表を横スクロール
     させず、1項目＝1ブロックの縦積みに変更する。PC版のテーブル構造・スタイルは
     このメディアクエリの外なので一切変更されない。 */
  #tuning-price .table-wrap,
  #repair-price .table-wrap {
    overflow-x: visible;
  }
  #tuning-price .table,
  #repair-price .table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  #tuning-price .table thead,
  #repair-price .table thead {
    display: none;
  }
  #tuning-price .table tbody,
  #tuning-price .table tr,
  #repair-price .table tbody,
  #repair-price .table tr {
    display: block;
  }
  #tuning-price .table tr {
    padding-block: 20px;
    border-bottom: 1px solid var(--color-border);
  }
  #tuning-price .table th,
  #tuning-price .table td,
  #repair-price .table th,
  #repair-price .table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }
  /* 項目名：本文（対象）よりやや強めに（サイズ・weightとも既存トークンの範囲内） */
  #tuning-price .table tbody th,
  #repair-price .table tbody th {
    margin-bottom: 10px;
    font-size: var(--fs-body); /* 14px→16px */
    font-weight: 600;
  }
  /* 対象：通常本文のまま（既存スタイルを継承、ブロック化と項目間余白のみ追加） */
  #tuning-price .table td:not(.is-price),
  #repair-price .table td:not(.is-price) {
    margin-bottom: 8px;
  }
  /* 「修理・調整料金」5項目カード：詰まり感の指摘を受け、項目名・対象とも
     字間を少し広げる（カード幅・高さは既存のまま、letter-spacingのみ）。 */
  #repair-price .table tbody th {
    letter-spacing: 0.6px;
  }
  #repair-price .table td:not(.is-price) {
    letter-spacing: 0.5px;
  }
  /* 「修理・調整料金」だけ：各行が個別の白背景box（途中で背景が切れて見える状態）
     になっていたため、白背景・枠線・角丸は行ではなく table-wrap 側の1枚だけに
     持たせる。table/tr自体は透明にし、内部は極細の罫線だけで区切る。 */
  #repair-price .table-wrap {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding-inline: 20px;
    overflow: hidden;
  }
  #repair-price .table {
    background-color: transparent;
  }
  #repair-price .table tr {
    padding-block: 22px;
    border-bottom: 1px solid var(--color-border);
  }
  #repair-price .table tr:first-child {
    border-top: none;
  }
  #repair-price .table tr:last-child {
    border-bottom: none;
  }
  /* 料金（.is-price）は既存スタイル（font-en・本文より一段強い色）をそのまま継承。
     white-space:nowrapも既存のまま維持し、途中改行を防ぐ。 */
}

/* ==========================================================================
   調律について（tuning.html）─ CAREリストの1行固定
   ========================================================================== */
@media (max-width: 600px) {
  /* 「直射日光やエアコンの風が当たらない場所に置く」：文章変更後も1行を維持する
     （-0.6pxでは313px必要で2行に折り返すため、実測のうえ-1.0pxに調整）。 */
  #care .list-dot li:first-child {
    letter-spacing: -1px; /* 0.64px→-1px */
  }
}

/* ==========================================================================
   調律師について（about.html）─ FVサブキャッチの改行固定
   ========================================================================== */
@media (max-width: 600px) {
  .about-fv-lead-break-mobile {
    display: inline;
  }
  /* MESSAGE本文（.profile-hero__lead）：周囲との差別化が弱いため、スマホのみ
     既存の金茶系トークン（--color-gold-brown。見出しほど強くならない、
     メインキャッチの差し色として既に使われている色）へアクセントカラーを変更する。 */
  .profile-hero__lead {
    color: var(--color-gold-brown);
  }
}

/* ==========================================================================
   PC専用：指定箇所の読点「、」直後だけを個別に詰める
   全体・見出し全体のletter-spacingは変更せず、既存の.kern-comma-tightスパンに
   対してだけスコープを絞って上書きしている。@media(min-width:601px)で明示的に
   囲むことで、スマホ側の値（同一クラスを使う場合も含む）に一切影響しないようにしている。
   ========================================================================== */
@media (min-width: 601px) {
  /* TOP「そう思ったことも、どうぞお話しください。」の「、ど」 */
  .im-set--pc .im-line .kern-comma-tight {
    letter-spacing: -7.4px; /* 基準-6.97px→-7.4px */
  }
  /* TOP「こんなお悩み、ありませんか？」の「、あ」 */
  #worry .section-title .kern-comma-tight {
    letter-spacing: -7.4px; /* 基準-6.97px→-7.4px */
  }
  /* TOP「ピアノにも、人にも、丁寧に。」の「、人」「、丁」 */
  #profile .media__title .kern-comma-tight {
    letter-spacing: -5.2px; /* 基準-4.75px→-5.2px */
  }
  /* 調律についてページ：3見出しの「、ピ」「、年」「、心」 */
  #about-tuning .media__title .kern-comma-tight,
  #frequency .media__title .kern-comma-tight,
  #care .media__title .kern-comma-tight {
    letter-spacing: -5.2px; /* 基準-4.75px→-5.2px */
  }
  /* 調律師についてページ：「まず、お話を伺うこと」の「、お」 */
  #policy .reason__title .kern-comma-tight {
    letter-spacing: -4.4px; /* 基準-3.96px→-4.4px */
  }
  /* 調律師についてページ：「ピアノは一台一台、状態も音も違います。」
     「だからこそ、お客様のお話を伺うことを大切にしています。」の「、状」「、お」 */
  .profile-hero__lead .kern-comma-tight {
    letter-spacing: -5.2px; /* 基準-4.75px→-5.2px */
  }
  /* TOP「ピアノのことを、トータルでサポート。」の「、ト」（PC版のみ）。
     全体・.is-thin自体のletter-spacingは変更せず、この読点spanだけを局所的に
     詰める。まだ開いて見えるとのフィードバックを受け、さらに強める。 */
  #service .section-title .kern-comma-tight {
    letter-spacing: -6px; /* 基準-4.32px→-4.8px→-6px */
  }
  /* よくあるご質問「アップライトピアノ・グランドピアノ、どちらも対応できますか？」
     の「、ど」（PC版のみ、今回追加）。中黒「・」も他ページの.kern-nakaguro-tight
     と同じ基準（base.css側で定義済み、-0.14em/-0.14em）をそのまま使用。 */
  .faq__q .kern-comma-tight {
    letter-spacing: -6px;
  }
}

/* ==========================================================================
   PC専用：TOP下3項目（はじめての方も歓迎／調律・修理・調整に対応／ご相談・お見積り無料）
   の詰まり感解消のため、要素全体のletter-spacingとfont-sizeだけを微調整する。
   font-weight・色・位置・余白・改行は変更しない。@media(min-width:601px)で
   囲むことで、スマホ側の値（別の@media(max-width:600px)側で管理）に影響しない。
   ========================================================================== */
@media (min-width: 601px) {
  /* 【2回目の追加調整】まだ詰まって見えるとのフィードバックのため、
     letter-spacingのみさらに広げる（今回はfont-sizeを変更しない）。 */
  .hero-points__item {
    letter-spacing: 1.5px; /* 基準0.64px→1.06px→1.2px→1.5px */
    font-size: 16px; /* 基準14px→15px→16px（今回は変更しない） */
  }
}

/* ==========================================================================
   PC専用：全ページ共通・カード内／白枠内の日本語本文letter-spacing調整
   全ページ（ヒーローを除く）のカード・白枠・説明文・補足文・箇条書き本文が、
   既存の基準letter-spacing（body: 0.04em）のままだと漢字の連続箇所で詰まって
   見えるため、対象の本文系クラスにだけletter-spacingを指定して少しゆったり
   させる。見出し・タイトル・英字・ボタン・ナビ・パンくず・
   価格表記（.is-price／.is-tbd）・数字のみの表記は対象外。font-size・
   font-weight・line-height・padding・margin・改行・アニメーションは無変更。
   @media(min-width:601px)で明示的に囲み、スマホ側には一切影響しない。
   0.05em→0.06emへ追加調整（さらに詰まって見えるとのフィードバックのため）。
   幅に余裕があることを実測確認できた箇所は0.065〜0.07emまで個別に広げている。
   【2回目の追加調整】ユーザーの視覚確認では上記でもまだ詰まって見えるとの
   ことで、対象箇所すべてを現状値からさらに一段広げた（このブロック内は
   今回未対象のためそのまま。今回対象の.note-box p／.section-lead／
   .flow__text／.media__body p／.profile-hero__body pは直後の値を上書き）。
   ========================================================================== */
@media (min-width: 601px) {
  /* 【4回目の追加調整】0.06em→0.075emへさらに広げる。 */
  .card__text,
  .def-list__desc,
  .worry-list__item,
  .list-dot li,
  .info-panel__dl dd,
  .u-small,
  .form__hint,
  .contact-list__value {
    letter-spacing: 0.075em;
  }
  /* テーブル本文（対象列）：セル幅に大きな余裕がある（実測で最長行156px/セル幅347px）
     ため、【4回目の追加調整】0.07em→0.09emへ広げる。 */
  .table td:not(.is-price) {
    letter-spacing: 0.09em;
  }
  /* Q&A回答：実測で最長行559px/コンテナ666pxと余裕があるため、
     【4回目の追加調整】0.07em→0.09emへ広げる。 */
  .faq__a {
    letter-spacing: 0.09em;
  }
  /* カード内サブテキスト（選ばれる理由・3つのこと等）：この汎用ルールは、
     TOP「選ばれる3つの理由」01・02のような改行数を固定した個別指定
     （nth-of-type単位、詳細度がより高い）には一切影響しない。それ以外の
     reason__text（TOP 03、調律師について「大切にしている3つのこと」等）に
     ついて、【4回目の追加調整】0.065em→0.08emへ広げる。 */
  .reason__text {
    letter-spacing: 0.08em;
  }
  /* 【4回目の追加調整】0.08em→0.09emへさらに広げる（実測で十分な余白を
     確認したうえで調整。自然な折り返しの多い長文段落のため、行数が
     1行増えることは許容する）。 */
  .note-box p,
  .section-lead,
  .flow__text,
  .media__body p {
    letter-spacing: 0.09em;
  }
  /* 調律師についてページのプロフィールエリア（.profile-hero__body配下）は
     今回明示的に対象外とされたため、letter-spacingは前回設定した0.08emから
     変更しない（このルール自体は維持し、値だけ据え置く）。 */
  .profile-hero__body > p:not(.profile-hero__lead):not(.section-label) {
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   スマホ専用：全ページ共通・カード内／白枠内の日本語本文letter-spacing調整
   （上記PC専用ブロックのスマホ版）。同じ対象クラス群に、スマホ幅でも詰まって
   見えるとの指摘を受けて控えめな値（0.03em）を指定する。この一括ルールは
   低い詳細度（単一クラスセレクタ）のため、各ページ・各セクションですでに
   個別調整済みのletter-spacing（#worryや#symptomのnth-child指定、
   #price/#contact/#maker/#tuning-price/#repair-price等の.section-lead、
   #careのlist-dot等）は詳細度がより高く、この一括ルールに一切上書きされず
   従来の値のまま維持される。既存の個別調整が無い箇所にだけ、この控えめな
   底上げ値が適用される。font-size・line-height・padding・margin・改行・
   カードサイズ・アニメーションは無変更。@media(max-width:600px)で明示的に
   囲み、PC側の値には一切影響しない。
   ========================================================================== */
@media (max-width: 600px) {
  .card__text,
  .def-list__desc,
  .reason__text,
  .worry-list__item,
  .note-box p,
  .flow__text,
  .faq__a,
  .table td:not(.is-price),
  .list-dot li,
  .section-lead,
  .info-panel__dl dd,
  .media__body p,
  .u-small,
  .form__hint,
  .contact-list__value,
  .profile-hero__body > p:not(.profile-hero__lead):not(.section-label) {
    letter-spacing: 0.03em;
  }
}

/* ==========================================================================
   PC専用：TOPヒーロー下の導入メッセージ2文（「ピアノのことは、専門的で〜」／
   「調律が必要かどうか〜」）。詰まり・小さめの指摘を受け、文字サイズ・
   letter-spacingとも少しだけ拡大する（ユーザー指定によりfont-size変更が
   許可されている数少ない箇所の1つ）。PC専用の.im-line（white-space:nowrap）は
   折り返し不可のため、実測のうえ最長行でも十分な余白が残る0.6pxに調整
   （0.05em=0.9pxでは最長行604px/コンテナ608pxとほぼ限界だったため）。
   【2回目の追加調整】まだ詰まって見えるとのフィードバックのため、
   0.6px→0.8pxへ再度実測のうえ広げる（0.8pxで最長行600px/コンテナ608px、
   8pxの余白を確認。文字サイズは今回変更しない）。
   【3回目の追加調整】font-size 19pxを実測したところ、letter-spacingが
   最小の0.8pxでも最長行607px（コンテナ608px、余白1px）となり、これ以上
   font-sizeを上げるとnowrap行が確実に折り返す／はみ出す物理的な上限に
   達しているため、font-sizeは18pxを維持し、letter-spacingのみ実測の
   安全マージン（4px）を確認して0.9pxまで追加で広げる。 */
@media (min-width: 601px) {
  .intro-message__text {
    font-size: 18px; /* 基準17px→18px（19pxでは幅が持たないため据え置き） */
    letter-spacing: 0.9px; /* 0.6px→0.8px→0.9px（約0.05em） */
  }
}

/* ==========================================================================
   PC専用：フッターCTA「まずは、気になることから。」の「、気」をさらに詰める
   「、」自体の位置は動かさず、直後の「気」側だけを左へ寄せる（既存の
   .cta__title-commaの仕組みをそのまま利用し、PC側の値だけを上書きする）。
   ========================================================================== */
@media (min-width: 601px) {
  .cta__title-comma {
    letter-spacing: -5.9px; /* 基準-5.5px→-5.9px（-0.4px） */
  }
}

/* ==========================================================================
   PC専用：指定箇所の改行を追加固定
   PC専用<br>はデフォルトで表示し、@media(max-width:600px)側でのみ非表示にする。
   スマホ側の改行は既存のスマホ専用<br>クラスがそのまま担当するため、
   このブロックはスマホ表示に一切影響しない（完全に別系統）。
   ========================================================================== */
.price-lead-break-pc,
.contact-lead-break-pc,
.maker-lead-break-pc,
.maker-note-break-pc,
.price-tuning-lead-break-pc,
.price-repair-lead-break-pc,
.repair-flow-break-pc,
.care-note-break-pc,
.about-fv-lead-break-pc {
  display: inline;
}
@media (max-width: 600px) {
  .price-lead-break-pc,
  .contact-lead-break-pc,
  .maker-lead-break-pc,
  .maker-note-break-pc,
  .price-tuning-lead-break-pc,
  .price-repair-lead-break-pc,
  .repair-flow-break-pc,
  .care-note-break-pc,
  .about-fv-lead-break-pc {
    display: none;
  }
}

/* ==========================================================================
   TOP（index.html）─ ヒーロー以降のセクション演出
   ヘッダー・ヒーローセクションには一切影響しない（.page-home #<各セクション>に
   スコープしたセレクタのみで構成）。IntersectionObserverで一度だけ再生し、
   スクロールを戻しても再演出しない。prefers-reduced-motionでは即表示に切り替える。
   セクションごとに「動く主役」を1つだけ与える方針：
   MESSAGE→文字／CHECK→カード／REASON→数字／SERVICE→下線／TUNER→写真／
   PRICE→構図／FLOW→縦線／FAQ→開閉／CONTACT→focus
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通：静かなフェード＋ごく短い上昇（4〜8px）。要素ごとにduration/delayを
   個別調整するための土台のみをここで定義する。
   -------------------------------------------------------------------------- */
.page-home .js-reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .js-reveal.is-in-view {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   02. MESSAGE ─ 「静けさ」担当。動く主役は文字。
   -------------------------------------------------------------------------- */
/* MESSAGEは通常のセクション見出しとは切り離した専用演出：
   1行目 → 2行目 → 一拍置いて2行目直下の短線、の3段階で静かに見せる。
   section-title__text／js-title-line（他タイトルの下線演出）は使用しない。 */
/* 大見出し：1行目→2行目（スマホは3行目まで）の順で、ごく小さく下から上へ */
.page-home #message .intro-message__title .im-line {
  display: block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #message .intro-message__title.is-in-view .im-line {
  opacity: 1;
  transform: none;
}
.page-home #message .intro-message__title .im-set--pc .im-line:nth-child(1) { transition-delay: 120ms; }
.page-home #message .intro-message__title .im-set--pc .im-line:nth-child(2) { transition-delay: 450ms; }
.page-home #message .intro-message__title .im-set--sp > .im-line:nth-child(1) { transition-delay: 120ms; }
.page-home #message .intro-message__title .im-set--sp .im-line2-group .im-line:nth-child(1) { transition-delay: 450ms; }
.page-home #message .intro-message__title .im-set--sp .im-line2-group .im-line:nth-child(2) { transition-delay: 510ms; }
/* 本文：見出しより少し遅れてopacity中心で表示（移動はごくわずか） */
.page-home #message .intro-message__text {
  transition-delay: 0.2s;
}
.page-home #message .intro-message__text.is-in-view {
  transform: none;
}
/* 短い金茶ライン：署名前ではなく「そう思ったことも、どうぞお話しください。」の
   直下に配置する。.im-line2-anchor は、PCでは2行目そのもの、スマホでは
   2行目が折り返した2行をまとめる専用ラッパー（.im-line2-group）に付与している。
   どちらもdisplay:inline-blockのshrink-to-fit幅を持つため、スマホでは
   折り返した2行のうち「長い方の行幅」が自動的にラッパーの実幅になる
   （auto幅のブロック子要素は親のinline-block幅いっぱいに広がるため、
   短い行も長い行の幅に合わせて中央揃えされ、見た目は変わらない）。
   ::afterをleft/right指定にすることで、固定pxではなく実幅に自動追従する
   長さにする。2行目の表示が落ち着いてから、左→右へ一度だけ静かに伸ばす。 */
.page-home #message .intro-message__title .im-line2-anchor {
  display: inline-block;
  position: relative;
}
.page-home #message .intro-message__title .im-line2-anchor::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 11px;
  /* letter-spacing（0.10em）が最後の文字の後ろにも入り、shrink-to-fit幅が
     見た目の文字幅よりわずかに右へ広がる分（実測+3.01px）をrightに加算し、
     ラインの中心を文字列の視覚的な中心に一致させている。さらに微調整として
     ライン全体を3px左へ平行移動（left-3px／right+3px）。 */
  right: 20.01px;
  margin-top: 1px;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.64;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 1.4s;
}
.page-home #message .intro-message__title.is-in-view .im-line2-anchor::after {
  transform: scaleX(1);
}
/* ごく薄い光溜まり（装飾と認識されない強さ） */
.page-home #message { position: relative; overflow: hidden; }
.page-home #message::after {
  content: "";
  position: absolute;
  top: 6%;
  right: 4%;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(141, 124, 96, 0.05), rgba(141, 124, 96, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.page-home #message .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   03. CHECK ─ 「こんなお悩み、ありませんか？」動く主役はカード。
   -------------------------------------------------------------------------- */
.page-home #worry .worry-list__item {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              border-color var(--transition);
}
.page-home #worry .worry-list.is-in-view .worry-list__item {
  opacity: 1;
  transform: none;
}
.page-home #worry .worry-list__item:nth-child(1) { transition-delay: 0ms; }
.page-home #worry .worry-list__item:nth-child(2) { transition-delay: 55ms; }
.page-home #worry .worry-list__item:nth-child(3) { transition-delay: 110ms; }
.page-home #worry .worry-list__item:nth-child(4) { transition-delay: 165ms; }
.page-home #worry .worry-list__item:nth-child(5) { transition-delay: 220ms; }
.page-home #worry .worry-list__item:nth-child(6) { transition-delay: 275ms; }
/* hover（PCのみ意味を持つ。タップには依存させない） */
.page-home #worry .worry-list__item::before {
  transition: background-color var(--transition);
}
.page-home #worry .worry-list__item:hover {
  border-color: var(--color-wood-soft);
  transform: translateY(-2px);
}
.page-home #worry .worry-list.is-in-view .worry-list__item:hover {
  transform: translateY(-2px);
}
.page-home #worry .worry-list__item:hover::before {
  background-color: var(--color-wood);
}
.page-home #worry .note-box {
  transition-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   04. REASON ─ 「選ばれる3つの理由」動く主役は数字。
   番号→細線→見出しの順に視線が流れるよう時間差をつける。
   -------------------------------------------------------------------------- */
.page-home #reason .reason-list .reason:nth-child(1) { --reason-delay: 0ms; }
.page-home #reason .reason-list .reason:nth-child(2) { --reason-delay: 90ms; }
.page-home #reason .reason-list .reason:nth-child(3) { --reason-delay: 180ms; }
.page-home #reason .reason__head,
.page-home #reason .reason__title,
.page-home #reason .reason__text {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #reason .reason-list.is-in-view .reason__head { transition-delay: var(--reason-delay, 0ms); }
.page-home #reason .reason-list.is-in-view .reason__title { transition-delay: calc(var(--reason-delay, 0ms) + 90ms); }
.page-home #reason .reason-list.is-in-view .reason__text { transition-delay: calc(var(--reason-delay, 0ms) + 170ms); }
.page-home #reason .reason-list.is-in-view .reason__head,
.page-home #reason .reason-list.is-in-view .reason__title,
.page-home #reason .reason-list.is-in-view .reason__text {
  opacity: 1;
  transform: none;
}
/* hoverはカード全体を浮かせず、番号と細線だけが反応する */
.page-home #reason .reason {
  transition: border-color var(--transition);
}
.page-home #reason .reason:hover {
  border-color: var(--color-wood-soft);
  box-shadow: 0 8px 24px rgba(30, 35, 32, 0.06);
  transform: none;
}
.page-home #reason .reason__num {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #reason .reason:hover .reason__num {
  transform: translateY(-1.5px);
}
.page-home #reason .reason__num::after {
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #reason .reason:hover .reason__num::after {
  width: 34px;
}
.page-home #reason .reason:nth-of-type(3):hover .reason__num::after {
  background-color: var(--color-green-muted);
}

/* --------------------------------------------------------------------------
   05. SERVICE ─ 「サービス内容」動く主役はカード下部のリンク下線。
   -------------------------------------------------------------------------- */
.page-home #service .card-grid .card {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.page-home #service .card-grid.is-in-view .card {
  opacity: 1;
  transform: none;
}
.page-home #service .card-grid .card:nth-child(1) { transition-delay: 0ms; }
.page-home #service .card-grid .card:nth-child(2) { transition-delay: 65ms; }
.page-home #service .card-grid .card:nth-child(3) { transition-delay: 130ms; }
/* カードhover：大きなshadowは付けず、背景がごくわずかに温かくなる程度。
   REASONのhover（0.06）より明確に軽い0.05に留める */
.page-home #service .card:hover {
  border-color: var(--color-wood-soft);
  box-shadow: 0 6px 18px rgba(38, 48, 44, 0.05);
  transform: none;
  background-color: color-mix(in srgb, var(--color-accent-soft) 35%, #fff);
}
.page-home #service .card__icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #service .card:hover .card__icon {
  transform: translateY(-2px);
}
/* カード下部のリンク：下線はhoverで初めて左→右へ伸びる。矢印はわずかに右へ */
.page-home #service .card__foot .link-arrow {
  position: relative;
  border-bottom-color: transparent;
}
.page-home #service .card__foot .link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #service .card__foot .link-arrow:hover::after {
  transform: scaleX(1);
}
.page-home #service .card__foot .link-arrow .button__arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #service .card__foot .link-arrow:hover .button__arrow {
  transform: translateX(2.5px);
}

/* --------------------------------------------------------------------------
   06. TUNER ─ 動く主役は写真。scale(1.03)→scale(1)のゆっくりした収束。
   -------------------------------------------------------------------------- */
.page-home #profile .js-photo img {
  transform: scale(1.03);
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #profile .js-photo.is-in-view img {
  transform: scale(1);
}
.page-home #profile .media__body .js-reveal:nth-of-type(1) { transition-delay: 0.1s; }
.page-home #profile .media__body .js-reveal:nth-of-type(2) { transition-delay: 0.28s; }

/* --------------------------------------------------------------------------
   07. PRICE ─ 動く主役は構図。PCのみ、左＝代表料金2つ／右＝補足3項目の
   非対称2カラムにする。左が主役、右は一段小さく静かに。
   -------------------------------------------------------------------------- */
.page-home #price .price-summary.js-reveal { transition-delay: 0.12s; }
.page-home #price .button-group.js-reveal { transition-delay: 0.24s; }
@media (min-width: 601px) {
  .page-home #price .price-summary {
    display: flex;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  .page-home #price .price-summary__main {
    flex: 1 1 auto;
  }
  .page-home #price .price-summary__sub {
    flex: 0 0 auto;
    width: clamp(14rem, 22vw, 17rem);
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(2rem, 4vw, 2.75rem);
    border-top: none;
    border-left: 1px solid rgba(141, 124, 96, 0.32);
  }
}

/* --------------------------------------------------------------------------
   08. FLOW ─ 動く主役は縦の細線。「線が進む＝流れが進む」。
   -------------------------------------------------------------------------- */
.page-home #flow .flow {
  position: relative;
  --flow-line-x: 32px; /* 数字の右端(約20.4px)から+11.6px（PC目安+4〜5px） */
  --flow-line-gap: 11px; /* 縦線と横線の間隔（8〜14px目安の中央） */
  --flow-line-opacity: 0.44; /* 縦線：横線(0.27)より少しだけ存在感を持たせる */
  --flow-line-hline-opacity: 0.27; /* 横線：縦線より一段控えめ */
}
@media (max-width: 600px) {
  .page-home #flow .flow {
    --flow-line-x: 34px; /* スマホは数字〜縦線をやや広めに（+13.6px） */
    --flow-line-opacity: 0.4; /* スマホは縦線が強く見えやすいためPCより少し弱める */
  }
}
/* 縦線・横線とも同一のベースカラー（既存の金茶系アクセントカラー）を使用し、
   色相はそろえたままopacityだけで役割を分ける。以前は縦線の下地(::before)に
   グレー系(--color-border)を使っていたため、金茶色の::afterと重なって
   「縦線だけグレー寄り」に見えていた。下地を廃止し、::after単独（アニメーション対象は
   従来どおり変更なし）で色を統一する。 */
.page-home #flow .flow::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--flow-line-x);
  width: 1px;
  height: 0;
  background-color: var(--color-accent);
  opacity: var(--flow-line-opacity);
  transition: height 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #flow .flow.is-in-view::after {
  height: 100%;
}
/* 各ステップの横罫線：縦線の位置から直接始めず、縦線の右に隙間を空けてから開始する
   （縦線┼横線の交差＝表罫線に見える問題を解消。右端は既存どおりセクション幅いっぱい）。
   色は縦線と完全に同じ金茶系にそろえ、opacityだけを下げて「区切り」の役割に留める。 */
.page-home #flow .flow__item {
  position: relative;
  border-top: none;
}
.page-home #flow .flow__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--flow-line-x) + var(--flow-line-gap));
  right: 0;
  height: 1px;
  background-color: var(--color-accent);
  opacity: var(--flow-line-hline-opacity);
}
.page-home #flow .flow__item:last-child {
  border-bottom: none;
}
.page-home #flow .flow__item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--flow-line-x) + var(--flow-line-gap));
  right: 0;
  height: 1px;
  background-color: var(--color-accent);
  opacity: var(--flow-line-hline-opacity);
}
.page-home #flow .flow__item:nth-child(1) { --flow-delay: 120ms; }
.page-home #flow .flow__item:nth-child(2) { --flow-delay: 350ms; }
.page-home #flow .flow__item:nth-child(3) { --flow-delay: 580ms; }
.page-home #flow .flow__item:nth-child(4) { --flow-delay: 810ms; }
.page-home #flow .flow__item:nth-child(5) { --flow-delay: 1040ms; }
.page-home #flow .flow__num,
.page-home #flow .flow__title,
.page-home #flow .flow__text {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #flow .flow.is-in-view .flow__num { transition-delay: var(--flow-delay, 0ms); }
.page-home #flow .flow.is-in-view .flow__title { transition-delay: calc(var(--flow-delay, 0ms) + 60ms); }
.page-home #flow .flow.is-in-view .flow__text { transition-delay: calc(var(--flow-delay, 0ms) + 120ms); }
.page-home #flow .flow.is-in-view .flow__num,
.page-home #flow .flow.is-in-view .flow__title,
.page-home #flow .flow.is-in-view .flow__text {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   09. FAQ ─ 動く主役は開閉。デザイン変更は最小限。
   -------------------------------------------------------------------------- */
.page-home #faq .faq__item {
  transition: border-color var(--transition);
}
.page-home #faq .faq__item:hover {
  border-color: var(--color-border-strong);
}
.page-home #faq .faq__q::after {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color var(--transition);
}
.page-home #faq .faq__item:hover .faq__q::after {
  border-color: var(--color-accent);
}
.page-home #faq .faq__a {
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

/* --------------------------------------------------------------------------
   10. CONTACT ─ 動く主役はフォームのfocus（フォーム自体はcomponents.cssの
   既存focusスタイルで対応済みのため追加装飾なし）。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11. 日本語の大タイトル ─ 直下に短い下線を一度だけ描く。
   英字ラベル（::before）には一切触れない。日本語タイトル文字列だけを
   .section-title__text で囲み、display:inline-blockのshrink-to-fit幅
   （＝文字列そのものの実幅、2行タイトルは長い方の行幅）を親とする
   position:absoluteの::afterに left/right を指定することで、文字列の
   左右端から一定量だけ内側に入った下線幅を自動算出する。widthや％、
   clampによる比率計算・タイトルごとの個別値は使用しない。
   -------------------------------------------------------------------------- */
.page-home .section-title__text {
  position: relative;
  display: inline-block;
}
.page-home .section-title__text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  right: 10px;
  /* 距離の基準：見出しのline-height（--lh-heading:1.65）は上下にleadingを
     含むため、ボックス下端からそのまま余白を取ると文字から離れて見える。
     実測した半行送り分をマイナス補正し、実際の文字の見た目下端から約6pxに
     見える位置まで引き上げている（PC/スマホでフォントサイズが変わるため
     補正量も分けている）。 */
  margin-top: -4px;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.58;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
}
.page-home .section-title__text.js-title-line.is-in-view::after {
  transform: scaleX(1);
}
.page-home #worry .worry-line2 {
  display: inline-block;
  position: relative;
}

/* TUNER（プロフィール見出し）：フォントサイズが小さい分、見た目距離の補正値
   だけ個別化する。既存のjs-reveal／is-in-viewをそのまま再利用する
   （新規に個別observeはしない）。左右insetはベースの10px/8pxを踏襲しつつ、
   letter-spacing（0.10em）が最後の文字の後ろにも入り、shrink-to-fit幅が
   見た目の文字幅よりわずかに右へ広がる分だけrightを追加補正し、
   ラインの中心を文字列の視覚的な中心に一致させている。さらに微調整として
   ライン全体を3px左へ平行移動（left-3px／right+3px）。 */
.page-home #profile .section-title__text::after {
  left: 7px;
  right: 14.85px;
  margin-top: -1px;
}
.page-home #profile .media__title.is-in-view .section-title__text::after {
  transform: scaleX(1);
}

@media (max-width: 600px) {
  .page-home .section-title__text::after {
    left: 8px;
    right: 8px;
    margin-top: -2.5px;
  }
  .page-home #profile .section-title__text::after {
    left: 5px;
    right: 12.71px;
    margin-top: -0.5px;
  }

  /* CHECK：スマホは「こんなお悩み、」と「ありませんか？」の2行になるため、
     下線は下段「ありませんか？」の実幅だけを基準にする（外側の
     section-title__text全体の線はスマホ時のみ無効化し、代わりに
     worry-line2自身の::afterを表示する）。letter-spacing分の右側補正込み。 */
  .page-home #worry .section-title__text::after {
    content: none;
  }
  .page-home #worry .worry-line2::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 5px;
    right: 13.6px;
    margin-top: -2.5px;
    height: 1px;
    background-color: var(--color-accent);
    opacity: 0.58;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s;
  }
  .page-home #worry .section-title__text.js-title-line.is-in-view .worry-line2::after {
    transform: scaleX(1);
  }

  /* MESSAGE：スマホは動きをさらに小さくする（PC 4px → スマホ 2.5px） */
  .page-home #message .intro-message__title .im-line {
    transform: translateY(2.5px);
  }
  .page-home #message .intro-message__title .im-line2-anchor::after {
    left: 9px;
    right: 17.6px;
    margin-top: 3px;
  }
}

/* --------------------------------------------------------------------------
   reduced-motion：即表示に切り替え、線・写真・数字などすべての演出を止める。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-home .js-reveal,
  .page-home .js-reveal *,
  .page-home #message .intro-message__title .im-line,
  .page-home #message .intro-message__title .im-line2-anchor::after,
  .page-home #worry .worry-list__item,
  .page-home #reason .reason__head,
  .page-home #reason .reason__title,
  .page-home #reason .reason__text,
  .page-home #service .card-grid .card,
  .page-home #profile .js-photo img,
  .page-home #flow .flow::after,
  .page-home #flow .flow__num,
  .page-home #flow .flow__title,
  .page-home #flow .flow__text,
  .page-home #faq .faq__a,
  .page-home .section-title__text::after,
  .page-home #worry .worry-line2::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   調律についてページ FV 試作 ─ 英字「TUNING」を主役化し、日本語見出し
   「調律について」を一段控えめな補助見出しにする。対象は .page-tuning の
   FVのみ（body.page-tuningでスコープ）。他ページの.page-hero／.page-hero__label／
   .page-hero__title（共通パーツ）や、他ページ自身のFVには一切影響しない。
   スクロールトリガーではなく、ページ読み込み直後に一度だけ再生する
   @keyframesアニメーションのみで構成し、JS依存・FOUCを回避する。
   ========================================================================== */
/* FV背景：images/tuning-hero-bg.png（日本語ファイル名のまま本番環境
   harmony-piano-preview.sh-connect.netへデプロイすると404になる不具合が
   確認されたため、images/配下のASCIIファイル名へ移動・リネーム済み）。
   ::beforeに画像＋transform:scale()でズームし、::afterに白オーバーレイを
   重ねる（テキスト要素自体の色・shadowには一切触れない）。静止背景のみで、
   背景自体へのアニメーションは追加しない。.page-hero__innerだけ前面へ。 */
.page-tuning .page-hero {
  position: relative;
  overflow: hidden;
  /* サブキャッチ帯の上に余白を足した分、下側のpaddingを同量だけ削り、
     FV全体の高さ（既存のpadding-block由来）を変更前と同じに保つ。
     上側paddingは既存のまま（TUNING等の縦位置は不変）。 */
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 18px);
}
.page-tuning .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/tuning-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 74% 24%;
  transform: scale(1.15);
  transform-origin: center center;
  z-index: 0;
  /* 「引き→寄り」のゆっくりしたズーム。background-positionは動かさず、
     scaleのみをcenter起点で時間変化させることで、構図の基準点を保ったまま
     じわっと寄っていくように見せる。最終scaleは従来値(1.15)のまま。 */
  animation-name: tuning-hero-bg-zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes tuning-hero-bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.page-tuning .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.62);
  z-index: 1;
}
.page-tuning .page-hero__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .page-tuning .page-hero::before {
    background-position: 128% 15%;
    transform: scale(1.32);
    animation-name: tuning-hero-bg-zoom-mobile;
  }
  .page-tuning .page-hero::after {
    background-color: rgba(255, 255, 255, 0.68);
  }
  .page-tuning .page-hero {
    padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 30px);
  }
}
@keyframes tuning-hero-bg-zoom-mobile {
  from { transform: scale(1.15); }
  to   { transform: scale(1.32); }
}

.page-tuning .tuning-hero-eyebrow {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--color-text-strong);
}
.page-tuning .tuning-hero-char {
  display: inline-block;
  opacity: 0;
  animation-name: tuning-hero-char-in, tuning-hero-color;
  animation-duration: 1.05s, 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both, both;
  /* 文字の背景写真からの分離用：ごく薄い白のみ、発光に見えない強さに留める。 */
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.42);
  /* 全文字共通：TUNING完成（最終文字delay+duration＝約1.45s）から0.20秒の
     短い静止を挟み、6文字同時に金茶へ変化する（1文字ずつの順送りにはしない）。 */
  animation-delay: 0s, 1.65s;
}
/* 文字ごとに向き・量をわずかに変え、機械的な一律移動に見えないようにする
   （T=ほぼ定位置、以降は横/縦を交互に、量も3〜6px程度で少しずつ変える）。
   このoffset自体は前回から変更していない。 */
.page-tuning .tuning-hero-char:nth-child(1) { --tx: 1px;  --ty: 2px;  animation-delay: 0s, 1.65s; }
.page-tuning .tuning-hero-char:nth-child(2) { --tx: 4px;  --ty: 0px;  animation-delay: 0.08s, 1.65s; }
.page-tuning .tuning-hero-char:nth-child(3) { --tx: 0px;  --ty: 4px;  animation-delay: 0.16s, 1.65s; }
.page-tuning .tuning-hero-char:nth-child(4) { --tx: 3px;  --ty: 2px;  animation-delay: 0.24s, 1.65s; }
.page-tuning .tuning-hero-char:nth-child(5) { --tx: 0px;  --ty: -4px; animation-delay: 0.32s, 1.65s; }
.page-tuning .tuning-hero-char:nth-child(6) { --tx: 5px;  --ty: 3px;  animation-delay: 0.4s, 1.65s; }
@keyframes tuning-hero-char-in {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes tuning-hero-color {
  from { color: var(--color-text-strong); }
  to   { color: var(--color-accent); }
}

/* 日本語見出し「調律について」：TUNINGの主役化に合わせ一段控えめなサイズへ。
   letter-spacing・フォント・色は既存のまま変更しない。TUNING全体の色変化開始と
   ほぼ同時に静かにフェードアップする。明朝の輪郭がぼやけないよう、白shadowの
   blurはTUNINGよりわずかに絞る。 */
.page-tuning .tuning-hero-title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  opacity: 0;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.42);
  animation-name: tuning-hero-fade-up;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.65s;
  animation-fill-mode: both;
  --fy: 5px;
}
/* 「調律について」の文字幅をしっかり受け止めるライン。文字列幅いっぱいには
   せず、実測した文字列自身の実幅（inline-blockのshrink-to-fit幅）の約92％を
   width:%で算出する。中央配置はleft:50%+margin-left:-46%（アニメーションの
   scaleXとは別プロパティにして干渉させない、TOPの下線群と同じ考え方）。 */
.page-tuning .tuning-hero-jline {
  position: relative;
  display: inline-block;
}
.page-tuning .tuning-hero-jline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 92%;
  margin-left: -46%;
  /* line-height由来の余白を差し引き、実際の文字の見た目下端から約10pxに
     見える位置にしている（実測補正込み）。 */
  margin-top: 1.6px;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: tuning-hero-line-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.93s;
  animation-fill-mode: both;
}
@keyframes tuning-hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* サブキャッチ：ラインが伸び始めたあと、さらに遅れて静かに表示する。
   文言・改行は変更しない。今回は文章ブロック全体を一度にフェードアップする
   （1文字/1行ずつの分割はしない）。 */
.page-tuning .tuning-hero-lead {
  opacity: 0;
  /* サブキャッチの背景は「帯」「カード」に見せないため、単色の塗りは使わず、
     文字の後ろにだけ光が差すような左→右の白グラデーション（::before）で
     表現する。本体側は色を持たず、position:relative + z-index:0 で
     ::before（z-index:-1）を自身の背後に固定するためだけに使う。
     display:inline-block + width:fit-contentは維持し、テキスト自体の
     折り返し・左端位置は変更しない（グラデーションの余韻はテキスト幅の
     外側＝::beforeのright:負のオフセットで確保する）。 */
  position: relative;
  z-index: 0;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  border-radius: 0;
  padding: 10px 13px;
  /* タイトル下線とサブキャッチ帯の間に一呼吸分の余白を作るため、
     従来のmargin-top（padding相殺分＝calc(8px-10px)）にPC向けの+18pxを加算。
     スマホは別途mediaクエリでさらに広い値へ上書きする。 */
  margin-top: calc(var(--space-2xs) - 10px + 18px);
  margin-left: -13px;
  animation-name: tuning-hero-fade-up;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 2.18s;
  animation-fill-mode: both;
  --fy: 7px;
}
.page-tuning .tuning-hero-lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  /* テキストの実幅より外側にフェード用の余白を確保し、白の終端が
     文字の上に重ならないようにする（右端は完全透明＝境界線を作らない）。 */
  right: -38px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.44) 42%,
    rgba(255, 255, 255, 0.22) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}
@keyframes tuning-hero-fade-up {
  from { opacity: 0; transform: translateY(var(--fy, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .page-tuning .tuning-hero-char:nth-child(1) { --tx: 1px; --ty: 1px; }
  .page-tuning .tuning-hero-char:nth-child(2) { --tx: 3px; --ty: 0px; }
  .page-tuning .tuning-hero-char:nth-child(3) { --tx: 0px; --ty: 3px; }
  .page-tuning .tuning-hero-char:nth-child(4) { --tx: 2px; --ty: 1px; }
  .page-tuning .tuning-hero-char:nth-child(5) { --tx: 0px; --ty: -3px; }
  .page-tuning .tuning-hero-char:nth-child(6) { --tx: 3px; --ty: 2px; }
  .page-tuning .tuning-hero-jline::after {
    margin-top: 3.5px;
  }
  /* スマホはPCよりさらに大きく間隔を空ける（現状比+約30px）。 */
  .page-tuning .tuning-hero-lead {
    margin-top: calc(var(--space-2xs) - 10px + 30px);
  }
  /* スマホは白面積が大きく見えやすいため、PCよりさらに手前（左寄り）から
     透明へ抜き始める。文言・改行・左位置・縦位置はここでは一切変更しない。 */
  .page-tuning .tuning-hero-lead::before {
    right: -30px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.4) 32%,
      rgba(255, 255, 255, 0.18) 60%,
      rgba(255, 255, 255, 0) 88%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-tuning .page-hero::before {
    animation: none !important;
  }
  .page-tuning .tuning-hero-char,
  .page-tuning .tuning-hero-title,
  .page-tuning .tuning-hero-lead,
  .page-tuning .tuning-hero-jline::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-tuning .tuning-hero-char {
    color: var(--color-accent) !important;
  }
}

/* ==========================================================================
   修理・メンテナンスページ FV ─ 「調律について」ページFVと同じ設計思想・
   同じ完成度で構築。対象は .page-repair のFVのみ（body.page-repairでスコープ）。
   tuning-hero関連クラスは一切参照せず、repair-hero-*として独立実装する
   （実装の型は同一だが、CSSの実体は共用しない＝他ページへ影響しない）。
   ========================================================================== */
.page-repair .page-hero {
  position: relative;
  overflow: hidden;
  /* サブキャッチのmargin-top増加分と同量、下側paddingを削り、FV全体の高さを
     既存padding-block由来の基準（＝「調律について」ページFVと同じ高さ）に保つ。 */
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 18px);
}
.page-repair .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/repair-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 62% 30%;
  transform: scale(1.15);
  transform-origin: center center;
  z-index: 0;
  /* 「引き→寄り」のゆっくりしたズーム。background-positionは固定のまま、
     scaleのみをcenter起点で時間変化させる（「調律について」ページと同じ設計）。 */
  animation-name: repair-hero-bg-zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes repair-hero-bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.page-repair .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.62);
  z-index: 1;
}
.page-repair .page-hero__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .page-repair .page-hero::before {
    background-position: 78% 20%;
    transform: scale(1.32);
    animation-name: repair-hero-bg-zoom-mobile;
  }
  .page-repair .page-hero::after {
    background-color: rgba(255, 255, 255, 0.68);
  }
  .page-repair .page-hero {
    /* サブキャッチのmargin-top(+30px)に加え、段落まとまり用のgroup2margin-top(+10px)
       の分も同量削り、FV高さを「調律について」ページと揃える。 */
    padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 40px);
  }
}
@keyframes repair-hero-bg-zoom-mobile {
  from { transform: scale(1.15); }
  to   { transform: scale(1.32); }
}

.page-repair .repair-hero-eyebrow {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--color-text-strong);
}
.page-repair .repair-hero-char {
  display: inline-block;
  opacity: 0;
  animation-name: repair-hero-char-in, repair-hero-color;
  animation-duration: 1.05s, 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both, both;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.42);
  animation-delay: 0s, 1.65s;
}
.page-repair .repair-hero-char:nth-child(1) { --tx: 1px;  --ty: 2px;  animation-delay: 0s, 1.65s; }
.page-repair .repair-hero-char:nth-child(2) { --tx: 4px;  --ty: 0px;  animation-delay: 0.08s, 1.65s; }
.page-repair .repair-hero-char:nth-child(3) { --tx: 0px;  --ty: 4px;  animation-delay: 0.16s, 1.65s; }
.page-repair .repair-hero-char:nth-child(4) { --tx: 3px;  --ty: 2px;  animation-delay: 0.24s, 1.65s; }
.page-repair .repair-hero-char:nth-child(5) { --tx: 0px;  --ty: -4px; animation-delay: 0.32s, 1.65s; }
.page-repair .repair-hero-char:nth-child(6) { --tx: 5px;  --ty: 3px;  animation-delay: 0.4s, 1.65s; }
@keyframes repair-hero-char-in {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes repair-hero-color {
  from { color: var(--color-text-strong); }
  to   { color: var(--color-accent); }
}

.page-repair .repair-hero-title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  opacity: 0;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.42);
  animation-name: repair-hero-fade-up;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.65s;
  animation-fill-mode: both;
  --fy: 5px;
}
.page-repair .repair-hero-jline {
  position: relative;
  display: inline-block;
}
.page-repair .repair-hero-jline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 92%;
  margin-left: -46%;
  margin-top: 1.6px;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: repair-hero-line-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.93s;
  animation-fill-mode: both;
}
@keyframes repair-hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.page-repair .repair-hero-lead {
  opacity: 0;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  border-radius: 0;
  padding: 10px 13px;
  margin-top: calc(var(--space-2xs) - 10px + 18px);
  margin-left: -13px;
  animation-name: repair-hero-fade-up;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 2.18s;
  animation-fill-mode: both;
  --fy: 7px;
}
.page-repair .repair-hero-lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: -38px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.44) 42%,
    rgba(255, 255, 255, 0.22) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}
@keyframes repair-hero-fade-up {
  from { opacity: 0; transform: translateY(var(--fy, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}
.repair-fv-lead-break-mobile {
  display: none;
}
/* 3-4行目のまとまり：PCでは通常のinline文字列と同じ見え方のまま、
   スマホでだけmargin-topを持てるようinline-block化する（幅・改行構造は変えない）。 */
.repair-hero-lead-group2 {
  display: inline-block;
}

@media (max-width: 600px) {
  .page-repair .repair-hero-char:nth-child(1) { --tx: 1px; --ty: 1px; }
  .page-repair .repair-hero-char:nth-child(2) { --tx: 3px; --ty: 0px; }
  .page-repair .repair-hero-char:nth-child(3) { --tx: 0px; --ty: 3px; }
  .page-repair .repair-hero-char:nth-child(4) { --tx: 2px; --ty: 1px; }
  .page-repair .repair-hero-char:nth-child(5) { --tx: 0px; --ty: -3px; }
  .page-repair .repair-hero-char:nth-child(6) { --tx: 3px; --ty: 2px; }
  .page-repair .repair-hero-jline::after {
    margin-top: 3.5px;
  }
  .page-repair .repair-hero-lead {
    margin-top: calc(var(--space-2xs) - 10px + 30px);
  }
  .page-repair .repair-hero-lead::before {
    right: -30px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.4) 32%,
      rgba(255, 255, 255, 0.18) 60%,
      rgba(255, 255, 255, 0) 88%
    );
  }
  /* サブキャッチのスマホ専用改行：1-2行目／3-4行目のまとまりが見えるよう、
     3-4行目を包むspanにだけ小さなmargin-topを足す（段落を大きく空けすぎない）。
     <br>はheightを持てない（置換要素扱いのため）ので、実要素のspanで空ける。 */
  .repair-fv-lead-break-mobile {
    display: inline;
  }
  .repair-hero-lead-group2 {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-repair .page-hero::before {
    animation: none !important;
  }
  .page-repair .repair-hero-char,
  .page-repair .repair-hero-title,
  .page-repair .repair-hero-lead,
  .page-repair .repair-hero-jline::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-repair .repair-hero-char {
    color: var(--color-accent) !important;
  }
}

/* ==========================================================================
   料金案内ページ FV ─ 「調律について」ページFVと同じ設計思想・同じ完成度で
   構築。対象は .page-price のFVのみ（body.page-priceでスコープ）。
   tuning-hero・repair-hero関連クラスは一切参照せず、price-hero-*として
   独立実装する（実装の型は同一だが、CSSの実体は共用しない）。
   ========================================================================== */
.page-price .page-hero {
  position: relative;
  overflow: hidden;
  /* サブキャッチのmargin-top増加分と同量、下側paddingを削り、FV全体の高さを
     既存padding-block由来の基準（＝「調律について」ページFVと同じ高さ）に保つ。 */
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 18px);
}
.page-price .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/price-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 66% 46%;
  transform: scale(1.15);
  transform-origin: center center;
  z-index: 0;
  /* 「引き→寄り」のゆっくりしたズーム。background-positionは固定のまま、
     scaleのみをcenter起点で時間変化させる（「調律について」ページと同じ設計）。 */
  animation-name: price-hero-bg-zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes price-hero-bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.page-price .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* PC版のみ：写真そのものが認識できる程度まで白オーバーレイを弱める
     （スマホ版は@media内で0.68のまま維持、ここでは一切触れない）。 */
  background-color: rgba(255, 255, 255, 0.25);
  z-index: 1;
}
.page-price .page-hero__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .page-price .page-hero::before {
    background-position: 82% 38%;
    transform: scale(1.32);
    animation-name: price-hero-bg-zoom-mobile;
  }
  .page-price .page-hero::after {
    background-color: rgba(255, 255, 255, 0.68);
  }
  .page-price .page-hero {
    padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 30px);
  }
}
@keyframes price-hero-bg-zoom-mobile {
  from { transform: scale(1.15); }
  to   { transform: scale(1.32); }
}

.page-price .price-hero-eyebrow {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--color-text-strong);
}
.page-price .price-hero-char {
  display: inline-block;
  opacity: 0;
  animation-name: price-hero-char-in, price-hero-color;
  animation-duration: 1.05s, 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both, both;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.42);
  /* PRICEは5文字（TUNING/REPAIRの6文字より1つ少ない）。色変化の開始タイミング
     (1.65s)自体は「調律について」ページと同じ値のまま変更しない。 */
  animation-delay: 0s, 1.65s;
}
.page-price .price-hero-char:nth-child(1) { --tx: 1px;  --ty: 2px;  animation-delay: 0s, 1.65s; }
.page-price .price-hero-char:nth-child(2) { --tx: 4px;  --ty: 0px;  animation-delay: 0.08s, 1.65s; }
.page-price .price-hero-char:nth-child(3) { --tx: 0px;  --ty: 4px;  animation-delay: 0.16s, 1.65s; }
.page-price .price-hero-char:nth-child(4) { --tx: 3px;  --ty: 2px;  animation-delay: 0.24s, 1.65s; }
.page-price .price-hero-char:nth-child(5) { --tx: 0px;  --ty: -4px; animation-delay: 0.32s, 1.65s; }
@keyframes price-hero-char-in {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes price-hero-color {
  from { color: var(--color-text-strong); }
  to   { color: var(--color-accent); }
}

.page-price .price-hero-title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  opacity: 0;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.42);
  animation-name: price-hero-fade-up;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.65s;
  animation-fill-mode: both;
  --fy: 5px;
}
.page-price .price-hero-jline {
  position: relative;
  display: inline-block;
}
.page-price .price-hero-jline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 92%;
  margin-left: -46%;
  margin-top: 1.6px;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: price-hero-line-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.93s;
  animation-fill-mode: both;
}
@keyframes price-hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.page-price .price-hero-lead {
  opacity: 0;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  border-radius: 0;
  padding: 10px 13px;
  margin-top: calc(var(--space-2xs) - 10px + 18px);
  margin-left: -13px;
  animation-name: price-hero-fade-up;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 2.18s;
  animation-fill-mode: both;
  --fy: 7px;
}
.page-price .price-hero-lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: -38px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.44) 42%,
    rgba(255, 255, 255, 0.22) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}
@keyframes price-hero-fade-up {
  from { opacity: 0; transform: translateY(var(--fy, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .page-price .price-hero-char:nth-child(1) { --tx: 1px; --ty: 1px; }
  .page-price .price-hero-char:nth-child(2) { --tx: 3px; --ty: 0px; }
  .page-price .price-hero-char:nth-child(3) { --tx: 0px; --ty: 3px; }
  .page-price .price-hero-char:nth-child(4) { --tx: 2px; --ty: 1px; }
  .page-price .price-hero-char:nth-child(5) { --tx: 0px; --ty: -3px; }
  .page-price .price-hero-jline::after {
    margin-top: 3.5px;
  }
  .page-price .price-hero-lead {
    margin-top: calc(var(--space-2xs) - 10px + 30px);
  }
  .page-price .price-hero-lead::before {
    right: -30px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.4) 32%,
      rgba(255, 255, 255, 0.18) 60%,
      rgba(255, 255, 255, 0) 88%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-price .page-hero::before {
    animation: none !important;
  }
  .page-price .price-hero-char,
  .page-price .price-hero-title,
  .page-price .price-hero-lead,
  .page-price .price-hero-jline::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-price .price-hero-char {
    color: var(--color-accent) !important;
  }
}

/* ==========================================================================
   調律師についてページ FV ─ 「調律について」ページFVと同じ設計思想・同じ
   完成度で構築。対象は .page-about のFVのみ（body.page-aboutでスコープ）。
   tuning-hero・repair-hero・price-hero関連クラスは一切参照せず、
   about-hero-*として独立実装する（実装の型は同一だが、CSSの実体は共用しない）。
   ========================================================================== */
.page-about .page-hero {
  position: relative;
  overflow: hidden;
  /* サブキャッチのmargin-top増加分と同量、下側paddingを削り、FV全体の高さを
     既存padding-block由来の基準（＝「調律について」ページFVと同じ高さ）に保つ。 */
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 18px);
}
.page-about .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/about-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 38%;
  /* この背景写真のみ未加工（白ぼかし・明度調整なし）のため、他ページと同じ
     明るく低コントラストなトーンへCSS側で寄せる。ぼかし(blur)は使わず、
     brightness/contrast/saturateの調整のみで柔らかく見せる。
     人物・ピアノの主張がまだ強いとのフィードバックを受け、一段強める。 */
  filter: brightness(1.28) contrast(0.74) saturate(0.68);
  transform: scale(1.15);
  transform-origin: center center;
  z-index: 0;
  /* 「引き→寄り」のゆっくりしたズーム。background-positionは固定のまま、
     scaleのみをcenter起点で時間変化させる（「調律について」ページと同じ設計）。 */
  animation-name: about-hero-bg-zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes about-hero-bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.page-about .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 料金案内PC版で強すぎた反省を踏まえつつ、人物・ピアノの主張がまだ強いとの
     フィードバックにより一段強化（写真そのものは消さず、存在は残す）。 */
  background-color: rgba(255, 255, 255, 0.43);
  z-index: 1;
}
.page-about .page-hero__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .page-about .page-hero::before {
    background-position: 74% 30%;
    transform: scale(1.32);
    animation-name: about-hero-bg-zoom-mobile;
  }
  .page-about .page-hero::after {
    /* スマホは人物の面積が大きく見えるため、PCよりさらに一段強める。 */
    background-color: rgba(255, 255, 255, 0.49);
  }
  .page-about .page-hero {
    padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 30px);
  }
}
@keyframes about-hero-bg-zoom-mobile {
  from { transform: scale(1.15); }
  to   { transform: scale(1.32); }
}

.page-about .about-hero-eyebrow {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--color-text-strong);
}
.page-about .about-hero-char {
  display: inline-block;
  opacity: 0;
  animation-name: about-hero-char-in, about-hero-color;
  animation-duration: 1.05s, 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both, both;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.42);
  /* Tunerは5文字（TUNING/REPAIRの6文字より1つ少ない）。色変化の開始タイミング
     (1.65s)自体は「調律について」ページと同じ値のまま変更しない。 */
  animation-delay: 0s, 1.65s;
}
.page-about .about-hero-char:nth-child(1) { --tx: 1px;  --ty: 2px;  animation-delay: 0s, 1.65s; }
.page-about .about-hero-char:nth-child(2) { --tx: 4px;  --ty: 0px;  animation-delay: 0.08s, 1.65s; }
.page-about .about-hero-char:nth-child(3) { --tx: 0px;  --ty: 4px;  animation-delay: 0.16s, 1.65s; }
.page-about .about-hero-char:nth-child(4) { --tx: 3px;  --ty: 2px;  animation-delay: 0.24s, 1.65s; }
.page-about .about-hero-char:nth-child(5) { --tx: 0px;  --ty: -4px; animation-delay: 0.32s, 1.65s; }
@keyframes about-hero-char-in {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes about-hero-color {
  from { color: var(--color-text-strong); }
  to   { color: var(--color-accent); }
}

.page-about .about-hero-title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  opacity: 0;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.42);
  animation-name: about-hero-fade-up;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.65s;
  animation-fill-mode: both;
  --fy: 5px;
}
.page-about .about-hero-jline {
  position: relative;
  display: inline-block;
}
.page-about .about-hero-jline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 92%;
  margin-left: -46%;
  margin-top: 1.6px;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: about-hero-line-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.93s;
  animation-fill-mode: both;
}
@keyframes about-hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.page-about .about-hero-lead {
  opacity: 0;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  border-radius: 0;
  padding: 10px 13px;
  margin-top: calc(var(--space-2xs) - 10px + 18px);
  margin-left: -13px;
  animation-name: about-hero-fade-up;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 2.18s;
  animation-fill-mode: both;
  --fy: 7px;
}
.page-about .about-hero-lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: -38px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.44) 42%,
    rgba(255, 255, 255, 0.22) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}
@keyframes about-hero-fade-up {
  from { opacity: 0; transform: translateY(var(--fy, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .page-about .about-hero-char:nth-child(1) { --tx: 1px; --ty: 1px; }
  .page-about .about-hero-char:nth-child(2) { --tx: 3px; --ty: 0px; }
  .page-about .about-hero-char:nth-child(3) { --tx: 0px; --ty: 3px; }
  .page-about .about-hero-char:nth-child(4) { --tx: 2px; --ty: 1px; }
  .page-about .about-hero-char:nth-child(5) { --tx: 0px; --ty: -3px; }
  .page-about .about-hero-jline::after {
    margin-top: 3.5px;
  }
  .page-about .about-hero-lead {
    margin-top: calc(var(--space-2xs) - 10px + 30px);
  }
  .page-about .about-hero-lead::before {
    right: -30px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.4) 32%,
      rgba(255, 255, 255, 0.18) 60%,
      rgba(255, 255, 255, 0) 88%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .page-hero::before {
    animation: none !important;
  }
  .page-about .about-hero-char,
  .page-about .about-hero-title,
  .page-about .about-hero-lead,
  .page-about .about-hero-jline::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-about .about-hero-char {
    color: var(--color-accent) !important;
  }
}