@charset "UTF-8";
/*!
 * サービス振り分け用CSS
*/
.f-l{
	float:left;
}

@media screen and (max-width:1260px) {
	body {
		max-width: 100%;
		background-size: cover;
	}
}
@media screen and (max-width:768px) {
	body {
		max-width: auto;
	}
}

main p{
	line-height:1.3;
}
h1{
	margin:0 ;
}
em{
	font-family: 'NotoSans', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', Helvetica, 'Helvetica Neue', sans-serif;
}

/* =========================================================
 * コンテンツのラッパー
 * @ MAIN
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
main.subpage {
	position: relative;
	width: 1260px;/*1343px;/*1580*/
	margin: 0 auto;
}
.subpage_contents_wrap{
	position:relative;
}
.subpage_contents {
	width: 1008px;/*948px;*/
	margin-left: auto;
	margin-right: 0;
	position:relative;
}

/* =========================================================
 * ページ上部
 * @ PAGE UPPER
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
.subpage_upper {
	position: relative;
}
.upperLayout.subpage_upper {
	height: 400px;
}
/* -----------------------------------
 * ページの見出し
 * @ PAGE HEADING
 * ---------------------------------*/
 .sub_page_heading {
 	position: relative;
	width: 840px;
	padding-bottom: 210px;
}
.upperLayout .sub_page_heading {
	position: absolute;
	top: 50%;
	left: -200px;
	height: 636px;
	margin-top: -318px;
	padding-bottom: 0;
}

.sub_page_heading_inner {
	position:relative;
	display: table;
	height: 636px;
}
.upperLayout .sub_page_heading_inner {
	float: right;
}

/* -----------------------------------
 * ページ左上　背景画像アイコン
 * .parbase 位置調整 20170621 追加
 * ---------------------------------*/
.sub_page_heading_inner .parbase{ margin-top:120px; }

.sub_page_heading_inner h1 {
	font-size: 46px;
	letter-spacing: .1rem;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
}
.sub_page_heading_inner p {
	margin-top: 1rem;
	vertical-align: middle;
	text-align: center;
}
.upperLayout .sub_page_heading_inner h1 {
	position:absolute;
	top:300px;
	left:130px;
	display: table-cell;
}
.upperLayout .sub_page_heading_inner p {
	position:absolute;
	top:460px;
	left:130px;
	display: table-cell;
}

/* -----------------------------------
 * ページ上部のキャッチコピー
 * @ CATCH
 * ---------------------------------*/
.sub_page_catch_wrap {
	position: relative;
	width: 1254px;
	height: 550px;/*584px;*/
}
.upperLayout .sub_page_catch_wrap {
	position: absolute;
	top: 0;
	right: 0;
}



/* ----- 画像部分 ----- */
.upperLayout .sub_page_catch_image {
	position: absolute;
	top:25px;
	right: 0;
	width: 421px;
	height: 526px;
}


/* ----- 隠れている要素 ----- */
.sub_page_catch_large {
	display: none;
	position: absolute;
	bottom: 210px;
	/*left: 0;*/
	right:212px;
	width: 0px;
	height: 0px;
	/*padding: 104px;*/
	vertical-align: bottom;
	background-image: url(/content/dam/nttcom/cmn/img/services_category_cloud_red.png);
	background-position: right top;
	background-size: cover;
	background-repeat: no-repeat;
/*	background-color: rgba(0,0,0,.5);*/
	z-index:89;
}

.sub_page_catch_large:after {
	display: block;
	content: "";
	width: 100%;
	padding-bottom: 100%;
}


.sub_page_catch_large_contents {
	display: none;
	position: absolute;
	width: 50%;
	height: 32%;
	padding: 0;
	top: 32%;
	left: 25%;
	color: rgb(255,255,255);
}

.sub_page_catch_large.open .sub_page_catch_large_contents {
	/*display: table;*/
}
.sub_page_catch_large_contents {
	/*animation: anime_catchText 2.5s ease normal;*/
}
.sub_page_catch_large_contents div {
/*	display: table-cell;
	vertical-align: middle;
	text-align: center; */
}
.sub_page_catch_slidetext {
	margin-bottom:20px;
	text-align:center;
}

.sub_page_catch_slidetext h3 {
	margin:10px 0;
}


@keyframes anime_catchText {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes anime_catchText {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
.sub_page_catch_large.open {
	display: block;
	z-index: 99;
	transform-origin: right center;
	animation: anime2 1s ease normal;
}

.sub_page_catch_large.close {
	display: block;
	z-index: 99;
	transform-origin: right center;
	animation: anime3 1s ease normal;
}

@keyframes anime2 {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 209px;
		right: 209px;
	}
	100% {
		opacity: 1;
		width: 836px;
		height: 836px;
		bottom: -209px;
	}
}

@keyframes anime3 {
	0% {
		opacity: 1;
		width: 836px;
		height: 836px;
		bottom: -209px;
	}
	100% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 209px;
		right: 209px;
	}
}
*/

.sub_page_catch_large_inner {
	position: absolute;
	display: table;
	right: 0;
	top: 313px;
	width: 209px;
	height: 209px;
	padding: 52px 0;
	background-image: url(/content/dam/nttcom/cmn/img/bg_purple.png);
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
}
.sub_page_catch_large_inner:hover {
	cursor: pointer;
}
.sub_page_catch_large_inner div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: rgb(255,255,255);
}
.sub_page_catch_large_inner p:after {
	position: absolute;
	display: inline-block;
	content: url(/content/dam/nttcom/cmn/img/btn-service-cat-close.png);
	bottom: 1rem;
	left: 50%;
	width: 1rem;
	margin-left: -.5rem;
}


/* ----- クリックイベント部分 ----- */
.sub_page_catch {
	position: absolute;
	z-index: 900;
	top: 0;
	left: 0;
	width: 418px;
	height: 418px;
	padding: 104px;
	vertical-align: bottom;
}
.upperLayout .sub_page_catch {
	position: absolute;
	top: auto;
	bottom: 0;
	left: auto;
	right: 3px;
}


.sub_page_catch_inner {
	position: absolute;
	display: table;
	left: 0;
	width: 209px;
	height: 209px;
	padding: 52px 0;
	background-image: url(/content/dam/nttcom/cmn/img/bg_red.png);
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	z-index:300;
}
.sub_page_catch_inner:hover {
	cursor: pointer;
}
.sub_page_catch_inner div.txt {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: rgb(255,255,255);
	padding: 0 25px;
}
.sub_page_catch_inner p:after {
	position: absolute;
	display: inline-block;
	bottom: 1rem;
	left: 50%;
	width: 1rem;
	margin-left: -9px;
}

.sub_page_catch_inner p.plus:after {
	content: url(/content/dam/nttcom/cmn/img/btn-service-cat-open.png);
}

.sub_page_catch_inner p.close:after {
	content: url(/content/dam/nttcom/cmn/img/btn-service-cat-close.png);
}


/* =========================================================
 * 左サイド
 * @
 * ====================================================== */
/* -----------------------------------
 * 左サイドのラッパー
 * @
 * ---------------------------------*/

.subpage_side {
	position:relative;
}
.sideLayout.subpage_side {
	height:0;
}
.subpage_side_inner.sideLayout {
	position: relative;
}
.subpage_side_inner {
	top: 252px;/*198px;584px*/
	left: 0px;
	width: 420px;
	height: 840px;
}

.sideLayout .subpage_side_inner {
	position: absolute;
}





/* -----------------------------------
 * 内包コンテンツ　スライダー
 * @ SLIDER BLOCK
 * ---------------------------------*/
.survey {
	position:absolute;
	top: 252px;
	left: 84px;
	width: 336px;
	height: 336px;
	z-index: 100;
}

.survey_top{
	text-align:center;
	padding:35px 0px 0;
}

.survey_top h2{
	font-size:10pt;
	color:#fff;
	font-weight:bold;
	margin:10px;
	width:160px;
	word-break: break-all;
}
.survey_top .icon img{
	width:20px;
}
.survey_text{
	font-size:18px;
	color:#fff;
	line-height:1.1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.survey_text a{
	color:#fff;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.survey_bg{
	position:absolute;
	width:336px;
	height:336px;
	max-width:336px;
	z-index:-1;
}

.survey .survey_text,
.survey .survey_text a {
	font-family: 'NotoSans', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', Helvetica, 'Helvetica Neue', sans-serif;

}



.slidebg{
}

.slidebg img{
	position:absolute;
	z-index:-1;
	width: 420px;
	height: 840px;
	opacity:0;
}

.slidebg img#i1{
	opacity:1;
}

.slider-view {
    position: relative;
    width: 180px; /* スライダーで表示するエリアの大きさ */
    height: 336px;
    overflow: hidden; /* 必須 */
    margin:0 auto;
}

/* width は js で指定するのでここでは書かない */
.slider-container {
    position: absolute;
    top: 0;
    left: 0;
}

/* スライドするコンテンツ部分 */
.slider-container_item {
position: relative; /* ループ処理に使う */
float: left;
width: 180px; /* view と同じ大きさに */
height: 336px;
font-size:16px;
color:#fff;
line-height:1.5;
text-align:center;
}

/* 進む、戻る */

#slide-prev, #slide-next {
	position:absolute;
	top:135px;
	width: 34px;
	height: 65px;
	cursor: pointer;
	background-position: top left;
}

#slide-prev {
    left: 20px;
    background-image: url(/content/dam/nttcom/cmn/img/btn-carousel-lt2.png);
}

#slide-next {
    right: 20px;
    background-image: url(/content/dam/nttcom/cmn/img/btn-carousel-rt2.png);
}

/* ページネーション */
.slider-pagination {
    position: absolute;
    bottom: 80px;
    left: 50%;
}

.slider-pagination a {
    float: left;
    margin: 5px 5px 0;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: #666;
    text-indent: -9999px;
}

.slider-pagination a:hover {
    background: #fff;
}

.slider-pagination a.current {
    background: #fff;
}

/* マウスオンしたときのみ矢印・ページャーを表示 */
#slide-prev, #slide-next{
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.survey:hover #slide-prev,
.survey:hover #slide-next,
.survey:hover .slider-pagination{
	opacity: 1;
}


/* =========================================================
 * 菱形
 * @
 * ====================================================== */
/* -----------------------------------
 * 菱形見出し
 * @
 * ---------------------------------*/
.sub_rows .sub_rows_heading {
	position: absolute;
	top: 168px;
	left: 84px;
}
.sub_rows_heading {
	width: 168px;
	height: 168px;
	padding: 42px;
	background-image: url(/content/dam/nttcom/cmn/img/bg_category-heading.png);
/*	background-color: rgba(255,0,0,0.2);*/
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	color: rgb(102,102,102);
	vertical-align: bottom;
	margin-top:97px;
}

.sub_rows_heading_inner {
	display: table-cell;
	width: 84px;
	height: 84px;
/*	background-color: rgba(0,255,0,0.5);*/
	text-align: center;
	vertical-align: middle;
	/*word-break: break-all;*/
}
.sub_rows_heading_label {
	display: block;
	font-size: 16px;
	line-height:1.4;
	text-transform: uppercase;
	color:#fff;
}

.sub_rows .sub_rows_heading {
	margin-top:0;
}

/* -----------------------------------
 * 菱形共通
 * @
 * ---------------------------------*/
.sub_cols {
	width: 238px;
	height: 238px;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top:97px;
}

.sub_col_inner{
	position: relative;
	display: table-cell;
	top: 34px;
	left: 34px;
	width: 168px;
	height: 168px;
	transform-origin: center center;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.sub_rows .sub_cols {
	position: absolute;
	margin-top:0;
}
.sub_cols {
	display: block;
	background-color: #fff;
	/*border: #d7d7d7 solid 1px;*/
}


.sub_rows a.sub_cols:hover {
	background: #CC023A;
	border-color: #CC023A;
	color: #fff;
	cursor: pointer;
}
.sub_rows .sub_cols *:hover {
	cursor: pointer;
}


.sub_rows .sub_col_inner{
	position: relative;
	display: table-cell;
	top: 34px;
	left: 34px;
	width: 168px;
	height: 168px;
	transform-origin: center center;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.sub_col_inner{
	text-align: center;
	vertical-align: middle;
}


.sub_col_inner em {
	font-size: 20px;
}
.sub_rows .sub_cols:hover .sub_col_inner em {
	color: #fff;
}
.sub_col_inner p {
	margin-top: 14px;
	font-size: 14px;
	line-height:1.2;
}
a:hover .sub_col_inner p{
	color:#fff !important;
}
/*
a:visited .sub_col_inner p{
	color:#333;
}
*/




/* -----------------------------------
 * 菱形位置
 * @
 * ---------------------------------*/
.sub_rows {
	position: relative;
	/*padding: 0 226px;*/
	min-height: 336px;
	width: 100%;
	z-index:88;
	margin-bottom:-84px;
}

.sub_rows .sub_col_1 { top: 168px; left: 336px; }
.sub_rows .sub_col_2 { top: 168px; left: 672px; }
.sub_rows .sub_col_3 { top: 336px; left: 504px; }
.sub_rows .sub_col_4 { top: 336px; left: 168px; }
.sub_rows .sub_col_5 { top: 336px; left: 840px; }

.sub_rows .sub_col_6 { top: 504px; left: 336px; }
.sub_rows .sub_col_7 { top: 504px; left: 672px; }
.sub_rows .sub_col_8 { top: 672px; left: 504px; }
.sub_rows .sub_col_9 { top: 672px; left: 168px; }
.sub_rows .sub_col_10 { top: 672px; left: 840px; }

.sub_rows .sub_col_11 { top: 840px; left: 336px; }
.sub_rows .sub_col_12 { top: 840px; left: 672px; }
.sub_rows .sub_col_13 { top: 1008px; left: 504px; }
.sub_rows .sub_col_14 { top: 1008px; left: 168px; }
.sub_rows .sub_col_15 { top: 1008px; left: 840px; }

.sub_rows .sub_col_16 { top: 1176px; left: 336px; }
.sub_rows .sub_col_17 { top: 1176px; left: 672px; }
.sub_rows .sub_col_18 { top: 1344px; left: 504px; }
.sub_rows .sub_col_19 { top: 1344px; left: 168px; }
.sub_rows .sub_col_20 { top: 1344px; left: 840px; }

.sub_rows .sub_col_21 { top: 1512px; left: 336px; }
.sub_rows .sub_col_22 { top: 1512px; left: 672px; }
.sub_rows .sub_col_23 { top: 1680px; left: 504px; }
.sub_rows .sub_col_24 { top: 1680px; left: 168px; }
.sub_rows .sub_col_25 { top: 1680px; left: 840px; }

.sub_rows .sub_col_26 { top: 1848px; left: 336px; }
.sub_rows .sub_col_27 { top: 1848px; left: 672px; }
.sub_rows .sub_col_28 { top: 2016px; left: 504px; }
.sub_rows .sub_col_29 { top: 2016px; left: 168px; }
.sub_rows .sub_col_30 { top: 2016px; left: 840px; }

.sub_cols{
	background:#ededed;
}
.sub_col_1,.sub_col_2,.sub_col_6,.sub_col_7,.sub_col_11,.sub_col_12,
.sub_col_16,.sub_col_17,.sub_col_21,.sub_col_22,.sub_col_26,.sub_col_27{
	background:#f6f6f6;
}