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

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #474747;
font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
background: #FFF;
margin: 0;
}
img{
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
video, iframe {
width: 100%;
vertical-align: bottom;
}
a, a:hover {
text-decoration: none;
color: #555;
}
i {
font-size: 0.8em;
padding-right: 5px;
}
p {
word-break: break-all;
}
.box {
width: 90%;
margin: 0 auto;
}
.sans {
font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
}

.wrap {
max-width: 460px;
margin: 0 auto;
}
#header{
background-color: #fff;
}
#header .logo{
display: block;
width: 50%;
padding: 20px 5%;
}
/*--------------------
fv
--------------------*/
#fv div {
background: rgb(205,218,0);
background: linear-gradient(180deg, rgba(205,218,0,1) 0%, rgba(104,184,46,1) 100%);
color: #fff;
text-align: center;
padding: 30px 0;
}
#fv div h2{
width: 70%;
margin: 0 auto;
}
#fv h3 {
padding: 20px 0;
}
#fv h3 img {
display: block;
width: 55%;
margin: 0 auto;
}
.white {
background: #FFFCF7;
}
/*--------------------
shop
--------------------*/
#shop {
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,241,177,1) 100%);
position: relative;
}
#shop:before {
content: "";
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 1;
background: url(../images/gold1.svg) no-repeat top left;
background-size: 100% auto;
}
#shop:after {
content: "";
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
display: block;
z-index: 1;
background: url(../images/gold2.svg) no-repeat bottom left;
background-size: 100% auto;
}
#shop > div {
position: relative;
z-index: 2;
padding: 30px 0 15px;
}
#shop h2, #shop h3, #shop h4, #shop p {
margin: 0 auto;
}
#shop h2 {
width: 92%;
padding-bottom: 10px;
}
#shop h3 {
width: 46%;
padding-bottom: 20px;
}
#shop h4 {
width: 60%;
padding-bottom: 10px;
}
#shop p {
width: 64%;
}
#youtube {
width: 70%;
margin: 0 auto;
padding-bottom: 10px;
}
#youtube video {
width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}
/*--------------------
campaign
--------------------*/
.campaign {
padding: 30px 0;
}
.pink {
background: #F9CEC0;
}
.campaign h2 {
width: 80%;
margin: 0 auto;
padding-bottom: 20px;
}
.campaign .box {
background: #FFFCF7;
padding-bottom: 30px;
}
.campaign h3 {
padding-bottom: 30px;
}
.campaign h4 {
width: 90%;
margin: 0 auto;
padding-bottom: 40px;
}
a.reserve {
display: block;
width: 370px;
margin: 0 auto;
}
/*--------------------
features
--------------------*/
#features {
padding: 30px 0;
}
#features h2 {
width: 61%;
margin: 0 auto;
padding-bottom: 30px;
}
#features ul li {
background: #8ABF5C;
color: #fff;
padding: 16px 16px 16px 10px;
margin-bottom: 20px;
}
#features ul li:last-child {
margin-bottom: 0;
}
#features ul li span {
font-weight: 900;
padding-left: 24px;
display: block;
position: relative;
font-size: 2rem;
line-height: 140%;
}
#features ul li span:before {
position: absolute;
top: 2px;
left: 0;
content: "";
display: block;
background: url(../images/check.svg) no-repeat top left;
background-size: 18px auto;
width: 18px;
height: 18px;
}
/*--------------------
flow
--------------------*/
#flow{
background: #8abf5c;
padding: 30px 0;
}
#flow .box{
padding: 30px 0;
background: #fff;
}
#flow h2{
background: #8abf5c;
color: #fff;
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-weight: bold;
padding-bottom: 5px;
}
#flow ul li img{
box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.4);
}
/*--------------------
course
--------------------*/
#course{
padding: 30px 0;
}
#course h2 {
width: 74%;
margin: 0 auto;
padding-bottom: 20px;
}
#course ul {
border: 1px solid #8ABF5C;
background: #fff;
padding: 30px 0;
margin-bottom: 20px;
}
#course ul li {
padding-bottom: 20px;
}
#course ul li:last-child {
padding-bottom: 0;
}
#course h3 {
width: 89%;
margin: 0 auto;
}
#course p {
font-weight: 900;
font-size: 2rem;
padding-bottom: 20px;
width: 86%;
margin: 0 auto;
}
#course h4 {
display: table;
margin: 0 auto;
color: #8abf5c;
font-weight: 600;
padding-bottom: 30px;
}
#course h4:last-child {
padding-bottom: 0;
}
#course h4 > span{
font-weight: 700;
font-size: 2rem; 
}
#course h4 span.yellow {
background: linear-gradient(transparent 70%, #fff100 40%);
}
#course h4 span.yellow span {
font-weight: 900;
font-size: 1.4em;
}
/*--------------------
can
--------------------*/
#can {
padding-top: 30px;
}
#can a {
margin-bottom: 10px;
}
/*--------------------
point
--------------------*/
#point{
padding: 30px 0;
}
.green {
background: #8abf5c;
}
#point h2 {
width: 75%;
margin: 0 auto;
padding-bottom: 30px
}
#point article {
background: #fff;
margin-bottom: 50px;
box-sizing: border-box;
padding: 0 12px 30px 12px;
}
#point article:last-child {
margin-bottom: 0;
}
#point article h3 {
position: relative;
background: #FFF100;
display: table;
padding: 10px 16px 14px;
color: #8ABF5C;
font-weight: 700;
font-size: 2.2rem;
line-height: 100%;
transform: translateY(-15px);
margin-bottom: 10px;
}
#point article h3:after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 241, 0, 0);
border-top-color: #FFF100;
border-width: 15px;
margin-left: -15px;
}
#point article p {
font-weight: 700;
color: #8ABF5C;
font-size: 1.8rem;
padding-bottom: 10px;
}
#point article ul {
list-style-type: square;
font-size: 1.4rem;
padding-bottom: 16px;
margin-left: 20px;
}
#point article ul li {
padding-bottom: 4px;
}
#point article h4 {
background: url(../images/border.svg) no-repeat center top;
background-size: 100% auto;
font-weight: 900;
color: #8ABF5C;
font-size: 2.2rem;
padding: 20px 0 10px 30px;
position: relative;
line-height: 100%;
}
#point article h4:before {
content: "";
display: block;
background: url(../images/symbol.svg) no-repeat center left;
background-size: 24px auto;
width: 24px;
height: 15px;
position: absolute;
bottom: 10px;
left: 0;
}
#point article h4 + ul {
font-size: 1.6rem;
padding-bottom: 0;
background: none;
}
/*--------------------
step
--------------------*/
#step {
padding: 30px 0;
}
#step .box{
background-image: linear-gradient(90deg, rgba(205, 218, 0, 1), rgba(104, 184, 46, 1));
margin-bottom: 30px;
}
#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{
color: #fff;
padding: 30px 0;
font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
}
#store h2 {
display: table;
color: #8abf5c;
font-weight: bold;
padding: 5px 15px;
margin: 0 auto 20px;
background: #fff;
font-size: 2.4rem;
}
#store ul li{
padding-bottom: 50px;
}
#store ul li img {
padding-bottom: 20px;
}
#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";
}
#store h4 {
color: #8abf5c;
text-align: center;
font-weight: 600;
padding: 30px 0;
font-size: 1.8rem;
line-height: 180%;
}
/*--------------------
#greeting
--------------------*/
#greeting {
padding: 30px 0;
}
#greeting h3 {
color: #8ABF5C;
font-weight: 700;
text-align: center;
font-size: 2.4rem;
padding-bottom: 20px;
}
#greeting img {
width: 60%;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
#greeting p {
font-weight: 600;
padding-bottom: 30px;
}
#greeting p strong {
font-weight: 900;
font-size: 1.2em;
}
#greeting p span {
font-weight: 700;
font-size: 1.1em;
color: red;
}
/*--------------------
#footer
--------------------*/
#footer .sns{
display: flex;
justify-content: center;
padding: 25px 0;
}
#footer .sns li{
width: 35px;
}
#footer .sns li:nth-child(2){
padding: 0 30px;
}
#footer .logo{
background-color: #e0deda;
}
#footer .logo img{
display: block;
width: 80px;
margin: 0 auto;
}

#cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
}

@media (max-width: 560px){
body {
font-size: 3.5vw;
}

a.reserve {
width: 80vw;
}

#features ul li span {
font-size: 4vw;
}

#flow h2{
width: 50vw;
font-size: 4.5vw;
}
#flow ul li h3{
font-size: 4.2vw;
}

#course p {
font-size: 4.2vw;
}
#course h4 {
font-size: 3.5vw;
}
#course h4 > span{
font-size: 4.5vw;
}

#point article h3 {
font-size: 4.5vw;
}
#point article p {
font-size: 4vw;
}
#point article ul {
font-size: 3vw;
}
#point article h4 {
font-size: 4.5vw;
}
#point article h4 + ul {
font-size: 3.4vw;
}

#step h2{
font-size: 4.5vw;
}

#faq h2 {
font-size: 4.5vw;
}
#faq .question span,#faq .answer span{
font-size: 3.5vw;
}

#store ul li h3{
font-size: 4.6vw;
}
#store h4 {
font-size: 4vw;
}

#greeting h3 {
font-size: 5.2vw;
}

#footer .logo{
padding: 15px 0 120px;
}
}

@media (min-width: 561px){
body {
font-size: 1.6rem;
}
a[href^="tel:"] {
pointer-events: none;
cursor: default;
}
/*--------------------
course
--------------------*/
/*--------------------
store
--------------------*/
#store ul li h3{
font-size: 2.0rem;
}
/*--------------------
cta
--------------------*/
#cta {
background: #0000001a;
}
#cta a{
display: block;
width: 30%;
padding: 10px 0;
margin: 0 auto;
}
/*--------------------
#footer
--------------------*/
#footer .logo{
padding: 20px 0 150px;
}
}