@charset "UTF-8";
/*!
 * 下層ページ モバイル用CSS
*/

/* =========================================================
 *
 * @
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/

main.subpage {
	position: relative;
	width:100%;
	margin: 0 auto;
}
.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);*/
}

/* =========================================================
 * ページ上部
 * @
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
.upperLayout.subpage_upper {
	position: relative;
	height: 540px;
/*	background-color: rgba(255,255,0,.5);*/
}
.upperLayout .sub_page_heading {
	position: static;
	width: 100%;
	margin-top: 0;
	height:300px;
	padding: 1rem 2rem;
	margin-bottom:30px;
}
.sub_page_heading_inner {
	display: table;
	float: none;
	height: auto;
}

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

/* 2017/9/12 update */
.sub_page_heading_inner .image_component img{
	margin-top: 0;
	width: 100% !important;
	margin-left: 0px !important;
}
.sub_page_heading_inner img{
	margin-top:0;
}
.sub_page_heading_inner h1 {
	font-size: 28px;
	letter-spacing: .1rem;
	line-height: 1;
	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:50px;
	left:0;
}
.upperLayout .sub_page_heading_inner p {
	position:absolute;
	top:180px;
	left:0;
}
.upperLayout .sub_page_catch_wrap {
	position: static;
	position: relative;
	width: 320px;
	height: auto;
	margin:0 auto;
}

.upperLayout .sub_page_catch_image {
	display:none;
}
.sub_page_catch_image_small {
	position: absolute;
	top: -104px;
	left: 80px;
	width: 80px;
	height: 80px;
	padding: 52px;
	background-image: url(/content/dam/nttcom/cmn/img/sky_s.png);
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: bottom;
}


/* ----- 隠れている要素 ----- */
.sub_page_catch_large {
	display: none;
	position: absolute;
	bottom: 0;
	left:50%;
	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);*/
}
.sub_page_catch_large.open {
	display: block;
	transform-origin: bottom center;
	-webkit-atransform-origin: bottom center;
	animation: anime2 1s ease normal;
	-webkit-animation: anime2 1s ease normal;
}

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

.sub_page_catch_large_contents{
	padding:5px;
}

.sub_page_catch_large_contents h3{
	margin-top:0!important;
	font-size:16px!important;
}

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

.bx-pager{
	top:120px;
}



@keyframes anime2 {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 0;
		left: 160px;
	}
	100% {
		opacity: 1;
		width: 320px;
		height: 320px;
		bottom: 0;
		left: 0;
	}
}

@keyframes anime3 {
	0% {
		opacity: 1;
		width: 320px;
		height: 320px;
		bottom: 0;
		left: 0;
	}
	100% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 0;
		left: 160px;
	}
}


@-webkit-keyframes anime2 {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 0;
		left: 160px;
	}
	100% {
		opacity: 1;
		width: 320px;
		height: 320px;
		bottom: 0;
		left: 0;
	}
}

@-webkit-keyframes anime3 {
	0% {
		opacity: 1;
		width: 320px;
		height: 320px;
		bottom: 0;
		left: 0;
	}
	100% {
		opacity: 0;
		width: 0;
		height: 0;
		bottom: 0;
		left: 160px;
	}
}

/* ----- クリックイベント部分 ----- */
.upperLayout .sub_page_catch {
	position: static;

	width: 160px;
	height: 160px;
	padding: 0;
	vertical-align: bottom;
}
.sub_page_catch_inner {
	position: absolute;
	display: table;
	left:80px;
	width: 160px;
	height: 160px;
	padding: 52px 0;
	background-image: url(/content/dam/nttcom/cmn/img/bg_blue.png);
/*	background-color: rgba(255,0,255,.2);*/
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
.sub_page_catch_inner div.txt {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: rgb(255,255,255);
}
.sub_page_catch_inner.close {
	left:119px;
	width: 80px;
	height: 80px;
	padding: 40px 0;
	background-image: url(/content/dam/nttcom/cmn/img/bg_red-close.png);
	bottom:0;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	transition:1s;
}
.sub_page_catch_inner.close div.txt{
	display:none;
}

/* =========================================================
 * 左サイド
 * @
 * ====================================================== */
/* -----------------------------------
 *
 * @
 * ---------------------------------*/
.subpage_side_inner {
	position:absolute;
	top: 0;/*198px;584px*/
	left: 0px;
	width: 100%;
/*	margin-top:-100px;*/
/*	background-color: rgba(255,0,0,0.2);*/
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
}

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

.survey {
	top: 188px;
	left: 108px;
	width: 160px;
	height: 160px;
}

.survey_bg{
	width: 160px;
	height: 160px;
	max-width: 160px;
}
.slidebg {
	height: 320px;
	width: 320px;
}
.slidebg img{
	width: 268px;
	height: auto;
}

.slider-view {
	width: 80px;
	height: 160px;
}

.slider-container_item {
	width: 80px; /* view と同じ大きさに */
	height :160px;
}

.survey_top {
	padding: 20px 0px 0px;
}
.survey_top h2 {
	display: none;
}

.survey_text {
	margin-top: .5rem;
	font-size:12px;
	line-height:1.1;
}

#slide-prev, #slide-next {
	top: 60px;
}
.slider-pagination {
	top: 120px;
	margin-left: -26px;
}









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

.sub_rows_heading {
	width: 160px;
	height: 160px;
	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;
}
.sub_rows_heading-right {
	top: 0px;
	left: 80px;
}
.sub_rows_heading-left {
	top: 0px;
	left: 80px;
}
.sub_rows_heading_inner {
	display: table-cell;
	width: 104px;
	height: 80px;
/*	background-color: rgba(0,255,0,0.5);*/
	text-align: center;
	vertical-align: middle;
}
.sub_rows_heading_label {
	font-size: 14px;
}



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

/*.sub_col_inner {
	display: table;
	width: 80px;
	height: 80px;
}*/
.sub_rows .sub_col_inner{
	top: 16px;
	left: 6px;
	width: 98px;
	height: 80px;
}

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



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

.sub_rows .sub_col_1 { top: 80px; left: 80px; }
.sub_rows .sub_col_2 { top: 80px; left: 240px; }
.sub_rows .sub_col_3 { top: 160px; left: 160px; }

.sub_rows .sub_col_4 { top: 240px; left: 80px; }
.sub_rows .sub_col_5 { top: 240px; left: 240px; }
.sub_rows .sub_col_6 { top: 320px; left: 160px; }

.sub_rows .sub_col_7 { top: 400px; left: 80px; }
.sub_rows .sub_col_8 { top: 400px; left: 240px; }
.sub_rows .sub_col_9 { top: 480px; left: 160px; }

.sub_rows .sub_col_10 { top: 560px; left: 80px; }
.sub_rows .sub_col_11 { top: 560px; left: 240px; }
.sub_rows .sub_col_12 { top: 640px; left: 160px; }

.sub_rows .sub_col_13 { top: 720px; left: 80px; }
.sub_rows .sub_col_14 { top: 720px; left: 240px; }
.sub_rows .sub_col_15 { top: 800px; left: 160px; }

.sub_rows .sub_col_16 { top: 880px; left: 80px; }
.sub_rows .sub_col_17 { top: 880px; left: 240px; }
.sub_rows .sub_col_18 { top: 960px; left: 160px; }

.sub_rows .sub_col_19 { top: 1040px; left: 80px; }
.sub_rows .sub_col_20 { top: 1040px; left: 240px; }
.sub_rows .sub_col_21 { top: 1120px; left: 160px; }

.sub_rows .sub_col_22 { top: 1200px; left: 80px; }
.sub_rows .sub_col_23 { top: 1200px; left: 240px; }
.sub_rows .sub_col_24 { top: 1280px; left: 160px; }

.sub_rows .sub_col_25 { top: 1360px; left: 80px; }
.sub_rows .sub_col_26 { top: 1360px; left: 240px; }
.sub_rows .sub_col_27 { top: 1440px; left: 160px; }

.sub_rows .sub_col_28 { top: 1520px; left: 80px; }
.sub_rows .sub_col_29 { top: 1520px; left: 240px; }
.sub_rows .sub_col_30 { top: 1600px; left: 160px; }

/* -----------------------------------
 * 菱形色
 * @
 * ---------------------------------*/