/* ============================================================================
   メインビジュアル: 回転スライド（mv-rotate）
   骨格 : 回転するカードデッキ ── 写真6枚が同じ舞台で重なり、
          「右奥 → 正面 → 左奥」と回りながら入れ替わる
   トーン: ポップ（軽快・テンポ）
   アクセント: 【傾き（回転角）】ひとつだけ。
          角丸・影・線・帯・格子・ちら見せ・指標を1つも足していない。
          地色のベールは背景スロットを「舞台の壁」に沈めるための地の処理であって、
          写真の上に文字を載せるためのスクリムではない（文字は写真と一度も重ならない）。

   ★受領時は「機能していない」状態だった:
     sample.css が .rotateslider_active_img / _next_img / _prev_img / _number1 / _number2
     という【旧WPテーマの jQuery が付与していたクラス】を前提に書かれていたが、
     このモジュールは JS を読み込まない（README「JS: なし（CSSだけで成立します）」）。
     結果、6枚すべてが素の top:-150% に落ちて画面外に積み上がり、
     可視率が 375〜1920 の全幅で 0%（＝画像スロット6枚が一度も表示されない）だった。
     さらに高さが 820px / 620px の固定値で、769/1024/1280 では
     ヘッダー込み 112〜117vh と第一画面を大きく超えていた。
     → JS を足さずに CSS の @keyframes だけで回転を成立させ直した。
     → .slider_dots 系 66 行と .hero-title / .hero-lead の旧定義は
       DOM に対応する要素が無い【死にセレクタ】だったので撤去した。

   ★文字は写真に重ねない。可読性が写真の明るさから独立するので、
     スクリムも帯もプレートも要らない（＝材料を足さずに済む）。
   ============================================================================ */

.main_rotateslider {
  /* ── 意匠の量。⑤-2 で候補を並べて決めた値（詳細は plans/mv-rotate-plan.md）── */
  --mvrot-dur: 15s;       /* 1周（6枚）。1枚あたり約 2.5 秒 */
  --mvrot-tilt: 12deg;    /* 背後のカードの傾き。前面は必ず 0deg */
  --mvrot-shift: 15%;     /* 背後のカードの横ずれ */
  --mvrot-lift: 5%;       /* 背後のカードの持ち上げ（奥にあるものは画面上で少し上） */
  --mvrot-scale: 0.9;     /* 背後のカードの縮み */
  --mvrot-dim: 0.5;       /* 背後のカードの不透明度 */

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.35rem, 4.4vh, 3.1rem);
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  /* R-5: 固定 px 高をやめ、第一画面（サイトヘッダー 76px 込み）に収める */
  min-height: min(76vh, 660px);
  padding: clamp(0.9rem, 2.8vh, 2.1rem) clamp(1rem, 4vw, 3rem);
  /* 傾いたカードが横スクロールを作らないように断つ */
  overflow: hidden;

  /* 7枚目のスロット th38-bg-1.webp は「舞台の壁」。cover で全幅を埋める
     （受領時は background-size 未指定で、1920px では原寸のまま中央に置かれていた） */
  background-color: var(--color-bg);
  background-image: url(@@A@@images/th38-bg-1.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  color: var(--color-text);
  font-family: var(--font-body);
}

/* 地色のベール。背景写真を沈めて「壁」にし、手前のカードを主役にする。
   ★色は必ず --color-bg 基準にする（黒スクリムだと 16 番と材料が被り、
     かつ濃色テーマで地の意味が反転する）。 */
.main_rotateslider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  pointer-events: none;
}

/* ── 舞台 ─────────────────────────────────────────────────────────
   「テキストが伸びたら写真が縮む」形。コピーの行数は案件ごとに変わるので、
   セクション側で高さの上限を握り、舞台が残りを受けて縮む。 */
.main_rotateslider .rotateslider-container {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.main_rotateslider .slider {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カードの重ね枠。
   ★幅を【高さから】逆算する（height:100% + aspect-ratio）。
     aspect-ratio + max-height だと広い画面で実効比が伸びて写真の上下を捨てるが、
     この書き方ならその罠が起きない。
   ★max-width は 100% ではなく 76% にしてある。傾いて外へ出るカード（±15%＋回転）の
     ぶんの余地を器の中に確保するため（狭い画面で断ち落とされると 05 番の
     「ちら見せ」と材料が被ってしまう）。 */
.main_rotateslider .slider_box {
  position: relative;
  height: 100%;
  aspect-ratio: 16 / 10;
  max-width: 76%;
  /* ★max-height を vw で持つ理由: 高さだけが余っている幅帯（769〜1024px）では
     max-width:76% が先に効いて、height:100% のまま幅だけ詰められる。
     実測で枠の実効比が 1.60 → 1.15 まで潰れ、写真の左右 37% が捨てられていた。
     43vw ≒ (内寸 × 76%) ÷ 1.6 なので、どの幅でも比 1.60 のまま着地する。 */
  max-height: 43vw;
  flex: 0 1 auto;
}

.main_rotateslider .rotateslider_item {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  /* 回転の軸をカードの下寄りに置くと「札をめくる」動きになる */
  transform-origin: 50% 76%;
  /* ★背後のカードは【少し上へ】置く（--mvrot-lift）。
     ①奥にあるものが画面上で上に来るのは遠近の読み方に一致する
     ②回転すると下角が W/2·sinθ だけ下がるので、そのぶんキャッチの行に近づく。
       持ち上げておくと、傾きを大きくしても文字が写真に載らない
       （実測: 1周ぶん時間サンプルで「文字の背後に写真がある点」を 0 に保てる上限で決めた） */
  transform: translate(calc(var(--mvrot-shift) * 1.6), calc(var(--mvrot-lift) * -1.6)) rotate(calc(var(--mvrot-tilt) * 1.6)) scale(calc(var(--mvrot-scale) - 0.06));
  animation: mv-rotate-cycle var(--mvrot-dur) linear infinite;
  will-change: transform, opacity;
}

.main_rotateslider .rotateslider_item img {
  display: block;
  width: 100%;
  height: 100%;
  /* 案件ごとに写真の縦横比が変わる（同梱分も 1.43 と 1.83 が混在）ので、
     枠の比は CSS が持ち、写真は cover で受ける */
  object-fit: cover;
  object-position: center;
}

/* 位相を 1/6 ずつずらして、1本の keyframes で6枚を回す。
   ★-1.2 起点にしてあるのは、読み込み直後に【1枚目（LCP要素）が正面】に来るようにするため。
     1 → 2 → 3 → 4 → 5 → 6 の順に回る。 */
.main_rotateslider .rotateslider_item:nth-child(1) { animation-delay: calc(var(--mvrot-dur) * -1.2); }
.main_rotateslider .rotateslider_item:nth-child(2) { animation-delay: calc(var(--mvrot-dur) * -1.0333); }
.main_rotateslider .rotateslider_item:nth-child(3) { animation-delay: calc(var(--mvrot-dur) * -0.8667); }
.main_rotateslider .rotateslider_item:nth-child(4) { animation-delay: calc(var(--mvrot-dur) * -0.7); }
.main_rotateslider .rotateslider_item:nth-child(5) { animation-delay: calc(var(--mvrot-dur) * -0.5333); }
.main_rotateslider .rotateslider_item:nth-child(6) { animation-delay: calc(var(--mvrot-dur) * -0.3667); }

/* 1枚ぶんのタイムライン。
   4%  右奥で待機（見え始める）
   16% 正面に到達（この時点ではまだ前の1枚の背後）
   17% 前面を受け取る（z=3）
   30% 前面を保持したまま、左へ回り出す
   42% 左外で消える → 44% 右奥へ瞬間復帰（不可視なので見えない）
   ★前面は必ず rotate(0deg)。傾くのは背後の2枚だけなので、
     「写真を見せる」という一次機能をアクセント（傾き）が食わない。 */
@keyframes mv-rotate-cycle {
  0% {
    opacity: 0;
    z-index: 1;
    transform: translate(calc(var(--mvrot-shift) * 1.6), calc(var(--mvrot-lift) * -1.6)) rotate(calc(var(--mvrot-tilt) * 1.6)) scale(calc(var(--mvrot-scale) - 0.06));
  }
  4% {
    opacity: var(--mvrot-dim);
    z-index: 1;
    transform: translate(var(--mvrot-shift), calc(var(--mvrot-lift) * -1)) rotate(var(--mvrot-tilt)) scale(var(--mvrot-scale));
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.28, 1);
  }
  16% {
    opacity: 1;
    z-index: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  17%, 30% {
    opacity: 1;
    z-index: 3;
    transform: translate(0, 0) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  30.01% {
    opacity: 1;
    z-index: 2;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  36% {
    opacity: var(--mvrot-dim);
    z-index: 2;
    transform: translate(calc(var(--mvrot-shift) * -1), calc(var(--mvrot-lift) * -1)) rotate(calc(var(--mvrot-tilt) * -1)) scale(var(--mvrot-scale));
  }
  42% {
    opacity: 0;
    z-index: 2;
    transform: translate(calc(var(--mvrot-shift) * -1.8), calc(var(--mvrot-lift) * -1.6)) rotate(calc(var(--mvrot-tilt) * -1.8)) scale(calc(var(--mvrot-scale) - 0.08));
  }
  44%, 100% {
    opacity: 0;
    z-index: 1;
    transform: translate(calc(var(--mvrot-shift) * 1.6), calc(var(--mvrot-lift) * -1.6)) rotate(calc(var(--mvrot-tilt) * 1.6)) scale(calc(var(--mvrot-scale) - 0.06));
  }
}

/* ── コピー ───────────────────────────────────────────────────────
   写真には重ねない。地（背景写真＋ベール）の上に置くので、
   可読性が写真の明るさから独立する。 */
.main_rotateslider .main_rotateslider_copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: min(1080px, 100%);
  margin-inline: auto;
  text-align: center;
  container-type: inline-size;
}

.main_rotateslider .hero-title {
  margin: 0;
  font-family: var(--font-heading);
  /* キャッチ長を engine 側で選べない部品なので、天井は --fs-hero-md（40〜48px）。
     30字でも行数が破綻しない段。実効サイズは器の幅（cqw）が決める。 */
  font-size: clamp(1.5rem, 4.2vw, var(--fs-hero-md));
  line-height: 1.26;
  letter-spacing: 0.02em;
  /* ★--color-heading-ink は common.css に定義が無い。無効な var() は本文色に
     素通し継承されて階調が消えるので、一段濃い色をフォールバックに置く。 */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 82%, #000));
  text-wrap: balance;
}

/* このコピーは写真ではなく淡い背景ベールの上に置くため、汎用ヒーローの白系指定を継承させない。 */
.main_rotateslider .hero-eyebrow {
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 82%, #000));
}

@supports (container-type: inline-size) {
  .main_rotateslider .hero-title {
    font-size: clamp(1.5rem, 4.2cqw, var(--fs-hero-md));
  }
}

.main_rotateslider .hero-lead {
  max-width: 44em;
  margin: 0.55rem auto 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.7;
  /* ★--color-text-muted は定義上どのテーマでも 3.1〜3.7 にしかならない（4プリセット全滅）。
     主従はサイズとウェイトで作り、色は --color-text のままにする。 */
  color: var(--color-text);
}

/* ── モバイル ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main_rotateslider {
    --mvrot-tilt: 8deg;
    --mvrot-shift: 10%;
    min-height: min(76vh, 560px);
    gap: clamp(1rem, 3.4vh, 1.7rem);
  }

  /* SP は背景の cover 切り出しが 3.8 倍に寄るので、同じ濃度でも地が強く出る。
     並置で確認して一段上げた（PC 82% → SP 89%）。 */
  .main_rotateslider::before {
    background: color-mix(in srgb, var(--color-bg) 89%, transparent);
  }

  /* SP は縦の余地が薄いので比を 4:3 に起こす。
     56vw ≒ (内寸 × 82%) ÷ 1.333 で、PC 側と同じ理屈で比を守る上限。 */
  .main_rotateslider .slider_box {
    aspect-ratio: 4 / 3;
    max-width: 82%;
    max-height: 56vw;
  }

  .main_rotateslider .hero-title {
    font-size: clamp(1.35rem, 6.6vw, 1.95rem);
  }

  .main_rotateslider .hero-lead {
    font-size: var(--fs-body);
    line-height: 1.65;
  }
}

@supports (container-type: inline-size) {
  @media (max-width: 768px) {
    .main_rotateslider .hero-title {
      font-size: clamp(1.35rem, 7.4cqw, 1.95rem);
    }
  }
}

/* ── 動きを減らす設定 ─────────────────────────────────────────────
   R-9。止めたときに「束」の構図が残るよう、静止状態を明示する
   （animation:none にすると素の opacity:0 のまま全部消えてしまうため）。 */
@media (prefers-reduced-motion: reduce) {
  .main_rotateslider .rotateslider_item {
    animation: none;
  }
  .main_rotateslider .rotateslider_item:nth-child(1) {
    opacity: 1;
    z-index: 3;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  .main_rotateslider .rotateslider_item:nth-child(2) {
    opacity: var(--mvrot-dim);
    z-index: 1;
    transform: translate(var(--mvrot-shift), calc(var(--mvrot-lift) * -1)) rotate(var(--mvrot-tilt)) scale(var(--mvrot-scale));
  }
  .main_rotateslider .rotateslider_item:nth-child(6) {
    opacity: var(--mvrot-dim);
    z-index: 2;
    transform: translate(calc(var(--mvrot-shift) * -1), calc(var(--mvrot-lift) * -1)) rotate(calc(var(--mvrot-tilt) * -1)) scale(var(--mvrot-scale));
  }
}