@charset "UTF-8";

header {
    position: relative;

    height: 110px;

    padding: 2em 0;
    box-sizing: border-box;
}

#logo {
    width: 180px;

    margin-left: 1em;
}

#nav_menu {
    position: absolute;
    top: 2.4em;
    right: 20px;

    width: 30px;
    height: 20px;

    z-index: 99;
    cursor: pointer;
}
    .nav-menu-line-1,
    .nav-menu-line-2,
    .nav-menu-line-3 {
        display: block;
        position: absolute;

        width: 100%;
        height: 3px;

        background: #80a426;
        transition:transform .3s;
    }
    .nav-menu-line-2{
        top: 9px;
    }
    .nav-menu-line-3{
        bottom: 0;
    }
        .nav-menu-line-1.active{
            top: 8px;
            background: #333;
            transform: rotate(45deg);
        }
        .nav-menu-line-2.active{
            background: #333;
            transform:scaleX(0);
        }
        .nav-menu-line-3.active{
            bottom: 9px;
            background: #333;
            transform: rotate(135deg);
        }


#nav_content {
    display: none;
    position: fixed;
    top: 0;

    width: 100%;
    height: 100vh;

    z-index: 98;
    background: rgba(255, 255, 255, 0.9);
}
    .Bg-nav-content{
        display: flex;
        position: absolute;

        width: 100%;
        height: 100vh;

        align-items:center;
    }
    .Bg-nav-content ul{
        position: absolute;
        left: 50%;

        width: 280px;

        transform: translateX(-50%);
    }
    .Bg-nav-content ul li{
        margin: 40px 0 40px 100px;

        text-align: center;
        letter-spacing: 2px;

        opacity: 0;
    }
        .Bg-nav-content ul li a{
            width: 100%;

            color: #333;
            font-size: 2em;
            font-weight: lighter;

            transition: .5s;
        }
            .Bg-nav-content ul li a:hover {
                color: #ff911b;
                background: -moz-linear-gradient(left,  #ff911b 0%, #f6da5c 100%);
                background: -webkit-linear-gradient(left,  #ff911b 0%,#f6da5c 100%);
                background: linear-gradient(to right,  #ff911b 0%,#f6da5c 100%);
                -webkit-background-clip: text;
            }


/* ■□■――――――――――――――――■□■
            ＳＰーＰＣ ①
■□■―――――――――――――――――■□■ */
@media screen and (min-width:768px) {

}/* @media screen and (min-width:768px) */



/* ■□■――――――――――――――――■□■
            ＳＰーＰＣ ②
■□■―――――――――――――――――■□■ */
@media screen and (min-width:1000px) {

header {
    overflow: auto;

    height: 125px;
}

#logo {
    float: left;

    width: 250px;

    margin-top: 0;
}

#nav_menu {
    display: none;
}

#nav_content {
    float: right;
    display: block;
    position: static;

    width: 640px;
    height: 50px;

    margin-right: 1em;

    background: transparent;
}

    .Bg-nav-content{
        display: block;
        position: static;

        height: 100%;
    }

        .Bg-nav-content ul{
            display: flex;
            position: static;
            left: 0;

            width: 100%;
            height: 100%;

            margin-right: 1em;

            transform: translateX(0%);
            justify-content: space-between;
            align-items: center;
        }
        .Bg-nav-content ul li{
            margin: 0;

            text-align: left;

            opacity: 1;
        }
            .Bg-nav-content ul li a{
                width: 100%;

                padding: 0.5em 0;
                box-sizing: border-box;

                color: #626B70;
                font-size: 20px;
                font-weight: normal;

                transition: 0s;
            }
                .Bg-nav-content ul li:nth-child(1) a:hover,
                .Bg-nav-content ul li:nth-child(2) a:hover,
                .Bg-nav-content ul li:nth-child(3) a:hover {
                    border-bottom: 2px solid transparent;
                    border-image: linear-gradient(to right,  #ff911b 0%,#f6da5c 100%);
                    border-image-slice: 1;
                }

/* CONTACT ボタン */
.Bg-nav-content ul li:nth-child(4) {
    display: block;

    letter-spacing: 3px;
    text-align: center;
}
    .Bg-nav-content ul li:nth-child(4) a {
        padding: 0.6em 2em;
        box-sizing: border-box;

        font-family: 'Poppins';
        color: #fafafa;
        font-weight: lighter;

        background: #80a426; /* Old browsers */
        background: -moz-linear-gradient(left,  #80a426 0%, #d4c218 100%);
        background: -webkit-linear-gradient(left,  #80a426 0%,#d4c218 100%);
        background: linear-gradient(to right,  #80a426 0%,#d4c218 100%);
    }
        .Bg-nav-content ul li:nth-child(4) a:hover {
            background: #ff911b;
            background: -moz-linear-gradient(left,  #ff911b 0%, #f6da5c 100%);
            background: -webkit-linear-gradient(left,  #ff911b 0%,#f6da5c 100%);
            background: linear-gradient(to right,  #ff911b 0%,#f6da5c 100%);
        }




}/* @media screen and (min-width:1000px) */



/* ■□■――――――――――――――――■□■
            ＰＣ
■□■―――――――――――――――――■□■ */
@media screen and (min-width:1400px) {



}/* @media screen and (min-width:1400px) */