@charset "UTF-8";

/* ==========================================================================
   元素記号クイズ 紹介ページ

   このページはアプリの画面（iOS の「設定」アプリ風の UI）に寄せて組む。
   WEBSITE.md §2 の様式のうち「2px 枠・角丸 20px・影禁止・交互の帯」を適用しない
   （§2 の例外・2026-09-26 たーぼぉ指示・docs/tasks/004）。
   フォント・絵文字禁止・ブレークポイント（900 / 560）は共通のまま。

   出典（アプリ側プロジェクト ~/Unity/ElementQuiz）:
     色 … Assets/Taabox/Data/Config/AppPaletteLight.asset
          （_screenBackground / _textPrimary / _textSecondary / _accent / _textOnAccent /
           _categoryElement / _categoryFormula / _categoryIon / _menuHighSchoolIconFill /
           _checkFrame）
     カード … Assets/Taabox/Themes/ClearLight.asset
          （cardCornerRadius 32 / cardBorderWidth 1.5 / cardBorderColor #141922 α 0.09 /
           cardShadowColor #141922 α 0.10・offset y 4（Unity は上が正なので下へ 4）・
           softness 14・spread 1 / progressTrackColor #D1D1D6＝区切り線）
     寸法 … Spec.md §5 の「メニュー」の行（アプリは幅 1080 の座標）
     マーク … Assets/Taabox/Arts/Sprites/menu_title_mark.png（672 角）を 204 角の WebP に
     （2026-09-26 に読み直し。色は float を 255 倍して丸めた値）

   寸法の写し方: ページの値 ＝ アプリの値 × 0.37（スマートフォンの幅 390 ÷ 1080 ≒ 0.36。
   iOS の標準の大きさ＝行の高さ 44〜52pt・本文 17pt に近くなる）。
   画面が広くなっても文字や行は大きくしない。中身の列は最大 680px で中央に置く。

     アプリ（1080 座標）                       → ページ
     帯: 上下の余白 56                          → 21px
         マークの白いパネルの幅 140             → 52px（画像は 672 のうちパネル 512。
                                                  画像の表示幅 68px・左右の透明 8px）
         パネル → アプリ名 40                   → 15px（画像の右の透明 8px を引いて 7px）
         アプリ名 Display 108                   → 40px（狭い幅では縮めて 1 行を保つ）
         アプリ名 → ひと言 14                   → 5px
         タイトルの入れ物の高さ 217             → 80px（行の高さ 1.35 / 1.45 で 78px にした）
         帯の高さ 329                           → 122px（実測 120px）
         ひと言 Caption 36                      → 13px
     小さい見出し Caption 36・高さ 52           → 13px・19px
         カードの左端から 32                    → 12px
         帯 / 前のカード → 見出し 48            → 18px
         見出し → カード 16                     → 6px
     カードの左右の余白（画面の端から）48       → 18px
     カードの角丸 32                            → 12px
     カードの縁 1.5                             → 換算せず、01_home.png の画素に合わせた
                                                  （005。値と画素の表は §1 のトークンと §6）
     カードの影 offset 4・softness 14・spread 1 → 0 1.5px 5px 0.4px
     行の高さ 2 行 168 / 1 行 144               → 最小 62px / 53px
     1 文字の四角 88 角・角丸 20・Body 44       → 32px・7px・16px
         行の左端から四角の左端 31（実測）      → 12px
     名前 Body 44                               → 17px（指示書の目安。44 × 0.37 = 16.3）
     説明 Caption 36                            → 14px（13.3。複数行の本文を読ませるため 14）
     区切り線の開始（行の左端から）152          → 56px（文字の左端と同じ）
     区切り線の太さ 2                           → 1px（× 0.37 は 0.74px。Chrome は 1px 未満の
                                                  border を 1px に切り上げて描くため 1px）
   字の太さ: アプリの書体は TMP の MPLUSRounded1c-Medium SDF 1 本（TbxTheme.primaryFont。
     太字の指定は無い）。ページはアプリに対応する文字をすべて 500（Medium）にした。
     01_home.png と 390px × 3 倍の撮影で、同じ文字の縦画の幅（字の大きさで割った値）を比べて決めた
     （docs/tasks/005 の B）。キャッチ・「近日公開」はアプリに対応する文字が無いので 700 のまま
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 地とカード */
  --c-bg:            #F2F2F7;  /* 地（_screenBackground） */
  --c-card:          #FFFFFF;  /* カードの面 */
  --c-line:          #D1D1D6;  /* 区切り線・進み具合の帯の残り（テーマの progressTrackColor） */
  /* カードの縁。テーマの設定値（cardBorderColor #141922 α 0.09・幅 1.5）ではなく、
     アプリのスクリーンショット 01_home.png の画素に合わせた値（docs/tasks/005 の A。
     アプリは縁・影・角丸の描き方が重なって、設定値より濃く見えるため）。
     縁を 1 デバイス px ずつの輪（box-shadow）で描き、上・左右と下で濃さを分ける。表は §6 */
  --c-card-edge:     rgba(20, 25, 34, .16);   /* 上・左・右の縁 */
  --c-card-ring:     rgba(20, 25, 34, .11);   /* 上・左・右の縁のすぐ外 */
  --c-card-edge-b:   rgba(20, 25, 34, .033);  /* 下の縁 */
  --c-card-ring-b1:  rgba(20, 25, 34, .045);  /* 下の縁の外 1〜2 デバイス px */
  --c-card-ring-b2:  rgba(20, 25, 34, .058);  /* 下の縁の外 1〜3 デバイス px */
  --c-card-shadow:   rgba(20, 25, 34, .10);  /* カードの影（cardShadowColor） */

  /* 文字 */
  --c-text:          #000000;  /* 本文・見出し（_textPrimary） */
  --c-text-strong:   #6C6C70;  /* 補足（_textSecondary） */

  /* アクセント */
  --c-accent:        #0088FF;  /* 帯・番号の四角・正解の選択肢（_accent） */
  --c-on-accent:     #FFFFFF;  /* アクセントの上の文字（_textOnAccent） */

  /* 1 文字の四角の地（アプリのホームと同じ色） */
  --c-icon-indigo:   #6155F5;  /* _menuHighSchoolIconFill */
  --c-icon-gray:     #8E8E93;  /* _checkFrame */
  --c-cat-element:   #1C56C4;  /* _categoryElement */
  --c-cat-formula:   #A64B00;  /* _categoryFormula（反応式も同じ色） */
  --c-cat-ion:       #6B37D6;  /* _categoryIon */

  /* 見本の端末の枠（§5） */
  --c-bezel:         #0B0B0C;  /* 画面のまわりの縁（黒） */
  --c-rim-top:       #F4F5F8;  /* 側面の輪の上端（明るい金属色） */
  --c-rim-bottom:    #C3C6CC;  /* 側面の輪の下端（上よりやや暗い） */
  --c-device-shadow: rgba(20, 25, 34, .18);  /* 端末の大きく柔らかい影 */
  --c-device-contact: rgba(20, 25, 34, .12); /* 端末の近い影（接地感） */

  /* カード（上の換算表） */
  --r-card:          12px;
  /* 1 デバイス px（3 倍の画面）。縁の輪はこの幅でずらした影で描く
     （縁を border で描くと Chrome は 1px 未満を 1px に切り上げ、3 デバイス px になる） */
  --dp:              0.3334px;
  /* 影（cardShadow の × 0.37 の換算。004 のまま） */
  --card-drop:       0 1.5px 5px 0.4px var(--c-card-shadow);
  --card-shadow:
    0 calc(var(--dp) * -1) 0 0 var(--c-card-edge),
    calc(var(--dp) * -1) 0 0 0 var(--c-card-edge),
    var(--dp) 0 0 0 var(--c-card-edge),
    0 var(--dp) 0 0 var(--c-card-edge-b),
    0 calc(var(--dp) * -2) 0 0 var(--c-card-ring),
    calc(var(--dp) * -2) 0 0 0 var(--c-card-ring),
    calc(var(--dp) * 2) 0 0 0 var(--c-card-ring),
    0 calc(var(--dp) * 2) 0 0 var(--c-card-ring-b1),
    0 calc(var(--dp) * 3) 0 0 var(--c-card-ring-b2),
    var(--card-drop);
  --hairline:        1px;

  /* 行 */
  --row-inset:       12px;   /* 行の左端 → 四角・文字（四角が無い行） */
  --row-text:        56px;   /* 行の左端 → 文字・区切り線 */
  --row-right:       16px;
  --icon:            32px;

  /* 書体 */
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
          "Yu Gothic", "Meiryo", system-ui, sans-serif;

  /* 版面（中身の列の最大幅 680px ＋ 左右の余白 18px） */
  --wrap: 716px;
  --gutter: 18px;
}

/* --------------------------------------------------------------------------
   2. 土台
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-text-strong); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 節＝小さい見出し＋カード。見出しの上の余白 18px（アプリの 48） */
.section { padding-top: 18px; }

main { padding-bottom: 48px; }

/* iOS の小さい見出し（カードの左上・補足色・左そろえ） */
.section__title {
  margin: 0 0 6px;
  padding-left: 12px;
  color: var(--c-text-strong);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: .02em;
}

/* 見出しの下の説明（お問い合わせの導入文）。地の上に補足色で置く */
.section__lead {
  margin: 0 0 8px;
  padding-inline: 12px;
  color: var(--c-text-strong);
  font-size: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. ヒーロー
   帯（画面の幅いっぱい・角なしの #0088FF）＋その下の地の上にキャッチ・バッジ・クイズ画面
   -------------------------------------------------------------------------- */
.hero__band {
  padding-block: 21px;
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* マークとアプリ名の組を左右中央に置く。上下はマークの中心と文字の組の中心をそろえる */
.hero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
}

/* 画像は 672 のうち白いパネルが 512（左右に透明 80）。パネル 52px → 画像 68px。
   透明の 8px ぶん左へずらし、組の左端をパネルの左端にする */
.hero__mark {
  flex: none;
  width: 68px;
  height: 68px;
  margin-left: -8px;
}

.hero__names {
  min-width: 0;
  margin-left: 7px;   /* パネルの右端 → 文字 15px（画像の右の透明 8px を引く） */
}

/* 1 行を保つ。7 文字（全角）＋左右の余白とマークの幅 86px ぶんを引いて 7.2 で割る */
.hero__name {
  margin: 0;
  font-size: clamp(24px, calc((100vw - 86px - 2 * var(--gutter)) / 7.2), 40px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero__tagline {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 20px 6px;
}

/* 分かち書きのキャッチは**空白のところでだけ折る**（wordsearch2 と同じ） */
.hero__catch {
  margin: 0 0 6px;
  text-wrap: balance;
  word-break: keep-all;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
}

/* 末尾の 1〜2 文字だけが次の行に残らないようにする（900px で「す。」だけが残った） */
.hero__sub {
  margin: 0 0 18px;
  text-wrap: pretty;
  color: var(--c-text-strong);
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. ストアバッジ
   URL が決まったら index.html の「ストアURL差し替え」ブロックだけを直す。
   CSS 側で触るものは無い。
   -------------------------------------------------------------------------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.store {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 実 ink の高さを 54px に揃える。
   App Store バッジ … 108.851 × 40（余白なし）→ 54px
   Google Play バッジ … 646 × 250 のうち ink は 646 × 192（上下に規定の余白）
                       → 54 × 250 / 192 = 70.3px */
.store__img--apple  { height: 54px; width: auto; }
.store__img--google { height: 70px; width: auto; }

.store.is-disabled {
  pointer-events: none;
  cursor: default;
  filter: grayscale(1);
  opacity: .45;
}

.stores__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.stores__note::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  vertical-align: 1px;
}

/* --------------------------------------------------------------------------
   5. 見本のアプリ画面（実物のスクリーンショット＋CSS で描いた端末の枠）

   中身はアプリのスクリーンショット 03_quiz_correct.png（1320 × 2868）を
   幅 560（表示の最大幅 280px の 2 倍）に縮小した assets/screen_quiz.webp。
   004・005 の HTML/CSS による再現はやめた（docs/tasks/006）。

   枠は特定の機種に似せない汎用のスマートフォン。狙いは「実物の端末を少し離れて
   見たときの印象」で、平たい黒い太枠（005 の #1C1C1E・画面の幅の 4.5%）に見えないこと。
   Apple のフレーム画像・iPhone の意匠を写した素材は使わない。カメラの穴・ボタン・
   ノッチも付けない（スクリーンショットにステータスバーが無く、装飾は機種を連想させるため）。
   決めた値と理由:
     画面の幅 --w      280px（560px 以下 260px）。005 の画面の幅と同じ
     画面の角 --r      画面の幅の 12.5%（280px で 35px。スクリーンショットの座標で 165）。
                       一時停止の丸（x 59〜165）と最下段の選択肢の角が欠けない大きさの
                       うち、端末の画面の角らしく見える大きい値
     縁 --bezel        画面の幅の 2%（280px で 5.6px）・#0B0B0C。細くして、黒い太枠に
                       見えないようにする（指示の 2〜2.5% のうち細いほう。2.25% と撮り比べた）
     側面の輪 --rim    2px・上 #F4F5F8 → 下 #C3C6CC のごく弱い縦のグラデーション。
                       縁の外側の明るい金属色の細い輪で、端末の側面の厚みに見せる。
                       最初に置いた 1.5px・#D9DBE0 → #B3B6BD は、影で暗くなった地
                       （#D3〜#DE）と同じ明るさになって見えなかったため、影の地より明るい色にし、
                       deviceScaleFactor 1 でも 1px 未満に丸められないよう 2px にした
     角の丸み          画面の角 → 縁の外側 = 画面の角＋縁 → 輪の外側 = さらに＋輪。
                       3 つの角の中心が同じ点になるので、縁と輪の太さが角でも変わらない
     影                0 24px 48px（α .18）の大きく柔らかい影 1 段と、
                       0 2px 6px（α .12）の近い影 1 段（接地感）。カードの影より強い
                       （/elementquiz/ は WEBSITE.md §2 の「影禁止」の例外・docs/tasks/004）
   地色の隙間を作らない描き方: 縁と輪は 1 つの要素の背景 2 層で描く
   （輪＝border の下に border-box のグラデーション、縁＝padding-box の黒）。画像は縁の黒の
   上に角丸で切り抜いて置くので、画面と縁・縁と輪の境目の下に地色が出る層が無い。
   -------------------------------------------------------------------------- */
.device {
  --w: min(280px, 72vw);
  --r: calc(var(--w) * 0.125);
  --bezel: calc(var(--w) * 0.02);
  --rim: 2px;

  width: var(--w);
  margin-inline: auto;
  padding: var(--bezel);
  border: var(--rim) solid transparent;
  border-radius: calc(var(--r) + var(--bezel) + var(--rim));
  background:
    linear-gradient(var(--c-bezel), var(--c-bezel)) padding-box,
    linear-gradient(180deg, var(--c-rim-top), var(--c-rim-bottom)) border-box;
  box-shadow:
    0 24px 48px var(--c-device-shadow),
    0 2px 6px var(--c-device-contact);
  box-sizing: content-box;
}

.device__screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   6. カードと行（アプリのホームのカードと同じ作り）
   行は押せない（リンクではない）ので「›」は付けない

   カードの縁の画素（005 の A。アプリ＝01_home.png の最初のカードの辺の中ほど、
   ページ＝390px 幅・deviceScaleFactor 3 の撮影の最初のカードの同じ場所。値は R 0〜255。G・B も同じ傾向）
                縁の内側   縁（最も暗い）  外 1   外 2   外 3
     上   アプリ   255        182          215    233
          ページ   255        180          212    237
     左右 アプリ   255        179          210    224
          ページ   255        177          209    233
     下   アプリ   255        198          205    215    226
          ページ   255        199          206    215    228
   -------------------------------------------------------------------------- */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-card);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* 2 行の行（名前＋説明）。最小の高さ 62px（アプリの 168） */
.row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 8px var(--row-right) 8px var(--row-text);
}

/* 1 行の行。最小の高さ 53px（アプリの 144） */
.row--single { min-height: 53px; }

/* 四角の無い行（収録内容）。文字と区切り線は行の左端から 12px */
.row--plain {
  display: block;
  padding-left: var(--row-inset);
}

/* 区切り線: 文字の左端（四角の右）からカードの右端まで */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--row-text);
  right: 0;
  border-top: var(--hairline) solid var(--c-line);
}

.row--plain + .row--plain::before { left: var(--row-inset); }

/* 1 文字の四角（88 角・角丸 20・Body 44 → 32px・7px・16px）。行の上下中央 */
.row__icon {
  position: absolute;
  top: 50%;
  left: var(--row-inset);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon);
  height: var(--icon);
  margin-top: calc(var(--icon) / -2);
  border-radius: 7px;
  color: var(--c-on-accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.row__icon--accent { background: var(--c-accent); }
.row__icon--indigo { background: var(--c-icon-indigo); }
.row__icon--gray   { background: var(--c-icon-gray); }

.row__text { min-width: 0; }

/* 名前（Body） */
.row__name {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* 説明（Caption・補足色・複数行可） */
.row__desc {
  margin: 2px 0 0;
  color: var(--c-text-strong);
  font-size: 14px;
  line-height: 1.5;
}

/* 1 行の行の本文（Body） */
.row__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. どんなアプリ?（1 枚のカードに本文）
   -------------------------------------------------------------------------- */
.about__body {
  padding: 12px var(--row-right) 13px var(--row-inset);
  font-size: 17px;
  line-height: 1.7;
}

.about__body p { margin: 0; }

/* --------------------------------------------------------------------------
   8. 収録内容
   ラベルと中身を 1 つの <p> に持つ。ラベルだけを 1 行目の名前（Body）として出し、
   残り（中身）を 2 行目以降に補足色で出す（ラベルのコロンは 005 で外した）
   -------------------------------------------------------------------------- */
.spec__body {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 14px;
  line-height: 1.5;
}

.spec__label {
  display: block;
  margin-bottom: 2px;
  color: var(--c-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* カテゴリ 4 つ。1 行＝1 カテゴリで、左に 1 文字の四角（アプリの「まちがえた問題」のカード） */
.genres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
}

.genre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 1.4;
  white-space: nowrap;
}

.genre__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon);
  height: var(--icon);
  border-radius: 7px;
  color: var(--c-on-accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.genre__icon--element { background: var(--c-cat-element); }
.genre__icon--formula { background: var(--c-cat-formula); }
.genre__icon--ion     { background: var(--c-cat-ion); }

/* --------------------------------------------------------------------------
   9. お問い合わせ
   様式は ../doubutsunanpure/ と同じ（ページ内完結・メール難読化）。
   導入文は小さい見出しの下の説明として地の上に置き、カードの中は左そろえ
   -------------------------------------------------------------------------- */
.contact {
  padding: 12px var(--row-right) 14px var(--row-inset);
}

.contact__label {
  margin: 0 0 4px;
  color: var(--c-text-strong);
  font-size: 13px;
  line-height: 1.5;
}

.contact__mail {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-all;
}

/* クリックでコピーできることを示す。JS が無くても文字は読める */
.js-copy-mail {
  cursor: pointer;
  padding-bottom: 1px;
  border-bottom: 2px solid var(--c-accent);
}

.contact__note {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   10. フッター（地 #F2F2F7・補足色の小さい文字）
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 8px 40px;
  color: var(--c-text-strong);
  font-size: 13px;
  text-align: center;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.footer__nav a { color: var(--c-text-strong); }

.footer__copy { margin: 0; }

/* --------------------------------------------------------------------------
   11. 画面幅への追従
   文字や行の大きさは変えない。広い幅ではキャッチ・バッジとクイズ画面を横に並べる
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 28px 10px;
  }
}

@media (max-width: 900px) {
  .hero__visual { justify-self: center; }
}

@media (max-width: 560px) {
  .device { --w: min(260px, 70vw); }

  .hero__catch { font-size: 20px; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}