/* ---- 基本設定 & カラー変数 ----
   ヒーロー以外もすべて作り直し。ヒーローと同じ「冷たいブルーグレーの黒下地 +
   ティール/赤の差し色 + フィルムグレイン」でサイト全体を統一する。
   もう「写真背景の帯だけ暗い」ではなく、ページ全体がこのトーン。 */
:root {
  --void: #030712;          /* 最深部の黒(ヒーローと共通) */
  --bg: #05080e;            /* 基本背景 */
  --bg-raised: #0b0f18;     /* カード/表など、少し浮かせたい面 */
  --ink: #eef1f4;           /* 本文の白 */
  --ink-muted: #8b95a3;     /* 補足テキスト */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.24);

  --primary: #1fa39a;       /* 壁のティールから */
  --primary-hover: #29c2b7;
  --primary-dim: rgba(31, 163, 154, 0.14);

  --accent-red: #d9463d;    /* ギターの赤。使うのは差し色だけ */
  --accent-red-dim: rgba(217, 70, 61, 0.16);

  --accent-orange: #ff7a29; /* ヘッダーのホバー用 */
  --accent-orange-dim: rgba(255, 122, 41, 0.16);

  --paper: #eae7df;         /* Price用の紙っぽい明るい背景 */
  --paper-ink: #1c1c1a;
  --paper-muted: #4a4a44; /* 白木の上で薄く見えないよう、元の#6b6b64より濃くした */

  --mono: 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Roboto Mono', monospace;

  /* ヘッダー実測高さ(約70px)。fixed化したヘッダーの下に隠れる要素のオフセット計算に使う */
  --header-h: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 見た目には出さないが、検索エンジンやスクリーンリーダーには読ませたい
   要素用(SEO用のh1など)。よくある標準的な視覚的非表示パターン */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- スクロール表示アニメーション(reveal) ----
   .reveal を付けた要素は初期状態を少し下+透明にしておき、
   画面に入ったらJS側で .is-visible を付与してフェードインさせる */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
/* 静止時は translateY(0) ではなく none にする。
   単位行列でもtransformが残っていると要素が合成レイヤーに載り、
   中の文字が再サンプリングされて滲んで見えるため */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* ヒーロー背景の常時ループズームも停止し、フェードインだけ残す */
  .hero-bg-img { animation: bgFadeIn 1.4s ease-out forwards; }
}

/* 見出し→本文→写真のように、同じ画面内で複数の.revealを時間差で出すための
   遅延段階。数値は「ずらしたい順」に振るだけで、要素側はd1/d2/d3を選ぶだけでよい */
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

/* 写真だけはフェード+浮き上がりではなく、下からマスクが開くような
   「ワイプ」で見せる(参考にしたサイトの写真登場演出に近づける)。
   opacityは最初から1のままclip-pathだけで見え方を作るので、
   ぼやけた透過が写真の上に残らない */
.js .reveal.reveal-wipe {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.reveal-wipe.is-visible {
  clip-path: inset(0 0 0% 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-wipe { clip-path: none; transition: none; }
}

/* ---- スクロール連動の動き(CSSスクロール駆動アニメーション) ----
   時間ではなくスクロール位置に紐づくので、指を止めれば動きも止まる。
   非対応ブラウザでは@supportsごと無視され、静止した通常表示になる */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* .price/.recordingはoverflow:hiddenのため、中の要素にとっては
       セクション自身がスクロール枠になりview()が固定されてしまう。
       セクション側で名前付きタイムラインを定義し、子から参照する */
    .hero { view-timeline-name: --hero-view; }
    .price { view-timeline-name: --price-view; }
    .recording { view-timeline-name: --recording-view; }
    .access { view-timeline-name: --access-view; }

    /* 背景写真：セクションが画面を通過する間、本体より遅れて流れる(パララックス) */
    .price-bg-photo {
      top: -8%;
      bottom: -8%;
      animation: bgParallax linear both;
      animation-timeline: --price-view;
      animation-range: cover 0% cover 100%;
    }

    /* ヒーロー背景：.hero-bg-imgはzoomInでtransformを使用中のため、
       ラッパーの.hero-bg側を動かして競合を避ける */
    .hero-bg {
      top: -8%;
      height: 116%;
      animation: bgParallax linear both;
      animation-timeline: --hero-view;
      animation-range: cover 0% cover 100%;
    }

    .recording::before {
      top: -8%;
      bottom: -8%;
      animation: bgParallax linear both;
      animation-timeline: --recording-view;
      animation-range: cover 0% cover 100%;
    }

    .access::before {
      top: -8%;
      bottom: -8%;
      animation: bgParallax linear both;
      animation-timeline: --access-view;
      animation-range: cover 0% cover 100%;
    }

    /* ヒーローのロゴ・キャッチコピー：画面から抜ける間にフェードアウト。
       中身(.hero-logo/.fade-line)の登場アニメとは別要素なので競合しない。
       ロゴが先に消え、キャッチコピーが遅れて消えるよう範囲をずらして独立させる */
    .hero-logo-area,
    .hero-text-area {
      animation: heroFadeOut linear both;
      animation-timeline: --hero-view;
    }
    .hero-logo-area { animation-range: exit 0% exit 65%; }
    .hero-text-area { animation-range: exit 25% exit 100%; }

    /* セクション本体：画面に入ってくる間だけ、わずかに持ち上がる */
    /* fillをbackwardsにしているのは、範囲を過ぎた後にtransformを
       一切残さないため。bothだと単位行列が残り続け、要素が合成レイヤーに
       載ったままになって中の文字が滲む。終端値は素の位置と同じなので
       見た目は変わらない */
    /* Access(.access-text)は不要とのことでsectionRiseの対象から外している */
    .price-zone,
    .recording-layout {
      animation: sectionRise linear backwards;
      animation-range: cover 0% cover 45%;
    }
    .price-zone { animation-timeline: --price-view; }
    .recording-layout { animation-timeline: --recording-view; }

    /* フィルムグレイン：ページ全体のスクロール量に応じてゆっくり流れる */
    .site-grain {
      animation: grainDrift linear both;
      animation-timeline: scroll();
    }
  }
}

@keyframes bgParallax {
  from { transform: translateY(-6%); }
  to   { transform: translateY(6%); }
}

@keyframes sectionRise {
  from { transform: translateY(28px); }
  to   { transform: translateY(0); }
}

@keyframes heroFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* タイル(256px)の整数倍だけ動かすので、繰り返しの継ぎ目が出ない */
@keyframes grainDrift {
  from { background-position: 0 0; }
  to   { background-position: 256px 512px; }
}

html {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  line-height: 1.6;
  width: 100%;
  /* html側にoverflow-xを指定するとoverflow-yが自動でautoになり、
     bodyと二重のスクロールコンテナができてsticky headerがズレる原因になるため、
     横スクロール抑止はbody側のみに一本化 */
}

body { position: relative; width: 100%; overflow-x: hidden; }

/* ---- サイト全体のフィルムグレイン ---- */
.site-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url('../images/grain-tile.jpg');
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---- ヘッダー ---- */
header {
  position: fixed; top: 0; z-index: 1000; /* ヒーロー画像に重ねるオーバーレイ化(旧: sticky) */
  width: 100%;
  /* 試しに白へ変更中。文字色(logo-text/nav-links)は暗色前提のままなので、
     このままだと白背景に白文字でほぼ見えなくなる点に注意 */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* is-scrolledでの影の出現をtransitionさせるための起点 */
  transition: box-shadow 0.3s ease;
}

/* 少しスクロールしたら、ヘッダーを心持ち引き締める(JS側でis-scrolledを付与) */
header.is-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nav-container {
  width: 100%; max-width: 100%; padding: 1rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: padding 0.3s ease;
}

header.is-scrolled .nav-container { padding: 0.6rem 3rem; }

/* 白ヘッダー実験用に暗色へ。header背景を元のrgba(3,7,18,0.82)に戻すときは
   ここも var(--ink) / var(--ink-muted) に戻す */
.logo-text { font-weight: 800; font-size: 1.25rem; color: var(--void); text-decoration: none; }
.logo-text span { color: var(--primary); }

.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a { text-decoration: none; color: rgba(3, 7, 18, 0.62); font-weight: 600; font-size: 0.9rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--accent-orange); }

/* PCのみ：ホバーで背景ピル+アンダーラインが出る */
@media (min-width: 769px) {
  .nav-links a {
    position: relative;
    display: inline-block;
    padding: 0.45rem 0.9rem;
    z-index: 1;
  }
  .nav-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-orange-dim);
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: -1;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 0;
    height: 2px;
    background: var(--accent-orange);
    transform: translateX(-50%);
    transition: width 0.25s ease;
  }
  .nav-links a:hover::before { transform: scale(1); opacity: 1; }
  .nav-links a:hover::after { width: 50%; }
}

/* ハンバーガーボタン */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 24px; position: relative; z-index: 1001; }
.menu-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: var(--void); transition: all 0.3s ease; }
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 11px; }
.menu-toggle span:nth-child(3) { top: 22px; }

/* プルダウンが開いている時：ハンバーガー→✕ */
.menu-toggle.active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* ---- ヒーローセクション ---- */
.hero {
  position: relative;
  z-index: 2; /* 直後の.aboutが裏に重なっているので、Heroを必ず手前に描画する */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 500px;
  overflow: hidden;
  background-color: #000;
  margin-top: 0;
}

/* シネマティック背景レイヤー */
/* .hero-bg：背景画像とフィルムグレインを重ねるための入れ物 */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* .hero-bg-img：フェードイン & ゆっくりズームするレイヤー。パララックス分の余白として一回り大きく配置 */
.hero-bg-img {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;

  background-color: #030712;
  /* 色味のグレーディング(トーンカーブ/冷たい色温度シフト/選択カラー/グレイン)とリサイズは
     画像側(hero-bg.jpg)に焼き込み済み。元画像(images/originals/hero-bg.jpg)は
     無加工のまま保持。ビネットや可読性用の暗さは、画面サイズ依存の cover
     クロップで破綻しないよう写真には焼き込まず、.hero-overlay(要素サイズ基準)側でかける */
  background-image: url('../images/hero-bg.jpg');

  background-size: cover;
  background-position: center;
  opacity: 0;
  animation:
    bgFadeIn 1.4s ease-out forwards,
    zoomIn 22s ease-in-out infinite alternate;
}

@keyframes bgFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 以前は15sで1回ズームして止まったままだったため、ヒーローに長く留まると
   静止して見えていた。ゆっくり伸縮を繰り返すループにして、常に(かすかにでも)
   動いている状態を保つ */
@keyframes zoomIn {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.06) translateY(-5px); }
}

/* ビネット + 文字可読性用の暗さ：写真(cover)とは独立して、常に要素サイズ(=見えている画面)基準でかかる。
   ズームアニメーションの対象外なので、四隅の暗さがブラウザ幅で破綻しない */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, rgba(3, 7, 18, 0.55) 0%, rgba(3, 7, 18, 0.05) 45%, rgba(3, 7, 18, 0.4) 100%);
}

/* モバイル専用：マウスが使えない代わりに、背景がゆっくり横にスライドしながらズームする */
@keyframes zoomPanMobile {
  0% { transform: scale(1.02) translateX(0); }
  100% { transform: scale(1.08) translateX(-4%); }
}

/* 装飾ライン：背景の上下に配置する細いフレームライン。中央基点で左右に伸びながら、上下にもわずかに離れていく */
.hero-frame-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.7);
  transform: scaleX(0);
  transform-origin: center;
}
/* 左右に伸びる → (伸びきってから)上下にゆっくり離れる、の2段階 */
.hero-frame-line-top {
  /* ヘッダーがヒーローに重なるオーバーレイなので、その下に隠れないよう分だけ下げる */
  top: calc(var(--header-h) + 2rem);
  animation:
    lineGrowH 1s ease-out 2.6s forwards,
    lineShiftUp 2s ease-out 3.6s forwards;
}
.hero-frame-line-bottom {
  bottom: 2rem;
  animation:
    lineGrowH 1s ease-out 2.75s forwards,
    lineShiftDown 2s ease-out 3.75s forwards;
}

@keyframes lineGrowH {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes lineShiftUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

@keyframes lineShiftDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(5px); }
}

/* ロゴエリア：ヒーローエリア自身の高さを基準に配置(vh指定だとヘッダー分ズレるため%指定に統一) */
.hero-logo-area {
  position: absolute;
  top: 15%;
  left: 1.5rem;
  width: calc(100% - 1.5rem);
  max-width: 600px;
  z-index: 2;
}

.hero-logo {
  width: 100%;
  height: auto;
  margin-left: -16px;
  display: block;
  /* ロゴ画像(images/logo.svg)自体をfill="#ffffff"にして白くしている。
     以前はここでbrightness(0) invert(1)を使って白反転していたが、
     iOSのSafariでopacityアニメーションと同じ要素にfilterを重ねると
     filterが適用されずSVG本来の黒色のまま表示されるバグがあるため撤去。
     drop-shadowだけはfilterでもアニメと共存して問題ないため残す。 */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}

/* 登場アニメは.is-in(JSが付与)で再生する。ヒーローが画面外に出て
   戻ってきたときも、初回と同じ演出をもう一度再生させるため。
   JSがない環境では下の.js指定が効かず、静止した通常表示になる */
.js .hero-logo { opacity: 0; }
.js .hero-logo-area.is-in .hero-logo {
  animation: logoFadeIn 2.4s ease-out 0.8s forwards;
}

@keyframes logoFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* キャッチコピーテキストエリア：右下に配置(右端と下端のマージンを揃える) */
.hero-text-area {
  position: absolute;
  --catch-size: clamp(2rem, 3.8vw, 3.6rem);
  bottom: 3rem;
  right: 1rem;
  text-align: right;
  z-index: 2;
}

.hero-catch {
  font-size: var(--catch-size);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* キャッチコピーは初回読み込み時に1度だけ再生するシンプルなフェードイン
   (ロゴのような再入場での再生はしない) */
.fade-line {
  display: inline-block;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.line-1 { animation-delay: 1.6s; }
.line-2 { animation-delay: 1.85s; }
.line-3 { animation-delay: 2.1s; }

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- セクション共通の見出し ---- */
.section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.section-note {
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 1.75rem;
}

/* ---- セクション共通(About / Price / Recording / Access) ---- */
.about, .price, .recording, .access {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line);
  scroll-margin-top: 65px; /* stickyヘッダーの実測高さ分、アンカー着地位置を下げる */
}

/* ---- About ----
   HeroとぴったりXY重なる位置までmargin-top:-100vhで引き上げ、中の.about-stickyを
   position:stickyで画面に留める。Hero側(z-index:2)が上へスクロールで抜けていく
   のに合わせて、後ろの.about-sticky(z-index:1)がめくれるように露わになる。
   高さ250vhの内訳は.about-stickyのコメントを参照 */
.about {
  position: relative;
  z-index: 1;
  height: 250vh;
  margin-top: -100vh;
  border-top: none; /* Heroと重ねる都合上、境目の線は出さない */
}

/* #aboutの着地点。Heroが完全に抜けきってAboutが見えきる地点(=stickyの先頭から100vh)
   に置いておき、ナビのAboutリンクがそこへ着地するようにする */
.about-anchor {
  position: absolute;
  top: 100vh;
  left: 0;
  scroll-margin-top: 65px;
}

/* 0〜100vh: Heroが抜けてAboutが見えきるまで画面に留まる(sticky)。
   100〜150vh(=.aboutの残り150vh分の固定できる余地のうち後半1/3)は見えきったまま
   静止し、その間だけmain.jsが背景写真をズームイン→アウトさせる。
   150vh分固定し終えると自動的に固定が外れ、通常のスクロールでPriceへ抜けていく */
.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.about-bg-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05) brightness(0.85);
  transform: scale(var(--about-zoom, 1));
}

/* テキストは中央、写真の手前。背後がスタジオ写真なので暗パネルを敷いて読ませる */
.about-intro {
  position: relative;
  z-index: 2;
  /* 640pxだと.about-desc内の一部の行が幅ぎりぎりで折り返し、
     「スタジオ」「対応し、」のような単語の途中で改行されてしまうため、
     不自然な折り返しが起きない最小限の幅まで広げてある */
  max-width: 700px;
  margin: 0 1.5rem;
  padding: 2rem 2.25rem;
  background: rgba(3, 7, 18, 0.62);
  text-align: center;
}

.about .section-title { color: var(--ink); }

.about-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}

.about-desc {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 2;
  margin-bottom: 1rem;
}

/* このspanだけinline-blockにしてmarginを効かせ、前後の行との間を
   段落の切れ目(.about-desc の margin-bottom: 1rem)と同じ幅で空ける。
   line-height由来の空行(<br><br>)だと約30pxとここより広くなってしまうため */
.about-brand {
  display: inline-block;
  margin: 1rem 0;
}

.about-desc:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Heroの裏に重ねてstickyで留める演出はモバイルでは扱いづらいので、
     margin-topでの重なりとsticky固定をやめ、以前と同じ「Heroの直後に
     普通に続く100dvhの1画面」に戻す */
  .about {
    height: 100dvh;
    margin-top: 0;
    z-index: auto;
  }
  .about-anchor { top: 0; }
  .about-sticky { position: static; height: 100%; }
  .about-intro { padding: 2rem 1.75rem; }
  /* 幅が足りず改行位置が崩れるので、指定改行を無効化して自然な折り返しにする。
     改行が無くなると欧文の店名が前後の和文とくっつくため、ここだけ余白を足す */
  .about-desc br { display: none; }
  .about-brand { display: inline; margin: 0 0.3em; }
}

/* ---- Price Photos ----
   AboutとPriceの間に挟む、見出しもテキストも無い写真4枚だけの区切り。
   フェードインやホバーズーム、縦のパララックスは付けない。写真同士は隙間なく並べる。
   ・上下にmargin: 5vhを取り、About/Priceとの間を軽く空けている
   ・写真同士もcolumn-gapで少し離す
   ・.price-photos-trackを表示幅より一回り大きく(左右80pxずつ)敷いておき、
     main.jsがスクロール位置に応じて--pxを更新、4枚まとめて右→左へスライドする
   ・幅の比率は「元の2枚(lobby/counter)=長方形」「追加の2枚(0023/0024)=正方形」
     になるようgrid-template-columnsを2fr 1fr 2fr 1frにしてある */
.price-photos {
  position: relative;
  overflow: hidden; /* トラックがはみ出す左右80pxずつを隠す */
  margin: 5vh 0;
}

.price-photos-track {
  position: relative;
  left: -80px;
  width: calc(100% + 160px);
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  column-gap: 0.75rem;
  transform: translateX(var(--px, 0px));
}

.price-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  height: 25vh;
  min-height: 180px;
}

.price-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.92);
}

@media (max-width: 900px) {
  .price-photos-track {
    left: 0;
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    transform: none; /* モバイルは縦積みなので左右スライドは無効化 */
  }
  .price-photo { height: 20vh; min-height: 140px; }
}

/* ---- Price: 背景は写真をフルブリードで敷き、その上に「オレンジの塊」を
   ハードエッジ(グラデーションなし)で左側だけ乗せる。右側は写真がそのまま見える */
.price {
  overflow: hidden; /* position:relativeは .price,.recording,.access の共通ルールで指定済み */
  min-height: 85vh;
  min-height: 85dvh;
  border-top: none; /* ヒーローとの境目のクッキリした線を消す */
}

@media (max-width: 900px) {
  .price { min-height: auto; }
}

/* 層1: 一番下の背景。ドラム写真を.priceの全幅いっぱいに常時フル表示
   (中の.price-zoneの幅とは無関係) */
.price-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/price-bg.jpg');
  background-size: cover;
  background-position: center 8%; /* ギターのヘッドストックが上端付近に来る位置 */
  filter: saturate(0.9) contrast(1.1) brightness(0.82);
}

/* 層2: 上下オレンジ帯。.price全幅にまたがる縁取り(層1の写真より前面) */
.price-bg-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-style: solid;
  border-color: rgba(210, 85, 20, 0.9);
  border-width: 2.5rem 0;
}

@media (max-width: 900px) {
  .price-bg-frame { border-width: 1rem 0; }
}

/* 層3: 中央揃え・最大幅1000pxの透明エリア。中のPrice本体とCautionは
   すべてこの内側を基準に配置する(position:absoluteの子のcontaining blockになる) */
.price-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

/* モバイルは.price-innerと.price-note-cornerが通常フローで縦積みになるため、
   .price-zoneも絶対配置をやめて高さを中身まかせにする。position:absoluteのままだと
   .priceの高さに何も寄与できず(.price側もmin-height:autoのため)高さ0に潰れてしまう */
@media (max-width: 900px) {
  .price-zone {
    position: relative;
    inset: auto;
    max-width: 100%;
    margin: 0;
  }
}

/* 層4a: Price。ゾーンの左端に寄せる(通常フローで左寄せ)。
   左パディングだけCautionと同程度まで縮め、ゾーン端からコンテンツが
   始まるまでの距離を左右で揃える(以前は左だけ4remで余白が広く見えた) */
.price-inner {
  position: relative;
  z-index: 1;
  color: var(--paper-ink);
  max-width: 700px;
  padding: 4.5rem 4rem 4.5rem 0rem;
  text-align: left;
}

@media (max-width: 900px) {
  .price-inner { max-width: 100%; padding: 3rem 1.5rem; }
}

/* 座布団：写真の上に直接文字を置かず、文字自体にオレンジの背景(ハイライト)を付ける。
   黒文字を保つため、座布団はほぼ不透明にして写真の暗さに引っ張られないようにする */
.price .section-title {
  display: inline-flex;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  color: var(--paper-ink);
  background-image: url('../images/price-tape-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0.15em 0.5em;
  transform: rotate(-0.6deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.price .price-block-title {
  display: inline-flex;
  color: var(--paper-ink);
  padding: 0.15em 0.5em;
}

.price-panel .price-block:nth-of-type(1) .price-block-title {
  background-image: url('../images/price-tape-block1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(0.5deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.price-panel .price-block:nth-of-type(2) .price-block-title {
  background-image: url('../images/price-tape-block2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(-0.5deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.price-panel .price-block:nth-of-type(3) .price-block-title {
  background-image: url('../images/price-tape-block3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(0.6deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.price .section-note {
  display: block;
  color: var(--accent-orange);
  background: none;
  padding: 0;
  margin-bottom: 0;
}
.price .price-block-sub { color: var(--paper-ink); }

/* Price見出しと右の注意書きを、文字のベースラインではなく座布団(背景の箱)の
   下端で揃える */
.price-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.75rem;
}
.price-header .section-title,
.price-header .section-note {
  margin-bottom: 0;
}

/* 注意書きをヒーローのキャッチコピーと同じく右下に配置。
   長文になったのでモバイルでは絶対配置をやめ、通常フローで末尾に表示する */
.price .price-note-corner {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  margin-bottom: 0;
  padding: 0 1.5rem 3rem;
  box-sizing: border-box;
}

/* CAUTION見出しと注意書き本文を、1枚の座布団の中で一体化させる。
   見出しだけ写真の上に浮いていて読みにくかったので、本文と同じ背景に載せ、
   下に細い罫線を引いてラベルらしく見せる */
.price-note-box {
  background: rgba(3, 7, 18, 0.9);
  padding: 0.7em 0.9em;
}

.price-note-caution {
  text-align: right;
  color: var(--accent-orange);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 122, 41, 0.35);
}

/* キャンセル料金の3行だけ、「：」の位置を揃える簡易テーブル。
   ラベル列の幅が一番長い行に合わせて自動で揃うので、他の行の「・」が短くても
   コロンの位置はズレない */
.cancel-table {
  display: inline-table;
}
.cancel-row {
  display: table-row;
}
.cancel-label,
.cancel-value {
  display: table-cell;
  white-space: nowrap;
  text-align: left;
}

@media (min-width: 901px) {
  .price .price-note-corner {
    position: absolute;
    /* .price-note-cornerは.price-zoneの子になったので、
       right:0で「ゾーン(最大1000px)の右端」にそのまま揃う */
    left: auto;
    right: 0;
    max-width: min(46%, 360px);
    bottom: 4rem;
    z-index: 2;
    text-align: right;
    margin-top: 0;
    padding: 0;
  }
}

/* ---- Price ---- */
.price-block { margin-bottom: 0.85rem; }

.price-block-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.price-block-sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-muted);
}

/* 学割/個人練をスタジオ料金の表と同じ幅に揃えるための共通ラッパー。
   fit-contentの循環計算だと文字数次第で基準がブレるので、幅は固定して
   表・学割・個人練の3つとも width:100% で揃える */
.price-panel { width: 100%; max-width: 400px; }

/* 料金表：行=時間(1h/3h/5h)、列=時間帯(〜17時/17時〜)。
   オレンジ地に黒文字のポスター的な組み方。箱や角ブラケットで囲うのはやめて、
   太い黒下線と細い罫線だけで構成する。ホバーで行が黒反転する */
.price-table-wrap {
  display: block;
  width: fit-content;
  margin-top: 0.25rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15em 0.9rem;
}

.price-panel .price-block:nth-of-type(1) .price-table-wrap {
  width: 100%;
  background-image: url('../images/price-tape-table1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(-0.3deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.price-panel .price-block:nth-of-type(2) .price-table-wrap {
  margin-left: 5.8rem;
  width: calc(100% - 5.8rem);
  background-image: url('../images/price-tape-table2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(0.4deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.price-panel .price-block:nth-of-type(1) .price-table,
.price-panel .price-block:nth-of-type(2) .price-table {
  width: 100%;
}

.price-panel .price-block:nth-of-type(3) .price-table-wrap {
  width: 100%;
  background-image: url('../images/price-tape-table3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(-0.45deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.price-panel .price-block:nth-of-type(3) .price-table {
  width: 100%;
}

.price-table {
  width: auto;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 1.05rem;
  white-space: nowrap;
}

.price-table th, .price-table td {
  padding: 0.25rem 1.4rem 0.25rem 0;
  font-weight: 400;
}
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }

.price-table thead th {
  color: var(--void);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: right;
  border-bottom: 3px solid var(--void);
  padding-bottom: 0.5rem;
}
.price-table thead th:first-child { border-bottom-color: transparent; }

.price-table tbody th {
  text-align: left;
  color: var(--void);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-table tbody td {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--void);
}

.price-table tbody tr {
  border-bottom: 1px solid rgba(3, 7, 18, 0.25);
  transition: background-color 0.15s ease;
}

/* スタジオ利用料・個人練習の表は、マス目に対してテキストをセンタリング。
   左右の余白を揃えないと中央に見えないので、パディングも左右均等に上書き */
.price-panel .price-block:nth-of-type(1) .price-table th,
.price-panel .price-block:nth-of-type(1) .price-table td,
.price-panel .price-block:nth-of-type(2) .price-table th,
.price-panel .price-block:nth-of-type(2) .price-table td {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
.price-table tbody tr:last-child { border-bottom: none; }
.price-table tbody tr:hover { background-color: rgba(3, 7, 18, 0.1); }

.price-discount {
  width: 100%;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  background-image: url('../images/price-tape-discount.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--accent-orange);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.6rem 0.9rem;
  transform: rotate(-0.35deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

/* ---- Recording ----
   箱で囲わない、余白で見せる構成。背景はコントロールルームの写真1枚を
   静止表示するだけ(以前あったVUメーターとのクロスフェードは廃止)。
   テキストは中央1カラムにまとめ、横軸センタリング。
   Accessは元のフルブリードのままにしたいので、.recording側にスコープする */
.recording {
  overflow: hidden; /* position:relativeは .price,.recording,.access の共通ルールで指定済み */
  background: var(--void); /* 画像読み込み前のフォールバック */
  padding: 4.5rem 0; /* Priceセクション(.price-inner)の上下余白に合わせる */
  text-align: center;
}

.recording::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/recording-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.06) brightness(0.5);
}

.recording-layout {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 2rem;
}

.recording-text {
  position: relative;
}

/* Recording: 大見出しの下に「料金表」と「ご利用時間の目安」を
   別枠(それぞれ独立したボックス)として横に並べる */
.recording-top {
  margin-bottom: 3rem;
}

/* 「.recording .section-title」がdisplay:inline-blockを指定しており
   クラス数(詳細度)で負けてしまうため、より詳細度の高いセレクタで上書きする */
.recording .recording-top .recording-top-title {
  display: block;
  text-align: left;
  margin-bottom: 1.5rem;
}

.recording-boxes {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem;
}

/* 左:料金表の枠。特に背景は敷かず、Recording本体の色調のまま */
.recording-price-box {
  flex: 0 1 340px;
  min-width: 260px;
}

.recording-price-box .section-note {
  text-align: left;
  margin-bottom: 1rem;
}

/* 右:ご利用時間の目安の枠。写真の上で読みやすいよう半透明(50%)の板を敷く */
.recording-guide-box {
  flex: 1 1 320px;
  background: rgba(3, 7, 18, 0.5);
  padding: 1.25rem 1.75rem;
}

.recording-guide-label {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

/* 料金の各行。以前の<table>と同じ手書きフォント+下線のスタイルを引き継ぐ */
.recording-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 2em;
  border-bottom: 1px solid var(--line);
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
}

.recording-table-row:last-child {
  border-bottom: none;
}

/* 延長料金の行は基本プランと区別するため、上に区切り線を足す */
.recording-table-row--extra {
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.recording-grid-yen {
  font-variant-numeric: tabular-nums;
}

/* 時間表記(1h/3h/6h/10h)は文字数がバラつくので、固定幅の中で中央揃え */
.recording-table-hour {
  display: inline-block;
  /* 「10h Pack」まで1行に収まる幅(2.2em→3.6em)。emなので流動フォントサイズにも追従する */
  width: 3.6em;
  text-align: center;
  white-space: nowrap;
}

/* 「延長1h」は文字数が多く2.2em幅に収まらないので、固定幅をやめて
   自然な幅+左寄せにする。「延長」は和文でDancing Scriptの対象外フォントに
   フォールスルーするため、行の700指定のままだと太字に見えてしまう */
.recording-table-hour--wide {
  width: auto;
  text-align: left;
  font-weight: 400;
}

/* 「延長」は和文フォントの分、数字の「1h」より大きく見えてバランスが
   悪いので少し縮小する */
.recording-table-hour-label {
  font-size: 0.68em;
}

.recording-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recording-guide-list li {
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* 見出しだけ手書き風にして、Priceのテープの手作り感と少しだけ繋げる実験 */
.recording .section-title {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 3.8rem);
  display: inline-block;
  margin-bottom: 0;
}

.recording .section-note {
  margin-bottom: 0;
}

/* 「Recording」見出しと同じ縦積みパターン(英語タイトル+日本語注釈)で揃える。
   Mix & Masteringとの間に区切り線を1本入れ、見出しは左寄せにする */
.recording-guide-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
  margin: 2rem 0 1.8rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--line-strong);
}

.recording-guide-title {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 3.8rem);
  color: var(--ink);
  margin-bottom: 0;
}

.recording-guide-note {
  max-width: 560px;
  margin: 1.2rem auto 0;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* 当日の流れ(4ステップ)。番号なしの「タイトル+説明」で、Mix & Mastering
   (recording-mixmaster-item)と同じ組み方に揃える */
.recording-workflow-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.recording-workflow-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}

.recording-workflow-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.recording-workflow-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .recording { padding: 3rem 0; }
  .recording-layout { padding: 0 1.5rem; }
}

/* Mix & Mastering(表の外に出した相談枠)。見出しはRecordingと同じく左寄せ、
   説明の2行だけは元のスタイル(左寄せ・ぶら下げインデント)のまま変更しない */
.recording-mixmaster {
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--line-strong);
  text-align: left;
}

.recording-mixmaster-title {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 3.8rem);
  color: var(--ink);
  margin-bottom: 0.7rem;
}

/* ブロックとしてはインナー幅の中央に来るよう幅を絞ってセンタリングしつつ、
   中身はWorkflowと同じ「用語(太字)+説明(ミュート)」の二段組みに揃える */
.recording-mixmaster-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}

.recording-mixmaster-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.recording-mixmaster-term {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.recording-mixmaster-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---- Access ----
   セクション自体の背景は白木テクスチャ1枚(変更なし)。 */
.access {
  overflow: hidden; /* パララックスで背景をはみ出させるため */
}

/* 層1: 背景の白木。Recordingと同じく擬似要素で敷く */
.access::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/access-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 層2: テキストは黒半透明パネル(.access-text)の上に乗るため、明色で統一
   (以前はPCのみ白木に直乗せで濃色にしていたが、パネルをPCにも敷いたため
   モバイルと同じ配色に一本化) */
.access .section-title { color: var(--ink); }
.access .access-name { color: var(--ink); }
.access .access-address,
.access .access-transport-desc { color: var(--ink-muted); }
.access .access-transport { border-top-color: var(--line); }
.access .access-map { border-color: var(--line-strong); }
.access .access-map-link {
  color: var(--primary-hover);
  border-bottom-color: var(--primary-hover);
}
.access .access-contact { border-top-color: var(--line); }
.access .access-contact-title { color: var(--ink); }
.access .access-contact-desc { color: var(--ink-muted); }
.access .access-contact-tel {
  color: var(--primary-hover);
  border-bottom-color: var(--primary-hover);
}

/* 層3: 中身のレイアウト。幅はAboutより少し狭く中央寄せ、
   左＝entranceの写真1枚(視差なし)、右＝テキスト */
.access-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 3rem;
  align-items: center;
  width: min(1100px, 100% - 6rem);
  margin: 0 auto;
}

.access-photo {
  margin: 0;
  background: var(--bg-raised);
  overflow: hidden; /* ホバーズームで画像がはみ出さないように(Aboutの写真と同じ挙動) */
}

/* テキスト側は黒半透明パネルに載せる(以前はモバイルのみだったが、PCの白木の上でも
   同じパネルで統一)。透明度は高め(=薄め)にして下の写真を感じさせる。
   薄くした分パネルだけでは文字のコントラストが不足するので、
   文字側にドロップシャドウを足して背景の濃さに頼らず可読性を確保する */
.access-text {
  background: rgba(3, 7, 18, 0.5);
  padding: 2rem 2.25rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.5);
  /* --ink-mutedを標準の#8b95a3より明るく上書き。写真+半透明パネルの上だと
     標準の濃さでは沈んで見えにくいため、このパネル内だけ明るくする */
  --ink-muted: #dde2e8;
}

/* Access見出し+名前+住所(左) と Googleマップ(右) を2カラムで高さを揃える */
.access-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

.access-intro { min-width: 0; }

/* 地図本体+「Googleマップで見る→」リンクをまとめて1カラムに縦積みし、
   マップの直下にリンクが来るようにする */
.access-map-block {
  display: flex;
  flex-direction: column;
  height: 100%; /* .access-topのstretchでaccess-introと高さを揃える */
}

.access-photo img {
  display: block;
  width: 100%;
  /* トリミングせず、常に写真全体(上下とも)が見えるようにする */
  height: auto;
  /* Aboutの写真と同じホバーズームに揃える */
  filter: saturate(0.9) contrast(1.05) brightness(0.92);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.access-photo:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05) brightness(1);
}

@media (max-width: 900px) {
  /* モバイルはデスクトップのグリッドをやめ、entrance写真をレイアウトの
     背景として敷き、下方向へフェードしてテキストパネル(Aboutと同じ黒半透明)に
     繋げる。テキストはフェードに少しかぶる位置から始める */
  .access-layout {
    display: block;
    position: relative;
    width: min(1100px, 100% - 2.5rem);
    min-height: 480px;
  }

  .access-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 78%);
  }

  .access-photo img {
    width: 100%;
    height: 100%;
    /* 背景として敷くため、モバイルだけはトリミングして全面を覆う */
    object-fit: cover;
    object-position: center 15%;
  }

  .access-text {
    position: relative;
    z-index: 1;
    margin-top: 46vw;
    padding: 1.5rem 1.25rem; /* PCよりカラム幅が狭いため詰める(背景はデフォルトの.access-textと共通) */
  }

  /* 狭い画面では2カラムをやめ、見出し+名前+住所 → 地図の縦積みに */
  .access-top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .access-map-block {
    height: auto;
  }
  .access-map {
    height: 220px; /* 縦積みではstretchで高さを揃える相手がいないため固定に戻す */
    min-height: 0;
    flex: none;
  }
}

.access-content { font-size: 0.95rem; line-height: 1.9; }

.access-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.5rem; }

.access-address { color: var(--ink-muted); margin-bottom: 0.5rem; font-size: 1.1rem; }

.access-hours { color: var(--ink-muted); margin-bottom: 1.25rem; font-size: 0.95rem; }

/* 電車・バス・車の3行。ラベルはCAUTIONと同じくmono+オレンジで揃える */
.access-transport {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.access-transport-row {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin-bottom: 0.6rem;
}
.access-transport-row:last-child { margin-bottom: 0; }

.access-transport-label {
  flex: none;
  width: 3em;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem; /* 隣のaccess-transport-descと同じサイズに揃える */
  color: var(--ink);
}

.access-transport-desc {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* 地図はデフォルトだと白背景で浮いてしまうので、他の写真と同じくダークな
   トーンに寄せる(反転+色相回転のダークモード表現) */
.access-map {
  width: 100%;
  flex: 1 1 auto; /* .access-map-block内で残り高さを埋める */
  min-height: 200px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  filter: invert(92%) hue-rotate(180deg) contrast(0.85) brightness(0.95);
}

.access-map-link {
  display: inline-block;
  align-self: flex-start; /* .access-map-block(flex縦積み)内で幅いっぱいに伸びないよう */
  margin-top: 0.75rem;
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--primary-hover);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.access-map-link:hover { opacity: 0.7; }

/* ---- Access内のContact(手描きラフの通り、電車/バス/車の下に区切って追加) ---- */
.access-contact {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.access-contact-title {
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); /* ACCESSの見出し(.section-title)と同じサイズに揃える */
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.access-contact-desc {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Instagram行/Tel行の2行に分け、電車・バス・車の行(.access-transport-row)と
   同じ「ラベル+内容」の並びに揃える。以前はQRとテキストリンクと電話番号が
   横1列に並んでいて、大きさの違う要素が雑然と並ぶ印象だったため整理した */
.access-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.access-contact-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  row-gap: 0.5rem;
}

.access-contact-label {
  flex: none;
  width: 5.5em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

.access-contact-insta-text {
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--primary-hover);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.access-contact-insta-text:hover { opacity: 0.7; }

.access-contact-qr {
  flex: none;
  display: block;
  line-height: 0;
  transition: opacity 0.2s;
}
.access-contact-qr:hover { opacity: 0.7; }

.access-contact-qr img {
  display: block;
  width: 84px;
  height: 84px;
  border: 1px solid var(--line-strong);
  background: #fff; /* QRは白地前提の画像なので、周囲の暗い背景でも読み取り面を確保 */
  padding: 4px;
}

.access-contact-tel {
  color: var(--primary-hover);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--primary-hover);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.access-contact-tel:hover { opacity: 0.7; }

/* ---- フッター ---- */
footer {
  text-align: center; padding: 3rem 1.5rem;
  color: var(--ink-muted); font-size: 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--void);
}

/* ---- レスポンシブ対応 ---- */
@media (max-width: 768px) {
  .hero-bg-img {
    animation:
      bgFadeIn 1.4s ease-out forwards,
      zoomPanMobile 26s ease-in-out infinite alternate;
  }

  .nav-container { padding: 1rem 1.5rem; }
  header.is-scrolled .nav-container { padding: 0.6rem 1.5rem; }
  .menu-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; right: 0;
    width: max-content;
    max-width: calc(100vw - 3rem);
    background: rgba(3, 7, 18, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column; align-items: stretch;
    gap: 0; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--line); border-top: none;
  }
  .nav-links.active { max-height: 350px; }
  .nav-links a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1.05rem;
    white-space: nowrap;
    text-align: right;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .hero-logo-area {
    top: 24%;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
  }
  .hero-text-area {
    bottom: 1.5rem;
    right: 0.5rem;
    text-align: right;
  }
  .hero-frame-line-top { top: 1.25rem; }
  .hero-frame-line-bottom { bottom: 1.25rem; }
  .hero-logo {
    max-width: 100%;
    margin-left: 0;
  }

  /* Recording表: スマホ幅だと1.5remの手書きフォントの字下げが
     窮屈になるため縮小する */
  .recording-table-row { font-size: 1.15rem; padding: 0.6rem 1em; justify-content: center; gap: 1.5rem; }

  .recording-mixmaster { margin-top: 1.5rem; }

  /* スマホ幅では料金表とご利用時間の目安を横並びにする余白がないため、
     見出し→注記→料金表→目安の縦積みに戻す */
  .recording .recording-top .recording-top-title { text-align: center; }

  .recording-boxes {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .recording-price-box .section-note { text-align: center; }
}