@charset "UTF-8";

header {
    position: fixed;
    top: 0;

    width: 100%;
    height: 75px;

    background: rgba(255, 255, 255, 0.7);
    transition: .5s;

    z-index: 99;
}
    header.hide{
        top: -75px;
    }


header .inner-1300box {
    display: flex;

    height: 100%;

    justify-content: space-between;
}


#logo {
    width: 250px;

    margin-left: 1em;
}

#nav_menu {
    display: flex;

    width: 75px;
    height: 75px;

    padding: 23px 18px;

    background-color: #01417f;
    cursor: pointer;

    flex-direction: column;
    justify-content: space-between;
}
    .nav-menu-line-1,
    .nav-menu-line-2,
    .nav-menu-line-3 {
        width: 100%;
        height: 3px;

        background-color: #fff;
        transition:transform .3s;
    }

        .nav-menu-line-1.active{
            margin-top: 13px;
            background: #fff;
            transform: rotate(45deg);
        }
        .nav-menu-line-2.active{
            background: #fff;
            transform:scaleX(0);
        }
        .nav-menu-line-3.active{
            margin-bottom: 15px;
            background: #fff;
            transform: rotate(135deg);
        }


#nav_content {
    display: none;
    position: fixed;
    top: 75px;

    width: 100%;

    z-index: 98;
    background: rgba(255, 255, 255, 0.9);
}

    #nav_content ul{
        width: 100%;
    }

        #nav_content ul li{
            padding: 20px 0;
            margin-left: 100px;

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

            opacity: 0;
        }

            #nav_content ul li a{
                width: 100%;

                color: #273b60;
                font-size: 20px;

                transition: .5s;
            }
                #nav_content ul li a:hover {
                }


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

#logo {
    width: 220px;

    margin-left: 0.3em;
}

#nav_menu {
    display: none;
}

#nav_content {
    display: block;
    position: static;

    margin-left: 2em;
    margin-right: 0.3em;

    background: transparent;
}

    #nav_content ul{
        display: flex;

        height: 100%;

        justify-content: space-between;
    }

        #nav_content ul li{
            display: flex;

            margin-left: 0;

            align-items: center;
            opacity: 1;
        }

            #nav_content ul li a{
                font-size: 16px;
            }


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



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

header {
    height: 90px;
}
    header.hide{
        top: -90px;
    }

#nav_menu {
    height: 90px;
}

#logo {
    width: 240px;

    margin-left: 1em;
}

#nav_content {
    margin-left: 2em;
    margin-right: 1em;
}

    #nav_content ul li a{
        font-size: 18px;
    }


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



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

#logo {
    width: 270px;

    margin-left: 0;
}

#nav_content {
    margin-left: 4em;
    margin-right: 0;
}

    #nav_content ul li{
        position: relative;
    }
        #nav_content ul li~li::before {
            position: absolute;
            top: calc(50% -30px);

            width: 2px;
            height: 30px;

            content: "";

            background-color: #0e4c87;
        }
            #nav_content ul li:nth-child(2)::before {
                left: -1.3em;
            }
            #nav_content ul li:nth-child(3)::before {
                left: -1.3em;
            }
            #nav_content ul li:nth-child(4)::before {
                left: -1.3em;
            }
            #nav_content ul li:nth-child(5)::before {
                left: -1.3em;
            }

        #nav_content ul li a{
            font-size: 20px;
        }

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