:root { --ink:#172027; --muted:#68747b; --paper:#f5f6f2; --green:#b8d8b2; --deep:#263d45; --line:#d8ded8; --accent:#6b9970; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans JP',sans-serif; font-size:17px; line-height:1.9; }
.section-wrap { width:min(1120px,calc(100% - 80px)); margin:0 auto; }
.site-header { width:min(1120px,calc(100% - 80px)); height:88px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font:700 15px Inter,sans-serif; letter-spacing:.04em; text-decoration:none; } .brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; margin-right:8px; color:var(--paper); background:var(--deep); border-radius:50%; font-size:18px; }
nav { display:flex; gap:30px; } nav a { color:var(--muted); font-size:15px; text-decoration:none; } nav a:hover { color:var(--ink); }
.eyebrow { margin:0 0 16px; color:#66826a; font:700 12px Inter,sans-serif; letter-spacing:.18em; } h1,h2,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(40px,5vw,72px); line-height:1.22; letter-spacing:-.06em; font-weight:900; } h1 em { color:var(--accent); font-style:normal; } h2 { margin:0; font-size:clamp(30px,3.6vw,52px); line-height:1.45; letter-spacing:-.05em; font-weight:900; }
.hero { min-height:640px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; padding:64px 0 100px; } .hero-copy { max-width:520px; } .hero h1 { font-size:clamp(40px,4.4vw,62px); white-space:nowrap; } .lead { max-width:460px; margin-bottom:34px; color:var(--muted); font-size:18px; line-height:1.9; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .button { display:inline-flex; gap:28px; align-items:center; padding:14px 22px; color:#fff; background:var(--deep); border:1px solid var(--deep); border-radius:2px; font-size:15px; text-decoration:none; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:#385761; } .button-secondary { color:var(--deep); background:transparent; } .button-secondary:hover { color:#fff; background:var(--deep); }
.hero-visual { width:100%; margin:0; padding:12px; overflow:hidden; background:#fff; border-radius:3px; box-shadow:20px 24px 0 rgba(41,70,62,.08); } .hero-visual img { display:block; width:100%; height:auto; }
.content-section { display:block; padding:112px 0; border-top:1px solid var(--line); } .section-heading { margin-bottom:42px; } .body-copy { max-width:none; color:#4e5b5d; font-size:18px; } .body-copy > p { max-width:820px; margin-bottom:26px; }
.image-comparison { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:18px; margin:34px 0 18px; } figure { margin:0; } figure img { display:block; width:100%; height:auto; object-fit:contain; background:#dde8df; } figcaption { padding-top:10px; color:var(--ink); font-size:15px; } figcaption span { margin-right:8px; color:#719779; font:700 12px Inter,sans-serif; letter-spacing:.1em; } .caption-note { color:#7b8684; font-size:14px; }
.reference-gallery { display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:10px; margin:28px 0 34px; } .reference-gallery img { display:block; width:100%; height:auto; object-fit:contain; background:#dde8df; } .reference-gallery figcaption { text-align:center; } .problem-gallery { margin-bottom:0; } .problem-gallery figcaption { color:#edf4ec; } .single-figure { margin:30px 0; } .single-figure img { display:block; width:100%; height:auto; object-fit:contain; object-position:left center; background:#e7eee6; }
.model-section { display:block; padding:0 0 112px; } .model-list { max-width:850px; margin-top:34px; border-top:1px solid var(--line); } .model-item { display:grid; grid-template-columns:42px 1fr auto; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); } .model-item span,.model-item small { color:#719779; font:700 13px Inter,sans-serif; letter-spacing:.08em; } .model-item small { color:var(--muted); font-weight:400; }
.dark-section { color:#edf4ec; background:var(--deep); } .dark-content { border-top:0; } .dark-section .eyebrow { color:var(--green); } .dark-section .body-copy { color:#c6d4ca; } .question-mark { margin-top:22px; color:var(--green); font:900 110px Inter,sans-serif; line-height:1; opacity:.75; }
.idea-section { padding-bottom:122px; } .process-diagram { display:flex; align-items:center; gap:12px; margin:34px 0; } .process-node { flex:1; min-height:100px; display:grid; place-content:center; padding:14px; color:var(--ink); background:#e3eee0; border:1px solid #c5d7c2; text-align:center; font-size:17px; font-weight:700; line-height:1.45; } .process-node small { color:#719779; font:12px Inter,sans-serif; } .noise-node { background:#e5ece7; } .model-node { background:#cfe3c8; } .output-node { background:#a9c8a4; } .process-line { color:#719779; font:26px Inter,sans-serif; } .idea-subsection { max-width:980px; margin-top:64px; padding-top:48px; border-top:1px solid var(--line); } .idea-subsection h3 { margin:0 0 24px; color:var(--ink); font-size:clamp(26px,3vw,38px); line-height:1.4; } .idea-subsection > p { max-width:820px; margin-bottom:26px; }
.challenge-band { background:#dbe8d7; } .challenge-inner { display:block; padding:92px 0 100px; } .challenge-copy { max-width:820px; color:#4e5b5d; font-size:18px; } .challenge-gallery { margin:38px 0; } .challenge-gallery img { background:rgba(255,255,255,.65); }
.future-section { display:block; padding:112px 0; } .future-note { max-width:760px; margin:42px 0 0; color:#4e5b5d; font-size:19px; } .citation { margin-left:2px; color:var(--accent); font-size:.78em; font-weight:700; text-decoration:none; vertical-align:super; } .references-section { display:grid; grid-template-columns:28% 1fr; gap:8%; padding:96px 0 112px; border-top:1px solid var(--line); } .reference-list { margin:0; padding-left:28px; color:#4e5b5d; font-size:16px; } .reference-list li { padding:0 0 28px 10px; scroll-margin-top:32px; } .reference-list cite { font-style:italic; } .reference-list a { display:inline-block; margin-top:8px; color:var(--accent); font-weight:700; text-decoration:none; } .reference-list a:hover { text-decoration:underline; } .site-footer { display:flex; justify-content:space-between; padding:24px 0 34px; border-top:1px solid var(--line); color:#86918c; font:13px Inter,'Noto Sans JP',sans-serif; }
@media (max-width:720px) { .section-wrap,.site-header { width:calc(100% - 40px); } .site-header { height:72px; } nav { display:none; } .hero { display:block; min-height:auto; padding:70px 0 80px; } .hero h1 { font-size:clamp(32px,10vw,48px); } .hero-visual { margin-top:44px; padding:8px; box-shadow:10px 12px 0 rgba(41,70,62,.08); } .content-section,.model-section,.challenge-inner,.future-section,.references-section { display:block; padding:78px 0; } .references-section h2 { margin-bottom:36px; } .section-heading { margin-bottom:36px; } .image-comparison,.reference-gallery { grid-template-columns:1fr; gap:28px; } .process-diagram { gap:5px; } .process-node { min-height:88px; font-size:14px; } .process-line { font-size:20px; } .term-row { grid-template-columns:100px 1fr; } .site-footer { display:block; } .site-footer span { display:block; margin-bottom:8px; } }