.footer-wrap{background: #33373E;display: -webkit-box;display: -ms-flexbox;display: flex;}
.footer-box{width: calc(100% - 48px);max-width: 1500px;margin: auto;}
.footer-inner{padding: 80px 0;font-family: "Paperlogy", sans-serif;}
.footer-inner .footer-top{display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-bottom: 80px;}
.footer-inner .logo-box{display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 20px;gap: 24px;}
.footer-inner .logo-box img{display: block;width: 128px;}
.footer-inner .logo-box > span{display: block;font-weight: 600;font-size: 18px;line-height: 150%;letter-spacing: -0.025em;color: #FFFFFF;padding-top: 7px;}
.footer-inner .info-box{font-weight: 400;font-size: 15px;line-height: 150%;letter-spacing: -0.025em;color: #888888;}
.footer-inner .info-box p{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.footer-inner .info-box p span{display: -webkit-box;display: -ms-flexbox;display: flex;gap: 0 3px;white-space: nowrap;position: relative;}
.footer-inner .info-box p span:not(:first-child){padding-left: 9px;}
.footer-inner .info-box p span:not(:first-child)::before{position: relative;display: inline-block;font-weight: 600;font-size: 18px;content: "|";font-weight: 400;font-size: 15px;line-height: 150%;letter-spacing: -0.025em;color: #888888;margin-right: 5px;}
.footer-inner .util-box ul{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: 0 9px;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.footer-inner .util-box ul li{position: relative;}
.footer-inner .util-box ul li:not(:first-child) a{padding-left: 8px;}
.footer-inner .util-box ul li:not(:first-child):before{position: relative;display: inline-block;content: "|";font-weight: 600;font-size: 15px;line-height: 150%;letter-spacing: -0.025em;color: #FFFFFF;}
.footer-inner .util-box ul li a{font-weight: 600;font-size: 15px;line-height: 150%;letter-spacing: -0.025em;color: #FFFFFF;}
.footer-inner .related-box{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.footer-inner .related-box > small{font-weight: 600;font-size: 13px;line-height: 150%;letter-spacing: -0.025em;color: #888888;padding-right: 13px;}
.related-site-wrap{position: relative;width: 240px;}
.related-site-wrap > a{display: block;padding: 10px 50px 11px 15px;border: 1px solid #888888;border-radius: 6px;position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;}
.related-site-wrap > a span{font-weight: 600;font-size: 13px;line-height: 150%;letter-spacing: -0.025em;color: #FFFFFF;}
.related-site-wrap > a span:after{content: "";display: inline-block;position: absolute;top: 0;bottom: 0;margin: auto;right: 18px;width: 7px;height: 5px;background: url(../img/common/select.png) no-repeat center/contain;}
.related-site-wrap > a.active span:after{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.related-site-wrap .related-site-box{display: none;position: absolute;bottom: 100%;left: 0;z-index: 50;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
.related-site-wrap .related-site-box ul{padding: 20px;background: #fff;margin-bottom: 2px;max-height: 300px;overflow-y: auto;border-radius: 6px;}
.related-site-wrap .related-site-box ul > li:not(:last-child){padding-bottom: 10px;}
.related-site-wrap .related-site-box ul > li > a{display: block;position: relative;font-size: 16px;color: #333;line-height: 26px;}
.related-site-wrap .related-site-box ul > li:hover > a{color: #003378;}

.hide-pc{display: none !important;}

@media (max-width: 768px){
	.hide-sp{display: none !important;}
	.hide-pc{display: block !important;}

	.footer-inner{position: relative;padding-top: 32px;padding-bottom: 32px;}
	.footer-inner .footer-top{margin-bottom: 24px;}
	.footer-inner .footer-top-content{max-width: 270px;}
	.footer-inner .logo-box{margin-bottom: 24px;gap: 24px;}
	.footer-inner .logo-box img{width: 120px;}
	.footer-inner .logo-box > span{font-size: 13px;padding-top: 7px;}
	.footer-inner .info-box p span{display: -webkit-box;display: -ms-flexbox;display: flex;gap: 0 3px;}
	.footer-inner .info-box p span:not(:first-child){padding-left: 0;}
	.footer-inner .info-box p span:not(:first-child)::before{display: none;}
	.footer-inner .util-box{padding-bottom: 153px;}
	.footer-inner .util-box ul{display: -webkit-box;display: -ms-flexbox;display: flex;gap: 0;-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.footer-inner .util-box ul li{width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;}
	.footer-inner .util-box ul li:not(:first-child) a{padding-left: 0;}
	.footer-inner .util-box ul li:not(:first-child):before{display: none;}
	.footer-inner .util-box ul li a{font-size: 13px;}
	.footer-inner .related-box{display: block;}
	.footer-inner .related-box > small{padding-right: 0;display: block;text-align: right;margin-left: -100px;}
	.footer-inner .related-site-wrap{position: absolute;bottom: 67px;right: 0;}
}