/* フッター専用CSS */
/*==================================================================================================*/
/*footer-*/
footer{
	padding: 24px 0 18px;
	background: #0177C1;
}
footer .inner{
	width: 96%;
	max-width: 96%;
	margin-bottom: 60px;
}
footer .inner div{
	width: fit-content;
}
footer h2{
	width: fit-content;
	margin-bottom: 20px; 
}
footer h2 a{
	display: block;
}
footer h2 a:hover{
	opacity: .7;
}
footer h2 img:nth-child(1){
	width: 127px;
}
footer h2 img:nth-child(2){
	width: 160px;
	margin-left: 8px;
}
footer dl{
	width: 370px;
}
footer dl dt{
	width: 55px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #FFF;
	margin-bottom: 5px;
}
footer dl dd{
	width: calc( 100% - 80px );
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #FFF;
	margin-bottom: 5px;
}
footer dl dd::before{
	display: inline-block;
	content: "";
	width: 12px;
	height: 12px;
	background: center / contain no-repeat url("../img/icon-map.svg");
	margin-right: 10px;
}
footer div:nth-child(2){
	width: 676px;
}
footer .nav li a{
	color: #FFF;
}
footer .nav li a:hover{
	opacity: .7;
}
footer .nav li a.btn{
	color: var(--main-color);
	background: #FFF;
}
footer .nav li a.btn:hover{
	opacity: 1;
}
small{
	display: block;
	font-size: 10px;
	text-align: center;
	color: #FFF;
}
@media screen and (max-width: 1120px) {
	footer div:nth-child(2){
		width: 100%;
		margin-top: 20px;
		justify-content:flex-start;
	}
	footer .nav{
		margin-right: 20px;
	}
}
@media screen and (max-width: 820px) {
	footer{
		padding: 24px 0 18px;
	}
	footer .inner{
		width: 90%;
		max-width: 90%;
	}
	footer .inner div{
		width: 100%;
		margin-bottom: 40px;
	}
	footer h2{
		width: 100%;
	}
	footer h2 img:nth-child(1){
		width: 100px;
	}
	footer h2 img:nth-child(2){
		width: 140px;
	}
	footer dl{
		width: 100%;
	}
	footer dl dt{
		font-size: 10px;
	}
	footer dl dd{
		width: calc( 100% - 55px );
		font-size: 10px;
	}
}
@media screen and (max-width: 767px) {
	footer .nav{
		width: 100%;
	}
	footer .nav li{
		width: 100%;
		margin-bottom: 10px;
	}
}