@charset "utf-8";
/* ***********************************************************
* #global-nav
* *********************************************************** */
	#header #navi {
		width: auto;
		height: auto;
		float: none;
		display: block;
	}
	#global-nav {
		top: 0;
		position: fixed;
		height: 100%;
		width: 100%;
		text-align: center;
		display:none;
		visibility:hidden;
	}
	#global-nav > li > a {
		text-decoration: none;
		display: block;
		color:#fff;
	}
	#global-nav > li{
		width: 100%;
		display:block !important;
		float: none;
		height: auto;
		position:static;
	}


/* ***********************************************************
* パッド・スマホ表示時　オープン時
* *********************************************************** */
	.open #global-nav {
		z-index: 30000;
		visibility: visible;
		display: table;
		height: auto;
        left:0;
        right:0;
        position: fixed;
        overflow: hidden;
        height:100%;
	}
	.open #global-nav .menu{
        top:0;
        left:0;
        right:0;
        position: absolute;
        overflow: scroll;
	}
	.open #global-nav .menu2{
        display: table;
        position: relative;
		text-align: center;
		color: #000;
		background-color:#eaeaea;
        border:28px solid #eaeaea;
	}
	.open #global-nav .menuin{
        width: 100%;
        background-color: #fff;
	}
	.open #global-nav .menuin-top{
        width:100%;
        display:table;
    }
	.open #global-nav .navi01{
        width:50%;
    }
    .open #global-nav .navi01 ul{
        width:334px;
        margin:0 auto;
    }
    .open #global-nav .navi01 li{width:100%;margin:15px auto 35px;}
    .open #global-nav .navi01 li.top{margin:40px auto 0;}
    .open #global-nav .navi01 li.top a{
        width: 100%;
        font-size: 2.1em;
        font-weight: bold;
        line-height: 1.4;
        color: #000;
        text-align: center;
        display: block;     
    }
    .open #global-nav .navi01 li.line a{
        width: 100%;
        font-size: 2em;
        font-weight: bold;
        line-height: 1.4;
        color: #000;
        text-align: center;
        display: block;
        padding: 10px 0 4px;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;        
    }
        .open #global-nav .navi01 li.line:nth-child(2) a{background-image: url(../images/top/navi_line01.png);}
        .open #global-nav .navi01 li.line:nth-child(3) a{background-image: url(../images/top/navi_line02.png);}
        .open #global-nav .navi01 li.line:nth-child(4) a{background-image: url(../images/top/navi_line03.png);}
        .open #global-nav .navi01 li.line:nth-child(5) a{background-image: url(../images/top/navi_line04.png);}

	.open #global-nav .navi02{
        width:50%;
    }
    .open #global-nav .navi02 ul{width:100%;margin:130px auto 0;border-top:5px solid #eaeaea;}
    .open #global-nav .navi02 li{width:100%;border-bottom:5px solid #eaeaea;}
    .open #global-nav .navi02 li a{
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: center;
        -webkit-justify-content: center;
        justify-content: center;
        height:70px;
        font-size: 1.8em;
        font-weight: bold;
        line-height: 1.4;
        color: #000;
    }
    @media (max-width: 900px) {
        .open #global-nav .navi01{
            width:100%;
        }
        .open #global-nav .navi01 ul{
            width:100%;
        }
        .open #global-nav .navi01 li.line a{
            background-size: auto auto; 
            letter-spacing: 4px;
        }
        
        .open #global-nav .navi02{
            width:100%;
        } 

        .open #global-nav .navi02 ul{
            margin:0 auto;
        }
        .open #global-nav .navi02 li a{
            height:108px;
        }
    }


    .open #global-nav .news{
        max-width:960px;
        width:80%;
        margin:40px auto 0;
    }
    .open #global-nav .news h2{
        margin:0 auto 40px;
    }
    .open #global-nav .news li{
        width:47%;
        margin-bottom:25px;
    }
        .open #global-nav .news li h3{
            font-size:1.1em;
            color:#000;
            letter-spacing: 0;
            margin:5px auto;
            line-height:1.2;
            text-align:left;
        }
        .open #global-nav .news li .photo{
            width:44%;
            height:auto;
            float:left;
            position: relative;
            overflow: hidden;
        }
            .open #global-nav .news li .photo img{
                width:100%; 
            }
        .open #global-nav .news li .comment{ 
            width:48%;
            float:right;
            text-align:left;
            color:#000;
        }
        .open #global-nav .news li .comment p{
            font-size:1.2em;
            line-height:1.4;
        }
    @media (max-width: 900px) {
        .open #global-nav .news{
            width:90%;
            margin:20px auto 0;
        }
        .open #global-nav .news li{
            width:100%;
            margin-bottom:40px;
        }
        .open #global-nav .news li h3{
            font-size:1.2em;
        }
        .open #global-nav .news li .photo{
            max-width:250px;
            width:250px;
        }
            .open #global-nav .news li .photo img{
                width:100%; 
            }
        .open #global-nav .news li .comment{  
            max-width:calc(100% - 250px - 20px);
            width:calc(100% - 250px - 20px);
        }
    }
    @media (max-width: 575px) {
        .open #global-nav .news h2{
            width:35%;
            margin: 0 auto 20px;
        }
        .open #global-nav .news li{
            margin-bottom:20px;
        }
        .open #global-nav .news li .photo{
            max-width:40%;
            width:40%;
        }
            .open #global-nav .news li .photo img{
                width:100%; 
            }
        .open #global-nav .news li .comment{  
            max-width:calc(100% - 40% - 10px);
            width:calc(100% - 40% - 10px);
        }
    }
    @media (max-width: 900px) {
        .open #global-nav .menu2{
            border:14px solid #eaeaea;
        }
        .open #global-nav .navi01 ul{
            width:80%;
        }
        .open #global-nav .navi01 li{margin:8px auto 18px;}
        .open #global-nav .navi01 li.top{margin:20px auto 0;}
        .open #global-nav .navi01 li.line a{
            padding: 5px 0 2px;      
        }
        .open #global-nav .navi02 ul{margin:10px auto 0;border-top:3px solid #eaeaea;}
        .open #global-nav .navi02 li{border-bottom:3px solid #eaeaea;}
        .open #global-nav .navi02 li a{
            height:56px;
        }
    }


    .open #global-nav .sns{
        padding:10px 0 30px;
    }

    .open #global-nav footer .contentsin2{
        width:100% !important;
        height:auto !important;
    }


    @media (max-width: 900px) {
        .open #global-nav .sns{
            padding:60px 0 30px;
        }
            .open #global-nav footer .l{
                width: 80%;
                margin:0 auto 25px;
                float:none;
            }
            .open #global-nav footer .r{
                width: 100%;
                margin:0 auto;
                float:none;
            }
            .open #global-nav footer .r h2 {
                width: 80%;
            }
    }


    @media (max-width: 575px) {
        .open #global-nav .sns{
            padding:30px 0 15px;
        }
    }


/* ***********************************************************
* パッド・スマホ表示時　オープン時　背景
* *********************************************************** */
	#nav-bg {
		content: "";
		top: 0;
		right: 0;
		left:0;
		width:0;
		height:0;
		display: block;
		position:absolute;
		z-index:0;
	}
    .open #header > .contentsin2{
        width:100% !important;
        max-width:none;
    }
	.open #nav-bg {
		width:100%;
		height:100%;
		height: 5000px;
		z-index: 20000;
        background-color:#eaeaea;
	}




/* ***********************************************************
* スマホ表示時
* *********************************************************** */

	/* ***********************************************************
	* #nav-toggle
	* *********************************************************** */
	#nav-toggle {
		visibility:visible;
		display: block !important;
		position:relative;
	}
	#nav-toggle .nv {
        width:100%;
        position: fixed !important;
        z-index:200;
	}
	#nav-toggle .nvin {
		width: 70px;
		height: 70px;
        border-radius:50%;
		cursor: pointer;
		padding: 0 12px;
		z-index: 30001;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		background-color:transparent;
        float:right;
        margin-right:43px;
        background-color:#fff;
        text-align:center;
	}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 5px;
		width: 46px;
		background: #000;
		top:0;
		zoom: 1;
	}
    #nav-toggle span:nth-child(1) {top: 18px;}
    #nav-toggle span:nth-child(2) {top: 34px;}
    #nav-toggle span:nth-child(3) {top: 50px;}
	.open #nav-toggle {
		position:absolute;
        top: 38px;
        left:38px;
		right:auto;
		padding: 0;
        z-index: 30001;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		background-color:transparent;
	}
	.open #nav-toggle .nvin {
		width: 84px;
		height: 84px;
		cursor: pointer;
		padding: 0;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		background-color:transparent;
        float:left;
        margin-right:0;
	}
	.open #nav-toggle span {
        width: 66px;
        height: 2px;
        background-color:transparent;
    }
	.open #nav-toggle span:nth-child(1) {
		top: 28px;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
		zoom: 1;
		background: #000;
	}
	.open #nav-toggle span:nth-child(2) {
		top: 28px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		zoom: 1;
		background: #000;
	}


@media (max-width: 575px) {
	#nav-toggle {
        padding-top:3px;
	}
	#nav-toggle .nvin {
        margin-right:10px;
		width: 40px;
		height: 40px;
		padding: 0 8px;
	}
		#nav-toggle span {
			height: 2px;
			width: 24px;
		}
		#nav-toggle span:nth-child(1) {top: 10px;}
		#nav-toggle span:nth-child(2) {top: 19px;}
		#nav-toggle span:nth-child(3) {top: 28px;}
.open #nav-toggle {
    top: 16px;
    left: 16px;
}
        .open #nav-toggle .nvin {
            width: 42px;
            height: 42px;
        }
        .open #nav-toggle span {
            width: 44px;
        }
		.open #nav-toggle span:nth-child(1) {
            top: 18px;
            background:#000;
		}
		.open #nav-toggle span:nth-child(2) {
			top: 18px;
			background:#000;
		}
    #nav-toggle span {
        background: #000;
    }
}
/* ---------- メニューここまで ---------- */