/*==============================
        header
==============================*/
@charset "utf-8";

#header {
        position:sticky;
        top:0;
        left:0;
        z-index:999;
        .header {
                padding:0;
                background-color: #FFFFFF;
                box-shadow:0 3px 6px rgba(0,0,0,.16);
                .header_inner {
                        width: 100%;
                        max-width: 1300px;
                        background-color: #FFFFFF;
                        margin:0 auto;
                        height: 80px;
                        display: grid;
                        grid-template-columns: 350px 1fr 150px;
                        grid-gap:30px;
                        align-items: center;
                        padding-left:30px;
                        padding-right: 20px;
                        .menu-gmenu-container {
                                .menu {
                                        display:flex;
                                        flex-wrap:wrap;
                                        align-items:center;
                                        justify-content:flex-end;
                                        font-size:1.6rem;
                                        gap:2em;
                                        li {
                                                position:relative;
                                                .sub-menu {
                                                        position:absolute;
                                                        z-index:1;
                                                        bottom:auto;
                                                        left:50%;
                                                        transform:translatex(-50%);
                                                        padding-top:1em;
                                                        display:none;
                                                        li {
                                                                a {
                                                                        font-size:.9em;
                                                                        display:grid;
                                                                        line-height:1;
                                                                        align-items:center;
                                                                        justify-content:center;
                                                                        height:2.4em;
                                                                        background-color:#FFFFFF;
                                                                        padding:.5em 1em;
                                                                        white-space:nowrap;
                                                                        box-shadow:0 0 4px rgba(0,0,0,.15);
                                                                }   
                                                        }
                                                }
                                                &.menu-item-has-children {
                                                        cursor:pointer;
                                                }
                                                a {
                                                        color:#333333;
                                                        font-size: 110%;
                                                }
                                        }
                                }
                        }
                        & > .contact {
                                display:grid;
                                grid-template-columns:repeat(2,auto);
                                align-items:center;
                                justify-content:center;
                                grid-gap:.5em;
                                background-color:var(--color_main);
                                height:40px;
                                color:#FFFFFF;
                                img {
                                        width:1.25em;
                                }
                        }
                }
        }
}

@media screen and (min-width:1025px){

        #header {
                .header {
                        .header_inner {
                                .menu-gmenu-container {
                                        .menu {
                                                li {
                                                        &.menu-item-has-children {
                                                                &:hover {
                                                                        .sub-menu {
                                                                                display:block;
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
}


@media ( hover:hover ){

        #header {
                .header {
                        .header_inner {
                                .menu-gmenu-container {
                                        .menu {
                                                li {
                                                        a {
                                                                transition: .3s;
                                                                &:hover {
                                                                        color:var(--color_main);
                                                                }
                                                        }
                                                }
                                        }
                                }
                                & > .contact {
                                        &:hover {
                                                filter: brightness(1.2);
                                        }
                                }
                        }
                }
        }

}
@media screen and (max-width:1200px){
        
        #header {
                .header {
                        .header_inner {
                                grid-template-columns: 220px 1fr 150px;
                                grid-gap:20px;
                                padding-left:20px;
                                .menu-gmenu-container {
                                        .menu {
                                                gap:1em;
                                                font-size: 1.5rem;
                                        }
                                }
                        }
                }
        }
        
}

@media screen and (max-width:1024px){

        #header {
                .header {
                        .header_inner {
                                height: 50px;
                                grid-template-columns: 180px 50px;
                                justify-content:space-between;
                                padding-left:20px;
                                padding-right: 0;
                                .menu-gmenu-container {
                                        position:fixed;
                                        top:50px;
                                        left:0;
                                        background-color:#FFFFFF;
                                        width:100%;
                                        height:calc(100vh - 50px);
                                        height:calc(100dvh - 50px);
                                        opacity:0;
                                        pointer-events:none;
                                        transition:.3s;
                                        .menu {
                                                display:grid;
                                                justify-content:center;
                                                grid-template-columns:1fr;
                                                font-size:1.6rem;
                                                padding:20px 30px;
                                                grid-gap:0;
                                                max-width:320px;
                                                margin:0 auto;
                                                li {
                                                        border-bottom:1px solid #cccccc;
                                                        .sub-menu {
                                                                position:relative;
                                                                left:auto;
                                                                transform:translatex(0);
                                                                padding-top:0;
                                                                padding-bottom:10px;
                                                                display:none;
                                                                li {
                                                                        border-bottom:2px solid #ffffff;
                                                                        a {
                                                                                height:2.8em;
                                                                                background-color:#EFEFEF;
                                                                                box-shadow:none;
                                                                        }   
                                                                }
                                                        }
                                                        &.menu-item-has-children {
                                                                a {
                                                                        grid-template-columns:1fr 1.25em;
                                                                        .arrow {
                                                                                border:1px solid var(--color_main);
                                                                                height:1.25em;
                                                                                border-radius:50%;
                                                                                position:relative;
                                                                                &::before {
                                                                                        content:'';
                                                                                        display:block;
                                                                                        width:.3em;
                                                                                        height:.3em;
                                                                                        border-right:2px solid var(--color_main);
                                                                                        border-bottom:2px solid var(--color_main);
                                                                                        position:absolute;
                                                                                        top:45%;
                                                                                        left:50%;
                                                                                        transform:translate(-50%,-50%) rotate(45deg);
                                                                                        transition:.3s;
                                                                                }
                                                                                &.open {
                                                                                        &::before {
                                                                                                top:55%;
                                                                                                transform:translate(-50%,-50%) rotate(-135deg);
                                                                                        }
                                                                                }
                                                                        }
                                                                }
                                                        }
                                                        &.contact {
                                                                border:none;
                                                                margin-top:20px;
                                                                a {
                                                                        display:grid;
                                                                        grid-template-columns:repeat(2,auto);
                                                                        align-items:center;
                                                                        justify-content:center;
                                                                        grid-gap:.5em;
                                                                        background-color:var(--color_main);
                                                                        height:50px;
                                                                        color:#FFFFFF;
                                                                        &::before {
                                                                                content:'';
                                                                                width:1.25em;
                                                                                height:1.25em;
                                                                                background:url(../img/common/mail.svg);
                                                                        }
                                                                }
                                                        }
                                                        a {
                                                                display:grid;
                                                                height:3.4em;
                                                                align-items:center;
                                                        }
                                                }
                                        }
                                }
                                .spbtn {
                                        height:50px;
                                        position:relative;
                                        background-color:var(--color_main);
                                        display:grid;
                                        align-items:end;
                                        cursor:pointer;
                                        .txt {
                                                font-size:1.2rem;
                                                text-align:center;
                                                font-weight:600;
                                                color:#FFFFFF;
                                                padding-bottom:5px;
                                                .open {
                                                        display:none;
                                                }
                                        }
                                        &::before,&::after {
                                                content:'';
                                                display:block;
                                                width:50%;
                                                height:2px;
                                                background-color:#FFFFFF;
                                                position:absolute;
                                                left:50%;
                                                transform:translateX(-50%);
                                                transition:.3s;
                                        }
                                        &::before {
                                                top:10px;
                                        }
                                        &::after {
                                                top:26px;
                                        }
                                        .bar {
                                                display:block;
                                                width:50%;
                                                height:2px;
                                                background-color:#FFFFFF;
                                                position:absolute;
                                                left:50%;
                                                transform:translateX(-50%);
                                                top:18px;
                                                transition:.3s;
                                        }
                                }
                        }
                }
        }

	body {
		&.menuopen {
			overflow: hidden;
                #header {
                        .header {
                                .header_inner {
                                        .menu-gmenu-container {
                                                opacity:1;
                                                pointer-events:all;
                                        }
                                        .spbtn {
                                                .txt {
                                                        .close {
                                                                display:none;
                                                        }
                                                        .open {
                                                                display:inline;
                                                        }
                                                }
                                                &::before,&::after {
                                                        content:'';
                                                        display:block;
                                                        width:50%;
                                                        height:2px;
                                                        background-color:#FFFFFF;
                                                        position:absolute;
                                                        left:50%;
                                                }
                                                &::before {
                                                        top:18px;
                                                        transform:translateX(-50%) rotate(30deg);
                                                }
                                                &::after {
                                                        top:18px;
                                                        transform:translateX(-50%) rotate(-30deg);
                                                }
                                                .bar {
                                                        opacity:0;
                                                }
                                        }
                                }
                        }
                }
        }
	}

}

@media screen and (max-width:768px){

}

.d-no {
        display: none !important;
}