@charset "utf-8";
/* ==========================================
*
*  foundation / layout
*
========================================== */

body {
  color: #1d2975;
  background: #1e2a73;
  background: url(../../../../images/main/top/cube.png) center top 250px no-repeat,#1e2a73;
  font-size: 1.6rem;
  position: relative;
}

@media screen and (max-width: 899px){
  body {
    font-size: 1.4rem;
  }
}

#wrapper {
  position: relative;
}

@media screen and (max-width: 899px){
#wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../../../images/main/top/bg_sp.jpg) center top/cover no-repeat;
  transition: opacity 2s;
  transition-delay: opacity 2s;
}
}

@media screen and (min-width: 900px){
.bg {
  opacity: 0;
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: url(../../../../images/main/top/bg.jpg) center bottom/cover no-repeat;
}

.bg__chara {
  opacity: 0;
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../../../images/main/top/bg_chara.png) center top no-repeat;
  animation: fuwafuwa 2s ease infinite alternate-reverse;
}

@keyframes fuwafuwa {
  0% { transform: translate3d(0,10px,0)}
  100% {transform: translate3d(0,0,0)}
}


.bg__object {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../../../images/main/top/bg_object.png) center top no-repeat;
}

}

#wrapper_inner {
  position: relative;
}

/* ==========================================
*
*  show
*
========================================== */

#wrapper,
#wrapper_inner,
.bg,
.bg__chara,
.bg__object {
  opacity: 0;
  transition: opacity 1s 1s;
}

#wrapper_inner {
  transition: opacity 2s 2s;
}

body.is-loaded #wrapper,
body.is-loaded #wrapper_inner,
body.is-loaded .bg,
body.is-loaded .bg__chara,
body.is-loaded .bg__object {
  opacity: 1;
}

/* ==========================================
*
*  main section
*
========================================== */

.mainSection {
  background: rgba(220, 240, 243, 0.85);
  max-width: 540px;
  margin: 0 auto 50px;
}

.mainSection__inner {
  padding: 3px 20px 20px;
}

@media screen and (max-width: 899px){
  .mainSection__inner {
    padding: 10px;
  }
}

.mainSection__head {
  margin-top: 0;
  color: #fff;
  background: #000;
  text-align: center;
  border-top: 2px solid;
  font-size: 3rem;
  vertical-align: middle;
}

@media screen and (max-width: 899px){
  .mainSection__head {
    font-size: 2.2rem;
  }
}

.mainSection__head::before,
.mainSection__head::after {
  content: "◆";
  font-size: 0.6em;
  margin: 0.5em;
  display: inline-block;
  padding-bottom: 0.2em;
}

.mainSection__subHead {
  color: #fff;
  background: #000;
  text-align: center;
  border: 2px solid;
  font-size: 2.4rem;
  padding: 0.2em;
  letter-spacing: 0.3em;
}

@media screen and (max-width: 899px){
  .mainSection__subHead {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }
}

.is-pink {
  border-color: #ca136f;
}

.mainSection__head.is-pink::before, .mainSection__head.is-pink::after {
  color: #ca136f;
}

.is-green {
  border-color: #b3cc3f;
}

.mainSection__head.is-green::before, .mainSection__head.is-green::after {
  color: #b3cc3f;
}

.is-blue {
  border-color: #66bbaf;
}

.mainSection__head.is-blue::before, .mainSection__head.is-blue::after {
  color: #66bbaf;
}

.is-yellow {
  border-color: #f5d23f;
}

.mainSection__head.is-yellow::before, .mainSection__head.is-yellow::after {
  color: #f5d23f;
}