@charset "UTF-8";
/* fvアニメーション
----------------------------------------------- */
.fv_box {
  height: calc(100vh - 66px);
  height: calc(var(--vh, 1vh) * 100 - 66px);
  min-height: 370px;
  position: relative;
  overflow: hidden;
}
@media print, screen and (min-width: 1000px) {
  .fv_box {
    height: calc(100vh - 138px);
    height: calc(var(--vh, 1vh) * 100 - 138px);
  }
}

.fv_img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fv_img_inner[data-left=true] .fv_img_filter_obj, .fv_img_inner[data-right=true] .fv_img_filter_obj {
  animation-name: fv_open;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0, 0, 0, 0.9);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
}

.fv_img_inner[data-left=false] .fv_img_filter_obj, .fv_img_inner[data-right=false] .fv_img_filter_obj {
  animation-name: fv_close;
  animation-duration: 0.9s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
}

.fv_img_bg {
  background: center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000px;
  right: 50%;
  overflow: hidden;
  transform: skew(-45deg);
}

@media print, screen and (min-width: 781px) {
  .fv_img_bg[data-left_img="1"] .fv_img_bg_obj {
    background-image: url(../img/fv01.jpg); /* フォールバック */
  }
  .fv_img_bg[data-left_img="2"] .fv_img_bg_obj, 
  .fv_img_bg[data-right_img="2"] .fv_img_bg_obj {
    background-image: url(../img/fv03.jpg); /* フォールバック */
  }
  .fv_img_bg[data-left_img="3"] .fv_img_bg_obj, 
  .fv_img_bg[data-right_img="3"] .fv_img_bg_obj {
    background-image: url(../img/fv04.jpg); /* フォールバック */
  }
  .fv_img_bg[data-left_img="4"] .fv_img_bg_obj, 
  .fv_img_bg[data-right_img="4"] .fv_img_bg_obj {
    background-image: url(../img/fv05.jpg); /* フォールバック */
  }

  /* WebP対応ブラウザ用 */
  @supports (background-image: url(../img/fv01.webp)) {
    .fv_img_bg[data-left_img="1"] .fv_img_bg_obj {
      background-image: url(../img/fv01.webp);
    }
    .fv_img_bg[data-left_img="2"] .fv_img_bg_obj, 
    .fv_img_bg[data-right_img="2"] .fv_img_bg_obj {
      background-image: url(../img/fv03.webp);
    }
    .fv_img_bg[data-left_img="3"] .fv_img_bg_obj, 
    .fv_img_bg[data-right_img="3"] .fv_img_bg_obj {
      background-image: url(../img/fv04.webp);
    }
    .fv_img_bg[data-left_img="4"] .fv_img_bg_obj, 
    .fv_img_bg[data-right_img="4"] .fv_img_bg_obj {
      background-image: url(../img/fv05.webp);
    }
  }
}


@media print, screen and (max-width: 780px) {
  .fv_img_bg[data-left_img="1"] .fv_img_bg_obj {
    background-image: url(../img/fv01_sp.jpg);
  }
  .fv_img_bg[data-left_img="2"] .fv_img_bg_obj, .fv_img_bg[data-right_img="2"] .fv_img_bg_obj {
    background-image: url(../img/fv03_sp.jpg);
  }
  .fv_img_bg[data-left_img="3"] .fv_img_bg_obj, .fv_img_bg[data-right_img="3"] .fv_img_bg_obj {
    background-image: url(../img/fv04_sp.jpg);
  }
  .fv_img_bg[data-left_img="4"] .fv_img_bg_obj, .fv_img_bg[data-right_img="4"] .fv_img_bg_obj {
    background-image: url(../img/fv05_sp.jpg);
  }
}

.fv_img_bg_obj {
  transform: skew(45deg);
  transform-origin: 25% center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -50vw;
  width: 100vw;
  background-size: cover;
  background-position: center;
}
.fv_img_bg_obj[data-left_img_zoom=true], .fv_img_bg_obj[data-right_img_zoom=true] {
  animation-name: fv_zoom;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

.fv_img_filter {
  position: absolute;
  top: -25vw;
  bottom: -25vw;
  left: -250vw;
  right: 50%;
  overflow: hidden;
  transform: skew(-45deg);
  z-index: 10;
}

.fv_img_filter_obj {
  background-color: #848484;
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: 0;
  opacity: 0;
  transform: rotate(0deg);
  transform-origin: right center;
}

.fv_img_left .fv_img_bg[data-left_img="1"] {
  overflow: visible;
}
.fv_img_left .fv_img_writings[data-left_img="3"] {
  background-image: url(../img/fv04_notes.png);
  background-size: cover;
  position: absolute;
  left: 5vw;
}
.fv_img_left .fv_img_writings_en[data-left_img="3"] {
  background-image: url(../img/fv04_notes_en.png);
  background-size: cover;
}
@media print, screen and (min-width: 781px) {
  .fv_img_left .fv_img_writings[data-left_img="3"] {
    width: 410px;
    height: 147px;
    top: 26vh;
  }
  .fv_img_left .fv_img_writings_en[data-left_img="3"] {
    width: 410px;
    height: 139px;
  }
}
@media print, screen and (max-width: 780px) {
  .fv_img_left .fv_img_writings[data-left_img="3"] {
    width: 240px;
    height: 86px;
    top: 20vh;
  }
  .fv_img_left .fv_img_writings_en[data-left_img="3"] {
    height: 82px;
  }
}

.fv_img_right .fv_img_bg {
  right: -1000px;
  left: 50%;
}
.fv_img_right .fv_img_bg[data-right_img="1"] {
  overflow: visible;
}
.fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj {
  top: 37%;
  overflow: hidden;
}
.fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj div {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-delay: 0s;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}
.fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj_en {
  top: 42%;
}
.fv_img_right .fv_img_bg_obj {
  left: -50vw;
  transform-origin: 75% center;
}
.fv_img_right .fv_img_filter {
  top: -25vw;
  bottom: -25vw;
  right: -250vw;
  left: 50%;
}
.fv_img_right .fv_img_filter_obj {
  background-color: #323232;
  right: -100%;
  left: 0;
  transform: rotate(0deg);
  transform-origin: left center;
}
.fv_img_right .fv_img_writings[data-right_img="2"] {
  background-image: url(../img/fv03_notes.png);
  background-size: cover;
  position: absolute;
  right: 5vw;
}
.fv_img_right .fv_img_writings[data-right_img="4"] {
  background-image: url(../img/fv05_notes.png);
  background-size: cover;
  position: absolute;
  right: 5vw;
}
.fv_img_right .fv_img_writings_en[data-right_img="2"] {
  background-image: url(../img/fv03_notes_en.png);
  background-size: cover;
}
.fv_img_right .fv_img_writings_en[data-right_img="4"] {
  background-image: url(../img/fv05_notes_en.png);
  background-size: cover;
}
@media print, screen and (min-width: 781px) {
  .fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj {
    background-image: url(../img/fv02.png);
    width: 548px;
    height: 130px;
    left: calc(5vw - 365px);
    right: 0;
  }
  .fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj_en {
    background-image: url(../img/fv02_en.png);
    height: 93px;
    left: calc(5vw - 335px);
  }
  .fv_img_right .fv_img_writings[data-right_img="2"] {
    width: 460px;
    height: 144px;
    bottom: 34vh;
  }
  .fv_img_right .fv_img_writings[data-right_img="4"] {
    width: 414px;
    height: 152px;
    bottom: 34vh;
    right: 5vw;
  }
  .fv_img_right .fv_img_writings_en[data-right_img="2"] {
    height: 148px;
    bottom: 28vh;
  }
  .fv_img_right .fv_img_writings_en[data-right_img="4"] {
    height: 192px;
    bottom: 28vh;
  }
}
@media print, screen and (max-width: 780px) {
  .fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj {
    background-image: url(../img/fv02_sp.png);
    width: 320px;
    height: 183px;
    left: calc(-50vw + 50px);
    right: 0;
  }
  .fv_img_right .fv_img_bg[data-right_img="1"] .fv_img_bg_obj_en {
    background-image: url(../img/fv02_en.png);
    height: 53px;
    top: 48%;
    left: calc(5vw - 153px);
  }
  .fv_img_right .fv_img_writings[data-right_img="2"] {
    width: 260px;
    height: 81px;
    bottom: 27vh;
  }
  .fv_img_right .fv_img_writings[data-right_img="4"] {
    width: 260px;
    height: 96px;
    bottom: 27vh;
  }
  .fv_img_right .fv_img_writings_en[data-right_img="2"] {
    width: 250px;
    height: 80px;
    bottom: 27vh;
  }
}

.fv_img_button {
  position: absolute;
  bottom: 30px;
  right: 5vw;
  z-index: 20;
}

.fv_img_button_box {
  height: 6px;
  background: #fff;
  cursor: pointer;
}
@media print, screen and (min-width: 1000px) {
  .fv_img_button_box {
    width: 60px;
  }
}
@media print, screen and (max-width: 999px) {
  .fv_img_button_box {
    width: 30px;
  }
}

.fv_img_button_active {
  background: #848484;
}
@media print, screen and (min-width: 1000px) {
  .fv_img_button_active {
    width: 100px;
  }
}
@media print, screen and (max-width: 999px) {
  .fv_img_button_active {
    width: 50px;
  }
}

.fv_move_button {
  position: absolute;
  z-index: 20;
}
@media print, screen and (min-width: 1000px) {
  .fv_move_button {
    width: 50px;
    bottom: 55px;
    right: 4.2vw;
  }
}
@media print, screen and (max-width: 999px) {
  .fv_move_button {
    width: 45px;
    bottom: 55px;
    right: 3.4vw;
  }
}

@keyframes fv_zoom {
  0% {
    transform: scale(1) skew(45deg);
  }
  100% {
    transform: scale(1.25) skew(45deg);
  }
}
@keyframes fv_open {
  0% {
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
    opacity: 1;
  }
}
@keyframes fv_close {
  33% {
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
    opacity: 1;
  }
}
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}/*# sourceMappingURL=top.css.map */