/* Snivex Premium — 販売 LP 専用のスタイル。
 *
 * site.css を書き換えないこと。あちらは /premium だけでなく
 *    /premium/success ・ /legal/* ・ /feedback ・ /tabvix/* も読んでいる共有物で、
 *    ここでの見た目の都合で触ると **Tabvix の販売ページまで巻き込む。**
 *    このファイルは premium.html だけが追加で読み込み、`.lp-page` の下だけを上書きする。
 *
 * 外部フォント・外部CSSを読み込まない（自動テストが見張っている）。
 *    システムフォントのままで、字送りと余白だけで「売り物の顔」にする。
 *
 * このページだけライト固定にしている。理由は装飾ではなく**素材との整合**で、
 *    掲載する訴求ビジュアルが白地の図版だから。ダークにすると、
 *    白い図版だけが浮いて「貼り付けた画像」に見える。
 *    （success / legal / feedback は今までどおり両対応のまま。）
 */

.lp-page {
  color-scheme: light;
  --lp-ink: #16183a;
  --lp-ink-2: #4a4f6e;
  --lp-ink-3: #6f748f;
  --lp-purple: #6d28d9;
  --lp-purple-2: #7c3aed;
  --lp-purple-soft: #efe9fe;
  --lp-blue: #3882f6;
  --lp-lav: #f6f4ff;
  --lp-lav-2: #edeaff;
  --lp-surface: #ffffff;
  --lp-line: rgba(22, 24, 58, 0.1);
  --lp-line-2: rgba(22, 24, 58, 0.16);
  --lp-shadow-s: 0 1px 2px rgba(22, 24, 58, 0.05);
  --lp-shadow-m: 0 14px 40px rgba(60, 40, 140, 0.1);
  --lp-shadow-l: 0 30px 70px rgba(60, 40, 140, 0.16);
  --lp-r-s: 10px;
  --lp-r-m: 16px;
  --lp-r-l: 24px;

  /* site.css の共有トークンも、**このページの中だけ**明るい側へ固定する。
     これが無いと、OS がダークの端末で **入力欄だけ黒くなる**
     （site.css の `input[type="email"]` が `var(--bg)` / `var(--fg)` を使っており、
     あちらの dark ブロックが効いてしまうため）。ページ全体は白なので、
     白いカードの中に黒い入力欄が1つだけ落ちている状態になる。
     site.css 側は書き換えない。あれは success / legal / feedback / Tabvix も読んでいる。 */
  --bg: #ffffff;
  --fg: #16183a;
  --muted: #6f748f;
  --accent: #6d28d9;
  --accent-fg: #ffffff;
  --border: rgba(22, 24, 58, 0.1);
  --card-bg: #ffffff;
  --danger: #b3261e;

  background: var(--lp-surface);
  color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
}

/* site.css の 44rem 制限を、このページでだけ外す。
   幅は中の .lp-wrap が持つ（節ごとに背景を全幅で敷けるようにするため）。 */
.lp-page header,
.lp-page main,
.lp-page footer {
  max-width: none;
  margin: 0;
  padding: 0;
}

.lp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.lp-wrap--wide {
  max-width: 1460px;
}

/* ---------------------------------------------------------------- ヘッダー */

.lp-page header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
.lp-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
}
.lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--lp-ink);
  text-decoration: none;
}
.lp-logo svg {
  display: block;
}
.lp-logo .x {
  color: var(--lp-purple-2);
}
.lp-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lp-purple-soft);
  color: var(--lp-purple);
}
.lp-page .lang-toggle {
  margin-left: auto;
  padding-top: 0;
}
.lp-page .lang-toggle button {
  border-color: var(--lp-line-2);
  color: var(--lp-ink-2);
  font-size: 0.86rem;
  /* 指で押す前提の高さにする（site.css の 0.3rem では約30px しかない）。 */
  padding: 0.55rem 1rem;
  min-height: 40px;
}
.lp-page .lang-toggle button[aria-current="true"] {
  border-color: var(--lp-purple-2);
  background: var(--lp-purple-soft);
  color: var(--lp-purple);
}
.lp-header-cta {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--lp-purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .lp-header-cta {
    display: none;
  }
}
/* いちばん狭い端末での余裕。
   390px でヘッダーの中身が横幅をちょうど使い切っていた（English ボタンの右端が
   余白のきわ）。360px / 375px の端末では溢れる。CTA を消すだけでは足りないので、
   ロゴ・バッジ・言語ボタンも一段小さくする。 */
@media (max-width: 420px) {
  .lp-header-inner {
    gap: 8px;
    min-height: 56px;
  }
  .lp-logo {
    font-size: 0.95rem;
    gap: 7px;
  }
  .lp-logo svg {
    width: 22px;
    height: 22px;
  }
  .lp-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
  }
  .lp-page .lang-toggle {
    gap: 6px;
  }
  .lp-page .lang-toggle button {
    font-size: 0.78rem;
    padding: 0.5rem 0.7rem;
  }
}

/* ---------------------------------------------------------------- 節の骨格 */

.lp-section {
  padding: 84px 0;
}
.lp-section--tight {
  padding: 60px 0;
}
.lp-section--lav {
  background: linear-gradient(180deg, var(--lp-lav) 0%, #fbfaff 100%);
}
.lp-section--lav-flat {
  background: var(--lp-lav);
}

.lp-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-purple);
  background: var(--lp-purple-soft);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 18px;
}

/* 日本語の見出しを、語の途中で折らない。
   狭い画面で「終わらな／い。」のように割れるのを止めるため、
   見出しの中の句（span）を inline-block にして、**句の切れ目でだけ**折らせる。 */
.lp-page h1 > span,
.lp-page h2 > span {
  display: inline-block;
}

.lp-page h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  font-weight: 800;
}
.lp-page h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 0 0 8px;
  font-weight: 700;
}
.lp-lead {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--lp-ink-2);
  margin: 0 0 8px;
  max-width: 46rem;
}
.lp-sub {
  color: var(--lp-ink-3);
  font-size: 0.98rem;
  max-width: 46rem;
}
.lp-accent {
  color: var(--lp-purple);
}
.lp-center {
  text-align: center;
}
.lp-center .lp-lead,
.lp-center .lp-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------- ヒーロー */

.lp-hero {
  position: relative;
  padding: 64px 0 72px;
  background:
    radial-gradient(900px 420px at 15% -10%, #efe9ff 0%, rgba(239, 233, 255, 0) 70%),
    radial-gradient(760px 380px at 88% 0%, #e6efff 0%, rgba(230, 239, 255, 0) 70%),
    var(--lp-surface);
  text-align: center;
}
.lp-hero h1 {
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 16px;
}
.lp-hero .lp-hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--lp-ink-2);
  margin: 0 0 14px;
}
.lp-hero .lp-lead {
  margin: 0 auto 26px;
}
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 0 0 12px;
}
.lp-page .cta-button,
.lp-page .button {
  background: linear-gradient(135deg, var(--lp-purple-2), var(--lp-purple));
  border-radius: 999px;
  padding: 0.95rem 2.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(109, 40, 217, 0.28);
  border: none;
  color: #fff;
}
.lp-cta-ghost {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--lp-line-2);
  color: var(--lp-ink-2);
  font-weight: 600;
  text-decoration: none;
  background: #fff;
}
.lp-page .cta-note {
  color: var(--lp-ink-3);
  max-width: 40rem;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------- 図版 */

/* 図版の大きさ（一回り小さくしてある）。
 *
 * **画像ファイルは縮小していない。** 1586×992 の原寸はそのまま置いてあり、
 *    ここで決めているのは表示サイズだけ。拡大表示（タップ）では原寸で読める。
 *
 * 幅だけで決めない。図版は横 1.6 : 縦 1 なので、幅を 1120px にしても
 *    高さは 700px になり、ノート PC では見出しと合わせて画面からはみ出す。
 *    そこで「**画面の高さから見出しぶんを引いた残り**に収まる幅」を上限に混ぜてある
 *    （1.6 は図版の縦横比）。低い画面ほど自動で小さくなる。
 */
.lp-figure {
  margin: 30px auto 0;
  max-width: clamp(560px, calc((100vh - 300px) * 1.6), 1120px);
}
.lp-figure--hero {
  margin-top: 38px;
  max-width: clamp(560px, calc((100vh - 340px) * 1.6), 1200px);
}
/* <button> にしてある。
   もとは <span> で、**マウスで押せる人しか拡大できなかった**。
   図版を一回り小さくしたぶん、中の細かい文字を読む唯一の手段が拡大表示なので、
   キーボードでも開けること・押せると見えることが前提条件になった。 */
.lp-shot {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-l);
  background: #fff;
  box-shadow: var(--lp-shadow-l);
  overflow: hidden;
  padding: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
}
.lp-shot:hover {
  box-shadow: 0 34px 78px rgba(60, 40, 140, 0.22);
}
.lp-shot:focus-visible {
  outline: 3px solid var(--lp-purple);
  outline-offset: 4px;
}
.lp-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-figure figcaption {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--lp-ink-3);
  text-align: center;
}
/* PC でも出す。
   以前はスマホだけに出していたが、図版を小さくしたことで
   **PC でも図版の中の細かい文字は読めない**。読む手段があることを、
   読めない人全員に知らせる必要がある。 */
.lp-zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--lp-purple);
  background: var(--lp-purple-soft);
  border-radius: 999px;
  padding: 5px 14px;
}
.lp-figure {
  text-align: center;
}

/* 拡大表示。スマホで図版の中の文字を読むための唯一の仕掛け。
   中身は素の <img> なので、ピンチ操作はブラウザ任せで足りる。 */
.lp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* 不透明にする。半透明にすると、下のヘッダーが薄く透けて拡大表示の邪魔をする。 */
  background: #0c0c18;
  display: flex;
  flex-direction: column;
}
.lp-lightbox[hidden] {
  display: none !important;
}
.lp-lightbox-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
}
.lp-lightbox-close {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
}
.lp-lightbox-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 24px;
}
.lp-lightbox-scroll img {
  /* 狭い画面では画面幅より大きく出す。文字を読ませることが目的なので、
     「収める」より「拡大して横に送れる」を優先する。 */
  width: 1586px;
  max-width: none;
  height: auto;
  margin: auto;
}
/* 広い画面では収める。
   1440px の画面で 1586px を出すと、横スクロールバーが見えないまま
   右端の1割が切れる。**切れていることに気づけない**のがまずい。
   このくらいの幅があれば、収めても図版の中の文字は読める。 */
@media (min-width: 1000px) {
  .lp-lightbox-scroll img {
    width: min(1586px, 96vw);
  }
  .lp-lightbox-scroll {
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------- 位置づけ節 */

.lp-split {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 30px;
}
.lp-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  padding: 26px 26px 24px;
  box-shadow: var(--lp-shadow-s);
}
.lp-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.lp-tag--free {
  background: #e8f1ff;
  color: #1f5fc4;
}
.lp-tag--premium {
  background: var(--lp-purple-soft);
  color: var(--lp-purple);
}
.lp-card p {
  margin: 0;
  color: var(--lp-ink-2);
  font-size: 0.96rem;
}
.lp-card ul {
  margin: 10px 0 0;
  padding-left: 1.15rem;
  color: var(--lp-ink-2);
  font-size: 0.94rem;
}

/* ---------------------------------------------------------------- 機能節 */

.lp-feature-head {
  max-width: 46rem;
}
.lp-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.lp-points li {
  font-size: 0.9rem;
  color: var(--lp-ink-2);
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  padding: 7px 15px;
}
.lp-section--lav .lp-points li {
  background: rgba(255, 255, 255, 0.8);
}
.lp-note {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: var(--lp-ink-3);
  border-left: 3px solid var(--lp-purple-soft);
  padding-left: 14px;
  max-width: 46rem;
}

/* ---------------------------------------------------------------- 機能一覧
 *
 * 機能を1つ1つカードにするのをやめ、**カテゴリ単位のカード**にした。
 *    13 個のカードが並んでいると、全体像より個数のほうが目に入る。
 *    機能そのものはカードの中の <li> に残してあり、
 *    自動テストはその <li> の data-feature を見ている。
 */

/* 5枚を1つの格子へ流し込まない。
   「探す」は項目が1つしかなく、他と同じ格子に入れるとそこだけ背が低くなり、
   下に大きな空白が開いて「ズレたレイアウト」に見えていた。
   構成は **横長の先頭カード1枚 ＋ 2×2 の格子**。2×2 は必ず長方形に埋まるので穴が開かない。 */
.feature-stack {
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
}

/* 「探す」= 見出しと1項目を横に並べ、低いまま自然に見せる。 */
.lp-page .feature-card--lead {
  display: grid;
  grid-template-columns: minmax(11rem, 0.75fr) 2fr;
  gap: 10px 28px;
  align-items: center;
}
.lp-page .feature-card--lead h3 {
  margin: 0;
}

.lp-page .feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin: 30px 0 0;
  align-items: start;
}
/* 2×2。**行ごとに高さを揃える**（align-items は既定の stretch のまま）。
   1枚だけ短くても、格子が長方形に閉じるので「揃っている」と読める。 */
.lp-page .feature-grid--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  align-items: stretch;
}
.lp-page .feature-card {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  background: #fff;
  padding: 20px 22px 18px;
  box-shadow: var(--lp-shadow-s);
}
.lp-page .feature-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 700;
}
.lp-page .feature-card h3 .lp-cat-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--lp-purple-2), var(--lp-blue));
}
.lp-feature-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.lp-feature-items li {
  display: grid;
  gap: 2px;
  padding-left: 15px;
  position: relative;
}
.lp-feature-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-purple-2);
  opacity: 0.55;
}
.lp-feature-items b {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--lp-ink);
}
.lp-feature-items span {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--lp-ink-2);
}

/* 折りたたみ（Free / Premium の 20 行表）。FAQ と同じ作法の印を付ける。 */
.lp-details {
  margin: 26px auto 0;
  max-width: 900px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  box-shadow: var(--lp-shadow-s);
  overflow: hidden;
}
.lp-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.96rem;
  padding: 16px 20px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-details > summary::-webkit-details-marker {
  display: none;
}
.lp-details > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-purple-soft) no-repeat center / 11px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236d28d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.18s ease-out;
}
.lp-details[open] > summary::after {
  transform: rotate(180deg);
}
.lp-details[open] > summary {
  border-bottom: 1px solid var(--lp-line);
}
.lp-details > summary:focus-visible {
  outline: 3px solid var(--lp-purple);
  outline-offset: -3px;
}
.lp-details .table-scroll {
  padding: 0 4px 4px;
}
.lp-details .compact-table {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* ---------------------------------------------------------------- 他との違い */

/* 枠と角丸は**表ではなく、外側のスクロール枠**に持たせる。
   表側に overflow:hidden を置くと、その表自身が「いちばん近いスクロール枠」になり、
   中のセルの position:sticky が効かなくなる（狭い画面で Premium の列を右に
   貼り付ける仕掛けが、丸ごと無効になる）。実測で踏んだ。 */
.lp-versus {
  overflow-x: auto;
  margin: 30px 0 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  background: #fff;
}
.lp-page .versus-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #fff;
  border: none;
  display: table;
}
.lp-page .versus-table th,
.lp-page .versus-table td {
  border: none;
  border-bottom: 1px solid var(--lp-line);
  padding: 0.72rem 0.9rem;
  vertical-align: middle;
}
.lp-page .versus-table thead th {
  background: var(--lp-lav-2);
  font-weight: 700;
  text-align: center;
  color: var(--lp-ink);
}
.lp-page .versus-table thead th:first-child {
  text-align: left;
}
.lp-page .versus-table thead th.is-us {
  background: linear-gradient(135deg, var(--lp-purple-2), var(--lp-purple));
  color: #fff;
}
.lp-page .versus-table td:not(:first-child) {
  text-align: center;
  width: 9.5rem;
  font-size: 0.88rem;
}
.lp-page .versus-table tbody tr:last-child td {
  border-bottom: none;
}
.lp-page .versus-table td.is-us {
  background: var(--lp-purple-soft);
  font-weight: 700;
  color: var(--lp-purple);
}
.lp-scroll-hint {
  display: none;
}
.lp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--lp-ink-3);
}
.lp-disclaimer {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--lp-ink-3);
  line-height: 1.65;
}
.lp-takeaway {
  margin: 22px auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--lp-ink);
  border-top: 1px solid var(--lp-line);
  padding-top: 20px;
}
.lp-takeaway strong {
  color: var(--lp-purple);
}

/* ---------------------------------------------------------------- 比較表 */

.lp-page .compact-table {
  border-radius: var(--lp-r-m);
  overflow: hidden;
  border: 1px solid var(--lp-line);
  font-size: 0.94rem;
  background: #fff;
  margin: 26px 0 0;
}
.lp-page .compact-table th,
.lp-page .compact-table td {
  border: none;
  border-bottom: 1px solid var(--lp-line);
  padding: 0.72rem 0.9rem;
}
.lp-page .compact-table thead th {
  background: var(--lp-lav-2);
  color: var(--lp-ink);
  font-weight: 700;
}
.lp-page .compact-table th:not(:first-child),
.lp-page .compact-table td:not(:first-child) {
  text-align: center;
  width: 7.5rem;
}
.lp-page .compact-table tbody tr:last-child td {
  border-bottom: none;
}
/* 20行あるので、途中まで送ると見出し行が画面から消える。
   上7行は Free も Premium も ○ なので、見出しが無いと「いま見ているのがどちらの列か」
   が分からなくなる。**見出しを固定する代わりに、Premium の列自体に色を付ける。**
   （表は角丸のため overflow:hidden をかけており、position:sticky が効かない） */
.lp-page .compact-table th:last-child,
.lp-page .compact-table td:last-child {
  background: var(--lp-purple-soft);
}
.lp-page .compact-table thead th:last-child {
  background: linear-gradient(135deg, var(--lp-purple-2), var(--lp-purple));
  color: #fff;
}
.lp-page .compact-table tr[data-feature] td:first-child {
  font-weight: 600;
}
.lp-yes {
  color: var(--lp-purple);
  font-weight: 800;
}
.lp-no {
  color: var(--lp-ink-3);
}

/* ---------------------------------------------------------------- 料金 */

.lp-page .pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  max-width: 780px;
  margin: 34px auto 0;
  gap: 18px;
}
.lp-page .price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-l);
  padding: 30px 28px;
  box-shadow: var(--lp-shadow-s);
  text-align: center;
}
.lp-page .price-card--best {
  border-color: var(--lp-purple-2);
  box-shadow: var(--lp-shadow-m);
}
.lp-price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--lp-purple-2), var(--lp-purple));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-page .price-card h3 {
  font-size: 0.95rem;
  color: var(--lp-ink-3);
  font-weight: 700;
  margin: 0 0 6px;
}
.lp-page .price-card .price {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
/* 単位（/ 年・税込）を金額と同じ大きさで出さない。
   放っておくと「¥4,900」と「/ 年（税込）」が2行に割れ、
   2行目も 2.5rem のまま出て、金額が2つ並んでいるように見える（実測）。 */
.lp-page .price-card .price small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-ink-3);
  letter-spacing: 0;
  margin-left: 4px;
  white-space: nowrap;
}
.lp-page .price-card .price-note {
  color: var(--lp-ink-3);
  font-size: 0.88rem;
  margin: 6px 0 0;
}
.lp-cta-after-price {
  margin-top: 28px;
}

/* ---------------------------------------------------------------- フォーム */

.lp-checkout {
  max-width: 720px;
  margin: 0 auto;
}
.lp-page .final-confirm,
.lp-page .notice-box,
.lp-page .intl-notice {
  border-color: var(--lp-line);
  background: #fff;
  border-radius: var(--lp-r-m);
  box-shadow: var(--lp-shadow-s);
}
.lp-page .final-confirm ul,
.lp-page .notice-box {
  color: var(--lp-ink-2);
  font-size: 0.94rem;
}
.lp-page form {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-l);
  box-shadow: var(--lp-shadow-m);
  padding: 26px;
  margin-top: 18px;
}
.lp-page fieldset {
  border-color: var(--lp-line);
  border-radius: var(--lp-r-m);
}
.lp-page input[type="email"] {
  border-color: var(--lp-line-2);
  border-radius: var(--lp-r-s);
  padding: 0.75rem 0.85rem;
}
/* ラジオのラベルが折り返したとき、2行目がラジオより左から始まらないようにする。
   英語は日本語より長いので、
   "Yearly ¥4,900 (tax included) — ¥408/month equivalent" が狭い画面で2行になる。
   そのとき文字が丸の左に回り込むと、どのラジオの文か一瞬わからなくなる。 */
.lp-page fieldset label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.lp-page fieldset label input[type="radio"] {
  flex: none;
  margin-top: 0.28em;
}
.lp-page #start-checkout {
  width: 100%;
  text-align: center;
}

/* 使えないときは、使えない見た目にする。
   拡張の設定画面からではなく直接このページを開いた場合、premium.js が
   フォームの中身を全部 disabled にする。ところが site.css にも lp.css にも
   `:disabled` の指定が1つも無く、**送信ボタンだけが押せる見た目のまま**だった。
   赤い案内は出ているが、押して無反応、が一番よくない。 */
.lp-page .button:disabled,
.lp-page .button[disabled] {
  background: #d9d7e6;
  color: #7b7d93;
  box-shadow: none;
  cursor: not-allowed;
}
.lp-page input:disabled,
.lp-page input[type="email"]:disabled {
  background: #f2f1f7;
  color: #9a9ab0;
  border-color: rgba(22, 24, 58, 0.08);
  cursor: not-allowed;
}
.lp-page label:has(input:disabled),
.lp-page fieldset:has(input:disabled) legend {
  color: var(--lp-ink-3);
}
.lp-page #form-disabled-notice {
  color: var(--lp-ink);
  background: #fff4f3;
  border: 1px solid rgba(179, 38, 30, 0.35);
  border-radius: var(--lp-r-m);
  padding: 14px 16px;
  margin: 18px 0 0;
  font-size: 0.94rem;
}
.lp-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  max-width: 900px;
}
.lp-assure li {
  font-size: 0.87rem;
  color: var(--lp-ink-2);
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--lp-shadow-s);
}

/* ---------------------------------------------------------------- FAQ */

.lp-faq {
  max-width: 820px;
  margin: 26px auto 0;
}
.lp-faq details {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  padding: 4px 20px;
  margin-bottom: 10px;
  box-shadow: var(--lp-shadow-s);
}
/* 開けることが見える形にする。
   もとは「Q」が付くだけで、開閉の印が1つも無かった。
   スマホには cursor すら無いので、**押せると気づく手掛かりがゼロ**。
   中身は返金方針・解約方法・買い替え時の復元という、買う前にいちばん読みたい話なので、
   気づかれないと「質問だけ並んでいて答えが無いページ」になる。 */
.lp-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 15px 0;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-faq summary::before {
  content: "Q";
  color: var(--lp-purple);
  font-weight: 800;
  flex: none;
}
.lp-faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-purple-soft) no-repeat center / 11px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236d28d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.18s ease-out;
}
.lp-faq details[open] summary::after {
  transform: rotate(180deg);
}
.lp-faq summary:hover::after {
  background-color: #e2d9ff;
}
.lp-faq summary:focus-visible {
  outline: 3px solid var(--lp-purple);
  outline-offset: 3px;
  border-radius: 8px;
}
.lp-faq details[open] summary {
  border-bottom: 1px solid var(--lp-line);
}
.lp-faq .lp-answer {
  color: var(--lp-ink-2);
  font-size: 0.95rem;
  padding: 12px 0 16px 22px;
  margin: 0;
}

/* ---------------------------------------------------------------- 法的 */

.lp-page .fine-print {
  color: var(--lp-ink-3);
  font-size: 0.85rem;
  max-width: 900px;
  margin: 0 auto;
}
.lp-page footer {
  background: var(--lp-lav);
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink-3);
  padding: 34px 0;
  margin-top: 0;
}
.lp-page footer ul {
  justify-content: center;
}

/* ---------------------------------------------------------------- 狭い画面 */

/* 2×2 を保てなくなる幅では、素直に1列へ落とす。
   3枚と2枚に割れて、また「ズレて見える」状態に戻るのを防ぐ。 */
@media (max-width: 900px) {
  .lp-page .feature-grid--pairs {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-page .feature-card--lead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
}

@media (max-width: 780px) {
  /* 他との違いの表。
     390px の画面では1列目でほぼ埋まり、**この節の主役である Snivex Premium の列が
     最初から画面外**だった。しかも表の右端が画面端と重なるので、
     横に送れることに気づけず「表示が切れている不具合」に見えた。
     直し方は2つ:
       ① Premium の列を右端に貼り付けて、常に見えるようにする
       ② 横に送れることを文字で言う（.lp-scroll-hint）
     ①だけだと「真ん中に何かある」ことが伝わらないので、両方要る。 */
  .lp-scroll-hint {
    display: block;
    margin: 22px 0 -12px;
    font-size: 0.82rem;
    color: var(--lp-purple);
    text-align: center;
  }
  .lp-page .versus-table {
    min-width: 34rem;
    font-size: 0.84rem;
  }
  .lp-page .versus-table th,
  .lp-page .versus-table td {
    padding: 0.6rem 0.55rem;
  }
  .lp-page .versus-table td:not(:first-child) {
    width: 6.2rem;
    font-size: 0.82rem;
  }
  .lp-page .versus-table th.is-us,
  .lp-page .versus-table td.is-us {
    position: sticky;
    right: 0;
    box-shadow: -8px 0 12px -8px rgba(22, 24, 58, 0.3);
  }
  /* sticky のセルは必ず不透明にする。透けると下の行が重なって読めなくなる。 */
  .lp-page .versus-table td.is-us {
    background: #f1ebff;
  }

  .lp-section {
    padding: 56px 0;
  }
  .lp-hero {
    padding: 44px 0 52px;
  }
  .lp-wrap {
    padding: 0 18px;
  }
  .lp-figure {
    margin-top: 24px;
  }
  .lp-shot {
    border-radius: var(--lp-r-m);
    box-shadow: var(--lp-shadow-m);
  }
  .lp-page form {
    padding: 20px 16px;
  }
  .lp-page .compact-table th:not(:first-child),
  .lp-page .compact-table td:not(:first-child) {
    width: 4.4rem;
  }
  .lp-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-page .cta-button,
  .lp-cta-ghost {
    display: block;
    text-align: center;
  }
}