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


sup{
	font-size:0.75em;
}


#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:40px;
	}


}



/* ==========================================================
*
* 表紙エリア
*
========================================================== */
#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;
	}

}

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

	#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;
	}

}


/* ==========================================================
*
* スペシャルメッセージ
*
========================================================== */
#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;
}


/* 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:50%;
	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.1rem;
    line-height:125%;
    margin: 0 0 20px;
    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;
	}

}



/* ==========================================================
*
* ご利用の流れ
*
========================================================== */
#flow{
	text-align:center;
	background-color:#f7f7f7;
}


/*------------------------------------------
 フロー
 ------------------------------------------*/
ul#stepFlow{
	display:inline-block;
	overflow:hidden;
	margin:0 auto 50px;
	letter-spacing:-.4em;
}

ul#stepFlow > li{
	display:inline-block;
	overflow:hidden;
	letter-spacing:normal;
}

ul#stepFlow > li:after{
	display:block;
	overflow:hidden;
	content:"";
	width:50px;
	height:200px;
	float:right;
	background:url('../images/arrow_right.png') no-repeat right 50%;
	background-size:contain;
}

ul#stepFlow > li:last-child:after{
	display:none;
}

.stepInner{
	display:block;
	overflow:hidden;
	width:200px;
	height:200px;
	padding:20px 20px;
	text-align:center;
	background-color:#ededee;
	position:relative;
	float:left;
}

/*.stepInner h5 {
    display: block;
    overflow: hidden;
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 155%;
}*/

.stepInner p{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height:155%;
	margin-top:20px;
	height:3em;
}


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

	ul#stepFlow{
		display:block;
		margin-bottom: 0;
		text-align:left;
		padding:0 20px;
	}

	ul#stepFlow > li{
		width: 50%;
		padding-bottom:20px;
	}

	ul#stepFlow > li:nth-child(even){
		padding-left:10px;
	}
	ul#stepFlow > li:nth-child(odd){
		padding-right:10px;
	}


	ul#stepFlow > li:after{
		display:none;
	}

	.stepInner{
		width:100%;
		height:auto;
		float:none;
	}

	/*.stepInner h5 {
	    font-size: 1.6rem;
	}*/

	.stepInner p{
		font-size:1.4rem;
	}
	.stepInner > img{
		width:14vw;
		height:auto;
		max-width: 108px;
	}

}



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


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


}


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

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

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

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