html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
}

.currentPage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}


.titVer {
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 21;
  color: #fff;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.titVer::after {
  -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  margin-left: -1px;
  width: 1px;
  height: 90px;
  background: #ccc;
  content: '';
}

@media screen and (max-width: 768px) {
  .titVer {
    font-size: min(3.5vw, 20px);
    top: 50px;
    left: 10px;
  }

  .titVer::after {
    top: calc(100% + 10px);
  }
}


.yt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;  
  z-index: -1;
}

.yt video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none
}


/*@media (min-aspect-ratio: 16/9) {
  .yt {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .yt {
    width: auto;
    height: 100%;
  }
}*/


.main-slider {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  background: #000;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-slide .bgCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.block05 .bgCover {
  background: rgba(0, 0, 0, 0.2);
}

.block05.swiper-slide::after {
  background: rgba(0, 0, 0, 0.2)
}

.block05 .gaikanImg {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
}

.block05 .gaikanImg img {
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .block05 .gaikanImg img {
    height: auto;
    width: 100%;
  }

}

.swiper-slide .txt {
  position: absolute;
  z-index: 120;
  color: #fff;
  width: fit-content;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: 14px;
  -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.74);
  -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.74);
  -ms-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.74);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.74);
}

.swiper-slide .txt .para {
  padding: 0 50px;
  font-feature-settings: 'palt';
}

.swiper-slide .cap {
  position: absolute;
  z-index: 120;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  color: white;
}

.swiper-slide .txt h3 {
  text-align: center;
  margin-bottom: 30px;
}

.swiper-slide .txt h3 span {
  display: block;
}

.swiper-slide .txt h3 .en-sm {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  line-height: 1;
  font-size: 25px;
}

.swiper-slide .txt h3 .en {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 1;
  font-size: 100px;

}

.swiper-slide .txt h3 .jp {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

.swiper-slide .txt h3 .jp sup {
  font-size: 10px;
}

.swiper-slide .txt h4 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
}

.swiper-slide .txt h4 sup {
  font-size: 12px;
}

.swiper-slide .txt .viewMore {
  position: relative;
  display: block;
  margin-top: 50px;
  max-width: 247px;
  width: 100%;
  height: 48px;
  background: url("../imgs/view-more-sinple.svg") no-repeat top left / 100% 100%;
  transition: 0.1s;
}

.swiper-slide .txt .viewMore span {
  position: absolute;
  top: 6px;
  left: 5px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
}

.swiper-slide .txt .viewMore span.maru {
  position: absolute;
  top: -1px;
  right: 0px;
  left: auto;
  display: block;
  width: 50px;
  height: 50px;
  animation: zoomFadeOutBlue 2s infinite linear;
}


.swiper-slide .txt .viewMore:hover span {
  transform: translateX(10px);
}

.swiper-slide .txt .viewMore:hover span.maru {
  transform: translateX(0px);
}


@keyframes zoomFadeOutBlue {
  0% {
    transform: scale(0);
    opacity: 0
  }

  40% {
    transform: scale(1.5);
    opacity: .5
  }

  80% {
    transform: scale(3);
    opacity: 0
  }

  100% {
    transform: scale(3);
    opacity: 0
  }
}


@media screen and (max-width: 1600px) {
  .swiper-slide .txt h3 .en {
    font-size: 77px;
  }
}

@media screen and (max-width: 768px) {

  .swiper-slide .txt {
    width: 85%;
    margin: 0 auto;
    text-align: center;
  }

  .swiper-slide .txt h3 {
    margin-bottom: 10vw;
  }

  .swiper-slide .txt h3 .en-sm {
    font-size: 4vw;
  }

  .swiper-slide .txt h3 .en {
    font-size: 15vw;
  }

  .swiper-slide .txt h3 .jp {
    font-size: 3.8vw;
  }

  .swiper-slide .txt h4 {
    font-size: 5vw;
    margin-bottom: 5vw;
  }

  .swiper-slide .txt p {
    font-size: 3.5vw;
  }

  .swiper-slide .txt .viewMore {
    margin-top: 10vw;
    max-height: 48px;
    width: 60vw;
    height: 12vw;
  }

  .swiper-slide .txt .viewMore span {
    top: 1vw;
  }

  .swiper-slide .para {
    display: inline-block;
    padding: 0 !important;
    text-align: left;
  }

  .swiper-slide .txt h3 {
    text-align: center;
  }

}


/* MV */
/*.mv::after {
  background: rgba(0, 0, 0, 0);
}

.mv .inner {
  position: relative;
  background: #000;
  width: 100%;
  height: 100%;
}

.mv .inner #ytPlayer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  aspect-ratio: 16/9;
}

.mv .inner .mv-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}

.mv .inner .mv-img .caption {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #ffffff;
}

.mv .inner .mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.mv .inner .mv-txt {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 23.4%;
    transform: translateY(-50%)
}

.mv-skip,
.mv-replay {
  
  position: absolute;
  bottom: 60px;
  right: 10px;
  
  width: 90px;
  padding: 5px 0;
  text-align: center;
  background: rgba(21, 21, 21, 0.8);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
  cursor: pointer;


  z-index: 100;
  display: none;
}

.mv-skip:hover,
.mv-replay:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}

@media (min-aspect-ratio: 16/9) {
  .mv .inner #ytPlayer {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .mv .inner #ytPlayer {
    width: auto;
    height: 100%;
  }
}

@media screen and (max-width: 768px) {
  .mv .inner .mv-img {
    width: 100%;
    height: 100%;
    background: #000;
  }

  .mv .inner .mv-img img {
    height: auto;
    width: 100%;
    max-width: unset;
  }

  .mv-skip,
  .mv-replay {
    font-size: min(12px, 14px);
    padding: 5px 0;
    bottom:10px
  }

  .mv-skip:focus,
  .mv-replay:focus,
  .mv-skip:hover,
  .mv-replay:hover {
    background: rgba(21, 21, 21, 0.8);
    color: #fff;
    outline: none;
  }

}*/

/* MV NEW */
.mv {
  position: relative;
  overflow: hidden;
  line-height: 0;
  width: 100%;
  height: 100vh;
  background: #000000;
}

.mv:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.mv:after {
  display: none;
}

.mv .ytplayerMV {
  position: absolute;
  z-index: 1;
  transition: 1s;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

@media screen and (orientation: portrait) {
  #ytplayerMV {
    display: none;
  }
}

@media screen and (orientation: landscape) {
  #ytplayerMVSP {
    display: none;
  }
}

#imgMV {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 2;
}

#imgMV img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#btn-control {
  position: absolute;
  bottom: 60px;
  right: 10px;
  background: #fff;
  z-index: 5;
}

#btn-control .btn-mv {
  width: 90px;
  padding: 5px 0;
  text-align: center;
  background: rgba(21, 21, 21, 0.8);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
  cursor: pointer;
}

#btn-control .btn-mv:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}

#btn-replay {
  display: none;
}

@media screen and (max-width: 768px) {

  #imgMV {
    width: 100%;
    height: 100%;
    background: #000;
  }

  #imgMV img {
    max-width: unset;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }


  #btn-control {
    bottom: 90px;
  }

  #btn-control .btn-mv {
    font-size: min(12px, 14px);
    padding: 5px 0;
  }

  #btn-control .btn-mv:focus,
  #btn-control .btn-mv:focus,
  #btn-control .btn-mv:hover,
  #btn-control .btn-mv:hover {
    background: rgba(21, 21, 21, 0.8);
    color: #fff;
    outline: none;
  }  
}

/* END MV NEW */


/* BLOCK 01*/
.block01 .txt .para {
  padding: 0px;
}

.block01 .txt h3 {
  text-align: center;
  margin-bottom: 30px;
  max-width: 400px;
}

@media screen and (max-width: 1600px) {
  .block01 .txt h3 {
    margin-bottom: 40px;
    max-width: 327px;
  }
}

@media screen and (max-width: 768px) {
  .block01 .txt {
    width: 100%;
  }

  .block01 .txt h3 {
    width: 75%;
    max-width: unset;
    margin: 0 auto 12vw;    
  }

  .block01 .txt h3 img {
    width: 100%;
  }

  .block01 .txt p {
    font-size: 2.8vw;
    line-height: 2.5;
  }
}

/* BLOCK 06*/
.block06 {
  background: #fff !important;
  overflow: auto !important;

}

.block06 .bgCover {
  display: none;
}

.blockEnd.autoH {
  height: auto !important;
}

.news,
.entry,
.entryStep,
.bnrCamp,
.contentArea,
.bottomArea,
.pageDirection,
#gFooter {
  position: relative;
  z-index: 80;
}

/* PAGINATION */

.swiper-pagination {
  z-index: 200;
  position: absolute;
  right: 5px;
  bottom: 50vh;
  transform: translate(0, 50%);
}


.swiper-pagination-bullet {
  width: 2px;
  height: 2px;
  display: block;
  background: #999999;
  border-radius: 3px;
  margin: 0 0 5px;
  transition: height .5s ease, background-color .5s ease;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  width: 2px;
  height: 50px;
  display: block;
  background: #fff;
  border-radius: 3px;
  margin: 0 0 5px;
}



/* Keyframes */
@-webkit-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }

  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@-moz-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }

  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@-o-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }

  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }

  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}


.bnrCamp {
  text-align: center;
  padding: 30px 20px 0;
}

.bnrCamp .tit {
  font-size: 16px;
  margin-bottom: 30px;
}

.bnrCamp a {
  max-width: 350px;
  margin: auto;
  display: block;
}