/* ソラメグリ販売ページ専用 CSS。設計の正は brand/design-system.md。
   index.html(style.css)とは独立。site/ 内で完結させる(アプリに依存しない)。
   方針: 動画は画面幅いっぱい、スクリーンショットは枠つきのカード、文字は静かに。 */

:root {
  --night: #070d18;
  --night-2: #0d1626;
  --line: #22304a;
  --fg: #dce4f0;
  --muted: #8fa2bd;
  --accent: #ff6a3d;
  --paper: #f8f5f1;
  --ink: #122033;
  --ink-muted: #5a6478;
  /* 書体は**言語ごとに変える**(§2026-08-19 の指摘「西洋系の見出しが間延びして見える」)。
     原因は3つあった: ①どの言語でも日本語書体(Yu Mincho)の欧文が使われていた
     ②日本語向けの字間 +0.06em が欧文にも乗っていた ③weight 600 が合成太字だった。
     既定は日本語。以下の html[lang=..] で上書きする。 */
  --serif: "Hiragino Mincho ProN", "Yu Mincho Demibold", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --h-weight: 600;      /* 和文=デミボールド相当(実物の字面。合成はしない) */
  --h-track: 0.06em;    /* 和文は少し開けると締まる */
  --h1-lh: 1.5;
  --h2-lh: 1.6;
  --eyebrow-track: 0.24em;
  --body-lh: 2.0;
}

/* ---------- 言語別の書体 ----------
   ラテン系: 見出しは**オールドスタイルのセリフ**(明朝と気分が近い)。字間はわずかに詰める
   =大きな欧文は詰めるほうが締まって見える。太字にはせず 400 のままで品を保つ。 */
html[lang="en"], html[lang="es"], html[lang="fr"], html[lang="de"],
html[lang="pt"], html[lang="id"] {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Constantia, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-weight: 400; --h-track: -0.01em; --h1-lh: 1.24; --h2-lh: 1.38; --body-lh: 1.78;
}
/* ベトナム語: **Georgia は声調記号(ệ ữ など)を持たない**ので外す(実測で確認)。
   混ざると一部の字だけ別書体になって崩れる */
html[lang="vi"] {
  --serif: "Palatino Linotype", Palatino, Constantia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-weight: 400; --h-track: -0.005em; --h1-lh: 1.3; --h2-lh: 1.45; --body-lh: 1.8;
}
/* ロシア語: キリルを持つセリフだけを並べる(Iowan Old Style は不確かなので入れない) */
html[lang="ru"] {
  --serif: "Palatino Linotype", Palatino, Constantia, Cambria, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-weight: 400; --h-track: -0.01em; --h1-lh: 1.26; --h2-lh: 1.4; --body-lh: 1.8;
}
/* 中国語: **日本語書体だと字形が日本の形になる**(骨・直・画など)ので、必ず中文書体を先に。
   見出しは宋体系(明朝に相当)、無ければ黒体系に落とす */
html[lang="zh"] {
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --h-weight: 600; --h-track: 0.04em; --h1-lh: 1.45; --h2-lh: 1.55; --body-lh: 1.95;
}
html[lang="zh-TW"] {
  --serif: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --sans: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --h-weight: 600; --h-track: 0.04em; --h1-lh: 1.45; --h2-lh: 1.55; --body-lh: 1.95;
}
html[lang="ko"] {
  --serif: "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --sans: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --h-weight: 600; --h-track: 0.01em; --h1-lh: 1.42; --h2-lh: 1.55; --body-lh: 1.9;
}
/* タイ語・デーヴァナーガリー: **字間を空けない**(結合文字が離れて読みにくくなる)。
   上下に記号が積まれるので行間は広めに取る */
html[lang="th"] {
  --serif: Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --sans: Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --h-weight: 600; --h-track: 0; --h1-lh: 1.55; --h2-lh: 1.7; --eyebrow-track: 0.06em; --body-lh: 2.0;
}
html[lang="hi"] {
  --serif: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --sans: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --h-weight: 600; --h-track: 0; --h1-lh: 1.5; --h2-lh: 1.62; --eyebrow-track: 0.06em; --body-lh: 1.95;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; max-width: 42em; }

.wrap { max-width: 1040px; margin-inline: auto; padding-inline: 24px; }

/* ---------- 見出し ---------- */
.eyebrow {
  font-size: 12.5px; letter-spacing: var(--eyebrow-track);
  color: var(--muted); margin: 0 0 14px;
}
.paper .eyebrow { color: var(--ink-muted); }
h2.statement {
  font-family: var(--serif); font-weight: var(--h-weight);
  font-size: clamp(25px, 3.4vw, 34px); line-height: var(--h2-lh); letter-spacing: var(--h-track);
  margin: 0 0 26px; text-wrap: balance;
  /* **合成太字を禁止**: Windows の Yu Mincho には太字が無く、600 を頼むと偽の太字が
     作られて字がにじむ。実物のデミボールド(Yu Mincho Demibold / ヒラギノ W6)を使う */
  font-synthesis: none;
}
.sub-note { color: var(--muted); font-size: 14px; }
.paper .sub-note { color: var(--ink-muted); }

/* ---------- CTA ---------- */
.cta {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 17px; padding: 14px 36px; border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(255, 106, 61, 0.5);
  transition: filter 0.15s;
}
.cta:hover { filter: brightness(1.08); }
.cta:focus-visible, .cta-ghost:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.cta-ghost {
  display: inline-block; color: var(--fg); text-decoration: none; font-weight: 600;
  font-size: 15px; padding: 12px 28px; border-radius: 999px; border: 1px solid var(--line);
  transition: border-color 0.15s;
}
.cta-ghost:hover { border-color: var(--muted); }
.cta-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  isolation: isolate; overflow: hidden; background: var(--night);
}
.hero video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 55% center;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 13, 24, 0.72) 0%, rgba(7, 13, 24, 0.38) 36%, rgba(7, 13, 24, 0) 64%),
    linear-gradient(0deg, rgba(7, 13, 24, 0.88) 0%, rgba(7, 13, 24, 0.25) 40%, rgba(7, 13, 24, 0) 62%);
}
.hero-inner { width: 100%; padding-block: 88px; }
.hero .brandline { margin: 0 0 30px; }
.hero .brandline img { height: 20px; width: auto; }
.hero h1 {
  font-family: var(--serif); font-weight: var(--h-weight); font-synthesis: none;
  font-size: clamp(36px, 6.2vw, 60px); line-height: var(--h1-lh); letter-spacing: var(--h-track);
  margin: 0 0 18px; text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.65);
}
.hero .lead {
  font-size: clamp(15px, 2vw, 17.5px); color: #c5d2e6; max-width: 34em;
  margin: 0 0 32px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}
.hero .quiet-facts {
  margin: 26px 0 0; font-size: 13.5px; color: var(--muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* ---------- セクション共通 ---------- */
.sec { padding: 104px 0; border-top: 1px solid var(--line); }
.sec.paper { background: var(--paper); color: var(--ink); border-top: none; }
.sec-head { margin-bottom: 8px; }

/* ---------- 全幅の動画 ---------- */
.vsec video.bleed { width: 100%; height: auto; background: #000; }
.vsec .sec-head { margin-bottom: 40px; }
.vcap { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

/* ---------- 画像のペア(宇宙と地上) ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }
.pair figure { margin: 0; }
.pair img { border-radius: 12px; border: 1px solid var(--line); }
.pair figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

/* ---------- スクリーンショットのカード ---------- */
.featgrid {
  /* min() が無いと、狭い画面で列幅 360px が下限になり横スクロールが出る */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 44px 28px; margin-top: 44px;
}
.featgrid figure { margin: 0; }
.featgrid img { border-radius: 12px; border: 1px solid var(--line); }
.featgrid h3 { font-size: 16.5px; font-weight: 700; margin: 16px 0 6px; }
.featgrid p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.9; }
.more-prose { margin-top: 48px; color: var(--fg); }

/* ---------- 有料 ---------- */
.chip {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
  padding: 1px 8px; margin-left: 10px; vertical-align: 3px;
}
.plus-item { margin-top: 72px; }
.plus-item h3 {
  font-family: var(--serif); font-weight: var(--h-weight); font-synthesis: none;
  font-size: clamp(20px, 2.6vw, 26px); line-height: var(--h2-lh);
  letter-spacing: var(--h-track); margin: 0 0 12px;
}
.plus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin-top: 72px; }
@media (max-width: 720px) { .plus-grid { grid-template-columns: 1fr; } }
.plus-grid img { border-radius: 12px; border: 1px solid var(--line); }
.plus-list { margin: 0; padding: 0; list-style: none; }
.plus-list li { border-top: 1px solid var(--line); padding: 14px 2px; font-size: 15px; }
.plus-list b { font-weight: 700; }
.plus-list span { color: var(--muted); font-size: 13.5px; display: block; }
.price-block { margin-top: 84px; text-align: center; }
.price-line { font-size: 16px; margin: 0; }
.price-line b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-note { color: var(--muted); font-size: 14.5px; margin: 10px 0 30px; }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- 紙の帯(学校・作り手) ---------- */
.paper a { color: var(--ink); }
.paper .maker-logo { height: 26px; width: auto; margin-top: 26px; }
.paper .note-small { font-size: 13.5px; color: var(--ink-muted); }
.paper-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 820px) { .paper-cols { grid-template-columns: 1fr; gap: 72px; } }

/* ---------- 使いはじめる・表 ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.steps div { border-top: 1px solid var(--line); padding-top: 16px; }
.steps b { display: block; font-size: 16px; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }

.table-title {
  font-family: var(--serif); font-weight: var(--h-weight); font-synthesis: none;
  font-size: 19px; letter-spacing: var(--h-track); margin: 56px 0 0;
}
.scroll { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
th { font-size: 12.5px; letter-spacing: calc(var(--eyebrow-track) * 0.42); color: var(--muted); font-weight: 600; }
td.y { font-variant-numeric: tabular-nums; }
td.n { color: var(--muted); }
caption { caption-side: bottom; text-align: left; font-size: 12.5px; color: var(--muted); padding-top: 12px; }

/* ---------- フッタ ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 72px; font-size: 14px; color: var(--muted); }
footer a { color: var(--fg); }
footer .foot-logo { height: 18px; width: auto; margin-bottom: 18px; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 640px) {
  .sec { padding: 80px 0; }
  .plus-item { margin-top: 56px; }
}

/* ---------- 言語切替(右上に固定) ---------- */
.lang-pick { position: fixed; top: 14px; right: 14px; z-index: 50; }
.lang-pick select {
  font-family: inherit; font-size: 13px; color: var(--fg);
  background: rgba(7, 13, 24, 0.72); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 30px 7px 14px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lang-pick select:hover { border-color: var(--muted); }
.lang-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 紙の帯の上でも読めるように、下地は常に濃い色のまま(option はブラウザ既定に任せる) */
.lang-pick option { background: #0d1626; color: var(--fg); }
@media (max-width: 640px) { .lang-pick { top: 10px; right: 10px; } .lang-pick select { font-size: 12px; padding: 6px 26px 6px 12px; } }

/* 翻訳が入るまで直書きの日本語を隠す(日本語以外で開いたときだけ。§アプリと同じ方式)。
   visibility なので場所は確保されたまま=ガタつかない。解除は applyLocale の最後 */
html.i18n-pending [data-t] { visibility: hidden; }