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


body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h1{
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
}
h2{
	text-align: center;
	line-height: 1.3;
	font-weight: bold;
}
h3{
	font-size: 24px;
	line-height: 1.4;
}
p{
	margin: 0 auto;
	height: auto;
	text-align: left;
	line-height: 1.5;
}
p.lead{
	width: 860px;
	text-align: left;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
}
p a:link{color: #fff; text-decoration:none;}
p a:visited{color: #fff;}
p a:hover {color:#ffffff; background:rgba(0, 0, 204, 0.5);}

.floatL{float: left;}
.floatR{float: right;}

.mT10{margin-top: 10px;}
.mT15{margin-top: 15px;}
.mT20{margin-top: 20px;}
.mT25{margin-top: 25px;}

.mR10{margin-right: 10px;}
.mR15{margin-right: 15px;}
.mR20{margin-right: 20px;}
.mR25{margin-right: 25px;}

.mL10{margin-left: 10px;}
.mL15{margin-left: 15px;}
.mL20{margin-left: 20px;}
.mL25{margin-left: 25px;}

.mB10{margin-bottom: 10px;}
.mB15{margin-bottom: 15px;}
.mB20{margin-bottom: 20px;}
.mB25{margin-bottom: 25px;}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 */
.clearfix {
    zoom:1;
}

#sect-top {
	width: 100%;
	height: auto;
	background-color: #FFF;
	padding-top: 50px;
}
#sect-top h1{
	width:92%;
	padding:0 4%;
	font-size: 72px;
	font-weight: bold;
	color:  #089615;
	margin-bottom: 20px;
}
.img-top{
	text-align: center;
	margin-bottom: 20px;
}
.lead-top{
	text-align: center;
	font-size: 20px;
	font-family: 見出ゴMB1,"Midashi Go MB1";
	color: #808080;
}
.phonewrap{
	width: 100%;
	height: auto;
}
.phonewrap .phone{
	width: 840px;
	margin: 50px auto 0;
	vertical-align: bottom;
}
.phonewrap .phone img{
	display: block;
}
#sect-top .second-top{
	width: 100%;
	padding: 90px 0;
	background-color: #fed149;
	color:  #333333;
}
#sect-top .second-top h2{
	font-size: 34px;
	padding-bottom: 15px;
}
#sect-tech{
	width: 100%;
	color: #FFF;
}
#sect-tech h2{
	font-size: 34px;
	padding-bottom: 30px;
	color:  #ffffff;
}
.wrap-tech{
	width: 100%;
	height: 1420px;
	background: #262627 url(../img/tech_bg.png) repeat 0 0;
	background-size:cover;
	padding-top: 140px;
}
.leadwrap{
	padding-bottom:  60px;
}
.content-tech{
	width: 850px;
	margin: 0 auto;
}
.content-tech .picbox{
	width: 100%;
	margin-bottom: 120px;
}
.content-tech .pic01{
	width: 45%;
	height: auto;
	float: right;
}
.content-tech .caption01{
	width: 53%;
	height: auto;
	display: inline-block;
}
.content-tech .caption01.mt24{
	margin-top: 24px;
}
.content-tech .pic02{
	width: 45%;
	height: auto;
	float: left;
}
.content-tech .pic02 img{
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.content-tech .pic02 img:hover{
	color:#fff;
	opacity:0.7;
	filter:alpha(opacity=70); /* for IE8 */
	background:none!important;
	zoom:1; /* for IE7 */
	display:inline-block; /* for IE8 */
}
.content-tech .caption02{
	width: 53%;
	padding-left: 2%;
	height: auto;
	display: inline-block;
	margin-top: 24px;
}
.content-tech .pic03 img{
	vertical-align: bottom;
	margin-top: 15px;
}
.content-tech h3{
	display: block;
    margin-top: 20px;
	padding-bottom: 16px;
}
.content-tech h3.mt10{
	margin-top: 0;
}
.content-tech p{
	display: inline;
	font-size: 0.9em;
}
.content-tech p.link{
	font-size:11px;
}
#sect-how{
	width: 1080px;
	margin: 0 auto;
	background: #fff;
	color: #333333;
    padding-top: 140px
}
#sect-how h2{
	font-size: 50px;
	padding-bottom: 60px;
}
.content-how{
	width: 1080px;
	height: auto;
    margin: 0 auto 100px;
    position: static;
}
.pictbox{
	width: 90%;
	height: 640px;
	margin: auto;
}
.content-how .pd34{
	padding: 34px 0;
}
.fst01{
	position: relative;
	top: 0px;
	left: 0px;
	display: inline;
}
.fst02{
	position: relative;
	top: -200px;
    left: 20px;
    display: inline;
}
.scd01{
	position: relative;
	top: 0px;
    left: 360px;
    display: inline;
}
.scd01 img{
	width: 60%;
}
.scd02{
	position: relative;
	top: -110px;
	left: -640px;
    display: inline;
}
.thd01{
	position: relative;
	top: -40px;
	left: 0px;
    display: inline;
}
.thd02{
	position: relative;
	top: -620px;
    left: 362px;
    display: inline;
}
.fth01{
	position: relative;
	top: 0px;
    left: 500px;
    display: inline;
}
.fth02{
	position: relative;
	top: -230px;
	left: -296px;
    display: inline;
}
#sect-app{
	width: 100%;
	height: auto;
	background: #fed149;
	color: #333333;
    padding-top: 140px
}
.h2wrap{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 50px;
}
#sect-app h2{
	font-size: 50px;
	padding: 10px 2%;
}

.appDlArea{
	width: 860px;
	margin: 0 auto;
	padding-bottom: 100px;
}
.appDlArea{
	width: 860px;
	margin: 0 auto;
	padding-bottom: 20px;
}
.appDlArea .flex{
	float: left;
	padding-right:60px;
}
.appDlArea .flex.end{
	padding-right:0px;
}
.content-app{
	width: 860px;
	margin: 0 auto;
	padding-bottom: 100px;
}
.content-app .left,.right{
	width: 50%;
    float: left;
}
.content-app .left img{
    width: 261px;
    height: auto;
    display: block;
    margin: 30px auto;
    vertical-align: bottom;
}
.content-app .left img.btn{
    width: 150px;
    height: auto;
    display: block;
    margin: 0px auto;
    vertical-align: bottom;
}
.apple_btn{
	width:150px;
	margin:0 auto;
}

.content-app .right img{
    width: 275px;
    height: auto;
    display: block;
    margin: 30px auto;
    vertical-align: bottom;
}
.content-app .right img.btn{
    width: 150px;
    height: auto;
    display: block;
    margin: 0px auto;
    vertical-align: bottom;
}

footer{
	width: 100%;
    background: #1f2020;
    padding: 30px 0 20px 0;
    text-align: center;
    display: table;
}
footer .footerwrap{
	width:960px;
	margin: 0 auto;
}
footer img{
	width: 146px;
	margin: 0 auto;
}
footer p.copy{
	font-size: 12px;
    color: #a1a4a4;
    padding-top: 20px;
    text-align: center;
}









/********** ここからスマホ **********/

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

h3{
	font-size: 20px;
}
p{
	width: 100%;
	margin: 0 auto;
	height: auto;
	text-align: left;
	font-size: 0.8em;
	line-height: 1.4em;
}
p.lead{
	width: 90%;
	text-align: left;
	margin: 0 auto;
	font-size: 0.9em;
	line-height: 1.5em;
}
p a:link{color: #fff; background: rgba(73,254,221,0.2);}
p a:visited{color: #fff;}
p a:hover {color:#ffffff; background: rgba(73,254,221,0.2);}



#sect-top {
	padding-top: 30px;
}
#sect-top .wrap-top{
	width: 100%;
	margin: 0 auto;
}
#sect-top h1{
	width:92%;
	padding:0 4%;
	font-size: 34px;
	font-weight: bold;
	color:  #089615;
	margin-bottom: 20px;
	letter-spacing: 0.15em;
}
.img-top img{
	width: 180px;
    height: auto;
}
.lead-top{
	line-height: 1.2;
	font-size: 1.3em;
	color: #808080;
}
.phonewrap{
	width: 100%;
	height: auto;
}
.phonewrap .phone{
	width: 90%;
	margin: 30px auto 0;
	vertical-align: bottom;
}
.phonewrap .phone img{
	width: 90%;
	height: auto;
	display: block;
	margin: auto;
}
#sect-top .second-top{
	width: 100%;
	padding: 30px 0;
}
#sect-top .second-top h2{
	width: 90%;
	margin: 0 auto;
	font-size: 24px;
	letter-spacing: 0.1em;
}
#sect-haikei{
	width: 100%;
	padding: 70px 0 60px;
}
#sect-haikei h2{
	width: 90%;
	margin: 0 auto;
	font-size: 24px;
}
#sect-tech h2{
	width: 90%;
	margin: 0 auto;
	font-size: 24px;
	letter-spacing: 0.1em;
}
.wrap-tech{
	width: 100%;
	height: auto;
	background: #262627 url(../img/tech_spbg.png) repeat 0 0;
	background-size:cover;
	padding-top: 80px;
	padding-bottom: 10px;
}
.leadwrap{
	padding-bottom: 60px;
}
.content-tech{
	width: 90%;
	margin: 0 auto;
}
.content-tech .pic01{
	width:  100%;
	/*height: auto;*/
	float: none;
}
.content-tech .caption01{
	width:  100%;
	display: block;
	padding-left: 0;
}
.content-tech .caption01.mt24{
	margin-top: 0;
}
.content-tech .pic02{
	width:  100%;
	margin: 0 auto;
	float: none;
}
	.content-tech .pic03 img{
	width:  100%;
	height: auto;
	float: none;
}
.content-tech .caption02{
	width:  100%;
	display: block;
	padding-left: 0;
	margin-top: 0;
}
.content-tech .picbox{
	margin-bottom: 15%;
}
.content-tech h3{
	display: block;
    margin-top: 10px;
	padding-bottom: 14px;
	text-align: center;
}
.content-tech h3.mt20{
	margin-top: 20px;
}
.content-tech p{
	display: inline;
	font-size: 0.9em;
}
.content-tech p.link{
	font-size: 12px;
	word-break: break-all;
}
/*.content-tech .iframewrap{
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%;
	position: relative;
}*/
/*.content-tech .iframewrap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}*/
#sect-how{
	width: 100%;
    padding-top: 80px;
}
#sect-how h2{
	width: 90%;
	margin: 0 auto;
	font-size: 28px;
}
.content-how{
	width: 90%;
	height: auto;
    margin: 0 auto;
    position: static;
}
.pictbox{
	width: 100%;
	height: auto;
	margin-bottom: 70px;
}
.content-how .pd34{
	padding: 0;
}
.pictbox img{
	max-width: 100%;
    margin: 0 auto 40px;
    display: block;
}
.pictbox div{
	text-align: center;
}

.fst01,.fst02,.scd01,.scd02,.thd01,.thd02,.fth01,.fth02{
	position: static;

}
.fst02,.scd02,.thd02,.fth02{
	margin-top: 10px;
}
.fst01 img{
	width: 568px;
	height: auto;
}
.fst02 img{
	width:  300px;
	height: auto;
}
.scd01 img{
	width: 578px;
	height: auto;
}
.scd02 img{
	width: 360px;
	height: auto;
	margin-top: 40px;
}
.thd01 img{
	width: 573px;
	height: auto;
}
.thd02 img{
	width: 330px;
	height: auto;
}
.fth01 img{
	width: 569px;
	height: auto;
}
.fth02 img{
	width: 280px;
	height: auto;
}
#sect-app{
	width: 100%;
	background: #fed149;
	color: #333333;
    padding-top: 50px
}
.h2wrap{
	width: 90%;
	margin: 0 auto;
	margin-bottom: 20px;
}
#sect-app h2{
    margin: 0 auto;
    font-size: 28px;
}
.leadwrap{
	padding-bottom:  40px;
}
.content-app{
	width: 90%;
	margin: -30px auto;
}
.content-app .left,.right{
	width: 100%;
	display: block;
	text-align: center;
	float: none;
}
.content-app .left img{
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    vertical-align: bottom;
}
.content-app .right img{
    width: 70%;
    height: auto;
    display: block;
    margin: 50px auto 10px;
    vertical-align: bottom;
}

.appDlArea{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 60px;
}
.appDlArea dl.flex{
	width: 100%;
	text-align: center;
	padding-right:0px;
	margin: 10px auto;
}
.appDlArea dl.flex dt img.t01 {
	width: 126px;
}
.appDlArea dl.flex dt img.t02 {
	width: 165px;
}
.appDlArea dl.flex dt img.t03 {
	width: 148px;
}
.appDlArea dl.flex dd {
	width: 260px;
	margin:0 auto;
}
.appDlArea dl.flex dd p.apple_btn {
	float: left;
	width: 120px;
	margin:5px 5px;

	}
.appDlArea dl.flex dd p.apple_btn img.btn {
	width: 120px;
	display: block;
}
footer .footerwrap{
	width:100%;
}
footer img{
	width: 100px;
	height: auto;
	display: block;
}
footer p.copy{
	font-size: 10px;
    padding-top: 10px;
}
.youtube {
	display: block;
}
.youtube iframe {
	width: 100%;
}
.try-now-button {
	text-align: center;
	text-decoration: none;
	display: block;
	background-color: #38ad6f;
	color: #fff;border-radius: 34px;
	padding: 15px 0 8px;
	margin-top: 20px;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 0.1em;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.button-sub-text {
	text-align: center;
	font-size: 12px;
	padding-top: 4px;
}

}
/********** スマホここまで **********/