

@media (max-width: 410px) {
    .ks-cta-btn { font-size: 11px; letter-spacing: .02em; }
}

.logo-img { display: block; width: auto; height: 96px; }
.site-header .logo { top: 20px; left: 20px; }

.hero { min-height: 100svh; }

.gk-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem .7rem; }

.info-list dl { grid-template-columns: 7.2em 1fr; }

html:not([lang="ja"]) .info-list dl { display: block; }
html:not([lang="ja"]) .info-list dt { padding: .7em 0 .2em; }
html:not([lang="ja"]) .info-list dd { padding: 0 0 .9em; }

body:not([data-page="home"]) main > .section:first-child { padding-top: 140px; }

.ks-taste { margin-top: 16vw; padding-top: 0; }

.ks-scatter { padding-top: 16vw; }
.ks-sc3.gk-ovl { position: relative; top: 0; left: 0; width: auto; margin: 12vw 0 0; }
.gk-ovl img { aspect-ratio: 4 / 5; object-fit: cover; }
.gk-ovl .ks-copy { gap: 6vw; }
html[lang="en"] .gk-ovl .ks-copy { width: 58%; gap: 1em; }
html[lang="en"] .gk-ovl::after {
  background: linear-gradient(to left,
    rgba(10, 8, 7, .88) 0%,
    rgba(10, 8, 7, .74) 62%,
    rgba(10, 8, 7, 0) 94%);
}
.hero-brand img { height: min(34svh, 54vw); }

.ks-menu { padding-top: 6vw; }
.ks-menu-list { margin-top: 0; }
