@charset "utf-8";

/*---------------------------------
コピー元を調整
/etc/designs/nttcom/hq/jp/business/services/application/ai/cotoha-ma/css/cotoha-ma.css
---------------------------------*/



/*-----common--------*/


.flL{
	float:left;
}
.flR{
	float:right;
}

.vaM{
	vertical-align:middle !important;
}
.taC{
	text-align:center !important;
}
.tcR{
	text-align:right !important;
}
.tcL{
	text-align:left !important;
}

.mt10{margin-top:10px;} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mt40{margin-top:40px;} .mt50{margin-top:50px;} .mt60{margin-top:60px;} .mt70{margin-top:70px;}
.mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} .mb40{margin-bottom:40px;} .mb50{margin-bottom:50px;}


.pt10{padding-top:10px;} .pt20{padding-top:20px;} .pt30{padding-top:30px;} .pt40{padding-top:40px;} .pt50{padding-top:50px;}
.pb10{padding-bottom:10px;} .pb20{padding-bottom:20px;} .pb30{padding-bottom:30px;} .pb40{padding-bottom:40px;} .pb50{padding-bottom:50px;}


.mr10{margin-right:10px;} .mr20{margin-right:20px;}.mr21{margin-right:21px;} .mr30{margin-right:30px;}
.ml10{margin-left:10px;} .ml20{margin-left:20px;} .ml30{margin-left:30px;}

.fs08em{font-size:0.8em;} .fs09em{font-size:0.9em;} .fs1em{font-size:1em;} .fs12em{font-size:1.2em;} .fs13em{font-size:1.3em;} .fs14em{font-size:1.4em;} .fs15em{font-size:1.5em;} .fs16em{font-size:1.6em;} .fs17em{font-size:1.7em;} .fs18em{font-size:1.8em;} .fs19em{font-size:1.9em;} .fs2em{font-size:2em;} .fs21em{font-size:2.1em;} .fs22em{font-size:2.2em;} .fs23em{font-size:2.3em;} .fs24em{font-size:2.4em;} .fs25em{font-size:2.5em;}

.lh1em{line-height:1em;} .lh12em{line-height:1.2em;} .lh13em{line-height:1.3em;} .lh14em{line-height:1.4em;} .lh15em{line-height:1.5em;} .lh16em{line-height:1.6em;} .lh17em{line-height:1.7em;} .lh18em{line-height:1.8em;} .lh19em{line-height:1.9em;} .lh2em{line-height:2em;} .lh21em{line-height:2.1em;} .lh22em{line-height:2.2em;} .lh23em{line-height:2.3em;} .lh24em{line-height:2.4em;} .lh25em{line-height:2.5em;}

.fs12{font-size:12px;} .fs14{font-size:14px;} .fs16{font-size:16px;}

.fwb{
	font-weight:bold;
}

.colorR{
	color:#FF0000;
}
.colorW{
	color:#FFF;
}
.colorB{
	color:#0d347e;
}

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

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


@media only screen and (min-width: 769px){
		.smt{
			display:none !important;
		}
		
		
.tabwidth {
    width: 980px;
    margin: 0 auto;
		background-color:#FFF;
}

.footwidth{
	width:1260px;
	margin: 0 auto;
	margin-top: 80px;
	margin-bottom: 150px;
}
		
.slider-view,
.service_slider_item{
	width:198px !important;
}

.adjustLine .parbase p{
		white-space: nowrap;
}

h1 .tlfsize{
	font-size:30px;
}

.mtpc100{
	margin-top:100px;
}

		.topcontact_bt {
		width:294px;
		height:45px;
    text-align: center;
    background: #ffd601;
    border: 2px solid #004386;
    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: #193477;
    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/cmn/img/icon_right_arrow.png);
    margin-left: 10px;
		}
		.topcontact_bt:hover{
			background: #d5b511;
		}

.award{
	border: 3px solid #edb73c;
    margin-top: 40px;
    padding: 15px 10px 18px 10px;
		line-height: 1.5em;
		font-size: 14px;
		background-color:#FFF;
}
.award img{
	float:left;
	margin-right:10px;
	margin-left:10px;
	width: 105px;
}
.award p{
	color:#bc0505;
	font-size:18px;
	font-weight:bold;
	margin-top: 5px;
}


/*サービス概要*/
.Mainimg{
	overflow:hidden;
}
.Mainimg .Lside{
	float:left;
}
.Mainimg .Rside{
	position:relative;
	float:left;
	
}

.Mainimg .Rside .com1{
	position: absolute;
	left: 57px;
	top: 48px;
	font-size: 18px;
	font-weight:bold;
	color: #FFF;
	line-height: 1.5em;
}
.Mainimg .Rside .com2{
	position: absolute;
	left: 57px;
	top: 167px;
	font-size: 18px;
	font-weight:bold;
	color: #FFF;
	line-height: 1.5em;
}
.Mainimg .Rside .com3{
	position: absolute;
	left: 57px;
	top: 286px;
	font-size: 18px;
	font-weight:bold;
	color: #FFF;
	line-height: 1.5em;
}

.securebox{
	margin: 50px 0;
	overflow: hidden;
}

		
.securebox .box{
	width:465px;
	border:1px solid #cecece;
	float:left;
	padding:3px;
}

.securebox .arrow{
	width: 50px;
    float: left;
    color: #e3e3e3;
    font-size: 35px;
    text-align: center;
    margin-top: 50px;
}

.securebox .box .kadai{
	background-color:#e3e3e3;
    font-size: 18px;
	text-align:center;
	font-weight:bold;
	padding:8px;
}

.securebox .box .kaiketu{
	background-color:#dce6f1;
    font-size: 18px;
	text-align:center;
	font-weight:bold;
	padding:8px;
}

.securebox .box .bottom{
	padding:10px 10px 10px 40px;
	line-height:1.8em;
	font-size:18px;
}

.securebox .box .bottom span{
	font-size:20px;
	color:#b40000;
	font-weight:bold;
}

.meritarea{
}
.meritarea .meritbox:nth-of-type(1),
.meritarea .meritbox:nth-of-type(2),
.meritarea .meritbox:nth-of-type(3){
 margin-top:0px;
}
.meritarea .meritbox{
 width:306px;
 /*height:275px;*/
 border:2px solid #cecece;
 float:left;
 margin-right:30px;
 text-align:center;
 margin-top:30px;
 position:relative;
 background-color:#F2F2F1;
}
.meritarea .meritbox:nth-of-type(3),
.meritarea .meritbox:nth-of-type(6){
	margin-right:0px;
}
.meritarea .meritbox:hover{
	border:2px solid #004386;
}
/*
.meritarea .meritbox a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
*/
.meritarea .meritbox p{
	text-align: left;
	font-size: 17px;
	font-weight: bold;
	color: #004386;
	padding: 5px 10px 20px;
	margin:0;
}
.meritarea .meritbox img{
	width:190px;
	text-align:center;
	margin:10px 0;
}
/*利用シーン*/
.usagearea{
}
.usagearea .usagebox:nth-of-type(1),
.usagearea .usagebox:nth-of-type(2),
.usagearea .usagebox:nth-of-type(3){
 margin-top:0px;
}
.usagearea .usagebox{
 width:306px;
 /*height:275px;*/
 border:2px solid #cecece;
 float:left;
 margin-right:30px;
 text-align:center;
 margin-top:30px;
 position:relative;
}
.usagearea .usagebox:nth-of-type(3),
.usagearea .usagebox:nth-of-type(6){
	margin-right:0px;
}
.usagearea .usagebox:hover{
	border:2px solid #004386;
}
.usagearea .usagebox p{
	text-align: left;
	font-size: 17px;
	font-weight: bold;
	color: #004386;
	padding: 5px 10px 20px;
	margin:0;
}
.usagearea .usagebox img{
	width:100%;
	text-align:center;
	margin:0;
}


.sean_detail {
	width: 225px;
    background-color: #004386;
    padding: 20px 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #063796;
    display: block;
    position: relative;
    cursor: pointer;
    float: right;
		overflow:hidden;
}

.sean_detail:hover{
	background-color:#176abc;
}

.sean_detail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top:12px;
		color:#FFF;
}

.link_component a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow_w.png);
    margin-left: 10px;
}
.link_component.news a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow.png);
    margin-left: 10px;
}
table.reasonable{
	width:100%;
}
table.reasonable td{
	text-align:center;
	vertical-align:middle;
	font-size:20px;
	font-weight:bold;
	line-height:1.3em;
}
table.reasonable td .tax{
	font-size:15px
}
table.reasonable td .big{
	font-size:30px
}
table.reasonable td.or1{
	background-color:#ec7720;
	color:#FFF;
}
table.reasonable td.or2{
	background-color:#fdf1a2;
}
table.reasonable td.gr1{
	background-color:#595959;
	color:#FFF;
}
table.reasonable td.gr2{
	background-color:#f0f0f0;
}



.bizseanarea{
		margin-bottom: 100px;
    overflow: hidden;
}
		
.bizseanarea .box{
	width:233px;
	margin-right:15px;
	float:left;
}
.bizseanarea .box:nth-of-type(4){
	margin-right:0px;
}
.bizseanarea .box p{
	background-color: #004386;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 10px 0px;
	font-size: 18px;
}
.bizseanarea .box img{
	width:233px;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
}


/*-----動画----------
.mov {
    width: 600px !important;
    margin: 0 auto;
    text-align: center;
    margin-top: 25px;
}

.mov p {
    margin: 0 !important;
    text-align: center !important;
    width: 600px !important;
    font-size: 16px;
}
.mov iframe{
	border:1px solid #ccc;
}
*/


/*-----特徴----------*/


.merit_titlearea {
    overflow: hidden;
    border-bottom: solid 3px #214a7b;
    padding-bottom: 2px;
}

.point_box {
    width: 120px;
    height: 40px;
    background-color: #214a7b;
    color: #FFF;
    float: left;
    font-size: 1.2em;
    padding: 3px;
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 5px;
}

.fs15em {
    font-size: 1.5em;
}

.point_title {
    float: left;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    margin-top: 5px;
		margin-bottom: 0;
}

.point_img {
    width: 320px;
    margin-bottom: 50px;
    float: left;
    margin-top: 20px;
}
.point_txt {
    width: 660px;
    float: left;
    font-size: 15px;
    line-height: 1.5em;
    margin-top: 20px;
    margin-bottom: 50px;
}

.point_txt  p{
	border: 1px solid #ccc;
    padding: 12px 6px;
    font-size: 11.5px;
		margin-top:10px;
}


/*-----利用シーン--------*/

.seanboxarea{
		margin-bottom: 100px;
    overflow: hidden;
}
		
.seanboxarea .box{
	width:470px;
	margin-right:40px;
	margin-bottom:40px;
	border: 1px solid #ccc;
	float:left;
	padding:1px;
}
.seanboxarea .box:nth-of-type(2),
.seanboxarea .box:nth-of-type(4){
	margin-right:0px;
}
.seanboxarea .box p{
	background-color: #004386;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 10px 0px;
	font-size: 22px;
}


.seanboxarea .box span{
	padding: 15px 10px;
	line-height: 1.3em;
	display: block;
	font-size: 15px;
}

/*--料金 --*/

.h2small{
	font-size:18px;
}
.plan_out_box {
    background-color: #d7e5f4;
    width: 980px;
    padding: 20px;
    overflow: hidden;
    margin: 0 auto;
}
.plan_in_01{
	width:940px;
	background-color:#FFF;
}

.plan_in_01 .price_top_box .Lside{
	margin-left:100px;
}

.plan_in_01 .price_top_box .Rside{
	width: 300px;
}
.plan_in_01_in {
    float: left;
    width: 435px;
    padding: 0px;
    margin-left: 20px;
    margin-right: 0px;
}


.plan_in_02 {
	width:920px;
	background-color:#FFF;
	padding: 15px 0;
}

.plan_in_01_in dt {
    float: left;
    padding: 5px;
    height: 30px;
}

.plan_in_01_in dt .pricearea{
	float:left;
}
.plan_in_01_in dt .plabel{
	background-color:#fdd5b3;
	padding:5px 10px;
	font-weight:bold;
	font-size:18px;
	margin-right: 10px;
}

.plan_in_01_in dd {
    height: 30px;
    margin-top: 5px;
}

.price_top_box {
    overflow: hidden;
    width: 97%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height:1.3;
}

.price_bottom_txt {
    padding: 20px 20px 20px 155px;
		font-size: 18px;
}

.price_bottom_txt .label{
	position:relative;
}
.price_bottom_txt .label:before{
	content: "●";
    font-size: 10px;
    padding-right: 5px;
		position: absolute;
    top: 7px;
    left: -13px;
}

dl.chargetxt{
	margin-top: 15px;
	font-size: 15px;
}
dl.chargetxt dt{
	width:20px;
	float:left;
}
dl.chargetxt dd{
	margin-left:20px;
	margin-bottom:20px;
	line-height:1.3em;
}

table.charge{
	width:100%;
	margin-bottom: 15px;
}

table.construction{
	margin-bottom: 100px;
}
table.charge th,
table.charge td,
table.construction th,
table.construction td{
	text-align:center;
	vertical-align:middle;
}
table.charge th.wi1{
	width:175px;
}
table.charge th.wi2{
	width:430px;
}
table.charge th.wi3{
	width:140px;
}
table.charge th.wi4{
	width:230px;
}

table.charge td ul{
	margin-left:-20px;
	margin-top:0;
	margin-bottom:0;
}
table.charge td ul li{
	text-align:left;
}

table.construction th{
	width:325px;
}

p.charge_cap{
	padding-left:1em;
	text-indent:-1em;
	margin-top:10px;
}

dl.charge_capdl{
	margin-left:20px;
}
dl.charge_capdl dt{
	float:left;
	line-height:1.3em;
}
dl.charge_capdl dd{
	margin-left:10px;
	line-height:1.3em;
}

/*-----よくある質問----------*/

.faqlist {
    line-height: 1.7em;
    width: 800px;
    margin: 0 auto;
}


.faqlist dl {
    line-height: 2.5em;
    font-size: 1em;
}

.faqlist dl dt {
    float: left;
    color: #004386;
}

.faqlist dl dd {
    margin-left: 40px;
    cursor: pointer;
}

.faqlist dl dd:hover{
	background-color:#daebf5
	}



.faqnavi {
    width: 100%;
    background-color: rgb(247,247,247);
    text-align: center;
    display: table;
    margin-bottom: 50px;
}

.faqnavi .faxtxtbox {
    width: 338px;
    margin: 0 auto;
}

.faqnavi .textlink {
    float: left;
    display: inline;
    line-height: 5em;
    font-weight: bold;
    padding: 5px;
}

.faqnavi .faqselect {
    background-color: rgb(139,24,109);
    color: #FFF;
    padding: 5px;
}


.faqnavi .textlink {
    float: left;
    display: inline;
    line-height: 5em;
    font-weight: bold;
    padding: 5px;
}

.anslast{
	margin-bottom:100px;
}

.lasttbl{
  margin-bottom:100px;
}
.faqanser {
    width: 100%;
    margin-top: 50px;
}

.faqanser .qtitle {
    font-size: 1.5em;
    margin: 15px 0;
    background: #004386 !important;
    color: #fff !important;
    padding: 13px 10px!important;
    overflow: hidden !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.faqanser .qanser {
    font-size: 16px;
    line-height: 1.3em;
    margin-left: 40px;
}

.faqanser .qanser dl dt{
	width:20px;
	float:left;
}
.faqanser .qanser dl dd{
	margin-left:20px;
}

.faqanser .qanser dl dt.nodt{
	width:25px;
	float:left;
}
.faqanser .qanser dl dd.nodd{
	margin-left:25px;
}

.faqanser .qanser dl.wide dt{
	width:48px;
}
.faqanser .qanser dl.wide dd{
	margin-left:48px;
}


/*-追従ボタン２ー*/
.contact_bt2{
	position:fixed;
	right:200px;
	z-index:901;
}
.contact_bt2{
	background:#ffd601;
	border:2px solid #004386;
	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); 
}
.contact_bt2 a{
	text-decoration:none;
	color:#193477;
	font-size:18px;
	font-weight:bold;
}

.contact_bt2 a:after {
	content: url(/content/dam/nttcom/hq/cmn/img/icon_right_arrow.png);
	margin-left: 10px;
}

.contact_bt2:hover,
.contact_bt:hover{
		background: #fdea8a;
	}


/*-フッター*/

.inquary {
    background-color: #004386;
    color: #FFF;
    font-size: 1.5em;
    padding: 15px;
    margin: 50px 0 30px;
    text-align: center;
    font-weight: bold;
}


.btmcontact_bt {
    width: 440px;
    height: 65px;
    text-align: center;
    font-family: FrutigerNeueLTW10-Bold,Frutiger Neue W01 Bd,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px;
    float: left;
    position: relative;
    background: #cc023a !important;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    border-image: initial;
    padding: 12px 20px;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}


.btmcontact_bt a {
    text-decoration: none;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    padding-top: 13px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btmcontact_bt:hover{
		background: #cc023a;
	}

.btmcontact_bt a span {
    line-height: 38px;
}

.btmcontact_bt a:after {

	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .5em;
	height: .5em;
	/* border-top: .13em solid #004386; */
	/* border-right: .13em solid #004386; */
	border-top: .13em solid #fff!important;
	border-right: .13em solid #fff!important;
	transform: rotate(45deg);

/*    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow_wh.png);
    position: absolute;
    top: 22px;
    margin-left: 15px;
*/
}


.footlonk{
	border-top: solid 2px #05397c;
	text-align: center;
}
 
.footlonk ul li{
	display:inline;
	font-size: 1.1em;
	padding-left: 15px;
	padding-right: 15px;
}


.footlonk ul li.bdr{
	color:#777777;
	padding-left: 0px;
	padding-right: 0px;
}
.footlonk ul li.nbd{
		border-left: none;
}

.footlonk ul li.on{
		background-color: #004386;
}

.footlonk ul li.on a{
	color:#FFF;
	}


}


@media only screen and (max-width: 768px){
		.pc{
			display:none !important;
		}
	h1 .tlfsize{
		font-size:20px;
	}

.tabwidth {
    width: 100%;
}

.footwidth {
    width: 100%;
		margin-top: 100px;
		margin-bottom: 100px;
}


.smtimg{
	width:100%;
	max-width:640px;
}


.fllb_hq{
	line-height:1.3em;
	}
	.topcontact_bt {
    width: 100%;
		height:45px;
    text-align: center;
    background: #ffd601;
    border: 2px solid #004386;
    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);
		margin:10px 0;
		position:relative;
		}
		
		.topcontact_bt a {
    text-decoration: none;
    color: #193477;
    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/cmn/img/icon_right_arrow.png);
    margin-left: 10px;
		}

.award{
	border: 3px solid #edb73c;
    margin-top: 40px;
    padding: 10px;
		line-height: 1.5em;
		font-size: 14px;
		background-color:#FFF;
		text-align: center;

}
.award img{
	width:150px;
	margin:0 auto;
}
.award p{
	color:#bc0505;
	font-size:18px;
	font-weight:bold;
}

.award span{
	text-align: left;
	display: block;
}


/*サービス概要*/


.Mainimg .Rside .com1{
	font-size: 16px;
	font-weight:bold;
	padding: 7px;
	color: #FFF;
	line-height: 1.5em;
	background-color:#0875e6;
	margin-bottom: 15px;
}
.Mainimg .Rside .com2{
	font-size: 16px;
	font-weight:bold;
	padding: 7px;
	color: #FFF;
	line-height: 1.5em;
	background-color:#0875e6;
	margin-bottom: 15px;
}
.Mainimg .Rside .com3{
	font-size: 16px;
	font-weight:bold;
	padding: 7px;
	color: #FFF;
	line-height: 1.5em;
	background-color:#0875e6;
}


.securebox{
	margin-top:30px;
	overflow: hidden;
}

.securebox .box{
	width:100%;
	border:1px solid #cecece;
	float:left;
	padding:3px;
}

.securebox .arrow{
	width: 88%;
    float: left;
    color: #e3e3e3;
    font-size: 35px;
    text-align: center;
    margin: 20px;
		transform: rotate(90deg);
}

.securebox .box .kadai{
	background-color:#e3e3e3;
    font-size: 18px;
	text-align:center;
	font-weight:bold;
	padding:8px;
}

.securebox .box .kaiketu{
	background-color:#dce6f1;
    font-size: 18px;
	text-align:center;
	font-weight:bold;
	padding:8px;
}

.securebox .box .bottom{
	padding:10px;
	line-height:1.8em;
	font-size:18px;
}

.securebox .box .bottom span{
	font-size:20px;
	color:#b40000;
	font-weight:bold;
}


.meritarea{
}
.meritarea .meritbox{
 width:100%;
 border:2px solid #cecece;
 text-align:center;
 margin-top:30px;
 text-align: center;
 position:relative;
 background-color:#F2F2F1;
}
.meritarea .meritbox:hover{
	border:2px solid #004386;
}
/*
.meritarea .meritbox a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
*/

.meritarea .meritbox img{
	/*width:100%;
	max-width:300px;*/
	width:50%;
	text-align:center;
	margin:10px 0;
}
	
.meritarea .meritbox p{
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	color: #004386;
	padding: 5px 10px 20px;
	margin:0;
}
/*利用シーン*/
.usagearea{
}
.usagearea .usagebox{
 width:100%;
 border:2px solid #cecece;
 text-align:center;
 margin-top:30px;
 text-align: center;
 position:relative;
}
.usagearea .usagebox:hover{
	border:2px solid #004386;
}
.usagearea .usagebox img{
	width:100%;
	text-align:center;
	margin: 0;
}
	
.usagearea .usagebox p{
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	color: #004386;
	padding: 5px 10px 20px;
	margin:0;
}




.sean_detail {
	width: 225px;
    background-color: #004386;
    padding: 30px 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #063796;
    display: block;
    position: relative;
    cursor: pointer;
    float: right;
		overflow:hidden;
}

.sean_detail:hover{
	background-color:#176abc;
}

.sean_detail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top:16px;
		color:#FFF;
}

.link_component a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow_w.png);
    margin-left: 10px;
}

table.reasonable{
	width:100%;
}
table.reasonable td{
	text-align:center;
	vertical-align:middle;
	font-size:18px;
	font-weight:bold;
	line-height:1.3em;
}
table.reasonable .wi1{
	width:40%;
}
table.reasonable .wi2{
	width:60%;
}

table.reasonable td .tax{
	font-size:12px
}
table.reasonable td .big{
	font-size:20px
}
table.reasonable td.or1{
	background-color:#ec7720;
	color:#FFF;
}
table.reasonable td.or2{
	background-color:#fdf1a2;
}
table.reasonable td.gr1{
	background-color:#595959;
	color:#FFF;
}
table.reasonable td.gr2{
	background-color:#f0f0f0;
}



.bizseanarea{
		margin-bottom: 100px;
    overflow: hidden;
}
		
.bizseanarea .box{
	width:100%;
	margin-bottom:15px;
}

.bizseanarea .box p{
	background-color: #004386;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 10px 0px;
	font-size: 18px;
}
.bizseanarea .box img{
	width:100%;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
}



/*-----動画----------*/
.mov {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
}

.mov p {
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 16px;
}

.mov iframe{
	border:1px solid #ccc;
}
/*-----特徴----------*/


.merit_titlearea {
    overflow: hidden;
    border-bottom: solid 3px #214a7b;
    padding-bottom: 2px;
}

.point_box {
    width: 100%;
    height: 40px;
    background-color: #214a7b;
    color: #FFF;
    float: left;
    font-size: 1.2em;
    padding: 3px;
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 5px;
}

.fs15em {
    font-size: 1.5em;
}

.point_title {
    float: left;
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
		margin-bottom: 0;
		line-height:1.5em;
}

.point_img {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.point_txt {
    width: 100%;
    float: left;
    font-size: 15px;
    line-height: 1.5em;
    margin-top: 20px;
		margin-bottom: 50px;
}

.point_txt  p{
	border: 1px solid #ccc;
    padding: 12px 6px;
    font-size: 11.5px;
		margin-top:10px;
}


/*-----利用シーン----------*/
.seanboxarea{
		margin-bottom: 100px;
    overflow: hidden;
}
		
.seanboxarea .box{
	width:100%;
	margin-bottom:40px;
	border: 1px solid #ccc;
	float:left;
	padding:1px;
}

.seanboxarea .box img{
	width:100%;
}

.seanboxarea .box p{
	background-color: #004386;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 10px 0px;
	font-size: 20px;
}


.seanboxarea .box span{
	padding: 15px 10px;
	line-height: 1.3em;
	display: block;
	font-size: 15px;
}



/*--料金 --*/

.h2small{
	font-size:18px;
}

.plan_out_box {
    background-color: #d7e5f4;
    width: 100%;
    padding: 20px;
    overflow: hidden;
    margin: 0 auto;
}
.plan_in_01{
	width:100%;
	background-color:#FFF;
}

.plan_in_01_in {
    float: left;
    width: 435px;
    padding: 0px;
    margin-left: 20px;
    margin-right: 0px;
}
.plan_in_01_in:nth-of-type(2) {
		margin-right: 0px;
}

.plan_in_02 {
	width:920px;
	background-color:#FFF;
	padding: 15px 0;
}

.plan_in_01_in dt {
    float: left;
    padding: 5px;
    height: 30px;
}

.plan_in_01_in dt .pricearea{
	float:left;
}
.plan_in_01_in dt .plabel{
	background-color:#fdd5b3;
	padding:5px 10px;
	font-weight:bold;
	font-size:18px;
	margin-right: 10px;
}

.plan_in_01_in dd {
    margin-top: 5px;
}

.price_top_box {
    overflow: hidden;
    width: 97%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height:1.3;
}

.price_bottom_txt {
    padding: 20px 20px 20px 155px;
		font-size: 18px;
}

.price_bottom_txt .label{
	position:relative;
}
.price_bottom_txt .label:before{
	content: "●";
    font-size: 10px;
    padding-right: 5px;
		position: absolute;
    top: 7px;
    left: -13px;
}

dl.chargetxt{
	margin-top:10px;
	font-size: 15px;
}
dl.chargetxt dt{
	width:20px;
	float:left;
}
dl.chargetxt dd{
	margin-left:20px;
	margin-bottom:20px;
	line-height:1.3em;
}

table.charge{
	width:100%;
	margin-bottom: 15px;
}

table.construction{
	margin-bottom: 100px;
}
table.charge th,
table.charge td,
table.construction th,
table.construction td{
	text-align:center;
	vertical-align:middle;
}


table.charge td ul{
	margin-left:-20px;
	margin-top:0;
	margin-bottom:0;
}
table.charge td ul li{
	text-align:left;
}

table.construction th{
	width:50%;
}

p.charge_cap{
	padding-left:1em;
	text-indent:-1em;
	margin-top:10px;
}

dl.charge_capdl{
	margin-left:20px;
}
dl.charge_capdl dt{
	float:left;
	line-height:1.3em;
}
dl.charge_capdl dd{
	margin-left:10px;
	line-height:1.3em;
}



/*-よくある質問ー*/

.faqnavi {
    width: 100%;
    background-color: rgb(247,247,247);
    text-align: center;
    display: table;
    margin-bottom: 50px;
}

.faqnavi .faxtxtbox {
    width: 100%;
    margin: 0 auto;
}

.faqnavi .textlink {
    line-height: 3em;
    font-weight: bold;
    width: 100%;
}

.faqnavi .faqselect {
    background-color: rgb(139,24,109);
    color: #FFF;
    padding: 5px;
}

.faqnavi .textlink {
    line-height: 3em;
    font-weight: bold;
    width: 100%;
}


.faqlist {
    line-height: 1.7em;
    width: 100%;
    margin: 0 auto;
}

.faqlist dl {
    line-height: 2.5em;
}

.faqlist dl dt {
    float: left;
    color: #004386;
}

.faqlist dl dd {
    margin-left: 40px;
}

.lasttbl{
  margin-bottom:100px;
}


.faqanser {
    width: 100%;
    margin-top: 50px;
}

.faqanser .qtitle {
    font-size: 1.5em;
		line-height: 1.3em;
    margin: 15px 0;
    background: #004386 !important;
    color: #fff !important;
    padding: 13px 10px!important;
    overflow: hidden !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.faqanser .qanser {
    font-size: 16px;
    line-height: 1.4em;
    margin-left: 40px;
}


.faqanser .qanser dl dt{
	width:20px;
	float:left;
}
.faqanser .qanser dl dd{
	margin-left:20px;
}

.faqanser .qanser dl dt.nodt{
	width:25px;
	float:left;
}
.faqanser .qanser dl dd.nodd{
	margin-left:25px;
}

.faqanser .qanser dl.wide dt{
	width:48px;
}
.faqanser .qanser dl.wide dd{
	margin-left:48px;
}

/*-追従ボタン２ー*/
.contact_bt2smt{
	position:fixed;
	right:20px;
	bottom:65px;
	z-index:901;
}
.contact_bt2smt{
	background:#ffd601;
	border:2px solid #004386;
	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); 
}
.contact_bt2smt a{
	text-decoration:none;
	color:#193477;
	font-size:18px;
	font-weight:bold;
}

.contact_bt2smt a:after {
	content: url(/content/dam/nttcom/hq/cmn/img/icon_right_arrow.png);
	margin-left: 10px;
}

.contact_bt2smt:hover,
.contact_bt:hover{
		background: #fdea8a;
	}



/*-フッター*/

.inquary {
    background-color: #004386;
    color: #FFF;
    font-size: 1.5em;
    padding: 15px;
    margin: 50px 0 30px;
    text-align: center;
    font-weight: bold;
}


.btmcontact_bt {
    width: 90%;
    margin: 0 auto;
    height: 65px;
    text-align: center;
    font-family: FrutigerNeueLTW10-Bold,Frutiger Neue W01 Bd,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px;
    position: relative;
    background: #cc023a !important;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    border-image: initial;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}


.btmcontact_bt a {
    text-decoration: none;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    padding-top: 13px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btmcontact_bt a span {
    line-height: 38px;
}

.btmcontact_bt a:after {
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .5em;
	height: .5em;
	/* border-top: .13em solid #004386; */
	/* border-right: .13em solid #004386; */
	border-top: .13em solid #fff!important;
	border-right: .13em solid #fff!important;
	transform: rotate(45deg);
/*
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow_b.png);
    position: absolute;
    margin-left:20px;
    top: 22px;
*/
}


.footlonk{
	border-top: solid 2px #05397c;
	text-align: center;
}
 
.footlonk ul li{
	display:inline;
	font-size: 1.1em;
	padding-left: 15px;
	padding-right: 15px;
}

.footlonk ul{
	margin:0;
	-webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
		-webkit-padding-start: 0px;
}

.footlonk ul li{
	display:block;
	/*width:100%;*/
	text-align: left;
	line-height: 1.5;
}

.footlonk ul li a:before {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow.png);
    margin-right: 10px;
}

.footlonk ul li.on{
	display:block;
	width:90%;
		background-color: #004386;
		border-left: none;
}

.footlonk ul li.on a{
	color:#FFF;
	}

.footlonk ul li.on a:before {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow_w.png);
}




}



@media only screen and (max-width: 480px){

		.pc{
			display:none !important;
		}

		.merit_out_box{
			width:100%;
			margin:0 auto;
		}
		




}

/*---------------------------------
コピー元を調整
/etc/designs/nttcom/hq/jp/business/services/application/online-storage/box/css/box_jp.css
---------------------------------*/

/* PC */
@media only screen and (min-width: 740px) {
	.sharebox{
		margin-top:85px;

	}
	.sharebox p.title{
		font-size:1.5em;
		font-weight:bold;
		text-align:center;
	}


	.sharebox dl{
		padding: 20px 110px;
	}

	.sharebox dt {
	    float: left;
	    padding: 5px;
	    vertical-align: middle;
	    height: 30px;
	}

	.sharebox dt img{
		padding-top: 6px;
	}


	.sharebox dd {
	    margin-left: 30px;
	    font-weight: bold;
	    padding: 5px 5px 5px 30px;
	    margin-top: 5px;
	    height: 45px;
	    font-size: 1.2em;
	}

	.sharebox .uparea,.sharebox .lowarea{
		background-color: #d7e5f4;
		overflow: hidden;
	}

	.sharebox .uparea .inner{
		background-color: #fff;
		margin: 40px 40px 0 40px;
	}

	.sharebox .lowarea .inner{
		background-color: #fff;
		margin: 40px;
		/*padding: 20px 5px;*/
		padding: 20px 5px 0;
		overflow: hidden;
		
	}

	.sharebox_title {
	    width: 980px;
	    padding: 9px 0 2px;
	    background-color: #255997;
	    color: #fff;
	    font-size: 1.4em;
	    font-weight: bold;
	    text-align: center;
	    display: table-cell;
	    vertical-align: middle;
	}

	.sharebox_title span{
		font-size:1.5em
	}

	.sharebox_title:after {
	    content: "";
	    position: relative;
	    top: 16px;
	    left: 50%;
	    margin-left: -15px;
	    display: block;
	    width: 0px;
	    height: 0px;
	    border-style: solid;
	    border-width: 15px 15px 0 15px;
	    border-color: #255997 transparent transparent transparent;
	}


	.sharebox .lowbox{
		float:left;
		width:445px;
	}

	.sharebox .lowbox p{
		display:block;
		float:left;
		font-size:15px;
		padding-bottom: 10px;
	}

	.sharebox .lowbox p span{
		font-weight:bold;
		font-size:16px;
	}

	.sharebox .lowbox p.comment{
		width: 380px;
	    padding-top: 14px;
	    padding-left: 5px;
	}
}
/* スマホタブレット */
@media only screen and (max-width: 739px) {
	.sharebox{
		margin-top:70px;

	}
	.sharebox p.title{
		font-size:1.2em;
		font-weight:bold;
		text-align:center;
	}


	.sharebox dl{
		padding: 20px 10px;
	}

	.sharebox dt {
	    float: left;
	    padding: 5px;
	    vertical-align: middle;
	    height: 30px;
	}

	.sharebox dt img{
		padding-top: 6px;
	}


	.sharebox dd {
	    margin-left: 30px;
	    font-weight: bold;
			line-height: 1.4em;
	    padding: 5px;
	    margin-top: 5px;
	    font-size: 1em;
	}

	.sharebox .uparea,.sharebox .lowarea{
		background-color: #d7e5f4;
		overflow: hidden;
	}

	.sharebox .uparea .inner{
		background-color: #fff;
		margin: 20px 20px 0 20px;
	}

	.sharebox .lowarea .inner{
		background-color: #fff;
		margin: 20px;
		/*padding: 20px 5px;*/
		padding: 20px 5px 0;
		overflow: hidden;
		
	}

	.sharebox_title {
	    width: 100%;
	    padding: 9px 0 2px;
	    background-color: #255997;
	    color: #fff;
	    font-size: 1.2em;
			line-height: 1.5em;
	    font-weight: bold;
	    text-align: center;
	    display: table-cell;
	    vertical-align: middle;
	}

	.sharebox_title span{
		font-size:1.5em
	}

	.sharebox_title:after {
	    content: "";
	    position: relative;
	    top: 17px;
	    left: 50%;
	    margin-left: -15px;
	    display: block;
	    width: 0px;
	    height: 0px;
	    border-style: solid;
	    border-width: 15px 15px 0 15px;
	    border-color: #255997 transparent transparent transparent;
	}


	.sharebox .lowbox{
		float:left;
		width:100%;
	}

	.sharebox .lowbox p{
		display:block;
		float:left;
		font-size:15px;
		padding-bottom: 10px;
	}

	.sharebox .lowbox p span{
		font-weight:bold;
		font-size:16px;
	}

	.sharebox .lowbox p.comment{
		/*width: 200px;*/
		width:calc(100% - 65px);
	    padding-bottom: 21px;
	    padding-left: 8px;
	}
}





/*利用シーンタブ
---------------------------------*/
.casebox{
	display:table;
	margin-top: 20px;
	margin-bottom:80px;
}
/*
.casebox .box,.casebox .cbox{
	display:table-cell;
	width: 50px;
    vertical-align: middle;
    text-align: center;
	
}*/
.casebox .box{
	display:table-cell;
    vertical-align: top;
    text-align: center;
}
.casebox .cbox{
	display:table-cell;
	width: 50px;
    vertical-align: middle;
    text-align: center;
}

.casebox .box{
	width:465px;
	border:solid 1px #ccc;
	margin-top:15px;
}

.casebox .box img{
	width:300px;
}


.casebox .box img.case2{
	width:390px;
}

.casebox .box .title_L{
	background-color: #e3e3e3;
    margin: 2px;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}

.casebox .box .title_R{
	background-color: #eaf5fc;
    margin: 2px;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}

.casebox .box ul{
	margin-left:0px;
}

.casebox .box ul li{
	text-align:left;
}


.casebox .cbox .arrow{
	 width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #ebebeb;
    margin-left: 15px;
}
/* スマホタブレット */
@media only screen and (max-width: 739px) {
	.casebox{
		margin-top: 20px;
		margin-bottom:80px;
	}

	.casebox .box,.casebox .cbox{
		display:block;
		width: 50px;
	    margin: 0 auto;
	    margin-top: 20px;
		
	}


	.casebox .box img{
		margin-top:15px;
		width: 100%;
	}


	.casebox .box{
		width:100%;
		border:solid 1px #ccc;
		margin-top:15px;
		text-align: center;
	}

	.casebox .box .title_L{
		background-color: #e3e3e3;
	    margin: 2px;
	    font-size: 18px;
	    font-weight: bold;
	    padding: 10px 0;
			text-align: center;
	}

	.casebox .box .title_R{
		background-color: #eaf5fc;
	    margin: 2px;
	    font-size: 18px;
	    font-weight: bold;
	    padding: 10px 0;
	}

	.casebox .box ul{
		margin-left: -10px;
	}

	.casebox .box ul li{
		padding-right: 15px;
	    text-align: justify;
	    text-justify: inter-ideograph;
	}


	.casebox .cbox .arrow{
		width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 20px 20px 0 20px;
	    border-color: #ebebeb transparent transparent transparent;
	}
}

/*特長メリット*/
.pointImg img{
	width:100%;
}

.scroll-box table {
    width: 980px !important;
}


@media only screen and (max-width: 739px) {
.scroll-box table {
    width: 100%!important;
}

}

/*---------------------------------
2021.06
---------------------------------*/

/*動画*/
.mov_area {
	width:100%;
	margin:0 auto;
}
@media only screen and (max-width: 768px){
	.mov_area {
		width:100%;
	}
}
.mov {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.mov iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
.mov_area.w80p{
	width:80%;
}
.mov_area.w90p{
	width:90%;
}
@media only screen and (max-width: 768px){
	.mov_area.w80p,
	.mov_area.w90p{
		width:100%;
	}
}

/*オプション*/
.option_fs{
	display:inline-block;
	padding:7px 0 0 0;
}
.option_2col_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.option_txt_area{
	width: 55%;
}
.option_image_area{
	width:43%;
}
@media only screen and (max-width: 768px){
	.option_txt_area,
	.option_image_area{
		width: 100%;
	}
}
.option_txt_area img{
	max-width:150px !important;
}
.option_image_area img{
	width:100%;
}

.congestion_2col_area{
	width: 80%;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
@media only screen and (max-width: 768px){
	.congestion_2col_area{
		width:100%;
	}
}
.congestion_txt_area{
	width:100%;
}
.congestion_image_area01{
	width:55%;
}
.congestion_image_area02{
	width:42%;
}
.congestion_image_area01 img,
.congestion_image_area02 img{
	width:100%;
}
.option_table_area table{
	width:980px !important;
	line-height:140%;
}
.option_table_area caption{
	text-align:center;
	font-size:24px;
	line-height:1.3;
	margin-bottom:20px;
}
.option_table_area .function{
	width:12em;
}


.information h3 {
  font-size: 20px;
  margin: 32px 0 16px 0
}

.information table {
  margin: 16px 0
}

.information-date {
  width: 8em
}

.information-new {
  color: #f20000;
  margin-left: 8px
}

.information-link {
  font-size: 14px;
  margin-top: 16px;
  text-align: right
}


.information td, .information th {
  border: none;
  border-bottom: 1px #e6e6e6 solid;
  border-top: 1px #e6e6e6 solid;
  line-height: 1.4;
  padding: 12px
}

.information th {
  background-color: #f8f8f8;
  border-bottom: 1px #d6d6d6 solid;
  border-top: 1px #d6d6d6 solid;
  font-weight: 700;
  white-space: nowrap
}
.information-list-date{
  white-space: nowrap
}


.information dl {
	border-bottom: 1px solid #eee;
	padding: 18px 0;
	line-height:140%;
}
.information dt {
	display: inline-block;
	width: 22%;
	vertical-align: top;
}
.information dd {
	display: inline-block;
	width: 77%;
	vertical-align: top;
}
.information_sec p{
	margin-bottom:40px;
}
@media only screen and (min-width: 0px) and (max-width: 769px) {

	.information dt {
		display: block;
		width: auto;
	}
	.information dd {
		display:  block;
		width: auto;
	}
}

/*---------------------------------
2021.10
---------------------------------*/
/*お知らせ*/
.fig_ttl li{
	margin-left:-1.2em;
}
.col_2{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.col_2 > div{
	width: 49%;
	margin-bottom:20px;
	position:relative;
	padding-bottom:30px;
}
.col_2 > div img{
	width: 100%;
}
.col_2 > div figcaption{
	text-align:center;
	position:absolute;
	left:50%;
	bottom:0;
}
@media screen and (max-width: 480px) {
	.col_2 > div{
		width: 100%;
	}
}
/*---------------------------------
2021.12
---------------------------------*/
/*お知らせ 2021-06-30*/
.info_col{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.info_col .txt{
	width: 53%;
}
.info_col .pic{
	width: 45%;
}
.info_col .pic img{
	width: 100%;
}
.info_col .pic figcaption{
	font-size:18px;
	text-align:right;
	margin:30px 0 10px 0;
}

@media screen and (max-width: 480px) {
	.info_col .txt,
	.info_col .pic{
		width: 100%;
	}
	.info_col .pic figcaption{
		margin:0 0 10px 0;
	}
}
/*---------------------------------
2022.01
---------------------------------*/
/*お知らせ 2022-1-24*/
.link_component.news a:after {
    content: url(/content/dam/nttcom/hq/jp/business/services/application/ai/cotoha-ma/img/icon_right_arrow.png);
    margin-left: 10px;
}

/*PDF埋め込み*/
.pdf_preview iframe[src$=".pdf"]{
	width:880px;
	height:665px;
	border:1px solid #CCC;
}
@media only screen and (max-width: 768px){
.pdf_preview iframe[src$=".pdf"]{
	width: 100%;
	height:50vh;
	}
}

/*---------------------------------
2022.02
---------------------------------*/
#connect-x h3 {
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
#connect-x h3:after {
	content: "";
	flex-grow: 1;
	border-top: dashed 1px #0E367D;
	display: block;
}
#connect-x h3::before {
	margin-right: 15px;
}
#connect-x h3::after {
	margin-left: 15px;
}
#connect-x h3:after {
	margin-left: .4em;
}

#connect-x h4,
#connect-x h5 {
	display: inline-block;
	font-weight: bold;
	color: #0070C0;
	border: solid 2px #0070C0;
	padding: 5px 10px;
}
#connect-x h4 {
    display: block;
    width: 130px;
    max-width: 100%;
    padding: 10px;
    background-color: #3490FF;
	border: none;
    color: #fff;
    box-shadow: 2px 2px 4px #666;
    text-align: center;
    line-height: 12px;
    text-decoration: none;
    border-radius: 24px;
}
#connect-x h5 {
	margin-bottom: 10px;
}

/*---------------------------------
2022.03
---------------------------------*/

/*申し込みボタンエリア*/
.apply_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.apply_area > div{
	width: 48%;
}
/* スマホタブレット */
@media only screen and (max-width: 768px){
	.apply_area > div{
		width: 100%;
	}
}
/*角丸*/
.apply_btn{
	position: relative;
	width:100%;
	padding:10px 20px;
	text-align: center;
	line-height: 1.25;
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}
/*オンライン*/
/*オンライン*/
.online_btn{
	background: #ffd601!important;/*赤#CF1E1Eを黄色に*/
	border: 2px solid #000000!important;/*臙脂600000を紺に*/
	text-decoration: none;
	color: #000000!important;/*白FFFFを紺に*/
}
.online_btn:hover{
	background: #fdea8a;;/*薄赤#D64040を薄黄色に*/
}
/*オンライン　くの字*/
.online_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	/* border-top: .13em solid #fff; */
	/* border-right: .13em solid #fff; */
	border-top: .13em solid #000000!important;
	border-right: .13em solid #000000!important;
	transform: rotate(45deg);
}
/*問い合わせ*/
.request_btn{
	background: #cc023a!important;/*黄#ffd601;からドコモ赤に*/
	border: 2px solid #000000!important;/*青#004386;から臙脂に*/
	text-decoration: none;
	color: #FFFFFF!important;/*紺#004386;を白に*/
}
.request_btn:hover{
	background: #cc023a!important;/*薄黄#fdea8aを薄赤に*/
}
/*資料請求　くの字*/
.request_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	/* border-top: .13em solid #004386; */
	/* border-right: .13em solid #004386; */
	border-top: .13em solid #fff!important;
	border-right: .13em solid #fff!important;
	transform: rotate(45deg);
}
/*下部 大ボタン*/
.narrow_area{
	width:880px;
	margin:0 auto;
}
@media screen and (max-width: 768px){
	.narrow_area{
		width:100%;
	}
}
.big_btn{
	font-size: 22px;
	padding: 15px 20px;
}
.online_btn.big_btn:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0.1em;
	right: 1em;
	margin: auto;
	width: 0.5em;
	height: 0.5em;
	border-top: 0.15em solid #fff;
	border-right: 0.15em solid #fff;
	transform: rotate(45deg);
}
.request_btn.big_btn:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0.1em;
	right: 1em;
	margin: auto;
	width: 0.5em;
	height: 0.5em;
	border-top: 0.15em solid #004386;
	border-right: 0.15em solid #004386;
	transform: rotate(45deg);
}

/*---------------------------------
追従ボタン*/
.js-contact_bt_1,
.js-contact_bt_2{
	font-weight:bold;
}
.js-contact_bt_2{
/*	text-align:center;*/
}

/** ========================================
  ラインナップ
 ======================================== */
.lineup_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*margin-top:53px;*/
	margin-top:30px;
}
.lineup_box{
	width:48%;
	border:1px solid #CCC;
	margin-bottom:20px;
}
.lineup_ttl{
	padding:15px;
	font-size:22px;
	font-weight:bold;
	text-align:center;
	background-color:#DAE3F3;
}
.lineup_subttl{
	margin:30px 15px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.lineup_products{
	text-align:center;
	margin-bottom:10px;
}
.lineup_products img{
	width:105px;
      vertical-align: bottom;
}
.lineup_detail_area{
	padding:20px 30px 5px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
}
.lineup_detail_ttl{
	width:30%;
	background-color:#DAE3F3;
	font-size:17px;
	text-align:center;
	padding:8px 0;
	margin-bottom:15px;
}
.lineup_detail_price{
	width:calc( 100% - 35%);
	font-size:24px;
	font-weight:bold;
	margin-bottom:15px;
}
.lineup_detail_price span{
	font-size:16px;
	font-weight:bold;
}
.lineup_notes{
	width:100%;
	font-size:12px;
	line-height:1.5;
	margin-bottom:15px;
}
.lineup_detail_link{
	width: 100%;
	margin-bottom: 15px;
}
.lineup_detail_link a{
	position: relative;
	display: inline-block;
	width: 100%;
	border-radius: 10px;
	background: #004386;
	color: #fff;
	padding: 13px 20px;
	text-align: center;
}
.lineup_detail_link a span{
	position: relative;
	display: inline-block;
	width: 100%;
	/*padding: 0 20px;*/
	padding: 5px 20px;
	font-size: 18px;
	font-weight: bold;
}
.lineup_detail_link a span::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	/*
	width: 15px;
	height: 15px;
	*/
	width: 12px;
	height: 12px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg);
}

.lineup_detail_link-red a{
  background: #C00000;
}

.lineup_detail_spec{
	width:calc( 100% - 35%);
	font-size:16px;
	font-weight:bold;
	margin-bottom:15px;
}
.lineup_detail_line{
	border-bottom:1px solid #CCC;
	width:calc(100% - 60px);
	margin:0 auto;
}
.lineup_detail_lead{
	font-size:20px;
	font-weight:bold;
	text-align:center;
}

@media screen and (max-width: 768px){
	.lineup_box{
		width:100%;
	}
}
@media screen and (max-width: 480px){
	.lineup_detail_price{
		text-align:center;
	}
}

/** ========================================
  モーダル見た目追加 20220202
 ======================================== */
.modal_box{
  padding: 15px;
}
.modal_box *{
  line-height: 1;
}
.modal_box .lineup_detail_link-red a{
  background: #ffd601!important;
  border: 3px solid #000000;
   color: #000000!important;
/*      height: 60px;*/
}
.modal_box .lineup_detail_link-red a span:after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	border: solid #000;
	border-width: 0 3px 3px 0;
	-webkit-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg);
}

.modal_box .lineup_notes{
  min-height: 36px;
  line-height: 1.5;
}
/*2022.03*/
@media screen and (min-width:769px) and ( max-width:1062px){
	.modal_box .lineup_subttl{
		margin:30px 0;
		font-size: 16px;
	}
}
.modal_ttl{
	font-size:21px;
	font-weight:bold;
	text-align:center;
	line-height:1.4;
	margin:3px 0 0 0;
}
@media screen and (max-width: 480px){
	.modal_ttl{
		margin:15px 0 0 0;
	}
}
.modal_box .lineup_detail_link-red a:hover{
	opacity:.7;
}
.sp_only{display:none;}
@media screen and (max-width: 480px){
	.sp_only{display:block;}
}
.tab_only{display:none;}
@media screen and (min-width:481px) and ( max-width:1062px) {
	.tab_only{display:block;}
}

.contact_bt{
    padding: 12px 20px 12px 20px;
}

/* 0811追加 */
.fs16em {
    font-size: 1.6em;
}
.operator_box {
	display: flex;
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px #FFC000;
	background-color: #FFF;
	align-items: center;
}
.operator_box figure {
	margin-right: 10px;
	width: 60px;
	height: 60px;
}
.operator_box figure img {
	min-width: 60px;
	max-width: 100%;
	vertical-align: middle;
}
.wrapper .p-facade.mv__photo .c-inner .p-facade__wrap{
    width: 65%!important;
    max-width: 800px!important;
}
.freecall_box{
    margin-right:10px;
}
.p-facade__title{
    max-width:650px;
}
.freecall__wrap{
    margin-top:10px;
}
.information dl{
    padding:10px 0;
}
.information h3{
    margin-top:0;
    margin-bottom:10px;
}
@media screen and (max-width: 768px){
    .wrapper .p-facade.mv__photo .c-inner .p-facade__wrap {
        width: 100%!important;
        max-width: none;
    }
    .freecall_box{
        margin-right:0px;
        margin-bottom:10px;
    }
}