@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/

/* visual
===================================*/
#visual { display: block; position: relative; width: 100vw; height: 100vh; padding: 0; }
.visual__desc { width: 100%; position: absolute; left: 50%; top: calc( 50% - 5em ); transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.visual__desc img { width: 100%; height: auto; }
.visual__desc--logo { max-width: 43vw; }
.visual-slide { display: block; position: relative; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.visual-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.visual-slide .swiper-container { display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.visual-slide .swiper-slide { width: 100vw; height: 100vh; }
.visual-slide .swiper-slide img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -o-object-fit: cover; object-fit: cover; }
.visual-slide .swiper-slide-prev img,
.visual-slide .swiper-slide-active img { -webkit-transition: all 6000ms linear; transition: all 6000ms linear; }
.visual-slide .swiper-progress-bar { font-size: inherit; position: absolute; left: 50%; bottom: 5.9em; width: 12.4em; display: block; z-index: 1; height: 1px; transform: translateX(-50%); }
.visual-slide .swiper-progress-bar .slide_progress-bar { position: absolute; height: 1px; background: #F5EAD1; width: 100%; clear: both; opacity: 0; left: 0; top: 0; }
.visual-slide .swiper-progress-bar .slide_progress-bar:after { content: ''; position: absolute; top: 0; left: 0; background: #CEA248; height: 100%; width: 0; }
.visual-slide .swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
.visual-slide .swiper-progress-bar.active.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition: 0.1s width linear; transition-duration: 4s; }
.visual-slide .swiper-pagination { position: absolute; top: auto; left: 50%; bottom: 5.15em; width: auto; transform: translateX(-50%); }
.visual-slide .swiper-pagination span { font-family: 'Questrial', sans-serif; font-size: 1.2em; font-weight: bold; line-height: 1; color: #fff; display: inline-block; }
.visual-slide .swiper-pagination span:first-child { margin-right: 16.1em; }
.visual-slide .swiper-button { font-size: 1em; margin: 0; width: auto; height: auto; left: calc( 50% - 1.8em ); top: auto; right: auto; bottom: 4em; }
.visual-slide .swiper-button:after { content: ''; font-family: inherit; font-size: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; width: 1em; height: 1em; background: url(../../img/icon/arrow1.svg) no-repeat; background-size: 100% 100%; background-position: center; }
.visual-slide .swiper-button svg { display: block; width: 3.8em; height: 3.8em; transform: rotate(270deg); }
.visual-slide .swiper-button svg circle { fill: transparent; stroke: #E8E8E8; stroke-width: 2; cx: 1.8em; cy: 1.8em; r: 1.7em; stroke-dasharray: 22em; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.visual-slide .swiper-button svg:last-child { position: absolute; left: 0; top: 0; z-index: 2; }
.visual-slide .swiper-button svg:last-child circle { stroke: #CEA248; stroke-dashoffset: 22em; }
.visual-slide .swiper-button-next { left: calc( 50% + 13.5em ); }
.visual-slide .swiper-button-prev { left: calc( 50% - 17.5em ); transform: rotate(180deg); }
.visual-slide .swiper-button-next:after{ margin-bottom: .1em; }
.visual-slide .swiper-button-prev:after{ margin-top: .1em; }
.visual-slide .swiper-button:hover svg:last-child circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms; }
.visual-scroll{ position: absolute; left: 5em; bottom: 5em; font-size: 1.3em; font-weight: bold; color: #fff; font-family: var(--ff-lato); writing-mode: vertical-rl; text-orientation: mixed; -webkit-text-orientation: mixed; letter-spacing: .025em; line-height: calc(17/13); z-index: 2; }
.visual-scroll i {margin-top: 1.5384em; }
.visual-scroll svg{ width: .8461em; height: 3.5384em; }
/* Animate each path */
.visual-scroll .path1 {
  animation: fade 1.5s infinite;
}
.visual-scroll .path2 {
  animation: fade 1.5s infinite;
  animation-delay: 0.3s;
}
.visual-scroll .path3 {
  animation: fade 1.5s infinite;
  animation-delay: 0.6s;
}

@media only screen and (max-width: 768px) {
  .visual-scroll{ visibility: hidden; }
}

@media only screen and (max-width: 768px) {
  #visual {height: calc(100svh - 22.2em); }
  .visual-scroll{ display: none; }
  .visual-slide .swiper-slide { height: 44.5em; height: calc(100svh - 22.2em); }
  .visual__desc { top: calc( 50% - 3em ); }
  .visual-slide .swiper-slide{ overflow: hidden; }
  .visual-slide .swiper-button{ bottom: 0; }
  .visual-slide .swiper-button svg{ width: 3.6em; height: 3.6em; }
  .visual-slide .swiper-button:after{ background: url(../../img/icon/arrow2.svg) no-repeat; }
  .visual-slide .swiper-button-prev{ left: calc(36/375 * 100%); }
  .visual-slide .swiper-button-next{ left: unset; right: calc(36/375 * 100%); }
  .visual-slide .swiper-pagination{ bottom: 1.3em; width: 19.4em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .visual-slide .swiper-pagination span{ color: var(--main-color); }
  .visual-slide .swiper-pagination span:first-child{ margin: 0; }
  .visual-slide .swiper-progress-bar{ bottom: 1.9em; width: 10em; }
}