/*! LP Motion Kit v1.0 (2026-10-31) — 依存なし。JSが動かない・動きを減らす設定の人には全部そのまま見える */

:root {
  --mk-ease: cubic-bezier(.22, 1, .36, 1); /* 速く出て静かに止まる */
  --mk-dur: .8s;
  --mk-dist: 24px;
  --mk-marker: #F2C84B;   /* 決め文の下線色。案件の色に差し替える */
  --mk-marker-h: .34em;   /* 下線の太さ。帯にしない */
}

/* ---------- 出現（data-reveal） ---------- */
.mk-on [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--mk-dur) var(--mk-ease),
    transform var(--mk-dur) var(--mk-ease),
    clip-path calc(var(--mk-dur) * 1.3) var(--mk-ease);
  transition-delay: var(--mk-delay, 0s);
}
.mk-on [data-reveal="up"]    { transform: translateY(var(--mk-dist)); }
.mk-on [data-reveal="left"]  { transform: translateX(calc(var(--mk-dist) * -1)); }
.mk-on [data-reveal="right"] { transform: translateX(var(--mk-dist)); }
.mk-on [data-reveal="zoom"]  { transform: scale(.96); }
.mk-on [data-reveal="fade"]  { transform: none; }
.mk-on [data-reveal].is-in   { opacity: 1; transform: none; }

/* 写真：下から幕が上がる＋中の画像がわずかに寄る
   （枠そのものを clip-path で隠すと画面に入った判定が出ないので、中身にかける） */
.mk-on [data-reveal="mask"] { opacity: 1; transform: none; }
.mk-on [data-reveal="mask"] > * {
  clip-path: inset(100% 0 0 0);
  transition: clip-path calc(var(--mk-dur) * 1.4) var(--mk-ease), transform 1.6s var(--mk-ease);
  transition-delay: var(--mk-delay, 0s);
}
.mk-on [data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }
.mk-on [data-reveal="mask"] > img:not([data-parallax]) { transform: scale(1.08); }
.mk-on [data-reveal="mask"].is-in > img:not([data-parallax]) { transform: none; }

/* 見出し：1行ずつ下からせり上がる。行は <span class="mk-line"><span>…</span></span> で手で区切る */
.mk-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mk-on [data-reveal="lines"] { opacity: 1; transform: none; }
.mk-on [data-reveal="lines"] .mk-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .95s var(--mk-ease);
  transition-delay: calc(var(--mk-delay, 0s) + var(--i, 0) * 90ms);
}
.mk-on [data-reveal="lines"].is-in .mk-line > span { transform: none; }

/* 線画：SVGの path に class="mk-path" pathLength="1" を付ける
   （[pathLength] 属性で指定するとChromeが再計算せず線が出ない。必ずクラスで指定） */
.mk-on [data-reveal="draw"] { opacity: 1; transform: none; }
.mk-on [data-reveal="draw"] .mk-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--mk-ease); transition-delay: var(--mk-delay, 0s); }
.mk-on [data-reveal="draw"].is-in .mk-path { stroke-dashoffset: 0; }

/* ---------- 決め文の下線（左から引かれる） ---------- */
.mk-marker {
  background: linear-gradient(var(--mk-marker), var(--mk-marker)) left 0 bottom .04em / 100% var(--mk-marker-h) no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mk-on .mk-marker { background-size: 0% var(--mk-marker-h); transition: background-size 1.1s var(--mk-ease) .25s; }
.mk-on .mk-marker.is-in { background-size: 100% var(--mk-marker-h); }

/* ---------- 数字 ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- パララックス（枠の中の写真をゆっくり動かす） ---------- */
.mk-px-frame { position: relative; overflow: hidden; }
.mk-px-frame > [data-parallax] { position: absolute; left: 0; width: 100%; top: -10%; height: 120%; object-fit: cover; will-change: transform; }

/* ---------- ボタン ---------- */
.mk-btn { transition: transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease), background-color .25s ease; }
.mk-btn__arrow { display: inline-block; transition: transform .25s var(--mk-ease); }
@media (hover: hover) {
  .mk-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .45); }
  .mk-btn:hover .mk-btn__arrow { transform: translateX(4px); }
}
.mk-btn:active { transform: translateY(0) scale(.98); }

/* ---------- スマホ下部の固定ボタン ---------- */
[data-sticky-cta] {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.mk-js [data-sticky-cta] { transform: translateY(115%); transition: transform .45s var(--mk-ease); }
.mk-js [data-sticky-cta].is-shown { transform: none; }

/* ---------- FAQ（details をなめらかに開閉） ---------- */
details.mk-acc { overflow: hidden; box-sizing: border-box; }
details.mk-acc > summary { cursor: pointer; list-style: none; }
details.mk-acc > summary::-webkit-details-marker { display: none; }
.mk-acc__icon { display: inline-block; transition: transform .3s var(--mk-ease); }
details.mk-acc[open]:not(.is-closing) .mk-acc__icon { transform: rotate(45deg); }

/* ---------- 横に流れる帯（声・ロゴ・写真） ---------- */
.mk-marquee { overflow: hidden; }
.mk-marquee__track { display: flex; width: max-content; }
.mk-marquee__track > * { flex: none; margin-right: var(--mk-gap, 16px); }
.mk-marquee.is-running .mk-marquee__track { animation: mk-marquee var(--mk-speed, 45s) linear infinite; }
.mk-marquee.is-running:hover .mk-marquee__track,
.mk-marquee.is-running:focus-within .mk-marquee__track { animation-play-state: paused; }
@keyframes mk-marquee { to { transform: translateX(-50%); } }

/* ---------- 読み進み度バー（Motion の scroll で動かす） ---------- */
.mk-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0); z-index: 60; background: var(--mk-marker); }

/* ---------- 動きを減らす設定の人（JSが mk-on を付けなかったとき） ---------- */
.mk-js:not(.mk-on) .mk-marquee { overflow-x: auto; }
.mk-js:not(.mk-on) .mk-progress { display: none; }
.mk-js:not(.mk-on) .mk-btn, .mk-js:not(.mk-on) .mk-btn__arrow, .mk-js:not(.mk-on) .mk-acc__icon { transition: none; }