:root{ /* 投影資料と同じ配色。黄色 FFE100 を効かせ、文字と面は紺 1F3864 で締める。 */ --paper:#FFFFFF; --paper-2:#F2F5F9; /* カード・表ヘッダーの地色 */ --paper-3:#DCE4F5; --ink:#1F3864; /* 見出し・本文の基調 */ --ink-soft:#4A4A4A; --ink-faint:#8A93A5; --rule:#D4DCE8; --shu:#1F3864; /* 旧アクセント（赤）。資料に赤が無いため紺に統一 */ --indigo:#455D95; --ok:#455D95; --yellow:#FFE100; /* 帯・波形 */ --yellow-2:#FFD400; /* 枠線 */ --tint-y:#FFF6D6; /* 注意喚起の地色 */ --alert:#C0392B; /* 入力エラーのみ。ブランド色ではなく機能色 */ --maxw:960px; /* 投影資料と同じ BIZ UDPゴシックで統一。Windows 10 1809 以降・Windows 11 は標準同梱、 それ以外の環境には Google Fonts（各HTMLの で読み込み）が配信される。 "BIZ UDPGothic" は欧文の family 名、"BIZ UDPゴシック" は和文の family 名で、同じ書体。 */ --ud:"BIZ UDPGothic","BIZ UDPゴシック","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,"Helvetica Neue",Arial,sans-serif; --display:var(--ud); --body:var(--ud); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.9; font-feature-settings:"palt" 1; } img{max-width:100%;display:block} a{color:var(--indigo)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .narrow{max-width:720px} /* ---------- header ---------- */ .masthead{ border-bottom:3px solid var(--yellow); background:var(--paper); position:sticky;top:0;z-index:40; } .masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px} .brand{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-decoration:none;color:var(--ink)} .brand span{font-family:var(--body);font-size:11px;color:var(--ink-faint);display:block;line-height:1.4;letter-spacing:.08em} /* ---------- hero ---------- */ .hero{padding:64px 0 48px;border-bottom:1px solid var(--rule)} .kicker{ font-size:13px;color:var(--shu);letter-spacing:.06em;margin:0 0 20px; display:flex;align-items:center;gap:10px; } .kicker::before{content:"";width:26px;height:3px;background:var(--yellow-2);flex:none} h1{ font-family:var(--display);font-weight:600; font-size:clamp(27px,4.8vw,46px);line-height:1.42; margin:0 0 24px;letter-spacing:.01em; } .lede{font-size:17px;line-height:2;color:var(--ink-soft);margin:0 0 36px;max-width:34em} /* ---------- fiscal timeline (hero device) ---------- */ .axis{margin:44px 0 8px;position:relative} .axis-rule{height:1px;background:var(--rule);position:absolute;left:0;right:0;top:11px} .axis-nodes{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:8px} .node{padding-top:0;text-align:left} .node .dot{ width:9px;height:9px;border-radius:50%;background:var(--paper); border:1px solid var(--ink-faint);margin:7px 0 14px;position:relative;z-index:2; } .node.now .dot{background:var(--shu);border-color:var(--shu);width:11px;height:11px;margin-top:6px} .node .when{font-family:var(--display);font-size:15px;line-height:1.4;margin:0 0 3px} .node .what{font-size:12px;color:var(--ink-faint);line-height:1.6;margin:0} .node.now .when{color:var(--shu)} .node.now .what{color:var(--shu)} @media(max-width:620px){ .axis-nodes{grid-template-columns:1fr 1fr;gap:20px 12px} .axis-rule{display:none} } /* ---------- sections ---------- */ section{padding:60px 0;border-bottom:1px solid var(--rule);scroll-margin-top:70px} section:last-of-type{border-bottom:0} h2{ font-family:var(--display);font-weight:600; font-size:clamp(21px,3vw,29px);line-height:1.55;margin:0 0 26px; } h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.6;margin:34px 0 12px} p{margin:0 0 20px;max-width:38em} .small{font-size:13px;line-height:1.85;color:var(--ink-faint)} /* ---------- 3階建て ---------- */ .storeys{border:1px solid var(--rule);background:#fff;margin:8px 0 26px} .storey{padding:20px 22px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:76px 1fr;gap:20px} .storey:last-child{border-bottom:0} .storey .floor{font-family:var(--display);font-size:14px;color:var(--ink-faint);line-height:1.5} .storey .floor b{display:block;font-size:23px;color:var(--ink);font-weight:600} .storey h4{margin:0 0 6px;font-size:16px;font-family:var(--display);font-weight:600} .storey p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink-soft)} .storey .amt{font-size:12.5px;color:var(--ink-faint);margin-top:6px} @media(max-width:560px){.storey{grid-template-columns:1fr;gap:8px}.storey .floor b{display:inline;margin-right:8px}} /* ---------- rank ---------- */ .rank{display:inline-block;font-size:11px;line-height:1;padding:4px 7px;border:1px solid;margin-right:8px;vertical-align:1px} .rank.a{color:var(--ok);border-color:var(--ok)} .rank.b{color:var(--indigo);border-color:var(--indigo)} .rank.c{color:var(--shu);border-color:var(--shu)} /* ---------- list ---------- */ ol.steps{counter-reset:s;list-style:none;padding:0;margin:0} ol.steps li{ counter-increment:s;position:relative;padding:0 0 16px 44px;margin:0 0 16px; border-bottom:1px solid var(--rule);font-size:15px;line-height:1.85; } ol.steps li:last-child{border-bottom:0} ol.steps li::before{ content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px; font-family:var(--display);font-size:14px;color:var(--ink-faint); } ul.plain{list-style:none;padding:0;margin:0 0 20px} ul.plain li{padding:0 0 10px 18px;position:relative;font-size:15px;line-height:1.85} ul.plain li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--ink-faint)} /* ---------- table ---------- */ table{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 22px;background:#fff} th,td{border:1px solid var(--rule);padding:11px 13px;text-align:left;vertical-align:top;line-height:1.7} th{background:var(--ink);color:#fff;font-weight:600;white-space:nowrap} /* ---------- CTA ---------- */ .cta-band{background:var(--ink);color:var(--paper);border-bottom:0} .cta-band h2{color:#fff} .cta-band p{color:#C9CEDA} .btn{ display:inline-block;background:var(--ink);color:#fff;text-decoration:none; font-size:16px;font-weight:600;padding:16px 34px;border:0;cursor:pointer; font-family:var(--body);letter-spacing:.02em; } .btn:hover{background:#2E4C85} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--indigo);outline-offset:2px } .btn[disabled]{background:var(--ink-faint);cursor:not-allowed} .btn-note{font-size:12.5px;color:var(--ink-faint);margin:12px 0 0} .cta-band .btn-note{color:#9AA3B5} .cta-band .btn{background:var(--yellow);color:var(--ink)} .cta-band .btn:hover{background:var(--yellow-2)} /* ---------- form ---------- */ .form{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--yellow);padding:30px;margin:6px 0 0} .field{margin:0 0 18px} .field label{display:block;font-size:13px;font-weight:600;margin:0 0 6px} .field .req{color:var(--alert);font-size:11px;margin-left:6px;font-weight:400} .field input,.field select,.field textarea{ width:100%;padding:11px 12px;border:1px solid var(--rule);background:var(--paper); font-family:var(--body);font-size:15px;color:var(--ink);border-radius:0; } /* チェックボックス／ラジオの行（.field label{display:block} の影響を受けないようにする） */ .field label.cb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;margin:0;line-height:1.5;cursor:pointer} .field label.cb input[type=checkbox], .field label.cb input[type=radio]{width:auto;flex:none;margin:0;padding:0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} @media(max-width:560px){.grid2{grid-template-columns:1fr}} /* slot picker */ .slotday{margin:0 0 14px} .slotday h5{margin:0 0 8px;font-size:13px;font-family:var(--display);font-weight:600;color:var(--ink-soft)} .slotrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} @media(max-width:560px){.slotrow{grid-template-columns:repeat(2,1fr)}} .slot{position:relative} .slot input{position:absolute;opacity:0;width:1px;height:1px} .slot span{ display:block;text-align:center;padding:11px 4px;border:1px solid var(--rule); background:var(--paper);font-size:14px;cursor:pointer;line-height:1.3; } .slot input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)} .slot input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px} .slot input:disabled + span{opacity:.35;cursor:not-allowed;text-decoration:line-through} .msg{padding:13px 15px;border:1px solid;font-size:14px;margin:0 0 18px;line-height:1.7} .msg.err{border-color:var(--alert);color:var(--alert);background:#FDF4F3} .msg.ok{border-color:var(--ok);color:var(--ok);background:var(--paper-2)} /* ---------- footer ---------- */ /* 投影資料のフッターと同じ波形。資料とサイトを見た目でつなぐ要素。 */ footer{ background:var(--paper-2);padding:40px 0 32px;font-size:12.5px; color:var(--ink-soft);line-height:1.9;position:relative; } footer::before{ content:"";display:block;position:absolute;left:0;right:0;top:-36px;height:38px; background:url("/assets/wave.png") no-repeat center bottom/100% 100%; pointer-events:none; } footer a{color:var(--ink)} footer p{max-width:none} .disclaimer{border:1px solid var(--yellow-2);background:var(--tint-y);padding:18px 20px;font-size:12.5px;line-height:1.85;color:var(--ink-soft);margin:0 0 24px} /* ---------- watch page ---------- */ .stage{background:#0C1120;min-height:100vh;display:flex;flex-direction:column} .stage-bar{ border-bottom:1px solid #223052;padding:0 20px;height:54px;display:flex; align-items:center;justify-content:space-between;color:#C9CEDA;font-size:13px;gap:16px;flex:none; } .stage-bar .live{display:flex;align-items:center;gap:7px;color:#fff;font-size:12px} .stage-bar .live i{width:7px;height:7px;border-radius:50%;background:var(--yellow);display:block} .stage-main{flex:1;display:flex;align-items:center;justify-content:center;padding:20px} .player{width:100%;max-width:1120px} .player video{width:100%;background:#000;display:block} .progress{height:3px;background:#223052;margin-top:0} .progress i{display:block;height:100%;background:var(--yellow);width:0} .waiting{text-align:center;color:#C9CEDA;max-width:520px;padding:40px 20px} .waiting h2{color:#fff;font-size:23px;margin:0 0 14px} .waiting p{color:#8F9AB4;margin:0 auto 18px;font-size:14.5px} .waiting .btn{background:var(--yellow);color:var(--ink)} .waiting .btn:hover{background:var(--yellow-2)} .count{font-family:var(--display);font-size:46px;color:#fff;letter-spacing:.04em;margin:22px 0} /* modal */ .modal{ position:fixed;inset:0;background:rgba(8,12,24,.86);z-index:100; display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:28px 16px; } .modal.open{display:flex} .modal-inner{background:var(--paper);max-width:640px;width:100%;padding:32px} .modal-inner h2{margin:0 0 8px} .modal-inner .small{margin:0 0 22px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- テーマ（2本立て）選択 ---------- */ .tracks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 10px} .trackcard{position:relative;display:block;cursor:pointer} .trackcard input{position:absolute;opacity:0;width:1px;height:1px} .trackcard .inner{ display:block;border:1px solid var(--rule);background:#fff;padding:24px 24px 22px;height:100%; transition:border-color .12s, box-shadow .12s; } .trackcard input:checked + .inner{border-color:var(--ink);border-width:2px;padding:23px 23px 21px;box-shadow:0 2px 0 var(--ink)} .trackcard input:focus-visible + .inner{outline:2px solid var(--indigo);outline-offset:2px} .trackcard .tag{ display:inline-block;font-size:11px;letter-spacing:.1em;padding:4px 8px;margin:0 0 12px; background:var(--ink);color:#fff;border:1px solid var(--ink); } .trackcard.t2 .tag{background:var(--yellow);border-color:var(--yellow-2);color:var(--ink)} .trackcard h3{font-size:20px;margin:0 0 8px;line-height:1.5} .trackcard .who{font-size:13px;color:var(--ink-faint);line-height:1.8;margin:0 0 14px} .trackcard ul.plain{margin:0 0 14px} .trackcard ul.plain li{font-size:13.5px;line-height:1.75;padding-bottom:6px} .trackcard .pick{ font-size:13px;font-weight:600;color:var(--ink-faint);border-top:1px solid var(--rule);padding-top:12px;margin:0; } .trackcard input:checked + .inner .pick{color:var(--ink)} .trackcard input:checked + .inner .pick::before{content:"✓ ";color:var(--ok)} .deadline{ border:1px solid var(--yellow-2);background:var(--tint-y);color:var(--ink); font-size:13px;line-height:1.7;padding:10px 12px;margin:0 0 14px; } .tpanel{scroll-margin-top:70px} .tpanel[hidden]{display:none} .pill{ display:inline-block;font-size:12px;padding:5px 10px;border:1px solid var(--rule); background:#fff;margin:0 6px 6px 0;color:var(--ink-soft); } @media (max-width:720px){ .tracks{grid-template-columns:1fr} }