@charset "UTF-8";
/* ==========================================================
   神戸マツダレーシングチーム（KMRT）LP／投稿ID 26135 専用
   このファイルは該当ページでのみ読み込まれます

   接頭辞は krt-（Kobe mazda Racing Team）
   KMFF（26237）とは別ページなので、クラス名が衝突することはない

   ■ 配色の設計
   ページを上下2枚で構成する。

     ヘッダー ─ FV ─ MESSAGE          … 白地・黒文字
     ／／／／ 斜めの境目 ／／／／
     RACE RESULT ─ MEMBER             … 黒地・白文字
     ／／／／ 斜めの境目 ／／／／
     HISTORY                          … 白地・黒文字
     ／／／／ 斜めの境目 ／／／／
     FOLLOW ─ フッター                 … 黒地・白文字

   ・白と黒の切り替えは、セクションに krt-sec--dark を付けるかどうかだけ。
     色はCSS変数（--krt-ink / --krt-mute / --krt-line / --krt-panel）で持っており、
     krt-sec--dark の中だけ変数の値が差し替わる。個別の色指定を書き足す必要はない。
   ・白と黒の境目の斜めは自動。黒地セクションのうち、表示されている先頭のものに付く。

   ■ ロゴについて
   ロゴ画像 header-logo-cp.png は白背景が焼き込まれた画像。
   filter で白抜きにすると白い長方形になるので**加工しないこと**。
   上半分を白地にしているのは、このロゴをそのまま使うため。
   ========================================================== */

/* ==========================================================
   1. テーマの打ち消し（上半分を白地にするための下ごしらえ）
   ========================================================== */

/* ページタイトルはKVに入れるので隠す */
.entry-title { display: none; }
.entry-content { margin-top: -10px; }

/* アイキャッチはキャンペーン一覧のサムネイル用。詳細ページでは隠す */
.wp-post-image { display: none !important; }
.entry-content .wp-post-image { display: block !important; }

/* 本文エリアを白に。テーマのcpページは黒が初期値なので上書きする。
   テーマCSSが後読みなので !important が要る */
.p-campaign__detail,
.p-campaign__detail--inner {
  background: #fff !important;
  color: var(--krt-ink) !important;
}
.p-campaign__detail { border-bottom: 0 !important; }

/* ---- ヘッダーを白一色にする ---- */
/* テーマはヘッダー（黒）の中に最大1140pxの白いブロック（.l-header__inner）を
   敷いており、横長の白い棒が突き出て見える。ヘッダーごと白にして帯をなくす。
   ロゴが白背景の画像なので、この方が素直につながる */
.l-header__cp {
  background: #fff !important;
  border-bottom: 1px solid #eee;
}

/* ---- ヘッダー直下に出る隙間を消す ---- */
/* ヘッダーは position:fixed で、body に padding-top:100px が入っている。
   ヘッダーの高さが100pxより低くなる画面幅では、その差分から
   ページの地色が横一本の線として見えてしまう。地色を白にして塞ぐ */
html,
body { background: #fff !important; }

/* KVを画面幅いっぱいにするため。100vw はスクロールバーを含むので必須 */
body { overflow-x: hidden; }

/* ==========================================================
   2. 土台
   ========================================================== */
/* ---- 欧文用フォント（MazdaType Bold） ---- */
/* テーマにも MazdaTypeBold の @font-face があるが、URLが
   MazdaTypeTT-Boldwoff2（拡張子の前のドット抜け）で404になっている。
   テーマは触らず、このページだけ正しいURLを別名で宣言し直す。
   family名を分けているのは、後から読み込まれるテーマの壊れた宣言に
   上書きされないようにするため。
   font-weight を 400 900 の範囲で宣言しているのは、
   太字指定の要素で「にせ太字」が二重にかからないようにするため。
   MazdaTypeは欧文専用。日本語が混じった場合は後ろの書体に落ちる */
@font-face {
  font-family: "KrtMazdaBold";
  src: url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Bold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- 白地（ページ上半分）のときの色 ---- */
body {
  /* 英字はすべてこの変数を経由してMazdaType Boldになる。
     krt-ttl / krt-cat / krt-race__date が対象。
     日本語には効かない（欧文専用の書体のため） */
  --krt-font-en: "KrtMazdaBold", MazdaTypeRegular, Arial, Helvetica, sans-serif;

  /* 日本語の明朝体。OS標準のものを使うので追加の読み込みは不要
     （Mac→ヒラギノ明朝／Windows→游明朝） */
  --krt-font-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
                     "Yu Mincho", YuMincho, "游明朝", "游明朝体",
                     "MS PMincho", serif;

  --krt-red:   #c20000;   /* ブランドカラー。白地でも黒地でも共通 */
  --krt-ink:   #1a1a1a;   /* 本文 */
  --krt-sub:   #3d3d3d;   /* 本文よりすこし淡い文字 */
  --krt-mute:  #767676;   /* 補足文字 */
  --krt-line:  rgba(0, 0, 0, .14);    /* 罫線 */
  --krt-panel: rgba(0, 0, 0, .03);    /* パネルの地 */

  --krt-head-h:  100px;   /* テーマ固定ヘッダーの高さ（PC） */
  --krt-head-sp:  50px;   /* 同（SP） */
  /* 斜めの高さ。画面幅に連動させないと、広い画面ほど角度が浅く見えてしまう。
     数字を大きくすると傾斜が急になる。ここ1箇所で上下2つの斜めが同時に変わる */
  --krt-slope: clamp(40px, 8vw, 180px);
  --krt-inset: max(20px, calc(50vw - 520px));  /* 全幅セクションの左右余白 */
}

/* ---- 黒地（レースリザルト以下）のときの色 ---- */
/* 変数を差し替えるだけで、この中の罫線・補足文字などが一斉に反転する */
.krt-sec--dark {
  --krt-ink:   #ffffff;
  --krt-sub:   #e0e0e0;
  --krt-mute:  #a8a8a8;
  --krt-line:  rgba(255, 255, 255, .18);
  --krt-panel: rgba(255, 255, 255, .04);
}

html { scroll-behavior: smooth; }

/* ページ内リンクで飛んだとき、見出しが固定ヘッダーに隠れないように */
[id] { scroll-margin-top: calc(var(--krt-head-h) + 16px); }
@media (max-width: 767px) {
  [id] { scroll-margin-top: calc(var(--krt-head-sp) + 16px); }
}

/* ---- 表示切替のユーティリティ ---- */
/* 公開前のブロックを一時的に隠す。戻すときはクラスを外すだけ */
.krt-hide { display: none !important; }

.krt-sp-only { display: none !important; }
@media (max-width: 767px) {
  .krt-sp-only { display: block !important; }
  .krt-pc-only { display: none !important; }
}

/* ---- セクション共通 ---- */
.krt-sec {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  padding: 88px 20px;
  color: var(--krt-ink);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.krt-sec.is-shown,
.krt-fade.is-shown { opacity: 1; transform: none; }

/* 単体の要素をスクロールでフェードインさせたいとき */
.krt-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .krt-sec, .krt-fade { opacity: 1 !important; transform: none !important; transition: none; }
}

@media (max-width: 767px) {
  .krt-sec { padding: 60px 24px; }
}

/* セクションの区切り線（2つ目以降の上端に引く）。
   ★このルールは、斜めを描く指定より必ず**前**に置くこと。
   同じ ::before を使っているため、後ろに置くと斜めの楔を上書きしてしまう */
.krt-sec + .krt-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--krt-line);
}

/* ---- 黒地のセクション（グループブロックに krt-sec--dark） ---- */
/* 背景は画面幅いっぱいに広げ、中身だけ1080pxに収める。
   隣り合う黒セクション同士は継ぎ目なくつながる */
.krt-sec--dark {
  width: 100vw;
  max-width: none;
  margin-inline: 0;
  margin-left: calc(50% - 50vw);
  padding-left: var(--krt-inset);
  padding-right: var(--krt-inset);
  background: #000;
  color: var(--krt-ink);
}

/* ---- 黒地の一番上は、上辺を斜めにする ---- */
/* メッセージ帯（白）より後ろにある**最初の黒地セクション**を自動で拾う。
   RESULTを krt-hide で隠しても、次のMEMBERが自動で斜めになるので、
   クラスを手で付け替える必要がない。
   上に食い込ませた分だけ padding-top を足して、中身の位置は変えない。
   足す量が斜めの55%なのは、中央に置いた見出しの位置で必要な深さがその程度のため */
.krt-sec--slope-top ~ .krt-sec--dark:not(.krt-hide) {
  margin-top: calc(-1 * var(--krt-slope));
  padding-top: calc(88px + var(--krt-slope) * .55);
  clip-path: polygon(0 var(--krt-slope), 100% 0, 100% 100%, 0 100%);
}
/* 斜めの内側に区切り線が入ってしまうので消す */
.krt-sec--slope-top ~ .krt-sec--dark:not(.krt-hide)::before { content: none; }

/* 黒地が続いているときだけ打ち消す（隣接セレクタ「+」で判定）。
   「~」ではなく「+」なのは、白地セクションを挟んだあとの黒地には
   もう一度斜めを付けたいため。
   HISTORYを白地にしたので、その次のFOLLOWは新しく斜めが必要になる。
   セレクタが1つ強い（クラス4つ）ので、上の指定に確実に勝つ */
.krt-sec--dark:not(.krt-hide) + .krt-sec--dark:not(.krt-hide) {
  margin-top: 0;
  padding-top: 88px;
  clip-path: none;
}
.krt-sec--dark:not(.krt-hide) + .krt-sec--dark:not(.krt-hide)::before { content: ""; }

/* ---- 背景を持つセクションは、背景を動かさず中身だけフェードインさせる ---- */
/* .krt-sec は要素ごと opacity/transform で動かしているため、そのままだと
   黒い背景や斜めの楔まで一緒に浮き出てしまう。
   背景側は常時表示に固定し、直下の子要素だけを動かす。
   ::before（斜めの楔・区切り線）は `> *` に含まれないので固定されたままになる */
.krt-sec--dark,
.krt-sec--slope-top {
  opacity: 1 !important;
  transform: none !important;
}
.krt-sec--dark > *,
.krt-sec--slope-top > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.krt-sec--dark.is-shown > *,
.krt-sec--slope-top.is-shown > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .krt-sec--dark > *,
  .krt-sec--slope-top > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ---- 白地セクションの上辺も斜めにする（krt-sec--slope-top） ---- */
/* FV（下端が黒）とRACE RESULT（黒）に挟まれた白い帯に使う。
   上辺の黒い楔をCSSで描き、下辺は次の黒地セクションの斜めが担当する。
   2つの斜めは同じ向きなので、白い帯は平行四辺形になる */
.krt-sec--slope-top {
  width: 100vw;
  max-width: none;
  margin-inline: 0;
  margin-left: calc(50% - 50vw);
  padding-left: var(--krt-inset);
  padding-right: var(--krt-inset);
  /* 斜めに食われる分を上下に足して、中身の余白を保つ */
  padding-top: calc(88px + var(--krt-slope) * .55);
  padding-bottom: calc(88px + var(--krt-slope) * .55);
  background: #fff;
}
/* 上辺の黒い楔。区切り線の指定（.krt-sec + .krt-sec::before）に
   負けないよう、クラスを2つ重ねて詳細度を揃えている */
.krt-sec.krt-sec--slope-top::before {
  content: "";
  position: absolute;
  top: -1px;            /* 上の画像との間に隙間が出ないように1pxかぶせる */
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(var(--krt-slope) + 1px);
  background: #000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

@media (max-width: 767px) {
  .krt-sec--slope-top {
    padding-top: calc(60px + var(--krt-slope) * .55);
    padding-bottom: calc(60px + var(--krt-slope) * .55);
  }
}

@media (max-width: 767px) {
  body { --krt-inset: 24px; }   /* SPの左右余白。ページ全体（全幅セクション）に効く */
  .krt-sec--slope-top ~ .krt-sec--dark:not(.krt-hide) {
    padding-top: calc(60px + var(--krt-slope) * .55);
  }
  .krt-sec--dark:not(.krt-hide) + .krt-sec--dark:not(.krt-hide) { padding-top: 60px; }
}

/* セクション内の文字色をまとめて白に寄せる。
   テーマの見出し色（黒）と同じ詳細度なので !important が必要。

   ★注意★ この指定は「クラス1つ＋要素1つ」で、`.krt-xxx` 単体（クラス1つ）より強い。
   そのため、この中の文字を白以外にしたい個別クラスには
   必ず `.krt-sec` を前に付けること。付け忘れるとここに負けて白のままになる。
       ○ .krt-sec .krt-race__date { color: var(--krt-mute) !important; }
       × .krt-race__date          { color: var(--krt-mute) !important; }
   `.krt-sec` の外にある要素（FV画像など）はこの指定の影響を受けない */
.krt-sec h1,
.krt-sec h2,
.krt-sec h3,
.krt-sec h4,
.krt-sec p,
.krt-sec li,
.krt-sec figcaption { color: var(--krt-ink) !important; }


/* ==========================================================
   3. セクション見出し（英字＋日本語＋赤いバー）
   見出しブロックに krt-ttl、直下の段落ブロックに krt-ttl__ja
   ========================================================== */
.krt-ttl {
  position: relative;
  font-family: var(--krt-font-en);
  font-size: clamp(30px, 5.4vw, 50px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 18px !important;
  padding: 0 0 22px !important;
}
/* 赤いバー。セクションが表示されたら中央から伸びる */
.krt-ttl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--krt-red);
  transform: translateX(-50%);
  transition: width .8s ease .1s;
}
.krt-sec.is-shown .krt-ttl::after { width: 56px; }

/* 日本語サブタイトルは明朝体。
   font-weight を 500 にしているのは、Windowsの游明朝が400だと細く見えるため。
   700にすると小さい字では潰れるので中間にしている */
.krt-sec .krt-ttl__ja {
  text-align: center;
  font-family: var(--krt-font-mincho);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--krt-mute) !important;
  margin: 0 0 52px !important;
}

@media (prefers-reduced-motion: reduce) {
  .krt-ttl::after { transition: none; width: 56px; }
}
@media (max-width: 767px) {
  .krt-ttl__ja { margin-bottom: 36px !important; letter-spacing: .18em; }
}

/* ---- 中見出し（DRIVER / ENGINEER の区切り）。左右に横線が伸びる ---- */
/* 見出しブロックに krt-cat */
.krt-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--krt-font-en);
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 700;
  letter-spacing: .2em;
  margin: 0 0 44px !important;
}
.krt-cat::before,
.krt-cat::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--krt-line);
}
/* 2組目（ENGINEER）は前のメンバーとの間に余白を足す */
.krt-member + .krt-cat { margin-top: 28px !important; }

/* ---- 注意書き ---- */
.krt-sec .krt-note {
  font-size: 12px !important;
  line-height: 1.8;
  color: var(--krt-mute) !important;
}

/* ==========================================================
   4. キービジュアル
   画像ブロックに krt-kv。PC用・SP用の2枚を置き、
   krt-pc-only / krt-sp-only で出し分ける。
   「熱狂、再び。」はFV画像に焼き込んだ状態で書き出す
   ========================================================== */
.krt-kv {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
}
.krt-kv img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}
/* 画面いっぱいに引き伸ばしたくない（画像の横幅が足りない）ときはこちらを追加 */
.krt-kv--boxed {
  width: 100% !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}

/* ==========================================================
   5. メッセージ（チーム紹介）
   ========================================================== */
.krt-lead {
  max-width: 760px;
  margin: 0 auto 28px !important;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 2.2;
  text-align: center;
}
.krt-lead--big {
  font-size: clamp(19px, 3.2vw, 26px);
  font-weight: 700;
  line-height: 1.9;
  margin-bottom: 32px !important;
}
/* 強調したい語は、エディタで太字にすると赤くなる */
.krt-lead strong { color: var(--krt-red); }

/* スマホでは長い本文を左寄せにする（中央寄せのままだと読みにくいため）。
   エディタで中央寄せを指定していても、SPだけは左寄せになる仕様 */
@media (max-width: 767px) {
  .krt-lead { text-align: left !important; line-height: 2; }
  .krt-lead--big { text-align: center !important; }
}

/* ==========================================================
   5-2. マシン紹介（メディアとテキストブロックに krt-machine）
   写真の後ろに斜めのグレーのパネルを敷き、
   スクロールで「パネルが伸びる → 車が右から走り込む → 文字」の順に出す。
   is-shown は 26135.php のJSが、このブロックが画面に入ったときに付ける。

   写真は白背景のままでよい（切り抜き不要）。
   mix-blend-mode: multiply で白い部分が下のパネルに溶け込む。
   透過PNGでもそのまま使える
   ========================================================== */
.krt-machine {
  --mc-panel: #efefef;     /* パネルの色 */
  --mc-skew: -14deg;       /* パネルの傾き */
}
.krt-machine.wp-block-media-text {
  max-width: 1000px;
  margin: 72px auto 0 !important;
  grid-template-columns: 52% 1fr !important;
  align-items: center;
}
.krt-machine.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 52% !important;
}

/* ---- 写真側 ---- */
.krt-machine .wp-block-media-text__media {
  position: relative;
  isolation: isolate;          /* multiply をこの中だけで効かせる */
  padding: 4% 3% 8%;
}
.krt-machine .wp-block-media-text__media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* 斜めのグレーのパネル */
.krt-machine .wp-block-media-text__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16%;
  bottom: 6%;
  left: 4%;
  right: -8%;
  background: var(--mc-panel);
  transform: skewX(var(--mc-skew)) scaleX(0);
  transform-origin: right center;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
/* 写真が右のときは、はみ出す向きを反転 */
.krt-machine.has-media-on-the-right .wp-block-media-text__media::before { left: -8%; right: 4%; }

/* ---- 文字側 ---- */
.krt-machine .wp-block-media-text__content {
  position: relative;
  z-index: 1;
  padding: 0 0 0 6% !important;
}
.krt-machine.has-media-on-the-right .wp-block-media-text__content { padding: 0 6% 0 0 !important; }

/* 英字の小見出し（先頭に赤い平行四辺形） */
.krt-sec .krt-machine__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px !important;
  font-family: var(--krt-font-en);
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--krt-red) !important;
}
.krt-machine__label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 10px;
  background: var(--krt-red);
  transform: skewX(-20deg);
}
/* キャッチ */
.krt-sec .krt-machine__catch {
  margin: 0 0 16px !important;
  /* 「今年はマシンのカラーリングを一新！」（17文字）がPCで1行に収まる大きさ */
  font-size: clamp(18px, 2vw, 25px) !important;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  word-break: auto-phrase;   /* 折り返すときは語の途中で切らない（対応ブラウザのみ） */
}
/* 本文 */
.krt-sec .krt-machine__text {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 2.1;
  color: var(--krt-sub) !important;
}

/* ---- スクロール演出 ---- */
.krt-machine .wp-block-media-text__media img {
  opacity: 0;
  /* 右から走り込む。写真の車が左向きなので、写真を左右どちらに置いても右から。
     右向きの写真に差し替えたときは -16% にする */
  transform: translateX(16%);
  transition: opacity .8s ease .35s, transform 1.4s cubic-bezier(.16, 1, .3, 1) .35s;
}
.krt-machine .wp-block-media-text__content > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.krt-machine.is-shown .wp-block-media-text__media::before { transform: skewX(var(--mc-skew)) scaleX(1); }
.krt-machine.is-shown .wp-block-media-text__media img,
.krt-machine.is-shown .wp-block-media-text__content > * { opacity: 1; transform: none; }
.krt-machine.is-shown .wp-block-media-text__content > :nth-child(1) { transition-delay: .7s; }
.krt-machine.is-shown .wp-block-media-text__content > :nth-child(2) { transition-delay: .85s; }
.krt-machine.is-shown .wp-block-media-text__content > :nth-child(n+3) { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .krt-machine .wp-block-media-text__media::before { transform: skewX(var(--mc-skew)) scaleX(1); transition: none; }
  .krt-machine .wp-block-media-text__media img,
  .krt-machine .wp-block-media-text__content > * { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 767px) {
  /* 「写真 → 文字」の順に縦積み */
  .krt-machine.wp-block-media-text,
  .krt-machine.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 100% !important;
    grid-template-areas: "media-text-media" "media-text-content" !important;
    margin-top: 48px !important;
  }
  .krt-machine .wp-block-media-text__media { grid-area: media-text-media !important; }
  .krt-machine .wp-block-media-text__content,
  .krt-machine.has-media-on-the-right .wp-block-media-text__content {
    grid-area: media-text-content !important;
    padding: 20px 0 0 !important;
  }
  .krt-machine .wp-block-media-text__media::before { left: 6%; right: -4%; }
  .krt-sec .krt-machine__catch { font-size: 17px !important; }   /* 幅360pxの端末でも1行に収める */
  .krt-sec .krt-machine__text { font-size: 14px !important; line-height: 2; }
}

/* ==========================================================
   6. レースリザルト
   1戦 ＝「メディアとテキスト」ブロック（krt-race）1つ。
   ツールバーの「メディアを右に表示」を押すだけで写真が左右入れ替わり、
   文字寄せ・日付の罫線の向きも自動で反転する
   ========================================================== */
.krt-race.wp-block-media-text {
  grid-template-columns: 44% auto;
  align-items: center;
  margin: 0 0 90px !important;
}
.krt-race.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: auto 44%;
}
.krt-race:last-child { margin-bottom: 0 !important; }

.krt-race .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  display: block;
}
/* コア標準の padding: 0 8% だと写真から離れすぎるので詰める */
.krt-race .wp-block-media-text__content { padding: 0 0 0 44px !important; }
.krt-race.has-media-on-the-right .wp-block-media-text__content { padding: 0 44px 0 0 !important; }

/* ---- 日付。余った幅いっぱいに横罫線が伸びる ---- */
.krt-sec .krt-race__date {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--krt-font-en);
  font-size: clamp(20px, 2.7vw, 30px) !important;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--krt-ink) !important;
  margin: 0 0 12px !important;
}
.krt-race__date::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--krt-line);
}
/* 写真が右のときは罫線を左へ伸ばす */
.krt-race.has-media-on-the-right .krt-race__date { flex-direction: row-reverse; }

/* ---- 大会名（英字） ---- */
.krt-sec .krt-race__event {
  font-size: clamp(14px, 1.9vw, 18px) !important;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.5;
  color: var(--krt-ink) !important;
  margin: 0 0 4px !important;
}

/* ---- レース名＋略称（グループブロックに krt-race__titlerow） ---- */
.krt-race__titlerow,
.krt-race__titlerow > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 2px;
}
.krt-race__titlerow { margin: 0 0 28px !important; }
.krt-sec .krt-race__title {
  font-size: clamp(19px, 3vw, 27px);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 !important;
}
.krt-sec .krt-race__abbr {
  font-size: clamp(12px, 1.6vw, 15px) !important;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 !important;
}

/* ---- 結果コメント ---- */
.krt-sec .krt-race__text {
  font-size: 15px;
  line-height: 2.1;
  color: var(--krt-sub) !important;
  margin: 0 !important;
}

/* ---- 写真が右のときは文字を右に寄せる ---- */
.krt-race.has-media-on-the-right .krt-race__event,
.krt-race.has-media-on-the-right .krt-race__text { text-align: right; }
.krt-race.has-media-on-the-right .krt-race__titlerow { justify-content: flex-end; }

@media (max-width: 767px) {
  /* コアの縦積みは600px以下。このLPは767pxで揃える。
     左右どちらの配置でも「写真 → 文字」の順に積み、文字はすべて左寄せに戻す */
  .krt-race.wp-block-media-text,
  .krt-race.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 100% !important;
    grid-template-areas: "media-text-media" "media-text-content" !important;
    margin-bottom: 60px !important;
  }
  .krt-race .wp-block-media-text__media { grid-area: media-text-media !important; }
  .krt-race .wp-block-media-text__content,
  .krt-race.has-media-on-the-right .wp-block-media-text__content {
    grid-area: media-text-content !important;
    padding: 22px 0 0 !important;
  }
  .krt-race.has-media-on-the-right .krt-race__date { flex-direction: row; }
  .krt-race.has-media-on-the-right .krt-race__event,
  .krt-race.has-media-on-the-right .krt-race__text { text-align: left; }
  .krt-race.has-media-on-the-right .krt-race__titlerow { justify-content: flex-start; }
  .krt-race__titlerow { margin-bottom: 20px !important; }
  .krt-sec .krt-race__text { font-size: 14px; line-height: 2; }
}

/* ==========================================================
   7. メンバー（ドライバー4名／エンジニア2名）
   1人 ＝「メディアとテキスト」ブロック（krt-member）1つ。
   ツールバーの「メディアを右に表示」を押すだけで左右が入れ替わる
   ========================================================== */
.krt-member.wp-block-media-text {
  grid-template-columns: 37% auto;
  align-items: start;
  margin: 0 0 76px !important;
}
.krt-member.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: auto 37%;
}
.krt-member:last-child { margin-bottom: 0 !important; }

.krt-member .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
/* コア標準の padding: 0 8% だと写真から離れすぎるので詰める */
.krt-member .wp-block-media-text__content { padding: 0 0 0 46px !important; }
.krt-member.has-media-on-the-right .wp-block-media-text__content { padding: 0 46px 0 0 !important; }

/* ---- 肩書き ---- */
.krt-sec .krt-member__role {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--krt-red) !important;
  margin: 0 0 10px !important;
}
/* ドライバー以外は肩書きラベルの色を変えて区別する
   ドライバー … 赤（--krt-red）
   エンジニア … シルバー
   ヘッドコーチ … ゴールド
   （ブロックに krt-member--eng／krt-member--coach を追加） */
.krt-member--eng .krt-member__role { color: #9fb6c6 !important; }
.krt-member--coach .krt-member__role { color: #dcb45c !important; }

/* ---- 氏名＋店舗（グループブロックに krt-member__id） ---- */
.krt-member__id,
.krt-member__id > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.krt-member__id { margin: 0 0 22px !important; }
.krt-member__name {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  margin: 0 !important;
}
.krt-sec .krt-member__shop {
  font-size: 14px !important;
  color: var(--krt-mute) !important;
  margin: 0 !important;
}

.krt-sec .krt-member__text {
  font-size: 15px;
  line-height: 2.1;
  color: var(--krt-sub) !important;
  margin: 0 0 16px !important;
}
.krt-sec .krt-member__text:last-child { margin-bottom: 0 !important; }

/* ---- 写真はメンバーごとにスクロールで浮き出す ---- */
/* is-shown は 26135.php のJSが、そのメンバーが画面に入ったときに付ける。
   セクション全体ではなく1人ずつ判定するので、スクロールに合わせて順に現れる。
   「直下」ではなく子孫で指定しているのは、ブロックの入れ子が深くても効かせるため */
.krt-member .wp-block-media-text__media,
.krt-member .krt-member__sub {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.krt-member.is-shown .wp-block-media-text__media,
.krt-member.is-shown .krt-member__sub {
  opacity: 1;
  transform: none;
}
/* サブ写真は人物写真より少し遅らせる */
.krt-member.is-shown .krt-member__sub { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .krt-member .wp-block-media-text__media,
  .krt-member .krt-member__sub {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ---- 本文下のサブ写真（ギャラリーブロックに krt-member__sub） ---- */
/* 2枚目を少し下げて重ねる。見本の写真と同じ見え方にするため */
.krt-member__sub { margin: 26px 0 0 !important; }
/* コアのギャラリーは flex + wrap で、負のマージンを入れると折り返しの判定が
   崩れて2枚目が下に落ちる。gridにして2列を固定する */
.krt-member__sub.wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 !important;
  align-items: start;
}
.krt-member__sub.wp-block-gallery.has-nested-images > figure {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.krt-member__sub.wp-block-gallery.has-nested-images > figure:nth-child(2) {
  position: relative;
  z-index: 2;
  margin-top: 38px !important;
  margin-left: -8% !important;
}
.krt-member__sub img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

@media (max-width: 767px) {
  /* コアの縦積みは600px以下。このLPは767pxで揃えたいので上書きする */
  .krt-member.wp-block-media-text,
  .krt-member.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 100% !important;
    grid-template-areas: "media-text-media" "media-text-content" !important;
    margin-bottom: 56px !important;
  }
  .krt-member .wp-block-media-text__media {
    grid-area: media-text-media !important;
    max-width: 320px;
    margin-inline: auto;
  }
  .krt-member .wp-block-media-text__content,
  .krt-member.has-media-on-the-right .wp-block-media-text__content {
    grid-area: media-text-content !important;
    padding: 22px 0 0 !important;
  }
  .krt-member__id { margin-bottom: 16px !important; }
  .krt-member__text { font-size: 14px; line-height: 2; }
  .krt-member__sub.wp-block-gallery.has-nested-images > figure:nth-child(2) {
    margin-top: 24px !important;
    margin-left: -6% !important;
  }
}

/* ==========================================================
   8. HISTORY（年表）
   1年分 ＝ グループブロック（krt-yr）1つ。中身は3つだけ。

     段落 krt-yr__num   … 大きな年数字。背面に敷く
     画像 krt-yr__img   … 年数字に少し重なる写真。右寄せ
     段落 krt-yr__text  … コメント

   年数字は position:absolute で流れから外し、写真とコメントを z-index で前に出す
   ========================================================== */
.krt-history {
  position: relative;
  /* 中に z-index:-1 の要素を置くので、ここで重なりの土俵を作る。
     これが無いと道路がセクションの背景の裏に潜って見えなくなる */
  z-index: 0;
  max-width: 900px;
  margin-inline: auto !important;

  /* ---- レースコースに見立てた背景 ---- */
  --road-w: min(640px, 84%);   /* 道路の幅。狭くするほど年や写真のはみ出しが増える */
  --road-bg: #e9e9e9;          /* アスファルト */
  --road-line: 16px;           /* 白線を端から何px内側に引くか */
  --road-line-w: 7px;          /* 白線の太さ */
  --road-fade: 130px;          /* 上下が消えていく長さ */
}
/* 道路。年表の縦方向いっぱいに1本通す */
.krt-history::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--road-fade));      /* 上下は消えていく分だけ長めに取る */
  bottom: calc(-1 * var(--road-fade));
  left: 50%;
  width: var(--road-w);
  transform: translateX(-50%);
  background-color: var(--road-bg);
  /* 手前から順に：左の白線／右の白線／アスファルトのノイズ。
     ノイズはSVGのデータURI。画像をアップロードする必要はない */
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  background-size:
    var(--road-line-w) 100%,
    var(--road-line-w) 100%,
    140px 140px;
  background-position:
    var(--road-line) 0,
    calc(100% - var(--road-line)) 0,
    0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  /* 始まりと終わりを自然に消す */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 var(--road-fade),
    #000 calc(100% - var(--road-fade)),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 var(--road-fade),
    #000 calc(100% - var(--road-fade)),
    transparent 100%);
}

.krt-yr {
  position: relative;

  /* ---- ここ3つで見え方が決まる ---- */
  /* 年数字の大きさ */
  --yr-size: clamp(72px, 13vw, 190px);
  /* 写真を年数字にどれだけ重ねるか。
     0 = まったく重ならない（写真は年の真下）
     1 = 年の下端まで重なる（年がほぼ隠れる）
     数字を上げるほど写真が上がる */
  --yr-overlap: .15;
  /* 年数字の色。道路（--road-bg）より少し濃いグレー。半透明にはしない */
  --yr-color: #bbbbbb;

  margin: 0 0 clamp(80px, 8vw, 90px) !important;
  /* 年数字の高さ（= --yr-size × line-height .8）から重なり分を引いた位置に写真を置く。
     計算で出しているので、年の大きさを変えても重なり具合は保たれる */
  padding-top: calc(var(--yr-size) * .8 * (1 - var(--yr-overlap)));
}
.krt-yr:last-child { margin-bottom: 0 !important; }

/* ---- 背面に敷く大きな年数字 ---- */
.krt-sec .krt-yr__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  margin: 0 !important;
  font-family: var(--krt-font-en);
  font-size: var(--yr-size) !important;
  font-weight: 700;
  line-height: .8;
  /* 大きい数字は字間が広く見えるので詰める */
  letter-spacing: -.03em;
  white-space: nowrap;
  pointer-events: none;
  /* 一括指定（.krt-sec p）に !important で当てられているので、こちらも !important が要る。
     不透明な色なので、下の道路が透けることはない */
  color: var(--yr-color) !important;
}

/* ---- 年数字に少し重ねる写真 ---- */
.krt-yr__img {
  position: relative;
  z-index: 1;
  width: 78%;
  margin: 0 auto !important;   /* 中央寄せ */
}
.krt-yr__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- スクロールで「年 → 写真 → コメント」の順にふわっと出す ---- */
/* is-shown は 26135.php のJSが、その年ブロックが画面に入ったときに付ける。
   セクション全体ではなく1年ごとに判定するので、スクロールに合わせて順に現れる */
/* 「直下」ではなく「中にあれば」で指定している。
   ブロックエディタの都合でグループがもう1段挟まっても効くようにするため */
.krt-yr .krt-yr__num,
.krt-yr .krt-yr__img,
.krt-yr .krt-yr__text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.krt-yr.is-shown .krt-yr__num,
.krt-yr.is-shown .krt-yr__img,
.krt-yr.is-shown .krt-yr__text {
  opacity: 1;
  transform: none;
}
/* 写真とコメントを遅らせて「年 → 写真 → コメント」の順に出す。
   数字を大きくするほど、間隔があいてゆっくり出てくる */
.krt-yr.is-shown .krt-yr__img  { transition-delay: .35s; }
.krt-yr.is-shown .krt-yr__text { transition-delay: .7s; }

@media (prefers-reduced-motion: reduce) {
  .krt-yr .krt-yr__num,
  .krt-yr .krt-yr__img,
  .krt-yr .krt-yr__text {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ---- コメント。左右に振らず、常に中央に置く ---- */
.krt-sec .krt-yr__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: 32px auto 0 !important;
  text-align: center;
  font-size: 15px !important;
  line-height: 2;
  color: var(--krt-sub) !important;
}

/* ---- 偶数番目は左右を反転させて、縦に並んだときの単調さをなくす ---- */
/* 奇数：年が左／写真とコメントが右
   偶数：年が右／写真とコメントが左
   :nth-child で自動判定しているので、年を増やしても勝手に交互になる */
.krt-yr:nth-child(even) .krt-yr__num {
  left: auto;
  right: 0;
}
/* 写真とコメントは中央固定なので、左右に振るのは年数字だけ */

@media (max-width: 767px) {
  .krt-yr {
    --yr-size: 62px;
    margin-bottom: 56px !important;
  }
  .krt-yr__img { width: 86%; }
  .krt-sec .krt-yr__text {
    margin: 22px auto 0 !important;
    font-size: 14px !important;
  }
}

/* ==========================================================
   9. SNS・CTA
   ========================================================== */
.krt-cta {
  text-align: center;
  padding-bottom: 96px;
}
.krt-cta .krt-lead { margin-bottom: 34px !important; }

/* ボタンブロックに krt-btn。白枠のピル、ホバーで赤く塗る */
.krt-btn .wp-block-button__link,
.krt-btn.wp-block-button > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  height: 56px;
  padding: 0 30px !important;
  border: 1px solid var(--krt-ink) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--krt-ink) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.krt-btn .wp-block-button__link:hover,
.krt-btn.wp-block-button > a:hover {
  background: var(--krt-red) !important;
  border-color: var(--krt-red) !important;
  color: #fff !important;
}
.krt-btn i { font-size: 18px; }

/* 中央寄せはブロック側（レイアウト＝横並び・中央）でも指定してあるが、
   WPが生成するレイアウト用CSSに負けないよう !important を付けておく */
.wp-block-buttons.krt-btns {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 14px 16px !important;
}

/* CTA末尾の注記 */
.krt-cta .krt-note { margin: 26px 0 0 !important; }

@media (max-width: 767px) {
  .krt-cta { padding-bottom: 72px; }
  .krt-btn .wp-block-button__link,
  .krt-btn.wp-block-button > a { min-width: 220px; height: 52px; font-size: 14px !important; }
}

/* ==========================================================
   10. 画像の拡大表示（画像ブロックに krt-zoom）
   ========================================================== */
.krt-zoom { cursor: zoom-in; }

.krt-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(0, 0, 0, .92);
}
.krt-lb.is-open { display: block; }
.krt-lb__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: auto;
}
.krt-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 拡大中は原寸表示＋スクロールで移動 */
.krt-lb.is-zoom .krt-lb__inner { cursor: grab; align-items: flex-start; justify-content: flex-start; }
.krt-lb.is-zoom .krt-lb__img { max-width: none; max-height: none; width: auto; height: auto; }

.krt-lb__close,
.krt-lb__zoom {
  position: absolute;
  top: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.krt-lb__close { right: 16px; }
.krt-lb__zoom  { right: 70px; }

/* ==========================================================
   11. 印刷（社内共有でPDF化されることがあるため）
   ========================================================== */
@media print {
  .krt-sec, .krt-fade { opacity: 1 !important; transform: none !important; }
  .krt-lb { display: none !important; }
}