/* ===== Reset & Base ===== */
/* 🔴 色の方針（2026-07-31 変更・西野判断）
   文字は無彩色 #1A1A1A、色が付くのは teal のアクセントだけ。
   以前は文字にも teal 濃 #123D37 を使っていたが、緑みでくすんで見えるため
   中立の濃グレーへ。CLAUDE.md の「統一は色でなく仕組みで・傘は静かに」
   （Nulab 型）に沿って、ブランド色を出す場所を絞る狙い。
   teal を残すのは a / .product-badge / 傘マーク（micoa-mark.svg）の3か所。
   ⚠️ brand/README.md（正本はコックピット側）の色定義は未更新。要引き継ぎ。 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #1A1A1A;
  background: #fff;
  line-height: 1.6;
}

/* 🔴 リンクは既定で下線を出す（WCAG 1.4.1・レベル A）。
   リンク色 #1F6F63 と周囲の文字（.note-center=#555 / .legal-content=#444）の
   輝度比は 1.25:1 / 1.63:1 しかなく、色だけではリンクだと分からない。
   スマホには hover が無いので「hover したら下線」は救いにならない。
   ⚠️ 「本文用のクラスにだけ下線を足す」形にしないこと。新しくインラインリンクを
   書いたときに漏れる。既定を下線にして、外すものを下で明示的に列挙する。 */
a { color: #1F6F63; text-decoration: underline; }
a:hover { text-decoration: underline; }

/* 下線を出さないもの＝周囲に地の文が無く、置かれ方でリンクと分かるリンク。
   ⚠️ .nav-links a / .footer-links a は以前 a の text-decoration:none に
   ぶら下がっていたので、既定を反転した以上ここで明示しないと下線が出る。 */
.nav-brand,
.nav-links a,
.footer-links a,
.btn-primary { text-decoration: none; }
/* footer は hover で下線を出す（従来の挙動を維持）。上の none が
   a:hover より詳細度で勝つため、ここで戻さないと hover が無反応になる。 */
.footer-links a:hover { text-decoration: underline; }
/* 🔴 .nav-brand は :hover を別に書かないと上の none が効かない。
   a:hover = (0,1,1) が .nav-brand = (0,1,0) に詳細度で勝つため。
   他の3つは .nav-links a:hover / .btn-primary:hover / .footer-links a:hover が
   後段にあって抑えられているが、ロゴにだけ対応する規則が無かった。
   ⚠️ 上の「下線を出さないもの」の列挙は、hover まで面倒を見て初めて宣言どおりになる。 */
.nav-brand:hover { text-decoration: none; }

/* ===== Layout ===== */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Navigation ===== */
nav {
  border-bottom: 1px solid #e8e8f0;
  padding: 18px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1A1A1A;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 0.92rem;
  color: #555;
}
.nav-links a:hover { color: #1A1A1A; text-decoration: none; }

/* ===== Hero ===== */
.hero {
  padding: 72px 0 60px;
  text-align: center;
}
/* 傘マーク。alt="" は装飾扱いの意図（すぐ上の nav に文字の micoa があるため、
   読み上げると同じ名前を2回言うことになる）。width/height 属性は
   レイアウトシフト防止のため HTML 側にも書いてある。 */
.hero-mark {
  display: block;
  margin: 0 auto 22px;
}
.hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.05rem;
  color: #555;
  max-width: 560px;
  margin: 0 auto 36px;
}
/* 主張の1文だけ独立させる。地の文に混ぜると埋没する（脱AIパス観点5）。
   ⚠️ セレクタは `.hero p`（クラス1+要素1）より強くする必要がある。
   `.hero-lead` 単独では負けて margin-bottom が効かない。 */
.hero .hero-lead {
  color: #1A1A1A;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ブランド名と読みは1かたまりで折り返す。
   🔴 日本語のカナは文字単位で改行できるため、放置すると
   「…あります。micoa（ミ」／「コア）は、…」のように ミコア が割れる。
   .hero p は max-width:560px なので段落幅は窓幅によらず一定＝この分断は
   PC で決定的に再現する（2026-07-31 実測）。
   ⚠️ 375px でも塊の幅は約 160px（内側 327px）なので、はみ出しは起きない。
   nav / footer の折り返し対策（下部 @media）と同じ手当て。 */
.brand-name { white-space: nowrap; }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-block;
  background: #1A1A1A;
  color: #fff;
  border-radius: 8px;
  padding: 13px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
/* ⚠️ hover は「明るく」する。地色が #1A1A1A まで暗いと、従来どおり暗くしても
   変化が目視できない（旧: #123D37 → #0C2B27 は暗くする向きだった）。 */
.btn-primary:hover { background: #333333; text-decoration: none; color: #fff; }

/* ===== Section ===== */
section { padding: 56px 0; }
section + section { border-top: 1px solid #e8e8f0; }
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 28px;
  text-align: center;
}

/* ===== Product Cards ===== */
/* ⚠️ カードは <div>（リンクではない）。3つとも開発中で遷移先が無いため、
   hover の浮き上がりは付けない。付けると押せそうに見えて何も起きない。
   遷移先を用意するときは <a> に変えたうえで hover を戻すこと。 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}
.product-card {
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  padding: 28px 24px;
}
.product-badge {
  display: inline-block;
  background: #E3EFEC;
  color: #1F6F63;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 12px;
}
.product-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.product-card p {
  font-size: 0.9rem;
  color: #666;
}

/* ===== Feature List ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
}
.feature-item {
  background: #f9f9fc;
  border-radius: 10px;
  padding: 24px 20px;
}
.feature-item h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
.feature-item p { font-size: 0.85rem; color: #666; }

/* ===== Footer ===== */
footer {
  border-top: 1px solid #e8e8f0;
  padding: 32px 0;
  margin-top: 32px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-links {
  display: flex;
  gap: 20px;
  list-style: none;
}
/* ⚠️ 色は WCAG AA（4.5:1）を下回らせない。#888 は 3.54:1、#aaa は 2.32:1 で不足。
   特商法リンクは「容易に認識できるように表示」すべき導線そのもの。#666 = 5.74:1。 */
.footer-links a { font-size: 0.85rem; color: #666; }
.footer-copy { font-size: 0.85rem; color: #666; }

/* ===== Legal page ===== */
.legal-content {
  padding: 48px 0 64px;
}
.legal-content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.legal-content .updated {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 40px;
}
.legal-content h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 32px 0 8px;
  color: #333;
}
.legal-content p, .legal-content td, .legal-content li {
  font-size: 0.93rem;
  color: #444;
  line-height: 1.8;
}
/* 🔴 リセット（*{margin:0}）で p の既定マージンが消えており、段落が連続する形で
   間隔が 0px になる。行間は 26.8px（14.88px × 1.8）なので**段落の切れ目が行間より狭く**、
   次の段落が前の段落の折り返しに見える。実測（375px・chrome-headless-shell / CDP）では
   本文1章で前段落の最終行が 86.3% 埋まっており（行末の余白 44.7px ≒ 3文字弱）、
   段落の境目を示す手がかりが他に何も残っていなかった。
   ⚠️ `p` に margin-bottom を足す形にしないこと。p → ul（8px）・p → table（8px）の
   間隔まで動き、調整済みの箇所が巻き添えになる。壊れているのは**連続する p だけ**なので
   隣接兄弟に限定する。16px は同ファイルの ul の下マージンと揃えた値。
   （micoa-management #470 で defer していた既知欠陥。/legal · /privacy にも同じ形がある） */
.legal-content p + p {
  margin-top: 16px;
}
/* 🔴 リセット（*{padding:0}）で ul の左パディングが消えているため、ここで戻さないと
   list-style: outside のマーカーがコンテナの外へ出て、狭幅で見切れる。
   ⚠️ ul は nav / footer でも使っており、そちらは list-style:none で潰しているので
   .legal-content の中だけに限定して足す。 */
/* 🔴 下マージンを 0 にしないこと。箇条書きの直後に段落が来る形（本文1章）で、
   間隔が li の margin-bottom（6px）だけになり、箇条書き内の行間 26.8px より狭くなる。
   実測（375px）では次の段落が「6個目の箇条書きの折り返し」に見えていた。 */
.legal-content ul {
  margin: 8px 0 16px;
  padding-left: 1.35em;
}
.legal-content li {
  margin-bottom: 6px;
}
/* パッケージ名などの識別子。フォントを等幅にするだけで、地色は付けない
   （「傘は静かに」＝装飾を増やさない）。 */
.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
/* 本文（正本が別リポにある部分）と、当サイト側の注記の境目。
   ⚠️ 視覚的な区切りだけでなく、hr 自体が構造上の区切りとして読み上げられる。 */
.policy-note-sep {
  border: 0;
  border-top: 1px solid #e8e8f0;
  margin: 40px 0 16px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.legal-table th, .legal-table td {
  border: 1px solid #e0e0e8;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: #f5f5fa;
  font-weight: 600;
  font-size: 0.88rem;
  width: 38%;
  white-space: nowrap;
}
/* 表の中の補足（旧: インライン style）。CSP で style-src 'self' にしているため
   インライン style 属性は使えない。追加するときは必ずクラスにすること。 */
.legal-note {
  font-size: 0.88em;
  color: #666;
}
/* 🔴 <p class="legal-note"> には上の規則が効かない。.legal-content p が (0,1,1) で
   .legal-note (0,1,0) に詳細度で勝つため、font-size も color も両方無視される。
   既存2ページは <td> の中の <span> に付けており（.legal-content td は span に
   マッチしない）偶然効いていた。実測: 対策前は 14.88px / #444 ＝本文と完全に同じ。
   ⚠️ 同型の罠は上の .nav-brand:hover（a:hover に負ける）でも起きている。 */
.legal-content .legal-note {
  font-size: 0.88em;
  color: #666;
}

/* ===== 404 ===== */
.notfound {
  padding: 96px 0 104px;
  text-align: center;
}
.notfound img { width: 56px; height: 56px; margin-bottom: 20px; }
.notfound h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.notfound p { color: #555; margin-bottom: 28px; }

/* ===== Responsive ===== */
/* 🔴 スマホ幅の折り返し対策。実測（Playwright・Noto Sans JP）で、対策前は
   nav が 398px 以下・footer が 366px 以下で「できるこ／と」のように
   最後の1文字だけ次行へ落ち、ロゴと隙間0pxで密着していた。
   iPhone SE(375)・iPhone 12〜14(390)・Pixel/15(393) が全部該当していた。
   nowrap で文字単位の分割を止め、flex-wrap で項目単位の折り返しに逃がす。 */
@media (max-width: 600px) {
  /* 小画面ではマークを縮める（52+22 → 44+16）。狭幅で 52px は文字に対して
     大きく見えるため。⚠️ 「CTA がファーストビューから押し出されるから」ではない。
     375x600 で実測したところ 52px のままでも CTA 下端は約 517px に収まっていた
     （2026-07-31・iframe で真の 375px を作って計測）。
     🔴 Windows の Edge headless は --window-size=375 を指定しても
     innerWidth=492 になる（ウィンドウ幅の下限）。375px 幅で撮ったつもりの
     スクリーンショットは 492px 描画の切り取りで、測定として無効。
     iframe（width:375）に入れて計測すること。 */
  .hero-mark { width: 44px; height: 44px; margin-bottom: 16px; }
  .hero h1 { font-size: 1.6rem; }
  .nav-inner { flex-wrap: wrap; gap: 10px 12px; }
  .nav-links { gap: 12px; flex-wrap: wrap; }
  .nav-links a { font-size: 0.8rem; white-space: nowrap; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  /* 縦積み（flex-direction: column）にすると 375〜600px でも常に2段になって
     無駄に背が伸びる。折り返しを許すだけで、366px 以下でだけ2段になる。 */
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
  .footer-links a { white-space: nowrap; }

  /* 🔴 特商法の表は、狭幅では2列を保てない。th を width:auto にするだけだと
     375px で th が 78px（約3.5文字）まで縮み、「商品代金以外に必要な費用」が4行に割れる。
     Play 審査担当がスマホで見る面なので、項目名を見出し行にして縦に積む。 */
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td {
    display: block;
    width: auto;
  }
  .legal-table tr {
    border: 1px solid #e0e0e8;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .legal-table th, .legal-table td { border: 0; }
  .legal-table th {
    white-space: normal;
    border-bottom: 1px solid #e0e0e8;
  }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 1.4rem; }
}

/* ===== 補助 ===== */
.note-center {
  margin-top: 28px;
  text-align: center;
  font-size: 0.92rem;
  color: #555;
}
/* グリッドの「上」に置く導入文。.note-center は margin-top で下用なので流用できない。
   ⚠️ CSP が style-src 'self' のためインライン style 属性は使えない。必ずクラスで足すこと。 */
.section-lead {
  /* 負のマージンで .section-title の margin-bottom を相殺しない。
     title 側を変えたときに #products だけ間隔がずれる（2026-07-31 レビュー LOW-2）。 */
  margin: 0 auto 28px;
  max-width: 560px;
  text-align: center;
  font-size: 0.92rem;
  color: #555;
}
.note-muted {
  margin-top: 24px;
  font-size: 0.88rem;
  color: #666;
}