@charset "utf-8";
body{min-width: 1100px; }
header{position: fixed; top: 0px; right: 0px; left: 0px; z-index: 100;}
header .hamburger_btn{ z-index: 300; width: 80px; height: 80px; background: #4FDB3E; margin: 0 0 0 auto; padding: 23px 0; border-radius: 0 0 0 20px; position: relative; z-index: 100;}
header .hamburger_btn.active{background: #B0CE3C;}
header .hamburger_btn span{display: block; background: #fff; width: 36px; height: 2px; margin: 0 auto;}
header .hamburger_btn.active span:nth-child(2),
header .hamburger_btn.active span:nth-child(3){display: none;}
header .hamburger_btn.active span:nth-child(1){transform: rotate(-45deg); transition: 0.5s; position: absolute; left: 30%;top: 50%;}
header .hamburger_btn.active span:nth-child(4){transform: rotate(45deg); transition: 0.5s; position: absolute; left: 30%;top: 50%;}
header .hamburger_btn span:not(:last-child){margin: 0 auto 9px;}

header .header_bg{ position: fixed; z-index:3;width: 100px; height: 100px; border-radius: 50%; background: #999; transform: scale(0);right:-50px; top:-50px; transition: all .6s; background: #B0CE3C;}
.header .header_bg.circleactive{ transform: scale(50);}
.header .burger_box{ display: none; opacity: 0; visibility: hidden; transition: 0.5s; background: none; animation-name:gnaviAnime;}
.header .burger_box .flex{width: 400px; margin: 0 auto;padding: 50px 0 0; }
.header .burger_box .flex ul li{text-align: left;}
.header .burger_box .flex ul li.still a{color: #dcdcdc;cursor: default; font-size: 11px; display: flex; align-items: center; align-items: flex-end; flex-direction: row; justify-content: flex-start;}
.header .burger_box .flex ul li a span{font-size: 17px;}

header .burger_box.panelactive{transition: 0.5s; position: relative; z-index: 100; animation-name:gnaviAnime; animation-duration:1s ;animation-delay:.2s; animation-fill-mode:forwards; display: block; visibility: visible; }

@keyframes gnaviAnime{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.burger_box.panelactive{ height: 100vh; top: 0; position: fixed; width: 100%; background: #B0CE3C url(../images/common/fv_bg_3.png) center bottom/100% no-repeat; }
header .flex{ display: flex; justify-content: center; align-items: flex-start; }
header .nav{ padding-left: 50px; }
header .purchase_box{ padding: 50px 0 0; }

.header .burger_box .flex{ width: initial; padding: 100px 0 0; }


.f_inner{ width: 736px; margin: 0 auto; }
.copy{text-align: right; color: #fff; font-size: 13px; font-family: 'NotoSansJP-Regular'; padding: 191px 0 0;}


.purchase_box a{display: flex; border: 5px solid #00BB4C;background: #309B2C; border-radius: 5px; color: #fff; padding: 25px 23px 25px 38px; font-size: 20px; font-family: 'NotoSansJP-Bold'; width: 400px; height: auto; margin: 0 auto; position: relative; z-index: 1; }
.purchase_box a img{margin: 0 0 0 auto; display: inline-block;}

footer{ background: #B0CE3C;}
footer .purchase_box{padding: 0 0 86px;}
footer .flex{display: flex; align-items: flex-start; justify-content: space-between; }

.burger_box{background: url(../images/common/fv_bg_3.png) no-repeat center bottom; background-size: 100%;padding: 63px 0 27px; }
.burger_box .box ul{margin: 0 0 0 auto; width: auto;}
.burger_box .box ul li{text-align: right;}
.burger_box .box ul li:not(:last-child) {padding: 0 0 26px;}
.burger_box .box ul li.still a{color: #dcdcdc;cursor: default; font-size: 11px;display: flex; align-items: center;justify-content: flex-end; }
.burger_box .box ul li a{font-family: 'NotoSansJP-Bold'; display: inline-block; font-size: 17px;}
.burger_box .box ul li a span{font-size: 17px;}
.burger_box .box ul li a img{margin: 0 0 2px 5px;}


@media only screen and (max-width: 768px) {
	body{min-width: initial; }
	.inner{ max-width: initial; min-width: initial; }
	
	header{position: fixed; top: 0px; right: 0px; left: 0px; z-index: 100;}
	header .hamburger_btn{width: 80px; height: 80px; background: #4FDB3E; margin: 0 0 0 auto; padding: 23px 0; border-radius: 0 0 0 20px; position: relative; z-index: 100;}
	header .hamburger_btn.active{background: #B0CE3C;}
	header .hamburger_btn span{display: block; background: #fff; width: 36px; height: 2px; margin: 0 auto;}
	header .hamburger_btn.active span:nth-child(2),
	header .hamburger_btn.active span:nth-child(3){display: none;}
	header .hamburger_btn.active span:nth-child(1){transform: rotate(-45deg); transition: 0.5s; position: absolute; left: 30%;top: 50%;}
	header .hamburger_btn.active span:nth-child(4){transform: rotate(45deg); transition: 0.5s; position: absolute; left: 30%;top: 50%;}
	header .hamburger_btn span:not(:last-child){margin: 0 auto 9px;}
	
	header .header_bg{ position: fixed; z-index:3;width: 100px; height: 100px; border-radius: 50%; background: #999; transform: scale(0);right:-50px; top:-50px; transition: all .6s; background: #B0CE3C;}
	.header .header_bg.circleactive{  transform: scale(50);}
	.header .burger_box{opacity: 0; transition: 0.5s; background: none; }
	.header .burger_box .flex{width: 100%; margin: 0 auto;padding: 50px 0 0; }
	.header .burger_box .flex ul li{text-align: left;}
	
	header .burger_box.panelactive{transition: 0.5s; position: relative; z-index: 100;animation-name:gnaviAnime;animation-duration:1s;animation-delay:.2s;animation-fill-mode:forwards;}
	
	
	.purchase_box a{padding: 25px 23px 25px 38px; font-size: 20px; width: auto; height: auto; }
	.purchase_box a img{margin: 0 0 0 auto; display: inline-block;}
	
	footer{ background: #B0CE3C;}
	footer .flex{display: flex; align-items: flex-start; justify-content: space-between; }
	
	.burger_box{background: url(../images/common/fv_bg_3.png) no-repeat center bottom; background-size: 100%;padding: 63px 0 27px; }
	.burger_box .box ul{margin: 0 0 0 auto; width: auto;}
	.burger_box .box ul li{text-align: right;}
	.burger_box .box ul li:not(:last-child) {padding: 0 0 26px;}
	.burger_box .box ul li a{font-size: 17px; }
	.burger_box .box ul li a img{margin: 0 0 2px 5px;}
	
	
	header .nav_inner{ width: 90%; margin: 0 auto; }
	header .flex{ display: block; }
	header .item{ display: block; width: 40%; height: auto; margin: 0 auto 30px; }
	header .nav{ padding: 0; }
	
	header .hamburger_btn{ width: 60px; height: 60px; padding: 16px 0 0; border-radius: 0 0 0 15px; }
	header .hamburger_btn span{ width: 25px; height: 1px; }
	header .hamburger_btn span:not(:last-child){ margin: 0 auto 7px; }
	
	header .purchase_box{ padding: 30px 0 0; }
	.purchase_box a{ padding: 20px 23px 20px 38px; font-size: 17px; width: 100%; }

	.burger_box.panelactive{ height: calc(100vh - 60px); }
	.header .burger_box .flex{ padding: 20px 0 0; }	
	.burger_box{ padding: 0; }	
	.burger_box .box ul li.still a{line-height: 160%; }
	.burger_box .box ul li a span {font-size: 13px;}
	.burger_box .box ul li a{ font-size: 13px; }
	.burger_box .box ul li:not(:last-child){ padding: 0 0 20px; }
	
	
	footer .burger_box{ padding: 50px 0; }
	footer .purchase_box{ padding: 0 0 55px; }
	footer .item{ width: 83px; height: auto; }
	footer ul li a{ font-size: 13px; }
	
	.f_inner{ width: 100%; }
	.copy{ padding: 60px 0 0; font-size: 11px; }
	
}