@charset "UTF-8";

html {
  font-size: 10px;
}

@media screen and (max-width: 2100px) {
  html {
    font-size: calc(10 * (100vw / 2100));
  }
}


/***** 共通 *****/
body {
  animation: fadeIn 1s ease 1s 1 normal forwards;
  opacity: 0;
}

.delayed-fade-in {
  animation: fadeIn 1s ease 1.5s 1 normal forwards;
  opacity: 0;
}

.delayed-fade-in02 {
  animation: fadeIn 1s ease 2s 1 normal forwards;
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.l-header,
.l-footer {
  display: none;
}

.l-footer {
  padding: 0;
}

.l-container {
  width: auto;
}

.l-container:after {
  display: none;
}

img {
  max-width: 100%;
}

/**a img {
  transition: 0.3s;
}

a img:hover {
  opacity: 0.7;
}**/


/***** スクロール *****/
#container {
  width: 100%;
  height: 100vh;
  scroll-snap-type: both mandatory;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-align: start;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: "Times New Roman";
}

#container::-webkit-scrollbar {
  display: none;
}

.icon {
  position: fixed;
  top: 8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 22.2rem;
  margin-left: 0.4rem;
  transition: opacity 0.3s ease;
}

.icon02 {
  width: 24.3rem;
  position: fixed;
  top: 4.9rem;
  left: 4.4rem;
  z-index: 1;
  display: none;
}

.icon03 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
  z-index: 1;
  display: none;
}

.icon04 {
  width: 49.1rem;
  position: fixed;
  bottom: 3rem;
  left: 3.7rem;
  z-index: 1;
  display: none;
}

.icon05 {
  width: 28.8rem;
  position: fixed;
  bottom: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: none;
}

.icon06 {
  width: 18.7rem;
  position: fixed;
  bottom: 3rem;
  right: 3.7rem;
  z-index: 1;
  display: none;
}

#icon,
#icon02,
#icon03,
#icon04,
#icon05,
#icon06 {
  opacity: 0;
  transition: opacity 0.5s;
}

#icon.block,
#icon02.block,
#icon03.block,
#icon04.block,
#icon05.block,
#icon06.block {
  opacity: 1;
  display: block;
}

#container div {
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

#container div img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

#background {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#background:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -200;
  width: 100%;
  height: 100vh;
  background: url("../img/img01.jpg") no-repeat center;
  background-size: cover;
}

#background .txt01 {
  width: 24.3rem;
  position: fixed;
  top: 4.9rem;
  left: 4.4rem;
}

#background .txt02 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
}

#background .logo {
  width: 52.7rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/***** マウスオーバー *****/
.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  height: 100vh;
}

.image-container_flex {
  display: flex;
}

.image-text {
  position: absolute;
  color: #fff;
  font-size: 2.13rem;
  display: none;
  animation-name: fadeInOut;
  animation-duration: 0.5s;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger {
  opacity: 0;
}

.last .txt01 {
  width: 24.3rem;
  position: fixed;
  top: 4.9rem;
  left: 4.4rem;
}

.last .txt02 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
}

.last .txt03 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
}

.last .txt04 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
}

.last .txt05 {
  width: 11.5rem;
  position: fixed;
  top: 4.9rem;
  right: 3.7rem;
}

/***** スライダー ******/
.slideshow-container {
  position: relative;
  width: 100%;
  /* margin: auto; */
  z-index: 0;
  background: #fff;
}

.fade {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

.number-container {
  position: absolute;
  top: 2rem;
  right: 2rem;
  /* transform: translateX(-50%); */
  display: flex;
  justify-content: end;
  align-items: start;
  color: #fff;
}

.number {
  cursor: pointer;
  font-size: 1.5rem;
  margin: 0 .8rem;
}

.underline {
  width: 3rem;
  height: 0.1rem;
  background-color: black;
  margin-top: 1.5rem;
}

/***** クレジット *****/


/** ALL **/

.all01 {
  bottom: 11.4rem;
  right: 12.5rem;
  text-align: center;
  font-size: 2.3rem;
}

.circle01 {
  position: absolute;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  height: 14.3rem;
  width: 14.3rem;
  bottom: 5.7rem;
  right: 7.6rem;
  display: none;
}

.all02 {
  bottom: 11.4rem;
  right: 9.4rem;
  text-align: center;
  font-size: 2.3rem;
}

.circle02 {
  position: absolute;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  height: 14.3rem;
  width: 14.3rem;
  bottom: 5.7rem;
  right: 4.4rem;
  display: none;
}

/**LOOK02**/
.credit02_1 {
  top: 67.88rem;
  left: 45.7rem;
}

.credit02_2 {
  top: 75.3rem;
  left: 63.7rem;
}

.credit02_3 {
  bottom: 9.3rem;
  left: 19rem;
}



/**LOOK03**/
.credit03_1 {
  top: 39rem;
  right: 18rem;
}

.credit03_2 {
  bottom: 43rem;
  right: 33rem;
}

.credit03_3 {
  bottom: 35rem;
  right: 11rem;
}


/**LOOK05**/
.credit05_1 {
  top: 29rem;
  right: 6rem;
}

.credit05_2 {
  top: 39rem;
  right: 22rem;
}

.credit05_3 {
  bottom: 28rem;
  right: 15rem;
}

/**LOOK07**/
.credit07_1 {
  top: 50rem;
  right: 26rem;
}

.credit07_2 {
  bottom: 23rem;
  30rem: 10px;
  right: 51rem;
}

/**LOOK08**/
.credit08_1 {
  bottom: 29rem;
  right: 12rem;
}

/**LOOK09**/
.credit09_1 {
  top: 42rem;
  right: 52rem;
}

.credit09_2 {
  bottom: 46rem;
  right: 15rem;
}

.credit09_3 {
  bottom: 29rem;
  right: 20rem;
}

.credit09_4 {
  bottom: 9rem;
  right: 50rem;
}

/**LOOK10**/
.credit10_1 {
  top: 21rem;
  right: 9rem;
}

.credit10_2 {
  top: 26rem;
  right: 12rem;
}

/**LOOK11**/
.credit11_1 {
  top: 39rem;
  right: 16rem;
}

/**LOOK12**/
.credit12_1 {
  bottom: 28rem;
  right: 60rem;
}

/**LOOK14**/
.credit14_1 {
  top: 50rem;
  right: 20rem;
}

.credit14_2 {
  top: 57rem;
  right: 20.2rem;
}

.credit14_3 {
  bottom: 28rem;
  right: 57rem;
}

/**LOOK15**/
.credit15_1 {
  top: 27rem;
  right: 16rem;
}

.credit15_2 {
  top: 33rem;
  right: 23rem;
}

.credit15_3 {
  bottom: 33rem;
  right: 9rem;
}

/**LOOK16**/
.credit16_1 {
  top: 27rem;
  right: 15rem;
}

.credit16_2 {
  top: 44rem;
  right: 66rem;
}

.credit16_3 {
  top: 51rem;
  right: 47rem;
}

.credit16_4 {
  bottom: 23rem;
  right: 64rem;
}

/**LOOK17**/
.credit17_1 {
  top: 47rem;
  right: 21rem;
}

/**LOOK18**/
.credit18_1 {
  top: 33rem;
  right: 9rem;
}

.credit18_2 {
  bottom: 40rem;
  right: 62rem;
}

.credit18_3 {
  bottom: 24rem;
  right: 18rem;
}

/**LOOK19**/
.credit19_1 {
  top: 36rem;
  right: 54rem;
}

.credit19_2 {
  top: 63rem;
  right: 14rem;
}

.credit19_3 {
  bottom: 29rem;
  right: 14rem;
}

/**LOOK20**/
.credit20_1 {
  top: 54rem;
  right: 61rem;
}

.credit20_2 {
  bottom: 28rem;
  right: 23rem;
}

.credit20_3 {
  bottom: 6rem;
  right: 58rem;
}

/**LOOK21**/
.credit21_1 {
  top: 25rem;
  right: 12rem;
}

.credit21_2 {
  top: 37rem;
  right: 51rem;
}

.credit21_3 {
  top: 43rem;
  right: 42rem;
}

.credit21_4 {
  bottom: 33rem;
  right: 24rem;
}

.credit21_5 {
  bottom: 25rem;
  right: 20rem;
}

/**LOOK22**/
.credit22_1 {
  top: 36rem;
  right: 46rem;
}

.credit22_2 {
  top: 43rem;
  right: 57rem;
}

.credit22_3 {
  bottom: 13rem;
  right: 53rem;
}

/**LOOK23**/
.credit23_1 {
  top: 28rem;
  right: 59rem;
}

.credit23_2 {
  top: 37rem;
  right: 40rem;
}

.credit23_3 {
  bottom: 25rem;
  right: 49rem;
}

/**LOOK25**/
.credit25_1 {
  top: 46rem;
  right: 65rem;
}

.credit25_2 {
  bottom: 25rem;
  right: 19rem;
}

/**LOOK26**/
.credit26_1 {
  top: 43rem;
  right: 58rem;
}

.credit26_2 {
  bottom: 24rem;
  right: 17rem;
}

/**LOOK27**/
.credit27_1 {
  top: 30rem;
  right: 11rem;
}

.credit27_2 {
  top: 48rem;
  right: 52rem;
}

.credit27_3 {
  bottom: 21rem;
  right: 25rem;
}

.credit27_4 {
  bottom: 14rem;
  right: 32rem;
}

/**LOOK28**/
.credit28_1 {
  top: 32rem;
  right: 10rem;
}

.credit28_2 {
  bottom: 38rem;
  right: 10rem;
}

.credit28_3 {
  bottom: 26rem;
  right: 60rem;
}

/**LOOK30**/
.credit30_1 {
  top: 27rem;
  right: 54rem;
}

.credit30_2 {
  bottom: 43rem;
  right: 13rem;
}

.credit30_3 {
  bottom: 11rem;
  right: 64rem;
}

/**LOOK31**/
.credit31_1 {
  top: 42rem;
  right: 11rem;
}

.credit31_2 {
  top: 81rem;
  right: 17rem;
}

/**LOOK32**/
.credit32_1 {
  top: 61rem;
  right: 11rem;
}

.credit32_2 {
  bottom: 43rem;
  right: 33rem;
}

/**LOOK33**/
.credit33_1 {
  bottom: 43rem;
  right: 33rem;
}