:root { color-scheme: light; --ink:#172033; --muted:#687087; --surface:#fff; --line:#dfe3eb; --accent:#3157d5; --accent-dark:#2444ad; }
* { box-sizing: border-box; }
html { background:#f5f7fb; }
body { margin:0; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; line-height:1.6; }
button,a { -webkit-tap-highlight-color:transparent; }
.wrap { width:min(1120px,calc(100% - 32px)); margin-inline:auto; }
.site-header { padding:64px 0 34px; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.035em; line-height:1.15; }
.lead { margin:12px 0 0; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:18px 0 64px; }
.card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px rgba(31,42,68,.07); }
.image-button { display:block; width:100%; padding:0; border:0; background:#e9edf5; cursor:zoom-in; }
.image-button img { display:block; width:100%; aspect-ratio:16/10; object-fit:contain; background:#eef1f6; transition:transform .2s ease; }
.image-button:hover img { transform:scale(1.012); }
.image-button:focus-visible,.actions a:focus-visible,.close-button:focus-visible { outline:3px solid #8ca4ff; outline-offset:3px; }
.card-body { padding:20px; }
.card h2 { margin:0 0 16px; font-size:1.12rem; line-height:1.45; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.actions a { display:inline-flex; align-items:center; min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:.9rem; font-weight:700; text-decoration:none; }
.actions a:first-child { border-color:var(--accent); background:var(--accent); color:#fff; }
.actions a:hover { border-color:var(--accent-dark); }
.actions a:first-child:hover { background:var(--accent-dark); }
.lightbox { width:min(1200px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; overflow:hidden; border:0; border-radius:16px; background:#10131b; color:#fff; box-shadow:0 24px 80px rgba(0,0,0,.45); }
.lightbox::backdrop { background:rgba(8,12,22,.78); backdrop-filter:blur(4px); }
.lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px 12px 20px; }
.lightbox-bar h2 { margin:0; font-size:1rem; }
.close-button { width:42px; height:42px; border:0; border-radius:50%; background:#292e3b; color:#fff; font-size:1.7rem; cursor:pointer; }
.lightbox-image { display:block; width:100%; max-height:calc(100dvh - 92px); object-fit:contain; background:#090b10; }
footer { padding:26px 0 38px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
@media (max-width:720px) { .site-header{padding:42px 0 22px}.gallery{grid-template-columns:1fr;gap:18px;padding-bottom:46px}.card-body{padding:17px}.actions a{flex:1;justify-content:center}.lightbox-bar{padding-left:14px} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }