/* ======================================================================
   『アリスの時間迷宮』第一版のページ (2026-10-08)
   ・ games/alice/*.php だけが読む (= 中身は include/alice1_site.php)
   ・ 共通の部品と色は css/km_public.css (--pub-*) ・ 見た目は第二版の作品ページ (css/alice2.css) に揃える
   ・ 日本語に letter-spacing を付けない / 絵文字を使わない
   ====================================================================== */

/* ── 本文の幅 ── */
.al1-col { max-width: 760px; margin: 0 auto; padding: 48px 24px 32px; }
.al1-col--wide { max-width: 1040px; }
@media (max-width: 560px) { .al1-col { padding: 32px 16px 24px; } }

/* 作品名を途中で折り返さない (= alice1_text()) */
.al1-nw { white-space: nowrap; }

/* 画面には出さない見出し (= 読み上げ用) */
.al1-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 概要 ── (= 題字の幅 ・ km_public.css の body.pub img { max-width: 100% } より強く) */
.al1-logo { margin: 0; text-align: center; }
body.pub .al1-logo img { display: block; width: 100%; max-width: 590px; height: auto; margin: 0 auto; }
.al1-info { margin: 40px 0 0; padding: 26px 20px; border: 1px solid var(--pub-line); border-radius: 12px; background: rgba(243,238,228,.035); font-family: var(--pub-sans); font-size: 14.5px; line-height: 2; color: var(--pub-ink-soft); text-align: center; }
.al1-second { margin: 36px 0 0; font-size: 16px; line-height: 1.9; text-align: center; word-break: auto-phrase; }
.al1-second a { color: var(--pub-gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(232,201,106,.5); }
.al1-second a:hover { text-decoration-color: var(--pub-gold); }

/* 箱の表 / 裏 (= 旧本番どおり 2 枚を横に) */
.al1-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.al1-photo { margin: 0; }
.al1-photo img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--pub-line); background: var(--pub-bg-2); }
@media (max-width: 420px) { .al1-photos { gap: 10px; } .al1-info { padding: 22px 14px; font-size: 13.5px; } }

.al1-note { margin: 14px 0 0; font-family: var(--pub-sans); font-size: 13px; line-height: 1.8; color: var(--pub-ink-soft); text-align: center; word-break: auto-phrase; }
.al1-end { margin-top: 48px; }

/* ── ボタンの並び (= 旧本番の白い四角 ・ 第二版の作品ページの下のリンクと同じ形) ── */
.al1-btns { display: grid; gap: 12px; max-width: 440px; margin: 36px auto 0; padding: 0; list-style: none; }
.al1-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border: 1px solid var(--pub-line-2); border-radius: 10px; background: rgba(243,238,228,.03); font-size: 15px; line-height: 1.6; color: var(--pub-ink); text-decoration: none; transition: border-color .2s, background .2s; }
.al1-btn:hover { border-color: var(--pub-gold); background: rgba(232,201,106,.06); }
.al1-btn .pub-arr { flex: 0 0 auto; font-family: var(--pub-sans); font-size: 13px; color: var(--pub-gold); }
.al1-col > .al1-btns:first-child, .al1-sr + .al1-btns { margin-top: 0; }

/* ── 説明書 (= 幅いっぱい ・ 押すと原寸) ── */
.al1-manual { display: grid; gap: 24px; margin-top: 36px; }
.al1-sr + .al1-manual { margin-top: 0; }
.al1-manual__page { display: block; border-radius: 6px; overflow: hidden; background: #fff; transition: opacity .2s; }
.al1-manual__page:hover { opacity: .92; }
.al1-manual__page img { display: block; width: 100%; height: auto; }

/* ── FAQ / エラッタ ── */
.al1-title { margin: 0; font-size: clamp(26px, 4.4vw, 38px); font-weight: 600; line-height: 1.4; word-break: auto-phrase; text-wrap: pretty; }
.al1-sec { margin-top: 48px; }
.al1-h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--pub-line); font-size: clamp(19px, 2.6vw, 24px); font-weight: 500; line-height: 1.6; color: var(--pub-ink-soft); word-break: auto-phrase; }

.al1-qa { padding: 20px 0; border-bottom: 1px solid var(--pub-line); }
.al1-qa p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--pub-ink); overflow-wrap: anywhere; }
.al1-qa p + p { margin-top: .8em; }

.al1-err { padding: 20px 0; border-bottom: 1px solid var(--pub-line); }
.al1-err p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--pub-ink); overflow-wrap: anywhere; }
.al1-err p + p { margin-top: .4em; }
.al1-err__head strong { font-weight: 700; color: var(--pub-ink); }

/* 箱とカードの写真 5 枚 (= 旧本番の切り替わる表示 ・ 横に送って見る ・ JS なし) */
.al1-gallery { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.al1-gallery__item { flex: 0 0 82%; margin: 0; scroll-snap-align: center; }
@media (min-width: 760px) { .al1-gallery__item { flex-basis: 62%; } }
.al1-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--pub-line); background: var(--pub-bg-2); }