:root {
  --background:#fff;
  --foreground:#151515;
  --primary:#e40066;
  --primary-foreground:#fff;
  --font-sans:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  --radius:0
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans)
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible {
  outline:3px solid #e40066;
  outline-offset:6px
}
main {
  overflow:hidden
}
h1,h2,p {
  margin:0
}
.brand img {
  display:block;
  width:100%;
  height:auto
}
.member-photo {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover
}
.hero {
  position:relative;
  height:70.8vw;
  max-height:1360px;
  background:#80c5e7 url('../img/bk-img.jpg') 43% center/auto 100% no-repeat
}
.hero:before,.footer:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(#fff5 .7px,transparent .9px);
  background-size:5px 5px;
  opacity:.3
}
.brand {
  position:absolute;
  z-index:3;
  top:3vw;
  left:2.2vw;
  width:7vw;
  max-width:134px
}
.hero-instagram {
  position:absolute;
  z-index:3;
  right:2.4vw;
  top:2.6vw;
  width:5vw;
  color:#fff
}
.hero-instagram img {
  width:100%;
  display:block
}
.hero-photo {
  position:absolute;
  inset:0 0 0 46.34%;
  background-image:url('../img/hero-optimized.jpg');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat
}
.hero-copy {
  position:absolute;
  z-index:2;
  left:5.5%;
  top:31.7%;
  width:41%;
  color:white;
  text-shadow:0 2px 5px #193e65a8
}
.hero-copy h1 {
  font-size:clamp(24px,3.12vw,60px);
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  letter-spacing:.01em
}
.subtitle {
  font-size:clamp(14px,1.35vw,26px);
  font-weight:700;
  margin-top:1.3vw
}
.video-notice {
  grid-column:1 / -1;
  margin:0;
  text-align:center;
  color:var(--primary);
  font-size:clamp(12px,1.2vw,23px);
  font-weight:700;
  line-height:1.6;
  text-shadow:none
}
.intro {
  font-size:clamp(14px,1.3vw,25px);
  font-weight:700;
  line-height:1.85;
  margin-top:2.65vw
}
.gallery {
  position:relative;
  z-index:4;
  margin:-20.15vw 0 0 4.35%;
  width:39.3%;
  aspect-ratio:754/490
}
.members {
  width:91.5%;
  max-width:1757px;
  margin:8.5vw auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:4.4%;
  row-gap:3.8vw
}
.member {
  text-align:center;
  min-width:0;
  color:var(--primary)
}
.member-name {
  padding-top:.9vw
}
.member-name p {
  font-stretch:condensed;
  font-weight:700;
  font-size:clamp(16px,1.95vw,37px);
  line-height:1.2
}
.member-name h2 {
  font-size:clamp(22px,2.9vw,55px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.12em;
  white-space:nowrap
}
.member-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5vw;
  margin-top:.5vw
}
.movie-status {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  white-space:nowrap;
  font-size:clamp(12px,1.3vw,25px);
  font-weight:700;
  padding:.65vw .6vw;
  line-height:1.2;
  flex:1
}
.instagram-link {
  color:#f22a84;
  display:block;
  width:3.55vw;
  max-width:68px;
  flex:none
}
.instagram-link img {
  width:100%;
  display:block
}
.audition {
  text-align:center;
  margin:13.7vw auto 7.2vw
}
.audition h2 {
  font-size:clamp(14px,1.35vw,26px);
  font-weight:800;
  line-height:1.6;
  margin:0 20px 2.8vw
}
.audition-preview {
  width:34.3%;
  margin:auto;
  position:relative
}
.audition-preview>p {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0008;
  color:#fff;
  font-size:clamp(14px,1.6vw,30px);
  font-weight:700;
  text-shadow:0 1px 4px #000
}
.footer {
  position:relative;
  min-height:52.9vw;
  background:#91cbea url('../img/bk-img.jpg') center bottom/auto 100% no-repeat;
  padding:7.4vw 7.2% 8.8vw
}
.footer-banners {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5.7%;
  align-items:start
}
.archive-banner {
  display:block;
  box-shadow:3px 4px 7px #123b5466;
  transition:opacity .2s
}
.archive-banner:hover {
  opacity:.85
}
.copyright {
  position:relative;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 3px #17415e;
  margin-top:19vw;
  font-size:clamp(12px,1.3vw,25px);
  font-weight:700
}

@media(min-width:1920px) {
  .hero-copy {
  top:31%
}
.gallery {
  margin-top:-387px
}
.hero-photo {
  background-size:cover
}
.members {
  margin-top:163px
}

}

@media(max-width:640px) {
  .hero {
  height:153.3vw;
  max-height:none;
  background:#85c8df
}
.brand {
  left:3.8%;
  top:3.5vw;
  width:13.2vw
}
.hero-instagram {
  top:3.4vw;
  right:3.8%;
  width:10.5vw
}
.hero-photo {
  inset:0;
  background-image:url('../img/hero-optimized.jpg');
  background-size:cover;
  background-position:center bottom
}
.hero-copy {
  left:0;
  top:auto;
  bottom:0;
  width:100%;
  height:auto;
  min-height:48vw;
  padding:3vw 1vw 5vw;
  text-align:center;
  background:linear-gradient(transparent,#15373e55);
  text-shadow:0 1px 5px #182d3e
}
.hero-copy h1 {
  font-size:6.1vw;
  line-height:1.25;
  letter-spacing:0
}
.subtitle {
  font-size:12px;
  margin-top:2vw
}
.intro {
  font-size:12px;
  font-weight:500;
  line-height:1.75;
  margin-top:3vw
}
.gallery {
  margin:0;
  width:100%;
  aspect-ratio:1010/660
}
.members {
  width:83%;
  margin-top:11.5vw;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:9%;
  row-gap:9.4vw
}
.member-name {
  padding-top:2vw
}
.member-name p {
  font-size:clamp(13px,3.7vw,23px)
}
.member-name h2 {
  font-size:clamp(20px,5.6vw,34px);
  line-height:1.35;
  letter-spacing:.11em
}
.member-links {
  gap:1vw;
  margin-top:1vw
}
.movie-status {
  font-size:clamp(10px,2.8vw,17px);
  padding:1.5vw .65vw
}
.instagram-link {
  width:7.1vw
}
.audition {
  margin:17vw auto 13vw
}
.audition h2 {
  font-size:12px;
  margin:0 4vw 5.4vw;
  line-height:1.8
}
.audition-preview {
  width:65.4%
}
.audition-preview>p {
  font-size:14px
}
.footer {
  min-height:125vw;
  padding:32.4vw 11.5% 14vw;
  background-size:auto 100%;
  background-position:51% bottom
}
.footer-banners {
  grid-template-columns:1fr;
  gap:7vw
}
.copyright {
  margin-top:17vw;
  font-size:10px;
  white-space:nowrap;
  letter-spacing:0
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}

.photo-gallery {
  height:100%;
  width:100%;
  background:#b5b5b4
}
.photo-gallery .gallery-track {
  margin-left:0
}
.photo-gallery .gallery-slide {
  padding-left:0
}
.gallery-slide img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:754/490;
  object-fit:cover
}
.photo-gallery:focus-visible,.photo-gallery button:focus-visible {
  outline:3px solid #e40066;
  outline-offset:3px
}

.photo-gallery .gallery-playback {
  display:none;
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:1;
  height:36px;
  padding:0 12px;
  border:0;
  border-radius:4px;
  background:#ffffffc9;
  color:#333;
  font-size:12px;
  cursor:pointer
}
.photo-gallery .gallery-playback:hover {
  background:#fff
}


.hero-instagram img,.instagram-link img {
  height:auto;
  object-fit:contain
}


.audition-preview iframe {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border:0
}


.archive-banner,.recruit-banner {
  align-self:start;
  display:block
}
.archive-banner img,.recruit-banner img {
  display:block;
  width:100%;
  height:auto
}
.recruit-banner {
  aspect-ratio:1556/600;
  overflow:hidden;
  box-shadow:3px 4px 7px #123b5466
}


img {
  max-width:100%;
  vertical-align:middle
}

button {
  font:inherit
}

.photo-gallery {
  position:relative
}

.gallery-viewport {
  overflow:hidden;
  height:100%;
  touch-action:pan-y
}

.photo-gallery .gallery-track {
  display:flex;
  width:100%;
  height:100%;
  transition:transform .65s ease;
  will-change:transform
}

.photo-gallery .gallery-slide {
  flex:0 0 100%;
  min-width:0
}

@media(prefers-reduced-motion:reduce) {
  .photo-gallery .gallery-track {
  transition:none
}

}


.gallery--video {
  aspect-ratio:16/9;
}

.ambassador-video {
  display:block;
  width:100%;
  height:auto;
}

@media(min-width:641px) {
  .hero-copy .gallery--video {
    width:calc(100% - 2.5vw);
    margin:3vw 0 0;
    text-shadow:none;
  }
}