@charset "UTF-8";
/* 色
===============================================*/
/*-------------------------------------------------------------
 関数
------------------------------------------------------------- */
/* Breakpoints
===============================================*/
/*-------------------------------------------------------------
 TOPページ
------------------------------------------------------------- */
/* メインビジュアル
===============================================*/
.main_visual {
  width: 100%;
  height: 100vh;
  min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
}

.mv_background {
  position: absolute;
  width: 3840px;
  height: 2160px;
  top: 50%;
  left: calc(50% + 15px);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 834px) {
  .mv_background {
    left: 50%;
    top: calc(50% - 15px - 15px);
  }
}
.mv_background img {
  position: absolute;
  transition: all 0.5s ease-out;
}
.mv_background .mv_01 {
  width: 3840px;
  z-index: 4;
  top: -100vh;
  left: 35px;
}
.mv_background .mv_02 {
  width: calc(50% - 82px / 2);
  z-index: 3;
  top: calc(-50% - 105px - 136px / 2);
  left: -100vw;
  transition-delay: 0.2s;
}
.mv_background .mv_03 {
  width: calc(50% - 82px / 2);
  z-index: 2;
  top: -21px;
  right: -100vw;
  transition-delay: 0.4s;
}
.mv_background .mv_04 {
  width: 100%;
  bottom: -100vh;
  left: -35px;
  transition-delay: 0.6s;
}
.mv_background .mv_01.active {
  top: calc(50% / 4 - 105px - 136px / 2);
  left: 35px;
  z-index: 4;
}
.mv_background .mv_02.active {
  top: -30px;
  left: 0;
}
.mv_background .mv_03.active {
  top: -21px;
  right: 0;
  z-index: 2;
}
.mv_background .mv_04.active {
  bottom: calc(50% / 4 - 21px - 136px);
  left: -35px;
  z-index: 5;
}

.main__logo {
  position: absolute;
  width: 524px;
  top: calc(50% + 7px);
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92, 0.92);
  opacity: 0;
  transition: all 1s ease-out;
  transition-delay: 1.3s;
}
.main__logo.sp_only {
  top: calc(50% - 10px - 15px);
  width: 214px;
}

.main__logo.active {
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.main__copy {
  position: absolute;
  top: calc(50% + 150px);
  left: 0;
  width: 100%;
  transform: translateY(-40%);
  color: #FFFFFF;
  font-size: 1.875rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
  opacity: 0;
  transition: all 1s ease-out;
  transition-delay: 1.3s;
}
@media screen and (max-width: 834px) {
  .main__copy {
    font-size: 1.125rem;
    top: calc(50% + 175px - 15px);
  }
}

.main__copy.active {
  transform: translateY(-50%);
  opacity: 1;
}

/* コンテンツ
===============================================*/
.menu_section {
  margin-top: 200px;
  margin-bottom: 200px;
  display: grid;
  -moz-column-gap: calc(100% - 1000px);
       column-gap: calc(100% - 1000px);
  grid-template-columns: 500px 500px;
  grid-template-areas: "title img" "text img" "button img";
}
@media screen and (max-width: 834px) {
  .menu_section {
    margin-top: 0;
    margin-bottom: 0;
    padding: 40px 0;
    grid-template-columns: 100%;
    grid-template-areas: "title" "img" "text" "button";
    text-align: center;
  }
}
.menu_section.reverse {
  grid-template-areas: "img title" "img text" "img button";
}
@media screen and (max-width: 834px) {
  .menu_section.reverse {
    grid-template-areas: "title" "img" "text" "button";
  }
}

.section_title {
  grid-area: title;
  line-height: 1;
  font-size: 5rem;
}
@media screen and (max-width: 834px) {
  .section_title {
    font-size: 3rem;
  }
}

.section_text {
  grid-area: text;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 834px) {
  .section_text {
    margin-bottom: 20px;
    font-size: 1rem;
    text-align: center;
  }
}

.section_button {
  grid-area: button;
}
@media screen and (max-width: 834px) {
  .section_button {
    text-align: center;
  }
}

.section_img {
  grid-area: img;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 834px) {
  .section_img {
    margin: 20px auto;
    width: 200px;
  }
}

/* View More
===============================================*/
.more_button {
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #912d8c;
}
@media screen and (max-width: 834px) {
  .more_button {
    margin-left: -51px;
    font-size: 1.125rem;
  }
}
.more_button::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  background-color: #912d8c;
  top: calc(50% - 1px);
  right: -75px;
  transition: all 0.3s ease-out;
}
@media screen and (max-width: 834px) {
  .more_button::after {
    width: 36px;
    right: -51px;
  }
}
.more_button:hover::after {
  width: 100px;
  right: -115px;
}
@media screen and (max-width: 834px) {
  .more_button:hover::after {
    width: 45px;
    right: -60px;
  }
}
/*# sourceMappingURL=top.css.map */