@charset "UTF-8";
/* info_custom */
/* text ........... $base-textcolor */
/* background ..... #eeeeee        */
/* button ......... $base-btncolor */
/* button ......... rgba(32,171,203  */
/* maincolor ...... #888888        */
/* error .......... #E86A6D        */
.base-wrapper {
  padding: 0;
}
header {
  display: none;
}
@keyframes headerFade {
  /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0;
  }
  /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1;
  }
  /*アニメーション終了時は不透明度100%*/
}
.fv {
  position: relative;
  animation: fvFade 1s ease-in 0s 1 normal;
}
@keyframes fvFade {
  /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0;
  }
  /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1;
  }
  /*アニメーション終了時は不透明度100%*/
}
/*========= 流体シェイプを動かす ===============*/
.fluid {
  width: 63vw;
  height: 100vh;
  background: #c6d0eb;
  animation: fluidrotate 30s ease-in-out infinite;
  /*背景色*/
  transition: all 1s ease-in-out;
  z-index: 1;
  position: absolute;
  top: -20%;
  left: -15%;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .fluid {
    width: 110vw;
    height: 68vh;
  }
}
@keyframes fluidrotate {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
.loginHeader {
  padding: 0 3%;
}
.loginHeader .headerLoginBtn a {
  display: block;
  border: solid 1px #8a9dd1;
  border-radius: 20px;
  color: #8a9dd1;
  background: #ffffff;
  text-align: center;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
  font-weight: 500;
}
.loginHeader .headerLoginBtn a i {
  display: inline-block;
  padding: 0 5px 0 0;
}
.pickUpSwiper {
  margin: 3% 0 0 0;
}
.top {
  margin: 0;
  padding: 0;
}
.mahouTxt {
  margin: 0 auto 30px auto;
  width: 80%;
}
.swiper-slide__image {
  mask-mode: alpha;
  -webkit-mask: url("/image/site/recipe_mask.svg") no-repeat center center;
  mask: url("/image/site/recipe_mask.svg") no-repeat center center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.swiper-slide__image img {
  max-width: 100%;
}
.swiper-slide-active .swiper-slide__image img, .swiper-slide-duplicate-active .swiper-slide__image img, .swiper-slide-prev .swiper-slide__image img {
  animation: zoom 10s linear 0s 1 normal both;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.fvCatch {
  background: url("/image/site/catch_bg.svg") no-repeat left center;
  background-size: contain;
  position: relative;
  left: -25px;
  margin: -15% 0 0 0;
  z-index: 2;
  padding: 100px;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 3.6rem;
}
.fvCatch span {
  font-size: 2.6rem;
}
@media screen and (max-width: 480px) {
  .fvCatch {
    margin: -30% 0 0 0;
    padding: 50px;
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .fvCatch span {
    font-size: 1.6rem;
  }
}
.fvWitch {
  position: absolute;
  bottom: 0;
  right: -2%;
  width: 45%;
  z-index: 2;
}
.fvWitch img {
  max-width: 100%;
}
.top-btnwrapper {
  animation: fvFade 1s ease-in 0s 1 normal;
  position: relative;
  z-index: 2;
}
.top_otameshi {
  background: #ced9ef;
  border-radius: 10px;
  text-align: center;
  padding: 10px 2%;
  width: 285px;
  margin: -10px auto 50px auto;
  position: relative;
}
.top_otameshi a {
  display: block;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #5c5c5c;
}
.top_otameshi a span {
  color: #ff609d;
}
.top_otameshi:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-bottom: 10px solid #ced9ef;
}
.colorWrapper {
  background: #8a9dd1;
  color: #ffffff;
  text-align: center;
  padding: 0 0 50px 0;
  font-size: 1.6rem;
  margin: 0 0 50px 0;
}
.curved {
  position: relative;
  height: 100px;
}
.curved h2 {
  color: #ffffff;
  padding: 50px 0 0 0;
  text-align: center;
  z-index: 2;
  position: relative;
}
.curved:after {
  content: "";
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  position: absolute;
  bottom: -1px;
  width: 100%;
  background: #8a9dd1;
  height: 100%;
}
.mahouTxt1 {
  padding: 30px 0 0 0;
}
h2 {
  font-weight: bold;
  font-size: 3rem;
  line-height: 100%;
  margin: 0 0 20px 0;
}
h2 span {
  display: block;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4rem;
  padding: 10px 0 0 0;
}
.mahouImgWrap {
  position: relative;
  margin: 0 0 20px 0;
}
.witchLine {
  position: absolute;
  width: 30%;
}
.witchLine img {
  max-width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}
.witch2, .witch6 {
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate;
}
.witch3, .witch4 {
  animation: swing linear 5s infinite;
  transform-origin: center -1px 0;
}
.witch3, .witch6 {
  right: 0;
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.witch5 {
  -webkit-animation: flipWitch 6s infinite linear;
  animation: flipWitch 6s infinite linear;
}
@keyframes flipWitch {
  0%, 20% {
    transform: rotateY(0deg);
  }
  40%, 60% {
    transform: rotateY(180deg);
  }
  80%, 100% {
    transform: rotateY(360deg);
  }
}
@keyframes wobbling_x {
  0% {
    margin-left: 1px;
  }
  100% {
    margin-left: 0px;
  }
}
@keyframes wobbling_y {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 4px;
  }
}
.star {
  position: absolute;
  width: 25%;
  top: 0;
  animation: star 2s ease-in infinite;
}
.star img {
  max-width: 100%;
  height: auto;
}
.star1 {
  right: 3%;
}
.star2 {
  left: 3%;
  top: 15%;
}
.star3, .star4 {
  right: 0;
}
@keyframes star {
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 1;
  }
}
.mahouImgWrap .shapeLayer {
  position: absolute;
  width: 80%;
  z-index: 2;
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
}
.mahouImgWrap .shapeLayer img {
  max-width: 100%;
  height: auto;
}
.mahouImg {
  width: 60%;
  margin: 0 auto;
}
.mahouImg img {
  max-width: 100%;
  height: auto;
}
.categoryImgList {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  overflow: hidden;
}
.categoryImgList li {
  width: 50%;
  font-size: 0;
  line-height: 100%;
}
.categoryImgList li:nth-child(odd) img {
  margin: 0 0 0 -10%;
}
.categoryImgList li:nth-child(even) img {
  margin: 15% -10% 0 0;
}
.categoryImgList img {
  max-width: 100%;
  height: auto;
}
.logoH3 {
  margin: 0 auto 30px auto;
  width: 70%;
  text-align: center;
}
.logoH3 img {
  max-width: 100%;
}
.logoH3 span {
  display: block;
  padding: 10px 0 0 0;
  font-size: 2.4rem;
  color: #8a9dd1;
}
.ptBox {
  width: 94%;
  margin: 0 auto 30px auto;
}
.ptScript {
  font-family: "Oooh Baby", cursive;
  color: #8a9dd1;
  font-size: 4.8rem;
  line-height: 4.8rem;
  transform: rotate(-15deg);
  transform-origin: left top;
  margin: 50px 0 0 0;
}
.ptDefi {
  margin: 0 auto 20px auto;
}
.ptDefi dt {
  font-weight: bold;
  margin: 0 0 10px 0;
}
.ptDefi dd {
  margin: 0 0 20px 0;
}
.specialBnrList {
  margin: 0 auto 30px auto;
}
.specialBnrList li {
  margin: 0 0 20px 0;
  line-height: 100%;
  font-size: 0;
}
.specialBnrList img {
  max-width: 100%;
}
h4 {
  font-family: "VDL-MegaMaru";
  font-size: 2.4rem;
  line-height: 2.4rem;
  margin: 0 0 20px 0;
  text-align: center;
  color: #8a9dd1;
}
.footerCatch {
  padding: 30px 3% 60px 3%;
  position: relative;
  background: #8a9dd1;
  border-bottom-left-radius: 50% 25%;
  border-bottom-right-radius: 50% 25%;
}
.footerCatch h5 {
  font-size: 2.4rem;
  line-height: 3.2rem;
}
/* Android 7以下 */
.browserLess7 .fv .fluid {
  border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  top: -10%;
  height: 85vh;
}