/* =========================================================
 common
========================================================= */

/*gmofooter*/
.gmoGroupFooter_inner{ max-width: 1020px; margin:0 auto; }
@media only screen and (min-width: 980px){  .gmoGroupFooter_inner{ padding:15px 0 0!important; }  }


/* ---------------------------------------------------------
 ページタイトル
--------------------------------------------------------- */
#page_title { position: relative; z-index: 10; }
#nexyz #page_title,
#qtnet #page_title{ background: url("../../nexyz/imgs/main_bg.png") no-repeat center top; background-size: cover; height: auto;}


/* ---------------------------------------------------------
 見出し
--------------------------------------------------------- */

/* heading_lv2
--------------------------------------------------------- */
.heading_lv2 {
	margin: -140px 0 50px;
	padding: 140px 0 0;
	text-align: right;
}
.heading_lv2_txt {
	font-size: 19px;
	color: #222;
	padding: 10px 10px 10px 20px;
	border-left: 3px #070707 solid;
	text-align: left;
}
.heading_lv2_time {
	font-size: 12px;
	color: #999;
}
@media only screen and (max-width: 1060px){
	.heading_lv2 {
		padding-top: 170px;
		margin-top: -170px;
	}
}
@media only screen and (max-width: 640px){
	.heading_lv2 {
		line-height: 1.5;
		margin-bottom: 25px;
		padding-top: 80px;
		margin-top: -80px;
	}
	.heading_lv2_txt { padding: 15px 10px 10px 15px;}
}

/* heading_lv3
--------------------------------------------------------- */
.heading_lv3 {
	font-size: 18px;
	line-height: 20px;
	overflow: hidden;
	margin: -140px 0 30px;
	padding: 140px 0 0;
}
.heading_lv3_txt {
	padding: 0 0 0 25px;
	color: #555;
	font-weight: bold;
	line-height: 1.6;
}
.heading_lv3 span {
	display: inline-block;
	position: relative;
}
.heading_lv3 span:before {
	content: "";
	position: absolute;
	border-top: 1px solid #24d2ef;
	top: 13px;
	left: -25px;
	height: 4px;
	width: 18px;
}
@media only screen and (max-width: 1060px){
	.heading_lv3 {
		padding-top: 170px;
		margin-top: -170px;
	}
}
@media only screen and (max-width: 640px){
	.heading_lv3 {
		padding-top: 80px;
		margin-top: -80px;
	}
}

/* heading_lv4
--------------------------------------------------------- */
.heading_lv4 {
	padding: 7px 15px 6px 15px;
	margin: 0 0 15px;
	background: #f3f3f3;
}
.heading_lv4_txt {
	font-size: 14px;
	color: #222;
	font-weight: bold;
}

/* ---------------------------------------------------------
 clearfix
--------------------------------------------------------- */
.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}

/* ---------------------------------------------------------
 テーブル
--------------------------------------------------------- */
.cell_left { text-align: left;}
.contents_box .cell_size_s,
.contents_box .cell_size_s { width: 120px;}

/* table_layout_001
--------------------------------------------------------- */
.table_layout_001 {
	background: #fff;
	word-break: break-all;
}
.table_layout_001 table {
	border-collapse: collapse;
	border: 1px solid #d6d6d6;
	width: 100%;
}
.table_layout_001 th,
.table_layout_001 td {
	border: 1px solid #d6d6d6;
	padding: 12px 12px;
	vertical-align: top;
	line-height: 1.4;
	font-size: 14px;
}
.table_layout_001 th {
	font-weight: normal;
	background: #0d3978;
	color: #fff;
	text-align: center;
	border: 1px solid #2d5792;
	position: relative;
	font-size: 14px;
}
.table_layout_001 .table_bgcolor {
	width: 30%;
	background: #f6f8fb;
}
@media only screen and (max-width: 640px){
	.table_layout_001 th,
	.table_layout_001 td {
		padding: 8px 5px;
	}
}

/* table_style_001（色違い）
--------------------------------------------------------- */
.table_style_001 table { border: none;}
.table_style_001 th {
	background: #1d1d1d;
	border: 1px solid #514b4c;
	font-size: 14px;
}
.table_style_001 td {
	text-align: center;
	vertical-align: middle;
}
.table_style_001 .table_style_001_th {
	background: #f2314d;
	border: #f2314d 1px solid;
}

.table_bgcolor_001 { background: #fff9f9;}
.table_style_001 .table_bgcolor {
	width: auto;
	text-align: left;
}

/* table_layout_002
--------------------------------------------------------- */
.table_layout_002 {
	background: #fff;
	word-break: break-all;
}
.table_layout_002 table {
	border-collapse: collapse;
	border: 1px solid #d6d6d6;
	width: 100%;
}
.table_layout_002 th,
.table_layout_002 td {
	border: 1px solid #d6d6d6;
	padding: 10px 12px 8px;
	vertical-align: top;
}
.table_layout_002 th {
	width: 30%;
	font-weight: normal;
	text-align: left;
	background: #f6f8fb;
	font-size: 14px;
}
@media only screen and (max-width: 640px){
	.table_layout_002 th,
	.table_layout_002 td {
		padding: 12px 5px;
	}
}

/* ---------------------------------------------------------
 リスト
--------------------------------------------------------- */
/* indent_list
--------------------------------------------------------- */
.indent_list li {
	margin-left: 1.4em;
	text-indent: -1.4em;
	margin-bottom: 20px;
}
.indent_list li:last-child { margin-bottom: 0;}

/* num_list
--------------------------------------------------------- */
.num_list li {
	margin-left: 1.4em;
	text-indent: -1.4em;
	margin-bottom: 20px;
}
.num_list li:last-child { margin-bottom: 0;}

/* border_list
--------------------------------------------------------- */
.border_list { margin-bottom: 15px;}
.border_list:last-child { margin-bottom: 0;}
.border_list li {
	margin-bottom: 8px;
	padding: 0 0 0 25px;
	line-height: 1.7;
}
.border_list li:last-child { margin-bottom: 0;}
.border_list li span {
	display: inline-block;
	position: relative;
}
.border_list li span:before {
	content: "";
	position: absolute;
	border-top: 1px solid #aeaeae;
	top: 11px;
	left: -25px;
	height: 4px;
	width: 18px;
}

/* ---------------------------------------------------------
 ページ内リンク
--------------------------------------------------------- */
.site_link_list {
	overflow: hidden;
	border: 5px #f0f0f0 solid;
	padding: 20px 0 15px 20px;
}
.site_link_list li {
	float: left;
	margin: 0 20px 5px 0;
	font-size: 14px;
}
@media only screen and (max-width: 640px){
	.site_link_list {
		padding: 15px 0 10px 15px;
	}
	.site_link_list li {
		float: left;
		margin: 0 15px 5px 0;
	}
}

/* ---------------------------------------------------------
 アンカー
--------------------------------------------------------- */
.link_anchor {
	margin-top: -140px;
	padding-top: 140px;
}

/* ---------------------------------------------------------
 注意事項
--------------------------------------------------------- */
/* notes
--------------------------------------------------------- */
.notes {
	font-size: 13px;
	margin: 20px 0 0;
	overflow: hidden;
	clear: both;
}
.notes p { margin: 20px 0 0;}
.notes_bg {
	background: #f3f3f3;
	padding: 20px;
	margin: 25px 0 0;
}
.notes_bg02 {
	background: #f0f7f8;
	padding: 20px;
	margin: 40px 0 0;
}
.notes_bg03 {
	background: #fcf5f5;
	padding: 20px;
	margin: 40px 0 0;
}
.notes_title {
	font-size: 13px;
	border-bottom: 1px #888 dotted;
	padding: 0 0 5px;
	margin: 0 0 10px;
}
.notes_box p { margin: 0 0 6px;}
.notes_box p:last-child { margin: 0;}

.dot{ padding:0 0 5px 16px; position: relative; font-size: 14px;}
.dot:before{ content: "●"; display: block; position: absolute; top: 3px; left: 2px; font-size: 9px;}

/* notes_list
--------------------------------------------------------- */
.notes_list {
	font-size: 13px;
	margin: 20px 0 5px;
	overflow: hidden;
	clear: both;
	text-align: left;
}
.notes_list li {
	margin-left: 1.1em;
	text-indent: -1.1em;
}
.notes_num_list {margin: 20px 0 0;}
.notes_num_list li {
	margin-left: 2.2em;
	text-indent: -2.2em;
}

/* ---------------------------------------------------------
 キャプション
--------------------------------------------------------- */
.caption {
	font-size: 12px;
	margin: 5px 0 0;
	text-align: right;
	color: #6a6a6a;
}

/* ---------------------------------------------------------
 改行
--------------------------------------------------------- */

/* pctb_br
--------------------------------------------------------- */
@media only screen and (max-width: 1020px){
	.pctb_br { display: none;}
}

/* sp_br
--------------------------------------------------------- */
.sp_br {display: none;}
@media only screen and (max-width: 640px){
	.sp_br { display: block;}
}

/* ---------------------------------------------------------
 テキスト
--------------------------------------------------------- */
.txt_color_gray { color: #8a8989;}
.txt_color_gray_size_s {
	font-size: 13px;
	color: #8a8989;
}
.txt_color_gray_size_ss {
	font-size: 12px;
	color: #8a8989;
}
.txt_color_red { color: #f01212!important;}
a.txt_color_red:hover { color: #ff4a81;}
.txt_color_point { color: #55ac59;}
.txt_right { text-align: right;}

/* ---------------------------------------------------------
 リンク
--------------------------------------------------------- */
.link_list {
	overflow: hidden;
	margin: 10px 0 0;
}
.link_list a { font-size: 13px;}

/* ---------------------------------------------------------
 ボタン
--------------------------------------------------------- */

/* button
--------------------------------------------------------- */
.button {
	width: 100%;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	outline: none;
	padding: 10px 0 10px 20px;
	border-radius: 17px;
	background: url(/common/imgs/icon_signup.png) 13px 50% no-repeat #00b88b;
	background-size: 14px;
	line-height: 1.4;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button:hover {
	background: url(/common/imgs/icon_signup.png) 13px 50% no-repeat #0cd9e0;
	background-size: 14px;
	text-decoration: none;
	color: #fff;
}

/* page_btn
--------------------------------------------------------- */
.page_btn {
	max-width: 400px;
	padding: 60px 0 0;
	margin: 0 auto;
	text-align: center;
	font-size: 15px;
	letter-spacing: 2px;
}
.page_btn a {
	max-width: 400px;
	display: block;
	padding: 16px 0;
	border-left:1px solid #4ae59e;
	border-right:1px solid #7dd3f5;
	background: url(/common/imgs/icon_arrow01.png) 20px 50% no-repeat;
	background-size: 10px;
	color: #0cc7c5;
	text-decoration: none;
	-webkit-transition: all .5s ease-out;
}
.page_btn:before,
.page_btn:after {
	content:"";
	display:block;
	height:1px;
	width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#4ae59e), to(#7dd3f5));
	background:-moz-linear-gradient(left, #4ae59e, #7dd3f5);
	background:linear-gradient(left, #4ae59e, #7dd3f5);
	-webkit-transition: all .5s ease-out;
}
.page_btn a:hover{
	color: #fff;
	background:url(/common/imgs/icon_arrow02.png) 20px 50% no-repeat,-webkit-gradient(linear, left top, right bottom, from(#4ae59e), to(#7dd3f5));
	background:url(/common/imgs/icon_arrow02.png) 20px 50% no-repeat,-moz-linear-gradient(left, #4ae59e, #7dd3f5);
	background:url(/common/imgs/icon_arrow02.png) 20px 50% no-repeat,linear-gradient(left, #4ae59e, #7dd3f5);
	background-size: 10px 16px, 100% 100%;
	-webkit-transition: all .5s ease-out;
}

@media only screen and (max-width: 640px){
	.page_btn { padding: 30px 10px 0;}
}

/* ---------------------------------------------------------
 タブ
--------------------------------------------------------- */
.tab_menu_list {
	width: 100%;
	overflow: hidden;
	display: table;
}
.tab_menu_list li {
	width: 50%;
	display: table-cell;
	border-bottom: 1px #d6d6d6 solid;
	background: #f5f3f3;
	text-align: center;
}
.tab_menu_list li a {
	color: #4e4e4e;
	text-decoration: none;
	display: block;
	padding: 10px 15px;
}
.tab_menu_list li.active {
	background: #fff;
	border-top: 2px #00b8e6 solid;
	border-bottom: 1px #fff solid;
	border-right: 1px #d6d6d6 solid;
	border-left: 1px #d6d6d6 solid;
	position: relative;
}
.tab_menu_list li.active a { color: #00b1dd;}
.tab_contents_block {
	overflow: hidden;
	padding: 40px 0 0;
}
.tab_contents_box { width: 100%;}

/* ---------------------------------------------------------
 SNS
--------------------------------------------------------- */
.sns_block { padding: 7px 0 2px 10px;}
.sns_block_top { margin: -30px 0 30px;}
.sns_block_bottom { margin: 40px 0 0;}
.sns_list { text-align: right;}
.sns_list li {
	display: inline-block;
	margin-left: 4px
}
.sns_facebook {
	position: relative;
	top: -7px;
}
.sns_google_plus {
	position: relative;
	top: 2px;
}

/* ---------------------------------------------------------
 汎用
--------------------------------------------------------- */

/* リンク
--------------------------------------------------------- */
.sub_txt_link { font-size: 14px;}


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/

body{ top: 0!important;}
.db{ display: block;}
br.pc{ display: none;}

.mt00{ margin-top:0!important;}
.mt03{ margin-top:3px!important;}

.mt05{ margin-top:5px!important;}
.mt08{ margin-top:8px!important;}
.mt10{ margin-top:10px!important;}
.mt15{ margin-top:15px!important;}
.mt20{ margin-top:20px!important;}
.mt25{ margin-top:25px!important;}
.mt30{ margin-top:30px!important;}
.mt35{ margin-top:35px!important;}
.mt40{ margin-top:40px!important;}
.mt50{ margin-top:50px!important;}
.mt60{ margin-top:60px!important;}

.mt-10{ margin-top:-10px!important;}

.mb05{ margin-bottom:5px!important;}
.mb10{ margin-bottom:10px!important;}
.mb20{ margin-bottom:20px!important;}

.pb00{ padding-bottom:0!important;}


/* font
**********************************************************************/
.font12{ font-size: 12px!important;}
.font13{ font-size: 13px!important;}
.font15{ font-size: 15px!important;}
.font16{ font-size: 16px!important;}
.font18{ font-size: 18px!important;}
.font20{ font-size: 20px!important;}
.font30{ font-size: 30px!important;}
.font45{ font-size: 45px!important;}

.bold{ font-weight: bold;}

.lih2{ line-height: 2;}
.lih23{ line-height: 2.3;}
.letter02{ letter-spacing: 2px;}


/* breadcrumb
**********************************************************************/
.breadcrumb { max-width: 1040px; margin: 0 auto; padding: 10px; font-size: 12px; }

.breadcrumbList { overflow: hidden;}
.breadcrumbList li { float: left; color: #bdbdbd; }
.breadcrumbList li a { color: #fff; text-decoration: none;}

#nexyz .breadcrumbList li,
#qtnet .breadcrumbList li{ color: #b3f6f8; }


/* tit
**********************************************************************/

/*h1*/
.heading_lv1 { height: auto; text-align: center; padding: 5px 0 50px; letter-spacing: 2px; }
.heading_lv1_txt{ font-size: 26px; color: #fff; line-height: 1.4; margin: 0 0 10px; }
.heading_lv1_subtxt { font-size: 13px; color: #b3dee9; }

#nexyz .heading_lv1,
#qtnet .heading_lv1{ max-width: 1020px; padding:30px 20px 70px; margin:0 auto; position: relative;}
#nexyz .heading_lv1_txt,
#qtnet .heading_lv1_txt{ font-size: 35px;}

#nexyz .heading_lv2,
#qtnet .heading_lv2{ margin-bottom: 32px;}


/* planList
**********************************************************************/
.planList{ display: table; width: 100%; max-width: 640px; margin:30px auto; color: #fff;}
.planList > li{ padding:28px 40px 30px; border-radius: 5px; box-shadow:0 0 9px 4px #ededed;}
.planList h3{ font-size: 30px; line-height: 1.6; text-align: center;}
.planList h3 span{ display: block; font-size: 14px; color: #e4faff;}

.planList > li:nth-child(1){
	background-image: -moz-linear-gradient( 90deg, rgb(0,168,204) 0%, rgb(15,195,202) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(0,168,204) 0%, rgb(15,195,202) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(0,168,204) 0%, rgb(15,195,202) 100%);
}
.planList > li:nth-child(2){
	background-image: -moz-linear-gradient( 90deg, rgb(9,119,212) 0%, rgb(53,167,232) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(9,119,212) 0%, rgb(53,167,232) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(9,119,212) 0%, rgb(53,167,232) 100%);
	margin:20px 0 0;
}

.planList .plus{ position: relative; overflow: hidden;}
.planList .plus:before{ content: "有料プラン"; display: block; background: #016ab3; padding:2px 6px 2px 8px; position: absolute; top: 0; right: 0; font-size: 11px; color: #fff;}
.planList .plus h3 .price{ display: inline-block;}
.planList .plus h3 .month{ margin:-3px 0 -4px; font-size: 10px; line-height: 1; }

.planList > li:nth-child(1) .detail{ border-top: #6adfe6 1px solid; }
.planList > li:nth-child(2) .detail{ border-top: #7dc9eb 1px solid; }

.planList .detail{ margin:18px 0 0; padding:12px 0 0;}
.planList .detail li{ margin:12px 0 0; overflow: hidden; font-size: 14px; }
.planList .detail li > span{ float: right; font-weight: bold; text-align: right;}
.planList .detail li > span > span{ font-size: 12px;}

.planList > li > a{ display: block; width: 110px; height: 30px; padding:3px 0 0 34px; margin:24px auto 0; position: relative; font-size: 13px; color: #fff; text-decoration: none; border: #fff 1px solid; border-radius: 15px;}
.planList > li > a:before{ content: ""; display: block; background: url("../imgs/icon_signup.png") no-repeat; background-size: contain; width: 11px; height: 13px; position: absolute; top: 7px; left: 16px;}


/* useflow
**********************************************************************/
#useflow .number{ padding:0 0 0 22px; position: relative;}
#useflow .number .count{ display: block; position: absolute; top: 0; left: 0;}
#useflow .number .txt_color_gray{ display: block; margin:6px 0 0; font-size: 13px; font-weight: normal;}


/* beforehand */
.beforehand{ margin:0 0 46px;}
.beforehand .txt > div{ background: #f9f9f9; padding:18px 20px 16px;}

.beforehand .number .txt_color_gray{ padding:0 0 0 1.2em; position: relative;}
.beforehand .number .txt_color_gray a{ color: #8a8989;}
.beforehand .number .txt_color_gray:before{ content: "※"; display: block; position: absolute; top: 0; left: 0;}

.beforehand .txt > div p{ margin:0; font-weight: bold;}
.beforehand .txt > div p a{ color: #333;}
.beforehand .txt > div > span{ display: block; font-size: 13px; letter-spacing: 0;}
.beforehand > img{ display: none; max-width: 107px; margin:24px 20px 0 0;}


/* flowList */
.flowList{ max-width: 770px; margin:0 auto;}
.flowList > li{ clear: both; margin:56px 0 0; position: relative; border: #00bac1 2px solid; box-shadow:0 0 9px 4px #f4f4f4;}
.flowList > li:first-child{ margin:34px 0 0;}

.flowList > li:before{ content: ""; display: block; width: 0; height: 0; position: absolute; top: -36px; left: 50%; border: 15px solid transparent; border-top: 15px solid #e8e8e8; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.flowList > li:first-child:before{ display: none;}

.flowList li h4{ background: #00bac1; padding:11px 10px 9px; font-size: 17px; color: #fff; text-align: center;}

.flowList li .floatBox{ display: table; width: 100%; padding:20px 20px 30px; }
.flowList li .txt p a{ font-weight: bold;}
.flowList li .txt a{ color: #333;}
.flowList li .txt p .txt_color_gray{ font-size: 13px; }

.flowList li img{ display: block; max-width: 176px; margin:30px auto 0;}

.flowList li .list li{ padding:0 0 0 16px; position: relative;}
.flowList li .list li:before{ content: "・"; display: block; position: absolute; top: 0; left: 0; }


/*readBox*/
#useflow .readBox{ margin:45px 0 0;}
#useflow .readBox h4{ padding:0 0 8px; margin:0 0 14px; font-size: 14px; font-weight: bold; color: #666; border-bottom: #cacaca 1px solid; letter-spacing: 2px;}
#useflow .readBox .attList li{ padding:0 0 0 1.2em; position: relative; font-size: 13px; color: #666;}
#useflow .readBox .attList li:before{ content: "※"; display: block; position: absolute; top: 0; left: 0;}


/*contact*/
#useflow .contact{ background: #f5f5f5; padding:28px 20px 30px; margin:40px 0 0;}
#useflow .contact .formTxt{ margin:18px 0 0;}
#useflow .contact a{ word-break:break-all;}
#useflow .contact img{ display: block; max-width: 166px; margin:20px auto 0; }


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

	/* tit
	**********************************************************************/
	/*h1*/
	.heading_lv1 { padding: 30px 0 44px; }
	
}

@media print, screen and (min-width:820px){

	/* planList
	**********************************************************************/
	.planList{ margin:40px auto 70px; }
	.planList > li{ width: 46.87%;  float: left;}
	.planList > li:nth-child(2){ margin:0; float: right;}

}

/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){
	br.pc{ display: block;}


	/* breadcrumb
	**********************************************************************/
	.breadcrumbList li a:hover{ text-decoration: underline;}


	/* tit
	**********************************************************************/
	/*h1*/
	.heading_lv1_txt { font-size: 30px; line-height: 2; }
	.heading_lv1_subtxt { font-size: 14px; }

	#nexyz .heading_lv1,
	#qtnet .heading_lv1{ padding:56px 20px 0; }


	/* planList
  **********************************************************************/
	.planList > li a{ transition: color 0.3s ease-in-out 0s,background 0.3s ease-in-out 0s;}
	.planList > li a:hover{ background: #fff; color: #333; }
	.planList > li > a:hover:before{ background: url("../imgs/icon_signup02.png") no-repeat; background-size: contain;}


	/* useflow
  **********************************************************************/
	#useflow .floatBox{ overflow: hidden;}
	#useflow .floatBox .txt{ width: 75%; float: left;}
	#useflow .floatBox img{ width: 25%; float: right;}

	.beforehand > img{ display: block; }
	.beforehand .txt p a:hover{ text-decoration: none; }

	.beforehand .number .txt_color_gray a:hover{ text-decoration: none!important;}

	.flowList li .floatBox{ padding:28px 30px 26px; }
	.flowList li .txt{ width: 71%;}

	.flowList li img{ width: 29%; }
	.flowList li:nth-child(1) img{ margin:30px 0 0;}
	.flowList li:nth-child(2) img{ margin:40px 0 0;}
	.flowList li:nth-child(3) img{ margin:8px 0 0;}

	/*readBox*/
	#useflow .readBox{ margin:70px 0 0;}

	/*contact*/
	#useflow .contact{ padding:45px 40px 40px; margin:50px 0 0;}

	#useflow .contact p{ font-size: 17px;}
	#useflow .contact .formTxt{ margin:18px 0 0; font-size: 15px;}
	#useflow .contact img{ margin: 0;}

}


@media print, screen and (min-width:1020px) {

	/* tit
	**********************************************************************/
	/*h1*/
	#nexyz .heading_lv1,
	#qtnet .heading_lv1{ padding:56px 0 0; }
}