@charset "utf-8";
#side_nav ul li a{
	padding-left: 60px;
}
#side_nav ul li:first-child a{
	background: #fff url(../img/icon_nav_home.png) no-repeat 15px 15px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(2) a{
	background: #fff url(../img/icon_nav_point.png) no-repeat 15px 27px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(3) a{
	background: #fff url(../img/icon_nav_webcreate.png) no-repeat 15px 15px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(4) a{
	background: #fff url(../img/icon_nav_afterservice.png) no-repeat 15px 27px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(5) a{
	background: #fff url(../img/icon_nav_price.png) no-repeat 15px 15px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(6) a{
	background: #fff url(../img/icon_nav_qa.png) no-repeat 15px 15px scroll;
	background-size: 30px 30px;
}
#side_nav ul li:nth-child(7) a{
	background: #fff url(../img/icon_nav_contact_exp.png) no-repeat 15px 15px scroll;
	background-size: 30px 30px;
}

/*-------- common ----------*/
section.inner_content > div{
	position: relative;
	padding-top: 110px;
}
section.effect h3,
section.effect h4,
section.effect h3 span.num,
section.effect h3 i,
section.effect .layout_with_chart_l,
section.effect .layout_with_chart_c{
	transition: .8s;
}
section.inner_content div h3{
	position: absolute;
	top: 50px;
	left: 0;
	height: auto;
	padding-bottom: 0;
	background-size: 15px 15px;
	font-size: 20px;
	text-align:left;
	line-height: 1;
	letter-spacing: -.40em; 
}
section.inner_content div h3 span{
	display: inline-block;
	height:30px;
	box-sizing: border-box;
	letter-spacing: 0;
	line-height: 30px;
	vertical-align: top;
}
section.inner_content div h3 span.num{
	width: 60px;
	background: #999;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	font-size: 12px;
	text-align: center;
	color: #fff	;
}
section.inner_content div h3 span.txt_title{
	padding: 0 20px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border: solid 1px #999;
	font-size: 12px;
}
section.inner_content div h4{
	font-size: 24px;
	padding-bottom: 30px;
	font-weight:normal;
	text-align:center;
}
section.inner_content div h4 > span{
	display: inline-block;
	text-indent: -7777px;
}
section.inner_content div i{
	font-style: normal;
	letter-spacing: 0;
}
span.marker{
	display: inline;
	margin-top: 2px;
	padding: 0 5px;
	background: #efea3a;
	text-indent: 0;
}
span.with_indent{
	display: inline-block;
	text-indent: 14px;
}
.wiht_img_right{
	position: relative;
	margin-top: 30px;
	padding-right: 430px;
}
.wiht_img_right figure{
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
}
.layout_with_chart_l{
	margin-top: 40px;
	display: table;
	width: 100%;
}
.layout_with_chart_l div{
	display: table-cell;
	vertical-align: top;
}
.layout_with_chart_l p{
	display: table-cell;
	width: 500px;
	padding-right: 30px;
	line-height:1.8;
	vertical-align: top;
}
/*-------- main ----------*/
#main_visual{
	height: 750px;
	background: url(../img/bg_gradation.png) repeat-x 0 0 scroll;
}
#main_visual > div{
	width: 980px;
	padding: 0;
}
#top_visual{
	position:relative;
	width: 980px;
	height: 100&;
	padding: 0;
	margin: 0 auto;
}
#main_visual h1{
	width: 100%;
	padding: 30px 0;
	text-align: center;
}
#main_visual h1 a{
	display: block;
	width: 217px;
	height: 13px;
	margin: 0 auto;
	background: url(../img/logo_h1.png) repeat 0 0 scroll;
}
#main_visual h1 span,
#main_visual h2 span{
	display: inline-block;
	text-indent: -7777px;
}
#main_visual h1 a:hover{
	opacity: 0.7;
}
#main_visual h2{
	display: block;
	width: 572px;
	height: 110px;
	margin: 60px auto 0;
	background: url(../img/logo_h2.png) repeat 0 0 scroll;
}
#main_visual figure{
	margin-top: 40px;
	text-align: center;
}
#main_visual ul{
	position: absolute;
	left: 50%;
	bottom: 30px;
	width: 812px;
	margin-left: -406px;
	letter-spacing: -.40em;
}
#main_visual li{
	display: inline-block;
	width: 198px;
	height: 60px;
	margin: 0 5px 5px 0;
	padding: 10px 0 0 60px;
	background: url(../img/bg_mainvisual_list01.png) repeat 0 0 scroll;
	box-sizing: border-box;
	vertical-align: top;
	letter-spacing: normal;
	line-height: 20 px;
	color:#fff;
}
#main_visual li:nth-child(4n){
	margin-right: 0;
	padding-top: 0;
	line-height: 60px;
}
#nav_scroll{
	position: absolute;
	bottom: -130px;
	left: 50%;
	margin-left: -45px;
	opacity: 0;
}

/*-------- wp_point ----------*/

#wp_point{
	height: 938px;
	background: url(../img/wp_point_bg.png) no-repeat center 0 scroll;
}
#wp_point h4{
	height:24px;
	background: url(../img/title_h3_block02.png) no-repeat center 0 scroll;
}

#wp_point > div{
	width: 960px;
}


#wp_point div ul{
	margin-top: 35px;
	letter-spacing: -.40em; 
}
#wp_point div ul li{
	position: relative;
	display: inline-block;
	height:240px;
	width: 300px;
	margin-right: 15px;
	margin-bottom: 15px;
	padding: 20px;
	box-sizing:border-box;
	background: rgba(255,255,255,0.5);
	box-shadow:0 0 3px 0 rgba(0,0,0,0.35);
	transform : translate(0, 50px);
    transition : all 500ms;
	letter-spacing: normal;
	line-height: 1.4;
	vertical-align:top;
}
#wp_point div ul li:before{
	position: absolute;
	top:0;
	left: 0;
	width:50px;
	height: 50px;
	background: url(../img/icon_point_before.png) no-repeat 0 0 scroll;
	content: "";
}
#wp_point div ul li figure{
	text-align: center;
	padding: 12px 0;
}
#wp_point div ul li h5{
	margin:0;
	padding:10px 0;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}
/*-------- introduction_effects ----------*/
#introduction_effects{
	position: relative;
	background: #f1f1f1;
}
#introduction_effects div{
}
#introduction_effects h4{
	height:57px;
	background: url(../img/title_h3_introduction_effects.png) no-repeat center 0 scroll;
}
#introduction_effects h4.works{
	height:24px;
	margin-top:40px;
	background: url(../img/title_h3_block02_2.png) no-repeat center 0 scroll;
}
#introduction_effects p.txt_large{
	font-size:18px;
}
#introduction_effects p{
	margin-top: 50px;
}
#introduction_effects  figure{
	margin-top: 30px;
	padding-bottom: 20px;
	text-align:center;
}
/*-------- after_service ----------*/
#after_service{
	
}
#after_service h4{
	height:24px;
	background: url(../img/title_h3_after_serive.png) no-repeat center 0 scroll;
}
#after_service  p{
	margin-top: 30px;
	text-align: center;
}
#after_service ul{
}
#after_service li{
	padding: 0 0 15px 25px;
	background: url(../img/icon_check.png) no-repeat 0 8px scroll;
	background-size: 21px 15px;
	font-size:18px;
	color: #0883b2;
}
#after_service li .notation{
	position: relative;
	display: block;
	padding-left: 12px;
	font-size: 10px;
	color:#E40065;
}
#after_service li .notation:before{
	position: absolute;
	top: 0;
	left: 0;
	content:"※";
}
/*-------- price_plan ----------*/
#price_plan{
	background: url(../img/bg_gradation.png) repeat-x 0 0 scroll;
	color:#fff;
}
#price_plan div h3 span.num{
	background: #fff;
	color: #0ebeb0;
}
#price_plan div h3 span.txt_title{
	border: solid 1px #fff;
	font-size: 12px;
	color: #fff;
}
#price_plan h4{
	height:24px;
	background: url(../img/title_h3_priceplan.png) no-repeat center 0 scroll;
}
#price_plan p.lead{
	margin-top: 30px;
	text-align: center;
}
#price_plan div.price_list{
	display: table;
	margin: 30px auto 0;
	border: solid 1px #fff;
}
#price_plan div.price_list > p{
	display: table-cell;
	width: 400px;
	padding: 30px 0;
	text-align: center;
	vertical-align: middle;
	line-height:1;
	
}
#price_plan div.price_list > p .text{
	display: inline-block;
	background: rgba( 255, 255, 255, 0.8);
	margin-right: 15px;
	padding: 5px 20px;
	color: #0883b2;
	font-size: 12px;
	vertical-align: middle;
}
#price_plan div.price_list > p .price{
	display: inline-block;
	font-size: 36px;
	vertical-align: middle;
	
}
#price_plan div.price_list > div{
	display: table-cell;
	width: 500px;
	padding: 15px 30px;
	box-sizing: border-box;
	border-left: solid 1px #fff;
	background: rgba( 255, 255, 255, 0.8);
	color: #0883b2;
	font-size: 18px;
}
#price_plan div.price_list > div li{
	position: relative;
	padding-left: 20px;
	line-height: 1.4;
}
#price_plan div.price_list > div li:before{
	position: absolute;
	top: 0;
	left:0;
	content:"・";
}
#price_plan div.price_list > div .notation{
	display: inline-block;
	padding-left: 5px;
	font-size: 10px;
	color:#E40065;
}
.notation_list{
	width: 900px;
	margin: 5px auto 0;
}
.notation_list li{
	position: relative;
	font-size: 10px;
}
/*-------- q_a ----------*/
#q_a{
	background: #f1f1f1;
}

/*-------- contact_exp ----------*/
#contact_exp{
	
}
#contact_exp .flow_chart{
	padding-top: 60px;
}
/*-------- contact_form ----------*/
#contact_form{
	border-top: solid 15px #1db3a5;
}
#contact_form h3{
	display: block;
	width: 100%;
	letter-spacing: normal;
	text-align: center;
	font-size: 24px;
}