.hero:not([data-scene="blue"]) .hero-copy{top:20%;transform:none}
.hero:not([data-scene="blue"]) .hero-message{
  font-size:clamp(20px,1.48vw,28px);
  line-height:1.85;
  letter-spacing:.07em;
  gap:1.6em;
  margin-top:36px;
}
.hero-details{color:#41463b}
.hero-details .hero-meta{font-size:13px}
.hero-details .hero-meta>span{font-size:13px;letter-spacing:.09em}
.hero-details .fish-guide{font-size:14px;color:#41463b;margin-top:10px;gap:10px}
.hero-details .fish-guide span{width:20px;height:20px;font-size:14px}

@media(min-width:1051px) and (min-aspect-ratio:16/9){
  .hero:not([data-scene="blue"]) .hero-copy{width:min(24%,41svh)}
}
@media(min-width:1051px) and (max-height:780px){
  .hero:not([data-scene="blue"]) .hero-copy{top:17%;width:min(24%,calc(100svh * .37))}
  .hero:not([data-scene="blue"]) .hero-message{font-size:20px;margin-top:24px;line-height:1.75}
}
@media(max-width:1050px){
  .hero:not([data-scene="blue"]) .hero-copy{top:calc(112px + var(--portrait-height) * .024);transform:translateX(-50%)}
  .hero:not([data-scene="blue"]) .hero-message{font-size:18px;gap:1.5em;line-height:1.75;margin-top:24px}
}
@media(max-width:599px){
  .hero:not([data-scene="blue"]) .hero-copy{top:calc(50% + 6px - var(--portrait-height) * .478)}
  .hero:not([data-scene="blue"]) .hero-message{font-size:clamp(12px,3.3vw,15px);gap:1.5em;line-height:1.75;margin-top:16px}
  .hero-details{left:7%;bottom:25px}
  .hero-details .hero-meta{font-size:11px;letter-spacing:0}
  .hero-details .hero-meta>span{font-size:11px;letter-spacing:.04em}
  .hero-details .fish-guide{font-size:12px;gap:7px;margin-top:9px}
  .hero-details .fish-guide span{width:17px;height:17px;font-size:12px}
}
@media(max-width:599px) and (max-height:750px){
  .hero:not([data-scene="blue"]) .hero-copy{top:calc(50% + 18px - var(--portrait-height) * .478)}
  .hero:not([data-scene="blue"]) .hero-message{font-size:11.5px;margin-top:11px;line-height:1.7}
}

.lower-page.about,.lower-page.services{--wall-image-height:56.25vw}
.lower-page.about{
  background-image:linear-gradient(#f5f2e924,#f5f2e958 calc(var(--wall-image-height) - 100px),#f5f2e9 var(--wall-image-height)),url('assets/art/wall-light.webp');
}
.lower-page.services{
  background-image:linear-gradient(#f5f2e955,#f5f2e982 calc(var(--wall-image-height) - 100px),#f5f2e9 var(--wall-image-height)),url('assets/art/wall-light.webp');
}
@media(max-width:800px){
  .lower-page.about,.lower-page.services{--wall-image-height:690px}
}

@media(min-width:961px){
  .site-header nav a{font-size:12px;letter-spacing:.04em}
}


.site-header .brand-mark{display:block;height:48px;width:auto;flex:none}
.site-header.is-scrolled .brand-mark{height:42px}
@media(max-width:960px){.site-header .brand-mark{height:40px}.site-header.is-scrolled .brand-mark{height:36px}}
@media(max-width:360px){.site-header .brand-mark{height:34px}}
.lower-footer .footer-brand>img{width:168px;height:128px}
@media(max-width:700px){.lower-footer .footer-brand>img{width:126px;height:96px}}

#site-header nav a{font-size:14px}
#site-header .header-contact{font-size:14px}
#site-header .brand-name small{font-size:11px}
@media(max-width:1200px){
  #site-header nav a,#site-header .header-contact{font-size:13px}
  #site-header .brand-name small{font-size:10px}
}
@media(max-width:960px){
  #site-header .header-contact{font-size:13px}
}

@media(max-width:800px){
  .lower-page .section-index .english{font-size:13px;letter-spacing:.06em;white-space:nowrap}
}

.marquee{background:none;transform:none;margin:0;width:100%;padding:17px 0 20px;border-top:0;border-bottom:1px solid #304a3b26;color:#34493c}
.marquee-track span{font-size:clamp(17px,1.32vw,21px);font-weight:400;letter-spacing:.28em;color:#2f4437}
.marquee-track>span{gap:0;padding-right:0}
.marquee-track i{font-size:0;display:inline-block;flex:none;width:64px;height:1px;margin:0 40px;background:#304a3b59}
@media(max-width:800px){
  .marquee{padding:15px 0 14px}
  .marquee-track span{font-size:16px;letter-spacing:.24em}
  .marquee-track i{width:40px;margin:0 26px}
}

@media(max-width:960px){
 #site-header .menu-toggle{width:44px;height:44px;flex:none;margin-inline:-8px;margin-block:-2px}
 #site-header .brand{min-height:44px;margin-block:-2px}
 .hero .scroll-guide{min-width:44px;min-height:44px;justify-content:center}
}

@media(max-width:599px){
 .hero-scene{width:100%}
 .hero:not([data-scene="blue"])::before{background-size:100vw calc(100vw * 16 / 9)}
}

@media(max-width:800px){.mobile-phrase{display:inline-block;white-space:nowrap}}

@media(max-width:800px){.swatch-sheet .mobile-phrase{white-space:nowrap}.swatch-sheet small{white-space:nowrap}.faq-question .wrap-phrase{white-space:nowrap}}