@charset "UTF-8";

/* ==========================================================================
   どうぶつ四川省 紹介ページ

   組みは原器 ../doubutsunanpure/style.css の写し（../doubutsukiokurelay/ と同じ）。
   配色は共通トークン（WEBSITE.md §2）。盤面の再現は作らず、アプリの本物の画面の写真を載せる（§5）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* 地とカード（共通トークン・原器と同じ値） */
  --c-bg:            #FBF8F3;
  --c-card:          #FFFFFF;
  --c-line:          #DCD2BE;  /* 2px の枠線 */
  --c-fill-soft:     #F0EAE0;  /* 帯・チップ */

  /* 文字 */
  --c-text:          #4A3A28;
  --c-text-strong:   #5A4634;

  /* アクセント */
  --c-accent:        #EE9450;


  /* 角丸 */
  --r-card:          20px;
  --r-card-sm:       16px;

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

  /* 版面 */
  --wrap: 1080px;
}

/* --------------------------------------------------------------------------
   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: 400;
  font-size: 17px;
  line-height: 1.85;
  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: 24px;
}

.section { padding-block: 72px; }

/* 画面全幅の帯は角丸を持たない（ゲーム規約） */
.band {
  background: var(--c-fill-soft);
  border-radius: 0;
}

.section__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 4.4vw, 32px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
}

/* 中黒でつないだ語群が語の途中で折れるのを防ぐ（「げきむ / ず」になっていた） */
.nw { white-space: nowrap; }

.section__lead {
  margin: 0 auto 40px;
  text-wrap: balance;
  max-width: 42em;
  color: var(--c-text-strong);
  font-size: 15px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. ヒーロー
   -------------------------------------------------------------------------- */
.hero { padding-block: 56px 72px; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero__logo {
  width: 100%;
  max-width: 560px;   /* 表示幅の上限。素材は 1149px（約 2x） */
  margin: 0 0 24px;
}

.hero__catch {
  margin: 0 0 8px;
  text-wrap: balance;
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .03em;
}

.hero__sub {
  margin: 0 0 32px;
  color: var(--c-text-strong);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   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. 画面の写真（アプリの本物の画面。枠は 2px の線・角丸 28px・フラット）
   -------------------------------------------------------------------------- */
.phone {
  margin: 0;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: 28px;
  overflow: hidden;
}

.phone img { width: 100%; height: auto; }

.hero__phone { width: min(300px, 70vw); margin-inline: auto; }

.hero__phone-wrap { display: flex; justify-content: center; }

.shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shot { width: 200px; text-align: center; }

.shot__cap {
  margin: 10px 0 0;
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

.hero__title {
  margin: 0 0 24px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .04em;
}

.hero__title small {
  display: block;
  margin-top: 6px;
  color: var(--c-text-strong);
  font-size: .42em;
  letter-spacing: .08em;
}

.hero__icon {
  width: 96px;
  height: 96px;
  margin: 0 0 16px;
  border-radius: 22px;
}


/* --------------------------------------------------------------------------
   6. カード（特徴・あそびかた・収録内容）
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 32px 28px 36px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}


.card__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .03em;
}

.card__body {
  margin: 0;
  color: var(--c-text-strong);
  font-size: 15px;
}


/* あそびかた */
.steps { counter-reset: step; }

.steps .card { text-align: left; }

.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 18px;   /* 高さ 40 × 0.45 */
  background: var(--c-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.step__rule {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-card-sm);
  background: var(--c-fill-soft);
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. どんなパズル?
   -------------------------------------------------------------------------- */
.about__body {
  max-width: 34em;
  margin-inline: auto;
  font-size: 16px;
}

.about__body p { margin: 0 0 1.2em; }

.about__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. 収録内容
   -------------------------------------------------------------------------- */
.sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 116px;
  padding: 16px 18px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card-sm);
}

.size__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
}

.size__dim {  /* モードの短い説明 */
  color: var(--c-text-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}


/* --------------------------------------------------------------------------
   9. クレジット
   -------------------------------------------------------------------------- */
.credits {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.credits dl { margin: 0; }

.credits dt {
  color: var(--c-text-strong);
  font-size: 13px;
  letter-spacing: .08em;
}

.credits dd {
  margin: 0 0 22px;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 700;
}

.credits dd:last-of-type { margin-bottom: 0; }

.credits__license {
  display: block;
  color: var(--c-text-strong);
  font-size: 13px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9b. お問い合わせ
   様式はクレジットのカードに揃える（面は地色・縁は 2px ProgressTrack）。
   -------------------------------------------------------------------------- */
.contact {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  text-align: center;
}

.contact__label {
  margin: 0 0 10px;
  color: var(--c-text-strong);
  font-size: 13px;
  letter-spacing: .08em;
}

.contact__mail {
  margin: 0 0 12px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 800;
  letter-spacing: .02em;
  word-break: break-all;
}

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

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

/* --------------------------------------------------------------------------
   10. フッター
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 40px 48px;
  border-top: 2px solid var(--c-line);
  color: var(--c-text-strong);
  font-size: 14px;
  text-align: center;
}

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

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

.footer__copy { margin: 0; }

/* --------------------------------------------------------------------------
   11. 画面幅への追従
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    text-align: center;
  }

  .hero__logo { margin-inline: auto; }

  .stores { justify-content: center; }

  .cards { grid-template-columns: minmax(0, 1fr); }

  }

@media (max-width: 560px) {
  body { font-size: 16px; }

  .wrap { padding-inline: 20px; }

  .section { padding-block: 56px; }

  .card { padding: 28px 22px 30px; }

  .size { min-width: 96px; padding: 14px 14px; }
}

/* 動きを減らす設定を尊重する（本ページは JS を使わないが、
   将来スクロール演出を足すときのため既定を置いておく） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}