/*******************************************
*
* css for TOP
*
********************************************/
@charset "UTF-8";

#indexFrame{
	display:block;
	overflow:hidden;
	position:relative;
	padding-top: 96px;
}

#contentBody .innerFrame{
	width:1000px;
	/*padding:0 20px;*/
}


.contentMenu{
	display:block;
	overflow:hidden;
	padding:50px 0;
}

.contentMenu h2.pgTtl{
	display:block;
	overflow:hidden;
	text-align:center;
	color:#000000;
	margin-bottom:50px;
}

.contentMenu h2.pgTtl > .jpTtl{
	display:inline-block;
	overflow:hidden;
	font-size: 2.8rem;
	font-weight:bold;
	line-height:125%;
	position:relative;
	z-index:5;
	padding:0 40px;
}

.contentMenu h2.pgTtl > .jpTtl:before {
    content: "";
    display: block;
    border-top: solid 1px #000000;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 50%;
    left:0;
    z-index:1;
}

.contentMenu h2.pgTtl > .jpTtl:after {
    content: "";
    display: block;
    border-top: solid 1px #000000;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 50%;
    right:0;
    z-index:1;
}

.contentMenu a.linkedBtn{
	min-width:320px;
}


.contTxt{
	display:block;
	overflow:hidden;
	font-size:2.4rem;
	line-height:155%;
	text-align:center;
	margin-bottom:50px;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#indexFrame{
		padding-top: 12vw;
	}

	.contentMenu{
		/*padding:40px 0;*/
	}

	.contentMenu h2.pgTtl{
		margin-bottom:30px;
	}

	.innerFrame,
	#contentBody .innerFrame{
		width:100%;
		padding:0 0!important;
	}

	#footerNavi .innerFrame{
		padding:0 20px!important;
	}

	.contentMenu h2.pgTtl > .jpTtl{
		font-size:1.8rem;
	}
	.contentMenu span.enTtl{
		font-size:1.4rem;
	}

	.contentMenu a.blackBtn{
		width:90%;
		min-width:auto;
	}

	.contTxt{
		font-size:1.6rem;
		padding:0 20px;
		margin-bottom:50px;
	}


}



/* ==========================================================
*
* 表紙エリア
*
========================================================== */
#coverBox{
	display:block;
	overflow:hidden;
}

#mainImage{
	display:block;
	overflow:hidden;
	width: 100%;
	height: 344px;
	text-align:center;
	background-color:#f7f7f7;
	position:relative;
}

#mainImage img{
	width:100%;
	height:100%;
	/*min-width:1024px;*/
	object-fit: cover;
	position:relative;
}

#mainImage > .innerFrame {
	height:344px;
	position:absolute;
	top:0;
	left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#mainImage > .innerFrame > p{
	display:inline-block;
	overflow:hidden;
	padding:30px 30px;
	font-size:2.1rem;
	line-height:155%;
	text-align:left;
	font-weight:bold;
	background-color:rgba(255,255,255,0.8);
	position:absolute;
	top:50%;
	left:125px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


/* for TB --------------------------*/
@media screen and ( max-width:896px) {

	#mainImage > .innerFrame > p{
		left:35px;
	}

}

/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	#mainImage {
		height:60vw;
	}

	#mainImage > .innerFrame {
		height:60vw;
	}

	#mainImage > .innerFrame > p{
		padding:20px 20px;
		font-size:1.4rem;
		left:20px;
	}


}


/*TOP LINK*/
#topLink{
	display:block;
	overflow:hidden;
	margin-top:22px;
}

#topLink ul{
	display:block;
	overflow:hidden;
}

#topLink ul > li{
	display:block;
	overflow:hidden;
	width:33.3%;
	min-width:320px;
	height:90px;
	float:left;
}

#topLink ul > li > a{
	display:block;
	overflow:hidden;
	text-align:center;
	height:90px;
}


#topLink ul > li > a.current,
#topLink ul > li > a:hover{
	text-decoration:none;
}

#topLink ul > li > a.current{
	pointer-events:none;
}

.slick-slide img{
	margin:0 auto;
}

/* for TB --------------------------*/
@media screen and ( max-width:896px) {

	#topLink ul > li{
		min-width:auto;
		height:auto;
	}

	#topLink ul > li > a{
		height:auto;
	}

	#topLink ul > li > a > img{
		width:100%;
		height:auto;
		max-width:320px;
	}
	
	.slick-slide img{
		width:100%;
		height:auto;
	}

}

/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	#topLink{
		margin-top:1em;
	}

	#topLink ul > li{
		width:100%;
		/*min-width:auto;
		height:auto;*/
		float:none;
	}

	/*#topLink ul > li > a{
		height:auto;
	}*/

}


/* ==========================================================
*
* スペシャルメッセージ
*
========================================================== */
#altMsg{
	display:block;
	overflow:hidden;
	margin:50px 0 0;
}

#altMsg > .innerFrame{
	width:992px;
}

#msgBody{
	display:block;
	overflow:hidden;
}

#msgBody > h2{
	display:block;
	overflow:hidden;
	text-align:center;
	font-size:1.8rem;
	line-height:125%;
	padding:0.5em 1em;
	font-weight:bold;
}

#msgBody > p{
	display:block;
	overflow:hidden;
	line-height:175%;
	padding:30px 40px;
}


.redBox{
	border:1px solid #e50012;
}

.redBox > h2{
	color:#ffffff;
	background-color:#e50012;
}



/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#altMsg{
		padding: 0 20px;
		margin:1em 0 0;
	}

	#altMsg > .innerFrame{
		width:100%;
	}

	#msgBody > h2{
		font-size:1.4rem;
	}

	#msgBody > p{
		padding:1.5em;
	}


}


/* ==========================================================
*
* ニュースリリース
*
========================================================== */
#news{
	background-color:#f7f7f7;
	margin-top:50px;
}

#news > .innerFrame{
	padding:30px 50px;
	background-color:#ffffff;
	margin-bottom:50px;
}

#news .dateList{
	display:block;
	overflow:hidden;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#news{
		margin-top:2em;
	}

	#news > .innerFrame{
		padding:0 0;
	}

	#news .dateList{

	}

	#news dl.dateList dt{
		padding:1em 20px;
	}
	#news dl.dateList dd{
		padding:0 20px 1em;
	}

}


/* ==========================================================
*
* D.U-NETってどんなサービス？
*
========================================================== */
#service{
	/*padding:80px 0;*/
}

#service .overview{
	display:block;
	overflow:hidden;
	text-align:center;
	font-size:1.4rem;
	line-height:175%;
	margin:40px 0;
}

#service sup{
	font-size:1.2rem;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {
	#service{
		padding:40px 0;
	}

	#service .overview{
		text-align:left;
		padding:0 10px;
		margin:40px 0 0;
	}

}


/*------------------------------------------
 3列リスト
 ------------------------------------------*/
ul.lsSp3{
	clear:both;
	display:block;
	overflow:hidden;
}

ul.lsSp3 > li{
	display:block;
	overflow:hidden;
	width:33.3%;
	float:left;
	text-align:center;
}

ul.lsSp3 > li > a{
	width:100%;
}



/* for TB --------------------------*/
@media screen and ( max-width:896px) {

	/**/

}



/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	ul.lsSp3 > li{
		width:100%;
		float:none;
	}

}


#service ul.lsSp3{
	margin-bottom:50px;
}

#service ul.lsSp3 > li{
	padding:0 10px;
}

#service .dataTile > h4 {
    display: block;
    overflow: hidden;
    font-size: 2.4rem;
    line-height:125%;
    margin: 20px 0;
    font-weight:bold;
	color:#e41845;
}
#service .dataTile > p {
    display: block;
    overflow: hidden;
    font-size: 1.4rem;
    line-height:155%;
}


#service dl.cautionList{
	clear:both;
	margin:50px auto 0;
	/*width:80%;*/
}



/* for TB --------------------------*/
@media screen and ( max-width:896px) {

}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {
	#service .dataTile > h4 {
	    font-size: 1.8rem;
    	margin:0 0 0.5em;
	}

	#service .dataTile > p {
	    padding:0 0;
	}

	#service ul.lsSp3{
		margin-bottom:0;
	}

	#service ul.lsSp3 > li{
		padding:0 15px;
		margin-bottom:2em;
	}


	#service dl.cautionList{
		margin:30px auto 0;
		width:100%;
		padding:0 15px;
	}

}


/*注意文*/
#service .iconImg{
	display:block;
	overflow:hidden;
	text-align:center;
}

#service .infoBox{
	display:block;
	overflow:hidden;
	background-color:#f7f7f7;
	padding:25px 50px;
	font-size: 1.2rem;
	color:#595757;
	line-height:155%;
	margin:40px 0;
}

/* for TB --------------------------*/
@media screen and ( max-width:896px) {

}

/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	#service .infoBox{
		padding:25px 20px;
	}

	#service .iconImg > img{
		width:40vw;
		max-width:150px;
		height:auto;
	}

}


/* ==========================================================
*
* D.U-NETサービスイメージ
*
========================================================== */
#svimage{
	background-color:#f7f7f7;
}

#svTopImg{
	display:block;
	overflow:hidden;
	text-align:center;
	margin-bottom:40px;
}

#svimage .dataTile{
	display:block;
	overflow:hidden;
	max-width:840px;
	padding:20px 40px;
	background-color:#ffffff;
	margin:10px auto;
}

.dataTile > .topIcn{
	float:left;
	margin-right:40px;
}

.dataTile  > .dateBody{
	display:block;
	overflow:hidden;
	position: relative;
}

.dataTile  > .dateBody > h4 {
    display: block;
    overflow: hidden;
    font-size: 2.4rem;
    line-height:155%;
    font-weight:bold;
	color:#e41845;
}

.dataTile  > .dateBody > h4 > sup{
	font-size:1.2rem;
	/*color:#000000;*/
}

.dataTile  > .dateBody > p{
	margin:1em 0;
	line-height:155%;
}

img.cloudcam{
	width: 188px;
	height:auto;
	position:absolute;
	top:0;
	right:0;
}


/* for TB --------------------------*/
@media screen and ( max-width:896px) {

}

/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	#svTopImg > img{
		width:100%;
		height:auto;
		max-width:630px;
	}

	#svimage .dataTile{
		padding:25px;
		width:calc(100% - 40px);
		margin:20px auto;
	}

	.dataTile > .topIcn{
		float:none;
		margin-right:0;
		margin-bottom:1em;
		text-align:center;
	}

	.dataTile > .topIcn > img{
		width:22vw;
		height:auto;
		max-width:158px;
	}

	.dataTile  > .dateBody > h4 {
	    font-size:1.8rem;
	}

	.dataTile  > .dateBody > h4 > sup{
		font-size:1.2rem;
	}

	.dataTile  > .dateBody > p img,
	img.cloudcam{
		width: 100%;
		height:auto;
		margin:0 auto;
		max-width: 521px;
	}

	img.cloudcam{
		max-width: 446px;
		position:relative;
		top:auto;
		right:auto;
	}

}


/* ==========================================================
*
* ご利用の流れ
*
========================================================== */
#flow{
	/**/
}

#flowImg{
	display:block;
	overflow:hidden;
	margin-bottom:10px;
	text-align:center;
}

#flowImg img{
	width:100%;
	height:auto;
	max-width:1000px;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {


	#flowImg{
		margin-bottom:30px;
		padding:0 20px;
	}


}



/* ==========================================================
*
* オプションサービス
*
========================================================== */
#option{
	background-color:#f7f7f7;
}


/*5列リスト*/
ul.lsSp5{
	clear:both;
	display:block;
	overflow:hidden;
	margin:40px 0;
}

ul.lsSp5 > li{
	display:block;
	overflow:hidden;
	width:20%;
	padding:0 10px;
	text-align:center;
	float:left;
}

ul.lsSp5 > li > a{
	display:block;
	overflow:hidden;
}

ul.lsSp5 > li > a:hover{
	text-decoration:none;
}


/* for TB --------------------------*/
@media screen and ( max-width:896px) {

	ul.lsSp5 > li img{
		width:100%;
		height:auto;
	}

}

/* for SP --------------------------*/
@media screen and ( max-width:750px) {

	ul.lsSp5{
		margin:0 0 15px;
	}

	ul.lsSp5 > li{
		width:50%;
		padding:0 0;
	}

	ul.lsSp5 > li img{
		width:30vw;
		height:auto;
		max-width:150px;
		margin-bottom:15px;
	}

}



/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#option ul.lsSp3 > li{
		padding:5px 0;
	}

	#option ul.lsSp3 > li > a{
		width:90%;
	}

}


/* ==========================================================
*
* よくある質問
*
========================================================== */
#faq{
	/*padding:50px 0 0;*/
}

#faq .faqList{
	margin-bottom:35px;
}

/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#faq .innerFrame{
		padding:0 20px!important;
	}
}