@charset "UTF-8";
/* CSS Document */

/*--------------------
fv
--------------------*/
#fv a{
display: block;
width: 65%;
padding: 25px 0;
margin: 0 auto;
}
/*--------------------
campaign
--------------------*/
.campaign{
background-color: #f9cec0;
padding-bottom: 30px;
}
.benefits{
margin-bottom: 30px;
}
.benefits li{
margin-bottom: 7px;
}
.benefits li:last-of-type{
margin-bottom: 0;
}
.campaign a.btn{
display: block;
background-color: #fffcf8;
}
.campaign a.btn img{
display: block;
width: 65%;
margin: 0 auto;
}
/*--------------------
flow
--------------------*/
#flow{
background-color: #8abf5c;
padding: 30px 0;
}
#flow .box{
padding: 30px 0;
background-color: #fff;
}
#flow h2{
background-color: #8abf5c;
color: #fff;
font-family: "Noto Serif JP", serif;
font-weight: bold;
text-align: center;
line-height: 1;
font-size: 1.8rem;
width: 200px;
padding: 10px 0;
margin: 0 auto 20px;
}
#flow ul{
width: 80%;
margin: 0 auto;
}
#flow ul li{
padding-bottom: 20px;
}
#flow ul li:last-of-type{
padding-bottom: 0;
}
#flow ul li h3{
color: #8abf5c;
font-family: "Noto Serif JP", serif;
font-weight: bold;
padding-bottom: 5px;
}
#flow ul li img{
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.4);
}
/*--------------------
rating
--------------------*/
#rating{
background-image: url("../images/bg_rating.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 30px 0;
}
#rating img{
display: block;
width: 75%;
padding-top: 20px;
margin: 0 auto;
}
#rating video{
display: block;
width: 85%;
padding-top: 20px;
margin: 0 auto;
}
/*--------------------
course
--------------------*/
#course{
padding: 30px 0;
}
#course h2{
background-color: #8abf5c;
color: #fff;
text-align: center;
line-height: 1;
font-weight: bold;
font-size: 2.0rem;
width: 140px;
border-radius: 7px;
padding: 10px 0;
margin: 0 auto 10px;
}
#course .course{
padding-bottom: 30px;
}
#course p.worries{
font-weight: bold;
padding-bottom: 30px;
}
#course p.answer{
color: #8abf5c;
font-family: "Noto Serif JP", serif;
font-weight: bold;
padding-bottom: 30px;
}
#course p.answer span{
font-family: "Noto Serif JP", serif;
font-weight: bold;
background: linear-gradient(transparent 70%, #fff100 40%); 
}
#course p.price{
color: #8abf5c;
text-align: center;
font-weight: bold;
font-size: 1.8rem;
}
#course table{
margin: 0 auto;	
color: #8abf5c;
}
#course table th{
width: 50%;
font-weight: bold;
font-size: 1.8rem;
border-bottom: solid 1px #8abf5c;
padding: 15px 20px 5px 20px;
}
#course table td{
text-align: end;
font-weight: bold;
font-size: 1.8rem;
border-bottom: solid 1px #8abf5c;
padding: 15px 20px 5px 20px;
}
/*--------------------
point
--------------------*/
#point{
background-color: #8abf5c;
padding-bottom: 30px
}
#point img.catch{
padding-bottom: 30px
}
#point p.title{
font-weight: bold;
color: #fff;
text-align: center;
font-size: 2.2rem;
padding-bottom: 5px;
}
#point ul li h3{
display: inline-block;
background-color: #fff;
color: #8abf5c;
line-height: 1;
font-weight: bold;
font-size: 1.4rem;
padding: 5px 10px;
border-radius: 20px;
margin-bottom: 7px;
}
#point ul li img:last-of-type{
padding-bottom: 20px;
}
#point ul li:last-of-type img:last-of-type{
padding-bottom: 0;
}
/*--------------------
step
--------------------*/
#step {
padding: 30px 0;
}
#step .box{
 background-image: linear-gradient(90deg, rgba(205, 218, 0, 1), rgba(104, 184, 46, 1));
}
#step h2{
color: #8abf5c;
text-align: center;
line-height: 1;
font-weight: bold;
font-size: 2.0rem;	
margin-bottom: 10px;
}
#step ul li{
position: relative;
}
#step ul li .btn{
position: absolute;
bottom: 20px;
left: 23%;
width: 60%;
}
/*--------------------
faq
--------------------*/
#faq{
background-color: #e0deda;
padding: 30px 0;
}
#faq h2{
color: #606060;
text-align: center;
line-height: 1;
font-weight: bold;
font-size: 2.0rem;	
margin-bottom: 15px;
}
#faq .answer {
display: none;
}
#faq .question {
background-color: #8abf5c;
color: #fff;
padding: 15px 45px 15px 55px;
margin: 10px 0 0;
transition: background .3s ease;
cursor: pointer;
position: relative;
}
#faq .question::before,
#faq .question::after{
position:absolute;
content:'';
top:1px;
right:20px;
bottom:0;
width:12px;
height:2px;
margin:auto;
background:#fff;
}
#faq .question::after{
transform:rotate(-90deg);
transition:transform 0.3s;
}
#faq .question.active::after{
transform:rotate(0deg);
}
#faq .answer {
background-color: #FFF;
padding: 15px;
}
#faq .question span,
#faq .answer span{
display: block;
position: relative;
font-weight: bold;
font-size: 1.6rem;
}
#faq .question span{
text-indent: -2.4em;
}
#faq .answer span{
color: #606060;
}
/*--------------------
store
--------------------*/
#store{
background-color: #8abf5c;
color: #fff;
padding: 30px 0;
}
#store h2{
display: inline-block;
color: #fff;
border: solid 1px #fff;
font-weight: bold;
padding: 5px 15px;
margin-bottom: 20px;
}
#store ul li{
padding-bottom: 40px;
}
#store ul li h3{
display: inline-block;
font-weight: bold;
border-bottom: solid 1px #fff;
margin-bottom: 10px;
}
#store ul li p{
font-weight: bold;
padding-bottom: 5px;
text-indent: -1.7em;
padding-left: 25px;
}
#store ul li p.tel a{
font-weight: bold;
color: #fff;
}
#store ul li p:before{
font-family: "Font Awesome 5 Free";
font-weight: 600;
padding-right: 10px;
}
#store ul li p.map:before{
content: "\f3c5";
}
#store ul li p.tel:before{
content: "\f095";
}
#store ul li p.time:before{
content: "\f017";
}
#store ul li p.parking:before{
content: "\f1b9";
}

@media (max-width: 560px){
/*--------------------
course
--------------------*/
#course p.worries{
font-size: 4.7vw;
}
#course p.answer{
font-size: 4.5vw;
}
#course p.answer span{
font-size: 4.5vw;
}	
/*--------------------
store
--------------------*/
#store ul li h3{
font-size: 4.6vw;
}
/*--------------------
cta
--------------------*/
#cta a{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}

@media (min-width: 561px){
/*--------------------
course
--------------------*/
#course p.worries{
font-size: 1.8rem;
}
#course p.answer{
font-size: 2.0rem;
}
#course p.answer span{
font-size: 2.0rem;
}	
/*--------------------
store
--------------------*/
#store ul li h3{
font-size: 2.0rem;
}
/*--------------------
cta
--------------------*/
#cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #0000001a;
}
#cta a{
display: block;
width: 30%;
padding: 10px 0;
margin: 0 auto;
}
}

@media (min-width: 561px) and (max-width: 1024px){

}

@media (min-width: 1025px){
	
}