/* =========================================================
   公開面（営業面）の骨組みと料金ページ。
   /pricing・/travel・/{ui}/translate・法務・ログイン/登録が読む（アプリ本体 / は読まない）。

   設計の基礎（2026-10）:
   - **色は style.css の token をそのまま使う**（--bg / --surface / --text / --dim / --faint / --line /
     --accent-a / --accent-b / --ok）。ここで新しい色は作らない。
   - 余白は 8pt の刻み（--sp-*）、角丸は 3 段（--rad-*）、文字は本文 16px 以上・行間 1.6〜1.7。
   - テーマは `data-theme="auto"`: 既定は暗（ブランドの既定と同じ）、OS が明なら明。
     アプリ本体の表示設定（data-theme=dark/light/contrast）はそのまま効く（token は style.css が持つ）。
   - タップ 44px・focus-visible・reduced-motion・WCAG AA のコントラスト（--faint でも 4.5:1 以上）。
   ========================================================= */

/* ---- テーマ: auto（OS に従う。暗が既定）---- */
body[data-theme='auto'] {
  --bg: #0b0b0d;
  --bg-grad: linear-gradient(180deg, #101013, #0a0a0c 60%);
  --surface: #16161a;
  --surface-2: #1d1d22;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f2f1ec;
  --dim: #b4b3ad;
  --faint: #8a897f;
  --accent-a: #e2a85c;
  --accent-b: #56b0a0;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  body[data-theme='auto'] {
    --bg: #f3f2ee;
    --bg-grad: linear-gradient(180deg, #f6f5f1, #ecebe5 70%);
    --surface: #ffffff;
    --surface-2: #f1f0ec;
    --line: rgba(20, 18, 12, 0.1);
    --line-2: rgba(20, 18, 12, 0.18);
    --text: #1a1815;
    --dim: #5b594f;
    --faint: #6c6a60;
    --accent-a: #a06a18;
    --accent-b: #1d7d6e;
    --shadow: 0 24px 70px rgba(60, 55, 40, 0.16);
    color-scheme: light;
  }
  /* style.css の明テーマの上書き（.offer）と同じもの。明るい地では暗めの橙に白で 4.5:1 を取る。 */
  body[data-theme='auto'] .offer .offer-flag:not(.save),
  body[data-theme='auto'] .offer .start.big.offer-cta {
    background: color-mix(in srgb, var(--accent-a) 78%, #000);
    border-color: color-mix(in srgb, var(--accent-a) 78%, #000);
    color: #fff;
  }
}
body[data-theme='light'] {
  color-scheme: light;
}

/* ---- 寸法の token（公開面だけ）---- */
body[data-site] {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --rad-sm: 8px;
  --rad-md: 12px;
  --rad-lg: 20px;
  --wrap: 1120px;
  --gutter: 16px;
  --head-h: 64px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-fine: 13px;
  --elev: 0 1px 0 var(--line), 0 12px 32px -12px rgba(0, 0, 0, 0.35);
  height: auto;
  min-height: 100%;
  /* style.css の body は var(--bg-grad) を重ねる。巻ける頁では 1 画面ごとに繰り返されて
     背景に色の切れ目が出る（旧 /pricing の所見）。公開面は単色にする。 */
  background: var(--bg);
  overflow: auto;
  overflow-x: hidden;
  font-size: var(--fs-body);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) {
  body[data-site] {
    --gutter: 32px;
  }
}
body[data-site] > main {
  flex: 1 0 auto;
}

/* ---- 折り返し（2026-10 監査: 「ログ / イン」「クレジットカ / ード」「64 / 言語」）----
   日本語は文節で折る（word-break: auto-phrase。対応しない器では従来どおり）。韓国語は語の途中で折らない。
   行末の 1 文字だけの行を避ける（text-wrap: pretty）。短い導線（ナビ・言語・認証のリンクとボタン）は折らない。
   フッターの列は 320px で 1 列 130px ほどしかないので、長い項目（特定商取引法に基づく表記）は文節で折らせる。 */
body[data-site]:lang(ja) {
  word-break: auto-phrase;
  text-wrap: pretty;
}
body[data-site]:lang(ko) {
  word-break: keep-all;
  text-wrap: pretty;
}
body[data-site] :is(h1, h2, h3) {
  text-wrap: balance;
}
.site-head a,
.site-lang-opt,
.auth-links a,
.auth-submit,
.sso-btn {
  white-space: nowrap;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 60;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--rad-sm);
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.site-skip:focus {
  top: var(--sp-2);
}
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  /* 下を通るカードの縁や文字が滲んで見えないよう、ほぼ不透明にする（2026-10 監査）。 */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.site-head-in {
  max-width: var(--wrap);
  height: var(--head-h);
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  flex: none;
}
.site-logo img {
  display: block;
  border-radius: 7px;
  /* 暗い地ではタイル（#0b0b0d）が背景に溶けるので、内側に 1px の線を引く。 */
  outline: 1px solid var(--line-2);
  outline-offset: -1px;
}
.site-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-width: 0;
}
.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-5);
}
.site-nav a,
.site-menu > summary,
.site-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--rad-sm);
  color: var(--dim);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease);
}
.site-nav a:hover,
.site-menu > summary:hover,
.site-login:hover {
  color: var(--text);
  background: var(--surface-2);
}
.site-nav a[aria-current='page'],
.site-login[aria-current='page'] {
  color: var(--text);
}
.site-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.site-menu {
  position: relative;
}
.site-menu > summary {
  list-style: none;
}
.site-menu > summary::-webkit-details-marker {
  display: none;
}
.site-chev {
  transition: transform 0.2s var(--ease);
  opacity: 0.7;
}
.site-menu[open] > summary .site-chev {
  transform: rotate(180deg);
}
.site-ico {
  flex: none;
}
.site-pop {
  list-style: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  padding: var(--sp-2);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.site-lang .site-pop {
  left: auto;
  right: 0;
}
.site-pop a,
.site-lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--rad-sm);
  background: none;
  color: var(--text);
  font: 500 15px var(--font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-pop a:hover,
.site-pop .site-lang-opt:hover {
  background: var(--surface-2);
}
.site-lang-opt[aria-current='true'] {
  font-weight: 700;
}
.site-pop .site-lang-opt[aria-current='true']::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent-a);
}
.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  transition: opacity 0.15s var(--ease);
}
.site-cta:hover {
  opacity: 0.88;
}
.site-cta-short {
  display: none;
}
.site-burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: var(--rad-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.site-burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.2s var(--ease),
    top 0.2s var(--ease);
}
.site-burger span:first-child {
  top: 17px;
}
.site-burger span:last-child {
  top: 25px;
}
.site-head[data-open] .site-burger span:first-child {
  top: 21px;
  transform: rotate(45deg);
}
.site-head[data-open] .site-burger span:last-child {
  top: 21px;
  transform: rotate(-45deg);
}

/* 電話・タブレット縦: ロゴ / 主 CTA / メニュー。ナビと言語はメニューの中。 */
@media (max-width: 899px) {
  .site-head-in {
    gap: var(--sp-2);
  }
  .site-logo {
    margin-right: auto;
  }
  .site-burger {
    display: inline-block;
  }
  .site-cta {
    padding: 0 var(--sp-4);
    font-size: 14px;
  }
  /* 開閉は「上から少し降りて現れる」だけ（0.2s）。閉じている間は visibility で Tab からも外す。 */
  .site-panel {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 0.2s var(--ease),
      transform 0.2s var(--ease),
      visibility 0s linear 0.2s;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--head-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) max(var(--sp-5), env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5);
  }
  .site-head[data-open] .site-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity 0.2s var(--ease),
      transform 0.2s var(--ease),
      visibility 0s;
  }
  .site-nav ul,
  .site-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  /* 区切りの線はパネルの端から端まで（余白の内側で途切れる半端な線にしない）。 */
  .site-tools {
    border-top: 1px solid var(--line);
    margin: var(--sp-2) calc(-1 * var(--gutter)) 0;
    padding: var(--sp-2) var(--gutter) 0;
  }
  .site-nav a,
  .site-menu > summary,
  .site-login {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--sp-2);
    color: var(--text);
    font-size: 17px;
  }
  .site-menu > summary .site-chev {
    margin-left: auto;
  }
  .site-pop {
    position: static;
    min-width: 0;
    padding: 0 0 var(--sp-2) var(--sp-2);
    border: 0;
    background: none;
    box-shadow: none;
  }
}
/* メニューを開いている間の幕（site-nav.js が body 直下に 1 枚置く）。ヘッダー（z 40）の下。 */
.site-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s var(--ease),
    visibility 0s linear 0.2s;
}
@media (prefers-color-scheme: light) {
  body[data-theme='auto'] .site-scrim {
    background: rgba(0, 0, 0, 0.32);
  }
}
body[data-theme='light'] .site-scrim {
  background: rgba(0, 0, 0, 0.32);
}
.site-scrim[data-open] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s var(--ease),
    visibility 0s;
}
@media (min-width: 900px) {
  .site-scrim {
    display: none;
  }
}
/* 背面を巻かせない（iOS は site-nav.js が body を position:fixed にする）。 */
html.site-locked,
html.site-locked body {
  overflow: hidden;
}

/* 320px 級: ロゴの「Interpres」は残し、主 CTA を短い言い方と狭い余白にして収める（2026-10 監査:
   以前は製品名を消していた）。長い文言は読み上げ用に残す（視覚だけ隠す）。 */
@media (max-width: 379px) {
  .site-head-in {
    gap: var(--sp-1);
  }
  .site-logo {
    gap: var(--sp-2);
    font-size: 16px;
  }
  .site-cta {
    padding: 0 var(--sp-3);
    font-size: 13.5px;
  }
  .site-cta-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-cta-short {
    display: inline;
  }
}

/* =========================================================
   フッター
   ========================================================= */
.site-foot {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 50%, var(--bg));
  font-size: var(--fs-small);
  color: var(--dim);
}
.site-foot-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sp-8) max(var(--gutter), env(safe-area-inset-right))
    max(var(--sp-6), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display: grid;
  gap: var(--sp-7);
}
.site-foot-brand p {
  margin-top: var(--sp-3);
  max-width: 30ch;
  line-height: 1.6;
}
.site-foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.site-foot-col h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-fine);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* 項目は 1 つずつ 44px の押し場（2026-10 監査: 32px だった）。行の間隔は押し場の中の余白で取る。 */
.site-foot-col ul {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: calc(-1 * var(--sp-2));
}
.site-foot-col a,
.site-foot-col span,
.site-foot-langs .site-lang-opt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-1) 0;
  color: var(--dim);
  text-decoration: none;
  line-height: 1.4;
}
/* 言語の列も、ほかの列と同じ太さ・同じ色（選ばれている 1 つだけ太字と印）。 */
.site-foot-langs .site-lang-opt {
  gap: var(--sp-2);
  width: auto;
  padding: var(--sp-1) 0;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--dim);
}
.site-foot-col a:hover,
.site-foot-langs .site-lang-opt:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-foot-langs .site-lang-opt[aria-current='true'] {
  color: var(--text);
  font-weight: 600;
}
.site-foot-langs .site-lang-opt[aria-current='true']::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-a);
}
:lang(ja) .site-foot-brand p {
  max-width: 24em;
}
.site-foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-fine);
  color: var(--faint);
}
@media (min-width: 720px) {
  .site-foot-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .site-foot-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  }
  .site-foot-base {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   /pricing
   ========================================================= */
.pr {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.pr h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pr h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}
.pr p {
  text-wrap: pretty;
}
.pr-num {
  font-variant-numeric: tabular-nums;
}
.pr-section {
  padding-top: var(--sp-8);
}
@media (min-width: 720px) {
  .pr-section {
    padding-top: var(--sp-9);
  }
}
.pr-section-head {
  max-width: 720px;
  margin-bottom: var(--sp-6);
}
.pr-section-head p {
  margin-top: var(--sp-3);
  color: var(--dim);
  font-size: 17px;
}

/* ---- ボタン ---- */
.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  transition:
    opacity 0.15s var(--ease),
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.pr-btn-primary {
  min-height: 56px;
  padding: 0 var(--sp-6);
  background: var(--text);
  color: var(--bg);
  font-size: 17px;
}
.pr-btn-primary:hover {
  opacity: 0.88;
}
.pr-btn-ghost {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
}
.pr-btn-ghost:hover {
  border-color: var(--text);
}
.pr-btn-quiet {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
  font-weight: 600;
}
.pr-btn-quiet:hover {
  text-decoration-color: var(--text);
}
.pr-text-link {
  color: var(--text);
  font-weight: 600;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}
.pr-text-link:hover {
  text-decoration-color: var(--text);
}

/* ---- ヒーロー ---- */
.pr-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-8) 0 0;
  text-align: center;
}
.pr-kicker {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-a);
}
.pr-h1 {
  margin-top: var(--sp-3);
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
:lang(ja) .pr-h1,
:lang(zh) .pr-h1,
:lang(ko) .pr-h1 {
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: keep-all;
  line-break: strict;
}
/* 見出しは文ごとに塊にして折る（320px で「たくさん」だけが 1 行に残った）。 */
.pr-h1-s {
  display: inline-block;
  text-wrap: wrap;
}
@media (max-width: 359px) {
  :lang(ja) .pr-h1,
  :lang(zh) .pr-h1,
  :lang(ko) .pr-h1 {
    font-size: 32px;
  }
}
.pr-lede {
  max-width: 640px;
  margin: var(--sp-5) auto 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--dim);
}
.pr-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--dim);
}
.pr-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pr-trust svg {
  color: var(--ok);
}
@media (max-width: 599px) {
  .pr-hero {
    padding-top: var(--sp-6);
  }
  .pr-lede {
    margin-top: var(--sp-4);
  }
  /* 電話: 信頼の 3 点は折り返して 2 行に収める（縦 3 行に積まない）。 */
  .pr-trust {
    gap: var(--sp-1) var(--sp-4);
    margin-top: var(--sp-5);
  }
}
/* 札はヒーローのすぐ下に置く（見出しは読み上げだけ。ヒーローが「選ぶ」頁であることを言っている）。 */
.pr-plans {
  padding-top: var(--sp-6);
}

/* ---- 月払い / 年払いの切り替え（pricing-page.js の periodToggle）----
   本物の radio（矢印キー・読み上げの「選択済み」はブラウザが持つ）を隠し、label をセグメントに見せる。
   **出し分けは :has で効かせる**ので JS が無くても切り替わる。:has を持たないブラウザでは
   切り替えを出さず、Plus の札に月払いと年払いの両方を並べる（@supports の外が既定）。 */
.pr-period-wrap {
  display: none;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.pr-period {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
}
.pr-period-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.pr-period-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.pr-period-opt:hover {
  color: var(--text);
}
.pr-period-input:checked + .pr-period-opt {
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--line-2);
}
.pr-period-input:focus-visible + .pr-period-opt {
  outline: 2px solid var(--accent-a);
  outline-offset: 2px;
}
.pr-off {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: color-mix(in srgb, var(--ok) 70%, var(--text));
}
@supports selector(:has(*)) {
  .pr-period-wrap {
    display: flex;
  }
  .pr-plans:has(#prPeriodYearly:checked) .pr-opt[data-period='monthly'],
  .pr-plans:has(#prPeriodMonthly:checked) .pr-opt[data-period='yearly'] {
    display: none;
  }
  /* 切り替えが見えている間は、札の中の「年払い / 月払い」の小見出しは要らない（同じことを 2 度言わない）。 */
  .pr-plans:has(.pr-period) .pr-opt-label {
    display: none;
  }
  .pr-plans:has(.pr-period) .pr-opt + .pr-opt {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-plans:has(.pr-period) .pr-opt {
    animation: pr-opt-in 0.22s var(--ease);
  }
}
@keyframes pr-opt-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---- 並び: Plus（主役）＋脇（7 日パス・無料）---- */
.pr-grid {
  display: grid;
  /* minmax(0, 1fr): 中の長い語（vi・es の 320px）で列が広がって横にはみ出さないように。 */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.pr-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 600px) and (max-width: 879px) {
  .pr-side {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 880px) {
  .pr-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--sp-5);
    max-width: 1000px;
    margin: 0 auto;
  }
  .pr-grid[data-plus='0'] {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}

/* 札の上の小さな札（「いまのプラン」「短期間だけ」）。 */
.pr-flag {
  align-self: flex-start;
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dim);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.pr-flag.is-on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line-2));
  background: color-mix(in srgb, var(--ok) 16%, var(--surface));
}

/* ---- Plus の札 ---- */
.pr-plus {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 2px solid var(--accent-a);
  border-radius: var(--rad-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-a) 9%, var(--surface)),
    var(--surface) 60%
  );
  box-shadow: 0 28px 70px -36px color-mix(in srgb, var(--accent-a) 65%, transparent);
}
.pr-plus-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.pr .pr-plus-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pr-plus-lede {
  color: var(--dim);
  font-size: 15px;
}
.pr-opts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.pr-opt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pr-opt + .pr-opt {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.pr-opt-label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--dim);
}
.pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--sp-2);
}
.pr-price strong {
  font-size: clamp(48px, 7vw, 64px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.pr-unit {
  font-size: 17px;
  font-weight: 600;
  color: var(--dim);
}
/* 年払いの額の下に「月払いなら ¥1,000/月」を言葉で（取り消し線はセール価格に見えた）。 */
.pr-was {
  flex-basis: 100%;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.pr-bill {
  font-size: var(--fs-small);
  color: var(--dim);
  line-height: 1.6;
}
/* 「年 ¥2,200 お得」は切り替えの「18% オフ」（.pr-off）と同じ札の形にそろえる。 */
.pr-save {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: color-mix(in srgb, var(--ok) 70%, var(--text));
  vertical-align: 1px;
}
/* 広い画面だけ 1 塊で折る（電話では長い言語で横にはみ出すので折ってよい）。 */
@media (min-width: 480px) {
  .pr-save {
    white-space: nowrap;
  }
}
/* 月払いの面から年払いへ移る口（label for=prPeriodYearly）。押せる大きさは 44px。 */
.pr-nudge {
  margin-top: var(--sp-2);
  text-align: center;
}
.pr-nudge label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: color-mix(in srgb, var(--ok) 70%, var(--text));
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.pr-nudge label:hover {
  text-decoration-thickness: 2px;
}
/* 明るい地では緑・橙の文字が淡い（.pr-off 3.2:1・.pr-save 3.4:1・.pr-kicker 4.1:1）。4.5:1 以上に締める。 */
@media (prefers-color-scheme: light) {
  body[data-theme='auto'] .pr-off,
  body[data-theme='auto'] .pr-save,
  body[data-theme='auto'] .pr-nudge label {
    color: color-mix(in srgb, var(--ok) 45%, var(--text));
  }
  body[data-theme='auto'] .pr-kicker {
    color: color-mix(in srgb, var(--accent-a) 85%, #000);
  }
}
body[data-theme='light'] .pr-off,
body[data-theme='light'] .pr-save,
body[data-theme='light'] .pr-nudge label {
  color: color-mix(in srgb, var(--ok) 45%, var(--text));
}
body[data-theme='light'] .pr-kicker {
  color: color-mix(in srgb, var(--accent-a) 85%, #000);
}
.pr-btn-cta {
  width: 100%;
  min-height: 56px;
  margin-top: var(--sp-3);
  font-size: 17px;
  background: var(--accent-a);
  color: #1a1206;
}
.pr-btn-cta:hover {
  filter: brightness(1.06);
}
.pr-fine {
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--faint);
}
.pr-points {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.pr-points li {
  display: flex;
  gap: var(--sp-2);
}
.pr-points svg {
  flex: none;
  margin-top: 2px;
  color: var(--ok);
}

/* ---- 脇の札（7 日パス・無料）。主役と競わせない: 細い枠・小さな額・控えめなボタン ---- */
.pr-side-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-lg);
  background: var(--surface);
}
.pr-free {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.pr-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.pr .pr-side-head h3 {
  font-size: 17px;
}
.pr-side-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pr-side-price strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pr-side-desc {
  font-size: 15px;
  color: var(--text);
}
.pr-side-sub {
  font-size: var(--fs-small);
  color: var(--dim);
}
.pr-side-sub a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
}
.pr-side-card .pr-btn {
  width: 100%;
  margin-top: var(--sp-2);
}
.pr-side-card .pr-btn-quiet {
  min-height: 44px;
}

/* 電話: 余白を 1 段詰める。主役の額は大きいまま。 */
@media (max-width: 639px) {
  .pr-plus {
    padding: var(--sp-5);
    gap: var(--sp-4);
  }
  .pr-period-opt {
    padding: 0 var(--sp-4);
  }
  .pr-section {
    padding-top: var(--sp-7);
  }
  .pr-section-head {
    margin-bottom: var(--sp-5);
  }
  .pr-q summary {
    min-height: 56px;
    padding: var(--sp-3) 0;
    font-size: 16px;
  }
  .pr-teams-link {
    margin-top: var(--sp-7);
  }
}
/* 明るい地では橙が淡いので、暗めの橙に白で 4.5:1 を取る（.offer の主ボタンと同じ扱い）。 */
@media (prefers-color-scheme: light) {
  body[data-theme='auto'] .pr-btn-cta {
    background: color-mix(in srgb, var(--accent-a) 78%, #000);
    color: #fff;
  }
}
body[data-theme='light'] .pr-btn-cta {
  background: color-mix(in srgb, var(--accent-a) 78%, #000);
  color: #fff;
}
@media (max-width: 359px) {
  .pr-period-opt {
    padding: 0 var(--sp-3);
    font-size: 14px;
  }
  .pr-plus {
    padding: var(--sp-4);
  }
}
.pr-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-fine);
  color: var(--faint);
}

/* ---- 比較表 ---- */
.pr-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: var(--surface);
  overflow: hidden;
}
.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.pr-table thead th {
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
}
.pr-table thead th[data-col='plus'] {
  color: var(--accent-a);
}
.pr-table tbody th {
  padding: var(--sp-4);
  font-weight: 500;
  text-align: left;
  color: var(--dim);
  width: 34%;
}
.pr-table td {
  padding: var(--sp-4);
  text-align: center;
  vertical-align: middle;
}
.pr-table tbody tr + tr > * {
  border-top: 1px solid var(--line);
}
.pr-table td small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-fine);
  color: var(--faint);
}
.pr-table td[data-col='pass'] small {
  display: inline;
}
.pr-yes,
.pr-no {
  display: inline-flex;
  vertical-align: middle;
}
.pr-yes {
  color: var(--ok);
}
.pr-no {
  color: var(--faint);
}
/* 電話: 行の名前を 1 段に、値を列ごとに下へ並べる（横に流さない）。 */
@media (max-width: 719px) {
  .pr-table thead th {
    padding: var(--sp-3) var(--sp-2);
  }
  .pr-table thead td {
    display: none;
  }
  .pr-table thead tr,
  .pr-table tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  }
  .pr-table[data-cols='1'] {
    --cols: 1;
  }
  .pr-table[data-cols='2'] {
    --cols: 2;
  }
  .pr-table[data-cols='3'] {
    --cols: 3;
  }
  .pr-table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: var(--sp-3) var(--sp-4) 0;
    font-size: var(--fs-fine);
    font-weight: 600;
  }
  .pr-table tbody tr + tr > td {
    border-top: 0;
  }
  .pr-table td {
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
    font-size: var(--fs-small);
  }
  .pr-table td small,
  .pr-table td[data-col='pass'] small {
    display: block;
  }
}

/* どのプランも同じもの（表の下の 1 段）。 */
.pr-same {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-small);
  color: var(--dim);
}
.pr-same p {
  font-weight: 700;
  color: var(--text);
}
.pr-same ul {
  list-style: none;
  display: grid;
  gap: var(--sp-1);
}
.pr-same li {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.pr-same svg {
  flex: none;
  margin-top: 1px;
  color: var(--ok);
}
@media (min-width: 720px) {
  .pr-same {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
  }
  .pr-same ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }
}

/* ---- チーム・法人の料金への導線（個人の頁の下端・小さく 1 段）---- */
.pr-teams-link {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.pr .pr-teams-link h2 {
  font-size: 18px;
  letter-spacing: 0;
}
.pr-teams-link p {
  margin-top: var(--sp-1);
  color: var(--dim);
  font-size: var(--fs-small);
}
@media (min-width: 720px) {
  .pr-teams-link {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
  }
}
.pr-back {
  margin-top: var(--sp-6);
  text-align: center;
}
.pr-back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- FAQ ---- */
.pr-faq-list {
  border-top: 1px solid var(--line);
}
.pr-q {
  border-bottom: 1px solid var(--line);
}
.pr-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding: var(--sp-4) 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.pr-q summary::-webkit-details-marker {
  display: none;
}
.pr-q summary svg {
  flex: none;
  color: var(--dim);
  transition: transform 0.2s var(--ease);
}
.pr-q[open] summary svg {
  transform: rotate(45deg);
}
.pr-q p {
  max-width: 720px;
  padding: 0 0 var(--sp-5);
  color: var(--dim);
}
@media (min-width: 1024px) {
  .pr-faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sp-7);
    align-items: start;
  }
  .pr-faq .pr-section-head {
    position: sticky;
    top: calc(var(--head-h) + var(--sp-5));
  }
}

/* ---- 法人向け（下部の 1 段）---- */
.pr-biz {
  padding-top: var(--sp-6);
}
.pr .pr-biz-card h2 {
  font-size: 19px;
  letter-spacing: 0;
}
.pr-biz-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.pr-biz-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
  background: var(--surface);
}
.pr-biz-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pr-biz-price strong {
  font-size: 24px;
  font-weight: 800;
}
.pr-biz-price span {
  font-size: var(--fs-small);
  color: var(--dim);
}
.pr-biz-card ul {
  list-style: none;
  display: grid;
  gap: 2px;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--dim);
}
.pr-biz-card .pr-btn {
  margin-top: auto;
}
@media (min-width: 720px) {
  .pr-biz-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   既存の面を骨組みに合わせる差分（/travel・/{ui}/translate・法務・認証）
   ========================================================= */
body[data-site] .tv {
  width: 100%;
}
body[data-site] .tv-foot {
  display: none;
}
/* 日本語の見出しを語の途中で折らない（「スマ / ホ」）。対応しない器では従来どおり折れるだけ。 */
:lang(ja) .tv-h1,
:lang(ja) .pr-h1,
:lang(ja) .pr h2 {
  word-break: auto-phrase;
}
/* 料金の札・注記も語の途中で折らない（「請求はさ / れません」）。 */
:lang(ja) .pr p,
:lang(ja) .pr li,
:lang(ja) .offer p {
  word-break: auto-phrase;
}
/* /travel と言語ペアの頁の本文も語の途中で折らない（「聞き分け / て」「無料枠 120 分/ / 月」）。 */
:lang(ja) .tv p,
:lang(ja) .tv h2,
:lang(ja) .tv h3,
:lang(ja) .tv dt,
:lang(ja) .tv li,
:lang(ja) .tv .lbl {
  word-break: auto-phrase;
}
/* 長い答え（FAQ）は文節で折ると右端が大きく欠ける（390px で実測）。ふつうに折って行をそろえる。 */
:lang(ja) .tv dd,
:lang(ja) .pr .pr-q p {
  word-break: normal;
  text-wrap: pretty;
}
.tv h2 {
  line-height: 1.3;
  text-wrap: balance;
}
.tv .kicker,
.tv .free-note {
  text-wrap: balance;
}
/* フッターの上の空き（.tv の下の余白 72px ＋ フッターの 96px）が約 170px あった。締めて 48px に。 */
body[data-site] .tv {
  padding-bottom: 0;
  margin-bottom: calc(var(--sp-7) - var(--sp-9));
}
/* 中国語・韓国語の頁で字体が混ざる（漢字だけ日本の字形・ハングルだけ別の書体）のを止める（2026-10-21）。
   料金・/travel・言語ペアの頁の中だけ、その言語の書体を先に置く。骨組み（ヘッダー・フッター）は触らない。 */
:lang(zh) .pr,
:lang(zh) .tv,
:lang(zh) .offer-wrap {
  --font-ui:
    'Be Vietnam Pro', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui,
    sans-serif;
  --font-ja: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-family: var(--font-ui);
}
:lang(ko) .pr,
:lang(ko) .tv,
:lang(ko) .offer-wrap {
  --font-ui: 'Be Vietnam Pro', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --font-ja: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-family: var(--font-ui);
}
/* 言語ペアの頁のフレーズ（span lang="zh" / "ko"）も、その言語の書体で。 */
.tv span[lang='zh'] {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
.tv span[lang='ko'] {
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
:lang(ko) .tv p,
:lang(ko) .tv h1,
:lang(ko) .tv h2,
:lang(ko) .pr p {
  word-break: keep-all;
}
/* /travel の料金節の「料金を見る」が横幅いっぱいに伸びていた（.ghost の flex: 1）。 */
body[data-site] .tv-price-cta .ghost.as-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: 999px;
}
body[data-site] .auth-shell {
  min-height: auto;
  padding: var(--sp-8) var(--gutter) 0;
}

/* ---- 認証の 4 頁（/login・/signup・/reset-password・/verify-email）2026-10 監査 ---- */
/* 入力欄の休止時の境界は 3:1 以上（以前の --line は 1.1:1 で、欄の形が見えなかった）。 */
body[data-site] {
  --field-line: #75746e;
  --field-bad: #ff6b70;
}
@media (prefers-color-scheme: light) {
  body[data-site][data-theme='auto'] {
    --field-line: #85837a;
    --field-bad: #c62f35;
  }
}
body[data-site][data-theme='light'] {
  --field-line: #85837a;
  --field-bad: #c62f35;
}
body[data-site] .auth-form input {
  border-color: var(--field-line);
  min-height: 48px;
  font-size: 16px; /* iOS は 16px 未満の欄でフォーカス時に拡大する */
}
body[data-site] .auth-form input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}
body[data-site] .auth-form input[aria-invalid='true'] {
  border-color: var(--field-bad);
  box-shadow: 0 0 0 1px var(--field-bad);
}
/* 欄の下の誤り（auth-pages.js の setFieldError）。 */
body[data-site] .field-err {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--field-bad);
}
body[data-site] .field-err::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--field-bad);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
/* パスワードの表示ボタン・カード内の文字リンクは 44px の押し場。 */
body[data-site] .pw-toggle {
  right: 2px;
  width: 44px;
  height: 44px;
}
body[data-site] .pw-wrap input {
  padding-right: 52px;
}
body[data-site] .auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  margin-top: var(--sp-2);
  font-size: 14px;
}
body[data-site] .auth-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
body[data-site] .auth-links a:hover {
  text-decoration-color: currentColor;
}
body[data-site] .auth-sep {
  color: var(--faint);
}
body[data-site] .auth-hint {
  margin-top: -6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--faint);
}
body[data-site] .auth-hint-block {
  margin: 0 0 var(--sp-1);
}
body[data-site] .auth-card h1 {
  line-height: 1.3;
}
body[data-site] .auth-sub {
  font-size: 15px;
}
body[data-site] .sso-btn {
  font-size: 15px;
}
/* 文言の長い導線ボタン（「確認メールの再送を依頼する」等）は 1 行に固定しない（es の 320px でカードがはみ出した）。 */
body[data-site] .auth-linkbtn {
  height: auto;
  min-height: 48px;
  padding: 10px var(--sp-4);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
/* パスワードの強さ（/signup）。3 本の棒と 1 行の文言。 */
body[data-site] .pw-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
  font-size: 13px;
  color: var(--dim);
}
body[data-site] .pw-meter[hidden] {
  display: none;
}
body[data-site] .pw-meter-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 96px;
  flex: none;
}
body[data-site] .pw-meter-bar i {
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  transition: background 0.2s var(--ease);
}
body[data-site] .pw-meter[data-level='1'] i:nth-child(-n + 1) {
  background: var(--field-bad);
}
body[data-site] .pw-meter[data-level='2'] i:nth-child(-n + 2) {
  background: var(--accent-a);
}
body[data-site] .pw-meter[data-level='3'] i {
  background: var(--accent-b);
}
/* 320px 級ではカードの内側の余白を詰め、ボタンの文言を 1 行に収める。 */
@media (max-width: 400px) {
  body[data-site] .auth-shell {
    padding-top: var(--sp-5);
  }
  body[data-site] .auth-card {
    padding: 28px 20px;
  }
}

/* 見出しの書体: CJK 以外の言語では欧文の書体で（--font-ja は Noto Sans JP の欧文になり、vi の声調記号が不揃いだった）。 */
body[data-site] :is(.nf-title, .legal-title, .auth-card h1):not(:lang(ja), :lang(zh), :lang(ko)) {
  font-family: var(--font-ui);
}

/* ---- 見つからない頁（public/404.html）---- */
.nf {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-9) var(--gutter) 0;
  text-align: center;
}
.nf-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-a);
  font-variant-numeric: tabular-nums;
}
.nf-title {
  margin-top: var(--sp-3);
  font-family: var(--font-ja);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.nf-lede {
  margin: var(--sp-4) auto 0;
  max-width: 34em;
  color: var(--dim);
  font-size: 17px;
}
.nf-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--sp-6);
  padding: 0 var(--sp-6);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nf-home:hover {
  opacity: 0.88;
}
.nf-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.nf-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.nf-links a:hover {
  text-decoration-color: currentColor;
}
.nf-home:focus-visible,
.nf-links a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
body[data-site] .account-wrap {
  width: 100%;
  padding-top: var(--sp-7);
  padding-bottom: 0;
}
body[data-site] .legal-title,
body[data-site] .account-wrap > h1 {
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
body[data-site] .account-wrap .card {
  font-size: 15px;
  line-height: 1.75;
}

/* ---- 法務の 4 頁（body[data-legal]: /terms・/privacy・/tokushoho・/delete-account）2026-10 監査 ----
   本文は 68 字幅で中央。見出しは小さな大文字の札（.card h2 の既定）ではなく、読む文書の見出しにする。 */
body[data-legal] .account-wrap {
  max-width: calc(68ch + 2 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
body[data-legal] .legal-title {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: 800;
}
body[data-legal] .account-sub {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: 14px;
  color: var(--faint);
}
body[data-legal] .card {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--rad-lg);
  font-size: 16px;
  line-height: 1.8;
}
body[data-legal] .card h2 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--text);
  scroll-margin-top: calc(var(--head-h) + var(--sp-4));
}
body[data-legal] .card h2:first-child {
  margin-top: 0;
}
/* 長い本文（日本語）は文節で折ると右端が大きく波打つので、通常の禁則で詰めて組む（見出し・導線は文節のまま）。 */
body[data-legal] .card :is(p, li) {
  word-break: normal;
  line-break: strict;
}
body[data-legal] .card p + p,
body[data-legal] .card :is(ul, ol) {
  margin-top: var(--sp-2);
}
body[data-legal] .card :is(ul, ol) {
  padding-left: 1.4em;
}
body[data-legal] .card a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
body[data-legal] .card a:hover {
  text-decoration-color: currentColor;
}
/* en / ja 以外の表示言語の読み手への 1 行（legal.js）。 */
body[data-legal] .legal-note {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-md);
  background: var(--surface);
  color: var(--dim);
  font-size: 14px;
}
body[data-legal] .legal-note[hidden] {
  display: none;
}
/* 目次（/privacy）。 */
body[data-legal] .legal-toc {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--rad-lg);
}
body[data-legal] .legal-toc-h {
  margin-bottom: var(--sp-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--faint);
}
body[data-legal] .legal-toc ol {
  margin: 0;
  padding-left: 1.6em;
  columns: 2 16em;
  column-gap: var(--sp-6);
  font-size: 15px;
}
body[data-legal] .legal-toc li {
  break-inside: avoid;
}
body[data-legal] .legal-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--dim);
  text-decoration: none;
}
body[data-legal] .legal-toc a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-legal] .auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  font-size: 14px;
}
body[data-legal] .auth-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 600px) {
  body[data-legal] .card {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* ---- 着地面の字幕デモ（/{ui}/translate/*・/{ui}/daily/* の主 CTA の下）2026-11-02 ----
   トップのデモ（top.css の .td-*）と同じ語彙: 暗い字幕の画面・あなたの言語は amber の札・訳は大きく白。
   画面は明るい頁でも暗いまま（通訳中のアプリの見た目）。字は SSR 済みで、箱の高さは最初の描画で決まる。 */
.tv-hero .hd {
  max-width: 380px;
  margin: 20px auto 0;
}
.hd-card {
  --p-text: #f2f1ec;
  --p-dim: #a3a299;
  --p-a: #e2a85c;
  --p-b: #56b0a0;
  position: relative;
  padding: 11px 16px 13px;
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in srgb, var(--p-a) 9%, #111114);
  border: 1px solid color-mix(in srgb, var(--p-a) 26%, transparent);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  color: var(--p-text);
  text-align: left;
  transition: opacity 0.3s ease;
}
.hd-card.is-fading {
  opacity: 0;
}
.tv .hd-src {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--p-dim);
  overflow-wrap: anywhere;
}
/* 行頭の言語の札 = 話された言語を聞き分けた印 */
.hd-tag {
  display: inline-block;
  margin-right: 7px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-a) 20%, transparent);
  color: var(--p-a);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: 1px;
  white-space: nowrap;
}
.hd-card.is-hearing .hd-tag {
  animation: hdHear 0.42s ease-out;
}
@keyframes hdHear {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
.tv .hd-dst {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.42;
  color: var(--p-text);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.hd-dst:empty {
  min-height: 1.42em;
}
.hd-dst.is-live::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: hdCaret 0.9s steps(1) infinite;
}
@keyframes hdCaret {
  50% {
    opacity: 0;
  }
}
.hd-dst:lang(ja) {
  font-family: var(--font-ja);
  line-break: strict;
  word-break: auto-phrase;
}
.hd-dst:lang(ko) {
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', var(--font-ui);
  word-break: keep-all;
}
.hd-dst:lang(zh) {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', var(--font-ui);
}
/* 読み上げの印（訳が出そろったあと、声でも出している間だけ） */
.hd-say {
  position: absolute;
  top: -9px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--p-b);
  color: #0b0b0d;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.hd-say svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hd-say svg path:first-child {
  fill: currentColor;
}
.hd-card.is-saying .hd-say {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hd-card,
  .hd-say {
    transition: none;
  }
  .hd-card.is-hearing .hd-tag,
  .hd-dst.is-live::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-head,
  .site-burger span,
  .site-chev,
  .pr-q summary svg,
  .pr-btn {
    transition: none;
  }
}