@charset "UTF-8";

:root {
	--color-white: #fff;
	--color-white-80: rgba(255, 255, 255, 0.80);
	--color-black: #000;
	--color-bg01: #222;
	--color-point01: #7D4CFC;
	--color-text-primary: #111;
	--color-text-secondary: #343434;
	--color-text-tertiary: #666;
}

.pc { display: block;}
.mob { display: none;}

@media all and (max-width: 768px){
	.pc { display: none;}
	.mob { display: block;}
}

header{position:fixed;left:0;top:0;width:100%;height: 8.706dvh;z-index:999;padding: 0 clamp(24px,8.3333vw,160px);overflow:hidden;;transition:0.4s;}
header .head_in{position:relative;height: 100%;display:flex;align-items:center;justify-content:space-between;}
header h1{width:4.6875vw;height:3.1481dvh;}
header h1 a{display:block;background:url(https://placehold.co/90x34/000000/FFFFFF/png?text=Logo) no-repeat left center / contain; height:100%;}
header .gnb_dim{display:none;background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:0.6s;}
header .gnb{display:flex; align-items: center; gap:0 63px; height: 100%;}
header .gnb > li{position:relative;}
header .gnb > li > a{display:block;}
header .gnb > li > a span{display:flex;align-items:center;position:relative;color:var(--color-text-secondary);font-size:clamp(16px,1.0416vw,20px);line-height:2em;}
header .gnb > li:hover > a span,
header .gnb > li.active > a span { color:var(--color-point01);}
header .info{display:none;gap:0 2vw;align-items:center;z-index: 1;}
header .gnb_btn{display:none;width:4vw;padding: 1vw 0;}
header .gnb_btn span{display:block;background-color:#000;width:100%;height:3px;transition:0.4s;}
header .gnb_btn span ~ span{margin-top:0.8vw;}
.sub header{background-color:var(--color-white);}
.sub header .head_in::after{opacity:1;}
@media all and (max-aspect-ratio: 17/10){}
@media all and (min-aspect-ratio: 13/10){}
@media all and (max-aspect-ratio: 13/10){
	header{overflow: visible;}
	header .gnb_dim{display:block;}
	header .gnb{position:fixed;top:0;right:0;background-color:var(--color-white);width:60%;height:100%;display:block;padding: 15vw 5vw 0;transform:translate(100%,0);transition:0.8s;}
    header .info { display: flex;}
	header .gnb_btn{display:block; cursor: pointer;}
	header .gnb > li { height:auto;}
	header .gnb li ~ li {margin-top:5vw;}
	header .gnb > li > a{padding:0;display: flex;}
	header .gnb > li > a span{line-height:1.3em;padding:0;font-size: 2.8vw;}
	header.gnb_on .head_in::after{opacity:0;}
	header.gnb_on .gnb_dim{opacity:1;pointer-events:auto;}
	header.gnb_on .gnb_btn span:nth-child(1){transform: translateY( calc(0.8vw + 3px) ) rotate(45deg);transform-origin: center center;}
	header.gnb_on .gnb_btn span:nth-child(2){opacity: 0;}
	header.gnb_on .gnb_btn span:nth-child(3){transform: translateY( calc(-0.8vw - 3px) ) rotate(-45deg);transform-origin: center center;}
	header.gnb_on .gnb{transform:none;}
	header .depth01.on > li > a span::before{transform:none;}
}
@media all and (max-aspect-ratio: 1/1){
	header{padding: 0 6vw;}
	header h1{width: 22vw;height: 6vw;}
	header .info{gap: 0 4vw;}
	header .info .tel i{width:3.6vw;height:3.6vw;}
	header .info .tel p{display:none;}
	header .gnb_btn{width:6vw;}
	header .gnb_btn span ~ span{margin-top: 1vw;}
	header.gnb_on .gnb_btn span:nth-child(1){transform: translateY( calc(1vw + 3px) ) rotate(45deg);}
	header.gnb_on .gnb_btn span:nth-child(3){transform: translateY( calc(-1vw - 3px) ) rotate(-45deg);}
	header .gnb{width:70%;}
	header .gnb ~ .depth01{margin-top:6vw;}
	header .gnb > li > a span{font-size: 4vw;}
}
@media all and (max-aspect-ratio: 6/10){
	header{height:15vw;}
	header .head_in{height:15vw;}
	header h1{width: 27vw;height: 7vw;}
	header .info .tel i{width:5vw;height:5vw;}
	header .info .tel p{font-size: 3.8vw;}
	header .gnb{width: 80%;padding: 20vw 9vw 0;}
	header .gnb_btn{width: 7vw;}
	header .gnb_btn span{height:2px;}
	header .gnb_btn span ~ span{margin-top: 1.6vw;}
	header.gnb_on .gnb_btn span:nth-child(1){transform: translateY( calc(1.6vw + 2px) ) rotate(45deg);}
	header.gnb_on .gnb_btn span:nth-child(3){transform: translateY( calc(-1.6vw - 2px) ) rotate(-45deg);}
	header .gnb li ~ li{margin-top:8vw;}
	header .gnb > li > a span{font-size:5vw;}
}

footer {padding:2.6041vw 5.2083vw; background: var(--color-bg01);}
footer .footer_in { padding:0 3.125vw; font-size: clamp(12px,0.729vw,14px);}
footer .top { display: flex; justify-content: space-between; padding-bottom: 24px;}
footer .top h2 { color:var(--color-white); font-size: clamp(12px,0.729vw,14px);}
footer .top .info li { display: flex; align-items: baseline; gap:0 1.0416vw; margin-top: clamp(10px,0.625vw,12px); color:var(--color-white-80);}
footer .top .info li strong { display: block; min-width: 5.7291vw;}
footer .top .sns {display: flex; align-items: center; justify-content: flex-end;}
footer .top .sns li a {display: flex; align-items: center; justify-content: center; width:50px; height:50px; border-radius: 50%; background: #3D3D3D;}
footer .bot { padding-top: 24px; border-top:1px solid #313131;}
footer .copy { color:var(--color-text-tertiary);}