@charset "utf-8";
/*===============================
 
	voice.css
 
================================*/




	/*
	次世代VOICE コミュニケーション事業
================================*/
#voice .title{
	position: relative;
	padding: 45px 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6ab00+1,ea5504+100 */
	background: #f6ab00; /* Old browsers */
	background: -moz-linear-gradient(left, #f6ab00 1%, #ea5504 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f6ab00 1%,#ea5504 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f6ab00 1%,#ea5504 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6ab00', endColorstr='#ea5504',GradientType=1 ); /* IE6-9 */
	text-align: center;
}
#voice .title h1{
	color: #fff;
	font-size: 190%;
	font-weight: 100;
}
#voice .title .bg_txt{
	position: absolute;
	top: -30px;
	right: 0;
	color: rgba(255,255,255,.14);
	font-size: 630%;
	font-weight: 100;
}

@media screen and (max-width : 768px) {
	#voice .title .bg_txt{
		top: 0;
		right: 0;
		line-height: 1;
	}
}
@media screen and (min-width : 769px) and (max-width : 965px) {
	#voice .title .bg_txt{
		font-size: 500%;
	}
}

/*会議通話システム=======================*/
#turbo .title .bg_txt{
	right: 410px;
}
@media screen and (min-width : 769px) and (max-width : 970px) {
	#turbo .title .bg_txt{
		right: auto;
		left: 0;
	}
}
@media screen and (max-width : 768px) {
	#turbo .title .bg_txt{
		top: 0;
		right: 0;
	}
}
/*================================*/
/*音声APIシステム=======================*/
#vis .title .bg_txt{
	right: 0;
}
@media screen and (min-width : 769px) and (max-width : 1010px) {
	#vis .title .bg_txt{
		font-size: 480%;
	}
}

/*================================*/
/*EC事業クラウド型業務支援システム=======================*/
#real .title .bg_txt{
	right: 680px;
}
@media screen and (min-width : 769px) and (max-width : 1150px) {
	#real .title .bg_txt{
		right: auto;
		left: 0;
	}
}
@media screen and (max-width : 768px) {
	#real .title .bg_txt{
		top: 0;
		right: 0;
	}
}
/*================================*/

.section .container{
	position: relative;
}
.section .bg_txt{
	position: absolute;
	top: -10px;
	left: 0;
	font-size: 800%;
	font-weight: 500;
	color: rgba(0,0,0,.08);
	margin: 0;
	line-height: 1.1;
	white-space: nowrap;
}
@media screen and (max-width : 1000px) {
	.section .bg_txt{
		left: 0;
	}
}
.section h3{
	color: #ED6C00;
}
.section.top{
	background: url('/img/voice/voice_main_bg.jpg') no-repeat center center;
	background-size: cover;
	padding: 90px 0 140px;
	position: relative;
}
.section.top .txt{
	max-width: 1130px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width : 1130px) {
	.section.top .txt{
		max-width: 100%;
		padding: 0 80px;
	}
}
.section.top .bg_txt{
	color: rgba(0,0,0,.05);
	line-height: 0.9;
	top: -90px;
	left: -170px;
}
@media screen and (min-width : 769px) and (max-width : 1480px) {
	.section.top .bg_txt{
		left: 0;
		width: 100%;
		white-space: pre-wrap;
		word-break: break-all;
	}
}
.section.top .logo{
	margin-bottom: 20px;
}
.section.top h2{
	font-size: 215%;
}
.section.top p{
	margin-top: 75px;
	line-height: 2.25;
}
/*会議通話システム=======================*/
#turbo .section.top{
	background: url('/img/voice/tb_bg.jpg') no-repeat center center;
	background-size: cover;
	padding: 90px 0 80px;
}
#turbo .section.top p{
	max-width: 600px;
}
@media screen and (max-width : 768px) {
	#turbo .section.top{
		padding: 60px 0;
	}
}
/*================================*/
/*音声APIシステム=======================*/
#vis .section.top{
	background: url('/img/voice/vis_bg.jpg') no-repeat center center;
	background-size: cover;
	padding: 100px 0 60px;
}
#vis .section.top p{
	max-width: 790px;
	margin-top: 50px;
}
#vis .section.top .bg_txt{
	top: -100px;
}
@media screen and (min-width : 769px) and (max-width : 1480px) {
	#vis .section.top .bg_txt{
		font-size: 540%;
	}
}
@media screen and (max-width : 768px) {
	#vis .section.top{
		padding: 60px 0;
	}
	#vis .section.top p{
		margin-top: 20px;
	}
	#vis .section.top .bg_txt{
		top: 0;
	}
}
/*================================*/
/*EC事業クラウド型業務支援システム=======================*/
#real .section.top{
	background: url('/img/voice/rt_bg.jpg') no-repeat center center;
	background-size: cover;
	padding: 95px 0 160px;
}
#real .section.top p{
	max-width: 790px;
	margin-top: 60px;
}
#real .section.top .bg_txt{
	top: -95px;
}
@media screen and (max-width : 768px) {
	#real .section.top{
		padding: 60px 0;
	}
	#real .section.top p{
		margin-top: 20px;
	}
	#real .section.top .bg_txt{
		top: 0;
	}
}
/*================================*/


@media screen and (max-width : 768px) {
	#voice .title h1{
		font-size: 160%;
		font-weight: 100;
	}
	#voice .title .bg_txt{
		top: 0;
		right: 0;
		font-size: 300%;
		width: 100%;
		word-wrap: break-word;
	}
	.section p{
		font-size: 90%;
	}
	.section .bg_txt{
		position: absolute;
		top: 0;
		font-size: 300%;
		width: 100%;
		word-wrap: break-word;
		white-space: inherit;
	}
	.section.top{
		padding: 60px 0;
	}
	.section.top .txt{
		margin: 0 20px;
		padding: 0;
		position: static;
	}
	.section.top .bg_txt{
		line-height: 1.1;
		top: 0;
		left: 0;
	}
	.section.top .logo{
		width: 60%;
	}
	.section.top h2{
		font-size: 140%;
	}
	.section.top p {
		margin-top: 20px;
		line-height: 1.7;
	}
}
/* 提供サービス
================================*/
#voice .section h3{
	text-align: center;
	font-size: 150%;
	font-weight: 600;
}
#voice .section.anc{
	margin-top: 70px;
}
#voice .section.anc .bg_txt{
	top: -80px;
	left: auto;
	right: -30px;
}
#voice .section .tile{
	width: calc(100% + 160px);
	margin-left: -80px;
	margin-top: 50px;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
}
@media screen and (max-width : 1160px) {
	.section .tile{
		width: calc(100% + 40px);
		margin-left: -20px;
	}
}
.section .tile li{
	width: calc(100% / 3);
	width: calc(99% / 3)\0;
	width: calc(99% / 3)\9;
	/*float: left;*/
	text-align: center;
	margin-bottom: 45px;
}
@media screen and (max-width : 880px) {
	.section .tile li{
		width: calc(100% / 2);
	}
}
.section .tile a{
	display: block;
}
.section .tile img{
	border-radius: 50%;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.2);
}
.section .tile p{
	font-size: 95%;
	line-height: 1.6;
	margin-top: 15px;
}
.section .tile span{
	display: block;
	font-weight: 500;
}
.section .tile p:after{
	font-family: FontAwesome;
	content: "\f107";
	display: block;
	font-size: 260%;
	font-weight: normal;
	line-height: 1;
	color: #ED6C00;
}
@media screen and (max-width : 540px) {
	.section.anc{
		margin-top: 0;
	}
	.section.anc .bg_txt{
		top: -40px;
		left: auto;
		right: -30px;
	}
	.section .tile li{
		width: 100%;
		padding: 0 20px;
		margin-bottom: 30px;
	}
	.section .tile img{
		display: inline-block;
		vertical-align: middle;
		width: 25%;
	}
	.section .tile p{
		display: inline-block;
		vertical-align: middle;
		width: 72%;
		font-size: 75%;
		line-height: 1.4;
		margin-top: 10px;
	}
	.section .tile span{
		font-size: 120%;
		font-weight: 500;
	}
	.section .tile p:after{
		font-family: FontAwesome;
		content: "\f107";
		display: block;
		font-size: 260%;
		font-weight: normal;
		line-height: 1;
		color: #ED6C00;
	}
}
/* サービス概要
================================*/
#voice .service_ov{
	padding-bottom: 0;
}
#voice .service_ov .bg_txt{
	font-size: 680%;
    top: -55px;
    left: 550px;
}

#voice .service_ov h3 {
    padding: 10px 0 60px;
}

@media screen and (min-width : 769px) and (max-width : 1230px) {
	#voice .section.service_ov .bg_txt{
		left: 0;
		width: 100%;
		line-height: 1;
		font-size: 700%;
		white-space: pre-wrap;
		word-break: break-all;
	}
}
#voice .section .service{
	padding: 100px 0;
	min-height: 460px;
}
#voice .section .service:nth-of-type(even){
	text-align: right;
}
#voice .section .service .logo{
	margin-bottom: 30px;
}
#voice .section .service h3{
	text-align: inherit;
	color: #ED6C00;
	font-size: 150%;
	margin-bottom: 20px;
}
#voice .section .service p{
	font-size: 95%;
	line-height: 1.6;
}
#voice .section .service .link_btn{
	margin-top: 30px;
}
#voice .section .service .link_btn a{
	font-size: 80%;
}
#anc_call-ivr{
	background: url('/img/voice/voice_ci_bg2.jpg') no-repeat -140px 0;
	background-size: cover;
	margin-top: 120px;
}
@media screen and (max-width : 768px) {
	#voice #anc_call-ivr{/*下層-SP*/
	background-size: 800%;
	}
	#top_service #anc_call-ivr{/*TOP-SP*/
	background-size: 550% !important;
	background-position: 0 0 !important;
	}
}

#anc_res-c{
	background: url('/img/voice/voice_rs_bg.jpg') no-repeat 0 center;
	background-size: cover;
}
#anc_biz-spk{
	background: url('/img/voice/voice_bz_bg.jpg') no-repeat center center;
	background-size: cover;
}
#anc_vis{
	background: url('/img/voice/voice_vis_bg.jpg') no-repeat center center;
	background-size: cover;
}
#anc_turbo-b{
	background: url('/img/voice/voice_tb_bg.jpg') no-repeat center center;
	background-size: cover;
}
#anc_real-t{
	background: url('/img/voice/voice_rt_bg.jpg') no-repeat center center;
	background-size: cover;
}
@media screen and (max-width : 768px) {
	#voice .section.service_ov{
		padding: 0;
	}
	#voice .section.service_ov .bg_txt{
		top: -40px;
		left: 0;
	}
	#voice .section .service{
		padding: 20px 0;
		min-height: 0;
	}
	#voice .section .service:nth-of-type(odd){
		text-align: left;
	}
	#voice .section .service .container{
		background-color: rgba(255,255,255,.8);
		padding: 20px;
	}
	#voice .section .service .logo{
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
	}
	#voice .section .service h3{
		font-size: 100%;
		margin-bottom: 15px;
		line-height: 1.6;
	}
	#voice .section .service p{
		font-size: 85%;
	}
	#voice .section .service .link_btn{
		margin-top: 20px;
		text-align: center;
	}
	#voice .section .service .link_btn a{
		font-size: 80%;
	}
	#anc_call-ivr{
		margin-top: 60px;
	}
}


	/*
	会議通話システム
================================*/
/*サービスの特長
================================*/
.section.t_merit{
	margin: 40px 0 0;
}
.section.t_merit .bg_txt{
	top: -70px;
	left: 240px;
}
.merit_block{
	margin-top: 80px;
}
.merit_block li{
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.2);
	padding: 25px 15px 140px;
	margin: 0 15px;
	float: left;
	text-align: center;
	position: relative;
}
#real .merit_block li{
	padding: 25px 2px 140px;
}
.merit_block li p{
	font-size: 95%;
	line-height: 1.6;
}
.merit_block li img{
	position: absolute;
	right: 0;
	left: 0;
	bottom: 25px;
}
.merit_block.col4{
	width: calc(100% + 30px);
	margin-left: -15px;
}
.merit_block.col4 li{
	width: calc((100% - 30px * 4)/ 4);
}
.merit_block.col3{
	width: calc(100% + 30px);
	margin-left: -15px;
}
.merit_block.col3 li{
	width: calc((100% - 110px * 3)/ 3);
	margin: 0 55px;
}

@media screen and (max-width : 768px) {
	.section.t_merit{
		margin: 0;
		padding: 60px 0 30px;
	}
	.section.t_merit .bg_txt{
		top: -40px;
		left: 0;
		right: 0;
		text-align: center;
	}
	.merit_block{
		margin-top: 50px;
	}
	.merit_block li{
		padding: 20px;
		margin: 0;
		float: none;
		text-align: left;
		margin-bottom: 30px;
	}
	#real .merit_block li{
		padding: 20px;
	}
	.merit_block li p{
		font-size: 90%;
	}
	.merit_block li img{
		position: static;
		float: left;
		width: 60px;
		margin-right: 10px;
	}
	.merit_block.col4{
		width: 100%;
		margin-left: 0;
	}
	.merit_block.col4 li{
		width: 100%;
	}
	.merit_block.col3{
		width: 100%;
		margin-left: 0;
	}
	.merit_block.col3 li{
		width: 100%;
		margin: 0 0 30px;
	}
}
/*活用事例
================================*/
.section.cases{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#FFFFFF+1,F2F2F2+100 */
	background: #F2F2F2; /* Old browsers */
	background: -moz-linear-gradient(left, #FFFFFF 1%, #F2F2F2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #FFFFFF 1%,#F2F2F2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #FFFFFF 1%,#F2F2F2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F2F2F2',GradientType=1 ); /* IE6-9 */
	padding: 120px 0 35px;
}
.section.cases .bg_txt{
	top: -70px;
	left: 270px;
}
@media screen and (min-width : 769px) and (max-width : 1040px) {
	.section.cases .bg_txt{
		left: 0;
	}
}
.section.cases ul{
	margin-top: 110px;
}
.section.cases li{
	background-color: #fff;
	border-radius: 150px;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.2);
	padding: 20px 80px 40px;
	margin-bottom: 65px;
	position: relative;
}
.section.cases .bg_num{
	position: absolute;
	right: 50px;
	top: -50px;
	color: rgba(246, 171, 0, 0.3);
	font-size: 370%;
	font-weight: 500;
}
.section.cases .bg_num span{
	font-size: 135%;
	margin: 0 5px;
}
.section.cases .logo{
	margin-bottom: 10px;
	min-height: 50px;
}
.section.cases h4{
	color: #ED6C00;
	font-size: 130%;
	font-weight: 600;
	margin-bottom: 10px;
}
.section.cases p,.section.cases .link_btn{
	display: inline-block;
	vertical-align: middle;
}
.section.cases p{
	font-size: 95%;
	line-height: 1.6;
	width: calc(100% - 134px);
	padding-right: 10%;
}
/*音声APIシステム=======================*/
#vis .section.cases p{
	padding-right: 2%;
}
/*=======================*/

.section.cases .link_btn{
	font-size: 80%;
}
@media screen and (max-width : 768px) {
	.section.cases{
		padding: 60px 0 30px;
	}
	.section.cases .bg_txt{
		top: -40px;
		left: auto;
	}
	.section.cases ul{
		margin-top: 50px;
	}
	.section.cases li{
		border-radius: 20px;
		padding: 40px 20px 20px;
		margin-bottom: 30px;
	}
	.section.cases .bg_num{
		right: 0;
		top: -20px;
		font-size: 240%;
	}
	.section.cases .bg_num span{
	}
	.section.cases .logo{
		margin-bottom: 15px;
		min-height: 0;
		max-height: 50px;
		text-align: center;
	}
	.section.cases h4{
		font-size: 100%;
		line-height: 1.6;
		margin-bottom: 15px;
	}
	.section.cases p,.section.cases .link_btn{
		display: block;
	}
	.section.cases p{
		font-size: 90%;
		width: 100%;
		padding-right: 0;
		margin-bottom: 15px;
	}
	.section.cases .link_btn{
		font-size: 80%;
		text-align: center;
	}
}
/*機能一覧
================================*/
.section.function{
	padding: 120px 0;
}
.section.function .bg_txt{
	top: -80px;
	left: 160px;
}
/*テーブル================================*/
.section.function .table{
	margin-top: 80px;
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
	width: calc((100% - 34px) / 2);
}
.section.function .table:last-of-type{
	margin-right: 0;
}
.section.function .table h4,.section.function .table p{
	display: inline-block;
	vertical-align: middle;
}
.section.function .table h4{
	color: #ED6C00;
	font-size: 130%;
	font-weight: 600;
	margin-right: 30px;
	padding: 20px 0;
}
.section.function .table p{
	font-size: 95%;
}
.section.function .table td{
	padding: 15px;
	border: 1px solid #707070;
	color: #212121;
	font-size: 95%;
	line-height: 1.6;
	vertical-align: middle;
}
.section.function .table td:first-of-type{
	background-color: rgba(246,171,0,.07);
	color: #ED6C00;
	font-weight: 600;
	width: 185px;
}
.section.function .table td span{
	display: block;
	margin-left: 1em;
}
/*ブロック================================*/
.section.function .block{
	margin-top: 90px;
}
.section.function .block + .block{
	margin-top: 60px;
}
.section.function .block h4{
	color: #ED6C00;
	font-size: 130%;
	font-weight: 600;
	margin-bottom: 10px;
}
.section.function .block p{
	font-size: 95%;
	line-height: 1.6;
	margin-bottom: 20px;
}
.section.function .row{
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.2);
	padding: 25px;
	margin-bottom: 30px;
}
.section.function .row h5,.section.function .row ul{
	display: inline-block;
	vertical-align: middle;
}
.section.function .row h5{
	color: #ED6C00;
	font-size: 95%;
	font-weight: 600;
	width: 230px;
	text-align: center;
}
.section.function .row ul{
	width: calc(100% - 234px);
}
.section.function .row li{
	text-indent: -1em;
	padding-left: 1em;
	margin: 5px 0;
	font-size: 95%;
}
.section.function .row img{
	display: block;
	margin: 30px auto;
}
.section.function .modal{
	padding: 40px 0;
}
.section.function .modal .fig{
	float: left;
	position: relative;
}
.section.function .modal .fig img{
	margin: 0 0 10px;
}
.section.function .modal .fig a{
	text-align: left;
	font-size: 95%;
	position: relative;
	display: block;
}
.section.function .fig a:after{
	content: "+";
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: rgba(0,0,0,.4);
	color: #fff;
	font-size: 120%;
	font-weight: 600;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
.section.function .modal .fig01{
	width: 40%;
	margin: 0 6% 0 4%;
}
.section.function .modal .fig02{
	width: 50%;
	margin-bottom: 40px;
}
.section.function .modal .fig03{
	width: 50%;
}
.section.function .modal .fig04{
	width: 40%;
	margin: 0 6% 0 4%;
}
.section.function .modal .fig05{
	width: 50%;
}
.section.function .modal .fig06{
	width: 40%;
	margin: 0 6% 0 4%;
}
.section.function .modal .fig07{
	width: 50%;
	margin-bottom: 40px;
	
}
.section.function .modal .fig08{
	width: 50%;
}
.section.function .modal .fig011{
	width: 40%;
	margin: 0 6% 0 4%;
}
@media screen and (max-width : 768px) {
	.section.function .modal{
		padding: 0;
		line-height: 1;
	}
	.section.function .modal .fig img{
		margin: 0 0 5px;
	}
	.section.function .modal .fig a{
		font-size: 65%;
	}
	.section.function .fig a:after{
		top: -5px;
		left: -5px;
		font-size: 100%;
		width: 20px;
		height: 20px;
		line-height: 20px;
	}
	.section.function .modal .fig02{
		margin-bottom: 10px;
	}
	.section.function .modal .fig07{
		margin-bottom: 10px;
	}
}


.section.function .fig09,.section.function .fig10{
	/*float: left;*/
	display: inline-block;
	vertical-align: middle;
}
.section.function .fig09{
	width: 53.3%;
}
.section.function .fig10{
	width: 42%;
	margin-left: 4%;
}
.section.function .fig10 p{
	margin-bottom: 10px;
	font-weight: 500;
	line-height: 1;
}
.section.function .fig10 table + p{
	margin-top: 20px;
}
.section.function .fig10 table{
	width: 100%;
}
.section.function .fig10 td{
	border: 1px solid #707070;
	padding: 5px;
	font-size: 80%;
}
.section.function .fig10 td:first-of-type{
	width: 30%;
}
.section.function .fig10 td:last-of-type{
	width: 50%;
}
@media screen and (max-width : 768px) {
	.section.function .fig09,.section.function .fig10{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.section.function .fig09 img{
		margin: 0 auto 20px;
	}
	.section.function .fig10 td{
		font-size: 65%;
	}
	.section.function .fig10 p{
		margin-bottom: 5px!important;
	}
}


#real .section.function{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#FFFFFF+1,F2F2F2+100 */
	background: #F2F2F2; /* Old browsers */
	background: -moz-linear-gradient(bottom, #FFFFFF 1%, #F2F2F2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, #FFFFFF 1%,#F2F2F2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #FFFFFF 1%,#F2F2F2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F2F2F2',GradientType=1 ); /* IE6-9 */
	padding: 120px 0 60px;
}
#real .section.function .img{
	margin-top: 70px;
}

@media screen and (max-width : 768px) {
	.section.function{
		padding: 60px 0;
	}
	.section.function .bg_txt{
		top: -40px;
		left: 50px;
	}
	.section.function .table{
		margin-top: 50px;
		display: block;
		margin-right: 0;
		width: 100%;
	}
	.section.function .table:last-of-type{
		margin-top: 30px;
	}
	.section.function .table h4,.section.function .table p{
		display: block;
	}
	.section.function .table h4{
		font-size: 100%;
		margin-right: 0;
		padding: 0;
		margin-bottom: 15px;
	}
	.section.function .table p{
		font-size: 90%;
		margin-bottom: 15px;
	}
	.section.function .table table{
		width: 100%;
	}
	.section.function .table td{
		padding: 10px;
		font-size: 90%;
		line-height: 1.6;
	}
	.section.function .table td:first-of-type{
		width: 80px;
	}
	.section.function .table td span{
	}
	.section.function .block{
		margin-top: 50px;
		padding-top: 20px;
	}
	.section.function .block + .block{
		margin-top: 45px;
	}
	.section.function .block h4{
		font-size: 100%;
		margin-bottom: 10px;
	}
	.section.function .block p{
		font-size: 90%;
		margin-bottom: 15px;
	}
	.section.function .row{
		padding: 20px;
	}
	.section.function .row h5,.section.function .row ul{
		display: block;
	}
	.section.function .row h5{
		width: 100%;
		margin-bottom: 15px;
		font-size: 100%;
	}
	.section.function .row ul{
		width: 100%;
	}
	.section.function .row li{
		font-size: 90%;
	}
	#real .section.function{
		padding: 60px 0;
	}
	#real .section.function .img{
		margin-top: 30px;
	}

}

/*----------------------------------------
/voice/　サービス概要ページ用（旧TOP分部）
----------------------------------------*/
#services {
padding-bottom:10px;
/*background: url(/common/images/top_intro_bg.jpg) no-repeat center center;*/
background-size: cover;
}
#services .container {
max-width: 1200px;
margin: 0 auto;
}
#services .container > ul{
margin: 0 auto;
box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.15);
}
#services .container li:nth-child(even) .left {
order:2;/*偶数ブロックは左右を逆にする*/
}
#services .container li:nth-child(even) .right {
order:1;/*偶数ブロックは左右を逆にする*/
}
#services li a.c_wrap{
display: flex;
flex-wrap:wrap;
justify-content:space-between;
margin-bottom:0;
background-color: rgba(255,255,255,0.8);
/*
box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.15);
*/
}
#services li a.c_wrap:hover{
background-color: rgba(255,255,255,1.0);
/*
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.15);
*/
}
#services .c_wrap .logo_area{
text-align: center;
width:50%;
min-height:560px;
text-align: center;
display: flex;
flex-direction: column; 
justify-content: center;
}

#services .c_wrap .logo_area .logo{
text-align: center;
width:70%;
margin:0 auto 40px;
}
#services .c_wrap .logo_area .logo img{
max-width:100%;
}
#services .c_wrap .logo_area .logo_exp{
color:#867f7a;
font-size:0.7rem;
line-height:1.9;
letter-spacing: 2px;
}
#services .c_wrap .exp_area{
line-height:1.8;
text-align: left;
display: flex;
flex-direction: column; 
justify-content: center;
width:50%;
padding:5%;
border: solid 1px #e8e5e3;
background: url(/common/images/bg-highlight.png) no-repeat -190px -190px;
background-color: #f3f0ee;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#services .c_wrap:hover .exp_area{
background-color: #fff;
}
#services .c_wrap .exp_area h3{
color:#111;
font-size:1.1rem;
font-weight:bold;
margin-bottom:5px;
padding-bottom:5px;
/*border-bottom: dotted 1px #fff;*/
}
#services .c_wrap .exp_area p{
color:#555;
font-size:0.85rem;
line-height:1.8;
}
#services .c_wrap .exp_area .btn01{
color:#fff;
text-align: center;
line-height:1.8;
margin:36px auto 0;
padding:10px 30px;
border: solid 1px #f3eae4;
background-color: #d5b198;
box-shadow: 0 12px 60px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#services .c_wrap:hover .exp_area .btn01{
color:#fff;
border: solid 1px #f4c3a3;
background-color: #f4c3a3;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}

@media screen and (max-width : 768px) {
	#services{
	padding-top:35px;
	}
	#services .container ul{
	margin:0 2%;
	padding:0 5% 20px;
	}
	#services .container li a.c_wrap {
	margin-bottom:15px;
	}
	#services .container li:nth-child(even) .left {
	order:1;/*偶数ブロックは左右を逆戻す*/
	}
	#services .container li:nth-child(even) .right {
	order:2;/*偶数ブロックは左右を逆戻す*/
	}
	#services .c_wrap .logo_area{
	display:block;
	width:100%;
	min-height: auto;
	padding-top:40px;
	}
	#services .c_wrap .logo_area .logo{
	width:100%;
	margin:0 auto 0;
	}
	#services .c_wrap .logo_area .logo img{
	max-width:50%;
	margin:0 auto 15px;
	}
	#services .c_wrap .logo_area .logo_exp{
	font-size:0.6rem;
	line-height:1.6;
	margin-bottom:20px;
	}
	#services .c_wrap .exp_area{
	line-height:1.6;
	text-align: left;
	width:100%;
	}
	#services .c_wrap .exp_area h3{
	font-size:0.7rem;
	font-weight:bold;
	text-align: center;
	margin-bottom:3px;
	padding-bottom:3px;
	border-bottom: dotted 1px #ccc;
	}
	#services .c_wrap .exp_area p{
	color:#555;
	font-size:0.8rem;
	}
	#services .c_wrap .exp_area .btn01{
	margin:16px auto 36px;
	padding:10px 30px;
	}	
}/*@media */


/*インストール要件
================================*/
.section.spec{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#FFFFFF+1,F2F2F2+100 */
	background: #F2F2F2; /* Old browsers */
	background: -moz-linear-gradient(left, #FFFFFF 1%, #F2F2F2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #FFFFFF 1%,#F2F2F2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #FFFFFF 1%,#F2F2F2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F2F2F2',GradientType=1 ); /* IE6-9 */
	padding: 120px 0 80px;
}
.section.spec .bg_txt{
	top: -80px;
	left: -100px;
}
@media screen and (min-width : 769px) {
	.section.spec .bg_txt{
		font-size: 700%;
	}
}
@media screen and (min-width : 1024px) and (max-width : 1300px) {
	.section.spec .bg_txt{
		top: -100px;
		left: 0;
		font-size: 650%;
		line-height: 1;
		white-space: pre-wrap;
		word-break: break-all;
	}
}
@media screen and (min-width : 769px) and (max-width : 1023px) {
	.section.spec .bg_txt{
		left: 0;
		width: 100%;
		font-size: 550%;
		line-height: 1;
		white-space: pre-wrap;
		word-break: break-all;
	}
}
.section.spec h4{
	color: #ED6C00;
	font-size: 130%;
	font-weight: 600;
	margin: 100px 0 20px;
}
.section.spec .spec_table{
	display: table;
	width: 100%;
	text-align: center;
	font-size: 95%;
}
.section.spec .spec_table dl{
	display: table-cell;
}
.section.spec .spec_table dl:nth-of-type(2) dt,.section.spec .spec_table dl:nth-of-type(2) dd{
	border-right: 0;
	border-left: 0;
}
.section.spec .spec_table dt,.section.spec .spec_table dd{
	padding: 15px;
	border: 1px solid #707070;
}
.section.spec .spec_table dt{
	background-color: rgba(246,171,0,.07);
	color: #ED6C00;
	font-weight: 600;
}
.section.spec .spec_table dd{
	margin-top: -1px;
}
/*システム推奨環境================================*/
@media screen and (max-width : 768px) {
	.section.spec{
		padding: 60px 0;
	}
	.section.spec .bg_txt{
		top: -40px;
		left: 20px;
	}
	.section.spec h4{
		font-size: 100%;
		margin: 50px 0 15px;
	}
	.section.spec .spec_table{
		display: block;
		font-size: 90%;
	}
	.section.spec .spec_table dl{
		display: block;
	}
	.section.spec .spec_table dl:nth-of-type(2) dt,.section.spec .spec_table dl:nth-of-type(2) dd,.section.spec .spec_table dl:nth-of-type(3) dt,.section.spec .spec_table dl:nth-of-type(3) dd{

		border-right: 1px solid #707070;
		border-left: 1px solid #707070;
		border-top: 0;
	}
	.section.spec .spec_table dt,.section.spec .spec_table dd{
		padding: 10px;
		border: 1px solid #707070;
	}
	.section.spec .spec_table dt{
		background-color: rgba(246,171,0,.07);
		color: #ED6C00;
		font-weight: 600;
	}
	.section.spec .spec_table dd{
		margin-top: -1px;
	}
	.section.system .bg_txt{
		left: 40px;
	}
}

/*システム構成図
================================*/
.section.diagram{
	padding: 10px 0 70px;
}
.section.diagram .bg_txt{
	font-size: 310%;
	left: 390px;
}
.section.diagram h3{
	font-size: 130%;
}
.section.diagram .img{
	margin-top: 35px;
	width: 100%;
}
@media screen and (max-width : 768px) {
	.section.diagram{
		padding: 0 0 60px;
	}
	.section.diagram .bg_txt{
		font-size: 240%;
		top: -20px;
		left: 0;
		right: 0;
		text-align: center;
	}
	.section.diagram h3{
		font-size: 110%;
	}
	.section.diagram .img{
		margin-top: 30px;
	}
}
/*システム概要
================================*/
.section.overview{
	padding: 10px 0 50px;
}
.section.overview .bg_txt{
	font-size: 310%;
	top: -20px;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
.section.overview h3{
	font-size: 130%;
}
.section.overview .img{
	margin-top: 60px;
	width: 100%;
}
@media screen and (max-width : 768px) {
	.section.overview{
		padding: 0 0 60px;
	}
	.section.overview .bg_txt{
		font-size: 240%;
		top: -20px;
		left: 0;
		right: 0;
		text-align: center;
	}
	.section.overview h3{
		font-size: 110%;
	}
	.section.overview .img{
		margin-top: 30px;
	}
}

/*機能一覧　アンカーボタン
================================*/
.anc_area{
	background: #FFFFFF;
	border-radius: 75px;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.2);
	margin-top: 70px;
}
.anc_area ul{
	padding: 0 20px;
}
.anc_area li{
	display: inline-block;
	vertical-align: middle;
	width: 19.5%;
	text-align: center;
}
.anc_area a{
	display: block;
	padding: 10px 0 18px;
}
.anc_area p{
	font-size: 95%;
	font-weight: 500;
	color: #3C3C3C;
}
.anc_area p:after{
	content: '';
	display: inline-block;
	margin-left: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0 8px;
	border-color: #ED6C00 transparent transparent transparent;
}
.anc_area .en{
	font-size: 125%;
	color: #C7C7C7;
	font-weight: 500;
}
.anc_area .en:after{
	content: none;
}
@media screen and (min-width : 769px) {
	.anc_area a:hover{
		opacity: 0.7;
	}
}
@media screen and (max-width : 768px) {
	.anc_area{
		margin-top: 30px;
	}
	.anc_area ul{
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.anc_area li{
		display: inline-block;
		vertical-align: middle;
		width: 30%;
		text-align: center;
		position: relative;
	}
	.anc_area a{
		padding: 10px 5px;
	}
	.anc_area p{
		font-size: 75%;
	}
	.anc_area p:after{
		border-width: 6px 6px 0 6px;
		margin-left: 0;
	}
	.anc_area .en{
		position: static;
		font-size: 10px;
		margin-bottom: 0;
	}
}