/* CSS Document */
/*------------------------------------------*/
body {
  background: #F7F5E9 !important; }
  body header {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s; }
  body.kv_start {
    overflow: auto; }
  body.head_on {
    background: #F8ECD0 !important; }
  body.head_on header {
    pointer-events: all;
    opacity: 1; }

@keyframes kv_p1 {
  0% {
    transform: translateX(30%) translateY(-50%);
    opacity: 0; }
  20% {
    opacity: 1; }
  85% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%); } }
@keyframes kv_rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(2deg); }
  100% {
    transform: rotate(0deg); } }
@keyframes kv_zoom {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.02); }
  100% {
    transform: scale(1); } }
@keyframes kv_zoom2 {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
@keyframes kv_zoom3 {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.15); }
  100% {
    transform: scale(1); } }
@keyframes kv_migite {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(-25deg); }
  100% {
    transform: rotate(0); } }
@keyframes kv_hidarite {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(25deg); }
  100% {
    transform: rotate(0); } }
@keyframes kv_migiashi {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(40deg); }
  100% {
    transform: rotate(0); } }
@keyframes kv_hidariashi {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(-35deg); }
  100% {
    transform: rotate(0); } }
@keyframes key_inner {
  0% {
    transform: translateX(-110%); }
  50% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(-110%); } }
@keyframes fukidashi {
  0% {
    transform: translateY(0%); }
  50% {
    transform: translateY(10%); }
  100% {
    transform: translateY(0%); } }
#kv {
  height: 100vh;
  pointer-events: none;
  background: #F7F5E9;
  position: relative;
  /*
  #person0 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(30%) translateY(-50%);
    width: 280rem;
    aspect-ratio: 565/1041;
    .loaded & {
      animation: kv_p1 2s 1.5s linear;
      opacity: 0;
    }
    img {
      width: 100%;
    }
    span {
      display: block;
      position: absolute;
    }
    #dou {
      left: 30.8%;
      top: 0%;
      width: 33.8%;
    }
    #migite {
      left: 4.248%;
      top: 22.48%;
      width: 45.84%;
      animation: kv_migite 1s ease-in-out infinite;
      transform-origin: 90% -44%;
    }
    #hidarite {
      left: 49.2%;
      top: 15.37%;
      width: 50.97%;
      animation: kv_hidarite 1s ease-in-out infinite;
      transform-origin: 10% 5%;
    }
    #migiashi {
      left: 35.57%;
      top: 41.69%;
      width: 48.67%;
      animation: kv_migiashi 1s ease-in-out infinite;
      transform-origin: 20% 20%;
    }
    #hidariashi {
      left: 0%;
      top: 42.17%;
      width: 60.7%;
      animation: kv_hidariashi 1s ease-in-out infinite;
      transform-origin: 64% 0%;
    }

  }
  */ }
  @media (max-width: 767px) {
    #kv {
      width: 100vw; } }
  .preload #kv {
    display: none; }
  #kv .skip,
  #kv .kv_entry {
    position: absolute;
    z-index: 2000;
    pointer-events: all;
    cursor: pointer; }
    #kv .skip img,
    #kv .kv_entry img {
      transition: .3s; }
    @media (max-width: 767px) {
      #kv .skip,
      #kv .kv_entry {
        top: 80vh;
        top: 100svh;
        transform: translateY(-100%);
        right: 0;
        width: 112rem; }
        #kv .skip img,
        #kv .kv_entry img {
          height: 59rem;
          width: auto; } }
    @media (min-width: 767.1px) {
      #kv .skip,
      #kv .kv_entry {
        top: 0;
        right: -20rem;
        width: 224rem; }
        #kv .skip:hover img,
        #kv .kv_entry:hover img {
          opacity: .7; } }
  @media (max-width: 767px) {
    #kv .kv_entry {
      right: 102rem; } }
  @media (min-width: 767.1px) {
    #kv .kv_entry {
      right: 184rem; } }
  #kv .shadow {
    content: "";
    width: 550rem;
    height: 550rem;
    background: radial-gradient(#ffcc9a 0%, rgba(255, 204, 154, 0) 50%);
    display: block;
    position: absolute;
    bottom: -970rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2; }
    @media (min-width: 767.1px) {
      #kv .shadow {
        width: 1500rem;
        height: 1500rem;
        bottom: -1630rem; } }
  #kv::before {
    content: "";
    z-index: -1;
    background: #FEFAF3;
    display: block;
    position: absolute;
    bottom: -800rem;
    left: 50%;
    width: 100vw;
    aspect-ratio: 2;
    border-radius: 0 0 100vw 100vw;
    transform: translateX(-50%); }
    @media (min-width: 767.1px) {
      #kv::before {
        bottom: -1230rem; } }
  .head_on #kv::after {
    content: "";
    background: #FEFAF3;
    display: block;
    position: absolute;
    bottom: calc(-800rem + 50vw);
    left: 0;
    width: 100%;
    height: 4000rem; }
    @media (min-width: 767.1px) {
      .head_on #kv::after {
        bottom: calc(-1230rem + 50vw); } }
  #kv .lottie-animation {
    width: 100%;
    height: 100%; }
  #kv img {
    width: 100%; }
  #kv #loading {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: #F7F5E9;
    transition: 1s; }
    #kv #loading.hide {
      background: transparent; }
  #kv #mask_key {
    background: url("../images/kv/mask_key.svg") repeat center center/100%;
    height: 100vh;
    filter: drop-shadow(0 0 1px #1289A6);
    opacity: 0;
    transition: 1s 1s; }
    @media (max-width: 767px) {
      #kv #mask_key {
        background-size: 200%; } }
    .loaded #kv #mask_key {
      opacity: 1; }
    #kv #mask_key.hide {
      transition: 4s;
      transform: scale(10); }
  #kv #text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50rem;
    aspect-ratio: 650/100;
    transition: 1s; }
    @media (min-width: 767.1px) {
      #kv #text1 {
        height: 100rem; } }
    #kv #text1.hide {
      opacity: 0; }
  #kv #ss1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: max(680rem, 50vw);
    transition: transform 1.5s;
    overflow: hidden; }
    #kv #ss1 #town {
      display: block;
      width: 100%;
      height: 100%; }
    #kv #ss1 .t_layer,
    #kv #ss1 #town_mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: transform 1.5s;
      transform-origin: 50% 50%; }
    #kv #ss1 .t_icon {
      position: absolute;
      top: 0;
      left: 50%;
      opacity: 0;
      transition-duration: 2s;
      transition-property: opacity; }
      #kv #ss1 .t_icon img {
        width: 100%;
        transform-origin: center bottom; }
      @media (max-width: 767px) {
        #kv #ss1 .t_icon::before {
          content: "";
          width: 6%;
          background: #F7F2E4;
          display: block;
          position: absolute;
          height: 500rem;
          left: 50%;
          transform: translateX(-50%);
          top: 10rem; } }
    #kv #ss1.show #town .t_layer {
      transform: none; }
    #kv #ss1.show #town .t_icon {
      opacity: 1; }
    #kv #ss1.move {
      transform: translateY(-28vh); }
      #kv #ss1.move #town_mask {
        opacity: 1;
        z-index: 10; }
  #kv #town_layer1 {
    background: url("../images/kv/town_layer1.png") no-repeat center top/cover;
    transform: scale(1.1) translateY(-5%);
    z-index: 1; }
  #kv #town_layer2 {
    background: url("../images/kv/town_layer2.png") no-repeat center top/cover;
    transform: scale(1.2) translateY(-5%);
    z-index: 3; }
    @media (max-width: 767px) {
      #kv #town_layer2 {
        background-position: left 50% bottom 0rem;
        background-size: 310%; } }
  #kv #town_layer3 {
    background: url("../images/kv/town_layer3.png") no-repeat center top/cover;
    transform: scale(1.3) translateY(-5%);
    z-index: 5; }
    @media (max-width: 767px) {
      #kv #town_layer3 {
        background-position: left 50% bottom 0rem;
        background-size: 310%; } }
  #kv #town_layer4 {
    background: url("../images/kv/town_layer4.png") no-repeat center top/cover;
    transform: scale(1.4) translateY(-5%);
    z-index: 7; }
    @media (max-width: 767px) {
      #kv #town_layer4 {
        background-position: left 50% bottom 0rem;
        background-size: 310%; } }
  #kv #town_icon01 {
    z-index: 2;
    transition-delay: 2.1s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon01 {
        transform: translate(-33%, 84%);
        width: 7vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon01 {
        transform: translate(-32%, 93%);
        width: 12vh; } }
    @media (max-width: 767px) {
      #kv #town_icon01 {
        transform: translate(-32%, 264%);
        width: 12vw; } }
    #kv #town_icon01 img {
      animation: kv_zoom 8s 1s ease-in-out infinite; }
  #kv #town_icon02 {
    z-index: 6;
    transition-delay: 2.2s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon02 {
        transform: translate(-261%, 91%);
        width: 10vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon02 {
        transform: translate(-264%, 94%);
        width: 18vh; } }
    @media (max-width: 767px) {
      #kv #town_icon02 {
        transform: translate(-201%, 311%);
        width: 18vw; } }
    #kv #town_icon02 img {
      animation: kv_zoom 8s 2s ease-in-out infinite; }
  #kv #town_icon03 {
    z-index: 6;
    transition-delay: 2.3s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon03 {
        transform: translate(-187%, 174%);
        width: 10vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon03 {
        transform: translate(-188%, 177%);
        width: 18vh; } }
    @media (max-width: 767px) {
      #kv #town_icon03 {
        transform: translate(-159%, 371%);
        width: 16vw;
        z-index: 2; } }
    #kv #town_icon03 img {
      animation: kv_zoom 8s 3s ease-in-out infinite; }
  #kv #town_icon04 {
    z-index: 6;
    transition-delay: 2.1s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon04 {
        transform: translate(230%, 194%);
        width: 10vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon04 {
        transform: translate(232%, 196%);
        width: 18vh; } }
    @media (max-width: 767px) {
      #kv #town_icon04 {
        transform: translate(-113%, 591%);
        width: 18vw; } }
    #kv #town_icon04 img {
      animation: kv_zoom 8s 4s ease-in-out infinite; }
  #kv #town_icon05 {
    z-index: 2;
    transition-delay: 2.2s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon05 {
        transform: translate(-377%, 160%);
        width: 10vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon05 {
        transform: translate(-381%, 159%);
        width: 18vh; } }
    @media (max-width: 767px) {
      #kv #town_icon05 {
        transform: translate(-311%, 341%);
        width: 16vw; } }
    #kv #town_icon05 img {
      animation: kv_zoom 8s 0s ease-in-out infinite; }
  #kv #town_icon06 {
    z-index: 6;
    transition-delay: 2.3s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon06 {
        transform: translate(34%, 94%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon06 {
        transform: translate(35%, 95%);
        width: 20vh; } }
    @media (max-width: 767px) {
      #kv #town_icon06 {
        transform: translate(66%, 183%);
        width: 21vw;
        z-index: 4; } }
    #kv #town_icon06 img {
      animation: kv_zoom 8s 1s ease-in-out infinite; }
  #kv #town_icon07 {
    z-index: 6;
    transition-delay: 2.1s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon07 {
        transform: translate(395%, 200%);
        width: 7vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon07 {
        transform: translate(377%, 197%);
        width: 13vh; } }
    @media (max-width: 767px) {
      #kv #town_icon07 {
        transform: translate(189%, 361%);
        width: 14vw;
        z-index: 4; } }
    #kv #town_icon07 img {
      animation: kv_zoom 8s 2s ease-in-out infinite; }
  #kv #town_icon08 {
    z-index: 2;
    transition-delay: 2.2s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon08 {
        transform: translate(216%, 99%);
        width: 8vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon08 {
        transform: translate(225%, 109%);
        width: 14vh; } }
    @media (max-width: 767px) {
      #kv #town_icon08 {
        transform: translate(-51%, 411%);
        width: 16vw;
        z-index: 8; } }
    #kv #town_icon08 img {
      animation: kv_zoom 8s 3s ease-in-out infinite; }
  #kv #town_icon09 {
    z-index: 6;
    transition-delay: 2.3s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon09 {
        transform: translate(413%, 108%);
        width: 8vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon09 {
        transform: translate(432%, 116%);
        width: 14vh; } }
    @media (max-width: 767px) {
      #kv #town_icon09 {
        transform: translate(251%, 283%);
        width: 14vw;
        z-index: 2; } }
    #kv #town_icon09 img {
      animation: kv_zoom 8s 4s ease-in-out infinite; }
  #kv #town_icon10 {
    z-index: 8;
    transition-delay: 2.4s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon10 {
        transform: translate(334%, 259%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon10 {
        transform: translate(356%, 277%);
        width: 19vh; } }
    @media (max-width: 767px) {
      #kv #town_icon10 {
        transform: translate(129%, 521%);
        width: 21vw; }
        #kv #town_icon10::before {
          display: none !important; } }
    #kv #town_icon10 img {
      transform-origin: center center;
      animation: kv_zoom2 8s 0s ease-in-out infinite; }
  #kv #town_icon11 {
    z-index: 8;
    transition-delay: 2.5s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon11 {
        transform: translate(-90%, 170%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon11 {
        transform: translate(-90%, 184%);
        width: 19vh; } }
    @media (max-width: 767px) {
      #kv #town_icon11 {
        transform: translate(-151%, 621%);
        width: 21vw; }
        #kv #town_icon11::before {
          display: none !important; } }
    #kv #town_icon11 img {
      transform-origin: center center;
      animation: kv_zoom2 8s 1s ease-in-out infinite; }
  #kv #town_icon12 {
    z-index: 8;
    transition-delay: 2.6s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon12 {
        transform: translate(-425%, 329%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon12 {
        transform: translate(-445%, 346%);
        width: 19vh; } }
    @media (max-width: 767px) {
      #kv #town_icon12 {
        transform: translate(-231%, 521%);
        width: 21vw; }
        #kv #town_icon12::before {
          display: none !important; } }
    #kv #town_icon12 img {
      transform-origin: center center;
      animation: kv_zoom2 8s 2s ease-in-out infinite; }
  #kv #town_icon13 {
    z-index: 8;
    transition-delay: 2.4s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon13 {
        transform: translate(1%, 369%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon13 {
        transform: translate(-1%, 395%);
        width: 19vh; } }
    @media (max-width: 767px) {
      #kv #town_icon13 {
        transform: translate(9%, 701%);
        width: 21vw; }
        #kv #town_icon13::before {
          display: none !important; } }
    #kv #town_icon13 img {
      transform-origin: center center;
      animation: kv_zoom2 8s 3s ease-in-out infinite; }
  #kv #town_icon14 {
    z-index: 8;
    transition-delay: 2.5s; }
    @media (min-aspect-ratio: 1.8079) {
      #kv #town_icon14 {
        transform: translate(110%, 249%);
        width: 11vw; } }
    @media (max-aspect-ratio: 1.808) {
      #kv #town_icon14 {
        transform: translate(118%, 266%);
        width: 19vh; } }
    @media (max-width: 767px) {
      #kv #town_icon14 {
        transform: translate(2%, 421%);
        width: 21vw; }
        #kv #town_icon14::before {
          display: none !important; } }
    #kv #town_icon14 img {
      transform-origin: center center;
      animation: kv_zoom2 8s 4s ease-in-out infinite; }
  #kv #town_mask {
    background: rgba(60, 151, 188, 0.95);
    mix-blend-mode: multiply;
    transition: opacity 1s .5s !important;
    opacity: 0; }
  #kv #text2 {
    position: fixed;
    top: 2%;
    left: 0rem;
    z-index: 10;
    aspect-ratio: 710/180;
    height: 90rem; }
    @media (min-width: 767.1px) {
      #kv #text2 {
        height: 180rem;
        left: 20rem; } }
    #kv #text2 span {
      opacity: 1;
      transition: .5s; }
      #kv #text2 span.hide {
        opacity: 0; }
  #kv #ss2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 100%;
    min-height: max(680rem, 50vw); }
    #kv #ss2.show #partition {
      transform: translateY(0); }
    #kv #ss2 #partition {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 31vw;
      transform: translateY(50vw);
      transition: transform 1.5s; }
      @media (max-width: 767px) {
        #kv #ss2 #partition {
          height: 60vh;
          transform: translateY(120vw); } }
    #kv #ss2.move #partition2 {
      transform: translateX(-50%); }
    #kv #ss2.move #partition3 {
      transform: translateX(65%); }
    #kv #ss2.move #partition1 {
      transform: translateY(160%); }
    #kv #ss2.move #person1 {
      transform: translateX(-120%); }
    #kv #ss2.move #person2 {
      transform: translateX(120%); }
    #kv #ss2.move #text3 {
      opacity: 0; }
  #kv #partition1,
  #kv #partition2,
  #kv #partition3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: transform 1s,bottom 1s; }
  @media (max-width: 767px) {
    #kv #partition1 {
      left: -43vw;
      right: -90vw;
      bottom: 38vw; }
      #kv #partition1.move {
        bottom: 0; } }
  #kv #partition1 img {
    animation: kv_zoom2 8s ease-in-out infinite; }
  @media (max-width: 767px) {
    #kv #partition2 {
      left: -10vw;
      right: -110vw;
      bottom: 0vh; } }
  #kv #partition2 img {
    animation: kv_zoom2 8s 3s ease-in-out infinite; }
  @media (max-width: 767px) {
    #kv #partition3 {
      left: -50vw;
      right: -70vw;
      bottom: 0vh; } }
  #kv #partition3 img {
    animation: kv_zoom2 8s 6s ease-in-out infinite; }
  #kv #person1 {
    width: 30.6%;
    position: absolute;
    left: 5%;
    bottom: 10%;
    transition: transform 1s;
    z-index: 2; }
    @media (max-width: 767px) {
      #kv #person1 {
        width: 61%;
        left: 10%;
        bottom: 3%; } }
    #kv #person1 .f1 {
      width: 25.2%;
      top: 14%;
      left: 23%; }
      #kv #person1 .f1 img {
        animation-delay: 3s; }
    #kv #person1 .f2 {
      width: 25.2%;
      top: 0%;
      left: 30%; }
      #kv #person1 .f2 img {
        animation-delay: 6s; }
    #kv #person1 .f3 {
      width: 31.6%;
      top: 7%;
      right: 0%; }
  #kv #person2 {
    width: 53.7%;
    position: absolute;
    right: 5%;
    bottom: 0;
    transition: transform 1s; }
    @media (max-width: 767px) {
      #kv #person2 {
        width: 90%;
        bottom: 60vw; } }
  #kv #text3 {
    position: fixed;
    top: 2%;
    left: 0rem;
    z-index: 10;
    aspect-ratio: 760/270;
    height: 135rem;
    transition: 1s; }
    @media (min-width: 767.1px) {
      #kv #text3 {
        aspect-ratio: 840/180;
        height: 180rem;
        left: 20rem; } }
    #kv #text3 span {
      transition: 1s; }
      #kv #text3 span.hide {
        opacity: 0; }
  #kv #ss3 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    background: #FEFAF3;
    z-index: 8;
    transition: transform 1s;
    height: 100%; }
    @media (min-width: 767.1px) {
      #kv #ss3 {
        min-height: max(680rem, 50vw); } }
    #kv #ss3.show {
      transform: none; }
  #kv #text4 {
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transition: 1s;
    aspect-ratio: 700/180;
    height: 90rem; }
    @media (min-width: 767.1px) {
      #kv #text4 {
        height: 180rem; } }
    #kv #text4.show {
      opacity: 1; }
  #kv #circle1,
  #kv #circle2,
  #kv #circle3 {
    width: 36.5%;
    position: absolute;
    transform: scale(0);
    transition: 1s; }
    @media (max-width: 767px) {
      #kv #circle1,
      #kv #circle2,
      #kv #circle3 {
        width: 70%; } }
  #kv #circle1 {
    top: -10%;
    right: -5%; }
    #kv #circle1 img {
      animation: kv_zoom2 8s ease-in-out infinite; }
  #kv #circle2 {
    top: 10%;
    left: -10%; }
    @media (max-width: 767px) {
      #kv #circle2 {
        top: 30%; } }
    #kv #circle2 img {
      animation: kv_zoom2 8s 3s ease-in-out infinite; }
  #kv #circle3 {
    bottom: -15%;
    left: 35%; }
    @media (max-width: 767px) {
      #kv #circle3 {
        left: 50%;
        bottom: -5%; } }
    #kv #circle3 img {
      animation: kv_zoom2 8s 6s ease-in-out infinite; }
  #kv #person3,
  #kv #person4,
  #kv #person5,
  #kv #person6,
  #kv #person7,
  #kv #person8 {
    position: absolute;
    transform: translateY(20%);
    opacity: 0;
    transition: transform 1s, opacity 0.5s; }
  #kv #person3 {
    width: 21.4%;
    top: 20%;
    left: 5%; }
    @media (max-width: 767px) {
      #kv #person3 {
        width: 31%; } }
    #kv #person3 .f1 {
      width: 21.9%;
      top: 0%;
      left: 50%; }
      #kv #person3 .f1 img {
        animation-delay: 7s; }
  #kv #person4 {
    width: 23.9%;
    top: 33%;
    left: 35%; }
    @media (max-width: 767px) {
      #kv #person4 {
        width: 40%;
        top: 36%;
        left: 15%; } }
    #kv #person4 .f1 {
      width: 25.2%;
      top: 14%;
      left: 23%; }
      #kv #person4 .f1 img {
        animation-delay: 3s; }
    #kv #person4 .f2 {
      width: 25.2%;
      top: 0%;
      left: 30%; }
      #kv #person4 .f2 img {
        animation-delay: 6s; }
    #kv #person4 .f3 {
      width: 31.6%;
      top: 7%;
      right: 0%; }
  #kv #person5 {
    width: 29.9%;
    top: 26%;
    left: 65%; }
    @media (max-width: 767px) {
      #kv #person5 {
        width: 51%;
        top: 21%;
        left: 45%; } }
  #kv #person6 {
    width: 20.8%;
    top: 50%;
    left: 7%; }
    @media (max-width: 767px) {
      #kv #person6 {
        width: 36%;
        top: 68%;
        left: -3%; } }
  #kv #person7 {
    width: 21.3%;
    top: 70%;
    left: 31%; }
    @media (max-width: 767px) {
      #kv #person7 {
        width: 40%;
        top: 43%;
        left: 55%; } }
  #kv #person8 {
    width: 43.6%;
    top: 54%;
    left: 51%; }
    @media (max-width: 767px) {
      #kv #person8 {
        width: 73%;
        top: 69%;
        left: 33%; } }
    #kv #person8 .f1 {
      width: 20.6%;
      top: 0%;
      left: 36%; }
      #kv #person8 .f1 img {
        animation-delay: 1s; }
    #kv #person8 .f2 {
      width: 21.7%;
      top: 8%;
      left: 73%; }
  #kv #ss3.show #circle1,
  #kv #ss3.show #circle2,
  #kv #ss3.show #circle3,
  #kv #ss3.show #person3,
  #kv #ss3.show #person4,
  #kv #ss3.show #person5,
  #kv #ss3.show #person6,
  #kv #ss3.show #person7,
  #kv #ss3.show #person8 {
    opacity: 1;
    transform: none; }
  #kv #ss3.show #circle1,
  #kv #ss3.show #circle2,
  #kv #ss3.show #circle3 {
    transition-delay: 1s; }
  #kv #ss3.show #person3 {
    transition-delay: 1.1s; }
  #kv #ss3.show #person4 {
    transition-delay: 1s; }
  #kv #ss3.show #person5 {
    transition-delay: 1.2s; }
  #kv #ss3.show #person6 {
    transition-delay: 1.1s; }
  #kv #ss3.show #person7 {
    transition-delay: 1.3s; }
  #kv #ss3.show #person8 {
    transition-delay: 1.2s; }
  #kv .fukidashi {
    position: absolute; }
    #kv .fukidashi img {
      animation: fukidashi 5s ease-in-out infinite; }
  #kv #ss4 {
    position: relative;
    /*
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    */
    z-index: 9;
    background: #FEFAF3;
    opacity: 0;
    transition: opacity 1s;
    height: 100%; }
  #kv #bg1,
  #kv #bg2,
  #kv #bg3 {
    position: absolute;
    transition: transform 2s; }
    #kv #bg1 span,
    #kv #bg2 span,
    #kv #bg3 span {
      display: block; }
  #kv #hand1,
  #kv #hand2,
  #kv #hand3 {
    position: absolute;
    transition: transform 1.5s; }
    #kv #hand1 span,
    #kv #hand2 span,
    #kv #hand3 span {
      display: block; }
  #kv #bg1 span,
  #kv #bg2 span,
  #kv #bg3 span {
    animation: kv_zoom3 8s ease-in-out infinite; }
  #kv #hand1 span,
  #kv #hand2 span,
  #kv #hand3 span {
    animation: kv_rotate 5s ease-in-out infinite; }
  #kv #bg1 {
    width: 25.5%;
    top: 0;
    left: 0;
    transform-origin: right top;
    transform: translate(-80%, 0%) rotate(5deg); }
    @media (max-width: 767px) {
      #kv #bg1 {
        width: 37%; } }
  #kv #bg2 {
    width: 65.4%;
    top: -10%;
    right: -5%;
    transform-origin: left top;
    transform: translate(20%, -30%) rotate(-17deg); }
    @media (max-width: 767px) {
      #kv #bg2 {
        width: 73%;
        top: 0;
        right: -8%; } }
  #kv #bg3 {
    width: 70%;
    bottom: 0%;
    right: -5%;
    transform-origin: right bottom;
    transform: translate(40%, 20%) rotate(15deg); }
    @media (max-width: 767px) {
      #kv #bg3 {
        width: 90%; } }
  #kv #hand1 {
    width: 64.6%;
    top: 40%;
    left: -18%;
    transform-origin: left top;
    transform: translate(-80%, -150%) rotate(35deg);
    filter: drop-shadow(10px 10rem 0rem rgba(216, 176, 91, 0.2)); }
    @media (max-width: 767px) {
      #kv #hand1 {
        width: 84.6%;
        top: 29%;
        left: -38%; } }
    #kv #hand1 span {
      animation: kv_rotate 6s ease-in-out infinite; }
  #kv #hand2 {
    width: 78.9%;
    top: 50%;
    left: -27%;
    transform-origin: left bottom;
    transform: translate(-90%, -30%) rotate(20deg);
    filter: drop-shadow(10px 10rem 0rem rgba(216, 176, 91, 0.2)); }
    @media (max-width: 767px) {
      #kv #hand2 {
        width: 100%;
        top: 39%;
        left: -47%; } }
    #kv #hand2 span {
      animation: kv_rotate 5s ease-in-out infinite; }
  #kv #hand3 {
    width: 74.6%;
    top: 0;
    right: -32%;
    transform-origin: right top;
    transform: translate(90%, -60%) rotate(25deg);
    filter: drop-shadow(10px 10rem 0rem rgba(216, 176, 91, 0.2)); }
    @media (max-width: 767px) {
      #kv #hand3 {
        width: 89%;
        top: 15%;
        right: -41%; } }
    #kv #hand3 span {
      animation: kv_rotate 7s ease-in-out infinite; }
  #kv #ss4.show {
    opacity: 1; }
    #kv #ss4.show #bg1,
    #kv #ss4.show #bg2 {
      transform: none; }
    #kv #ss4.show #bg3 {
      transform: translateY(50%) rotate(30deg); }
    #kv #ss4.show #hand1 {
      transform: translate(0, 0) rotate(0); }
    #kv #ss4.show #hand2 {
      transform: translate(0, 0) rotate(0); }
    #kv #ss4.show #hand3 {
      transform: translate(0, -53%) rotate(0); }
  #kv #key {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 21.25%;
    opacity: 0;
    transition: 1s; }
    @media (max-width: 767px) {
      #kv #key {
        width: 35%;
        top: 35%; } }
    #kv #key #key_mask {
      transform: scale(0);
      transform-origin: center center; }
    #kv #key.show {
      opacity: 1; }
  #kv #key_inner {
    transform: translateX(-110%); }
  #kv #maincopy {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transition: 1s;
    aspect-ratio: 486/250;
    height: 155rem;
    transform: translateX(-50%); }
    @media (min-width: 767.1px) {
      #kv #maincopy {
        bottom: inherit;
        top: 100rem;
        left: 5%;
        height: 250rem;
        transform: none; } }

/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/