@charset "utf-8";
/* =========================================================
   ポチっとSPICOCO  トップページ  style.css  v1
   設計: Spica Matura 案 / 基準幅 390px / 本文最大幅 760px
   数値の根拠と変更してよい範囲は design-spec.md を参照
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root{
  /* 色: brand-system.md の7色 + 実装に必要な派生色 */
  --midnight:#082851;
  --deep-navy:#061B35;
  --gold:#F6B91B;
  --cream:#FFF3D4;
  --vermilion:#E74624;
  --leaf:#56A64B;
  --cyan:#54E6F2;

  --gold-deep:#B8830B;   /* 派生: 主ボタンの押し込み影 */
  --gold-soft:#FFD76A;   /* 派生: 夜空側の細い罫線 */
  --paper:#FFFDF6;       /* 派生: 紙面カードの地 */
  --ink:#061B35;         /* 紙面の本文 */
  --ink-mute:#41556F;    /* 紙面の補助文 (Wheat Cream 上で 6.8:1) */
  --line:#D9C596;        /* 紙面の罫線 */

  /* 余白 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* 角丸: カードごとに統一し、何でも丸くしない */
  --r-card:20px;   /* 紙面カード */
  --r-media:14px;  /* 画像枠・感想ボタン */
  --r-chip:10px;   /* 小さなラベル */

  /* 影: 主ボタンだけ2段 */
  --sh-btn:0 4px 0 var(--gold-deep), 0 10px 18px rgba(6,27,53,.35);
  --sh-btn-active:0 1px 0 var(--gold-deep), 0 4px 10px rgba(6,27,53,.30);
  --sh-card:0 8px 24px rgba(6,27,53,.14);
  --sh-media:0 14px 28px rgba(0,0,0,.42);

  /* 文字: 使用ファミリーは2種類まで（本文用・見出し用） */
  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","BIZ UDPGothic","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
  --font-display:"Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP","BIZ UDPGothic","Yu Gothic",Meiryo,system-ui,sans-serif;

  --wrap:760px;    /* 本文最大幅 */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
/* HTML の width/height 属性が CSS の高さとして効いてしまうのを防ぐ */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
h1,h2,h3,p{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}

:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--gold);color:var(--deep-navy);
  padding:10px 16px;font-weight:700;border-radius:0 0 var(--r-chip) 0;
}
.skip-link:focus{left:0;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   3. 夜空セクション（ヘッダー + EGG POP!）
   背景は Midnight 単色 + 下辺の麦畑帯のみ。粒子や星は足さない。
   ========================================================= */
.night{
  position:relative;
  background-color:var(--midnight);
  background-image:
    radial-gradient(130% 55% at 50% -8%, #0F3A6C 0%, rgba(15,58,108,0) 62%),
    url("../assets/bg-field-band.jpg");
  background-repeat:no-repeat,no-repeat;
  background-position:top center,bottom center;
  background-size:100% 420px, auto 220px;
  color:var(--cream);
  padding-bottom:var(--s9);
}
/* 麦畑帯の上端を夜空へなじませる */
.night::before{
  content:"";position:absolute;left:0;right:0;bottom:176px;height:96px;
  background:linear-gradient(to bottom,var(--midnight),rgba(8,40,81,0));
  pointer-events:none;
}
/* 麦畑の下端を紙面へ溶かす */
.night::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30px;
  background:linear-gradient(to bottom,rgba(255,243,212,0),var(--cream));
  pointer-events:none;
}
.night > *{position:relative;}

/* ---- 3-1. ヘッダー ---- */
.site-header{padding-top:var(--s2);text-align:center;}

.header-utility{display:flex;justify-content:flex-end;}
.menu-btn{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:transparent;border:1px solid rgba(255,243,212,.35);
  border-radius:var(--r-chip);cursor:pointer;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--cream);}
.menu-btn[aria-expanded="true"]{background:rgba(255,243,212,.12);}

#site-nav{
  margin-top:var(--s3);padding:var(--s2) var(--s3);
  background:rgba(6,27,53,.78);
  border:1px solid rgba(255,243,212,.22);
  border-radius:var(--r-card);
  text-align:left;
}
#site-nav[hidden]{display:none;}
#site-nav a{
  display:flex;align-items:center;min-height:44px;padding:0 var(--s2);
  font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(255,243,212,.12);
}
#site-nav li:last-child a{border-bottom:0;}
#site-nav a[aria-disabled="true"]{color:rgba(255,243,212,.55);}

.brand{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;margin-top:var(--s2);
}
.brand__mark{height:64px;width:auto;flex:none;}
.brand__name{
  font-family:var(--font-display);
  font-size:clamp(22px,7vw,34px);
  font-weight:800;line-height:1.15;letter-spacing:.005em;
  text-shadow:0 2px 0 rgba(6,27,53,.55);
}
/* ロゴは将来専用字形へ差し替える。色はブランド7色のみ使用 */
.brand__name .n {color:var(--cream);}
.brand__name .spicoco{color:var(--gold);}

.tagline{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:var(--s3);
  font-family:var(--font-display);
  font-size:clamp(16px,4.6vw,21px);
  font-weight:700;line-height:1.5;color:var(--gold);
}
/* 罫線は1行に収まる幅のときだけ出す（480px以上） */
@media (min-width:480px){
  .tagline::before,.tagline::after{
    content:"";flex:none;width:24px;height:1px;
    background:var(--gold-soft);opacity:.75;
  }
}
.lede{
  margin-top:var(--s2);font-size:14px;line-height:1.7;
  color:rgba(255,243,212,.82);
}

/* ---- 3-2. 公開中のゲーム ---- */
.game{
  position:relative;isolation:isolate;margin-top:var(--s6);
  padding-top:var(--s7);padding-bottom:var(--s8);
}
.game::before{
  content:"";position:absolute;z-index:-1;top:0;left:50%;width:min(720px,calc(100vw - 40px));height:1px;
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(246,185,27,.5) 20%,rgba(246,185,27,.5) 80%,transparent);
}
.game::after{
  content:"";position:absolute;z-index:-2;inset:0 auto 0 50%;width:100vw;
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 88% 66% at 50% 50%,rgba(84,230,242,.25) 0%,rgba(84,230,242,.13) 42%,rgba(8,40,81,.18) 65%,rgba(6,27,53,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  transition:opacity .48s ease;
}
.has-scroll-focus .game.is-focus::after{opacity:1;}
.game--triathlon::before,.game--aburupurun::before{opacity:.65;}
.game__head,.game__media,.btn-play,.play-note{
  transform-origin:center;transition:opacity .48s ease,transform .48s cubic-bezier(.2,.75,.2,1),filter .48s ease;
}
.has-scroll-focus .game:not(.is-focus) .game__head,
.has-scroll-focus .game:not(.is-focus) .game__media,
.has-scroll-focus .game:not(.is-focus) .btn-play,
.has-scroll-focus .game:not(.is-focus) .play-note{
  opacity:.62;transform:scale(.88);filter:brightness(.72) saturate(.72);
}
.has-scroll-focus .game.is-focus .game__head,
.has-scroll-focus .game.is-focus .game__media,
.has-scroll-focus .game.is-focus .btn-play,
.has-scroll-focus .game.is-focus .play-note{opacity:1;transform:scale(1.035);filter:none;}
.has-scroll-focus .game.is-focus .btn-play:active{transform:translateY(3px) scale(1.035);}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--gold);
}
.eyebrow::after{content:"";width:36px;height:1px;background:var(--gold);opacity:.6;}

.game__title{
  font-family:var(--font-display);
  font-size:clamp(28px,8.4vw,40px);
  font-weight:800;letter-spacing:.04em;line-height:1.15;
  margin-top:var(--s1);color:var(--cream);
}
.game__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s2);
}
.chip{
  display:inline-block;padding:3px 10px;
  font-size:14px;line-height:1.6;font-weight:700;
  color:var(--cyan);background:rgba(84,230,242,.12);
  border:1px solid rgba(84,230,242,.55);border-radius:var(--r-chip);
}
.game__desc{margin-top:var(--s3);font-size:15px;color:rgba(255,243,212,.92);}

/* ゲーム画面: 画像は再描画せず、表示する範囲だけを端末別に調整する */
.game__media{
  display:block;position:relative;margin-top:var(--s4);
  border:2px solid var(--gold);border-radius:var(--r-media);
  overflow:hidden;background:var(--deep-navy);
  box-shadow:var(--sh-media);text-decoration:none;
}
.game__media img{
  width:100%;height:100%;
  aspect-ratio:5/3;
  object-fit:cover;object-position:center top;
}
.game__hint{
  position:absolute;left:0;right:0;bottom:0;
  padding:8px 12px;font-size:14px;font-weight:700;color:var(--cream);
  background:linear-gradient(to top,rgba(6,27,53,.9),rgba(6,27,53,0));
}

.game--aburupurun .game__media img{aspect-ratio:1;object-fit:cover;object-position:center;}
.triathlon-preview__screen{
  width:100%;min-height:245px;aspect-ratio:5/3;padding:28px 22px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;color:#172052;
  background:
    radial-gradient(circle at 12px 12px,rgba(255,255,255,.62) 0 5px,transparent 5.5px) 0 0/42px 42px,
    linear-gradient(155deg,#8fe5f5 0%,#58b8e8 52%,#3698d5 100%);
}
.triathlon-preview__kicker{display:block;width:100%;font-size:12px;font-weight:900;letter-spacing:.16em;text-align:center;}
.triathlon-preview__screen strong{
  display:block;width:100%;font-family:var(--font-display);font-size:clamp(29px,9vw,46px);line-height:.94;text-align:center;
  letter-spacing:.035em;text-shadow:3px 3px 0 #fff,-2px -2px 0 #fff;
}
.triathlon-preview__events{
  width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 9px;
  font-size:12px;font-weight:800;line-height:1.45;color:#fff;text-align:center;
}
.triathlon-preview__events i{font-style:normal;font-size:10px;}
.triathlon-preview__start{
  align-self:center;margin-top:4px;padding:8px 18px;border:2px solid #172052;border-radius:999px;
  font-size:13px;font-weight:900;color:#fff;background:#ef536b;box-shadow:0 4px 0 #172052;
}

/* 主ボタン: ページ内で最も目立たせる */
.btn-play{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:var(--s5);min-height:64px;padding:0 var(--s5);
  font-family:var(--font-display);
  font-size:clamp(20px,5.6vw,24px);font-weight:800;letter-spacing:.02em;
  color:var(--deep-navy);text-decoration:none;
  background:var(--gold);
  border:2px solid var(--deep-navy);border-radius:999px;
  box-shadow:var(--sh-btn);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn-play:active{transform:translateY(3px);box-shadow:var(--sh-btn-active);}
.btn-play__icon{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--deep-navy);color:var(--gold);
  display:grid;place-content:center;padding-left:2px;padding-bottom:1px;font-size:15px;line-height:1;
}
/* 麦畑の上に乗るため、明るい下地を敷いて濃紺の文字で読ませる */
.play-note{margin-top:var(--s3);text-align:center;}
.play-note span{
  display:inline-block;padding:5px 14px;border-radius:999px;
  font-size:14px;font-weight:700;
  color:var(--deep-navy);background:rgba(255,243,212,.82);
}
.play-note b{color:var(--vermilion);}

/* =========================================================
   4. 紙面セクション（成長 / 次回作 / 感想）
   ========================================================= */
.paper{background:var(--cream);padding:var(--s8) 0 var(--s7);}

.section-head{text-align:center;}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(20px,5.6vw,26px);font-weight:800;line-height:1.4;
}
.section-head h2::after{
  content:"";display:block;width:56px;height:3px;margin:var(--s3) auto 0;
  background:var(--gold);border-radius:2px;
}
.section-head p{
  margin-top:var(--s4);font-size:16px;color:var(--ink-mute);text-align:left;
}

/* ---- 4-1. 成長4段階 ---- */
.stages{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);
  margin-top:var(--s6);
}
.stage{position:relative;text-align:center;}
.stage img{height:64px;width:auto;margin:0 auto;object-fit:contain;}
.stage span{
  display:block;margin-top:var(--s2);min-height:2.8em;
  font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-.02em;
}
/* 長いラベルの折り返し位置を固定する（600px以上では1行） */
.stage span br{display:inline;}
.stage:not(:last-child)::after{
  content:"";position:absolute;top:32px;right:-5px;
  width:9px;height:9px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:rotate(45deg);
}

/* ---- 4-2. 3本目のゲーム ---- */
.next{
  display:flex;align-items:center;gap:var(--s4);
  margin-top:var(--s8);padding:var(--s5);
  background:var(--paper);
  border:2px solid rgba(6,27,53,.28);border-radius:var(--r-card);
  box-shadow:0 7px 0 rgba(6,27,53,.08);
}
.next__body{flex:1 1 auto;min-width:0;}
.next__body h3{font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.5;}
.next__body p{margin-top:var(--s2);font-size:15px;color:var(--ink-mute);}
/* 写真素材なので、丸く切って縁を付けイラスト群となじませる。
   小さいと中身が読めないため、他のイラストより大きめに出す */
.next img{
  width:120px;flex:none;
  aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:4px solid var(--cream);box-shadow:0 0 0 2px var(--line);
}
/* .next__body p より詳細度を上げているので !important は不要。
   ラベルは14px以上（design-spec.md §2） */
.next__body .next__label{
  margin:0 0 var(--s1);font-size:14px;font-weight:800;line-height:1.35;
  letter-spacing:.05em;color:var(--gold-deep);
}
.btn-preview{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;margin-top:var(--s4);padding:8px 17px;
  color:var(--cream);background:var(--midnight);
  border:2px solid var(--midnight);border-radius:999px;
  font-size:14px;font-weight:800;line-height:1.4;text-decoration:none;
  box-shadow:0 3px 0 rgba(6,27,53,.24);
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}
.btn-preview span{color:var(--gold);font-size:12px;}
.btn-preview:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(6,27,53,.24);}
.btn-preview:hover{background:#0d376b;}

/* ---- 4-3. 感想 ---- */
.reaction{margin-top:var(--s8);}
.reaction h2{
  font-family:var(--font-display);
  font-size:clamp(19px,5.2vw,24px);font-weight:800;text-align:center;line-height:1.4;
}
.reaction__lead{margin-top:var(--s2);font-size:15px;line-height:1.7;text-align:center;color:var(--ink-mute);}
.reaction__games{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:var(--s4);
}
.reaction__games button{
  min-height:48px;padding:7px 8px;border:2px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:800;line-height:1.25;color:var(--ink);background:var(--paper);cursor:pointer;
}
.reaction__games button[aria-pressed="true"]{
  border-color:var(--midnight);color:var(--cream);background:var(--midnight);
  box-shadow:0 3px 0 rgba(6,27,53,.22);
}
.reaction__question{margin-top:var(--s5);font-size:16px;font-weight:800;text-align:center;}
.reaction__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);
  margin-top:var(--s3);
}
.react-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  min-height:104px;padding:var(--s3);
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r-media);
  cursor:pointer;text-align:center;
  transition:transform .12s ease,border-color .12s ease,background-color .12s ease;
}
.react-btn img{width:48px;height:48px;object-fit:contain;}
.react-btn span{font-size:14px;font-weight:700;line-height:1.4;}
.react-btn:active{transform:translateY(2px);}
.react-btn[aria-pressed="true"]{
  border-color:var(--gold);background:#FFF6E0;
  box-shadow:inset 0 0 0 2px rgba(246,185,27,.45);
}
/* 色だけで選択状態を示さない */
.react-btn[aria-pressed="true"] span::after{content:" ✓";color:#2F6A28;}
.reaction__grid.is-done .react-btn{cursor:default;}

.reaction__msg{
  margin-top:var(--s4);padding:var(--s4);
  border-radius:var(--r-media);font-size:15px;font-weight:700;
  line-height:1.7;text-align:center;
}
.reaction__msg[hidden]{display:none;}
.reaction__msg.is-thanks{background:rgba(86,166,75,.14);border:1px solid rgba(86,166,75,.55);color:#2F6A28;}
.reaction__msg.is-error{background:rgba(231,70,36,.10);border:1px solid rgba(231,70,36,.55);color:#A8301A;}

.comment-form{
  margin-top:var(--s5);padding:var(--s4);border:2px solid var(--line);border-radius:var(--r-media);
  background:rgba(255,255,255,.38);
}
.comment-form label{display:block;font-size:16px;font-weight:800;}
.comment-form textarea{
  display:block;width:100%;min-height:92px;margin-top:var(--s3);padding:12px 14px;
  resize:vertical;border:2px solid var(--line);border-radius:12px;color:var(--ink);background:var(--paper);
  font:inherit;line-height:1.6;
}
.comment-form textarea:focus{outline:3px solid rgba(72,201,223,.35);border-color:var(--midnight);}
.comment-form__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--s3);}
.comment-form__footer small{color:var(--ink-mute);line-height:1.5;}
.comment-form__footer button{
  flex:0 0 auto;min-height:44px;padding:9px 16px;border:2px solid var(--midnight);border-radius:999px;
  color:var(--cream);background:var(--midnight);font-weight:800;cursor:pointer;
}
.comment-form__footer button:disabled{opacity:.55;cursor:default;}

.note{margin-top:var(--s3);font-size:14px;line-height:1.7;color:var(--ink-mute);}

/* =========================================================
   5. フッター
   ========================================================= */
.site-footer{
  background:var(--midnight);color:rgba(255,243,212,.86);
  padding:var(--s7) 0 var(--s6);margin-top:var(--s8);
}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand img{height:34px;width:auto;}
.footer-brand b{font-family:var(--font-display);font-size:16px;color:var(--cream);}
.footer-links{
  display:flex;flex-wrap:wrap;gap:0 var(--s5);
  margin-top:var(--s4);padding-top:var(--s2);
  border-top:1px solid rgba(255,243,212,.22);
}
.footer-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;text-decoration:underline;text-underline-offset:3px;
}
.footer-links a[aria-disabled="true"]{color:rgba(255,243,212,.55);text-decoration:none;}
.privacy-info{
  margin-top:var(--s4);padding:var(--s4);
  border:1px solid rgba(255,243,212,.22);border-radius:var(--r-media);
  background:rgba(255,255,255,.04);
  color:rgba(255,243,212,.76);
}
.privacy-info summary{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--cream);cursor:pointer;
}
.privacy-info summary::after{content:"＋";font:700 20px/1 sans-serif;color:var(--gold);}
.privacy-info[open] summary::after{content:"−";}
.privacy-info__body{padding-top:var(--s1);}
.privacy-info p{margin-top:var(--s2);font-size:14px;line-height:1.75;}
.copyright{margin-top:var(--s5);font-size:13px;color:rgba(255,243,212,.6);}

/* =========================================================
   6. 画面幅ごとの調整
   ========================================================= */

/* 320〜359px: はみ出しを防ぐ */
@media (max-width:359px){
  .wrap{padding-inline:var(--s4);}
  .brand__mark{height:52px;}
  .brand{gap:6px;}
  .stage img{height:52px;}
  .stage span{font-size:13px;}
  .next{flex-direction:column;text-align:center;}
  .next img{width:132px;}
}

/* 600px以上: ゲーム画面をもう少し広く見せる */
@media (min-width:600px){
  .game__media img{aspect-ratio:4/3;object-position:center top;}
  .stages{gap:var(--s3);}
  .stage span{min-height:0;letter-spacing:0;}
  .stage span br{display:none;}
}

/* 768px以上（PC・タブレット）
   コンテンツは横へ広げすぎず中央へ。ゲーム画面は全体を表示する。 */
@media (min-width:768px){
  .night{background-size:100% 520px, auto 300px;}
  .night::before{bottom:244px;height:130px;}
  .site-header{padding-top:var(--s4);}
  .brand__mark{height:82px;}
  .lede{font-size:15px;}
  .next__body h3 br{display:none;}

  .game{
    margin-top:var(--s8);
    display:grid;grid-template-columns:minmax(0,1fr) 300px;
    column-gap:var(--s7);align-items:center;
  }
  .game__head{grid-column:1;grid-row:1;}
  .game__media{
    grid-column:2;grid-row:1 / span 3;
    margin-top:0;max-width:300px;justify-self:end;align-self:center;
  }
  .game__media img{aspect-ratio:755/1029;object-fit:contain;object-position:center;}
  .game--slime-lab{grid-template-columns:minmax(0,1fr) 420px;}
  .game--slime-lab .game__media{max-width:420px;}
  .game__hint{display:none;}
  .btn-play{grid-column:1;grid-row:2;margin-top:var(--s5);}
  .play-note{grid-column:1;grid-row:3;text-align:left;}

  .paper{padding:var(--s9) 0 var(--s8);}
  .section-head p{text-align:center;max-width:56ch;margin-inline:auto;}
  .stages{gap:var(--s4);}
  .stage img{height:88px;}
  .stage span{font-size:15px;letter-spacing:0;}
  .stage:not(:last-child)::after{top:46px;right:-8px;}
  .next{gap:var(--s6);padding:var(--s6);}
  .next img{width:180px;}
  .next__body h3{font-size:20px;}
  .reaction__grid{grid-template-columns:repeat(4,1fr);}
  .reaction__games{grid-template-columns:repeat(4,1fr);}
  .react-btn img{width:56px;height:56px;}
  .footer-links{gap:0 var(--s7);}
}

/* 文字を大きく拡大しても文が欠けないようにする */
@media (max-width:520px){
  .game__title{overflow-wrap:anywhere;}
  .brand__name{overflow-wrap:anywhere;}
  .comment-form__footer{align-items:stretch;flex-direction:column;}
  .comment-form__footer button{width:100%;}
}

/* 動きを減らす端末設定への対応 */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .btn-play:active,.react-btn:active{transform:none;}
  .has-scroll-focus .game .game__head,
  .has-scroll-focus .game .game__media,
  .has-scroll-focus .game .btn-play,
  .has-scroll-focus .game .play-note{opacity:1;transform:none;}
}

/* 大魔王の自由研究は実際の横長な調合画面をそのまま見せる */
.slime-mix-preview img{aspect-ratio:1541/836;object-fit:cover;object-position:center;}