@charset "UTF-8";
/* common
========================= */
main#pages{
  background: #f2f2f2;
}
main#pages #page-tit{
  text-align: center;
  color: #FFF;
  padding: 12rem 0 6rem 0;
  background: url("../img/page-tit_bg_sp.jpg") no-repeat 50% 50%;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  position: relative;
}
main#pages #page-tit::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../img/bg_pat.png") repeat;
}
main#pages #page-tit .inner{
  position: relative;
}
main#pages #page-tit h1{
  font-size: 3rem;
  line-height: 1.4;
}
main#pages #contents-area{
  padding-top: 6rem;
}
main#pages section{
  padding-bottom: 4rem;
}
/*PC*/
@media (min-width: 769px){
  main#pages #page-tit{
    background: url("../img/page-tit_bg.jpg") no-repeat 50% 50%;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
  main#pages #page-tit h1{
    font-size: 5rem;
  }
  main#pages #contents-area{
    padding-top: 10rem;
  }
  main#pages section{
    padding-bottom: 10rem;
  }
}
/* PRICE
========================= */
#contents-area.price{
  background: url("../img/chekck_bg.jpg") repeat;
}
#contents-area.price .inner{
  position: relative;
}
#contents-area.price section#campaign h2 .tit-image{
  width: calc(325 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 325px;
}
#contents-area.price .text-slash::after{
  background: #0F0829;
}
#contents-area.price .c-red{
  color: #C22FC6;
}
#contents-area.price h3{
  position: relative;
}
#contents-area.price h3 .mark{
  position: absolute;
  left: -5%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: calc(124 / 750 * 100vw);
  display: inline-block;
  max-width: 124px;
}
#contents-area.price h3 .text{
  display: inline-block;
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: calc(100 / 750 * 100vw);
  color: #FFF;
}
#contents-area.price .text-slash{
  margin-top: -3rem;
}
#contents-area.price .plan-text{
  font-size: 1.8rem;
}
#contents-area.price .icon{
  display: flex;
  gap: 10px;
}
#contents-area.price .icon li{
  width: 100%;
}
#contents-area.price .cam_price .wrap{
  background-color: #FFF;
  box-shadow: 0px 10px 10px 0px rgba(21, 21, 21, 0.15);
  margin-bottom: 1rem; 
}
#contents-area.price .cam_price .wrap .top{
  font-size: 2rem;
  color: #FFF;
  padding: 1rem;
}
#contents-area.price .cam_price .normal .top{
  background: #0f0829;
}
#contents-area.price .cam_price .special .top{
  background: #c22fc6;
}
#contents-area.price .cam_price .special2 .top{
  background: #c22fc6;
}
#contents-area.price .cam_price .price-area{
  padding: 2rem;
}
#contents-area.price .cam_price .special2 .price-area{
  font-size: 2.4rem;
  text-align: left!important;
}
#contents-area.price .cam_price .normal .price_text span.f-en{
  font-size: 4rem;
  color: #7f7f7f;
}
#contents-area.price .cam_price .special .price_text span.f-en{
  font-size: 6rem;
  line-height: 1;
  color: #c22fc6;
}
#contents-area.price .more-area{
  position: relative;
  margin-top: 9rem;
}
#contents-area.price .more-area .mark{
  position: absolute;
  top: -4rem;
  left: 50%;
  width: calc(124 / 750 * 100vw);
  max-width: 124px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
#contents-area.price .more-area .wrap{
  background: #FFF;
  box-shadow: 0px 10px 10px 0px rgba(21, 21, 21, 0.15);
  padding: 3rem; 
}
#contents-area.price section#price-list{
  padding-top: 4rem;
  background: url("../img/grad_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  color: #FFF;
}
#contents-area.price section#price-list h2 .tit-image{
  width: calc(187 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 187px;
}
#contents-area.price section#price-list h3{
  font-size: 2rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 25px;
}
#contents-area.price section#price-list h3::after{
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-image: -moz-linear-gradient( -180deg, rgb(227,45,145) 0%, rgb(51,126,254) 100%);
  background-image: -webkit-linear-gradient( -180deg, rgb(227,45,145) 0%, rgb(51,126,254) 100%);
  background-image: -ms-linear-gradient( -180deg, rgb(227,45,145) 0%, rgb(51,126,254) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}
#contents-area.price section#price-list h3::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: .5rem;
  width: 20px;
  height: 20px;
  text-align:center;
  line-height: 20px;
  border-radius: 50%;
  border: #337efe solid 5px;
}
#contents-area.price table{
  width: 100%;
}
#contents-area.price .price-wrap{
  margin-bottom: 3rem;
}
#contents-area.price .price-wrap .link-line{
  color: #FFF;
  text-decoration: underline;
}
#contents-area.price table th,
#contents-area.price table td{
  border: #fff 1px solid;
  padding: 1.5rem;
  vertical-align: middle;
}
#contents-area.price table th{
  text-align: left;
  width: 40%;
}
#contents-area.price section#price-list .more-area{
  margin-top: 0;
  color: #000;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.price .zeikomi{
    text-align: left;
  }
  #contents-area.price .dispflex.visual-area{
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.price h3 .text{
    font-size: 4rem;
    padding-left: 110px;
  }
  #contents-area.price .text-slash{
    width: 600px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
  }
  #contents-area.price .visual-area{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-bottom: 6rem;
  }
  #contents-area.price .visual-area .text-area{
    width: 50%;
  }
  #contents-area.price .visual-area .image{
    flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 4%;
  }
  #contents-area.price .plan-text{
    text-align: left;
    font-size: 2rem;
  }
  #contents-area.price .icon{
    gap: 30px;
  }
  #contents-area.price .icon .bold{
    font-size: 2rem;
  }
  #contents-area.price .cam_price{
    gap: 10px;
  }
  #contents-area.price .cam_price .wrap{
    width: 100%;
  }
  #contents-area.price .cam_price .wrap .top{
    font-size: 2.6rem;
  }
  #contents-area.price .cam_price .wrap .top .f-small{
    font-size: 1.8rem;
  }
  #contents-area.price .cam_price .price-area{
    display: flex;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    min-height: 250px;
  }
  #contents-area.price .cam_price .normal .price_text span.f-en{
    font-size: 5rem;
  }
  #contents-area.price .cam_price .special .price_text span.f-en{
    font-size: 8rem;
  }
  #contents-area.price .reserved-btn{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.price .more-area{
    width: 100%;
    gap: 30px;
    align-items:stretch
  }
  #contents-area.price .more-area .wrap{
    width: 100%;
    margin-bottom: 0;
  }
  #contents-area.price .more-area .wrap .top{
    font-size: 3rem;
  }
  #contents-area.price .more-area .wrap .text{
    font-size: 2.4rem;
  }
  #contents-area.price section#price-list{
    padding-top: 8rem;
    background: url("../img/grad_bg.jpg") no-repeat 50% top;
    background-size: cover;
  }
  #contents-area.price section#price-list .dispflex{
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  #contents-area.price section#price-list .dispflex .price-wrap{
    width: 49%;
  }
  #contents-area.price section#price-list table{
    font-size: 1.8rem;
  }
}
/* BEGINNER
========================= */
#contents-area.beginner{
  background: url("../img/chekck_bg.jpg") repeat;
}
#contents-area.beginner #merit h2 .tit-image{
  width: calc(205 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 205px;
}
#contents-area.beginner #flow h2 .tit-image{
  width: calc(183 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 183px;
}
#contents-area.beginner #faq h2 .tit-image{
  width: calc(126 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 126px;
}
#contents-area.beginner #whats h3 .text{
  text-align: center;
  font-size: 2rem;
  color: #fff;
}
#contents-area.beginner #whats{
  background: url("../img/beginner/bg_sp.png") no-repeat 50% 90%;
  -webkit-background-size: 95%;
       -o-background-size: 95%;
          background-size: 95%;
}
#contents-area.beginner #whats .greeting{
  line-height: 2.4;
  position: relative;
}
#contents-area.beginner #merit{
  padding-top: 4rem;
  background: url("../img/grad_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  color: #fff;
}
#contents-area.beginner #merit .inner{
  position: relative;
}
#contents-area.beginner section#merit p.no{
  width: 40px;
  height: auto;
  margin-right: 1rem;
  vertical-align: middle;
}
#contents-area.beginner section#merit h3 .text{
  font-size: 2rem;
  vertical-align: middle;
  line-height: 1.4;
}
#contents-area.beginner section#merit .slick-dots{
  bottom: -30px;
}
#contents-area.beginner section#merit .slick-dots li button:before{
  color: #fff;
}
#contents-area.beginner section#flow{
  padding-top: 4rem;
  background: #0F0829;
}
#contents-area.beginner section#flow h2{
  color: #fff;
}
#contents-area.beginner section#flow .wrap{
  background: #fff;
}
#contents-area.beginner section#flow .text-area{
  padding: 2rem;
}
#contents-area.beginner section#flow h3{
  font-size: 2rem;
}
#contents-area.beginner section#flow .arrow{
  width: 80px;
  margin-left: auto;
  margin-right: auto;
}
#contents-area.beginner section#flow .last-text{
  color: #fff;
}
#contents-area.beginner section#faq{
  padding-top: 4rem;
}
#contents-area.beginner section#faq .qa-area{
  background: #fff;
}
#contents-area.beginner section#faq h3{
  position: relative;
  padding: 1.5rem;
  cursor: pointer;
}
#contents-area.beginner section#faq h3::after{
    content: '▼';
    font-size: 1rem;
    line-height: 1;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -0.5rem;
    right: 10px;
    color: #337efe;
}
#contents-area.beginner section#faq h3.open::after{
    content: '▲';
}
#contents-area.beginner section#faq h3 .mark{
  width: 30px;
  height: auto;
  vertical-align: middle;
}
#contents-area.beginner section#faq .answer-in{
  border-top: #ddd 3px solid;
  padding: 1.5rem;
}
#contents-area.beginner section#faq .answer-in a{
  vertical-align: baseline!important;
}
#contents-area.beginner section#faq h3 .text{
  width: calc( 100% - 55px);
  margin-left: 1rem;
  vertical-align: middle;
  font-size: 1.8rem;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.beginner #whats{
    background: url("../img/beginner/bg_pc.png") no-repeat 50% 60px;
    -webkit-background-size: 1202px;
         -o-background-size: 1202px;
            background-size: 1202px;
    margin-bottom: 6rem;
  }
  #contents-area.beginner #whats h2 .tit-image{
    margin-left: auto;
    margin-right: auto;
    max-width: 648px;
  }
  #contents-area.beginner #whats .text-slash{
    width: 70%;
  }
  #contents-area.beginner #whats h3 .text{
    font-size: 3.4rem;
  }
  #contents-area.beginner #whats .greeting{
    line-height: 2.6;
    font-size: 2rem;
  }
  #contents-area.beginner #merit{
    padding-top: 8rem;
    background: url("../img/grad_bg.jpg") no-repeat 50% top;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
  #contents-area.beginner #merit .inner{
    position: relative;
  }
  #contents-area.beginner #merit .dot-left{
    position: absolute;
    bottom: -6rem;
    left: -3rem;
    width: 207px;
    z-index: 1;
  }
  #contents-area.beginner #merit .dot-right{
    position: absolute;
    top: 6rem;
    right: 0;
    width: 207px;
  }
  #contents-area.beginner #merit .wrap .dispflex{
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  #contents-area.beginner #merit .wrap .image{
    width: 100%;
    max-width: 580px;
    padding-right: 30px;
    margin-bottom: 0;
  }
  #contents-area.beginner #merit .wrap .text-area{
    width: 100%;
    max-width: 580px;
  }
  #contents-area.beginner section#merit h3{
    margin-bottom: 2rem;
  }
  #contents-area.beginner section#merit h3 .text{
    font-size: 3rem;
  }
  #contents-area.beginner section#merit .slick-dots{
    bottom: -60px;
  }
  #contents-area.beginner section#flow{
    padding-top: 8rem;
  }
  #contents-area.beginner section#flow .wrap{
    -webkit-align-items: stretch;
            align-items: stretch;
  }
  #contents-area.beginner section#flow .wrap .image{
    width: 430px;
  }
  #contents-area.beginner section#flow .wrap .text-area{
    padding: 3rem;
  }
  #contents-area.beginner section#flow .wrap .step-in{
    display: flex;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  #contents-area.beginner section#flow h3{
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  #contents-area.beginner .reserved-btn{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.beginner section#faq{
    padding-top: 8rem;
  }
  #contents-area.beginner section#faq h3::after{
    right: 30px;
  }
  #contents-area.beginner section#faq h3 .mark{
    width: 44px;
  }
  #contents-area.beginner section#faq h3 .text{
    width: calc( 100% - 60px);
  }
  #contents-area.beginner section#faq .answer-in{
    padding: 3rem;
  }
}
/* FOR KIDS
========================= */
#contents-area.forkids{
  background: url("../img/chekck_bg.jpg") repeat;
}
#contents-area.forkids #about .image{
  position: relative;
}
#contents-area.forkids #about .image .sq_left{
  position: absolute;
  left: -10px;
  top: -10px;
  width: 103px;
  z-index: 1;
}
#contents-area.forkids #about .image .sq_right{
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 103px;
  z-index: 1;
}
#contents-area.forkids h3{
  font-size: 2rem;
}
#contents-area.forkids .btn a{
  background: #337efe;
}
#contents-area.forkids .btn a:hover{
  color: #337efe;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids #about .dispflex{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.forkids #about .dispflex .image{
    width: 100%;
    margin-bottom: 0;
  }
  #contents-area.forkids #about .dispflex .text{
    width: 100%;
    padding-right: 30px;
  }
  #contents-area.forkids h3{
    font-size: 3.2rem;
  }
  #contents-area.forkids .btn a{
    max-width: 340px;
  }
}

#contents-area.forkids #merit h2 .tit-image{
  width: calc(205 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 205px;
}
#contents-area.forkids #merit{
  padding-top: 4rem;
  background: url("../img/grad_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  color: #fff;
}
#contents-area.forkids #merit .inner{
  position: relative;
}
#contents-area.forkids section#merit p.no{
  width: 40px;
  height: auto;
  margin-right: 1rem;
  vertical-align: middle;
}
#contents-area.forkids section#merit h3 .text{
  font-size: 2rem;
  vertical-align: middle;
  line-height: 1.4;
}
#contents-area.forkids section#merit .slick-dots{
  bottom: -30px;
}
#contents-area.forkids section#merit .slick-dots li button:before{
  color: #fff;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids #merit{
    padding-top: 8rem;
    background: url("../img/grad_bg.jpg") no-repeat 50% top;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
  #contents-area.forkids #merit .inner{
    position: relative;
  }
  #contents-area.forkids #merit .dot-left{
    position: absolute;
    bottom: -6rem;
    left: -3rem;
    width: 207px;
    z-index: 1;
  }
  #contents-area.forkids #merit .dot-right{
    position: absolute;
    top: 6rem;
    right: 0;
    width: 207px;
  }
  #contents-area.forkids #merit .wrap .dispflex{
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  #contents-area.forkids #merit .wrap .image{
    width: 100%;
    max-width: 580px;
    padding-right: 30px;
    margin-bottom: 0;
  }
  #contents-area.forkids #merit .wrap .text-area{
    width: 100%;
    max-width: 580px;
  }
  #contents-area.forkids section#merit h3{
    margin-bottom: 2rem;
  }
  #contents-area.forkids section#merit h3 .text{
    font-size: 3rem;
  }
  #contents-area.forkids section#merit .slick-dots{
    bottom: -60px;
  }
}

#contents-area.forkids section#forplay h2{
  background: url("../img/kids/tit02_bg_sp.jpg") no-repeat 50% 50%;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  padding: 3rem 0;
  color: #fff;
}
#contents-area.forkids section#forplay h2 .tit-image{
  width: calc(298 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 298px;
}
#contents-area.forkids section#forplay h3 .tit-mark{
  width: 20px;
}
#contents-area.forkids section#forplay h3 .bold{
  margin: 0 .5rem;
}
#contents-area.forkids ul.point{
  display: flex;
  gap: 10px;
}
#contents-area.forkids #forplay .text-slash::after{
  background: #0F0829;
}
#contents-area.forkids #forplay h3{
  position: relative;
}
#contents-area.forkids #forplay h3 .mark{
  position: absolute;
  left: -5%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: calc(124 / 750 * 100vw);
  display: inline-block;
  max-width: 124px;
}
#contents-area.forkids #forplay h3 .text{
  display: inline-block;
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: calc(100 / 750 * 100vw);
  color: #FFF;
}
#contents-area.forkids #forplay .text-slash{
  margin-top: -3rem;
}
#contents-area.forkids #forplay .plan-text{
  font-size: 1.8rem;
}
#contents-area.forkids #forplay .icon{
  display: flex;
  gap: 10px;
}
#contents-area.forkids #forplay .icon li{
  width: 100%;
}
#contents-area.forkids #forplay .cam_price .wrap{
  background-color: #FFF;
  box-shadow: 0px 10px 10px 0px rgba(21, 21, 21, 0.15);
  margin-bottom: 1rem; 
}
#contents-area.forkids #forplay .cam_price .wrap .top{
  font-size: 2rem;
  color: #FFF;
  padding: 1rem;
}
#contents-area.forkids #forplay .cam_price .normal .top{
  background: #0f0829;
}
#contents-area.forkids #forplay .cam_price .special .top{
  background: #c22fc6;
}
#contents-area.forkids #forplay .cam_price .special2 .top{
  background: #c22fc6;
}
#contents-area.forkids #forplay .cam_price .price-area{
  padding: 2rem;
}
#contents-area.forkids #forplay .cam_price .special2 .price-area{
  padding: 2rem;
  font-size: 2.4rem;
  text-align: left;
}
#contents-area.forkids #forplay .cam_price .normal .price_text span.f-en{
  font-size: 4rem;
  color: #7f7f7f;
}
#contents-area.forkids #forplay .cam_price .special .price_text span.f-en{
  font-size: 6rem;
  line-height: 1;
  color: #c22fc6;
}
#contents-area.forkids #forplay table{
  text-align: center;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
}
#contents-area.forkids #forplay table th,
#contents-area.forkids #forplay table td{
  width: 50%;
  vertical-align: middle;
}
#contents-area.forkids #forplay table th{
  font: 1.8rem;
  background: #0f0829;
  color: #fff;
  padding: 1rem;
}
#contents-area.forkids #forplay table td{
  background: #fff;
  padding: 1rem;
}
#contents-area.forkids #forplay table td .f-en{
  color: #e32d91;
  font-size: 3rem;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids section#forplay h2{
    background: url("../img/kids/tit02_bg.jpg") no-repeat 50% 50%;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    padding: 6rem 0;
  }
  #contents-area.forkids #forplay ul.point{
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
    margin-bottom: 10rem;
  }
  #contents-area.forkids #forplay .dispflex.visual-area{
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.forkids #forplay h3 .text{
    font-size: 4rem;
    padding-left: 110px;
  }
  #contents-area.forkids #forplay .text-slash{
    width: 600px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
  }
  #contents-area.forkids #forplay .visual-area{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-bottom: 6rem;
  }
  #contents-area.forkids #forplay .visual-area .text-area{
    width: 50%;
  }
  #contents-area.forkids #forplay .visual-area .image{
    flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 4%;
  }
  #contents-area.forkids #forplay .plan-text{
    text-align: left;
    font-size: 2rem;
  }
  #contents-area.forkids #forplay .icon{
    gap: 30px;
  }
  #contents-area.forkids #forplay .icon .bold{
    font-size: 2rem;
  }
  #contents-area.forkids #forplay .cam_price{
    gap: 10px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.forkids #forplay .attention{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.forkids #forplay .cam_price .wrap{
    width: 100%;
  }
  #contents-area.forkids #forplay .cam_price .wrap .top{
    font-size: 3rem;
  }
  #contents-area.forkids #forplay .cam_price .wrap .top .f-small{
    font-size: 1.8rem;
  }
  #contents-area.forkids #forplay .cam_price .price-area{
    display: flex;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    min-height: 200px;
  }
  #contents-area.forkids #forplay .cam_price .normal .price_text span.f-en{
    font-size: 5rem;
  }
  #contents-area.forkids #forplay .cam_price .special .price_text span.f-en{
    font-size: 8rem;
  }
  #contents-area.forkids #forplay .btn a{
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.forkids #forplay table{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.forkids #forplay table td .f-en{
    font-size: 4rem;
  }
}

#contents-area.forkids section#forlearn h2{
  background: url("../img/kids/tit03_bg_sp.jpg") no-repeat 50% 50%;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  padding: 3rem 0;
  color: #fff;
}
#contents-area.forkids section#forlearn h2 .tit-image{
  width: calc(439 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 439px;
}
#contents-area.forkids .taisyo{
  display: inline-block;
  background: #2c2c2c;
  color: #fff;
  padding: 0.5rem 1rem;
  -webkit-border-radius: 30px;
          border-radius: 30px;
}
#contents-area.forkids .learn_point{
  background: #fff;
  border: #E32D91 2px solid;
  -webkit-border-radius: 15px;
          border-radius: 15px;
  padding: 2rem;
  position: relative;
  margin-top: 6rem;
}
#contents-area.forkids .learn_point .top{
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 100%;
}
#contents-area.forkids .learn_point .image{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#contents-area.forkids .learn_point .check{
  width: 30px;
  vertical-align: top;
}
#contents-area.forkids .learn_point .text{
  width: calc( 100% - 35px);
  font: 1.8rem;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids section#forlearn h2{
    background: url("../img/kids/tit03_bg.jpg") no-repeat 50% 50%;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    padding: 6rem 0;
  }
  #contents-area.forkids #forlearn .dispflex.about{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.forkids #forlearn .dispflex.about .image{
    width: 100%;
    margin-bottom: 0;
  }
  #contents-area.forkids #forlearn .dispflex.about .text{
    width: 100%;
    padding-right: 30px;
  }
  #contents-area.forkids .learn_point{
    -webkit-border-radius: 30px;
            border-radius: 30px;
    padding: 3rem;
    position: relative;
    margin-top: 8rem;
  }
  #contents-area.forkids .learn_point .top{
    max-width: 460px;
  }
  #contents-area.forkids .learn_point .dispflex{
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.forkids .learn_point .image{
    max-width: 330px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0;
  }
  #contents-area.forkids .learn_point ul{
    width: 100%;
    padding-left: 30px;
  }
  #contents-area.forkids .learn_point ul li{
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  #contents-area.forkids .learn_point ul li:last-child{
    margin-bottom: 0;
  }
  #contents-area.forkids .learn_point .check{
    width: 30px;
    vertical-align: top;
  }
  #contents-area.forkids .learn_point .text{
    width: calc( 100% - 35px);
    font: 1.8rem;
  }
  #contents-area.forkids #forlearn .btn-kids{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

#contents-area.forkids #voice{
  background: url("../img/kids/voice_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  padding-top: 4rem;
}
#contents-area.forkids #voice h2 .tit-image{
  width: calc(399 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 399px;
}
#contents-area.forkids #voice .wrap .c-red{
  font-size: 1.8rem;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids #voice{
    background: url("../img/kids/voice_bg.jpg") no-repeat 50% top;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    padding-top: 8rem;
  }
  #contents-area.forkids #voice .dispflex{
    gap: 20px;
  }
  #contents-area.forkids #voice .dispflex .wrap{
    margin-bottom: 0;
  }

}

#contents-area.forkids #story{
  background: url("../img/grad_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  padding-top: 4rem;
}
#contents-area.forkids #story h2 .tit-image{
  width: calc(334 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 334px;
}
#contents-area.forkids #story h2 .f-small{
  color: #fff;
}
#contents-area.forkids #story .text p{
  color: #fff;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids #story{
    background: url("../img/grad_bg.jpg") no-repeat 50% top;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    padding-top: 8rem;
  }
  #contents-area.forkids #story .dispflex{
    -webkit-align-items: center;
            align-items: center;
  }
  #contents-area.forkids #story .dispflex .image{
    width: 100%;
  }
  #contents-area.forkids #story .dispflex .text{
    width: 100%;
    padding-left: 30px;
  }
  #contents-area.forkids #story .dispflex.reverse{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #contents-area.forkids #story .dispflex.reverse .text{
    width: 100%;
    padding-left: 0;
    padding-right: 30px;
  }
}

#contents-area.forkids section#faq h2 .tit-image{
  width: calc(126 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 126px;
}
#contents-area.forkids section#faq{
  padding-top: 4rem;
}
#contents-area.forkids section#faq .qa-area{
  background: #fff;
}
#contents-area.forkids section#faq h3{
  position: relative;
  padding: 1.5rem;
  cursor: pointer;
}
#contents-area.forkids section#faq h3::after{
    content: '▼';
    font-size: 1rem;
    line-height: 1;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -0.5rem;
    right: 10px;
    color: #337efe;
}
#contents-area.forkids section#faq h3.open::after{
    content: '▲';
}
#contents-area.forkids section#faq h3 .mark{
  width: 30px;
  height: auto;
  vertical-align: middle;
}
#contents-area.forkids section#faq .answer-in{
  border-top: #ddd 3px solid;
  padding: 1.5rem;
}
#contents-area.forkids section#faq h3 .text{
  width: calc( 100% - 55px);
  margin-left: 1rem;
  vertical-align: middle;
  font-size: 1.8rem;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.forkids section#faq{
    padding-top: 8rem;
  }
  #contents-area.forkids section#faq h3::after{
    right: 30px;
  }
  #contents-area.forkids section#faq h3 .mark{
    width: 44px;
  }
  #contents-area.forkids section#faq h3 .text{
    width: calc( 100% - 70px);
  }
  #contents-area.forkids section#faq .answer-in{
    padding: 3rem;
  }
}







/* NEWS & CAMPAIGN
========================= */
.single-news h2.entry-title{
  font-size: 2.4rem;
}
.single-news .post-head{
  border-bottom: 2px solid #E32D91;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}
.single-news .date{
  opacity: 0.8;
}
.single-news .post-text p{
  margin-bottom: 1rem;
}
.single-news .post-text img{
  width: auto;
  max-width: 100%;
  height: auto;
}
.single-news #sidebar{
  background: #fff;
  padding: 3rem;
}
.single-news #sidebar h2{
  font-size: 1.8rem;
  text-align: center;
  color: #E32D91;
  margin-bottom: 1.5rem;
}
.single-news #sidebar li{
  font-size: 1.4rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: #fff 1px solid;
  position: relative;
  padding-left: 1.5rem;
}
.single-news #sidebar li:before{
  content: "▶︎";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1rem;
  font-size: 1rem;
  line-height: 1;
  color: #E32D91;
}
.single-news .more-link{
  width: 240px;
  margin-left: 0;
  margin-right: auto;
}
.single-news .more-link a{
  color: #000;
}
/*PC*/
@media (min-width: 769px){
  .single-news h2.entry-title{
    font-size: 3rem;
  }
  .single-news .wrap{
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  .single-news .main-area{
    width: calc(100% - 300px);
  }
  .single-news #sidebar{
    width: 270px;
  }
}
/* RENT
========================= */
#contents-area.rent{
  background: url("../img/chekck_bg.jpg") repeat;
}
#contents-area.rent section#reception h2 .tit-image{
  width: calc(338 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 338px;
}
#contents-area.rent section#exposition h2 .tit-image{
  width: calc(351 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 351px;
}
#contents-area.rent section#facility h2 .tit-image{
  width: calc(273 / 750 * 100vw);
  margin-left: auto;
  margin-right: auto;
  max-width: 273px;
}
#contents-area.rent section#reception .dispflex{
  display: flex;
  gap: 10px;
  max-width: 842px;
  margin-left: auto;
  margin-right: auto;
}
#contents-area.rent section#exposition{
  position: relative;
  background: #e3e3e3;
  padding-top: 8rem;
}
#contents-area.rent section#exposition .triangle{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -60px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 40px solid #f2f2f2;
}
#contents-area.rent section#exposition p.no{
  width: 47px;
  height: auto;
  margin-right: 1.5rem;
  vertical-align: middle;
}
#contents-area.rent section#exposition h3 .text{
  font-size: 3rem;
  vertical-align: middle;
  line-height: 1.4;
}
#contents-area.rent section#exposition .btn-area{
  border-top: #b7b7b7 3px solid;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
#contents-area.rent section#exposition .btn a{
  border: none;
  -webkit-border-radius: 60px;
          border-radius: 60px;
  background: #337efe;
  font-weight: bold;
}
#contents-area.rent section#exposition .btn.btn-fac{
  margin-bottom: 1rem;
}
#contents-area.rent section#exposition .btn.btn-cont a{
  background: #e32d91;
}
#contents-area.rent section#exposition .btn a:hover{
  color: #fff;
}
#contents-area.rent section#exposition .btn a::before{
  display: none;
}
#contents-area.rent section#exposition .btn a::after{
  display: none;
}
#contents-area.rent section#facility{
  padding-top: 4rem;
  background: url("../img/grad_bg_sp.jpg") no-repeat 50% top;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}
#contents-area.rent section#facility h2{
  color: #fff;
}
#contents-area.rent table{
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#contents-area.rent table th,
#contents-area.rent table td{
  border: #fff 1px solid;
  padding: 1.5rem;
  vertical-align: middle;
  color: #FFF;
}
#contents-area.rent table th{
  text-align: left;
  width: 40%;
}
/*PC*/
@media (min-width: 769px){
  #contents-area.rent section#reception .dispflex{
    gap: 60px;
  }
  #contents-area.rent section#reception .dispflex .text{
    font-size: 2.2rem;
  }
  #contents-area.rent section#exposition .wrap{
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
  }
  #contents-area.rent section#exposition .second{
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #contents-area.rent section#exposition h3 .text{
    font-size: 3.6rem;
  }
  #contents-area.rent section#exposition .wrap .image{
    width: 100%;
    max-width: 580px;
    padding-right: 30px;
  }
  #contents-area.rent section#exposition .second .image{
    padding-right: 0;
    padding-left: 30px;
  }
  #contents-area.rent section#exposition .wrap .text-area{
    width: 100%;
    max-width: 580px;
  }
  #contents-area.rent section#exposition .btn-area{
    padding-top: 3rem;
    margin-top: 3rem;
  }
  #contents-area.rent section#exposition .btn-area .top{
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  #contents-area.rent section#exposition .btn-area .dispflex{
    gap: 10px;
  }
  #contents-area.rent section#exposition .btn-area li{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents-area.rent section#facility{
    padding-top: 8rem;
    background: url("../img/grad_bg.jpg") no-repeat 50% top;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
}


.mt20{
  margin-top: 20px;
}



.main_btn {
  width: 200px;
  margin-top: 20px;
}

.main_btn a {
  display: block;
  text-align: center;
  line-height: 44px;
  position: relative;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 44px;
  -moz-border-radius: 44px;
  -webkit-border-radius: 44px;
  -o-border-radius: 44px;
  -ms-border-radius: 44px;
}

.main_btn a::before {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-weight: 700;
  color: #fff;
  margin-top: -1px;
  font-size: 18px;
  font-size: 1.8rem;
  pointer-events: none;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

.main_btn.main01 a {
  border: 1px solid #144e42;
  background: #144e42;
}

@media only screen and (min-width: 769px) {
  .main_btn.main01 a:hover {
      background: #fff;
      color: #144e42;
  }

  .main_btn.main01 a:hover::before {
      color: #144e42;
  }
}

.main_btn.main02 a {
  border: 1px solid #5c412e;
  background: #5c412e;
}

@media only screen and (min-width: 769px) {
  .main_btn.main02 a:hover {
      background: #fff;
      color: #5c412e;
  }

  .main_btn.main02 a:hover::before {
      color: #5c412e;
  }
}

.main_btn.main03 a {
  border: 1px solid #cb9053;
  background: #cb9053;
}

@media only screen and (min-width: 769px) {
  .main_btn.main03 a:hover {
      background: #fff;
      color: #cb9053;
  }

  .main_btn.main03 a:hover::before {
      color: #cb9053;
  }
}

.main_btn.black a {
  border: 1px solid #000;
  background: #000;
}

@media only screen and (min-width: 769px) {
  .main_btn.black a:hover {
      background: #fff;
      color: #000;
  }

  .main_btn.black a:hover::before {
      color: #000;
  }
}



.bnr{
  margin: 50px auto;
  text-align: center;
}
.bnr img{
 width: 90%;
 max-width: 475px;
 height: auto;
}


/* Bnr 2408 */
.bnrArea{
  margin: 30px 0;
  text-align: center;
width: 100%;
}
.bnrArea img{
  width: 450px;
  height: auto;
  margin: 0px auto;
}
@media only screen and (max-width: 768px) {
  .bnrArea img{
      width: 100%;
      height: auto;
  }
}


.img-fix{
  position: relative;
}
.img-fix .text{
  position: absolute;
  bottom: 10px;
  left: 20px;
  background-color: rgba(255, 254, 254, 0.8);
  border:1px #ccc solid;
  padding: 15px 20px ;
  font-size: 24px;
  font-weight: 900;
}