@charset "UTF-8";


/* HTML5 display-role reset for older browsers */

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



	/*共通*/
.flL{float:left;}
.flR{float:right;}

.taC{text-align:center;}
.fwb{font-weight:bold;}



.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}.mt35{margin-top:35px;}.mt40{margin-top:40px;}.mt45{margin-top:45px;}.mt50{margin-top:50px;}
.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb25{margin-bottom:25px;}.mb30{margin-bottom:30px;}.mb35{margin-bottom:35px;}.mb40{margin-bottom:40px;}.mb45{margin-bottom:45px;}.mb50{margin-bottom:50px;}

.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml25{margin-left:25px;}.ml30{margin-left:30px;}.ml35{margin-left:35px;}.ml40{margin-left:40px;}.ml45{margin-left:45px;}.ml50{margin-left:50px;}
.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr25{margin-right:25px;}.mr30{margin-right:30px;}.mr35{margin-right:35px;}.mr40{margin-right:40px;}.mr45{margin-right:45px;}.mr50{margin-right:50px;}

.fs10{font-size:10px;}.fs11{font-size:11px;}.fs12{font-size:12px;}.fs13{font-size:13px;}.fs14{font-size:14px;}.fs15{font-size:15px;}.fs16{font-size:16px;}.fs17{font-size:17px;}.fs18{font-size:18px;}

.lh10{line-height:10px;}.lh11{line-height:11px;}.lh12{line-height:12px;}.lh13{line-height:13px;}.lh14{line-height:14px;}.lh15{line-height:15px;}.lh16{line-height:16px;}.lh17{line-height:17px;}.lh18{line-height:18px;}


.indent-1 {
padding-left:1em;
text-indent:-1em;
}


.clfix:after {
  display: block;
  clear: both;
  content: "";
}


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

.smt{
	display:none;
}

.topcontact_bt {
    width: 320px;
    height: 45px;
    text-align: center;
    background: #cc023a;
    border: 2px solid #000000;
    padding: 12px 20px 12px 20px;
    font-family: FrutigerNeueLTW10-Bold,Frutiger Neue W01 Bd,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    float: left;
    position: relative;
}

.topcontact_bt a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    padding-top: 12px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.topcontact_bt a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/mail-groupware/gsuite/img/icon_right_arrow_w.png);
    margin-left: 10px;
}

.comtactmsg{
		margin-top: 65px;
    margin-bottom: 20px;
}



	/*ソリューションの概要・特長*/
	
.outlinetxt{
	background-color:#FFF;
}

.outlinetxt2{
	background-color:#FFF;
	margin-top:80px;
	margin-bottom:10px !important;
	text-align:center;
	font-weight:bold;
}
.capturebox{
	overflow: hidden;
}
.capturebox .box{
	width:410px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	background-color:#dff5ff;
	padding:10px;
	text-align: center;
}

.capturebox .box:nth-of-type(2n){
	margin-right:0px;
}

.capturebox .box p{
	font-size:16	px;
	font-weight:bold;
	text-align:center;
	margin-bottom: 10px;
}


.capturebox .box2{
	width:820px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	background-color:#dff5ff;
	padding:10px;
	text-align: center;
}

.capturebox .box2 .box2p{
	text-align: left;
	margin: 10px 21px;
}

.capturebox .box2 .arrow1{
	margin-bottom: 100px;
}
.capturebox .box2 .arrow2{
    margin-left: 400px;
	}

.capturebox .btmmess{
	text-align:right;
}


.blacktitle{
	font-size:18px;
	font-weight:bold;
}


.featurebox .title{
	font-size:18px;
	font-weight:bold;
	color:#004386;
	text-align:center;
	margin-bottom: 10px;
}

.featurebox .box{
	width:410px;
	height: 147px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	background-color:#fff5ce;
	padding:10px;
}
.featurebox .box:nth-of-type(2n){
	margin-right:0px;
}

.featurebox .box p{
	color: ##004386;
	margin-bottom:10px;
}
.featurebox .box .btmtxt{
		width: 255px;
    float: left;
    margin-right: 15px;
		line-height:1.5em;
}

.featurebox .bspace{
	margin-bottom:40px !important;
}

.featurebox .calcu{
	width: 233px;
	margin-bottom: 15px;
	float: left;
	border: 2px solid #004386;
	border-radius: 8px;
	padding: 10px;
	height:200px;
	text-align: center;
}
.featurebox .calcu:last-child{
	margin-right:0px;
}
.featurebox .calcux{
	float: left;
	width: 70px;
	text-align: center;
	font-size: 70px;
	color: #0a347f;
	padding-top: 63px;
}
.featurebox .calcu p.tl{
	color:#FFF;
	font-weight:bold;
	background-color:#004386;
	padding:5px 0;
	text-align:center;
	margin-bottom: 10px;
}
.featurebox .calcu p.final{
	color:#000;
	font-weight:bold;
	text-align: center;
	font-size:1.5em;
	margin-bottom: 4px;
}

.consalbtm{
	width: 450px;
	float: right;
	font-size: 13px;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 15px;
}



	/*利用シーン*/

.senlabel{
	border-bottom: 3px dotted #004386;
	padding-bottom: 0;
	margin-bottom: 34px;
}

h3.seanlable {
  position: relative;
	padding: 5px 5px 5px 13px;
	background: #004386;
	font-size: 22px;
	font-weight: bold;
	color: white;
	line-height: 1.3;
	z-index: 4;
	width: 132px;
	height: 40px;
	border-bottom: solid 1px #004386;
	margin-bottom: -20px;
}


h3.seanlable:after {
  position: absolute;
	content: '';
	left: 132px;
	top: 0px;
	border-style: solid;
	border-width: 21px 0 19px 40px;
	border-color: transparent transparent transparent #004386;
}

.seantop{
	width: 700px;
	margin: 0 auto;
	overflow: hidden;
}
.seantop img{
	float:left;
}
.seantop p{
	float:left;
	width:500px;
	font-size:27px;
	font-weight:bold;
	text-align:center;
}
.seantop p span{
	font-size:30px;
}

.seanboxarea{
	overflow:hidden;
}
.seanboxarea .box{
	width:410px;
	height: 325px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	border:solid 2px #dddddd;
	padding:10px;
	background-color:#FFF;
	position:relative;
	text-align: center;
}
.seanboxarea .box:nth-of-type(2n){
	margin-right:0px;
}

.seanboxarea .box2{
	width:840px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	border:solid 2px #dddddd;
	padding:10px;
	background-color:#FFF;
	position:relative;
	text-align:center;
}

.seanboxarea .box2 img:last-child{
 margin-left:25px;
}

.seanboxarea .box2 hr{
	border-top: 1px solid #09357f;
	margin: 20px 0;
}

.seanboxarea .box3{
	width:410px;
	height: 325px;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	border:solid 2px #dddddd;
	padding:10px;
	background-color:#FFF;
	position:relative;
	text-align:center;
}
.seanboxarea .box3:nth-of-type(3){
	margin-right:0px;
}

.seanboxarea .box .number,
.seanboxarea .box2 .number,
.seanboxarea .box3 .number{
		position: absolute;
    top: 0;
    left: 0;
    background-color: #09357f;
    color: #FFF;
    padding: 0 15px;
}
.seanboxarea .box .title,
.seanboxarea .box3 .title{
	text-align:center;
	font-weight:bold;
}

.seanboxarea .box .title span{
	font-size:12px;
}

.seanboxarea .box2 .title{
	padding-left:50px;
	font-weight:bold;
	text-align: left;
}

.seanbtm{
	text-align:center;
}
.seanbtm .seanbtm_txt{
	font-size:25px;
	font-weight:bold;
	text-align:center;
}

	/*導入効果*/

.effict3box{
	overflow:hidden;
}

.efflabel{
	border-bottom: 3px dotted #004386;
	padding-bottom: 0;
	margin-bottom: 34px;
}

h3.effectlable {
  position: relative;
	padding: 5px 5px 5px 13px;
	background: #004386;
	font-size: 22px;
	font-weight: bold;
	color: white;
	line-height: 1.3;
	z-index: 4;
	width: 132px;
	height: 40px;
	border-bottom: solid 1px #004386;
	margin-bottom: -20px;
}


h3.effectlable:after {
  position: absolute;
	content: '';
	left: 132px;
	top: 0px;
	border-style: solid;
	border-width: 21px 0 19px 40px;
	border-color: transparent transparent transparent #004386;
}

.effectbox .title{
	font-size;20px;
	font-weight:bold;
	text-align:center;
}

.effcaption{
	text-align:right;
	font-size:14px;
}

.effict3box .box{
	float:left;
	text-align:center;
}

.effict3box .box p{
		background-color: #09357f;
    width: 250px;
    margin: 0 auto;
    color: #FFF;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.effict3box .box span{
	line-height:1.5em;
}

.effict3box .Side{
		width:397px;
}

.effict3box .Cside{
	margin-top:220px;
}

.effict3box .Cside2{
	margin-top:56px;
}

.effict3box .effict3boximg{
	margin-top:20px;
}


}






@media print, screen and (max-width: 769px) { 

.pc{
	display:none;
}


.topcontact_bt {
    width: 100%;
    height: 45px;
    text-align: center;
    background: #cc023a;
    border: 2px solid #000000;
    padding: 12px 20px 12px 20px;
    font-family: FrutigerNeueLTW10-Bold,Frutiger Neue W01 Bd,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
    margin-bottom: 30px;
}

.topcontact_bt a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    padding-top: 12px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.topcontact_bt a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/mail-groupware/gsuite/img/icon_right_arrow_w.png);
    margin-left: 10px;
}

.comtactmsg{
		margin-top: 65px;
    margin-bottom: 20px;
}



	/*ソリューションの概要・特長*/
	
.outlinetxt{
	background-color:#FFF;
}
.capturebox .box{
	width:100%;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	background-color:#dff5ff;
	padding:10px;
	text-align: center;
}

.capturebox .box:nth-of-type(2n){
	margin-right:0px;
}

.capturebox .box p{
	font-size:16	px;
	font-weight:bold;
	text-align:center;
	margin-bottom: 10px;
}


.capturebox .box2{
	width:100%;
	margin-right:15px;
	margin-bottom:15px;
	float:left;
	background-color:#dff5ff;
	padding:10px;
	text-align: center;
}

.capturebox .box2 .box2p{
	text-align: left;
	margin: 10px 21px;
}

.capturebox .box2 .arrow1{
	transform: rotate(90deg);
	width: 44px;
}
.capturebox .box2 .arrow2{
   transform: rotate(90deg);
	width: 44px;
	}

.capturebox .btmmess{
	text-align:right;
}


.blacktitle{
	font-size:18px;
	font-weight:bold;
}


.featurebox .title{
	font-size:18px;
	font-weight:bold;
	color:#004386;
	text-align:center;
	margin-bottom: 10px;
}

.featurebox .box{
	width: 100%;
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
	background-color: #fff5ce;
	padding: 10px;
}

.featurebox .box div:nth-of-type(2){
	text-align:center;
}
.featurebox .box div img{
	width:119px;
}

.featurebox .box p{
	color: ##004386;
	margin-bottom:10px;
}
.featurebox .box .btmtxt{
		width: 255px;
    float: left;
    margin-right: 15px;
		line-height:1.5em;
}



.featurebox .calcu{
	width: 100%;
	margin-bottom: 15px;
	float: left;
	border: 2px solid #004386;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
}
.featurebox .calcu:last-child{
	margin-right:0px;
}

.featurebox .calcu img{
	width:185px;
}

.featurebox .lastcalcu img{
	width:159px;
}

.featurebox .calcux{
		width: 100%;
    text-align: center;
    font-size: 70px;
    color: #0a347f;
    margin: 15px 0;
}
.featurebox .calcu p.tl{
	color:#FFF;
	font-weight:bold;
	background-color:#004386;
	padding:5px 0;
	text-align:center;
	margin-bottom: 10px;
}
.featurebox .calcu p.final{
	color:#000;
	font-weight:bold;
	text-align: center;
	font-size:1.5em;
	margin-bottom: 4px;
}

.consalbtm{
	width: 100%;
	float: right;
	font-size: 13px;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 15px;
}



	/*利用シーン*/

.senlabel{
	border-bottom: 3px dotted #004386;
	padding-bottom: 0;
	margin-bottom: 34px;
}

h3.seanlable {
  position: relative;
	padding: 5px 5px 5px 13px;
	background: #004386;
	font-size: 22px;
	font-weight: bold;
	color: white;
	line-height: 1.3;
	z-index: 4;
	width: 132px;
	height: 40px;
	border-bottom: solid 1px #004386;
	margin-bottom: -20px;
}


h3.seanlable:after {
  position: absolute;
	content: '';
	left: 132px;
	top: 0px;
	border-style: solid;
	border-width: 21px 0 19px 40px;
	border-color: transparent transparent transparent #004386;
}

.seantop{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.seantop img{
		width: 75px;
}
.seantop p{
	float:left;
	width:100%;
	font-size:17px;
	font-weight:bold;
	text-align:center;
}
.seantop p span{
	font-size:19px;
}

.seanboxarea{
	overflow:hidden;
}
.seanboxarea .box{
	width: 100%;
	margin-bottom: 15px;
	border: solid 2px #dddddd;
	padding: 10px;
	background-color: #FFF;
	position: relative;
	text-align: center;
}


.seanboxarea .box2{
	width:100%;
	margin-bottom:15px;
	border:solid 2px #dddddd;
	padding:10px;
	background-color:#FFF;
	position:relative;
	text-align:center;
}

.seanboxarea .box2 hr{
	border-top: 1px solid #09357f;
	margin: 20px 0;
}


.seanboxarea .box3{
	width:100%;
	margin-bottom:15px;
	border:solid 2px #dddddd;
	padding:10px;
	background-color:#FFF;
	position:relative;
	text-align:center;
}


.seanboxarea .box .number,
.seanboxarea .box2 .number,
.seanboxarea .box3 .number{
		position: absolute;
    top: 0;
    left: 0;
    background-color: #09357f;
    color: #FFF;
    padding: 0 15px;
}
.seanboxarea .box .title,
.seanboxarea .box3 .title{
	text-align:center;
	font-weight:bold;
	    margin-top: 30px;
}

.seanboxarea .box .title span{
	font-size:12px;
}

.seanboxarea .box2 .title{
	padding-left:50px;
	font-weight:bold;
	text-align: left;
}

.seanbtm{
	text-align:center;
}
.seanbtm .seanbtm_txt{
	font-size:19px;
	font-weight:bold;
	text-align:center;
}

	/*導入効果*/


.efflabel{
	border-bottom: 3px dotted #004386;
	padding-bottom: 0;
	margin-bottom: 34px;
}

h3.effectlable {
  position: relative;
	padding: 5px 5px 5px 13px;
	background: #004386;
	font-size: 22px;
	font-weight: bold;
	color: white;
	line-height: 1.3;
	z-index: 4;
	width: 132px;
	height: 40px;
	border-bottom: solid 1px #004386;
	margin-bottom: -20px;
}


h3.effectlable:after {
  position: absolute;
	content: '';
	left: 132px;
	top: 0px;
	border-style: solid;
	border-width: 21px 0 19px 40px;
	border-color: transparent transparent transparent #004386;
}

.effectbox .title{
	font-size;20px;
	font-weight:bold;
	text-align:center;
}

.effcaption{
	text-align:right;
	font-size:14px;
}

.effict3box .box{
	text-align:center;
}

.effict3box .box p{
		background-color: #09357f;
    width: 250px;
    margin: 0 auto;
    color: #FFF;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.effict3box .box span{
	line-height:1.5em;
}

.effict3box .Side{
		width:100%;
}

.effict3box .Cside,
.effict3box .Cside2{
	margin-top:10px;
}

.effict3box .Cside img,
.effict3box .Cside2 img{
	transform: rotate(90deg);
	width: 44px;
	height: 135px

}

}
@media print, screen and (max-width: 350px) { 



}


/*---------------------------------
20200730 修正
---------------------------------*/
/*概要*/
.outline_col2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.outline_col2 > div{
	width: 49%;
	padding: 10px;
	border: 2px solid #004386;
	border-radius: 8px;
	text-align: center;
	margin-bottom: 20px;
}
.outline_col2 > div.col1{
	width: 100%;
	padding: 10px;
	border: 2px solid #004386;
	border-radius: 8px;
	text-align: center;
	margin-bottom: 20px;
}
.outline_col2 .ttl{
	font-size:120%;
	font-weight:bold;
	color:#FFFFFF;
	padding: 5px 0;
	text-align: center;
	background-color:#004386;
	margin-bottom: 20px;
}
/*カラム内側(汎用)*/
.common_inner{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	align-items:center;
}
.common_inner .col_a{
	width: 35%;
	margin-bottom:20px;
}
.common_inner .col_a p{
	margin-bottom:30px;
}
.common_inner .col_b,
.common_inner .col_c{
	width: 30%;
	margin-bottom:20px;
}
.common_inner .col50p{
	width: 50%;
	margin-bottom:20px;
}
.common_inner .col100p{
	width: 100%;
	margin-bottom:20px;
}
.common_inner p{
	margin:0;
	text-align:center;
}
.common_inner img{
	width:100%;
}
@media print, screen and (max-width: 769px) {
	.outline_col2 > div{
		width: 100%;
	}
	.common_inner .col_a{
		width:100%;
	}
	.common_inner .col_a p{
	margin-bottom:0;
	}
	.common_inner .col_b,
	.common_inner .col_c{
		width:50%;
	}
}

/*特長*/
.spec_col2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.spec_col2 > div{
	width: 49%;
	padding: 15px;
	text-align: center;
	margin-bottom: 20px;
	background-color:#C6DFF4;
}
.spec_col2 p{
	font-weight:bold;
	line-height:1.4;
	margin-bottom: 20px;
}
.spec_col2 img{
	width:80%;
}
.spec_ttl{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	margin:50px 0 10px !important;
}
.spec_txt{
	font-size:18px;
	line-height:1.4;
	text-align:center;
}
@media print, screen and (max-width: 769px) {
	.spec_col2 > div{
		width: 100%;
	}
}
/*画面イメージ*/
.screen{
	width: 100%;
	padding: 15px;
	border: 2px solid #004386;
	border-radius: 8px;
	text-align: center;
}
.screen .ttl{
	font-size:120%;
	font-weight:bold;
	color:#FFFFFF;
	padding: 5px 0;
	text-align: center;
	background-color:#004386;
}
.screen_col2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	align-items:center;
	margin-top:30px;
}
.screen_col2 .type{
	width: 27%;
}
.screen_col2 .cap{
	width: 70%;
}
.screen_col2 img{
	width:100%;
}
@media print, screen and (max-width: 769px) {
	.screen_col2 .type{
		width: 100%;
		margin-bottom:15px;
	}
	.screen_col2 .cap{
		width: 100%;
	}
	.screen_col2 .type img{
	width:50%;
	text-align:center;
	}
}
/*利用シーン*/
.seantop{
	width:100%;
}
.seantop img {
	float: none;
}
.seantop .seanicon{
	float:left;
	width:18%;
	margin-bottom:10px;
	overflow: hidden;
	text-align:right;
}
.seantop .seanicon img{
	max-width:100% !important;
}
.seantop p{
	width:80%;
	margin-left:2%;
	text-align:center;
}
.seantop p span{
	font-size:16px;
}
.seanboxarea .box img,
.seanboxarea .box3 img{
	width:100%;
}
.seanboxarea .box2 .title{
	padding-left:0;
	text-align:center;
}
.seanbtm .seanbtm_pic{
	width:100%;
	text-align:center;
}
.seanbtm .seanbtm_pic img{
	width:70%;
}
.sean3_inner{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	align-items:center;
}
.sean3_inner .pic{
	width: 49%;
	margin-bottom:20px;
}
.sean3_inner .txt{
	width: 51%;
}
.fig_scene04_01{
	width:530px;
	margin-bottom:20px;
}
.fig_scene04_02{
	width:245px;
}
.fig_2rows{
	width:360px;
}
@media print, screen and (max-width: 769px) {
	.seanbtm .seanbtm_pic img{
		width:100%;
	}
	.sean3_inner .pic,
	.sean3_inner .txt{
		width: 100%;
	}
}