@charset "UTF-8";
/*!
 * 下層ページ タブレット用CSS
*/

/* =========================================================
 *
 * @
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
header{
	height:auto;
}
main.subpage {
	position: relative;
	width:100%;
	margin: 0 auto;
/*	background-color: rgba(255,0,255,.2);*/
}
.centertest {
	width: 100%;
	text-align: center;
}
.subpage_contents {
	width:100%;
	/*margin:0 auto;*/
	margin-left: auto;
	margin-right: 0;
	position:relative;
/*	background-color: rgba(255,255,0,.2);*/
}

/* =========================================================
 * ページ上部
 * @ PAGE UPPER
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
.upperLayout.subpage_upper {
	position: relative;
	height: 380px;
}

/* -----------------------------------
 * ページの見出し
 * @ PAGE HEADING
 * ---------------------------------*/
.upperLayout .sub_page_heading {
	position: absolute;
	top: 50%;
	left: 0;
	width: 60%;
	height: 380px;
	margin-top: -190px;
}

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

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

/* 2017/9/12 update */
.sub_page_heading_inner .image_component img{
	width: 100%; /* IE用 */
	margin-top: -60px;
	margin-left: 25px;
	max-width: 100%;
}
.sub_page_heading_inner h1 {
	font-size: 32px;
	letter-spacing: .1rem;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
.sub_page_heading_inner p {
	margin-top: 1rem;
	display: table-cell;
	vertical-align: middle;
}
.upperLayout .sub_page_heading_inner  h1{
	position:absolute;
	top:100px;
	left:50px;
}
.upperLayout .sub_page_heading_inner p {
	position:absolute;
	top:220px;
	left:50px;
}



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

/* ----- 画像部分 ----- */
.upperLayout .sub_page_catch_image {
	display:none;
}


/* ----- 隠れている要素 ----- */
.sub_page_catch_large {
	display: none;
	position: absolute;
	bottom: 139px;
	right:10px;
	width: 0px;
	height: 0px;
	/*padding: 104px;*/
	z-index:100;
	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);*/
}

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

.sub_page_catch_large.close {
	display: block;
	transform-origin: right center;
	-webkit-transform-origin: right center;
	animation: anime3 1s ease normal;
	-webkit-animation: anime3 1s ease normal;
}
*/

.sub_page_catch_large_contents{
	padding:10px;
	height: 50%;
	top: 25%;
}

.sub_page_catch_large_contents h3{
	margin-top:15px!important;
	font-size:18px!important;
}

.sub_page_catch_large_contents p{
	font-size:.9rem;
}

/*
@keyframes anime2 {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 135px;
		right: 10px;
	}
	100% {
		opacity: 1;
		width: 620px;
		height: 620px;
		bottom: -173px;
		right: 10px;
	}
}

@keyframes anime3 {
	0% {
		opacity: 1;
		width: 620px;
		height: 620px;
		bottom: -173px;
		right: 10px;
	}
	100% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 135px;
		right: 10px;
	}
}


@-webkit-keyframes anime2 {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 135px;
		right: 10px;
	}
	100% {
		opacity: 1;
		width: 620px;
		height: 620px;
		bottom: -173px;
		right: 10px;
	}
}

@-webkit-keyframes anime3 {
	0% {
		opacity: 1;
		width: 620px;
		height: 620px;
		bottom: -173px;
		right: 10px;
	}
	100% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 135px;
		right: 10px;
	}
}
*/

.sub_page_catch_large_contents {
	padding: 0 1em;
}


/* ----- クリックイベント部分 ----- */
.upperLayout .sub_page_catch {
	position: absolute;
	top: 24%;
	right: 10px;
	width: 120px;
	height: 120px;
	padding: 30px;
	vertical-align: bottom;
}
.sub_page_catch_inner {
	position: absolute;
	display: table;
	left: 0;
	width: 120px;
	height: 120px;
	padding: 30px 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_inner div.txt {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: rgb(255,255,255);
	padding:0 1rem;
}
.sub_page_catch_inner p:after {
	position: absolute;
	display: inline-block;
	content: url(/content/dam/nttcom/cmn/img/btn-service-cat-open.png);
	bottom: 1rem;
	left: 50%;
	width: 1rem;
	margin-left: -9px;
}
#opentoggle div.txt p{
	font-size:.8rem;
}

/* =========================================================
 * 左サイド
 * @
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
.subpage_side_inner {
	position:absolute;
	top: 0;/*動的に取る 編集時には0に戻る*/
	left: 0px;
	margin-top:0;
	width: 360px;
	height: 720px;
/*	background-image: url(/content/dam/nttcom/cmn/img/bg-services.png);*/
/*	background-color: rgba(255,0,0,0.2);*/
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
}

.subpage_side_contents {
	position: absolute;
	top: 50%;
	left: 150px;
	width: 210px;
	height: 210px;
	margin-top: -105px;
	padding: 52px;
/*	background-color: rgba(255,0,0,0.2);*/
	background-image: url(/content/dam/nttcom/cmn/img/bg_blue.png);
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

.subpage_side_contents div.txt {
	display: table-cell;
	width: 160px;
	height: 80px;
	text-align: center;
	vertical-align: middle;
/*	background-color: rgba(0,0,0,.5);*/
}


/* -----------------------------------
 * 内包コンテンツ　スライダー
 * @ SLIDER BLOCK
 * ---------------------------------*/

.subpage_side_inner {
	width: 400px;
	height:auto;
}

.survey {
	top:295px;
	left: 190px;
	width: 210px;
	height: 210px;
	z-index: 100;
}
.survey_text{
	font-size:14px;
}
.survey_text{
	line-height:1.2;
}
.survey_top{
	padding:20px 0px 0px;
}

.survey_top .icon img{
	width:15px;
	height:auto;
}

.survey_top h2{
	font-size:9pt;
	width:100px;
}

.slider-view {
	width:120px;
	height:210px;
}

.slider-container_item {
	font-size:10pt;
	width:120px; /* view と同じ大きさに */
	height:210px;
}

.survey_bg{
	width:210px;
	height:210px;
	max-width:210px;
}

.slidebg img{
	width: 400px;
	height:auto;
}

#slide-prev, #slide-next{
	top:86px;
	width: 20px;
	height: 38px;
	background-size:100%;
}

#slide-prev {
	display: none;
	left: 10px;
}

#slide-next {
	display: none;
	right: 10px;
}

.slider-pagination{
	top:160px;
	margin-left: -24px;
}

.slider-pagination a {
margin:0px 3px;
width: 7px;
height: 7px;
}

#slide-prev, #slide-next, .slider-pagination {
	opacity:1;
}


/* =========================================================
 * 菱形
 * @
 * ====================================================== */
.sub_rows.cont02{
	margin-top:720px;
}
/* -----------------------------------
 * 菱形見出し
 * @
 * ---------------------------------*/
.sub_rows .sub_rows_heading {
	position: absolute;
	top: 0px;
	left: 105px;
}

.sub_rows_heading {
	width: 210px;
	height: 210px;
	padding: 52px;
	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;
}

.sub_rows_heading_inner {
	display: table-cell;
	width: 104px;
	height:104px;
/*	background-color: rgba(0,255,0,0.5);*/
	text-align: center;
	vertical-align: middle;
}
/*
.sub_rows_heading_label {
	font-size: 11px;
}
*/


/* -----------------------------------
 * 菱形共通
 * @
 * ---------------------------------*/
/*.sub_cols {
	width: 210px;
	height: 210px;
	padding: 52px;
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: bottom;
}*/
.sub_rows .sub_cols {
	width: 149px;
	height: 149px;
}


/*.sub_col_inner {
	display: table;
	width: 105px;
	height: 105px;
}*/
.sub_rows .sub_col_inner{
	top: 22px;
	left: 22px;
	width: 105px;
	height: 105px;
}

.sub_col_inner em {
	font-size: 16px;
}
.sub_col_inner p {
	display:none;
}



/* -----------------------------------
 * 菱形位置
 * @
 * ---------------------------------*/
.sub_rows {
	position: relative;
	/*padding: 0 226px;*/
	min-height: 148px;
	margin:0 auto;
	width:420px;
}

.sub_rows .sub_col_1 { top: 105px; left: 105px; }
.sub_rows .sub_col_2 { top: 105px; left: 315px; }
.sub_rows .sub_col_3 { top: 210px; left: 210px; }

.sub_rows .sub_col_4 { top: 315px; left: 105px; }
.sub_rows .sub_col_5 { top: 315px; left: 315px; }
.sub_rows .sub_col_6 { top: 420px; left: 210px; }

.sub_rows .sub_col_7 { top: 525px; left: 105px; }
.sub_rows .sub_col_8 { top: 525px; left: 315px; }
.sub_rows .sub_col_9 { top: 630px; left: 210px; }

.sub_rows .sub_col_10 { top: 735px; left: 105px; }
.sub_rows .sub_col_11 { top: 735px; left: 315px; }
.sub_rows .sub_col_12 { top: 840px; left: 210px; }

.sub_rows .sub_col_13 { top: 945px; left: 105px; }
.sub_rows .sub_col_14 { top: 945px; left: 315px; }
.sub_rows .sub_col_15 { top: 1050px; left: 210px; }

.sub_rows .sub_col_16 { top: 1155px; left: 105px; }
.sub_rows .sub_col_17 { top: 1155px; left: 315px; }
.sub_rows .sub_col_18 { top: 1260px; left: 210px; }

.sub_rows .sub_col_19 { top: 1365px; left: 105px; }
.sub_rows .sub_col_20 { top: 1365px; left: 315px; }
.sub_rows .sub_col_21 { top: 1470px; left: 210px; }

.sub_rows .sub_col_22 { top: 1575px; left: 105px; }
.sub_rows .sub_col_23 { top: 1575px; left: 315px; }
.sub_rows .sub_col_24 { top: 1680px; left: 210px; }

.sub_rows .sub_col_25 { top: 1785px; left: 105px; }
.sub_rows .sub_col_26 { top: 1785px; left: 315px; }
.sub_rows .sub_col_27 { top: 1890px; left: 210px; }

.sub_rows .sub_col_28 { top: 1995px; left: 105px; }
.sub_rows .sub_col_29 { top: 1995px; left: 315px; }
.sub_rows .sub_col_30 { top: 2100px; left: 210px; }

.sub_cols{
	background:#f6f6f6;
}
.sub_col_3,.sub_col_6,.sub_col_9,.sub_col_12,.sub_col_15,.sub_col_18,
.sub_col_21,.sub_col_24,.sub_col_27,.sub_col_30{
	background:#ededed;
}

/* -----------------------------------
 * 菱形色
 * @
 * ---------------------------------*/
footer{
	min-width: 320px;
}