@charset "UTF-8";
/*/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/*/
body{
	background: none;
}
#sdpf.cross-lab{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important;
	position: relative;
}
#sdpf.cross-lab p,#sdpf.cross-lab h1, #sdpf.cross-lab h2, #sdpf.cross-lab h3, #sdpf.cross-lab h4, #sdpf.cross-lab h5, #sdpf.cross-lab h6{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important;
}
.pc_only{
	display: block;
}
.sp_only{
	display: none;
}
@media screen and (max-width: 768px) {
	.pc_only{
		display: none;
	}
	.sp_only{
		display: block;
	}
	img{
		width: 100%;
	}
}

.key_visual img{
	width: 100%;/*仕様が分からないので暫定*/
}

#sdpf.cross-lab .cross-lab_wrap{
	width: 1280px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .cross-lab_wrap{
		width: 100%;
	}
}
#sdpf.cross-lab .cont_header{
	font-weight: bold;
	font-size: 48px;
	line-height: 1.3;
}
#sdpf.cross-lab .cont_read{
	font-weight: bold;
	font-size: 26px;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .cont_header{
		font-size: 5.5vw;
	}
	#sdpf.cross-lab .cont_read{
		font-size: 3.8vw;
	}
}
#sdpf.cross-lab .about_block{
	display: flex;
	margin: 10px;
}
#sdpf.cross-lab .about_block .cont_header{
	padding: 50px 0 0 30px;
}
#sdpf.cross-lab .about_block .cont_read{
	padding: 40px 0 0 40px;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .about_block{
		display: block;
		margin: 10px;
	}
	#sdpf.cross-lab .about_block div{
		padding: 40px 10px 30px 10px;
	}
	#sdpf.cross-lab .about_block .cont_header{
		padding: 0;
	}
	#sdpf.cross-lab .about_block .cont_read{
		padding: 20px 0 0 0;
	}
}

#sdpf.cross-lab .digitalTwin_block{
	min-height: 1052px;
	background:url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/DigitalTwin_v002.png) no-repeat right top;
}
#sdpf.cross-lab .digitalTwin_block .cont_header{
	padding: 500px 0 0 40px;
}
#sdpf.cross-lab .digitalTwin_block .cont_read{
	padding: 40px 0 0 40px;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .digitalTwin_block{
		min-height: auto;
		background:url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/DigitalTwin_v002_sp.png) no-repeat center top;
		background-size: contain;
	}
	#sdpf.cross-lab .digitalTwin_block .cont_header{
		padding: 80vw 20px 30px 20px;
	}
	#sdpf.cross-lab .digitalTwin_block .cont_read{
		padding: 0 20px 30px 20px;
	}
}

#sdpf.cross-lab .usecase_block{
	width: 1000px;
	margin: 95px auto;
}
#sdpf.cross-lab .usecase_block .cont_read{
	padding-top: 40px;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .usecase_block{
		width: 100%;
		margin: 50px 20px 40px;
	}
	#sdpf.cross-lab .usecase_block .cont_read{
		padding-top: 20px;
	}
}
#sdpf.cross-lab .usecase_item{
	margin-bottom: 60px;
}
#sdpf.cross-lab .usecase_item h3{
	margin: 0 0 50px 40px ;
}
#sdpf.cross-lab .usecase_box{
	display: flex;
	margin-bottom: 10px;
}
#sdpf.cross-lab .usecase_box.reverse{
	flex-direction: row-reverse;
}
#sdpf.cross-lab .usecase_txt{
	padding: 65px;
}
#sdpf.cross-lab .usecase_txt .usecase_header{
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.3;
}
#sdpf.cross-lab .usecase_txt .txt{
	font-size: 20px;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	#sdpf.cross-lab .usecase_item{
		margin-bottom: 30px;
	}
	#sdpf.cross-lab .usecase_item h3{
		margin: 0 0 30px 20px;
	}
	#sdpf.cross-lab .usecase_txt .usecase_header{
		font-size: 5vw;
	}
	#sdpf.cross-lab .usecase_txt .txt{
		font-size: 3.5vw;
	}
	#sdpf.cross-lab .usecase_item .city_ttl{
		width: 24vw;
	}
	#sdpf.cross-lab .usecase_item .wp_ttl{
		width: 70vw;
	}
	#sdpf.cross-lab .usecase_item .shopping_ttl{
		width: 94vw;
	}
	#sdpf.cross-lab .usecase_box{
		display: block;
	}
	#sdpf.cross-lab .usecase_img.left{
		margin-right: 50px;
	}
	#sdpf.cross-lab .usecase_txt{
		padding: 20px 20px 30px 68px;
	}
	#sdpf.cross-lab .usecase_img.right{
		margin-left: 50px;
	}
}
#sdpf.cross-lab .btn_wrap{
	text-align: center;
	margin: 100px auto;
	width: 480px;
}
#sdpf.cross-lab .btn_wrap a{
	display: block;
	border: 1px solid #000;
	padding: 20px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 100vw;
}
#sdpf.cross-lab .btn_wrap a span{
	font-size: 15px;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .btn_wrap{
		width: 70vw;
		margin: 0 auto 55px;
	}
	#sdpf.cross-lab .btn_wrap a{
		font-size: 3.5vw;
		padding: 10px;
	}
	#sdpf.cross-lab .btn_wrap img{
		width: 15px;
	}
	#sdpf.cross-lab .btn_wrap a span{
		font-size: 2.5vw;
	}
}
#sdpf.cross-lab .facility_block{
	width: 1000px;
	margin: 0 auto;
}
#sdpf.cross-lab .facility_block .cont_header{
	margin-bottom: 60px;
}
#sdpf.cross-lab .slider_block .slider_item{
	position: relative;
	height: 660px;
}
#sdpf.cross-lab .slider_block .slider_txt{
	background: #fff;
	padding: 20px 10px 0;
	position: absolute;
	bottom: 0;
	left: 10px;
	height: 140px;
	width: 470px;
}
#sdpf.cross-lab .slider_block .slider_txt p{
	font-weight: bold;
}
#sdpf.cross-lab .slider_block .slider_txt .ttl{
	font-size: 24px;
	margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
	#sdpf.cross-lab .facility_block{
		width: calc(100% - 20px);
		margin-bottom: 40px;
	}
	#sdpf.cross-lab .facility_block .cont_header{
		margin: 0 20px 20px 10px;
	}
	#sdpf.cross-lab .slider_block .slider_item{
		height: auto;
	}
	#sdpf.cross-lab .slider_block .slider_txt{
		position: relative;
		margin-top: -30px;
		width: calc(100% - 20px);
		height: auto;
		padding: 10px;
	}
	#sdpf.cross-lab .slider_block .slider_txt p{
		font-size: 3vw;
	}
	#sdpf.cross-lab .slider_block .slider_txt .ttl{
		font-size: 3.5vw;
		margin-bottom: 5px;
	}
}


#sdpf.cross-lab .access_block{
	width: 1000px;
	margin: 120px auto 0;
	display: flex;
	justify-content: space-between;
}
#sdpf.cross-lab .access_block .cont_header{
	padding-top: 120px;
	margin-bottom: 40px;
}
#sdpf.cross-lab .access_block .adress{
	font-size: 20px;
	margin-bottom: 30px;
	font-weight: bold;
}
#sdpf.cross-lab .access_block .access{
	font-weight: bold;
}
#sdpf.cross-lab .access_block .btn_wrap{
	width: auto;
	margin: 50px auto;
}
#sdpf.cross-lab .access_block .btn_wrap a{
	padding: 10px;
	width: 240px;
}

@media screen and (max-width: 768px) {
	#sdpf.cross-lab .access_block{
		width: 100%;
		margin: 55px auto 0;
		display: block;
	}
	#sdpf.cross-lab .access_block .access_wrap{
		padding: 0 20px;
	}
	#sdpf.cross-lab .access_block .cont_header{
		padding-top: 0;
		margin-bottom: 20px;
	}
	#sdpf.cross-lab .access_block .adress{
		font-size: 3.5vw;
	}
	#sdpf.cross-lab .access_block .access{
		font-size: 3vw;
	}
	#sdpf.cross-lab .access_block .btn_wrap{
		margin: 40px auto;
	}
	#sdpf.cross-lab .access_block .btn_wrap a{
		margin: 0 auto;
	}
	#sdpf.cross-lab .access_block .access_img{
		margin-bottom: 40px;
		padding: 0 70px;
	}
}

#sdpf.cross-lab .news_block{
	background: #f5f5f5;
	margin: 0 10px;
	padding: 80px 0;
}
#sdpf.cross-lab .news_wrap{
	width: 1000px;
	margin: 0 auto;
}
#sdpf.cross-lab .news_wrap .cont_header{
	margin-bottom: 30px;
}
#sdpf.cross-lab .news_wrap li{
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: bold;
	display: flex;
}
#sdpf.cross-lab .news_wrap li .date{
	width: 155px;
}
#sdpf.cross-lab .news_wrap li a{
	width: calc(100% - 155px);
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .news_block{
		padding: 40px 0 25px;
	}
	#sdpf.cross-lab .news_wrap{
		width: calc(100% - 20px);
	}
	#sdpf.cross-lab .news_wrap .cont_header{
		margin-bottom: 20px;
	}
	#sdpf.cross-lab .news_wrap li{
		font-size: 3vw;
			display: block;
	}
	#sdpf.cross-lab .news_wrap li .date{
		width: 100%;
	}
	#sdpf.cross-lab .news_wrap li a{
		width: 100%;
			display: block;
	}
}



#sdpf.cross-lab .openhub_blcok{
	width: 1000px;
	margin: 100px auto;
	text-align: center;
	background: #f8f8f8;
	padding: 30px 0;
}
@media screen and (max-width: 768px) {
	#sdpf.cross-lab .openhub_blcok{
		width: calc(100% - 40px);
		padding: 10px 0;
		margin: 60px auto;
	}
	#sdpf.cross-lab .openhub_blcok img{
		width: 50vw;
	}
}




.slick-prev, .slick-next{
	width: 30px;
	height: 30px;
	z-index:100;
}
.slick-prev{
	left: -60px;
}
.slick-next{
	right: -60px;
}

.slick-prev::before{
	content: url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/arrow_left.png);
}
.slick-next::before{
	content: url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/arrow_right.png);
}
.slick-prev::before, .slick-next::before {
	color: #f0f0f0 !important;
}

@media screen and (max-width: 768px) {
	.slick-prev, .slick-next{
		top: 36%;
	}
	.slick-prev{
		left: -6px;
	}
	.slick-next{
		right: -6px;
	}
}

#sdpf.cross-lab .fixed_menu{
	position: fixed;
	top: 300px;
	right: 10px;
	background:rgba(255,255,255,0.7);
	border-radius: 10px;
	z-index: 100;
	transition: all 0.6s;
}
#sdpf.cross-lab .fixed_menu .btn-close{
	display: none;
}
#sdpf.cross-lab .menu_wrap{
	display: flex;
}
#sdpf.cross-lab .menu_wrap ul{
	margin: 10px;
	padding: 0;
	list-style: none;
}
#sdpf.cross-lab .menu_wrap ul li{
	background: url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/icon_dot.png) no-repeat left center;
	padding-left: 10px;
}
#sdpf.cross-lab .menu_wrap ul li a{
	color: #5c5c5c;
	font-weight: bold;
}
#sdpf.cross-lab .menu_wrap .btn_area{
	background:rgba(255,255,255,0.5);
	border-radius: 0 10px 10px 0;
	padding: 10px;
	height: 188px;
}
#sdpf.cross-lab .menu_wrap ul li:hover{
	background: url(/content/dam/nttcom/hq/jp/business/dx/smart/city/cross-lab/img/icon_dot_ac.png) no-repeat left center;
	padding-left: 10px;
}
#sdpf.cross-lab .menu_wrap ul li:hover a{
	color: #000000;
}

#sdpf.cross-lab .fixed_menu.is-close .btn-open{
	display: none;
}
#sdpf.cross-lab .fixed_menu.is-close .btn-close{
	display: block;
}
#sdpf.cross-lab .fixed_menu.is-close .menu_wrap .btn_area{
	border-radius: 10px;
}

@media screen and (max-width: 768px) {
	#sdpf.cross-lab .fixed_menu{
		border-radius: 10px 0 0 10px;
		right: 0;
	}
	#sdpf.cross-lab .fixed_menu.is-open{
		right: 10px;
		border-radius: 10px;
	}
	#sdpf.cross-lab .menu_wrap ul{
		display: none;
	}
}

/*==================================================
アニメーションのCSS
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
transform: translateY(100px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
transform: translateY(-100px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
transform: translateX(-100px);
  }

  to {
    opacity: 1;
transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
transform: translateX(100px);
  }

  to {
    opacity: 1;
transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}


/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
  opacity: 0;
}