@charset "UTF-8";

/* ＝＝＝＝ Main Visual ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.mv__home {
  width: 100%;
  height: 100dvh;
  position: relative;
  background-size: cover;
  transform-origin: center;
  background-image: url(../img/home/home-mv@1x.jpg);
  background-image: image-set(
    url(../img/home/home-mv@1x.avif) 1x type("image/avif"),
    url(../img/home/home-mv@2x.avif) 2x type("image/avif"),
    url(../img/home/home-mv@3x.avif) 3x type("image/avif"),
    url(../img/home/home-mv@1x.webp) 1x type("image/webp"),
    url(../img/home/home-mv@2x.webp) 2x type("image/webp"),
    url(../img/home/home-mv@3x.webp) 3x type("image/webp"),
    url(../img/home/home-mv@1x.jpg) 1x type("image/jpeg"),
    url(../img/home/home-mv@2x.jpg) 2x type("image/jpeg"),
    url(../img/home/home-mv@3x.jpg) 3x type("image/jpeg")
  );
  background-position: center;
  background-repeat: no-repeat;
  animation-name: mvHome;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes mvHome {
  0% {background-position: center;}
  100% {background-position: 70%;}
}

.mv__text {
  display: inline grid;
  row-gap: 1em;
  position: absolute;
  bottom: 2rem;
  right: 0;
  font-size: var(--vvS_16-20);
  font-weight: 700;
}

.mv__text--row {
  padding: .5em 1em;
  justify-self: end;
  background-color: var(--clr_black-trans);
  letter-spacing: .1em;
}

@media screen and (min-width: 46.5rem) {
.mv__text {
  top: 10rem;
  bottom: auto;
  font-size: 1.5rem;
}

}

@media screen and (min-width: 60rem) {
.mv__home {
  animation: none;
}
}

@media screen and (min-width: 80rem) {
.mv__text {
  font-size: var(--vvXL_24-28);
}
}


/* ＝＝＝＝ Intro ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.intro {
  background-image: linear-gradient(to bottom right, var(--clr_green-main), var(--clr_green-pale), var(--clr_green-main));
}

.intro__img--1 {
  display: block flow;
  text-align: end;
}

.intro__img--1 img {
  width: 71.111%;
  height: auto;
  border-radius: .25rem;
}

.intro__img--2 {
  display: block flow-root;
  translate: 0 -2rem;
}

.intro__img--2 img {
  width: 35.556%;
  height: auto;
  border-radius: .25rem;
}

.intro__img--2::after {
  content: "MARQUEE 24";
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--clr_green-main);
  font-family: var(--ff_en);
  font-size: var(--vvS_16-24);
  text-transform: uppercase;
  text-shadow:
    0 0 .125rem #FFF,
    0 0 .25rem var(--clr_green-accent3),
    0 0 .5rem var(--clr_green-accent3);
}

@media screen and (min-width: 60rem) {
.intro .c-inner {
  display: block grid;
  grid-template-columns: 5fr 4fr;
  grid-template-areas: "text image";
  column-gap: 2rem;
}

.intro__imgContainer {
  grid-area: image;
}

.intro__textContainer {
  grid-area: text;
}
}

/* ＝＝＝＝ Live Event ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.beatlesNight {
  background-image: linear-gradient(to bottom,var(--clr_red-sub), var(--clr_red-sub),var(--clr_red-main));
}

.home__orderContainer {
  display: block grid;
}

.beatlesNight__schedule {
  margin-block-start: 1.5rem;
}

.beatlesNight__schedule dt {
  border-block-end: .0625rem solid var(--clr_text-main);
}

.beatlesNight__schedule dd::before {
  content: "■";
  padding-inline-end: .5rem;
}

.beatlesNight__schedule dd:nth-of-type(1) {
  margin-block-start: .5rem;
}

.home__sectionImg {
  width: 100%;
  grid-area: 1 / 1;
  margin-block-start: 1rem;
}

.home__sectionImg img {
  width: 100%;
  border-radius: .25rem;
}

.regularLive {
  background-color: var(--clr_red-main);
}

.dailyService,
.private {
  background-color: var(--clr_green-main);
}

@media screen and (min-width: 60rem) {
.home__orderContainer {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "text img"
    "text btn";
  column-gap: 2rem;
}

.home__sectionText {
  grid-area: text;
}

.home__sectionImg {
  grid-area: img;
}

.beatlesNight .c-btn,
.dailyService .c-btn,
.private .c-btn {
  grid-area: btn;
}

.regularLive .home__orderContainer {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "text img"
    "btn1 btn2";
  column-gap: 2rem;
}

.regularLive .c-btn:nth-of-type(1) {
  grid-area: btn1;
}

.regularLive .c-btn:nth-of-type(2) {
  grid-area: btn2;
}

}


/* ＝＝＝＝ Translation ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
[data-lang="ja"],
[data-lang="en"] {
  opacity: 1;
  transition: opacity .3s ease-in;
}

[data-lang="ja"].fade-out,
[data-lang="en"].fade-out {
  opacity: 0;
  transition: opacity .3s ease-out;
}

html[lang="ja"] [data-lang="en"],
html[lang="en"] [data-lang="ja"] {
  display: none;
}

.langSwitch {
  padding: .875rem 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  background-color: var(--clr_black-trans);
  font-size: 1rem;
  font-weight: 100;
}

.langSwitch span:first-child {
  margin-inline-end: .5rem;
}

.langSwitch__active {
  padding-block-end: .25rem;
  border-block-end: .125rem solid var(--clr_text-main);
  font-weight: 700;
}

@media screen and (min-width: 80rem) {
.langSwitch {
  box-shadow: 0 0 .5rem var(--clr_text-dark2);
  z-index: 10;
  bottom: 1rem;
  left: 12.5%;
  translate: -50% 0;
  background-color: transparent;
}

.langSwitch span:first-child {
  margin-inline-end: 1rem;
}
}