@charset "UTF-8";

@import "./etc.css";


/*/==========================================================
/ 
/ ETC・割引情報
/
==========================================================/*/

/*----------------------------------

 トピックス

----------------------------------*/
#etc_topics{
	
}


/* for Narrow --------------------*/
@media screen and ( max-width:979px) {

}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#etc_topics{
		padding-bottom:var(--side-mgn-v);
	}

}




/*----------------------------------

 各種料金割引

----------------------------------*/
#etc_reduce{
	
}


#etc_reduce  a.icf-roundbtn-h{
	line-height:110%;
	max-width:300px;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {


}


/*****************************
 三連情報
 *****************************/
ul.reduce-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mgn-l) var(--mgn-l);
}

ul.reduce-list > li{
	display:flex;
	flex-direction:column;
	gap:1em 0;
	overflow:hidden;
	width:min(100%,360px);
	text-align:center;
	position:relative;
}

ul.reduce-list > li > img{
	width:100%;
	height:auto;
}

ul.reduce-list > li > p{
	/*font-size:var(--txt-m);
	line-height: 155%;*/
	text-align:left;
}

ul.reduce-list > li > a.icf-roundbtn-h{
	margin: auto auto 0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	ul.reduce-list{
		grid-template-columns:1fr;
	}


}


/*****************************
 フルサイズ情報
 *****************************/
.wide-info{
	display:block;
	overflow:hidden;
	margin:var(--mgn-l) 0;
	text-align:center;
}

.wide-info img{
	width:min(100%,1120px);
	height:auto;
}
.wide-info > p{
	margin:1em 0;
	/*font-size:1.4rem;
	line-height: 155%;*/
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	.wide-info{
		margin:0 0 var(--side-mgn-v);
	}

	.wide-info img{
		width:min(100%,720px);
		height:auto;
	}
	.wide-info > p{
		text-align:left;
	}

	/*.wide-info > img{
		width:min(100%,360px);
		aspect-ratio:9/5;
		object-fit:contain;
		height:auto;
		background-color:#333333;
	}*/

}


/*****************************
 一列情報
 *****************************/
dl.oneliner-info{
	display:block;
	overflow:hidden;
	margin:var(--mgn-l) 0;
}

dl.oneliner-info > dt{
	clear:both;
	display:block;
	width:360px;
	float:left;
}

dl.oneliner-info > dt > img{
	width:min(100%,360px);
	height:auto;
}

dl.oneliner-info > dd{
	display:block;
	padding-left:2em;
	width:calc(100% - 360px);
	float:left;
}

dl.oneliner-info > dd > p{
	margin:1em 0;
	/*font-size:1.4rem;
	line-height: 155%;*/
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	dl.oneliner-info{
		margin:var(--side-mgn-v) 0;
	}

	dl.oneliner-info > dt{
		width:100%;
		float:none;
	}

	dl.oneliner-info > dd{
		padding-left:0;
		width:100%;
		float:none;
	}

}


#reduce-tour,
#reduce-bicycle,
#reduce-other,
#reduce-outer{
	margin-top:30px;
}



/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#reduce-tour,
	#reduce-bicycle,
	#reduce-other,
	#reduce-outer{
		margin-top:calc(var(--side-mgn-v)*2);
	}

}



/*----------------------------------

 その他の割引等

----------------------------------*/
#etc_reduce section{
	display:block;
	overflow:hidden;
}


#etc_reduce .list-box > h4{
	font-size: var(--txt-l);
	font-weight:600;
	line-height:155%;
	margin-bottom:0.5em;
}

#etc_reduce .list-box > ul{
	margin-left: 1em;
}

#etc_reduce .list-box > ul > li+li{
	margin-top:0.25em;
}

#etc_reduce .list-box > ul > li > a:has(img){
	display:inline-block;
	margin-top:0.25em;
	line-height:100%;
}

#reduce-other .list-box{
	display:inline-block;
	overflow:hidden;
	width:50%;
	/*font-size:1.4rem;
	line-height:155%;*/
	float:left;
	margin:1em 0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#etc_reduce .list-box{
		display:block;
		width:100%;
		float:none;
		margin:0 0 var(--side-mgn-v);
	}

}



/*----------------------------------

 ETCご利用にあたって

----------------------------------*/
#etc_using{
	
}

#etc_using section{
	display:flex;
	flex-wrap:wrap;
	gap:20px 20px;
}

#etc_using .list-box{
	flex:1;
	min-width:calc(33% - 20px);
}

#etc_using .list-box > .shadow-box{
	width:100%;
	height:100%;
}

#etc_using .list-box h4{
	display:block;
	overflow:hidden;
	padding:0 0 0.25em 0.5em;
	font-size:var(--txt-l);
	font-weight:600;
	line-height:155%;
	border-bottom: 2px solid var(--colA1);
}

#etc_using .list-box p{
	margin:1em 0.5em;
}
#etc_using .list-box ul{
	margin:1em 0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#etc_using{
		/**/
	}

	#etc_using section{
		gap:var(--side-mgn-h) 0;
		flex-direction:column;
	}

	#etc_using .list-box{
		min-width:100%;
	}

	#etc_using .list-box > h4{
		display:block;
		overflow:hidden;
		padding:0 0 0.25em 0.5em;
		font-size:1.6rem;
		font-weight:600;
		line-height:155%;
		border-bottom: 2px solid var(--colA1);
	}

	#etc_using .list-box > p{
		margin:1em 0;
		font-size:1.4rem;
		line-height:155%;
	}
	#etc_using .list-box > ul{
		margin:1em 0;
		font-size:1.4rem;
		line-height:155%;
	}
	#etc_using .list-box > ul > li+li{
		margin-top:0.25em;
	}

}