@font-face { font-family:"Noto Sans JP"; src:url("../assets/fonts/NotoSansJP-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Noto Sans JP"; src:url("../assets/fonts/NotoSansJP-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
:root { --paper:#fff; --ink:#333; --red:#ff0000; --red-soft:#ffe5e5; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { min-height:100dvh; margin:0; display:grid; grid-template-rows:72px minmax(0,1fr) 64px; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; font-synthesis:none; line-break:strict; word-break:normal; overflow:hidden; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; top:-64px; left:16px; z-index:10; min-height:44px; padding:12px 16px; background:var(--ink); color:var(--paper); font-weight:700; }.skip-link:focus { top:16px; }
.site-header { min-height:72px; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid var(--red-soft); display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand { min-height:44px; display:grid; align-items:center; font-size:12px; font-weight:700; letter-spacing:.12em; }.site-header nav { display:flex; gap:24px; }.site-header nav a { min-height:44px; display:grid; align-items:center; color:var(--ink); font-size:12px; }.site-header nav a:hover { color:var(--red); }.site-header nav a:focus-visible,.entry:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
main { min-height:0; width:min(1040px,100%); margin:auto; padding:clamp(24px,5vh,56px) clamp(24px,5vw,80px); display:grid; align-items:center; }
.landing { width:100%; display:grid; gap:clamp(32px,6vh,64px); }.landing-intro { text-align:center; }.landing h1 { margin:0; font-size:clamp(32px,4.5vw,56px); font-weight:700; line-height:1.28; letter-spacing:-.045em; }.landing-intro p { margin:16px 0 0; color:var(--ink); font-size:16px; line-height:1.6; }
.entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.entry { position:relative; min-height:200px; padding:32px; border:1px solid var(--red-soft); border-radius:16px; display:flex; flex-direction:column; justify-content:space-between; background:var(--paper); transition:border-color .18s ease,background .18s ease,transform .18s ease; }.entry:hover { border-color:var(--red); background:var(--red-soft); transform:translateY(-2px); }.entry-label { color:var(--red); font-size:32px; font-weight:700; letter-spacing:.04em; }.entry-copy { margin-top:auto; padding-right:40px; font-size:16px; line-height:1.6; }.entry-arrow { position:absolute; right:32px; bottom:28px; color:var(--red); font-size:28px; line-height:1; }
footer { min-height:64px; padding:0 clamp(24px,5vw,80px); border-top:1px solid var(--red-soft); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; } footer a { color:var(--red); } footer a:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
@media (max-width:640px) { body { grid-template-rows:64px minmax(0,1fr) 48px; }.site-header { min-height:64px; padding:0 16px; gap:12px; }.site-header nav { gap:12px; }.site-header nav a { min-height:44px; font-size:10px; }.brand { font-size:10px; }.site-header nav a:nth-child(3) { display:none; } main { padding:20px 16px; }.landing { gap:32px; }.landing h1 { font-size:28px; line-height:1.35; }.landing-intro p { margin-top:12px; font-size:14px; }.entry-grid { gap:12px; }.entry { min-height:156px; padding:20px 16px; border-radius:12px; }.entry-label { font-size:24px; letter-spacing:.02em; }.entry-copy { padding-right:0; font-size:12px; line-height:1.55; }.entry-arrow { right:16px; bottom:18px; font-size:24px; } footer { min-height:48px; padding:0 16px; font-size:10px; } footer a { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; } }