@charset "UTF-8";

:root {
  --viewport: 750;
  --blue: #2ABDDB;
}

.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}
.fixed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.sp { display: inline; }
.pc { display: none; }
@media screen and (min-width:768px) {
  :root {
    --viewport: 1280;
  }

  .sp { display: none; }
  .pc { display: inline; }
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic";
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.font-outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.bold {
  font-weight: bold !important;
}

.video {
  z-index: 1;
  width: 100vw;
  min-height: 100%;
  min-width: 100%;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /*box-shadow: 0 calc(100vw / var(--viewport) * 10) calc(100vw / var(--viewport) * 50) 0 rgba(120, 224, 248, .4);*/
}
.click-catcher {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 20;
  background: transparent;
}
.playing .click-catcher {
  pointer-events: none;
}
.creative .box .youtube.playing + .title {
  z-index: 0;
}
.gallery .swiper.playing + .title {
  z-index: 0;
}
.youtube iframe,
.youtube video,
.youtube img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (min-width:768px) {
/*  .youtube .click-catcher {
    display: none;
  }*/
}

.wrapper {
  position: relative;
}

header {
  position: relative;
  z-index: 999;
}
header .logo {
  width: calc(100vw / var(--viewport) * 308);
  position: absolute;
  top: calc(100vw / var(--viewport) * 30);
  left: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:768px) {
  header .inner {
    /*width: 100%;
    max-width: 1280px;
    margin: 0 auto;*/
    position: relative;
  }
  header .logo {
    width: min(calc(100vw / var(--viewport) * 204), 204px);
    top: min(calc(100vw / var(--viewport) * 30), 30px);
    left: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}

#mv {
  height: 100lvh;
  position: relative;
  overflow: hidden;
}
#mv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mv .sp img {
  background: #999;
}
#mv h1 {
  width: calc(100vw / var(--viewport) * 434);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width:768px) {
  #mv video {
    width: 100%;
    height: 100lvh;
    object-fit: cover;
    object-position: 50% 50%;
  }
  #mv h1 {
    width: 90%;
    max-width: 1000px;
  }
}

.creative {
  color: #fff;
  /*background: url(../img/creative/bg_sp.jpg) top center no-repeat;
  background-size: cover;*/
  padding: calc(100vw / var(--viewport) * 160) 0;
}
.creative h2 {
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(100vw / var(--viewport) * 160);
}
.creative .inner {
  width: calc(100vw / var(--viewport) * 686);
  margin: 0 auto;
}
.creative .box {
  text-align: center;
  width: calc(100vw / var(--viewport) * 686);
  margin: 0 auto;
  position: relative;
}
.creative .box:nth-child(n+2) {
  margin-top: calc(100vw / var(--viewport) * 160);
}
.creative .box .youtube {
  z-index: 1;
}
.creative .box .title {
  font-family: "Manrope", sans-serif;
  font-size: calc(100vw / var(--viewport) * 120);
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: calc(100vw / var(--viewport) * -80);
  right: 0;
  pointer-events: none;
  z-index: 2;
}
@media screen and (min-width:768px) {
  .creative {
    /*background: url(../img/creative/bg_pc.jpg) top center no-repeat;
    background-size: cover;*/
    padding: min(calc(100vw / var(--viewport) * 160), 160px) 0;
  }
  .creative h2 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .creative .inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
  }
  .creative .box {
    width: 100%;
    margin: 0;
  }
  .creative .box .youtube {
    width: 78.7%;
    padding-top: 44.15%;
  }
  .creative .box.box02 {
    margin-left: auto;
    margin-right: 0;
  }
  .creative .box.box02 .youtube {
    margin: 0 0 0 auto;
  }
  .creative .box:nth-child(n+2) {
    margin-top: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .creative .box .title {
    font-size: min(calc(100vw / var(--viewport) * 100), 100px);
    top: initial;
    bottom: min(calc(100vw / var(--viewport) * 40), 40px);
    right: 0;
  }
  .creative .box.box02 .title {
    right: initial;
    left: 0;
  }
  .creative .box .youtube.playing + .title {
    z-index: 0;
  }
}

.experience {
  color: #fff;
  /*background: url(../img/experience/bg_sp.jpg) top center no-repeat;
  background-size: cover;*/
  padding: calc(100vw / var(--viewport) * 160) 0;
}
.experience h2 {
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(100vw / var(--viewport) * 160);
}
.experience h3 {
  font-size: calc(100vw / var(--viewport) * 48);
  text-align: center;
  display: table;
  padding-bottom: 0.2em;
  border-bottom: calc(100vw / var(--viewport) * 4) solid #fff;
  margin: 0 auto;
}
.experience ul:nth-child(n+2) {
  margin-top: calc(100vw / var(--viewport) * 120);
}
.experience dl {
  font-size: calc(100vw / var(--viewport) * 24);
  width: calc(100vw / var(--viewport) * 686);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  margin-top: calc(100vw / var(--viewport) * 24);
}
.experience dl dt {
  font-weight: bold;
  width: calc(100vw / var(--viewport) * 140);
}
.experience dl dd {
  width: calc(100% - calc(100vw / var(--viewport) * 140));
}
.experience dl dd p {
  font-weight: normal;
  line-height: 1.8;
}
.experience dl dd .big {
  font-size: calc(100vw / var(--viewport) * 28);
}
.experience h4 {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: bold;
  text-align: center;
  margin-top: calc(100vw / var(--viewport) * 160);
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
.experience .youtube {
  width: calc(100vw / var(--viewport) * 686);
  display: block;
  margin: 0 auto;
}
@media screen and (max-width:767px) {
  .experience .photo01 {
    width: calc(100vw / var(--viewport) * 480);
    display: block;
    margin: calc(100vw / var(--viewport) * 80) 0 0 auto;
  }
  .experience .photo02 {
    width: calc(100vw / var(--viewport) * 686);
    display: block;
    margin: calc(100vw / var(--viewport) * 80) auto 0 0;
  }
  .experience .photo03 {
    width: calc(100vw / var(--viewport) * 480);
    display: block;
    margin: calc(100vw / var(--viewport) * 80) 0 0 calc(100vw / var(--viewport) * 32);
  }
  .experience .photo04 {
    width: calc(100vw / var(--viewport) * 686);
    display: block;
    margin: calc(100vw / var(--viewport) * 80) 0 0 auto;
  }
}
@media screen and (min-width:768px) {
  .experience {
    /*background: url(../img/experience/bg_pc.jpg) top center no-repeat;
    background-size: cover;*/
    padding: min(calc(100vw / var(--viewport) * 160), 160px) 0;
    overflow: hidden;
  }
  .experience h2 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .experience .inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
  }
  .experience h3 {
    font-size: min(calc(100vw / var(--viewport) * 36), 36px);
    text-align: left;
    border-bottom: 2px solid #fff;
    margin: 0;
  }
  .experience ul:nth-child(n+2) {
    margin-top: min(calc(100vw / var(--viewport) * 100), 100px);
  }
  .experience .flex {
    display: flex;
    justify-content: space-between;
  }
  .experience .flex li:nth-child(1) {
    width: 55.56%;
  }
  .experience .flex li:nth-child(2) {
    width: 38.89%;
  }
  .experience .flex:nth-child(2n) {
    flex-direction: row-reverse;
  }
  .experience .flex.box02 {
    align-items: flex-end;
  }
  .experience .flex.box02 li:nth-child(2) {
    width: 48.15%;
    margin-left: -9.26%;
  }
  .experience .flex.box03 {
    position: relative;
  }
  .experience .photo04 {
    width: min(calc(100vw / var(--viewport) * 520), 520px);
    position: absolute;
    top: min(calc(100vw / var(--viewport) * 518), 518px);
    right: -6.06vw;
  }
  .experience dl {
    font-size: min(calc(100vw / var(--viewport) * 20), 20px);
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    margin-top: min(calc(100vw / var(--viewport) * 20), 20px);
  }
  .experience dl dt {
    width: 18.33%;
  }
  .experience dl dd {
    width: calc(100% - 18.33%);
  }
  .experience dl dd .big {
    font-size: min(calc(100vw / var(--viewport) * 24), 24px);
  }
  .experience h4 {
    font-size: min(calc(100vw / var(--viewport) * 24), 24px);
    margin-top: min(calc(100vw / var(--viewport) * 95), 95px);
    margin-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  .experience .youtube {
    width: min(calc(100vw / var(--viewport) * 640), 640px);
    padding-top: 33.55%;
  }
  @media screen and (min-width:1296px) {
    .experience .photo04 {
      right: -100px;
    }
  }
}

.gallery {
  color: #fff;
  background: #1A2836;
  padding: calc(100vw / var(--viewport) * 160) 0;
  overflow: hidden;
}
.gallery h2 {
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: bold;
  text-align: center;
}
.gallery .swiper {
  margin-top: calc(100vw / var(--viewport) * 160);
  overflow: visible;
}
.gallery .slide2024,
.gallery .slide2023 {
  padding: 0 calc(100vw / var(--viewport) * 32);
  position: relative;
}
.gallery .slide2024 .title,
.gallery .slide2023 .title {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 120);
  font-family: "Manrope", sans-serif;
  line-height: 1;
  position: absolute;
  top: calc(100vw / var(--viewport) * -80);
  right: calc(100vw / var(--viewport) * 32);
  z-index: 2;
  pointer-events: none;
}
.gallery .swiper-button-prev {
  left: 0;
}
.gallery .swiper-button-next {
  right: 0;
}
.gallery .swiper-button-prev,
.gallery .swiper-button-next {
  width: calc(100vw / var(--viewport) * 75.2);
  height: auto;
}
.gallery .swiper-button-prev:after,
.gallery .swiper-button-next:after {
  content: none;
}
@media screen and (min-width:768px) {
  .gallery {
    padding: min(calc(100vw / var(--viewport) * 160), 160px) 0;
  }
  .gallery h2 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  .gallery .swiper {
    margin-top: min(calc(100vw / var(--viewport) * 140), 140px);
  }
  .gallery .inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
  }
  .gallery .slide2024,
  .gallery .slide2023 {
    padding: 0;
  }
  .gallery .slide2024 .title,
  .gallery .slide2023 .title {
    font-size: min(calc(100vw / var(--viewport) * 100), 100px);
    transform: rotate(90deg);
    top: 0;
    right: min(calc(100vw / var(--viewport) * 50), 50px);
  }
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next {
    width: min(calc(100vw / var(--viewport) * 60), 60px);
  }
}

.profile {
  color: #fff;
  background: url(../img/profile/bg.jpg) top center no-repeat;
  background-size: auto 100%;
  height: calc(100vw / var(--viewport) * 1334);
  overflow: hidden;
}
.profile p {
  line-height: 1.8;
}
.profile .kamaitachi,
.profile .yamauchi,
.profile .hamaie {
  animation-duration: .5s;
}
.profile .kamaitachi h3 {
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: bold;
  line-height: 1;
  margin: calc(100vw / var(--viewport) * 20) 0;
}
.profile .yamauchi .name,
.profile .hamaie .name {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: bold;
  line-height: 1;
  margin: calc(100vw / var(--viewport) * 20) 0;
}
@media screen and (max-width:767px) {
  .profile .kamaitachi {
    font-size: calc(100vw / var(--viewport) * 24);
    padding-top: calc(100vw / var(--viewport) * 160);
    padding-left: calc(100vw / var(--viewport) * 32);
  }
  .profile .kamaitachi h2 {
    font-size: calc(100vw / var(--viewport) * 24);
    font-weight: bold;
  }
  .profile .yamauchi,
  .profile .hamaie {
    font-size: calc(100vw / var(--viewport) * 20);
    padding-left: calc(100vw / var(--viewport) * 32);
  }
  .profile .yamauchi {
    margin-top: calc(100vw / var(--viewport) * 456);
  }
  .profile .hamaie {
    margin-top: calc(100vw / var(--viewport) * 40);
  }
}
@media screen and (min-width:768px) {
  .profile {
    background: url(../img/profile/bg.jpg) top center no-repeat, url(../img/profile/bg_bg.jpg) top center no-repeat;
    background-size: auto 100%, 100% 100%;
    height: min(calc(100vw / var(--viewport) * 853), 853px);
    position: relative;
  }
  .profile .inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
  }
  .profile p {
    font-size: min(calc(100vw / var(--viewport) * 14), 14px);
  }
  .profile .kamaitachi {
    position: absolute;
    top: min(calc(100vw / var(--viewport) * 160), 160px);
    left: 0;
  }
  .profile .kamaitachi h3 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
    margin: min(calc(100vw / var(--viewport) * 20), 20px) 0;
  }
  .profile .yamauchi {
    position: absolute;
    top: min(calc(100vw / var(--viewport) * 550), 550px);
    left: 0;
  }
  .profile .hamaie {
    position: absolute;
    top: min(calc(100vw / var(--viewport) * 575), 575px);
    right: 0;
  }
  .profile .yamauchi .name,
  .profile .hamaie .name {
    font-size: min(calc(100vw / var(--viewport) * 24), 24px);
    margin: min(calc(100vw / var(--viewport) * 20), 20px) 0;
  }
}

.epilogue {
  background: url(../img/epilogue/bg_sp.jpg) top center no-repeat;
  background-size: auto 100%;
  padding: calc(100vw / var(--viewport) * 160) 0 0;
  height: calc(100vw / var(--viewport) * 1600);
}
.epilogue ul li:nth-child(1) {
  width: calc(100vw / var(--viewport) * 654);
  margin: 0 auto;
}
.epilogue ul li p {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 28);
  line-height: 2;
}
.epilogue ul li .logo {
  width: calc(100vw / var(--viewport) * 404);
  margin-top: calc(100vw / var(--viewport) * 80);
}
@media screen and (max-width:767px) {
  .epilogue ul li .kamaitachi {
    width: calc(100vw / var(--viewport) * 722);
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (min-width:768px) {
  .epilogue {
    background: url(../img/epilogue/bg_pc.jpg) top center no-repeat, url(../img/epilogue/bg_bg.jpg) top center no-repeat;
    background-size: auto 100%, 100% 100%;
    padding: 0;
    height: min(calc(100vw / var(--viewport) * 860), 860px);
  }
  .epilogue ul {
    width: min(calc(100vw / var(--viewport)* 1100), 1100px);
    height: min(calc(100vw / var(--viewport) * 832), 832px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .epilogue ul li:nth-child(1) {
    width: min(calc(100vw / var(--viewport) * 460), 460px);
    margin: min(calc(100vw / var(--viewport) * 160), 160px) 0 0;
  }
  .epilogue ul li p {
    font-size: min(calc(100vw / var(--viewport) * 20), 20px);
  }
  .epilogue ul li .logo {
    width: min(calc(100vw / var(--viewport) * 302), 302px);
    margin-top: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .epilogue ul li:nth-child(2) {
    width: 50%;
    background: url(../img/kamaitachi.png) center bottom no-repeat;
    background-size: min(calc(100vw / var(--viewport) * 745), 745px) min(calc(100vw / var(--viewport) * 832), 832px);
  }
}

.photos {
  background: #fff;
  padding: calc(100vw / var(--viewport) * 160) 0;
}
.photos h2 {
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
.photos .swiper-wrapper {
  transform: translate3d(0, 0, 0);
}
.photos .swiper {
  width: 100%;
  padding-left: calc(100vw / var(--viewport) * 32);
}
.photos .swiper .swiper-slide {
  /*margin: 0 calc(100vw / var(--viewport) * 20);*/
  border-radius: calc(100vw / var(--viewport) * 13);
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .photos {
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    padding: min(calc(100vw / var(--viewport) * 160), 160px) 0;
    overflow: hidden;
  }
  .photos h2 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .photos .swiper {
    width: min(calc(100vw / var(--viewport) * 1100), 1100px);
    padding-left: 0;
    overflow: visible;
  }
  .photos .swiper .swiper-slide {
    /*margin: 0 calc(100vw / var(--viewport) * 20);*/
    border-radius: min(calc(100vw / var(--viewport) * 10), 10px);
  }
}

#footer {
  text-align: center;
  background: #1A2836;
  padding: calc(100vw / var(--viewport) * 160) 0;
}
#footer .button a {
  color: var(--Blue);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: bold;
  text-align: center;
  background: #fff;
  width: calc(100vw / var(--viewport) * 686);
  height: calc(100vw / var(--viewport) * 144);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50vw;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  #footer {
    padding: min(calc(100vw / var(--viewport) * 160), 160px) 0;
  }
  #footer .button a {
    font-size: min(calc(100vw / var(--viewport) * 20), 20px);
    width: min(calc(100vw / var(--viewport) * 343), 343px);
    height: min(calc(100vw / var(--viewport) * 72), 72px);
  }
}

[data-animate="slideInLeft"],
[data-animate="slideInRight"] {
  opacity: 0;
}