/*===========================
  reset Css
===========================*/
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; font-size:100%; vertical-align:baseline; background:transparent; }
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { display:block; }
ul ,li{ list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; border:0; font-size:100%; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/*===========================
  base
===========================*/
body{
	font:14px "Hiragino Kaku Gothic Pro", Meiryo, Osaka, san-self;
	background:#ffffff;
	color:#ffffff;
	line-height:1.6;
}
a:link,
a:visited{ text-decoration:none; color:#2a8cf1; }
a:hover,
a:active{ text-decoration:underline; color:#2a8cf1; }
a img:hover{ filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }

	/*  siteFooter
	===========================*/
	#siteFooter{ width:940px; margin:0 auto; padding:30px 0;}
	#siteFooter ul{ text-align:center; }
	#siteFooter ul li{ display:inline-block; padding:0 10px; }
	#siteFooter ul li:first-child{ border-left:none; }
	#siteFooter ul li a{ color:#ffffff; }

/*===========================
  LPtop
===========================*/
h2.headTit2{display: inline-block; font-size:32px; font-weight:normal; text-align:center; color:#ffffff; }
.titleArea p#free{display: inline; font-size:20px; font-weight:normal;background: red;color:#ffffff; padding: 2px; margin-left: 20px;}

/* #featureArea div.featureAreaCon, */
/* #functionArea, */
/* #priceArea .priceAreaCon,
#qaArea, */
.infomation{ padding:90px 0; }
.topText {
	padding: 15px 0 0 0;
	margin-bottom: -30px;
	color: #f00;
	text-align: center;
}
	/* kvArea
	===========================*/
	#kvArea{ height:628px;max-width: 1024px;margin:0 auto;background:url(../img/firstSection_bg.png) 50% 0 / cover no-repeat; color:#ffffff; }
	#kvArea .kvAreaCon{ width:100%; margin:0 auto; padding:18px 0 0; text-align:center; position:relative; }
	#kvArea p.logo{ width:288px; height:85px; background:url(../img/logo_slooooth.png) 50% 0 / cover no-repeat; margin: 20px auto 0; text-indent:-9999px;}
	#kvArea h1{font-size:24px; font-weight:bold; color:#000; line-height:1.2; font-family: Hiragino Maru Gothic ProN; margin-bottom: 28px;}
	#kvArea p{ font-size: 18px; color: #000; font-weight: normal; margin-bottom: 20px;}
	#kvArea .font--small{ font-size: 20px; color: #000; font-weight: lighter; margin: 12px 0 0;}
	#kvArea .kvAreaCon .popUpWindow{width: 490px; height: 616px; background-color: #f6ef7c; position: absolute; left: 0; top: 0; border:#000 6px solid;}
	#kvArea .kvAreaCon .popUpWindow .textPart_bloglink{width: 450px; border: 3px double #000; margin: 20px auto 0;}
	#kvArea .kvAreaCon .popUpWindow .textPart_bloglink p{text-decoration: underline; color: #0645AD; padding: 10px 0; margin: 0;}
	#kvArea .kvAreaCon .popUpWindow .textPart{width: 460px; margin: 40px auto 28px;}
	#kvArea .kvAreaCon .popUpWindow .underline{text-decoration: underline; color: #000;}
	#kvArea button{width: 300px; height: 54px;border: #000 solid 1px; border-radius: 5px; background:url(../img/button_bg.png) 50% 0 / cover no-repeat;color: #B01A1A; font-size: 20px;}
	#kvArea .picBg--sp{display: none;}
	
	
	/* mainPart
	===========================*/

	#mainPart{max-width: 1024px; margin: 0 auto; background:url(../img/mainPart_bg.png) 50% 0 / cover no-repeat;}

	/* featureArea
	===========================*/
	#featureArea{ max-width: 1024px; height: auto; margin: 0 auto;}
	#featureArea div.featureAreaCon{ width:100% }
	#featureArea .featureAreaCon ul{ text-align: center;display: flex; flex-direction: column;}
	
	#featureArea .featureAreaCon ul li{width:100%; height: auto; margin-bottom:40px; }
	/* #featureArea .featureAreaCon ul li.second{width: 100%; height: auto;  margin: 0;} */

	#featureArea .titleArea{max-width: 1024px; height: 56px; margin-bottom: 20px;line-height: 56px;}

	#featureArea .featureAreaCon ul li.first .titleArea{background: #5FB01A;}
	#featureArea .featureAreaCon ul li.second .titleArea{background: #1A68B0;}
	#featureArea .featureAreaCon ul li.third .titleArea{background: #6F1AB0;}
	#featureArea .featureAreaCon ul li.forth .titleArea{background: #f6ef7c;}
	#featureArea .featureAreaCon ul li.forth .titleArea h2{color: #333;}




	#featureArea .featureAreaCon ul li div.img{width: 100%; height:auto; box-sizing: border-box; padding: 0 32px;margin: 0 auto; } 
	#featureArea .featureAreaCon ul li.first img{border-radius: 5px; border:#5FB01A 5px solid; box-sizing: border-box;}
	#featureArea .featureAreaCon ul li.second img{border-radius: 5px; border:#1A68B0 5px solid; box-sizing: border-box;}
	#featureArea .featureAreaCon ul li.third img{border-radius: 5px; border:#6F1AB0 5px solid; box-sizing: border-box;}
	#featureArea .featureAreaCon ul li.forth img{border-radius: 5px; border:#f6ef7c 5px solid; box-sizing: border-box;}


	#featureArea .featureAreaCon ul li div.img--sp{display: none;}



	/* 	labelArea
	===========================*/

	#labelArea nav{ width: 100%; height: 66px; text-align:left;  background:#DC589C; font-size: 20px; text-decoration: underline; line-height: 66px;}
	#labelArea nav ul{display: flex;  flex-direction: row; justify-content: center; margin: 0 auto;}
	#labelArea nav ul li{  margin:0 60px; height: auto ;}
	#labelArea nav ul li a{ text-decoration:none; color: #ffffff;}
	#labelArea nav ul li a:hover,
	#labelArea nav ul li a:active{ filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }
	


/*-- SP ONLY --*/
@media screen and (max-width: 768px){
	img{ width:100%; }
	h2.headTit2{ display:block;font-size:16px; padding-top:10px;height: auto;}
	.titleArea p#free{font-size: 10px; right: 100px; display: inline; margin-bottom: 10px; margin-left: 0;}
	
	#kvArea .kvAreaCon,
	.cvArea,
	#featureArea div.featureAreaCon,
	#functionArea,
	#priceArea .priceAreaCon,
	#flowArea,
	#qaArea,
	#siteFooter,
	.infomation{ width:100%; margin:0 auto;;}

	.topText {
		margin-bottom: -10px;
	}
	
	/* #featureArea div.featureAreaCon,
	#functionArea,
	#priceArea .priceAreaCon,
	#flowArea,
	#qaArea{ padding:40px 0; } */


	#kvArea{ min-width:300px; height: auto; background-position:center bottom;background:none;}
	#kvArea .kvAreaCon{position: static; padding: 0; overflow: hidden;}
	#kvArea .kvAreaCon .popUpWindow{ width: 100%; height: auto; margin: 0 auto; min-width:300px; position: static;box-sizing: border-box;}
	#kvArea .kvAreaCon .popUpWindow .textPart_bloglink{width:97%;}
	#kvArea .kvAreaCon .popUpWindow .textPart{width: 98%; min-width: 280px; margin: 40px auto 20px;}
	#kvArea h1{font-size:19px; }
	#kvArea p{ font-size: 14px;}
	#kvArea button{width: 280px; height: 54px;font-size: 18px;}
	#kvArea .font--small{ margin: 12px 0; font-size: 14px;}

	#kvArea .picBg--sp{display: block; width: 100%; height: auto;}



	#mainPart{width: 100%; min-width: 320px; margin: -10px auto 0; background:url(../img/mainPart_bg-sp.png) 50% 0 / cover no-repeat; overflow: hidden;}

	#featureArea{ height: auto;}
	#featureArea .titleArea{height:auto; line-height: normal;}

	#featureArea .featureAreaCon ul li{margin-bottom:20px; }

	#featureArea .featureAreaCon ul li div.titleArea{padding: 5px 0 12px;}


	#featureArea .featureAreaCon ul li div.img{ display: none; } 
	#featureArea .featureAreaCon ul li div.img--sp{display: block; width: 98%;  margin: 0 auto 20px; max-width: 500px; box-sizing: border-box;}


	#labelArea nav{ width: 100%; height: auto; text-align:left;  background:#DC589C; font-size: 14px; text-decoration: underline; line-height:150% ;}
	#labelArea nav ul{display: flex;  flex-direction: column; justify-content: center; margin: 0 auto;}
	#labelArea nav ul li{  margin:5px 30px; height: auto ;}


	
}

/*-- PC ONLY --*/
@media screen and (min-width: 769px){
	body{ min-width:940px; }
	.cvArea p img{ width:328px; height:auto; }
	#priceArea dl dd img{ width:356px; height:auto; }
}