/* =========================================================
   MP Scroll Scenes v1.0 — MONOPAGE Studio
   設置場所：外観 > カスタマイズ > 追加CSS
   JS（mp-scroll.js）は「bodyタグ終了前」に設置
   ========================================================= */

/* 追従ヘッダーの高さ（JSが自動取得して上書きします）
   強制的に指定したい場合だけ下の行のコメントを外す */
:root {
  --mp-hd: 0px;
  /* --mp-header-offset: 0px; */
}

/* ---------------------------------------------------------
   初期値（:where で詳細度0。任意クラスで上書きできます）
   --------------------------------------------------------- */
:where(.mp-sv) {
  --mp-sv-length: 150vh;   /* 演出に使うスクロール距離 */
  --mp-sv-outside: transparent; /* 窓の外側の色 */
  --mp-win-w: 40%;         /* 窓の初期幅 */
  --mp-win-h: 50%;         /* 窓の初期高さ */
  --mp-win-gap: 8%;        /* 左寄せ・右寄せ時の端からの距離 */
  --mp-win-radius: 24px;   /* mp-win--round の角丸 */
  --mp-zoom-from: 1.2;     /* ズーム開始倍率 */
  --mp-zoom-to: 1;         /* ズーム終了倍率 */
  --mp-in-y: 40px;         /* mp-sv-in の移動量 */
}
:where(.mp-fade) {
  --mp-fade-length: 100vh; /* 1回の切り替えに使うスクロール距離 */
}
/* 背景画像なしのフルワイドの下地色（mp-fade / mp-stack 共通）
   初期値はページの背景色を自動取得。変えたい場合だけ指定
   例：.mp-set--plain { --mp-base-bg: #f7f7f7; } */
:where(.mp-split) {
  --mp-split-gap: 40px;    /* 固定カラムの上の余白 */
  --mp-switch-ratio: auto; /* 切り替え画像の比率 例: 4 / 3 */
  --mp-switch-fit: cover;  /* cover（切り抜き）/ contain（全体表示） */
  --mp-switch-align: center; /* 固定する画像の上下位置 center（中央）/ top（上） */
  --mp-step-h: 70vh;       /* 切り替え用テキスト1つ分の高さ */
  --mp-stack-img-gap: 20px;  /* 縦積み時：画像とその下のグループの間 */
  --mp-stack-pair-gap: 64px; /* 縦積み時：グループと次の画像の間 */
  /* スマホだけ変えたい場合は --mp-stack-img-gap-sp / --mp-stack-pair-gap-sp を指定 */
}
:where(.mp-spy) {
  --mp-spy-color: #b4462e; /* アクティブ時の色 */
  --mp-spy-base: inherit;  /* 通常時の色 */
  --mp-spy-dim: .55;       /* 通常時の薄さ（1で薄くしない） */
  --mp-spy-on: #fff;       /* mp-spy--pill のアクティブ時の文字色 */
  --mp-spy-line: 70%;      /* セクションの上端がこの高さ（画面の上から）まで来たらアクティブ */
}

/* =========================================================
   1. mp-sv（固定して進むフルワイド：窓・ズーム・出現）
   ========================================================= */
.mp-track {
  position: relative;
}
.swell-block-fullWide.mp-sv-ready {
  position: sticky;
  top: var(--mp-hd);
  min-height: calc(100vh - var(--mp-hd));
  min-height: calc(100svh - var(--mp-hd));
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background-image: none !important;
  background-color: var(--mp-sv-outside) !important;
  overflow: hidden;
  isolation: isolate;
}
.swell-block-fullWide.mp-sv-ready::before {
  display: none !important; /* SWELLの重ね色は .mp-bg__shade で再現 */
}
.mp-sv-ready > .swell-block-fullWide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.mp-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mp-bg__img,
.mp-bg__shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mp-bg__img {
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  will-change: transform;
}
.mp-bg--mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mp-sv-ready .mp-sv-in,
.mp-sv-ready .mp-sv-out {
  will-change: opacity, transform;
}

/* =========================================================
   2. mp-fade（フルワイドを背景ごとクロスフェードで入れ替え）
   ========================================================= */
.mp-fadeTrack {
  position: relative;
}
.mp-fadeStage {
  position: sticky;
  top: var(--mp-hd);
  height: calc(100vh - var(--mp-hd));
  height: calc(100svh - var(--mp-hd));
  overflow: hidden;
}
.swell-block-fullWide.mp-fade-ready {
  position: absolute !important;
  top: 0;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mp-fade-ready > .swell-block-fullWide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  will-change: opacity, transform;
}

/* 演出オフ（mp-fade--tb-off / mp-fade--sp-off）：通常のフルワイドとして縦に並べる */
.mp-fadeTrack.mp-fade-off .mp-fadeStage {
  position: static;
  height: auto;
  overflow: visible;
}
.mp-fadeTrack.mp-fade-off .swell-block-fullWide.mp-fade-ready {
  position: relative !important;
  height: auto;
}

/* 背景画像なしのフルワイド（JSが下地色を付けたもの） */
.swell-block-fullWide.mp-no-bg::before {
  display: none !important;
}

/* =========================================================
   3. mp-stack（下のフルワイドが上に重なっていく）
   ========================================================= */
.mp-stackTrack {
  position: relative;
}
.swell-block-fullWide.mp-stack-ready {
  position: sticky;
  top: var(--mp-hd);
  min-height: calc(100vh - var(--mp-hd));
  min-height: calc(100svh - var(--mp-hd));
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform-origin: 50% 0;
}
.mp-stack-ready > .swell-block-fullWide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.mp-stack__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   4. mp-split（リッチカラム：片側固定・画像切り替え）
   ========================================================= */
.mp-split__fixed {
  position: sticky;
  top: calc(var(--mp-hd) + var(--mp-split-gap));
  align-self: flex-start !important;
}

/* 画像切り替え */
.mp-switch {
  display: grid;
  place-items: center;
}
.mp-switch > figure,
.mp-switch > .wp-block-image {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0 !important;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .8s ease, transform 1.2s ease;
}
.mp-switch > .is-active {
  opacity: 1;
  transform: none;
}
.mp-switch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mp-switch-ratio);
  object-fit: var(--mp-switch-fit);
  max-height: calc(100vh - var(--mp-hd) - var(--mp-split-gap) * 2);
  max-height: calc(100svh - var(--mp-hd) - var(--mp-split-gap) * 2);
}
.mp-split--switch .mp-step {
  min-height: var(--mp-step-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .3;
  transition: opacity .5s ease;
}
.mp-split--switch .mp-step.is-active {
  opacity: 1;
}

/* タブレット（〜959px）：mp-split--tb-stack を付けたものだけ縦積み */
@media (max-width: 959px) {
  .mp-split--tb-stack > .swell-block-columns__inner {
    flex-direction: column;
  }
  /* SWELLの段組み用マイナスマージンを打ち消して、左右のずれをなくす */
  .mp-split--tb-stack > .swell-block-columns__inner {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-split--tb-stack > .swell-block-columns__inner > .swell-block-column {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-split--tb-stack .mp-split__fixed {
    position: relative;
    top: auto;
  }

  /* 画像切り替え：画像1 → グループ1 → 画像2 → グループ2…と交互に並べる（アニメーションなし） */
  .mp-split--tb-stack.mp-split--switch > .swell-block-columns__inner {
    gap: 0 !important;
  }
  .mp-split--tb-stack.mp-split--switch > .swell-block-columns__inner > .swell-block-column,
  .mp-split--tb-stack.mp-split--switch .mp-switch {
    display: contents;
  }
  .mp-split--tb-stack.mp-split--switch .mp-switch > figure,
  .mp-split--tb-stack.mp-split--switch .mp-switch > .wp-block-image {
    order: calc(var(--mp-i, 0) * 2 + 1);
    margin: var(--mp-stack-pair-gap) 0 0 !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mp-split--tb-stack.mp-split--switch .mp-switch > :first-child {
    margin-top: 0 !important;
  }
  .mp-split--tb-stack.mp-split--switch .mp-switch img {
    max-height: none;
  }
  .mp-split--tb-stack.mp-split--switch .mp-step {
    order: calc(var(--mp-i, 0) * 2 + 2);
    display: block;
    min-height: 0;
    margin: var(--mp-stack-img-gap) 0 0 !important;
    opacity: 1;
    transition: none;
  }
}

/* スマホ（〜599px）：すべて縦積み */
@media (max-width: 599px) {
  .mp-split > .swell-block-columns__inner {
    flex-direction: column;
  }
  /* SWELLの段組み用マイナスマージンを打ち消して、左右のずれをなくす */
  .mp-split > .swell-block-columns__inner {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-split > .swell-block-columns__inner > .swell-block-column {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-split .mp-split__fixed {
    position: relative;
    top: auto;
  }

  /* 画像切り替え：画像1 → グループ1 → 画像2 → グループ2…と交互に並べる（アニメーションなし） */
  .mp-split--switch > .swell-block-columns__inner {
    gap: 0 !important;
  }
  .mp-split--switch > .swell-block-columns__inner > .swell-block-column,
  .mp-split--switch .mp-switch {
    display: contents;
  }
  .mp-split--switch .mp-switch > figure,
  .mp-split--switch .mp-switch > .wp-block-image {
    order: calc(var(--mp-i, 0) * 2 + 1);
    margin: var(--mp-stack-pair-gap-sp, var(--mp-stack-pair-gap)) 0 0 !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mp-split--switch .mp-switch > :first-child {
    margin-top: 0 !important;
  }
  .mp-split--switch .mp-switch img {
    max-height: none;
  }
  .mp-split--switch .mp-step {
    order: calc(var(--mp-i, 0) * 2 + 2);
    display: block;
    min-height: 0;
    margin: var(--mp-stack-img-gap-sp, var(--mp-stack-img-gap)) 0 0 !important;
    opacity: 1;
    transition: none;
  }
}

/* =========================================================
   5. mp-spy（見ているセクションのリンクをアクティブに）
   mp-spy だけ：色だけ変わる
   見た目を足す：mp-spy--line / under / dot / bar / progress / num / marker / pill / slide
   ========================================================= */
.mp-spy ul,
ul.mp-spy {
  list-style: none !important;
  padding-left: 0 !important;
}
.mp-spy li {
  padding-left: 0 !important;
}
.mp-spy li::before {
  content: none !important;
  display: none !important;
}
.mp-spy a {
  position: relative;
  display: inline-block;
  padding: .35em 0;
  color: var(--mp-spy-base) !important;
  text-decoration: none !important;
  opacity: var(--mp-spy-dim);
  transition: color .3s ease, opacity .3s ease, background-color .35s ease, transform .4s ease;
}
.mp-spy a:hover {
  opacity: .85;
}
.mp-spy a.is-active {
  color: var(--mp-spy-color) !important;
  opacity: 1;
}

/* ライン：左の短い線が伸びる */
.mp-spy--line a {
  padding-left: 1.8em;
}
.mp-spy--line a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2em;
  height: 1px;
  background: currentColor;
  transform: scaleX(.35);
  transform-origin: left center;
  transition: transform .4s ease;
}
.mp-spy--line a.is-active::before {
  transform: scaleX(1);
}

/* 下線：下線が左から引かれる */
.mp-spy--under a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .15em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s ease;
}
.mp-spy--under a.is-active::after {
  transform: scaleX(1);
}

/* ドット：左に点が付く */
.mp-spy--dot a {
  padding-left: 1.2em;
}
.mp-spy--dot a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .3s ease, transform .3s ease;
}
.mp-spy--dot a.is-active::before {
  opacity: 1;
  transform: none;
}

/* バー：左に縦の細線が通り、アクティブ部分だけ太い色の線になる（目次の定番） */
.mp-spy--bar a,
.mp-spy--progress a {
  display: block;
  padding: .45em 0 .45em 1.3em;
}
.mp-spy--bar a::before,
.mp-spy--progress a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--mp-spy-base);
  opacity: .25;
}
.mp-spy--bar a::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--mp-spy-color);
  transform: scaleY(0);
  transition: transform .4s ease;
}
.mp-spy--bar a.is-active::after {
  transform: scaleY(1);
}

/* 進捗バー：読み進めた分だけ縦線が伸びる（読み終えた項目は満タン） */
.mp-spy--progress a::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--mp-spy-color);
  transform: scaleY(var(--mp-spy-p, 0));
  transform-origin: center top;
}
.mp-spy--progress a.is-active,
.mp-spy--progress a[style*="--mp-spy-p: 1"] {
  opacity: 1;
}

/* 番号：01 02 03 の番号が自動で付く */
.mp-spy--num {
  counter-reset: mpspy;
}
.mp-spy--num a {
  counter-increment: mpspy;
  padding-left: 2.6em;
}
.mp-spy--num a::before {
  content: counter(mpspy, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  font-size: .72em;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
.mp-spy--num a::after {
  content: "";
  position: absolute;
  left: 1.75em;
  top: 50%;
  width: .55em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.mp-spy--num a.is-active::after {
  transform: scaleX(1);
}

/* マーカー：蛍光ペンを引いたように下半分に色が入る */
.mp-spy--marker a {
  z-index: 0;
}
.mp-spy--marker a::after {
  content: "";
  position: absolute;
  left: -.2em;
  right: -.2em;
  bottom: .4em;
  height: .55em;
  z-index: -1;
  background: var(--mp-spy-color);
  opacity: .2;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s ease;
}
.mp-spy--marker a.is-active::after {
  transform: scaleX(1);
}

/* 塗り：角丸の背景が付き、文字が白抜きになる */
.mp-spy--pill a {
  padding: .3em 1em;
  border-radius: 999px;
}
.mp-spy--pill a.is-active {
  background-color: var(--mp-spy-color);
  color: var(--mp-spy-on) !important;
}

/* スライド：アクティブの項目が少し右へずれる（他の見た目と組み合わせ可） */
.mp-spy--slide a.is-active {
  transform: translateX(.7em);
}

@media (prefers-reduced-motion: reduce) {
  .mp-switch > figure,
  .mp-switch > .wp-block-image,
  .mp-spy a,
  .mp-spy a::before,
  .mp-spy a::after,
  .mp-spy--slide a.is-active {
    transition: none;
  }
}