@charset "utf-8";


.sp_mnu_tit {
    width:30%;
	font-weight:bold;
	font-size:120%;
	color:#ffffff;
	}


/* menu */
.menu-btn {
    display:flex;
    height:100px;
    width:100px;
    justify-content:center;
    align-items:center;
    background-color:#282d49;
    z-index:9991;
	cursor:pointer;
	}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content:'';
    display:block;
    height:3px;
    width:30px;
    border-radius:3px;
    background-color:#ffffff;
    position:absolute;
    z-index:9991;
	}
.menu-btn span:before {
	bottom:10px;
	}
.menu-btn span:after {
    top:10px;
	}
#menu-btn-check:checked ~ .menu-btn span {
    background-color:rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom:0;
    transform:rotate(45deg);
	}
#menu-btn-check:checked ~ .menu-btn span::after {
    top:0;
    transform:rotate(-45deg);
	}
#menu-btn-check:checked ~ .menu-content {
    left:0;/*メニューを画面内へ*/
	}
#menu-btn-check {
    display:none;
	}



.menu-content {
    width:80%;
    height:80%;
	padding:3% 10% 20% 10%;
    position:fixed;
    top:0;
    left:100%;/*leftの値を変更してメニューを画面外へ*/
    z-index:9990;
    background-color:#69c1bc;
    transition:all 0.5s;/*アニメーション設定*/
	overflow-y:scroll;
	}
.menu-content ul {
    padding:70px 10px 0;
	}
.menu-content ul li ul {
    padding:10px 0px 10px 0px;
	}
.menu-content ul li {
    border-bottom:dotted 1px #ffffff;
    list-style:none;
	}
.menu-content ul li ul li {
    border-bottom:none;
    list-style:none;
	}
.menu-content ul li a {
    display:block;
    width:100%;
    box-sizing:border-box;
    color:#ffffff;
    text-decoration:none;
    padding:9px 15px 10px 0;
    position:relative;
	font-size:90%;
	}
.menu-content ul li ul li a {
    display:block;
    width:95%;
    box-sizing:border-box;
    color:#ffffff;
    text-decoration:none;
    padding:0px 0px 5px 5%;
    position:relative;
	font-size:85%;
	}
.menu-content ul li a::before {
    content:"";
    width:7px;
    height:7px;
    border-top:solid 2px #ffffff;
    border-right:solid 2px #ffffff;
    transform:rotate(45deg);
    position:absolute;
    right:11px;
    top:20px;
	}
.menu-content ul li ul li a::before {
    content:"";
    border-top:solid 2px #900004;
    border-right:solid 2px #900004;
    transform:rotate(45deg);
    position:absolute;
    right:11px;
    top:16px;
	}