/* NØEMA WEB サイト（製図案 plan_v10 §7）。作風は 2階の空間と同じ: 黒ガラス・チタンの縁・水色の光の線 */
:root {
  --bg: #05070a;
  --glass: #0b0f15;
  --glass2: #10161e;
  --ink: #eaf0f6;
  --mute: #8a95a5;
  --dim: #566170;
  --line: #1b222c;
  --ti: #aab4c2;
  --cy: #5fd8ff;
  --am: #e8b35a;
  --jp: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --en: 'Barlow Condensed', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --gut: clamp(16px, 4.2vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.9 var(--jp); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

/* 上の帯 */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 60px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(#05070ae6, #05070a00); transition: background .3s; }
.top.solid { background: #05070af2; border-bottom: 1px solid var(--line); }
.brand { font: 700 22px/1 var(--en); letter-spacing: .22em; display: flex; align-items: baseline; gap: 12px; }
.brand small { font: 500 11px/1 var(--en); letter-spacing: .3em; color: var(--mute); }
.nav { display: flex; gap: clamp(14px, 2.6vw, 38px); }
.nav a { position: relative; font-size: 13px; font-weight: 700; color: var(--mute); padding: 8px 0; transition: color .2s; white-space: nowrap; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--cy); box-shadow: 0 0 8px var(--cy); }
.backbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px var(--gut); background: #071018f5; border-top: 1px solid var(--cy); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }
.backbar a { font-weight: 700; color: var(--cy); }

/* 見出しの型: 太い見出しと小さい本文の差を大きく */
.kick { font: 500 12px/1 var(--en); letter-spacing: .34em; color: var(--cy); text-transform: uppercase; }
.kick b { color: var(--dim); font-weight: 500; margin-right: 14px; }
.h-xl { font-weight: 900; font-size: clamp(38px, 7.4vw, 118px); line-height: 1.06; letter-spacing: -.02em; }
.h-l { font-weight: 900; font-size: clamp(30px, 4.6vw, 68px); line-height: 1.14; letter-spacing: -.01em; }
.h-m { font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; }
.lead { color: var(--mute); max-width: 44em; }
.sec { padding: clamp(72px, 11vw, 168px) var(--gut); position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 8px; border: 1px solid var(--dim); color: var(--mute); vertical-align: middle; margin-left: 10px; white-space: nowrap; }
.tag.t { border-color: var(--cy); color: var(--cy); }
.go { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; padding: 12px 0; border-bottom: 1px solid var(--ti); transition: gap .2s, border-color .2s, color .2s; }
.go::after { content: ''; width: 22px; height: 1px; background: currentColor; }
.go:hover { gap: 20px; color: var(--cy); border-color: var(--cy); }

/* ① 最初の画面 */
.hero { position: relative; height: 100svh; min-height: 560px; max-height: 1300px; overflow: hidden; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #05070a66 0, #05070a00 26%, #05070a00 46%, #05070ad9 86%, var(--bg) 100%), linear-gradient(90deg, #05070a99 0, #05070a00 58%); pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(64px, 11vh, 132px); right: var(--gut); }
.hero-copy h1 { margin-top: 20px; font-size: clamp(30px, 6.3vw, 104px); text-shadow: 0 2px 30px #000a; }
.hero-copy h1 .nw { white-space: nowrap; }
.hero-copy h1 em { font-style: normal; color: var(--cy); }
.live { position: absolute; z-index: 2; right: var(--gut); bottom: clamp(64px, 11vh, 132px); padding: 14px 18px 12px; background: #070b10cc; border: 1px solid #2a3440; border-left: 2px solid var(--cy); backdrop-filter: blur(6px); font-size: 13px; }
.live b { font: 700 44px/1 var(--en); color: var(--cy); margin: 0 6px; }
.hero-note { position: absolute; z-index: 2; left: var(--gut); bottom: 22px; font-size: 11px; color: var(--mute); letter-spacing: .08em; }
.hero-line { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cy) 30%, var(--cy) 70%, transparent); opacity: .7; }

/* 見取り図がメニュー */
.mapsec { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: clamp(28px, 6vw, 110px); align-items: start; }
.plan { width: 100%; height: auto; display: block; }
.plan .room rect { fill: #0b1017; stroke: #3a4553; stroke-width: 1.4; transition: fill .2s, stroke .2s; }
.plan .room text { fill: var(--mute); font: 700 21px var(--jp); pointer-events: none; transition: fill .2s; }
.plan .room .en { font: 500 13px var(--en); letter-spacing: .28em; fill: var(--dim); }
.plan a.room { cursor: pointer; }
.plan a.room:hover rect, .plan .room.on rect { fill: #0e2230; stroke: var(--cy); filter: drop-shadow(0 0 6px #5fd8ff88); }
.plan a.room:hover text, .plan .room.on text { fill: var(--ink); }
.plan .way rect { fill: #080b10; stroke: #232b36; }
.plan .way text { fill: var(--dim); font-size: 14px; }
.plan .n { fill: var(--dim); font: 500 10px var(--en); letter-spacing: .3em; }
.mapview { position: relative; padding-top: 6px; }
.mapview figure { position: relative; margin-top: 30px; aspect-ratio: 16 / 9; background: var(--glass); border: 1px solid #2a3440; overflow: hidden; }
.mapview figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.mapview figure img.on { opacity: 1; }
.mapview .cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.mapview .cap p { color: var(--mute); max-width: 34em; }
.mapview .cap h3 { font-size: 22px; font-weight: 900; }

/* ② 手に入る物: 横一列の帯 */
.strip { display: flex; height: clamp(340px, 46vw, 560px); margin: 54px calc(var(--gut) * -1) 0; border-block: 1px solid var(--line); }
.cell { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); transition: flex .45s cubic-bezier(.2, .7, .2, 1); }
.cell:last-child { border-right: 0; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.66); transition: filter .4s, transform .8s; }
.cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #05070a00 35%, #05070af0 92%); }
.cell .tx { position: absolute; z-index: 2; left: 18px; right: 14px; bottom: 18px; }
.cell .no { font: 500 12px/1 var(--en); letter-spacing: .3em; color: var(--cy); }
.cell h3 { font-size: clamp(15px, 1.5vw, 21px); font-weight: 900; line-height: 1.35; margin-top: 10px; }
.cell p { font-size: 12.5px; color: #c3ccd8; line-height: 1.7; margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s, opacity .3s; }
.strip:hover .cell { flex: .8 1 0; }
.strip .cell:hover, .strip .cell:focus-visible { flex: 2.6 1 0; }
.cell:hover img, .cell:focus-visible img { filter: none; transform: scale(1.03); }
.cell:hover p, .cell:focus-visible p { max-height: 6em; opacity: 1; }

/* ③ 目指す先 */
.goal { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 6vw, 96px); align-items: end; }
.goal h2 em { font-style: normal; color: var(--cy); }
.order { border-left: 1px solid var(--cy); padding-left: clamp(18px, 2.4vw, 34px); }
.order h3 { font-size: clamp(18px, 1.9vw, 25px); font-weight: 900; line-height: 1.5; }
.order ol { margin-top: 22px; counter-reset: o; }
.order li { counter-increment: o; display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); color: #c3ccd8; }
.order li::before { content: '0' counter(o); font: 500 12px/2.2 var(--en); letter-spacing: .2em; color: var(--dim); }

/* ④ CORE と PRIME: 同じ大きさ・同じ色 */
.twin { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border: 1px solid #2a3440; background: var(--glass); }
.twin > div { padding: clamp(24px, 3.6vw, 56px); }
.twin > div + div { border-left: 1px solid #2a3440; }
.twin .nm { font: 700 clamp(54px, 8vw, 124px)/.95 var(--en); letter-spacing: .04em; }
.twin dl { margin: 26px 0 0; display: grid; grid-template-columns: 6.5em 1fr; row-gap: 10px; font-size: 13.5px; }
.twin dt { color: var(--dim); }
.twin dd { margin: 0; }
.twin dd.big { font-size: 17px; font-weight: 700; }

/* ④ PRIME と CORE の比べ表: 2つの列は同じ幅・同じ色（上下に見せない） */
.why h2 .nw { white-space: nowrap; }
.why { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 90px); margin-top: 22px; align-items: end; }
.why p { color: #c3ccd8; max-width: 36em; }
.why p + p { margin-top: 14px; }
.why p b { color: var(--ink); }
.cmp { margin-top: 52px; border: 1px solid #2a3440; background: var(--glass); }
.cmp-h, .cmp-r { display: grid; grid-template-columns: 8.5em 1fr 1fr; }
.cmp-h > *, .cmp-r > * { padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 34px); margin: 0; }
.cmp-h > * + *, .cmp-r > * + * { border-left: 1px solid #2a3440; }
.cmp-r { border-top: 1px solid #2a3440; }
.cmp-h .nm { font: 700 clamp(44px, 6vw, 92px)/.95 var(--en); letter-spacing: .04em; }
.cmp-h .nm small { display: block; margin-top: 14px; font: 700 14.5px/1.6 var(--jp); letter-spacing: 0; color: var(--ink); }
.cmp-r > span { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.cmp-r p { color: #c3ccd8; font-size: 14px; }
.both { margin-top: 28px; padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-left: 1px solid var(--cy); }
.both h3 { font-size: 16px; font-weight: 900; }
.both ul { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 60px); }
.both li { padding: 9px 0 9px 22px; border-top: 1px solid var(--line); color: #c3ccd8; font-size: 13.5px; position: relative; }
.both li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: 10px; height: 1px; background: var(--cy); }
.both .ask { margin-top: 22px; font-size: clamp(17px, 1.8vw, 23px); font-weight: 900; line-height: 1.5; }

/* 連絡先の4行 */
.contact { margin: 0; display: grid; grid-template-columns: 7em 1fr; row-gap: 4px; font-size: 13px; }
.contact dt { color: var(--dim); }
.contact dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* 文を写して DM で送る手順 */
.sendsteps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sendsteps li { display: grid; grid-template-columns: 2.2em 1fr; gap: 12px; padding: 14px 16px; background: #070a0e; align-items: start; }
.sendsteps li > b { font: 700 22px/1.1 var(--en); color: var(--cy); }
.sendsteps p { font-weight: 700; margin-bottom: 8px; }
.sendsteps small { display: block; margin-top: 8px; font-size: 12px; color: var(--mute); }

/* 協賛の問い合わせ: 4つの区切り */
.sform { margin-top: 44px; max-width: 980px; display: grid; gap: 18px; }
.sstep { margin: 0; min-width: 0; border: 1px solid #2a3440; background: var(--glass); padding: clamp(20px, 3vw, 38px); }
.sstep legend { float: left; width: 100%; padding: 0; display: flex; align-items: baseline; gap: 14px; font-size: clamp(18px, 1.9vw, 24px); font-weight: 900; }
.sstep legend + * { clear: both; }
.sn { font: 700 clamp(26px, 2.6vw, 34px)/1 var(--en); color: var(--cy); letter-spacing: .06em; }
.sdesc { color: var(--mute); font-size: 13px; padding-top: 8px; margin-bottom: 20px; }
.req, .opt { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; margin-left: 10px; border: 1px solid; vertical-align: middle; white-space: nowrap; }
.req { color: #ff9f80; border-color: #ff9f8088; }
.opt { color: var(--mute); border-color: #2a3440; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.sgrid .wide { grid-column: 1 / -1; }
.sgrid label, .slab { display: grid; gap: 8px; font-size: 13px; font-weight: 700; align-content: start; }
.slab { margin-bottom: 4px; }
.lt { display: block; }
.sgrid small, .slab small { font-weight: 400; color: var(--mute); }
.sgrid input, .sgrid textarea { background: #070a0e; border: 1px solid #2a3440; border-bottom-color: var(--ti); padding: 13px 14px; font-size: 15px; width: 100%; border-radius: 0; }
.sgrid textarea { min-height: 130px; resize: vertical; }
.sgrid input:focus, .sgrid textarea:focus { outline: none; border-color: var(--cy); box-shadow: 0 1px 0 var(--cy); }
.sgrid input::placeholder, .sgrid textarea::placeholder { color: #4a5563; }
.sform .bad { border-color: #ff8f6b !important; }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kind { display: block; cursor: pointer; position: relative; }
.kind input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kc { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'img img' 'n t' 'n s'; column-gap: 10px; height: 100%; border: 1px solid #2a3440; background: #070a0e; padding: 0 0 12px; transition: border-color .2s, background .2s; }
.kc img, .kc i { grid-area: img; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; filter: saturate(.7) brightness(.75); transition: filter .2s; }
.kc i { display: block; background: repeating-linear-gradient(135deg, #0b1017 0 10px, #0e141c 10px 20px); }
.kc b { grid-area: n; font: 700 15px/1.3 var(--en); color: var(--dim); padding-left: 12px; letter-spacing: .08em; }
.kc strong { grid-area: t; font-size: 14px; line-height: 1.35; padding-right: 10px; }
.kc small { grid-area: s; font-size: 11.5px; color: var(--mute); line-height: 1.5; padding-right: 10px; }
.kind:hover .kc { border-color: var(--ti); }
.kind input:checked + .kc { border-color: var(--cy); background: #0a1a24; box-shadow: inset 0 0 0 1px var(--cy); }
.kind input:checked + .kc img { filter: none; }
.kind input:checked + .kc b { color: var(--cy); }
.kind input:focus-visible + .kc, .chips input:focus-visible + span { outline: 2px solid var(--cy); outline-offset: 2px; }
.kinds.bad { outline: 1px solid #ff8f6b; outline-offset: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: block; cursor: pointer; position: relative; }
.chips span { display: block; padding: 9px 14px; border: 1px solid #2a3440; background: #070a0e; font-size: 13px; font-weight: 400; }
.chips input:checked + span { border-color: var(--cy); color: var(--cy); background: #0a1a24; }
.sendto { padding: 16px 18px; border: 1px solid var(--line); background: #070a0e; margin-bottom: 18px; }
#s4 .err { color: #ff8f6b; font-size: 13px; min-height: 1.6em; margin-bottom: 8px; }
#s4 .done { max-width: none; }
.pick .mini { margin: 0; display: grid; grid-template-columns: 5.5em 1fr; row-gap: 6px; font-size: 12.5px; width: 100%; }
.pick .mini dt { color: var(--dim); }
.pick .mini dd { margin: 0; color: #c3ccd8; }

/* ⑤ 応募の入口: 色と形をはっきり変えた2つの扉 */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 4vw, 64px); margin-top: 52px; max-width: 1040px; }
.door { position: relative; min-height: clamp(330px, 40vw, 500px); padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; transition: transform .3s; }
.door::before { content: ''; position: absolute; inset: 0; z-index: -2; }
.door::after { content: ''; position: absolute; inset: 1px; z-index: -1; transition: background .3s; }
.door:hover { transform: translateY(-6px); }
.door .en { font: 500 12px/1 var(--en); letter-spacing: .32em; }
.door h3 { font-size: clamp(22px, 2.8vw, 38px); font-weight: 900; line-height: 1.25; margin: 14px 0 12px; }
.door p { font-size: 13px; color: #c3ccd8; }
.door .knob { position: absolute; top: 50%; width: 3px; height: 74px; transform: translateY(-50%); }
.door.pl { clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%); }
.door.pl::before { background: linear-gradient(160deg, var(--cy), #1d5d78 55%, #123244); }
.door.pl::after { background: linear-gradient(180deg, #0a1a24, #060b10 70%); clip-path: polygon(0 0, calc(100% - 55.6px) 0, 100% 55.6px, 100% 100%, 0 100%); }
.door.pl .en { color: var(--cy); }
.door.pl .knob { right: 26px; background: var(--cy); box-shadow: 0 0 14px var(--cy); }
.door.pl:hover::after { background: linear-gradient(180deg, #0e2937, #060b10 75%); }
.door.pr { border-radius: 999px 999px 0 0; }
.door.pr::before { border-radius: inherit; background: linear-gradient(180deg, var(--am), #7a5a26 60%, #3c2c14); }
.door.pr::after { border-radius: inherit; background: linear-gradient(180deg, #1c1509, #0a0806 70%); }
.door.pr .en { color: var(--am); }
.door.pr .knob { left: 26px; background: var(--am); box-shadow: 0 0 14px var(--am); border-radius: 2px; }
.door.pr:hover::after { background: linear-gradient(180deg, #2a1f0c, #0a0806 75%); }

/* 一番下 */
.foot { border-top: 1px solid var(--line); padding: 54px var(--gut) 44px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; font-size: 13px; color: var(--mute); }
.foot h4 { margin: 0 0 12px; font: 500 11px/1 var(--en); letter-spacing: .3em; color: var(--dim); }
.foot a { color: var(--ink); border-bottom: 1px solid #2a3440; }
.foot a:hover { color: var(--cy); border-color: var(--cy); }
.foot .sp { font-size: clamp(18px, 2vw, 26px); font-weight: 900; color: var(--ink); line-height: 1.5; }
.foot li { padding: 3px 0; }
.unset { color: var(--dim); }

/* システムの頁 */
.pagehead { padding: clamp(120px, 15vw, 210px) var(--gut) clamp(40px, 6vw, 84px); }
.pagehead .lead { margin-top: 22px; }
.sys { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(30px, 6vw, 110px); padding: 0 var(--gut) clamp(72px, 10vw, 150px); }
.sys aside { position: sticky; top: 86px; align-self: start; }
.sys aside p { font-size: 12px; color: var(--mute); margin-top: 14px; }
.sys aside p b { color: var(--cy); }
.feat { position: relative; padding: clamp(34px, 5vw, 70px) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 3.4vw, 52px); align-items: start; }
.feat::before { content: ''; position: absolute; top: -1px; right: 100%; width: 0; height: 1px; background: var(--cy); box-shadow: 0 0 8px var(--cy); transition: width .5s; }
.feat.on::before { width: clamp(30px, 6vw, 110px); }
.feat .no { font: 700 clamp(46px, 6vw, 84px)/.9 var(--en); color: #222b36; transition: color .4s; }
.feat.on .no { color: var(--cy); }
.feat h2 { font-size: clamp(22px, 2.5vw, 34px); font-weight: 900; line-height: 1.3; margin: 12px 0 14px; }
.feat .what { color: #c3ccd8; }
.feat .at { margin-top: 16px; font-size: 12px; color: var(--mute); }
.feat .at b { color: var(--cy); font-weight: 700; }
.feat figure { border: 1px solid #2a3440; background: var(--glass); }
.feat figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.steps li { padding: 16px 18px; font-size: 13px; color: #c3ccd8; }
.steps li + li { border-left: 1px solid var(--line); }
.steps b { display: block; font: 500 11px/1 var(--en); letter-spacing: .3em; color: var(--dim); margin-bottom: 8px; }
.places { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.place { background: var(--bg); padding: clamp(18px, 2.6vw, 36px); display: grid; grid-template-columns: 42% 1fr; gap: 20px; align-items: start; }
.place img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 1px solid #2a3440; }
.place h3 { font-size: 20px; font-weight: 900; }
.place p { color: var(--mute); font-size: 13px; margin-top: 8px; }
.place:target { background: #08131b; box-shadow: inset 2px 0 0 var(--cy); }
.more { columns: 2; column-gap: clamp(28px, 6vw, 100px); margin-top: 40px; }
.more li { break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.more li span:first-child::before { content: ''; display: inline-block; width: 12px; height: 1px; background: var(--cy); vertical-align: middle; margin-right: 12px; }
.note { margin-top: 26px; font-size: 12px; color: var(--mute); }

/* 応募の頁 */
.split { min-height: min(100svh, 1100px); display: grid; grid-template-columns: 1fr 1fr; }
.split a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gut) clamp(56px, 10vh, 120px); overflow: hidden; isolation: isolate; }
.split a img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.58); transition: filter .5s, transform 1.2s; }
.split a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #05070a55, #05070ae8 88%); }
.split a:hover img { filter: saturate(1) brightness(.72); transform: scale(1.04); }
.split a + a { border-left: 1px solid #2a3440; }
.split .en { font: 500 12px/1 var(--en); letter-spacing: .32em; }
.split .pl .en { color: var(--cy); }
.split .pr .en { color: var(--am); }
.split h2 { font-size: clamp(30px, 4.8vw, 72px); font-weight: 900; line-height: 1.12; margin: 16px 0 14px; }
.split p { color: #c3ccd8; max-width: 26em; }
.split .q { position: absolute; top: 96px; left: var(--gut); font-size: 13px; color: var(--mute); }
.stage { min-height: 100svh; padding: clamp(110px, 14vw, 180px) var(--gut) 90px; max-width: 1100px; }
.crumb { font-size: 12px; color: var(--mute); display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.crumb a { color: var(--cy); }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border: 1px solid #2a3440; background: var(--glass); }
.pick > div { padding: clamp(22px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pick > div + div { border-left: 1px solid #2a3440; }
.pick .nm { font: 700 clamp(40px, 6vw, 84px)/1 var(--en); letter-spacing: .04em; }
.pick .nm.jp { font: 900 clamp(24px, 3vw, 40px)/1.3 var(--jp); letter-spacing: 0; }
.pick p { color: var(--mute); font-size: 13px; }
.pick .what { font-size: 12.5px; color: var(--cy); border-bottom: 1px dotted var(--cy); }
.btn { display: inline-block; cursor: pointer; background: none; border: 1px solid var(--ti); padding: 13px 26px; font-weight: 700; font-size: 13.5px; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.c { border-color: var(--cy); color: var(--cy); }
.btn.c:hover { background: var(--cy); color: var(--bg); }
.form { margin-top: 36px; max-width: 640px; display: grid; gap: 22px; }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.form label small { font-weight: 400; color: var(--mute); }
.form input, .form textarea, .form select { background: var(--glass); border: 1px solid #2a3440; border-bottom-color: var(--ti); padding: 13px 14px; font-size: 15px; width: 100%; border-radius: 0; }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--cy); box-shadow: 0 1px 0 var(--cy); }
.form .err { color: #ff8f6b; font-size: 13px; min-height: 1.6em; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.roles label { display: block; cursor: pointer; }
.roles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.roles span { display: block; padding: 9px 16px; border: 1px solid #2a3440; font: 700 14px var(--en); letter-spacing: .12em; }
.roles input:checked + span { border-color: var(--cy); color: var(--cy); background: #0a1a24; }
.roles input:focus-visible + span { outline: 2px solid var(--cy); outline-offset: 2px; }
.done { margin-top: 30px; border: 1px solid #2a3440; border-left: 2px solid var(--cy); background: var(--glass); padding: 24px; max-width: 640px; }
.done pre { margin: 16px 0; white-space: pre-wrap; font: 13px/1.8 var(--jp); color: #c3ccd8; background: #070a0e; padding: 14px; border: 1px solid var(--line); }
.privacy { border-top: 1px solid var(--line); padding: clamp(50px, 7vw, 96px) var(--gut); }
.privacy dl { margin: 26px 0 0; display: grid; grid-template-columns: 9em 1fr; max-width: 780px; font-size: 13.5px; }
.privacy dt, .privacy dd { padding: 13px 0; border-top: 1px solid var(--line); margin: 0; }
.privacy dt { color: var(--dim); }

/* 協賛募集の頁 */
.spots { padding: 0 var(--gut) clamp(60px, 9vw, 130px); }
.spot { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 5vw, 84px); align-items: center; padding: clamp(30px, 4.6vw, 64px) 0; border-top: 1px solid var(--line); }
.spot:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.spot:nth-child(even) figure { order: 2; }
.spot figure { border: 1px solid #2a3440; }
.spot figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.spot.nop { grid-template-columns: 1fr; }
.spot .no { font: 500 12px/1 var(--en); letter-spacing: .3em; color: var(--cy); }
.spot h2 { font-size: clamp(22px, 2.6vw, 36px); font-weight: 900; margin: 12px 0 18px; line-height: 1.3; }
.spot dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; font-size: 13.5px; }
.spot dt, .spot dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.spot dt { color: var(--dim); }

/* 出てくる動き（控えめ） */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .nav a { font-size: 12px; }
  .brand small { display: none; }
  .mapsec, .goal, .sys, .feat, .spot, .spot:nth-child(even) { grid-template-columns: 1fr; }
  .spot:nth-child(even) figure { order: 0; }
  .mapsec .plan { max-width: 330px; }
  .sys aside { position: static; max-width: 240px; }
  .feat::before { display: none; }
  .strip { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .cell, .strip:hover .cell, .strip .cell:hover { flex: 0 0 72vw; height: 400px; scroll-snap-align: start; }
  .cell img { filter: saturate(.9) brightness(.7); }
  .cell p { max-height: 6em; opacity: 1; }
  .twin, .doors, .pick, .places, .split, .steps, .why, .both ul, .sgrid { grid-template-columns: 1fr; }
  .cmp-h, .cmp-r { grid-template-columns: 1fr 1fr; }
  .cmp-h > span { display: none; }
  .cmp-r > span { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp-h > * + *, .cmp-r > * + * { border-left: 0; }
  .cmp-r > p + p, .cmp-h > p + p { border-left: 1px solid #2a3440; }
  .cmp-r p { font-size: 13px; }
  .cmp-h .nm small { font-size: 12.5px; }
  .kinds { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kc strong { font-size: 13px; }
  .contact { grid-template-columns: 6.5em 1fr; }
  .hero-copy h1 { font-size: min(30px, 7.4vw); }
  .twin > div + div, .pick > div + div { border-left: 0; border-top: 1px solid #2a3440; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .split a { min-height: 50svh; padding-top: 120px; }
  .split a + a { border-left: 0; border-top: 1px solid #2a3440; }
  .place { grid-template-columns: 1fr; }
  .more { columns: 1; }
  .foot { grid-template-columns: 1fr; }
  .live { bottom: auto; top: 76px; }
  .privacy dl { grid-template-columns: 1fr; }
  .privacy dd { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .cell, .cell img, .door { transition: none; }
}