@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);
  /* 横方向にごくわずかだけ拡大し、左端を基準に右へ流す。
     ピアノの奥（右端）が数%切れる代わりに、人物の頭が文字の右端から離れ、
     文字と髪が重ならないようにするための調整（人物・ピアノの拡大率自体は変えていません）。
     拡大率(scaleX)自体は変更せず、表示位置の調整としてtranslateXのみ追加。
     このヒーローはcontainer幅がimages/hero-photo-no-tools.pngの縦横比より
     わずかに広いため、object-fit:coverの実際のcrop計算はimg幅=container幅
     ぴったりで確定し、横方向の余剰がゼロになる（object-position のX値が
     見た目上まったく効かない）。そのため、この画像に限り、被写体の水平位置
     調整は実質的にこのtranslateXが担っている（実測のうえ調整）。 */
  transform: scaleX(1.17) translateX(-9%); /* -6%→-9%（数%だけ左へオプティカル調整。拡大率・上下位置は無変更） */
  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,
.profile-table-break-mobile,
.frequency-item3-break-mobile,
.notes-payment-break-mobile,
.message-doubt-break-mobile {
  display: none;
}
/* お問い合わせページの指定改行（「ご返信について」／FVサブキャッチ）。
   指定どおりの行構成は横幅が約410px以上ないと1行に収まらず、狭い端末では
   逆に「うえ、」「合も、」のような孤立行が出るため、収まる幅でのみ適用する
   （狭い端末では従来どおりの自然な折り返しになる）。文字サイズ・字間は無変更。 */
.reply-note-break-mobile,
.contact-fv-lead-break {
  display: none;
}
@media (min-width: 410px) and (max-width: 600px) {
  .reply-note-break-mobile,
  .contact-fv-lead-break {
    display: inline;
  }
}

/* サブキャッチのカーニング（文字種別）。ひらがな・カタカナ・記号などその他は現状維持。 */
.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: 13s;
  --hero-intro-bg-scale-from: 1.075;
  --hero-intro-bg-zoom-easing: linear;
  --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;
  /* PC専用：「心地よく整える」（2行目全体）を1フレーズとして、2行目の開示が
     完了してから少し間を空けて、柔らかな光の帯が左→右へ一度だけ通過する。
     background-clip: textで文字の内側だけに光を閉じ込め（.hero__title-line2-shine、
     複製テキストのオーバーレイ）、あわせてごく控えめな外側の光（drop-shadow、
     8〜18px）を同じタイミングで重ねる。「音」「を」には一切適用しない。 */
  --hero-intro-line2-glow-delay: 2.6s;
  --hero-intro-line2-glow-dur: 1.5s;
  --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/従来の中立値）より少しだけ寄せる。【追加調整】ズーム幅をさらに
   広げるため1.11→1.16へ。PC側のhero-intro-bg-zoomは変更していない。 */
@keyframes hero-intro-bg-zoom-mobile {
  from { transform: scale(var(--hero-intro-bg-scale-from)); }
  to   { transform: scale(1.16); }
}
@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; }
}
/* PC専用：「心地よく整える」の内側だけを、柔らかい生成り色の光の帯が
   左→右へ一度だけ通過する（.hero__title-line2-shineのbackground-position）。
   ゆっくり入る→中央付近でわずかに留まる→ゆっくり抜ける、という進み方。 */
@keyframes hero-intro-line2-shine {
  0%   { background-position: 92% 0; }
  22%  { background-position: 78% 0; }
  45%  { background-position: 54% 0; }
  55%  { background-position: 46% 0; }
  78%  { background-position: 22% 0; }
  100% { background-position: 8% 0; }
}
/* 同じフレーズの外側にごく控えめな光（8〜18px）を重ねる。帯が中央付近を
   通過するタイミングに合わせて0.2秒ほどピークを保ち、その前後はゆっくり
   立ち上がり・消える。 */
@keyframes hero-intro-line2-glow {
  0% {
    filter:
      drop-shadow(0 0 8px rgba(255, 253, 246, 0))
      drop-shadow(0 0 14px rgba(255, 250, 240, 0))
      drop-shadow(0 0 18px rgba(255, 250, 240, 0));
  }
  40% {
    filter:
      drop-shadow(0 0 8px rgba(255, 253, 246, 0.5))
      drop-shadow(0 0 14px rgba(255, 250, 240, 0.36))
      drop-shadow(0 0 18px rgba(255, 250, 240, 0.24));
  }
  47%, 60% {
    filter:
      drop-shadow(0 0 8px rgba(255, 253, 246, 0.85))
      drop-shadow(0 0 14px rgba(255, 250, 240, 0.6))
      drop-shadow(0 0 18px rgba(255, 250, 240, 0.4));
  }
  100% {
    filter:
      drop-shadow(0 0 8px rgba(255, 253, 246, 0))
      drop-shadow(0 0 14px rgba(255, 250, 240, 0))
      drop-shadow(0 0 18px 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; }
}
/* スマホ専用：「心地よく」の補助的な登場演出。位置はわずかに下（4px）から本来の位置へ、
   opacityは0.65→1へ。拡大縮小・発光は含まない、静かなfade+settleのみ。 */
@keyframes hero-intro-green-settle {
  from { opacity: 0.65; top: 3px; }
  to   { opacity: 1; top: 0; }
}
/* スマホ専用：「ピアノの音を」の1文字ずつの整列演出。鍵盤が沈んで静かに戻る
   感覚を連想させる、ごく控えめな一度だけの跳ね返り。動きは縦方向（top）だけで、
   横方向のばらつき・回転・拡大縮小・ぼかし・色変化は一切含まない。
   transformではなくposition:relativeのtopを使用する（display: inline-block化は
   グリフの実測はみ出し量を変え、文字間隔・行全体の横幅が変わってしまうため
   使用しない）。0%→72%は立ち上がり用のease-out（cubic-bezier(0.22,1,0.36,1)）、
   72%→100%はごくわずかな行き過ぎ（最大1px）からの着地用に減速の異なる
   cubic-bezier(0.4,0,0.2,1)を使い、跳ねが1回だけで収まるようにする。 */
@keyframes hero-title1-soft-bounce-in {
  0% {
    opacity: 0;
    top: 6px;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  72% {
    opacity: 1;
    top: -1.5px;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  100% {
    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;
  position: relative;
  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;
}
/* PC専用：「心地よく整える」（2行目全体）の内側だけに、柔らかい光の帯を
   一度だけ左→右へ通す。「音」「を」には何も付けない（既存の白い発光は削除済み）。
   ベースの文字色・text-shadowには一切触れず、同じ文字列を複製した専用オーバーレイ
   （.hero__title-line2-shine、HTML側で追加、aria-hidden）にのみ
   background-clip: textで光を描く。ベースとオーバーレイは別要素のため、
   「心地よく」の緑・「整える」の金茶という文字色が変わって見えることはない。
   オーバーレイはスマホでは常にdisplay:noneで無効（PC専用）。 */
.hero__title-line2-shine {
  display: inline-block;
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 92% 0;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(100deg,
    transparent 0%, transparent 40%,
    rgba(255, 253, 246, 0.85) 50%,
    transparent 60%, transparent 100%);
  animation:
    hero-intro-line2-shine var(--hero-intro-line2-glow-dur) linear var(--hero-intro-line2-glow-delay),
    hero-intro-line2-glow var(--hero-intro-line2-glow-dur) linear var(--hero-intro-line2-glow-delay);
}
/* PC専用：「音」1文字だけに付けていた着地アニメーションは削除し、
   「ピアノの音を」全体と同じ既存のブロック単位マスク開示（.hero__title-block--1
   のhero-intro-mask-reveal）だけで表示する状態に戻した。
   サブキャッチ・CTAの開始（2.05s／2.35s、下記）は現状を維持する。 */
@media (min-width: 1025px) {
  .hero {
    --hero-intro-lead-delay: 2.05s;
    --hero-intro-cta-delay: 2.35s;
  }
}
/* フェードアップの対象は.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-line2-shine {
    display: none;
  }
  .hero__title-shine {
    animation: none;
  }
  .hero__title-ch {
    animation: none;
    opacity: 1;
    top: 0;
    transform: 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);
}
/* 写真なし版：2カラム→1カラムにし、本文を読みやすい幅で中央に配置する。
   本文自体の左揃え・改行・カーニングには触れない（ブロック位置のみの調整）。 */
.profile-hero--text-only {
  grid-template-columns: 1fr;
}
.profile-hero--text-only .profile-hero__body {
  max-width: 44rem;
  margin-inline: auto;
}

/* 調律師の氏名ブロック */
.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: var(--sub-shadow-1, 0 4px 13px 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); }
/* 送信前の確認画面：既存の.info-panel／.contact-listをそのまま流用。
   お問い合わせ内容だけ、入力時の改行を保ったまま自然に折り返す。
   幅は親要素に追従するため、スマホでの横スクロールは発生しない。 */
#contact-confirm-message {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ==========================================================================
   下層ページ（調律について／修理・メンテナンス／料金案内／調律師について／
   お問い合わせ）─ 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) {
  /* シャドウ強度の指針を「写真＞小カード（常時）＞小カード（hover）＞大ボックス」の
     順に統一する（今回の追加調整）。--sub-shadow-2は小カードと同じ強さへ統一し、
     カードの種類によって影の強さが変わらないようにする。写真専用の値は
     --photo-shadowへ分離し、カード用のトークン変更の影響を受けないようにする。 */
  /* 【追加調整】前回設定した値から、体感10〜20%程度だけさらに強める
     （opacity・blurをごく少量調整。offsetの方向・spreadは変更しない）。 */
  --sub-shadow-1: 0 4px 13px rgba(38, 48, 44, 0.035); /* 0.03→0.035（小カード常時） */
  --sub-shadow-1-hover: 0 6px 17px rgba(38, 48, 44, 0.052); /* 0.045→0.052（小カードhover） */
  --sub-shadow-2: 0 4px 13px rgba(38, 48, 44, 0.035); /* 小カードと統一を維持 */
  --photo-shadow: 0 7px 21px rgba(38, 48, 44, 0.08); /* 0.06→0.08、20px→21px（写真専用。境界と奥行きが一段感じられる程度に強化） */
  --box-shadow-soft: 0 4px 15px rgba(38, 48, 44, 0.021); /* 0.018→0.021（大きな説明ボックス専用） */
}

/* --------------------------------------------------------------------------
   カード共通（対応内容カード／説明ブロック）：白背景＋薄い金茶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);
}

/* --------------------------------------------------------------------------
   症状・悩みリスト：他の白カード（.card等）と同じ強さのシャドウに統一する
   （今回の追加調整。カードの種類によって影の強さを変えない）。
   -------------------------------------------------------------------------- */
: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: var(--sub-shadow-1);
  transition: border-color var(--transition), box-shadow 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);
  box-shadow: var(--sub-shadow-1-hover);
  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;
  /* 他の白カードと同じ強さのシャドウに統一する（今回の追加調整）。 */
  box-shadow: var(--sub-shadow-1);
  transition: border-color var(--transition), box-shadow 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: var(--sub-shadow-1-hover);
}
: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: var(--box-shadow-soft);
}
: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) {
  /* スマホは画面が狭くシャドウが目につきやすいため、PCよりさらに一段弱める
     （.worry-list__item・.faq__item・.price-noteも同じ強さに統一。カードの
     種類による差は付けない）。【追加調整】前回比で体感10〜20%程度だけ強める。 */
  :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,
  :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,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .worry-list__item,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .worry-list__item:hover,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__item,
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .faq__item[open],
  .price-note {
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026); /* 0.022→0.026 */
    transform: none;
  }
  /* 大きな説明ボックスは、スマホでも小カードよりさらに弱いままにする。 */
  :is(.page-tuning, .page-repair, .page-price, .page-about, .page-contact) .note-box {
    box-shadow: 0 4px 13px rgba(38, 48, 44, 0.014); /* 0.012→0.014 */
  }
}

/* ==========================================================================
   下層ページ ─ 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;
}

/* 指定8箇所の下線：数値上は左右対称でも、末尾の句読点・長音符などのグリフ
   自体が持つ左右の余白差により視覚的に右寄りに見えるため、文字列ごとに
   実測（インク境界の左右余白差）に基づきleft/rightだけを個別調整する。
   太さ・色・不透明度・アニメーション・margin-topは変更しない。 */
.page-tuning #about-tuning .sub-title::after { left: 2.6px; right: 17.4px; } /* 5.1/14.9→再調整 */
.page-tuning #frequency .sub-title::after { left: 2.7px; right: 17.3px; } /* 5.1/14.9→再調整 */
.page-tuning #maker .sub-title::after { left: 8.2px; right: 11.8px; }
.page-tuning #care .sub-title::after { left: 6px; right: 14px; }
.page-repair #intro .sub-title::after { left: 2.7px; right: 17.3px; } /* 5.2/14.8→再調整 */
.page-repair #menu .sub-title::after { left: 8.4px; right: 11.6px; } /* 8.9/11.1→再調整 */
.page-about #skill .sub-title::after { left: 4px; right: 16px; } /* 6/14→再調整 */

@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;
  }
  .page-tuning #about-tuning .sub-title::after { left: 1.2px; right: 14.8px; } /* 3.5/12.5→再調整 */
  .page-tuning #frequency .sub-title::after { left: 2.1px; right: 13.9px; } /* 4.1/11.9→再調整 */
  .page-tuning #maker .sub-title::after { left: 6.5px; right: 9.5px; }
  .page-tuning #care .sub-title::after { left: 4px; right: 12px; }
  .page-repair #intro .sub-title::after { left: 1.3px; right: 14.7px; } /* 3.5/12.5→再調整 */
  .page-repair #menu .sub-title::after { left: 6.7px; right: 9.3px; } /* 7.1/8.9→再調整 */
  .page-about #skill .sub-title::after { left: 2.4px; right: 13.6px; } /* 4.3/11.7→再調整 */
}

@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;
  }
}

/* ==========================================================================
   下層ページ ─ 本文写真のスクロールイン演出（マスクワイプ：左→右）。
   対象はヒーロー・各FVを除く本文中の実写真（.media__figure）のみで、
   .photo-reveal／.photo-mask（HTML側で個別に付与）が付いた要素だけに限定する。
   薄いアイボリーのマスクが写真全体を覆っており、視界に入ると左→右へ静かに
   抜けて写真が現れる。主役はマスクの動きとし、写真本体にはごく弱いフェード
   のみを補助的に加える（大きな移動・ズームは行わない）。写真自体の
   box-shadowは.media__figure側の既存指定のままで、マスク実装による
   変更は加えていない。文章・タイトル・カード・アイコン等には一切関与しない。
   上のsub-reveal/sub-titleと同じIntersectionObserver・仕組み
   （一度だけ再生／prefers-reduced-motionで即表示）をそのまま流用する。
   【追加調整】マスクを完全不透明にせず、写真がうっすら透けるヴェールに
   近づける（opacity 0.88）。durationを少し伸ばした結果、既存のeasing
   （cubic-bezier(0.22,1,0.36,1)＝easeOutQuint相当）だと序盤で動き切り
   終盤が止まって見えたため、この演出だけeasing-outCubic寄りの
   cubic-bezier(0.33,1,0.68,1)に変更し、動きを最後まで均等に感じられる
   ようにする（他のreveal演出のeasingには触れない）。
   【追加調整2】マスク下で写真の存在感が弱く白っぽく見えたため、
   写真本体の開始opacityのみ0.88→0.93へ引き上げる
   （マスクopacity・duration・easing・方向・シャドウは変更しない）。
   【追加調整3】待機中（.is-revealedが付く前）は、写真枠自体
   （マスク・写真・シャドウを含む.photo-revealごと）を透明にしておき、
   表示領域に近づいて.is-revealedが付いた瞬間に短時間でふわっと出現させて
   から、既存のマスクワイプ（transform 1.05s/0.95s）を続けて再生する。
   これにより、スクロール前にベージュのマスク面だけが画面端で待機して
   見える状態を解消する。opacityはレイアウトに影響しないため、
   高さ・占有スペース・box-shadowの値自体には変更がない
   （出現前は不可視になるだけ）。マスクopacity・写真opacity・
   duration・easing・方向は既存値のまま変更していない。 */
:is(.page-tuning, .page-repair, .page-about) .photo-reveal {
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
:is(.page-tuning, .page-repair, .page-about) .photo-reveal.is-revealed {
  opacity: 1;
}
:is(.page-tuning, .page-repair, .page-about) .photo-reveal img {
  opacity: 0.93;
  transition: opacity 1.05s cubic-bezier(0.33, 1, 0.68, 1);
}
:is(.page-tuning, .page-repair, .page-about) .photo-reveal .photo-mask {
  position: absolute;
  inset: 0;
  background-color: var(--color-ivory-deep);
  opacity: 0.88;
  transform: translateX(0);
  transition: transform 1.05s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
:is(.page-tuning, .page-repair, .page-about) .photo-reveal.is-revealed img {
  opacity: 1;
}
:is(.page-tuning, .page-repair, .page-about) .photo-reveal.is-revealed .photo-mask {
  transform: translateX(100%);
}
@media (max-width: 600px) {
  /* スマホは画面に対して演出が強く見えやすいため、durationを少し控えめにする。 */
  :is(.page-tuning, .page-repair, .page-about) .photo-reveal img,
  :is(.page-tuning, .page-repair, .page-about) .photo-reveal .photo-mask {
    transition-duration: 0.95s;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-tuning, .page-repair, .page-about) .photo-reveal,
  :is(.page-tuning, .page-repair, .page-about) .photo-reveal img,
  :is(.page-tuning, .page-repair, .page-about) .photo-reveal .photo-mask {
    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;
  /* 他の白カード（#service .card等）と同じ強さのシャドウに統一する。
     【追加調整】前回比で体感10〜20%程度強める。 */
  box-shadow: 0 4px 13px rgba(38, 48, 44, 0.035); /* 0.03→0.035 */
}
/* 丸ドット（「・」）をやめ、細く控えめなレ点にする。塗りつぶしではなく、
   サイト内の.list-checkと同系統の細線チェック技法（枠線2辺を回転）を採用し、
   新しい色は追加せず既存のブランドカラー（--color-wood）のみを使う。
   TOPページCHECKパートのみに限定したセレクタで、共有クラス.worry-list__item
   本体や他ページの表示には一切影響させない。 */
.page-home #worry .worry-list__item::before {
  width: 0.42em;
  height: 0.72em;
  margin-top: 0.6em;
  border-radius: 0;
  background-color: transparent;
  border-right: 1.25px solid var(--color-wood);
  border-bottom: 1.25px solid var(--color-wood);
  opacity: 0.85;
  transform: rotate(40deg);
}
/* カード本文が詰まって見えるため、PC版も字間を広げる。PC版は改行の変更を許可
   されているため、1行固定にはこだわらず読みやすさを優先する。実測のうえ、
   不自然な1〜2文字だけの残り行ができない範囲（1.9px）に調整。 */
@media (min-width: 601px) {
  .page-home #worry .worry-list__item {
    letter-spacing: 1.9px;
  }
}
.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;
  /* 大きな説明ボックスは小カードより弱いシャドウにする。
     【追加調整】前回比で体感10〜20%程度強める。 */
  box-shadow: 0 4px 15px rgba(38, 48, 44, 0.021); /* 0.018→0.021 */
}
.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;
  /* 他の白カード（#service .card等）と同じ強さのシャドウに統一する。
     【追加調整】前回比で体感10〜20%程度強める。 */
  box-shadow: 0 4px 13px rgba(38, 48, 44, 0.035); /* 0.03→0.035 */
  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);
}
/* カード本文（タイトルは対象外）が詰まって見えるため、字間をさらに広げる。
   PC版は3カードとも自然な折り返しの範囲（実測で2.0pxまでは行数が増えないことを
   確認）に十分な余白があるため、共通で広げる。見出し・数字・英語には触れない。 */
@media (min-width: 601px) {
  .page-home #reason .reason__text {
    letter-spacing: 1.6px;
  }
}

/* --------------------------------------------------------------------------
   05. サービス内容（白カード＋丸アイコンを廃止し、写真主体の3カラムにする。
   PC＝3カラム、タブレット幅（960px未満）は無理に3列を維持せず1カラム＋
   写真/テキスト横並び、スマホ（600px以下）は1カラム縦積みにする。
   カードの箱・枠線・角丸・影・丸アイコンは使用しない。写真は既存の
   .figure/.figure--3x2（3:2・object-fit:cover・角丸var(--radius-md)=6px）を
   そのまま流用し、新しい見た目のルールを増やさない。 -------------------------------------------------------------------------- */
.page-home #service .card-grid {
  grid-template-columns: repeat(3, 1fr);
}
.page-home #service .card {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.page-home #service .card__photo {
  display: block;
  width: 100%;
}
.page-home #service .card__body {
  padding: clamp(1.5rem, 2vw, 1.75rem) 0 0; /* 写真とタイトルの間：24〜28px */
}
.page-home #service .card__foot {
  margin-top: auto;
}
.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); }
/* カード本文（タイトルは対象外）が詰まって見えるため、字間をさらに広げる。
   PC版は3カードとも自然な折り返しの範囲（実測で1.5pxまでは行数が増えないことを
   確認）に十分な余白があるため、共通で広げる。 */
@media (min-width: 601px) {
  .page-home #service .card__text {
    letter-spacing: 1.5px;
  }
}
/* 見出しブロックが視覚的にわずかに左へ寄って見えるため、ごく少量だけ右へ平行移動する
   （前回は左方向に調整していたが指示が逆だったため、今回符号を反転する。
   PC/スマホで別値。スマホは.page-home #service .section-headのメディアクエリ側で上書き）。 */
.page-home #service .section-head {
  transform: translateX(14px);
}

/* --------------------------------------------------------------------------
   06. 調律師紹介
   -------------------------------------------------------------------------- */
.page-home #profile .media__figure {
  border-radius: 10px;
  border: 1px solid var(--color-ivory-line);
  overflow: hidden;
}
/* 写真なし版：2カラム→1カラムにし、本文を読みやすい幅で中央に配置する。
   本文自体の改行・カーニングには触れない（ブロック位置・揃えのみの調整）。
   写真なし版は左揃えのまま短い行が並ぶと重心が左に偏って見えるため、PC・スマホ
   共通でタイトル・本文・氏名・バッジ・リンクを中央揃えにして整える
   （単純な機械的center適用ではなく、氏名行はflexのjustify-content／
   スマホの縦積み時はalign-itemsと、レイアウトごとに適切なプロパティで
   水平中央を揃えている）。 */
.page-home #profile .profile--text-only {
  grid-template-columns: 1fr;
}
.page-home #profile .profile--text-only .media__body {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.page-home #profile .profile__name {
  border-top-color: var(--color-ivory-line);
  font-family: var(--font-serif);
  color: var(--color-ink);
  justify-content: center;
}
.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); }
/* PCのみ：TUNERパートが他セクションと比べて小さく、存在感が弱く見えるため、
   英字ラベル・見出し・本文・署名／肩書き・コンテンツ幅を一段階自然に大きくする。
   見出しは他セクションのsection-title（h2）ほど大きくはせず、本文とのバランスを
   保ったまま一段階だけ引き上げる。文章・改行・カーニングには触れない。
   下線位置（::after）はfont-size変更に伴い実測のうえ再調整している。 */
@media (min-width: 601px) {
  .page-home #profile .section-label {
    font-size: var(--fs-small); /* 13px→14px */
  }
  .page-home #profile .media__title {
    font-size: clamp(1.5rem, 1.8vw, 1.8rem); /* 20-24px→24-28.8px */
  }
  .page-home #profile .profile--text-only .media__body {
    max-width: 46rem; /* 42rem→46rem */
  }
  .page-home #profile .profile-teaser-text,
  .page-home #profile .profile-note-text {
    font-size: 17.5px; /* 16px→17.5px */
  }
  .page-home #profile .profile__name {
    font-size: 1.25rem; /* 18px→20px */
  }
  .page-home #profile .profile__role,
  .page-home #profile .assoc {
    font-size: var(--fs-small); /* 13px→14px */
  }
  .page-home #profile .link-arrow {
    font-size: 15px; /* 14px→15px */
  }
}

/* --------------------------------------------------------------------------
   07. 料金について（簡易料金案内：代表料金2つを主役に、補足3項目は静かに）
   -------------------------------------------------------------------------- */
.page-home #price .price-summary {
  background-color: #fff;
  border: 1px solid var(--color-ivory-line);
  border-radius: 10px;
  /* 大きな説明ボックスは小カードより弱いシャドウにする。
     【追加調整】前回比で体感10〜20%程度強める。 */
  box-shadow: 0 4px 15px rgba(38, 48, 44, 0.021); /* 0.018→0.021 */
  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__amount-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;
  /* 他の白カードと同じ強さのシャドウに統一する。
     【追加調整】前回比で体感10〜20%程度強める。 */
  box-shadow: 0 4px 13px rgba(38, 48, 44, 0.035); /* 0.03→0.035 */
}
.page-home #faq .faq__item[open] {
  border-color: var(--color-wood-soft);
  box-shadow: 0 6px 17px rgba(38, 48, 44, 0.052); /* 0.045→0.052 */
}
.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 { gap: clamp(1.75rem, 2.8vw, 2.75rem); }
.page-home #service .card-grid { gap: clamp(1.75rem, 2.8vw, 2.5rem); } /* 28〜40px */
.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); }

/* 960px未満（タブレット幅）：SERVICEで3列を維持すると文字幅が狭くなりすぎるため、
   1カラム×「写真｜テキスト」横並びに切り替える。3項目とも同じ向き
   （写真が常に左）で統一し、交互配置にはしない。 */
@media (min-width: 601px) and (max-width: 959.98px) {
  .page-home #service .card-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }
  .page-home #service .card {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(1.75rem, 4vw, 2.25rem);
  }
  .page-home #service .card__photo {
    flex: 0 0 43%;
    width: 43%;
  }
  .page-home #service .card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   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;
    /* 背景ズームを追加調整：動き出しをより早く感じられ、ズーム幅もひと回り
       大きく、かつ全体の時間は従来（17s）よりさらに長くする。線形(linear)では
       durationを伸ばすほど体感速度が遅くなり「わかりにくくなる」ため、
       サイト内の他の演出でも使っている signature の減速カーブ
       （cubic-bezier(0.22, 1, 0.36, 1)）に変更し、開始直後に大きく動いてから
       長い時間をかけてゆっくり収束させる（PC側の値・keyframesには一切触れない）。 */
    --hero-intro-bg-dur: 23s; /* 17s→23s */
    --hero-intro-bg-scale-from: 1;
    --hero-intro-bg-zoom-easing: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
    --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;
    /* 「ピアノの音を」は1文字ずつの整列演出（.hero__title-ch）へ切り替えたため、
       --hero-intro-title1-*（ブロック単位のマスク開示）はこの行では使用しない。
       「心地よく整える」側のブロック開示はテンポを詰めるため0.84s/1s→1.5s/0.6sに調整。
       【再調整】「ピアノの音を」に跳ね返りを追加し全体の完了が1.70sへ伸びたため、
       0.15sの余韻を挟んだ1.85sへさらに後ろ倒しする（durationは0.6sのまま）。 */
    --hero-intro-title2-delay: 1.85s;
    --hero-intro-title2-dur: 0.6s;
    /* 【再調整】情報階層（メインキャッチ→心地よく/整える→サブキャッチ→CTA）を
       正しい順序にするため、開始をそれぞれ後ろへ移動する（duration・easingは
       変更しない）。 */
    --hero-intro-lead-delay: 2.55s;
    --hero-intro-lead-dur: 0.5s;
    --hero-intro-lead-y: 3px;
    --hero-intro-cta-delay: 2.95s;
    --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（images/hero-photo-no-tools.png）を表示せず、
     .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);
  }
  /* 「ピアノの音を」：ブロック単位のマスク開示（PC・従来のスマホと同じ仕組み）は
     使わず、1文字ずつの整列演出（.hero__title-ch、下で定義）に置き換える。
     ブロック自体は最初から見えている状態にし、開示・移動・クリップは行わない。 */
  .hero__title-block--1 {
    opacity: 1;
    clip-path: none;
    animation: none;
  }
  /* 「ピ」「ア」「ノ」「の」「音」「を」の6文字。opacity 0→1と、縦方向（top）だけの
     ごく控えめな一度きりの跳ね返り（鍵盤が沈んで静かに戻る感覚）で定位置へ着地する。
     横方向のばらつき・回転・拡大・ぼかし・バウンドの繰り返しはなし。「音」も他の
     文字と同じ動きだけを行い、色は最初から現在の茶色のまま変えない
     （color/text-shadowはここでは一切指定しない）。display: inlineのまま
     （通常のインライン組版）にし、position: relativeのtopだけで視覚的な位置収束を
     行う（left・margin・transformによる横方向の補正は加えない）。
     display: inline-blockにするとグリフの実測はみ出し量が変わり、文字間隔・
     行全体の横幅が変更前より詰まってしまうため使用しない。文字サイズ・カーニング
     （.hero__title-no等の既存margin）もこのクラスでは変更しないため、
     アニメーション終了後の幅・配置は変更前と一致する。 */
  .hero__title-ch {
    display: inline;
    position: relative;
    opacity: 0;
    top: 0;
    animation: hero-title1-soft-bounce-in 0.95s both;
  }
  .hero__title-ch:nth-child(1) { animation-delay: 0.35s; }
  .hero__title-ch:nth-child(2) { animation-delay: 0.43s; }
  .hero__title-ch:nth-child(3) { animation-delay: 0.51s; }
  .hero__title-ch:nth-child(4) { animation-delay: 0.59s; }
  .hero__title-ch:nth-child(5) { animation-delay: 0.67s; }
  .hero__title-ch:nth-child(6) { animation-delay: 0.75s; }
  /* メインキャッチ背面だけに、ごく薄い白の柔らかいレイヤーを追加し、
     「音」「整える」付近の可読性を補う。サブキャッチ側へは広げていない。 */
  .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.65にしている（0.45だと.hero__title-block--2のマスク開示中
     この行だけ空白に近く見えるため引き上げた）。マスク開示（1.85〜2.45s）の間は
     控えめに見え、開示が終わるタイミング（2.45s）から本来のopacity・位置へ
     静かに整う、という一続きの流れにしている。transformではなくposition:relative
     + topを使うことで、「整える」で必要だったdisplay:inline-block化
     （＝グリフのはみ出し量が変わり位置がずれる副作用）を避けている。
     拡大縮小は追加していない。【再調整】「ピアノの音を」の跳ね返り追加に伴い、
     開始を2.1s→2.45sへ後ろ倒し（durationは0.4sのまま）。 */
  .hero__title-green {
    font-size: 1.03em;
    position: relative;
    opacity: 0.65;
    top: 3px;
    animation: hero-intro-green-settle 0.4s ease-out 2.45s forwards;
  }
  /* 「整える」：51.4771px→53.536px（現在値から+4%）。1.324em×1.04＝1.37696em */
  /* 「整える」はfont-sizeが「心地よく」より大きいため、同じグリフ由来のはみ出し量
     （text-indent/palt起因）が小さくなり、結果として左端が「心」より約5.2px右に
     見えてしまう。カーニング・改行・文字サイズには触れず、ブロック全体の横位置だけを
     実測値に基づいて左へ補正し、「心」の左端と揃える。 */
  .hero__title-line3 { font-size: 1.37696em; margin-left: 0; display: inline-block; }
  /* 「音」「整える」の茶色を、スマホのみ少し濃く（#8f7048→#7a5f3d）。方向性は維持し、暗くしすぎない。
     text-shadowはPC専用の強化5層に影響されないよう、inheritで親（.hero__title）の値にそのまま戻す。
     「音」は.hero__title-chによる整列演出のみで、色変化・発光は加えない。 */
  .hero__title-brown { color: #7a5f3d; text-shadow: inherit; }
  /* 「心地よく」「整える」：文字本体の色（緑／#7a5f3d・text-shadow）は一切変更しない。
     ベース文字の真上に、同じ文字を複製した専用オーバーレイ（.hero__title-shine、
     HTML側で追加）だけを重ね、そのオーバーレイにのみbackground-clip: textで
     ごく薄いハイライトを描く。ベースとオーバーレイは別要素のため、文字色が
     変わって見えることはない。オーバーレイはPCでは常にdisplay:noneで無効。
     「音」の発光は廃止したため対象から外している（.hero__title-green自体は
     既に position:relative 済み）。 */
  .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;
  }
  /* 「心地よく」→「整える」で、角度・幅・移動速度・easingを完全に統一する
     （同じグラデーション角度／帯幅・同じhero-intro-mobile-shine・同じduration）。
     【重要】以前は「.hero__title-green .hero__title-shine」と
     「.hero__title-block--2 .hero__title-shine」という2つの子孫セレクターを
     使っており、後者は「心地よく」「整える」の両方に一致していた。同じ詳細度の
     ルールは後に書かれた方が両方へ適用されるため、実際には両方とも3.25sに
     開始してしまっていた。今回は直接の子（>）を使い、「心地よく」＝
     .hero__title-green > .hero__title-shine、「整える」＝
     .hero__title-line3 > .hero__title-shine と、互いに一致しないセレクターへ
     完全に分離する。
     「心地よく」：2.85s開始、0.9s（2.85〜3.75sで完了）。
     「整える」：「心地よく」が完全に抜け切ってから0.05秒の間を置いて3.80s開始、
     0.9s（3.80〜4.70sで完了）。重なり・同時発光は発生しない。
     明るさ（ピークopacity）は文字色（緑／茶色）が異なるため、同一の0.6では
     「心地よく」（緑）の方が弱く見えた。角度・帯幅・速度・移動方向は変えず、
     ピークopacityだけを+0.05（0.6→0.65）調整し、実際に光が中央を通過する
     フレームを両方比較したうえで、肉眼で同程度の明るさに見えるよう揃えている。
     【再調整】「ピアノの音を」の跳ね返り追加に伴い、両方の開始時刻をそれぞれ
     0.35s後ろ倒し（2.5s→2.85s、3.45s→3.80s）。duration・間隔（0.05s）は
     維持している。 */
  .hero__title-green > .hero__title-shine,
  .hero__title-line3 > .hero__title-shine {
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation-name: hero-intro-mobile-shine;
    animation-duration: 0.9s;
    animation-timing-function: linear;
  }
  .hero__title-green > .hero__title-shine {
    background-image: linear-gradient(100deg,
      transparent 0%, transparent 44%,
      rgba(255, 253, 246, 0.65) 50%,
      transparent 56%, transparent 100%);
    animation-delay: 2.85s;
  }
  .hero__title-line3 > .hero__title-shine {
    background-image: linear-gradient(100deg,
      transparent 0%, transparent 44%,
      rgba(255, 253, 246, 0.6) 50%,
      transparent 56%, transparent 100%);
    animation-delay: 3.8s;
  }
  /* 「心地よく」と「整える」の間で改行し、3行構成にする */
  .hero__title-break-mobile { display: inline; }
  /* PC専用の2行目フレーズ光（.hero__title-line2-shine）はスマホでは常に無効。
     スマホは既存の.hero__title-shine（「音」「整える」個別）をそのまま使用する。 */
  .hero__title-line2-shine { display: none; }

  /* サブキャッチ：文字サイズを現状比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,
  .profile-table-break-mobile {
    display: inline;
  }
  /* TUNER氏名：折り返し禁止（1行固定）。位置・font-weight・文字色・カーニングは変更しない。 */
  .profile__name-text {
    white-space: nowrap;
  }
  /* TUNER肩書き：氏名の横並びから、氏名の下へ移動する（1行表示・横スクロール防止）。
     PC（このメディアクエリの外）は元のflex横並びのまま変更していない。
     TUNERパート全体をスマホでも中央揃えにするため、氏名・肩書きの縦積みも
     左揃えではなく中央揃えにする（列方向のためjustify-contentではなく
     align-itemsで水平位置を制御する）。 */
  .profile__name {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
  }
  .profile__role {
    white-space: nowrap;
  }
  /* 氏名の下へ移動したため、横並び時代の右シフト（12px）は不要になったので解除する。 */
  .profile__role--shift-mobile {
    margin-left: 0;
  }
  /* TUNER本文：指定の3行（ピアノは一台一台〜／だからこそ〜確認し、／お客様の〜）に
     固定する（上記<br>で改行位置を追加済み）。
     2行目（24文字）が16pxのままだと354px必要になり、コンテナ幅335pxを超えて
     さらに折り返してしまうため、実測のうえ最小限font-sizeを下げて3行に収める。
     【再調整】375px幅では14.5pxで3行を維持できるが、360px幅の端末では2行目が
     さらに折り返して4行になってしまうことを実測で確認したため、より狭い幅でも
     3行を維持できる14pxまで追加で下げる。 */
  .profile-teaser-text {
    font-size: 14px; /* 16px→14.5px→14px */
  }
  /* TOP「サービス内容」：「ピアノのことを、トータルでサポート。」の「、→ト」だけを
     さらに詰める。見出し全体・.is-thin自体のletter-spacingは変更していない。 */
  #service .section-title .kern-comma-tight {
    letter-spacing: -0.6em;
  }
  /* お悩みカード3枚：本文の文字サイズがカードごとにバラバラ（13px/14px/14px）に
     なっていたため、最も制約の厳しい01（22文字の2行目が13pxでないと収まらない）に
     全カードを揃え、パート内で統一する。改行位置（<br>）はいずれも変更しない。 */
  .page-home #reason .reason__text {
    font-size: 13px; /* 02・03のみ14px→13px */
  }
  /* TOP「選ばれる3つの理由」01：指定3行の2行目（22文字）がletter-spacing:0でも
     コンテナ幅を超えるため、実測のうえ最小限font-sizeを下げてから字間を広げる
     （改行位置は上記<br>で固定済み）。【再調整】さらに詰まって見えるとの指摘のため、
     行数が増えない範囲（実測0.4pxまで）で追加で広げる。 */
  #reason .reason:nth-of-type(1) .reason__text {
    letter-spacing: 0.45px; /* 0.3px→0.45px */
  }
  /* 02：1文目（32文字）はコンテナ幅の物理的な制約上、どのフォントサイズでも
     1行には収まらないため、広めの字間は使わず控えめな値に留める
     （<br>による2文単位の改行位置自体は維持）。【再調整】この行は元々行数への
     影響が小さいことを実測確認できたため、今回はさらに広げる。 */
  #reason .reason:nth-of-type(2) .reason__text {
    letter-spacing: 1.0px; /* 0.1px→1.0px */
  }
  /* 03：汎用ルール（.reason__text、about.htmlと共有）の0.03emでは今回の指摘に
     対して不十分なため、TOPのこのカードのみ実測のうえ個別に広げる
     （行数が増えない範囲で1.0pxまで確認）。 */
  .page-home #reason .reason:nth-of-type(3) .reason__text {
    letter-spacing: 1.0px;
  }
  /* 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まで調整 */
  }
  /* お悩みカード6個：本文が詰まって見えるため、字間をさらに広げる。
     「前回いつ〜」「どこに相談〜」の長い2文は、17pxのままだと字間を広げる余地がなく
     マイナス値でしか1行に収まらなかったため、6カード共通でfont-sizeを1段階下げ、
     どのカードも自然なプラスの字間を確保したうえで1行を維持できるようにする
     （getClientRectsで行数を直接検証。カード幅・改行・カードサイズは変更しない）。
     【再調整】前回の15.5pxでもまだ詰まって見えるとの指摘のため、font-sizeを
     14.5pxまでさらに下げ、6カード共通で字間を広げ直す。 */
  .page-home #worry .worry-list__item {
    font-size: 14.5px; /* 17px→15.5px→14.5px */
  }
  .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(3),
  .page-home #worry .worry-list__item:nth-child(4) {
    letter-spacing: 2.0px; /* 1.4px→2.0px */
  }
  /* 「子どもがピアノを始める前に整えたい」：17文字と長く、他カードと同じ2.0pxでは
     1行に収まらないため、実測のうえ収まる範囲で少し控えめな値にする。 */
  .page-home #worry .worry-list__item:nth-child(5) {
    letter-spacing: 1.3px; /* 0.5px→1.3px */
  }
  /* 「どこに相談すればいいのか分からない」：同じく17文字で最も余裕がないため、
     実測のうえ1行を維持できる最大限の値にする。 */
  .page-home #worry .worry-list__item:nth-child(6) {
    letter-spacing: 1.1px; /* 0.35px→1.1px */
  }
  /* お悩みパート説明文（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; }
  /* MESSAGE本文2段落（4行の本文／「調律が必要かどうか…」の一文）：
     詰まって見えるとの指摘のため、スマホのみ字間を少し広げる
     （文字サイズ・行間・余白・改行位置は変更しない）。 */
  .intro-message__text {
    letter-spacing: 0.06em;
  }
  /* ヒーロー下の一文（「調律が必要かどうか〜」）のみ、今回さらに詰まって見えるとの
     指摘のため追加で広げる（本体の3行メッセージには影響させない。実測で
     2.2pxまで1行を維持できることを確認したうえで安全マージンを残す）。 */
  .page-home #message .intro-message__note {
    letter-spacing: 1.6px;
  }
  .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);
  }
  /* 見出しブロックの右寄せ量：PC(14px)よりコンテナ幅が狭い分、控えめな量にする。
     【再調整】視覚的な中央からわずかに右へずれて見えたため、6px→2pxに縮小。 */
  .page-home #service .section-head {
    transform: translateX(2px);
  }
  /* スマホは1カラム縦積み（写真→タイトル→本文→リンク）。項目間は48〜64px。
     カルーセルや横スクロールにはしない。 */
  .page-home #service .card-grid {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 12vw, 4rem);
  }
  /* サービスカード3枚：本文の文字サイズがカードごとにバラバラ（13px/14px/14px）に
     なっていたため、最も制約の厳しい1枚目（指定2行に収めるには13pxが必要）に
     全カードを揃え、パート内で統一する。改行位置は変更しない。 */
  .page-home #service .card__text {
    font-size: 13px; /* 2・3枚目のみ14px→13px */
  }
  /* カード本文（タイトルは対象外）が詰まって見えるため、字間をさらに広げる。
     文字サイズ・改行は変更せず、3カードとも行数が増えない範囲（実測で
     1.1pxまでは維持できることを確認）で共通に広げる。 */
  .page-home #service .card__text {
    letter-spacing: 1.1px;
  }
  .page-home #reason .reason {
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026); /* 0.022→0.026 */
  }
  .page-home #reason .reason:hover {
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026); /* 0.022→0.026 */
    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 {
    box-shadow: 0 4px 13px rgba(38, 48, 44, 0.014);
  }
  /* 他の白カードのスマホ時と同じ強さに統一する（通常時も含め統一漏れを修正）。 */
  .page-home #faq .faq__item {
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026);
  }
  .page-home #faq .faq__item[open] {
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026); /* 0.022→0.026 */
  }
  /* 他の白カードのスマホ時と同じ強さに揃える（これまでPC値のまま統一漏れ
     だったため、今回のシャドウ追加調整に合わせて修正）。 */
  .page-home #worry .worry-list__item {
    padding: var(--space-sm) var(--space-md);
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026);
  }
  .page-home #worry .worry-list__item:hover {
    box-shadow: 0 4px 12px rgba(38, 48, 44, 0.026);
    transform: none;
  }
  .page-home #price .price-summary__icon {
    width: 36px;
    height: 36px;
  }
  .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）─ 本文カーニング追加調整（TOPページ・見出し・
   英字ラベル・数字・英語には一切影響しない、.page-tuning配下の本文のみが対象）。
   既存の改行位置（<br>）は変更せず、現在の折り返し行数を超えない範囲で
   実測のうえletter-spacingを広げる。1行の余地がほぼ無かった箇所のみ、
   同一パート内で統一したfont-sizeに調整している。
   ========================================================================== */
@media (min-width: 601px) {
  .page-tuning #about-tuning .media__body p:not(.section-label) {
    letter-spacing: 1.7px;
  }
  /* 「調律」「整調」「整音」の3本文：最も長い「調律」「整音」の行が14pxのままだと
     広げる余地がほぼ無いため、3本文を13.5pxに統一したうえで広げる。 */
  .page-tuning #works .def-list__desc {
    font-size: 13.5px;
    letter-spacing: 1.3px;
  }
  .page-tuning #works .u-small {
    letter-spacing: 1.3px;
  }
  .page-tuning #frequency .media__body p:not(.section-label):not(.u-small) {
    letter-spacing: 1.7px;
  }
  .page-tuning #frequency .list-check li {
    letter-spacing: 2.5px;
  }
  .page-tuning #frequency .u-small {
    letter-spacing: 1.6px;
  }
  .page-tuning #maker .section-lead {
    letter-spacing: 1.9px;
  }
  .page-tuning #maker .u-small {
    letter-spacing: 1.4px;
  }
  .page-tuning #flow .section-lead {
    letter-spacing: 1.9px;
  }
  .page-tuning #flow .flow__text {
    letter-spacing: 1.5px;
  }
  .page-tuning #care .media__body p:not(.section-label):not(.u-small) {
    letter-spacing: 1.7px;
  }
  .page-tuning #care .list-dot li {
    letter-spacing: 2.0px;
  }
  .page-tuning #care .u-small {
    letter-spacing: 1.6px;
  }
}

/* ==========================================================================
   調律について（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（さらに詰める） */
  }
  /* 「音程だけでなく、弾き心地まで。」：「く」→「、」・「、」→「弾」の間だけを詰める。
     タイトル全体のletter-spacingやその他の字間には影響させない。 */
  #works .is-thin .works-kern-ku {
    letter-spacing: -3px;
  }
  #works .is-thin .kern-comma-tight {
    letter-spacing: -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を下げる。
     【再調整】実測のうえ、2行を維持できる範囲でさらに広げる。 */
  #maker .u-center.u-small {
    font-size: 13px; /* 14px→13px */
    letter-spacing: 0.9px; /* 0.39px→0.9px */
  }
  /* 本文カーニング追加調整（既存改行位置は変更しない）。 */
  .page-tuning #about-tuning .media__body p:not(.section-label) {
    letter-spacing: 1.6px;
  }
  .page-tuning #works .def-list__desc {
    letter-spacing: 1.6px;
  }
  .page-tuning #works .u-small {
    letter-spacing: 1.5px;
  }
  .page-tuning #frequency .media__body p:not(.section-label):not(.u-small) {
    letter-spacing: 1.6px;
  }
  .page-tuning #frequency .list-check li {
    letter-spacing: 1.8px;
  }
  /* 「数年以上調律していない場合：／まず状態確認からご相談ください」：
     指定の位置で必ず改行させるため、スマホ専用<br>を表示する。 */
  .frequency-item3-break-mobile {
    display: inline;
  }
  /* 「間隔があいてしまっても問題ありません。／状態に合わせて、段階的に整えていく方法も
     ご提案できます。」：既に12pxまで縮小済みで指定2行維持の余地がごくわずかしか
     ないため、実測のうえ収まる範囲でわずかに広げる。 */
  .page-tuning #frequency .u-small {
    letter-spacing: 0.9px; /* 0.72px→0.9px */
  }
  .page-tuning #flow .section-lead {
    letter-spacing: 1.6px;
  }
  .page-tuning #flow .flow__text {
    letter-spacing: 1.8px;
  }
  /* 「普段の置き方や湿度の管理で、ピアノの状態は変わってきます。」：16pxのままだと
     広げる余地がほぼ無いため、実測のうえ15pxに調整してから広げる。 */
  .page-tuning #care .media__body p:not(.section-label):not(.u-small) {
    font-size: 15px; /* 16px→15px */
    letter-spacing: 1.5px;
  }
  /* CAREリスト4項目：1つ目（直射日光や〜）が最も長く、16pxのままでは負の字間
     でしか1行を維持できないため、4項目を14pxに統一したうえで広げる。 */
  .page-tuning #care .list-dot li {
    font-size: 14px; /* 16px→14px */
    letter-spacing: 0.9px;
  }
  .page-tuning #care .u-small {
    letter-spacing: 1.5px;
  }
}

/* ==========================================================================
   修理・メンテナンス（repair.html）─ 本文カーニング追加調整（PC）。
   TOPページ・見出し・英字ラベル・数字・英語には影響しない。既存改行は変更しない。
   ========================================================================== */
@media (min-width: 601px) {
  .page-repair #intro .media__body p:not(.section-label) {
    letter-spacing: 1.9px;
  }
  .page-repair #symptom .section-lead {
    letter-spacing: 1.9px;
  }
  /* 「こんな症状に対応します」8カード：現状の折り返し行数（すでに2行の項目を含む）を
     維持できる範囲で、カードごとに実測のうえ広げる。 */
  .page-repair #symptom .worry-list__item:nth-child(1),
  .page-repair #symptom .worry-list__item:nth-child(2),
  .page-repair #symptom .worry-list__item:nth-child(5),
  .page-repair #symptom .worry-list__item:nth-child(6),
  .page-repair #symptom .worry-list__item:nth-child(7),
  .page-repair #symptom .worry-list__item:nth-child(8) {
    letter-spacing: 2.0px;
  }
  /* 「鍵盤が重い、または軽すぎる」：1行を維持できる余地がごくわずかしかないため、
     実測のうえ収まる範囲でわずかに広げる。 */
  .page-repair #symptom .worry-list__item:nth-child(3) {
    letter-spacing: 0.9px; /* 0.2px→0.9px */
  }
  /* 「弾くとカタカタと雑音がする」：同じく1行維持の余地がごくわずか。 */
  .page-repair #symptom .worry-list__item:nth-child(4) {
    letter-spacing: 1.35px; /* 1.275px→1.35px */
  }
  .page-repair #menu .card__text {
    letter-spacing: 1.7px;
  }
  .page-repair #flow .flow__text {
    letter-spacing: 1.6px;
  }
  .page-repair #flow .note-box p {
    letter-spacing: 1.9px;
  }
}

/* ==========================================================================
   修理・メンテナンス（repair.html）─ スマホ幅の字間調整
   ========================================================================== */
@media (max-width: 600px) {
  /* 「修理が必要かどうか分からない状態でも構いません。〜」：指定4行を維持できる範囲で広げる。
     【再調整】実測のうえ安全マージンを残してさらに広げる。 */
  #flow .note-box p {
    letter-spacing: 1.6px; /* 0.64px→1.34px→1.6px */
  }
  /* 「下記に当てはまらない症状でも、お気軽にお問い合わせください。」：指定2行を維持できる範囲でさらに広げる。 */
  #symptom .section-lead {
    letter-spacing: 3px; /* 0.64px→2px→3px */
  }
  /* 「こんな症状に対応します」8カード：カードごとに現状の折り返しを確認したうえでさらに広げる。
     【再調整】2番目・6番目を含め、全カードで現状の折り返し行数を維持できる範囲を
     再実測し、広げられる項目はすべて追加で広げる。「鍵盤が重い、または軽すぎる」
     （3番目）のみ1行維持の余地がごくわずかなため、ごく小さい増分にとどめる。 */
  #symptom .worry-list__item:nth-child(1) { letter-spacing: 2.5px; }  /* 1.1px→2.5px */
  #symptom .worry-list__item:nth-child(2) { letter-spacing: 2.5px; }  /* 0.075em相当→2.5px */
  #symptom .worry-list__item:nth-child(3) { letter-spacing: 1.85px; } /* 1.8px→1.85px（維持余地がごくわずか） */
  #symptom .worry-list__item:nth-child(4) { letter-spacing: 2.8px; }  /* 2.2px→2.8px */
  #symptom .worry-list__item:nth-child(5) { letter-spacing: 2.5px; }  /* 1.64px→2.5px */
  #symptom .worry-list__item:nth-child(6) { letter-spacing: 2.5px; }  /* 0.075em相当→2.5px */
  #symptom .worry-list__item:nth-child(7) { letter-spacing: 2.5px; }  /* 1.34px→2.5px */
  #symptom .worry-list__item:nth-child(8) { letter-spacing: 2.5px; }  /* 1.34px→2.5px */
  /* 本文カーニング追加調整（既存改行位置は変更しない）。 */
  .page-repair #intro .media__body p:not(.section-label) {
    letter-spacing: 1.6px;
  }
  .page-repair #menu .card__text {
    letter-spacing: 1.5px;
  }
  .page-repair #flow .flow__text {
    letter-spacing: 1.5px;
  }
}

/* ==========================================================================
   料金案内（price.html）─ 本文カーニング追加調整（PC）。価格・数字・税表記・
   英語・大小タイトル（項目名を含む.table th）には影響しない。既存改行は変更しない。
   ========================================================================== */
@media (min-width: 601px) {
  .page-price #tuning-price .section-lead {
    letter-spacing: 1.9px;
  }
  .page-price #tuning-price .table td:not(.is-price) {
    letter-spacing: 1.8px;
  }
  .page-price #tuning-price .u-small {
    letter-spacing: 1.4px;
  }
  .page-price #repair-price .section-lead {
    letter-spacing: 1.9px;
  }
  .page-price #repair-price .table td:not(.is-price) {
    letter-spacing: 1.8px;
  }
  /* 「料金についてのご案内」4カード：2番目（追加費用は事前に〜）の余地が
     最も少ないため、その範囲に合わせて4カード共通で広げる。 */
  .page-price #notes .price-note p:not(.price-note__title) {
    letter-spacing: 0.85px;
  }
}

/* ==========================================================================
   料金案内（price.html）─ スマホ幅の字間調整・改行固定
   ========================================================================== */
@media (max-width: 600px) {
  .price-tuning-lead-break-mobile,
  .price-repair-lead-break-mobile,
  .notes-payment-break-mobile {
    display: inline;
  }
  /* 指定4行（年に1回程度を目安とした、／通常の調律の料金です。／長期間調律されて
     いない場合は、／状態を確認したうえでご相談させていただきます。）に収めるため、
     4行目のみ収まりきらないことを実測で確認したうえで、本文だけ最小限font-sizeを
     下げる。【再調整】15pxでは広げる余地がほぼ無かったため、実測のうえ14pxまで
     さらに下げてから広げ直す。 */
  #tuning-price .section-lead {
    letter-spacing: 1.4px; /* 0.82px→1.4px */
    font-size: 14px; /* 17px→15px→14px */
  }
  /* 文章B：親要素全体は広げず基準値に戻し、「。→確」「、→ご」の2境界だけを
     下のspanで個別に広げる（他の句読点・文字間は現状維持）。指定3行（1行目「修理は
     症状や交換部品によって費用が変わります。」が単語途中で折れないよう）にするため、
     本文だけ最小限font-sizeを下げる。【再調整】3行を維持できる範囲でさらに広げる。 */
  #repair-price .section-lead {
    letter-spacing: 1.3px; /* 0.64px→0.86px→1.3px */
    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: 1px; /* 0.6px→1px（今回の料金ページ再調整） */
  }
  #repair-price .table td:not(.is-price) {
    letter-spacing: 1.8px; /* 0.5px→0.9px→1.8px（今回の料金ページ再調整） */
  }
  /* 「対象」列（調律料金表）：既存の個別調整が無く汎用0.06emのみだったため、
     実測のうえ広げる。 */
  #tuning-price .table td:not(.is-price) {
    letter-spacing: 1.8px;
  }
  /* 注意書き2文（※記載の料金は目安です。／※ピアノ湿度調整剤は〜）：
     2文目の余地がごくわずかなため、両方に安全な範囲で統一適用する。 */
  #tuning-price .u-small {
    letter-spacing: 0.8px;
  }
  /* 「料金についてのご案内」4カード：2番目（追加費用は事前に〜）の余地が
     最も少ないため、その範囲に合わせて4カード共通で広げる。 */
  #notes .price-note p:not(.price-note__title) {
    letter-spacing: 1.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も既存のまま維持し、途中改行を防ぐ。 */
}

/* ==========================================================================
   調律師について（about.html）─ 本文カーニング追加調整（PC）。見出し・英字
   ラベル・数字・大小タイトル（項目名を含む.table th）には影響しない。
   既存改行は変更しない。
   ========================================================================== */
@media (min-width: 601px) {
  .page-about #greeting .profile-hero__lead {
    letter-spacing: 2.0px;
  }
  .page-about #greeting .profile-hero__body > p:not(.profile-hero__lead):not(.section-label) {
    letter-spacing: 1.9px;
  }
  .page-about #policy .reason__text {
    letter-spacing: 1.5px;
  }
  .page-about #skill .media__body p:not(.section-label):not(.u-small) {
    letter-spacing: 1.9px;
  }
  .page-about #skill .list-check li {
    letter-spacing: 2.5px;
  }
  .page-about #skill .u-small {
    letter-spacing: 1.8px;
  }
  .page-about #profile .table td {
    letter-spacing: 1.8px;
  }
}

/* ==========================================================================
   調律師について（about.html）─ プロフィール表のスマホ最適化
   横スクロールなしで全項目を読めるよう、価格表（#tuning-price/#repair-price）
   と同じ「1項目＝1ブロックの縦積み」パターンを適用する。PC版のテーブル構造・
   スタイルはこのメディアクエリの外なので一切変更されない。
   ========================================================================== */
@media (max-width: 600px) {
  .page-about #profile .table-wrap {
    overflow-x: visible;
  }
  .page-about #profile .table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .page-about #profile .table tbody,
  .page-about #profile .table tr {
    display: block;
  }
  .page-about #profile .table tr {
    padding-block: 18px;
    border-bottom: 1px solid var(--color-ivory-line);
  }
  .page-about #profile .table tr:first-child {
    border-top: none;
  }
  .page-about #profile .table tr:last-child {
    border-bottom: none;
  }
  .page-about #profile .table th,
  .page-about #profile .table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }
  /* 項目名（th）は大小タイトル・項目名にあたるため対象外とし、現状の0.9pxを維持する。 */
  .page-about #profile .table th {
    letter-spacing: 0.9px;
  }
  /* 本文（td）のみ、実測のうえさらに広げる。 */
  .page-about #profile .table td {
    letter-spacing: 1.8px; /* 0.5px→0.9px→1.8px */
  }
  .page-about #profile .table tbody th {
    margin-bottom: 8px;
  }
  /* 本文カーニング追加調整（既存改行位置は変更しない）。 */
  .page-about #greeting .profile-hero__lead {
    letter-spacing: 2.0px;
  }
  /* ごあいさつ本文3段落：1段落目の余地が最も少ないため、その範囲に合わせて
     3段落共通で広げる。 */
  .page-about #greeting .profile-hero__body > p:not(.profile-hero__lead):not(.section-label) {
    letter-spacing: 1.2px;
  }
  /* 「大切にしている3つのこと」3カード：1つ目（気になっていることを〜）の余地が
     最も少ないため、3カードを13.5pxに統一したうえで広げる。 */
  .page-about #policy .reason__text {
    font-size: 13.5px; /* 14px→13.5px */
    letter-spacing: 1.2px;
  }
  /* 「ピアノらしい音に整えること」：「その」削除により幅に余裕ができたため、
     「ピア」「アノ」「ノら」の詰め（-5.5px）は解除し、同タイトル内「音に整」の
     自然な字間に合わせて基準値（0px）へ戻す。タイトル全体のletter-spacingや
     font-size・改行には一切触れない。 */
  .page-about #policy .policy3-kern-pi,
  .page-about #policy .policy3-kern-a,
  .page-about #policy .policy3-kern-no {
    letter-spacing: 0;
  }
  /* 「まず、お話を伺うこと」：「ず」→「、」・「、」→「お」の間だけを詰める。
     タイトル全体のletter-spacingやその他の字間には影響させない。 */
  .page-about #policy .policy1-kern-zu {
    letter-spacing: -3px;
  }
  .page-about #policy .reason__title .kern-comma-tight {
    letter-spacing: -6px;
  }
  .page-about #skill .media__body p:not(.section-label):not(.u-small) {
    letter-spacing: 1.9px;
  }
  .page-about #skill .list-check li {
    letter-spacing: 2.5px;
  }
  .page-about #skill .u-small {
    letter-spacing: 1.8px;
  }
}

/* ==========================================================================
   調律について（tuning.html）─ CAREリストの1行固定
   ========================================================================== */
@media (max-width: 600px) {
  /* 「直射日光やエアコンの風が当たらない場所に置く」：文章変更後も1行を維持する
     （-0.6pxでは313px必要で2行に折り返すため、実測のうえ-1.0pxに調整）。
     【再調整】他3項目と合わせてfont-sizeを14pxに下げたことで、1行を維持できる
     範囲がプラス側まで広がったため、実測のうえ0.9pxまで広げる。 */
  #care .list-dot li:first-child {
    letter-spacing: 0.9px; /* -1px→0.9px（font-size 16px→14pxに伴い再調整） */
  }
}

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

/* ==========================================================================
   お問い合わせ（contact.html）─ 本文カーニング追加調整。FV・フォームラベル・
   数字・大小タイトルには影響しない。既存改行は変更しない。
   ========================================================================== */
@media (min-width: 601px) {
  .page-contact .form__hint {
    letter-spacing: 1.5px;
  }
  .page-contact .form__privacy .u-small {
    letter-spacing: 1.9px;
  }
  .page-contact .contact-aside .info-panel:nth-child(1) .u-small {
    letter-spacing: 1.9px;
  }
  .page-contact .contact-aside .info-panel:nth-child(3) .u-small {
    letter-spacing: 1.9px;
  }
  .page-contact .contact-aside .info-panel:nth-child(4) .list-dot li {
    letter-spacing: 1.7px;
  }
  .page-contact #faq .faq__a {
    letter-spacing: 1.8px;
  }
}
@media (max-width: 600px) {
  .page-contact .form__hint {
    letter-spacing: 1.4px;
  }
  .page-contact .form__privacy .u-small {
    letter-spacing: 1.7px;
  }
  /* 「作業中は電話に出られない場合が〜」：14pxのままだと広げる余地がほぼ無いため、
     実測のうえ13.5pxに調整してから広げる。 */
  .page-contact .contact-aside .info-panel:nth-child(1) .u-small {
    font-size: 13.5px; /* 14px→13.5px */
    letter-spacing: 0.7px;
  }
  .page-contact .contact-aside .info-panel:nth-child(3) .u-small {
    letter-spacing: 1.7px;
  }
  .page-contact .contact-aside .info-panel:nth-child(4) .list-dot li {
    letter-spacing: 1.7px;
  }
  .page-contact #faq .faq__a {
    letter-spacing: 1.2px;
  }
}

/* ==========================================================================
   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側の値には一切影響しない。
   【再調整】今回指定範囲（白カード内・下記の名指しされたパート・料金ページ・
   指定2文章）のみさらに広げる。今回指定されていない.reason__text／
   .info-panel__dl dd／.form__hint／.contact-list__value／各ページの
   #price・#contact・#maker・#symptom等のsection-lead・u-smallと、対象外
   指定の.note-box pは、現状の0.03emから変更しない。 */
@media (max-width: 600px) {
  .reason__text,
  .info-panel__dl dd,
  .form__hint,
  .contact-list__value,
  .note-box p,
  .section-lead,
  .u-small {
    letter-spacing: 0.03em;
  }
  /* 白カード内本文（card__text／def-list__desc／worry-list__item／faq__a）と、
     名指しされた各パート（media__body p／flow__text／list-dot li／
     list-check li／table td）、プロフィールパート（about.html #greeting）の
     本文を今回さらに広げる。 */
  .card__text,
  .def-list__desc,
  .worry-list__item,
  .faq__a,
  .flow__text,
  .list-dot li,
  .list-check li,
  .media__body p,
  .table td:not(.is-price),
  .profile-hero__body > p:not(.profile-hero__lead):not(.section-label) {
    letter-spacing: 0.06em;
  }
  /* 「調律当日の流れ」パートのリード文（tuning.html #flowのみ。
     index.html／repair.html #flowにはリード文自体が無いため対象は実質1件）。 */
  #flow .section-lead {
    letter-spacing: 0.06em;
  }
  /* 指定文章①（tuning.html #works）／各名指しパートの補足文（#frequency・
     #care）／指定文章②が属するパートに準じる#skillの補足文。 */
  #works .u-small,
  #frequency .u-small,
  #care .u-small,
  #skill .u-small {
    letter-spacing: 0.06em;
  }
  /* 料金ページ：FV・大小タイトル・数字・英語を除く日本語本文をすべて対象に。
     .table td:not(.is-price)は既に上記で対象済み。 */
  .page-price .section-lead,
  .page-price .u-small,
  .page-price .table th,
  .price-note p:not(.price-note__title) {
    letter-spacing: 0.06em;
  }
}

/* ==========================================================================
   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） */
  }
  /* ヒーロー下の一文（「調律が必要かどうか〜」）のみ、上記より詰まって見えるとの
     指摘のため追加で広げる。本体の3行メッセージ（.im-set側）には影響させない。
     この一文はnowrap制約が無く自然な1行折り返しのため、実測で十分な余白
     （最長1行608px中、2.38pxまでは1行を維持できることを確認）を残して調整。 */
  .page-home #message .intro-message__note {
    letter-spacing: 1.4px;
  }
}

/* ==========================================================================
   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,
.contact-privacy-break-pc,
.tuner-teaser-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,
  .contact-privacy-break-pc,
  .tuner-teaser-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: 9.1px; /* 11px→9.1px（実測のうえ再調整） */
  /* letter-spacing（0.10em）が最後の文字の後ろにも入り、shrink-to-fit幅が
     見た目の文字幅よりわずかに右へ広がる分（実測+3.01px）をrightに加算し、
     ラインの中心を文字列の視覚的な中心に一致させている。さらに微調整として
     ライン全体を3px左へ平行移動（left-3px／right+3px）。 */
  right: 21.9px; /* 20.01px→21.9px（実測のうえ再調整） */
  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);
  box-shadow: 0 6px 17px rgba(38, 48, 44, 0.052); /* 0.045→0.052（追加調整） */
  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);
  /* 他の白カードのhoverと同じ強さに統一する。前回比で体感10〜20%程度強める。 */
  box-shadow: 0 6px 17px rgba(38, 48, 44, 0.052); /* 0.045→0.052 */
  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 ─ 「サービス内容」動く主役は写真とカード下部のリンク下線。
   カード全体を持ち上げる／影を付ける／背景色を変えるといったカード的な
   hoverは廃止し、写真の控えめな拡大とリンクの反応だけに絞る。
   -------------------------------------------------------------------------- */
.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);
}
.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で最大1.02倍までゆっくり拡大する。.figureのoverflow:hiddenで
   写真枠からはみ出さない。カード全体は持ち上げない・影を付けない。 */
.page-home #service .card__photo img {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home #service .card:hover .card__photo img {
  transform: scale(1.02);
}
/* カード下部のリンク：下線は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(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) {
  /* 左＝アイコン＋「調律料金」（導入）／中央＝主要2料金（最重要）／
     右＝補足3項目、の3ブロック構成にする。__mainをflex:1で伸ばさず内容幅のまま
     寄せ、3ブロック全体を白枠内で中央に置くことで、中央付近だけ不自然に
     空くのを防ぐ。左ブロックは他の2ブロックより情報が少なく背が低いため、
     flex-startではなくcenterで縦位置を揃え、単独で浮いて見えないようにする。 */
  .page-home #price .price-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 3rem);
  }
  .page-home #price .price-summary__label {
    flex: 0 0 auto;
    padding-right: clamp(1.75rem, 3.5vw, 2.5rem);
    border-right: 1px solid rgba(141, 124, 96, 0.32);
  }
  .page-home #price .price-summary__label .price-summary__icon {
    margin-bottom: var(--space-2xs);
  }
  .page-home #price .price-summary__label .price-summary__heading {
    margin-bottom: 0;
    white-space: nowrap;
  }
  .page-home #price .price-summary__main {
    flex: 0 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: 6.9px; /* 7px→6.9px（実測のうえ再調整） */
  right: 14.9px; /* 14.85px→14.9px（実測のうえ再調整） */
  margin-top: -1px;
}
/* PCのみ：TUNER見出しの拡大（20-24px→24-28.8px）に合わせ、下線の左右insetを
   実測のうえ再調整する（フォントサイズ比でそのまま拡大せず、拡大後の実際の
   文字送り幅を基準に測定し直している）。 */
@media (min-width: 601px) {
  .page-home #profile .section-title__text::after {
    left: 8.3px;
    right: 17.9px;
  }
}
.page-home #profile .media__title.is-in-view .section-title__text::after {
  transform: scaleX(1);
}
/* 「こんなお悩み、ありませんか？」：末尾の「？」の右余白分だけ、実測のうえ
   left/rightを個別調整する（PC。スマホは下段「ありませんか？」単独の
   worry-line2::afterで別途調整）。 */
.page-home #worry .section-title__text::after {
  left: 8.3px;
  right: 11.7px;
}

@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: 5.2px; /* 5px→5.2px（実測のうえ再調整） */
    right: 12.5px; /* 12.71px→12.5px（実測のうえ再調整） */
    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: 7.3px; /* 5px→7.3px（実測のうえ再調整） */
    right: 11.3px; /* 13.6px→11.3px（実測のうえ再調整） */
    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: 9.6px; /* 9px→9.6px（実測のうえ再調整） */
    right: 17px; /* 17.6px→17px（実測のうえ再調整） */
    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 #service .card__photo img,
  .page-home #service .card__foot .link-arrow .button__arrow,
  .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.4); /* 1.32→1.4（keyframesの新しい終了scaleに合わせる） */
    animation-name: tuning-hero-bg-zoom-mobile;
    /* 【追加調整】動き出しを早く感じられるよう、線形(linear)からサイト内の
       他の演出でも使っているsignatureの減速カーブへ変更し、時間も長くする
       （背景位置・白オーバーレイ・PC側の値には触れない）。 */
    animation-duration: 14s; /* 10s→14s */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
  }
  .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.4); } /* 1.32→1.4（ズーム幅を追加調整） */
}

.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.4); /* 1.32→1.4（keyframesの新しい終了scaleに合わせる） */
    animation-name: repair-hero-bg-zoom-mobile;
    /* 【追加調整】動き出しを早く感じられるよう、線形(linear)からサイト内の
       他の演出でも使っているsignatureの減速カーブへ変更し、時間も長くする
       （背景位置・白オーバーレイ・PC側の値には触れない）。 */
    animation-duration: 14s; /* 10s→14s */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
  }
  .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.4); } /* 1.32→1.4（ズーム幅を追加調整） */
}

.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; }
/* 「REPAIR」の「P」「A」間だけ字間を詰める（他の文字間・アニメーションには影響しない）。 */
.page-repair .repair-hero-char:nth-child(3) { margin-right: -0.05em; }
@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;
  /* PC版のみ：写真の主役（鍵盤）が自然に入るよう、少し上・少し左へ移動
     （66% 46% → 58% 58%）。画像・FV高さ・ズーム量は無変更。 */
  background-position: 58% 58%;
  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版のみ：写真そのものが認識できる程度まで白オーバーレイを弱める
     （元画像自体がかなり明るいため、0.25→0.12へさらに弱めて写真を見せる）。 */
  background-color: rgba(255, 255, 255, 0.12);
  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.4); /* 1.32→1.4（keyframesの新しい終了scaleに合わせる） */
    animation-name: price-hero-bg-zoom-mobile;
    /* 【追加調整】動き出しを早く感じられるよう、線形(linear)からサイト内の
       他の演出でも使っているsignatureの減速カーブへ変更し、時間も長くする
       （背景位置・白オーバーレイ・PC側の値には触れない）。 */
    animation-duration: 14s; /* 10s→14s */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
  }
  .page-price .page-hero::after {
    /* スマホ版：背景写真が薄すぎるため白オーバーレイを弱める（0.68→0.45）。
       背景位置・FV高さ・タイトル等は無変更。 */
    background-color: rgba(255, 255, 255, 0.45);
  }
  .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.4); } /* 1.32→1.4（ズーム幅を追加調整） */
}

.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%;
  /* 数値上の中央（92%/-46%）から、末尾「内」の右余白分だけ実測のうえ
     オプティカル調整（left/right指定へ変更。太さ・色・質感は無変更）。 */
  left: 3.1px;
  right: 6px;
  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 {
    left: 2.3px;
    right: 4.8px;
    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.4); /* 1.32→1.4（keyframesの新しい終了scaleに合わせる） */
    animation-name: about-hero-bg-zoom-mobile;
    /* 【追加調整】動き出しを早く感じられるよう、線形(linear)からサイト内の
       他の演出でも使っているsignatureの減速カーブへ変更し、時間も長くする
       （背景位置・白オーバーレイ・PC側の値には触れない）。 */
    animation-duration: 14s; /* 10s→14s */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
  }
  .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.4); } /* 1.32→1.4（ズーム幅を追加調整） */
}

.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%;
  /* 数値上の中央（92%/-46%）から、末尾「て」の右余白分だけ実測のうえ
     オプティカル調整（left/right指定へ変更。太さ・色・質感は無変更）。 */
  left: 5.9px;
  right: 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: 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 {
    left: 4.6px;
    right: 7.7px;
    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;
  }
}

/* ==========================================================================
   お問い合わせページ FV ─ 他下層ページFVと同じ設計思想・同じ完成度で構築。
   対象は .page-contact のFVのみ（body.page-contactでスコープ）。
   repair-hero・about-hero等の既存クラスは一切参照せず、contact-hero-*として
   独立実装する（実装の型は同一だが、CSSの実体は共用しない＝他ページへ
   一切影響しない）。サブキャッチ（.page-hero__lead）は今回のスコープ外の
   ため、アニメーション・余白・改行とも無変更（既存のまま静的表示）。 */
.page-contact .page-hero {
  position: relative;
  overflow: hidden;
  /* サブキャッチのmargin-top増加分と同量、下側paddingを削り、FV全体の高さを
     既存の基準（他下層ページFVと同じ高さ）に保つ。 */
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 18px);
}
.page-contact .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/contact-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72% 45%;
  transform: scale(1.03);
  transform-origin: center center;
  z-index: 0;
  /* 「引き→寄り」のゆっくりしたズーム。他下層ページFVと同じ設計。 */
  animation-name: contact-hero-bg-zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes contact-hero-bg-zoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.page-contact .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.62);
  z-index: 1;
}
.page-contact .page-hero__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .page-contact .page-hero::before {
    background-position: 78% 40%;
    transform: scale(1.15);
    animation-name: contact-hero-bg-zoom-mobile;
    /* 【追加調整】動き出しを早く感じられるよう、線形(linear)からサイト内の
       他の演出でも使っているsignatureの減速カーブへ変更し、時間も長くする
       （背景位置・白オーバーレイ・PC側の値には触れない）。 */
    animation-duration: 14s; /* 10s→14s */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* linear→signatureイージング */
  }
  .page-contact .page-hero::after {
    /* スマホ版のみ：ピアノが見えすぎて可読性が弱いとの指摘のため、
       白オーバーレイを少し強める（0.68→0.80）。PC版（::after基準値）は
       変更しない。写真自体・位置・FV高さも無変更。 */
    background-color: rgba(255, 255, 255, 0.80);
  }
}
@keyframes contact-hero-bg-zoom-mobile {
  from { transform: scale(1.15); }
  to   { transform: scale(1.4); } /* 1.32→1.4（ズーム幅を追加調整） */
}

.page-contact .contact-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-contact .contact-hero-char {
  display: inline-block;
  opacity: 0;
  animation-name: contact-hero-char-in, contact-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-contact .contact-hero-char:nth-child(1) { --tx: 1px;  --ty: 2px;  animation-delay: 0s, 1.65s; }
.page-contact .contact-hero-char:nth-child(2) { --tx: 4px;  --ty: 0px;  animation-delay: 0.08s, 1.65s; }
.page-contact .contact-hero-char:nth-child(3) { --tx: 0px;  --ty: 4px;  animation-delay: 0.16s, 1.65s; }
.page-contact .contact-hero-char:nth-child(4) { --tx: 3px;  --ty: 2px;  animation-delay: 0.24s, 1.65s; }
.page-contact .contact-hero-char:nth-child(5) { --tx: 0px;  --ty: -4px; animation-delay: 0.32s, 1.65s; }
.page-contact .contact-hero-char:nth-child(6) { --tx: 5px;  --ty: 3px;  animation-delay: 0.4s, 1.65s; }
.page-contact .contact-hero-char:nth-child(7) { --tx: 2px;  --ty: -2px; animation-delay: 0.48s, 1.65s; }
@keyframes contact-hero-char-in {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes contact-hero-color {
  from { color: var(--color-text-strong); }
  to   { color: var(--color-accent); }
}

.page-contact .contact-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: contact-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-contact .contact-hero-jline {
  position: relative;
  display: inline-block;
}
.page-contact .contact-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: contact-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 contact-hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes contact-hero-fade-up {
  from { opacity: 0; transform: translateY(var(--fy, 6px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* サブキャッチ背後の白グラデーション：他下層ページFVと同じ方向性。
   paddingと同量のマイナスmarginで打ち消しているため、文章の表示位置・
   文字サイズ・字間・改行は一切変わらない（背面の帯だけを足している）。 */
.page-contact .contact-hero-lead {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: fit-content;
  padding: 10px 13px;
  /* 下線とサブキャッチの距離を他下層ページFVと同じ設計ルール（+18px）に揃える。 */
  margin-top: calc(var(--space-2xs) - 10px + 18px);
  margin-left: -13px;
}
.page-contact .contact-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%
  );
}
/* FVサブキャッチ：PC版とスマホ版で文章・改行が異なるため、表示側だけを
   メディアクエリで切り替える（文言・改行はそれぞれ指定どおり固定）。 */
.contact-fv-lead-sp { display: none; }

@media (max-width: 600px) {
  .page-contact .contact-hero-char:nth-child(1) { --tx: 1px; --ty: 1px; }
  .page-contact .contact-hero-char:nth-child(2) { --tx: 3px; --ty: 0px; }
  .page-contact .contact-hero-char:nth-child(3) { --tx: 0px; --ty: 3px; }
  .page-contact .contact-hero-char:nth-child(4) { --tx: 2px; --ty: 1px; }
  .page-contact .contact-hero-char:nth-child(5) { --tx: 0px; --ty: -3px; }
  .page-contact .contact-hero-char:nth-child(6) { --tx: 3px; --ty: 2px; }
  .page-contact .contact-hero-char:nth-child(7) { --tx: 1px; --ty: -2px; }
  .page-contact .contact-hero-jline::after {
    margin-top: 3.5px;
  }
  .page-contact .contact-hero-lead {
    margin-top: calc(var(--space-2xs) - 10px + 30px);
  }
  .page-contact .page-hero {
    padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) - 30px);
  }
  .contact-fv-lead-pc { display: none; }
  .contact-fv-lead-sp { display: inline; }
  .page-contact .contact-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-contact .page-hero::before {
    animation: none !important;
  }
  .page-contact .contact-hero-char,
  .page-contact .contact-hero-title,
  .page-contact .contact-hero-jline::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-contact .contact-hero-char {
    color: var(--color-accent) !important;
  }
}

/* ==========================================================================
   各パート写真プレースホルダー：実写真を配置。
   figure/media__figure自体の角丸・overflow・object-fit:coverは既存の
   共通ルール（components.css）をそのまま使用し、ここでは
   ①被写体が自然に収まるよう写真ごとにobject-positionだけを個別調整、
   ②サイト内で既に確立している薄いシャドウ（--sub-shadow-1、
   #notes・カード類と同じトークン）を追加する。
   枠線・角丸・レイアウト・順序は変更しない。id単位でスコープしているため、
   対象外の写真枠（プレースホルダーのまま残るもの）には一切影響しない。
   ========================================================================== */
.page-tuning #about-tuning .media__figure,
.page-tuning #frequency .media__figure,
.page-tuning #care .media__figure,
.page-repair #intro .media__figure,
.page-about #skill .media__figure {
  /* 写真は小カードよりわずかに強い専用トークンを使う（写真＞小カードの強弱を維持）。 */
  box-shadow: var(--photo-shadow);
}
/* 「調律とは、ピアノの音を〜」：手元が写真右寄りにあるため、右側を残す。 */
.page-tuning #about-tuning .media__figure img {
  object-position: 68% center;
}
/* 「調律の頻度は、年に1回が目安です。」：手元・ピンが中央よりやや左寄り。 */
.page-tuning #frequency .media__figure img {
  object-position: 58% center;
}
/* 「ピアノを長く、心地よく保つために。」：ピアノ本体が写真右側にあるため、右側を残す。 */
.page-tuning #care .media__figure img {
  object-position: 78% center;
}
/* 「音だけでなく、弾き心地まで整えます。」：手元が写真中央よりやや左寄り。 */
.page-repair #intro .media__figure img {
  object-position: 42% center;
}
/* 「音を合わせるだけでは、ピアノは良くなりません。」：元写真が3:2とほぼ同じ
   比率のため、object-positionの調整は不要（既定のcenterのまま）。 */