/* じゃあパン、よろしくね。の紹介ページだけの絵と色。共通の形は /common/intro.css、ボタンや色は timer.css */
body.intro { font-family: var(--pf); font-weight: 700; color: var(--ink); background: var(--y); }
/* 紹介ページの背景もゲームのタイトルと同じギンガムチェック(2026-10-24 ユーザー)。
   スクロールしてもチェックが動かないよう、画面に固定した下じきに描く(iPhone の Safari は background-attachment: fixed が効かないため) */
body.intro { background: #FFE7A3; }
body.intro::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #FFE7A3;
  background-image: linear-gradient(90deg, rgba(255, 191, 11, .62) 50%, transparent 50%), linear-gradient(rgba(255, 191, 11, .62) 50%, transparent 50%);
  background-size: 64px 64px;
}
.in-head a, .in-more { color: var(--ink); }
.in-logo { width: 110px; height: auto; margin-top: 8px; }
.in-title { margin: 0; }
.in-title img { display: block; width: min(300px, 78vw); height: auto; }
.catch { font-size: 16px; font-weight: 900; }
.in-chips b { color: var(--red-text); }
.in-sec h2 { border-bottom-color: var(--ink); }
.in-text b { color: var(--red-text); }
.in-steps .no { color: var(--teal); }
.in-step-art { background: var(--y-light); border-width: 3px; border-radius: 14px; }
.in-work { padding: 0; overflow: hidden; background: var(--scene); }
.in-work img { display: block; width: 100%; max-width: 280px; height: auto; }
.in-step-shigeo { width: 140px; height: auto; }
.in-steps .rule-jams { margin: 6px auto 0; }

/* 結果の例: ゲームの結果画面と同じ部品(.fn-band / .fn-mine / .fn-list は timer.css) */
.in-result { max-width: 380px; margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; }