@charset "UTF-8";
:root {
  --color-paper:#F7F4EE; --color-surface:#FFFFFF; --color-ink:#272723; --color-muted:#62635F;
  --color-accent:#B24A35; --color-accent-hover:#963C2A; --color-line:#D9D5CC; --color-warm-surface:#EDE7DD;
  --sans:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans CJK JP",system-ui,sans-serif;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--color-paper); color:var(--color-ink); font:1rem/1.85 var(--sans); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:.3em; }
button { font:inherit; }
p,h1,h2,h3,figure { margin:0; }
a,button,summary { touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="-1"]:focus-visible { outline:3px solid var(--color-accent); outline-offset:5px; }
.wrap { width:calc(100% - 96px); max-width:1200px; margin-inline:auto; }
.skip { position:absolute; z-index:10; top:-10rem; left:12px; background:var(--color-ink); color:white; padding:12px 20px; }
.skip:focus { top:12px; }
.preview-notice { padding:8px 20px; background:var(--color-warm-surface); border-bottom:1px solid var(--color-line); text-align:center; color:var(--color-muted); font-size:.8125rem; }
.preview-notice span { margin-left:1em; }
.header { border-bottom:1px solid var(--color-line); }
.header-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:96px; }
.brand { display:flex; align-items:center; width:280px; max-width:100%; min-height:44px; flex-shrink:0; }
.brand img { width:100%; height:auto; }
.desktop-nav { display:flex; align-items:center; gap:36px; font-size:.875rem; font-weight:600; }
.desktop-nav a,.footer-right a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; text-decoration:none; }
.desktop-nav a:hover,.text-link:hover,.footer-right a:hover { color:var(--color-accent); text-decoration:underline; }
.nav-contact { border:1px solid var(--color-ink); border-radius:6px; padding:8px 17px; }
.mobile-menu { display:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); align-items:center; gap:56px; padding:76px 0 88px; }
.eyebrow { font-size:.875rem; font-weight:600; letter-spacing:.06em; color:var(--color-muted); margin-bottom:26px; }
h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:.035em; }
h1 { font-size:clamp(3rem,4.05vw,3.5rem); line-height:1.62; margin-bottom:28px; }
h1 span,h2 span { display:block; }
h1 span:last-child { color:var(--color-accent); }
.hero-copy { max-width:31em; color:var(--color-muted); line-height:2; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:52px; padding:11px 24px; background:var(--color-accent); color:white; font-size:.875rem; font-weight:600; text-decoration:none; border-radius:6px; transition:background .18s; }
.button:hover { background:var(--color-accent-hover); }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:48px; font-size:.875rem; font-weight:600; text-decoration:none; }
.art-frame { position:relative; aspect-ratio:16/10; background:var(--color-warm-surface); border-radius:10px; overflow:hidden; }
.art-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.position-center img { object-position:center; }
.position-top img { object-position:top; }
.position-bottom img { object-position:bottom; }
.position-left img { object-position:left; }
.position-right img { object-position:right; }
.feature .art-frame { background:#15262f; }
.feature-caption { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px 20px; padding-top:18px; }
.feature-caption .text-link { align-self:flex-end; }
.small-label { font-size:.8125rem; font-weight:700; letter-spacing:.06em; color:var(--color-accent); margin-bottom:4px; }
.feature-name { font-size:1.0625rem; font-weight:700; line-height:1.65; }
.feature-tagline { font-size:.875rem; color:var(--color-muted); margin-top:7px; }
.section { padding-block:88px; border-top:1px solid var(--color-line); scroll-margin-top:24px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; }
.section-kicker { display:flex; align-items:center; gap:12px; font-size:.8125rem; letter-spacing:.09em; font-weight:600; color:var(--color-muted); margin-bottom:14px; }
.section-kicker::before { content:""; width:22px; height:1px; background:var(--color-accent); }
h2 { font-size:2.25rem; line-height:1.6; text-wrap:balance; }
.section-description { color:var(--color-muted); margin-bottom:5px; }
.works-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.work { min-width:0; }
.work .art-frame { border-radius:8px; }
.work-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:.875rem; color:var(--color-muted); margin:18px 0 8px; }
.work-meta span:first-child { color:var(--color-accent); font-weight:600; }
.work-meta span+span { border-left:1px solid var(--color-line); padding-left:12px; }
.work h3 { font-size:1.25rem; line-height:1.65; overflow-wrap:anywhere; text-wrap:pretty; }
.work-genre { font-size:.8125rem; color:var(--color-muted); margin-top:7px; }
.work-copy { margin-top:12px; font-size:1rem; color:var(--color-muted); }
.work .official-link { margin-top:14px; }
.image-note { color:var(--color-muted); font-size:.8125rem; margin-top:7px; }
.art-placeholder,.unconnected { color:var(--color-muted); border:1px solid var(--color-line); padding:20px; font-size:.875rem; }
.art-placeholder { aspect-ratio:16/10; display:grid; place-items:center; }
.approach { background:var(--color-warm-surface); }
.approach .section { border-top:0; }
.approach-grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:96px; }
.approach-copy { margin-top:24px; color:var(--color-muted); line-height:2; max-width:33em; }
.approach-copy p+p { margin-top:12px; }
.field-row { padding:24px 0; border-bottom:1px solid #CFC8BD; }
.field-row:first-child { padding-top:0; }
.field-top { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; }
.field-top h3 { font-size:1.3125rem; }
.field-state { font-size:.875rem; color:var(--color-accent-hover); border-left:1px solid #C9C0B4; padding-left:18px; }
.field-row p { color:var(--color-muted); margin-top:10px; }
.contact { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:center; gap:70px; }
.contact-copy { margin-top:20px; color:var(--color-muted); max-width:29em; }
.support-note { margin-top:28px; font-size:.875rem; color:var(--color-muted); max-width:33em; }
.contact-panel { background:var(--color-surface); border:1px solid var(--color-line); border-radius:8px; padding:28px 30px; }
.contact-panel h3 { font-size:1.0625rem; margin-bottom:10px; }
.contact-panel>p:not(.small-label) { color:var(--color-muted); font-size:.9375rem; }
.contact-panel .text-link { margin-top:14px; }
.email-address { overflow-wrap:anywhere; user-select:text; }
.contact-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.copy-email { min-height:48px; padding:10px 18px; color:var(--color-ink); background:none; border:1px solid var(--color-ink); border-radius:6px; cursor:pointer; }
.copy-email[hidden] { display:none; }
.news-list>a { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding-block:20px; border-top:1px solid var(--color-line); }
.footer { border-top:1px solid var(--color-line); padding-block:24px 32px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-caption { font-size:.8125rem; color:var(--color-muted); }
.footer-right { text-align:right; font-size:.8125rem; color:var(--color-muted); }
.footer-right nav { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px 22px; font-size:.875rem; }
.footer-right p { margin-top:12px; }
@media (max-width:1100px) {
  .hero { gap:36px; }
  .approach-grid { gap:56px; }
  .desktop-nav { gap:24px; }
  .section-description { max-width:19em; }
}
@media (max-width:900px) {
  .wrap { width:calc(100% - 64px); }
  .header-inner { min-height:88px; flex-wrap:wrap; gap:10px 20px; }
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  .mobile-menu summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:center; gap:10px; min-width:44px; min-height:44px; padding:7px 10px; font-size:.875rem; border:1px solid var(--color-muted); border-radius:6px; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu[open] summary span { transform:rotate(45deg); }
  .mobile-nav { position:absolute; inset:100% 0 auto; display:flex; flex-direction:column; padding:12px 24px; background:var(--color-paper); border:1px solid var(--color-muted); border-radius:0 0 8px 8px; z-index:5; }
  .mobile-nav a { display:flex; align-items:center; min-height:48px; padding:10px 0; font-size:.9375rem; text-decoration:none; border:0; border-bottom:1px solid var(--color-line); border-radius:0; }
  .mobile-nav a:last-child { border-bottom:0; }
  .hero { grid-template-columns:1fr; gap:44px; padding:60px 0 64px; }
  .hero-text { max-width:650px; }
  h1 { font-size:3rem; }
  .feature { width:100%; max-width:670px; }
  .hero-copy { max-width:38em; }
  .contact { gap:32px; }
}
@media (max-width:800px) {
  .works-grid { grid-template-columns:1fr; gap:40px; max-width:670px; }
  .section { padding-block:60px; }
  .approach-grid,.contact { grid-template-columns:1fr; gap:36px; }
  .fields { max-width:670px; }
  .section-header { flex-direction:column; align-items:flex-start; gap:14px; }
  .section-description { max-width:none; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:24px; }
  .footer-right { text-align:left; }
  .footer-right nav { justify-content:flex-start; }
}
@media (max-width:600px) {
  .wrap { width:calc(100% - 40px); }
  .header-inner { min-height:76px; }
  .brand { width:190px; }
  .hero { padding:46px 0 56px; gap:38px; }
  h1 { font-size:2.375rem; margin-bottom:23px; }
  h2 { font-size:1.8125rem; }
  .eyebrow { margin-bottom:20px; }
  .hero-actions { margin-top:26px; gap:16px; }
  .button { padding:10px 20px; gap:22px; }
  .feature-caption { gap:10px; }
  .work h3 { font-size:1.3125rem; }
  .contact-panel { padding:24px; }
  .preview-notice span { display:block; margin-left:0; }
  .news-list>a { grid-template-columns:1fr auto; gap:8px; }
  .news-list time { grid-column:1/-1; }
}
@media (max-width:374px) {
  .wrap { width:calc(100% - 32px); }
  .brand { width:160px; }
  .header-inner { gap:8px; }
  .mobile-menu summary { gap:5px; padding-inline:7px; }
  h1 { font-size:2rem; }
  h2 { font-size:1.625rem; }
  .hero-actions { gap:8px 14px; }
  .field-top { gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}