@charset "UTF-8";

/*---------------------------------------------
  3D
  ---------------------------------------------*/

 :root {
  --css3d-layer-margin: 1.2px;
  --css3d-layer-direction: -1;
 }

.css3d-layer div:nth-of-type(1)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 0));}
.css3d-layer div:nth-of-type(2)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 1));}
.css3d-layer div:nth-of-type(3)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 2));}
.css3d-layer div:nth-of-type(4)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 3));}
.css3d-layer div:nth-of-type(5)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 4));}
.css3d-layer div:nth-of-type(6)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 5));}
.css3d-layer div:nth-of-type(7)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 6));}
.css3d-layer div:nth-of-type(8)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 7));}
.css3d-layer div:nth-of-type(9)  {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 8));}
.css3d-layer div:nth-of-type(10) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 9));}
.css3d-layer div:nth-of-type(11) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 10));}
.css3d-layer div:nth-of-type(12) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 11));}
.css3d-layer div:nth-of-type(13) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 12));}
.css3d-layer div:nth-of-type(14) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 13));}
.css3d-layer div:nth-of-type(15) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 14));}
.css3d-layer div:nth-of-type(16) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 15));}
.css3d-layer div:nth-of-type(17) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 16));}
.css3d-layer div:nth-of-type(18) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 17));}
.css3d-layer div:nth-of-type(19) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 18));}
.css3d-layer div:nth-of-type(20) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 19));}
.css3d-layer div:nth-of-type(21) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 20));}
.css3d-layer div:nth-of-type(22) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 21));}
.css3d-layer div:nth-of-type(23) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 22));}
.css3d-layer div:nth-of-type(24) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 23));}
.css3d-layer div:nth-of-type(25) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 24));}
.css3d-layer div:nth-of-type(26) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 25));}
.css3d-layer div:nth-of-type(27) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 26));}
.css3d-layer div:nth-of-type(28) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 27));}
.css3d-layer div:nth-of-type(29) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 28));}
.css3d-layer div:nth-of-type(30) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 29));}
.css3d-layer div:nth-of-type(31) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 30));}
.css3d-layer div:nth-of-type(32) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 31));}
.css3d-layer div:nth-of-type(33) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 32));}
.css3d-layer div:nth-of-type(34) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 33));}
.css3d-layer div:nth-of-type(35) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 34));}
.css3d-layer div:nth-of-type(36) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 35));}
.css3d-layer div:nth-of-type(37) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 36));}
.css3d-layer div:nth-of-type(38) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 37));}
.css3d-layer div:nth-of-type(39) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 38));}
.css3d-layer div:nth-of-type(40) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 39));}
.css3d-layer div:nth-of-type(41) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 40));}
.css3d-layer div:nth-of-type(42) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 41));}
.css3d-layer div:nth-of-type(43) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 42));}
.css3d-layer div:nth-of-type(44) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 43));}
.css3d-layer div:nth-of-type(45) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 44));}
.css3d-layer div:nth-of-type(46) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 45));}
.css3d-layer div:nth-of-type(47) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 46));}
.css3d-layer div:nth-of-type(48) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 47));}
.css3d-layer div:nth-of-type(49) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 48));}
.css3d-layer div:nth-of-type(50) {transform: translateZ(calc(var(--css3d-layer-margin) * var(--css3d-layer-direction) * 49));}



/*---------------------------------------------
  Mainvisual 01
  ---------------------------------------------*/

#mv01 {
  --img-reduction-ratio: 1.2;
  --css3d-layer-margin: calc(1px * var(--img-reduction-ratio));
  --circle-diameter: calc(1000px * var(--img-reduction-ratio));                              /* 円の直径 */
  --circle-horizontal-angle: -15deg;                                                         /* 円の横方向の傾き */
  --circle-vertical-angle: -110deg;                                                          /* 円の縦方向の傾き */
  --circle-img-num: 8;                                                                       /* 画像の枚数 */
  --circle-img-angle: calc(360deg / var(--circle-img-num));                                  /* 隣り合う画像間の角度（360度 ÷ 画像の枚数）*/
  --circle-img-width: calc(var(--circle-diameter) * 3.14 / (var(--circle-img-num) * 1.2));   /* 画像の横幅（円周 ÷ (画像の枚数 * 余白の比率)）*/
  --circle-img-height: calc(var(--circle-img-width) / 3 * 2);                                /* 画像の縦幅（円の直径 ÷ 3 × 2）*/
}
@media screen and (max-width: 767px) {
  #mv01 {
    --img-reduction-ratio: .5;
  }
}

#mv01 .css3d-stage {
  position: absolute;
  width: 100%;
  /*height: min(900px, 52.083333svw);*/
  height: clamp(46.875svw, 900px, 52.083333svw);
  top: 0;
  left: 0;
  perspective: calc(2000px * var(--img-reduction-ratio));
  will-change: transform;
  transform: translate3d(0, min(20rem, 18.5svw), 0);
  transition: transform 1.2s cubic-bezier(.7,0,.3,1);
}
.is-loaded #mv01 .css3d-stage {
  transform: translate3d(0, 0, 0);
}
.opening-end #mv01 .css3d-stage {
  transition: none;
}
@media screen and (max-width: 767px) {
  #mv01 .css3d-stage {
    height: 420px;
    transform: translate3d(0, 10rem, 0);
  }
  .opening-end #mv01 .css3d-stage {
    transform: none !important;
  }
}

#mv01 .css3d-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}


/* ----- Circle ----- */

.css3d-circle {
  position: absolute;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(0, max(-40rem, -37svw), 0) rotateX(var(--circle-vertical-angle)) rotateY(var(--circle-horizontal-angle));
  transition: transform 1.2s cubic-bezier(.7,0,.3,1);
}
.is-loaded .css3d-circle {
  transform: translate3d(0, 0, 0) rotateX(var(--circle-vertical-angle)) rotateY(var(--circle-horizontal-angle));
}
.opening-end .css3d-circle {
  transition: none;
}
@media screen and (max-width: 767px) {
  .css3d-circle {
    transform: translate3d(0, -20rem, 0) rotateX(var(--circle-vertical-angle)) rotateY(var(--circle-horizontal-angle));
  }
}

.css3d-circle__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.css3d-circle__item {
  position: absolute;
  width: var(--circle-img-width);
  height: var(--circle-diameter);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform-style: preserve-3d;
}

.css3d-circle__item:nth-child(1) {transform: rotateZ(calc(var(--circle-img-angle) * 0));}
.css3d-circle__item:nth-child(2) {transform: rotateZ(calc(var(--circle-img-angle) * 1));}
.css3d-circle__item:nth-child(3) {transform: rotateZ(calc(var(--circle-img-angle) * 2));}
.css3d-circle__item:nth-child(4) {transform: rotateZ(calc(var(--circle-img-angle) * 3));}
.css3d-circle__item:nth-child(5) {transform: rotateZ(calc(var(--circle-img-angle) * 4));}
.css3d-circle__item:nth-child(6) {transform: rotateZ(calc(var(--circle-img-angle) * 5));}
.css3d-circle__item:nth-child(7) {transform: rotateZ(calc(var(--circle-img-angle) * 6));}
.css3d-circle__item:nth-child(8) {transform: rotateZ(calc(var(--circle-img-angle) * 7));}

.css3d-circle__img {
  position: absolute;
  width: 100%;
  height: var(--circle-img-height);
  left: 0;
  top: 100%;
  transform-style: preserve-3d;
  translate: 0 -34%;
  transform: rotateX(90deg) rotateY(calc(180deg - var(--circle-img-angle) / 2));
}
.css3d-circle__img div {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 95%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--circle-img-angle) / 5.6));
  transform-origin: center left;
  background-size: cover;
  background-repeat: no-repeat;
}
.css3d-circle__img > div {
  width: 21%;
  left: 0;
  border-radius: calc(10px * var(--img-reduction-ratio)) 0 0 calc(10px * var(--img-reduction-ratio));
}
.css3d-circle__img > div > div > div > div > div {
  border-radius: 0 calc(10px * var(--img-reduction-ratio)) calc(10px * var(--img-reduction-ratio)) 0;
}

.css3d-circle__item:nth-of-type(1) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_01.webp);}
.css3d-circle__item:nth-of-type(2) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_02.webp);}
.css3d-circle__item:nth-of-type(3) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_03.webp);}
.css3d-circle__item:nth-of-type(4) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_04.webp);}
.css3d-circle__item:nth-of-type(5) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_05.webp);}
.css3d-circle__item:nth-of-type(6) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_06.webp);}
.css3d-circle__item:nth-of-type(7) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_07.webp);}
.css3d-circle__item:nth-of-type(8) .css3d-circle__img div {background-image: url(../../images/top/mv_01/circle_img_08.webp);}

.css3d-circle__img > div {background-position-x: calc(100% / 4 * 0);}
.css3d-circle__img > div > div {background-position-x: calc(100% / 4 * 1);}
.css3d-circle__img > div > div > div {background-position-x: calc(100% / 4 * 2);}
.css3d-circle__img > div > div > div > div {background-position-x: calc(100% / 4 * 3);}
.css3d-circle__img > div > div > div > div > div {background-position-x: calc(100% / 4 * 4);}


/* ----- SP ----- */

#mv01 .css3d-object {
  position: absolute;
  width: calc(250px * var(--img-reduction-ratio));
  height: calc(500px * var(--img-reduction-ratio));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(calc(270deg + var(--circle-vertical-angle))) rotateZ(calc(180deg + var(--circle-horizontal-angle))) scale(1.1);
}

#mv01 .css3d-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateY(80deg);
  transition: transform 1.2s cubic-bezier(.7,0,.3,1);
}
.is-loaded #mv01 .css3d-layer {
  transform: rotateY(150deg);
}
.opening-end #mv01 .css3d-layer {
  transition: none;
}

#mv01 .css3d-layer div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  transform-style: preserve-3d;
}
#mv01 .sp .css3d-layer div {background-image: url(../../images/top/mv_02/sp_body.webp);}
#mv01 .sp .css3d-layer div:first-of-type {background-image: url(../../images/top/mv_01/sp_front.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(6) {background-image: url(../../images/top/mv_02/sp_side_01.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(7) {background-image: url(../../images/top/mv_02/sp_side_02.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(n+8):nth-child(-n+13) {background-image: url(../../images/top/mv_02/sp_side_03.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(14) {background-image: url(../../images/top/mv_02/sp_side_04.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(15) {background-image: url(../../images/top/mv_02/sp_side_05.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(20) {background-image: url(../../images/top/mv_02/sp_back.webp);}
#mv01 .sp .css3d-layer div:nth-of-type(n+21) {background-image: url(../../images/top/mv_02/sp_camera.webp);}


@media screen and (min-width: 768px), print {

  #mv01 .sp .css3d-layer div:first-of-type:before,
  #mv01 .sp .css3d-layer div:first-of-type:after {
    content: "";
    position: absolute;
    display: block;
    width: calc(25 * var(--css3d-layer-margin));
    height: 100%;
    top: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: rotateY(90deg);
    transform-origin: left;
  }
  #mv01 .sp .css3d-layer div:first-of-type:before {
    left: calc(40px * var(--img-reduction-ratio));
    background-image: url(../../images/top/mv_01/sp_left.webp);
  }
  #mv01 .sp .css3d-layer div:first-of-type:after {
    right: calc(20px * var(--img-reduction-ratio));
    background-image: url(../../images/top/mv_01/sp_right.webp);
  }

}


/*---------------------------------------------
  Mainvisual 02
  ---------------------------------------------*/

#mv02 {
  --img-reduction-ratio: 1.2;
  --css3d-layer-margin: calc(1px * var(--img-reduction-ratio));
}
@media screen and (max-width: 767px) {
  #mv02 {
    --img-reduction-ratio: .5;
  }
}

#mv02 .css3d-stage {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  translate: 22svw 0;
  perspective: calc(2000px * var(--img-reduction-ratio));
  will-change: transform;
}
@media screen and (max-width: 767px) {
  #mv02 .css3d-stage {
    height: 260px;
    top: auto;
    bottom: 110px;
    left: 0;
    translate: 0;
    transform: none !important;
  }
}

#mv02 .css3d-container {
  position: absolute;
  width: calc(250px * var(--img-reduction-ratio));
  height: calc(500px * var(--img-reduction-ratio));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(180deg) rotateZ(165deg);
}

#mv02 .css3d-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform: rotateY(140deg);
  will-change: transform;
}

#mv02 .css3d-layer div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../../images/top/mv_02/sp_body.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
#mv02 .css3d-layer div:first-of-type {background-image: url(../../images/top/mv_02/sp_front.webp);}
#mv02 .css3d-layer div:nth-of-type(6) {background-image: url(../../images/top/mv_02/sp_side_01.webp);}
#mv02 .css3d-layer div:nth-of-type(7) {background-image: url(../../images/top/mv_02/sp_side_02.webp);}
#mv02 .css3d-layer div:nth-of-type(n+8):nth-child(-n+13) {background-image: url(../../images/top/mv_02/sp_side_03.webp);}
#mv02 .css3d-layer div:nth-of-type(14) {background-image: url(../../images/top/mv_02/sp_side_04.webp);}
#mv02 .css3d-layer div:nth-of-type(15) {background-image: url(../../images/top/mv_02/sp_side_05.webp);}
#mv02 .css3d-layer div:nth-of-type(20) {background-image: url(../../images/top/mv_02/sp_back.webp);}
#mv02 .css3d-layer div:nth-of-type(n+21) {background-image: url(../../images/top/mv_02/sp_camera.webp);}



/*---------------------------------------------
  Mainvisual 03
  ---------------------------------------------*/

#mv03 {
  --img-reduction-ratio: 1.08;
  --css3d-layer-margin: calc(1px * var(--img-reduction-ratio));
}
@media screen and (max-width: 767px) {
  #mv03 {
    --img-reduction-ratio: .45;
  }
}

#mv03 .css3d-stage {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  translate: 22svw 0;
  perspective: calc(2000px * var(--img-reduction-ratio));
  will-change: transform;
}
@media screen and (max-width: 767px) {
  #mv03 .css3d-stage {
    height: 260px;
    top: auto;
    bottom: 110px;
    left: 0;
    translate: 0;
    transform: none !important;
  }
}

#mv03 .css3d-container {
  position: absolute;
  width: calc(559px * var(--img-reduction-ratio));
  height: calc(432px * var(--img-reduction-ratio));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(180deg) rotateZ(165deg);
}

#mv03 .css3d-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform: rotateY(140deg);
  will-change: transform;
}

#mv03 .css3d-layer div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../../images/top/mv_03/tablet_body.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
#mv03 .css3d-layer div:first-of-type {background-image: url(../../images/top/mv_03/tablet_front.webp);}
#mv03 .css3d-layer div:nth-of-type(n+4):nth-child(-n+8) {background-image: url(../../images/top/mv_03/tablet_switch.webp);}
#mv03 .css3d-layer div:nth-of-type(12) {background-image: url(../../images/top/mv_03/tablet_back.webp);}
#mv03 .css3d-layer div:nth-of-type(n+13) {background-image: url(../../images/top/mv_03/tablet_camera.webp);}



/*---------------------------------------------
  Mainvisual 04
  ---------------------------------------------*/

#mv04 {
  margin-bottom: 0;
  --img-reduction-ratio: .8;
  --css3d-layer-margin: calc(1px * var(--img-reduction-ratio));
}
@media screen and (max-width: 767px) {
  #mv04 {
    --img-reduction-ratio: .35;
  }
}

#mv04 .css3d-stage {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  translate: 22svw 7svw;
  perspective: calc(2000px * var(--img-reduction-ratio));
  will-change: transform;
}
@media screen and (max-width: 767px) {
  #mv04 .css3d-stage {
    height: 260px;
    top: auto;
    bottom: 50px;
    left: 0;
    translate: 0;
    transform: none !important;
  }
}

#mv04 .css3d-container {
  position: absolute;
  width: calc(693px * var(--img-reduction-ratio));
  height: calc(490px * var(--img-reduction-ratio));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(250deg) rotateY(-180deg) rotateZ(-140deg);
  will-change: transform;
}

#mv04 .monitor {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  transform: translateZ(calc(-15px * var(--img-reduction-ratio))) rotateX(-60deg);
  transform-style: preserve-3d;
  transform-origin: bottom center;
}

#mv04 .keyboard {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

#mv04 .css3d-layer div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
#mv04 .monitor div {background-image: url(../../images/top/mv_04/pc_monitor_body.webp);}
#mv04 .monitor div:first-of-type {background-image: url(../../images/top/mv_04/pc_monitor_front.webp);}
#mv04 .monitor div:last-of-type {background-image: url(../../images/top/mv_04/pc_monitor_back.webp);}
#mv04 .keyboard div {background-image: url(../../images/top/mv_04/pc_keyboard_body.webp);}
#mv04 .keyboard div:first-of-type {background-image: url(../../images/top/mv_04/pc_keyboard_front.webp);}
#mv04 .keyboard div:nth-of-type(n+7):nth-child(-n+10) {background-image: url(../../images/top/mv_04/pc_keyboard_terminal1.webp);}
#mv04 .keyboard div:nth-of-type(6), .img-keyboard div:nth-of-type(11) {background-image: url(../../images/top/mv_04/pc_keyboard_terminal2.webp);}



/*---------------------------------------------
  City
  ---------------------------------------------*/

#city {
  --img-reduction-ratio: 1;
  --img-reduction-ratio: 1;
  --css3d-layer-margin: calc(4px * var(--img-reduction-ratio));
  --css3d-layer-direction: 1;
}
@media screen and (max-width: 767px) {
  #city {
    --img-reduction-ratio: .3;
  }
}

#city .css3d-stage {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  perspective: calc(2000px * var(--img-reduction-ratio));
}
@media screen and (min-width: 768px), print {
  #city .css3d-stage {
    /*height: min(864px, 50svw);*/
    height: clamp(45svw, 864px, 50svw);
    bottom: calc((var(--content-padding-bottom) + 9.0625rem) * .9);
    scale: var(--city-reduction-ratio);
  }
}
@media screen and (max-width: 767px) {
  #city .css3d-stage {
    height: 350px;
    bottom: calc(155px * 1.1);
  }
}

#city .css3d-container {
  position: absolute;
  width: calc(680px * var(--img-reduction-ratio));
  height: calc(1360px * var(--img-reduction-ratio));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(235deg) rotateY(-180deg) rotateZ(-90deg);
  will-change: transform;
}

#city .css3d-layer,
#city .css3d-layer div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

#city .css3d-layer div {
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .android #city .css3d-layer div:nth-of-type(even) {
    display: none;
  }
}

#city .css3d-layer.minatomirai div:nth-of-type(1) {background-image: url(../../images/top/city/sea.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+2):nth-child(-n+4)   {background-image: url(../../images/top/city/body_01.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+6):nth-child(-n+9)   {background-image: url(../../images/top/city/body_02.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+11):nth-child(-n+14) {background-image: url(../../images/top/city/body_03.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+16):nth-child(-n+24) {background-image: url(../../images/top/city/body_04.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+26):nth-child(-n+39) {background-image: url(../../images/top/city/body_05.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(n+41):nth-child(-n+49) {background-image: url(../../images/top/city/body_06.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(5)  {background-image: url(../../images/top/city/top_01.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(10) {background-image: url(../../images/top/city/top_02.webp); display: block;}
#city .css3d-layer.minatomirai div:nth-of-type(15) {background-image: url(../../images/top/city/top_03.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(25) {background-image: url(../../images/top/city/top_04.webp);}
#city .css3d-layer.minatomirai div:nth-of-type(40) {background-image: url(../../images/top/city/top_05.webp); display: block;}
#city .css3d-layer.minatomirai div:nth-of-type(50) {background-image: url(../../images/top/city/top_06.webp); display: block;}

#city .css3d-layer.landmark-tower {
  width: calc(120px * var(--img-reduction-ratio));
  height: calc(120px * var(--img-reduction-ratio));
  top: calc(972px * var(--img-reduction-ratio));
  left: calc(160px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 50));
}

#city .css3d-layer.landmark-tower div:nth-of-type(n+1):nth-child(-n+21) {background-image: url(../../images/top/city/landmark_body_01.webp);}
#city .css3d-layer.landmark-tower div:nth-of-type(22) {background-image: url(../../images/top/city/landmark_top_01.webp); display: block;}
#city .css3d-layer.landmark-tower div:nth-of-type(n+23):nth-child(-n+44) {background-image: url(../../images/top/city/landmark_body_02.webp);}
#city .css3d-layer.landmark-tower div:nth-of-type(n+45):nth-child(-n+49) {background-image: url(../../images/top/city/landmark_body_03.webp);}
#city .css3d-layer.landmark-tower div:nth-of-type(50) {background-image: url(../../images/top/city/landmark_top_02.webp); display: block;}


#city .css3d-layer.queens-tower {
  width: calc(54px * var(--img-reduction-ratio));
  height: calc(80px * var(--img-reduction-ratio));
  top: calc(719px * var(--img-reduction-ratio));
  left: calc(166px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 50));
}
#city .css3d-layer.queens-tower div {background-image: url(../../images/top/city/queens_body_01.webp);}
#city .css3d-layer.queens-tower div:nth-of-type(10) {background-image: url(../../images/top/city/queens_top_01.webp); display: block;}

#city .css3d-layer.queens-tower-a {
  width: calc(54px * var(--img-reduction-ratio));
  height: calc(80px * var(--img-reduction-ratio));
  top: calc(719px * var(--img-reduction-ratio));
  left: calc(166px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 60));
}
#city .css3d-layer.queens-tower-b {
  width: calc(54px * var(--img-reduction-ratio));
  height: calc(80px * var(--img-reduction-ratio));
  top: calc(624px * var(--img-reduction-ratio));
  left: calc(124px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 50));
}
#city .css3d-layer.queens-tower-c {
  width: calc(54px * var(--img-reduction-ratio));
  height: calc(80px * var(--img-reduction-ratio));
  top: calc(526px * var(--img-reduction-ratio));
  left: calc(84px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 40));
}
#city .css3d-layer.queens-tower-a div:nth-of-type(1),
#city .css3d-layer.queens-tower-b div:nth-of-type(1),
#city .css3d-layer.queens-tower-c div:nth-of-type(1) {background-image: url(../../images/top/city/queens_body_02.webp);}
#city .css3d-layer.queens-tower-a div:nth-of-type(2),
#city .css3d-layer.queens-tower-b div:nth-of-type(2),
#city .css3d-layer.queens-tower-c div:nth-of-type(2) {background-image: url(../../images/top/city/queens_body_03.webp);}
#city .css3d-layer.queens-tower-a div:nth-of-type(3),
#city .css3d-layer.queens-tower-b div:nth-of-type(3),
#city .css3d-layer.queens-tower-c div:nth-of-type(3) {background-image: url(../../images/top/city/queens_body_04.webp);}
#city .css3d-layer.queens-tower-a div:nth-of-type(4),
#city .css3d-layer.queens-tower-b div:nth-of-type(4),
#city .css3d-layer.queens-tower-c div:nth-of-type(4) {background-image: url(../../images/top/city/queens_body_05.webp);}
#city .css3d-layer.queens-tower-a div:nth-of-type(5),
#city .css3d-layer.queens-tower-b div:nth-of-type(5),
#city .css3d-layer.queens-tower-c div:nth-of-type(5) {background-image: url(../../images/top/city/queens_top_06.webp);}

#city .css3d-layer.boy {
  width: calc(84px * var(--img-reduction-ratio));
  height: calc(84px * var(--img-reduction-ratio));
  top: calc(1162px * var(--img-reduction-ratio));
  left: calc(80px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 50));
}
#city .css3d-layer.boy div {background-image: url(../../images/top/city/boy_body_01.webp);}
#city .css3d-layer.boy div:nth-of-type(5) {background-image: url(../../images/top/city/boy_top_01.webp);}

#city .css3d-layer.intercontinental {
  width: calc(115px * var(--img-reduction-ratio));
  height: calc(80px * var(--img-reduction-ratio));
  top: calc(200px * var(--img-reduction-ratio));
  left: calc(192px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 4));
}

#city .css3d-layer.intercontinental div {
  left: auto;
  right: 0;
  background-image: url(../../images/top/city/intercontinental_body_01.webp);
  background-position: right top;
}
#city .css3d-layer.intercontinental div:nth-of-type(18) {width: calc(114px * var(--img-reduction-ratio)); height: calc(114px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(19) {width: calc(114px * var(--img-reduction-ratio)); height: calc(114px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(20) {width: calc(114px * var(--img-reduction-ratio)); height: calc(114px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(21) {width: calc(113px * var(--img-reduction-ratio)); height: calc(113px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(22) {width: calc(113px * var(--img-reduction-ratio)); height: calc(113px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(23) {width: calc(112px * var(--img-reduction-ratio)); height: calc(112px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(24) {width: calc(112px * var(--img-reduction-ratio)); height: calc(112px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(25) {width: calc(111px * var(--img-reduction-ratio)); height: calc(111px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(26) {width: calc(110px * var(--img-reduction-ratio)); height: calc(110px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(27) {width: calc(109px * var(--img-reduction-ratio)); height: calc(109px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(28) {width: calc(108px * var(--img-reduction-ratio)); height: calc(108px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(29) {width: calc(107px * var(--img-reduction-ratio)); height: calc(107px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(30) {width: calc(105px * var(--img-reduction-ratio)); height: calc(105px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(31) {width: calc(104px * var(--img-reduction-ratio)); height: calc(104px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(32) {width: calc(102px * var(--img-reduction-ratio)); height: calc(102px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(33) {width: calc(101px * var(--img-reduction-ratio)); height: calc(101px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(34) {width: calc( 99px * var(--img-reduction-ratio)); height: calc( 99px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(35) {width: calc( 97px * var(--img-reduction-ratio)); height: calc( 97px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(36) {width: calc( 95px * var(--img-reduction-ratio)); height: calc( 95px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(37) {width: calc( 92px * var(--img-reduction-ratio)); height: calc( 92px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(38) {width: calc( 90px * var(--img-reduction-ratio)); height: calc( 90px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(39) {width: calc( 87px * var(--img-reduction-ratio)); height: calc( 87px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(40) {width: calc( 84px * var(--img-reduction-ratio)); height: calc( 84px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(41) {width: calc( 81px * var(--img-reduction-ratio)); height: calc( 81px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(42) {width: calc( 77px * var(--img-reduction-ratio)); height: calc( 77px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(43) {width: calc( 73px * var(--img-reduction-ratio)); height: calc( 73px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(44) {width: calc( 69px * var(--img-reduction-ratio)); height: calc( 69px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(45) {width: calc( 64px * var(--img-reduction-ratio)); height: calc( 64px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(46) {width: calc( 59px * var(--img-reduction-ratio)); height: calc( 59px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(47) {width: calc( 53px * var(--img-reduction-ratio)); height: calc( 53px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(48) {width: calc( 45px * var(--img-reduction-ratio)); height: calc( 45px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(49) {width: calc( 35px * var(--img-reduction-ratio)); height: calc( 35px * (80 / 115) * var(--img-reduction-ratio));}
#city .css3d-layer.intercontinental div:nth-of-type(50) {width: calc( 20px * var(--img-reduction-ratio)); height: calc( 20px * (80 / 115) * var(--img-reduction-ratio));}

#city .css3d-pin {
  position: absolute;
  width: 1px;
  height: 1px;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

#city .css3d-pin div {
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  translate: -50% 0;
}
#city .css3d-pin div:nth-of-type(1) {transform: translateZ(calc(0px * var(--img-reduction-ratio)));}
#city .css3d-pin div:nth-of-type(2) {transform: translateZ(calc(1px * var(--img-reduction-ratio)));}
#city .css3d-pin div:nth-of-type(3) {transform: translateZ(calc(2px * var(--img-reduction-ratio)));}
#city .css3d-pin div:nth-of-type(4) {transform: translateZ(calc(3px * var(--img-reduction-ratio)));}
#city .css3d-pin div:nth-of-type(5) {transform: translateZ(calc(4px * var(--img-reduction-ratio)));}

#city .css3d-pin.pin {
  top: calc(1202px * var(--img-reduction-ratio));
  left: calc(124px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 60)) rotateX(-90deg);
}
#city .css3d-pin.pin div {
  width: calc(64px * var(--img-reduction-ratio));
  height: calc(64px * var(--img-reduction-ratio));
  background-image: url(../../images/top/city/icon_pin.webp);
}

#city .css3d-pin.cosmoclock {
  top: calc(480px * var(--img-reduction-ratio));
  left: calc(460px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 5)) rotateX(-90deg) rotateY(-45deg);
}
#city .css3d-pin.cosmoclock div {
  width: calc(160px * var(--img-reduction-ratio));
  height: calc(160px * var(--img-reduction-ratio));
  background-image: url(../../images/top/city/cosmoclock_body_01.webp);
}
#city .css3d-pin.cosmoclock div:first-of-type {background-image: url(../../images/top/city/cosmoclock_top_01.webp);}
#city .css3d-pin.cosmoclock div:last-of-type  {background-image: url(../../images/top/city/cosmoclock_top_02.webp);}

#city .css3d-pin.mast {
  top: calc(996px * var(--img-reduction-ratio));
  left: calc(394px * var(--img-reduction-ratio));
  transform: translateZ(calc(var(--css3d-layer-margin) * 5)) rotateX(-90deg) rotateY(25deg);
}
#city .css3d-pin.mast-02 {
  top: calc(1023px * var(--img-reduction-ratio));
  left: calc(407px * var(--img-reduction-ratio));
}
#city .css3d-pin.mast-03 {
  top: calc(1050px * var(--img-reduction-ratio));
  left: calc(420px * var(--img-reduction-ratio));
}

#city .css3d-pin.mast div {
  width: calc(30px * var(--img-reduction-ratio));
  height: calc(54px * var(--img-reduction-ratio));
  background-image: url(../../images/top/city/mast.webp);
}