:root { --night:#100906; --paper:#f0e5d2; --red:#ed4328; --amber:#d8c4a6; --ink:#180d09; --line:rgba(240,229,210,.2); --display:"Yuji Syuku","Yu Mincho",serif; --sans:"Noto Sans JP",sans-serif; --label:"Oswald",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--night); color:var(--paper); font-family:var(--sans); line-height:1.9; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd { margin:0; }
.proposal-bar { min-height:64px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--line); font:500 9px var(--label); letter-spacing:.16em; }
.proposal-bar nav { display:flex; gap:22px; margin-left:auto; }
.proposal-bar nav a { color:#f0e5d2aa; }
.proposal-hero { min-height:calc(100svh - 64px); padding:8vw 5vw; display:grid; grid-template-columns:.34fr 1.2fr .75fr; gap:4vw; align-items:center; background:radial-gradient(circle at 72% 40%,rgba(237,67,40,.2),transparent 28%); }
.proposal-hero>p,.flow header p,.rules>div>p,.proposal-cta>p:first-child { align-self:start; color:var(--red); font:600 10px var(--label); letter-spacing:.22em; }
.proposal-hero h1 { font:400 clamp(58px,7vw,112px)/1.28 var(--display); letter-spacing:.01em; }
.proposal-hero h1 em { color:var(--red); font-style:normal; }
.proposal-hero h1 span,.proposal-hero h1 em,.flow h2 span,.flow h3 span,.proposal-cta h2 span { display:block; white-space:nowrap; }
.proposal-hero>div>p { color:#f0e5d2aa; }
.proposal-hero dl { margin-top:46px; border-top:1px solid var(--line); }
.proposal-hero dl div { padding:14px 0; display:grid; grid-template-columns:90px 1fr; border-bottom:1px solid var(--line); }
.proposal-hero dt { color:var(--red); font:500 10px var(--label); letter-spacing:.12em; }
.proposal-hero dd { font-weight:700; }
.flow { padding:10vw 4vw; background:var(--paper); color:var(--ink); }
.flow header { display:grid; grid-template-columns:.36fr 1fr; gap:5vw; padding-top:16px; border-top:2px solid; }
.flow h2,.rules h2,.proposal-cta h2 { font:400 clamp(52px,7vw,104px)/1.35 var(--display); }
.flow ol { margin:8vw 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid; border-bottom:1px solid; }
.flow li { min-width:0; padding:30px 2vw 42px; border-right:1px solid #180d0933; }
.flow li:last-child { border-right:0; }
.flow li>b { display:block; color:var(--red); font:400 54px Anton,sans-serif; }
.flow li>span { display:block; margin:20px 0 50px; font:500 9px var(--label); letter-spacing:.16em; }
.flow h3 { min-height:4em; font:400 clamp(20px,1.75vw,29px)/1.6 var(--display); }
.flow li p { margin-top:20px; color:#180d0999; font-size:13px; }
.rules { padding:10vw 5vw; display:grid; grid-template-columns:.82fr 1.18fr; gap:8vw; }
.rules ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rules li { display:grid; grid-template-columns:.58fr 1fr; gap:30px; padding:24px 0; border-bottom:1px solid var(--line); }
.rules li b { color:var(--red); }
.rules li span { color:#f0e5d2aa; }
.demo-links { padding:10vw 5vw; background:#d8c4a6; color:var(--ink); }
.demo-links header { display:grid; grid-template-columns:.4fr 1.6fr; gap:5vw; padding-top:16px; border-top:2px solid; }
.demo-links header p { color:var(--red); font:600 10px var(--label); letter-spacing:.22em; }
.demo-links h2 { font:400 clamp(52px,7vw,104px)/1.35 var(--display); }
.demo-links h2 span { display:block; }
.demo-links>div { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:7vw; }
.demo-links a { min-height:420px; padding:36px; display:flex; flex-direction:column; background:var(--night); color:var(--paper); clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px)); }
.demo-links a+a { background:var(--red); }
.demo-links small,.demo-links a>span { font:500 9px var(--label); letter-spacing:.15em; }
.demo-links b { margin:auto 0; font:400 clamp(35px,4vw,62px)/1.5 var(--display); }
.demo-links a>span { padding-top:18px; border-top:1px solid #fff5; }
.proposal-cta { padding:12vw 5vw; background:var(--red); color:#fff8ed; text-align:center; }
.proposal-cta>p:first-child { color:#fff8ed; }
.proposal-cta>p:not(:first-child) { max-width:700px; margin:34px auto 0; }
.proposal-cta a { display:inline-block; margin-top:42px; padding:16px 28px; background:var(--night); font-weight:700; }
@media(max-width:820px){
  .proposal-bar { min-height:58px; padding:12px 18px; gap:20px; }
  .proposal-bar span { text-align:right; }
  .proposal-hero { min-height:auto; padding:85px 20px 100px; display:block; }
  .proposal-hero h1 { margin:30px 0 45px; font-size:clamp(40px,12.5vw,56px); }
  .flow,.rules,.demo-links,.proposal-cta { padding:90px 20px; }
  .flow header,.rules { display:block; }
  .flow h2,.rules h2,.proposal-cta h2 { margin:22px 0; font-size:clamp(39px,12vw,52px); }
  .flow h2 { font-size:clamp(29px,9vw,41px); }
  .proposal-cta h2 { font-size:clamp(34px,11vw,48px); }
  .flow ol { grid-template-columns:1fr; margin-top:60px; }
  .flow li { padding:25px 0 38px; border-right:0; border-bottom:1px solid #180d0933; }
  .flow li>span { margin:10px 0 24px; }
  .flow h3 { min-height:0; }
  .rules ul { margin-top:55px; }
  .rules li { grid-template-columns:1fr; gap:8px; }
  .demo-links header { display:block; }
  .demo-links h2 { margin:22px 0; font-size:clamp(29px,8.5vw,43px); }
  .demo-links>div { grid-template-columns:1fr; margin-top:55px; }
  .demo-links a { min-height:340px; padding:27px; }
  .demo-links b { font-size:clamp(34px,10vw,44px); }
  .proposal-bar>span { display:none; }
}