/* common */
*{ font-family: var(--baseFont); }


/* header */
header h1 a::after{ background-image: url("/en/img/common/logo.svg"); }
header .depth01{ margin-left: 6%; } 
header .depth01 dl dt a{ padding-inline: 25px; }
header .depth01 dl dt a i{ margin-left: 20px; }
header .depth02 a{ font-family: var(--baseFont); }

@media screen and (max-width: 1700px){
	header h1 img{ height: 37px; }	
}

@media screen and (max-width: 1450px){
	header .depth01{ margin-left: 8%; } 
	header .depth01 > li > a{ padding-inline: 20px; }
}

@media screen and (max-width: 1350px){
	header h1 img{ height: 35px; }
	header .depth01{ margin-left: 10%; } 
	header .depth01 > li > a{ padding-inline: 17px; }
}


/* menu */
#menu nav .depth03 > li > a{ font-family: var(--baseFont); }


/* footer */
footer{ background: #151515; padding: 100px 0 60px; }
footer .line01{ border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 80px; margin-bottom: 50px; }
footer .line02{ position: relative; overflow: hidden; }

footer .flex{ display: flex; justify-content: space-between; }
footer .flex01{ align-items: flex-start; }
footer .flex02{ margin-top: 30px; }

footer h4{ font-size: 5.4rem; font-weight: 600; color: #FFF; letter-spacing: -0.02em; margin-bottom: 50px; }
footer h4 em{ color: var(--mainColor); }
footer .copyright{ font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.3); letter-spacing: -0.02em; }

footer nav a{ display: block; line-height: 1.3; }
footer .depth01{ display: grid; grid-template-columns: repeat(6, calc(100% / 6)); margin: -12px; }
footer .depth01 > li{ margin: 12px; }
footer .depth01 > li:last-of-type{ display: none; }
footer .depth01 > li > a{ font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; padding: 14px 0; margin-top: -14px; }

footer .depth02 > li > a{ font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.7); letter-spacing: -0.02em; padding: 6px 0; }
footer .depth02 > li > div{ display: none; } 

footer address{ flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; margin: -15px -30px; }
footer address dl{ margin: 15px 30px; }
footer address dl dt{ font-size: 22px; font-weight: 500; color: #FFF; }
footer address dl dd{ font-size: 18px; font-weight: 300; color: rgba(255, 255, 255, 0.6); margin-top: 12px; }

footer .link ul{ display: flex; justify-content: flex-end; margin: -20px; }
footer .link ul li a{ display: block; font-size: 18px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; padding: 20px; }


/* top */
#top{ flex-shrink: 0; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.05); border: none; border-radius: 50%; position: relative; overflow: hidden; margin-left: 20px; }
#top i{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; transition: transform 0.4s; }
#top i:first-of-type{ position: absolute; top: 0; left: 0; transform: translateY(0); }
#top i:last-of-type{ position: relative; transform: translateY(100%); }
#top i::before{ content: ""; width: 100%; height: 16px; display: block; background: url("/en/img/common/icon_top.svg") no-repeat center center / contain; }

@media screen and (hover: hover) and (pointer: fine){
	#top:hover i:first-of-type{ transform: translateY(-100%); }
	#top:hover i:last-of-type{ transform: translateY(0); }
}

@media screen and (max-width: 1700px){
	footer{ padding: 70px 0 40px; }
	footer .line01{ padding-bottom: 50px; }
	footer h4{ margin-bottom: 40px; }
	footer .copyright{ font-size: 17px; }
	
	footer .depth01 > li > a{ font-size: 18px; padding: 5px 0; margin-top: -5px; }
	footer .depth02 > li > a{ font-size: 17px; }
	
	footer address dl dt{ font-size: 20px; }
	footer address dl dd{ font-size: 17px; }
	
	footer .link ul{ margin: -15px; }
	footer .link ul li a{ padding: 15px; }
}

@media screen and (max-width: 1280px){
	footer{ padding: 40px 0 35px; }
	footer .line01{ padding-bottom: 30px; margin-bottom: 30px; }
	footer h4{ margin-bottom: 30px; }
	footer .copyright{ font-size: 16px; }
	
	footer .depth01{ margin: -10px; }
	footer .depth01 > li{ margin: 10px; }
	footer .depth01 > li > a{ font-size: 17px; }
	footer .depth02 > li > a{ font-size: 16px; }
	
	footer address{ flex-direction: column; margin: -15px -20px; }
	footer address dl{ margin: 15px 20px; }
	footer address dl dt{ font-size: 18px; }
	footer address dl dd{ font-size: 16px; margin-top: 7px; }
	
	footer .link ul{ margin: -10px; }
	footer .link ul li a{ font-size: 17px; padding: 10px; }
}

@media screen and (max-width: 1200px){
	footer h4{ margin-bottom: 0; }
	footer nav{ display: none; }
}

@media screen and (max-width: 900px){
	footer .flex02{ flex-direction: column-reverse; }
	
	footer address{ padding-right: 40px; }
	
	footer .link{ margin-bottom: 20px; }
	footer .link ul{ justify-content: flex-start; }
	
	/* top */
	#top{ margin-left: 0; position: absolute; bottom: 40px; right: 0; }
}