/* ══════════════════════════════════════════════
   リセット
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #DCDDD3;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ══════════════════════════════════════════════
   .fv — FV最外枠（ユーザー指定・変更禁止）
   ══════════════════════════════════════════════ */
.fv {
  width: 1000px;
  height: 510px;   /* 629px → 564px → 510px: MOGI STABLE下端(505px)+5px余白 */
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #d9d9cf;
}

/* ══════════════════════════════════════════════
   ロゴ
   ══════════════════════════════════════════════ */
.fv-logo-wrap {
  position: absolute;
  top: 10px;
  left: 11px;
  display: flex;
  align-items: center;
  gap: 13px;
  z-index: 4;
}

.fv-logo-img {
  width: auto;
  height: 34px;
  display: block;
  object-fit: contain;
}

/* ロゴ横テキスト: Noto Serif JP 19px */
.fv-logo-name {
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #282828;
  line-height: 1;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   メニューリンク (About / Result / Contact)
   小塚ゴシック Pr6N 14px Medium
   top: 10px + height: 30px + align-items: center
   → ボタン（top:10px, height:30px）と文字高さを揃える
   ══════════════════════════════════════════════ */
.fv-nav {
  position: absolute;
  top: 10px;        /* 18px → 10px: ボタンと同じ top に */
  height: 30px;     /* ボタンと同じ高さで align-items:center が効く */
  right: 225px;
  display: flex;
  align-items: center;
  z-index: 4;
}

.fv-nav-link {
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N",
               "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
               "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #282828;
  margin-right: 28px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.fv-nav-link:hover {
  color: #5a5047;
  border-bottom-color: #5a5047;
}

.fv-nav-link:last-child {
  margin-right: 0;
}

/* ══════════════════════════════════════════════
   黒ボタン2つ
   right: 2px → FV右端ぴったり寄せ
   ══════════════════════════════════════════════ */
.fv-btns {
  position: absolute;
  top: 10px;
  right: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}

.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 100px;
  padding: 0 12px;
  font-family: "Noto Serif JP", serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: #444444;
  border-radius: 0;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.fv-btn:hover {
  background-color: #555555;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════
   写真 共通ベース
   top: 54px（67px→54px に縮小）
   ══════════════════════════════════════════════ */
.fv-photo {
  position: absolute;
  top: 54px;       /* 67px → 54px: 写真全体を上に詰める */
  display: block;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   競馬写真（div + background-image 方式）
   ──────────────────────────────────────────────
   元画像が 1000×1000px の正方形のため background-image を使用。
   object-fit:cover では portrait コンテナで Y overflow = 0。

   background-size: auto 190%
     height = 190% × 395 = 750.5px（正方形ソースなので幅も 750.5px）
     Y overflow = 750.5 - 395 = 355.5px

   background-position: 55% 61%
     X = 55%: 馬の顔が中央やや右（左寄り補正）
     Y offset = 355.5 × 0.61 = 216.9px
     上端: 216.9/750.5 ≈ 28.9% → 騎手頭が y≈10px に
     下端: (216.9+395)/750.5 ≈ 81.5% → 馬の足爪が下辺に

   filter: brightness(1.45) saturate(1.4) contrast(0.90)
     ← saturation 1.2 → 1.4 に増加（彩度UP）
   ══════════════════════════════════════════════ */
.fv-photo--race {
  left: 302px;
  width: 354px;
  height: 395px;
  background-image: url('../images/hero-race.png');
  background-size: auto 190%;       /* 160% → 190%: 頭と足を同時に収める */
  background-position: 55% 61%;     /* Y:61% 頭10px・足元ぴったり */
  background-repeat: no-repeat;
  filter: brightness(2.05) saturate(1.9) contrast(0.85); /* brightness 1.75→2.05: さらに一段階明るく */
}

/* ══════════════════════════════════════════════
   厩舎写真（<img> + object-fit: cover）
   元画像 717×1024px の portrait → cover が正常に機能
   right: 0 → FV右端ぴったり接触（維持）
   height: 395px（448px → 395px: 競馬写真に合わせて縮小）
   ══════════════════════════════════════════════ */
.fv-photo--stable {
  right: 0;
  width: 344px;
  height: 395px;        /* 448px → 395px */
  object-fit: cover;
  object-position: center 82%;
  filter: brightness(0.72) contrast(1.38) saturate(1.1);
}

/* ══════════════════════════════════════════════
   縦書きコピー — 2列 (Noto Serif JP 21px Medium)
   top: 130px（154px→130px: 写真縮小に合わせて上に詰める）
   ══════════════════════════════════════════════ */
.fv-col {
  position: absolute;
  top: 130px;           /* 154px → 130px: 上に詰めてバランス調整 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 500;     /* Medium */
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: #282828;
  white-space: nowrap;
  z-index: 2;
}

/* 右列: 一頭一頭に、 */
.fv-col--r {
  left: 155px;
}

/* 左列: 誠実に向き合う */
.fv-col--l {
  left: 118px;
}

/* ══════════════════════════════════════════════
   英語サブコピー (Noto Serif JP 14px Medium)
   top: 315px（325px → 315px: 10px 上へ移動）
   line-height: 29.33px（= 22pt: 1pt = 1.333px）
   ══════════════════════════════════════════════ */
.fv-copy-en {
  position: absolute;
  top: 315px;           /* 325px → 315px: 10px上へ */
  left: 55px;
  width: 195px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;      /* 29.33px → 1.3 (≈18.2px): 半分程度に詰める */
  letter-spacing: 0.12em;  /* 0.02em → 0.12em: トラッキング120相当 */
  color: #282828;
  z-index: 2;
}

/* ══════════════════════════════════════════════
   MOGI STABLE
   z-index:3（写真 z:1 より前面）

   写真 bottom = top:54px + height:395px = 449px
   top: 415px → overlap: 449 - 415 = 34px（写真下部に重なる）

   font-size: 90px
   transform: translateX(55px)
     = 前回の 35px + 今回さらに 20px = 合計 55px 右へ
   ══════════════════════════════════════════════ */
.fv-title {
  position: absolute;
  top: 415px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  transform: translateX(55px);  /* 35px → 55px: さらに右へ 20px */

  font-family: "BIZ UDPGothic", "BIZ UDゴシック", sans-serif;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #282828;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════════
   FV アニメーション
   ──────────────────────────────────────────────
   【禁止事項厳守】
   ・既存の position / top / left / width / height /
     font-size / object-position / filter は変更しない
   ・.fv の width:1000px; height:629px; は変更しない
   ・アニメーション追加のみ
   ──────────────────────────────────────────────
   【タイムライン】
   0.0s  背景（常時表示）
   0.2s  ロゴ・HIROYUKI MOGI・メニュー・ボタン
   0.5s  競馬写真フェードイン
   0.8s  厩舎写真フェードイン
   1.2s  縦書きコピー 1文字ずつ（右列→左列）
   1.8s  英字コピーふわっと
   2.1s  MOGI STABLE 右からスライドイン
   ══════════════════════════════════════════════ */

/* ─── keyframes ─────────────────────────────── */

/* ヘッダー要素: 上から8pxふわっと下へ */
@keyframes fvFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* 写真・英字コピー: 下から12pxふわっと上へ */
@keyframes fvFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* 縦書き1文字: 下から5pxふわっと上へ（小さめ） */
@keyframes fvCharUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* MOGI STABLE: 右からスライドイン
   既存 CSS の transform: translateX(55px) に対して
   スライド量 80px を足した 135px → 55px で最終位置を保つ */
@keyframes fvSlideRight {
  from { opacity: 0; transform: translateX(135px); }
  to   { opacity: 1; transform: translateX(55px);  }
}

/* ─── 各要素への animation 適用 ──────────────── */

/* ロゴ・HIROYUKI MOGI: 0.64s delay, 1.92s duration (×0.8) */
.fv-logo-wrap {
  animation: fvFadeDown 1.92s ease-out 0.64s both;
}

/* About / Result / Contact: 0.64s delay, 1.92s duration (×0.8) */
.fv-nav {
  animation: fvFadeDown 1.92s ease-out 0.64s both;
}

/* 管理馬一覧 / 出走情報 ボタン: 0.64s delay, 1.92s duration (×0.8) */
.fv-btns {
  animation: fvFadeDown 1.92s ease-out 0.64s both;
}

/* 競馬写真: 1.6s delay, 2.24s duration (×0.8) */
.fv-photo--race {
  animation: fvFadeUp 2.24s ease-out 1.6s both;
}

/* 厩舎写真: 2.56s delay, 2.24s duration (×0.8) */
.fv-photo--stable {
  animation: fvFadeUp 2.24s ease-out 2.56s both;
}

/* 縦書き 1文字 span
   display:inline-block が必要（transform を inline に適用するため）
   letter-spacing / line-height は親の .fv-col から継承 */
.fv-char {
  display: inline-block;
  animation: fvCharUp 1.44s ease-out both;
  /* animation-delay は HTML の style 属性で文字ごとに指定 */
}

/* 英字コピー: 9.76s delay, 0.96s duration (×0.8) */
.fv-copy-en {
  animation: fvFadeUp 0.96s ease-out 9.76s both;
}

/* MOGI STABLE: 11.28s delay, 1.12s duration (×0.8) */
.fv-title {
  animation: fvSlideRight 1.12s cubic-bezier(0.25, 0.46, 0.45, 0.94) 11.28s both;
}

/* ══════════════════════════════════════════════
   About Us セクション専用 CSS (.about-us-*)
   ─────────────────────────────────────────────
   FV の class (.fv-*) は一切変更しない
   ══════════════════════════════════════════════ */

/* ─── セクション外枠 ─────────────────────────── */
.about-us {
  position: relative;
  width: 1000px;
  height: 500px;
  background: #d9d9cf;
  overflow: hidden;
  box-sizing: border-box;
}

/* ─── 共通フォント・カラー定義 ──────────────── */
/* DNP秀英丸ゴシックStd Regular 代替: Zen Maru Gothic */
.about-us-label,
.about-us-heading,
.about-us-body p {
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #282828;
  margin: 0;
  padding: 0;
}

/* ─── ABOUT US ラベル ────────────────────────── */
/* top:94px, letter-spacing:0.12em（トラッキング120相当）, font-size:20px */
.about-us-label {
  position: absolute;
  top: 94px;
  left: 128px;
  font-size: 20px;
  line-height: 1;          /* 高さ = 20px → bottom = 114px */
  letter-spacing: 0.12em;
}

/* ─── 「馬の声を聴く」見出し ─────────────────── */
/* top = label bottom(114px) + 53px gap = 167px */
.about-us-heading {
  position: absolute;
  top: 167px;
  left: 128px;
  line-height: 1.4;        /* 28px × 1.4 ≈ 39px → bottom ≈ 206px */
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.about-us-lg { font-size: 28px; }   /* 「馬」「声」 */
.about-us-sm { font-size: 21px; }   /* 「の」「を聴く」・かぎ括弧 */

/* ─── 本文 ──────────────────────────────────── */
/* top = heading bottom(206px) + 53px gap = 259px
   width:330px → 15字(~316px)が一行に収まる幅
   letter-spacing:0.18em で「成長」の不自然な折り返しを防止 */
.about-us-body {
  position: absolute;
  top: 259px;
  left: 128px;
  width: 330px;
}

.about-us-body p {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.about-us-body p + p {
  margin-top: 10px;
}

/* ══════════════════════════════════════════════
   TRAINING セクション専用 CSS (.training-*)
   ─────────────────────────────────────────────
   FV / ABOUT US の CSS は一切変更しない
   全要素 position:absolute で配置
   ══════════════════════════════════════════════ */

/* ─── セクション外枠 ────────────────────────
   width:1000px / height:1448px / position:relative
   背景: 0〜235px=#ffffff / 235px〜=#f1f2eb
   ─────────────────────────────────────────── */
.training {
  position: relative;
  width: 1000px;
  height: 1448px;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff 235px, #f1f2eb 235px);
}

/* ─── 共通フォント設定 ───────────────────── */
.training-label,
.training-copy,
.training-heading,
.training-text {
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #282828;
  margin: 0;
  padding: 0;
}

/* ─── TRAINING ラベル: top:46px / left:136px ── */
.training-label {
  position: absolute;
  top: 46px;
  left: 136px;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* ─── キャッチコピー: top:125px / left:136px
   「日々の積み重ね」28px / 「が、力になる。」20px
   font-weight:400 — 太字禁止
   ─────────────────────────────────────────── */
.training-copy {
  position: absolute;
  top: 125px;
  left: 136px;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.training-copy-em {
  font-size: 28px;
  font-weight: 400;
  vertical-align: baseline;
}

/* 「積み重ね」だけ font-size:25px / letter-spacing:1px で文字間を自然に広げる / margin-right:1px で「ね」「が」間 1px */
.training-copy-sm {
  font-size: 25px;
  font-weight: 400;
  vertical-align: baseline;
  letter-spacing: 1px;
  margin-right: 1px;
}

/* ─── 区切り装飾 (shape.png: 12×32 / 水平中央) ── */
.training-shape {
  position: absolute;
  top: 220px;   /* 前回205px + 15px = 220px */
  left: 494px;
  display: block;
  width: auto;
  height: auto;
}

/* ─── 3つの考え 装飾見出し (group4.png: 302×40)
   top:289px / left:72px (指定値)
   ─────────────────────────────────────────── */
.training-concept {
  position: absolute;
  top: 289px;
  left: 72px;
  display: block;
  width: auto;
  height: auto;
}

/* ─── ブロック見出し
   .tr-em (強調): font-size:27px / font-weight:400 — 太字禁止
   続き文字:      font-size:21px
   ─────────────────────────────────────────── */
.training-heading {
  position: absolute;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.tr-em {
  font-size: 27px;
  font-weight: 400;
  vertical-align: baseline;
}

/* ブロック1 見出し: top:390px / left:195px */
.training-heading--1 { top: 390px; left: 195px; }
/* ブロック2 見出し: top:753px / left:195px */
.training-heading--2 { top: 733px; left: 195px; }
/* ブロック3 見出し: top:1139px / left:195px */
.training-heading--3 { top: 1119px; left: 195px; }

/* ─── ブロック本文: font-size:19px ────────── */
.training-text {
  position: absolute;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ブロック1 本文: top:453px / left:150px */
.training-text--1 { top: 453px; left: 150px; }
/* ブロック2 本文: top:816px / left:150px */
.training-text--2 { top: 796px; left: 150px; }
/* ブロック3 本文: top:1202px / left:150px */
.training-text--3 { top: 1182px; left: 150px; }

/* ─── コラージュ画像 (height固定 / left:0px)
   group1: height:268px / group2: height:298px / group3: height:266px
   ─────────────────────────────────────────── */
.training-image {
  position: absolute;
  display: block;
  width: auto;
  left: 0px;
  object-fit: contain;
  background: transparent;
}

/* group1: top:426px / left:0px / height:268px */
.training-image--1 { top: 426px; height: 268px; }
/* group2: bottom:393px / right:0px / height:298px */
.training-image--2 { bottom: 393px; left: auto; right: 0px; height: 298px; }
/* group3: bottom:30px / left:0px / height:266px */
.training-image--3 { bottom: 30px; height: 266px; }

/* ─── 右側ビジュアル (about-visual.png: Photoshop合成済み1枚)
   509×443 / height:430px → width≈494px / right:0 / top:64px
   ギャップ: FV(564) + top(64) − MOGI STABLE下端(505) = 123px
   ─────────────────────────────────────────── */
.about-us-visual {
  position: absolute;
  top: 39px;
  right: 0px;
  height: 430px;
  width: auto;
  display: block;
  z-index: 1;
  background: transparent;
  object-fit: contain;
  filter: brightness(1.18) saturate(1.20) contrast(1.03);
}

/* ══════════════════════════════════════════════
   STABLE LIFE セクション専用 CSS (.sl-*)
   ─────────────────────────────────────────────
   FV / ABOUT US / TRAINING は一切変更しない
   ══════════════════════════════════════════════ */

/* ─── セクション外枠: 1000×456px / #ffffff ── */
.stable-life {
  position: relative;
  width: 1000px;
  height: 456px;
  background: #ffffff;
  overflow: hidden;
}

/* ─── タイトル: 中央配置 / top:54px / 20px ── */
.sl-title {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #282828;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* ─── マーキー外枠 (表示ウィンドウ / overflow:hidden) ── */
.sl-marquee {
  position: absolute;
  width: 1000px;
  height: 115px;
  left: 0;
  overflow: hidden;
}

/* 1段目: top:121px */
.sl-marquee--top    { top: 121px; }
/* 2段目: top:251px (239+12) */
.sl-marquee--bottom { top: 251px; }

/* ─── トラック (3セット横並び / 動かす対象) ── */
.sl-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* 1段目: 右方向 (−655px → 0) */
.sl-track--top    { animation: stableLifeLoopRight 14s linear infinite; }
/* 2段目: 左方向 (0 → −655px) */
.sl-track--bottom { animation: stableLifeLoopLeft  14s linear infinite; }

/* ─── 各セット (画像5枚 / gap:10px / セット間10px) ── */
.sl-set {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ─── 各画像: 121×115px ──────────────────── */
.sl-img {
  display: block;
  width: 121px;
  height: 115px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── Together: 168×51px / left:176px / bottom:40px ── */
.sl-together {
  position: absolute;
  left: 176px;
  bottom: 40px;
  width: 168px;
  height: 51px;
  object-fit: contain;
  display: block;
}

/* ─── 無限ループ keyframes ───────────────────
   1セット幅 = 121×5 + 10×4 = 645px
   セット間 gap = 10px
   ループ移動距離 = 645 + 10 = 655px
   ─────────────────────────────────────────── */
@keyframes stableLifeLoopRight {
  0%   { transform: translateX(-655px); }
  100% { transform: translateX(0); }
}
@keyframes stableLifeLoopLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-655px); }
}

/* ══════════════════════════════════════════════
   STAFF セクション専用 CSS (.staff-*)
   ─────────────────────────────────────────────
   FV / ABOUT US / TRAINING / STABLE LIFE は変更しない
   ══════════════════════════════════════════════ */

/* ─── セクション外枠: 1000×1001px ─────────── */
.staff {
  position: relative;
  width: 1000px;
  height: 1001px;
  overflow: hidden;
}

/* ─── 背景ビジュアル (staff-image.png) ─────── */
.staff-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1001px;
  display: block;
  object-fit: cover;
  z-index: 1;
}

/* ─── 共通フォント設定 ─────────────────────── */
.staff-label,
.staff-catch,
.staff-body p,
.staff-role,
.staff-name,
.staff-desc {
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #282828;
  margin: 0;
  padding: 0;
}

/* ─── STAFF ラベル: top:90px / left:147px ─── */
.staff-label {
  position: absolute;
  top: 90px;
  left: 147px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  z-index: 2;
}

/* ─── キャッチコピー: top:163px / left:147px ── */
.staff-catch {
  position: absolute;
  top: 163px;
  left: 147px;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  z-index: 2;
}

.staff-catch-base { font-size: 24px; vertical-align: baseline; }
.staff-catch-em   { font-size: 30px; vertical-align: baseline; }
.staff-catch-mid  { font-size: 28px; vertical-align: baseline; }

/* ─── 本文: top:266px / left:147px ─────────── */
.staff-body {
  position: absolute;
  top: 266px;
  left: 147px;
  z-index: 2;
}

.staff-body p {
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1.75;
}

.staff-body-block {
  margin-top: 40px;
}

.staff-body-block p + p {
  margin-top: 0;
}

/* ─── スタッフ紹介テキスト ─────────────────── */
.staff-role,
.staff-name,
.staff-desc {
  position: absolute;
  z-index: 2;
  line-height: 1.5;
}

.staff-role {
  font-size: 16px;
  letter-spacing: 0.06em;
}

.staff-name {
  font-size: 18px;
  letter-spacing: 0.06em;
}

.staff-name-en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #282828;
}

.staff-desc {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  white-space: normal;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

/* 1人目: 調教師 */
.staff-role--1 { top: 713px; left: 147px; }
.staff-name--1 { top: 739px; left: 147px; }
.staff-desc--1 { top: 784px; left: 147px; width: 180px; }

/* 2人目: 厩務員スタッフ */
.staff-role--2 { top: 713px; left: 403px; }
.staff-name--2 { top: 739px; left: 403px; }
.staff-desc--2 { top: 784px; left: 403px; width: 180px; }

/* 3人目: 調教スタッフ */
.staff-role--3 { top: 713px; left: 665px; }
.staff-name--3 { top: 739px; left: 665px; }
.staff-desc--3 { top: 784px; left: 665px; width: 180px; }

/* ══════════════════════════════════════════════
   PICK UP HORSES セクション専用 CSS (.pickup-*)
   ─────────────────────────────────────────────
   FV / ABOUT US / TRAINING / STABLE LIFE / STAFF は変更しない
   ══════════════════════════════════════════════ */

/* ─── セクション外枠: 1000×1081px ─────────── */
.pick-up-horses {
  position: relative;
  width: 1000px;
  height: 1081px;
  overflow: hidden;
}

/* ─── 背景: z-index 1 ──────────────────────── */
.pickup-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1081px;
  display: block;
  object-fit: cover;
  z-index: 1;
}

/* ─── モノクロ1: z-index 2 ─────────────────── */
@keyframes pickupMonoSlideIn {
  from {
    opacity: 0;
    transform: translateX(260px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pickup-mono1 {
  position: absolute;
  top: 156px;
  left: 0;
  width: 625px;
  height: 364px;
  display: block;
  object-fit: cover;
  z-index: 2;
}

/* ─── モノクロ2: z-index 3 ─────────────────── */
.pickup-mono2 {
  position: absolute;
  top: 587px;
  right: 0;
  width: 519px;
  height: 328px;
  display: block;
  object-fit: cover;
  z-index: 3;
}

.pickup-mono1,
.pickup-mono2 {
  opacity: 0;
}

.pick-up-horses.is-visible .pickup-mono1 {
  animation: pickupMonoSlideIn 0.75s ease-out 0.2s both;
}

.pick-up-horses.is-visible .pickup-mono2 {
  animation: pickupMonoSlideIn 0.75s ease-out 0.85s both;
}

/* ─── 馬画像: z-index 4 ────────────────────── */
.pickup-horses-img {
  position: absolute;
  top: 161px;
  left: 277px;
  width: 416px;
  height: 898px;
  display: block;
  object-fit: contain;
  z-index: 4;
}

/* ─── テキスト共通 ─────────────────────────── */
.pickup-title {
  position: absolute;
  z-index: 5;
  color: #282828;
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.pickup-horse-name {
  position: absolute;
  z-index: 5;
  color: #282828;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 33px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: max-content;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* ─── セクション見出し ─────────────────────── */
.pickup-title {
  top: 86px;
  left: 147px;
  font-size: 20px;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* ─── 上の馬名（馬画像右端693pxより右） ─── */
.pickup-horse-name--1 {
  top: 222px;
  left: auto;
  right: 105px;
}

/* ─── 下の馬名（下の馬頭に重ならない位置） ── */
.pickup-horse-name--2 {
  top: 713px;
  left: 128px;
}

/* ─── 情報ボックス（グレー枠内・中央配置） ── */
.pickup-info-box {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pickup-info-box--1 {
  position: absolute;
  left: 654px;
  top: 322px;
  width: 207px;
  height: 164px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pickup-info-box--2 {
  position: absolute;
  left: 150px;
  top: 797px;
  width: 208px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ─── 情報テキスト共通 ─────────────────────── */
.pickup-horse-spec,
.pickup-horse-desc {
  color: #282828;
  font-family: "Zen Maru Gothic", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.pickup-horse-spec {
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 26px;
  text-align: center;
  text-align-last: center;
  width: 150px;
  margin: 0;
  transform: translateX(-7px);
}

.pickup-horse-desc {
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 26px;
  width: 150px;
  margin-top: 12px;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

/* ══════════════════════════════════════════════
   RESULTS セクション専用 CSS (.results-*)
   ─────────────────────────────────────────────
   FV / ABOUT US / TRAINING / STABLE LIFE / STAFF / PICK UP HORSES は変更しない
   ══════════════════════════════════════════════ */

.results {
  position: relative;
  width: 1000px;
  height: 803px;
  overflow: hidden;
  background-color: #484747;
}

.results,
.results * {
  font-family: "DNP秀英丸ゴシックStd", "DNP秀英丸ゴシックStd L", "Zen Maru Gothic", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.12em !important;
}

.results-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 733px;
  display: block;
  object-fit: cover;
  z-index: 1;
}

.results-label,
.results-main,
.results-sub,
.results-data-label {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: #ffffff;
}

/* ─── 見出し: PICK UP HORSESと同じ20px ─── */
.results-label {
  top: 50px;
  left: 140px;
  font-size: 20px;
  line-height: 1;
}

/* ─── メインコピー ─────────────────────────── */
.results-main {
  top: 124px;
  left: 140px;
  font-size: 14pt;
  line-height: 1.5;
  white-space: nowrap;
}

.results-main .results-main-lg {
  font-size: 21pt;
}

.results-main .results-main-sm {
  font-size: 14pt;
}

/* ─── 説明文 ───────────────────────────────── */
.results-sub {
  top: 217px;
  left: 140px;
  font-size: 18px;
  line-height: 1.75;
}

/* ─── 小見出し ─────────────────────────────── */
.results-data-label {
  top: 283px;
  left: 140px;
  font-size: 16px;
  line-height: 1;
}

/* ─── 4カラム独立ブロック ──────────────────── */
.result-card {
  position: absolute;
  top: 321px;
  height: 250px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-card--1 {
  top: 316px;
  left: 145px;
  width: 150px;
}

.result-card--2 {
  left: 345px;
  width: 150px;
}

.result-card--3 {
  left: 545px;
  width: 150px;
}

.result-card--4 {
  left: 740px;
  width: 170px;
}

.result-card-title,
.result-number,
.result-desc {
  margin: 0;
  padding: 0;
  color: #ffffff;
}

.result-card-title {
  width: 100%;
  margin-top: -7px;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}

.result-number {
  margin-top: 75px;
  font-size: 38px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.result-card--3 .result-number {
  letter-spacing: inherit;
}

.result-number--win {
  white-space: nowrap;
}

.metric-num {
  font-size: calc(38px + 5pt);
  vertical-align: baseline;
}

.metric-unit {
  font-size: 17pt;
  vertical-align: baseline;
}

.result-desc {
  position: absolute;
  top: 171px;
  left: 50%;
  width: 150px;
  margin: 0;
  transform: translateX(-50%);
  font-size: 17px;
  line-height: 1.85;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}

.desc-line {
  display: block;
  white-space: nowrap;
}

.result-card--2 .desc-line,
.result-card--3 .desc-line {
  width: 100%;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}

.result-card--1 .result-desc {
  transform: translateX(-50%);
}

.result-card--1 .result-card-title,
.result-card--1 .result-number {
  transform: translate(-8px, 2px);
}

.result-card--2 .result-card-title,
.result-card--2 .result-number {
  transform: translateX(-20px);
}

.result-card--3 .result-card-title,
.result-card--3 .result-number {
  transform: translateX(-25px);
}

.result-card--4 .result-card-title {
  transform: translateX(-28px);
}

.result-card--4 .result-number--grade {
  transform: translateX(-10px);
}

.result-card--4 .result-desc {
  transform: translateX(calc(-50% - 20px));
}

.result-card--2 .result-desc {
  transform: translateX(calc(-50% - 5px));
}

.result-number--grade {
  align-self: flex-start;
  width: 100%;
  margin-top: 75px;
  text-align: left;
}

.result-grade {
  display: block;
  font-size: 19pt;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.08em !important;
}

.result-number-line2 {
  display: block;
  margin-top: 4px;
  font-size: 15pt;
  line-height: 1.2;
}

/* === RESULTS 修正：中央2本文の行ごと均等配置 === */
.results .result-desc--2,
.results .result-desc--3 {
  width: 150px;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}

.results .result-desc--2 .desc-line,
.results .result-desc--3 .desc-line {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

/* 最終行だけは左揃え */
.results .result-desc--2 .desc-line--last,
.results .result-desc--3 .desc-line--last {
  text-align: left;
  text-align-last: left;
}

/* === RESULTS 修正：28WIN と 32.4% を4px上へ === */
/* 既存の横移動を消さず、Y方向だけ -4px 足す */
.results .result-card--2 .result-number {
  transform: translate(-20px, -4px);
}

.results .result-card--3 .result-number {
  transform: translate(-25px, -4px);
}

.results-main-quote {
  display: inline-block;
  transform: translateX(-7px);
}

.results .result-card--1 .result-desc,
.results .result-card--1 .desc-line {
  letter-spacing: 0.12em !important;
}

.results .result-card--1 .desc-line {
  display: block;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

.results .result-card--1 .desc-line--last {
  text-align: left;
  text-align-last: left;
}

.results .result-card--4 .result-desc,
.results .result-card--4 .desc-line {
  letter-spacing: 0.12em !important;
}

.results .result-card--4 .desc-line {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

.results .result-card--4 .desc-line--last {
  text-align: left;
  text-align-last: left;
}

.results .result-card--1 .result-desc {
  top: 176px !important;
  left: 50% !important;
  width: 150px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.results .result-card--3 .result-desc {
  left: 50% !important;
  top: 171px !important;
  width: 150px !important;
  margin: 0 !important;
  transform: translateX(calc(-50% - 15px)) !important;
}

.results,
.results * {
  color: #ebece1 !important;
}

/* ══════════════════════════════════════════════
   CONTACT セクション（1000×622 / 背景とクリックパーツ）
   ※画像は index.html 内に埋め込み済み。imagesフォルダに依存しない。
   ══════════════════════════════════════════════ */
.contact {
  position: relative;
  width: 1000px;
  height: 622px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 622px;
  display: block;
  object-fit: fill;
  object-position: center top;
  z-index: 1;
}

.contact-info-text-img {
  position: absolute;
  top: 94px;
  left: 138px;
  z-index: 3;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
}

.contact .contact-hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.contact .contact-hotspot:hover {
  opacity: 1;
  filter: brightness(1.55) drop-shadow(0 0 10px rgba(255,255,255,0.65));
}

.contact .contact-hotspot--inquiry:hover {
  opacity: 1;
  filter: none;
  color: #282828;
}

.contact .contact-hotspot img {
  display: block;
  width: auto;
  height: auto;
}

.contact-hotspot--x1       { top:  90px; left: 281px; }
.contact-hotspot--x2       { top: 170px; left: 175px; }
.contact-hotspot--facebook  { top: 170px; left: 254px; }
.contact-hotspot--instagram { top: 174px; left: 321px; }
.contact-hotspot--inquiry   { top: 430px; left: 150px; }

/* ══════════════════════════════════════════════
   レスポンシブ対応（スケール縮小方式）
   zoom は index.html の JS が動的に設定する
   ══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1000px) {
  html {
    width: 100%;
    overflow-x: hidden;
  }
  body {
    width: 1000px;
    min-width: 1000px;
    transform-origin: top left;
    overflow-x: hidden;
    /* zoom: JS が window.innerWidth / 1000 で設定 */
  }
}

/* ══════════════════════════════════════════════
   PC表示：画面幅に合わせて拡縮（JS連動）
   中央寄せ不要 — zoom で幅を埋める
   ══════════════════════════════════════════════ */
@media (min-width: 1001px) {
  html {
    background: #DCDDD3;
    overflow-x: hidden;
  }
  body {
    width: 1000px;
    transform-origin: top left;
    /* zoom: JS が window.innerWidth / 1000 で設定 */
  }
}

/* ══════════════════════════════════════════════
   CONTACT：お問い合わせテキストボタン＋ホバーアニメーション
   ══════════════════════════════════════════════ */
.contact .contact-hotspot--inquiry {
  width: 230px;
  height: 47px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: color 0.35s ease;
  text-decoration: none;
}
.contact .contact-hotspot--inquiry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s ease;
  z-index: 0;
}
.contact .contact-hotspot--inquiry span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.contact .contact-hotspot--inquiry:hover::before {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════
   SP専用要素: PC では非表示（デフォルト）
   ══════════════════════════════════════════════ */
.fv-sp,
.about-us-sp-img,
.training-sp-img,
.stable-life-sp,
.staff-sp-img,
.pickup-sp,
.results-sp-img,
.contact-sp-img,
.contact-sp-x-footer,
.contact-sp-x,
.contact-sp-facebook,
.contact-sp-instagram,
.contact-sp-inquiry {
  display: none;
}

/* ══════════════════════════════════════════════
   SP レスポンシブ対応 — FVセクションのみ
   対象: max-width 767px（スマホ幅）
   ・PC版の既存CSSは一切変更しない
   ・PC版FV要素は全て非表示にし、SP用PNG画像を配置
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── body: 1000px 固定幅を解除 ────────────
     JS zoom も index.html 側で無効化している  */
  body {
    width: 100%;
    min-width: unset;
    overflow-x: hidden;
  }

  /* ─── FV セクション: 390×760px ─────────── */
  .fv {
    width: 100%;
    height: 760px;
  }

  /* ─── PC版FV要素をすべて非表示 ─────────── */
  .fv-logo-wrap,
  .fv-nav,
  .fv-btns,
  .fv-photo,
  .fv-col,
  .fv-copy-en,
  .fv-title {
    display: none !important;
  }

  /* ─── SP専用コンテナ: 表示 ──────────────── */
  .fv-sp {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 760px;
    overflow: hidden;
  }

  /* ─── ＦＶ背景_S.png: left 0 / top 0 / 100%×760 */
  .fv-sp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 760px;
    object-fit: cover;
    display: block;
  }

  /* ─── ロゴ_S.png: left 14 / top 10 ───────── */
  .fv-sp-logo {
    position: absolute;
    top: 10px;
    left: -16px;
    width: 202px;
    height: auto;
    display: block;
  }

  /* ─── FV馬_S.png: right 0 / top 70 ─────── */
  .fv-sp-horse {
    position: absolute;
    top: 70px;
    right: 0;
    width: 249px;
    height: auto;
    display: block;
  }

  /* ─── 厩舎_S.png: right 0 / top 406 ──────── */
  .fv-sp-stable {
    position: absolute;
    top: 406px;
    right: 0;
    width: 249px;
    height: auto;
    display: block;
  }

  /* ─── MOGI_S.png: left 34 / top 488 ────── */
  .fv-sp-mogi {
    position: absolute;
    top: 488px;
    left: 34px;
    width: 252px;
    height: auto;
    display: block;
  }

  /* ─── STABLE_S.png: left 58 / top 580 ──── */
  .fv-sp-stable-txt {
    position: absolute;
    top: 580px;
    left: 58px;
    width: 332px;
    height: auto;
    display: block;
  }

  /* ─── 英字_S.png: left 16 / top 368 ──────── */
  .fv-sp-en {
    position: absolute;
    top: 368px;
    left: 16px;
    width: 119px;
    height: auto;
    display: block;
  }

  /* ─── 管理馬一覧ボタン_S.png: right 148 / top 667 */
  .fv-sp-btn-list {
    position: absolute;
    top: 667px;
    right: 148px;
    display: block;
  }

  .fv-sp-btn-list img {
    width: 128px;
    height: auto;
    display: block;
  }

  /* ─── 出走情報ボタン_S.png: right 0 / top 667 */
  .fv-sp-btn-race {
    position: absolute;
    top: 667px;
    right: 0;
    display: block;
  }

  .fv-sp-btn-race img {
    width: 146px;
    height: auto;
    display: block;
  }

  /* ─── SP専用 縦書きコピー（PC版 .fv-col とは独立） */
  .fv-sp-copy {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 33px;
    letter-spacing: 0.18em;
    color: #282828;
    z-index: 10;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  /* 右列「一頭一頭に、」 */
  .fv-sp-copy--right {
    left: 73px;
    top: 126px;
  }

  /* 左列「誠実に向き合う」 */
  .fv-sp-copy--left {
    left: 40px;
    top: 126px;
  }

  /* ══════════════════════════════════════════════
     STABLE LIFE スマホ版（390×523px / スライド）
     ══════════════════════════════════════════════ */
  .stable-life {
    width: 100%;
    height: 523px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
  }

  /* PC版要素を非表示 */
  .stable-life > *:not(.stable-life-sp) {
    display: none;
  }

  /* SP専用コンテナ表示 */
  .stable-life-sp {
    display: block;
    position: relative;
    width: 100%;
    height: 523px;
    overflow: hidden;
    background: #ffffff;
  }

  /* タイトルオーバーレイ（全面 / z-index:1 で下に敷く） */
  .stable-life-sp-title {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 523px;
    object-fit: fill;
    z-index: 1;
    pointer-events: none;
  }

  /* マーキー共通 */
  .stable-life-sp-marquee {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
  }

  .stable-life-sp-marquee--top    { top: 126px; height: 166px; }
  .stable-life-sp-marquee--bottom { top: 300px; height: 166px; }

  /* トラック共通 */
  .stable-life-sp-track {
    display: flex;
    gap: 10px;
    width: max-content;
  }

  /* 画像サイズ */
  .stable-life-sp-track--right img {
    display: block;
    width: 174px;
    height: 166px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .stable-life-sp-track--left img {
    display: block;
    width: 174px;
    height: 166px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  /* アニメーション: 5枚×(174px+10px gap) = 920px → 50% */
  .stable-life-sp-track--right {
    animation: stableLifeMoveRight 28s linear infinite;
  }

  .stable-life-sp-track--left {
    animation: stableLifeMoveLeft 28s linear infinite;
  }

  @keyframes stableLifeMoveRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0);   }
  }

  @keyframes stableLifeMoveLeft {
    from { transform: translateX(0);   }
    to   { transform: translateX(-50%); }
  }

  /* ══════════════════════════════════════════════
     PICK UP HORSES スマホ版（390×1388px / 4層重ね）
     白黒写真: スライドイン / 馬画像: 固定・前面
     ══════════════════════════════════════════════ */
  .pick-up-horses {
    display: block;
    width: 100%;
    height: 1388px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
  }

  /* PC版要素を非表示 */
  .pick-up-horses > *:not(.pickup-sp) {
    display: none !important;
  }

  /* SP専用コンテナ */
  .pickup-sp {
    display: block;
    position: relative;
    width: 100%;
    height: 1388px;
    overflow: hidden;
  }

  /* 全画像: absolute 配置共通 */
  .pickup-sp-bg,
  .pickup-sp-mono-top,
  .pickup-sp-mono-bottom,
  .pickup-sp-horses {
    position: absolute;
    display: block;
  }

  /* 1. 背景: z-index 1 / 固定 */
  .pickup-sp-bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 1388px;
    object-fit: fill;
    z-index: 1;
  }

  /* 2. 白黒上: z-index 2 / 右からスライドイン */
  .pickup-sp-mono-top {
    top: 196px;
    right: 0;
    width: 303px;
    height: 268px;
    object-fit: cover;
    object-position: center center;
    z-index: 2;
    animation: pickupMonoSlideIn 1.6s ease-out 0.3s both;
  }

  /* 3. 白黒下: z-index 3 / 右からスライドイン（時間差） */
  .pickup-sp-mono-bottom {
    top: 752px;
    right: 0;
    width: 302px;
    height: auto;
    z-index: 3;
    animation: pickupMonoSlideIn 1.6s ease-out 0.8s both;
  }

  @keyframes pickupMonoSlideIn {
    from { opacity: 0; transform: translateX(80px); }
    to   { opacity: 1; transform: translateX(0);    }
  }

  /* 4. 馬画像: 固定・最前面 / z-index 4 */
  .pickup-sp-horses {
    left: 41px;
    top: 253px;
    width: 251px;
    height: 919px;
    object-fit: contain;
    z-index: 4;
  }

  /* ══════════════════════════════════════════════
     STAFF スマホ版（390×2011px / 画像1枚）
     ══════════════════════════════════════════════ */
  .staff {
    display: block;
    width: 100%;
    height: 2011px;
    position: relative;
    overflow: hidden;
    background: #d9d9cf;
  }

  .staff > *:not(.staff-sp-img) {
    display: none;
  }

  .staff-sp-img {
    display: block;
    width: 100%;
    height: 2011px;
    object-fit: fill;
  }

  /* ══════════════════════════════════════════════
     RESULTS スマホ版（390×1432px / 画像1枚）
     ══════════════════════════════════════════════ */
  .results {
    display: block;
    width: 100%;
    height: 1432px;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    background: #484747;
  }

  .results > *:not(.results-sp-img) {
    display: none;
  }

  .results-sp-img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1432px;
    object-fit: fill;
    object-position: top left;
    margin: 0;
    padding: 0;
    vertical-align: top;
  }

  /* ══════════════════════════════════════════════
     CONTACT スマホ版（390×587px / 画像1枚）
     ══════════════════════════════════════════════ */
  .contact {
    display: block;
    width: 100%;
    height: 587px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  .contact > *:not(.contact-sp-img) {
    display: none !important;
  }

  .contact-sp-img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 587px;
    object-fit: fill;
    object-position: top left;
    margin: 0;
    padding: 0;
    vertical-align: top;
  }

  /* ══════════════════════════════════════════════
     ABOUT US スマホ版（390×860px / 画像1枚）
     ══════════════════════════════════════════════ */
  .about-us {
    width: 100%;
    height: 860px;
    position: relative;
    overflow: hidden;
    background: #d9d9cf;
  }

  /* PC版 .about-us 内の既存要素を非表示 */
  .about-us > *:not(.about-us-sp-img) {
    display: none;
  }

  /* SP画像を表示・サイズ指定 */
  .about-us-sp-img {
    display: block;
    width: 100%;
    height: 860px;
    object-fit: fill;
  }

  /* ══════════════════════════════════════════════
     TRAINING スマホ版（390×2198px / 画像1枚）
     ══════════════════════════════════════════════ */
  .training {
    width: 100%;
    height: 2198px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f1f2eb;
  }

  /* PC版 .training 内の既存要素を非表示 */
  .training > *:not(.training-sp-img) {
    display: none;
  }

  /* SP画像を表示・サイズ指定
     390pxを最大幅として中央配置し、391〜767pxで横方向への
     引き伸ばしを防止する */
  .training-sp-img {
    display: block;
    width: 390px;
    max-width: 100%;
    height: 2198px;
    object-fit: fill;
    flex-shrink: 0;
  }

}
/* ── SP FV ここまで ──────────────────────── */

/* ══════════════════════════════════════════════
   RESULTS スマホ版 強制上書き（最後に適用）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .results {
    display: block !important;
    width: 100% !important;
    height: 1432px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background: #484747 !important;
  }
  .results > *:not(.results-sp-img) {
    display: none !important;
  }
  .results-sp-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 1432px !important;
    object-fit: fill !important;
    object-position: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT スマホ版 強制上書き（最後に適用）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact {
    display: block !important;
    width: 100% !important;
    height: 587px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background: #ffffff !important;
  }
  .contact > *:not(.contact-sp-img):not(.contact-sp-x-footer):not(.contact-sp-x):not(.contact-sp-facebook):not(.contact-sp-instagram):not(.contact-sp-inquiry) {
    display: none !important;
  }
  .contact-sp-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 587px !important;
    object-fit: fill !important;
    object-position: top left !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    vertical-align: top !important;
    z-index: 1;
  }
  .contact-sp-x-footer,
  .contact-sp-x,
  .contact-sp-facebook,
  .contact-sp-instagram,
  .contact-sp-inquiry {
    display: block !important;
    position: absolute !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }
  .contact-sp-x-footer {
    width: 25px !important;
  }
  .contact-sp-x {
    top: 117px !important;
    left: 56px !important;
    width: 34px !important;
  }
  .contact-sp-facebook {
    top: 118px !important;
    left: 127px !important;
    width: 19px !important;
  }
  .contact-sp-instagram {
    top: 123px !important;
    left: 183px !important;
    width: 37px !important;
  }
  .contact-sp-inquiry {
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
  }
  .contact > *:not(.contact-sp-img):not(.contact-sp-link) {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT SP アイコン強制表示（最終上書き）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact > *:not(.contact-sp-img):not(.contact-sp-x-footer):not(.contact-sp-x):not(.contact-sp-facebook):not(.contact-sp-instagram):not(.contact-sp-inquiry) {
    display: none !important;
  }
  /* 特定度(0,2,0)で上書き — .contact > * ルールと同等以上 */
  .contact > .contact-sp-x-footer,
  .contact > .contact-sp-x,
  .contact > .contact-sp-facebook,
  .contact > .contact-sp-instagram,
  .contact > .contact-sp-inquiry {
    display: block !important;
    position: absolute !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .contact > .contact-sp-x-footer {
    width: 25px !important;
    height: auto !important;
    z-index: 20 !important;
  }
  .contact > .contact-sp-x {
    width: 34px !important;
  }
  .contact > .contact-sp-facebook {
    width: 19px !important;
  }
  .contact > .contact-sp-instagram {
    top: 123px !important;
    left: 183px !important;
    width: 37px !important;
  }
  .contact > .contact-sp-inquiry {
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
  }
  .contact > .contact-sp-img {
    z-index: 1 !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT SP aタグ化 + ホバー（最終上書き）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact-sp-link {
    display: block !important;
    position: absolute !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.25s ease, filter 0.25s ease !important;
  }
  .contact-sp-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .contact-sp-link:hover {
    opacity: 1 !important;
    filter: brightness(1.55) drop-shadow(0 0 10px rgba(255,255,255,0.65)) !important;
  }
  .contact-sp-inquiry:hover {
    opacity: 1 !important;
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,255,255,0.55)) !important;
  }
  .contact-sp-x-footer {
    width: 25px !important;
  }
  .contact-sp-x {
    width: 34px !important;
  }
  .contact-sp-facebook {
    width: 19px !important;
  }
  .contact-sp-instagram {
    width: 37px !important;
  }
  .contact-sp-inquiry {
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
  }
  .contact > *:not(.contact-sp-img):not(.contact-sp-link) {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT SP aタグ + ホバー 最終確定
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact > *:not(.contact-sp-img):not(.contact-sp-link) {
    display: none !important;
  }
  .contact-sp-link {
    display: block !important;
    position: absolute !important;
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: filter 0.25s ease, opacity 0.25s ease !important;
  }
  .contact-sp-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .contact-sp-link:hover {
    filter: brightness(1.55) drop-shadow(0 0 10px rgba(255,255,255,0.65)) !important;
  }
  .contact-sp-x-footer { width: 25px !important; }
  .contact-sp-x        { width: 34px !important; }
  .contact-sp-facebook { width: 19px !important; }
  .contact-sp-instagram { width: 37px !important; }
  .contact-sp-inquiry {
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT SP ホバー最終確定
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* SNSアイコン: PC版と同じ brightness + drop-shadow */
  .contact-sp-x-footer:hover,
  .contact-sp-x:hover,
  .contact-sp-facebook:hover,
  .contact-sp-instagram:hover {
    opacity: 1 !important;
    filter: brightness(1.55) drop-shadow(0 0 10px rgba(255,255,255,0.65)) !important;
  }

  /* 問い合わせボタン: CSSテキストボタン（右から白ベタ＋黒文字） */
  .contact-sp-inquiry {
    display: flex !important;
    position: absolute !important;
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
    height: 51px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
    overflow: hidden !important;
    text-decoration: none !important;
    z-index: 20 !important;
    transition: color 0.35s ease !important;
    filter: none !important;
  }
  .contact-sp-inquiry::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #ffffff !important;
    transform: scaleX(0) !important;
    transform-origin: right center !important;
    transition: transform 0.35s ease !important;
    z-index: 0 !important;
  }
  .contact-sp-inquiry span {
    position: relative !important;
    z-index: 1 !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    color: inherit !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .contact-sp-inquiry:hover {
    color: #282828 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .contact-sp-inquiry:hover::before {
    transform: scaleX(1) !important;
  }
}

/* ══════════════════════════════════════════════
   1. CONTACT 問い合わせボタン サイズ修正
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact > .contact-sp-inquiry,
  .contact-sp-inquiry {
    display: flex !important;
    position: absolute !important;
    top: 358px !important;
    left: 33px !important;
    width: 249px !important;
    height: 45px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
    overflow: hidden !important;
    text-decoration: none !important;
    z-index: 30 !important;
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    transition: color 0.35s ease !important;
    filter: none !important;
  }
  .contact-sp-inquiry::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #ffffff !important;
    transform: scaleX(0) !important;
    transform-origin: right center !important;
    transition: transform 0.35s ease !important;
    z-index: 0 !important;
  }
  .contact-sp-inquiry span {
    position: relative !important;
    z-index: 1 !important;
    color: inherit !important;
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .contact-sp-inquiry:hover {
    color: #282828 !important;
    filter: none !important;
  }
  .contact-sp-inquiry:hover::before {
    transform: scaleX(1) !important;
  }
}

/* ══════════════════════════════════════════════
   2. CONTACT SNSアイコン ホバー強化
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact-sp-x-footer,
  .contact-sp-x,
  .contact-sp-facebook,
  .contact-sp-instagram {
    transition: filter 0.25s ease, opacity 0.25s ease !important;
  }
  .contact-sp-x-footer:hover,
  .contact-sp-x:hover,
  .contact-sp-facebook:hover,
  .contact-sp-instagram:hover,
  .contact-sp-x-footer:hover img,
  .contact-sp-x:hover img,
  .contact-sp-facebook:hover img,
  .contact-sp-instagram:hover img {
    opacity: 1 !important;
    filter: brightness(1.55) drop-shadow(0 0 10px rgba(255,255,255,0.65)) !important;
  }
}

/* ══════════════════════════════════════════════
   PICK UP HORSES SP 白黒写真スライド（PC版と同じ動き）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pickup-sp-mono-top {
    display: block !important;
    position: absolute !important;
    top: 196px !important;
    right: 0 !important;
    width: 303px !important;
    height: 268px !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: 2 !important;
    opacity: 0;
    transform: translateX(260px);
  }
  .pickup-sp-mono-bottom {
    display: block !important;
    position: absolute !important;
    top: 752px !important;
    right: 0 !important;
    width: 302px !important;
    height: auto !important;
    z-index: 3 !important;
    opacity: 0;
    transform: translateX(260px);
  }
  .pick-up-horses.is-visible .pickup-sp-mono-top {
    animation: spPickupMonoSlideInSameAsPc 0.75s ease-out 0.2s both;
  }
  .pick-up-horses.is-visible .pickup-sp-mono-bottom {
    animation: spPickupMonoSlideInSameAsPc 0.75s ease-out 0.85s both;
  }
  @keyframes spPickupMonoSlideInSameAsPc {
    from {
      opacity: 0;
      transform: translateX(260px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ══════════════════════════════════════════════
   FV スマホ版 レイアウト強制適用
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .fv {
    width: 100% !important;
    height: 790px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .fv-sp {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 790px !important;
    overflow: hidden !important;
  }
  .fv-sp-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 790px !important;
    object-fit: cover !important;
    display: block !important;
  }
  .fv-sp-logo {
    position: absolute !important;
    top: 10px !important;
    left: 14px !important;
    width: 202px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-horse {
    position: absolute !important;
    top: 70px !important;
    right: 0 !important;
    width: 249px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-stable {
    position: absolute !important;
    top: 406px !important;
    right: 0 !important;
    width: 249px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-mogi {
    position: absolute !important;
    top: 488px !important;
    left: 34px !important;
    width: 252px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-stable-txt {
    position: absolute !important;
    top: 580px !important;
    left: 58px !important;
    width: 332px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-en {
    position: absolute !important;
    top: 343px !important;
    left: 16px !important;
    width: 119px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-btn-list {
    position: absolute !important;
    top: 667px !important;
    right: 148px !important;
    display: block !important;
  }
  .fv-sp-btn-list img {
    width: 128px !important;
    height: auto !important;
    display: block !important;
  }
  .fv-sp-btn-race {
    position: absolute !important;
    top: 667px !important;
    right: 0 !important;
    display: block !important;
  }
  .fv-sp-btn-race img {
    width: 146px !important;
    height: auto !important;
    display: block !important;
  }
}

/* ══════════════════════════════════════════════
   FV スマホ版 アニメーション（強制適用）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 初期状態 */
  .fv-sp-logo,
  .fv-sp-horse,
  .fv-sp-stable,
  .fv-sp-en,
  .fv-sp-btn-list,
  .fv-sp-btn-race,
  .fv-sp-mogi,
  .fv-sp-stable-txt,
  .fv-sp-char {
    opacity: 0;
  }
  /* 1. ロゴ */
  .fv-sp-logo {
    animation: fvFadeDown 0.80s ease-out 0.20s both !important;
  }
  /* 2. 上の写真：FV馬_S */
  .fv-sp-horse {
    animation: fvFadeUp 1.05s ease-out 0.90s both !important;
  }
  /* 3. 下の写真：厩舎_S */
  .fv-sp-stable {
    animation: fvFadeUp 1.05s ease-out 1.70s both !important;
  }
  /* 4. 縦書きコピー 1文字ずつ */
  .fv-sp-char {
    display: inline-block !important;
    animation: fvCharUp 0.65s ease-out both !important;
  }
  /* 右列：一頭一頭に、 */
  .fv-sp-copy--right .fv-sp-char:nth-child(1) { animation-delay: 2.55s !important; }
  .fv-sp-copy--right .fv-sp-char:nth-child(2) { animation-delay: 2.78s !important; }
  .fv-sp-copy--right .fv-sp-char:nth-child(3) { animation-delay: 3.01s !important; }
  .fv-sp-copy--right .fv-sp-char:nth-child(4) { animation-delay: 3.24s !important; }
  .fv-sp-copy--right .fv-sp-char:nth-child(5) { animation-delay: 3.47s !important; }
  .fv-sp-copy--right .fv-sp-char:nth-child(6) { animation-delay: 3.70s !important; }
  /* 左列：誠実に向き合う */
  .fv-sp-copy--left .fv-sp-char:nth-child(1) { animation-delay: 3.10s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(2) { animation-delay: 3.33s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(3) { animation-delay: 3.56s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(4) { animation-delay: 3.79s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(5) { animation-delay: 4.02s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(6) { animation-delay: 4.25s !important; }
  .fv-sp-copy--left .fv-sp-char:nth-child(7) { animation-delay: 4.48s !important; }
  /* 5. 英字とボタン2つ：同時にふわっと */
  .fv-sp-en {
    animation: fvFadeUp 0.80s ease-out 4.90s both !important;
  }
  .fv-sp-btn-list,
  .fv-sp-btn-race {
    animation: fvFadeUp 0.80s ease-out 4.90s both !important;
  }
  /* 6. MOGI：右からスライド */
  .fv-sp-mogi {
    animation: fvSpSlideRightOnly 0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5.65s both !important;
  }
  /* 7. STABLE：MOGIのあとに右からスライド */
  .fv-sp-stable-txt {
    animation: fvSpSlideRightOnly 0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94) 6.15s both !important;
  }
  @keyframes fvSpSlideRightOnly {
    from {
      opacity: 0;
      transform: translateX(80px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  /* ボタン前面・タップ有効化 */
  .fv-sp-btn-list,
  .fv-sp-btn-race {
    position: absolute !important;
    z-index: 80 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  /* ボタン内img：transitionとpointer-events */
  .fv-sp-btn-list img,
  .fv-sp-btn-race img {
    display: block !important;
    pointer-events: auto !important;
    transition:
      transform 0.18s ease,
      opacity 0.18s ease,
      filter 0.18s ease !important;
  }
  /* PC hover */
  .fv-sp-btn-list:hover img,
  .fv-sp-btn-race:hover img {
    transform: translateY(-2px) !important;
    opacity: 0.9 !important;
    filter: brightness(1.15) !important;
  }
  /* スマホ実機タップ反応（:active + is-touched） */
  .fv-sp-btn-list:active img,
  .fv-sp-btn-race:active img,
  .fv-sp-btn-list.is-touched img,
  .fv-sp-btn-race.is-touched img {
    transform: translateY(-2px) !important;
    opacity: 0.9 !important;
    filter: brightness(1.15) !important;
  }
}

/* ══════════════════════════════════════════════
   スマホ強制上書き：body を必ず実機幅に戻す
   PC用 @media (min-width:768px) and (max-width:1000px) の
   body width:1000px がスマホに効かないよう最後に上書き
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #DCDDD3 !important;
  }
  .fv {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .fv-sp {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .fv-sp-bg {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════
   iPad縦向き専用：PC版FVをJS変数で画面1枚分に調整
   --ipad-fv-height は scaleLP() が動的に計算して渡す
   スマホ / PC通常表示 / 下層セクションは影響なし
   ══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .fv {
    height: var(--ipad-fv-height, 1440px) !important;
    overflow: hidden !important;
    background: #d9d9cf !important;
  }
  .fv-sp {
    display: none !important;
  }
  .fv-logo-wrap {
    top: 40px !important;
    left: 45px !important;
  }
  .fv-nav {
    top: 40px !important;
  }
  .fv-btns {
    top: 40px !important;
  }
  .fv-photo {
    top: 170px !important;
  }
  .fv-photo--race {
    left: 302px !important;
    width: 354px !important;
    height: 500px !important;
    background-image: url('../FV馬_S.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    filter: none !important;
  }
  .fv-photo--stable {
    right: 0 !important;
    width: 344px !important;
    height: 500px !important;
  }
  .fv-col {
    top: 275px !important;
    font-size: 25px !important;
    line-height: 1.8 !important;
  }
  .fv-col--r {
    left: 170px !important;
  }
  .fv-col--l {
    left: 125px !important;
  }
  .fv-copy-en {
    top: 510px !important;
    bottom: auto !important;
    left: 80px !important;
    width: 195px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.12em !important;
  }
  .fv-title {
    top: 640px !important;
    bottom: auto !important;
    font-size: 112px !important;
  }
  /* FV下部の空白をなくす：ABOUT USをFVコンテンツ直後（760px）に引き上げ */
  .about-us {
    margin-top: calc(760px - var(--ipad-fv-height, 1440px)) !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ══════════════════════════════════════════════
   CONTACT SP アイコン位置調整（最終確定・高詳細度）
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact > .contact-sp-link.contact-sp-x-footer,
  .contact .contact-sp-x-footer {
    left: 156px !important;
    top: 77px !important;
    bottom: auto !important;
  }
  .contact > .contact-sp-link.contact-sp-x,
  .contact .contact-sp-x {
    top: 122px !important;
    bottom: auto !important;
    left: 56px !important;
  }
  .contact > .contact-sp-link.contact-sp-facebook,
  .contact .contact-sp-facebook {
    top: 118px !important;
    bottom: auto !important;
    left: 127px !important;
  }
  .contact > .contact-sp-link.contact-sp-instagram,
  .contact .contact-sp-instagram {
    top: 123px !important;
    bottom: auto !important;
    left: 183px !important;
  }
}

/* ══════════════════════════════════════════════
   391px〜767px 途中幅 最終上書き
   SPデザインは390px基準のため、391〜767pxでは
   各セクションの表示幅を390pxに固定し中央配置する。
   width:100%のSP画像・SPコンテナは、この親幅の
   固定化により390pxを超えて伸びなくなる。
   390px以下／768px以上には影響しない。
   ══════════════════════════════════════════════ */
@media (min-width: 391px) and (max-width: 767px) {
  html,
  body {
    background-color: #d5d6c6 !important;
  }

  .fv,
  .about-us,
  .training,
  .stable-life,
  .staff,
  .pick-up-horses,
  .results,
  .contact {
    width: 390px !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}