@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.notosans    {
    font-family: 'Noto Sans JP', sans-serif;
    }
header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
}
header.bg_w{
    background-color: rgba(255, 255, 255, 0.8);
}
h1.logo img{
    width: 163px;
}

nav{
    width: 100%;
    height: 100px;
    position: relative;
    /* background: #F6F6F6; */
}

.drawer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100px;
    padding: 0 1em 0 1em;
}
.icon_facebook{
    width: 36px;
}
.icon_line{
     width: 35px;
}

@media (min-width: 1200px){
    .menu ul li a{
        font-size: 16px;
    }
    h1.logo img{
        width: 163px;
    }
}

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

    nav{
        display: flex;
        flex-direction: row;
    }

    .navbar_toggle{
        display: none;
    }
    .drawer{
        padding: 0 1em 0 50px;
    }
    .menu{
        width: 100%;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .menu.font-w a{
        color: #FFF;
    }
    .menu.font-w  > ul > li > ul.sub_menu > li > a{
        color: #424242;

    }
    .menu ul li a{
        padding: 2em;
        border-bottom: 1px solid #CCC;
        font-weight: 600;
    }
    .menu > ul{
        height: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }

    .menu > ul li a{
        /* padding: 0 1em; */
        /* padding: 0 2.5em; */
        padding: 0 1.5em;
        border-bottom: none;
    }
    .menu > ul li ul.sns li a{
        padding: 0 .5em;
        border-bottom: none;
    }

    .menu > ul li ul.sns{
        /* margin-left: 2rem; */
        /* margin-left: 3rem; */
        margin-left: 1.5rem;
        margin-right: 45px;
    }
    .menu > ul li ul.sns li{
        display: inline-block;
    }
    .menu .nav-button.active{
        border-bottom: 2px solid #0e632a;
    }
    .menu .nav-button:hover{
        color: #FFF;
    }
    .menu > ul > li > ul.sub_menu{

        display: none;
    }
    .menu .nav-button {
        line-height: 100px;
    }

    /* .menu li{
        height: 100px;
    } */

    .menu .nav-button {
        display: inline-block;
        height: 100px;
        text-align: center;
        text-decoration: none;
        outline: none;
        position: relative;
        z-index: 2;

        overflow: hidden;
    }
    .menu .nav-button::before,
    .menu .nav-button::after {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    }
    .menu .nav-button,
    .menu .nav-button::before,
    .menu .nav-button::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: left .3s, background-color .3s;
        transition: left .3s, background-color .3s;
    }

    .menu > ul > li:hover .nav-button {
        color: #fff;
    }
    .menu .nav-button::after {
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;

    }

    .menu > ul > li:hover .nav-button::after,
    .menu > ul > li:hover .nav-button:hover::after,
    .menu > ul > li .nav-button:hover::after {
        left: 0;
        background-color: #0e632a;
    }



    .menu > ul{
        font-size: 0;
    }
    .menu > ul li a{
        font-size: 14px;
        display: inline-block;
    }
    .menu > ul > li > ul.sub_menu{
        display: block!important;
        position: absolute;
        left: 50%;
        padding-top: 20%;
        transform: translate(-50%, 0) scaleY(0);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .menu > ul > li > ul.sub_menu > li{
        opacity: 0;
        font-size: 14px;
        background-color: #f5f5f5;
        box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5);
        line-height: 0;
        transition: opacity 0.2s, line-height 0.2s ease-in;
    }
    .menu > ul > li > ul.sub_menu > li > a{
        padding: 1em;
        width: 240px;
        text-align: center;
    }
    .menu > ul > li > ul.sub_menu > li:nth-child(2n)> a{
        background-color: #FFF;
    }
    .menu > ul > li > ul.sub_menu > li > a:hover{
        background-color: #dbeeae;
        transition: all  0.3s ease;
        color: #0e632a;
    }
    .menu > ul > li:hover > ul.sub_menu > li{
        line-height: 2;
        opacity: 1;
    }


}
@media (max-width: 991px) {

    /* トグル部分 */
    .navbar_toggle{
        z-index: 9999;
        background-color: #12632b;
        padding: 1rem .8rem;
    }

    .navbar_toggle_icon {
        position: relative;
        display: block;
        height: 2px;
        width: 30px;
        background: #FFF;
        -webkit-transition: ease .1s;
        transition: ease .1s;
    }

    .navbar_toggle_icon:nth-child(1) {
    top: 0;
    }

    .navbar_toggle_icon:nth-child(2) {
        margin: 8px 0;
    }

    .navbar_toggle_icon:nth-child(3) {
        top: 0;
    }
    /*OPEN時の動き*/
    .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
        top: 10px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 0;
    }

    .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
        top: -10px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }


    /* ナビゲーション部分 */

    .menu{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index:1000;
    }

    /*OPEN時の動き*/
    .menu.open {
        -webkit-transform:translateX(0);
        transform:translateX(0);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* header .menu li.open{
        background-color: #f5f5f5;
    } */
    .sub_menu li a{
        background-color: #f5f5f5;
    }
    .sub_menu li:nth-child(2n) a{
        background-color: #FFF;
    }
    .sub_menu li a,.sub_menu li:nth-child(2n)> a {
        color: #555!important;
    }
    header .menu li .sub_menu{
        display: none;
    }
    .menu .nav-button{
        width: 100%;
        height: auto;
    }
    .menu.open {
        background-color: #1c7b37;
    }
    .menu a{
        padding: 1rem 0;
        border-top: 1px solid #15a054;
    }
    .menu a,
    .menu .sub_menu a{
        padding: 1rem 1.5rem;
        display: block;
        color: #FFF;
        font-weight: 600;
    }
    /* .sub_menu_tit,.menu a{
        background-color: #1c7b37;
    } */
    .sub_menu > li > a{
        color: #0e632a;
    }
    .menu li.has_menu > a::after {
        content: "+";
        position: absolute;
        right: 10px;
        font-weight: bold;
    }
    .menu li.has_menu.open > a::after {
        content: "-";
    }


}