:root { color-scheme: light; font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #14263b; background: #f5f7fa; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
img { display: block; max-width: 100%; }
.shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid #e4e9f0; background: #fff; }
.header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 77px; gap: 20px; }
.wordmark { display: flex; align-items: center; gap: 11px; font-size: 15px; letter-spacing: -.02em; }
.wordmark-jp { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #145aa9; font-size: 15px; font-weight: 800; letter-spacing: -.08em; }
.wordmark-jp span { color: #86c6ff; }
.header-note { color: #748398; font-size: 12px; }
.intro { max-width: 730px; padding: 97px 0 72px; }
.eyebrow { margin: 0 0 25px; color: #3978b9; font-size: 11px; font-weight: 750; letter-spacing: .18em; }
.eyebrow span { padding-inline: 8px; color: #9fb0c3; }
h1 { margin: 0; font-size: clamp(45px, 7.5vw, 86px); font-weight: 760; letter-spacing: -.07em; line-height: 1.12; }
h1 span { color: #6784a4; }
.intro-copy { max-width: 590px; margin: 29px 0 0; color: #566a80; font-size: 16px; line-height: 1.9; }
.illustration-note { margin: 17px 0 0; color: #8493a5; font-size: 12px; line-height: 1.7; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 22px; padding-bottom: 106px; }
.gallery-item { min-width: 0; margin: 0; }
.gallery-item-wide { grid-column: 1 / -1; }
.image-frame { overflow: hidden; border: 1px solid #dce5ee; border-radius: 17px; background: #e9f0f7; }
.image-frame-dark { border-color: #233d60; background: #071a32; }
.image-frame img { width: 100%; height: auto; }
figcaption { display: flex; align-items: baseline; gap: 17px; padding: 22px 2px 0; }
.item-number { color: #5c92ca; font-size: 11px; font-weight: 750; }
figcaption h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.04em; }
figcaption p { margin: 0; color: #7a8b9f; font-size: 13px; }
.site-footer { border-top: 1px solid #e3e9f0; background: #fff; }
.site-footer .shell { display: flex; justify-content: space-between; gap: 20px; padding-block: 27px; color: #8a98a9; font-size: 12px; }
.site-footer .shell span:first-child { color: #3d5975; font-weight: 750; }
@media (max-width: 680px) {
  .shell { width: min(100% - 32px, 1120px); }
  .header-inner { min-height: 66px; }
  .intro { padding: 70px 0 48px; }
  .intro-copy { font-size: 14px; }
  .gallery { grid-template-columns: 1fr; gap: 38px; padding-bottom: 76px; }
  .gallery-item-wide { grid-column: auto; }
  .image-frame { border-radius: 12px; }
  figcaption { padding-top: 17px; }
}