@charset "utf-8";
/* CSS Document */
body,
header,
footer {
    width: auto;
	min-width: 320px;
}
body.menu_open{
	overflow: hidden;
}
.pc_br{
	display: none;
}
.sp_br{
	display: block;
}
.sp_hide{
	display: none !important;	
}
.pc_hide{
	display: block !important;
}

/* header */
header{
    min-width: 320px;
}
header > div:first-child{
    height: 49px;
}
header #logo{
    padding: 15px 0 0 16px;	
}
header #logo img{
	max-width: 169px;
}
.recruit header #logo img{
	max-width: 169px;
	margin-right: 11px;
}
header #logo h1,
header #logo p a{
	font-size: 0.75rem;
}
.recruit header #logo h1::before,
.recruit header #logo p a::before,
header.other #logo h1::before,
header.other #logo p a::before{
	max-width: 169px;
	background: url("../images/logo.svg") top left / 169px 22px no-repeat;	
}
.recruit header #logo h1 span,
.recruit header #logo p span{
	font-size: 0.75rem;
	letter-spacing: 2.2px;
    vertical-align: 0;
}
.recruit header #logo h1:after,
.recruit header #logo p:after{
	max-width: 169px;
}
/* menu */
header #sp_menu a{
    font-size: 0.6875rem;
	width: 49px;
	height: 49px;
}
header #sp_menu .link_btn a{
    gap: 0;
    padding-top: 12px;
}
header #sp_menu .link_btn a::before{
	background: url("../images/icon/youtube.svg") top left / 13.99px 9.79px no-repeat;
	width: 13.99px;
	height: 9.79px;
}
header #sp_menu_btn a::before,
header #sp_menu_btn a::after {
    width: 19px;
    height: 2px;
}
header #sp_menu_btn a::before {
    top: 20px;
}
header #sp_menu_btn a::after {
    top: 28px;		
}
header #sp_menu_btn.active a::before {
	animation: sp_menu-amine1 .6s forwards;	
}
header #sp_menu_btn.active a::after {
	animation: sp_menu-amine2 .6s forwards;		
}
@keyframes sp_menu-amine1 {
	0% {
    	transform: rotate(0deg);
    	top: 20px;
    	width: 19px;
	}
	50% {
    	transform: rotate(0deg);
    	top: 22px;
    	width: 19px;
	}	
	100% {
    	transform: rotate(45deg);
    	top: 22px;
    	width: 18px;
	}
}
@keyframes sp_menu-amine2 {
	0% {
    	transform: rotate(0deg);
    	top: 20px;
    	width: 19px;
	}
	50% {
    	transform: rotate(0deg);
    	top: 22px;
    	width: 19px;
	}	
	100% {
    	transform: rotate(-45deg);
    	top: 22px;
    	width: 18px;
	}
}
header #sp_menu_btn.close-menu a::before,
header #sp_menu_btn.close-menu a::after{
    height: 2px;	
}
header #sp_menu_btn.close-menu a::before {
	animation: sp_close-menu-amine1 .6s forwards;	
}
header #sp_menu_btn.close-menu a::after {
	animation: sp_close-menu-amine2 .6s forwards;		
}
@keyframes sp_close-menu-amine1 {
	0% {
    	transform: rotate(45deg);
    	top: 22px;
    	width: 18px;
	}
	50% {
    	transform: rotate(0deg);
    	top: 22px;
    	width: 19px;
	}	
	100% {
    	transform: rotate(0deg);
    	top: 20px;
    	width: 19px;
	}
}
@keyframes sp_close-menu-amine2 {
	0% {
    	transform: rotate(-45deg);
    	top: 22px;
    	width: 18px;
	}
	50% {
    	transform: rotate(0deg);
    	top: 22px;
    	width: 19px;
	}	
	100% {
    	transform: rotate(0deg);
    	top: 28px;
    	width: 19px;
	}
}
/* gnavi */
header #gnavi{
	padding: 88px 30px 30px;
}
header #gnavi .navi_list{
	margin: 0 auto;
    gap: 20px;
	flex-direction: column;
}
header .navi_list > div > p > a::after,
header #gnavi ul li a::after{
	margin-left: 24px !important;	
}
header .navi_list > div > p > a:hover::after,
header #gnavi ul li a:hover::after{
	width: calc(100% - 24px) !important;
}
header #gnavi ul{
    padding-top: 10px;
    gap: 10px;
}
header #gnavi ul li a{
	font-size: 0.875rem;
	padding-left: 24px;
}
header #gnavi ul li a::before{
	width: 13px;
	height: 1px;
	top: 10px;
	left: 2px;
}
header #gnavi ul + p{
	margin-top: 20px;
}
header .navi_list > div > p > a{
	font-size: 1.125rem;
	padding-left: 24px;
}
header .navi_list > div > p > a::before{
	width: 15.8px;
	height: 15.8px;
	top: 7px;
}

header .con_list{
    min-height: initial;
}
header .con_list > div{
	margin-top: 40px;
}
header .con_list > div p{
	font-size: 0.875rem;
    padding: 9px 0 0 0;	
}
/* footer */
footer{
	padding: 40px 30px 35px;
}
#footer_cnt > div {
	flex-direction: column;
}
footer .foot_logo img{
	width: 168px;
} 
footer .address{
	margin: 20px 0 15px;
	flex-direction: column;
}
footer #footer_link{
	margin-top: 23px;
}
footer #footer_link ul{
	display: flex;
    gap: 10px 30px;
    max-width: 221px;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer #footer_link .multiple{
    margin-top: 23px;
    display: flex;
    gap: 30px;
	max-width: 270px;
	justify-content: space-between;
}
footer .copyright{
	margin-top: 93px;
}