@charset "UTF-8";
.header {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 50px 0 black inset;
}

.header:after {
  content: "";
  display: block;
  background: url(../img/line_deco_box.png) 0 50% repeat-x;
  background-size: cover;
  width: 100%;
  height: 2.89017vw;
  max-height: 55px;
  position: absolute;
  bottom: 0;
}

.title-logo {
  position: absolute;
  top: 13%;
  right: 16%;
  width: 19.44444vh;
  max-width: 230px;
}

.title-logo img {
  width: 100%;
  vertical-align: bottom;
}

.reserve-area {
  background: url(../img/img_header_deco.png) 0 0 no-repeat;
  background-size: cover;
  width: 32.15975vw;
  height: 20.6516vw;
  max-width: 612px;
  max-height: 393px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.reserve-area__reserve-button {
  display: block;
  bottom: 13%;
  right: 2.255vw;
  width: 17.23958vw;
  height: 15.46875vw;
  max-width: 331px;
  max-height: 297px;
  position: absolute;
}

.reserve-area__release-voice {
  width: 14vw;
  max-width: 250px;
  position: absolute;
  right: 60%;
  bottom: 16%;
}

.reserve-area__release-voice img {
  width: 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0, 1.37, 0.6, 1.65);
  transition: -webkit-transform 0.15s cubic-bezier(0, 1.37, 0.6, 1.65);
  transition: transform 0.15s cubic-bezier(0, 1.37, 0.6, 1.65);
  transition: transform 0.15s cubic-bezier(0, 1.37, 0.6, 1.65), -webkit-transform 0.15s cubic-bezier(0, 1.37, 0.6, 1.65);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.reserve-area__release-voice:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.reserve-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.reserve-button__outside {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.reserve-button__image-inside {
  top: 9%;
  left: 26%;
  width: 68%;
  -webkit-animation: reserve-inside-animation 5s linear infinite;
          animation: reserve-inside-animation 5s linear infinite;
  z-index: 2;
}

.reserve-button__image-deco {
  width: 80%;
  top: -5%;
  left: 20%;
  -webkit-animation: reserve-deco-animation 4s ease-in-out infinite;
          animation: reserve-deco-animation 4s ease-in-out infinite;
  z-index: 3;
}

.reserve-button__image-text {
  width: 87%;
  top: 21%;
  left: 17%;
  z-index: 4;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.reserve-button:hover .reserve-button__image-text {
  -webkit-transform: scale(1.2) rotate(10deg);
          transform: scale(1.2) rotate(10deg);
}

.reserve-button:hover .reserve-button__image-inside {
  -webkit-animation: reserve-inside-animation 3s linear infinite;
          animation: reserve-inside-animation 3s linear infinite;
}

img[class*="reserve-button__image"] {
  display: block;
  position: absolute;
}

.header-release {
  display: block;
  max-width: 383px;
  max-height: 338px;
  position: absolute;
  left: 5vw;
  bottom: 4vw;
  z-index: 3;
}

.header-flower {
  display: block;
  width: 35.05208vw;
  height: 32.55208vw;
  max-width: 673px;
  max-height: 625px;
  position: absolute;
  left: 2vw;
  bottom: 4vw;
}

.information {
  background: url(../img/img_info_footer.png) 50% 100% no-repeat, url(../img/img_info_flowersA.png) calc(50% - 780px) 20% no-repeat, url(../img/img_info_flowersB.png) calc(50% + 740px) 0% no-repeat, url(../img/bg_net_white.png) 0 0 repeat, black;
  min-height: 800px;
  width: 100%;
  padding: 50px 0 0;
  box-sizing: border-box;
  position: relative;
}

.banners {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.banners__item {
  display: block;
  position: relative;
}

.banners__item:nth-of-type(n+4) {
  margin-top: 10px;
}

.banners__item:not(:first-of-type), .banners__item:not(:nth-of-type(3n)) {
  margin-left: 5px;
}

a[class^="banner-button"] {
  background-size: cover;
}

a[class^="banner-button"] {
  display: block;
  width: 311px;
  height: 74px;
}

a[class^="banner-button"] img {
  vertical-align: bottom;
  width: 100%;
  height: 100%;
}

a[class^="banner-button"]:hover {
  background-position: 0 100%;
}

.banner-button-benefits {
  background: url(../img/bnr_benefit.png) 0 0 no-repeat;
}

.news-wrapper {
  margin-top: 110px;
  position: relative;
}

.news-wrapper:before {
  content: "";
  background: url(../img/cap_news.png) 0 0 no-repeat;
  background-size: contain;
  width: 395.2px;
  height: 128px;
  position: absolute;
  top: -100px;
  left: -35px;
  -webkit-animation: cap-news-animation 2s ease-in-out infinite;
          animation: cap-news-animation 2s ease-in-out infinite;
}

.swiper-container {
  width: calc(100% - 10%);
  height: auto;
  padding-bottom: 30%;
  position: relative;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-slide {
  width: 100%;
  border-radius: 25px;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
  border: 10px solid #fd3485;
}

.swiper-button-prev {
  background-image: url(../img/btn_news_prev.png);
}

.swiper-button-next {
  background-image: url(../img/btn_news_next.png);
}

.swiper-button-prev, .swiper-button-next {
  width: 3.083333333%;
  height: 95.4%;
  background-size: contain;
  position: absolute;
  top: 60%;
  -webkit-transform: translate(0, -55%);
          transform: translate(0, -55%);
}

.news-card {
  display: block;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.news-card__date {
  font-weight: bold;
  color: #fd3485;
}

.news-card__text-wrap {
  background: white;
  width: 150%;
  height: 60%;
  position: absolute;
  bottom: -20%;
  left: calc( 50% - 75%);
  z-index: 5;
  padding: 10px;
  box-sizing: border-box;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  z-index: 0;
  -webkit-transition: bottom 0.15s ease-out;
  transition: bottom 0.15s ease-out;
}

.news-card__text {
  width: 100%;
  height: 30%;
  padding: 0% 2% 2%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  color: black;
  font-size: 0.7em;
  font-family: 'メイリオ', sans-serif;
}

.news-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover;';
}

.swiper-slide:hover .news-card__text-wrap {
  bottom: -15%;
}

.landing {
  background: url(../img/img_bg_tower.png) 100% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fd3485), to(#ff8d81));
  background: url(../img/img_bg_tower.png) 100% 100% no-repeat, linear-gradient(to bottom, #fd3485, #ff8d81);
  width: 100%;
  padding: 0 0 500px;
  position: relative;
}

.landing__summary {
  width: 100%;
  padding: 150px 0 20px;
}

.landing__story {
  margin-top: 230px;
}

.landing__character {
  margin-top: 300px;
}

.landing:after {
  background: url(../img/img_line_spec.png) 0 0 no-repeat;
  content: "";
  display: block;
  width: 2957px;
  height: 230px;
  position: absolute;
  left: calc(50% - 1400px);
  bottom: 35px;
  z-index: 100;
}

.landing__inner1500 {
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
}

.summary-wrap {
  width: 45%;
  height: auto;
  padding-bottom: 45%;
  margin: 0 auto;
  position: relative;
  left: -15%;
}

.summary-window {
  background: url(../img/img_summary_circle.png) -200px 200px no-repeat, white;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 50px 0 black inset,
 10px 10px 0 16px black,
 0 0 90px 0px white,
 90px 90px 0 0 #3871ce,
 100px 100px 0 0px #3aa7ab;
  border-radius: 100%;
  -webkit-transform: perspective(800px) skewY(-10deg) rotateY(-10deg);
          transform: perspective(800px) skewY(-10deg) rotateY(-10deg);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.summary-contents {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 3;
}

.summary-caption {
  display: block;
  position: relative;
  top: -125%;
  z-index: 4;
  width: 60%;
}

.summary-caption__blood {
  position: absolute;
  left: -110px;
  top: 50px;
  width: 100%;
}

.summary-caption__text {
  position: absolute;
  width: 100%;
}

.summary-subcap {
  width: 110%;
  position: absolute;
  top: -126%;
  left: 44%;
  z-index: 10;
}

.summary-girl {
  width: 115%;
  position: absolute;
  left: -10%;
  bottom: 90%;
  -webkit-animation: girl-animation 1.5s ease-in-out infinite;
          animation: girl-animation 1.5s ease-in-out infinite;
  z-index: 5;
}

.summary-flower {
  width: 50%;
  position: absolute;
  left: -15%;
  bottom: 86%;
  z-index: 6;
}

.summary-points {
  width: 125%;
  position: absolute;
  left: 45%;
  top: -88%;
  -webkit-transform: perspective(700px) rotateY(-10deg) skewY(-8deg) scale(0.8);
          transform: perspective(700px) rotateY(-10deg) skewY(-8deg) scale(0.8);
  z-index: 10;
}

.summary-point01,
.summary-point02 {
  width: 100%;
  vertical-align: bottom;
}

.summary-deco01 {
  width: 150%;
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
  position: absolute;
  right: -90%;
  bottom: 3%;
  z-index: 0;
}

.summary-deco02 {
  position: absolute;
  top: 24%;
  left: -31%;
  z-index: 0;
}

.story-box {
  background: url(../img/bg_story.jpg) 50% 50% no-repeat, black;
  background-size: cover;
  width: 60%;
  height: auto;
  padding-bottom: 60%;
  margin: 0 auto;
  box-shadow: 0 0 50px 0 black inset,
 -10px 10px 0 16px white,
 0 0 90px 0px white,
 -90px 90px 0 0 #3871ce,
 -100px 100px 0 0px #3aa7ab;
  border-radius: 100%;
  box-sizing: border-box;
  position: relative;
}

.story-box__thorn01, .story-box__thorn03, .story-box__thorn04, .story-box__thorn05 {
  position: absolute;
}

.story-box__thorn01 {
  width: 19%;
  right: -8%;
  top: 75%;
  -webkit-transform: rotate(38deg);
          transform: rotate(38deg);
}

.story-box__thorn04 {
  width: 12.7%;
  left: 1%;
  top: 10%;
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
}

.story-box__thorn05 {
  width: 20%;
  left: -8%;
  bottom: 4%;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}

.story-contents {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.story-caption {
  display: block;
  width: 56%;
  height: 43%;
  position: absolute;
  right: -15%;
  top: -13%;
}

.story-caption__blood {
  display: block;
  position: absolute;
  width: 100%;
}

.story-caption__text {
  width: 100%;
  position: absolute;
  right: 10%;
  top: 9%;
}

.story-text {
  width: 95%;
  margin: calc(50% - 20%) auto;
  padding: 20px;
}

.story-text img {
  width: 100%;
  vertical-align: bottom;
}

.story-flower {
  width: 70%;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  position: absolute;
  top: 5%;
  left: -20%;
  z-index: 5;
}

.character-box {
  width: 45%;
  height: auto;
  padding-bottom: 45%;
  margin: 0 auto;
  position: relative;
  left: calc(50% - 42%);
}

.character-window {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 50px 0 black inset, -10px 10px 0 16px black, 0 0 90px 0px white, -4.6875vw 4.6875vw 0 0 #3871ce, -5.20833vw 5.20833vw 0 0px #3aa7ab;
  border-radius: 100%;
  -webkit-transform: perspective(800px) skewY(10deg) rotateY(10deg);
          transform: perspective(800px) skewY(10deg) rotateY(10deg);
  box-sizing: border-box;
  position: absolute;
  right: -10%;
}

.character-contents {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -200px;
  left: 120px;
}

.character01 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 140px;
  left: 0;
}

.character01__name {
  width: 60%;
  position: absolute;
  top: -15%;
  left: 42%;
}

.character01__text {
  background: black;
  width: 53%;
  height: 53%;
  border-radius: 100%;
  box-shadow: 0 0 20px 0 #fd3485 inset,
 5px 5px 0 10px white;
  z-index: 3;
  padding: 9%;
  box-sizing: border-box;
  color: white;
  position: absolute;
  bottom: 0%;
  right: -23%;
}

.character01__text .text {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-shadow: none;
}

.character01__text .text b {
  color: #ff8d81;
}

.character01__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 88%;
  vertical-align: bottom;
}

.character01__chara {
  width: 71.5%;
  position: absolute;
  top: 9.2%;
  left: 13.5%;
  z-index: 2;
  vertical-align: bottom;
}

.character01__ring {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: rotate-left-animation 20s linear infinite;
          animation: rotate-left-animation 20s linear infinite;
  vertical-align: bottom;
}

.character02 {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 63%;
  left: -62%;
}

.character02__name {
  width: 80%;
  position: absolute;
  top: -23%;
  left: -9%;
}

.character02__text {
  background: black;
  width: 53%;
  height: 53%;
  border-radius: 100%;
  box-shadow: 0 0 20px 0 #fd3485 inset,
 -5px 5px 0 10px white;
  z-index: 3;
  padding: 8%;
  box-sizing: border-box;
  color: white;
  position: absolute;
  bottom: -13%;
  left: -27%;
}

.character02__text .text {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-shadow: none;
}

.character02__text .text b {
  color: #ff8d81;
}

.character02__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  vertical-align: bottom;
}

.character02__chara {
  width: 96.5%;
  position: absolute;
  top: 3%;
  left: -2.2%;
  z-index: 2;
}

.character02__ring {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: rotate-right-animation 20s linear infinite;
          animation: rotate-right-animation 20s linear infinite;
  vertical-align: bottom;
}

.character-caption {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 7%;
  left: -68%;
}

.character-caption__blood {
  width: 92%;
  position: absolute;
  top: 0%;
  left: 0%;
}

.character-caption__text {
  width: 77%;
  position: absolute;
  top: 10%;
  left: 0;
}

.spec-wrap {
  width: 100%;
  height: auto;
  position: relative;
  margin-top: -200px;
}

.spec-line {
  position: absolute;
  z-index: 10;
  top: -260px;
  left: calc(50% - 1450px);
}

.spec-bg {
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, black), color-stop(50%, #2a2a41));
  background: linear-gradient(to right, black 50%, #2a2a41 50%);
  width: 150%;
  height: 125%;
  box-sizing: border-box;
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
  position: absolute;
  left: calc(50% - 75%);
  overflow: hidden;
}

.spec-decobox {
  background: url(../img/bg_net_black.png) 0 0 repeat, url(../img/img_radio_ring.png) -270px -300px no-repeat, white;
  width: 1400px;
  height: 830px;
  margin: 0 auto;
  box-shadow: 0 0 0 5px black, 0 0 0 10px #473d3b, 0 0 0 15px black, 0 0 0 30px #2a2a41, 0 0 50px 0 rgba(0, 0, 0, 0.5) inset;
  border-radius: 5px;
  -webkit-transform: rotate(-32deg);
          transform: rotate(-32deg);
  position: absolute;
  left: calc(50% - 700px);
  top: 10%;
}

.spec-caption {
  position: absolute;
  left: 10%;
  top: 10%;
  z-index: 1;
  width: 26%;
}

.spec-caption img {
  vertical-align: bottom;
  width: 100%;
}

.spec-contents {
  margin-bottom: -35px;
  padding-top: 14%;
}

.spec-data {
  background: url(../img/bg_spec.png) 0 0 repeat, black;
  width: 620px;
  border-radius: 10px;
  position: relative;
  left: calc(50% - 21%);
  top: 2%;
  box-shadow: 0 0 0 5px #fd3485, 0 0 0 8px black,
 0 0 0 12px #473d3b, 0 0 0 20px black;
  padding: 3% 1%;
  z-index: 5;
}

.spec-data__reserve-button {
  position: absolute;
  right: -5%;
  bottom: -28%;
  width: 34%;
  height: auto;
  padding-bottom: calc(34% * 0.897280);
}

.spec-data__package {
  display: block;
  width: 27%;
  position: absolute;
  top: -18%;
  right: -5%;
}

.spec-table {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
}

.spec-table__row {
  height: auto;
}

.spec-table__head {
  text-align: left;
}

.spec-radio {
  display: block;
  position: relative;
  left: 1%;
  margin-top: -25%;
  z-index: -1;
  -webkit-animation: spec-radio-animation 1s ease-out infinite;
          animation: spec-radio-animation 1s ease-out infinite;
  z-index: 0;
}

.spec-signal {
  display: block;
  position: absolute;
  left: -27%;
  top: 8%;
  z-index: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: spec-signal-animation 1s ease-out infinite;
          animation: spec-signal-animation 1s ease-out infinite;
}

.index-footer {
  margin-top: -370px;
}