/* =========================================================
   MPD｜MONOPAGE Deco System v1.5｜共通CSS（サイトに1回だけ）
   フルワイド（またはグループ）の「追加CSSクラス」に
     mpd ＋ 形クラス（mpd-a--◯◯ / mpd-b--◯◯）＋ セクション名クラス
   を入れ、セクション名クラスで変数（--a-* / --b-* / --e-*）を指定する。
   A = ::before ／ B = ::after ／ E = カスタムHTML（.mpd-el）
   メインビジュアル（#main_visual）はクラス不要。専用CSSを出力して使う。
   ========================================================= */

:root {
  /* テクスチャ（データURIなので画像アップロード・本番移行時のパス置換は不要） */
  /* グレイン */
  --mpd-tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  --mpd-tex-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  /* リソグラフ風 */
  --mpd-tex-riso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.5 -2.1'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  --mpd-tex-riso-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3.5 -2.1'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  /* 紙 */
  --mpd-tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .42 -.16'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3Cfilter id='n1' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n1)'/%3E%3C/svg%3E") 0 0 / 260px 260px;
  --mpd-tex-paper-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .42 -.16'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3Cfilter id='n1' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n1)'/%3E%3C/svg%3E") 0 0 / 260px 260px;
  /* 石・コンクリート */
  --mpd-tex-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.36'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3Cfilter id='n1' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 -.08'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n1)'/%3E%3C/svg%3E") 0 0 / 320px 320px;
  --mpd-tex-stone-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.36'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3Cfilter id='n1' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 -.08'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n1)'/%3E%3C/svg%3E") 0 0 / 320px 320px;
  /* ハーフトーン */
  --mpd-tex-halftone: radial-gradient(rgba(0,0,0,.22) 1.2px, transparent 1.7px) 0 0 / 9px 9px;
  --mpd-tex-halftone-light: radial-gradient(rgba(255,255,255,.22) 1.2px, transparent 1.7px) 0 0 / 9px 9px;
  /* 斜線 */
  --mpd-tex-hatch: repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 7px);
  --mpd-tex-hatch-light: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px);
  /* 方眼 */
  --mpd-tex-grid: linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px) 0 0 / 24px 24px;
  --mpd-tex-grid-light: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 24px 24px;
  /* 布・リネン */
  --mpd-tex-linen: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  --mpd-tex-linen-light: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n0' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n0)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  /* 光沢 */
  --mpd-tex-sheen: linear-gradient(115deg, transparent 25%, rgba(0,0,0,.28) 42%, rgba(0,0,0,.06) 52%, transparent 62%);
  --mpd-tex-sheen-light: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.06) 52%, transparent 62%);
  /* 「ヘッダーより前面」に使う重なり順。SWELLヘッダー（#header）の z-index に合わせる */
  --mpd-z-header: 100;
}

/* アニメーション用の登録プロパティ（--_py＝パララックス、--_i*＝登場） */
@property --_py {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --_iv {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --_itx {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --_ity {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --_isx {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --_isy {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --_iw {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 130%;
}

/* 装飾のはみ出しで横スクロールさせない（clip は sticky ヘッダーを壊さない） */
#body_wrap {
  overflow-x: clip;
}

/* 土台：フルワイドを装飾の基準点にする（本体に z-index は付けない） */
.mpd {
  position: relative;
  overflow: visible !important;
}
.mpd > .swell-block-fullWide__inner {
  position: static;
}
.mpd > .swell-block-fullWide__inner > :not(.mpd-el),
.mpd:not(.swell-block-fullWide) > :not(.mpd-el) {
  position: relative;
  z-index: 2;
}

/* 変数の受け渡し（A=::before / B=::after / E=.mpd-el） */
.mpd::before,
#main_visual::before {
  --_x: var(--a-x, 50%);
  --_y: var(--a-y, 50%);
  --_ax: var(--a-ax, -50%);
  --_ay: var(--a-ay, -50%);
  --_w: var(--a-w, 30vw);
  --_h: var(--a-h, 30vw);
  --_rot: var(--a-rot, 0deg);
  --_flip: var(--a-flip, 1);
  --_flipy: var(--a-flipy, 1);
  --_c: var(--a-c, var(--mpd-c2));
  --_tex: var(--a-tex, none);
  --_op: var(--a-op, 1);
  --_blur: var(--a-blur, 0px);
  --_blend: var(--a-blend, normal);
  --_z: var(--a-z, 1);
  --_disp: var(--a-disp, block);
  --_sw: var(--a-sw, 2px);
  --_gap: var(--a-gap, 16px);
  --_r: var(--a-r, 24px);
  --_sc: var(--a-sc, var(--mpd-c1));
  --_para: var(--a-para, 0px);
  --_anim: var(--a-anim, none);
  --_text: var(--a-text, "");
  --_img: var(--a-img, none);
  --_ar: var(--a-ar, auto);
  /* 登場アニメ */
  --_idur: var(--a-in-dur, 1.2s);
  --_idelay: var(--a-in-delay, 0s);
  --_iease: var(--a-in-ease, cubic-bezier(.22, 1, .36, 1));
  --_idir: var(--a-in-dir, 90deg);
  --_idist: var(--a-in-dist);
  --_iox: var(--a-in-ox);
  --_ioy: var(--a-in-oy);
  --_gox: 0%;
  --_goy: 0%;
}

.mpd::after,
#main_visual::after {
  --_x: var(--b-x, 50%);
  --_y: var(--b-y, 50%);
  --_ax: var(--b-ax, -50%);
  --_ay: var(--b-ay, -50%);
  --_w: var(--b-w, 30vw);
  --_h: var(--b-h, 30vw);
  --_rot: var(--b-rot, 0deg);
  --_flip: var(--b-flip, 1);
  --_flipy: var(--b-flipy, 1);
  --_c: var(--b-c, var(--mpd-c2));
  --_tex: var(--b-tex, none);
  --_op: var(--b-op, 1);
  --_blur: var(--b-blur, 0px);
  --_blend: var(--b-blend, normal);
  --_z: var(--b-z, 1);
  --_disp: var(--b-disp, block);
  --_sw: var(--b-sw, 2px);
  --_gap: var(--b-gap, 16px);
  --_r: var(--b-r, 24px);
  --_sc: var(--b-sc, var(--mpd-c1));
  --_para: var(--b-para, 0px);
  --_anim: var(--b-anim, none);
  --_text: var(--b-text, "");
  --_img: var(--b-img, none);
  --_ar: var(--b-ar, auto);
  /* 登場アニメ */
  --_idur: var(--b-in-dur, 1.2s);
  --_idelay: var(--b-in-delay, 0s);
  --_iease: var(--b-in-ease, cubic-bezier(.22, 1, .36, 1));
  --_idir: var(--b-in-dir, 90deg);
  --_idist: var(--b-in-dist);
  --_iox: var(--b-in-ox);
  --_ioy: var(--b-in-oy);
  --_gox: 0%;
  --_goy: 0%;
}

.mpd-el {
  --_x: var(--e-x, 50%);
  --_y: var(--e-y, 50%);
  --_ax: var(--e-ax, -50%);
  --_ay: var(--e-ay, -50%);
  --_w: var(--e-w, 30vw);
  --_h: var(--e-h, 30vw);
  --_rot: var(--e-rot, 0deg);
  --_flip: var(--e-flip, 1);
  --_flipy: var(--e-flipy, 1);
  --_c: var(--e-c, var(--mpd-c2));
  --_tex: var(--e-tex, none);
  --_op: var(--e-op, 1);
  --_blur: var(--e-blur, 0px);
  --_blend: var(--e-blend, normal);
  --_z: var(--e-z, 1);
  --_disp: var(--e-disp, block);
  --_sw: var(--e-sw, 2px);
  --_gap: var(--e-gap, 16px);
  --_r: var(--e-r, 24px);
  --_sc: var(--e-sc, var(--mpd-c1));
  --_para: var(--e-para, 0px);
  --_anim: var(--e-anim, none);
  --_text: var(--e-text, "");
  --_img: var(--e-img, none);
  --_ar: var(--e-ar, auto);
  /* 登場アニメ */
  --_idur: var(--e-in-dur, 1.2s);
  --_idelay: var(--e-in-delay, 0s);
  --_iease: var(--e-in-ease, cubic-bezier(.22, 1, .36, 1));
  --_idir: var(--e-in-dir, 90deg);
  --_idist: var(--e-in-dist);
  --_iox: var(--e-in-ox);
  --_ioy: var(--e-in-oy);
  --_gox: 0%;
  --_goy: 0%;
}

/* 共通の描画 */
.mpd::before,
.mpd::after,
#main_visual::before,
#main_visual::after,
.mpd-el {
  position: absolute;
  left: var(--_x);
  top: var(--_y);
  width: var(--_w);
  height: var(--_h);
  transform:
    translate(var(--_itx), var(--_ity))
    translate(var(--_ax), calc(var(--_ay) + var(--_py)))
    rotate(var(--_rot)) scale(var(--_flip), var(--_flipy))
    translate(var(--_gox), var(--_goy)) scale(var(--_isx), var(--_isy)) translate(calc(var(--_gox) * -1), calc(var(--_goy) * -1));
  background: var(--_tex), var(--_c);
  opacity: calc(var(--_op) * var(--_iv));
  filter: blur(var(--_blur));
  mix-blend-mode: var(--_blend);
  z-index: var(--_z);
  display: var(--_disp);
  pointer-events: none;
  box-sizing: border-box;
  animation: var(--_anim);
  transition-property: --_iv, --_itx, --_ity, --_isx, --_isy, --_iw;
  transition-duration: var(--_idur);
  transition-timing-function: var(--_iease);
  transition-delay: var(--_idelay);
}
.mpd-el video,
.mpd-el img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 形クラスが付いた疑似要素だけ描画する */
.mpd-a--shard::before, .mpd-b--shard::after,
.mpd-a--sliver::before, .mpd-b--sliver::after,
.mpd-a--beam::before, .mpd-b--beam::after,
.mpd-a--wedge::before, .mpd-b--wedge::after,
.mpd-a--tri::before, .mpd-b--tri::after,
.mpd-a--iso::before, .mpd-b--iso::after,
.mpd-a--chevron::before, .mpd-b--chevron::after,
.mpd-a--pointer::before, .mpd-b--pointer::after,
.mpd-a--circle::before, .mpd-b--circle::after,
.mpd-a--ring::before, .mpd-b--ring::after,
.mpd-a--half::before, .mpd-b--half::after,
.mpd-a--quarter::before, .mpd-b--quarter::after,
.mpd-a--arch::before, .mpd-b--arch::after,
.mpd-a--pill::before, .mpd-b--pill::after,
.mpd-a--blob::before, .mpd-b--blob::after,
.mpd-a--glow::before, .mpd-b--glow::after,
.mpd-a--rect::before, .mpd-b--rect::after,
.mpd-a--panel::before, .mpd-b--panel::after,
.mpd-a--plane::before, .mpd-b--plane::after,
.mpd-a--slant::before, .mpd-b--slant::after,
.mpd-a--trap::before, .mpd-b--trap::after,
.mpd-a--stripeband::before, .mpd-b--stripeband::after,
.mpd-a--line::before, .mpd-b--line::after,
.mpd-a--lines::before, .mpd-b--lines::after,
.mpd-a--stripes::before, .mpd-b--stripes::after,
.mpd-a--dots::before, .mpd-b--dots::after,
.mpd-a--dotsfade::before, .mpd-b--dotsfade::after,
.mpd-a--grid::before, .mpd-b--grid::after,
.mpd-a--wave::before, .mpd-b--wave::after,
.mpd-a--zigzag::before, .mpd-b--zigzag::after,
.mpd-a--squiggle::before, .mpd-b--squiggle::after,
.mpd-a--star::before, .mpd-b--star::after,
.mpd-a--burst::before, .mpd-b--burst::after,
.mpd-a--cloud::before, .mpd-b--cloud::after,
.mpd-a--confetti::before, .mpd-b--confetti::after,
.mpd-a--text::before, .mpd-b--text::after,
.mpd-a--img::before, .mpd-b--img::after,
.mpd-a--imgmask::before, .mpd-b--imgmask::after,
.mpd-a--textline::before, .mpd-b--textline::after {
  content: "";
}

/* ── 形｜三角・破片 ── */

/* 破片 */
.mpd-a--shard::before,
.mpd-b--shard::after,
.mpd-el.mpd--shard {
  clip-path:polygon(0 0,100% 38%,100% 74%);
}

/* 細い破片 */
.mpd-a--sliver::before,
.mpd-b--sliver::after,
.mpd-el.mpd--sliver {
  clip-path:polygon(0 0,100% 45%,100% 58%);
}

/* 斜め光線 */
.mpd-a--beam::before,
.mpd-b--beam::after,
.mpd-el.mpd--beam {
  clip-path:polygon(44% 0,92% 0,0 100%);
}

/* 楔 */
.mpd-a--wedge::before,
.mpd-b--wedge::after,
.mpd-el.mpd--wedge {
  clip-path:polygon(0 0,100% 0,10% 100%);
}

/* 直角三角 */
.mpd-a--tri::before,
.mpd-b--tri::after,
.mpd-el.mpd--tri {
  clip-path:polygon(0 0,100% 0,0 100%);
}

/* 二等辺三角 */
.mpd-a--iso::before,
.mpd-b--iso::after,
.mpd-el.mpd--iso {
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

/* シェブロン */
.mpd-a--chevron::before,
.mpd-b--chevron::after,
.mpd-el.mpd--chevron {
  clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);
}

/* ポインター */
.mpd-a--pointer::before,
.mpd-b--pointer::after,
.mpd-el.mpd--pointer {
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* ── 形｜円・曲線 ── */

/* 正円 */
.mpd-a--circle::before,
.mpd-b--circle::after,
.mpd-el.mpd--circle {
  border-radius:50%;
}

/* リング */
.mpd-a--ring::before,
.mpd-b--ring::after,
.mpd-el.mpd--ring {
  border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--_sw) - 1px),#000 calc(100% - var(--_sw)),#000 calc(100% - 1px),transparent 100%);
  mask:radial-gradient(closest-side,transparent calc(100% - var(--_sw) - 1px),#000 calc(100% - var(--_sw)),#000 calc(100% - 1px),transparent 100%);
}

/* 半円 */
.mpd-a--half::before,
.mpd-b--half::after,
.mpd-el.mpd--half {
  clip-path:ellipse(50% 100% at 50% 100%);
}

/* 四分円 */
.mpd-a--quarter::before,
.mpd-b--quarter::after,
.mpd-el.mpd--quarter {
  border-radius:100% 0 0 0;
}

/* アーチ */
.mpd-a--arch::before,
.mpd-b--arch::after,
.mpd-el.mpd--arch {
  border-top-left-radius:9999px;
  border-top-right-radius:9999px;
}

/* ピル */
.mpd-a--pill::before,
.mpd-b--pill::after,
.mpd-el.mpd--pill {
  border-radius:9999px;
}

/* ブロブ */
.mpd-a--blob::before,
.mpd-b--blob::after,
.mpd-el.mpd--blob {
  border-radius:43% 57% 62% 38% / 46% 38% 62% 54%;
}

/* グロー */
.mpd-a--glow::before,
.mpd-b--glow::after,
.mpd-el.mpd--glow {
  border-radius:50%;
}

/* ── 形｜面・パネル ── */

/* 矩形（塗りのみ） */

/* 角丸パネル */
.mpd-a--panel::before,
.mpd-b--panel::after,
.mpd-el.mpd--panel {
  border-radius:var(--_r);
}

/* 斜め面 */
.mpd-a--plane::before,
.mpd-b--plane::after,
.mpd-el.mpd--plane {
  clip-path:polygon(0 25%,100% 0,100% 75%,0 100%);
}

/* 片斜めカット */
.mpd-a--slant::before,
.mpd-b--slant::after,
.mpd-el.mpd--slant {
  clip-path:polygon(0 0,100% 0,100% 62%,0 100%);
}

/* 台形 */
.mpd-a--trap::before,
.mpd-b--trap::after,
.mpd-el.mpd--trap {
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
}

/* ストライプ帯 */
.mpd-a--stripeband::before,
.mpd-b--stripeband::after,
.mpd-el.mpd--stripeband {
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
  -webkit-mask:repeating-linear-gradient(135deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
  mask:repeating-linear-gradient(135deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
}

/* ── 形｜ライン・パターン ── */

/* 1本ライン（塗りのみ） */

/* 平行ライン */
.mpd-a--lines::before,
.mpd-b--lines::after,
.mpd-el.mpd--lines {
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
  mask:repeating-linear-gradient(180deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
}

/* 縦ストライプ */
.mpd-a--stripes::before,
.mpd-b--stripes::after,
.mpd-el.mpd--stripes {
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
  mask:repeating-linear-gradient(90deg,#000 0 var(--_sw),transparent var(--_sw) var(--_gap));
}

/* ドット */
.mpd-a--dots::before,
.mpd-b--dots::after,
.mpd-el.mpd--dots {
  -webkit-mask:radial-gradient(circle,#000 var(--_sw),transparent calc(var(--_sw) + .5px)) 0 0 / var(--_gap) var(--_gap);
  mask:radial-gradient(circle,#000 var(--_sw),transparent calc(var(--_sw) + .5px)) 0 0 / var(--_gap) var(--_gap);
}

/* ドット霧 */
.mpd-a--dotsfade::before,
.mpd-b--dotsfade::after,
.mpd-el.mpd--dotsfade {
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent),radial-gradient(circle,#000 var(--_sw),transparent calc(var(--_sw) + .5px));
  mask-image:radial-gradient(closest-side,#000 30%,transparent),radial-gradient(circle,#000 var(--_sw),transparent calc(var(--_sw) + .5px));
  -webkit-mask-size:100% 100%,var(--_gap) var(--_gap);
  mask-size:100% 100%,var(--_gap) var(--_gap);
  -webkit-mask-repeat:no-repeat,repeat;
  mask-repeat:no-repeat,repeat;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* グリッド霧 */
.mpd-a--grid::before,
.mpd-b--grid::after,
.mpd-el.mpd--grid {
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent),linear-gradient(#000 0 var(--_sw),transparent var(--_sw)),linear-gradient(90deg,#000 0 var(--_sw),transparent var(--_sw));
  mask-image:radial-gradient(closest-side,#000 25%,transparent),linear-gradient(#000 0 var(--_sw),transparent var(--_sw)),linear-gradient(90deg,#000 0 var(--_sw),transparent var(--_sw));
  -webkit-mask-size:100% 100%,var(--_gap) var(--_gap),var(--_gap) var(--_gap);
  mask-size:100% 100%,var(--_gap) var(--_gap),var(--_gap) var(--_gap);
  -webkit-mask-repeat:no-repeat,repeat,repeat;
  mask-repeat:no-repeat,repeat,repeat;
  -webkit-mask-composite:source-in,source-over;
  mask-composite:intersect,add;
}

/* ウェーブ */
.mpd-a--wave::before,
.mpd-b--wave::after,
.mpd-el.mpd--wave {
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q10 1 20 10 T40 10' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q10 1 20 10 T40 10' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
}

/* ── 形｜ポップ ── */

/* ジグザグ */
.mpd-a--zigzag::before,
.mpd-b--zigzag::after,
.mpd-el.mpd--zigzag {
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L10 4 L20 16 L30 4 L40 16' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L10 4 L20 16 L30 4 L40 16' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
}

/* ぐにゃ線 */
.mpd-a--squiggle::before,
.mpd-b--squiggle::after,
.mpd-el.mpd--squiggle {
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C8 14 8 4 14 4 C20 4 20 20 14 20 C8 20 10 10 20 10 C30 10 30 14 40 14' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C8 14 8 4 14 4 C20 4 20 20 14 20 C8 20 10 10 20 10 C30 10 30 14 40 14' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") 0 50% / var(--_gap) 100% repeat-x;
}

/* キラ星 */
.mpd-a--star::before,
.mpd-b--star::after,
.mpd-el.mpd--star {
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}

/* バースト */
.mpd-a--burst::before,
.mpd-b--burst::after,
.mpd-el.mpd--burst {
  clip-path:polygon(50.0% 0.0%,59.3% 15.2%,75.0% 6.7%,75.5% 24.5%,93.3% 25.0%,84.8% 40.7%,100.0% 50.0%,84.8% 59.3%,93.3% 75.0%,75.5% 75.5%,75.0% 93.3%,59.3% 84.8%,50.0% 100.0%,40.7% 84.8%,25.0% 93.3%,24.5% 75.5%,6.7% 75.0%,15.2% 59.3%,0.0% 50.0%,15.2% 40.7%,6.7% 25.0%,24.5% 24.5%,25.0% 6.7%,40.7% 15.2%);
}

/* 雲 */
.mpd-a--cloud::before,
.mpd-b--cloud::after,
.mpd-el.mpd--cloud {
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M22 58 C8 58 2 46 10 38 C4 26 18 16 30 22 C34 8 56 4 64 18 C76 10 94 18 90 32 C100 38 98 58 82 58 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M22 58 C8 58 2 46 10 38 C4 26 18 16 30 22 C34 8 56 4 64 18 C76 10 94 18 90 32 C100 38 98 58 82 58 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 紙吹雪 */
.mpd-a--confetti::before,
.mpd-b--confetti::after,
.mpd-el.mpd--confetti {
  background:radial-gradient(circle at 8% 22%,var(--mpd-c1) 0 calc(var(--_sw) * 1),transparent calc(var(--_sw) * 1 + 1px)),radial-gradient(circle at 22% 70%,var(--mpd-accent) 0 calc(var(--_sw) * 0.7),transparent calc(var(--_sw) * 0.7 + 1px)),radial-gradient(circle at 35% 30%,var(--mpd-c3) 0 calc(var(--_sw) * 1.2),transparent calc(var(--_sw) * 1.2 + 1px)),radial-gradient(circle at 48% 80%,var(--mpd-c1) 0 calc(var(--_sw) * 0.8),transparent calc(var(--_sw) * 0.8 + 1px)),radial-gradient(circle at 60% 18%,var(--mpd-accent) 0 calc(var(--_sw) * 1),transparent calc(var(--_sw) * 1 + 1px)),radial-gradient(circle at 72% 58%,var(--mpd-c3) 0 calc(var(--_sw) * 0.7),transparent calc(var(--_sw) * 0.7 + 1px)),radial-gradient(circle at 86% 28%,var(--mpd-c1) 0 calc(var(--_sw) * 1.1),transparent calc(var(--_sw) * 1.1 + 1px)),radial-gradient(circle at 92% 78%,var(--mpd-accent) 0 calc(var(--_sw) * 0.8),transparent calc(var(--_sw) * 0.8 + 1px)),radial-gradient(circle at 14% 48%,var(--mpd-c3) 0 calc(var(--_sw) * 0.6),transparent calc(var(--_sw) * 0.6 + 1px)),radial-gradient(circle at 54% 48%,var(--mpd-accent) 0 calc(var(--_sw) * 0.6),transparent calc(var(--_sw) * 0.6 + 1px)),radial-gradient(circle at 78% 90%,var(--mpd-c1) 0 calc(var(--_sw) * 0.6),transparent calc(var(--_sw) * 0.6 + 1px)),radial-gradient(circle at 40% 8%,var(--mpd-c3) 0 calc(var(--_sw) * 0.8),transparent calc(var(--_sw) * 0.8 + 1px));
}

/* ── 形｜タイポ ── */

/* 英字（塗り） */
.mpd-a--text::before,
.mpd-b--text::after,
.mpd-el.mpd--text {
  width:auto;
  height:auto;
  font-size:var(--_h);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mpd-a--text::before,
.mpd-b--text::after {
  content:var(--_text);
}

/* 英字（線） */
.mpd-a--textline::before,
.mpd-b--textline::after,
.mpd-el.mpd--textline {
  width:auto;
  height:auto;
  font-size:var(--_h);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  background:none;
  color:transparent;
  -webkit-text-stroke:var(--_sw) var(--_sc);
}

.mpd-a--textline::before,
.mpd-b--textline::after {
  content:var(--_text);
}

/* ── 形｜画像素材 ── */

/* 画像そのまま */
.mpd-a--img::before,
.mpd-b--img::after,
.mpd-el.mpd--img {
  background:var(--_img) center / 100% 100% no-repeat;
  aspect-ratio:var(--_ar);
}

/* 画像を色で塗る */
.mpd-a--imgmask::before,
.mpd-b--imgmask::after,
.mpd-el.mpd--imgmask {
  -webkit-mask:var(--_img) center / 100% 100% no-repeat;
  mask:var(--_img) center / 100% 100% no-repeat;
  aspect-ratio:var(--_ar);
}

/* ── 登場アニメ ──
   親（.mpd / #main_visual）に is-inview が付くと再生（スクロールイン用JSが付与）。
   html に mp-js が無い環境では最初から表示される。
   種類：mpd-a-in--◯◯ / mpd-b-in--◯◯（追加CSSクラス）、E は mpd-in--◯◯
   調整：--a-in-delay / --a-in-dur / --a-in-ease / --a-in-dist / --a-in-dir / --a-in-ox / --a-in-oy */

/* フェード（再生前の状態） */
.mp-js .mpd-a-in--fade:not(.is-inview)::before,
.mp-js .mpd-b-in--fade:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--fade {
  --_iv: 0;
}

/* 下から浮き上がる（再生前の状態） */
.mp-js .mpd-a-in--up:not(.is-inview)::before,
.mp-js .mpd-b-in--up:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--up {
  --_iv: 0;
  --_ity: var(--_idist, 48px);
}

/* 上から降りる（再生前の状態） */
.mp-js .mpd-a-in--down:not(.is-inview)::before,
.mp-js .mpd-b-in--down:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--down {
  --_iv: 0;
  --_ity: calc(var(--_idist, 48px) * -1);
}

/* 左から駆け込む（再生前の状態） */
.mp-js .mpd-a-in--left:not(.is-inview)::before,
.mp-js .mpd-b-in--left:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--left {
  --_iv: 0;
  --_itx: calc(var(--_idist, 40vw) * -1);
}

/* 右から駆け込む（再生前の状態） */
.mp-js .mpd-a-in--right:not(.is-inview)::before,
.mp-js .mpd-b-in--right:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--right {
  --_iv: 0;
  --_itx: var(--_idist, 40vw);
}

/* ズーム（再生前の状態） */
.mp-js .mpd-a-in--zoom:not(.is-inview)::before,
.mp-js .mpd-b-in--zoom:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--zoom {
  --_iv: 0;
  --_isx: .6;
  --_isy: .6;
}

/* 横に伸びる（形の設定） */
.mpd-a-in--grow::before,
.mpd-b-in--grow::after,
.mpd-el.mpd-in--grow {
  --_gox: var(--_iox, -50%);
}

/* 横に伸びる（再生前の状態） */
.mp-js .mpd-a-in--grow:not(.is-inview)::before,
.mp-js .mpd-b-in--grow:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--grow {
  --_isx: 0;
}

/* 縦に伸びる（形の設定） */
.mpd-a-in--growy::before,
.mpd-b-in--growy::after,
.mpd-el.mpd-in--growy {
  --_goy: var(--_ioy, 50%);
}

/* 縦に伸びる（再生前の状態） */
.mp-js .mpd-a-in--growy:not(.is-inview)::before,
.mp-js .mpd-b-in--growy:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--growy {
  --_isy: 0;
}

/* ワイプ（走るように現れる）（形の設定） */
.mpd-a-in--wipe:not(.mpd-a--ring, .mpd-a--stripeband, .mpd-a--lines, .mpd-a--stripes, .mpd-a--dots, .mpd-a--dotsfade, .mpd-a--grid, .mpd-a--wave, .mpd-a--zigzag, .mpd-a--squiggle, .mpd-a--cloud, .mpd-a--imgmask)::before,
.mpd-b-in--wipe:not(.mpd-b--ring, .mpd-b--stripeband, .mpd-b--lines, .mpd-b--stripes, .mpd-b--dots, .mpd-b--dotsfade, .mpd-b--grid, .mpd-b--wave, .mpd-b--zigzag, .mpd-b--squiggle, .mpd-b--cloud, .mpd-b--imgmask)::after,
.mpd-el.mpd-in--wipe:not(.mpd--ring, .mpd--stripeband, .mpd--lines, .mpd--stripes, .mpd--dots, .mpd--dotsfade, .mpd--grid, .mpd--wave, .mpd--zigzag, .mpd--squiggle, .mpd--cloud, .mpd--imgmask) {
  -webkit-mask-image: linear-gradient(var(--_idir), #000 calc(var(--_iw) - 25%), transparent var(--_iw));
  mask-image: linear-gradient(var(--_idir), #000 calc(var(--_iw) - 25%), transparent var(--_iw));
}

/* ワイプ（走るように現れる）（再生前の状態） */
.mp-js .mpd-a-in--wipe:not(.is-inview)::before,
.mp-js .mpd-b-in--wipe:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--wipe {
  --_iw: 0%;
}

/* マスクで描くパターン系の形はワイプできないため、フェードで代用 */
.mp-js .mpd-a-in--wipe:is(.mpd-a--ring, .mpd-a--stripeband, .mpd-a--lines, .mpd-a--stripes, .mpd-a--dots, .mpd-a--dotsfade, .mpd-a--grid, .mpd-a--wave, .mpd-a--zigzag, .mpd-a--squiggle, .mpd-a--cloud, .mpd-a--imgmask):not(.is-inview)::before,
.mp-js .mpd-b-in--wipe:is(.mpd-b--ring, .mpd-b--stripeband, .mpd-b--lines, .mpd-b--stripes, .mpd-b--dots, .mpd-b--dotsfade, .mpd-b--grid, .mpd-b--wave, .mpd-b--zigzag, .mpd-b--squiggle, .mpd-b--cloud, .mpd-b--imgmask):not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el.mpd-in--wipe:is(.mpd--ring, .mpd--stripeband, .mpd--lines, .mpd--stripes, .mpd--dots, .mpd--dotsfade, .mpd--grid, .mpd--wave, .mpd--zigzag, .mpd--squiggle, .mpd--cloud, .mpd--imgmask) {
  --_iv: 0;
}

/* 再生前の状態へは一瞬で戻す（戻るときにも遅延が掛かると、遅延が長いほど表示されたままになるため） */
.mp-js .mpd:not(.is-inview)::before,
.mp-js .mpd:not(.is-inview)::after,
.mp-js .mpd:not(.is-inview) .mpd-el,
.mp-js #main_visual:not(.is-inview)::before,
.mp-js #main_visual:not(.is-inview)::after {
  transition-duration: 0s;
  transition-delay: 0s;
}

/* ── 動き ── */
@keyframes mpd-float { to { translate: 0 -18px; } }
@keyframes mpd-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes mpd-spin { to { rotate: 360deg; } }
@keyframes mpd-pulse { to { scale: 1.08; } }
@keyframes mpd-morph {
  0% { border-radius: 43% 57% 62% 38% / 46% 38% 62% 54%; }
  50% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
  100% { border-radius: 38% 62% 50% 50% / 40% 52% 48% 60%; }
}
@keyframes mpd-flow {
  from { background-size: 220% 220%; background-position: 0% 50%; }
  to { background-size: 220% 220%; background-position: 100% 50%; }
}
@keyframes mpd-para {
  from { --_py: var(--_para); }
  to { --_py: calc(var(--_para) * -1); }
}

/* スクロール連動パララックス（対応ブラウザのみ。非対応は静止） */
@supports (animation-timeline: view()) {
  .mpd::before,
  .mpd::after,
  #main_visual::before,
  #main_visual::after,
  .mpd-el {
    animation: var(--_anim), mpd-para linear both;
    animation-timeline: auto, view();
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpd::before,
  .mpd::after,
  #main_visual::before,
  #main_visual::after,
  .mpd-el {
    animation: none !important;
    transition: none !important;
  }
}