/* ページ全体の動き（js/motion.js と組み）。
   隠したり動かしたりするのは、JS が付けるクラス（.m-split / .m-curtain / .m-lines / .is-flowing など）があるときだけ。
   JS が動かないときや、動きを減らす設定のときは、すべての内容がそのまま見える */

/* ── 言葉の帯（マーキー）：雑誌の欄外の見出しのように、細く・小さく・静かに ──
   大きな明朝・白抜きの英字・長いダッシュは使わない（定番の見た目を避ける）。
   文字は全部同じ1色・同じ書体・本文より少し大きい程度。区切りは金の小さな点 */
.mq {
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  padding: 12px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  background: var(--paper);
}
.mq--paper-2 { background: var(--paper-2); }
.mq-track { display: flex; width: max-content; }
.mq.is-flowing .mq-track { will-change: transform; }
.mq-set { display: flex; flex: none; align-items: center; }
.mq-w {
  padding: 0 clamp(16px, 1.6vw, 24px);
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--muted);
}
.mq-dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* ── 見出しのせり上がり：1行ずつ、下からマスクの中を持ち上がる ── */
.m-split .m-line {
  display: block;
  overflow: hidden;
  /* 明朝の払いが切れないよう、上下に少しだけ余白を持たせる */
  padding: 0.08em 0 0.12em;
  margin: -0.08em 0 -0.12em;
}
/* 「折り返さない」にはしない：書体の読み込みや文字の拡大で幅が足りなくなっても、右端が切れずに次の行へ回る（JS が測り直して整える） */
.m-split .m-line-in {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.12s + 0.05s);
}
.m-split.is-lines-in .m-line-in { transform: none; }
/* 見出しそのものに .reveal が付いている場合は、上下の移動を重ねない（フェードだけ残す） */
.js .m-split.reveal { transform: none; }

/* ── 写真の幕開け：中央から左右に幕が開き、少し大きい状態から等倍へ ── */
.m-curtain {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.3s var(--ease-out);
}
.m-curtain.is-open { clip-path: inset(0 0 0 0); }
/* 写真に .reveal も付いている場合（代表の写真）、.js .reveal の transition が clip-path の transition を上書きして一瞬で開くので、まとめて書く */
.js .reveal.m-curtain { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), clip-path 1.3s var(--ease-out); }
.m-curtain .m-curtain-img, .m-curtain.m-curtain-self {
  transform: scale(1.12);
  transition: transform 1.8s var(--ease-out);
}
.m-curtain.m-curtain-self { transition: clip-path 1.3s var(--ease-out), transform 1.8s var(--ease-out); }
.m-curtain.is-open .m-curtain-img, .m-curtain.m-curtain-self.is-open { transform: none; }

/* ── 罫線の伸び：画面に入ったら、左から伸びる ── */
/* 料金表（PC：セルごとに下線を引き、左のセルから順に伸ばして1本の線に見せる） */
@media (min-width: 721px) {
  .m-lines.pricing-table thead th,
  .m-lines.pricing-table tbody th,
  .m-lines.pricing-table td {
    border-bottom-color: transparent;
    background-image: linear-gradient(var(--line), var(--line));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    transition: background-size 0.5s linear;
    transition-delay: calc(var(--r, 0) * 0.07s + var(--c, 0) * 0.42s);
  }
  .m-lines.pricing-table thead th { background-image: linear-gradient(var(--gold), var(--gold)); }
}
/* 料金表（スマホ：行ごとの下線） */
@media (max-width: 720px) {
  .m-lines.pricing-table tbody tr {
    border-bottom-color: transparent;
    background: linear-gradient(var(--line), var(--line)) no-repeat left bottom / 0% 1px;
    transition: background-size 0.9s var(--ease-out);
    transition-delay: calc(var(--r, 0) * 0.07s);
  }
}
.m-lines.pricing-table.is-lines-in th,
.m-lines.pricing-table.is-lines-in td,
.m-lines.pricing-table.is-lines-in tbody tr { background-size: 100% 1px; }

/* 研修：上下の罫線と、各プランの中の罫線 */
.m-lines.training-plans { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
.m-lines.training-plans::before,
.m-lines.training-plans::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.4s var(--ease-out);
}
.m-lines.training-plans::before { top: -1px; }
.m-lines.training-plans::after { bottom: -1px; transition-delay: 0.25s; }
.m-lines.training-plans .training-list {
  border-top-color: transparent;
  background: linear-gradient(var(--line), var(--line)) no-repeat left top / 0% 1px;
  transition: background-size 1s var(--ease-out);
  transition-delay: calc(0.3s + var(--c, 0) * 0.15s);
}
.m-lines.training-plans.is-lines-in::before,
.m-lines.training-plans.is-lines-in::after { transform: scaleX(1); }
.m-lines.training-plans.is-lines-in .training-list { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .m-split .m-line-in, .m-curtain, .m-curtain .m-curtain-img { transform: none !important; clip-path: none !important; transition: none !important; }
}