@charset "UTF-8";

/*==================================================================================================

       Mobile ヘッダー

===================================================================================================*/

.header-wrap-sp {
        display: none;
        position: absolute;
        width:100%;
        height:80px;
        background: url("../../img/bg-washi00.jpg") repeat;
        z-index: 5;
        }
        #header h1.mobile-logo,
        .mobile-logo {
                width:200px;
                position: absolute;
                top:0;
                left:0;
                margin: 0;
                opacity: 1;
                z-index: 999;
                line-height: 1;
                -webkit-transition:all .3s ease;
                transition       : all .3s ease;
                }
                
        /*=================================================
                ハンバーガー
        ==================================================*/

        .gnav {
                font-family: 'Poppins', sans-serif;
                letter-spacing: 0;
                }
                .nav-toggle {
                display:block;
                position:fixed;
                right:20px;
                top:5px;
                padding:0;
                width:70px;
                height:70px;
                text-align: center;
                font-size: 0px;
                letter-spacing: 0;
                box-sizing: border-box;
                pointer-events: auto;
                cursor:pointer;
                z-index:99999;
                -webkit-transition:all .3s ease;
                transition       : all .3s ease;
                }
                .nav-toggle div {
                position:absolute;
                width:27px;
                height:18px;
                top:25px;
                right:21px;
                }
                .nav-toggle span {
                display: block;
                position: absolute;
                height: 2px;
                width:27px;
                background:#EEE;
                -moz-border-radius:2px;
                -webkit-border-radius:2px;
                -o-border-radius:2px;
                -ms-border-radius:2px;
                left: 0;
                -webkit-transition: .35s ease-in-out;
                -moz-transition: .35s ease-in-out;
                transition: .35s ease-in-out;
                }
                .nav-toggle span:nth-child(1) { top: 0; }
                .nav-toggle span:nth-child(2) { top: 8px; }
                .nav-toggle span:nth-child(3) { top: 16px; width:20px; }
                .gnav.active .nav-toggle span { background:#EEE ; }
                .gnav.active .nav-toggle span:nth-child(1) { top: 8px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
                .gnav.active .nav-toggle span:nth-child(2) { width:0; left:50%;}
                .gnav.active .nav-toggle span:nth-child(3) { top: 8px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg); width:27px; }
                .header-wrap-sp.fixed .nav-toggle span { background: #777; }
                .header-wrap-sp.fixed .active .nav-toggle span { background: #EEE; }
                
                .gnav .menu  { opacity: 1; position: absolute; width:27px; right:21px; top:42px; line-height: 1; font-size:10px; color:#111; -webkit-transition : all 0.2s ease;  -moz-transition : all 0.2s ease; -o-transition : all 0.2s ease;}
                .gnav .close { opacity: 0; position: absolute; width:31px; right:19px; top:42px; line-height: 1; font-size:10px; color:#111;  -webkit-transition : all 0.2s ease; -moz-transition : all 0.2s ease; -o-transition : all 0.2s ease;}
                .gnav.active .menu  { opacity: 0; }
                .gnav.active .close { opacity: 1; }

        /*=================================================
                ナビゲーション
        ==================================================*/

        .gnav-content {
                display: none;
                position: fixed;
                right: 0;
                top: 0;
                width: 100%;
                max-width:450px;
                height: 100%;
                background: url("../../img/bg-washi00.jpg") repeat;
                color:#EEE;
                overflow: auto;
                font-weight: 500;
                z-index:9999;
                }
                .gnav-content a { color:#333; }
                #header h1.gnav-logo,
                .gnav-logo {
                width:240px;
                position: relative;
                opacity: 1;
                z-index: 999;
                margin: 0;
                padding-top:20px;
                padding-bottom:3.5rem;
                line-height: 100%;
                -webkit-transition:all .3s ease;
                transition       : all .3s ease;
                }
                .gnav-wrap {
                position: relative;
                max-width:450px;
                width:450px;
                min-width:450px;
                color:#333;
                }
                .gnav-wrap p { color:#EEE; }
                .gnav-outer {
                padding:0 50px;
                box-sizing: border-box;
                }
                .mobile-navigation {
                        position: relative;
                        top:auto;
                        padding-bottom:2rem;
                        width:100%;
                        -webkit-transition:all .3s ease;
                        transition       : all .3s ease;
                        }
                        .mobile-main-nav {
                        position:relative;
                        width:auto;
                        height: auto;
                        }
                        .mobile-main-nav li {
                        width:100%;
                        float:none;
                        height: auto;
                        text-align: left;
                        font-weight:500;
                        }
                        .mobile-main-nav li a {
                        letter-spacing: 0.01em;
                        padding:12px 0;
                        border-bottom:1px dotted rgba(255,255,255,.5);
                        color:#EEE;
                        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
                        display:block;
                        font-size:18px;
                        border-radius: 2px;
                        height: auto;
                        background: none;
                        position: relative;
                        box-sizing: border-box;
                        text-decoration: none;
                        }
                        .mobile-main-nav li a span { font-size:.625rem; opacity:.5; }
                        
                        .mobile-main-nav li a.active { background:none; }
                        .mobile-main-nav li a:hover{ background:none; }

                .mobile-sns {
                padding:0 0 1rem 0;
                }
                .mobile-sns li {
                display:inline-block;
                margin-right:10px;
                width:36px;
                }


        @media screen and (max-width: 1024px) {
        header.main-header { position: absolute; width:100%; }
        .header-wrap { display:none; }
        .header-wrap-sp { margin-top:0; display:block; opacity: 1; }
        }
        @media screen and (max-width: 767px) {
        .nav-toggle { right: 0px; }
        #header h1.mobile-logo,.mobile-logo  { left:-12px; width:150px; }
        #header h1.gnav-logo,.gnav-logo    { top:13px; left:20px; width:220px; padding-top:0; position: absolute; }
    
        .mobile-main-nav li { }
        .mobile-navigation { padding-top:110px; }
        .gnav-outer { padding:0 20px; }
        }




.top-footer {
        display: none;
        padding:35px 0;
        background: url("../../img/common_texture-1.jpg") repeat;
        position: relative;
        font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", serif;
        font-weight:500;
        }
        .footer-logo { width:210px; }
        
        .top-copyright { font-size:12px; }

        @media screen and (max-width: 1024px) {
        .top-footer { display: block; }
        }