@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html {-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%;}
html, body, .cont { max-width:100%; overflow-x:hidden; overflow-y:visible;}
html, body, 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; list-style:none; vertical-align:middle; background:transparent; }
img {border-style: none;} 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}

del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
*{box-sizing: border-box;}
@media screen and (max-width: 320px){html, body { min-width:320px;}}

::selection { background: #eee; color: #aaa;}
::-moz-selection { background: #eee; color: #aaa;}


/*===================
 LINK
=====================*/
a, a span, a img { -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a:link, a:visited, a:hover, a:active { color: #019fe7; text-decoration: underline;}
a:hover { opacity:1; filter: alpha(opacity=100);}
a:hover img {}
@media screen and (max-width: 660px) {body, html { width:100%; overflow-x:hidden;}}
/*- style -*/
a.a{}/* 「」がつく */
a.an{}/* ● */
a.af{}/* 大きな● */

a.al{ position:relative; text-decoration: none;}/*下線　要調整*/
a.al:hover{ color: #111 !important;}
a.al::after{ width: 0px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #000; content: ""; -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a.al:hover::after{ width: 100%; left: 0;}

a.ab{ position:relative; text-decoration: underline;}/*色と背景*/
a.ab:hover{ color: #fff !important; text-decoration: none; background: #222;}


/*===================
 FONT
=====================*/
*{ font-weight: 400; letter-spacing:1.5px; font-family: 'M PLUS 1', sans-serif;}

h1,h2,h3,h4,h5,h6 { font-size:18px; line-height:1.2em;}
p,li,dt,dl,span,td { font-size:18px; line-height:1.6em;}
.b{font-weight: bold;}
@media screen and (max-width: 700px) {
h1,h2,h3,h4,h5,h6 { font-size:15px; line-height:1.2em;}
p,li,dt,dl,span,td { font-size:15px; line-height:1.6em;}
}


/*===================
 will-change
=====================*/
.fTitle span, 
.fTitle60 span{ will-change: transform, opacity;}


/*--------------------
 fTit spanで囲ってアニメーション
--------------------*/
.fTit{}
.fTitle > span { display: inline-block; opacity: 0; -webkit-transition:0.3s ease-in; -moz-transition:0.3s ease-in; -o-transition:0.3s ease-in; transition:0.3s ease-in; overflow: hidden; -webkit-transform: translateY(20px); transform: translateY(20px);}

/* 表示 */
.fTitle > span.on{ margin: 0; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}


/*===================
 .content
=====================*/
main{ width: 100%; margin:0;}
.fix{ width: 100vw; max-height: 100vh; overflow:hidden; position: fixed;}

.c{}
.svgBk-ue{ width: 100%; height: auto; display: block; text-align: left; background: #fff;}
.svgBk-shita{ width: 100%; height: auto; display: block; padding-right: 50%; text-align: left; position: absolute; bottom: 0; left: 0; z-index: -1;}
.svgBk-ue img { width: 100%; height: auto;}
.svgBk-ue.w, 
.svgBk-shita.w{ background: #fff;}
.svgBk-ue.e, 
.svgBk-shie{ background: #eee;}
.svgBk-ue.g, 
.svgBk-shig{ background: #06c755;}



/*--------------------
 header
--------------------*/

header{ width: 100%; height: 50px; display: block; background: #fff;}
header .pc{ max-width: 1100px; width: 96%; height: 50px; padding: 10px 0; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between;}

header .pc h1{ display: block;}
header .pc h1 img{ height: 24px; margin: 3px; width:auto;}
header .pc .pcul{ display: block;}
header .pc .pcul li{ display: inline-block; margin: 0 5px; position: relative;}
header .pc .pcul li::after{ content: "|"; position: absolute; right: -10px; top: 0; font-weight: normal; font-size: 8px; color: #999;}
header .pc .pcul li a{ display: block; line-height: 30px; padding: 0 5px; font-size: 12px; color: #777; text-decoration: none;}
header .pc .pcul li a:hover{ color: #111; text-decoration: underline;}
header .sp{ display: none;}

@media screen and (max-width: 840px) {
header .pc{ display: none;}
header{ width: 100%; position: fixed; z-index: 10000; left: 0; bottom: 0; height: auto; display: block;}
header .sp{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; background: rgba(0,0,0,0.9); align-items: center; padding: 7px 3%;}
header .sp > *{ display: block;}
header .sp .logo img{ height: 16px; width: auto; margin-bottom: 1px;}
header .sp ul{}
header .sp ul li{ display: inline-block; margin: 0 5px;}
header .sp ul li a{ display: block;}
header .sp ul li a img{ height: 36px; width: auto;}
}


/*--------------------
 qr
--------------------*/
.qr { width: 35vw; position: fixed; right: 0; bottom: 0; z-index: 1000; transition: 0.4s;}
.fix .qr{ right: -35vw;}

.qr p{padding: 0 40px; display: flex; flex-direction: row; align-items: center; background: url("../img/smp/qr_bk.jpg") 0 0 repeat-y #06c755; position: relative; transition: 0.2s;}
.qr p::before{ width: 40px; height: 80px; position: absolute; left: 0; top: 50%; margin-top: -40px; content: ""; background: url("../img/smp/qr_txt.png") 0 50% no-repeat;}
.qr p img { width: 90px; height: auto; margin:10px 20px;}
.qr p a { display: block; font-size: 22px; line-height: 1.2em; color: #fff; text-decoration: none;}
.qr p a span{ dominant-baseline: text-bottom; font-weight: 900;}

.scroll .qr{ position: fixed; bottom: 50px; right: -35vw; margin:0 35px 0 0;}
.scroll .qr:hover{ right: 0vw; margin:0 0px 0 0;}

.sec6 .qr, 
.sec6.scroll .qr { right: -50vw;}
@media screen and (max-width: 1000px) {
.qr{ display: none;}
}
/*===================
 #sec1
=====================*/
#smp{ left: 50%; top: 50%; margin: 350px 0 0; transition: 0.6s; z-index: 50; overflow: hidden;}
#smp .wrap{ display: block; position: relative; overflow: hidden;}
#smp .image { width: 300px; display: block; position: relative; z-index: 10;}
#smp .image img{ width: 100%; height: auto;}
/**/
#smp .gamen{ width: 94%; height: 98%; display: block; position: absolute; left: 3%; top: 1%; border-radius:40px; z-index: 5; background:#fff; overflow: hidden;}

/*--.sc0--------*/

#smp.sc0 { position: fixed; top: 0%; margin: 350px 0 0 -450px;}
#smp.sc1 { position: fixed; top: 10%; margin: 0px 0 0 -450px;}
#smp.sc2 { position: fixed; top: 50%; margin: -300px 0 0 -450px;}

.opBody #smp.sc0 { margin: 350px 0 0 -450px;}
.fix #smp.sc0 { margin: 350px 0 0 -175px;}


/**/
#smpMasc{ width: 100%; height: 50vh; position: absolute; left: 0; top: 90vh; background:#fff; z-index: 100; transition: 0.1s;}
#smpMasc.sizeS{ top: 700px;}
#smpMasc.sizeM{ top: 90vh; margin-top: 50px;}
#smpMasc.sizeL{ top: 850px;}
#smpMasc.none{ height: 0; top: 200vh;}

.fix #smpMasc{ top: 100vh;}
@media screen and (max-width: 1100px) {
.opBody #smp.sc0 { margin: 350px 0 0 -415px;}
}
@media screen and (max-width: 1000px) {
#smp.sc0 { position: fixed; top: 0%; margin: 350px 0 0px;}
#smp.sc1 { position: fixed; top: 10%; margin: 0px 0 0 0px;}
#smp.sc2 { position: fixed; top: 50%; left: 5%; margin: -300px 0 0 50px;}

.fix #smp.sc0 { left: 52% !important;}
.opBody #smp.sc0 { left: 5% !important; margin: 350px 0 0 50px;}
}

@media screen and (max-width: 900px) {
#smp, 
.opBody #smp.sc0, 
.fix #smp.sc0, 
#smp .image { width: 250px;}
.fix #smp.sc0 { left: 58% !important;}
#smp { left: 8% ;}
.opBody #smp.sc0 { left: 4% !important;}
}



@media screen and (max-width: 840px) {
#smp, 
.opBody #smp.sc0, 
.fix #smp.sc0 { width: 250px; left: 48%; top: 0; bottom: -100vh; margin:0 0 0 -125px !important; padding-top: 320px; max-height: 100vh; min-height: 500px; overflow: hidden;}
.fix #smp.sc0 { left: 46%;}

#smp.sc0, 
#smp.sc1 , 
#smp.sc2 { position: absolute; top: 0; left: 50%;}
#smpMasc{ display: none;}
.opBody #smp.sc0 { left: 50% !important;}

}




/*===================
 #sec1
=====================*/
#sec1 { width: 100%; height: 90vh; min-height: 550px; max-height: 800px; display:block; padding-left: 50%; position: relative; z-index: 1; background: #eee;}
/*--left--*/
#sec1 .left{ width: 100vw; position: absolute; left: 0; top: 0; height: 100%; transition: 0.8s; z-index: 15;}
#sec1 .left::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.8s; content: ""; background: #06c755;}
/*前*/ .fix #sec1 .left::after{width: 100vw;}
/*後*/ .opBody #sec1 .left::after{ width: 50%;}
#sec1 .left .inner { width: 450px; height: 100%; padding-bottom: 50px; display: block; position: absolute; z-index: 5; left: 50%; margin-left: -225px; transition: 0.3s;}
/*後*/.opBody #sec1 .left .inner{ margin-left: -510px;}
/**/
#sec1 .left .inner h1{ margin: 105px 75px 0; }
#sec1 .left .inner h1 > span{ display: block; text-align: left;}
#sec1 .left .inner h1 > span span { line-height: 1.4em; letter-spacing: 8px; color: #fff;}
#sec1 .left .inner h1 > span.h1-2{ padding-top: 5px;}
#sec1 .left .inner h1 > span.h1-1 span{ font-size: 44px; font-weight: 900;}
#sec1 .left .inner h1 > span.h1-2 span{ font-size: 34px; font-weight: 700;}
#sec1 .left .inner h1 > span.h1-3 span{ font-size: 60px; font-weight: 900; line-height: 1.2em;}
#sec1 .left .inner h1 > span.h1-4{ display: none;}
/**/
#sec1 .left .inner .svg { width: 80%; height: 65%; position: absolute; left: 5%; top: 10%;}
#sec1 .left .inner .svg svg{}
/*--*/
#sec1 .right{ background: #eee; width: 50vw; height: 100%; display: block;}
#sec1 .right .inner{ height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: flex-end;}
#sec1 .right .inner .title { position: relative; padding-bottom: 20px;}
#sec1 .right .inner .title h2{ display: block; color: #06c755; font-size: 30px; vertical-align: baseline; padding: 30px 40px; font-weight: bold;}
#sec1 .right .inner .title h2 span{ font-size: 30px; color: #ca5d5d; vertical-align: baseline; font-weight: bold;}
#sec1 .right .inner .title svg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#sec1 .right .inner ul { margin: 0px 0 3%;}
#sec1 .right .inner ul li{ display: block; text-align: left; padding:0 0 0 30px; font-size: 22px; position: relative; color: #06c755; font-weight: 600;}
#sec1 .right .inner ul li span{ display: block; width: 22px; height: 22px;position: absolute; left: 0; top: 50%; margin-top: -11px; background: url("../img/check.png") 50% 50% no-repeat; background-size: 100% 100%; }
#sec1 .right .inner p{ padding: 0px 170px 150px 0; position: relative;}
#sec1 .right .inner p span{ color: #fff; display: block; padding: 25px 50px 25px 40px; background: url("../img/come2.png") 50% 50% no-repeat; background-size: 100% 100%; position: relative; z-index: 10;}
#sec1 .right .inner p::after{ width: 100%; height: 100%; position: absolute; right: 0; bottom: 0; content: ""; background:url("../img/mv_p.png") 100% 100% no-repeat; background-size: contain; opacity: 0.4; z-index: 1;}


@media screen and (max-width: 1100px) {
#sec1 .left{ width: 50%}
/*前*/ .fix #sec1 .left::after{width: 100vw;}
/*後*/ .opBody #sec1 .left::after{ width: 100%;}
#sec1 .left .inner { width: 180%; left: 10%; margin-left: 0;}
/*後*/.opBody #sec1 .left .inner{ width: 80%; left: 10%; margin-left: 0px;}
#sec1 .left .inner .svg{ width: 40%; left: 30%; transition: 0.2s;}
.opBody #sec1 .left .inner .svg{ width: 80%; left: 10%;}
/**/
#sec1 .left .inner h1{ margin: 105px 35% 0; transition: 0.2s;}
.opBody #sec1 .left .inner h1{ margin: 105px 75px 0; }
#sec1 .left .inner h1 > span.h1-1 span{ font-size: 3.8vw;}
#sec1 .left .inner h1 > span.h1-2 span{ font-size: 3.0vw; letter-spacing: 0;}
#sec1 .left .inner h1 > span.h1-3 span{ font-size: 4.2vw;}
/*-----*/
#sec1 .right .inner .title h2, 
#sec1 .right .inner .title h2 span { font-size: 26px;}
#sec1 .right .inner ul { margin: 0px 0 3%;}
#sec1 .right .inner ul li{ font-size: 18px;}
#sec1 .right .inner ul li span{ display: block; width: 22px; height: 22px;position: absolute; left: 0; top: 50%; margin-top: -11px; background: url("../img/check.png") 50% 50% no-repeat; background-size: 100% 100%; }
#sec1 .right .inner p span{ padding: 20px 30px; border-radius: 12px; font-size: 14px;}
}

@media screen and (max-width: 840px) {
#sec1 { height: auto;  min-height: 450px; max-height:none; padding-left: 0;}
#sec1 .left{ width: 100%; height: 100vh; position: relative;}
#sec1 .left .inner { width: 80%;}
#sec1 .left .inner .svg{ height: 75vh; top: 5%; width: 100%; left: 0%;}
.opBody #sec1 .left .inner .svg{ width: 100%; left: 0%;}
/**/
#sec1 .left .inner h1, 
.opBody #sec1 .left .inner h1{ margin:10% 0 0 10%;}
#sec1 .left .inner h1 > span.h1-2{ padding-top: 0;}

#sec1 .left .inner h1 > span.h1-1 span{ font-size: 6.8vw;}
#sec1 .left .inner h1 > span.h1-2 span{ font-size: 5.0vw; letter-spacing: 0;}
#sec1 .left .inner h1 > span.h1-3 span{ font-size: 7.8vw;}
#sec1 .left .inner h1 > span.h1-4{ display:inline-block; background: rgba(0,0,0,0); border-radius: 30px; padding: 6px 20px 3px; transition: 1.2s;}
#sec1 .left .inner h1 > span.h1-4.setView{ background: rgba(0,0,0,0.5);}
#sec1 .left .inner h1 > span.h1-4 span{ font-size: 20px; color: #fff; font-weight: 900; letter-spacing: 0;}
/**/
#sec1 .right{ width: 100%; height:auto; display: block; padding-top: 30px; background: #06c755; padding: 20px; border-top: none;}
#sec1 .right .inner{ height: auto; border-radius: 20px; background: #fff;}
}

@media screen and (max-width: 640px) {

#sec1 .left .inner h1, 
.opBody #sec1 .left .inner h1{ margin:20% 0 0 15%;}
#sec1 .left .inner h1 > span.h1-1{ line-height: 1.2em;}
#sec1 .left .inner h1 > span.h1-1 span{ font-size: 9.8vw;}
#sec1 .left .inner h1 > span.h1-2 span{ font-size: 8.0vw;}
#sec1 .left .inner h1 > span.h1-3 span{ font-size: 12.2vw;}

/**/
#sec1 .right .inner .title { margin-top: 10px;}
	#sec1 .right .inner .title h2{padding:25px 30px 20px;}
#sec1 .right .inner .title h2, 
#sec1 .right .inner .title h2 span { font-size: 5.0vw;}
#sec1 .right .inner ul li{ font-size: 4.8vw;}
#sec1 .right .inner p span{font-size: 16px;}
	


#sec1 .right .inner p{ width: 90%; padding: 100px 0 20px; margin: 0 0 0 10%;}
#sec1 .right .inner p span{ display: inline-block; padding: 15px; background: url("../img/come2.png") 50% 50% no-repeat #06c755; border-radius: 40px 0 40px 40px; opacity: 0.9;}
	
#sec1 .right .inner p::after{ width: 100%; height: 100%; position: absolute; right: 0; bottom: 0; content: ""; background:url("../img/mv_p.png") 100% 100% no-repeat; background-size: contain; opacity: 0.4; z-index: 1; mix-blend-mode: multiply;}

}



/*===================
 #sec2
=====================*/
#sec2 { width: 100%; position: relative; z-index: 2; padding: 90px 0 0px; text-align: center; background: #fff;}
#sec2 .contMin { width: 1100px; padding: 0 0 0 550px; display:inline-block; margin: 0 auto;}
#sec2 .contMin * { text-align: left; color: #06c755;}

#sec2 .contMin h2 { margin-bottom: 20px;}
#sec2 .contMin h2 span{ font-size: 40px; font-weight: bold;}
#sec2 .contMin p{ font-size: 19px; margin-bottom: 30px;}
#sec2 .contMin p b{ font-weight: bold;}

@media screen and (max-width: 1160px) {
#sec2 .contMin { width: 40%; padding: 0; margin: 0 5% 0 50%;}
}
@media screen and (max-width: 1000px) {
#sec2 .contMin { margin: 0 2% 0 55%;}
}
@media screen and (max-width: 840px) {
#sec2{ padding: 70px 0 40px;}
#sec2 .contMin { margin: 0;  width: 100%; display:flex; flex-direction: column; justify-content: center; align-items: center;}
#sec2 .contMin h2, 
#sec2 .contMin p{ width: 400px;}
#sec2 .contMin p > br{ display: none;}
#sec2 .svgBk-ue.w, 
#sec2 .svgBk-shita.w{ display: none;}
}
@media screen and (max-width: 640px) {
#sec2{ padding: 50px 0;}
#sec2 .contMin h2, 
#sec2 .contMin p{ width: 300px;}
#sec2 .contMin h2 span{ font-size: 30px; }
#sec2 .contMin p{ font-size: 16px; color: #000;}
#sec2 .contMin p b{color: #000;}
}



/*===================
 #sec3
=====================*/
#sec3 { width: 100%; position: relative; z-index: 2; text-align: center; background: #eee;}
#sec3 .smp{ display: none;}
#sec3 .svgBk-ue{ margin-bottom: 30px;}
#sec3 .svgBk-shita{ margin-top: 30px;}
#sec3 .contMin { width: 1100px; padding: 0 0 0 550px; display:inline-block; margin: 0 auto;}
#sec3 .contMin * { text-align: left; color: #06c755;}

#sec3 .contMin h3 { display: block; margin-bottom: 20px;}
#sec3 .contMin h3 span{ display: block; font-size: 20px; font-weight: bold;}
#sec3 .contMin h3 b{ display: block; font-size: 40px; font-weight: bold; line-height: 1.2em;}
#sec3 .contMin ul{}
#sec3 .contMin ul li{ position: relative; display: block; line-height: 1.2em; padding: 15px 20px 15px 48px; font-size: 24px; border-radius: 6px; color: #444; cursor: pointer; transition: 0.4s; margin: 5px 0;}
#sec3 .contMin ul li:hover{ background: #fff; box-shadow: 0 0 0 1px #06c755 inset; }
#sec3 .contMin ul li span{ width: 30px; height: 30px; position: absolute; left: 10px; top: 15px; background: #444; color: #fff; text-align: center; line-height: 30px; border-radius: 100%; font-size: 14px; font-weight: bold;}

#sec3 .contMin ul li.view{ background: #06c755; color: #fff;}
#sec3 .contMin ul li.view span{ background: #fff; color:#06c755;}
/**/
@media screen and (max-width: 1160px) {
#sec3 .contMin { width: 45%; padding: 0; margin: 0 5% 0 50%;}
}
@media screen and (max-width: 1000px) {
#sec3 .contMin h3 span{ font-size: 18px;}
#sec3 .contMin h3 b{ font-size: 32px;}
#sec3 .contMin ul li{ font-size: 18px; padding: 15px 20px 15px 42px;}
#sec3 .contMin ul li span{ width: 22px; height: 22px; line-height: 22px; top: 13px;}
#sec3 .svgBk-shita{ margin-bottom: -7px;}
}

@media screen and (max-width: 840px) {
#sec3 { background: none;}
#sec3 .svgBk-ue, 
#sec3 .svgBk-shita, 
#sec3 .contMin { display: none;}
#sec3 .smp{ display: block; width: 100%; padding-top: 40px; border-radius: 50px 50px 0 0; background: #06c755; text-align: center;}
#sec3 .smp img{ width: 100%; height: auto; max-width: 600px;}
}



/*===================
 #sec4
=====================*/

#sec4 { width: 100%; position: relative; z-index: 2; text-align: center; background: #06c755;}
#sec4 .smp{ display: none;}

#sec4 .svgBk-ue{ margin-bottom: 30px;}
#sec4 .svgBk-shita{ margin-top: 30px;}
#sec4 .contMin { width: 1100px; padding: 0 0 0 550px; display:inline-block; margin: 0 auto;}
#sec4 .contMin * { text-align: left; color: #fff;}

#sec4 .contMin h3 { display: block; margin-bottom: 20px;}
#sec4 .contMin h3 span{ display: block; font-size: 20px; font-weight: bold;}
#sec4 .contMin h3 b{ display: block; font-size: 40px; font-weight: bold; line-height: 1.2em;}
#sec4 .contMin ul{}
#sec4 .contMin ul li{ position: relative; display: block; line-height: 1.2em; padding: 15px 20px 15px 48px; font-size: 24px; border-radius: 6px; color: #fff; cursor: pointer; transition: 0.4s; margin: 5px 0;}
#sec4 .contMin ul li:hover{ background: rgba(255,255,255,0.4); }
#sec4 .contMin ul li span{ width: 30px; height: 30px; position: absolute; left: 10px; top: 15px; background: #fff; color: #06c755; text-align: center; line-height: 30px; border-radius: 100%; font-size: 14px; font-weight: bold;}

#sec4 .contMin ul li.view{ background: #fff; color: #06c755;}
#sec4 .contMin ul li.view span{ background: #06c755; color:#fff;}

@media screen and (max-width: 1160px) {
#sec4 .contMin { width: 45%; padding: 0; margin: 0 5% 0 50%;}
}

@media screen and (max-width: 1000px) {
#sec4 .svgBk-shita{ margin-bottom: -7px;}

#sec4 .contMin h3 span{ font-size: 18px;}
#sec4 .contMin ul li{ font-size: 18px; padding: 15px 20px 15px 42px;}
#sec4 .contMin ul li span{ width: 22px; height: 22px; line-height: 22px; top: 13px;}
}


@media screen and (max-width: 840px) {
#sec4 { background: none;}
#sec4 .svgBk-ue, 
#sec4 .svgBk-shita, 
#sec4 .contMin { display: none;}
#sec4 .smp{ display: block; width: 100%; background: #06c755;}
#sec4 .smp img{ width: 100%; height: auto; max-width: 600px;}
}

/*===================
 #sec5
=====================*/
#sec5 { width: 100%; position: relative; z-index: 2; text-align: center; background: #fff; margin-bottom: 50px;}
#sec5 .svgBk-ue{ margin-bottom: 30px;}
#sec5 .svgBk-shita{ margin-top: 30px;}
#sec5 .contMin { width: 1100px; display: inline-block; margin: 0 auto;}
#sec5 .contMin .inner{ width: 100%; padding: 0 0 0 550px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}

#sec5 .contMin .inner h3{ width: 100%; font-size: 26px; color: #06c755; font-weight:bold; text-align: center; margin: 20px 0;}
#sec5 .contMin .inner .box{ width: 45%; background: #06c755; display:block; border-radius: 16px; padding: 20px;}

#sec5 .contMin .inner .box h4{ color: #fff; text-align: center; display: block; padding: 0px 0 20px; font-size: 20px; font-weight: bold;}
#sec5 .contMin .inner .box h4 span{ display: block; width: 110px; height: 110px; margin: auto; padding: 10px; border-radius: 100%; background: #fff; margin-bottom: 20px;}

#sec5 .contMin .inner .box h4 span img{ width: 100%; height: auto;}

#sec5 .contMin .inner .box p{ color: #fff; display: block; min-height: 200px; text-align: left;}

@media screen and (max-width: 1160px) {
#sec5 .contMin { width: 93%; padding: 0; margin: 0 5% 0 2%;}
#sec5 .contMin .inner{ padding: 0 0 0 45%;}
}
@media screen and (max-width: 1000px) {
#sec5 .contMin .inner{ padding: 0 0 0 48%;}
#sec5 .contMin .inner .box{ width: 48%;}
}
@media screen and (max-width: 840px) {
#sec5 .svgBk-ue{ display: none;}
#sec5 { background: #06c755; margin-bottom: 0;}

#sec5 .contMin { width: 96%; padding: 40px 3%; margin: 0 2%; background: #fff; border-radius: 30px;}
#sec5 .contMin .inner{ padding: 0; margin-bottom: 30px;}
#sec5 .contMin .inner .box p{ min-height: 0px; margin-bottom: 30px;}
}
@media screen and (max-width: 600px) {
#sec5 .contMin .inner{ display: block;}
#sec5 .contMin .inner .box{ width: 100%; margin: 20px 0;}
#sec5 .contMin .inner .box h4 br{ display: none;}
}


/*===================
 #sec6
=====================*/
#sec6 { width: 100%; height: 50vh; position: relative; z-index: 3; text-align: center; background: #06c755;}


/*===================
 #sec7
=====================*/
#sec7 { width: 100%; height: 100vh; position: relative; z-index: 3; text-align: center; background: #06c755;}
#sec7 .spPage{ display: none;}

@media screen and (max-width: 840px) {
#sec6 { height: 1px;}
#sec7 { height: auto;}
#sec7 .spPage{ display: block; padding-top: 30vh;}
#sec7 .spPage .inner{ max-width:420px;  display: inline-block; background:url("../img/smp2.png") 0 0 no-repeat; background-size: 100% auto; padding: 80px 50px 80px ;}
#sec7 .spPage .inner h2{ display: block; margin-bottom: 30px;}
#sec7 .spPage .inner h2 span{ display: inline-block; padding: 5px 40px 3px; color: #fff; border-radius: 10px; background: #06c755; margin: 0 auto; font-weight: bold; letter-spacing: 0;}
#sec7 .spPage .inner p{ text-align: left; line-height: 1.8em; margin-bottom: 30px;}
#sec7 .spPage .inner p span {display: block; text-align: center; margin-top: 30px;}
#sec7 .spPage .inner p b{ display: block; font-weight: bold;}
}

@media screen and (max-width: 600px) {
#sec7 .spPage .inner{ width: 80%; margin: 0 10%; padding: 70px 40px 60px ;}
#sec7 .spPage .inner h2 span{ font-size: 15px; padding: 5px 15px 3px;}
#sec7 .spPage .inner p{ font-size: 14px; line-height: 1.6em;}

}