/* 採用されたA案に合わせ、写真を端まで敷いた同じ高さの四角い二列へまとめる。 */
.play-tiles { --tile-blue: #0861e9; --tile-ink: #091d40; position: relative; overflow: hidden; padding: clamp(62px, 6vw, 92px) 16px 42px; background: #fcfdff; color: var(--tile-ink); }
.tiles-intro { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto 40px; text-align: center; }
.tiles-intro .section-label { justify-content: center; gap: 20px; margin-bottom: 20px; color: var(--tile-blue); font-size: 11px; letter-spacing: .24em; }
.tiles-intro .section-label:before, .tiles-intro .section-label:after { content: ''; width: 46px; height: 1px; background: currentColor; }
.tiles-intro h2 { font-size: clamp(30px, 4vw, 58px); line-height: 1.35; letter-spacing: -.045em; }
/* 仲間と遊ぶ楽しさが、運動を続けるきっかけになることを見出しの直後に伝える。 */
.tiles-lead { margin-top: 24px; font-size: clamp(14px, 1.5vw, 22px); font-weight: 700; line-height: 1.9; }
.tiles-intro h2 span { position: relative; isolation: isolate; display: inline-block; color: var(--tile-blue); }
.tiles-intro h2 span:after { content: ''; position: absolute; z-index: -1; left: -1%; right: -1%; bottom: 4px; height: 7px; background: #ffe34d; transform: rotate(-.8deg); }
.mode-tiles { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; max-width: 1440px; margin: auto; }
/* 背面にだけ短い斜線を置き、見出しや写真の読みやすさを保ったまま色をつなぐ。 */
.mode-tiles:before, .mode-tiles:after { content: ''; position: absolute; z-index: 0; top: -44px; width: 280px; height: 112px; pointer-events: none; }
.mode-tiles:before { left: -54px; background: linear-gradient(19deg, #e64b20 0 27%, #ffa67f 27% 44%, transparent 44% 52%, #ffd6c3 52% 60%, transparent 60%); }
.mode-tiles:after { right: -54px; background: linear-gradient(-19deg, #087e62 0 27%, #6acdb1 27% 44%, transparent 44% 52%, #c9f1e4 52% 60%, transparent 60%); }
.mode-tile { --mode-accent: #e64b20; --mode-deep: #b93c19; --mode-tint: #fff0e6; --mode-line: #f4d2c3; container-type: inline-size; position: relative; z-index: 1; min-width: 0; overflow: hidden; border: 1px solid var(--mode-line); border-radius: 0; background: linear-gradient(#fff 0 25%, var(--mode-tint) 100%); box-shadow: none; }
.mode-coop { --mode-accent: #087e62; --mode-deep: #087e62; --mode-tint: #e7f8ee; --mode-line: #c9e8dc; margin-top: 0; }
/* 見出しだけに細い余白を残す。人数は右上へ集約し、独立したラベル行を増やさない。 */
.tile-heading { position: relative; z-index: 4; padding: 26px 26px 14px; background: #fff; }
/* 白い見出し面の端を斜めにして、写真から下段へ続く対角線とつなぐ。 */
.tile-heading:after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: clamp(14px, 3.8cqw, 28px); background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }
.mode-eyebrow { position: absolute; top: 29px; right: 25px; margin: 0; color: var(--mode-deep); font-size: 12px; font-weight: 700; }
.mode-eyebrow span:first-child { display: none; }
.mode-eyebrow span:last-child { display: block; padding: 7px 12px; border: 1px solid var(--mode-accent); border-radius: 0; background: #fff; line-height: 1.3; white-space: nowrap; }
.tile-heading h3 { margin: 0 0 14px; font-size: clamp(32px, 9.2cqw, 66px); line-height: 1.14; letter-spacing: -.045em; }
.tile-heading h3 span { color: var(--mode-accent); font-size: 1.22em; }
.mode-summary { font-size: clamp(13px, 2.6cqw, 18px); font-weight: 700; line-height: 1.65; }
/* 上半分の人物写真から左下のヒーローへ続く一枚を、枠の端まで表示する。 */
.mode-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: .79; margin: 0; background: var(--mode-tint); }
.mode-sweep { display: none; }
.mode-people { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
/* 390×844の実画面は切り抜かず、縦横比を維持して右下へ重ねる。 */
.mode-phone { position: absolute; z-index: 2; top: 34%; right: 3%; width: 37%; padding: 4px; border: 1px solid #ffffffd9; border-radius: 4px; background: #fff; box-shadow: 0 9px 22px -9px #172a4152; }
.mode-phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: contain; border-radius: 0; }
.mode-stage figcaption { position: absolute; z-index: 3; right: 2.5%; bottom: 5px; width: 38%; text-align: center; color: #405060; font-size: 8px; line-height: 1.4; letter-spacing: .005em; }
/* 締めの一文を色の罫線で受け、補足情報は箱を増やさず一列へ収める。 */
.mode-details { position: relative; margin: 0 26px; padding: 18px 0 22px; border-top: 3px solid var(--mode-accent); }
.mode-details p { font-size: clamp(17px, 3.4cqw, 24px); font-weight: 700; line-height: 1.65; letter-spacing: -.025em; }
.mode-details ul { display: flex; flex-wrap: wrap; gap: 5px 15px; margin: 13px 0 0; padding: 0; list-style: none; color: #445368; font-size: clamp(10px, 1.8cqw, 12px); line-height: 1.65; }
.mode-details li { padding: 0; border: 0; border-radius: 0; background: none; }
.mode-details li:before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px 0; background: var(--mode-accent); }
.tiles-note { max-width: 1440px; margin: 19px auto 0; font-size: 9px; line-height: 1.8; color: #64738a; text-align: right; }
/* 翻訳で説明文の行数が増えても、人物や人数バッジの上へ文字を重ねない。 */
html[lang=en] .tile-heading h3 { line-height: 1.12; }
html[lang=en] .mode-summary { min-height: 3.3em; }
@media (min-width: 761px) and (max-width: 1000px) {
  .tile-heading { padding: 21px 20px 14px; }
  .mode-eyebrow { top: 22px; right: 19px; font-size: 10px; }
  .mode-eyebrow span:last-child { padding: 6px 9px; }
  .mode-details { margin-inline: 20px; }
}
/* 狭い画面では外側10pxの一列へ。角丸と段差は戻さず、写真を大きく保つ。 */
@media (max-width: 760px) {
  .play-tiles { padding: 50px 10px 30px; }
  .tiles-intro { margin-bottom: 29px; }
  .tiles-intro .section-label { gap: 12px; margin-bottom: 16px; font-size: 9px; }
  .tiles-intro .section-label:before, .tiles-intro .section-label:after { width: 26px; }
  .tiles-intro h2 { font-size: clamp(23px, 6.4vw, 40px); }
  .tiles-intro h2 span:after { height: 5px; bottom: 2px; }
  .mode-tiles { grid-template-columns: 1fr; gap: 22px; max-width: 540px; }
  .mode-tiles:before, .mode-tiles:after { top: -26px; width: 130px; height: 64px; }
  .mode-tiles:before { left: -26px; }
  .mode-tiles:after { right: -26px; }
  .mode-tile { border-radius: 0; }
  .tile-heading { padding: 20px 19px 13px; }
  .mode-eyebrow { top: 22px; right: 18px; font-size: 10px; }
  .mode-eyebrow span:last-child { padding: 6px 8px; }
  .tile-heading h3 { margin-bottom: 12px; }
  .mode-summary { font-size: clamp(12px, 3.1cqw, 15px); }
  .mode-phone { padding: 3px; border-radius: 3px; }
  .mode-stage figcaption { bottom: 4px; font-size: 7px; }
  .mode-details { margin: 0 19px; padding: 16px 0 19px; }
  .mode-details p { font-size: clamp(17px, 4.3cqw, 23px); }
  .mode-details ul { gap: 4px 12px; margin-top: 10px; }
  .tiles-note { margin-top: 16px; text-align: left; font-size: 8px; }
  html[lang=en] .mode-summary { min-height: 0; }
}