/* =============================================================
   葛城ゴルフ倶楽部 開場50周年記念LP
   50th-anniversary-style.css
   ※ このLPは独立した静的HTMLとして納品するため、
     既存の style.css を上書きしないようファイル名を分けています。
     クラス名も "ymh-" プレフィックスで統一し、衝突を避けています。
============================================================= */

/* -------------------------------------------------------------
   フルード（なめらか可変）設計について
   ベースは1920px。1920px → 767px の間で下記のclamp()を使い、
   ビューポート幅に応じて連続的にサイズを変化。
   767pxを下回ったら、clamp()の最小値で止まり、
   そこから先はメディアクエリでレイアウト自体を縦組みに切り替え。
------------------------------------------------------------- */

:root {
  /* カラー */
  --color-green-deep: #284a1e;   /* FV〜イントロの深緑背景 */
  --color-green-mid: #3f5c33;
  --color-cream: #ece6d6;        /* HISTORY年表などの生成り背景 */
  --color-text-light: #ffffff;
  --color-text-dark: #1f1f1f;
  --color-accent-gold: #a88b0c;

  /* フォント */
  --font-serif-jp: "Noto Serif JP", serif;
  --font-serif-en: "EB Garamond", serif; /* 年号など数字まわりで使用 */

  /* レイアウト */
  --container-max: 1920px;

  /* ヘッダー高さ */
  --header-height: clamp(85px, calc(56px + 3.73vw), 128px);

  /* ヘッダー左右パディング */
  --header-padding-x: clamp(40px, calc(-18.5px + 7.63vw), 128px);

  /* セクション縦パディング */
  --section-padding-y: clamp(72px, calc(35px + 6.6vw), 160px);

  /* 本文フォントサイズ */
  --font-size-body: clamp(15px, calc(12.6px + 0.174vw), 17px);
}

/* -------------------------------------------------------------
   リセット・ベース
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ymh50th {
  margin: 0;
  font-family: var(--font-serif-jp);
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--color-text-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* 画像化しても実テキストはSEO/読み上げ用にDOM上に残す。見た目だけ隠す */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   ヘッダー（グロナビ）
   FVの上：背景ナシ・白ロゴ・白文字で固定。
   Introに入ったら：すりガラス調の半透明白背景＋カラーロゴ＋濃色文字に
   ディゾルブ（クロスフェード）で切り替わる（.is-scrolled をJSが付与）。
------------------------------------------------------------- */
.ymh-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  color: var(--color-text-light); /* 初期値：FVの上なので白文字 */
  transition: background-color 0.6s ease, color 0.6s ease, height 0.6s ease,
    -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease;
}
.ymh-header.is-scrolled {
  height: calc(var(--header-height) * 0.72); /* Introに入ったら上下の余白を詰めて低く */
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-text-dark);
}
/* backdrop-filter非対応ブラウザ向け：ぼかしが効かない分、少し不透明度を上げて視認性を確保 */
@supports not (backdrop-filter: blur(1px)) {
  .ymh-header.is-scrolled {
    background: rgba(255, 255, 255, 0.75);
  }
}
.ymh-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-padding-x); /* デザイン実測値に合わせて調整 */
}
.ymh-header__logo {
  flex-shrink: 0; /* navに押されて縮まないように固定 */
}
.ymh-header__logo a {
  display: block;
}
/* ロゴ：白版とカラー版を重ねて配置し、opacityのクロスフェードで切り替える */
.ymh-header__logo-imgs {
  position: relative;
  display: block;
}

.ymh-header__logo-img {
  height: clamp(41px, calc(27.7px + 1.74vw), 61px);
  width: auto;
  max-width: none; /* 全体共通のimg{max-width:100%}リセットで潰されないように上書き */
  transition: opacity 0.6s ease;
}
.ymh-header__logo-img--color {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.ymh-header.is-scrolled .ymh-header__logo-img--white {
  opacity: 0;
}
.ymh-header.is-scrolled .ymh-header__logo-img--color {
  opacity: 1;
}
.ymh-header__nav ul {
  display: flex;
  align-items: center;
}
.ymh-header__nav a {
  font-size: clamp(16px, calc(10.68px + 0.694vw), 24px); 
  letter-spacing: 0.12em;
}
/* 「TOP／MESSAGE／HISTORY／CRAFT」全角スラッシュで区切る */
.ymh-header__nav li {
  display: flex;
  align-items: center;
}
.ymh-header__nav li:not(:last-child)::after {
  content: "／";
  margin: 0 clamp(10px, 1.1vw, 20px);
  font-size: clamp(16px, calc(10.68px + 0.694vw), 24px); /* nav文字と同じサイズに追従 */
  opacity: 0.6;
}

/* ハンバーガーボタン：767px以下でのみ表示 */
.ymh-header__hamburger {
  display: none;
  width: 32px; height: 24px;
  position: relative;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ymh-header__hamburger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor;
  /* FVの上（背景なし・白文字）にいる時、写真の明るい部分と被ると
     白いバーが見えづらくなることがあるため、常に軽い影を入れて視認性を確保 */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ymh-header__hamburger span:nth-child(1) { top: 0; }
.ymh-header__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ymh-header__hamburger span:nth-child(3) { bottom: 0; }
.ymh-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.ymh-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ymh-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* モバイルドロワー */
.ymh-drawer {
  position: fixed;
  top: 0; /* ヘッダーの高さが状態によって変わっても隙間ができないよう、最初から画面の一番上まで背景を敷く */
  left: 0; right: 0; bottom: 0;
  z-index: 90; /* headerのz-index:100より下に。ロゴ・閉じるボタンは常にドロワーより手前に見える */
  padding-top: var(--header-height); /* ヘッダー分だけ中身（メニュー・ロゴ）を下げる。背景はposition:absoluteなのでこの影響を受けない */
  background: var(--color-green-deep); /* 背景画像が読み込まれるまでのフォールバック */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ymh-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ymh-drawer__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ymh-drawer__symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  max-width: 420px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.ymh-drawer ul {
  position: relative;
  z-index: 2;
  padding: 24px 5%; /* 左右に5%の余白。罫線・文字の開始位置がこの内側に揃う */
}
.ymh-drawer li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.ymh-drawer a {
  display: block;
  padding: 20px 0;
  color: #fff;
  font-size: 24px;
  letter-spacing: 0.1em;
}
/* 中央下寄りに50周年ロゴ */
.ymh-drawer__emblem {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-bottom: clamp(64px, 14vw, 110px);
}
.ymh-drawer__emblem img {
  width: 138px;
  height: auto;
}

/* -------------------------------------------------------------
   FV（ファーストビュー）
   5枚の画像をディゾルブ（クロスフェード）で切り替えるスライドショー
   PC：アスペクト比 1920:1150を維持したまま可変
   SP：767px以下は3:4に変更
------------------------------------------------------------- */
.ymh-fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1150;
  overflow: hidden;
  background: var(--color-green-deep);
}
.ymh-fv__slides {
  position: absolute;
  inset: 0;
}
.ymh-fv__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease; /* JS(GSAP)側でも制御するが保険としてCSSにも記載 */
}
.ymh-fv__slide.is-active { opacity: 1; }

/* 下の緑セクションへ自然になじませるグラデーション */
.ymh-fv__gradient {
  display: none;
}

.ymh-fv__copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ymh-fv__copy-image img {
  /* 実寸456x244pxに合わせて調整 */
  width: clamp(258px, 24vw, 456px);
  height: auto;
}

@media (max-width: 767px) {
  .ymh-fv {
    aspect-ratio: 3 / 4;
  }
}

/* -------------------------------------------------------------
   共通セクション
------------------------------------------------------------- */
.ymh-section {
  padding: var(--section-padding-y) clamp(20px, 4vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.ymh-section__placeholder {
  color: #999;
  border: 1px dashed #ccc;
  padding: 24px 40px;
  font-size: 14px;
}
.ymh-transition {
  background: var(--color-green-mid);
}
.ymh-history,
.ymh-craft {
  background: var(--color-cream);
}

/* スクロール演出用ユーティリティ（GSAPが自動で初期状態をセットする） */
.js-reveal { will-change: opacity, transform, filter; }

/* -------------------------------------------------------------
   INTRO セクション
   リード文は通常テキスト（Noto Serif JP）でSEOに配慮。
------------------------------------------------------------- */
.ymh-intro {
  position: relative;
  overflow: hidden;
  background: var(--color-green-deep); /* 背景画像が読み込まれるまでのフォールバック色 */
  padding: var(--section-padding-y) clamp(20px, 4vw, 80px);
}
.ymh-intro__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ymh-intro__symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 758px; /* 実寸のまま表示。狭い画面ではみ出さないよう90vwで頭打ち */
  max-width: 90vw;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.ymh-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-text-light);
}
.ymh-intro__lead {
  font-size: clamp(15px, calc(9.01px + 0.781vw), 24px);
  line-height: 2.556; /* 46÷18のunitless比。フォントサイズが変わっても行間比率を維持 */
  letter-spacing: 0.15em;
  font-weight: 300; /* Noto Serif JP Light */
}
/* タグラインとリード文の間の余白（約60px、固定） */
.ymh-intro__lead--first {
  margin-top: 80px;
}
@media (max-width: 767px) {
  /* スマホ表示ではPC用の改行(<br>)を無効化し、幅に応じて自然に折り返す */
  .ymh-intro__lead--first br {
    display: none;
  }
}
/* 段落と段落の間＝1行ぶんの空白（line-heightと同じ量） */
.ymh-intro__lead--gap {
  margin-top: 2.556em;
}
.ymh-intro__tagline {
  display: flex;
  justify-content: center;
}
.ymh-intro__tagline img {
  /* PC〜タブレット：実寸(300x380px)のまま表示。余白は周囲のスペースで確保 */
  width: 300px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .ymh-intro__inner {
    /* 中央揃えだと折り返しの最終行が短く浮いて見えるため左揃えに */
    text-align: left;
  }
  .ymh-intro__tagline img {
    /* SP：画面幅に対して相対的に大きく見せる（気持ち小さめに調整） */
    width: clamp(170px, 47vw, 255px);
  }
}

/* -------------------------------------------------------------
   フォトストリップ（8枚横スライド／右から左へ・ゆっくり）
   クリックで一時停止＋ライトボックス拡大（main.jsで制御）
------------------------------------------------------------- */
.ymh-photo-strip {
  overflow: hidden;
  line-height: 0; /* 画像下の隙間を消す */
}
.ymh-photo-strip__track {
  display: flex;
  width: max-content;
  gap: 0; /* 画像同士を隙間なく連結 */
  animation: ymh-scroll-strip 90s linear infinite;
}
.ymh-photo-strip__track.is-paused {
  animation-play-state: paused;
}
.ymh-photo-strip__item {
  flex-shrink: 0;
  width: clamp(280px, calc(111.7px + 21.94vw), 533px);
}
.ymh-photo-strip__item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
@keyframes ymh-scroll-strip {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* 画像を2セット並べているので半分の移動で1周分に見える */
}

/* -------------------------------------------------------------
   ライトボックス（フォトストリップ画像のクリック拡大用）
------------------------------------------------------------- */
.ymh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.ymh-lightbox[hidden] { display: none; }
.ymh-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}
.ymh-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* -------------------------------------------------------------
   MESSAGE セクション
   デザイン正式値（1440px→1920pxに1.333倍で換算）：
   コンテンツ幅1080→1440px／テキスト幅750→1000px／
   顔写真270x370→360x493px／テキストと写真の間90→120px／
   背景1440x900→1920x1200px／
   ／MESSAGE／17→23px／見出し30→40px／本文15→20px／名前20→27px
------------------------------------------------------------- */
.ymh-message {
  position: relative;
  overflow: hidden;
  background: var(--color-green-mid);
  padding: var(--section-padding-y) clamp(20px, 4vw, 80px);
}
.ymh-message__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ymh-message__block {
  position: relative;
  z-index: 1;
  max-width: 1480px; /* テキスト1000px＋余白120px＋写真360px（所属プロは904+120+456） */
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(64px, 6.25vw, 120px); /* 767pxで64px、1920pxで120px */
}
.ymh-message__block--pro {
  gap: clamp(24px, 2.5vw, 48px); /* 理事長エリアより余白を詰める */
}
.ymh-message__text {
  flex: 1 1 1000px;
  color: var(--color-text-light);
}
.ymh-message__text--pro {
  flex-basis: 862px; /* 写真が570pxに拡大した分、折り返し幅を調整 */
}
.ymh-message__label {
  font-size: clamp(14px, calc(8.01px + 0.781vw), 23px);
  letter-spacing: 0.5em;
  opacity: 0.8;
  margin-bottom: 1em;
}
.ymh-message__heading {
  font-size: clamp(25px, calc(15.02px + 1.301vw), 40px);
  font-weight: 500;
  letter-spacing: 0.3em;
  margin-bottom: 1.2em;
}
.ymh-message__heading-text {
  display: inline-block;
}
.ymh-message__heading .ymh-message__heading-text span {
  display: inline-block;
}
.ymh-message__body {
  font-size: clamp(14px, calc(10.01px + 0.52vw), 20px);
  line-height: 2.1;
  letter-spacing: 0.02em;
}
.ymh-message__body p {
  margin-bottom: 0.4em; /* 段落間の空白を詰めた */
}
.ymh-message__name {
  font-size: clamp(17px, calc(10.35px + 0.867vw), 27px);
  letter-spacing: 0.1em;
  margin-top: 1.5em;
  text-align: right;
}
/* 所属プロブロック全体の位置は右揃え（理事長エリアと同じ）のまま、
   内側の「葛城ゴルフ倶楽部所属」ラベルだけ氏名の頭（左端）に揃える */
.ymh-message__pro-credit {
  text-align: right;
  margin-top: 1.5em;
}
.ymh-message__pro-inner {
  display: inline-block;
  text-align: left;
}
.ymh-message__pro-credit .ymh-message__name {
  text-align: left;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.ymh-message__pro-names {
  /* 手動スペースでの位置調整だと崩れるので、2列グリッドで揃える */
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.6em;
  row-gap: 0.3em;
  text-align: left;
  font-size: clamp(16px, calc(10.01px + 0.781vw), 24px);
  letter-spacing: 0.12em;
  line-height: 1.8;
}
.ymh-message__photo {
  flex-shrink: 0;
}
.ymh-message__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.ymh-message__photo-caption {
  font-size: clamp(11px, calc(6.53px + 0.607vw), 15px);
  letter-spacing: 0.05em;
  color: var(--color-text-light); /* 親の白文字を継承していなかったため明示指定 */
  opacity: 0.85;
  margin-top: 0.8em;
}
.ymh-message__photo--chairman {
  width: clamp(200px, 18.75vw, 360px);
  /* 写真の下端が本文最終行（お願い申し上げます。）の下に揃うよう、実測して逆算した位置 */
  margin-top: clamp(53px, calc(31.04px + 2.862vw), 86px);
}
.ymh-message__photo--pro {
  width: clamp(312px, 29.69vw, 570px); /* 456pxの1.25倍 */
  /* ／MESSAGE／ラベルぶんだけ下げて本文の開始位置に揃える */
  margin-top: clamp(50px, calc(31px + 2vw), 80px);
}

@media (max-width: 767px) {
  .ymh-message__block {
    flex-direction: column;
    align-items: center;
    text-align: left; /* 中央揃えだと折り返し最終行が浮くため左揃えに */
  }
  .ymh-message__text,
  .ymh-message__text--pro {
    width: 100%; /* 左揃えの折り返しが機能するよう、幅いっぱいに広げる */
    flex-basis: auto;
  }
  /* 名前部分 */
  .ymh-message__photo--chairman {
    width: 75vw; /* 縦画像なので控えめに */
    margin-top: 0; /* 縦積みレイアウトではPC用のオフセットは不要 */
  }
  .ymh-message__photo--pro {
    width: 90vw; /* 横画像なので広めに */
  }
}

/* -------------------------------------------------------------
   HISTORY セクション（年表）
   左右の幅はMESSAGEセクションと合わせ、max-width 1480pxを共通使用。
   一番左の「年代・見出し・テキスト」列はCSSのposition:stickyで、
   各年代グループ（.ymh-history__decade）の中だけ画面上部に固定される。
   デコードグループの範囲を出たら自然に次の年代ラベルに切り替わる仕組み。
------------------------------------------------------------- */
.ymh-history {
  position: relative;
  /* overflow:hiddenは付けない：付けるとposition:stickyが効かなくなるため
     （sticky祖先にoverflow:hidden/auto/scrollがあると子孫のstickyが無効化される） */
  background: var(--color-cream);
}

/* ---------- タイトルエリア ---------- */
/* 背景：画面幅いっぱい（1920px基準フル幅）で1枚表示。左右上部のネガポジ写真込み。
   中のテキストだけ1480px幅に収める（MESSAGEと同じ考え方） */
.ymh-history__title-wrap {
  position: relative;
  z-index: 0; /* 独自のスタッキングコンテキストを作り、子のz-index:-1をこの中に閉じ込める */
}
.ymh-history__title-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: -1;
}
.ymh-history__title {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 172px) clamp(20px, 4vw, 80px) clamp(48px, 6vw, 96px);
  text-align: center;
}
.ymh-history__title-en {
  position: relative;
  font-size: clamp(14px, calc(11.34px + 0.347vw), 18px);
  letter-spacing: 0.4em;
  color: #8a8a8a;
  margin-bottom: clamp(24px, 3vw, 48px);
}
.ymh-history__title-vertical {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 3vw, 48px);
}
.ymh-history__title-vertical img {
  /* 実データサイズ137x379pxに合わせて調整 */
  height: clamp(280px, calc(214.1px + 8.588vw), 379px);
  width: auto;
}
.ymh-history__title-lead {
  position: relative;
  font-size: clamp(14px, calc(10.01px + 0.52vw), 20px);
  line-height: 2.1;
  letter-spacing: 0.3em;
  font-weight: 400;
}

/* ---------- 年表本体 ---------- */
/* 背景：画面幅いっぱいで、1970年代の頭からセクション最後まで「本当に固定」の1枚画像。 */
.ymh-history__timeline-wrap {
  position: relative;
  z-index: 0;
}
.ymh-history__timeline-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  z-index: -1;
}
@supports (-webkit-touch-callout: none) {
  /* iOS Safariはbackground-attachment:fixedが効かない/不安定なため、
     その場合だけ通常のcoverにフォールバック（間延びはするが表示崩れは防げる） */
  .ymh-history__timeline-bg {
    background-attachment: scroll;
  }
}
.ymh-history__timeline {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 80px);
  /* 最後の2026年の下の余白。ymh-craft__titleの下パディングと同じ値に揃えてバランスを合わせる */
  padding-bottom: calc(clamp(56px, 7vw, 120px) + 1em);
}
.ymh-history__decade {
  display: grid;
  grid-template-columns: clamp(240px, 19vw, 360px) 1fr;
  gap: clamp(24px, 3.5vw, 72px);
  padding-top: clamp(48px, 6vw, 96px);
}
.ymh-history__decade + .ymh-history__decade {
  border-top: 1px solid rgba(31, 31, 31, 0.12);
}
.ymh-history__decade-label {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  align-self: start;
  padding-bottom: 40px;
}
.ymh-history__decade-year {
  font-family: var(--font-serif-en);
  font-size: clamp(38px, calc(18.04px + 2.602vw), 68px);
  color: var(--color-accent-gold);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.1em;
}
.ymh-history__decade-year span {
  font-family: var(--font-serif-jp); /* 「年代」部分は和文フォントに戻す */
  font-size: 0.4em;
  letter-spacing: 0.1em;
  margin-left: 0.3em;
}
.ymh-history__decade-heading {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(21px, calc(15.02px + 0.78vw), 30px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-dark);
  letter-spacing: 0.1em;
}
.ymh-history__decade-text {
  margin-top: 1em;
  font-size: clamp(14px, calc(12.01px + 0.26vw), 17px);
  line-height: 1.9;
  color: var(--color-text-dark);
  opacity: 0.7;
}

/* ---------- イベント（1件ごとの年表項目） ---------- */
/* 【緑のポインター】【年】【出来事見出し】を1行に横並び
   その下（同じ列＝見出しの真下）に本文・写真を続けるグリッドレイアウト。
   */
.ymh-history__decade-events {
  position: relative;
}
.ymh-history__event {
  display: grid;
  grid-template-columns: 16px minmax(64px, 92px) 1fr;
  column-gap: clamp(12px, 1.6vw, 28px);
  row-gap: clamp(10px, 1.2vw, 18px);
  align-items: center; /* ポインター・年・出来事の高さを1行目の中で中央揃えに */
  padding-bottom: clamp(40px, 5vw, 72px);
}
.ymh-history__event:last-child {
  /* 各年代の最後のイベント（1979/1989/2008/2026）の下に、次の年代との境界線までの余白を確保 */
  padding-bottom: 2em;
}
/* 見出しが2行になった場合のみ、JS（main.js）が付与するクラス。
   ポインター・年・見出しの「1行目のテキストのベースライン」に揃える。
   （startだと行の上端に揃ってしまい、行間の分だけポインターが浮いて見えるため、
   文字のベースラインに揃うbaselineを使用）
   1行のときは通常通り中央揃え（align-items: center）のまま変わらない */
.ymh-history__event--heading-wrapped {
  align-items: baseline;
}
/* ベースライン合わせだとポインターがわずかに下寄りに見えるため、少しだけ上に微調整 */
.ymh-history__event--heading-wrapped .ymh-history__event-dot {
  transform: translateY(-5px);
}
.ymh-history__event--sub {
  padding-top: clamp(8px, 1vw, 16px);
}

/* 年の緑マーカー：中央の実点＋脈動する外側のリング。
   2回脈動したあと、実点より少し大きい半透明の輪が残った状態で止まる。 */
.ymh-history__event-dot {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7fa050; /* 通常の深緑（--color-green-mid）よりも黄緑寄りに */
}
.ymh-history__event-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #7fa050;
  opacity: 0;
  transform: scale(0.6);
}
.ymh-history__event-dot.is-visible::after {
  animation: ymh-dot-pulse 0.8s ease-out 2 forwards;
}
.ymh-history__event-dot--hidden {
  display: none;
}
@keyframes ymh-dot-pulse {
  0%   { opacity: 0.65; transform: scale(0.6); }
  100% { opacity: 0.4;  transform: scale(1.15); }
}

/* ---------- 年号・見出し・サブ見出し・テキストの基準サイズ ---------- */
.ymh-history__event-year {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-serif-en);
  font-size: clamp(20px, calc(11.35px + 1.128vw), 32px);
  font-weight: 500;
  color: var(--color-text-dark);
  line-height: 1.5;
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}
.ymh-history__event-heading {
  grid-column: 3;
  grid-row: 1;
  font-size: clamp(18px, calc(13.35px + 0.607vw), 25px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-dark);
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}

.ymh-history__event-subheading {
  font-size: clamp(18px, calc(13.35px + 0.607vw), 25px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-dark);
  padding-top: clamp(24px, 3vw, 40px);
}
.ymh-history__event-subheading + .ymh-history__event-text {
  margin-top: 0.8em;
}
.ymh-history__event--feature .ymh-history__event-year {
  font-size: clamp(24px, calc(13.36px + 1.388vw), 40px);
  color: var(--color-accent-gold);
}
.ymh-history__event--feature .ymh-history__event-heading {
  font-weight: 500; /* 黒文字見出しの太字化の影響を受けないよう、金色見出しは元の太さを維持 */
  font-size: clamp(22px, calc(14.02px + 1.041vw), 34px);
  line-height: 1.5;
  color: var(--color-accent-gold);
}
.ymh-history__event-body {
  grid-column: 3;
}
/* サブ見出し（本文中の引用的な強調行）。event-quoteクラスに統一 */
.ymh-history__event-quote {
  font-size: clamp(14px, calc(9.68px + 0.573vw), 20px);
  color: var(--color-text-dark);
  letter-spacing: 0.04em;
}
.ymh-history__event-quote--bold {
  font-weight: 700;
}
.ymh-history__event-quote + .ymh-history__event-text {
  margin-top: 0.8em;
}
.ymh-history__event-text + .ymh-history__event-quote {
  margin-top: 0.8em;
}

.ymh-history__event-body .ymh-history__event-heading {
  padding-top: clamp(24px, 3vw, 40px);
}
.ymh-history__event-body .ymh-history__event-heading + .ymh-history__event-text {
  margin-top: 0.8em;
}

.ymh-history__event-body .ymh-history__event-heading.ymh-history__event-heading--tight {
  padding-top: 0.2em;
}
.ymh-history__event-text {
    font-size: clamp(16px, calc(14.67px + 0.1735vw), 18px);
  line-height: 1.9;
  color: var(--color-text-dark);
  font-weight: 400; 
}

.ymh-history__event-note {
  margin-top: 0.8em;
  font-size: clamp(11px, calc(9px + 0.25vw), 13px);
  line-height: 1.8;
  color: var(--color-text-dark);
  opacity: 0.6;
}
.ymh-history__event-photos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 20px);
}
.ymh-history__event-photos:not(:first-child) {
  margin-top: clamp(16px, 2vw, 28px);
}

.ymh-history__event-photos + .ymh-history__event-text {
  margin-top: clamp(16px, 2vw, 28px);
  max-width: calc(2 * clamp(160px, 22vw, 320px) + clamp(10px, 1.2vw, 20px));
}
.ymh-history__event-photo {
  display: block;
  width: clamp(160px, 22vw, 320px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ymh-history__event-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* 背景が透過（抜き）の画像用：緑の半透明背景の上に画像を中央配置する */
.ymh-history__event-photo--cutout {
  background: rgba(40, 74, 30, 0.35); /* --color-green-deep 35% */
  aspect-ratio: 640 / 430; /* 隣の写真と高さを揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.2vw, 16px);
}
.ymh-history__event-photo--cutout img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ymh-history__mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .ymh-history__decade {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ymh-history__decade-label {
    /* 通常の1カラム表示。sticky固定は使わず、素直に縦積み */
    position: static;
    top: auto;
    align-self: auto;
    padding-bottom: 24px;
  }
  .ymh-history__title-vertical {
    /* スマホ表示のみ、PCの2倍程度の余白に */
    margin-bottom: 48px;
  }
  /* スマホ表示では見出し・テキスト・年代（「年代」と「−現在」など）中のPC用改行(<br>)を
     無効化し、幅に応じて自然に折り返すようにする（固定バー内の表示にも同じクラスが使われるため両方に効く） */
  .ymh-history__decade-heading br,
  .ymh-history__decade-text br,
  .ymh-history__decade-year br {
    display: none;
  }
  .ymh-history__event {
    grid-template-columns: 14px minmax(52px, 72px) 1fr;
  }
  .ymh-history__event-photo {
    width: 100%;
    max-width: 320px;
  }

  /* ---------- 現在の年代を表示する固定バー ---------- */
  .ymh-history__mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    padding: 10px clamp(20px, 4vw, 80px);
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .ymh-history__mobile-bar.is-active {
    opacity: 1;
  }
  .ymh-history__mobile-bar .ymh-history__decade-year {
    flex-shrink: 0;
    font-size: clamp(26px, calc(20.6px + 1.1vw), 34px);
  }
  .ymh-history__mobile-bar .ymh-history__decade-heading {
    margin-top: 0;
    flex: 1 1 auto;
    font-size: 13px;
  }
  .ymh-history__mobile-bar .ymh-history__decade-text {
    flex: 1 1 100%;
    margin-top: 2px;
    font-size: 11px;
  }
}

/* -------------------------------------------------------------
   つなぎのステートメントバンド（HISTORY→CRAFTの間の一枚バンド）
------------------------------------------------------------- */
.ymh-transition {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, calc(-86.1px + 39.9vw), 680px); /* 1920pxで680px、767pxで220px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-deep); /* 画像読み込み前のフォールバック */
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 80px);
}
.ymh-transition__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ymh-transition__text {
  position: relative;
  z-index: 1;
  color: var(--color-text-light);
  text-align: center;
  font-size: clamp(20px, calc(6.68px + 1.735vw), 40px);
  line-height: 1.9;
  letter-spacing: 0.5em;
}

/* -------------------------------------------------------------
   BEHIND THE CRAFT セクション
   タイトル・年表本体はHISTORY/MESSAGEと同じmax-width 1480pxを共通使用
   （タイトルの左端／縦書きテキストの両端がHISTORYと揃うように）。
   背景は白＋左上の木陰を1枚の画像にまとめ、HISTORYの年表と同じ
   background-attachment:fixedで「本当に固定」の見え方にしている。
------------------------------------------------------------- */
.ymh-craft {
  position: relative;
  z-index: 0;
  background: #fff;
}
.ymh-craft__bg {
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-size: cover;
  background-position: top left;
  background-attachment: fixed;
  z-index: -1;
}
@supports (-webkit-touch-callout: none) {
  /* iOS Safari対策：HISTORY年表と同じ理由でfixedをscrollにフォールバック */
  .ymh-craft__bg {
    background-attachment: scroll;
  }
}

/* ---------- タイトルエリア ---------- */
.ymh-craft__title {
  max-width: 1440px; 
  margin: 0 auto;
  padding: clamp(64px, 9vw, 172px) clamp(20px, 4vw, 80px) calc(clamp(56px, 7vw, 120px) + 1em);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}
.ymh-craft__title-en {
  font-size: clamp(30px, calc(15.02px + 1.951vw), 60px); /* 1920pxで60px、767pxで30px */
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.6; /* BEHINDとTHE CRAFTの行間を少し広げる */
  color: var(--color-accent-gold);
}
.ymh-craft__subtitle {
  margin-top: clamp(20px, 2.5vw, 32px);
  font-size: clamp(19px, calc(12.68px + 0.815vw), 27px); 
  letter-spacing: 0.3em;
  color: var(--color-accent-gold);
}
.ymh-craft__subtitle-en {
  margin-top: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(12px, calc(9.34px + 0.347vw), 15px);
  letter-spacing: 0.3em;
  color: var(--color-accent-gold);
  opacity: 0.6;
}
.ymh-craft__subtitle-en::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 1px;
  background: currentColor;
}
.ymh-craft__title-vertical {
  flex-shrink: 0;
  display: flex;
}
.ymh-craft__title-vertical img {
  height: clamp(182px, calc(92.2px + 11.71vw), 317px); 
  width: auto;
}

/* ---------- 匠たちの肖像（4枚・画面幅いっぱい） ---------- */
.ymh-craft__portraits {
  display: flex;
  width: 100%;
}
.ymh-craft__portrait {
  flex: 1 1 25%;
  aspect-ratio: 480 / 800; /* 1920px幅時（1枚480px）で高さ800pxになる比率 */
  overflow: hidden;
}
.ymh-craft__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 職種ごとのリスト ---------- */
.ymh-craft__list {
  max-width: 1440px; /* タイトルエリアと同じ幅に統一 */
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 80px);
}
.ymh-craft__staff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2vw, 32px);
  row-gap: clamp(24px, 3vw, 40px);
  padding: clamp(48px, 6vw, 96px) 0;
}
.ymh-craft__staff + .ymh-craft__staff {
  border-top: 1px solid rgba(31, 31, 31, 0.12);
}
.ymh-craft__staff-en {
  font-size: clamp(27px, calc(21.01px + 0.781vw), 36px); /* 1920pxで36px、767pxで27px */
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.4;
  color: var(--color-accent-gold);
}
.ymh-craft__staff-role {
  margin-top: 0.6em;
  font-size: clamp(20px, calc(17.34px + 0.347vw), 24px); /* 1920pxで24px、767pxで20px */
  letter-spacing: 0.04em;
  color: var(--color-accent-gold);
  opacity: 0.8;
}
.ymh-craft__staff-quote {
  font-size: clamp(20px, calc(14.68px + 0.694vw), 28px); /* 1920pxで28px、767pxで20px */
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--color-text-dark);
}
.ymh-craft__staff-body-text {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(16px, calc(14.67px + 0.1735vw), 18px);
  line-height: 1.9;
  color: var(--color-text-dark);
  font-weight: 500; /* 400だと横棒が細く見えて視認性が悪かったため、少し太いウェイトに */
}
.ymh-craft__staff-photo {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ymh-craft__staff-photo img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .ymh-craft__title {
    flex-direction: column;
    gap: clamp(40px, 8vw, 64px);
  }
  .ymh-craft__title-vertical {
    align-self: flex-end;
  }
  .ymh-craft__portraits {
    flex-wrap: wrap;
  }
  .ymh-craft__portrait {
    flex: 1 1 50%;
  }
  .ymh-craft__staff {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* -------------------------------------------------------------
   フッター
------------------------------------------------------------- */
.ymh-footer {
  background: var(--color-green-deep);
  color: var(--color-text-light);
  text-align: center;
  padding: clamp(20px, 2.2vw, 32px) 0 clamp(10px, 1.2vw, 14px);
}
.ymh-footer__divider {
  max-width: 1440px;
  margin: 0 auto clamp(10px, 1.2vw, 14px);
  padding: 0 clamp(20px, 4vw, 80px);
}
.ymh-footer__divider::before {
  content: "";
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.ymh-footer__inner {
  max-width: 1440px; /* CRAFTセクションと同じ幅に統一 */
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 80px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 40px);
  text-align: left;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.ymh-footer__emblem {
  flex-shrink: 0;
}
.ymh-footer__emblem img {
  width: clamp(70px, 5.5vw, 95px);
  height: auto;
}
.ymh-footer__main {
  flex: 1 1 auto;
  min-width: 0; 
}
.ymh-footer__logo {
  margin-bottom: 12px;
}
.ymh-footer__logo img {
  height: clamp(24px, 2vw, 30px);
  width: auto;
}
.ymh-footer__address {
  font-style: normal;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
}
.ymh-footer__address a {
  color: inherit;
  text-decoration: none;
}
.ymh-footer__partners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.ymh-footer__partner-logos {
  /* YAMAHAロゴと葛城北の丸ロゴをひとつのブロックとしてまとめ、
     高さが違う2つのロゴをブロック内で上下中央に揃える */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.2vw, 32px);
}
.ymh-footer__partner-logo img {
  height: clamp(11px, calc(8.34px + 0.347vw), 15px);
  width: auto;
}
.ymh-footer__partner-logo--kitanomaru img {
  height: clamp(26px, calc(20.02px + 0.78vw), 35px);
}
.ymh-footer__privacy-btn {
  display: inline-block;
  border: 1px solid var(--color-text-light);
  color: var(--color-text-light);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.1em;
  padding: 4px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.ymh-footer__privacy-btn:hover {
  opacity: 0.7;
}
.ymh-footer__copyright {
  font-size: 11px;
  opacity: 0.7;
}
@media (max-width: 767px) {
  .ymh-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ymh-footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ymh-footer__logo {
    display: flex;
    justify-content: center;
  }
  .ymh-footer__partners {
    align-items: center;
  }
  .ymh-footer__partner-logos {
    justify-content: center;
  }
}

/* -------------------------------------------------------------
   767px以下：ハンバーガーメニューに切替
------------------------------------------------------------- */
@media (max-width: 767px) {
  .ymh-header__nav { display: none; }
  .ymh-header__hamburger { display: block; }
  .ymh-header.is-menu-open {
    background: var(--color-green-deep);
  }

  :root {
    --header-height: clamp(56px, calc(24.4px + 7.9vw), 85px);
    --header-padding-x: clamp(26px, calc(10.74px + 3.815vw), 40px);
  }

  .ymh-header__logo-img {
    height: clamp(27px, calc(11.74px + 3.815vw), 41px);
  }
}

/* -------------------------------------------------------------
   最上部へ戻るボタン（右下固定）
   一定量スクロールしたら表示し、クリックでページトップへスムーズスクロール
------------------------------------------------------------- */
.ymh-totop {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 80;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(31, 31, 31, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.ymh-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ymh-totop:hover {
  background: rgba(31, 31, 31, 1);
}
.ymh-totop__arrow {
  display: block;
}
@media (max-width: 767px) {
  .ymh-totop {
    right: 16px;
    bottom: 16px;
  }
}