/* =========================================================
   MP Hover v1.0 | MONOPAGE Studio
   SWELL用ホバーアニメーション 共通CSS
   貼り付け先：外観 > カスタマイズ > 追加CSS
   ========================================================= */

/* ---------- 共通 ---------- */
.mp-hv-host,
.mp-btn {
  --_d: var(--mp-hv-dur, .5s);
  --_e: var(--mp-hv-ease, cubic-bezier(.7, 0, .2, 1));
}
.mp-hv-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 色の上書き（SWELLボタン・メニュー・リンク用）mp-hv-color ---------- */
.mp-hv-color {
  background-color: var(--mp-hv-bg, transparent) !important;
  color: var(--mp-hv-fg, currentColor) !important;
  border-color: var(--mp-hv-bd, currentColor) !important;
  transition-property: color, background-color, border-color, opacity, background-size, background-position, text-decoration-color, text-decoration-thickness, text-underline-offset !important;
  transition-duration: var(--_d) !important;
  transition-timing-function: var(--_e) !important;
}
.mp-hv-color:is(:hover, :focus-visible) {
  color: var(--mp-hv-fg-h, var(--mp-hv-fg, currentColor)) !important;
  border-color: var(--mp-hv-bd-h, var(--mp-hv-bd, currentColor)) !important;
}
.mp-hv-color:not(.mp-hv-fill):is(:hover, :focus-visible) {
  background-color: var(--mp-hv-bg-h, var(--mp-hv-bg, transparent)) !important;
}

/* ---------- テキストロール mp-hv-roll ---------- */
.mp-hv-roll__wrap {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: .1em;
  margin-block: -.1em;
}
.mp-hv-roll__line {
  grid-area: 1 / 1;
  display: block;
  transition: transform var(--_d) var(--_e);
}
.mp-hv-roll__line--b { transform: translateY(calc(100% + .2em)); }
.mp-hv-roll:is(:hover, :focus-visible) .mp-hv-roll__line--a { transform: translateY(calc(-100% - .2em)); }
.mp-hv-roll:is(:hover, :focus-visible) .mp-hv-roll__line--b { transform: translateY(0); }

/* 上から入れ替わる */
.mp-hv-roll--down .mp-hv-roll__line--b { transform: translateY(calc(-100% - .2em)); }
.mp-hv-roll--down:is(:hover, :focus-visible) .mp-hv-roll__line--a { transform: translateY(calc(100% + .2em)); }
.mp-hv-roll--down:is(:hover, :focus-visible) .mp-hv-roll__line--b { transform: translateY(0); }

/* 1文字ずつ時間差 */
.mp-hv-roll--char .mp-hv-roll__line { transform: none !important; }
.mp-hv-c {
  display: inline-block;
  white-space: pre;
  transition: transform var(--_d) var(--_e);
  transition-delay: calc(var(--i, 0) * var(--mp-hv-stagger, .025s));
}
.mp-hv-roll--char .mp-hv-roll__line--b .mp-hv-c { transform: translateY(calc(100% + .2em)); }
.mp-hv-roll--char:is(:hover, :focus-visible) .mp-hv-roll__line--a .mp-hv-c { transform: translateY(calc(-100% - .2em)); }
.mp-hv-roll--char:is(:hover, :focus-visible) .mp-hv-roll__line--b .mp-hv-c { transform: translateY(0); }
.mp-hv-roll--char.mp-hv-roll--down .mp-hv-roll__line--b .mp-hv-c { transform: translateY(calc(-100% - .2em)); }
.mp-hv-roll--char.mp-hv-roll--down:is(:hover, :focus-visible) .mp-hv-roll__line--a .mp-hv-c { transform: translateY(calc(100% + .2em)); }
.mp-hv-roll--char.mp-hv-roll--down:is(:hover, :focus-visible) .mp-hv-roll__line--b .mp-hv-c { transform: translateY(0); }

/* ぼかしながら入れ替わる */
.mp-hv-roll--blur:not(.mp-hv-roll--char) .mp-hv-roll__wrap { overflow: visible; }
.mp-hv-roll--blur .mp-hv-roll__line {
  transition: transform var(--_d) var(--_e), opacity var(--_d) var(--_e), filter var(--_d) var(--_e);
}
.mp-hv-roll--blur .mp-hv-roll__line--b { transform: translateY(40%); opacity: 0; filter: blur(6px); }
.mp-hv-roll--blur:is(:hover, :focus-visible) .mp-hv-roll__line--a { transform: translateY(-40%); opacity: 0; filter: blur(6px); }
.mp-hv-roll--blur:is(:hover, :focus-visible) .mp-hv-roll__line--b { transform: none; opacity: 1; filter: none; }

/* ---------- アイコン入れ替え mp-hv-icon ---------- */
.mp-hv-icon__box {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.mp-hv-icon__box > * {
  grid-area: 1 / 1;
  transition: transform var(--_d) var(--_e);
}
.mp-hv-icon__box svg:not([fill="none"]) { fill: currentColor; }
.mp-hv-icon__box > :nth-child(2) { transform: translateX(-200%); }
.mp-hv-icon:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: translateX(200%); }
.mp-hv-icon:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(2) { transform: translate(0, 0); transition-delay: .05s; }

/* 下から */
.mp-hv-icon--up .mp-hv-icon__box > :nth-child(2) { transform: translateY(200%); }
.mp-hv-icon--up:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: translateY(-200%); }
/* 斜め（↗アイコン向け） */
.mp-hv-icon--diag .mp-hv-icon__box > :nth-child(2) { transform: translate(-200%, 200%); }
.mp-hv-icon--diag:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: translate(200%, -200%); }
/* 上から（ダウンロードの矢印向け） */
.mp-hv-icon--down .mp-hv-icon__box > :nth-child(2) { transform: translateY(-200%); }
.mp-hv-icon--down:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: translateY(200%); }
/* 回転（＋アイコン向け・複製なし） */
.mp-hv-icon--spin .mp-hv-icon__box { overflow: visible; }
.mp-hv-icon--spin:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: rotate(90deg); }
/* 押し出し（細い矢印向け・複製なし） */
.mp-hv-icon--push .mp-hv-icon__box { overflow: visible; }
.mp-hv-icon--push:is(:hover, :focus-visible) .mp-hv-icon__box > :nth-child(1) { transform: translateX(.45em); }

/* SWELLボタンのアイコンを円で囲む */
.mp-hv-icon--circle .mp-hv-icon__box {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: var(--mp-hv-icon-bg, rgba(255, 255, 255, .2));
  color: var(--mp-hv-icon-fg, currentColor);
  transition: background-color var(--_d) var(--_e), color var(--_d) var(--_e);
}
.mp-hv-icon--circle .mp-hv-icon__box > svg { width: 1em; height: 1em; }
.mp-hv-icon--circle:is(:hover, :focus-visible) .mp-hv-icon__box {
  background-color: var(--mp-hv-icon-bg-h, var(--mp-hv-icon-bg, rgba(255, 255, 255, .2)));
  color: var(--mp-hv-icon-fg-h, var(--mp-hv-icon-fg, currentColor));
}

/* ---------- 背景塗り mp-hv-fill ---------- */
.mp-hv-fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mp-hv-fill__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--mp-hv-bg-h, rgba(0, 0, 0, .08));
  border-radius: inherit;
  pointer-events: none;
  transition: transform var(--_d) var(--_e), clip-path var(--_d) var(--_e), opacity var(--_d) var(--_e);
}
.mp-hv-fill--bottom .mp-hv-fill__bg { transform: scaleY(0); transform-origin: 50% 100%; }
.mp-hv-fill--bottom:is(:hover, :focus-visible) .mp-hv-fill__bg { transform: scaleY(1); }

.mp-hv-fill--left .mp-hv-fill__bg { transform: scaleX(0); transform-origin: 100% 50%; }
.mp-hv-fill--left:is(:hover, :focus-visible) .mp-hv-fill__bg { transform: scaleX(1); transform-origin: 0 50%; }

.mp-hv-fill--circle .mp-hv-fill__bg { clip-path: circle(0% at var(--mp-hv-x, 50%) var(--mp-hv-y, 50%)); }
.mp-hv-fill--circle:is(:hover, :focus-visible) .mp-hv-fill__bg { clip-path: circle(150% at var(--mp-hv-x, 50%) var(--mp-hv-y, 50%)); }

.mp-hv-fill--diagonal .mp-hv-fill__bg { left: -30%; right: -30%; transform: translateX(-110%) skewX(-30deg); }
.mp-hv-fill--diagonal:is(:hover, :focus-visible) .mp-hv-fill__bg { transform: translateX(0) skewX(-30deg); }

/* ふわっと（淡い背景が浮かぶ・ナビ向け） */
.mp-hv-fill--fade .mp-hv-fill__bg { opacity: 0; transform: scale(.85); }
.mp-hv-fill--fade:is(:hover, :focus-visible) .mp-hv-fill__bg { opacity: 1; transform: scale(1); }

/* スポットライト（カーソル位置が光る） */
.mp-hv-fill--spot .mp-hv-fill__bg {
  background: radial-gradient(circle var(--mp-hv-spot-size, 8em) at var(--mp-hv-x, 50%) var(--mp-hv-y, 50%), var(--mp-hv-accent, rgba(255, 255, 255, .3)), transparent 70%);
  opacity: 0;
}
.mp-hv-fill--spot:is(:hover, :focus-visible) .mp-hv-fill__bg { opacity: 1; }

/* ---------- 下線 mp-hv-line ---------- */
.mp-hv-line .mp-hv-target,
.mp-hv-line.mp-hv-target {
  background-image: linear-gradient(var(--mp-hv-line, currentColor), var(--mp-hv-line, currentColor));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% var(--mp-hv-line-w, 1px);
  padding-bottom: .12em;
  text-decoration: none !important;
  transition: background-size var(--_d) var(--_e);
}
.mp-hv-line:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line.mp-hv-target:is(:hover, :focus-visible) {
  background-size: 100% var(--mp-hv-line-w, 1px);
  background-position: 0 100%;
}
/* 中央から */
.mp-hv-line--center .mp-hv-target,
.mp-hv-line--center.mp-hv-target,
.mp-hv-line--center:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line--center.mp-hv-target:is(:hover, :focus-visible) { background-position: 50% 100%; }
/* 通過（右へ抜けて左から戻る） */
.mp-hv-line--through .mp-hv-target,
.mp-hv-line--through.mp-hv-target { background-size: 100% var(--mp-hv-line-w, 1px); }
.mp-hv-line--through:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line--through.mp-hv-target:is(:hover, :focus-visible) {
  animation: mp-hv-through calc(var(--_d) * 1.6) var(--_e);
}
@keyframes mp-hv-through {
  0%   { background-size: 100% var(--mp-hv-line-w, 1px); background-position: 100% 100%; }
  45%  { background-size: 0% var(--mp-hv-line-w, 1px);   background-position: 100% 100%; }
  55%  { background-size: 0% var(--mp-hv-line-w, 1px);   background-position: 0 100%; }
  100% { background-size: 100% var(--mp-hv-line-w, 1px); background-position: 0 100%; }
}
/* マーカー（太い蛍光ペン） */
.mp-hv-line--marker .mp-hv-target,
.mp-hv-line--marker.mp-hv-target {
  --mp-hv-line-w: .45em;
  background-image: linear-gradient(var(--mp-hv-accent, #ffe066), var(--mp-hv-accent, #ffe066));
  background-position: 100% 88%;
  padding-bottom: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mp-hv-line--marker:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line--marker.mp-hv-target:is(:hover, :focus-visible) { background-position: 0 88%; }

/* =========================================================
   飾り（主にナビメニュー向け）
   ========================================================= */

/* SWELL標準のメニュー下線アニメーションを、mp-hvクラスを付けた項目だけオフにする */
.c-gnav .menu-item[class*="mp-hv-"] > a::after,
.c-gnav .menu-item > a[class*="mp-hv-"]::after {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* ドット mp-hv-dot */
.mp-hv-dot { position: relative; }
.mp-hv-dot__el {
  position: absolute;
  left: 50%;
  bottom: var(--mp-hv-dot-y, .1em);
  width: var(--mp-hv-dot-size, 5px);
  height: var(--mp-hv-dot-size, 5px);
  margin-left: calc(var(--mp-hv-dot-size, 5px) / -2);
  border-radius: 50%;
  background-color: var(--mp-hv-accent, currentColor);
  transform: scale(0);
  transition: transform calc(var(--_d) * .7) cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.mp-hv-dot:is(:hover, :focus-visible) .mp-hv-dot__el { transform: scale(1); }

/* 対角ブラケット mp-hv-bracket */
.mp-hv-bracket .mp-hv-target,
.mp-hv-bracket.mp-hv-target {
  position: relative;
  display: inline-block;
  padding: .1em .35em;
}
.mp-hv-bracket .mp-hv-target::before,
.mp-hv-bracket .mp-hv-target::after,
.mp-hv-bracket.mp-hv-target::before,
.mp-hv-bracket.mp-hv-target::after {
  content: '' !important;
  position: absolute;
  width: .5em;
  height: .5em;
  border: 0 solid var(--mp-hv-accent, currentColor);
  pointer-events: none;
  transition: width var(--_d) var(--_e), height var(--_d) var(--_e);
}
.mp-hv-bracket .mp-hv-target::before,
.mp-hv-bracket.mp-hv-target::before {
  top: -.2em;
  left: -.1em;
  border-top-width: var(--mp-hv-stroke, 1.5px);
  border-left-width: var(--mp-hv-stroke, 1.5px);
}
.mp-hv-bracket .mp-hv-target::after,
.mp-hv-bracket.mp-hv-target::after {
  bottom: -.2em;
  right: -.1em;
  border-bottom-width: var(--mp-hv-stroke, 1.5px);
  border-right-width: var(--mp-hv-stroke, 1.5px);
}
.mp-hv-bracket:is(:hover, :focus-visible) .mp-hv-target::before,
.mp-hv-bracket:is(:hover, :focus-visible) .mp-hv-target::after,
.mp-hv-bracket.mp-hv-target:is(:hover, :focus-visible)::before,
.mp-hv-bracket.mp-hv-target:is(:hover, :focus-visible)::after {
  width: calc(100% + .2em);
  height: calc(100% + .4em);
}

/* テキストアウトライン mp-hv-outline */
.mp-hv-outline .mp-hv-target,
.mp-hv-outline.mp-hv-target {
  -webkit-text-stroke: 0 currentColor;
  transition: -webkit-text-stroke-width var(--_d) var(--_e), -webkit-text-fill-color var(--_d) var(--_e);
}
.mp-hv-outline:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-outline.mp-hv-target:is(:hover, :focus-visible) {
  -webkit-text-stroke-width: var(--mp-hv-stroke, 1px);
  -webkit-text-fill-color: transparent;
}

/* 矢印が現れる mp-hv-reveal（矢印のSVGはJSが差し込む） */
/* テキストと矢印を高さ中央で揃える（SWELLの.ttlの指定に負けないよう!important） */
.mp-hv-reveal .mp-hv-target,
.mp-hv-reveal.mp-hv-target {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle;
}
/* 外側：幅が広がってスペースを作る */
.mp-hv-reveal__icon {
  --_rs: var(--mp-hv-reveal-size, .75em);
  position: relative;
  top: var(--mp-hv-reveal-y, 0);
  display: inline-block;
  align-self: center;
  vertical-align: middle;
  flex-shrink: 0;
  width: 0;
  height: var(--_rs);
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 0;
  transition: width var(--_d) var(--_e), margin-left var(--_d) var(--_e), opacity var(--_d) var(--_e);
}
/* 内側：矢印の枠（丸背景のときは円になる） */
.mp-hv-reveal__inner {
  display: grid;
  place-items: center;
  width: var(--_rs);
  height: var(--_rs);
  overflow: hidden;
  color: var(--mp-hv-accent, currentColor);
}
/* 矢印は左下に隠れた位置から、矢印の向き（右上）へ出てくる */
.mp-hv-reveal__icon svg {
  display: block;
  width: var(--mp-hv-reveal-size, .75em) !important;
  height: var(--mp-hv-reveal-size, .75em) !important;
  max-width: none;
  fill: none !important;
  stroke: currentColor !important;
  transform: translate(calc(var(--_rs) * -1), var(--_rs));
  transition: transform var(--_d) var(--_e);
}
.mp-hv-reveal:is(:hover, :focus-visible) .mp-hv-reveal__icon {
  width: var(--_rs);
  margin-left: .4em;
  opacity: 1;
}
.mp-hv-reveal:is(:hover, :focus-visible) .mp-hv-reveal__icon svg {
  transform: translate(0, 0);
  transition-delay: calc(var(--_d) * .25);
}
/* 丸背景の中に矢印 mp-hv-reveal--circle */
.mp-hv-reveal--circle .mp-hv-reveal__icon { --_rs: var(--mp-hv-reveal-circle, 1.7em); }
.mp-hv-reveal--circle .mp-hv-reveal__inner {
  border-radius: 50%;
  background-color: var(--mp-hv-reveal-bg, #ffffff);
  transform: scale(.4);
  transition: transform var(--_d) var(--_e);
}
.mp-hv-reveal--circle:is(:hover, :focus-visible) .mp-hv-reveal__inner { transform: scale(1); }

/* バウンス（1文字ずつ波打つ）mp-hv-bounce */
.mp-hv-b { display: inline-block; white-space: pre; }
.mp-hv-bounce:is(:hover, :focus-visible) .mp-hv-b {
  animation: mp-hv-wave calc(var(--_d) * 1.2) var(--_e) both;
  animation-delay: calc(var(--i, 0) * var(--mp-hv-stagger, .03s));
}
@keyframes mp-hv-wave {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-.35em); }
  70% { transform: translateY(.05em); }
}

/* ほかの項目を薄くする mp-hv-dim（同じリスト内で効く） */
.mp-hv-dim { transition: opacity var(--_d) var(--_e); }
:is(ul, ol, nav, p):has(.mp-hv-dim:is(:hover, :focus-visible)) .mp-hv-dim:not(:hover):not(:focus-visible) {
  opacity: var(--mp-hv-dim, .35) !important;
}

/* ---------- 追加したアイコン mp-icon-名前（リンクにアイコンが無いときに右端へ追加される） ---------- */
svg.mp-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: .4em;
  vertical-align: -.12em;
}

/* ---------- グラデーション背景 mp-hv-grad（ホバーで流れる） ---------- */
.mp-hv-grad {
  background-image: var(--mp-hv-grad, none) !important;
  background-size: 200% 100% !important;
  background-position: 0 50% !important;
  background-repeat: no-repeat !important;
  transition-property: background-position, color, background-color, border-color, opacity !important;
  transition-duration: var(--_d, .5s) !important;
  transition-timing-function: var(--_e, ease) !important;
}
.mp-hv-grad:is(:hover, :focus-visible) { background-position: 100% 50% !important; }

/* ---------- マグネット mp-hv-magnet ---------- */
.mp-hv-magnet {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

/* ---------- SWELLブロック調整 ---------- */
/* SWELLボタン（スタイル「ノーマル」基準）：標準のホバー移動・透過を止める */
.swell-block-button__link.mp-hv-host:not(.mp-hv-magnet),
.swell-block-button__link.mp-hv-host:not(.mp-hv-magnet):hover { transform: none !important; }
.swell-block-button__link.mp-hv-host:hover { opacity: 1 !important; }
.swell-block-button__link > .mp-hv-icon__box { margin-left: .5em; }
.swell-block-button__link .mp-hv-icon__box > svg,
.swell-block-linkList__link .mp-hv-icon__box > svg { margin: 0 !important; }

/* =========================================================
   SWELLボタンをテキストボタンにする mp-sw-text
   ボタンブロック（スタイル：ノーマル）の追加CSSクラスに入れる
   アイコンはSWELLのボタン設定で「右アイコン」を選ぶ
   ========================================================= */
.mp-sw-text .swell-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: .8em;
  min-width: 0 !important;
  width: auto !important;
  padding: .3em 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--mp-hv-fg, inherit) !important;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none !important;
}
.mp-sw-text .swell-block-button__link:is(:hover, :focus-visible) {
  color: var(--mp-hv-fg-h, var(--mp-hv-fg, inherit)) !important;
}
/* アイコンの入れ物（アニメーションありは箱、なしはSVGそのもの） */
.mp-sw-text .swell-block-button__link > :is(.mp-hv-icon__box, svg.__icon) {
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--mp-btn-icon, 1.9em) !important;
  height: var(--mp-btn-icon, 1.9em) !important;
  margin: 0 !important;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: var(--mp-hv-icon-bg, transparent);
  color: var(--mp-hv-icon-fg, currentColor);
  transition: background-color var(--_d, .45s) var(--_e, ease), color var(--_d, .45s) var(--_e, ease), border-color var(--_d, .45s) var(--_e, ease);
}
.mp-sw-text .swell-block-button__link > svg.__icon { padding: calc(var(--mp-btn-icon, 1.9em) * .27); }
.mp-sw-text .swell-block-button__link > svg.__icon:not([fill="none"]) { fill: currentColor; }
.mp-sw-text .swell-block-button__link > .mp-hv-icon__box > svg {
  width: calc(var(--mp-btn-icon, 1.9em) * .45) !important;
  height: calc(var(--mp-btn-icon, 1.9em) * .45) !important;
}
.mp-sw-text .swell-block-button__link:is(:hover, :focus-visible) > :is(.mp-hv-icon__box, svg.__icon) {
  background-color: var(--mp-hv-icon-bg-h, var(--mp-hv-icon-bg, transparent));
  color: var(--mp-hv-icon-fg-h, var(--mp-hv-icon-fg, currentColor));
}
/* アイコンの形 */
.mp-sw-icon-fill .swell-block-button__link > :is(.mp-hv-icon__box, svg.__icon) { border-color: transparent; }
.mp-sw-icon-square .swell-block-button__link > :is(.mp-hv-icon__box, svg.__icon) { border-radius: 28%; }
.mp-sw-icon-plain .swell-block-button__link > :is(.mp-hv-icon__box, svg.__icon) {
  width: auto !important;
  height: auto !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
}
.mp-sw-icon-plain .swell-block-button__link > svg.__icon,
.mp-sw-icon-plain .swell-block-button__link > .mp-hv-icon__box > svg {
  width: calc(var(--mp-btn-icon, 1.9em) * .55) !important;
  height: calc(var(--mp-btn-icon, 1.9em) * .55) !important;
}
.mp-sw-icon-plain .swell-block-button__link > .mp-hv-icon__box > svg.mp-ic-long {
  width: calc(var(--mp-btn-icon, 1.9em) * 1.4) !important;
  height: calc(var(--mp-btn-icon, 1.9em) * .38) !important;
}
.mp-sw-icon-plain.mp-hv-icon--push .swell-block-button__link > .mp-hv-icon__box,
.mp-sw-icon-plain .mp-hv-icon--push > .mp-hv-icon__box { overflow: visible; }
/* アイコンをテキストの左に */
.mp-sw-icon-left .swell-block-button__link > :is(.mp-hv-icon__box, svg.__icon) { order: -1; }
/* ボタン全体の下に線（ホバーで濃い線が左から） */
.mp-sw-ul .swell-block-button__link {
  padding-bottom: .7em !important;
  background-image: linear-gradient(var(--mp-hv-bd-h, currentColor), var(--mp-hv-bd-h, currentColor)), linear-gradient(var(--mp-hv-bd, rgba(0, 0, 0, .15)), var(--mp-hv-bd, rgba(0, 0, 0, .15))) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100%, 0 100% !important;
  background-size: 0% var(--mp-hv-line-w, 1px), 100% var(--mp-hv-line-w, 1px) !important;
  transition: background-size var(--_d, .45s) var(--_e, ease), color var(--_d, .45s) var(--_e, ease);
}
.mp-sw-ul .swell-block-button__link:is(:hover, :focus-visible) {
  background-size: 100% var(--mp-hv-line-w, 1px), 100% var(--mp-hv-line-w, 1px) !important;
}

/* =========================================================
   カスタムHTMLボタン mp-btn
   ========================================================= */
.mp-btn {
  --_bg: var(--mp-hv-bg, #1d1f23);
  --_fg: var(--mp-hv-fg, #ffffff);
  --_bd: var(--mp-hv-bd, transparent);
  --_ibg: var(--mp-hv-icon-bg, #ffffff);
  --_ifg: var(--mp-hv-icon-fg, #1d1f23);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  box-sizing: border-box;
  max-width: 100%;
  padding: 1em 1.6em;
  border: 1px solid var(--_bd);
  background-color: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  text-decoration: none !important;
  cursor: pointer;
  transition: color var(--_d) var(--_e), background-color var(--_d) var(--_e), border-color var(--_d) var(--_e), opacity var(--_d) var(--_e);
}
.mp-btn:is(:hover, :focus-visible) {
  color: var(--mp-hv-fg-h, var(--_fg));
  border-color: var(--mp-hv-bd-h, var(--_bd));
}
.mp-btn:not(.mp-hv-fill):is(:hover, :focus-visible) { background-color: var(--mp-hv-bg-h, var(--_bg)); }
.mp-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mp-btn__label { min-width: 0; }
.mp-btn__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background-color: var(--_ibg);
  color: var(--_ifg);
  transition: background-color var(--_d) var(--_e), color var(--_d) var(--_e);
}
.mp-btn:is(:hover, :focus-visible) .mp-btn__icon {
  background-color: var(--mp-hv-icon-bg-h, var(--_ibg));
  color: var(--mp-hv-icon-fg-h, var(--_ifg));
}
.mp-btn__icon svg { width: 1.05em; height: 1.05em; }
.mp-btn__icon .mp-hv-icon__box { width: 100%; height: 100%; border-radius: inherit; }

/* pill：黒い丸ボタン＋円アイコン */
.mp-btn--pill {
  min-width: min(100%, 19em);
  padding: .75em .75em .75em 2.2em;
  border-radius: 999px;
}
/* box：枠線＋細い長矢印 */
.mp-btn--box {
  --_ibg: var(--mp-hv-icon-bg, transparent);
  --_ifg: var(--mp-hv-icon-fg, currentColor);
  width: min(100%, 36em);
  padding: 1.2em 1.8em;
  border-radius: 0;
  font-weight: 500;
  letter-spacing: .2em;
}
.mp-btn--box .mp-btn__icon { width: auto; height: auto; border-radius: 0; }
.mp-btn--box .mp-btn__icon svg { width: 2.8em; height: .8em; }
/* text：テキスト＋枠線の小さい円 */
.mp-btn--text {
  --_bg: var(--mp-hv-bg, transparent);
  --_fg: var(--mp-hv-fg, currentColor);
  --_ibg: var(--mp-hv-icon-bg, transparent);
  --_ifg: var(--mp-hv-icon-fg, currentColor);
  justify-content: flex-start;
  gap: .8em;
  padding: .3em 0;
  font-weight: 500;
}
.mp-btn--text .mp-btn__icon {
  width: var(--mp-btn-icon, 1.9em);
  height: var(--mp-btn-icon, 1.9em);
  border: 1px solid currentColor;
  box-sizing: border-box;
}
.mp-btn--text .mp-btn__icon svg { width: calc(var(--mp-btn-icon, 1.9em) * .45); height: calc(var(--mp-btn-icon, 1.9em) * .45); }

/* ---------- テキストボタンのアイコンの形 ---------- */
/* 塗りの円（枠線なし） */
.mp-btn.mp-btn--icon-fill .mp-btn__icon { border-color: transparent; }
/* 角丸の四角 */
.mp-btn.mp-btn--icon-square .mp-btn__icon { border-radius: 28%; }
/* 枠なし（アイコンだけ） */
.mp-btn.mp-btn--icon-plain .mp-btn__icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.mp-btn.mp-btn--icon-plain .mp-btn__icon svg { width: calc(var(--mp-btn-icon, 1.9em) * .55); height: calc(var(--mp-btn-icon, 1.9em) * .55); }
.mp-btn.mp-btn--icon-plain .mp-btn__icon .mp-hv-icon__box { overflow: visible; }
.mp-btn.mp-btn--icon-plain.mp-hv-icon:not(.mp-hv-icon--push):not(.mp-hv-icon--spin) .mp-btn__icon .mp-hv-icon__box { overflow: hidden; }
/* 長い矢印 */
.mp-btn:not(.mp-btn--box) .mp-btn__icon svg.mp-ic-long { width: calc(var(--mp-btn-icon, 1.9em) * 1.4); height: calc(var(--mp-btn-icon, 1.9em) * .38); }
/* アイコンをテキストの左に */
.mp-btn.mp-btn--icon-left .mp-btn__icon { order: -1; }

/* ---------- テキストボタンの下線（ボタン全体の下に1本） mp-btn--ul ---------- */
.mp-btn.mp-btn--ul {
  border-width: 0;
  padding-bottom: .65em;
}
.mp-btn--ul::before,
.mp-btn--ul::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mp-hv-line-w, 1px);
  pointer-events: none;
}
.mp-btn--ul::before { background-color: var(--mp-hv-bd, color-mix(in srgb, currentColor 25%, transparent)); }
.mp-btn--ul::after {
  background-color: var(--mp-hv-bd-h, currentColor);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--_d) var(--_e);
}
.mp-btn--ul:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: 0 50%; }
/* card：サムネイル付きの大きいピル */
.mp-btn--card {
  justify-content: flex-start;
  gap: 1.4em;
  width: min(100%, 26em);
  padding: .55em 1em .55em .55em;
  border-radius: 999px;
}
.mp-btn--card .mp-btn__label { flex: 1; }
.mp-btn__thumb {
  flex-shrink: 0;
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  overflow: hidden;
}
.mp-btn__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--_d) var(--_e);
}
.mp-btn:is(:hover, :focus-visible) .mp-btn__thumb img { transform: scale(1.1); }

/* サイズ */
.mp-btn--sm { font-size: .875em; }
.mp-btn--lg { font-size: 1.25em; }
.mp-btn--full { width: 100%; }

/* ---------- 動きを減らす設定の人には即時切替 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-hv-host,
  .mp-hv-host *,
  .mp-btn,
  .mp-btn * {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
}