@charset "UTF-8";

.header_wrap_sp {
				display: none;
        		position: fixed;
        		top:0;
        		left:0;
        		width:100%;
        		height:85px;
                background: url(../img/base/bg.png);
        		z-index: 800;      
    			}    
.header_wrap_sp.fixed {
                display: ;
                position: fixed;
                top: 0;
                left: 0;
                }
        		.sp_nav_logo {
                margin-top: 20px;
                padding-left: 10px;
                line-height: 1;
                }
                .sp_nav {
                display:block;
                position:absolute;
                right:20px;
                top:7px;
                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;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .toggle div {
                position:absolute;
                width:27px;
                height:18px;
                top:25px;
                right:21px;
                }
                .toggle span {
                display: block;
                position: absolute;
                height: 2px;
                width:27px;
                background:#fff;
                -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;
                }
                .toggle span:nth-child(1) { top: 0; }
                .toggle span:nth-child(2) { top: 8px; }
                .toggle span:nth-child(3) { top: 16px; width:20px; }
                .sp_nav.active .toggle span { background:#fff ; }
                .sp_nav.active .toggle span:nth-child(1) { top: 8px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
                .sp_nav.active .toggle span:nth-child(2) { width:0; left:50%;}
                .sp_nav.active .toggle span:nth-child(3) { top: 8px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg); width:27px; }
                
                .sp_nav .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;}
                .sp_nav .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;}
                .sp_nav.active .menu  { opacity: 0; }
                .sp_nav.active .close { opacity: 1; }
.g_nav_content {
                display: none;
                position: fixed;
                right: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background:#000;
                color:#E5E5E5;
                overflow: hidden;
                z-index:9999;
                }
                .g_nav_content a { color:#E5E5E5; }
                h1.g_nav_logo {
                width:140px;
                position: relative;
                opacity: 1;
                z-index: 999;
                padding:30px 0 2.5rem;
                margin: 0;
                text-align: left;
                line-height: 100%;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                }
                .g_nav_content_in {
                	display: flex;
                	flex-direction: row;
                	flex-wrap: nowrap;
                	justify-content: space-between;
                	align-items: stretch;
                	align-content: stretch;
                	display: -webkit-flex;
                	-webkit-flex-direction: row;
                	-webkit-flex-wrap: nowrap;
                	height: 100%;
                }
                .sp_bg {
                	display: block;
                	flex-basis: auto;
                	flex-grow: 1;
                	flex-shrink: 1;
                	min-width: 0;
                	width:100%;
                	height: auto;
                	overflow: hidden;
                }
                .sp_bg_img {
                    background: url(../../movie/top.jpg) no-repeat center top;
                	width:100%;
                	height:100%;
                	opacity: .6;
                }
                .g_nav_wrap {
                	display: block;
                	flex-basis: auto;
                	flex-grow: 1;
                	flex-shrink: 1;
                    background: #000;
                	max-width:400px;
                	width:400px;
                	min-width:400px;
                	height: auto;
                	overflow: hidden;
                 	padding-bottom:3rem;
                  	-webkit-transition: all .3s ease;
                  	-moz-transition: all .3s ease;
                  	-ms-transition: all .3s ease;
                  	-o-transition: all .3s ease;
                  	transition: all .3s ease;
                }
                .g_nav_inner {
                	padding:0 30px;
                	box-sizing: border-box;
                }
                .g_nav_outer {
                	padding:0 30px;
                	box-sizing: border-box;
                }
                .g_nav_box {
                        padding-bottom:3rem;
                        width:100%;
                        -webkit-transition: all .3s ease;
                        -moz-transition: all .3s ease;
                        -ms-transition: all .3s ease;
                        -o-transition: all .3s ease;
                        transition: all .3s ease;
                        }
                        .g_nav {
                        position:relative;
                        }
                        .g_nav li {
                        width:100%;
                        text-align: left;
                        font-weight:400;
                        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
                        }
                        .g_nav li a {
                        letter-spacing: 0.01em;
                        padding:12px 1rem;
                        border-bottom:1px dotted rgba(255,255,255,.5);
                        color:#EEE;
                        display:block;
                        font-size:18px;
                        border-radius: 2px;
                        position: relative;
                        box-sizing: border-box;
                        }
                        .g_nav_box .text {margin-top: 30px;}

       @media screen and (max-width: 1024px) {
        header { display:none !important; }
        .top .header_wrap_sp { display: none;}
        .header_wrap_sp { display: block;}
        .header_wrap_sp.fixed {display: block;}
        .sp_nav_logo {  margin-left:10px; }
        .sp_nav_logo img {  width:150px; }
        footer ul {display:none; }
        }
        @media screen and (max-width: 767px) {
        .header_wrap_sp { }
        .toggle { right: 10px; }
    	.g_nav_content_in { display: block;}
    	.sp_bg { display: none; margin-right: 0 !important ; margin-left: 0 !important ; max-width: 100%; min-width: 100%;}
    	.g_nav_wrap { margin-right: 0 !important ; margin-left: 0 !important ; max-width: 100%; min-width: 100%;}
        .g_nav li { text-align: left; }
        .g_nav_box { padding-top:0; }
        .g_nav_outer { padding:0 20px; }
        }
        @media screen and (max-width: 350px) {
        .sp_nav_logo img { width:140px; }
        .g_nav_logo   { top:10px; left:16px; width:140px; }
        }