@charset "UTF-8";
/*!
*/

@import "inc/_reset.css";
@import "inc/_common.css";
@import "inc/_header.css";
@import "inc/_slidenavi.css";

@import "inc/_footer.css";

@import "inc/_grid.css";
@import "inc/_diamonds.css";
@import "inc/_component.css";

/* =========================================================
 * ページ全体の定義
 * @ PAGE
 * ====================================================== */
html > * {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* body {
	background-size: cover;
	background-image:url(/content/dam/nttcom/cmn/img/backgrounds/bg-l-about-us.jpg);
} */
@media screen and (max-width:1260px) {
	body {
		min-width: 1260px;
		background-size: 1260px auto;
	}
}
@media screen and (min-width:1261px) {
	body {
		background-size: 100% auto;
	}
}
/* = Selected Text
----------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 30px;
}
table th,table td{
	border:1px solid #ccc;
	padding:15px;
	vertical-align:top;
	text-align: left;
	font-weight:normal;
}
table th{
	background:#eaf5fc;
}
main p{
	line-height: 1.5;
}
main li{
	line-height: 1.5;
}
select::-ms-expand {
	display: none;
}
/* =========================================================
 * ページ内コンテンツ全体のラッパー
 * @ WRAPPER
 * ====================================================== */
.wrapper {
	width: 100%;
}


/* =========================================================
 * メイン
 * @ main
 * ====================================================== */
main{
	/* padding-top:0; */
	 padding-top:148px;
	min-height:700px;
}

@media screen and (max-width:768px) {
	main{ padding-top:100px; }
}


.sectioning {
	overflow: hidden;
	width: 100%;
	min-width: 1260px;
	margin: 0 auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
@media screen and (max-width:768px) {
	.sectioning {
		min-width: 100%;
	}
}
.bg_color-gray {
	background-color: rgb(245,245,245);
}

.sectioning_layout-outer {
	width: 100%;
	margin: 0 auto;
}

.sectioning_layout-inner {
	position: relative;
	width: 1260px;
	margin: 0 auto;
}
@media screen and (max-width:768px) {
	.sectioning_layout-inner {
		width: 100%;
	}
}
/* For all link styles */
a {color: #004386;text-decoration: none;}
a:visited {color: #004386;text-decoration: none;}
a:hover   {color: #004386;text-decoration: none;}
a:active  {color: #004386;text-decoration: none;}

/* =========================================================
 * ページング
 * @ paging
 * ====================================================== */

.paging{
	text-align:center;
	width:100%;
	margin:0 auto;
	color:#666;
}
.paging span{
	margin:0 10px;
}
.paging a{
	text-decoration:none;
	color:#193477;
}


/* =========================================================
 * コンタクトボタン
 * @ contact_bt
 * ====================================================== */

.contact_bt {
	position: fixed;
	bottom: 15px;
	right: 20px;
	z-index: 970;
}

.contact_bt {
    background: rgb(204, 2, 58) !important;
    border:1px solid rgb(0, 0, 0) !important;
    padding: 10px 14px;
	box-shadow: rgba(0, 0, 0, 0.16) 3px 3px 2px;
	font-family: 'NotoSans', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', Helvetica, 'Helvetica Neue', sans-serif;
    letter-spacing: 0.15em;
    border-radius: 8px;
}

.contact_bt a {
	text-decoration: none;
	color: #fff !important;
	font-size: 14px;
	font-weight: bold;
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	padding: 0 10px 0 0;
}

.contact_bt a::before {
	background-image: url(/content/dam/nttcom/hq/cmn/img/arrow-right-accent.svg);
	position: absolute;
	top: 0px;
	bottom: 0;
	right: 13px;
	margin: auto;
	content: "";
	width: 6.409px;
	height: 9.561px;
	background-size: 100% 100%;
}
.contact_bt a:after {
    display: none;
}





/* =========================================================
 * コンテンツ下部　ページ戻る
 * @
 * ====================================================== */
.sub_backTo-top {
	width: 100%;
	text-align: center;
	margin:100px auto 50px;
}
.goPageTop {
	color: rgb(46,52,112);
}
.goPageTop:hover {
	cursor: pointer;
}
.goPageTop:after {
	display: inline-block;
	content:"";
	width:16px;
	height:9px;
	background: url(/content/dam/nttcom/cmn/img/cta-back-top.png);
	background-size:contain;
	margin-left: .5rem
}

main.emaergency{
	padding-top:75px;
}

/* -----------------------------------
 * 緊急AREA
 * @
 * ---------------------------------*/
.AttentionWrap, .AttentionWrap2, .AttentionWrap3{
	display:none;
}

.Attention{
	color: #09266c;
	background-color: #f9cd00;
	width: 100%;
	z-index:999;
	padding: 20px;
}

.Attention p.AttentionText:not(:last-child){
	margin-bottom:10px;
}

.Attention p.AttentionClose{
	float:right;
	width:5%;
	text-align:right;
}
.cookie-hint {
	background-color: #f9cd00;
	bottom: 0;
	color: #09266c;
	left: 0;
	padding: 20px;
	position: fixed;
	width: 100%;
	z-index:999;
	display:none;
}

.cookie-hint p {
	text-align: center;
	/*font-size:12px;*/
	font-size: 95%;
	font-weight: bold;">
	padding-right:70px;
	line-height: 1.5em;
}

.cookie-hint p:first-child {
	margin-bottom: 5px;
}

.cookie-hint p a {
	text-decoration: underline;
}

.btn-agree {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: #09266c none repeat scroll 0 0;
	border-color: #09266c;
	border-style: solid;
	border-width: 1px;
	border-radius: 0;
	color: #ffffff;
	position: absolute;
	right: 20px;
	text-shadow: none;
	top:35%;
	paddig:10px 15px;
	height: 50px;
}

.btn-agree:hover {
	background-color: #e6e6e6;
	background-position: 0 -15px;
	color: #333333;
	text-decoration: none;
	transition: background-position 0.1s linear 0s;
}
main.index .freeArea{
	padding:24px;
}





select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #ccc;
	background: #fff url("/content/dam/nttcom/cmn/img/cta-breadcrumb.png") no-repeat scroll right 10px center;
	padding: 0 10px;
	width: 96%;
}


/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- 横幅の修正に対応するためのテスト -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/

.main_layout_overlay {
	z-index: 970;
	position: absolute;
	width: 1260px;
	height: 1260px;
	top: 0;
	left: 50%;
	margin-left: -630px;
	opacity: .3;
}
@media screen and (max-width:768px) {

.main_layout_overlay { width: 100%; left: 0; margin-left: 0;}
}
.main_layout_overlay .grid_contents.groupSet {
	height: 100%;
}
.main_layout_overlay .grid_contents.groupSet .grid_cols {
	height: 100%;
}
.main_layout_overlay .grid_contents.groupSet .grid_cols span {
	display: block;
	height: 100%;
	background-color: rgb(255,0,0);
}


/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- プレスリリースコンポーネント -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/
.pressReleases .release{
	margin-bottom:40px;
}
.pressReleases .release p.ttl{
	margin-bottom:10px;
	font-weight:bold;
}
.pressReleases .release p.date{
	font-size:14px;
	display:inline;
	margin-left: 15px;
}
.pressReleases .release button{
	display:inline;
	margin-left:10px;
}
.pressReleases .release .tagIcon{
	display:inline;
	margin-left:10px;
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: 2px solid #004386;
	color: #004386;
	padding: 3px 6px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}
.pressReleases .all a.arrow{
	background:url(/content/dam/nttcom/cmn/img/icon_right_arrow.png) no-repeat right center;
	padding-right:20px;
}
.pressReleases .all{
	margin-bottom:90px;
}

.inputWrap_elements .rerease_search_disable_text{
	display:none;
	padding-left:20px;
	font-size:90%;
}

@media screen and (max-width:768px) {
	.pressReleases .release{
		margin-bottom:40px;
	}
	.pressReleases .release p.ttl{
		margin-bottom:10px;
	}
	.pressReleases .all{
		margin-bottom:40px;
	}

}

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

}





/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- キーワード検索コンポーネント -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/
.inputWrap form {
	display: table;
	width: 100%;
}

.inputWrap label,
.inputWrap_elements {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.inputWrap label {
	width: 105px;
	font-size: .8rem;
	font-weight: bold;
}

.inputWrap_elements div {
	display: table-cell;
	height: 100%;
}
.inputWrap_elements_button {
	width: 105px;
	padding-right: 20px;
}
.inputWrap-second .inputWrap_elements_button {
	width: 190px;
	padding-left: 20px;
	padding-right: 0;
}
.inputWrap_elements_button input.searchButton {
	color: #004386;
	background-color: #fff;
	border: #004386 solid 1px;
	cursor: pointer;
	padding: 8px 8px 9px;
	font-size: 14px;
}

.inputWrap_elements div.inputWrap_elements_text {
	padding-right:20px;
}
.inputWrap_elements_text input {
	width: 100%;
	padding:10px 0 10px 5px;
}
.inputWrap_elements div.inputWrap_elements_select {
	width: 224px;
	padding-left: 20px;
}
.inputWrap_elements_select select {
	width: 100%;
	height: 2.4rem;
	padding-left: 5px;
}
.searchBox_itemWrap .search_disable_text{
	display:none;
	line-height:140%;
	font-size: 14px;
}

@media screen and (max-width:768px) {
	.inputWrap form {
		display: block;
		width: 100%;
		padding-bottom: 30px;
	}
	.inputWrap-second {
		padding-left: 16px;
	}
	.inputWrap label,
	.inputWrap_elements {
		display: block;
		height: 100%;
		vertical-align: middle;
	}
	.inputWrap label {
		width: 100%;
		padding-top: 30px;
		padding-bottom: 15px;
		padding-left: 0;
		font-size: 1rem;
		font-weight: bold;
	}
	.inputWrap-first label {
		width: 100%;
		padding-left: 0;
	}
	.inputWrap_elements {
		display: table;
		width: 100%;
	}
	.inputWrap_elements div {
		display: table-cell;
		height: 100%;
		padding: 0;
	}
	.inputWrap_elements_button {
		width: 24%;
		padding-right: 0;
		padding-left: 10px;
	}
	.inputWrap-second .inputWrap_elements_button {
		width: 24%;
		padding-left: 10px;
		padding-right: 0;
	}

	.inputWrap_elements_button .searchButton {
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		background:#fff;
		border-radius: 0;
		color: #004386;
		border: #004386 solid 1px;
		cursor: pointer;
		padding: 7px;
		font-size: 14px;
	}

	.inputWrap_elements div.inputWrap_elements_text {
		width: auto;
		padding-left:0;
		padding-right:10px;
	}
	.inputWrap_elements_text input {
		width: 100%;
	}
	.inputWrap_elements div.inputWrap_elements_select {
		width: auto;
		padding-left: 0;
	}
	.inputWrap_elements_select:first-child {
		padding-right: 10px;
	}
	.inputWrap_elements_select select {
		width: 100%;
		height: 2.4rem;
	}

}


@media screen and (max-width:480px){
	.inputWrap {
		border-top: #ddd solid 1px;
		border-bottom: #ddd solid 1px;
	}

	.inputWrap form {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.inputWrap-second {
		padding-left: 6.1%;
	}

	.inputWrap label {
		padding-top: 0;
		padding-bottom: 0;
		background: url(/content/dam/nttcom/cmn/img/cta-back-bottom.png) right center no-repeat;
	}
	.inputWrap label.toggleopen {
		background-image: url(/content/dam/nttcom/cmn/img/cta-back-top2.png);
	}

	.inputWrap-first label {
		width: 100%;
		padding-left: 0;
		padding:10px 0;
	}

	.inputWrap_elements {
		display: none;
		width: 100%;
		padding-top: 25px;
		padding-bottom: 10px;
	}
	/* ----- clearfix ----- */
	.inputWrap_elements:before, .inputWrap_elements:after {
		content: " ";
		display: table;
	}
	.inputWrap_elements:after {
		clear: both;
	}


	.inputWrap_elements div {
		float: left;
		height: 100%;
		padding: 0;
	}
	.inputWrap_elements_button {
		width: 30%;
		padding-right: 0;
		padding-left: 0;
		text-align: right;
	}
	.inputWrap-second .inputWrap_elements_button {
		width: 30%;
		padding-left: 0;
		padding-right: 0;
	}
	.inputWrap_elements_button .searchButton {
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		background:#fff;
		-webkit-appearance: none;
		border-radius: 0;
		color: #004386;
		border: #004386 solid 1px;
		cursor: pointer;
		padding: 7px !important;
		font-size: 14px;
	}
	.inputWrap_elements div.inputWrap_elements_text {
		width: 70%;
		padding-left:0;
		padding-right:0;
	}
	.inputWrap_elements_text input {
		width: 100%;
	}
	.inputWrap_elements div.inputWrap_elements_select {
		width: 35%;
		padding-left: 0;
		text-align: right;
	}
	.inputWrap_elements div.inputWrap_elements_select:first-child {
		padding-right: 0;
		text-align: left;
	}
	.inputWrap_elements_select select {
		width: 92%;
		height: 2.4rem;
	}
}

/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- デフォルトの背景指定TABとSP -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/

@media screen and (max-width:768px){
	body {
		/* background-image:url(/content/dam/nttcom/cmn/img/backgrounds/bg-t-about-us.jpg); */
		/* background-size:cover; */
		min-width:100%;
		/* background-position:top center; */
	}
}

@media screen and (max-width:480px){
	body {
		/* background-image:url(/content/dam/nttcom/cmn/img/backgrounds/bg-m-about-us-m@2x.jpg); */
		/* background-size:contain; */
	}
}


/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- ポップアップ -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/

.closeBt{
	margin:20px auto;
	text-align:center;
}
.closeBt input.closeButton{
	color: #004386;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	-webkit-appearance: none;
	background-color: #fff;
	border: #004386 solid 1px;
	cursor: pointer;
	padding: 7px;
	font-size: 14px;
}


/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- 枠コンポーネント -----
 *
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/

div.frame_component-bk{
	padding:10px;
	border:1px solid #000;
}
div.frame_component-nv{
	padding:10px;
	border:1px solid #004386;
}
div.frame_component-wh{
	padding:10px;
	border:1px solid #fff;
}
div.frame_component-gy{
	padding:10px;
	border:1px solid #666;
}



/*
------------------------------------------------------------------------------------------------------------------------------------------------
 *
 * Show All
 *
------------------------------------------------------------------------------------------------------------------------------------------------
*/
.showAll_button {
	display: inline-block;
	margin-top: 30px;
}
.showAll_button:after {
	display: inline-block;
	content: "";
	width: 1em;
	height: 1em;
	margin-left: 1rem;
	background-image: url(/content/dam/nttcom/cmn/img/cta-breadcrumb.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.showall_contents {
	display: none;
	margin-top: 30px;
}



@media screen and (max-width:1259px) {
    .area3.sectioning {
    	width:100%;
    }
    .sectioning_layout-inner {
        width:100%;
    }
}

@media screen and (max-width: 481px) {
    .ContactUsButtonHQJp{
        display:none;
    }
}