/* ==========================================================
   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-r,
.mp-bleed-l {
  width: calc(100% + var(--mp-bleed, 0px)) !important;
  max-width: none !important;
}
.mp-bleed-r { margin-right: calc(var(--mp-bleed, 0px) * -1) !important; }
.mp-bleed-l { margin-left: calc(var(--mp-bleed, 0px) * -1) !important; }
.mp-bleed-r img,
.mp-bleed-l img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
}