/***********************************
 
徳島自動車道 全線開通10周年

***********************************/
@import "../../css/anniversary.css";


/************************
 タイトルカバー
************************/
#kv_img{
	display:block;
	overflow:hidden;
	margin:20px auto;
	width:min(100%,1000px);
	position:relative;
	line-height:100%;
}

#kv_img > img{
	width:100%;
	height:auto;
}

#kv_copy{
	display:block;
	overflow:hidden;
	padding:0 2em;
	width:100%;
	font-size:2.5rem;
	font-weight:800;
	line-height:155%;
	color:#FFFFFF;
	position:absolute;
	top:max(30%,205px);
	left:0;
	/*-webkit-transform: translateY(-50%);
	transform: translateY(-50%);*/
}

#kv_copy > p + p{
	text-align:right;
}


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

	#kv_img{
		margin:0 auto;
	}

	#kv_img > img{
		width:100%;
		height:auto;
	}

	#kv_copy{
		padding:0 1em;
		font-size:1.8rem;
		line-height:155%;
		top:50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		text-align:center;
	}

	#kv_copy > p + p{
		text-align:center;
	}

}


/************************
 EVENT INFORMATION
************************/
#event_info{
	display:block;
	overflow:hidden;
	padding-top:40px;
	background-color:#D9E1F2;
	text-align:center;
}

#event_info h2{
	display:block;
	overflow:hidden;
	font-size:2.8rem;
	font-weight:600;
	line-height:155%;
}

#event_info article {
	display:block;
	overflow:hidden;
	margin:40px 0;
}


#event_info article > h3{
	display:block;
	overflow:hidden;
	font-size:1.8rem;
	line-height:155%;
	margin-bottom:1em;
}

#event_info article > a{
	display:inline-block;
	overflow:hidden;
	width:min(100%,320px);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#event_info article:nth-child(2) > a{
	width:min(100%,500px);
}

#event_info article > a:hover {
	text-decoration: none;
	background-color: #DBDBDB;
}

#event_info article > a > img{
	width:100%;
	height:auto;
}


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

	#event_info{
		padding:var(--side-mgn-h) var(--side-mgn-h) 0;
	}

	#event_info h2{
		font-size:2.4rem;
		line-height:155%;
	}

	#event_info article {
		margin:var(--side-mgn-v) 0;
	}


	#event_info article > h3{
		font-size:1.8rem;
		line-height:155%;
	}

}


/************************
 バナーエリア
************************/
#bnr_area{
	display:block;
	overflow:hidden;
	width: min(100%,1200px);
	margin:20px auto;
}

ul.menu{
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: center;
}
ul.menu > li{

}

ul.menu > li > img{
	width:100%;
	height:auto;
	max-height:170px;
}

ul.menu > li > a{
	display:iline-block;
	overflow:hidden;
	width:134px;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	vertical-align:middle;
}

ul.menu > li > a:hover{
	filter:brightness(1.05);
}


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

	#bnr_area{
		width: min(100%,1200px);
		margin:0 0;
		padding:var(--side-mgn-v) var(--side-mgn-h) 0;
	}

	ul.menu{
		display:flex;
		flex-wrap:wrap;
		flex-direction: column;
		gap:var(--side-mgn-v) 0;
	}
	ul.menu > li{

	}

	ul.menu > li > img{
		width:100%;
		height:auto;
		max-height:170px;
	}

	ul.menu > li > a{
		width:min(100%,134px);
	}

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

}