/* =========================================================
   Elytra — English (visitor-facing) overrides
   style.css の後に読み込み、ラテン文字向けにタイポグラフィと
   ラベル幅だけを調整する。配色・レイアウトは日本語版と共通。
   ========================================================= */

:root {
  /* 英文は同じ文字数でも横に長いので、見出しを一段階小さく */
  --fs-hero: clamp(2rem, 4.4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 2.9vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lead: clamp(1rem, 1.15vw, 1.08rem);
}

/* 行間 1.9 は和文向け。ラテン文字は詰めたほうが読みやすい */
body { line-height: 1.75; }
p, li, dd { overflow-wrap: break-word; }

/* 和文は任意の位置で折り返せるが、英文は単語単位。
   見出しは行のバランスを取り、極端な尻切れを避ける */
.h2, .hero__title .line, .scard__title, .voices__answer, .company__tag, .equation__big { text-wrap: balance; }
.h2 { line-height: 1.4; }
.hero__title { line-height: 1.22; }
.scard__title { line-height: 1.25; }
.voices__answer { line-height: 1.55; }
.ecard h3, .step h3, .pcard__name { line-height: 1.3; }

/* ---------- header ---------- */
/* 英語のナビ項目は横幅を食うので、字送りと余白を少し詰める */
.nav { gap: clamp(10px, 1.6vw, 22px); }
.nav a { font-size: .86rem; }
.header__tel { font-size: .98rem; padding: 9px 16px; }
.brand__co { letter-spacing: .18em; }

/* 言語切り替え */
.lang { font-size: .9rem; }

/* モバイルメニューは「Concept／想い」の二段組だが、
   英語版はラベルがひとつなので一列に戻す */
.menu__nav a { grid-template-columns: 1fr; font-size: 1.7rem; }

/* ---------- hero ---------- */
/* 円形ステッカー。和文は24字で円周をほぼ一周する（99%）。
   英文は同じ字送りだと78%しか埋まらず下に隙間が空くので、
   文字の大きさは和文と揃えたまま字送りだけ広げて一周させる（99%） */
.sticker text { letter-spacing: .12em; }

/* ---------- snapshot print ---------- */
/* 和文キャプションは1行前提。英文は折り返すので左右に余白を足し、台紙内に収める */
.print figcaption { font-size: clamp(.74rem, 3.1vw, .86rem); line-height: 1.5; padding: 10px 8px 2px; }

/* ---------- effects ---------- */
/* 楕円の上下は幅が狭い。英文は行数が増えるので内側へ寄せる */
.ecard { padding: clamp(32px, 3.6vw, 48px) clamp(26px, 3.4vw, 50px); }
.ecard h3 { font-size: 1.22rem; }
.ecard p { font-size: .89rem; }

/* ---------- marquee ---------- */
/* 一文が長くなりトラック全体が伸びるので、速度を落として可読性を保つ */
.marquee__track { animation-duration: 66s; }
.marquee__track--b { animation-duration: 80s; }

/* ---------- plans ---------- */
/* 中黒の箇条書きは和文用。英文は通常のビュレットに */
.pcard__list li::before { content: "\2022"; }
.pcard__price .num--text { font-size: 1.5rem; }
.pcard__badge { font-size: .7rem; }

/* オプション表の項目名は英語のほうが長い */
.otable { min-width: 520px; }
.otable th { width: 44%; }

/* ---------- contact ---------- */
/* 英語対応はメールのみ。大きく出すのが電話番号ではなくメールアドレスになるので、
   桁数の多い文字列でもはみ出さないよう一段階小さくする */
.hero__tel .num { font-size: 1.32rem; }
.contact__tel .num { font-size: clamp(1.35rem, 3.1vw, 2.2rem); }

/* 日本語のみ／英語可を示す小さなラベル */
.lang-note {
  font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); background: var(--sand); border-radius: 999px;
  padding: 2px 9px; margin-left: 10px; white-space: nowrap;
}
.contact__mail .lang-note { margin-left: 4px; }
.menu__contact .lang-note { background: rgba(234, 210, 168, .7); }

/* ---------- company ---------- */
.company__dl div { grid-template-columns: 178px 1fr; }
.company__dl dd .orig { display: block; font-size: .86rem; color: var(--ink-3); }
.company__dl dd .lang-note { margin-left: 8px; }

@media (max-width: 900px) {
  /* ヘッダーのナビ／電話が消える幅。言語切り替えはバーガーの隣に寄せる */
  .header .lang { margin-left: auto; font-size: .82rem; padding: 4px 12px; }
  .header .lang + .burger { margin-left: 0; }
  .company__dl div { grid-template-columns: 130px 1fr; }
}

@media (max-width: 600px) {
  .company__dl div { grid-template-columns: 1fr; gap: 4px; }
  .otable { min-width: 420px; }
  .otable th { width: 46%; }
}