/* ******************************************

css for Top page v1.4

update 2026.08.29

****************************************** */
@charset "UTF-8";

@import "./top_multilingual.css";


#u-main{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:60px 30px;
	position:relative;
}

#u-main::before{
	content:"";
	display:block;
	overflow:hidden;
	width:100%;
	height: 550px;
	position:absolute;
	top:0;
	left:0;
	background-color:var(--colB3);
	z-index: -1;
}

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


}


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

	#u-main{
		flex-direction:column;
		flex-wrap:nowrap;
		gap:var(--side-mgn-w) 0;
	}

	#u-main::before{
		height:100vh;
	}

	#tr-serch{
		order:2;
	}

	#tr-info{
		order:1;
	}

	#tr-caution{
		order: 5;
	}


	#top-banner{
		order: 3;
	}

	#topics{
		order: 4;
	}

	#news{
		order: 8;
	}

	#emergency{
		order: 6;
	}

	#info{
		order: 7;
	}

	#pickup{
		order: 9;
	}

	#l-btmlinks{
		order: 10;
	}

}


/*/==========================================================
/ 
/ トップコンテンツ
/
==========================================================/*/
.data-box{
	/*width:min(30%,380px);*/
	width:min(374px);
	margin:30px 0;
	background-color:var(--colB3);
}

.data-box > .shadow-box{
	height:100%;
}

.data-box > .shadow-box *.icf-roundbtn-h_c{
	font-size:var(--txt-s);
	/*margin-bottom:0;*/
}
/*
.box-inner{
	display:block;
	overflow:hidden;
	padding:20px 30px;
	height:440px;
	background-color:#FFFFFF;
	-webkit-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
	box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
}

.box-inner h2{
	margin:0 0 20px;
}
.box-inner *[class^="icf-roundbtn-h"]{
	padding: 0.5em 15px 0.5em 20px;
	font-size: 1.6rem;
	line-height: 100%;
	margin:1em 0;
}*/


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

}


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

	.data-box{
		width:100%;
		padding:var(--side-mgn-h) var(--side-mgn-h);
		margin:0 0;
	}

	.box-inner{
		padding:var(--side-mgn-h);
		height:auto;
	}

	.box-inner *[class^="icf-roundbtn-h"]{
		padding: 0.75em 30px;
		font-size: 1.4rem;
		line-height: 100%;
	}

}


#tr-caution a.icf-roundbtn-h{
	width: 100%;
}


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

 高速料金・ルート検索

 ----------------------------------*/
#tr-serch{
	/**/
}


#tr-serch form{
	display:block;
	overflow:hidden;
	margin-bottom:1em;
}

form#ic-search-form > p{
	display:block;
	overflow:hidden;
	letter-spacing:-.4em;
}

form#ic-search-form > p + p{
	margin-top:0.75em;
	/*margin-top:0.5em*;*/
	align-content:center;
}

form#ic-search-form > p > *{
	letter-spacing:initial;
	font-size:1.4rem;
	line-height:125%;
	position:relative;
	vertical-align:middle;
}

form#ic-search-form > p > span{
	display:inline-block;
	overflow:hidden;
	width:6em;
	padding:0.5em 0;
}

form#ic-search-form .data-input,
form#ic-search-form input[type="text"]{
	width:calc(100% - 6em);
}


form#ic-search-form .data-input > input{
	padding: 0.5em 0.5em;
	border: 1px solid var(--colB2);
}


form#ic-search-form select{
	min-width:9em;
}

form#ic-search-form button[type="submit"]{
	line-height: 110%;
	width:250px;
	min-width:auto;
}
form#ic-search-form button[type="submit"]::after{
	color:var(--colA1);
}

form#ic-search-form > p:nth-child(2) > img {
	margin: 0 25px;
}

form#ic-search-form a.icf-question-e{
	color:var(--colA1);
}
form#ic-search-form a.icf-question-e:hover{
	text-decoration:underline;
}

form#ic-search-form input[name="select_date"]{
	margin-right:5px;
}

.nouse{
	display:none!important;
}



#tr-serch ul.icf-list-tri{
	margin-bottom:0;
}



/*****************************
 入れ替えリンク
 *****************************/
button[name='exhange_id']{
	display: inline-block;
	overflow: hidden;
	padding: 0.25em 0.5em;
	margin-left: 1em;
	margin-right:3em;
	text-decoration: none;
	background-color: var(--colA2);
	border:none;
}

*.icf-switch::before{
	content:"\f074";
}

*.icf-switch > span{
	margin-left:0.5em;
}
*.icf-switch:hover{
	opacity:0.7;
	text-decoration:none;
}



/*****************************
 車両区分表リンク
 *****************************/
a.icf-question-e{
	display:inline-block;
	overflow:hidden;
	float:right;
	margin-top: 0.5em;
	text-decoration:none;
}

a.icf-question-e > span{
	margin-right:0.5em;
}

a.icf-question-e::after{
	content:"\f059";
}

/*#tr-serch ul.icf-list-tri{
	display:flex;
	flex-wrap:wrap;
	gap:0.5em 0;
}
#tr-serch ul.icf-list-tri > li{
	width:50%;
}

#tr-serch ul.icf-list-tri > li + li{
	margin-top:0;
}*/


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

	#tr-serch ul.icf-list-tri{
		flex-direction:column;
	}
	#tr-serch ul.icf-list-tri > li{
		width:100%;
	}

}


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


}


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

	#tr-serch{
		padding-bottom:var(--side-mgn-v)
	}

	form#ic-search-form button[type="submit"]{
		width:max(300px,77vw);
		min-height:40px;
	}

	#tr-serch .no-pc{
		display:block;
		overflow:hidden;
		text-align:center;
	}
	
	#tr-serch .no-pc a.icf-roundbtn-h_c{
		margin:0 auto;
		width:max(300px,77vw);
		min-height:40px;
	}

	#tr-serch .no-pc > p{
		display:flex;
		justify-content:center;
		margin:1em 0 var(--side-mgn-v);
	}

	#tr-serch .no-pc > p > a{
		display:block;
		overflow:hidden;
		flex:1;
		text-align: center;
		font-size:1.4rem;
		line-height:125%;
		color:#000000;
		text-decoration:none;
	}

	#tr-serch .no-pc > p > a > span::before{
		content:"\e90b";
		color:var(--colA1);
		margin-right:0.25em;
	}

}


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

 リアルタイム交通情報

----------------------------------*/
#tr-info{
	/**/
}

#realtime-info{
	display:block;
	overflow:hidden;
	position:relative;
	margin-top:0.5em;
}


#realtime-info > .time{
	display:block;
	overflow:hidden;
	width:100%;
	padding-left:20px;
	/*position:absolute;
	top:0;
	left:0;*/
}

#realtime-info > .time > p{
	display:inline-block;
	vertical-align:middle;
}
#realtime-info > .time > p:nth-child(1){
	font-size:1.8rem;
	line-height:100%;
	font-weight:600;
	margin-right:0.5em;
}
#realtime-info > .time > p:nth-child(2){
	width:97px;
	height:32px;
	background:url('../assets/img/ihiway.png') no-repeat 0 0;
	background-size: contain;
}
#realtime-info > .time > p:nth-child(2) > *{
	display:none;
}


/*地図パーツ*/
#realtime-info > .map{
	display:block;
	text-align:center;
	position:relative;
	margin-top:20px;
}

#realtime-info .map > p{
	width:min(100%,224px);
	height: 166px;
	position:absolute;
	top:max(0px,calc(50% - 83px));
	left:20px;
}

#realtime-info .map > p object{
	width:100%;
	height:auto;
}


#realtime-info > .map > ul{
	display:grid;
	width:min(100%,320px);
	min-height:225px;
	gap:3px 3px;
	grid-template-columns: repeat(3,1fr) repeat(2,0.5fr) 0.5fr;
	grid-template-rows: repeat(4,0.5fr) repeat(2,1fr);
	position:relative;
	pointer-events: none;
}

#realtime-info > .map > ul > li{
	

}

#realtime-info > .map > ul> li.hokkaido{
	grid-column: 5/7;
	grid-row:1/3;
}

#realtime-info > .map > ul > li.tohoku{
	grid-column: 5/7;
	grid-row:3/5;
}

#realtime-info > .map > ul > li.kanto{
	grid-column: 5/7;
	grid-row:5;
}

#realtime-info > .map > ul > li.hokuriku{
	grid-column: 2;
	grid-row:2/4;
}

#realtime-info > .map > ul > li.chugoku{
	grid-column: 1;
	grid-row:3/5;
}


#realtime-info > .map > ul > li.kyusyu{
	grid-column:1;
	grid-row:6;
}


#realtime-info > .map > ul > li.shikoku{
	grid-column:2;
	grid-row:6;
}

#realtime-info > .map > ul > li.kansai{
	grid-column:3;
	grid-row:6;
}

#realtime-info > .map > ul > li.tokai{
	grid-column:4/6;
	grid-row:6;
}

#realtime-info > .map > ul > li > a{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	font-size:1.1rem;
	line-height:125%;
	text-align:center;
	text-decoration:none;
	align-content:center;
	border: 1px #cbe8f8 solid;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-color: var(--colA2);
	pointer-events: initial;
	word-break:break-word;
}

#realtime-info > .map > ul > li > a > span{
	display:block;
}

#realtime-info > .map > ul > li > a > span.alert{
	color:var(--colC1);
	font-weight:600;
	margin-top:0.25em;
}

#realtime-info > .map > ul > li > a::after{
	display:none;
	content:"";
}

#realtime-info > .map > ul > li > a:hover{
	text-decoration: none;
	background-color:var(--colC2);
}


#realtime-info .disphone,
#realtime-info .onmap{
	display:none!important;
}


/*****************************
 最新の情報に更新する
 *****************************/
#tr-info p.al-center{
	margin-top:1em;
}

#tr-info a.reload{
	width:250px;
	min-width:auto;
}

#tr-info a.reload::after{
	content: "\f01e";
	color:var(--colA1);
}


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


}


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

	#realtime-info > .time{
		padding-left:0;
	}

	#realtime-info > .map  > p{
		width:70%;
		height:auto;
		/*aspect-ratio: 224/166;
		top:0;*/
		left:5%;
	}

	#tr-info{
		padding-top:var(--side-mgn-v);
	}

	#realtime-info > .map > ul{
		width:100%;
		/*height:auto;
		aspect-ratio: 320/225;*/
	}

	#tr-info a.ihiway{
		margin-bottom:0;
	}

	#tr-info a.ihiway img{
		width:auto;
		height:1.5em;
		vertical-align:text-bottom;
		margin-right: 0.25em;
	}

	#tr-info a[class^="icf-roundbtn-h"]{
		/*width:max(300px,77vw)!important;*/
		width: min(300px,100%);
		min-width: auto;
		min-height:40px;
		font-size:var(--txt-s);
	}

	#tr-info p.al-center{
		margin:1em 0;
	}

	#tr-info a + a{
		margin-top:1em;
	}

}


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

 工事規制・通行止め情報

----------------------------------*/
#tr-caution{
	/**/
}

#tr-caution h4{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height:155%;
	color:var(--colA1);
	border-bottom:none;
	padding:0 0;
	margin:0 0;
}

#tr-caution h4 > a{
	/*display:inline-block;*/
	display:block;
	overflow:hidden;
	text-decoration:none;
	padding-bottom:2px;
	border-bottom: 1px solid var(--colA1);
}

#tr-caution h4 > a.icf-corn:before{
	content:"\e903";
	font-size:2em;
	line-height:100%;
	display:inline-block;
	vertical-align:middle;
}


#tr-caution h4 > a:hover{
	filter:brightness(1.25);
}

#tr-caution h4 > a > *{
	position:relative;
	vertical-align:middle;
}

#tr-caution h4 > a > span{
	display:inline-block;
	margin-left:1em;
	width: calc(100% - 3em);

}


#tr-caution ul.icf-arrowList{
	display:flex;
	flex-wrap:wrap;
	gap:1em 0;
	margin:1em 0;
}

#tr-caution ul.icf-arrowList > li{
	width:50%;
	/*padding:0 0.5em;*/
}

#tr-caution ul.icf-arrowList > li:nth-child(odd){
	padding-right:0.5em;
}

#tr-caution ul.icf-arrowList > li:nth-child(even){
	padding-left:0.5em;
}


#tr-caution ul.icf-arrowList > li > a.icf-roundbtn-h_c{
	width:100%;
	min-width:100%}


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


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

	#tr-caution {
		padding:var(--side-mgn-v) var(--side-mgn-h);
	}

	#tr-caution a{
		padding: 0.75em 0 0.75em 0;
	}

	#tr-caution ul.icf-arrowList{
		gap:var(--side-mgn-h) 0;
		margin:var(--side-mgn-h) 0 0;
		flex-direction:column;
	}

	#tr-caution ul.icf-arrowList > li{
		width:100%;
		/*padding:0 0.5em;*/
	}

	#tr-caution ul.icf-arrowList > li:nth-child(odd){
		padding-right:0;
	}

	#tr-caution ul.icf-arrowList > li:nth-child(even){
		padding-left:0;
	}

	#tr-caution a.icf-roundbtn-h_c{
		line-height:125%;
		padding: 0.75em 30px;
	}



	#tr-caution .no-pc a.icf-roundbtn-h_c{
		margin-top:var(--side-mgn-h);
		width:100%;
	}

}


/*/==========================================================
/ 
/ スライドバナー
/
==========================================================/*/
#top-banner{
	top:-30px;
}


#top-banner.swiper-box > .l-outer-frame {
	padding:20px 15px;
	background-color:var(--colA3);
	min-height:227px;
}

#top-banner .swiper-pagination {
	bottom: -20px !important;
}

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

	#top-banner{
		top:0;
	}

	#top-banner.swiper-box > .l-outer-frame {
		padding:var(--side-mgn-v) 0;
		background-color:var(--colA3);
		margin-bottom: calc(var(--side-mgn-v) + 20px);
	}

}


/*/==========================================================
/ 
/ トピックス
/
==========================================================/*/
#topics{
	display:block;
	overflow:hidden;
	width:100%;
}


#topic-frame{
	max-width:1000px;
	margin:30px auto 0;
	min-height:300px;
}


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

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

	#topic-frame{
		margin-top:var(--side-mgn-v);
	}

}


/*/==========================================================
/ 
/ お知らせ
/
==========================================================/*/

#news{
	text-align:center;
}

#news > .l-outer-frame{
	/*padding:1.5em 0;*/
	margin-bottom:30px;
	text-align:center;
}


#news a.icf-roundbtn-h{
	min-width:300px;
	padding:0.5em 2.5em;
	font-size:1.6rem;
	line-height:155%;
}

#news-tags{
	width: min(100%,740px);
	margin:0 auto;
}

#news-tags > label{
	width:auto;
	min-width: 140px;
}

#news-tags + a{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:1.5em;
	right:0;
}

#news-frame{
	display:block;
	overflow-y:auto;
	/*margin-top:30px;*/
	height:30em;
	text-align:left;
}



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


}

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

	#news{
		margin-top:var(--side-mgn-v);
	}

	#news > .l-outer-frame{
		/*padding:1.5em 0;*/
		padding: 0 var(--side-mgn-h);
		margin-bottom:var(--side-mgn-v);
		text-align:center;
	}

	#news-list{
		margin-top:var(--side-mgn-v);
	}

	#news-tags > label{
		min-width:auto;
	}


	#news-frame{
		margin-top:var(--side-mgn-v);
		height:30em;
	}

}




dl#news-list{
	display:block;
	overflow:hidden;
}


dl#news-list  > dt{
	display:block;
	overflow:hidden;
	font-size:var(--txt-m);
	line-height:155%;
}

dl#news-list  > dt > span{
	display:inline-block;
	overflow:hidden;
	width:7.0em;
	float:left;
}


dl#news-list > dd{
	display:block;
	overflow:hidden;
	padding-bottom:0.75em;
	margin-left:6em;
}

dl#news-list > dd::before{
	content: "\e90b";
	margin-right: 10px;
	line-height:155%;
	float:left;
}

dl#news-list > dd:has(a)::before{
	color:var(--colA1);
}

dl#news-list > dd > a{
	text-decoration:underline;
}

dl#news-list > dd > a,
dl#news-list > dd > span{
	display:block;
	overflow:hidden;
	font-size: 1.6rem;
	line-height:155%;
}

dl#news-list  > dd + dt{
	margin-top:1em;
}


ul.tag-list{
	display:flex;
	gap:0 5px;
	width: calc(100% - 7em);
}





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


}

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

	dl#news-list > dd{
		margin-left:0;
	}

	dl#news-list  > dd + dt{
		margin-top:1em;
		border-top:1px solid #cccccc;
		padding-top:1em;
	}

	#news-tags > label input + span{
		min-width:30%;
	}

	#news-tags + a{
		display:none;
	}

	ul.tag-list{
		gap:5px 5px;
		flex-wrap:wrap;
	}

	ul.tag-list > li > span{
		min-width:8em;
	}

}


/*/==========================================================
/ 
/ 割引・お得情報
/
==========================================================/*/

#info{
	margin-bottom:0;
}


#info h2 > span:has(img){
	white-space:nowrap;
}

#info h2 > span > img{
	width: auto;
	height: 1.5em;
	float: left;
	margin-right:10px;
}


#info .shadow-box{
	padding: var(--mgn-m) var(--mgn-m) 0;
}

#info .box-inner{
	display:flex;
	flex-direction:column;
	height:100%;
}


#info .box-inner p + p{
	margin-top:1em;
}

#info .btn_box{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.5em 1em;
}

#info .btn_box > a{
	min-width:140px;
	font-size:var(--txt-s);;
	white-space: nowrap;
}


.info-slyder{
	display:block;
	overflow:hidden;
	margin:0 auto;
	padding:30px 0 45px;
	width: min(100%,360px);
	position:relative;
	margin-top: auto;
}

.info-slyder .swiper-slide{
	max-width:360px;
	line-height:100%;
	text-align:center;
}
/*
.info-slyder .swiper-pagination{
	bottom:-5px!important;
}
*/
.info-slyder img{
	width: min(100%,360px);
	height:auto;
}


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


}

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

	#info .box-inner{
		padding:0 0;
		height:auto;
	}

	#info a[class='icf-roundbtn-s'][target="_blank"]::after{
		font-size:1.8rem;
		color: var(--colA1);
	}

	/*

	#info .data-box{
		width:100%;
		padding:0 0;
	}*/

	#info .btn_box > a{
		min-width:100%;
	}



	.info-slyder{
		width: min(100%,360px);
		position: relative;
		bottom: auto;
		left: 0;
		right: 0;
	}

	.info-slyder .swiper-slide{
		max-width:360px;
		line-height:100%;
		text-align:center;
	}

}


/*/==========================================================
/ 
/ ピックアップ情報
/
==========================================================/*/

#pickup{
	
}

#pickup > .l-outer-frame{
	padding:0 40px;
}

#pickup > .l-outer-frame > section{
	display:block;
	overflow:hidden;
	margin-top:40px;
}


ul.pklist{
	display:flex;
	flex-wrap:wrap;
	gap:20px 20px;
}

ul.pklist li{
	width:calc(33% - 10px);
}

ul.pklist li > a{
	display:block;
	overflow:hidden;
	width: min(100%,360px);
	line-height:100%;
}

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



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


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

	#pickup{
		margin:calc(var(--side-mgn-v) * 2) 0;
	}

	#pickup > .l-outer-frame{
		padding:0 var(--side-mgn-h);
	}

	#pickup > .l-outer-frame > section{
		margin-top: var(--side-mgn-v);
	}

	ul.pklist{
		gap:var(--side-mgn-h) var(--side-mgn-h);
	}

	ul.pklist li{
		width:calc(50% - 1.5vw);
	}

}



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

 注意パネル

----------------------------------*/
.caution{
	display:block;
	overflow:hidden;
	margin:0 auto;
	width: min(100%,520px);
	text-align:center;
	font-weight:600;
	border:5px solid var(--colC1);
}

.caution h5{
	display:block;
	overflow:hidden;
	padding:0.5em 1em;
	font-size:2.0rem;
	line-height:100%;
	color:#FFFFFF;
	background-color: var(--colC1);
}

.caution > p{
	display:block;
	overflow:hidden;
}

.caution > p > a{
	display:flex;
	justify-content: center;
	align-items: center;
	gap: 0 1em;
	overflow:hidden;
	padding:0.75em 0;
	color: var(--colC1);
	text-decoration:none;
	position:relative;
	background-color:#FFFFFF;
}

.caution > p > a:hover{
	color: var(--colC1);
	background-color:var(--colC2);
	text-decoration: none;
}

.caution > p > a > *{
	position: relative;
	vertical-align:middle;
	color: var(--colC1);
}

.caution > p > a > span{
	font-size: 2.0rem;
	line-height:100%;
	color: var(--colC1);
}

.caution > p > a > strong{
	font-size: 5.6rem;
	line-height:100%;
}



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


}

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

	.caution{
		width: calc(100% - 12vw);
	}

	.caution h5{
		padding:0.5em 0.5em;
		font-size:1.4rem;
		line-height:125%;
	}

	.caution > p{
		display:flex;
		justify-content: center;
		align-items: center;
		gap: 0 0.5em;
		overflow:hidden;
		padding:0.75em 0;
		color: var(--colC1);
		position:relative;
	}

	.caution span{
		font-size: 1.8rem;
	}

	.caution strong{
		font-size: 3.0rem;
	}


}


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

 緊急連絡先

----------------------------------*/
#emergency{
	display:none;
	text-align:center;
}

#emergency a.icf-roundbtn-h{
	font-size:1.6rem;
	font-weight: 600;
	line-height:125%;
	color:var(--colC1);
	border-color:var(--colC1);
	margin-bottom: 6vw;
}
#emergency a.icf-roundbtn-h::after{
	color:var(--colC1);
}

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

	#emergency{
		display:block;
		text-align:center;
		padding:var(--side-mgn-v) var(--side-mgn-h);
	}

	#pickup .caution{
		display:none;
	}

}

#l-btmlinks{
	margin-top: 0;
}