@charset "utf-8";

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

- common.css

-------------------- */
html,
body {
  font-family: YakuHanJP, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1;
  min-height: 700px;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  vertical-align: bottom;
}

li {
  list-style: none;
}

.flex {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

.w-100 {
  width: 100%;
}

.hover {
  transition: .4s;
}

.hover:hover {
  opacity: .6;
}

#back-to-top {
  display: block;
  margin: 0 auto;
  max-width: 523px;
  width: 27.239vw;
}

@media screen and (max-width: 768px) {

  html,
  body {
    min-height: auto;
  }

  .hover:hover {
    opacity: 1;
  }

  #back-to-top {
    max-width: none;
    width: 79.687vw;
  }

}

/* --------------------
- loading
-------------------- */
#loading {
  align-items: center;
  background: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#loading-box {
  width: 70px;
  height: 70px;
}

#loading-box div {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  border-right: 5px solid #ff0074;
  height: 100%;
}

@keyframes spin {
 0% {
    transform: rotate(0deg);
    border-right-color: #ff0074;
  }
  50% {
    transform: rotate(180deg);
    border-right-color: #3fd4f9;
  }
  100% {
    transform: rotate(359deg);
    border-right-color: #ff0074;
  }
}

/* --------------------
- header
-------------------- */
header {
  background: #fff;
  height: 4.687vw;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

#header-logo {
  left: 1.302vw;
  max-width: 274px;
  position: absolute;
  top: .520vw;
  width: 14.270vw;
  z-index: 1;
}

#header-petals {
  left: 21.354vw;
  max-width: 254px;
  position: absolute;
  top: 0;
  width: 13.229vw;
  z-index: 1;
}

nav {
  height: 100%;
  padding: 0 3.125vw 0 0;
}

#nav-list {
  height: 100%;
  justify-content: flex-end;
}

.nav-list {
  height: 100%;
  margin: 0 2.864vw 0 0;
}

.nav-list:last-child {
  margin: 0;
}

.nav-active {
  pointer-events: none;
}

.nav-list a {
  display: block;
  height: 100%;
  padding: 1.927vw 0;
  position: relative;
}

.nav-list a::before {
  background: url('../img/header/off.png') no-repeat left top;
  background-size: 100%;
  content: '';
  height: 1.197vw;
  left: -1.458vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .989vw;
  z-index: 1;
}

.nav-active a::before {
  background: url('../img/header/on.png') no-repeat left top;
  background-size: 100%;
  content: '';
  height: 1.302vw;
  left: -1.822vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.354vw;
  z-index: 1;
}

.nav-hover a::before {
  background: url('../img/header/on.png') no-repeat left top;
  background-size: 100%;
  content: '';
  height: 1.302vw;
  left: -1.822vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.354vw;
  z-index: 1;
}

#nav-top {
  max-width: 51px;
  width: 2.656vw;
}

#nav-news {
  max-width: 77px;
  width: 4.010vw;
}

#nav-intro {
  max-width: 209px;
  width: 10.885vw;
}

#nav-system {
  max-width: 107px;
  width: 5.572vw;
}

#nav-character {
  max-width: 166px;
  width: 8.645vw;
}

#nav-movie {
  max-width: 87px;
  width: 4.531vw;
}

.nav-coming {
  filter: grayscale(100%);
  opacity: .3;
  pointer-events: none;
}

#menu {
  display: none;
}

@media screen and (max-width: 768px) {

  header {
    height: 15.625vw;
  }

  #header-logo {
    left: 2.5vw;
    max-width: none;
    top: 2.187vw;
    width: 29.062vw;
  }

  #header-petals {
    left: 35.9375vw;
    max-width: none;
    width: 39.687vw;
  }

  nav {
    display: none;
  }

  #menu {
    background: #ff0074;
    border-radius: 50%;
    height: 10.937vw;
    position: absolute;
    right: 2.812vw;
    top: 50%;
    transform: translateY(-50%);
    width: 10.937vw;
    z-index: 1;
  }

  .menu-line {
    background: #fff;
    display: block;
    height: .625vw;
    margin: 0 0 1.25vw;
    transition: .4s;
    transform: rotate(0deg);
    width: 6.25vw;
  }

  .menu-line:last-child {
    margin: 0;
  }

  .open .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(1.562vw, 1.562vw);
  }

  .open .menu-line:nth-child(2) {
    opacity: 0;
  }

  .open .menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(.937vw, -1.25vw);
  }

}

/* --------------------
- info
-------------------- */
#info {
  margin: 0 auto 2.604vw;
}

#info-img {
  margin: 0 3.645vw 0 0;
  max-width: 385px;
  width: 20.052vw;
}

#info-txt {
  font-size: 1.354vw;
  line-height: 1.6;
  padding: 1.562vw 0 0;
}

@media screen and (max-width: 768px) {

  #info {
    margin: 0 auto 7.812vw;
  }

  #info-img {
    margin: 0 auto 4.687vw;
    max-width: none;
    width: 60vw;
  }

  #info-txt {
    font-size: 4.062vw;
    padding: 0;
    text-align: center;
  }

}

/* --------------------
- links
-------------------- */
.links-bnr {
  max-width: 317px;
  width: 16.510vw;
}

#links-app {
  margin: 0 1.041vw 0 0;
}

@media screen and (max-width: 768px) {

  #links {
    margin: 0 auto;
    width: 94%;
  }

  .links-bnr {
    max-width: none;
    width: 48%;
  }

  #links-app {
    margin: 0 4% 0 0;
  }

}

/* --------------------
- footer
-------------------- */
footer {
  background: #000;
  padding: 2.604vw 0;
}

#footer-nav {
  margin: 0 0 1.562vw;
}

.footer-nav {
  color: #fff;
  font-size: .937vw;
  margin: 0 3.125vw 0 0;
}

.footer-nav:last-child {
  margin: 0;
}

.footer-coming {
  filter: grayscale(100%);
  opacity: .3;
  pointer-events: none;
}

#copyright {
  color: #8e8e8e;
  font-size: .781vw;
  text-align: center;
}

@media screen and (max-width: 768px) {

  footer {
    padding: 6.25vw 0;
  }

  #footer-nav {
    margin: 0 auto 10.937vw;
    padding: 0 9.375vw;
  }

  .footer-nav {
    font-size: 2.812vw;
    margin: 0 8.125vw 2.812vw 0;
  }

  .footer-nav:nth-child(3),
  .footer-nav:nth-child(5) {
    margin: 0 0 2.812vw;
  }

  .footer-nav:nth-child(6) {
    margin: 0 8.125vw 0 0;
  }

  .footer-nav:last-child {
    margin: 0;
  }

  #copyright {
    font-size: 2.812vw;
  }

}

/* --------------------
- privacy
-------------------- */
.footer-links-ttl {
  margin: 0 0 5.989vw;
}

.footer-links-ttl-txt {
  font-size: 1.875vw;
  font-weight: bold;
}

.footer-links {
  margin: 0 auto 6.25vw;
  max-width: 1646px;
  width: 85.729vw;
}

.footer-links-box {
  border: 2px solid #ff3e99;
  margin: 0 0 5.208vw;
  padding: .677vw;
  position: relative;
}

.footer-links-contents {
  background: #fff;
  border: 2px solid #ff3e99;
  padding: 6.770vw 7.812vw;
}

.footer-links-article {
  border-bottom: 4px solid #ff3e99;
  font-size: 1.875vw;
  font-weight: bold;
  margin: 0 0 2.083vw;
  padding: 0 0 .781vw;
}

.footer-links-txt {
  font-size: 1.197vw;
  line-height: 2.4;
  margin: 0 0 4.427vw;
}

.footer-links-txt a {
  color: #ff3e99;
  text-decoration: underline;
  word-break: break-all;
}

.footer-links-last-txt {
  font-size: 1.354vw;
  font-weight: bold;
  letter-spacing: .052vw;
  text-align: right;
}

.footer-links-tab-container {
  display: flex;
  justify-content: center;
  margin: 0 auto 2.08333vw;
}

.footer-links-tab {
  width: 27.23958333vw;
  height: 4.94791666vw;
  display: block;
  overflow: hidden;
  margin: 0 1.5625vw;
}

.footer-links-tab.act img,
.footer-links-tab:hover img {
  margin-top: -4.94791666vw;
}



@media screen and (max-width: 768px) {

  .footer-links-ttl {
    margin: 0 0 3.75vw;
  }

  .footer-links-ttl-txt {
    font-size: 4.375vw;
  }

  .footer-links {
    margin: 0 auto 16.875vw;
    max-width: none;
    width: 94%;
  }

  .footer-links-box {
    border: 1px solid #ff3e99;
    margin: 0 0 3.437vw;
    padding: 2.187vw;
  }

  .footer-links-contents {
    border: 1px solid #ff3e99;
    padding: 7.812vw 4.687vw;
  }

  .footer-links-article {
    border-bottom: 2px solid #ff3e99;
    font-size: 3.75vw;
    line-height: 1.4;
    margin: 0 0 4.375vw;
    padding: 0 0 2.812vw;
  }

  .footer-links-txt {
    font-size: 3.593vw;
    line-height: 2.4;
    margin: 0 0 7.812vw;
  }

  .footer-links-last-txt {
    font-size: 4.062vw;
    letter-spacing: .312vw;
  }
  
  .footer-links-tab-container {
    display: block;
    margin: 0 auto;
  }

  .footer-links-tab {
    width: 79.6875vw;
    height: 14.53125vw;
    margin: 0 auto 4.6875vw;
  }

  .footer-links-tab.act img {
    margin-top: -14.53125vw;
  }

  .footer-links-tab:hover img {
    margin-top: 0;
  }

}

/* --------------------
- drawer
-------------------- */
#drawer {
  background: #fff;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

#drawer-list {
  margin: 0 auto;
  padding: 31.25vw 0 18.75vw;
  width: 94%;
}

.drawer-list {
  margin: 0 0 12.5vw;
  width: 100%;
}

.drawer-list:last-child {
  margin: 0;
}

.drawer-list a {
  display: block;
  margin: 0 auto;
  position: relative;
}

.drawer-list a::before {
  background: url('../img/header/off.png') no-repeat left top;
  background-size: 100%;
  content: '';
  height: 6.25vw;
  left: -6.875vw;
  position: absolute;
  top: -.937vw;
  width: 5vw;
  z-index: 1;
}

.drawer-active {
  pointer-events: none;
}

.drawer-active a::before {
  background: url('../img/header/on.png') no-repeat left top;
  background-size: 100%;
  content: '';
  height: 6.875vw;
  left: -8.437vw;
  position: absolute;
  top: -.937vw;
  width: 6.875vw;
  z-index: 1;
}

#drawer-top a {
  width: 15.625vw;
}

#drawer-news a {
  width: 23.437vw;
}

#drawer-intro a {
  width: 65.625vw;
}

#drawer-system a {
  width: 32.812vw;
}

#drawer-character a {
  width: 54.687vw;
}

#drawer-movie a {
  width: 28.125vw;
}
