/* ==========================================================
   MP Card Core v1.0（SWELLリッチカラム用カードの共通処理）
   追加CSSクラス：mpc ＋ パターン名（例：mpc mpc-lift）
   オプション　　：mpc-scroll    タッチ端末は画面中央のカードだけ動く
   　　　　　　　　mpc-scroll-pc PCもホバーではなく画面中央で動く
   　　　　　　　　mpc-static    動きを止める
   ※ リッチカラムのスタイルは「デフォルト」のまま使用
   ※ 各パターンのCSSは、このコアの後ろに貼る
   ========================================================== */
@property --mpc-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* 色・形の初期値（:where なので、色替え用クラスで簡単に上書きできる） */
:where(.mpc) {
  --mpc-accent: #2f5bd3;
  --mpc-ink: #1d2128;
  --mpc-sub: #5f6672;
  --mpc-bg: #ffffff;
  --mpc-line: #e2e5ea;
  --mpc-radius: 12px;
  --mpc-pad: 1.5em;
  --mpc-gap-x: var(--swl-clmn-mrgn--x, 1.5rem);
  --mpc-gap-y: var(--swl-clmn-mrgn--y, 1.5rem);
  --mpc-d: .55s;
  --mpc-e: cubic-bezier(.2, .8, .2, 1);
}

.mpc > .swell-block-columns__inner > .swell-block-column {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  color: var(--mpc-ink);
}
.mpc > .swell-block-columns__inner > .swell-block-column > * {
  margin: 0;
  translate: calc(var(--mpc-p) * var(--mpc-lift-x, 0px)) calc(var(--mpc-p) * var(--mpc-lift, 0px));
  transition-property: translate, scale, rotate, opacity, color, background-color, border-color, box-shadow, filter, clip-path, border-radius, letter-spacing, max-height, text-decoration-color;
  transition-duration: var(--mpc-d);
  transition-timing-function: var(--mpc-e);
}
.mpc > .swell-block-columns__inner > .swell-block-column::before,
.mpc > .swell-block-columns__inner > .swell-block-column::after {
  transition-property: translate, scale, rotate, opacity, color, background-color, background-size, border-color, box-shadow, width, height, clip-path;
  transition-duration: var(--mpc-d);
  transition-timing-function: var(--mpc-e);
}
.mpc > .swell-block-columns__inner > .swell-block-column > * + * {
  margin-top: .6em;
}

/* SWELLの見出し装飾をカード内だけリセット */
.mpc > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 1.12em;
  line-height: 1.5;
  color: inherit;
}
.mpc > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4)::before,
.mpc > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4)::after {
  content: none !important;
  display: none !important;
}
.mpc > .swell-block-columns__inner > .swell-block-column > p {
  font-size: .92em;
  line-height: 1.85;
  color: var(--mpc-sub);
}
.mpc > .swell-block-columns__inner > .swell-block-column > figure {
  display: block;
  overflow: hidden;
  margin: 0;
}
.mpc > .swell-block-columns__inner > .swell-block-column > figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .9s var(--mpc-e), filter .7s var(--mpc-e);
}
/* ボタンはカードの下端にそろえる */
.mpc > .swell-block-columns__inner > .swell-block-column > :is(.swell-block-button, .wp-block-buttons) {
  margin-top: auto;
  padding-top: 1em;
}

/* 動き：PC（ホバーできる端末） */
@media (hover: hover) {
  .mpc:not(.mpc-static):not(.mpc-scroll-pc) > .swell-block-columns__inner > .swell-block-column:hover {
    --mpc-p: 1;
  }
}

/* 動き：画面中央付近にあるカードだけ発火（JS不要） */
@keyframes mpc-center {
  0%, 32% { --mpc-p: 0; }
  42%, 58% { --mpc-p: 1; }
  68%, 100% { --mpc-p: 0; }
}
@supports (animation-timeline: view()) {
  @media (hover: none) {
    .mpc-scroll:not(.mpc-static) > .swell-block-columns__inner > .swell-block-column {
      animation: mpc-center linear both;
      animation-timeline: view();
    }
  }
  .mpc-scroll-pc:not(.mpc-static) > .swell-block-columns__inner > .swell-block-column {
    animation: mpc-center linear both;
    animation-timeline: view();
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpc > .swell-block-columns__inner > .swell-block-column,
  .mpc > .swell-block-columns__inner > .swell-block-column *,
  .mpc > .swell-block-columns__inner > .swell-block-column::before,
  .mpc > .swell-block-columns__inner > .swell-block-column::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   mpc-lift｜浮き上がり
   追加CSSクラス：mpc mpc-lift（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落 → ボタン（任意）
   ========================================================== */
:where(.mpc-lift) {
  --mpc-lift: -6px;
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  margin: calc(var(--mpc-pad) * -1) calc(var(--mpc-pad) * -1) calc(var(--mpc-pad) * .7);
  border-radius: var(--mpc-radius) var(--mpc-radius) 0 0;
  aspect-ratio: 4 / 3;
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
  box-shadow: 0 2px 6px rgb(20 28 40 / .05);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  border-radius: var(--mpc-radius);
  box-shadow: 0 26px 50px -14px rgb(20 28 40 / .3);
  opacity: var(--mpc-p);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-lift > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .04);
}

/* ==========================================================
   mpc-zoom｜画像ズーム＋下線
   追加CSSクラス：mpc mpc-zoom（＋ mpc-scroll など）
   中身：画像（縦長推奨）→ 見出し → 段落
   ========================================================== */
:where(.mpc-zoom) {
  --mpc-radius: 6px;
}
.mpc-zoom > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  aspect-ratio: 4 / 5;
  border-radius: var(--mpc-radius);
  margin-bottom: .5em;
}
.mpc-zoom > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .08);
}
.mpc-zoom > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  text-decoration-color: color-mix(in srgb, currentColor calc(var(--mpc-p) * 100%), transparent);
  letter-spacing: calc(.04em + var(--mpc-p) * .04em);
}

/* ==========================================================
   mpc-overlay｜画像全面＋文字オーバーレイ
   追加CSSクラス：mpc mpc-overlay（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落（短め）
   ========================================================== */
:where(.mpc-overlay) {
  --mpc-radius: 10px;
  --mpc-ink: #ffffff;
  --mpc-sub: rgb(255 255 255 / .86);
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
  justify-content: flex-end;
  min-height: 20em;
  overflow: hidden;
  border-radius: var(--mpc-radius);
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -3;
  margin: 0;
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .06);
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: linear-gradient(to top, rgb(12 14 20 / .8), rgb(12 14 20 / 0) 60%);
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgb(12 14 20 / .4);
  opacity: var(--mpc-p);
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column > figure + * {
  margin-top: 0;
}
.mpc-overlay > .swell-block-columns__inner > .swell-block-column > p {
  max-height: calc(var(--mpc-p) * 8em);
  opacity: var(--mpc-p);
  overflow: hidden;
}
/* タッチ端末で mpc-scroll なしの場合は、文字を最初から表示 */
@media (hover: none) {
  .mpc-overlay:not(.mpc-scroll) > .swell-block-columns__inner > .swell-block-column {
    --mpc-p: 1;
  }
}

/* ==========================================================
   mpc-reveal｜マスクが開く
   追加CSSクラス：mpc mpc-reveal（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
.mpc-reveal > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  aspect-ratio: 3 / 2;
  margin-bottom: .6em;
  clip-path: inset(calc((1 - var(--mpc-p)) * 5%) round calc(var(--mpc-radius) * 1.5));
}
.mpc-reveal > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1.08 - var(--mpc-p) * .08);
}
.mpc-reveal > .swell-block-columns__inner > .swell-block-column > p {
  border-top: 1px solid var(--mpc-line);
  padding-top: .7em;
}

/* ==========================================================
   mpc-duotone｜モノクロ→カラー
   追加CSSクラス：mpc mpc-duotone（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
.mpc-duotone > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: .7em;
}
.mpc-duotone > .swell-block-columns__inner > .swell-block-column > figure img {
  filter: grayscale(calc(1 - var(--mpc-p)));
  scale: calc(1 + var(--mpc-p) * .03);
}
.mpc-duotone > .swell-block-columns__inner > .swell-block-column > figure::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--mpc-p) * 100%);
  background: var(--mpc-accent);
  transition: width var(--mpc-d) var(--mpc-e);
}
.mpc-duotone > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-ink));
}

/* ==========================================================
   mpc-arch｜アーチ型フレーム
   追加CSSクラス：mpc mpc-arch（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落（中央揃えになります）
   ========================================================== */
:where(.mpc-arch) {
  --mpc-accent: #b08a6e;
}
.mpc-arch > .swell-block-columns__inner > .swell-block-column {
  align-items: center;
  text-align: center;
  padding-top: 12px;
}
.mpc-arch > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  width: 80%;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 8px 8px;
  margin-bottom: .9em;
}
.mpc-arch > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1.06 - var(--mpc-p) * .06);
}
.mpc-arch > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  aspect-ratio: 3 / 4;
  z-index: -1;
  border: 1px solid var(--mpc-accent);
  border-radius: 999px 999px 8px 8px;
  translate: calc(10px - var(--mpc-p) * 10px) calc(var(--mpc-p) * 12px);
}
.mpc-arch > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  letter-spacing: .1em;
}

/* ==========================================================
   mpc-polaroid｜ポラロイド写真
   追加CSSクラス：mpc mpc-polaroid（＋ mpc-scroll など）
   中身：画像（正方形推奨）→ 見出し → 段落
   ========================================================== */
/* ※ カラム本体を回転させるため、mp-stagger とは併用不可 */
:where(.mpc-polaroid) {
  --mpc-bg: #ffffff;
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column {
  padding: .75em .75em 1.2em;
  rotate: calc((1 - var(--mpc-p)) * var(--mpc-rot, -2deg));
  transition: rotate var(--mpc-d) var(--mpc-e);
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column:nth-child(even) {
  --mpc-rot: 2.2deg;
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column:nth-child(3n) {
  --mpc-rot: -1deg;
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--mpc-bg);
  border-radius: 3px;
  box-shadow: 0 calc(6px + var(--mpc-p) * 12px) calc(16px + var(--mpc-p) * 16px) rgb(40 30 20 / .16);
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 72px;
  height: 22px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgb(255 226 130 / .75);
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  aspect-ratio: 1;
  margin-bottom: .8em;
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4),
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column > p {
  text-align: center;
}
.mpc-polaroid > .swell-block-columns__inner > .swell-block-column > p {
  font-size: .86em;
}

/* ==========================================================
   mpc-split｜横型（画像左・文字右）
   追加CSSクラス：mpc mpc-split（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
.mpc-split > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-split > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-split > .swell-block-columns__inner > .swell-block-column {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 1.1em;
  align-content: start;
  container-type: inline-size;
  padding: 1em;
}
.mpc-split > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
}
.mpc-split > .swell-block-columns__inner > .swell-block-column > * {
  grid-column: 2;
}
.mpc-split > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  aspect-ratio: 1;
  border-radius: calc(var(--mpc-radius) * .7);
}
.mpc-split > .swell-block-columns__inner > .swell-block-column > figure + * {
  margin-top: 0;
}
.mpc-split > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .06);
}
.mpc-split > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  font-size: 1.02em;
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-ink));
}
/* カードの幅が狭いときは縦型に */
@container (max-width: 380px) {
  .mpc-split > .swell-block-columns__inner > .swell-block-column > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .mpc-split > .swell-block-columns__inner > .swell-block-column > figure:first-child {
    aspect-ratio: 16 / 9;
    margin-bottom: .6em;
  }
}

/* ==========================================================
   mpc-offset｜ずらしブロック
   追加CSSクラス：mpc mpc-offset（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
:where(.mpc-offset) {
  --mpc-radius: 0px;
  --mpc-accent: #ff6a3d;
  --mpc-lift: 4px;
  --mpc-lift-x: 4px;
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  margin: calc(var(--mpc-pad) * -1) calc(var(--mpc-pad) * -1) calc(var(--mpc-pad) * .7);
  border-radius: var(--mpc-radius) var(--mpc-radius) 0 0;
  aspect-ratio: 4 / 3;
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column::before {
  border: 1.5px solid var(--mpc-ink);
  translate: calc(var(--mpc-p) * 4px) calc(var(--mpc-p) * 4px);
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: var(--mpc-accent);
  translate: 10px 10px;
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  margin: calc(var(--mpc-pad) * -1 + 1.5px) calc(var(--mpc-pad) * -1 + 1.5px) calc(var(--mpc-pad) * .7);
  border-bottom: 1.5px solid var(--mpc-ink);
}
.mpc-offset > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .05);
}

/* ==========================================================
   mpc-frame｜内枠フレーム
   追加CSSクラス：mpc mpc-frame（＋ mpc-scroll など）
   中身：画像（縦長推奨）→ 見出し → 段落（中央揃え）
   ========================================================== */
:where(.mpc-frame) {
  --mpc-accent: #b89b67;
  --mpc-bg: #fbf9f5;
  --mpc-radius: 0px;
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column {
  padding: 1.25em 1.25em 1.9em;
  text-align: center;
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.1em;
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .05);
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--mpc-accent);
  opacity: calc(.3 + var(--mpc-p) * .7);
  scale: calc(.985 + var(--mpc-p) * .015);
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  letter-spacing: .14em;
  font-weight: 500;
}
.mpc-frame > .swell-block-columns__inner > .swell-block-column > p {
  font-size: .86em;
}

/* ==========================================================
   mpc-stack｜重なる紙
   追加CSSクラス：mpc mpc-stack（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
:where(.mpc-stack) {
  --mpc-lift: -4px;
}
.mpc-stack > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-stack > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-stack > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
  box-shadow: 0 1px 3px rgb(0 0 0 / .05);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-stack > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: var(--mpc-bg);
  border: 1px solid var(--mpc-line);
  border-radius: var(--mpc-radius);
  box-shadow: 0 6px 16px rgb(0 0 0 / .06);
  rotate: calc(1.5deg + var(--mpc-p) * 2.5deg);
  translate: calc(var(--mpc-p) * 8px) calc(var(--mpc-p) * 4px);
}
.mpc-stack > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--mpc-radius) * .6);
  margin-bottom: .7em;
}

/* ==========================================================
   mpc-fill｜背景が満ちる
   追加CSSクラス：mpc mpc-fill（＋ mpc-scroll など）
   中身：アイコン画像（単色SVG推奨・任意）→ 見出し → 段落
   ========================================================== */
:where(.mpc-fill) {
  --mpc-accent: #1f4fbf;
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column {
  padding: calc(var(--mpc-pad) * 1.2) var(--mpc-pad);
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-accent);
  clip-path: inset(calc((1 - var(--mpc-p)) * 100%) 0 0 0 round var(--mpc-radius));
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column > * {
  color: color-mix(in srgb, #ffffff calc(var(--mpc-p) * 100%), var(--mpc-ink));
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column > p {
  color: color-mix(in srgb, rgb(255 255 255 / .86) calc(var(--mpc-p) * 100%), var(--mpc-sub));
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  width: 2.8em;
  height: 2.8em;
  margin-bottom: .5em;
}
.mpc-fill > .swell-block-columns__inner > .swell-block-column > figure img {
  object-fit: contain;
  filter: brightness(calc(1 - var(--mpc-p))) invert(var(--mpc-p));
}

/* ==========================================================
   mpc-accent｜上部アクセントバー
   追加CSSクラス：mpc mpc-accent（＋ mpc-scroll など）
   中身：見出し → 段落
   ========================================================== */
:where(.mpc-accent) {
  --mpc-radius: 4px;
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column {
  padding-top: calc(var(--mpc-pad) * 1.3);
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
  box-shadow: 0 calc(var(--mpc-p) * 14px) calc(var(--mpc-p) * 30px) rgb(20 30 60 / calc(var(--mpc-p) * .12));
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: calc(32px + var(--mpc-p) * (100% - 32px));
  background: var(--mpc-accent);
  border-radius: var(--mpc-radius) 0 0 0;
}
.mpc-accent > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-ink));
}

/* ==========================================================
   mpc-draw｜線が描かれる
   追加CSSクラス：mpc mpc-draw（＋ mpc-scroll など）
   中身：見出し → 段落
   ========================================================== */
:where(.mpc-draw) {
  --mpc-radius: 0px;
  --mpc-accent: #111111;
}
.mpc-draw > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
  box-shadow: inset 0 0 0 1px var(--mpc-line);
}
.mpc-draw > .swell-block-columns__inner > .swell-block-column::before,
.mpc-draw > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.mpc-draw > .swell-block-columns__inner > .swell-block-column::before {
  border-top: 2px solid var(--mpc-accent);
  border-bottom: 2px solid var(--mpc-accent);
  transform-origin: left center;
  scale: var(--mpc-p) 1;
}
.mpc-draw > .swell-block-columns__inner > .swell-block-column::after {
  border-left: 2px solid var(--mpc-accent);
  border-right: 2px solid var(--mpc-accent);
  transform-origin: center top;
  scale: 1 var(--mpc-p);
}

/* ==========================================================
   mpc-number｜自動番号（背面）
   追加CSSクラス：mpc mpc-number（＋ mpc-scroll など）
   中身：見出し → 段落
   ========================================================== */
.mpc-number > .swell-block-columns__inner {
  counter-reset: mpc-num;
}
.mpc-number > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-number > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-number > .swell-block-columns__inner > .swell-block-column {
  counter-increment: mpc-num;
  padding-top: calc(var(--mpc-pad) * 2.6);
}
.mpc-number > .swell-block-columns__inner > .swell-block-column::after {
  content: counter(mpc-num, decimal-leading-zero);
  position: absolute;
  top: .15em;
  right: .35em;
  z-index: -1;
  font-size: 4.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 18%), transparent);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--mpc-accent) 40%, transparent);
  translate: 0 calc(var(--mpc-p) * -6px);
}

/* ==========================================================
   mpc-icon｜円アイコンが塗られる
   追加CSSクラス：mpc mpc-icon（＋ mpc-scroll など）
   中身：アイコン画像（単色SVG推奨）→ 見出し → 段落（中央揃え）
   ========================================================== */
:where(.mpc-icon) {
  --mpc-accent: #4f8a3c;
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column {
  align-items: center;
  text-align: center;
  padding-top: calc(var(--mpc-pad) * 1.4);
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column::before {
  box-shadow: 0 calc(var(--mpc-p) * 12px) calc(var(--mpc-p) * 28px) rgb(20 40 30 / calc(var(--mpc-p) * .1));
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  width: 4.6em;
  height: 4.6em;
  padding: 1.15em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mpc-accent) calc(12% + var(--mpc-p) * 88%), transparent);
  margin-bottom: .9em;
  rotate: calc(var(--mpc-p) * -6deg);
}
.mpc-icon > .swell-block-columns__inner > .swell-block-column > figure img {
  object-fit: contain;
  filter: brightness(calc(1 - var(--mpc-p))) invert(var(--mpc-p));
}

/* ==========================================================
   mpc-corner｜L字の角飾り
   追加CSSクラス：mpc mpc-corner（＋ mpc-scroll など）
   中身：見出し → 段落（中央揃え）
   ========================================================== */
:where(.mpc-corner) {
  --mpc-accent: #9b2d20;
}
.mpc-corner > .swell-block-columns__inner > .swell-block-column {
  padding: 1.9em 1.7em;
  text-align: center;
}
.mpc-corner > .swell-block-columns__inner > .swell-block-column::before,
.mpc-corner > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  width: calc(26px + var(--mpc-p) * (100% - 26px));
  height: calc(26px + var(--mpc-p) * (100% - 26px));
  pointer-events: none;
}
.mpc-corner > .swell-block-columns__inner > .swell-block-column::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--mpc-accent);
  border-left: 1px solid var(--mpc-accent);
}
.mpc-corner > .swell-block-columns__inner > .swell-block-column::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--mpc-accent);
  border-right: 1px solid var(--mpc-accent);
}
.mpc-corner > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  letter-spacing: .16em;
}

/* ==========================================================
   mpc-sticker｜ステッカー（押し込み）
   追加CSSクラス：mpc mpc-sticker（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落
   ========================================================== */
:where(.mpc-sticker) {
  --mpc-radius: 16px;
  --mpc-ink: #2a2016;
  --mpc-sub: #4d4236;
  --mpc-lift: 4px;
  --mpc-lift-x: 4px;
}
.mpc-sticker > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-sticker > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-sticker > .swell-block-columns__inner > .swell-block-column:nth-child(4n+1) { --mpc-bg: #fff3c4; }
.mpc-sticker > .swell-block-columns__inner > .swell-block-column:nth-child(4n+2) { --mpc-bg: #dff4ea; }
.mpc-sticker > .swell-block-columns__inner > .swell-block-column:nth-child(4n+3) { --mpc-bg: #ffe3dc; }
.mpc-sticker > .swell-block-columns__inner > .swell-block-column:nth-child(4n) { --mpc-bg: #e3ecff; }
.mpc-sticker > .swell-block-columns__inner > .swell-block-column::before {
  border: 2.5px solid var(--mpc-ink);
  box-shadow: calc(6px - var(--mpc-p) * 6px) calc(6px - var(--mpc-p) * 6px) 0 var(--mpc-ink);
  translate: calc(var(--mpc-p) * 4px) calc(var(--mpc-p) * 4px);
}
.mpc-sticker > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  margin: calc(var(--mpc-pad) * -1 + 2.5px) calc(var(--mpc-pad) * -1 + 2.5px) calc(var(--mpc-pad) * .7);
  border-bottom: 2.5px solid var(--mpc-ink);
  border-radius: calc(var(--mpc-radius) - 2.5px) calc(var(--mpc-radius) - 2.5px) 0 0;
  aspect-ratio: 4 / 3;
}
.mpc-sticker > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  font-weight: 800;
}

/* ==========================================================
   mpc-glass｜グラス（すりガラス）
   追加CSSクラス：mpc mpc-glass（＋ mpc-scroll など）
   中身：アイコン画像（任意）→ 見出し → 段落　※背景に色や画像があるセクションで使用
   ========================================================== */
:where(.mpc-glass) {
  --mpc-ink: #1b1830;
  --mpc-sub: #4a4566;
  --mpc-radius: 18px;
  --mpc-lift: -4px;
}
.mpc-glass > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-glass > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-glass > .swell-block-columns__inner > .swell-block-column::before {
  background: rgb(255 255 255 / calc(.42 + var(--mpc-p) * .2));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 10px 30px rgb(60 50 140 / calc(.08 + var(--mpc-p) * .12)), inset 0 1px 0 rgb(255 255 255 / .8);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-glass > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  width: 2.6em;
  height: 2.6em;
  margin-bottom: .5em;
}
.mpc-glass > .swell-block-columns__inner > .swell-block-column > figure img {
  object-fit: contain;
}

/* ==========================================================
   mpc-glow｜光るグラデーション枠
   追加CSSクラス：mpc mpc-glow（＋ mpc-scroll など）
   中身：見出し → 段落　※暗い背景のセクションで使用
   ========================================================== */
:where(.mpc-glow) {
  --mpc-bg: #15161d;
  --mpc-ink: #f1f2f6;
  --mpc-sub: #a3a7b8;
  --mpc-accent: #7c5cff;
  --mpc-accent2: #00d1ff;
  --mpc-radius: 14px;
}
.mpc-glow > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-glow > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-glow > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid rgb(255 255 255 / .08);
  box-shadow: 0 0 calc(var(--mpc-p) * 40px) rgb(124 92 255 / calc(var(--mpc-p) * .35));
}
.mpc-glow > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: var(--mpc-radius);
  background: conic-gradient(from calc(var(--mpc-p) * 300deg - 60deg), var(--mpc-accent), var(--mpc-accent2), transparent 35%, transparent 65%, var(--mpc-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.25 + var(--mpc-p) * .75);
  transition: --mpc-p 1.2s var(--mpc-e), opacity var(--mpc-d) var(--mpc-e);
}

/* ==========================================================
   mpc-line｜罫線リスト
   追加CSSクラス：mpc mpc-line（＋ mpc-scroll など）
   中身：段落（日付・カテゴリ）→ 見出し → 段落
   ========================================================== */
:where(.mpc-line) {
  --mpc-accent: #111111;
}
.mpc-line > .swell-block-columns__inner > .swell-block-column {
  padding: 1.3em 2.4em 1.4em 0;
}
.mpc-line > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(var(--mpc-accent), var(--mpc-accent)) 0 0 / calc(var(--mpc-p) * 100%) 100% no-repeat, var(--mpc-line);
}
.mpc-line > .swell-block-columns__inner > .swell-block-column::after {
  content: "→";
  position: absolute;
  top: 1.15em;
  right: .3em;
  font-size: 1.2em;
  line-height: 1;
  color: var(--mpc-accent);
  translate: calc(var(--mpc-p) * 6px) 0;
}
.mpc-line > .swell-block-columns__inner > .swell-block-column > p:first-child {
  font-size: .78em;
  letter-spacing: .06em;
}
.mpc-line > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  font-size: 1.05em;
}

/* ==========================================================
   mpc-flow｜ステップ（矢印自動）
   追加CSSクラス：mpc mpc-flow（＋ mpc-scroll など）
   中身：見出し → 段落（中央揃え・番号は自動）
   ========================================================== */
:where(.mpc-flow) {
  --mpc-bg: #f2f6fc;
  --mpc-accent: #2f6fde;
}
.mpc-flow > .swell-block-columns__inner {
  counter-reset: mpc-step;
}
.mpc-flow > .swell-block-columns__inner > .swell-block-column {
  counter-increment: mpc-step;
  padding: var(--mpc-pad);
  background: var(--mpc-bg);
  border-radius: var(--mpc-radius);
  align-items: center;
  text-align: center;
}
.mpc-flow > .swell-block-columns__inner > .swell-block-column::before {
  content: counter(mpc-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  margin-bottom: .9em;
  border-radius: 50%;
  font-weight: 700;
  font-size: .95em;
  color: #ffffff;
  background: var(--mpc-accent);
  box-shadow: 0 0 0 calc(var(--mpc-p) * 7px) color-mix(in srgb, var(--mpc-accent) 18%, transparent);
  scale: calc(1 + var(--mpc-p) * .08);
}
/* 矢印（初期は非表示。下の自動判定で表示） */
.mpc-flow > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 12px;
  height: 18px;
  background: var(--mpc-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: calc(5px + var(--mpc-p) * 3px) -50%;
}
/* 横並び・縦並びの自動判定
   SWELLのカラム幅（--clmn-w--pc / tab / mobile）を読み取り、
   1列なら縦向き、複数列なら横向き（行の最後のカードは非表示） */
@media (max-width: 599px) {
  @container style(--clmn-w--mobile: 100%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: 100%;
      left: 50%;
      width: 18px;
      height: 12px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      translate: -50% calc(5px + var(--mpc-p) * 3px);
    }
  }
  @container style(--clmn-w--mobile: 50%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--mobile: 33.33%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  @container style(--clmn-w--tab: 100%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: 100%;
      left: 50%;
      width: 18px;
      height: 12px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      translate: -50% calc(5px + var(--mpc-p) * 3px);
    }
  }
  @container style(--clmn-w--tab: 50%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--tab: 33.33%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--tab: 25%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(4n)):not(:last-child)::after {
      display: block;
    }
  }
}
@media (min-width: 960px) {
  @container style(--clmn-w--pc: 100%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: 100%;
      left: 50%;
      width: 18px;
      height: 12px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      translate: -50% calc(5px + var(--mpc-p) * 3px);
    }
  }
  @container style(--clmn-w--pc: 50%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 33.33%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 25%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(4n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 20%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(5n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 16.66%) {
    .mpc-flow > .swell-block-columns__inner > .swell-block-column:not(:nth-child(6n)):not(:last-child)::after {
      display: block;
    }
  }
}

/* ==========================================================
   mpc-timeline｜沿革タイムライン（線自動）
   追加CSSクラス：mpc mpc-timeline（＋ mpc-scroll など）
   中身：見出し（年号）→ 段落
   ========================================================== */
:where(.mpc-timeline) {
  --mpc-accent: #c2410c;
  --mpc-bg: #ffffff;
}
.mpc-timeline > .swell-block-columns__inner > .swell-block-column {
  padding: 2.1em 1.2em 0 0;
}
.mpc-timeline > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: .35em;
  left: 0;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--mpc-accent);
  background-color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-bg));
  scale: calc(1 + var(--mpc-p) * .25);
  box-shadow: 0 0 0 calc(var(--mpc-p) * 6px) color-mix(in srgb, var(--mpc-accent) 16%, transparent);
}
/* 線（初期は非表示。下の自動判定で表示） */
.mpc-timeline > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  display: none;
  position: absolute;
  top: calc(.35em + 6px);
  left: 0;
  right: calc(var(--mpc-gap-x) * -1);
  height: 1px;
  background: color-mix(in srgb, var(--mpc-accent) 35%, transparent);
}
.mpc-timeline > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-ink));
}
/* 横並び・縦並びの自動判定
   SWELLのカラム幅（--clmn-w--pc / tab / mobile）を読み取り、
   1列なら縦向き、複数列なら横向き（行の最後のカードは非表示） */
@media (max-width: 599px) {
  @container style(--clmn-w--mobile: 100%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column {
      padding: 0 0 0 2em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column::before {
      top: .55em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: calc(.55em + 6px);
      left: 6px;
      right: auto;
      width: 1px;
      height: auto;
      bottom: calc((var(--mpc-gap-y) + .55em + 6px) * -1);
    }
  }
  @container style(--clmn-w--mobile: 50%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--mobile: 33.33%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  @container style(--clmn-w--tab: 100%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column {
      padding: 0 0 0 2em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column::before {
      top: .55em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: calc(.55em + 6px);
      left: 6px;
      right: auto;
      width: 1px;
      height: auto;
      bottom: calc((var(--mpc-gap-y) + .55em + 6px) * -1);
    }
  }
  @container style(--clmn-w--tab: 50%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--tab: 33.33%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--tab: 25%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(4n)):not(:last-child)::after {
      display: block;
    }
  }
}
@media (min-width: 960px) {
  @container style(--clmn-w--pc: 100%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column {
      padding: 0 0 0 2em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column::before {
      top: .55em;
    }
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:last-child)::after {
      display: block;
      top: calc(.55em + 6px);
      left: 6px;
      right: auto;
      width: 1px;
      height: auto;
      bottom: calc((var(--mpc-gap-y) + .55em + 6px) * -1);
    }
  }
  @container style(--clmn-w--pc: 50%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(2n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 33.33%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(3n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 25%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(4n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 20%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(5n)):not(:last-child)::after {
      display: block;
    }
  }
  @container style(--clmn-w--pc: 16.66%) {
    .mpc-timeline > .swell-block-columns__inner > .swell-block-column:not(:nth-child(6n)):not(:last-child)::after {
      display: block;
    }
  }
}

/* ==========================================================
   mpc-price｜料金プラン（おすすめ強調）
   追加CSSクラス：mpc mpc-price（＋ mpc-scroll など）
   中身：見出し（プラン名）→ 段落（価格）→ 段落（説明）→ ボタン　※おすすめのカラムに追加CSSクラス is-pick
   ========================================================== */
:where(.mpc-price) {
  --mpc-accent: #e0567a;
  --mpc-lift: -6px;
}
.mpc-price > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-price > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-price > .swell-block-columns__inner > .swell-block-column {
  text-align: center;
  padding: calc(var(--mpc-pad) * 1.5) var(--mpc-pad) var(--mpc-pad);
}
.mpc-price > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
  box-shadow: 0 calc(var(--mpc-p) * 18px) calc(var(--mpc-p) * 36px) rgb(40 20 30 / calc(var(--mpc-p) * .14));
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-price > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  font-size: .95em;
  letter-spacing: .14em;
  color: var(--mpc-accent);
}
.mpc-price > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) + p {
  font-size: 2.1em;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--mpc-ink);
}
.mpc-price > .swell-block-columns__inner > .swell-block-column > p + p {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--mpc-line);
  text-align: left;
}
.mpc-price > .swell-block-columns__inner > .swell-block-column.is-pick::before {
  border: 2px solid var(--mpc-accent);
  background: color-mix(in srgb, var(--mpc-accent) 5%, var(--mpc-bg));
}
.mpc-price > .swell-block-columns__inner > .swell-block-column.is-pick::after {
  content: var(--mpc-pick, "おすすめ");
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% calc(-50% + var(--mpc-p) * var(--mpc-lift));
  padding: .3em 1.1em;
  border-radius: 99px;
  background: var(--mpc-accent);
  color: #ffffff;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ==========================================================
   mpc-profile｜スタッフ紹介（回る輪）
   追加CSSクラス：mpc mpc-profile（＋ mpc-scroll など）
   中身：画像（正方形）→ 見出し（名前）→ 段落（役職）→ 段落（紹介文）
   ========================================================== */
:where(.mpc-profile) {
  --mpc-accent: #8a6bb0;
}
.mpc-profile > .swell-block-columns__inner > .swell-block-column {
  align-items: center;
  text-align: center;
  padding: var(--mpc-pad) 1em;
}
.mpc-profile > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  width: 8.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 6px 0 1em;
}
.mpc-profile > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .06);
}
.mpc-profile > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: var(--mpc-pad);
  left: 50%;
  width: calc(8.5em + 12px);
  aspect-ratio: 1;
  translate: -50% 0;
  rotate: calc(var(--mpc-p) * 120deg);
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--mpc-accent) 70%, transparent);
  pointer-events: none;
}
.mpc-profile > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) + p {
  margin-top: .2em;
  font-size: .78em;
  letter-spacing: .14em;
  color: var(--mpc-accent);
}

/* ==========================================================
   mpc-voice｜お客様の声
   追加CSSクラス：mpc mpc-voice（＋ mpc-scroll など）
   中身：画像（顔写真・正方形）→ 見出し（お名前）→ 段落（本文）
   ========================================================== */
:where(.mpc-voice) {
  --mpc-accent: #e7a33e;
  --mpc-lift: -4px;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  column-gap: .9em;
  align-items: center;
  align-content: start;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column > * {
  grid-column: 1 / -1;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  grid-column: 1;
  grid-row: 1;
  width: 3.4em;
  aspect-ratio: 1;
  border-radius: 50%;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column > figure + :is(h2, h3, h4) {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  padding-right: 2.4em !important;
  font-size: .92em;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column > p {
  margin-top: 1em;
}
.mpc-voice > .swell-block-columns__inner > .swell-block-column::after {
  content: "“";
  position: absolute;
  top: .1em;
  right: .3em;
  font-family: Georgia, serif;
  font-size: 4.2em;
  line-height: 1;
  color: color-mix(in srgb, var(--mpc-accent) calc(30% + var(--mpc-p) * 70%), transparent);
  rotate: calc(var(--mpc-p) * -10deg);
  translate: 0 calc(var(--mpc-p) * var(--mpc-lift));
}

/* ==========================================================
   mpc-stat｜数字実績
   追加CSSクラス：mpc mpc-stat（＋ mpc-scroll など）
   中身：段落（数字・mp-count推奨）→ 見出し（項目名）→ 段落（補足）
   ========================================================== */
:where(.mpc-stat) {
  --mpc-accent: #0e8f6f;
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column {
  text-align: center;
  padding-top: calc(var(--mpc-pad) * 1.3);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column::before {
  border: 1px solid var(--mpc-line);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(20% + var(--mpc-p) * 50%);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--mpc-accent);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column > p:first-child {
  font-size: 2.6em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--mpc-accent);
}
.mpc-stat > .swell-block-columns__inner > .swell-block-column > p:first-child + * {
  font-size: .95em;
  font-weight: 700;
}

/* ==========================================================
   mpc-wa｜縦書き見出し（和）
   追加CSSクラス：mpc mpc-wa（＋ mpc-scroll など）
   中身：画像 → 見出し（短め）→ 段落
   ========================================================== */
:where(.mpc-wa) {
  --mpc-accent: #a1342a;
  --mpc-bg: #f8f3e9;
  --mpc-ink: #2a241c;
  --mpc-sub: #5f5547;
  --mpc-radius: 2px;
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.1em;
  align-content: start;
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column > * {
  grid-column: 1;
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
  margin: calc(var(--mpc-pad) * -1) calc(var(--mpc-pad) * -1) var(--mpc-pad);
  border-radius: var(--mpc-radius) var(--mpc-radius) 0 0;
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column > figure img {
  filter: sepia(calc(.4 - var(--mpc-p) * .4));
  scale: calc(1 + var(--mpc-p) * .04);
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
  grid-column: 2;
  grid-row: 2 / span 3;
  margin-top: 0;
  writing-mode: vertical-rl;
  font-size: 1.3em;
  letter-spacing: .3em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--mpc-accent) calc(var(--mpc-p) * 100%), var(--mpc-ink));
}
.mpc-wa > .swell-block-columns__inner > .swell-block-column > p {
  margin-top: 0;
  line-height: 2;
}

/* ==========================================================
   mpc-bento｜ベントー（1枚目を大きく）
   追加CSSクラス：mpc mpc-bento（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落　※PCは3列（33.33%）・カード5枚で設定
   ========================================================== */
:where(.mpc-bento) {
  --mpc-radius: 16px;
  --mpc-ink: #ffffff;
  --mpc-sub: rgb(255 255 255 / .86);
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
  justify-content: flex-end;
  min-height: 15em;
  overflow: hidden;
  border-radius: var(--mpc-radius);
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  margin: 0;
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column > figure + * {
  margin-top: 0;
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .06);
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 10 14 / .72), rgb(10 10 14 / 0) 55%);
}
.mpc-bento > .swell-block-columns__inner > .swell-block-column::after {
  content: "→";
  position: absolute;
  top: 1em;
  right: 1em;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: #111111;
  scale: calc(.85 + var(--mpc-p) * .15);
  rotate: calc(var(--mpc-p) * -45deg);
}
@media (min-width: 960px) {
  .mpc-bento > .swell-block-columns__inner > .swell-block-column:first-child {
    width: calc(var(--clmn-w--pc) * 1.5);
    flex-grow: 1;
    min-height: 26em;
  }
  .mpc-bento > .swell-block-columns__inner > .swell-block-column:first-child > :is(h2, h3, h4) {
    font-size: 1.7em;
  }
}

/* ==========================================================
   mpc-expand｜横に広がるパネル
   追加CSSクラス：mpc mpc-expand（＋ mpc-scroll など）
   中身：画像 → 見出し → 段落（短め）※PCは4列（25%）推奨
   ========================================================== */
/* ※ PCでカラムの幅を動かすため、mp-stagger とは併用不可 */
:where(.mpc-expand) {
  --mpc-radius: 14px;
  --mpc-ink: #ffffff;
  --mpc-sub: rgb(255 255 255 / .86);
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column {
  padding: var(--mpc-pad);
  justify-content: flex-end;
  min-height: 18em;
  overflow: hidden;
  border-radius: var(--mpc-radius);
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column > figure:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  margin: 0;
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column > figure + * {
  margin-top: 0;
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column > figure img {
  scale: calc(1 + var(--mpc-p) * .05);
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 10 14 / .75), rgb(10 10 14 / .05) 65%);
}
.mpc-expand > .swell-block-columns__inner > .swell-block-column > p {
  max-height: calc(var(--mpc-p) * 7em);
  opacity: var(--mpc-p);
  overflow: hidden;
}
/* タッチ端末で mpc-scroll なしの場合は、文字を最初から表示 */
@media (hover: none) {
  .mpc-expand:not(.mpc-scroll) > .swell-block-columns__inner > .swell-block-column {
    --mpc-p: 1;
  }
}
@media (min-width: 960px) {
  .mpc-expand > .swell-block-columns__inner {
    flex-wrap: nowrap;
  }
  .mpc-expand > .swell-block-columns__inner > .swell-block-column {
    width: auto;
    flex-grow: calc(1 + var(--mpc-p) * 1.8);
    flex-shrink: 1;
    flex-basis: 0%;
    min-width: 0;
    min-height: 28em;
    transition: flex-grow .7s var(--mpc-e);
  }
  .mpc-expand > .swell-block-columns__inner > .swell-block-column > :is(h2, h3, h4) {
    white-space: nowrap;
  }
  .mpc-expand > .swell-block-columns__inner > .swell-block-column > p {
    min-width: 14em;
  }
}