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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
/*header*/
.sheader{ background: #070707; width: 100%; height: 48px; padding:15px 20px 0; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1000;}
.sheader .logo{ margin:4px 0 0; padding:0; }
.sheader .logo img{ width: 100%; }

.sheader .livechat{ display: block; float: right; border-left: none;}
.sheader .livechat a{ background: url(/common/imgs/icon_livechat.png)no-repeat left center; background-size: 17px; height: auto; padding:0 0 0 28px;}

#container{ padding-top: 48px;}

/*main*/
.heading_lv1{ letter-spacing: 1px;}

.heading_lv1_txt{ line-height: 1.4;}
.heading_lv1_txt span{ display: block; margin:0 0 15px; font-size: 17px; color: #effeff; font-weight: normal; }

.heading_lv1 .btn{ display: block; width: 270px; height: 54px; padding: 9px 0 0; margin:26px auto 12px; font-size: 18px; color: #fff; text-align: center; text-decoration: none; letter-spacing: 0; border: #fff 2px solid; border-radius: 40px;}
.heading_lv1 p{ font-size: 13px; color: #cdfcfe; margin:6px 0 0; letter-spacing: 0;}


/* thanks
**********************************************************************/
#thanks{ overflow: hidden;}
#thanks .txt img{ display: block; width: 100%; max-width: 399px; margin:0 auto 38px; }
#thanks .txt p span{ display: block; margin:12px 0 0;}
#thanks > img{ display: block; width: 100%; max-width: 520px; margin:20px auto 0;}


/* feature
**********************************************************************/
#feature,
#useflow{ margin-top: 40px;}

#feature ul{ display: table; margin:30px 0 0; padding:0 20px; border: #e3e3e3 1px solid; border-radius: 4px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);}

#feature ul li{ padding:26px 20px 20px 50px; position: relative; border-top: #e3e3e3 1px solid;}
#feature ul li:nth-child(1){ border-top: none;}

#feature ul li:before{ content: ""; display: block; width: 30px; height: 30px; position: absolute; top: 26px; left: 6px;}
#feature ul li:nth-child(1):before{ background: url("../../qtnet/imgs/feature_img01.png"); background-size: cover;}
#feature ul li:nth-child(2):before{ background: url("../../qtnet/imgs/feature_img02.png"); background-size: cover;}
#feature ul li:nth-child(3):before{ background: url("../../qtnet/imgs/feature_img03.png"); background-size: cover;}
#feature ul li:nth-child(4):before{ background: url("../../qtnet/imgs/feature_img04.png"); background-size: cover;}

#feature ul li h3{ font-size: 17px; font-weight: bold;}
#feature ul li p{ margin:10px 0 0; font-size: 14px; color: #888;}


/* price
**********************************************************************/
#price{ margin-top: 50px;}


/* useflow
**********************************************************************/
#useflow .contact img{ max-width: 190px; }


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:769px) {
	.sheader{ top: 29px;}

	#container{ padding-top: 77px;}
}


/*************************************************************************************************************************
* 960px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:960px){

	.sheader .livechat a{ transition: opacity 0.3s ease-in-out 0s;}
	.sheader .livechat a:hover{ opacity:0.8;}

	#qtnet .heading_lv1{ padding-bottom: 76px;}

	.heading_lv1 .btn{ transition: background 0.3s ease-in-out 0s,color 0.3s ease-in-out 0s;}
	.heading_lv1 .btn:hover{ background: #fff; color: #00bac1;}


	/* thanks
	**********************************************************************/
	#thanks .txt { width: 45%; padding: 40px 0 0; float: left; }
	#thanks .txt img{ margin:0 0 38px;}
	#thanks > img { width: 55%; margin: 0; float: right; }


	/* feature
	**********************************************************************/
	#feature ul li{ width: 50%; padding:38px 50px 28px 50px; float: left; }
	#feature ul li:nth-child(-n+2){ border-top: none;}

	#feature ul li:before{ top: 36px; }


	/* price
	**********************************************************************/
	#price{ margin-top: 75px;}


	/* useflow
	**********************************************************************/
	.beforehand > img{ max-width: 143px; margin: 24px 40px 0 0;}

	#useflow .contact{ padding:45px 40px 30px;}
	#useflow .contact .txt{ width: 70%;}
	#useflow .contact img{ width: 30%; margin:0 40px 0 0; }


	/*************************************************************************************************************************
	* 1200px以上用の記述
	*************************************************************************************************************************/
	@media print, screen and (min-width:1200px) {

		/* feature
		**********************************************************************/
		#feature ul { padding: 0 40px; }
	}
}