@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "fot-tsukuardgothic-std","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
background: url("../images/bg.png") #6db574 fixed;
background-size: 240px;
color:#000;
min-width:630px;
}
@media screen and (max-width:767px){
html,body{ font-size: calc((20/630)*100vw); min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*video*/
video{ width: 100%; vertical-align: bottom; margin: 0; padding: 0;}

/*txt*/
p{ line-height:1.5em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#333;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ position: relative; z-index: 3;}
header span.ico{ width: 156px; position: absolute; left: 20px; bottom: -60px;}
@media screen and (max-width:767px){
header span.ico{ width: calc((156/630)*100vw); left: calc((20/630)*100vw); bottom: calc((-60/630)*100vw);}
}

/*フッター*/
footer{ background: #fff; padding: 40px;}
footer img{ height: 83px;}
@media screen and (max-width:767px){
footer{ padding: calc((40/630)*100vw);}
footer img{ height: calc((83/630)*100vw);}
}

/*メイン*/
#wrapper{ width: 630px; background: #fff; margin: auto;}
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto;}
@media screen and (max-width:767px){
#wrapper{ width: 100%;}
.maincontent{ padding:0; margin:0 auto;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}



/*howto*/
#howto{ padding: 20px 60px 80px; background: #fffaf7; position: relative; z-index: 1;}
#howto:before{ content: ""; width: 100%; height: 220px; background: url("../images/howto_bg.png"); background-size: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
#howto:after{ content: ""; width: 100%; height: 220px; background: url("../images/howto_bg.png"); background-size: 100%; position: absolute; left: 0; bottom: 0; z-index: -1;}
#howto figure.ico01{ width: 100px; position: absolute; right: 0; top: 280px;}
#howto figure.ico02{ width: 150px; position: absolute; left: 0; top: 800px;}
#howto dl dt{ text-align: center; background: #036836; border-radius: 20px 20px 0 0; padding: 20px;}
#howto dl dt img{ height: 30px;}
#howto dl dd{ text-align: center; background: #fff; padding: 60px 0 80px; border-radius: 0 0 20px 20px;}
#howto dl dd ul li{ margin-top: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#howto dl dd ul li:first-child{ margin-top: 0;}
#howto dl dd ul li h3{ display: flex; align-items: center; justify-content: center; background: #a25835; color: #fff; font-size: 1.5rem; padding: 0.125em 1.5em 0.25em; border-radius: 2em; margin-bottom: 25px;}
#howto dl dd ul li p{ font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5em;}
#howto dl dd ul li p.small{ font-size: 1rem;}
#howto dl dd ul li p a{ color: #036836; text-decoration: underline;}
#howto dl dd ul li p a:hover{ text-decoration: none;}

#howto figure.btn{ margin-top: 55px; display: flex; align-items: center; justify-content: center;}
#howto figure.btn a#kiyaku_btn{ display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 1.5rem; line-height: 1em; font-weight: bold; padding: 0.5em 1.5em 0.66em; position: relative; z-index: 1; cursor: pointer;}
#howto figure.btn a#kiyaku_btn:before{ content: ""; width: 100%; height: 100%; background: #e84e3e; position: absolute; left: 0; top: 0; z-index: -1;}
#howto figure.btn a#kiyaku_btn:after{ content: ""; width: 100%; height: 100%; background: rgba(232,149,149,0.43); position: absolute; left: 6px; top: 6px; z-index: -3;}
#howto figure.btn a.insta{ display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-left: 30px; font-size: 2.5rem; line-height: 1em; color: #fff; border-radius: 50%; position: relative; z-index: 1;}
#howto figure.btn a.insta:before{ content: ""; width: 100%; height: 100%; background: #e84e3e; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 50%;}
#howto figure.btn a.insta:after{ content: ""; width: 100%; height: 100%; background: rgba(232,149,149,0.43); position: absolute; left: 4px; top: 4px; z-index: -3; border-radius: 50%;}
@media screen and (max-width:767px){
#howto{ padding: calc((20/630)*100vw) calc((60/630)*100vw) calc((80/630)*100vw);}
#howto:before{ height: calc((220/630)*100vw);}
#howto:after{ height: calc((220/630)*100vw);}
#howto figure.ico01{ width: calc((100/630)*100vw); top: calc((280/630)*100vw);}
#howto figure.ico02{ width: calc((140/630)*100vw); top: calc((800/630)*100vw);}
#howto dl dt{ border-radius: calc((20/630)*100vw) calc((20/630)*100vw) 0 0; padding: calc((20/630)*100vw);}
#howto dl dt img{ height: calc((30/630)*100vw);}
#howto dl dd{ padding: calc((60/630)*100vw) 0 calc((80/630)*100vw); border-radius: 0 0 calc((20/630)*100vw) calc((20/630)*100vw);}
#howto dl dd ul li{ margin-top: calc((55/630)*100vw);}
#howto dl dd ul li h3{ margin-bottom: calc((25/630)*100vw);}

#howto figure.btn{ margin-top: calc((55/630)*100vw);}
#howto figure.btn a#kiyaku_btn:after{ left: calc((6/630)*100vw); top: calc((6/630)*100vw);}
#howto figure.btn a.insta{ margin-left: calc((30/630)*100vw);}
#howto figure.btn a.insta:after{ left: calc((4/630)*100vw); top: calc((4/630)*100vw);}
}



/*dance*/
#dance{ background: url("../images/dance_bg.jpg"); background-size: cover; padding: 0 0 20px;}
#dance h2{ margin-bottom: 20px;}

#dance .movie{ margin: 0 10px 60px;}
#dance .movie iframe{ box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px;}
#dance .movie video{ box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px;}

#dance .lyric{ text-align: center; position: relative;}
#dance .lyric p{ font-size: 1.3rem; line-height: 1.25em; letter-spacing: 0.1em; font-weight: bold;}
#dance .lyric p .ruby{ display: inline-block; position: relative; line-height: 1.25em;}
#dance .lyric p .ruby .rt{ position: absolute; left: 0; right: 0; top: -1.25em; margin: auto; line-height: 1.25em; letter-spacing: -0.025em; margin-bottom: -0.25em; word-break: keep-all; font-size: 50%;}
#dance .lyric figure.ico01{ width: 110px; position: absolute; left: 10px; top: 250px;}
#dance .lyric figure.ico02{ width: 140px; position: absolute; right: -10px; top: 555px;}
@media screen and (max-width:767px){
#dance{ padding: 0 0 calc((20/630)*100vw);}
#dance h2{ margin-bottom: calc((20/630)*100vw);}

#dance .movie{ margin: 0 calc((10/630)*100vw) calc((60/630)*100vw);}

#dance .lyric figure.ico01{ width: calc((110/630)*100vw); left: calc((10/630)*100vw); top: calc((250/630)*100vw);}
#dance .lyric figure.ico02{ width: calc((140/630)*100vw); right: calc((-10/630)*100vw); top: calc((555/630)*100vw);}
}



/*camp01*/
#camp01{ background: #fffaf7; padding: 0 0 40px; position: relative; z-index: 1;}
#camp01:after{ content: ""; width: 100%; height: 220px; background: url("../images/camp01_bg.png"); background-size: 100%; position: absolute; left: 0; bottom: 0; z-index: -1;}
@media screen and (max-width:767px){
#camp01{ padding: 0 0 calc((40/630)*100vw);}
#camp01:after{ height: calc((220/630)*100vw);}
}



/*camp02*/
#camp02{ background: #fffaf7; padding: 40px 0 20px; position: relative; z-index: 1;}
@media screen and (max-width:767px){
#camp02{ padding: calc((40/630)*100vw) 0 calc((20/630)*100vw);}
}



/*sample*/
#sample{ background: url("../images/sample_bg.jpg"); background-size: cover; padding: 80px 0; position: relative; z-index: 1;}
#sample:before{ content: ""; width: 100%; height: 44px; background: url("../images/sample_top.png") center top; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1;}
#sample h2{ margin: 0 30px 40px;}

#sample .name{ display: flex; align-items: center; justify-content: center; margin-top: 30px;}
#sample .name p{ display: flex; align-items: center; justify-content: center; background: #036836; color: #fff; padding: 0.25em 1.5em 0.5em; font-size: 1.3rem; line-height: 1em; font-weight: bold; border-radius: 2em;}

#sample #sample_list{ margin: -30px 30px 100px;}
#sample #sample_list ul li{ padding: 30px 30px 0;}
#sample #sample_list ul li video{ box-shadow: rgba(21, 33, 55, 0.14) 0px 0px 32px;}
#sample #sample_list .bx-wrapper .bx-pager,
#sample #sample_list .bx-wrapper .bx-controls-auto { position: absolute; bottom: -60px;}
#sample #sample_list .bx-wrapper .bx-pager.bx-default-pager a { background: #d6d2d2; width: 20px; height: 20px; margin: 0 10px;}
#sample #sample_list .bx-wrapper .bx-pager.bx-default-pager a:hover,
#sample #sample_list .bx-wrapper .bx-pager.bx-default-pager a.active { background: #666464;}
@media screen and (max-width:767px){
#sample{ padding: calc((80/630)*100vw) 0;}
#sample:before{ height: calc((44/630)*100vw);}
#sample h2{ margin: 0 calc((30/630)*100vw) calc((40/630)*100vw);}

#sample #sample_list{ margin: 0 calc((30/630)*100vw) calc((100/630)*100vw);}
#sample #sample_list ul li{ padding: calc((30/630)*100vw) calc((30/630)*100vw) 0;}
#sample #sample_list .bx-wrapper .bx-pager,
#sample #sample_list .bx-wrapper .bx-controls-auto { bottom: calc((-60/630)*100vw);}
#sample #sample_list .bx-wrapper .bx-pager.bx-default-pager a { width: calc((20/630)*100vw); height: calc((20/630)*100vw); margin: 0 calc((10/630)*100vw);}
}



/*recipe*/
#recipe{ background: #fffaf7; padding: 5px 0 80px;}
#recipe figure.mv{ margin: -25px 45px 35px;}
#recipe h3{ margin: 0 25px 15px; position: relative; z-index: 1;}
#recipe h3:after{ content: ""; width: calc(100% + 50px); height: 220px; background: url("../images/recipe_bg.png") center top no-repeat; background-size: 100%; position: absolute; left: -25px; top: 170px; z-index: -1; transition: 0.3s;}

#recipe_list{ margin: 0 60px 0;}
#recipe_list dl{ margin-top: 30px; position: relative; z-index: 3;}
#recipe_list dl:first-child{ margin-top: 0; z-index: 5;}
#recipe_list dl:not(:first-child) dt:before{ content: ""; width: calc(100% + 120px); height: 220px; background: url("../images/recipe_bg.png") center top no-repeat; background-size: 100%; position: absolute; left: -60px; top: -60px; z-index: -1; transition: 0.3s; pointer-events: none;}
#recipe_list dl:not(:first-child) dt:before{ opacity: 0;}
#recipe_list dl:not(:first-child).active dt:before{ opacity: 1.0;}

#recipe_list dl dt{ background: #036836; text-align: center; border-radius: 20px 20px 0 0; padding: 20px; line-height: 0; position: relative; cursor: pointer;}
#recipe_list dl dt img{ height: 30px;}
#recipe_list dl dt:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 25px 15px 0px 15px; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transition: 0.3s;}
#recipe_list dl dt.active:after{ transform: translateY(-50%) rotateX(-180deg);}
#recipe_list dl dd{ display: none;}
#recipe_list dl dd{ background: #fff; padding: 25px; border-radius: 0 0 20px 20px;}
#recipe_list dl dd .movie{ margin-bottom: 25px;}
#recipe_list dl dd p{ font-size: 1.4rem; font-weight: bold;}
#recipe_list dl dd ul{ font-size: 1.4rem; line-height: 1.5em; font-weight: bold;}
#recipe_list dl dd ul li{ padding-left: 1.25em; margin-bottom: 1em; position: relative;}
#recipe_list dl dd ul li:last-child{ margin-bottom: 0;}
#recipe_list dl dd ul li span{ position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#recipe{ padding: calc((5/630)*100vw) 0 calc((80/630)*100vw);}
#recipe figure.mv{ margin: calc((-25/630)*100vw) calc((45/630)*100vw) calc((35/630)*100vw);}
#recipe h3{ margin: 0 calc((25/630)*100vw) calc((15/630)*100vw);}
#recipe h3:after{ width: calc(100% + ((50/630)*100vw)); height: calc((220/630)*100vw); left: calc((-25/630)*100vw); top: calc((170/630)*100vw);}

#recipe_list{ margin: 0 calc((60/630)*100vw) 0;}
#recipe_list dl{ margin-top: calc((30/630)*100vw);}
#recipe_list dl:not(:first-child) dt:before{ width: calc(100% + ((120/630)*100vw)); height: calc((220/630)*100vw); left: calc((-60/630)*100vw); top:calc((-60/630)*100vw);}

#recipe_list dl dt{ border-radius: calc((20/630)*100vw) calc((20/630)*100vw) 0 0; padding: calc((20/630)*100vw);}
#recipe_list dl dt img{ height: calc((30/630)*100vw);}
#recipe_list dl dt:after{ border-width: calc((25/630)*100vw) calc((15/630)*100vw) 0 calc((15/630)*100vw); right: calc((30/630)*100vw);}

#recipe_list dl dd{ padding: calc((25/630)*100vw); border-radius: 0 0 calc((20/630)*100vw) calc((20/630)*100vw);}
#recipe_list dl dd .movie{ margin-bottom: calc((25/630)*100vw);}
}



/*kiyaku*/
#kiyaku{ display: none;}
#kiyaku{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; /*display: flex;*/ align-items: center; justify-content: center; z-index: 999;}
#kiyaku_close{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.25rem; line-height: 1em; font-weight: bold; width: 2em; height: 2em; background: #fff; color: #000; position: absolute; left: 30px; top: 30px; z-index: 9999; border-radius: 50%; cursor: pointer; transition: 0.3s;}
#kiyaku_close:hover{ opacity: 0.7;}
#kiyaku_bg{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.9); position: absolute; left: 0; top: 0; z-index: -1;}
#kiyaku_in{ width: 90%; height: 80%; max-width: 630px; max-height: 800px; background: #fff; padding: 30px; overflow-x: hidden; overflow-y: auto;}
#kiyaku_in dl{ margin-bottom: 30px;}
#kiyaku_in dl dt{ background: #036836; color: #fff; font-size: 1rem; font-weight: bold; line-height: 1em; padding: 0.5em 1em;}
#kiyaku_in dl dd{ padding: 15px; font-size: 0.75rem;}
#kiyaku_in dl dd p{ line-height: 1.75em; margin: 0; text-align: justify;}
#kiyaku_in dl dd ul{ margin-bottom: 1em; text-align: justify;}
#kiyaku_in dl dd ul li{ line-height: 1.75em; padding-left: 1.25em; position: relative;}
#kiyaku_in dl dd ul li:before{ content: "・"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#kiyaku_close{ left: calc((15/630)*100vw); top: calc((15/630)*100vw);}
#kiyaku_in{ padding: calc((30/630)*100vw);}
#kiyaku_in dl{ margin-bottom: calc((30/630)*100vw);}
#kiyaku_in dl dd{ padding: calc((15/630)*100vw);}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}