@charset "UTF-8";
body {
  background-color: #fffcbe;
  color: #000;
  font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  height: 100%;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

#wrapper {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 750px) {
  .-pc {
    display: none;
  }
}

.-sp {
  display: none;
}
@media only screen and (max-width: 750px) {
  .-sp {
    display: block;
  }
}

.banner {
  padding-bottom: 10px;
}
.banner img {
  height: 50px;
}

.modal {
  background: #fff;
  opacity: 0;
  position: fixed;
  transition: all 0.4s ease 0.05s;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.modal.--active {
  opacity: 1;
  visibility: visible;
}
.modal-close {
  position: fixed;
  top: 3%;
  right: 2%;
}
.modal-mvtk {
  display: flex;
  align-items: center;
  justify-content: center;
}

#trailer-wrapper {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  height: auto;
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin: 3% auto;
  margin: 0 auto;
  justify-content: center;
  background: #000;
  max-width: 1100px;
  max-width: 1440px;
  width: 90%;
}
#trailer-wrapper.-show {
  top: 0;
}
#trailer-wrapper.-hide {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.5s ease 0.5s, visibility 1.5s ease 0.5s, background 1s ease 0s;
  background: #fff;
}
#trailer-wrapper.-hide #trailer {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper.-hide {
    visibility: visible;
    opacity: 1;
  }
  #trailer-wrapper.-hide #trailer {
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper {
    position: relative;
    top: auto;
    left: auto;
    background: #222;
    z-index: 1;
    height: auto;
    background-size: 100% auto;
    margin: 0;
    width: auto;
    padding: 0;
    max-width: 100%;
  }
}
#trailer-wrapper ul {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  height: 3em;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper ul {
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 3vw;
    box-sizing: border-box;
  }
}
#trailer-wrapper ul li {
  display: inline-block;
  width: 16%;
  box-sizing: border-box;
  padding: 0px 5px 0 0;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper ul li {
    width: 32.3%;
    width: 49%;
    padding: 0;
    height: 3em;
    margin-bottom: 2.5%;
    box-sizing: border-box;
  }
}
#trailer-wrapper ul li button {
  position: relative;
  padding: 10px 3px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  background: transparent;
  color: #000;
  line-height: 1;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
#trailer-wrapper ul li button:hover {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper ul li button {
    font-size: 3vw;
    padding: 0.4em 0.4em;
    letter-spacing: 0.08em;
    height: 100%;
    box-sizing: border-box;
  }
}
#trailer-wrapper ul li.cur button {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  cursor: default;
  pointer-events: none;
}
#trailer-wrapper ul li.small button {
  font-size: 0.8em;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper.portrait {
    margin: 8% 15% 0;
    margin: 8% 15% 8%;
  }
  #trailer-wrapper.portrait #trailer-player-container {
    padding-bottom: 177.7% !important;
  }
  #trailer-wrapper.portrait.-active #trailer-container {
    max-width: 40svh;
    max-width: 100vw;
  }
  #trailer-wrapper.portrait.-active #trailer-container #trailer-player-container {
    padding-bottom: 120vw !important;
  }
}

#trailer {
  width: calc(100% - 100px);
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 750px) {
  #trailer {
    width: 100%;
    padding-bottom: 56.25%;
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    padding: 0vw;
    box-sizing: border-box;
  }
}

#trailer-wrapper .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper .btn-close {
    display: none;
  }
}

#trailer-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

#trailer-thumb {
  position: absolute;
  top: 50% !important;
  height: 300% !important;
  background: #000;
  transform: translateY(-50%);
}
#trailer-thumb-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#trailer-thumb-container:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  lefT: 0;
  background: url(../images/common/play.png) no-repeat center center rgba(0, 0, 0, 0);
  background-size: 90px 90px;
  cursor: pointer;
}
@media only screen and (max-width: 750px) {
  #trailer-thumb-container:after {
    background-size: 15vw 15vw;
  }
}

#trailer-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media only screen and (max-width: 750px) {
  #trailer-container {
    padding: 5vw 3vw 1vw;
    padding: 0;
  }
}

#trailer-player-container {
  position: relative;
  padding-bottom: 56%;
  padding-bottom: 52.5%;
  overflow: hidden;
  height: auto;
  width: 100%;
}
#trailer-player-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 750px) {
  #trailer-player-container {
    padding-bottom: 41.6%;
    padding-bottom: 56.25%;
    padding-bottom: 53.5%;
  }
}

#trailer-nav {
  text-align: center;
  padding: 10px 0 10px;
  line-height: 1 !important;
}
@media only screen and (max-width: 750px) {
  #trailer-nav {
    padding: 10px 0;
  }
}

#trailer .btn-skip {
  opacity: 1;
  color: #000;
  transition: all 0.25s ease;
}

#trailer .btn-skip:hover {
  opacity: 0.8;
}

#trailer-wrapper #trailer-wrapper ul #trailer-wrapper ul li:last-child {
  padding-right: 0;
}

#trailer-wrapper.op #btn-skip {
  display: block;
}

#trailer-wrapper ul .op {
  display: none;
}

#trailer-wrapper.op {
  background: #000;
  display: block;
}
#trailer-wrapper.op ul li {
  display: none;
}
#trailer-wrapper.op ul li.op {
  display: inline-block;
}

.btn-close {
  width: 50px;
  height: 50px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.btn-close__inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.btn-close:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#trailer-wrapper {
  background: transparent;
}
#trailer-wrapper.-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: 100;
  max-width: none;
  background: #000;
  padding: 0;
  margin: 0;
}
#trailer-wrapper.-active .trailer-wrapper__inner {
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
}
#trailer-wrapper.-active #trailer {
  max-width: 1920px;
}
#trailer-wrapper.-active #trailer-container {
  max-width: 155vh;
}
#trailer-wrapper.-active #trailer-player-container {
  padding-bottom: 56.25%;
}
@media only screen and (max-width: 750px) {
  #trailer-wrapper.-active #trailer-player-container {
    padding-bottom: 60.25%;
  }
}
#trailer-wrapper.-active #trailer-thumb {
  height: 100% !important;
}
#trailer-wrapper.-active #trailer-thumb-container::after {
  display: none;
}
#trailer-wrapper.-active #trailer-nav {
  background: transparent;
  display: block !important;
}
#trailer-wrapper.-active #trailer-nav ul li button {
  border-color: #fff;
  color: #fff;
}
#trailer-wrapper.-active #trailer-nav ul li button:hover {
  background: #fff;
  color: #000;
}
#trailer-wrapper.-active #trailer-nav ul li.cur button {
  background: #fff;
  color: #000;
}
#trailer-wrapper.-active .btn-close {
  display: block;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.4s ease 0.05s;
  width: 100%;
  height: 100%;
  background: rgba(210, 190, 239, 0.9);
  z-index: 11;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.nav-list {
  text-align: right;
  padding: 6rem 5rem;
}
.nav-list a {
  font-size: 3rem;
  color: #000;
}
.nav-item {
  padding: 1rem 0;
}
.nav-btn {
  position: fixed;
  top: 3%;
  right: 2%;
  width: 4rem;
  height: 2rem;
  z-index: 10;
}
.nav-btn__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-btn__inner span {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: #f5e700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav-btn__inner span:nth-child(1) {
  top: 0;
}
.nav-btn__inner span:nth-child(2) {
  top: 50%;
}
.nav-btn__inner span:nth-child(3) {
  top: 100%;
}

body.def .nav {
  transform: translate(0, -100%);
  transition: all 0s ease 0s;
}

button {
  background: transparent;
  border: 0;
}

.-font {
  font-family: "Kosugi Maru", sans-serif;
}

.top {
  position: relative;
}
.top-v {
  position: relative;
  overflow: hidden;
}
.top-v img {
  width: 100%;
  transition: all 10s ease-out 0s;
}
.top-v--1 {
  position: relative;
}
.top-v--2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  animation: visualFadeIn 8s ease-in-out 2s infinite alternate;
}
@media only screen and (max-width: 750px) {
  .top-v--2 {
    position: relative;
    animation: none;
    opacity: 1;
  }
}
.top__text {
  transition: all 1.5s ease-out 2s;
}
@media only screen and (max-width: 750px) {
  .top__text {
    width: 100%;
    position: relative;
    aspect-ratio: 750/1100;
  }
  .top__text__inner {
    width: 100%;
    height: 100%;
  }
}
.top__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.top-title {
  width: 87.3417721519%;
  width: 89.6624472574%;
  padding-bottom: 2%;
  margin-right: 2%;
}
@media only screen and (max-width: 750px) {
  .top-title {
    height: auto;
    width: 83.3333333333vw;
    margin-right: 0;
    flex-grow: 1;
    order: 1;
  }
  .top-title img {
    height: auto;
    width: 100%;
  }
}
.top-copy1 {
  position: absolute;
  top: 4%;
  left: 3%;
  width: 1.9270833333%;
}
@media only screen and (max-width: 750px) {
  .top-copy1 {
    top: 6vw;
    left: 3vw;
    width: 3.6%;
    max-width: none;
  }
}
.top-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 3%;
  left: 50%;
  width: 49.375%;
  transform: translate(-50%, 0);
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .top-center {
    height: 57%;
    width: 100%;
    bottom: 1.5%;
  }
}
.top-roadshow {
  position: absolute;
  bottom: 3%;
  right: 2%;
  max-width: 16%;
}
@media only screen and (max-width: 750px) {
  .top-roadshow {
    order: 2;
    position: relative;
    width: 44.4%;
  }
}
.top-copy2 {
  width: 100%;
}
@media only screen and (max-width: 750px) {
  .top-copy2 {
    width: 92.4%;
    order: 3;
  }
}
.top-credit {
  width: 68.5654008439%;
  padding-bottom: 2%;
}
@media only screen and (max-width: 750px) {
  .top-credit {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding-top: 3rem;
    width: 93.2%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 750px) {
  .top-sub {
    background: #fffcbe;
  }
}
.top.-hide .top-v img {
  transform: scale(1.1);
  transition: all 0s ease 0s !important;
}
.top.-hide .top__text {
  opacity: 0;
  transition: all 0s ease 0s !important;
}
.top.-hide .top-credit {
  opacity: 0;
  transition: all 0s ease 0s !important;
}
@media only screen and (max-width: 750px) {
  .top.-hide .top-credit {
    opacity: 1;
  }
}

.badges {
  position: absolute;
  top: 95px;
  right: 2.5%;
  width: 25%;
  max-width: 600px;
  z-index: 2;
  display: flex;
}
.badges button {
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.badges-item {
  padding-left: 4%;
}
.badges-item:first-child {
  padding-left: 0;
}
@media only screen and (max-width: 750px) {
  .badges {
    position: relative;
    top: auto;
    right: auto;
    width: 75%;
    margin: 0 auto;
    max-width: none;
    padding: 6vw 0 4vw;
  }
  .badges.-pc {
    display: none;
  }
}
.badges-sp {
  display: none;
  padding: 4% 10%;
}
.badges-sp-item {
  padding: 0 1%;
}
@media only screen and (max-width: 750px) {
  .badges-sp {
    display: flex !important;
  }
}

.banner {
  padding: 0 3% 5%;
}
.banner-item {
  padding-top: 5%;
}
@media only screen and (max-width: 750px) {
  .banner {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
    padding: 0 3% 0;
  }
  .banner-item {
    width: 48%;
    padding: 3% 1%;
  }
}

.container-trailer-banner {
  background: #fffcbe;
  padding: 5rem 0;
}
@media only screen and (max-width: 750px) {
  .container-trailer-banner {
    padding: 0;
  }
}

.top-leftbottom {
  position: absolute;
  bottom: 2%;
  left: 2%;
  z-index: 2;
}
.top-leftbottom dl {
  display: flex;
  align-items: center;
}
.top-leftbottom dl dd {
  padding-left: 4%;
}
@media only screen and (max-width: 750px) {
  .top-leftbottom {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
    padding-right: 0;
  }
  .top-leftbottom .share {
    width: 65%;
    margin: 0 auto;
  }
  .top-leftbottom dl {
    width: 100%;
    justify-content: space-between;
  }
  .top-leftbottom dl img {
    width: 8vw;
  }
}

.mvtk {
  width: 95%;
  margin: 0 auto;
  max-width: 200px;
  padding-bottom: 5%;
  position: relative;
  z-index: 2;
}
.mvtk button {
  display: block;
  margin: 0;
  padding: 0;
}
.mvtk-item {
  padding-top: 5%;
}
@media only screen and (max-width: 750px) {
  .mvtk {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
  }
  .mvtk-item {
    width: 48%;
    padding: 3% 1%;
  }
}

.sns {
  position: fixed;
  top: calc(3% - 5px);
  right: calc(2% + 5.5rem);
  z-index: 2;
}
.sns-list {
  display: flex;
}
.sns-list li {
  padding-left: 0.8rem;
}
@media only screen and (max-width: 750px) {
  .sns {
    position: relative;
    top: auto;
    right: auto;
    width: 85%;
    margin: 1.5rem auto 2rem;
  }
  .sns-list {
    justify-content: space-between;
  }
  .sns-list li {
    padding-left: 0;
    width: 31%;
  }
}

.page {
  background: #fff;
}
.page__container {
  margin: 0 auto;
  padding: 0 50px 100px;
  box-sizing: border-box;
}
@media only screen and (max-width: 750px) {
  .page__container {
    padding: 0 6.6666666667vw 13.3333333333vw;
  }
}
.page__container__inner {
  max-width: 74.3243243243%;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  .page__container__inner {
    max-width: none;
  }
}

footer {
  text-align: center;
  padding: 0 2rem 1rem;
  background: #fffcbe;
}
@media only screen and (max-width: 750px) {
  footer {
    text-align: center;
  }
}

.-sp {
  display: none;
}

@media only screen and (max-width: 750px) {
  .-sp {
    display: block;
  }
}
@keyframes visualFadeIn {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.introduction {
  background: #fffcbe;
}
.introduction-wrapper {
  margin: 0 auto;
}
.introduction-container {
  display: flex;
  padding: 2rem 0;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 750px) {
  .introduction-container {
    display: block;
    padding: 0;
    margin-top: 3vw;
  }
}
.introduction-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
}
.introduction-text p {
  padding: 1% 0 0;
}
.introduction-text__inner {
  padding-top: 5%;
  padding-bottom: 32%;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  .introduction-text {
    width: 100%;
    padding-top: 0;
  }
  .introduction-text__inner {
    padding-top: 10vw;
    padding-bottom: 65vw;
    width: 100%;
    max-width: none;
  }
  .introduction-text p {
    padding: 0 0;
  }
}
.introduction-image {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translate(-50%, 0);
}
.introduction-image img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  .introduction-image {
    width: 94vw;
    margin: 0 auto;
    padding: 0;
  }
  .introduction-image img {
    width: 100%;
    height: auto;
  }
}
.introduction-title {
  padding: 0 0 5%;
}
@media only screen and (max-width: 750px) {
  .introduction-title {
    padding: 5vw 0 8vw;
  }
}

.story {
  background: #fffcbe;
  padding-top: 4rem;
}
@media only screen and (max-width: 750px) {
  .story {
    padding-top: 0;
  }
}
.story-wrapper {
  margin: 0 auto;
}
.story-container {
  display: flex;
  padding: 2rem 0;
}
@media only screen and (max-width: 750px) {
  .story-container {
    display: block;
  }
}
.story-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}
.story-text p {
  padding: 5% 0;
}
.story-text__inner {
  width: 68.75%;
  max-width: 660px;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  .story-text {
    width: 100%;
    padding-top: 5vw;
  }
  .story-text__inner {
    width: 100%;
    max-width: none;
  }
  .story-text p {
    padding: 0vw 0 8vw;
  }
}
.story-line {
  width: 40%;
  margin: 0 auto;
}
.story-line img {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 750px) {
  .story-line {
    width: 40%;
  }
  .story-line img {
    width: 100%;
  }
}
.story-image {
  width: 50%;
  margin: 0;
  padding: 0;
  padding-right: 2rem;
  box-sizing: border-box;
}
.story-image img {
  width: 100%;
}
@media only screen and (max-width: 750px) {
  .story-image {
    width: 90vw;
    margin: 0 auto;
    padding: 0;
    padding-top: 3rem;
  }
}
.story-title {
  padding: 0 0 5%;
}

.character {
  background: #fffcbe;
  padding-top: 5rem;
}
.character-wrapper {
  margin: 0 auto;
}
.character-title {
  text-align: center;
  padding-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.character-title-item {
  padding: 0 2rem;
}
.character-container {
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 750px) {
  .character-container {
    display: block;
  }
}
.character-btn {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 16.8039538715%;
}
@media only screen and (max-width: 750px) {
  .character-btn {
    width: 16.4vw;
  }
}
.character-main {
  display: flex;
  margin: 0 auto 4%;
  justify-content: center;
  max-width: 1920px;
  box-sizing: border-box;
  padding: 0 2rem;
}
@media only screen and (max-width: 750px) {
  .character-main {
    width: 94%;
  }
}
.character-main-item {
  position: relative;
}
.character-main-item figure {
  margin: 0;
  padding: 0;
  width: 100%;
}
.character-main-item figure img {
  width: 100%;
}
.character-main-item--4 {
  padding-right: 2%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--4 {
    padding: 0;
    padding-bottom: 10vw;
  }
}
@media only screen and (max-width: 750px) {
  .character-main-item--1 {
    margin-bottom: 2rem;
  }
}
.character-main-item--1 .character-main-text {
  width: 52.7182866557%;
  margin: -14% auto 0;
}
@media only screen and (max-width: 750px) {
  .character-main-item--1 .character-main-text {
    width: 100%;
    margin: -10% auto 0;
  }
}
.character-main-item--1 .character-btn {
  bottom: 15%;
  left: 69%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--1 .character-btn {
    bottom: 13%;
  }
}
@media only screen and (max-width: 750px) {
  .character-main-item--2 {
    margin-bottom: 2rem;
  }
}
.character-main-item--2 .character-main-text {
  width: 49.2586490939%;
  margin: -8% auto 0;
}
@media only screen and (max-width: 750px) {
  .character-main-item--2 .character-main-text {
    width: 100%;
  }
}
.character-main-item--2 .character-btn {
  bottom: 2%;
  left: 70%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--2 .character-btn {
    bottom: 5%;
    left: 68%;
  }
}
@media only screen and (max-width: 750px) {
  .character-main-item--3 {
    margin-bottom: 2rem;
  }
}
.character-main-item--3 .character-main-text {
  width: 54.2009884679%;
  margin: -10% auto 0;
}
@media only screen and (max-width: 750px) {
  .character-main-item--3 .character-main-text {
    width: 100%;
    margin: -5% auto 0;
  }
}
.character-main-item--3 .character-btn {
  bottom: 11%;
  left: 72%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--3 .character-btn {
    bottom: 7%;
    left: 72%;
  }
}
.character-main-item--4 {
  margin-top: -1.7%;
}
.character-main-item--4 .character-btn {
  bottom: 33%;
  left: 65%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--4 {
    margin-top: 0;
  }
  .character-main-item--4 .character-btn {
    bottom: 40%;
    left: 68%;
  }
}
.character-main-item--5 .character-btn {
  bottom: 3%;
  left: 66%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--5 .character-btn {
    bottom: 42%;
    left: 62%;
  }
}
.character-main-item--6 .character-btn {
  bottom: 33%;
  left: 66%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--6 .character-btn {
    bottom: 42%;
    left: 62%;
  }
}
.character-main-item--7 .character-btn {
  bottom: 2%;
  left: 66%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--7 .character-btn {
    bottom: 42%;
    left: 64%;
  }
}
.character-main-item--8 .character-btn {
  bottom: 39%;
  left: 66%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--8 .character-btn {
    bottom: 42%;
    left: 64%;
  }
}
.character-main-item--9 .character-btn {
  bottom: 4%;
  left: 66%;
}
@media only screen and (max-width: 750px) {
  .character-main-item--9 .character-btn {
    bottom: 41%;
    left: 63%;
  }
}
.character-main-item--9:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/chara/c9-item-pc.png) no-repeat center bottom;
  background-size: 100% auto;
  pointer-events: none;
}
.character-main-text {
  position: relative;
}
.character-main-sub .character-btn {
  width: 28.275862069%;
}
@media only screen and (max-width: 750px) {
  .character-main-sub .character-btn {
    width: 13.3333333333vw;
  }
}
@media only screen and (max-width: 750px) {
  .character-main-sub .character-main-item {
    display: flex;
  }
  .character-main-sub .character-main-item:nth-child(even) figure {
    order: 2;
  }
  .character-main-sub .character-main-item:nth-child(even) .character-main-text {
    order: 1;
  }
}
@media only screen and (max-width: 750px) {
  .character-main {
    flex-direction: column;
  }
}
.character-detail {
  z-index: 100;
  background: rgba(214, 212, 174, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.character-detail__inner {
  max-width: 1100px;
}
.character-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: none;
}
.character-detail-item.--active {
  display: flex;
}
.character-detail-item-sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  display: none;
}
.character-detail-item-sub.--active {
  display: flex;
}
@media only screen and (max-width: 750px) {
  .character-detail-item {
    max-height: 100svh;
    overflow: auto;
    padding: 10vw 0;
    flex-direction: column;
  }
  .character-detail-item-sub {
    max-height: 100svh;
    overflow: auto;
    padding: 10vw 0;
    flex-direction: column;
  }
}
.character-detail-image {
  position: relative;
  width: 44.1818181818%;
}
.character-detail-image-sub {
  position: relative;
  width: 27.6363636364%;
}
@media only screen and (max-width: 750px) {
  .character-detail-image {
    width: 80%;
  }
  .character-detail-image-sub {
    width: 50%;
    margin: 0 auto;
  }
}
.character-detail-text {
  position: relative;
  width: 50%;
}
.character-detail-text dt {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}
.character-detail-text dd {
  font-size: 1rem;
  line-height: 1.8;
  padding-top: 1rem;
}
.character-detail-text-sub {
  position: relative;
  width: 69.1818181818%;
}
.character-detail-text-sub dt {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}
.character-detail-text-sub dd {
  font-size: 1rem;
  line-height: 1.8;
  padding-top: 1rem;
}
@media only screen and (max-width: 750px) {
  .character-detail-text {
    width: 80%;
    margin: 0 auto;
  }
  .character-detail-text-sub {
    width: 80%;
    margin: 0 auto;
  }
}
.character-detail-name {
  position: absolute;
  bottom: -14%;
  right: -8%;
  width: 65.6378600823%;
}
.character-detail-name-sub {
  padding-bottom: 2rem;
  padding-top: 1.2rem;
}
@media only screen and (max-width: 750px) {
  .character-detail-name {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    margin-top: -10%;
  }
  .character-detail-name-sub {
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .character-detail-name-sub img {
    height: 1.5rem;
    margin: 0 auto;
    display: block;
  }
}
.character-detail-illust--1-1 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-130%, -50%);
}
.character-detail-illust--1-3 {
  position: absolute;
  right: 0;
  top: 0%;
  transform: translate(-50%, -80%);
}
.character-detail-illust--1-2 {
  position: absolute;
  right: 0;
  bottom: 0%;
  transform: translate(0%, 100%);
}
@media only screen and (max-width: 750px) {
  .character-detail-illust--1-1 {
    left: 55%;
    top: 0%;
    transform: translate(0%, 20%);
    width: 10vw;
  }
  .character-detail-illust--1-3 {
    right: auto;
    top: 0%;
    left: 80%;
    transform: translate(0%, -80%);
    width: 20vw;
  }
  .character-detail-illust--1-2 {
    right: 0;
    bottom: 0%;
    transform: translate(0%, 100%);
    width: 40vw;
  }
}
.character-detail-illust--2-1 {
  position: absolute;
  left: 0;
  top: 0%;
  transform: translate(100%, -200%);
}
.character-detail-illust--2-2 {
  position: absolute;
  right: 0;
  top: 0%;
  transform: translate(20%, -80%);
}
.character-detail-illust--2-3 {
  position: absolute;
  right: 0;
  bottom: 0%;
  transform: translate(-30%, 100%);
}
@media only screen and (max-width: 750px) {
  .character-detail-illust--2-1 {
    left: 0;
    top: 0%;
    transform: translate(150%, -50%);
    width: 10vw;
  }
  .character-detail-illust--2-2 {
    right: 0;
    top: 0%;
    transform: translate(20%, -80%);
    width: 20vw;
    display: none;
  }
  .character-detail-illust--2-3 {
    right: 0;
    bottom: auto;
    top: 0;
    transform: translate(0%, -20%);
    width: 20vw;
  }
}
.character-detail-illust--3-1 {
  position: absolute;
  left: 0;
  top: 0%;
  transform: translate(300%, -120%);
}
.character-detail-illust--3-2 {
  position: absolute;
  right: 0;
  top: 0%;
  transform: translate(-20%, -80%);
}
.character-detail-illust--3-3 {
  position: absolute;
  left: 0;
  bottom: 0%;
  transform: translate(30%, 110%);
}
@media only screen and (max-width: 750px) {
  .character-detail-illust--3-1 {
    left: auto;
    top: 0%;
    right: 0;
    transform: translate(-90%, -80%);
    width: 10vw;
  }
  .character-detail-illust--3-2 {
    right: 0;
    top: 0%;
    transform: translate(40%, -50%);
    width: 10vw;
  }
  .character-detail-illust--3-3 {
    left: 0;
    bottom: auto;
    top: 0;
    transform: translate(30%, 110%);
    width: 20vw;
    display: none;
  }
}
.character-detail-illust--4-1 {
  position: absolute;
  right: 0;
  top: 0%;
  transform: translate(25%, 10%);
}
.character-detail-illust--4-2 {
  position: absolute;
  left: 0;
  bottom: 0%;
  transform: translate(-80%, 100%);
}
@media only screen and (max-width: 750px) {
  .character-detail-illust--4-1 {
    right: 0;
    top: 0%;
    width: 20vw;
    transform: translate(25%, 110%);
  }
  .character-detail-illust--4-2 {
    left: 0;
    bottom: auto;
    top: 0;
    width: 20vw;
    transform: translate(-10%, -30%);
  }
}

.staff {
  background: #fffcbe;
  padding-top: 5rem;
}
.staff-wrapper {
  margin: 0 auto;
  max-width: 1200px;
}
.staff-title {
  text-align: center;
}
.staff-container {
  padding: 0 5%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 750px) {
  .staff-container {
    display: block;
  }
}
.staff-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.staff-main {
  margin: 0 auto 4%;
  justify-content: center;
}
.staff-main h2 {
  text-align: center;
  margin-bottom: -1rem;
}
.staff-main dl {
  padding-bottom: 4.5rem;
}
.staff-main dl dt {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  padding: 1rem 0 0.5rem;
}
.staff-main dl dd {
  font-size: 0.85rem;
  line-height: 1.7;
}
.staff-main-item figure {
  margin: 0;
  padding: 0;
  width: 100%;
}
.staff-main-item figure img {
  width: 100%;
}
.staff-main-item--4 {
  padding-right: 2%;
}
.staff-main-text {
  position: relative;
}
.staff-main-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.staff-main-sub-item {
  width: 48%;
}
@media only screen and (max-width: 750px) {
  .staff-main-sub-item {
    width: 100%;
  }
}
.staff-main-sub h2 {
  text-align: center;
  margin-bottom: 0rem;
}
@media only screen and (max-width: 750px) {
  .staff-main {
    flex-direction: column;
  }
}
.staff-title {
  padding: 0 0 5%;
}

.comment {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.04em;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100% !important;
  height: 100%;
  z-index: 11;
  overflow: auto;
}
.comment-note {
  text-align: right;
  display: block;
  font-size: 0.9rem;
}
.comment__title {
  text-align: center;
  padding-bottom: 6rem;
}
.comment__inner {
  padding-top: 8rem;
}
@media only screen and (max-width: 750px) {
  .comment__inner {
    padding-top: 10rem;
  }
}
.comment__name {
  padding-top: 1rem;
}
.comment__qa {
  line-height: 2;
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}
.comment__qa dt {
  color: #000000;
  font-weight: bold;
  padding-top: 2rem;
  padding-bottom: 0.8em;
  display: flex;
}
.comment__qa dt span {
  flex-grow: 1;
}
.comment__qa dt .-mark {
  flex-grow: 0;
  width: 5rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.comment__qa dd {
  color: #666666;
  padding-left: 5em;
}
@media only screen and (max-width: 750px) {
  .comment__qa dt .-mark {
    width: 3.2rem;
  }
  .comment__qa dt .-mark img {
    height: 0.5rem;
  }
  .comment__qa dd {
    padding-left: 0;
  }
}
.comment__text {
  color: #606060;
  line-height: 2;
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.comment-bg {
  position: fixed;
  top: 0;
  left: 1%;
  width: 14.4444444444%;
}
@media only screen and (max-width: 750px) {
  .comment-bg {
    position: absolute;
    width: 100vw;
    left: 0;
    z-index: 0;
  }
}

.anim-item .anim-scale,
.anim-item.anim-scale,
.op-item .anim-scale,
.op-item.anim-scale {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.1s ease 0.1s, transform 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}

.anim-item .anim-show,
.anim-item.anim-show,
.op-item .anim-show,
.op-item.anim-show {
  visibility: visible;
  transition: all 0s ease 0s;
}

.anim-item .anim-mask,
.anim-item.anim-mask,
.op-item .anim-mask,
.op-item.anim-mask {
  width: 100%;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
}

.anim-item .anim-fade,
.anim-item.anim-fade,
.op-item .anim-fade,
.op-item.anim-fade {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 0.5s ease 0s, transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.anim-item .anim-fade2,
.anim-item.anim-fade2,
.op-item .anim-fade2,
.op-item.anim-fade2 {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 0.3s ease 0s;
}

.anim-item .anim-rotate,
.anim-item.anim-rotate,
.op-item .anim-rotate,
.op-item.anim-rotate {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 0.2s ease 0s, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

.anim-item.hide .anim-scale,
.anim-item.hide.anim-scale,
.op-item.hide .anim-scale,
.op-item.hide.anim-scale {
  opacity: 0;
  transform: scale3d(1.2, 1.2, 1);
}

.anim-item.hide .anim-show,
.anim-item.hide.anim-show,
.op-item.hide .anim-show,
.op-item.hide.anim-show {
  visibility: hidden;
}

.anim-item.hide .anim-mask,
.anim-item.hide.anim-mask,
.op-item.hide .anim-mask,
.op-item.hide.anim-mask {
  width: 0;
}

.anim-item.hide .anim-fade,
.anim-item.hide.anim-fade,
.op-item.hide .anim-fade,
.op-item.hide.anim-fade {
  opacity: 0;
  transform: translate3d(0px, 30px, 0px);
}

.anim-item.hide .anim-fade2,
.anim-item.hide.anim-fade2,
.op-item.hide .anim-fade2,
.op-item.hide.anim-fade2 {
  opacity: 0;
}

.anim-item.hide .anim-rotate,
.anim-item.hide.anim-rotate,
.op-item.hide .anim-rotate,
.op-item.hide.anim-rotate {
  opacity: 0;
  transform: rotateY(90deg);
}

.anim-delay-1 {
  transition-delay: 0.1s !important;
  animation-delay: 0.1s !important;
}

.anim-delay-2 {
  transition-delay: 0.2s !important;
  animation-delay: 0.2s !important;
}

.anim-delay-3 {
  transition-delay: 0.3s !important;
  animation-delay: 0.3s !important;
}

.anim-delay-4 {
  transition-delay: 0.4s !important;
  animation-delay: 0.4s !important;
}

.anim-delay-5 {
  transition-delay: 0.5s !important;
  animation-delay: 0.5s !important;
}

.anim-delay-6 {
  transition-delay: 0.6s !important;
  animation-delay: 0.6s !important;
}

.anim-delay-7 {
  transition-delay: 0.7s !important;
  animation-delay: 0.7s !important;
}

.anim-delay-8 {
  transition-delay: 0.8s !important;
  animation-delay: 0.8s !important;
}

.anim-delay-9 {
  transition-delay: 0.9s !important;
  animation-delay: 0.9s !important;
}

.anim-delay-10 {
  transition-delay: 1s !important;
  animation-delay: 1s !important;
}

.anim-delay-11 {
  transition-delay: 1.1s !important;
  animation-delay: 1.1s !important;
}

.anim-delay-12 {
  transition-delay: 1.2s !important;
  animation-delay: 1.2s !important;
}

.anim-delay-13 {
  transition-delay: 1.3s !important;
  animation-delay: 1.3s !important;
}

.anim-delay-14 {
  transition-delay: 1.4s !important;
  animation-delay: 1.4s !important;
}

.anim-delay-15 {
  transition-delay: 1.5s !important;
  animation-delay: 1.5s !important;
}

.anim-delay-16 {
  transition-delay: 1.6s !important;
  animation-delay: 1.6s !important;
}

.anim-delay-17 {
  transition-delay: 1.7s !important;
  animation-delay: 1.7s !important;
}

.anim-delay-18 {
  transition-delay: 1.8s !important;
  animation-delay: 1.8s !important;
}

.anim-delay-19 {
  transition-delay: 1.9s !important;
  animation-delay: 1.9s !important;
}

.anim-delay-20 {
  transition-delay: 2s !important;
  animation-delay: 2s !important;
}

.anim-delay-21 {
  transition-delay: 2.1s !important;
}

.anim-delay-22 {
  transition-delay: 2.2s !important;
}

.anim-delay-35 {
  transition-delay: 3.5s !important;
}

.anim-delay-36 {
  transition-delay: 3.6s !important;
}

.anim-delay-37 {
  transition-delay: 3.7s !important;
}

.anim-delay-38 {
  transition-delay: 3.8s !important;
}

.anim-delay-39 {
  transition-delay: 3.9s !important;
}

.anim-item.hide,
.anim-item.hide *,
.op-item.hide,
.op-item.hide * {
  transition: all 0s 0s !important;
}

.illust {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: 100;
  background: rgba(214, 212, 174, 0.8);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease 0.05s;
}
.illust.--active {
  opacity: 1;
  visibility: visible;
}
.illust__inner {
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 750px) {
  .illust__inner {
    justify-content: flex-start;
    transform: translate(0%, 0);
    transition: all 0.4s ease 0s;
  }
  .illust__inner.--active {
    transform: translate(-100%, 0);
  }
}
.illust-title {
  padding: 6svh;
  box-sizing: border-box;
  flex-shrink: 1;
  width: 62svh;
}
.illust-title p {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  line-height: 1.6;
  padding-top: 2rem;
}
.illust-title button {
  display: none;
}
@media only screen and (max-width: 750px) {
  .illust-title {
    flex-shrink: 0;
    width: 100vw;
  }
  .illust-title p {
    font-size: 1.1rem;
  }
  .illust-title button {
    display: block;
    width: 35%;
    margin: 10% auto 0;
  }
}
.illust-content {
  background: white;
  padding-top: 2svh;
  max-width: 53svh;
  height: 100svh;
  box-sizing: border-box;
}
.illust-content__inner {
  flex-grow: 1;
  display: flex;
}
@media only screen and (max-width: 750px) {
  .illust-content {
    max-width: none;
    width: 100vw;
    padding-top: 12vw;
  }
}
.illust-swiper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.illust-timeline {
  display: flex;
  justify-content: space-between;
  height: 1%;
}
.illust-timeline-item {
  width: 23.5%;
  height: 100%;
  background: #e1e0c6;
}
.illust-timeline-item span {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffff00;
  width: 0;
  transition: all 0.1s ease 0s;
}
.illust-item {
  height: 100%;
  flex-shrink: 0;
  max-width: 53svh;
  background: #fff;
}
.illust-item__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.illust-item.--profile .illust-profile {
  opacity: 1;
  visibility: visible;
}
.illust-item.--profile .illust-image {
  opacity: 0;
  visibility: hidden;
}
@media only screen and (max-width: 750px) {
  .illust-item {
    max-width: none;
    width: 100vw;
  }
}
.illust-btn-profile {
  display: flex;
  justify-content: flex-end;
  padding: 2svh 2svh 0;
}
.illust-btn-profile button {
  width: 40%;
  padding: 0.8svh 0.5svh;
  border: 1px solid #000;
  border-radius: 1svh;
  width: 20svh;
  text-align: center;
  cursor: pointer;
}
.illust-name {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1rem, 4.6svh, 3rem);
  padding: 0.2em 0.3em 0.5em;
}
@media only screen and (max-width: 750px) {
  .illust-name {
    font-size: 2rem;
    padding: 0.2em 0.5em 0.5em;
    flex-grow: 0.5;
    display: flex;
    align-items: center;
  }
}
.illust-main {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.illust-profile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2svh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease 0s;
  cursor: pointer;
}
.illust-profile dt {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.7rem, 2svh, 2rem);
  padding-top: 3svh;
}
.illust-profile dd {
  padding-top: 1svh;
  padding-bottom: 1svh;
  line-height: 1.8;
  font-size: clamp(0.7rem, 1.8svh, 2rem);
}
.illust-image {
  margin: 0;
  padding: 0;
  transition: all 0.4s ease 0s;
}
@media only screen and (max-width: 750px) {
  .illust-image {
    max-width: 48svh;
    margin: 0 auto;
  }
}
.illust-sns {
  display: flex;
  justify-content: center;
  padding: 0 4%;
  align-items: flex-start;
  flex-grow: 1;
}
.illust-sns-item {
  width: 50%;
  text-align: center;
}
.illust-sns-item a {
  display: block;
  width: 100%;
}
.illust-sns-item a img {
  width: 20%;
}
@media only screen and (max-width: 750px) {
  .illust-sns {
    align-items: flex-start;
  }
}
.illust .modal-close {
  cursor: pointer;
}
@media only screen and (max-width: 750px) {
  .illust .modal-close {
    top: 1.8vw;
    right: 1.5vw;
    width: 12%;
  }
}