@charset "utf-8";
/* html{scroll-behavior: smooth;} */

header { position: static; height: 120px;  padding: 34px 20px 0; background-color: #fff;}
header .hr { display: flex; justify-content: space-between; align-items: center;}
header .top_r { display: flex;}
header .top_r ul { display: flex;}

header .top_r .head_link li { margin-right: 51px;}
header .top_r .head_link li a { font-size: 17px;}
header .top_r .head_link li:nth-child(2) { margin-right: 32px;}
header .top_r .head_link li:nth-child(3) { width: 150px; height: 42px; color: #fff; line-height: 42px; text-align: center; background-color: #000; margin: -12px 10px 0 0;}
header .top_r .head_link li:nth-child(3) a { color: #fff; font-size: 16px;}
header .top_r .head_link li:nth-child(4) { width: 150px; height: 40px; line-height: 40px; text-align: center; background-color: #e5e5e5; margin: -12px 0 0;}
header .top_r .head_link li:nth-child(4) a { font-size: 16px;}

header .top_r li { margin-left: 10px;}
header .top_r li:first-child { margin-left: 17px;}

header .hr .cont_sp { display: none;}



footer { background-color: #000; color: #fff; padding: 80px 100px 50px 50px;}
footer .footer { width: 1100px; margin: 0 auto;}
footer .footer_u { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 60px;}
footer .footer_sp { display: none;}

footer .footer_l { padding-left: 24px;}
footer .footer_l p { margin-top: 30px; letter-spacing: 0.1em; line-height: 1.2;}

footer .footer_r { padding-right: 20px;}
footer .footer_r ul { height: 100px; display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .footer_r li { margin-bottom: 29px;}
footer .footer_r li a{ color: #fff; }
footer .footer_r li:nth-child(3n) { margin-bottom: 0;}
footer .footer_r li { margin-left: 40px;}
/*
footer .footer_r li:nth-child(n+4) { margin-left: 66px;}
*/

footer .copy { text-align: center; font-size: 14px}


/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	header { position: fixed; width: 100%; height: auto;  padding: 25px 25px 25px 15px; background-color: #fff; z-index: 20; top: 0;}
	header .hr { display: flex; height: auto; justify-content: space-between; align-items: center;}
	header .hr .cont_sp { display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #000; margin: 0 20px 0 0; font-size: 14px; color: #fff;}
	header .top_r { }
	header .top_r ul { display: none;}
	header h1 { width: 158px; height: auto;}
	
	header .menu { display: block; position: relative; right: 0; top: 6px; width: 20px; height: 18.5px; z-index: 99;}
	header .menu span { display: block; transition: translateX(-50%); position: absolute; width: 25px; height: 1px; background-color: #000;}
	header .menu span:nth-of-type(1) { top: 0;}
	header .menu span:nth-of-type(2) { top: 50%; transform: translate( 0,-50%);}
	header .menu span:nth-of-type(3) { bottom: 0;}
	header .close span:nth-of-type(1) { transform: translate(0%,9px) rotate(45deg); transition: transform .3s;} 
	header .close span:nth-of-type(2) { opacity: 0; transition: opacity .3s;}
	header .close span:nth-of-type(3) { transform: translate(0%,-9px) rotate(-45deg); transition: transform .3s;}
	
	header .menuBox { visibility: hidden;  opacity: 0;  width: 100vw;  height: 100%; position: fixed; top: 0;  left: 0;  transition: opacity .5s; z-index: 2;}
	header .menuBox .burger { height: auto; padding: 25px 25px 13px; }
	header .menuBox .burger .logo { margin-bottom: 37px;} 
	header .menuBox .burger { width: 100%; height: 100%; background-color:#fff; z-index: 2;}   
	header .menuBox .burger ul { display: block; width: 100%; margin: 0 auto 50px;}
	header .menuBox .burger li { display: block; width: 100%; margin: 0 auto; border-top: solid 1px #000;}  
	header .menuBox .burger li:last-child { border-bottom: solid 1px #000;} 
	header .menuBox .burger li a{ font-size: 14px; display: block; padding: 25px 0; }
	
	header .menuBox .burger .btns { display: block; width: 100%; height: 50px; line-height: 50px; margin: 0 auto; text-align: center;}
	header .menuBox .burger .btn01 { color: #fff; background-color: #000; margin-bottom: 26px;}
	header .menuBox .burger .btn02 { color: #000; background-color: #e5e5e5; margin-bottom: 30px;}
	
	
	header .menuBox .burger .links_logo { display: flex; width: 52%; justify-content: space-between; text-align: center;}
	header .menuBox .burger .links_logo li { padding: 0; border: none;}
	
	.menuBox.fade {	visibility: visible; opacity: 1;}
	
	
	footer { background-color: #000; color: #fff; padding: 51px 0 2px;}
	footer .footer { width: 90%; margin: 0 auto;}
	footer .footer_u { display: none;}
	
	footer .footer_sp { display: block; font-size: 14px;}
	footer .footer_sp ul { margin: 40px 0;}
	footer .footer_sp li { margin-bottom: 30px;}
	footer .footer_sp p { margin-bottom: 32px; letter-spacing: 0.1em; line-height: 1.667;}
	footer .footer_sp a { color: #fff; }
	footer .copy { text-align: center; font-size: 13px}
	
	
	
	
	
	
	
	
	
	
	
	
	
}