@charset "utf-8";


/*グローバルナビゲーション
==================================================================================================================*/
/*ヘッダー*/

header {
    width: 100%;
    padding: .5em 1em;
    margin: auto;
    position: fixed;
    margin-bottom: 0;
    top: 0;
    z-index: 9999;
    transition: all 0.8s;
}

.header_logo h1 img {
    transition: all 0.8s;
}

.header_logo h1 {
    width: calc(100vw - 80px );
    max-width: 300px;
}

/*
.sub_page .header_logo h1 img {
    filter: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(97%) hue-rotate(314deg) brightness(102%) contrast(99%);
}

.front_page header.transform .header_logo h1 img {
    filter: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(97%) hue-rotate(314deg) brightness(102%) contrast(99%);
}
*/


.nav_box {
    background: var(--c_pink);
    display: none;
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100vh;
    overflow: auto;
    margin: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5rem 5% 3rem;
}

.nav_box ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: 0;
    /* position: absolute;*/
    z-index: 99;
    top: 10%;
    right: 0;
    width: 100%;
    padding-bottom: 2em;
}

.nav_box ul li {
    width: 100%;
    padding: 0;
}

.nav_box ul li:first-child,
.nav_box ul li:not(:last-child) {
    /*  border-top: 2px solid #fff;*/
}

.nav_box ul li a {
    color: #fff;
    text-align: left;
    display: block;
    padding: .75em 1.5em .75em 1em;
    position: relative;
}

.nav_box ul li.request {
    border: unset;
    color: #fff;
    text-align: left;
    display: block;
    /*  padding: .75em 1em;*/
    position: relative;
    margin: 10px 0;
}

.nav_box ul li.request a,
.nav_box .request a {
    background: var(--c_red);
    border-radius: 6em;
    border: unset;
    color: #fff;
    text-align: left;
    display: block;
    padding: .75em 2em;
    position: relative;
}


.nav_box ul li a::before,
.nav_box .request a::before {
    font-family: "FAsolid";
    font-weight: 900;
    content: "\f138";
    color: #fff;
    display: inline-block;
    margin: 0 0 0 3px;
    position: absolute;
    top: 55%;
    right: 0.5em;
    transform: translateY(-50%);
}



#gnav_wrap.panelactive {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

.circle-bg {
    position: fixed;
    z-index: 3;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--c_crm);
    transform: scale(0);
    right: -50px;
    top: calc(50% - 50px);
    transition: all .5s;
}

#gnav_wrap.panelactive .nav_box {
    display: block;
}


#gnav_wrap.panelactive ul {
    opacity: 1;
}

#gnav_wrap.panelactive ul li {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#gnav_wrap.panelactive .request {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.nav_box .menu_01 {}

.nav_box .menu_01 li {
    border: solid 1px #fff;
    margin: 6px 2px;
}

.nav_box .menu_02 {}

.nav_box .menu_02 li {
    border-bottom: dotted 2px #fff;
    padding: 1px 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.circle-bg.circleactive {
    transform: scale(50);
    width: 50%;
}

.openbtn1 {
    background: var(--c_red);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 998;
    cursor: pointer;
    width: 90px;
    height: 80px;
    border-radius: 0 0 0 1em;
}


.openbtn1::after,
.openbtn1.active::after {
    content: "MENU";
    font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
    color: #fff;
    font-weight: 400;
    position: absolute;
    bottom: .35em;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}


.openbtn1.active::after {
    content: "CLOSE";
}


.openbtn1 span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 20px;
    height: 3px;
    border-radius: 2px;
    background-color: #fff;
    width: 50px;
}

.openbtn1 span:nth-of-type(1) {
    top: 12px;
}

.openbtn1 span:nth-of-type(2) {
    top: 28px;
}

.openbtn1 span:nth-of-type(3) {
    top: 44px;
}

.openbtn1.active {
    z-index: 9999;
}

.openbtn1.active span:nth-of-type(1) {
    top: 24px;
    transform: translateY(6px) rotate(-45deg);
}

.openbtn1.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn1.active span:nth-of-type(3) {
    top: 36px;
    transform: translateY(-6px) rotate(45deg);
}



@media (max-width:799px) {


    header {
        padding: .5em;
    }


    .header_logo h1 {
        max-width: 230px;
    }


    #gnav_wrap.panelactive,
    .nav_box,
    .nav_box>ul {
        width: 100%;
    }


    .openbtn1 {
        width: 60px;
        height: 50px;
        border-radius: 0 0 0 .5em;
    }

    .openbtn1::after,
    .openbtn1.active::after {
        bottom: .5em;
    }

    .openbtn1 span {
        left: 13px;
        height: 2px;
        width: 34px;
    }



    .openbtn1 span:nth-of-type(1) {
        top: 8px;
    }

    .openbtn1 span:nth-of-type(2) {
        top: 16px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 24px;
    }

    .openbtn1.active span {
        width: 28px;
        left: 15px;
    }

    .openbtn1.active span:nth-of-type(1) {
        top: 10px;
        transform: translateY(6px) rotate(-45deg);
    }

    .openbtn1.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn1.active span:nth-of-type(3) {
        top: 22px;
        transform: translateY(-6px) rotate(45deg);
    }



}


/*600px以上*/
@media (min-width: 600px) {
    .nav_box ul {
        padding: 0em;
    }

    .nav_box .menu_01 li {
        border: solid 1px #fff;
    }

    .nav_box .menu_01 li,
    .nav_box .menu_02 li {
        margin: 6px 2px;
        width: calc(100% / 2 - 1em);
    }
}

/*900px以上*/
@media (min-width: 900px) {
    .nav_menu .flex_area {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: self-start;
    }

    .nav_box .menu_01 li {
        margin: 1px;
        width: calc(100% / 2 - 1em);
        max-width: 310px;
    }

    .nav_box .menu_01 {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 1em 0 0;
        align-items: self-start;
        justify-content: flex-start;
        gap: 1em;
        max-width: 620px;
    }


    .nav_box .menu_02 {
        width: 40%;
        max-width: 500px;
    }

    .nav_box .menu_02 li {
        margin: 6px 2px;
        width: calc(100% / 1 - 1em);
    }

}

/*1200px以上*/
@media (min-width: 1200px) {}