/* TOKYO AI HACKATHON 2026 — v8 "strokes" (2026-09-29) → v9.1 (2026-09-30)
   White base. Diagonal colour strokes, bold JP headline boxes, vertical text,
   sky photo cut on a diagonal, soft circles, a drawn timeline path, ring roster.
   Dark surfaces only: the info band + ENTRY. */

:root{
  --paper:#fff; --pale:#f6f2ea; --pale-2:#ece5d8;
  --navy:#10231a; --deep:#173326; --black:#1b1d1a;
  --ink:#1d211e; --ink-2:#565c57; --ink-3:#8a8f89;
  --c1:#1f4d36; --c2:#7a9a3a; --c3:#e2762a; --sky:#cfe0c9; --c1-light:#b9dcc4; --c1-bright:#2e6e4d;
  --line:rgba(17,26,60,.14); --line-2:rgba(17,26,60,.08);
  --f-jp:"Noto Sans JP",system-ui,sans-serif; --f-head:"Montserrat","Noto Sans JP",sans-serif; --f-en:"Montserrat","Noto Sans JP",sans-serif; --f-hand:"Zen Kurenaido","Noto Sans JP",sans-serif;
  --t-xs:12px; --t-s:13.5px; --t-b:15px; --t-m:17px; --t-l:22px;
  --t-h2:clamp(28px,3.2vw,44px); --t-big:clamp(34px,5vw,72px); --t-hero:clamp(48px,7.6vw,110px);
  --gut:clamp(20px,5vw,72px); --wrap:1200px;
  --ease:cubic-bezier(.22,1,.36,1); --hd:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-jp);font-size:var(--t-b);line-height:1.9;color:var(--ink);background:var(--paper);letter-spacing:.03em;font-feature-settings:"palt";overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.en{font-family:var(--f-en)}
.hand{font-family:var(--f-hand);font-size:clamp(16px,1.4vw,20px);color:var(--c1);letter-spacing:.02em;line-height:1.5;display:inline-block;transform:rotate(-2.5deg)}

/* ===== labels & headings ===== */
.lab{display:flex;align-items:center;gap:14px;font-family:var(--f-en);font-weight:600;font-size:var(--t-xs);letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.lab .jp{font-family:var(--f-jp);letter-spacing:.08em;text-transform:none;padding-left:14px;border-left:1px solid var(--line)}
.h2{font-size:var(--t-h2);font-weight:900;line-height:1.35;letter-spacing:.01em;margin-top:14px}
.h2 .c{color:var(--c1)}
.lead{font-size:16px;font-weight:500;line-height:1.9;letter-spacing:.05em;color:var(--ink-2);margin-top:22px}
.big{font-size:var(--t-big);font-weight:900;line-height:1.25;letter-spacing:.005em}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*.12s)}
.reveal.in{opacity:1;transform:none}
html.static .reveal{opacity:1;transform:none;transition:none}

/* ===== header ===== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hd);display:flex;align-items:center;transition:background .4s,box-shadow .4s}
.hdr .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-2)}
.logo{font-family:var(--f-en);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--ink);display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo i{width:10px;height:10px;border-radius:50%;background:var(--c3)}
.logo b{color:var(--c1)}
.nav{display:flex;gap:26px;font-size:var(--t-s);font-weight:700}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--c1);transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
.hdr .cta{font-size:var(--t-s);font-weight:700;color:#fff;background:var(--black);border-radius:999px;padding:10px 20px;white-space:nowrap}
.hdr .cta:hover{background:var(--c1)}

/* side label (PC) */
.side{position:fixed;left:22px;bottom:40px;z-index:40;writing-mode:vertical-rl;font-family:var(--f-en);font-weight:600;font-size:10.5px;letter-spacing:.32em;color:var(--ink-3);display:flex;align-items:center;gap:16px}
.side::before{content:"";width:1px;height:80px;background:var(--ink-3);opacity:.5}

/* ===== pill CTA ===== */
.pill{display:inline-flex;align-items:center;gap:22px;background:var(--black);color:#fff;border-radius:999px;padding:16px 16px 16px 30px;min-width:min(100%,360px);box-shadow:0 22px 50px -26px color-mix(in srgb,var(--ink) 55%,transparent);transition:transform .35s var(--ease),box-shadow .35s}
.pill:hover{transform:translateY(-3px);box-shadow:0 28px 56px -26px color-mix(in srgb,var(--ink) 70%,transparent)}
.pill .tx{flex:1;line-height:1.35}
.pill b{display:block;font-size:var(--t-m);font-weight:700;letter-spacing:.04em}
.pill small{display:block;font-size:var(--t-xs);opacity:.7;margin-top:3px}
.pill i{width:46px;height:46px;border-radius:50%;background:var(--c1);flex:none;position:relative;transition:transform .35s var(--ease)}
.pill i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-60%,-50%) rotate(45deg)}
.pill:hover i{transform:translateX(5px)}
.pill.alt i{background:var(--c3)}

/* ===== strokes (FV / ENTRY) ===== */
.strokes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.strokes line{stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.55,0,.2,1);transition-delay:var(--d,0s)}
.is-in .strokes line,.in .strokes line,html.static .strokes line{stroke-dashoffset:0}
html.static .strokes line{transition:none}

/* ===== FV ===== */
.fv{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--paper);padding:calc(var(--hd) + 24px) 0 110px}
.fv__in{position:relative;z-index:2;width:100%}
.tcy{text-combine-upright:all}
.stamp{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-en);font-weight:600;font-size:var(--t-xs);letter-spacing:.2em;color:var(--ink);border:1px solid var(--ink);padding:8px 14px;background:rgba(255,255,255,.85)}
.stamp .jp{font-family:var(--f-jp);font-weight:700;letter-spacing:.1em}
.fv__t{margin-top:26px;line-height:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,14px)}
.box{display:inline-block;background:#fff;color:var(--ink);font-weight:900;font-size:var(--t-hero);line-height:1.02;letter-spacing:.02em;padding:.06em .16em .1em;box-shadow:0 18px 50px -30px color-mix(in srgb,var(--ink) 45%,transparent);opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.box.en{font-family:var(--f-en);font-weight:800;font-size:calc(var(--t-hero)*.86);letter-spacing:.04em;color:var(--c1);padding:.1em .2em .12em}
.is-in .box,html.static .box{opacity:1;transform:none}
html.static .box{transition:none}
.fv__lead{margin-top:24px;font-size:clamp(15px,1.25vw,18px);font-weight:500;line-height:2.15;letter-spacing:.06em;color:var(--ink)}
.fv__lead span{background:#fff;padding:.18em .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fv__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.tate{position:absolute;right:var(--gut);top:calc(var(--hd) + 48px);z-index:3;writing-mode:vertical-rl;text-orientation:mixed;font-weight:700;font-size:clamp(18px,1.7vw,24px);letter-spacing:.16em;line-height:1.55;background:#fff;padding:.7em .38em;box-shadow:0 18px 50px -30px color-mix(in srgb,var(--ink) 45%,transparent);color:var(--ink);white-space:nowrap}
.tate .q{color:var(--c3)}
@keyframes scr{0%{transform:translateX(-100%)}60%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ===== info band ===== */
.info{background:var(--navy);color:#fff;position:relative;z-index:2}
.info .wrap{display:flex;align-items:stretch}
.info .it{flex:1;display:flex;align-items:baseline;gap:14px;padding:22px 0 22px 26px;border-left:1px dashed rgba(255,255,255,.22)}
.info .it:first-child{border-left:0;padding-left:0}
.info .k{font-family:var(--f-en);font-weight:800;font-size:var(--t-xs);letter-spacing:.24em;color:var(--sky)}
.info b{font-family:var(--f-en);font-weight:800;font-size:var(--t-l);letter-spacing:.04em}
.info span.x{font-size:var(--t-s);color:rgba(255,255,255,.72)}

/* ===== sections ===== */
.sec{position:relative;padding:clamp(80px,9vw,130px) 0}
.sec.pale{background:var(--pale)}
.sec.skew{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);padding-top:calc(4vw + clamp(80px,9vw,130px));margin-top:-2vw}
.blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.sec > .wrap{position:relative;z-index:1}

/* concept */

/* conditions */
.cond{overflow:clip;padding-bottom:clamp(56px,6vw,90px)}

/* gain: zigzag */

/* flow: drawn path */

/* criteria: deep card */

/* day */
.clipimg{position:relative;margin-left:auto;width:min(100%,1080px);height:clamp(240px,30vw,400px);overflow:hidden;clip-path:polygon(7% 0,100% 0,100% 80%,0 100%)}
.clipimg img{width:100%;height:120%;object-fit:cover;object-position:center 40%;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:start}
.two .sticky{position:sticky;top:calc(var(--hd) + 24px)}
.two .meta{margin-top:18px;font-family:var(--f-en);font-weight:800;font-size:var(--t-l);letter-spacing:.04em;color:var(--c1)}
.two .meta small{display:block;font-family:var(--f-jp);font-weight:400;font-size:var(--t-s);color:var(--ink-2);letter-spacing:.04em;margin-top:4px}
.tt .r{display:grid;grid-template-columns:44px minmax(0,1fr) 92px;gap:16px;align-items:baseline;padding:18px 12px;border-top:1px solid var(--line)}
.tt .r:last-child{border-bottom:1px solid var(--line)}
.tt .r.hi{background:var(--pale)}
.tt .t{font-family:var(--f-en);font-weight:800;font-size:var(--t-s);color:var(--ink-3);letter-spacing:.08em}
.tt .r.hi .t{color:var(--c3)}
.tt .w{font-weight:700;font-size:var(--t-m);line-height:1.5}
.tt .w small{display:block;font-weight:400;font-size:var(--t-s);color:var(--ink-2);margin-top:4px;line-height:1.7}
.tt .tm{font-family:var(--f-en);font-weight:800;font-size:var(--t-s);color:var(--c1);margin-left:10px;letter-spacing:.06em;font-style:normal}
.tt .m{text-align:right;font-family:var(--f-en);font-weight:800;font-size:var(--t-s);letter-spacing:.08em;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tags span{font-size:var(--t-s);border:1px solid var(--line);border-radius:6px;padding:6px 12px;background:#fff}
.tags b{color:var(--c1);margin-right:4px}

/* judges: rings */
.jcount{font-family:var(--f-en);font-weight:800;font-size:var(--t-s);letter-spacing:.14em;color:var(--c1);margin-top:12px}

/* prize */

/* outline table */
.tbl{border-top:1px solid var(--line)}
.tbl .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--t-b)}
.tbl .k{font-weight:700}
.tbl .v{color:var(--ink-2)}
.tbl .v b{color:var(--ink)}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:700;font-size:var(--t-m);position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;border-right:2px solid var(--c1);border-bottom:2px solid var(--c1);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 22px;color:var(--ink-2);font-size:var(--t-b);line-height:1.95}

/* entry */
.entry{background:var(--navy);color:#fff;overflow:hidden}
.entry .strokes{opacity:.42}
.entry .lab{color:rgba(255,255,255,.6)}
.entry .lab .jp{border-color:rgba(255,255,255,.2)}
.entry .h2{font-size:clamp(40px,6vw,88px);line-height:1.15}
.entry .lead{color:rgba(255,255,255,.78)}
.frame{margin-top:40px;background:#fff;color:var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}
.frame iframe{width:100%;height:1100px;border:0;display:block}
.contact{margin-top:22px;font-size:var(--t-s);color:rgba(255,255,255,.72)}
.contact b{color:#fff;font-weight:700;margin-left:6px}

/* generic cards (partners) */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px 32px}
.card .no{font-family:var(--f-en);font-weight:800;font-size:var(--t-xs);letter-spacing:.24em;color:var(--c3)}
.card h3{font-size:var(--t-l);font-weight:900;line-height:1.45;margin-top:10px}
.card p{margin-top:12px;color:var(--ink-2);font-size:var(--t-b)}
.kv .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.kv .r:last-child{border-bottom:1px solid var(--line)}
.kv .k{font-weight:900}
.kv .v{color:var(--ink-2)}

/* footer */
footer{background:color-mix(in srgb,var(--navy) 62%,#000);color:rgba(255,255,255,.72);padding:48px 0 40px;font-size:var(--t-s)}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
footer .logo{color:#fff}
footer .links{display:flex;gap:26px;font-family:var(--f-en);font-weight:600;font-size:var(--t-xs);letter-spacing:.2em}
footer .links a:hover{color:#fff}

/* ===== responsive ===== */
@media (max-width:1100px){
  .side{display:none}
  .nav{display:none}
}
@media (max-width:820px){
  :root{--hd:64px;--t-hero:clamp(46px,13.5vw,72px)}
  .hdr .cta{padding:8px 14px;font-size:12px}
  .fv{padding:calc(var(--hd) + 24px) 0 96px;min-height:auto}
  .tate{position:static;writing-mode:horizontal-tb;display:inline-block;margin-top:22px;padding:.5em .8em;font-size:16px;letter-spacing:.08em}
  .fv__lead{font-size:var(--t-b)}
  .stamp{flex-wrap:wrap;gap:4px 12px;font-size:11px;letter-spacing:.14em}
  .fv__cta{flex-direction:column;align-items:stretch}
  .pill{min-width:0;width:100%}
  .info .wrap{flex-direction:column}
  .info .it{border-left:0;padding:12px 0;border-top:1px dashed rgba(255,255,255,.22)}
  .info .it:first-child{border-top:0}
  .sec{padding:72px 0}
  .sec.skew{clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%);padding-top:calc(6vw + 72px)}
  .br-pc{display:none}
  .two{grid-template-columns:1fr;gap:28px}
  .two .sticky{position:static}
  .tt .r{grid-template-columns:32px minmax(0,1fr);gap:10px}
  .tt .m{grid-column:2;text-align:left;color:var(--ink-3)}
  .tbl .r,.kv .r{grid-template-columns:1fr;gap:4px}
  .cards,.st4{grid-template-columns:1fr}
  .frame iframe{height:1300px}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .logo{font-size:11px;letter-spacing:.1em}
  .logo b{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.box,.strokes line,.path polyline,.score .bar span{transition:none!important;opacity:1;transform:none;stroke-dashoffset:0}
}


/* ===================================================================
   v9 (2026-09-30): readability rules, splash conditions, brush flow,
   navy prize with polaroids, facts tiles, white entry, mobile poem
   =================================================================== */
body{font-weight:400;letter-spacing:.02em;line-break:strict;font-feature-settings:"palt"}
/* v9.1: headings = Zen Kaku Gothic New (JP) + Montserrat (digits/Latin); body = Noto Sans JP */
h1,h2,h3,.h2,.big,.box,.tate,.tatebig,.fv__lead,.jl .nm,.j .nm,.kv .k,.stn .t,.prz3 b,.splash h3,.stamp .jp,.hdr .cta,.pill{font-family:var(--f-head)}
.fv__lead{font-weight:700}
h1,h2,h3,.big,.h2{text-wrap:pretty}
p,li,.x,.v,.lead,.txt{text-wrap:pretty}
.lead,.zi p,.step p,.tt .w small,.faq .a,.card p,.st4 p,.kv .v,.tbl .v{max-width:40em}
.hdr .cta,.nav a,.pill{min-height:44px}

/* decorative blob */
.deco{position:absolute;z-index:0;pointer-events:none;width:clamp(220px,26vw,380px);opacity:.9}
.deco.tr{right:-6%;top:-40px}
.deco.small{width:clamp(160px,16vw,220px);top:20px;right:2%}
.deco svg{width:100%;height:auto;display:block}

/* conditions: paint splashes */

/* flow: brush stroke road */
.brush{position:relative;margin:clamp(48px,5vw,72px) 0 0;height:clamp(400px,34vw,470px);--lx:0}
.brush .line{position:absolute;left:0;width:100%;top:50%;height:44px;transform:translateY(-50%);clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.55,0,.2,1) .1s}
.brush.in .line,html.static .brush .line{clip-path:inset(0 0 0 0)}
.brush .rail{position:absolute;left:var(--gut);right:var(--gut);top:0;bottom:0;max-width:calc(var(--wrap) - 2*var(--gut));margin:0 auto}
.stn{position:absolute;left:calc(120px + var(--i)*((100% - 240px)/4));top:50%;width:0}
.stn .dot{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--sc);z-index:2}
.stn.hl .dot{background:var(--sc)}
.stn.fin .dot{left:-17px;top:-17px;width:34px;height:34px}
.stn.fin .dot::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--sc);opacity:.45}
.stn::before{content:"";position:absolute;left:-1px;width:2px;background:var(--sc);opacity:.45}
.stn.up::before{bottom:14px;height:30px}
.stn.dn::before{top:14px;height:30px}
.stn .card{position:absolute;left:-120px;width:240px;background:#fff;border-radius:10px;padding:18px 20px 16px;box-shadow:0 24px 44px -30px color-mix(in srgb,var(--ink) 40%,transparent);opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(.5s + var(--i)*.18s)}
.brush.in .card,html.static .brush .card{opacity:1;transform:none}
.stn.up .card{bottom:44px}
.stn.dn .card{top:44px}
.stn .d{font-family:var(--f-en);font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:.01em;color:var(--sc)}
.stn .t{font-weight:900;font-size:20px;line-height:1.4;margin-top:8px}
.stn .x{font-size:14px;line-height:1.7;color:var(--ink-2);margin-top:6px}

/* judges two-col */

/* prize: navy climax */

/* outline: facts tiles */

/* entry: white + strokes (bookend of the FV) */
.entry.light{background:#fff;color:var(--ink)}
.entry.light .strokes{opacity:.62}
.entry.light .lab{color:var(--ink-3)}
.entry.light .lab .jp{border-color:var(--line)}
.entry.light .h2{color:var(--ink)}
.entry.light .lead{color:var(--ink);background:#fff;display:inline-block;padding:6px 12px}
.entry.light .pill{margin-top:28px}
.entry.light .frame{border:1px solid var(--line);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--ink) 35%,transparent)}
.entry.light .contact{color:var(--ink-2);background:#fff;display:inline-block;padding:4px 10px}
.entry.light .contact b{color:var(--ink)}

/* mobile-only poem */

@media (max-width:1100px){
  .stn .card{left:-100px;width:200px}
  .stn{left:calc(100px + var(--i)*((100% - 200px)/4))}
}
@media (max-width:820px){
  body{letter-spacing:.01em}
  .h2{font-size:clamp(24px,7vw,30px)}
  .lead{font-size:15px;line-height:1.85}
  .brush{height:auto;margin:36px 0 0;padding-left:44px}
  .brush .line{display:none}
  .brush::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:14px;border-radius:8px;background:linear-gradient(180deg,var(--c1),var(--c2),var(--c3));transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease)}
  .brush.in::before,html.static .brush::before{transform:none}
  .brush .rail{position:static;max-width:none;margin:0}
  .stn{position:relative;left:auto;top:auto;width:auto;margin-bottom:16px}
  .stn::before{display:none}
  .stn .dot{left:-38px;top:20px;width:22px;height:22px;border-width:3px}
  .stn.fin .dot{left:-40px;top:18px;width:26px;height:26px}
  .stn .card{position:static;width:auto;left:auto}
  .stn .d{font-size:24px}
  .stn .t{font-size:18px}
  .deco{width:160px;right:-40px;top:-10px}
  .deco.small{width:120px}
  .tt .r{grid-template-columns:32px minmax(0,1fr) auto;gap:8px 10px}
  .tt .m{grid-column:3;text-align:right;color:var(--ink-3);font-size:12px}
  .entry.light .lead{display:block;padding:0;background:none}
  .entry.light .pill{width:100%}
}

/* v9.1 */
.flow{padding-bottom:clamp(56px,6vw,90px)}

/* ===================================================================
   v9.2 (2026-09-30): Japanese-only labels, Noto headings, centred prize
   =================================================================== */
.lab{gap:12px;text-transform:none}
.lab::before{content:"";display:block;width:22px;height:2px;background:var(--c1);flex:none}
.lab .jp{padding-left:0;border-left:0;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.prize.dark .lab::before,.entry:not(.light) .lab::before{background:var(--sky)}
.info .k{font-family:var(--f-jp);font-weight:700;letter-spacing:.12em}
.st4 .no,.card .no{font-family:var(--f-jp);font-weight:700;letter-spacing:.12em}
.jcount{font-family:var(--f-jp);letter-spacing:.06em}

/* prize: centred composition */

/* v9.3: prize on a light gradient with a diagonal brand band (no flat navy) */
.faq.pale{overflow:clip}

/* v9.4: About headings one line, aligned */

/* ===================================================================
   v10 (2026-09-30): photo-driven magazine layout
   =================================================================== */
/* photo marquee */
.marq{overflow:hidden;background:#fff;padding:18px 0}
.marq__track{display:flex;gap:14px;width:max-content;animation:marq 60s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq img{height:clamp(130px,14vw,210px);width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block;flex:none}
@keyframes marq{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.marq__track{animation:none}}

/* theme: fixed photo, cards scroll over it */

/* conditions: photo cards */
.cond{padding-bottom:clamp(72px,8vw,110px)}
.mags{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:40px}
.mag figure{position:relative;margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.mag figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mag:hover figure img{transform:scale(1.04)}
.mag .badge{position:absolute;left:14px;top:14px;font-family:var(--f-en);font-weight:800;font-size:20px;line-height:1;color:#fff;background:var(--sc);padding:9px 12px;border-radius:6px}
.mag h3{font-size:clamp(19px,1.6vw,23px);font-weight:900;line-height:1.45;margin-top:18px}
.mag p{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.85}

/* gain / value: alternating photo rows */
.tg{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px}
.tg span{font-size:13px;font-weight:700;color:var(--ac)}

/* day: two photos in the diagonal frame */
.clipimg.duo{display:flex;gap:10px}
.clipimg.duo img{height:120%}
.clipimg.duo img:first-of-type{width:62%}
.clipimg.duo img:nth-of-type(2){width:38%}

/* 3D accents */

/* partners venue cards with photo */
.card.ph{padding-top:0;overflow:hidden}
.card.ph figure{margin:0 -32px 24px;aspect-ratio:16/9;overflow:hidden}
.card.ph figure img{width:100%;height:100%;object-fit:cover}

@media (max-width:820px){
  .mags{grid-template-columns:1fr;gap:28px}
  .clipimg.duo img:first-of-type{width:100%}
  .clipimg.duo img:nth-of-type(2){display:none}
  .card.ph figure{margin:0 -22px 20px}
}

/* v10.1: equal FV buttons, field list, calmer photos (message first) */
.fv__cta .pill{width:380px;min-width:0}
.mag figure{aspect-ratio:16/9}
.mag h3{font-size:clamp(20px,1.8vw,25px);margin-top:16px}
.mag p{font-size:16px}
@media (max-width:820px){
  .fv__cta .pill{width:100%}
  .mag figure{aspect-ratio:2/1}
}

/* v10.3: keep the clearer theme photo from v10.2 */

/* ===================================================================
   v11 (2026-10-01): one-screen theme band + vertical tanzaku judges
   =================================================================== */

/* judges: tanzaku */
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.jhead__r{max-width:30em}
.jhead__r .lead{margin-top:0}
.tzs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(40px,4vw,56px);align-items:start}
.tz__card{position:relative;height:clamp(230px,22vw,300px);background:#fff;border-radius:6px;display:flex;justify-content:center;padding-top:34px;box-shadow:0 26px 40px -30px color-mix(in srgb,var(--ink) 45%,transparent);overflow:hidden;transition:transform .5s var(--ease)}
.tz__card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3))}
.tz__card::after{content:"";position:absolute;top:16px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--pale);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
.tz:hover .tz__card{transform:translateY(-6px)}
.tz__nm{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--f-head);font-weight:900;font-size:clamp(20px,2vw,28px);letter-spacing:.28em;color:var(--ink);white-space:nowrap}
.tz__meta{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.tz__meta b{display:block;font-size:12px;font-weight:700;color:var(--c1);margin-bottom:2px}
.tz.soon .tz__card{background:rgba(255,255,255,.5);border:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);box-shadow:none}
.tz.soon .tz__card::before{display:none}
.tz.soon .tz__nm{font-size:clamp(15px,1.3vw,18px);font-weight:700;color:var(--ink-3);letter-spacing:.4em}
.tz.soon .tz__meta{color:var(--ink-3)}
@media (max-width:1100px){.tzs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){
  .jhead{display:block}
  .jhead__r{margin-top:14px}
  .tzs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:32px calc(var(--gut)*-1) 0;padding:0 var(--gut) 12px;scrollbar-width:none}
  .tzs::-webkit-scrollbar{display:none}
  .tz{flex:0 0 118px;scroll-snap-align:start}
  .tz__card{height:220px}
}

.tz__nm .sp{display:inline-block;height:.35em}
@media (max-width:820px){
  .tzs{scroll-padding-left:var(--gut)}
}

/* ===================================================================
   v12 (2026-10-02): 東京の一日（テーマ固定写真＋1行ずつ灯る／条件・得られるもの／流れの写真／審査シート／本選の一日・会場写真／審査員の短冊）
   =================================================================== */
/* --- final.css --- */
/* ===== 第3弾 試作（本番に移すときは styles.css 末尾へ） ===== */

/* ---------- テーマ：交差点の写真を固定、ガラス板も写真と一緒に固定、1行ずつ灯る ---------- */
.v12t{position:relative;clip-path:inset(0);color:#fff;padding:26vh 0 30vh}
.v12t .bgfix{position:fixed;inset:0;background:url(/hiroshimahackathon/img/t1-tokyo-1600.webp) center/cover;overflow:hidden}
.v12t .bgfix::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 86%,transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 62%,transparent) 50%,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 40%,transparent) 100%)}
.v12t .glass{position:absolute;top:-10%;height:130%;transform:skewX(-16deg);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 60%,rgba(255,255,255,.1));border-left:1px solid rgba(255,255,255,.4)}
.v12t .g1{left:60%;width:16%}.v12t .g2{left:86%;width:9%;opacity:.7}.v12t .g3{left:6%;width:5%;opacity:.45}
.v12t > .wrap{position:relative;z-index:1}
.v12t .lab .jp{color:rgba(255,255,255,.75)}.v12t .lab::before{background:#fff}
.v12t .catch{margin-top:24px;font-size:clamp(32px,4.2vw,60px);font-weight:900;line-height:1.4;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.v12t .catch .c{background:linear-gradient(90deg,var(--c1-light),color-mix(in srgb,var(--c3) 45%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.v12t .st{margin-top:20vh}.v12t .st+.st{margin-top:15vh}
.v12t .st p{margin:0;font-family:"Zen Kurenaido",var(--f-jp);font-size:clamp(23px,2.4vw,34px);line-height:1.9;letter-spacing:.06em;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.45);transition:opacity .25s}
html[data-tf="k"] .v12t .st p{font-family:"Klee One",var(--f-jp);font-weight:600;font-size:clamp(22px,2.2vw,31px)}
html[data-th="h"] .v12t .catch{font-family:"Zen Kurenaido",var(--f-jp);font-weight:400;font-size:clamp(36px,4.6vw,66px)}
html[data-th="h"][data-tf="k"] .v12t .catch{font-family:"Klee One",var(--f-jp);font-weight:600}
.v12t .end{margin-top:17vh}
.v12t .end .hand{color:#fff;font-size:20px}
.v12t .gl{display:block;width:72px;height:3px;border-radius:3px;margin-top:14px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3))}

/* ---------- 得られるもの：B-2 夕暮れの空 ---------- */

/* ---------- 流れ：波はそのまま、背景だけ切り替え ---------- */
.v12f{position:relative}
.v12f > .wrap,.v12f > .brush{position:relative;z-index:1}
.v12f .fbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.v12f .fbg .streak{position:absolute;top:-10%;height:120%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);display:none}
.v12f .fbg .city{position:absolute;left:0;right:0;bottom:0;height:60%;display:none;background:url(/hiroshimahackathon/img/fl-tower-day.webp) center 70%/cover;opacity:.22;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%);filter:saturate(.6)}
/* 夕暮れの空（得られるものの空を受け継ぐ） */
/* 夜の東京 */
/* 街のシルエット */

/* ---------- 審査：全幅の紺の帯（斜め切り）＋読みやすさ ---------- */
/* 白い板 */
/* 大きな文字 */

/* ---------- 審査員：明るい淡い青＋名前の書体 ---------- */
.v12j{position:relative;overflow:hidden;padding:clamp(130px,12vw,170px) 0}
.v12j .jbg{position:absolute;inset:0;background:var(--pale) repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--c1) 6%,transparent) 47px 48px);clip-path:polygon(0 6%,100% 0,100% 94%,0 100%)}
.v12j .jbg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 8%,transparent),transparent 40%,color-mix(in srgb,var(--c3) 8%,transparent))}
.v12j > .wrap{position:relative;z-index:1}
html[data-jn="m"] .v12j .tz:not(.soon) .tz__nm{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(22px,2.1vw,30px)}

/* ---------- 賞：全幅の帯＋写真を横並び ---------- */
.v12p{padding:clamp(40px,4vw,60px) 0}
.v12p .plate{position:relative;color:#fff;clip-path:polygon(0 6%,100% 0,100% 94%,0 100%);padding:clamp(110px,10vw,150px) 0;text-align:center;background:linear-gradient(110deg,var(--ink) 0%,color-mix(in srgb,var(--c1) 29%,var(--deep)) 40%,var(--c1) 60%,var(--c2) 80%,var(--c3) 100%)}
.v12p .lab{justify-content:center}.v12p .lab .jp{color:rgba(255,255,255,.75)}.v12p .lab::before{background:#fff}
.v12p .big{font-size:clamp(28px,3.2vw,46px);font-weight:900;line-height:1.45;margin-top:20px;color:#fff}
.v12p .big .hl{display:block;font-family:var(--f-hand);font-weight:400;color:color-mix(in srgb,var(--c3) 29%,#fff);font-size:.8em;margin-top:10px;transform:rotate(-2deg)}
.v12p .txt{margin:26px auto 0;font-size:15px;line-height:2;color:rgba(255,255,255,.86);max-width:none}
.v12p .row2{display:flex;gap:18px;justify-content:center;margin-top:48px}
.v12p .row2 figure{position:relative;margin:0;width:min(44%,520px);aspect-ratio:16/10;overflow:hidden;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.v12p .row2 img{width:100%;height:100%;object-fit:cover}
.v12p .row2 figcaption{position:absolute;left:12%;bottom:10px;font-family:var(--f-hand);font-size:15px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ---------- 開催概要：左に写真＋手書き ---------- */
.outline .opic{margin:34px 0 0;width:min(100%,360px);aspect-ratio:4/3;overflow:hidden;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.outline .opic img{width:100%;height:100%;object-fit:cover}
.outline .sticky .hand{margin-top:16px;font-size:20px}

/* ---------- 切り替えパネル（試作専用） ---------- */

@media (max-width:820px){
  .v12t{padding:18vh 0 22vh}.v12t .st p{font-size:17px;letter-spacing:.02em}.v12t .g3{display:none}
  .v12p .row2{flex-direction:column;align-items:center}.v12p .row2 figure{width:100%}
}

/* --- final4.css --- */
/* ===== 第4弾：引き算＋境目の統一 ===== */
:root{--cut:4vw}
@media (max-width:820px){:root{--cut:6vw}}

/* 境目：色の面は上下とも同じ角度の斜め（左下がり→右上がりで平行） */
.v12t,.v12f,.v12q,.v12k .kband,.v12j .jbg,.v12p .plate{clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%)}
.v12t{padding:calc(var(--cut) + 24vh) 0 calc(var(--cut) + 28vh)}
.v12f,.v12q{margin-top:0;padding-top:calc(var(--cut) + clamp(80px,9vw,130px));padding-bottom:calc(var(--cut) + clamp(70px,7vw,110px))}
.day .clipimg{clip-path:polygon(7% 0,100% 0,100% calc(100% - var(--cut)),0 100%)}

/* 得られるもの：白地で静かに */

/* 流れ：淡い青＋下端に街並み（2案） */
.v12f{background:var(--pale)}
.v12f .fbg .streak,.v12f .fbg .city{display:none!important}
.v12f .fbg .duo,.v12f .fbg .sky{display:none;position:absolute;left:0;right:0;bottom:0}
.v12f .fbg .duo{height:38%;bottom:calc(var(--cut) * .4);background:url(/hiroshimahackathon/img/fl-tower-day.webp) center 80%/cover;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;opacity:.07;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%);mask-image:linear-gradient(180deg,transparent 0%,#000 60%)}
.v12f .fbg .sky{width:100%;height:clamp(110px,12vw,170px);bottom:calc(var(--cut) * .5)}

/* 審査：紺の単色で締める */

/* よくある不安：淡い青の帯（斜めの面の装飾は外す） */
.v12q{background:var(--pale)}
.v12q .deco{display:none}


/* --- final5.css --- */
/* ===== 第5弾 ===== */
/* 切り替え：選ばれていない案は隠す */
html:not([data-kv="1"]) .kx1,html:not([data-kv="2"]) .kx2,html:not([data-kv="3"]) .kx3{display:none}

/* ---------- 条件＋得られるもの 共通 ---------- */
/* 小さめの写真カード */

/* A-1 左右に分ける */

/* A-2 白→淡い帯 */

/* A-3 チェックリスト */

/* ---------- 流れの背景（3案） ---------- */

/* ---------- 審査（白地・色は控えめ） ---------- */
.kx{background:#fff}
.kx .lead{margin-top:16px}
/* 1 問いの一覧 */
/* 2 審査シート */
.kx2 .paper{position:relative;max-width:960px;margin:40px auto 0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(28px,3.4vw,44px) clamp(24px,4vw,56px) clamp(40px,4vw,56px);box-shadow:0 40px 70px -50px color-mix(in srgb,var(--ink) 50%,transparent)}
.kx2 .ph2{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:3px double var(--ink)}
.kx2 .ph2 b{font-size:20px;font-weight:900;letter-spacing:.2em}
.kx2 .ph2 span{font-size:13px;color:var(--ink-3)}
.kx2 .pr{display:grid;grid-template-columns:200px minmax(0,1fr) 170px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px dashed var(--line)}
.kx2 .pk2 .no{display:block;font-family:var(--f-en);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--c3)}
.kx2 .pk2 b{font-size:22px;font-weight:900}
.kx2 .pr p{font-size:15px;line-height:1.85;color:var(--ink-2)}
.kx2 .dots{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.kx2 .dots i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--c1)}
.kx2 .dots em{font-style:normal;font-family:var(--f-en);font-weight:700;font-size:12px;color:var(--ink-3);margin-left:6px}
/* 3 左右2列（説明＋配点｜観点の一覧＋審査の流れ） */

@media (max-width:820px){
  .kx2 .pr{grid-template-columns:1fr;gap:8px}.kx2 .dots{justify-content:flex-start}
}

/* --- final6.css --- */
/* ===== 第6弾 共通 ===== */
.c6crit,.c6split{display:block!important}

/* 橋渡しの一文（手書き） */
.bridge6{text-align:center;margin-top:clamp(56px,6vw,80px)}
.bridge6 span{font-family:"Klee One",var(--f-hand);font-weight:600;font-size:clamp(20px,1.9vw,26px);color:var(--c1);display:inline-block;transform:rotate(-3deg);padding-bottom:10px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3)) left bottom/100% 3px no-repeat}
.c6cond,.c6ink{padding-bottom:clamp(40px,4vw,60px)}

/* 得られるもの（段差の写真） */
.c6gain{padding-top:clamp(30px,3vw,50px)}
.c6gain .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,96px);margin-top:44px}
.c6gain .col:nth-child(2){padding-top:160px}
.c6gain .gi{margin-bottom:56px}
.c6gain .gi figure{position:relative;aspect-ratio:16/9;margin:0 0 22px}
.c6gain .gi figure::after{content:"";position:absolute;inset:0;transform:translate(16px,16px);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);background:color-mix(in srgb,var(--sky) 28%,#fff);z-index:0}
.c6gain .gi .ph{position:absolute;inset:0;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);overflow:hidden;z-index:1}
.c6gain .gi .ph img{width:100%;height:100%;object-fit:cover}
.c6gain .cap{position:absolute;z-index:2;right:10%;bottom:-12px;font-family:"Klee One",var(--f-hand);font-weight:600;font-size:14px;color:var(--c1);background:#fff;border:1px solid var(--line);padding:3px 10px;transform:rotate(-3deg)}
.c6gain .gi .tx{padding-left:6%}
.c6gain .gi .n{font-family:var(--f-en);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--c3)}
.c6gain .gi h3{font-size:clamp(19px,1.7vw,23px);font-weight:900;line-height:1.5;margin-top:6px}
.c6gain .gi p{font-size:15px;line-height:1.9;color:var(--ink-2);margin-top:10px}
.c6gain .tg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:12px;font-weight:700;color:var(--c1)}
.c6gain .tg span::before{display:none}

/* 審査シート：比率の棒 */
.c6crit .ratio{margin-top:26px;padding-top:20px;border-top:3px double var(--ink)}
.c6crit .rl{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2)}
.c6crit .rl b{color:var(--ink);font-weight:900}.c6crit .rl b.pk{color:var(--c3)}
.c6crit .rbar{display:flex;height:16px;border-radius:99px;overflow:hidden;margin-top:12px;background:color-mix(in srgb,var(--c1) 8%,transparent)}
.c6crit .rbar .a{flex:3;background:linear-gradient(90deg,var(--c1-bright),var(--c1))}
.c6crit .rbar .b{flex:1;background:var(--c3)}
.c6crit .paper{padding-bottom:clamp(28px,3vw,40px)}

@media (max-width:820px){
  .c6gain .cols{grid-template-columns:1fr}.c6gain .col:nth-child(2){padding-top:0}
}

/* 余白の整理：同じ背景が続く所は詰める */
.v12f{padding-bottom:calc(var(--cut) + clamp(30px,3vw,50px))!important}
.c6crit{padding-top:clamp(56px,5vw,80px)}
html[data-dir="a"] .v12j{padding-top:clamp(50px,5vw,80px)}
html[data-dir="a"] .day,html[data-dir="b"] .day{padding-bottom:clamp(50px,5vw,80px)}

/* --- final6a.css --- */
/* ===== 案A「東京の一日」：条件〜審査員を、ひと続きの空の色でつなぐ（朝→昼→夕） ===== */
.skyrun{position:relative;z-index:0;margin-top:calc(var(--cut) * -1);padding-top:var(--cut);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 26%,#fff) 0%,color-mix(in srgb,var(--sky) 20%,#fff) 14%,color-mix(in srgb,var(--c2) 8%,#fff) 26%,color-mix(in srgb,var(--c2) 11%,#fff) 40%,color-mix(in srgb,var(--c2) 13%,#fff) 52%,color-mix(in srgb,var(--c3) 12%,#fff) 66%,color-mix(in srgb,var(--c3) 11%,#fff) 76%,color-mix(in srgb,var(--c1) 11%,#fff) 90%,color-mix(in srgb,var(--c1) 15%,#fff) 100%)}
.v12t{z-index:2}
.skyrun .sec,.skyrun .c6gain{background:transparent!important}
.skyrun .mag{background:rgba(255,255,255,.75)}
/* 流れ：夕方の空と街の写真。上下は空の色に溶ける */
.skyrun .v12f{background:transparent!important;clip-path:none!important;margin:0}
.skyrun .v12f .fbg{display:none}
.skyrun .v12f::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--c2) 11%,#fff) 90%,transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--c2) 11%,#fff) 35%,transparent) 32%,color-mix(in srgb,color-mix(in srgb,var(--c2) 11%,#fff) 0%,transparent) 55%),url(/hiroshimahackathon/img/px_31416365.webp) center 42%/cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%)}
.skyrun .v12f .brush .line{filter:drop-shadow(0 0 8px rgba(255,255,255,.7))}
/* 審査員：帯をやめて空の色のまま */
.skyrun .v12j .jbg{display:none}
/* 賞：上半分は空の終わりの色、下は白 */
.v12p{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 15%,#fff) 0 50%,#fff 50%)}

/* --- final7.css --- */
/* ===== 第7弾：案Aを土台に、背景を切り替え ===== */
/* 境目：テーマ・FV・条件は真横に */
.v12t{clip-path:inset(0)!important;padding:24vh 0 28vh!important}
.skyrun{margin-top:0!important;padding-top:0!important}
/* 得られるもの〜流れの間を詰める */
.c6gain{padding-bottom:10px!important}
.c6gain .gi:last-child{margin-bottom:20px}
.skyrun .v12f{padding-top:clamp(50px,5vw,80px)!important}

/* 区画の土台 */
.bg1,.bg2{position:relative}
.bg1 > .pat,.bg2 > .pat{position:absolute;inset:0;z-index:0;pointer-events:none}
.bg1 > section,.bg2 > section,.bg1 > div,.bg2 > div{position:relative;z-index:1}
.skyrun .v12f{background:linear-gradient(180deg,var(--e1,color-mix(in srgb,var(--c2) 11%,#fff)),var(--e2,color-mix(in srgb,var(--c2) 13%,#fff)))!important}

/* ---------- 区画1：条件＋得られるもの ---------- */

/* ---------- 区画2：審査〜審査員 ---------- */
.v12p{background:linear-gradient(180deg,var(--e3,color-mix(in srgb,var(--c1) 15%,#fff)) 0 50%,#fff 50%)!important}

/* ---------- 本選の一日：背景画像（上の写真2枚はそのまま） ---------- */
.skyrun .day{clip-path:inset(0)}
.dayfix{display:none;position:fixed;inset:0;z-index:0;background-size:cover;background-position:center}
.day > *:not(.dayfix){position:relative;z-index:1}
html[data-d="dark"] .dayfix{display:block;background-image:linear-gradient(90deg,color-mix(in srgb,var(--navy) 90%,transparent),color-mix(in srgb,var(--navy) 72%,transparent) 50%,color-mix(in srgb,var(--navy) 60%,transparent)),url(/hiroshimahackathon/img/hiroshima-group-2x.jpg)}
html[data-d="dark"] .day .wrap .h2,html[data-d="dark"] .day .wrap .lab .jp,html[data-d="dusk"] .day .wrap .h2,html[data-d="dusk"] .day .wrap .lab .jp{color:#fff}
html[data-d="dark"] .day .wrap .lab::before,html[data-d="dusk"] .day .wrap .lab::before{background:#fff}
html[data-d="dark"] .day .meta,html[data-d="dusk"] .day .meta{color:color-mix(in srgb,var(--sky) 53%,#fff)}
html[data-d="dark"] .day .meta small,html[data-d="dusk"] .day .meta small{color:rgba(255,255,255,.82)}
html[data-d="dark"] .day .tt,html[data-d="dusk"] .day .tt,html[data-d="light"] .day .tt{background:#fff;border-radius:10px;padding:6px 22px;box-shadow:0 40px 70px -40px rgba(0,0,0,.5)}
html:not([data-d="none"]) .day .tt .r:first-child{border-top:0}
html:not([data-d="none"]) .day .tt .r:last-child{border-bottom:0}
html:not([data-d="none"]) .skyrun .day{padding-bottom:clamp(80px,8vw,120px)!important}
html:not([data-d="none"]) .skyrun .v12j{padding-top:clamp(90px,8vw,120px)!important}

/* 切り替えパネル（試作専用） */
/* スマホ：テーマの手書き文の改行を整える */
.br-sp{display:none}
@media (max-width:820px){
  .br-sp{display:inline}
  .v12t .st p{font-size:clamp(14.5px,4vw,16px)!important;letter-spacing:.02em!important;line-height:2}
  .v12t .catch{font-size:clamp(28px,8vw,34px)!important}
}
@media (max-width:820px){.v12t .end .hand{font-size:14.5px!important;white-space:nowrap}}

/* --- final9.css --- */
/* ===== 第9弾：本選の一日も含めた全体の組み合わせ ===== */
.skyrun,.bg1,.bg2{background:#fff!important}
.bg1 > .pat,.bg2 > .pat{display:none}
/* 各セクションの背景 */
.skyrun section[data-bg="w"]{background:#fff!important}
.skyrun section[data-bg="g"]{background:color-mix(in srgb,var(--c1) 6%,#fff)!important}
.skyrun section[data-bg="p"],.skyrun section[data-bg="np"]{background:color-mix(in srgb,var(--ink) 68%,#000)!important}
/* 同じ背景が続く所の区切り：1pxの線 */
.skyrun section[data-bg="w"] + section[data-bg="w"],.skyrun section[data-bg="g"] + section[data-bg="g"]{border-top:1px solid color-mix(in srgb,var(--c1) 15%,#fff)}
/* 本選の一日：会場写真・紺寄せ */
/* 本選の一日：暗い背景（濃紺・写真）では表を白い板に */
#day.dk .tt{background:#fff;border-radius:10px;padding:6px 22px;box-shadow:0 40px 70px -40px rgba(0,0,0,.5)}
#day.dk .tt .r:first-child{border-top:0}#day.dk .tt .r:last-child{border-bottom:0}
#day.dk .wrap .h2,#day.dk .wrap .lab .jp{color:#fff}#day.dk .wrap .lab::before{background:#fff}
#day.dk .meta{color:color-mix(in srgb,var(--sky) 53%,#fff)}#day.dk .meta small{color:rgba(255,255,255,.82)}
.skyrun #day{padding-bottom:clamp(80px,8vw,120px)!important}
.skyrun .v12j{padding-top:clamp(90px,8vw,120px)!important}
/* 暗い背景の文字 */
.dk .h2,.dk h3,.dk .lab .jp{color:#fff}
.dk .lab::before{background:#fff}
/* 罫線（セット3） */
.mag{border:1px solid color-mix(in srgb,var(--c1) 15%,#fff);border-radius:4px;background:#fff}
/* 賞の帯の上：審査員の背景色を受け継ぐ */
.v12p{background:linear-gradient(180deg,var(--e3,#fff) 0 50%,#fff 50%)!important}
/* パネル */

/* 本選の一日の表：横線だけ・上端を太い罫線で締める・強調行は淡い青の帯＋左の青いバー（Supabase・Vercel・AI Engineer・Devsumi 参考） */
.skyrun #day .tt{border-top:2px solid color-mix(in srgb,var(--c1) 44%,#000)}
.skyrun #day .tt .r{border-top:1px solid color-mix(in srgb,var(--c1) 14%,#fff);padding-top:16px;padding-bottom:16px}
.skyrun #day .tt .r:first-child{border-top:0}
.skyrun #day .tt .t{font-family:var(--f-en);font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink-3) 73%,#000)}
.skyrun #day .tt .r:not(.hi) .w{color:color-mix(in srgb,var(--sky) 36%,#000)}
.skyrun #day .tt .r.hi{background:color-mix(in srgb,var(--sky) 23%,#fff);box-shadow:inset 3px 0 0 var(--c1)}
.skyrun #day .tt .r.hi .w,.skyrun #day .tt .r.hi .t{color:var(--c1)}
.skyrun #day .tt .r.hi .m{color:var(--c1)}
.skyrun #day .tags span{border:1px solid color-mix(in srgb,var(--c1) 28%,#fff);background:transparent}
#day.dk .tags span{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}
#day.dk .tags span b{color:color-mix(in srgb,var(--sky) 53%,#fff)}
/* 明るいグレーの一日：表は白い面 */

/* --- 本番の仕上げ --- */
/* 得られるものは白（条件と続くので1pxの線で区切る） */
.skyrun section.c6gain[data-bg="w"]{border-top:1px solid color-mix(in srgb,var(--c1) 15%,#fff)}
/* 条件のカード：文字が枠に近すぎないよう内側に余白 */
.c6cond .mag{padding-bottom:26px}
.c6cond .mag figure{border-radius:4px 4px 0 0}
.c6cond .mag h3,.c6cond .mag p{padding:0 22px}


.c6crit .note6{margin-top:10px;font-size:13px;color:var(--ink-3)}

/* ===================================================================
   v12.1 (2026-10-02): 余白・本選の表の読みやすさ・審査員版の調整
   =================================================================== */
/* 得られるもの〜流れの間を少しだけ広げる */
.skyrun .v12f{padding-top:clamp(104px,9vw,134px)!important}
/* 本選の一日の表：色を絞り、文字の強弱を整理 */
.skyrun #day .tt .r{padding-top:18px;padding-bottom:18px;border-top-color:color-mix(in srgb,var(--c1) 12%,#fff)}
.skyrun #day .tt .t{font-size:12.5px;letter-spacing:.08em;color:color-mix(in srgb,var(--ink-2) 55%,#fff)!important;font-weight:700}
.skyrun #day .tt .w{color:var(--ink)!important;font-weight:700;font-size:16.5px;line-height:1.5}
.skyrun #day .tt .w small{color:color-mix(in srgb,var(--ink-3) 73%,#000);font-size:13.5px;font-weight:400;line-height:1.7;margin-top:4px}
.skyrun #day .tt .w .tm{font-family:var(--f-en);font-style:normal;font-size:12.5px;font-weight:700;color:color-mix(in srgb,var(--ink-3) 73%,#000);background:color-mix(in srgb,var(--c1) 9%,#fff);border-radius:4px;padding:2px 7px;margin-left:10px;vertical-align:2px}
.skyrun #day .tt .m{color:color-mix(in srgb,var(--ink-3) 73%,#000)!important;font-family:var(--f-en);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.skyrun #day .tt .r.hi{background:color-mix(in srgb,var(--sky) 15%,#fff);box-shadow:inset 3px 0 0 var(--c1)}
.skyrun #day .tt .r.hi .t,.skyrun #day .tt .r.hi .m{color:var(--c1)!important}
/* 審査員版：縦書きの「6」を中央に */
.tate .tcy{letter-spacing:0;display:inline-block;margin-bottom:.16em}
/* 審査員版「この会について」：前の配置のまま、背景に暗い交差点の写真を固定 */

/* 審査員版「この会について」v12.2：上にリード＋写真、下に要点を4列で（詰め込みをやめて余白を確保） */
/* v12.2 調整：要点は2列×2段で広く、写真の説明は右下に */

/* ===================================================================
   v12.3 (2026-10-05): 審査員版「この会について」手書き・ベタ打ち2×2／本選の一日：背景スポットライト・上の写真2枚を白黒
   =================================================================== */
.ab13{position:relative;clip-path:inset(0);color:#fff;padding:clamp(110px,10vw,150px) 0;background:color-mix(in srgb,var(--ink) 68%,#000)}
.ab13 .bgfix{position:fixed;inset:0;background:url(/hiroshimahackathon/img/t1-tokyo-1600.webp) center/cover}
.ab13 .bgfix::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 86%,transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 62%,transparent) 50%,color-mix(in srgb,color-mix(in srgb,var(--navy) 78%,#000) 40%,transparent) 100%)}
.ab13 > .wrap{position:relative;z-index:1}
.ab13 .lab .jp{color:rgba(255,255,255,.75)}.ab13 .lab::before{background:#fff}
.ab13 .ablead{margin-top:34px;max-width:none;font-family:"Klee One",var(--f-jp);font-weight:600;font-size:clamp(30px,3.3vw,48px);line-height:1.8;letter-spacing:.05em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.ab13 .ablead{transform:rotate(-2.5deg);transform-origin:left bottom}
.ab13 .ablead span{display:inline;padding:0 .04em .06em;background:linear-gradient(90deg,var(--c1-light),color-mix(in srgb,var(--c3) 45%,#fff)) left 94%/100% .12em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ab13 .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 80px;margin-top:84px;max-width:1120px}
.ab13 .i .k{display:block;font-family:"Klee One",var(--f-jp);font-size:16.5px;font-weight:600;letter-spacing:.1em;color:color-mix(in srgb,var(--sky) 80%,#fff);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ab13 .i b{display:block;margin-top:8px;font-family:"Klee One",var(--f-jp);font-weight:600;font-size:29px;line-height:1.5;letter-spacing:.04em;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.ab13 .i p{margin:10px 0 0;max-width:none;font-family:"Klee One",var(--f-jp);font-weight:600;font-size:17.5px;line-height:1.95;letter-spacing:.03em;color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.6)}
@media (max-width:820px){
  .ab13{padding:88px 0}
  .ab13 .ablead{font-size:clamp(21px,5.8vw,25px);line-height:1.85;margin-top:26px;transform:rotate(-2deg)}
  .ab13 .ablead br{display:none}
  .ab13 .grid{grid-template-columns:1fr;gap:40px;margin-top:56px}
  .ab13 .i b{font-size:23px}.ab13 .i p{font-size:16px}.ab13 .i .k{font-size:15px}
}
/* 本選の一日：背景はマイクとスポットライト（両ページ） */
html[data-d="dark"] .dayfix{background-image:linear-gradient(90deg,color-mix(in srgb,var(--navy) 90%,transparent),color-mix(in srgb,var(--navy) 72%,transparent) 50%,color-mix(in srgb,var(--navy) 60%,transparent)),url(/hiroshimahackathon/img/px_2101487.webp);background-position:70% center}
/* 上の写真2枚は白黒でそろえる */
.clipimg.duo.mono img{filter:grayscale(1) contrast(1.05)}
.clipimg.duo.mono img:nth-child(2){object-position:center 30%}

/* ===== event-lp kit additions ===== */
/* 4枚のカード（領域の例など）：<div class="mags four"> */
.mags.four{grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.mags.four .mag h3{font-size:clamp(18px,1.4vw,21px)}
.mags.four .mag p{font-size:14px}
@media (max-width:820px){.mags.four{grid-template-columns:1fr 1fr;gap:16px}.mags.four .mag figure{aspect-ratio:4/3}.c6cond .mags.four .mag h3,.c6cond .mags.four .mag p{padding:0 14px}}
/* 長いイベント名のロゴ：スマホでは2行まで折り返し、ボタンを押し出さない */
@media (max-width:600px){.hdr .logo{white-space:normal;line-height:1.35;font-size:10px;letter-spacing:.08em;max-width:58vw}}