@charset "utf-8";

.sideways-lr { writing-mode: sideways-lr; }

#header { position: fixed; width: 100%; top: 0; left: 0; z-index: 30; transition: .3s; background-color: #fff; box-shadow: 0 0 .25rem rgba(0,0,0,.125); }
#header.on { background-color: transparent; box-shadow: none; }
#header h1 { transition: .3s; }
#header.on h1 { filter: brightness(0) invert(1); }
#header #gnb { gap: 0 4rem; }
#header #gnb li a { display: inline-block; padding: 1.5rem 0; transition: .3s; color: var(--subcolor); }
#header.on #gnb li a { color: #fff; }
#header #gnb li a svg { display: none; }
#header .navCtrl { position: relative; width: 30px; height: auto; aspect-ratio: 1/1; margin-left: 5rem; }
#header .navCtrl span { position: absolute; right: 0; display: block; height: 2px; background-color: var(--subcolor);transition: .3s; }
#header.on .navCtrl span { background-color: #fff; }
#header .navCtrl span:first-child { width: 30px; top: 40%; transform: translateY(-40%); }
#header .navCtrl span:last-child { width: 21px; top: 60%; transform: translateY(-60%); }
.fullMenu { position: fixed; width: 100%; left: 0; right: 0; z-index: -1; }
@media(max-width:990px){
    #header { padding: 1.5rem 0; }
    #header.navOn { background-color: #fff; }
    #header .header-left { max-width: 30%; }
    #header .navCtrl { margin-left: 0; }
    #header .navCtrl.active { position: relative; display: block; }
    #header .navCtrl.active span { position: absolute; top: 50%; left: 50%; }
    #header .navCtrl.active span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
    #header .navCtrl.active span:last-child { width: 30px; margin-top: 0; transform: translate(-50%,-50%) rotate(-45deg); }

    .fullMenu { z-index: -1; transition: .3s; }
    .fullMenu.on { z-index: 50; }
    .fullMenu .info { padding: 1.5rem 7.5%; box-sizing: border-box; }
    .fullMenu .info.addr { background-color: var(--quickcolor1); }
    .fullMenu .info.call { background-color: var(--pointcolor); }
    #mgnb { position: relative; padding: 2.5rem 0 0; opacity: 0; z-index: -1; transition: .3s; background-color: #fff; border-top: 1px solid var(--light-gray); overflow-y: auto; }
    #mgnb.on { opacity: 1; z-index: 51; }
    #mgnb li a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 7.5%; color: var(--subcolor); }
    #mgnb li:last-of-type a { padding: 1.125rem 7.5% 3rem; }
}

#footer { position: relative; background-color: var(--quickcolor1); padding: 4rem 0; overflow: hidden; }
#footer::before { position: absolute; content: ''; width: 50%; height: 50%; background-color: rgba(16,58,167,.125); left: calc((100% - var(--layoutwidthMini)) / 2); top: -10%; border-radius: 25%; filter: blur(5rem); z-index: 5; }
#footer .footer-upper, #footer .footer-lower { position: relative; z-index: 10; }
#footer .footer-upper ul li a { display: block; color: #fff; padding: 0 1rem; }
#footer .footer-upper ul li:not(:first-child) { border-left: 1px solid var(--dark-gray); }
#footer .footer-upper ul li:last-child a { padding-right: 0; }
#footer .footer-lower { color: rgba(255,255,255,.5); }
#footer .footer-lower .footer-left p { margin-top: 1.25rem; color: rgba(255,255,255,.4); }
@media(max-width:990px){
    #footer { padding: 3rem 0; font-size: 1.25rem; }
    #footer::before { width: 100%; height: 75%; background-color: rgba(16,58,167,.25); left: -25%; top: 5%; filter: blur(7.5rem); }
    #footer .footer-upper, #footer .footer-lower { flex-wrap: wrap; }
    #footer .footer-upper > * , #footer .footer-lower > * { width: 100%; }
    #footer .footer-upper h2 { max-width: 50%; }
    #footer .footer-upper ul { margin-top: 2.5rem; margin-bottom: 1rem; }
    #footer .footer-upper ul li:first-child a { padding-left: 0; }
    #footer .footer-lower .footer-left { letter-spacing: -0.5px; }
    #footer .footer-lower .footer-left p { margin-bottom: 2.5rem; }
    #footer .footer-lower .footer-right { font-size: 1.125rem; }
}

#quick { display: block; position: fixed; right: 0; bottom: 10%; z-index: 20; }
#quick .call, #quick .contact { min-width: 100%; line-height: 1; }
#quick .call { background-color: var(--quickcolor4); padding: 2rem 1.5rem; border-top-left-radius: .75rem; }
#quick .contact { background-color: var(--quickcolor3); padding: 4rem 1.5rem; border-bottom-left-radius: .75rem; }
#quick .call img { max-width: 16px; transform: rotate(-90deg); }
#quick .call span, #quick .contact span { letter-spacing: 0; }
#quick .quickList { background-color: var(--quickcolor4); }
#quick .quickList li a { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.25rem 0; aspect-ratio: 1/1; }
#quick .quickList li:not(:last-child) a { position: relative; }
#quick .quickList li:not(:last-child) a::before { position: absolute; content: ''; width: 50%; height: 1px; background-color: rgba(255,255,255,.3); bottom: 0; left: 50%; transform: translateX(-50%); }
#quick .quickList li a img { margin: auto; }
#quick .quickList li a span { display: none; position: absolute; top: 50%; right: 110%; transform: translateY(-50%); background-color: #fff; padding: .5rem 1rem; border-radius: 1rem; color: var(--quickcolor3); white-space: nowrap; box-shadow: 0 0 1rem rgba(0,0,0,.125); }
#quick .quickList li a:hover span { display: block; }
#quick .quickTgl { position: relative; aspect-ratio: 1/1; background-color: var(--quickcolor2); cursor: pointer; }
#quick .quickTgl span { position: absolute; display: inline-block; width: .75rem; height: 2px; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .3s; }
#quick .quickTgl span:first-child { transform: translate(-50%,-50%) rotate(0); }
#quick .quickTgl span:last-child { opacity: 0; }
#quick .quickTgl.off span:first-child { transform: translate(-50%,-50%) rotate(90deg); }
#quick .quickTgl.off span:last-child { opacity: 1; }
#quick #gotoTop { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1/1; background-color: var(--quickcolor1); border-bottom-left-radius: .75rem; }
@media(max-width:990px){
    #quick .call { padding: 1.5rem 2rem; }
    #quick .contact { padding: 4rem 2rem; }
    #quick .call img { max-width: 1.25rem; }
    #quick .call span, #quick .contact span { font-size: 1.5rem; }
}

#cursor {position: fixed; z-index: 99; left: 0; top: 0; pointer-events: none; will-change: transform; }
[cursor-class="arrow"], [cursor-class="arrow"] * { cursor: none; }
@media (hover: hover) and (pointer: fine) {
    #cursor .cursor__circle { width: 0; height: 0; transition: .3s; }
    #cursor.arrow .cursor__circle { position: relative; display: flex; align-items: center; justify-content: center; width: 6.25rem; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--pointcolor); }
    #cursor.arrow:after { position: absolute; content: "Drag"; letter-spacing: 0; font-size: .95rem; font-family: var(--pointfont); font-weight: 600; text-transform: uppercase; color:#fff; width: fit-content; height: fit-content; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    #cursor svg { opacity: 0; transition: .3s; }
    #cursor.arrow svg { position: absolute; top: 50%; transform: translateY(-50%); opacity: 1; z-index: 1; }
    #cursor.arrow svg:first-child { left: .25rem; }
    #cursor.arrow svg:last-child { right: .25rem; }
}
@media (pointer:coarse) {
    #cursor {display: none;}
}

.scrlLock { overflow-y: hidden; }

.mediaPopupWrap { display: none; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 55; }
.mediaPopupWrap.on { display: flex; align-items: center; justify-content: center; }
.mediaPopupCover { position: absolute; width: inherit; height: inherit; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.mediaPopup { position: relative; width: 50%; height: auto; aspect-ratio: 16/9; z-index: 60; }
.mediaPopup .mediaClose { position: absolute; top: -2.5%; right: -7.5%; cursor: pointer; }
.mediaPopup iframe { width: 100%; height: auto; aspect-ratio: 16/9; overflow: hidden; }
@media(max-width:1240px){
  .mediaPopup { width: 90%; }
  .mediaPopup .mediaClose { top: -25%; right: 0; }
}