@charset "utf-8";
/* プリローダー */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #c92330;
  z-index: 999;
  -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
.loadingNone {
  animation: loadingAnime 1s forwards;
}
.container {
  margin: auto;
  width: 180px;
  height: 180px;
  position: relative;
  top: 45%;
  transform: translateY(-45%);
  background-image: url("../images/top_loader.png");
  background-size: 128px 128px;
  background-repeat: no-repeat;
  background-position: center center;
}
.ring {
  width: 180px;
  height: 180px;
  border-radius: 180px;
  position: absolute;
  mix-blend-mode: screen;
  background: transparent;
  z-index: 9;
}
.red {
  border: 24px solid #ee4be1;
  -webkit-animation: redanim linear 3s;
          animation: redanim linear 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.green {
  border: 24px solid #009927;
  -webkit-animation: greenanim linear 5s;
          animation: greenanim linear 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.blue {
  border: 24px solid #3569e1;
  -webkit-animation: blueanim linear 3s;
          animation: blueanim linear 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.yellow {
  border: 24px solid #edb40f;
  -webkit-animation: yellowanim linear 5s;
          animation: yellowanim linear 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes redanim {
  0% {transform: rotate(0deg) scaleX(0.9) scaleY(1);}
  50% {transform: rotate(180deg) scaleX(0.9) scaleY(1.4);}
  100% {transform: rotate(360deg) scaleX(0.9) scaleY(1);}
}

@keyframes redanim {
  0% {transform: rotate(0deg) scaleX(0.9) scaleY(1);}
  50% {transform: rotate(180deg) scaleX(0.9) scaleY(1.4);}
  100% {transform: rotate(360deg) scaleX(0.9) scaleY(1);}
}
@-webkit-keyframes greenanim {
  0% {transform: rotate(31deg) scaleX(0.9) scaleY(1);}
  25% {transform: rotate(121deg) scaleX(1.4) scaleY(0.9);}
  50% {transform: rotate(211deg) scaleX(0.9) scaleY(1.2);}
  75% {transform: rotate(301deg) scaleX(1.4) scaleY(0.9);}
  100% {transform: rotate(391deg) scaleX(0.9) scaleY(1);}
}
@keyframes greenanim {
  0% {transform: rotate(31deg) scaleX(0.9) scaleY(1);}
  25% {transform: rotate(121deg) scaleX(1.4) scaleY(0.9);}
  50% {transform: rotate(211deg) scaleX(0.9) scaleY(1);}
  75% {transform: rotate(301deg) scaleX(1.4) scaleY(0.9);}
  100% {transform: rotate(391deg) scaleX(0.9) scaleY(1);}
}
@-webkit-keyframes blueanim {
  0% {transform: rotate(413deg) scaleX(0.9) scaleY(1.4);}
  50% {transform: rotate(233deg) scaleX(0.9) scaleY(1);}
  100% {transform: rotate(53deg) scaleX(0.9) scaleY(1.4);}
}
@keyframes blueanim {
  0% {transform: rotate(413deg) scaleX(0.9) scaleY(1.4);}
  50% {transform: rotate(233deg) scaleX(0.9) scaleY(1);}
  100% {transform: rotate(53deg) scaleX(0.9) scaleY(1.4);}
}
@-webkit-keyframes yellowanim {
  0% {transform: rotate(472deg) scaleX(0.9) scaleY(1.4);}
  25% {transform: rotate(382deg) scaleX(1) scaleY(0.9);}
  50% {transform: rotate(292deg) scaleX(0.9) scaleY(1.4);}
  75% {transform: rotate(202deg) scaleX(1) scaleY(0.9);}
  100% {transform: rotate(112deg) scaleX(0.9) scaleY(1.4);}
}
@keyframes yellowanim {
  0% {transform: rotate(472deg) scaleX(0.9) scaleY(1.4);}
  25% {transform: rotate(382deg) scaleX(1) scaleY(0.9);}
  50% {transform: rotate(292deg) scaleX(0.9) scaleY(1.4);}
  75% {transform: rotate(202deg) scaleX(1) scaleY(0.9);}
  100% {transform: rotate(112deg) scaleX(0.9) scaleY(1.4);}
}
/* ローディングコンポーネント */
#loadingBg {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  min-width: 100vw;
  height: auto;
  min-height: 100vh;
}
#loading {
  position: absolute;
  bottom: 4.2rem;
  left: 25%;
  width: 50%;
}
#loading #percent {
  margin-bottom: 0.6rem;
  text-align: center;
  font-size: 1.6rem;
  color: #ffffff;
  font-weight: bold;
}
#loading #gauge {
  width: 0px;
  height: 16px;
  background: -moz-linear-gradient(left,  #ffffff 0%, #f75966 90%);
  background: -webkit-linear-gradient(left,  #ffffff 0%,#f75966 90%);
  background: linear-gradient(to right,  #ffffff 0%,#f75966 90%);
}

#section01 {
  position: relative;
  height: 100vh;
}
#sec01Bg {
  height: 100vh;
}
/* Top Message */
.topmsg {
  margin: 4.2rem 0.6rem;
  line-height: 1.8;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}
.topmsg h1 {
  width: 80vw;
  max-width: 600px;
  margin: 0 auto 4.2rem;
  font-size: 1.1rem;
}
.topmsg h2 {
  text-align: center;
  font-size: 1.0rem;
  font-weight: normal;
}
@media screen and (min-width: 768px) {
 #section01 {
    height: calc(100vh - 64px);
  }
  #sec01Bg {
    height: calc(100vh - 64px);
  }
  .topmsg {
    margin: 6.4rem 0.6rem;
    line-height: 2.2;
  }
  .topmsg h1 {
    width: 50vw;
    font-size: 1.2rem;
  }
  .topmsg h2 {
    text-align: center;
    font-size: 1.2rem;
  }
}
.topLogoInner {
  display: block;
  width: 84%;
  max-width: 600px;
  height: 128px;
  position: absolute;
  top: 34%;
  left: 50%;
  -webkit-transform: translateY(-45%) translateX(-50%);
  transform: translateY(-45%) translateX(-50%);
  margin: auto;
  z-index: 9;
}
.topCatch {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  color: #ffffff;
	font-family: "Noto Serif JP", "DM Serif Display", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.6rem;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.recommend {
  margin-top: 1.0rem;
  margin-bottom: 2.4rem;
  width: 100% !important;
  background-color: #ffffffaa;
}
.recommend h4 {
  color: #c92330;
  padding-bottom: 0.4rem;
  text-align: center;
  font-size: 1.1rem;
}
.recInner {
  padding: 0 0 0.6rem;  
}
/* Pickup */
.sss::before {
  content: "";
  display: block;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
}

@media screen and (min-width: 768px) {
/* Top Fisrt View */
  .topLogoInner {
    width: 50%;
    max-width: 600px;
    top: calc(45% - 64px);
  }
  .topCatch {
    top: 50%;
    font-size: 2.0rem;
  }
}