/* =========================================================
   MONOPAGE Toolkit｜補助CSS
   ・端末別のアニメーションOFF（mp-off-sp / mp-off-pc）
   ライブラリ本体のあとに読み込まれます
   ========================================================= */

/* ---------- ホバーのアイコン：大きさ・上下位置（パネルの数値） ----------
   変数は各ブロックに付き、中のリンクへ受け継がれる */
.mp-hv-icon--circle .mp-hv-icon__box {
  width: var(--mptk-icon-box, 2em);
  height: var(--mptk-icon-box, 2em);
}
.mp-hv-icon--circle .mp-hv-icon__box > svg {
  width: var(--mptk-icon-size, 1em);
  height: var(--mptk-icon-size, 1em);
}
.mptk-ic-size :is(.mp-hv-icon__box > svg, svg.mp-icon, svg.__icon, .swell-block-linkList__icon),
.mptk-ic-size:is(.mp-hv-host, [class*="mp-icon-"]) :is(svg.mp-icon, svg.__icon) {
  width: var(--mptk-icon-size) !important;
  height: var(--mptk-icon-size) !important;
  font-size: inherit;
}
.mp-hv-icon .mp-hv-icon__box,
svg.mp-icon {
  position: relative;
  top: var(--mptk-icon-y, 0px);
}

/* ---------- テキストとアイコンの間隔 ----------
   アイコンを箱（円など）で包んだとき、アイコン自身の margin が箱の中に残ると
   アイコンが箱の中心からずれ、箱はテキストにくっつく。
   → 箱の中のアイコンは margin 0、間隔は箱の外側に付ける */
.mp-hv-icon__box > svg {
  margin: 0 !important;
}
.mp-hv-icon__box {
  margin-left: var(--mptk-icon-gap, .5em) !important;
  margin-right: 0 !important;
}
/* 左アイコン（SWELLボタンの「左アイコン」）のときは右側に間隔 */
.mp-hv-icon__box:has(> svg.-left) {
  margin-left: 0 !important;
  margin-right: var(--mptk-icon-gap, .5em) !important;
}
/* 箱で包まない追加アイコン（mp-icon-名前 だけ使ったとき） */
svg.mp-icon {
  margin-left: var(--mptk-icon-gap, .4em);
}
/* 矢印が現れる：出てきたときの間隔 */
.mp-hv-reveal:is(:hover, :focus-visible) .mp-hv-reveal__icon {
  margin-left: var(--mptk-icon-gap, .4em);
}

/* ---------- 下線・マーカーの向き ----------
   色の指定（mp-hv-color）は background-position もアニメーションさせるため、
   線の起点が右から左へ流れてしまい「左から走らない」。
   → 線・マーカーは長さ（background-size）だけを動かし、起点は瞬時に切り替える */
.mp-hv-line .mp-hv-target,
.mp-hv-line.mp-hv-target {
  transition-property: background-size, color, background-color, border-color, opacity, text-decoration-color !important;
}

/* 右から（mp-hv-line--rtl）：右端から伸び、離すと左へ抜ける */
.mp-hv-line--rtl .mp-hv-target,
.mp-hv-line--rtl.mp-hv-target {
  background-position: 0 100%;
}
.mp-hv-line--rtl:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line--rtl.mp-hv-target:is(:hover, :focus-visible) {
  background-position: 100% 100%;
}
.mp-hv-line--marker.mp-hv-line--rtl .mp-hv-target,
.mp-hv-line--marker.mp-hv-line--rtl.mp-hv-target {
  background-position: 0 88%;
}
.mp-hv-line--marker.mp-hv-line--rtl:is(:hover, :focus-visible) .mp-hv-target,
.mp-hv-line--marker.mp-hv-line--rtl.mp-hv-target:is(:hover, :focus-visible) {
  background-position: 100% 88%;
}

/* スマホ（〜599px）でOFF */
@media (max-width: 599px) {
  .mp-js .mp-off-sp[class*="mp-in-"],
  .mp-js .mp-off-sp .mp-char,
  .mp-js .mp-off-sp .mp-mask-inner,
  .mp-js .mp-off-sp .mp-stagger-item,
  .mp-js .mp-off-sp.mp-in-cover > :not(.mp-cover-band),
  .mp-js .mp-off-sp:is(.mp-in-zoom, .mp-in-reveal-x, .mp-in-reveal-y, .mp-in-circle) img {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .mp-js .mp-off-sp .mp-cover-band {
    display: none !important;
  }
  .mp-js .mp-off-sp.mp-in-marker :is(mark, .mp-mark, .swl-marker) {
    background-size: 100% 100% !important;
    transition: none !important;
  }
}

/* PC（960px〜）でOFF */
@media (min-width: 960px) {
  .mp-js .mp-off-pc[class*="mp-in-"],
  .mp-js .mp-off-pc .mp-char,
  .mp-js .mp-off-pc .mp-mask-inner,
  .mp-js .mp-off-pc .mp-stagger-item,
  .mp-js .mp-off-pc.mp-in-cover > :not(.mp-cover-band),
  .mp-js .mp-off-pc:is(.mp-in-zoom, .mp-in-reveal-x, .mp-in-reveal-y, .mp-in-circle) img {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .mp-js .mp-off-pc .mp-cover-band {
    display: none !important;
  }
  .mp-js .mp-off-pc.mp-in-marker :is(mark, .mp-mark, .swl-marker) {
    background-size: 100% 100% !important;
    transition: none !important;
  }
}