/* header
-----------------------------------------------------------*/
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  z-index: 2;
}

header .logo img {
  max-width: 676px;
}

@media screen and (max-width:1400px) {
  header .logo img {
    width: calc(800 / 1400 * 100%);
  }
}

/* First View
-----------------------------------------------------------*/
.fv {
  position: relative;
  height: 782px;
  background: url(../images/home_bg.png) center top no-repeat;
  background-size: cover;
}

.fv .inner {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1030px;
  height: 100%;
}

@media screen and (max-width:1070px) {
  .fv .inner {
    padding: 0 20px;
    width: 100%;
  }
}

.fv .inner h1 {
  position: relative;
  margin: 300px auto 80px;
  width: calc(733 / 1030 * 100%);
  z-index: 4;
}

.fv .inner h1 span:first-child {
  width: calc(307 / 733 * 100%);
  position: absolute;
  top: -140px;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: -1;
}

.fv .inner h1 span:last-child {
  position: relative;
}

.fv .inner .personality_selection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
  width: fit-content;
  margin: 0 auto 30px;
}

.fv .inner .personality_selection .select_wrapper {
  width: 280px;
  position: relative;
}

.fv .inner .personality_selection .select_wrapper::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  z-index: 1;
  pointer-events: none;
}

.fv .inner .personality_selection select {
  position: relative;
  width: 100%;
  padding: 8px 16px;
  font-size: 16px;
  color: #474747;
  background-color: #FFF;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  outline: none;
}

.fv .inner .personality_selection button {
  width: 110px;
  padding: 8px;
  font-size: 16px;
  color: #474747;
  text-align: center;
  background-color: #FFF;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  transition: 0.3s;
}

@media(hover: hover) {
  .fv .inner .personality_selection button:hover {
    color: #FFF;
    background-color: #F9B901;
  }
}

.fv .inner .explanation {
  font-size: 14px;
  text-align: center;
}

.fv .inner .character {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100px;
  z-index: 3;
}

@media screen and (max-width:1070px) {
  .fv .inner .character {
    width: calc(100 / 1030 * 100%);
  }
}

.fv .inner .character.active {
  animation: fuwafuwa01 2s infinite ease-in-out;
}

@keyframes fuwafuwa01 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

.fv .inner .character.person01 {
  top: calc(263 / 782 * 100%);
  left: calc(0 / 1030 * 100%);
  animation-delay: 0s;
  animation-duration: 1.9s;
}
.fv .inner .character.person02 {
  top: calc(387 / 782 * 100%);
  left: calc(100 / 1030 * 100%);
  animation-delay: 0.2s;
  animation-duration: 2.1s;
}
.fv .inner .character.person03 {
  top: calc(150 / 782 * 100%);
  left: calc(144 / 1030 * 100%);
  animation-delay: 0.4s;
  animation-duration: 1.8s;
}
.fv .inner .character.person04 {
  top: calc(258 / 782 * 100%);
  left: calc(287 / 1030 * 100%);
  animation-delay: 0.6s;
  animation-duration: 2.2s;
}
.fv .inner .character.person05 {
  top: calc(100 / 782 * 100%);
  left: calc(492 / 1030 * 100%);
  animation-delay: 0.8s;
  animation-duration: 2s;
}
.fv .inner .character.person06 {
  top: calc(382 / 782 * 100%);
  left: calc(625 / 1030 * 100%);
  animation-delay: 1s;
  animation-duration: 1.6s;
}
.fv .inner .character.person07 {
  top: calc(191 / 782 * 100%);
  left: calc(697 / 1030 * 100%);
  animation-delay: 0.8s;
  animation-duration: 1.9s;
}
.fv .inner .character.person08 {
  top: calc(122 / 782 * 100%);
  left: calc(867 / 1030 * 100%);
  animation-delay: 0.6s;
  animation-duration: 1.4s;
}
.fv .inner .character.person09 {
  top: calc(318 / 782 * 100%);
  left: calc(893 / 1030 * 100%);
  animation-delay: 0.4s;
  animation-duration: 2.2s;
}

/*  767px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:767px) {
  /* header
  -----------------------------------------------------------*/
  header .logo img {
    max-width: 479px;
    width: calc(479 / 375 * 100%);
  }

  /* First View
  -----------------------------------------------------------*/
  .fv {
    height: auto;
    background: url(../images/home_bg@2x.png) center top no-repeat;
    background-size: cover;
  }

  .fv .inner h1 {
    margin: 280px auto 73px;
    max-width: 500px;
    width: calc(337 / 335 * 100%);
  }

  .fv .inner h1 span:first-child {
    max-width: 300px;
    width: calc(254 / 335 * 100%);
    top: -175px;
  }

  .fv .inner .personality_selection {
    gap: 22px 16px;
    margin: 0 auto 38px;
  }

  .fv .inner .personality_selection .select_wrapper {
    width: 337px;
    position: relative;
  }

  .fv .inner .personality_selection select {
    font-size: 16px;
  }

  .fv .inner .personality_selection button {
    width: 115px;
    font-size: 15px;
  }

  .fv .inner .explanation {
    margin-bottom: 40px;
    font-size: 13px;
  }

  .fv .inner .character {
    width: calc(100 / 767 * 100%);
  }

  @keyframes fuwafuwa01 {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(2px);
    }
  }

  .fv .inner .character.person01 {
    top: calc(290 / 900 * 100%);
    left: calc(300 / 770 * 100%);
  }

  .fv .inner .character.person02 {
    top: calc(410 / 900 * 100%);
    left: calc(80 / 770 * 100%);
  }

  .fv .inner .character.person03 {
    top: calc(222 / 900 * 100%);
    left: calc(150 / 770 * 100%);
  }

  .fv .inner .character.person04 {
    top: calc(126 / 900 * 100%);
    left: calc(-9 / 770 * 100%);
  }

  .fv .inner .character.person05 {
    top: calc(100 / 900 * 100%);
    left: calc(340 / 770 * 100%);
  }

  .fv .inner .character.person06 {
    top: calc(30 / 900 * 100%);
    left: calc(500 / 770 * 100%);
  }

  .fv .inner .character.person07 {
    top: calc(133 / 900 * 100%);
    left: auto;
    right: calc(-9 / 770 * 100%);
  }

  .fv .inner .character.person08 {
    top: calc(420 / 900 * 100%);
    left: calc(600 / 770 * 100%);
  }

  .fv .inner .character.person09 {
    top: calc(250 / 900 * 100%);
    left: calc(550 / 770 * 100%);
  }

}

/*  500px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:500px) {
  /* First View
  -----------------------------------------------------------*/
  .fv .inner .character {
    width: calc(68 / 375 * 100%);
  }

  .fv .inner .character.person01 {
    top: calc(260 / 900 * 100%);
    left: calc(127 / 375 * 100%);
  }

  .fv .inner .character.person02 {
    top: calc(326 / 900 * 100%);
    left: calc(35 / 375 * 100%);
  }

  .fv .inner .character.person03 {
    top: calc(222 / 900 * 100%);
    left: calc(29 / 375 * 100%);
  }

  .fv .inner .character.person04 {
    top: calc(126 / 900 * 100%);
    left: calc(-9 / 375 * 100%);
  }

  .fv .inner .character.person05 {
    top: calc(136 / 900 * 100%);
    left: calc(155 / 375 * 100%);
  }

  .fv .inner .character.person06 {
    top: calc(75 / 900 * 100%);
    left: calc(243 / 375 * 100%);
  }

  .fv .inner .character.person07 {
    top: calc(133 / 900 * 100%);
    left: auto;
    right: calc(-9 / 375 * 100%);
  }

  .fv .inner .character.person08 {
    top: calc(338 / 900 * 100%);
    left: calc(274 / 375 * 100%);
  }

  .fv .inner .character.person09 {
    top: calc(230 / 900 * 100%);
    left: calc(282 / 375 * 100%);
  }
}