@charset "UTF-8";

.news_hq {
	margin-top: 20px;
	line-height: 1.3;
	font-size: 14px;
}
.news_hq h5 {
	margin: 0;
	padding: 5px 15px 7px;
	color: #333;
	font-weight: bold;
	font-size: 14px;
	background: #ddd;
	line-height: 1.3 !important;
}
.news_hq dl {
	border-bottom: 1px solid #eee;
	padding: 18px 0;
	font-size: 14px;
}
.news_hq dt {
	font-weight: bold;
	display: inline-block;
	width: 20%;
	vertical-align: top;
}

.topcontact_bt_n {
	width: 100%;
	margin-top: 10px;
	height: 40px;
	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);
	position: relative;
}
.topcontact_bt_n a::after {
	content: url(/content/dam/nttcom/hq/cmn/img/icon_right_arrow.png);
	margin-left: 10px;
}
.topcontact_bt_n a {
	text-decoration: none;
	color: #193477;
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width:480px) {
    .topcontact_bt_n {
        width: 100%;
    }
    .topcontact_bt_n a {
        font-size: 16px;
    }
}

.s-center {
	text-align: center;
}

.three-box{
width: 95%;
}

.three-box h2{
	margin:0 auto;
	font-size:30px;
	color:#FFFFFF;
	text-align:center;
	width: 80%;
	background:#09245D;
	padding: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.three-box p{
margin-top:20px;}

.con-bt{
width:80%;
padding: 20px;
background-color: #FFD601;
text-align:center;
margin:40px auto 80px;
font-size:24px;
}


.cont_tit01{
padding-bottom: 10px;
margin-bottom: 35px;
border-bottom: 3px solid  #0A327F;
}
.cont_tit01 h3{
font-size: 24px;
font-weight: bold;
margin: 0;
}

.main-func{
    margin-bottom: 10px !important;
    line-height: 1.0;
    color: #00AAC3;
}

@media screen and (max-width:768px) {
	.three-box{
		width: 100%;
	}

	.three-box h2{
	font-size:24px;
	}
	.con-bt{
	font-size:16px;
	width:100%;
	}
}





/*
================================================================================================================================================
 * ----- 汎用 -----
================================================================================================================================================
*/

/*----- 見出し -----*/

.h3-common {
	font-size: 20px;
	font-weight: bold;
}


/*----- 注記（番号付き） -----*/

ol.note-asterisk {
	counter-reset: number;
	font-size: 0.9rem;
	list-style: none;
	margin: 0 0 0 3.0rem;
	padding: 0;
}

ol.note-asterisk li {
	text-indent: -2.95rem;
}

ol.note-asterisk li::before {
	counter-increment: number;
	content:"※"counter(number)" ";
	margin-right: 1rem;
}

.asterisk-number {
	white-space: nowrap;
}



/*----- アンカーリンク -----*/

.anchor-nav {
	margin-bottom: 60px;
}
.anchor-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
}
.anchor-nav ul li {
	margin: 0 10% 15px 0;
}
.anchor-nav ul li:last-child {
	margin-right: 0;
}
.anchor-nav ul li:before {
	margin-right: 7px;
	content: url(/content/dam/nttcom/cmn/img/cta-breadcrumb.png);
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
	.anchor-nav ul {
		display: block;
	}

	.contact_tel_hq {
		width: 100%;
	}
}



/*----- 注釈 -----*/
.notice {
	font-size: 90%;
}
p.notice {
	padding-left: 1em;
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
}
p.notice:before {
	margin-right: 5px;
	content: "※";
}
p.notice.right {
	text-align: right;
	justify-content: flex-end;
}

ul.notice,
ol.notice {
	padding-left: 1em;
}
ul.notice li,
ol.notice li {
	/* display: -webkit-flex; */
	/* display: flex; */
	-ms-flex: 0 1 auto;
}
ul.notice li:before {
	content: "※";
	margin-right: 5px;
}
ol.notice {
	counter-reset: noticenum;
}
ol.notice li {
	counter-increment: noticenum;
}
ol.notice li:before {
	content: "※"counter(noticenum);
	margin-right: 5px;
	min-width: 2em;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
	.notice {
		padding-left: 0 !important;
	}
}



/*----- 画像 -----*/
.img-single {
	text-align: center;
}



/*----- 2カラム -----*/
.col2-wrap {
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.col2-wrap .col2 {
	width: 48%;
}
.col2-wrap .col2:first-child {
	margin-right: 4%;
}
.col2-wrap .col2 p {
	margin-bottom: 0;
}
.col2-wrap .col2 img {
	max-width: 344px;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
	.col2-wrap {
		display: block;
	}
	.col2-wrap .col2 {
		width: 100%;
		text-align: center;
	}
	.col2-wrap .col2:first-child {
		margin-right: 0;
		margin-bottom: 15px;
	}
}



/*----- テキスト -----*/
.text {
	text-align: left;
}
.link-r {
	text-align: right;
}
.link-r a:after {
	content: url(/content/dam/nttcom/cmn/img/icon_right_arrow.png);
	margin-left: 10px;
}



/*
================================================================================================================================================
 * ----- スライダー -----
================================================================================================================================================
*/


.service_slider_item p:not(.service_kobetsu_slider_heading) {
	font-size: 17px;
}






/*
================================================================================================================================================
 * ----- サービス概要/メリット -----
================================================================================================================================================
*/


/*----- サービス概要 -----*/

.function-wrapper {
	counter-reset: function;
}
.function-section {
	margin-bottom: 60px;
	counter-increment: function;
}
.function-section h3 {
	padding: 7px 22px 11px;
	color: #fff;
	background: #0a327f;
	font-size: 32px;
	font-weight: bold;
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
}
.function-section h3:before {
	content: counter(function, decimal-leading-zero)"｜";
}
.function-section .point {
	margin-top: 15px;
}
.function-section .point h4 {
	margin-bottom: 20px;
	color: #000;
}
.function-section .point h4 span {
	display: block;
	padding: 11px;
	width: 100%;
}
.function-section .point h4 .title {
	margin-right: 2px;
	font-size: 24px;
	font-weight: bold;
	background: #70c8db;
}
.function-section .point h4 .sub-title {
	font-weight: normal;
	background: #70c8db;
}

.function-section-inner {
	-webkit-display: flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.function-section-inner .col2-wrap {
	width: 100%;
}

.function-section-inner .function-section-inner-wrap:nth-child(1) {
	width: 65%;
}

.function-section-inner .function-section-inner-wrap:nth-child(2) {
	width: 30%;
}

.function-section-inner .function-section-inner-wrap img {
	max-width: 100%;
}


/*----- メリット -----*/
.merit-wrapper {
	counter-reset: merit;
}
.merit-section {
	margin: 0 0 60px;
}
.merit-section h3 {
	font-size: 18px;
	font-weight: bold;
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
	align-items: center;
	counter-increment: merit;
}
.merit-section h3:before {
	content: counter(merit);
	margin-right: 10px;
	padding: 0 7px 4px;
	color: #fff;
	background: #18427f;
}
.merit-section .movie-introduction {
	margin: 30px 0;
}
.merit-section .movie-introduction h4 {
	font-size: 24px;
	color: #18427f;
	text-align: center;
}
.merit-section .movie-introduction .embedded-video {
	margin: 5px 0;
	padding-bottom: 56.25%;
	position: relative;
}
.merit-section .movie-introduction .embedded-video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
	.function-section-inner {
		display: block;
	}
	
	.function-section-inner .function-section-inner-wrap {
		margin-bottom: 1rem;
	}
	
	.function-section-inner .function-section-inner-wrap:last-of-type {
		margin-bottom: 0;
	}
	
	.function-section-inner .function-section-inner-wrap:nth-of-type(1),
	.function-section-inner .function-section-inner-wrap:nth-of-type(2) {
		width: 100%;
	}
	
	.merit-section .movie-introduction h4 {
		text-align: left;
	}
}





/*
================================================================================================================================================
 * ----- よくあるご質問 -----
================================================================================================================================================
*/
.faq_wrapper {
	counter-reset:tglbtn;
}
.toggle_btn,
.toggle_contents {
	padding: 15px 40px 15px 10px;
	border: 1px solid #004386;
	display: -webkit-flex;
	display: flex;
	-ms-flex: 0 1 auto;
}
.toggle_btn:before,
.toggle_contents:before {
	margin-right: 10px;
	min-width: 2.5em;
	text-align: center;
	line-height: 1.5;
}
.toggle_btn .inner,
.toggle_contents .inner {
	margin: 0;
}
.toggle_btn .inner p,
.toggle_contents .inner p {
	margin-bottom: 5px;
}

.toggle_btn {
	margin-top: 15px;
	cursor: pointer;
	counter-increment: tglbtn;
	position: relative;
}
.toggle_btn.active {
	border-bottom: none;
}
.toggle_btn:first-child {
	margin-top: 0;
}
.toggle_btn:before {
	content: "Q"counter(tglbtn)".";
}
.toggle_btn:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 24px;
	height: 24px;
	top: 50%;
	right: 10px;
	margin-top: -12px;
	background: url(/content/dam/nttcom/cmn/img/btn-blind-open.png) left top no-repeat;
	background-size: auto;
	background-size: contain;
}
.toggle_btn.active:after {
	background-image: url(/content/dam/nttcom/cmn/img/btn-blind-close.png);
}

.toggle_contents {
	border-top: none;
}
.toggle_contents:before {
	content: "A.";
}
.toggle_contents ul {
	margin-top: 5px;
	padding-left: 1em;
}
.toggle_contents ul li {
	margin-bottom: 5px;
}
.toggle_contents ul ul {
	margin: 5px 0 15px;
}
.toggle_contents .inner h3 {
	margin: 20px 0 5px;
	font-weight: bold;
}
.toggle_contents .inner h3:before {
	content: "< ";
}
.toggle_contents .inner h3:after {
	content: " >";
}
.toggle_contents .inner .inner_section {
	margin: 10px 0 15px;
}
.toggle_contents .inner .inner_section h4 {
	margin: 0 0 5px;
	font-size: 1rem;
}
.toggle_contents .inner .inner_section h4:before {
	content: "■";
}





/*
================================================================================================================================================
 * ----- 機能詳細 -----
================================================================================================================================================
*/
.cont_tit01 h2 {
	margin: 0;
	font-size: 24px;
	font-weight: bold;
}

h3.t-l {
	font-size: 20px;
	border-bottom: 1px solid #333;
	font-weight: bold;
	padding-bottom: 10px;
}
h3.t-l::before {
	content: "■";
	color: #004386;
	margin-right: 10px;
}
.fanc_table table {
	margin-bottom: 5px;
	width: 100%;
}
.fanc_table th,
.fanc_table td {
	vertical-align: middle;
}
.fanc_table thead th {
	text-align: center;
	vertical-align: middle;
}
.fanc_table tbody th {
	vertical-align: middle;
}
.fanc_table tbody td {
	font-size: 14px;
}
.fanc_table tbody .price {
	text-align: right;
}
.section table caption details summary {
    display: none;
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * タブレット版
 * 768px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:768px) {
	.fanc_table {
		overflow: scroll;
	}
}



/*
================================================================================================================================================
 * ----- 導入事例 -----
================================================================================================================================================
*/
.main_area_btm2 {
	background: #eef1f3;
	padding:40px;
}
.casestudy_list_block{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:40px 70px 20px;
}
.casestudy_list_block .casestudy_item{
	width:358px;
	border:1px solid #cacaca;
	text-align:center;
	margin-right:20px;
	margin-bottom:20px;
}
.casestudy_list_block .casestudy_item:nth-of-type(3n){
	margin-right:0;
}
.casestudy_item .logo{
	padding:20px 0;
}
.casestudy_item .company_prof{
	padding:20px;
	background:#eceff1;
	text-align:left;
}
.casestudy_item .company_prof .caption{
	font-size:14px;
}
.casestudy_item .company_prof .company_name{
	font-size:20px;
	margin-bottom:10px;
	color:#666;
}
.casestudy_item .company_prof .company_txt{
	margin-bottom:10px;
	font-size:14px;
	color:#666;
}
.casestudy_item .company_prof .company_industry{
	margin-bottom:10px;
	font-size:14px;
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * タブレット版
 * 768px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 768px){
	.casestudy_list_block{
		display:block;
		padding:20px 0;
	}
	.casestudy_list_block .casestudy_item{
		width:100%;
	}
	.casestudy_item .logo img{
		width:auto;
	}
}
.casestudy_detail_box{
	background:#fff;
	text-align:center;
	padding:40px 0;
}
.casestudy_detail_box .company_name{
	font-size:26px;
	margin-bottom:10px;
}
.casestudy_detail_box .company_name_underline {
	border-bottom: solid 5px #ccc;
	margin: 20px auto 22px;
	width: 90px;	
}
.casestudy_detail_box .company_txt{
	color:#666;
	font-size:20px;
}
.casestudy_detail_box .detail_wrap{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}
.casestudy_detail_box .detail_wrap .logo{
	box-sizing: border-box;
	padding-top:30px;
	width:37.5%;
}
.casestudy_detail_box .detail_wrap .logo img {
	max-width: 100%;
}
.casestudy_detail_box .detail_wrap .txt{
	padding:30px 0 0 20px;
	text-align:left;
	width:58%;
}
.casestudy_detail_box .detail_wrap .txt table{
	width:100%;
}
.casestudy_detail_box .detail_wrap .txt th{
	font-size:20px;
	border:none;
	border-bottom:1px dotted #ccc;
	background:none;
	padding:10px 30px 0 0;
	white-space: nowrap;
}
.casestudy_detail_box .detail_wrap .txt td{
	border:none;
	border-bottom:1px dotted #ccc;
	background:none;
	font-size: 16px;
	padding:20px 0;
}
.casestudy_detail_box .detail_wrap .txt tr:nth-of-type(1) th,
.casestudy_detail_box .detail_wrap .txt tr:nth-of-type(1) td {
	padding-top: 0;
}
.casestudy_detail_box .detail_wrap .txt td ul{
	list-style:none;
	padding:0;
	margin:0;
}
.casestudy_detail_box .detail_wrap .txt td ul li{
	text-indent:-1em;
	padding-left:1em;
}
.casestudy_detail_box .detail_wrap .txt .last th,
.casestudy_detail_box .detail_wrap .txt .last td{
	border:none;
}
.casestudy_detail_box .detail_wrap .detail_btn{
	text-align:right;
	margin:20px auto 0;
}
.casestudy_detail_box .detail_wrap .detail_btn a{
	color: #09357f;
	display: inline-block;
	font-size: 16px;
	padding-right: 35px;
	position: relative;
	text-align: left;
}
.casestudy_detail_box .detail_wrap .detail_btn a:after{
	border-right: solid 2px #09357f;
	border-top: solid 2px #09357f;
	content: "";
	display: inline-block;
	font-size: 12px;
	height: 8px;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
	transform: rotate(45deg);
	width: 8px;
}
.casestudy_detail_box .detail_wrap .detail_btn a:hover{
	opacity:.7;
}

@media screen and (max-width: 768px){
	.casestudy_detail_box .detail_wrap{
		display:block;
	}
	.casestudy_detail_box .detail_wrap .logo{
		width:60%;
		text-align:center;
		margin:0 auto 40px;
	}
	.casestudy_detail_box .detail_wrap .txt{
		width:100%;
		padding:0;
	}
	
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 480px){
	.main_area_btm2{
		padding:20px;
	}
	.casestudy_detail_box{
		padding:20px;
	}
	.casestudy_detail_box .company_name{
		font-size:24px;
	}
	.casestudy_detail_box .company_txt{
		font-size:18px;
	}
	.casestudy_detail_box .detail_wrap .logo{
		width:100%;
	}
	.casestudy_detail_box .detail_wrap .txt th{
		display:block;
		border-bottom:none;
	}
	.casestudy_detail_box .detail_wrap .txt td{
		display:block;
	}
}


/*
================================================================================================================================================
 * ----- 機能紹介動画 -----
================================================================================================================================================
*/
.function-intro-movie_hq {
	width: 100%;
}

.function-intro-movie-head_hq h5 {
	background-color: #09357f;
	color: #fff;
	-webkit-display: flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font-weight: bold;
	margin: 0 0 10px;
	text-align: center;
	padding: 0.5rem 0;
}

.function-intro-movie-head_hq h5::before {
	background: url("/content/dam/nttcom/hq/jp/business/services/application/web-directory/pa-people/img/pap_ico01.png") no-repeat;
	content: "";
	display: inline-block;
	height: 16px;
	width: 24px;
}

.function-intro-movie-inner_hq {
	text-align: center;
}

.function-intro-movie-inner_hq .embedded-video {
	margin-bottom: 10px;
}

.function-intro-movie-inner_hq .embedded-video iframe {
	max-width: 100%;
}

.function-intro-movie-inner_hq .banner {
	border: solid 4px #f08300;
	font-weight: bold;
	margin: 0 auto;
	max-width: 100%;
	width: 440px;
}

.function-intro-movie-inner_hq .banner .banner-header {
	font-size: 1.875rem;
}

.function-intro-movie-inner_hq .banner .banner-header a {
	color: #f08300;
	display: block;
	padding: 0.5rem 0;	
}

.function-intro-movie-inner_hq .banner .banner-link {
	background-color: #f08300;
}

.function-intro-movie-inner_hq .banner .banner-link a {
	color: #fff;
	display: block;
	padding: 0.5rem 0;
	padding-bottom: calc(0.5rem - 4px);

}

.function-intro-movie-inner_hq .banner .banner-link a::before {
	border-color: #09357f;
	border-right: solid 3px;
	border-top: solid 3px;
	content: '';
	display: inline-block;
	height: 7px;
	margin-right: 10px;
	transform: rotate(45deg);
	width: 7px;
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * タブレット版
 * 768px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:768px) {
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
	.function-intro-movie_hq {
		width: 100%;
	}
	
	.function-intro-movie-inner_hq .banner .banner-header {
    font-size: 1.5rem;
	}
}


/*
================================================================================================================================================
 * ----- bullet list -----
================================================================================================================================================
*/
.bullet-list {
	margin: 0 0 1.5em 1.5em;
	padding: 0;
}

.bullet-list ol {
	counter-reset: number;
	list-style: none;
	margin: 0 0 1.5em 1.5em;
	padding: 0;
}

.bullet-list ol li {
	position: relative;
}

.bullet-list ol li::before {
	border: solid 1px #000;
	border-radius: 50%;
	content: counter(number);
	counter-increment: number;
	font-size: 12px;
	font-weight: bold;
	height: 15px;
	line-height: 16px;
	margin-left: -25px;
	position: absolute;
	text-align: center;
	top: 2px;
	width: 15px;
}


/*
================================================================================================================================================
 * ----- 「無料トライアル実施中！」バナー -----
================================================================================================================================================
*/
.contact_tel_and_banner {
	display: flex;
	justify-content: space-between;
}

.contact_banner_hq {
	margin: 10px 0;
}

.contact_banner_hq a {
	display: block;
}

@media screen and (max-width: 768px) {
	.contact_tel_and_banner {
		display: block;
	}
	
	.contact_banner_hq {
		text-align: center;
	}
}