/* 構成比較だけに適用する。余白・文字・主役の大小をページ全体で設計する。 */
.structure-proposal { --rev-space: clamp(64px, 7vw, 112px); --rev-gutter: clamp(24px, 5vw, 80px); --rev-title: clamp(34px, 4.25vw, 64px); --rev-lead: clamp(15px, 1.45vw, 21px); }
.rev-eyebrow { color: #0062db; font: 800 11px/1.4 PFH,sans-serif; letter-spacing: .18em; margin-bottom: 22px; }
.rev-heading h2, .rev-faq h2 { font-size: var(--rev-title); line-height: 1.24; letter-spacing: -.045em; font-weight: 900; }
html body.structure-proposal :is(#how-title,#multiplayer-title,#activity-title) { font-size: var(--rev-title); line-height: 1.24; }
html body.structure-proposal .rev-health #activity-title { font-size: clamp(30px,3.6vw,54px); }
.rev-heading h2 em { font-style: normal; color: #075de2; }
.rev-lead { font-size: var(--rev-lead); line-height: 1.85; font-weight: 600; margin-top: 22px; }
.rev-note { font-size: 10px; color: #61758a; padding: 14px 0 0; line-height: 1.6; }
.rev-heading { min-width: 0; }
.rev-play, .rev-together, .rev-health, .rev-faq { padding: var(--rev-space) var(--rev-gutter); }
/* 一つの遊び方の見出しで、実演と三動作をつなぐ。 */
.rev-play { display: grid; grid-template-columns: .95fr 1.45fr; align-items: center; gap: 38px 5%; background: #fff; }
.rev-demo { position: relative; padding: 0 10% 40px 0; min-width: 0; }
.rev-demo .experience-photo { margin: 0; width: 100%; position: relative; }
.rev-demo .experience-photo > img { width: 100%; height: auto; }
.rev-demo .experience-callout, .rev-demo .experience-link { display: none; }
.rev-demo .experience-game { width: 28%!important; position: absolute; right: 0; bottom: 0; margin: 0; border: 4px solid white; box-shadow: 0 12px 35px #08254230; }
.rev-demo .experience-game-viewport { aspect-ratio: 390 / 549; }
.rev-demo .experience-game figcaption { background: #fff!important; font-size: 7px!important; padding: 5px!important; }
.rev-action-intro { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 12px; border-top: 1px solid #dbe5f0; padding-top: 32px; }
.rev-action-intro h3 { font-size: clamp(20px,2vw,30px); letter-spacing: -.02em; }
.rev-action-intro p { font-size: 13px; line-height: 1.7; }
.rev-actions { grid-column: 1 / -1; display: flex; overflow: hidden; width: 100%; gap: 0; }
.rev-action { position: relative; flex: 0 0 35%; height: clamp(360px,36vw,500px); min-width: 0; clip-path: polygon(9% 0,100% 0,91% 100%,0 100%); }
.rev-action + .rev-action { margin-left: calc(-2.5% + 5px); }
.rev-action:first-child { clip-path: polygon(0 0,100% 0,91% 100%,0 100%); }
.rev-action:last-child { clip-path: polygon(9% 0,100% 0,100% 100%,0 100%); }
.rev-action img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.rev-action > div { position: absolute; left: 14%; top: 3%; }
.rev-action:first-child > div { left: 4%; }
.rev-action-number { display: block; font: 800 23px/1.2 PFH,sans-serif; color: #0861e9; }
.rev-action h3 { font-size: clamp(30px,3.3vw,50px); line-height: 1.25; margin: 5px 0; }
.rev-action p { font-size: clamp(12px,1.2vw,17px); font-weight: 700; }
.rev-play > .rev-note { grid-column: 1 / -1; margin-top: -32px; text-align: right; }
/* 対戦・協力は簡潔な導入と二枚の大きな写真に。人数と実画面は保持する。 */
.rev-together { background: #eef5ff; }
.rev-together > .rev-heading { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 7%; align-items: end; margin-bottom: 40px; }
.rev-together .rev-eyebrow { grid-column: 1 / -1; }
.rev-together .rev-lead { margin-bottom: 5px; }
.rev-together .mode-tiles { gap: 24px; max-width: none; }
.rev-together .mode-tiles::before, .rev-together .mode-tiles::after { display: none; }
.rev-together .tile-heading { padding: 25px 25px 15px; }
.rev-together .tile-heading h3 { font-size: clamp(28px,3.1vw,47px); }
.rev-together .mode-stage { aspect-ratio: .95; }
.rev-together .mode-people { object-fit: cover; object-position: top; }
.rev-together .mode-phone { width: 33%; top: 27%; }
.rev-together .mode-details p { font-size: clamp(16px,1.65vw,24px); }
.rev-together .mode-details ul { font-size: 11px; }
/* 連携先と記録画面を対にし、実装時の提供内容として紹介する。 */
.rev-health { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9%; align-items: center; background: #f5f9fc; }
.rev-health .rev-heading h2 { font-size: clamp(30px,3.6vw,54px); }
.rev-health .health-platforms { margin: 28px 0 0; gap: 10px; }
.rev-health .health-platforms li { padding: 14px; border: 1px solid #dbe5ed; border-radius: 8px; }
.rev-health .health-platforms strong { font-size: clamp(13px,1.3vw,19px); }
.rev-health-description { font-size: 13px; line-height: 1.9; margin-top: 22px; color: #485f79; }
.rev-health-report { min-width: 0; }
.rev-health .workout-card { width: 100%; max-width: 460px; margin: auto; padding: 25px; box-shadow: 0 22px 60px #1936570c; border: 1px solid #dbe7f0; }
.rev-health .workout-energy b { font-size: 48px; }
.rev-health .workout-trends { display: none; }
.rev-health .workout-note { font-size: 9px; }
/* FAQをその場で開けるようにし、最後のCTAまでの疑問を解消する。 */
.rev-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; background: white; }
.rev-faq h2 { font-size: clamp(28px,3.1vw,46px); }
.rev-faq .faq-list { padding: 0; }
.rev-faq details { border-bottom: 1px solid #d5e0ec; }
.rev-faq summary { padding: 22px 0; font-size: 15px; }
.rev-faq details p { padding: 0 0 24px 34px; font-size: 14px; line-height: 1.9; }
.rev-switch { position: fixed; z-index: 40; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 4px; padding: 5px; background: #071d43ed; color: #fff; box-shadow: 0 4px 20px #001a4326; border-radius: 7px; font-size: 11px; }
.rev-switch > span { padding: 5px 10px; color: #becce5; }
.rev-switch a { padding: 9px 12px; border-radius: 4px; }
.rev-switch a:hover { background: #fff2; }
/* 採用C案の構図を保持。左の大場面と右の二場面を細い白い余白でつなぐ。 */
.rev-play.rev-play-focus { display: block; padding: clamp(52px,5vw,80px) 20px 24px; }
/* サブテキストは見出しの下に置き、読み始めの左端をそろえる。 */
.focus-heading { display: block; margin: 0 calc(var(--rev-gutter) - 20px) 30px; }
.focus-heading .rev-lead { margin: 20px 0 0; padding: 0; border: 0; line-height: 1.55; font-weight: 700; }
/* 打つの左列と、かわす・防ぐの右列を5対5の幅にそろえる。 */
.focus-moves { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); aspect-ratio: 2.22; gap: 12px; }
.focus-move { position: relative; isolation: isolate; overflow: hidden; min-width: 0; background: #e1f1fb; }
.focus-punch { grid-row: 1 / 3; }
.focus-scene { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 三つの動詞の実幅を共通にする。二文字は1.5倍にし、字形を横へ変形しない。 */
.focus-move-label { --focus-type: clamp(30px,3.2vw,54px); position: absolute; isolation: isolate; display: flex; align-items: center; gap: 16px; left: 22px; top: 8px; color: #03183f; }
.focus-move-label h3 { width: calc(var(--focus-type) * 3); height: calc(var(--focus-type) * 1.5); display: flex; align-items: center; font-size: var(--focus-type); line-height: 1; letter-spacing: 0; white-space: nowrap; }
html[lang="ja"] :is(.focus-punch,.focus-guard) .focus-move-label h3 { font-size: calc(var(--focus-type) * 1.5); }
.focus-move-label > span { font-size: clamp(42px,4.5vw,76px); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: #70a5e5; }
.focus-move-label p { font-size: clamp(13px,1.35vw,21px); color: #075de2; font-weight: 700; margin-top: 4px; }
/* 輪郭の白い光と局所的なぼかしで文字を背景から離し、写真は広く残す。 */
.focus-move-label::before { content: ''; position: absolute; z-index: -1; inset: -12px -22px; pointer-events: none; background: radial-gradient(ellipse at center,#ffffffeb 0%,#ffffffac 45%,#ffffff00 74%); filter: blur(9px); }
.focus-move-label :is(h3,p) { -webkit-text-stroke: .65px #ffffffdb; paint-order: stroke fill; text-shadow: 0 2px 4px #082a5124,0 0 7px #fff,0 0 16px #ffffffc9; }
.focus-move-label > span { text-shadow: 0 1px 3px #fff,0 0 10px #fff; }
/* パンチの人物を縮小した画像の左上の余白に見出しを合わせる。 */
.focus-punch .focus-move-label { left: 4%; right: auto; top: 4%; }
.focus-note { font-size: 10px; color: #61758a; margin: 12px calc(var(--rev-gutter) - 20px) 0; text-align: right; line-height: 1.6; }
/* 狭い画面では写真を切らず、操作名を直前に置いて表情と反応を両方見せる。 */
@media (max-width: 760px) {
  .rev-play.rev-play-focus { padding: 46px 16px 24px; }
  .focus-heading { display: block; margin: 0 6px 24px; }
  .focus-heading .rev-lead { border: 0; padding: 0; margin: 18px 0 0; }
  .focus-moves { display: flex; flex-direction: column; aspect-ratio: auto; gap: 20px; }
  .focus-move { display: flex; flex-direction: column; }
  .focus-scene { height: auto; object-fit: contain; }
  .focus-move-label, .focus-punch .focus-move-label { position: static; order: -1; padding: 12px 15px; gap: 12px; background: #edf7ff; }
  .focus-move-label { --focus-type: 32px; }
  .focus-move-label::before { display: none; }
  .focus-move-label > span, .focus-punch .focus-move-label > span { font-size: 50px; }
  .focus-move-label p { font-size: 14px; margin-top: 3px; }
  .focus-note { text-align: left; font-size: 9px; margin: 12px 6px 0; }
}
/* B案：生活写真と端末で入口を作り、連携→みんな→操作→自分のヒーローと展開する。 */
html body.structure-habit .header { color: #071d43; background: #fff; }
.structure-habit .nav > * + *::before, .structure-habit .header-actions::before { background: #c4d5e6; }
.structure-habit .language-picker { border-color: #c4d5e6; }
.structure-habit .nav a:hover, .structure-habit .nav button:hover { color: #075de2; background: #eef5ff; }
html body.structure-habit .rev-habit-hero { padding: 130px var(--rev-gutter) 145px; height: auto; min-height: 770px; background: #fafbfc; color: #071d43; }
.structure-habit .rev-habit-hero .hero-scene { inset: 80px 0 0; background: #f4f6f8; }
.structure-habit .rev-habit-hero .hero-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#fafbfc 0%,#fafbfcf5 18%,#fafbfcb0 32%,#fafbfc00 57%),linear-gradient(0deg,#fafbfc,transparent 22%); }
.structure-habit .rev-habit-hero .hero-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.rev-habit-copy { position: relative; z-index: 1; max-width: 47%; }
html body.structure-habit .rev-habit-copy h1 { position: static; color: #071d43; font-size: clamp(42px,4.6vw,70px); line-height: 1.22; width: auto; transform: none; letter-spacing: -.045em; text-shadow: none; }
.rev-habit-copy h1 span { display: block; }
.rev-habit-copy h1 span + span { color: #075de2; }
.rev-habit-lead { margin-top: 22px; font-size: clamp(15px,1.5vw,22px); font-weight: 700; line-height: 1.8; }
.rev-text-link { display: inline-flex; gap: 26px; align-items: center; margin-top: 32px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #8da8c5; padding-bottom: 9px; }
.rev-text-link span { color: #0861e9; }
.rev-habit-copy .rev-text-link { display: none; }
.rev-habit-film { position: absolute; z-index: 2; width: 23%; max-width: 300px; left: var(--rev-gutter); bottom: 160px; }
.rev-habit-film > span { display: block; color: #071d43; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
html body.structure-habit .rev-habit-film .hero-film { position: relative; inset: auto!important; width: 100%; margin: 0; aspect-ratio: 16 / 9; border: 3px solid #fff; box-shadow: 0 10px 35px #09244324; }
html body.structure-habit .rev-habit-hero .hero-download { position: absolute; inset: auto var(--rev-gutter) 28px; width: auto; }
.rev-benefits { display: grid; grid-template-columns: repeat(3,1fr); padding: 36px var(--rev-gutter); background: #fff; }
.rev-benefits a { padding: 0 24px; border-left: 1px solid #dce7ee; }
.rev-benefits a:first-child { padding-left: 0; border: 0; }
.rev-benefits span { color: #075de2; font: 800 11px/1.5 PFH,sans-serif; letter-spacing: .1em; }
.rev-benefits strong { display: block; margin: 12px 0 7px; font-size: clamp(15px,1.65vw,23px); }
.rev-benefits small { font-size: 12px; color: #5b7085; }
.structure-habit .rev-health { background: #edf5fc; grid-template-columns: 1fr 1fr; padding-block: 85px; }
.structure-habit .rev-health-report { order: -1; }
.structure-habit .rev-health .workout-card { transform: rotate(-2deg); }
.structure-habit .rev-together { background: #fff; }
.structure-habit .rev-together .mode-tiles { display: flex; flex-direction: column; gap: 28px; }
.structure-habit .rev-together .mode-tile { display: grid; width: 100%; grid-template-columns: .8fr 1.2fr; grid-template-rows: auto 1fr; background: var(--mode-tint); container-type: normal; }
.structure-habit .rev-together .tile-heading { background: none; grid-column: 1; padding: 42px 36px 22px; }
.structure-habit .rev-together .tile-heading::after { display: none; }
.structure-habit .rev-together .mode-eyebrow { position: static; margin-bottom: 22px; }
.structure-habit .rev-together .mode-eyebrow span:last-child { display: inline-block; background: none; }
.structure-habit .rev-together .mode-stage { grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: 1.1; }
.structure-habit .rev-together .mode-people { width: 80%; object-fit: contain; object-position: left center; }
.structure-habit .rev-together .mode-phone { width: 25%; top: auto; bottom: 5%; }
.structure-habit .rev-together .mode-details { margin: 0 36px 25px; grid-column: 1; border-top-width: 1px; }
.structure-habit .rev-together .mode-details p { font-size: 20px; }
.structure-habit .rev-together .mode-tile:nth-child(2) { grid-template-columns: 1.2fr .8fr; }
.structure-habit .rev-together .mode-tile:nth-child(2) :is(.tile-heading,.mode-details) { grid-column: 2; }
.structure-habit .rev-together .mode-tile:nth-child(2) .mode-stage { grid-column: 1; }
.structure-habit .rev-play { background: #061c40; color: #fff; }
.structure-habit .rev-play .rev-eyebrow, .structure-habit .rev-play .rev-heading em { color: #65c6ff; }
.structure-habit .rev-action-intro { border-color: #ffffff36; }
.structure-habit .rev-action { color: #071d43; }
.structure-habit .rev-play > .rev-note { color: #a9bbce; }
/* スマホでは操作を横スワイプで読み、対戦・協力は情報と絵を短く縦につなぐ。 */
@media (max-width: 760px) {
  .structure-proposal { --rev-space: 52px; --rev-gutter: 22px; --rev-title: clamp(29px,7.4vw,45px); --rev-lead: 15px; }
  .rev-eyebrow { font-size: 10px; margin-bottom: 15px; }
  .rev-play, .rev-health, .rev-faq { grid-template-columns: 1fr; gap: 28px; }
  .rev-demo { margin-top: 4px; padding-bottom: 36px; }
  .rev-demo .experience-game { width: 30%!important; }
  .rev-demo .experience-photo { margin-bottom: 0; }
  .rev-demo .experience-game figcaption { font-size: 5px!important; }
  .rev-action-intro { display: block; margin-top: 6px; padding-top: 25px; }
  .rev-action-intro h3 { font-size: 20px; }
  .rev-action-intro p { font-size: 12px; margin-top: 12px; }
  .rev-actions { width: calc(100% + 44px); margin-left: -22px; padding: 0 22px 12px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #92bdea #edf3f9; }
  .rev-action, .rev-action:first-child, .rev-action:last-child { clip-path: none; flex: 0 0 82%; aspect-ratio: 3 / 4; height: auto; scroll-snap-align: center; }
  .rev-action + .rev-action { margin-left: 0; }
  .rev-action > div, .rev-action:first-child > div { top: 5%; left: 7%; }
  .rev-action h3 { font-size: 36px; }
  .rev-action p { font-size: 15px; }
  .rev-play > .rev-note { margin-top: -18px; text-align: left; font-size: 8px; }
  .rev-together > .rev-heading { display: block; margin-bottom: 28px; }
  .rev-together .mode-tiles { gap: 22px; }
  .rev-together .tile-heading { padding: 22px 20px 12px; }
  .rev-together .tile-heading h3 { font-size: 30px; }
  .rev-together .mode-stage { aspect-ratio: .9; }
  .rev-together .mode-details { margin-inline: 20px; padding-top: 15px; }
  .rev-together .mode-details p { font-size: 16px; }
  .rev-together .mode-summary { font-size: 12px; }
  .rev-together .mode-details ul { font-size: 10px; }
  .rev-health .rev-heading h2, .rev-faq h2 { font-size: var(--rev-title); }
  html body.structure-proposal .rev-health #activity-title { font-size: var(--rev-title); }
  .rev-health .workout-card { padding: 20px; max-width: 400px; }
  .rev-health .health-platforms { margin-top: 22px; display: flex; flex-direction: column; }
  .rev-health .health-platforms strong { font-size: 17px; }
  .rev-health-description { font-size: 12px; }
  .rev-faq summary { font-size: 14px; }
  .rev-faq details p { font-size: 13px; }
  .rev-switch { left: 12px; right: 12px; justify-content: center; bottom: 8px; font-size: 10px; }
  .rev-switch > span { padding: 5px; }
  .rev-switch a { padding: 9px; }
  html body.structure-habit .rev-habit-hero { display: flex; flex-direction: column; padding: 110px 22px 22px; min-height: 0; height: auto; }
  .rev-habit-copy { max-width: none; }
  html body.structure-habit .rev-habit-copy h1 { font-size: clamp(38px,10vw,60px); }
  html[lang=en] body.structure-habit .rev-habit-copy h1 { font-size: clamp(27px,7.5vw,42px); }
  html[lang=en] .structure-habit .rev-habit-copy h1 span { white-space: normal; }
  .rev-habit-lead { font-size: 15px; margin-top: 18px; }
  .rev-text-link { margin-top: 20px; font-size: 12px; }
  .structure-habit .rev-habit-hero .hero-scene { inset: auto 0 auto; top: 325px; height: 350px; z-index: -1; }
  .structure-habit .rev-habit-hero .hero-scene img { object-position: 57% center; }
  .structure-habit .rev-habit-hero .hero-scene::after { background: linear-gradient(#fafbfc,transparent 14%,transparent 85%,#fafbfc); }
  html[lang=en] .structure-habit .rev-habit-hero .hero-scene { top: 370px; }
  .rev-habit-film { position: relative; width: 50%; max-width: 220px; left: auto; right: auto; bottom: auto; margin-top: 270px; margin-bottom: 20px; align-self: flex-end; }
  .rev-habit-film > span { font-size: 9px; }
  html body.structure-habit .rev-habit-hero .hero-download { position: static; width: 100%; padding: 0; margin: 0; }
  .rev-benefits { grid-template-columns: 1fr; padding: 10px 22px 32px; }
  .rev-benefits a, .rev-benefits a:first-child { padding: 20px 0; border: 0; border-bottom: 1px solid #dce7ee; }
  .rev-benefits strong { font-size: 19px; margin-top: 7px; }
  .structure-habit .rev-health { grid-template-columns: 1fr; padding-block: 52px; }
  .structure-habit .rev-health-report { order: 0; }
  .structure-habit .rev-together .mode-tile, .structure-habit .rev-together .mode-tile:nth-child(2) { display: flex; flex-direction: column; }
  .structure-habit .rev-together .tile-heading { padding: 24px 20px 14px; }
  .structure-habit .rev-together .mode-eyebrow { position: absolute; top: 22px; right: 20px; margin: 0; }
  .structure-habit .rev-together .mode-stage { aspect-ratio: .95; }
  .structure-habit .rev-together .mode-people { width: 100%; object-fit: cover; object-position: top; }
  .structure-habit .rev-together .mode-phone { top: 28%; bottom: auto; width: 33%; }
  .structure-habit .rev-together .mode-details { margin: 0 20px 12px; }
  .structure-habit .rev-together .mode-details p { font-size: 16px; }
}

/* 採用ページの二列を操作タイルと同じ外端・中央間隔に合わせる。 */
.rev-play-focus + .rev-together { padding-inline: 20px; }
.rev-play-focus + .rev-together > .rev-heading { margin-inline: calc(var(--rev-gutter) - 20px); }
.rev-play-focus + .rev-together .mode-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.rev-play-focus + .rev-together > .rev-note { margin-inline: calc(var(--rev-gutter) - 20px); }
@media (max-width: 760px) {
  .rev-play-focus + .rev-together { padding-inline: 16px; }
  .rev-play-focus + .rev-together > .rev-heading,
  .rev-play-focus + .rev-together > .rev-note { margin-inline: 6px; }
  .rev-play-focus + .rev-together .mode-tiles { grid-template-columns: 1fr; gap: 20px; }
}