@charset "UTF-8";
/* ==========================================================================
   layout.css
   コンテナ / ヘッダー / フッター / セクションの骨組み
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER ─ 中央寄せの共通ラッパー（固定幅は使わず max-width で制御）
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* --------------------------------------------------------------------------
   SECTION ─ すべてのセクションの共通枠
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-py);
}
.section--slim   { padding-block: var(--section-py-slim); }
.section--subtle {
  background-color: var(--color-ivory);
  border-top: 1px solid var(--color-ivory-line);
}
.section--warm   { background-color: var(--color-base-warm); }
.section--deep {
  background-color: var(--color-base-deep);
  color: var(--color-text-invert);
}
.section--deep h2,
.section--deep h3 { color: #fff; }
.section--bordered { border-top: 1px solid var(--color-border); }

/* セクション見出しブロック */
.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: var(--fs-xsmall);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.section--deep .section-label { color: #b6a785; }

.section-title {
  font-size: var(--fs-h2);
  /* 本文（0.04em）より広げ、タイトルとしての余裕を出す（ヘッダー・フッター・ヒーローは対象外） */
  letter-spacing: 0.10em;
}
.section-title .is-thin {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.62em;
  color: var(--color-text-muted);
}

.section-lead {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-text);
}
.section--deep .section-lead { color: var(--color-text-invert); }

/* --------------------------------------------------------------------------
   HEADER ─ 全ページ共通
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

/* 屋号が長いため、ヘッダー内のロゴのみ少し小さく表示 */
.site-header .site-logo__name { font-size: 1.0625rem; letter-spacing: 0.06em; }
/* 屋号のうち「ハーモニーピアノ」部分だけ字間を詰める（「調律事務所」は現状維持） */
.site-logo__name-tight { letter-spacing: -0.5px; }
/* 「ハーモニー」内の長音記号「ー」2箇所だけ少し小さく（PC版ヘッダーのみ）。
   他の文字サイズ・フォント・ウェイト・位置・既存カーニングは変更していない。 */
.site-logo__onbiki { font-size: 0.848em; } /* 0.883em→0.848em（さらに約4%縮小） */

/* ヘッダーの「お問い合わせ」ボタンだけのカーニング＋ごく薄いシャドー。
   .button--primary は他ページの他ボタンにも使われているため、
   このクラスは影響範囲をヘッダーのボタンだけに限定するために用意している。 */
/* .button の letter-spacing（0.08em）より詳細度を上げて確実に上書きする */
.site-header__actions .site-header__cta {
  letter-spacing: 2px; /* 1.5px→2px（+0.5px、「お問い合わせ」の文字間全体） */
  box-shadow: 0 3px 10px rgba(20, 18, 16, 0.14);
}

/* PC版ヘッダーの電話・FAX番号だけのカーニング（footerのtel-formatには影響させない）。
   全角カッコの前後4境界のみを対象に、現在値からの相対調整で行っている。 */
.site-header__tel .tel-format__open {
  margin-left: -4px;    /* 「0→（」「2→（」-3.5px→-4px（-0.5px） */
  margin-right: 0.7px;  /* 「（→2」「（→6」0.5px→0.7px（+0.2px） */
}
.site-header__tel .tel-format__close {
  margin-left: 0.7px;   /* 「8→）」「1→）」0.5px→0.7px（+0.2px） */
  margin-right: -4px;   /* 「）→9」「）→0」-3.5px→-4px（-0.5px） */
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-h);
}

/* ロゴ */
.site-logo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.site-logo__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-strong);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.site-logo__en {
  font-family: var(--font-en);
  font-size: 0.625rem;
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* グローバルナビ */
.global-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}
.global-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text);
  white-space: nowrap;
}
.global-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.global-nav__link:hover { color: var(--color-accent-dark); }

/* ナビ内の特定文字だけを詰め／広げるための部分カーニング。
   リンク全体のletter-spacingは変更せず、対象の文字だけをspanで囲んで指定する。 */
.global-nav__kern-word { letter-spacing: 1px; }  /* 「修理」「調律」内の字間 +1px */
.global-nav__kern-dot {
  margin-left: -0.8px;    /* 「・」の直前 */
  letter-spacing: -0.8px; /* 「・」の直後 */
}
.global-nav__link:hover::after,
.global-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.global-nav__link[aria-current="page"] { color: var(--color-accent-dark); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.site-header__tel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-header__tel-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5em;
  line-height: 1.3;
}
.site-header__tel-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.site-header__tel-num {
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* スマホ対応時に表示するメニューボタン */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background-color: var(--color-text-strong);
  transform: translateX(-50%);
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition);
}
.nav-toggle__bars { top: 50%; margin-top: -0.75px; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle.is-active .nav-toggle__bars { background-color: transparent; }
.nav-toggle.is-active .nav-toggle__bars::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bars::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   PAGE HERO ─ 下層ページ共通の見出し部
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  background-color: var(--color-base-subtle);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.page-hero__label {
  font-family: var(--font-en);
  font-size: var(--fs-xsmall);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}
.page-hero__title {
  font-size: clamp(1.875rem, 2.8vw, 2.625rem);
  letter-spacing: 0.10em;
}
.page-hero__lead {
  max-width: 52rem;
  margin-top: var(--space-2xs);
  color: var(--color-text);
  /* FVタイトル直下のサブキャッチのみ、窮屈さがはっきり解消する程度まで字間を広げる */
  letter-spacing: 0.11em;
}
/* contact.htmlのサブキャッチは文章が長く、0.11emだと最終行だけ孤立して5行になるため、
   このページだけ改行を維持できる範囲（0.05em）に個別調整する。 */
.page-contact .page-hero__lead {
  letter-spacing: 0.05em;
}

/* パンくず */
.breadcrumb {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-base);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}
.breadcrumb__list li + li::before {
  content: "／";
  margin-right: var(--space-2xs);
  color: var(--color-border-strong);
}
.breadcrumb a:hover { color: var(--color-accent-dark); }

/* --------------------------------------------------------------------------
   FOOTER ─ 全ページ共通
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-base-deep);
  color: var(--color-text-invert);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.site-footer__brand .site-logo__name { color: #fff; }
.site-footer__brand .site-logo__en { color: rgba(242, 242, 240, 0.6); }
.site-footer__person {
  margin-top: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: rgba(242, 242, 240, 0.92);
  letter-spacing: 0.06em;
}
.site-footer__desc {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: rgba(242, 242, 240, 0.72);
}
/* フッター文中の「、」の直後だけを詰める（PC・スマホ共通） */
.site-footer__comma { letter-spacing: -1.3px; } /* -0.3px→-1.3px（-1px、「、」の直後） */
.site-footer__assoc { margin-top: var(--space-md); }
.site-footer__heading {
  margin-bottom: var(--space-sm);
  font-family: var(--font-en);
  font-size: var(--fs-xsmall);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(242, 242, 240, 0.6);
}
.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
}
.site-footer__list a { color: rgba(242, 242, 240, 0.86); }
.site-footer__list a:hover { color: #fff; }
.site-footer__info {
  font-size: var(--fs-small);
  color: rgba(242, 242, 240, 0.78);
}
.site-footer__info dt {
  margin-top: var(--space-sm);
  font-size: var(--fs-xsmall);
  color: rgba(242, 242, 240, 0.55);
}
.site-footer__info dt:first-child { margin-top: 0; }
.site-footer__info a { color: inherit; border-bottom: 1px solid rgba(242, 242, 240, 0.28); }
.site-footer__info a:hover { color: #fff; border-bottom-color: currentColor; }
/* フッターの電話・FAX番号のカーニングを、ヘッダー側の現在の調整値と同じにする
   （文字サイズ・ウェイトは.site-footer__info/dtの既存指定のまま変更していない）。
   PC・スマホ共通（ヘッダー側は1300px以下でdisplay:noneのため、フッターは幅を問わず適用）。 */
.site-footer__info .tel-format__open {
  margin-left: -4px;
  margin-right: 0.7px;
}
.site-footer__info .tel-format__close {
  margin-left: 0.7px;
  margin-right: -4px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(242, 242, 240, 0.14);
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-size: var(--fs-xsmall);
  color: rgba(242, 242, 240, 0.6);
}

/* --------------------------------------------------------------------------
   RESPONSIVE ─ 今回はPC（1440px）想定。
   将来のタブレット／スマホ対応の受け皿だけ用意しています。
   -------------------------------------------------------------------------- */
/* ヘッダーの要素は折り返さない設計のため、横幅が足りなくなる前に
   電話番号を隠し、ナビの間隔を詰める。
   電話番号がMOBILE/FAXの2行になり幅が増えたため、1300pxを境目にしている。 */
@media (max-width: 1300px) {
  .site-header__tel { display: none; }
  .global-nav__list { gap: 1.25rem; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  /* PC専用の0.92emに影響されないよう、スマホは元の1em（未指定）に固定 */
  .site-logo__onbiki { font-size: 1em; }

  /* ナビはドロワー化（JSで.global-navに.is-openをトグル） */
  .global-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-base);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 12px 28px rgba(30, 27, 20, 0.12);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .global-nav.is-open { display: block; }
  .global-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .global-nav__list li { border-bottom: 1px solid var(--color-border); }
  .global-nav__list li:first-child { border-top: 1px solid var(--color-border); }
  .global-nav__link {
    display: block;
    padding: var(--space-sm) 0.25rem;
  }
  .global-nav__link::after { display: none; }

  .nav-toggle { display: block; }

  /* ヘッダーが横に溢れないようにする（既存の暫定措置。お問い合わせボタンは今回のスコープ外） */
  .site-header .site-logo__name { font-size: 0.9375rem; }
  .site-header__actions .button { display: none; }
  body.nav-open { overflow: hidden; }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}