@charset "UTF-8";


/* =========================================================
 *
 * リストボックス
 *
* ====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

ul {list-style: none;margin: 0;padding: 0;}
main {font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;}
main h1,main h2,main h3,main h4,main h5,main h6{
	font-family:'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
}


/* =========================================================
 * 共通style
* ====================================================== */
/* ------------------------------ */
/* parts */
/* ------------------------------ */
.no-sp {display: block;}
.no-pc {display: none;}

/*btn*/
[class^="btn-"],
[class*=" btn-"] {font-weight: bold;display: inline-block;padding: 1em;transition: .3s;}
.btn-yellow {background-color: #fed33e;color: #0e367d;}
.btn-yellow:hover {background-color: #fde94a;}
/*
.btn-yellow[target="_blank"]:after {content: '';display: inline-block;width: .8em;height: .8em;margin-left: .8em;background: url(/content/dam/nttcom/hq/jp/business/services/cmn/img/cmn-i-blank.png) center / cover no-repeat;}
*/
.btn-white {background-color: #fff;color: #0e367d;}
.btn-white:hover {background-color: rgba(255, 255, 255, 0.7);}
.btn-blue {background-color: #0e367d;color: #fff !important;}
.btn-blue:hover {background-color: #2558b3;}


/*icon*/
[class^="ic-"]:before,
[class*=" ic-"]:before {content: '';display: inline-block;width: 1em;height: 1em;background: center / contain no-repeat;margin-right: .4em;vertical-align: middle;}
.ic-ar-right {position: relative;padding-right: 2em;}
.ic-ar-right:before {width: .8em;height: .8em;position: absolute;right: 1em;top: 0;bottom: 0;margin: auto;background-image: url(/content/dam/nttcom/hq/jp/business/services/cmn/img/cmn-i-arrow-right-white.png);transition: .3s;}
.ic-ar-right:hover:before {transform: translateX(3px)}
.ic-mail:before {background-image: url(/content/dam/nttcom/hq/jp/business/services/cmn/img/cmn-i-mail.png);}
.ic-cart:before {background-image: url(/content/dam/nttcom/hq/jp/business/services/cmn/img/cmn-i-cart.png);margin-bottom: 3px;}

/* ------------------------------ */
/* section */
/* ------------------------------ */
section .cmn-ttl {font-size: 30px;text-align: center;margin-bottom: 50px;}
section.bg-gray {position: relative;background-color: #f5f7f9;margin-bottom: 60px;}

/* ------------------------------ */
/* service-list */
/* ------------------------------ */
.service-list {display: flex;flex-wrap: wrap;}
.service-list li {display: flex; flex-direction: column; width:100%; /* IE11のバグ対策 */}
/*
.service-list li figure:not(.mask-img) {box-sizing: border-box;width: 100%;padding-bottom: 60%;background: center / cover no-repeat;position: relative;}
.service-list li figure:not(.mask-img):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid rgba(0,0,0,0.01);box-shadow:0 0 10px 1px rgba(150,150,150,0.1) inset;box-sizing:border-box}
*/
.service-list li .tag {text-align: right;margin-top: -1.5em;z-index: 1;position: relative;}
.service-list li .tag p {font-size: 12px;color: #fff;background-color: #161616;padding: 1em;margin: 0; display: inline-block;}
.service-list li .txt h3 {font-size: 20px;font-weight:bold;margin: 1em 0;}
.service-list li .txt p {font-size: 14px;color:#333;}
.service-list li .mask-img svg {width: 100%;}
.service-list li .mask-img + .txt h3 {margin: 10px 0 15px;}
.service-list .button-box {/*margin-top: 20px;*/display: flex;flex-wrap: wrap;}
.service-list .button-box.d-flex {display: flex;}
.service-list .button-box.d-flex a {flex: 1;}
.service-list .button-box a {display: block;text-align: center;font-size: 14px;width: 100%;}
.service-list .button-box .btn-yellow {flex: 1;/*border-bottom: 1px solid #2558b3;*/}
.service-list .button-box .btn-yellow + .btn-yellow {border-left: 1px solid #2558b3;box-sizing: border-box;}

/*col*/
.service-list.col-4 li,
.service-list.col-3 li {box-shadow: 0 0 10px rgba(0,0,0,0.1);box-sizing: border-box;border: 1px solid #fff;}
.service-list.col-4 li .detail-box,
.service-list.col-3 li .detail-box {padding: 15px 15px 35px;}
.service-list.col-4 li a figure,
.service-list.col-3 li a figure {transition-duration: .3s;}
.service-list.col-4 li a:hover figure,
.service-list.col-3 li a:hover figure {opacity: .7;}
.service-list.col-4 .button-box .btn-yellow,
.service-list.col-3 .button-box .btn-yellow {font-size: 12px;padding-left: 2px;padding-right: 2px;}

/*追記*/
.detail-box{
	background-color:#FFF;
}
.mask-img img{
	width:100%;
}
img.line{
	border:1px solid #DDD;
}
.service-list.col-4 li figure a,
.service-list.col-3 li figure a,
.service-list.col-4 li .txt a h3,
.service-list.col-4 li .txt a p,
.service-list.col-3 li .txt a h3,
.service-list.col-3 li .txt a p,
.service-list.col-3 li .detail-box .wp_txt a h3,
.service-list.col-3 li .detail-box .wp_txt a p {transition-duration: .3s;}

.service-list.col-4 li figure a:hover,
.service-list.col-3 li figure a:hover,
.service-list.col-4 li .txt a:hover h3,
.service-list.col-4 li .txt a:hover p,
.service-list.col-3 li .txt a:hover h3,
.service-list.col-3 li .txt a:hover p,
.service-list.col-3 li .detail-box .wp_txt a:hover h3,
.service-list.col-3 li .detail-box .wp_txt a:hover p {opacity: .7;}


/* =========================================================
* for PC
* ====================================================== */
@media screen and (min-width: 769px) {
  /* ------------------------------ */
  /* service-list */
  /* ------------------------------ */
  .service-list.col-3 {margin-right: -40px;}
  .service-list.col-3 li {width: calc(33.33% - 40px);margin-right: 40px;}
  .service-list.col-3 li:nth-child(n+4) {margin-top: 40px;}
  .service-list.col-3 li h3 {font-size: 15px;font-weight:bold;}
  
  .service-list.col-4 {margin-right: -40px;}
  .service-list.col-4 li {width: calc(25% - 40px);margin-right: 40px;}
  .service-list.col-4 li:nth-child(n+5) {margin-top: 40px;}
  .service-list.col-4 li h3 {font-size: 15px;font-weight:bold;}
}


/* =========================================================
* for SP
* ====================================================== */
@media screen and (max-width:768px) {
  body{min-width:320px;}
  main{font-size: 14px;}
  main .container {padding: 40px 5%;}
  
  .no-sp {display: none;}
  .no-pc {display: block;}
  
  [class^="btn-"], [class*=" btn-"] {padding-left: 5px;padding-right: 5px;}
  .ic-ar-right:before {right: 5px;}

  /* ------------------------------ */
  /* service-list */
  /* ------------------------------ */
  .service-list {display: block;}
  /*.service-list:not(.col-4) li + li {border-top: 1px solid #ccc;padding-top: 30px;}*/
  .service-list:not(.col-4) li {margin-bottom: 30px;}
  .service-list.col-4 li:nth-of-type(n+3) {margin-top: 30px;}
  .service-list li:last-child {margin-bottom: 0;}
  .service-list li .tag p {padding: 2%;}
  /*
  .service-list:not(.col-4) li .detail-box {display: flex;align-items: flex-start}
  */
  .service-list li .detail-box figure {width: 100%;margin: 0 auto 10px}
  .service-list li .detail-box figure.mask-img {padding-bottom: 0;}
  /*
  .service-list:not(.col-4) li .detail-box .txt {flex: 1;margin-left: 10px;}
  */
  .service-list li .txt h3 {margin: 0 0 10px ;font-size: 14px;}
  .service-list li .txt p {font-size: 12px;}
  .service-list li .mask-img + .txt h3 {padding-right: 0;margin-top: 0;}
  .service-list .button-box a {flex: 1;font-size: 12px;letter-spacing: -.05em;display: flex;align-items: center;justify-content: center;}
  .service-list .button-box .btn-yellow {border-bottom: none;}
  .service-list.col-2 li .button-box a {width: 100%;flex: inherit;}
  .service-list.col-2 li .button-box .btn-yellow {flex: 1;}
  .service-list.col-2 li .txt {padding-bottom: 20px;}
  .service-list.col-4 {display: flex;flex-wrap: wrap;}
  .service-list.col-4 li {width: 47%;margin-left: 6%;}
  .service-list.col-4 li:nth-child(odd) {margin-left: 0;}
  .service-list.col-4 li .detail-box {padding: 10px;}
  .service-list.col-4 .button-box {flex-direction: column;}
  .service-list.col-4 .button-box a {padding: .5em;}
  .service-list.col-4 .button-box .btn-yellow {border: none;/*border-bottom: 1px solid #2558b3;*/}
  .service-list.col-4 .button-box .btn-yellow + .btn-yellow {border-top: 1px solid #2558b3;;}
  .service-list li .tag + .txt h3 {margin-top: 1em;}
}


@media screen and (max-width: 400px) {
  /* ------------------------------ */
  /* service-list */
  /* ------------------------------ */
  .service-list li .txt h3 {font-size: 14px;}
  .service-list .button-box a {font-size: 11px;}
  .service-list.col-4 .button-box .btn-yellow {font-size: 11px;}
}






/* =========================================================
 *
 * リストボックス以外
 *
 * ====================================================== */

/* ページ内リンクボタン */
.anchor_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:center;
}
.anchor_btn{
	font-size:18px;
	font-weight:bold;
	line-height:140%;
	padding: 12px 35px 12px 15px;
	margin:0 15px;
	border:1px solid #004386;
	background-color:#FFF;
}
@media screen and (max-width: 768px){
	.anchor_area{
		display: initial;
	}
	.anchor_btn{
		margin:5px 0;
	}
}
.anchor_btn {
	position: relative;
}
.anchor_btn:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #004386;
	border-right: solid 2px #004386;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -5px;
	transform: rotate(135deg);
}
a .anchor_btn{
	transition-duration: .3s;
}
a .anchor_btn:hover{
	opacity:.7;
}

/* h2タイトル */
.service_ttl{
	line-height:140%;
	text-align:center;
	padding:10px;
	background-color:#EEF7FF;
	margin:100px 0 50px;
}

/* 問い合わせボタン */
.inquiry_area{
	text-align:center;
}
.inquiry_btn{
	display:inline-block;
	font-size:24px;
	font-weight:bold;
	line-height:130%;
	text-align:center;
	padding: 15px 90px 15px 80px;
	background-color: #fed33e;

}
@media screen and (max-width: 768px){
	.inquiry_btn{
		width:100%;
		padding: 15px 50px 15px 15px;
	}
}
.inquiry_btn {
	position: relative;
}
.inquiry_btn:after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 2px #004386;
	border-right: solid 2px #004386;
	position: absolute;
	top: 50%;
	right: 30px;
	margin-top: -4px;
	transform: rotate(45deg);
}
a .inquiry_btn{
	transition-duration: .3s;
}
a .inquiry_btn:hover{
	background-color: #fde94a;
}

/* 一覧はこちらボタン */
.more_area{
	text-align:center;
}
.more_btn{
	display:inline-block;
	font-size:18px;
	font-weight:bold;
	line-height:130%;
	padding: 12px 35px 12px 15px;
	border:1px solid #004386;
	background-color:#FFF;
}
@media screen and (max-width: 768px){
	.more_btn{
		display: block;
		width:100%;
	}
}
.more_btn {
	position: relative;
}
.more_btn:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #004386;
	border-right: solid 2px #004386;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -4px;
	transform: rotate(45deg);
}
a .more_btn{
	transition-duration: .3s;
}
a .more_btn:hover{
	opacity:.7;
}

/* ホワイトペーパー */
.service-list li .detail-box { min-height:0%; /* IE11のバグ対策 */}
.wp-box{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	margin:0 !important;
}
.wp_img{
	width:35% !important;
	margin:0 !important;
}
.wp_img img{
	width:100%;
}
.wp_txt{
	width:60%;
}
.wp_txt h3{
	font-size:15px;
	font-weight:bold;
	line-height:1.3;
}
.wp_lavel{
	display:inline-block;
	font-size:12px;
	color:#FFF;
	background-color:#E19A44;
	padding:2px 10px;
}