/* ===== 01-tokens.css ===== */
/*
 * デザイントークン（2026年8月のリニューアル後）
 *
 * 全ページ共通で「写真主役・黒基調」の配色を使う。
 * 値の決め方と理由は docs/04-リニューアル設計.md にまとめてある。
 *
 * ブレークポイント（旧サイトと同じ値を踏襲）
 *   small  : 〜1140px
 *   tablet : 〜840px
 *   mobile : 〜540px
 * CSS 変数はメディアクエリに使えないため、各 CSS では実数値で書いている。
 */

:root {
  /* 書体 */
  --font-en: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-lato: Lato, 'Helvetica Neue', Arial, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --font-maru: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-kurenaido: 'Zen Kurenaido', 'Hiragino Sans', sans-serif;

  /* 地の色 */
  --c-ink: #050505;      /* 全面写真の地（写真の暗部に合わせた値） */
  --c-bg: #121212;       /* 本文セクションの地。純黒だと写真と同化する */
  --c-bg-deep: #0c0c0c;  /* フッター・くぼんで見せたい面 */

  /* 文字 */
  --c-text: #faf8f3;       /* 見出し・本文 */
  --c-text-soft: #dcd6cc;  /* リード文 */
  --c-text-mute: #b7b0a6;  /* 小見出し・キャプション */
  --c-text-dim: #857f77;   /* 著作権表記など、いちばん弱い文字 */

  /* 線 */
  --c-line: #3a372f;    /* 区切りの罫線 */
  --c-border: #5c574e;  /* ボタンなどの枠線 */

  /* 差し色（金）。ボタン・英字見出し・リンク */
  --c-gold: #f2b73c;
  --c-gold-hi: #ffdd80;

  /* お知らせの色面（チラシの黄緑） */
  --c-green: #c9d658;
  --c-green-ink: #14260f;

  /* 図版などで使う色（「演奏が伝える5つの風景」やライブ日付に由来） */
  --c-red: #e2483c;
  --c-orange: #ed6d47;
  --c-yellow: #d5cc4c;
  --c-green-live: #2f9e57;
  --c-blue: #4a9ad4;
  --c-purple: #c86ba0;

  /* 余白とレイアウト */
  --pad: 52px;          /* セクションの左右余白（画面幅で変える） */
  --w-content: 1140px;  /* 読み物の最大幅 */
  --h-bar: 88px;        /* 840px 以下で画面上部に固定されるバーの高さ */
}

@media screen and (max-width: 1140px) {
  :root {
    --pad: 40px;
  }
}

@media screen and (max-width: 840px) {
  :root {
    --pad: 28px;
  }
}

@media screen and (max-width: 540px) {
  :root {
    --pad: 20px;
    --h-bar: 72px;
  }
}


/* ===== 02-reset.css ===== */
/* リセット ------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-jp);
  line-height: 1.4;
}

/*
 * 表示アニメーションで一時的に右へずれる要素があるため、
 * 横方向のはみ出しは常に切り落とす（clip なら position: fixed が効いたまま）。
 */
html,
body {
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Material Icons（旧サイトと同じアイコン書体をセルフホストしている） */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* 画面には出さないがスクリーンリーダーには読ませる */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ===== 03-canvas.css ===== */
/*
 * キャンバス・レイヤー
 *
 * 旧サイト（STUDIO）のレイアウトは「すべての要素が縦並びの flex コンテナで、
 * 自動では伸縮しない」という前提で組まれている。見た目を一致させるため、
 * その前提だけをここで共通ルールとして定義し、各ページの CSS は
 * このルールの上に差分だけを書く。
 */

.box {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  max-width: 100%;
  z-index: 0;
}

/* 文字要素は横並び・中央寄せが既定 */
/*
 * 旧サイトは文字要素すべてに word-spacing: 1px が掛かっていたため、
 * 欧文の見た目を合わせるために同じ指定を全体に入れている。
 */
body {
  word-spacing: 1px;
}

.text {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 画像を背景として敷く箱（object-fit: cover 相当） */
.media {
  overflow: hidden;
}

.media > img,
img.media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media--contain > img,
img.media--contain {
  object-fit: contain;
}

/* 横幅いっぱいのセクション */
.section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

/* 中央寄せの内側コンテナ */
.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
}

.link {
  cursor: pointer;
}

/*
 * スクロールで現れる演出
 * JS が画面内に入った要素へ .is-in を付ける。JS が無効な場合は
 * 何も起きず、最初から表示されたままになる（内容は必ず読める）。
 */
.appear {
  transition-property: opacity, transform, clip-path;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 1000ms;
}

.js .appear:not(.is-in) {
  opacity: 0;
}

.js .appear--up:not(.is-in) {
  transform: translateY(40px);
}

.js .appear--right:not(.is-in) {
  transform: translateX(85px);
}

.js .appear--zoom-in:not(.is-in) {
  transform: scale(0.7);
}

.js .appear--zoom-out:not(.is-in) {
  transform: scale(1.1);
}

/* 数字などを少し小さい状態から出す（トップページのライブ日付） */
.appear--pop {
  transform-origin: left center;
  transition-duration: 700ms;
}

.js .appear--pop:not(.is-in) {
  transform: scale(0.8);
}

/*
 * 写真を「開いて」見せる（幕が開くように、下から／左から現れる）。
 * 透明度は動かさず、切り取り範囲だけを動かすので、写真そのものには手を加えない。
 *
 * 切り取るのは「中身（子要素）」で、枠そのものは切り取らない。
 * 枠を切り取ってしまうと、画面に入ったかどうかの判定（IntersectionObserver）が
 * 効かなくなり、いつまでも出てこなくなる。
 */
.appear--wipe-up > *,
.appear--wipe-right > * {
  /* 終わりの値も書いておく（none との間では変化が繋がらないため） */
  clip-path: inset(0 0 0 0);
  transition-property: clip-path;
  transition-duration: 1200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: inherit;
}

.js .appear--wipe-up:not(.is-in),
.js .appear--wipe-right:not(.is-in) {
  opacity: 1;
}

.js .appear--wipe-up:not(.is-in) > * {
  clip-path: inset(100% 0 0 0);
}

.js .appear--wipe-right:not(.is-in) > * {
  clip-path: inset(0 100% 0 0);
}

/* 罫線を左から引く */
.appear--draw {
  transform-origin: left center;
  transition-duration: 1200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.js .appear--draw:not(.is-in) {
  opacity: 1;
  transform: scaleX(0);
}


@media (prefers-reduced-motion: reduce) {
  .appear {
    transition: none;
  }

  .js .appear:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .js .appear:not(.is-in) > * {
    clip-path: none;
  }
}


/* ===== 04-header.css ===== */
/*
 * ヘッダー（全ページ共通）
 *
 * 841px 以上：写真の上に重なる透明なヘッダー。
 *   ・少しスクロールすると .is-stuck が付いて地が黒くなり、ロゴが小さくなる
 *   ・下へスクロール中は .is-hidden が付いて隠れる（06-sticky-header.js）
 * 840px 以下：ロゴ＋ハンバーガーの細いバーと、全画面のドロワー。
 */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad);
  transition: background-color 0.4s ease, padding 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-stuck {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(5, 5, 5, 0.92);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__logo {
  display: block;
  width: 264px;
  transition: width 0.4s ease;
}

.site-header.is-stuck .site-header__logo {
  width: 190px;
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.site-header__link {
  font-family: var(--font-en);
  transition: color 0.3s ease;
}

.site-header__link:hover {
  color: var(--c-gold);
}

.site-header__cta {
  padding: 10px 24px;
  background: var(--c-gold);
  color: #121212;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: background-color 0.3s ease;
}

.site-header__cta:hover {
  background: var(--c-gold-hi);
  color: #121212;
}

.mobile-bar {
  display: none;
}

@media screen and (max-width: 1140px) {
  .site-header__logo {
    width: 210px;
  }

  .site-header__nav,
  .site-header__list {
    gap: 22px;
  }
}

@media screen and (max-width: 840px) {
  .site-header {
    display: none;
  }

  .mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: var(--h-bar);
    padding-left: 8px;
    background: rgba(5, 5, 5, 0.88);
  }

  .mobile-bar__logo {
    display: block;
    width: 150px;
    height: 84px;
  }

  .mobile-bar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mobile-bar__toggle {
    margin-right: 20px;
    color: var(--c-text);
    font-size: 30px;
  }
}

@media screen and (max-width: 540px) {
  .mobile-bar__logo {
    width: 116px;
    height: 68px;
  }

  .mobile-bar__toggle {
    margin-right: 15px;
    font-size: 26px;
  }
}

/* --- ドロワー --- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.drawer[hidden] {
  display: none;
}

.drawer__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #050505, #0c0c0c 54%, rgba(12, 12, 12, 0.92));
  animation: drawer-in 320ms ease both;
}

@keyframes drawer-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.drawer__inner {
  display: flex;
  justify-content: center;
  width: 689px;
  max-width: 100%;
  padding: 0 var(--pad);
}

.drawer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.drawer__link {
  display: block;
  padding: 6px 0;
  color: var(--c-text);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  transition: color 0.3s ease, transform 0.3s ease;
}

.drawer__link:hover {
  color: var(--c-gold);
  transform: translateX(4px);
}

.drawer__close {
  position: absolute;
  top: 26px;
  right: 20px;
  color: var(--c-text);
  font-size: 30px;
}

.drawer__close:hover {
  color: var(--c-gold);
}

/* ドロワーを開いている間は背面をスクロールさせない */
body.is-drawer-open {
  overflow: hidden;
}


/* ===== 05-footer.css ===== */
/*
 * フッター（全ページ共通）
 * リンクの中身は site.json の nav / members / twitter から作る。
 */

.site-footer {
  padding: 60px var(--pad) 40px;
  background: var(--c-bg-deep);
  border-top: 1px solid var(--c-line);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__mark {
  width: 88px;
  height: auto;
  opacity: 0.85;
}

.site-footer__name {
  font-size: 12px;
  letter-spacing: 0.16em;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.site-footer__nav a {
  color: var(--c-text-mute);
  transition: color 0.3s ease;
}

.site-footer__nav a:hover {
  color: var(--c-gold);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--c-line);
}

.site-footer__sns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text-soft);
  transition: color 0.3s ease;
}

.site-footer__sns:hover {
  color: var(--c-gold);
}

.site-footer__sns img {
  width: 15px;
  height: auto;
}

.site-footer__sns-note {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c-text-mute);
}

.site-footer__copy {
  margin-top: 34px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
}


@media screen and (max-width: 840px) {
  .site-footer {
    padding: 48px var(--pad) 36px;
  }

  .site-footer__top {
    gap: 26px;
  }
}

@media screen and (max-width: 540px) {
  .site-footer__nav ul {
    gap: 8px 18px;
  }
}


/* ===== 06-shop-badge.css ===== */
/* 右下に固定表示される「ショップはこちら」バッジ ----------------------- */

.shop-badge {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  width: 257px;
  height: 100vh;
  pointer-events: none;
}

.shop-badge__link {
  display: block;
  width: 180px;
  height: 217px;
  pointer-events: auto;
}

.shop-badge__link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 840px) {
  .shop-badge {
    width: 132px;
  }

  .shop-badge__link {
    width: 100%;
    height: 159px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 540px) {
  .shop-badge {
    width: 92px;
  }

  .shop-badge__link {
    height: 111px;
  }
}


/* ===== 07-components.css ===== */
/*
 * ページをまたいで使う部品（2026年8月のリニューアル後）
 *
 *   .media-frame  写真の枠（スクロールでゆっくりずれる。05-parallax.js と対）
 *   .page-hero    下層ページの見出しビジュアル
 *   .sec-head     セクション見出し（英字＋日本語＋罫線）
 *   .label-en     金の英字ラベル
 *   .title-lg /  .title-md  明朝の見出し
 *   .lead         リード文
 *   .button       ボタン（--ghost 枠線／--gold 金ベタ／--ink 濃緑）
 */

/* --- 写真の枠（スクロールでゆっくりずれる） ---------------------------- */

/*
 * 枠より縦に --bleed の2倍だけ大きい画像を入れ、その範囲内で上下に動かす。
 * 動かす量は JS（05-parallax.js）が --parallax に入れる。
 * はみ出しは写真の拡大（＝切れる）なので、はみ出させる量はここ一箇所で決める。
 * 枠が小さくなる狭い画面ほど、同じ px でも切れる割合が大きくなるため控えめにする。
 */
.media-frame {
  position: relative;
  overflow: hidden;
  --bleed: 28px;
}

@media screen and (max-width: 1140px) {
  .media-frame {
    --bleed: 18px;
  }
}

.media-frame > img {
  position: absolute;
  top: calc(var(--bleed) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--bleed) * 2);
  object-fit: cover;
  object-position: center;
}

/* はみ出しの幅を超えて動かすと枠に隙間ができるので、動く量は --bleed で頭打ちにする */
@media screen and (min-width: 841px) {
  .media-frame > img {
    transform: translate3d(0, clamp(calc(var(--bleed) * -1), var(--parallax, 0px), var(--bleed)), 0);
  }
}

/*
 * 840px 以下ではパララックスが止まる（05-parallax.js が何もしない）。
 * 動かさないのにはみ出させると、写真が拡大されて切れるだけ損なので枠ぴったりにする。
 */
@media screen and (max-width: 840px) {
  .media-frame > img {
    top: 0;
    height: 100%;
  }
}

/* 楽器の飴色。文字の塗りをグラデーションにする（影は drop-shadow で付ける） */
.wood-text {
  display: inline-block;
  background: linear-gradient(150deg, #f0d5a4 0%, #daad68 36%, #c08a48 68%, #9c6033 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
}

.label-en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--c-gold);
}

.title-lg {
  font-family: var(--font-mincho);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.5;
}

.title-md {
  font-family: var(--font-mincho);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 700;
  line-height: 1.4;
}

.lead {
  max-width: 560px;
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
  color: var(--c-text-soft);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow__rule {
  width: 44px;
  height: 1px;
  background: var(--c-gold);
}

.eyebrow__en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 15px 34px;
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.button--ghost {
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

.button--ghost:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.button--gold {
  background: var(--c-gold);
  color: #121212;
  font-weight: 700;
}

.button--gold:hover {
  background: var(--c-gold-hi);
  color: #121212;
}

.button--ink {
  background: var(--c-green-ink);
  color: var(--c-green);
}

.button--ink:hover {
  background: #0a1707;
  color: var(--c-green);
}

/* セクション見出し（Member / Five Scenes / Live Schedule） */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 34px;
}

.sec-head__en {
  font-family: var(--font-en);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1;
}

.sec-head__ja {
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--c-text-mute);
  white-space: nowrap;
}

.sec-head__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

.sec-head__year {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-text-mute);
}


/* --- 下層ページの見出しビジュアル -------------------------------------- */

/*
 * 高さは画面幅に連れて変える。ここに入れる写真はほとんどが横位置（3:2）なので、
 * 幅の 2/3 を目安にすると、狭い画面でも上下がほとんど切れない。
 * 広い画面では帯として見せたいので、px と画面の高さの両方で頭打ちにする。
 */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: min(66vw, 620px, 74vh);
  min-height: 240px;
  background: var(--c-ink);
  overflow: hidden;
}

.page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/*
 * 縦位置の写真を使うページ（吉田）。狭い画面では枠のほうを縦長にして収める。
 */
.page-hero--portrait {
  height: min(96vw, 620px, 74vh);
}

.page-hero--portrait .page-hero__image {
  object-position: center 26%;
}

/*
 * スマホより広いと帯が横長になり、切って入れると顔のどアップになってしまう。
 * 写真の地は真っ黒で帯の地とほぼ同じなので、切らずに置いて文字を避けた右側に寄せる。
 */
@media screen and (min-width: 541px) {
  .page-hero--portrait {
    /* 写真の四隅の色。帯の地をこれに合わせると、収めた写真の輪郭が出ない */
    background: #020202;
  }

  .page-hero--portrait .page-hero__image {
    object-fit: contain;
    object-position: 72% center;
  }
}

/* 文字を載せる側だけを、黒から黒へのグラデーションで沈める（色は足さない） */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.7) 0%, rgba(5, 5, 5, 0.35) 42%, rgba(5, 5, 5, 0.92) 100%);
}

.page-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0 var(--pad) 46px;
}

.page-hero__en {
  font-family: var(--font-en);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.page-hero__ja {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--c-text-mute);
}

.page-hero__ja::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--c-gold);
}

/* 旧デザインの名残。いまは使っていない */
.scroll-hint,
.arrow-down {
  display: none;
}

@media screen and (max-width: 840px) {
  /*
   * 画面上部に固定されるバーは地が濃く、写真に重ねると上端の被写体が隠れてしまう。
   * 841px 以上の透明なヘッダーと違って重ねる意味がないので、バーの下から始める。
   */
  .page-hero {
    margin-top: var(--h-bar);
    height: min(66vw, 620px, calc(74vh - var(--h-bar)));
  }

  .page-hero--portrait {
    height: min(96vw, 620px, calc(74vh - var(--h-bar)));
  }

  .page-hero__body {
    padding-bottom: 36px;
  }

  /*
   * スマホはヘッダーのバー自体に地の色があるので、写真の上側は暗くしすぎない
   * （暗くすると人物の顔が沈んで見えなくなる）。
   */
  .page-hero__scrim {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.35) 0%, rgba(5, 5, 5, 0.2) 40%, rgba(5, 5, 5, 0.9) 100%);
  }
}

@media screen and (max-width: 540px) {
  .page-hero__en {
    font-size: clamp(28px, 8vw, 34px);
  }

  .page-hero__ja {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}

/* --- 読み物の共通レイアウト -------------------------------------------- */

/* セクションの標準的な余白 */
.section-pad {
  padding: 84px var(--pad) 76px;
}

@media screen and (max-width: 840px) {
  .section-pad {
    padding: 60px var(--pad) 56px;
  }
}


/* ===== 10-home.css ===== */
/*
 * トップページ（D案「写真主役・黒基調」）
 *
 * 設計の引き継ぎ書は docs/04-リニューアル設計.md。
 * 配色・寸法はそこに書いた値をそのまま使っている。書体は他ページと共通。
 *
 * このファイルの中身はトップページ（body.page-home）専用。
 * クラス名の頭は hm-（home の意）で揃えてある。
 */



/* 写真の枠（.media-frame）は 07-components.css で定義している */

/* --- ヒーロー ---------------------------------------------------------- */

/*
 * 写真（幅 62.5%・3:2）が上端 160px の位置から丸ごと収まる高さを確保する。
 * 足りないと下端が overflow: hidden で切られる。
 */
.hm-hero {
  position: relative;
  min-height: max(720px, calc(62.5vw / 1.5 + 170px));
  background: var(--c-ink);
  overflow: hidden;
}

/*
 * 写真は右下から画面外へ抜ける。枠の比は元画像（3:2）に合わせてあるので、
 * どの画面幅でもギターが欠けない。
 */
.hm-hero__media {
  position: absolute;
  top: 160px;
  right: 0;
  width: 62.5%;
  aspect-ratio: 3 / 2;
}

.hm-hero__media > img {
  object-position: 50% 42%;
}

.hm-hero__body {
  position: absolute;
  left: var(--pad);
  bottom: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(440px, 40%);
}

.hm-hero__title {
  font-family: var(--font-mincho);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/*
 * 1行ずつ「下からせり上がる」。
 * 枠（.hm-hero__line）ではみ出しを隠し、中の文字を動かす。
 * 画面内かどうかの判定は h1 自身に付けている（.appear--lines）。
 */
.hm-hero__line {
  display: block;
  overflow: hidden;
}

.hm-hero__line > span {
  display: inline-block;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js .appear--lines:not(.is-in) {
  opacity: 1;
}

.js .appear--lines:not(.is-in) .hm-hero__line > span {
  transform: translateY(108%);
}

.hm-hero__line:nth-child(1) > span {
  transition-delay: 140ms;
}

.hm-hero__line:nth-child(2) > span {
  transition-delay: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero__line > span {
    transition: none;
  }

  .js .appear--lines:not(.is-in) .hm-hero__line > span {
    transform: none;
  }
}

.hm-hero__lead {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.05;
  color: #e6e0d7;
}

/* スクロールの合図（金の線が下へ流れ続ける） */
.scroll-cue {
  position: absolute;
  right: var(--pad);
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scroll-cue__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-text-mute);
  writing-mode: vertical-rl;
  transition: color 0.3s ease;
}

.scroll-cue:hover .scroll-cue__label {
  color: var(--c-gold);
}

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 72px;
  background: rgba(250, 248, 243, 0.22);
  overflow: hidden;
}

.scroll-cue__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  animation: scroll-cue-line 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-cue-line {
  0% {
    transform: translateY(-100%);
  }
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* --- 私たちについて ---------------------------------------------------- */

.hm-about {
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  background: var(--c-bg);
}

/* 高さは列幅（52%）を 3:2 で割った値。写真の左右も上下も切らずに済む */
.hm-about__media {
  height: min(640px, calc(52vw / 1.5));
}

.hm-about__media > img {
  object-position: 52% 46%;
}

.hm-about__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 72px var(--pad);
}

/* --- お知らせ ---------------------------------------------------------- */

.hm-news__feature {
  display: grid;
  grid-template-columns: 1fr 480px;
  background: var(--c-green);
  color: var(--c-green-ink);
}

.hm-news__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 76px var(--pad);
}

.hm-news__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hm-news__badge {
  padding: 7px 16px;
  background: var(--c-green-ink);
  color: var(--c-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hm-news__badge--dark {
  background: var(--c-line);
  color: var(--c-text);
}

.hm-news__en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.hm-news__title {
  font-family: var(--font-mincho);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.38;
}

.hm-news__text {
  font-size: 15px;
  line-height: 2.05;
}

.hm-news__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hm-news__flyer {
  overflow: hidden;
}

.hm-news__flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 2件目以降のお知らせ（黒地に写真を並べる） */
.hm-news__sub {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 72px var(--pad);
  background: var(--c-bg);
}

/* 1枚目を大きく見せ、右に本文を置く */
.hm-news__sub-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hm-news__sub-photo {
  aspect-ratio: 3 / 2;
}

.hm-news__sub-photo > img {
  object-position: center 46%;
}

.hm-news__sub-text {
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text-soft);
}

/*
 * 縦位置と横位置が混ざるので、切り取らずに高さだけ揃えて並べる
 * （cover にすると縦位置の写真の上下が切れる）。
 */
/*
 * 残りの写真は「高さを揃えて、横幅は写真の比率のまま」並べる。
 * 縦位置・横位置が混ざっても切らずに済み、帯として揃って見える。
 * 入りきらないときは横スクロールする。
 */
/*
 * safe を付けないと、入りきらないときに左端の写真までスクロールできなくなる。
 * なお、この帯の img は遅延読み込みにしない（横にはみ出したまま読まれないため）。
 */
.hm-news__photos {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.hm-news__photos li {
  flex: none;
  height: 240px;
}

.hm-news__photos > li:nth-child(2) {
  transition-delay: 90ms;
}

.hm-news__photos > li:nth-child(3) {
  transition-delay: 180ms;
}

.hm-news__photos > li:nth-child(4) {
  transition-delay: 270ms;
}

.hm-news__photos > li:nth-child(5) {
  transition-delay: 360ms;
}

.hm-news__photos img {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* --- メンバー ---------------------------------------------------------- */

.hm-member {
  padding: 84px var(--pad) 76px;
  background: var(--c-bg);
}

.hm-member__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hm-member__link {
  position: relative;
  display: block;
  overflow: hidden;
}

/*
 * 横位置の写真（湯浅）と縦位置の写真（吉田）が2枚並ぶ。
 * どちらかの比に寄せるともう一方が大きく切れるので、正方形にして痛み分けにする。
 */
.hm-member__photo {
  display: block;
  aspect-ratio: 9 / 8;
  max-height: 620px;
}

/* 縦位置の写真。切れるのは上下なので、顔と楽器が収まる位置にずらす */
.hm-member__photo > img {
  object-position: center 34%;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 横位置の写真。切れるのは左右なので、楽器のヘッドが残る位置にずらす */
.hm-member__photo--yuasa > img {
  object-position: 58% center;
}

/* 名前を載せる下半分だけを、黒から黒へのグラデーションで沈める（色は足さない） */
.hm-member__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 34%, rgba(5, 5, 5, 0.55) 64%, rgba(5, 5, 5, 0.9) 100%);
  pointer-events: none;
}

.hm-member__name {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hm-member__en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

.hm-member__ja {
  font-family: var(--font-mincho);
  font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hm-member__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-text-soft);
  transition: color 0.3s ease;
}

.hm-member__more span {
  transition: transform 0.3s ease;
}

.hm-member__link:hover .hm-member__more {
  color: var(--c-gold);
}

.hm-member__link:hover .hm-member__more span {
  transform: translateX(4px);
}

.hm-member__link:hover .hm-member__photo > img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.03);
}

/* --- 演奏が伝える5つの風景 --------------------------------------------- */

.hm-scenes {
  padding: 84px var(--pad) 76px;
  background: var(--c-bg);
}

.hm-scene__head {
  display: grid;
  grid-template-columns: 84px 1fr 40px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  border-top: 1px solid var(--c-line);
  text-align: left;
  cursor: pointer;
}

.hm-scene:last-child .hm-scene__head {
  border-bottom: 1px solid var(--c-line);
}

.hm-scene:last-child .hm-scene__head[aria-expanded='true'] {
  border-bottom: 0;
}

.hm-scene__no {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.hm-scene__labels {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hm-scene__title {
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 700;
}

.hm-scene__lead {
  font-size: 13px;
  color: var(--c-text-mute);
}

/* 開閉の印（＋と−） */
.hm-scene__mark {
  position: relative;
  justify-self: end;
  width: 16px;
  height: 16px;
}

.hm-scene__mark::before,
.hm-scene__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--c-gold);
  transition: transform 0.3s ease;
}

.hm-scene__mark::after {
  transform: rotate(90deg);
}

.hm-scene__head[aria-expanded='true'] .hm-scene__mark::after {
  transform: rotate(0deg);
}

.hm-scene__panel[hidden] {
  display: none;
}

.hm-scene__body {
  padding: 0 108px 30px;
  font-size: 14px;
  line-height: 2.1;
  color: var(--c-text-soft);
}

/* --- ライブ情報 -------------------------------------------------------- */

.hm-live {
  padding: 84px var(--pad) 76px;
  background: var(--c-bg);
}

.hm-live__head {
  display: grid;
  grid-template-columns: 230px 1fr 130px;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 30px 0;
  border-top: 1px solid var(--c-line);
  text-align: left;
  cursor: pointer;
}

.hm-live__row:last-child .hm-live__head {
  border-bottom: 1px solid var(--c-line);
}

.hm-live__row:last-child .hm-live__head[aria-expanded='true'] {
  border-bottom: 0;
}

.hm-live__date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-en);
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 700;
  line-height: 1;
}

.hm-live__date-extra {
  font-size: 0.5em;
}

.hm-live__dow {
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--c-text-mute);
}

.hm-live__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hm-live__title {
  font-family: var(--font-mincho);
  font-size: 22px;
  line-height: 1.5;
}

.hm-live__where {
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-mute);
}

.hm-live__place::after {
  content: '　';
}

.hm-live__tbd {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
}

.hm-live__more {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.hm-live__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.hm-live__body {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hm-live__head:hover .hm-live__body {
  transform: translateX(8px);
}

.hm-live__head:hover .hm-live__more {
  color: var(--c-gold-hi);
}

.hm-live__head[aria-expanded='true'] .hm-live__arrow {
  transform: rotate(90deg);
}

.hm-live__panel[hidden] {
  display: none;
}

.hm-live__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 4px 0 34px 260px;
}

.hm-live__detail {
  font-size: 13px;
  line-height: 2.1;
  color: var(--c-text-soft);
}

/* メルマガの案内 */
.hm-mailmag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 56px;
  padding: 34px 40px;
  border: 1px solid var(--c-line);
}

.hm-mailmag__text {
  font-size: 13px;
  line-height: 2;
  color: var(--c-text-soft);
}

/* --- オーケストラ（写真の帯） ------------------------------------------ */

/*
 * 合奏団の集合写真。帯を薄くすると端の奏者が切れてしまうので、
 * 画面幅の 4 割ほどの高さを取って、なるべく全体が残るようにする。
 */
.hm-orche {
  position: relative;
  height: min(42vw, 700px, 78vh);
  min-height: 320px;
  overflow: hidden;
  background: var(--c-ink);
}

.hm-orche__media {
  position: absolute;
  inset: 0;
}

.hm-orche__media > img {
  object-position: center 62%;
}

/*
 * 写真には色を乗せない。文字を載せる左側だけを黒から黒へのグラデーションで沈める。
 */
.hm-orche__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.97) 0%, rgba(18, 18, 18, 0.9) 28%, rgba(18, 18, 18, 0.5) 58%, rgba(18, 18, 18, 0) 82%);
}

.hm-orche__body {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(480px, 55%);
}

.hm-orche .lead {
  font-size: 14px;
  line-height: 2.05;
}

/* --- リリース情報 ------------------------------------------------------ */

.hm-release {
  padding-bottom: 84px;
  background: var(--c-bg);
}

.hm-release__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* 高さは列幅（50%）を商品写真の比で割った値。ジャケットの端が切れないようにする */
.hm-release__media {
  height: min(560px, calc(50vw / 1.62));
}

.hm-release__media > img {
  object-position: 62% center;
}

.hm-release__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 60px var(--pad);
}

.hm-release__body .title-lg {
  line-height: 1.3;
}

.hm-release__others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 76px var(--pad) 0;
}

.hm-release__other a {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-release__cover {
  display: block;
  padding: 18px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
}

.hm-release__cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.hm-release__other-title {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.hm-release__other a:hover .hm-release__other-title {
  color: var(--c-gold);
}

.hm-release__other-text {
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-text-mute);
}

.hm-goods {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 72px;
  padding: 44px var(--pad) 0;
  border-top: 1px solid var(--c-line);
}

.hm-goods__note {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
}

.hm-goods .button {
  align-self: center;
}

.button__arrow {
  margin-left: 12px;
  transition: transform 0.3s ease;
}

.button:hover .button__arrow {
  transform: translateX(4px);
}

/* ====================================================================== */
/* 画面幅 1140px 以下                                                      */
/* ====================================================================== */

@media screen and (max-width: 1140px) {

  .hm-hero {
    min-height: max(640px, calc(58vw / 1.5 + 150px));
  }

  .hm-hero__media {
    top: 140px;
    width: 58%;
  }

  .hm-hero__body {
    bottom: 56px;
    width: min(440px, 44%);
  }

  .hm-news__feature {
    grid-template-columns: 1fr 380px;
  }

  .hm-live__head {
    grid-template-columns: 190px 1fr 110px;
    gap: 24px;
  }

  .hm-live__panel {
    padding-left: 214px;
  }

}

/* ====================================================================== */
/* 画面幅 840px 以下（タブレット・スマホ）                                  */
/* ====================================================================== */

@media screen and (max-width: 840px) {

  .scroll-cue {
    display: none;
  }

  /* ヒーローは「文字 → 写真」の縦積み */
  .hm-hero {
    min-height: 0;
    padding-top: 119px;
    display: flex;
    flex-direction: column;
  }

  .hm-about {
    align-items: stretch;
  }

  .hm-hero__body {
    position: static;
    order: 1;
    width: 100%;
    padding: 44px var(--pad) 38px;
    gap: 20px;
  }

  /* 写真の中の img は絶対配置なので、枠は relative のままにしておく（static にすると枠からはみ出す） */
  .hm-hero__media {
    position: relative;
    top: auto;
    right: auto;
    order: 2;
    width: 100%;
  }

  .hm-hero__title {
    font-size: clamp(32px, 6.4vw, 48px);
  }

  .hm-about {
    grid-template-columns: 1fr;
  }

  .hm-about__media {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .hm-about__body {
    padding: 48px var(--pad) 56px;
  }

  .hm-news__feature {
    grid-template-columns: 1fr;
  }

  .hm-news__body {
    order: 1;
    padding: 52px var(--pad);
  }

  /* チラシはスマホでは切らずに全体を見せる */
  .hm-news__flyer {
    order: 2;
    padding: 0 var(--pad) 52px;
  }

  .hm-news__flyer img {
    height: auto;
    margin: 0 auto;
    max-width: 420px;
    object-fit: contain;
  }

  .hm-news__sub {
    padding: 52px var(--pad);
  }

  .hm-news__sub-main {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* 横スクロールであることが分かるよう、画面の端まで写真を流す */
  .hm-news__photos {
    justify-content: flex-start;
    margin: 0 calc(var(--pad) * -1);
    padding: 0 var(--pad) 4px;
  }

  .hm-news__photos li {
    height: 170px;
  }

  .hm-member,
  .hm-scenes,
  .hm-live {
    padding: 60px var(--pad) 56px;
  }

  .hm-member__name {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .hm-scene__head {
    grid-template-columns: 56px 1fr 24px;
    gap: 16px;
    padding: 22px 0;
  }

  .hm-scene__no {
    font-size: 22px;
  }

  .hm-scene__title {
    font-size: 18px;
  }

  .hm-scene__body {
    padding: 0 0 26px 72px;
  }

  /* ライブは「日付」を上に、内容を下に置く2段組み */
  .hm-live__head {
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    padding: 24px 0;
  }

  .hm-live__date {
    grid-column: 1;
  }

  .hm-live__more {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .hm-live__body {
    grid-column: 1 / -1;
  }

  .hm-live__title {
    font-size: 18px;
  }

  .hm-live__panel {
    padding: 0 0 28px;
  }

  .hm-mailmag {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-top: 40px;
    padding: 28px;
  }

  /*
   * 文字を写真に重ねると、狭い画面では奏者が文字と暗がりに埋もれてしまう。
   * スマホでは「写真 → 文章」の縦並びにして、写真は横幅いっぱいに全体を見せる。
   */
  .hm-orche {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding-bottom: 56px;
    background: var(--c-bg);
  }

  .hm-orche__media {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 2;
  }

  .hm-orche__media > img {
    object-position: center 50%;
  }

  .hm-orche__scrim {
    display: none;
  }

  .hm-orche__body {
    position: relative;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    padding: 34px var(--pad) 0;
  }

  .hm-release__feature {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .hm-release__media {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .hm-release__body {
    padding: 48px var(--pad) 52px;
  }

  .hm-release__others {
    padding-top: 52px;
    gap: 18px;
  }

  .hm-release {
    padding-bottom: 60px;
  }

  .hm-goods {
    margin-top: 52px;
  }

}

/* ====================================================================== */
/* 画面幅 540px 以下（スマホ）                                             */
/* ====================================================================== */

@media screen and (max-width: 540px) {

  .hm-hero {
    padding-top: 88px;
  }

  .hm-hero__title {
    font-size: 32px;
  }

  .sec-head {
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 26px;
  }

  .sec-head__rule {
    display: none;
  }

  .hm-member__list {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hm-news__photos li {
    height: 160px;
  }

  .hm-live__date {
    font-size: 34px;
  }

  .hm-live__title {
    font-size: 17px;
  }

  .hm-release__others {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .hm-release__cover {
    padding: 10px;
  }

  .hm-release__other-title {
    font-size: 15px;
  }

  .hm-release__other-text {
    display: none;
  }

}

/* 「動きを減らす」設定の端末では、繰り返しの動きを止める */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line::after {
    animation: none;
  }

  .hm-member__photo > img,
  .hm-live__body,
  .button__arrow {
    transition: none;
  }
}


/* ===== 11-about.css ===== */
/*
 * 自己紹介（/about）
 *
 * 「名前 → 写真 → 経歴 → 楽器の紹介」を2人分。
 * トップページと同じ黒基調・明朝の見出し・金の差し色で揃えている。
 */

/*
 * 「名前（全幅）／写真＋経歴（2段）／楽器の紹介（全幅）」の3段組み。
 * 写真は全幅に伸ばすと顔しか写らないので、本文の横に収める大きさにしている。
 */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
  padding: 96px var(--pad) 40px;
  background: var(--c-bg);
}

.bio + .bio {
  padding-top: 80px;
}

/* --- 氏名 --- */

.bio__name {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 40px;
}

.bio__name-en {
  font-family: var(--font-en);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}

.bio__name-ja {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-gold);
}

.bio__name::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

/* --- 人物写真と経歴 --- */

/* 枠の比は写真に合わせる（横位置は 3:2）。固定の高さにすると画面幅で切れ方が変わる */
.bio__portrait {
  grid-column: 1;
  aspect-ratio: 3 / 2;
}

.bio__portrait > img {
  object-position: center 34%;
}

/* 縦位置の写真はそのぶん枠も縦長にする（無理に切らない） */
.bio__portrait--tall {
  aspect-ratio: 3 / 4;
}

.bio__portrait--tall > img {
  object-position: center 22%;
}

.bio__profile {
  grid-column: 2;
}

.bio__profile p {
  max-width: 62em;
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
}

/* --- 楽器の紹介 --- */

/*
 * 楽器の紹介は「写真＋説明」をひとつのカードにまとめる。
 * 写真を大きく（左半分）取り、説明は右半分いっぱいに置く。
 * 2人分とも同じ形にして見た目を揃えている。
 *
 * 地は楽器写真の四隅の色。写真を切らずに収めているので、
 * カードの地をこれに合わせないと写真の輪郭が四角く浮いて見える。
 */
.instrument {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: stretch;
  min-height: 440px;
  margin-top: 64px;
  background: #020202;
  border: 1px solid var(--c-line);
}

/* HTML は「説明 → 写真」の順だが、見た目は写真を左に置く */
.instrument__photo {
  order: -1;
}

.instrument__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 48px 56px;
}

.instrument__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-gold);
}

.instrument__title {
  font-family: var(--font-mincho);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
}

.instrument__text {
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
}

/*
 * 楽器は縦位置で撮ってあるので、横長の枠に cover で入れると胴か棹のどちらかが切れる。
 * 写真の地が黒でカードの地とほぼ同じなので、切らずに収めても継ぎ目は見えない。
 */
.instrument__photo {
  --bleed: 0px;
  height: 100%;
  min-height: 440px;
}

.instrument__photo > img {
  object-fit: contain;
  object-position: center;
}

/* --- もっと知るボタン --- */

.bio-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad) 84px;
  background: var(--c-bg);
}

@media screen and (max-width: 1140px) {
  .bio {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 0 34px;
  }
}

@media screen and (max-width: 840px) {
  .bio {
    grid-template-columns: 1fr;
    padding-top: 72px;
  }

  .bio__portrait,
  .bio__profile {
    grid-column: 1;
  }

  .bio__portrait {
    max-width: 440px;
  }

  /* 縦長の枠が画面いっぱいだと間延びするので、横幅のほうを抑える */
  .bio__portrait--tall {
    max-width: 320px;
  }

  .bio__profile {
    margin-top: 30px;
  }

  .instrument {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 48px;
  }

  .instrument__body {
    padding: 34px var(--pad);
  }

  .instrument__photo {
    height: 62vw;
    max-height: 380px;
    min-height: 0;
  }

  .bio-cta {
    padding-bottom: 64px;
  }
}

@media screen and (max-width: 540px) {
  .instrument__body {
    padding: 26px 22px;
  }

  .bio__name {
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 28px;
  }

  .bio__name::after {
    display: none;
  }

  .instrument__title {
    font-size: 20px;
  }
}


/* ===== 12-history.css ===== */
/*
 * 過去の情報（/history）
 * 長い年表を1本のテキストで見せるページ。読みやすさだけを整える。
 */

.history {
  padding: 84px var(--pad) 40px;
  background: var(--c-bg);
}

.history__body p {
  max-width: 900px;
  margin-inline: auto;
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
}

.history__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px var(--pad) 84px;
}

@media screen and (max-width: 840px) {
  .history {
    padding-top: 60px;
  }

  .history__body p {
    font-size: 14px;
    line-height: 2.1;
  }
}

@media screen and (max-width: 540px) {
  .history__cta {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 64px;
  }
}


/* ===== 13-member.css ===== */
/*
 * 湯淺 隆／吉田 剛士 の個別ページ（/yuasa・/yoshida）
 * 年ごとの実績をカードで並べる。カードは枠線だけの静かな作り。
 */

.works-section {
  padding: 84px var(--pad) 40px;
  background: var(--c-bg);
}

.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin-inline: auto;
}

.works__item {
  display: flex;
}

.works__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 220px;
  padding: 32px 28px;
  border: 1px solid var(--c-line);
  color: var(--c-text);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.works__card:hover {
  background: var(--c-bg-deep);
  border-color: var(--c-gold);
}

.works__year {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

.works__title {
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
}

.works__note {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--c-text-mute);
}

@media screen and (max-width: 1140px) {
  .works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 840px) {
  .works-section {
    padding-top: 60px;
  }

  .works__card {
    min-height: 0;
    padding: 24px 22px;
  }

  .works__title {
    font-size: 19px;
  }
}

@media screen and (max-width: 540px) {
  .works {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .works__title {
    font-size: 17px;
  }
}


/* ===== 14-shop.css ===== */
/*
 * ショップ（/shop）
 * 「CD」「グッズ」「楽譜」の区切りごとに商品を並べる。
 * 商品は「ジャケット＋説明＋注文ボタン」の2段組み。
 */

.shop-section {
  padding: 84px var(--pad) 40px;
  background: var(--c-bg);
}

.shop-section + .shop-section {
  padding-top: 20px;
}

/* CD / グッズ / 楽譜 の区切り見出し */
.shop-section__title {
  display: flex;
  align-items: baseline;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto 40px;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}

.shop-section__title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

/* --- 商品 --- */

.product {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--c-line);
}

.shop-section .product:last-of-type {
  border-bottom: 0;
}

.product__cover {
  padding: 18px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
}

.product__cover img {
  width: 100%;
  height: auto;
}

.product__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.product__kicker {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--c-gold);
}

.product__title {
  font-family: var(--font-mincho);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.4;
}

.product__lead {
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: var(--c-text-soft);
}

/* 収録曲などの細かい情報 */
.product__details {
  width: 100%;
  padding: 26px 30px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
  color: var(--c-text-mute);
  font-size: 12px;
  font-weight: 300;
  line-height: 2;
}

.product__price {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
}

.product__order {
  margin-top: 4px;
}

/* --- グッズ --- */

.goods {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.goods__photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goods__photos img {
  width: 100%;
  height: auto;
}

.goods__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.goods__title {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.4;
}

.goods__lead {
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: var(--c-text-soft);
}

/*
 * グッズの写真は縦横の比率がばらばらなので、同じ大きさの枠に「収めて」並べる。
 * 枠いっぱいに伸ばすと、元が小さい写真が拡大されて粗く見える。
 */
.goods__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 48px auto 0;
}

/* データ上の「行」はまとめ方の都合なので、並びには影響させない */
.goods__gallery-row {
  display: contents;
}

.goods__gallery-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 12px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
  object-fit: contain;
}

@media screen and (max-width: 1140px) {
  .product {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 34px;
  }

  .goods {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 34px;
  }
}

@media screen and (max-width: 840px) {
  .shop-section {
    padding-top: 60px;
  }

  .product,
  .goods {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .product__cover,
  .goods__photos {
    max-width: 420px;
  }

  .goods__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 540px) {
  .product {
    margin-bottom: 44px;
    padding-bottom: 44px;
  }

  .product__details {
    padding: 20px;
  }

  .goods__gallery {
    gap: 10px;
  }
}


/* ===== 15-archive.css ===== */
/*
 * 主な活動・制作実績（/archive）
 * 見出し → YouTube の埋め込み → 実績の本文 → 履歴ページへの導線。
 */

.archive {
  padding: 84px var(--pad) 40px;
  background: var(--c-bg);
}

.archive__heading-wrap {
  max-width: 1180px;
  margin: 0 auto 40px;
}

.archive__heading {
  display: inline-block;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--c-text);
}

.archive__videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin-inline: auto;
}

.archive__video {
  aspect-ratio: 16 / 9;
  background: var(--c-bg-deep);
}

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

.archive__works {
  max-width: 900px;
  margin: 64px auto 0;
}

.archive__works p {
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
}

.archive__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px var(--pad) 84px;
}

@media screen and (max-width: 840px) {
  .archive {
    padding-top: 60px;
  }

  .archive__works p {
    font-size: 14px;
    line-height: 2.1;
  }
}

@media screen and (max-width: 540px) {
  .archive__videos {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .archive__cta {
    padding-bottom: 64px;
  }
}


/* ===== 16-contact.css ===== */
/*
 * お問い合わせ（/contact）
 * 入力欄は黒地に合わせて、枠線だけの静かな作りにしている。
 */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 84px var(--pad) 100px;
  background: var(--c-bg);
}

.contact__lead {
  max-width: 720px;
  font-family: var(--font-mincho);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
}

.contact__note {
  max-width: 720px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2;
  color: var(--c-text-mute);
  text-align: center;
}

/* --- フォーム --- */

.contact-form {
  width: 640px;
  max-width: 100%;
  margin-top: 48px;
}

.contact-form__row + .contact-form__row {
  margin-top: 24px;
}

.contact-form__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
}

.contact-form__required {
  color: var(--c-gold);
}

.contact-form__input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-family: var(--font-jp);
  font-size: 15px;
  transition: border-color 0.3s ease;
}

.contact-form__input::placeholder {
  color: #6f6a62;
}

.contact-form__input:hover {
  border-color: var(--c-border);
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--c-gold);
}

.contact-form__textarea {
  height: 190px;
  padding: 14px 16px;
  line-height: 2;
  resize: vertical;
}

.contact-form__error {
  margin-top: 8px;
  color: var(--c-red);
  font-size: 12px;
}

/* 迷惑メール対策の項目は画面から隠す */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  margin-top: 36px;
  background: var(--c-gold);
  border: 0;
  color: #121212;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact__submit:hover {
  background: var(--c-gold-hi);
}

.contact__submit--link {
  width: 260px;
  margin-inline: auto;
}

/* --- 送信結果 --- */

.contact__alert {
  width: 640px;
  max-width: 100%;
  margin-top: 32px;
  padding: 16px 18px;
  background: rgba(226, 72, 60, 0.12);
  border: 1px solid var(--c-red);
  color: var(--c-red);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.contact__done {
  width: 640px;
  max-width: 100%;
  margin-top: 48px;
  padding: 40px 32px;
  border: 1px solid var(--c-line);
  text-align: center;
}

.contact__done-title {
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-gold);
}

.contact__done-text {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.1;
  color: var(--c-text-soft);
}

.contact__order {
  margin-top: 28px;
}

@media screen and (max-width: 840px) {
  .contact {
    padding: 60px var(--pad) 72px;
  }
}

@media screen and (max-width: 540px) {
  .contact-form {
    margin-top: 34px;
  }

  .contact__done {
    padding: 28px 20px;
  }
}


/* ===== 17-content.css ===== */
/*
 * 読み物ページ（contents-1〜32）
 *
 * 旧サイトはページごとに高さが決め打ちされていたが、リニューアルで
 * 中身に合わせて自然に流す形にした（余白は下の padding で作る）。
 */

.article {
  background: var(--c-bg);
}

.article__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: 180px var(--pad) 110px;
}

.article__title {
  font-family: var(--font-mincho);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.article__subtitle {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.9;
  color: var(--c-gold);
  text-align: center;
}

.article__title + .article__subtitle {
  margin-bottom: 10px;
}

.article__heading {
  align-self: stretch;
  margin-top: 48px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mincho);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}

.article__text {
  align-self: stretch;
  margin-top: 26px;
  color: var(--c-text-soft);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.2;
}

.article__title + .article__text,
.article__subtitle + .article__text {
  margin-top: 44px;
}

.article__text--center {
  text-align: center;
}

.article__link {
  margin: 40px 0 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: center;
}

.article__link a {
  color: var(--c-gold);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.article__link a:hover {
  color: var(--c-gold-hi);
  border-bottom-color: var(--c-gold-hi);
}

.article__figure {
  align-self: stretch;
  margin: 44px 0 0;
}

.article__figure img,
.article__gallery-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 写真は2枚ずつ並べる */
.article__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-self: stretch;
  margin: 44px 0 0;
}

.article__gallery-item {
  margin: 0;
}

@media screen and (max-width: 840px) {
  .article__inner {
    padding: 140px var(--pad) 80px;
  }

  .article__text {
    font-size: 14px;
    line-height: 2.1;
  }
}

@media screen and (max-width: 540px) {
  .article__inner {
    padding: 110px var(--pad) 64px;
  }

  .article__gallery {
    gap: 10px;
  }
}


/* ===== 18-flyer.css ===== */
/* チラシ画像だけを置く単独ページ ---------------------------------------- */

.page-flyer {
  background: var(--c-bg);
}

/*
 * チラシは文字を読ませるための画像なので、画面幅に合わせて可能なかぎり大きく出す。
 * 高さを決め打ちにすると、狭い画面で読めない大きさまで縮んでしまう。
 */
.flyer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 74px var(--pad);
}

.flyer__image {
  width: 100%;
  max-width: 800px;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 840px) {
  .flyer {
    padding: 56px var(--pad);
  }
}

@media screen and (max-width: 540px) {
  .flyer {
    padding: 40px var(--pad);
  }
}


/* ===== 19-notfound.css ===== */
/* 404 ページ ------------------------------------------------------------ */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 74vh;
  padding: 180px var(--pad) 120px;
  background: var(--c-bg);
  text-align: center;
}

.notfound__code {
  font-family: var(--font-en);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-gold);
}

.notfound__title {
  font-family: var(--font-mincho);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
}

.notfound__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: var(--c-text-soft);
}

/* 中央寄せの列なので、ボタンの align-self を上書きする */
.notfound .button {
  align-self: center;
  margin-top: 14px;
}

@media screen and (max-width: 540px) {
  .notfound {
    padding: 130px var(--pad) 80px;
  }
}