/*=============================================================
 01_base
=============================================================*/
@media only screen and (max-width: 768px) {
  body {
    position: relative;
  }
}

#header {
  opacity: 0;
}

#chara-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
}
#chara-intro .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#chara-intro .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  filter: brightness(5);
}
@media only screen and (max-width: 768px) {
  #chara-intro .txt {
    width: 15.625vw;
  }
}
#chara-intro .txt img {
  width: 100%;
  filter: blur(10px);
}

#character {
  padding-bottom: 115px;
  z-index: 50;
}
@media only screen and (max-width: 768px) {
  #character {
    padding-bottom: 15.3125vw;
  }
}
#character .bg-round::after {
  background: url("../img/character/bg_light-pc.png") no-repeat bottom center;
  background-size: 100% auto;
}
@media only screen and (max-width: 768px) {
  #character .bg-round::after {
    background: url("../img/character/bg_light-sp.png") no-repeat bottom center;
    background-size: 100% auto;
  }
}
#character .bg-round.dark::after {
  background: url("../img/bg_cloud_dark.png") no-repeat bottom center;
  background-size: 100% auto;
}
@media only screen and (max-width: 768px) {
  #character .bg-round.dark::after {
    background: url("../img/bg_cloud_dark-sp.png") no-repeat bottom center;
    background-size: 100% auto;
  }
}
#character .ttl-box h1 {
  margin-left: 20px;
}
@media only screen and (max-width: 768px) {
  #character .ttl-box h1 {
    width: 70.9375vw;
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  #character .select {
    position: relative;
    z-index: 3;
  }
}
#character .select ul {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  #character .select ul {
    width: 64.6875vw;
    flex-wrap: wrap;
    margin: 0 auto 7.8125vw;
  }
}
#character .select ul li {
  position: relative;
  width: 91px;
}
@media only screen and (max-width: 768px) {
  #character .select ul li {
    width: 12.96875vw;
    margin-bottom: 4.0625vw;
  }
}
#character .select ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 120px;
  border: 3px solid #64507C;
  transition: all 0.3s ease;
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  #character .select ul li::before {
    width: 14.6875vw;
    height: 14.6875vw;
    border-radius: 15.625vw;
    border-width: 0.46875vw;
  }
}
#character .select ul li:hover::before {
  border-color: #EB5A91;
}
#character .select ul li a {
  position: relative;
  display: block;
}
#character .select ul li img {
  width: 100%;
  transition: all 0.3s ease;
}
#character .select ul li.current {
  pointer-events: none;
}
#character .select ul li.current::before {
  border-width: 6px;
}
@media only screen and (max-width: 768px) {
  #character .select ul li.current::before {
    border-width: 0.9375vw;
  }
}
#character .block {
  position: relative;
  width: 1200px;
  height: 948px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  #character .block {
    width: auto;
    height: 213.28125vw;
  }
}
#character .block .chara-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#character .block .chara-detail.active {
  display: block;
}
#character .block .chara-detail .sd-chara {
  position: absolute;
  top: 610px;
  right: 23px;
  width: 246px;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .sd-chara {
    top: 174.21875vw;
    right: 0;
    width: 33.4375vw;
    height: 33.4375vw;
  }
}
#character .block .chara-detail .sd-chara .image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 159px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .sd-chara .image {
    width: 19.84375vw;
  }
}
#character .block .chara-detail .sd-chara .image img {
  width: 100%;
}
#character .block .chara-detail .bg-circle {
  position: absolute;
  top: 108px;
  right: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 650px;
  height: 650px;
  border-radius: 1000px;
  background-color: #64507C;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .bg-circle {
    top: 86.25vw;
    right: -4.6875vw;
    width: 109.375vw;
    height: 109.375vw;
    border-radius: 156.25vw;
  }
}
#character .block .chara-detail .deco-circle {
  position: absolute;
  overflow: hidden;
  border-radius: 1000px;
  z-index: 2;
}
#character .block .chara-detail .deco-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-color: #fff;
}
#character .block .chara-detail .deco-circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-color: #64507C;
}
#character .block .chara-detail .deco-circle.circle1 {
  top: 44px;
  left: 406px;
  width: 350px;
  height: 350px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .deco-circle.circle1 {
    top: 69.6875vw;
    left: -9.375vw;
    width: 54.6875vw;
    height: 54.6875vw;
  }
}
#character .block .chara-detail .deco-circle.circle2 {
  top: 558px;
  right: 23px;
  width: 246px;
  height: 246px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .deco-circle.circle2 {
    top: 170.3125vw;
    right: 0vw;
    width: 33.4375vw;
    height: 33.4375vw;
  }
}
#character .block .chara-detail .deco-circle.circle3 {
  top: 565px;
  left: 94px;
  width: 278px;
  height: 278px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .deco-circle.circle3 {
    top: -16.25vw;
    left: 7.5vw;
    width: 43.4375vw;
    height: 43.4375vw;
  }
}
#character .block .chara-detail .deco-circle.circle4 {
  top: 344px;
  right: -162px;
  width: 143px;
  height: 143px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .deco-circle.circle4 {
    display: none;
  }
}
#character .block .chara-detail .serif {
  position: absolute;
  top: 65px;
  left: 32px;
  width: 77px;
  z-index: 3;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .serif {
    width: 10.9375vw;
    top: 10.3125vw;
    left: 8.75vw;
  }
}
#character .block .chara-detail .serif img {
  width: 100%;
}
#character .block .chara-detail .chara-box {
  position: absolute;
  bottom: 58px;
  left: 110px;
  width: 406px;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .chara-box {
    width: 100%;
    left: 0;
    bottom: 110.9375vw;
  }
}
#character .block .chara-detail .chara-box .chara {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .chara-box .chara {
    left: 0;
    transform: unset;
  }
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .chara-box .normal {
    width: 100% !important;
  }
}
#character .block .chara-detail .chara-box .normal img {
  width: 100%;
}
#character .block .chara-detail .intro-box {
  position: absolute;
  top: 108px;
  right: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 650px;
  height: 650px;
  border-radius: 1000px;
  text-align: center;
  z-index: 5;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box {
    top: 86.25vw;
    right: -4.6875vw;
    width: 109.375vw;
    height: 109.375vw;
    border-radius: 156.25vw;
  }
}
#character .block .chara-detail .intro-box p {
  color: #fff;
}
#character .block .chara-detail .intro-box .wrap {
  position: relative;
  z-index: 2;
  padding-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .wrap {
    padding-bottom: 0vw;
  }
}
#character .block .chara-detail .intro-box .name-box {
  position: relative;
  margin: 0 auto 40px;
  padding: 55px 0;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box {
    padding: 8.59375vw 0 7.03125vw;
    margin-bottom: 4.6875vw;
  }
}
#character .block .chara-detail .intro-box .name-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 334px;
  height: 45px;
  background: url("../img/character/name_deco01.svg") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box::before {
    width: 52.1875vw;
    height: 7.03125vw;
  }
}
#character .block .chara-detail .intro-box .name-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 334px;
  height: 23px;
  background: url("../img/character/name_deco02.svg") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box::after {
    width: 52.1875vw;
    height: 3.59375vw;
  }
}
#character .block .chara-detail .intro-box .name-box .eng {
  font-size: 26px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box .eng {
    font-size: 4.0625vw;
  }
}
#character .block .chara-detail .intro-box .name-box .name {
  font-size: 68px;
  line-height: 0.62;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box .name {
    font-size: 10.625vw;
  }
}
#character .block .chara-detail .intro-box .name-box .name span {
  display: inline-block;
  font-size: 26px;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .name-box .name span {
    font-size: 4.0625vw;
  }
}
#character .block .chara-detail .intro-box .text {
  font-size: 20px;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .intro-box .text {
    font-size: 3.4375vw;
  }
}
#character .block .chara-detail .btns ul {
  position: absolute;
  top: 395px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}
#character .block .chara-detail .btns ul li a {
  display: block;
  width: 80px;
  height: 80px;
  background: url("../img/icon/btn_arrow_dark.svg") no-repeat top center;
}
@media only screen and (max-width: 768px) {
  #character .block .chara-detail .btns ul li a {
    width: 12.5vw;
    height: 12.5vw;
  }
}
#character .block .chara-detail .btns ul li.prev {
  left: 0;
}
#character .block .chara-detail .btns ul li.prev a {
  transform: scale(-1, -1);
  transform-origin: 50% 36%;
}
#character .block .chara-detail .btns ul li.next {
  right: 0;
}
@media only screen and (max-width: 768px) {
  #character #aelu, #character #lagu {
    margin-top: -25vw;
  }
}
@media only screen and (max-width: 768px) {
  #character #aelu .chara-detail .chara-box, #character #lagu .chara-detail .chara-box {
    bottom: 116.5625vw;
  }
}
#character .btn-top {
  position: relative;
  z-index: -1;
}