/*
 * Claude Design の出力を静的 HTML に移植したときに足した CSS（docs/hp-static-port-design.md）。
 * デザイン本体（ds/・site.css）は出力のまま触らず、差分だけをここに置く。
 */

/*
 * 元はテンプレートの sc-if で要素ごと出し入れしていたものを hidden 属性で切り替えている。
 * site.css はスマホ幅で .lp-drawer{display:block} を指定しており、UA の [hidden] より強いため、
 * これが無いとドロワーが最初から開いたままになる
 */
[hidden] {
  display: none !important;
}

/*
 * スマホメニューの開閉アニメーション。元のデザインは要素を出し入れするだけで、ぱっと開いてぱっと消えていた。
 * js/site.js が hidden を外した次のフレームで .is-open を付ける（display が切り替わった同じフレームでは
 * transition が走らないため）。閉じるときは .is-open を外し、動き終わってから hidden に戻す
 */
@media (max-width:1100px) {
  .lp-drawer__scrim { opacity: 0; transition: opacity var(--dur-slow) var(--ease-snap); }
  .lp-drawer__panel { transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-snap); }
  .lp-drawer.is-open .lp-drawer__scrim { opacity: 1; }
  .lp-drawer.is-open .lp-drawer__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-drawer__scrim, .lp-drawer__panel { transition: none; }
}

/* アプリの URL 移動のお知らせ（旧 inject-notice.py で差し込んでいたもの） */
#shiaikun-move-notice { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.shiaikun-move-notice__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.shiaikun-move-notice__card { position: relative; background: #fff; color: #213547; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.24); max-width: 460px; width: 100%; padding: 32px 24px; text-align: center; }
.shiaikun-move-notice__card h2 { font-size: 18px; line-height: 1.6; margin: 0 0 12px; }
.shiaikun-move-notice__card p { font-size: 14px; line-height: 1.8; color: #616161; margin: 0; }
.shiaikun-move-notice__go { display: inline-block; margin: 20px 0 12px; padding: 12px 28px; background: #1976d2; color: #fff; border-radius: 8px; font-weight: 700; text-decoration: none; }
.shiaikun-move-notice__go:hover { background: #1565c0; color: #fff; }
.shiaikun-move-notice__close { display: block; margin: 0 auto; padding: 8px 16px; background: none; border: 0; color: #616161; font-size: 13px; cursor: pointer; text-decoration: underline; }

/*
 * お問い合わせは入力フォームだけにした（右側のカードを削除）。
 * site.css の .ct-grid は2カラム前提なので、1カラムに直して幅を抑える。
 */
.ct-grid {
  grid-template-columns: 1fr;
  max-width: 760px;
}

/*
 * Instagram への導線。元は LINE 用のボタン（site.css の .lp-line-btn、LINE緑）を
 * 使っていたが、行き先が変わったので色も合わせる。
 */
.hp-ig-btn {
  background: linear-gradient(90deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
  color: var(--grey-0);
  border-color: transparent;
}
.hp-ig-btn:hover {
  filter: brightness(1.06);
  color: var(--grey-0);
}

/*
 * 料金: そのプラン向けのオプションを、プランの枠の中に差し込む。
 * どのプランに対する追加かが、見ただけで分かるようにするため。
 */
.hp-plan-opt {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-card, 12px);
}
.hp-plan-opt__n {
  font: var(--type-heading-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.hp-plan-opt__p {
  font: var(--fw-black) var(--fs-xl) / 1.2 var(--font-display);
  margin-top: var(--space-1);
}
.hp-plan-opt__p span {
  font: var(--type-body-sm);
}
.hp-plan-opt__d {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* お知らせの「次回以降表示しない」 */
.shiaikun-move-notice__skip { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: #616161; cursor: pointer; }
.shiaikun-move-notice__skip-input { width: 16px; height: 16px; cursor: pointer; }

/*
 * スマホではヒーローのイメージ（進行画面のモック）を出さない。
 * 縦に積むと画面の大半を占め、すぐ下の内容まで届かなくなるため。
 */
@media (max-width: 640px) {
  .hp-hero-visual {
    display: none;
  }
}

/* プランの高さをそろえる。片方だけ短いと、並べたときに比較しづらい */
.lp-plans--2 {
  align-items: stretch;
}
.lp-plans--2 .lp-plan,
.lp-plans--2 .lp-plan__in {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* ボタンは下端にそろえる */
.lp-plans--2 .lp-plan__cta {
  margin-top: auto;
}

/* 自動投稿よけの欄。画面にも読み上げにも出さないが、機械は入力してしまう */
.hp-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 送信に失敗したときの案内 */
.ct-error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card, 12px);
  background: var(--red-100, #ffebee);
  color: var(--red-700, #c62828);
  font: var(--type-body-sm);
}

/* 同意していないまま送信しようとしたとき、どの欄かが分かるようにする */
.sk-check.is-error {
  color: var(--red-700, #c62828);
}
.sk-check.is-error .sk-check__box {
  border-color: var(--red-700, #c62828);
}

/* 対応競技の一覧。数が多いので、幅に応じて折り返す */
.hp-sports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.hp-sport {
  padding: var(--space-4);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-card, 12px);
  background: var(--grey-0);
}
.hp-sport__n {
  font: var(--type-heading-sm);
}
.hp-sport__d {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}