@charset "UTF-8";

/* CSS Document */

/*==============================================
ハンバーガーメニュー
===============================================*/
.openbtn{
	position: fixed;
	cursor: pointer;
    width: 40px;
    height:40px;
	z-index: 99999;
	display: none;
}
/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
	right: 0;
    height: 2px;
	background: #707070;
  	width: 100%;
  }

.openbtn span:nth-of-type(1) {
	top:24px;
	width: 70%;
}

.openbtn span:nth-of-type(2) {
	top:32px;
}

.openbtn span:nth-of-type(3) {
	top:40px;
	width: 70%;
}
.openbtn.active span{
	background: #fff;
}
.openbtn.active span:nth-of-type(1) {
    top: 30px;
    left: 50%;
    transform: translate(-50%,6px) rotate(-45deg);
    width: 70%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}
.openbtn.active span:nth-of-type(3){
    top: 42px;
    left: 50%;
    transform: translate(-50%,-6px) rotate(45deg);
    width: 70%;
}
/*メニュー右寄せ ==============================================*/
.openbtn.rightBtn{
	right: 2.5%;
}

/*==============================================
OPENメニュー
===============================================*/
#menu{
    position:fixed;
	width:100%;
    height: 100vh;
	background-image: linear-gradient(135deg, #37a649, #6abb41f2 50%, #9dd038);
}
#menu.panelactive{
	z-index:999;
}
#menu.panelactive #menu-list{
    position: fixed;
    z-index: 999; 
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#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;
}
/*メニュー右から左に ==============================================*/
#menu.slideLeft{
	z-index: 999;
	top:0;
    right: -120%;
	transition: all 0.6s;
}
#menu.slideLeft.panelactive{
	right: 0;
}
#menu.slideLeft.panelactive #menu-list{
    width: 100%;
}
/*ナビゲーション ====================================================*/
#menu ul.spMenu {
    z-index: 999;
	font-size: 1.6rem;
	padding: 120px 5% 10%;
	box-sizing: border-box;
	font-weight: 500;
}
#menu.panelactive ul.spMenu {
	display: block;
}
#menu ul.spMenu > li{
	margin-bottom: 25px;
	position: relative;
}
#menu ul.spMenu li a{
	color: #fff;
}
#menu ul.spMenu li a.spBorder{
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255,255,255,0.25);
	display: block;
	margin-bottom: 7px;
	position: relative;
}
#menu ul.spMenu li a.spBorder::after{
	content: '';
	background: url("../img/arrow01.svg")no-repeat center center / cover;
	width: 7px;
	height: 14px;
	position: absolute;
	right: 5px;
	bottom: 10px;
}
#menu ul.spMenu li ul.subMenu{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	gap:0 10%;
	font-size: 1.3rem;
	max-width: 480px;
	font-weight: 400;
}
#menu ul.spMenu li ul.subMenu li{
	margin-bottom: 0.25em;
}
#menu ul.spMenu li ul.subMenu li::before{
	content: '';
	width: 10px;
	height: 1px;
	background-color: #fff;
	display: inline-block;
	margin-right: 7px;
	vertical-align: 0.35em;
}

@media only screen and (max-width:480px) {
#menu ul.spMenu li ul.subMenu{
	max-width: inherit;
}
}










@media only screen and (max-width:820px) {
.openbtn{
	display: block;
}
}