@charset "utf-8";

/* 甲虫手帳 / Coleolog — LP（2026-09-17・新規）
 *
 * # 値は ../DESIGN.md が唯一の正
 *
 * 色・書体・角丸はアプリと同じものを使う。**ここで新しい色や書体を作らない。**
 * サイトとアプリで朱の色が違う、のような食い違いは、利用者から見れば
 * 「別のもの」になる。
 *
 * 角丸は実装の値（`mobile/lib/design/tokens.dart` の `ClRadius`）に合わせた:
 * 6（小要素）/ 8（ボタン）/ 12（カード）/ 16（大面積）。
 * **両生類手帳の LP より浅い。** オーナー指示「ボックスデザインも角丸とかを
 * アプリのとんまなに寄せて」。
 *
 * # 社内ルールで禁じられていること（ここで守る）
 *
 * - **箱にボーダーを付けない。** 区切りは地と面の明るさの差・余白・浅い影
 * - **「箱＋一辺にアクセントライン」を作らない**（名指しで禁止されている）
 * - 素の「・」の羅列を出さない（`.ticks` は朱のチェックを自分で描く）
 * - 絵文字で飾らない / 過度なグラデーションと影を使わない
 *
 * # 構造
 *
 * 節（`.section`）は**それ自身が横幅いっぱいの帯**で、左右の余白を自分で持つ。
 * 中身は `max-width` と `margin-inline: auto` で真ん中に寄せる。こうすると
 * 「地の色を端まで引く」と「読む幅を抑える」が、入れ物の div を増やさずに
 * 両立する。左右の余白は節が持つので、**どの幅でも横にはみ出せない**。
 */

:root {
  /* ライト（基準）。DESIGN.md §5 の表から。 */
  --bg: #f1f0eb;
  --surface: #ffffff;
  --text: #1a1a18;
  --muted: #6b6862;
  --accent: #b8381f;

  /* ダークの帯で使う値（同じ表の「ダーク」列）。 */
  --ink: #121110;
  --ink-surface: #201e1c;
  --ink-text: #f0eee9;
  --ink-muted: #a8a59d;
  --ink-accent: #e37059;

  /* 角丸（ClRadius）。 */
  --r-sm: 6px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-lg: 16px;

  /* 影は2種だけ。DESIGN.md の「影 / Glass（ライト）」を基準に、
     面を地から浮かせる用と、触れたときに1段上げる用。 */
  --shadow: 0 14px 40px rgba(40, 36, 32, 0.12);
  --shadow-raised: 0 20px 52px rgba(40, 36, 32, 0.16);

  /* 左右の余白。**16px を下回らせない**（社内ルール）。 */
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1080px;
  --band: clamp(56px, 8vw, 104px);

  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 数値だけ等幅。アプリと同じ IBM Plex Mono（DESIGN.md §5「数値」）。
     和文の字（円など）は Noto Sans JP に落ちる。 */
  --mono: "IBM Plex Mono", "Noto Sans JP", "Hiragino Sans", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  /* 数字は桁を揃える。アプリの「数値は桁を揃える」をサイトでも通す。 */
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── 共通の文字 ───────────────────────────────────────────────── */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  /* 見出しの1〜2文字だけの孤立折り返しを作らない（社内ルール）。 */
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
}

.lede,
.section__lede {
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
}

.note {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

strong {
  font-weight: 700;
  color: var(--text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 30;
  padding: 12px 18px;
  background: var(--surface);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
}

/* ── ヘッダー ─────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gutter);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  /* アプリの Glass / Clear（ライト）と同じ考え方。地を透かしてぼかす。 */
  background: rgba(241, 240, 235, 0.82);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  /* **線は引かない。** 区切りは影（社内ルール）。スクロールしてから出す。 */
  box-shadow: 0 0 0 rgba(40, 36, 32, 0);
  transition: box-shadow 0.25s ease;
}

.masthead.is-stuck {
  box-shadow: 0 6px 24px rgba(40, 36, 32, 0.08);
}

.masthead__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.masthead__logo img {
  width: 30px;
  height: 30px;
}

.masthead__cta {
  flex: none;
  padding: 10px 18px;
  background: var(--accent);
  border-radius: var(--r-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.masthead__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* ── ボタン ───────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 指で押せる大きさ（アプリと同じ 44px 以上）。 */
  min-height: 52px;
  padding: 14px 28px;
  background: var(--accent);
  border-radius: var(--r-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}

.button--quiet {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.button--quiet:hover {
  box-shadow: var(--shadow-raised);
}

/* ── ヒーロー ─────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(36px, 6vw, 72px) var(--gutter) var(--band);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.hero__title {
  font-size: clamp(28px, 5.4vw, 46px);
  line-height: 1.24;
}

.hero__text .lede {
  margin-top: 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__text .note {
  margin-top: 16px;
}

.hero__figure {
  margin: 0;
}

.hero__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* ── 節 ───────────────────────────────────────────────────────── */

/* 見出しに飛んだとき、上に張り付くヘッダーの裏に隠れないための逃げ。
   ヘッダーの高さ（約56px）＋余白。 */
.hero,
.section,
.store {
  scroll-margin-top: 80px;
}

.section {
  padding: var(--band) var(--gutter);
}

/* 中身は読む幅に寄せる（入れ物の div を増やさないための1行）。 */
.section > * {
  max-width: var(--maxw);
  margin-inline: auto;
}

.section--surface {
  background: var(--surface);
}

.section--ink {
  background: var(--ink);
  color: var(--ink-text);
}

.section--ink .eyebrow {
  color: var(--ink-accent);
}

.section--ink .section__lede,
.section--ink p {
  color: var(--ink-muted);
}

.section--ink strong {
  color: var(--ink-text);
}

.section__title {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.3;
}

.section__title + .section__lede {
  margin-top: 16px;
}

/* ── 3ステップ ────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 20px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.step__num {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.step__title {
  font-size: 18px;
  line-height: 1.4;
}

.step p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* ── アプリの画面 ─────────────────────────────────────────────── */

.screens {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 760px) {
  .screens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.screen {
  margin: 0;
}

/* **端末の枠を描かない。** 素の画面をそのまま、角だけ丸めて置く
   （偽の実機枠を足すと、アプリ内トークンより深い角丸が必要になる）。 */
.screen img {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.screen figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* 画面は縦に長い。スマホでは1枚が画面を埋めてしまうので幅を抑える。 */
@media (max-width: 759px) {
  .screen img {
    max-width: 320px;
    margin-inline: auto;
  }

  .screen figcaption {
    text-align: center;
  }
}

/* ── 左右に分ける節 ───────────────────────────────────────────── */

.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* 写真を左に置く回。**並び順だけ入れ替える**（読み上げと
     スマホの縦並びは文章が先のまま）。 */
  .split--reverse .split__figure {
    order: -1;
  }
}

.split__text > * + * {
  margin-top: 16px;
}

.split__figure {
  margin: 0;
}

.split__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.split__figure--tall img {
  aspect-ratio: 4 / 5;
}

.split__figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

.section--ink .split__figure figcaption {
  color: var(--ink-muted);
}

/* ── 箇条書き（朱のチェックを自分で描く） ─────────────────────── */

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.8;
}

.ticks li + li {
  margin-top: 12px;
}

/* 素の「・」を出さないための印。**箱の枠線ではなく図形**なので
   「むやみなボーダー禁止」には当たらない。 */
.ticks li::before {
  content: "";
  position: absolute;
  top: 0.66em;
  left: 4px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.section--ink .ticks li::before {
  border-color: var(--ink-accent);
}

/* ── カード ───────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card {
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.section--surface .card {
  /* 白い節の上では面が地と同じ色になって箱が消える。**そこだけ地を
     入れ替える**（ボーダーを引かないため・DESIGN.md §2 の例外①）。 */
  background: var(--bg);
}

.card__title {
  font-size: 18px;
  line-height: 1.4;
}

.card p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.card .note {
  font-size: 13.5px;
}

/* ── 料金の表 ─────────────────────────────────────────────────── */

.price {
  width: 100%;
  margin-top: 8px;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 15px;
  text-align: left;
}

.price thead th {
  padding: 0 14px 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.price tbody th,
.price tbody td {
  padding: 16px 14px;
  background: var(--bg);
  vertical-align: top;
}

.price tbody th {
  font-weight: 700;
  white-space: nowrap;
}

/* 行の角丸は両端のセルだけ（角丸の二重化を作らない）。 */
.price tbody th:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.price tbody td:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--mono);
  font-weight: 500;
  white-space: nowrap;
}

.price + .note {
  margin-top: 16px;
}

@media (max-width: 480px) {
  .price {
    font-size: 14px;
  }

  .price tbody th,
  .price tbody td {
    padding: 14px 10px;
  }
}

/* ── ストアへの導線 ───────────────────────────────────────────── */

.store {
  padding: var(--band) var(--gutter);
  background: var(--ink);
  color: var(--ink-text);
  text-align: center;
}

.store > * {
  max-width: 620px;
  margin-inline: auto;
}

/* 墨の帯で目が止まる場所。アプリのアイコンそのもの（加工しない）。 */
.store__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.store__title {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.3;
}

.store__lede {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: clamp(15px, 1.6vw, 17px);
}

.store__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* **押しても何も起きない的を置かない**（アプリの規則 R-U1）。
   公開までバッジは出さず、代わりに文だけを出す。切り替えは `main.js` の
   `STORE` を書き換えるだけ。 */
.store__badges[data-store-state="coming-soon"] {
  display: none;
}

.store__note[data-store-state="released"] {
  display: none;
}

.store__badge {
  display: inline-flex;
  transition: transform 0.18s ease;
}

.store__badge:hover {
  transform: translateY(-2px);
}

.store__badge img {
  display: block;
  width: auto;
  height: 46px;
}

.store__note {
  margin-top: 28px;
  color: var(--ink-muted);
}

/* ── フッター ─────────────────────────────────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px var(--gutter);
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-surface);
  color: var(--ink-muted);
  font-size: 13.5px;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer__brand img {
  width: 26px;
  height: 26px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--ink-text);
}

.footer__legal {
  letter-spacing: 0.08em;
}

/* ── 出現の動き ───────────────────────────────────────────────── */

/* 動かすのは `transform` と `opacity` だけ（社内ルール）。
 *
 * 隠すのは **JS が `has-reveal` と `data-reveal-armed` を付けたときだけ。**
 * 2つとも JS が書くので、
 *
 * 1. JS が落ちたページは全部見えたままになる
 * 2. **HTML に手で印を書いても何も隠れない**
 *
 * 2 が要るのは、実際に踏んだから（2026-09-17）。HTML に `data-reveal` と
 * 書いた「アプリの中」の3枚が、JS の選び方（`main.js` の一覧）に入って
 * いなかったため、**観測されず opacity 0 のまま**になった。印を JS だけの
 * ものにすれば、この壊れ方が起きない。 */
.has-reveal [data-reveal-armed] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.has-reveal [data-reveal-armed].is-in {
  opacity: 1;
  transform: none;
}

/* 幕開けは読み込んだ時点で立ち上げる（観測を待たせない）。 */
.hero__text > *,
.hero__figure {
  animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__text > *:nth-child(2) {
  animation-delay: 0.06s;
}

.hero__text > *:nth-child(3) {
  animation-delay: 0.12s;
}

.hero__text > *:nth-child(4) {
  animation-delay: 0.18s;
}

.hero__text > *:nth-child(5) {
  animation-delay: 0.24s;
}

.hero__figure {
  animation-delay: 0.1s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 動かさない設定の人には動かさない。**CSS と JS の両方で打ち消す**
 * （片方だけ直したときに動きが漏れないように）。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .has-reveal [data-reveal-armed],
  .has-reveal [data-reveal-armed].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__text > *,
  .hero__figure {
    animation: none;
  }

  .button,
  .masthead,
  .masthead__cta,
  .store__badge {
    transition: none;
  }

  .button:hover,
  .masthead__cta:hover,
  .store__badge:hover {
    transform: none;
  }
}