@charset "UTF-8";
/* CSS Document */
.openbtn {
    display: none;
}
header h1.logo {
    position: absolute;
    top: 25px;
    left: 25px;
    white-space: nowrap;
    z-index: 99999;
	max-width: 120px;
}
header h1.logo a{
	display: block;
}
#menu-list {
    font-size: 1.5rem;
    padding: 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 25px;
	font-weight: 700;
}
#menu-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#menu-list ul li h1 {
    font-size: 1.6rem;
}
#menu-list ul li {
    margin-left: 2em;
}
#menu-list ul li a{
	color: var(--blue-lt);
}
#menu-list ul li a:hover{
	color: var(--blue);
}
@media only screen and (max-width:820px) {
	
header h1.logo {
    top: 17px;
    left: 5%;
	max-width: 100px;
}
    /*==============================================
ハンバーガーメニュー
===============================================*/
    .openbtn {
        display: block;
        position: fixed;
        cursor: pointer;
        width: 50px;
        height: 50px;
        z-index: 99999;
		top: 5px;
    }
	
    .openbtn span {
        display: inline-block;
        -webkit-transition: all .4s;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 50%;
        height: 1px;
        background: var(--blue-lt);
        width: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .openbtn span:nth-of-type(1) {
        top: 15px;
    }
    .openbtn span:nth-of-type(2) {
        top: 23px;
    }
    .openbtn span:nth-of-type(3) {
        top: 31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 50%;
        -webkit-transform: translate(-50%, 6px) rotate(-45deg);
        transform: translate(-50%, 6px) rotate(-45deg);
        width: 50%;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }
    .openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 50%;
        -webkit-transform: translate(-50%, -6px) rotate(45deg);
        transform: translate(-50%, -6px) rotate(45deg);
        width: 50%;
    }
    /*メニュー右寄せ ==============================================*/
    .openbtn.rightBtn {
        right: 0;
    }
	.openbtn p{
		position: absolute;
		top: 50%;
		left: 5px;
		transform: translate(-100%,-50%);
	}
	.openbtn p::before{
		content: 'MENU';
		font-size: 1.2rem;
		line-height: 0;
		color: var(--blue-lt);
	}
	.openbtn.active p::before{
		content: 'CLOSE';
		font-size: 1.2rem;
		line-height: 0;
	}
    /*==============================================
OPENメニュー
===============================================*/
    #menu {
        position: fixed;
        width: 100%;
        height: 100vh;
    }
    #menu.panelactive {
        z-index: 999;
    }
    #menu.panelactive #menu-list {
        position: fixed;
        z-index: 999;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
		font-size: 2rem;
		background-color: var(--yellow);
		background-color: red;
    }
    #menu #menu-list,
    #menu.panelactive #menu-list {
        z-index: 999;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
		background-color: var(--yellow);
    }
	#menu #menu-list,
	#menu.panelactive #menu-list{
		font-size: 2.4rem;
		margin-right: 0;
		text-align: left;
		padding: 100px 5% 0;
		box-sizing: border-box;
	}
    #menu #menu-list ul {
        display: block;

    }
	#menu #menu-list ul li {
		margin-left: 0;
		text-align: left;
		margin-bottom: 1em;
	}
	.menu_sai{
		position: absolute;
		bottom: 5%;
		right: 5%;
		width: 30%;
		max-width: 200px;
		margin-left: auto;
		line-height: 0;
	}
	.menu_footer{
		position: absolute;
		bottom: 5%;
		left: 5%;
	}
	.menu_footer .webName {
		font-size: 2.5rem;
		font-weight: 900;
		color: var(--blue);
		line-height: 1;
		margin-bottom: 15px;
	}
	.menu_footer .tel {
		font-size: 1.4rem;
		margin-bottom: 0.5em;
		line-height: 1.4
	}
	.menu_footer .tel span{
		font-size: 1.6rem;
	}
	.menu_footer .reception {
		font-size: 1.4rem;
		margin-bottom: 0;
		line-height: 1.4
	}
    /*メニュー右から左に ==============================================*/
    #menu.slideLeft {
        z-index: 999;
        top: 0;
        right: -120%;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
    }
    #menu.slideLeft.panelactive {
        right: 0;
    }
    #menu.slideLeft.panelactive #menu-list {
        width: 100%;
    }
    /*ナビゲーション ====================================================*/
    #menu.all ul {
        display: none
    }
    #menu.panelactive ul {
        display: block;
    }
    /*リストのレイアウト設定 ==============================================*/
    #menu li {
        list-style: none;
        text-align: center;
    }
    #menu li a {
        color: #333;
        text-decoration: none;
        padding: 0;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
}