/* ==========================================================
   MONOPAGE Layout Kit｜mp-lay v2.0
   SWELL「追加CSS」に一度だけ貼り付け（全サイト共通）
   各セクションの数値は .mp-lay--名前 で上書きする
   ブレイクポイント：PC 960px〜 / タブレット 〜959px / スマホ 〜599px
   ========================================================== */

/* ---------- 初期値 ---------- */
.mp-lay {
  --mp-text: 55;              /* テキストカラムの比率（2列時） */
  --mp-media: 45;             /* 画像カラムの比率（2列時） */
  --mp-align: center;         /* 縦の揃え（2列時） */
  --mp-stack-dir: column;     /* 縦積みの順番 column / column-reverse */
  --mp-stack-gap: 32px;       /* 縦積みの間隔 */
  --mp-text-y: 0px;           /* テキストの上下ずらし */
  --mp-media-y: 0px;          /* 画像の上下ずらし */
  --mp-media-ratio: auto;     /* メイン画像の縦横比 */
  --mp-main-w: 100%;          /* メイン画像の幅 */
  --mp-main-pos: 1;           /* メイン画像の寄せ 0=左 / 0.5=中央 / 1=右 */
  --mp-bleed-mode: none;      /* 画面端まで none / out / both（JSが読む） */
  --mp-sub-w: 46%;            /* サブ画像の幅 */
  --mp-sub-overlap: 120px;    /* サブ画像の重なり量 */
  --mp-sub-below: 1;          /* サブ画像の位置 1=メインの下 / 0=メインの上 */
  --mp-sub-order: 0;          /* 同上と対で使う 0=下 / -1=上 */
  --mp-sub-pos: 0;            /* サブ画像の寄せ 0=左 / 0.5=中央 / 1=右 */
  --mp-sub-x: 0px;            /* サブ画像の横ずらし */
  --mp-sub-ratio: auto;       /* サブ画像の縦横比 */
  --mp-sub-z: 2;              /* 2=サブが手前 / 0=サブが奥 */
  --mp-sub-border: 0px;       /* サブ画像の白フチ */
  --mp-sub-border-color: #fff;
  --mp-px-rate: 0.12;         /* パララックスの強さ */
  --mp-card-overlap: 80px;    /* カードの重なり量（2列時） */
  --mp-card-bg: #fff;
  --mp-card-pad: 48px;
  position: relative;
}

/* ---------- 2列：カラム比率と上下ずらし ---------- */
.mp-lay > .swell-block-columns__inner {
  flex-wrap: nowrap !important;
  align-items: var(--mp-align) !important;
}
.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(1),
.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
  flex: var(--mp-text) 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  translate: 0 var(--mp-text-y);
}
.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1) {
  flex: var(--mp-media) 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  translate: 0 var(--mp-media-y);
}

/* ---------- メイン画像（画像カラムの1枚目） ---------- */
:is(.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image {
  margin-top: 0 !important;
}
:is(.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image:first-of-type {
  position: relative;
  z-index: 1;
  width: calc(var(--mp-main-w) + var(--mp-bleed-l, 0px) + var(--mp-bleed-r, 0px)) !important;
  max-width: none !important;
  margin-bottom: 0 !important;
  margin-left: calc((100% - var(--mp-main-w)) * var(--mp-main-pos) - var(--mp-bleed-l, 0px)) !important;
  margin-right: calc((100% - var(--mp-main-w)) * (1 - var(--mp-main-pos)) - var(--mp-bleed-r, 0px)) !important;
}
:is(.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
}
:is(.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image:first-of-type img {
  aspect-ratio: var(--mp-media-ratio);
  object-fit: cover;
}

/* ---------- 2枚重ね（画像カラムの2枚目＝サブ画像） ---------- */
:is(.mp-lay-stack.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-stack.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image:nth-of-type(2) {
  position: relative;
  z-index: var(--mp-sub-z);
  order: var(--mp-sub-order);
  width: var(--mp-sub-w) !important;
  max-width: none !important;
  margin-top: calc(var(--mp-sub-overlap) * var(--mp-sub-below) * -1) !important;
  margin-bottom: calc(var(--mp-sub-overlap) * (var(--mp-sub-below) - 1)) !important;
  margin-left: calc((100% - var(--mp-sub-w)) * var(--mp-sub-pos)) !important;
  margin-right: 0 !important;
  translate: var(--mp-sub-x) var(--mp-px, 0px);
}
:is(.mp-lay-stack.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(2),
    .mp-lay-stack.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(1)) > figure.wp-block-image:nth-of-type(2) img {
  aspect-ratio: var(--mp-sub-ratio);
  object-fit: cover;
  box-sizing: border-box;
  border: var(--mp-sub-border) solid var(--mp-sub-border-color);
}

/* ---------- カード（テキストを画像に重ねる） ---------- */
.mp-lay-card.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(1),
.mp-lay-card.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  background: var(--mp-card-bg);
  padding: var(--mp-card-pad) !important;
}
.mp-lay-card.mp-lay-media-r > .swell-block-columns__inner > .swell-block-column:nth-child(1) {
  margin-right: calc(var(--mp-card-overlap) * -1) !important;
}
.mp-lay-card.mp-lay-media-l > .swell-block-columns__inner > .swell-block-column:nth-child(2) {
  margin-left: calc(var(--mp-card-overlap) * -1) !important;
}

/* ---------- 縦積み：タブレット（mp-lay-tb-1 を付けたとき） ---------- */
@media (max-width: 959px) {
  .mp-lay-tb-1 > .swell-block-columns__inner {
    flex-direction: var(--mp-stack-dir) !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--mp-stack-gap) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-lay-tb-1 > .swell-block-columns__inner > .swell-block-column:nth-child(n),
  .mp-lay-tb-1.mp-lay-card > .swell-block-columns__inner > .swell-block-column:nth-child(n) {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ---------- 縦積み：スマホ（常に1列） ---------- */
@media (max-width: 599px) {
  .mp-lay > .swell-block-columns__inner {
    flex-direction: var(--mp-stack-dir) !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--mp-stack-gap) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-lay > .swell-block-columns__inner > .swell-block-column:nth-child(n),
  .mp-lay.mp-lay-card > .swell-block-columns__inner > .swell-block-column:nth-child(n) {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ---------- 単体画像のはみ出し（どこの画像ブロックにも使える） ----------
   幅（--mp-bleed-w：はみ出した箱に対する%）を小さくすると、はみ出した側の反対に余白ができる
   上下ずらし（--mp-bleed-y）：スマホは指定がなければPCの半分 */
.mp-bleed-r,
.mp-bleed-l {
  --mp-bw: var(--mp-bleed-w, 100);
  --mp-by: var(--mp-bleed-y, 0px);
  width: calc((100% + var(--mp-bleed, 0px)) * var(--mp-bw) / 100) !important;
  max-width: none !important;
  translate: 0 var(--mp-by);
}
@media (max-width: 959px) {
  .mp-bleed-r,
  .mp-bleed-l { --mp-bw: var(--mp-bleed-w-tb, var(--mp-bleed-w, 100)); }
}
@media (max-width: 599px) {
  .mp-bleed-r,
  .mp-bleed-l {
    --mp-bw: var(--mp-bleed-w-sp, var(--mp-bleed-w-tb, var(--mp-bleed-w, 100)));
    --mp-by: var(--mp-bleed-y-sp, calc(var(--mp-bleed-y, 0px) * .5));
  }
}
.mp-bleed-r { margin-left: auto !important; margin-right: calc(var(--mp-bleed, 0px) * -1) !important; }
.mp-bleed-l { margin-left: calc(var(--mp-bleed, 0px) * -1) !important; margin-right: auto !important; }
.mp-bleed-r img,
.mp-bleed-l img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
}

/* ==========================================================
   MP 画像背景装飾（画像ブロック｜mp-deco）
   位置・大きさは画像に対する%なので、PC・タブレット・スマホで画像と一緒に縮む
   ========================================================== */
.wp-block-image.mp-deco {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.wp-block-image.mp-deco::before {
  content: "";
  position: absolute;
  left: var(--mp-deco-x, 12%);
  top: var(--mp-deco-y, 12%);
  width: var(--mp-deco-w, 100%);
  height: var(--mp-deco-h, 100%);
  z-index: -1;
  border-radius: var(--mp-deco-r, 0px);
  background: var(--mp-deco-c, #eef0f2);
  opacity: var(--mp-deco-o, 1);
  pointer-events: none;
}
.wp-block-image.mp-deco.mp-deco--front::before { z-index: 1; mix-blend-mode: multiply; }
@media (max-width: 599px) {
  .wp-block-image.mp-deco.mp-deco--sp-off::before { display: none; }
}

/* ==========================================================
   MP カラム（リッチカラムの中の1カラム・グループ｜mp-col）
   中身を中央に寄せ、最大幅と余白（clamp）を決める
   最大幅は余白を含む幅（以前の .column-center と同じ考え方）
   ========================================================== */
:is(.swell-block-column, .wp-block-group).mp-col {
  --mp-col-pad-v: var(--mp-col-pad, clamp(16px, 3vw, 40px));
  --mp-col-py: var(--mp-col-pad-y, var(--mp-col-pad-v));
  --mp-col-px: var(--mp-col-pad-x, var(--mp-col-pad-v));
  /* 中身の幅：最大幅から左右の余白を引いた幅（狭いカラムではカラムいっぱい） */
  --mp-col-inner: calc(var(--mp-col-max, 650px) - var(--mp-col-px) * 2);
  box-sizing: border-box;
  padding: var(--mp-col-py) var(--mp-col-px) !important;
}
.swell-block-column.mp-col { align-self: stretch !important; }
.swell-block-column.mp-col--v-none { align-self: auto !important; }
/* 上下の片側だけ */
:is(.swell-block-column, .wp-block-group).mp-col--py-top { padding-bottom: 0 !important; }
:is(.swell-block-column, .wp-block-group).mp-col--py-bottom { padding-top: 0 !important; }
/* 公開ページ：中身はプラグインが1つの箱（mp-col__in）で包む（v0.12.2）
   箱の幅と位置だけを決めるので、中のブロックの幅・寄せ・余白・文字の寄せは変わらない */
:is(.swell-block-column, .wp-block-group).mp-col:has(> .mp-col__in) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mp-col > .mp-col__in {
  width: 100%;
  max-width: var(--mp-col-inner);
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
}
.mp-col.mp-col--full > .mp-col__in { max-width: none; }
/* グループの中の箱（古い形式のグループ）は無いものとして扱う */
.wp-block-group.mp-col > .mp-col__in > .wp-block-group__inner-container { width: auto; max-width: none; margin: 0; }
.mp-col--v-top { justify-content: flex-start !important; }
.mp-col--v-bottom { justify-content: flex-end !important; }
.mp-col--h-left { align-items: flex-start !important; }
.mp-col--h-right { align-items: flex-end !important; }

/* ==========================================================
   MP リッチ（リッチカラム｜mp-rich-*）
   ========================================================== */
/* 縦に並んだとき、下のカラムから積み上げる（右カラムの画像を上に） */
@media (max-width: 959px) {
  .mp-rich-rev--tb > .swell-block-columns__inner { flex-wrap: wrap-reverse !important; }
}
@media (max-width: 599px) {
  .mp-rich-rev--sp > .swell-block-columns__inner { flex-wrap: wrap-reverse !important; }
}
/* 横並びのとき、画像のカラムを高さいっぱいに広げる（上下の余白をなくす） */
@media (min-width: 960px) {
  /* カラムの高さを、いちばん高いカラム（テキスト側）にそろえる */
  .mp-rich-fill--pc > .swell-block-columns__inner { align-items: stretch !important; }
  /* 画像が入っているカラムを縦並びにして、画像の枠を伸ばせるようにする */
  .mp-rich-fill--pc > .swell-block-columns__inner > .swell-block-column:has(> .wp-block-image) {
    display: flex;
    flex-direction: column;
    align-self: stretch !important;
  }
  /* 画像の枠：残りの高さいっぱいまで伸ばす */
  .mp-rich-fill--pc > .swell-block-columns__inner > .swell-block-column > .wp-block-image {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--mp-fill-min, 320px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* 画像：枠いっぱいに敷き詰める（縦横比は保ち、はみ出た分を切り抜く） */
  .mp-rich-fill--pc > .swell-block-columns__inner > .swell-block-column > .wp-block-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: var(--mp-fill-pos, 50% 50%);
  }
}
@media (min-width: 600px) {
  /* カラムの高さを、いちばん高いカラム（テキスト側）にそろえる */
  .mp-rich-fill--tb > .swell-block-columns__inner { align-items: stretch !important; }
  /* 画像が入っているカラムを縦並びにして、画像の枠を伸ばせるようにする */
  .mp-rich-fill--tb > .swell-block-columns__inner > .swell-block-column:has(> .wp-block-image) {
    display: flex;
    flex-direction: column;
    align-self: stretch !important;
  }
  /* 画像の枠：残りの高さいっぱいまで伸ばす */
  .mp-rich-fill--tb > .swell-block-columns__inner > .swell-block-column > .wp-block-image {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--mp-fill-min, 320px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* 画像：枠いっぱいに敷き詰める（縦横比は保ち、はみ出た分を切り抜く） */
  .mp-rich-fill--tb > .swell-block-columns__inner > .swell-block-column > .wp-block-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: var(--mp-fill-pos, 50% 50%);
  }
}