@charset "UTF-8";
/* CSS Document */

/*
-----------------------------------------------
▼ハンバーガーメニュー
----------------------------------------------- */
.hamburger_area{
	position: fixed;
	top: 1.1vw;
	right: 2vw;
	z-index: 120;
}
.hamburger{
	width: 78px;
	height: 78px;
	position: relative;
	border-radius: 39px;
	background-color: #fff;
	border: solid 3px #009cd1;
	transition: all .1s;
	z-index: 120;
}
.hamburger span{
	display: inline-block;
	position: absolute;
	left: 50%;
	width: 37px;
	height: 3px;
	background-color: #009cd1;
	transition: all .4s;
	transform: translateX(-50%);
	border-radius: 10px;
	}
	.hamburger span:nth-of-type(1) {
    top: 20px;
}
	.hamburger span:nth-of-type(2) {
    top: 30px;
}
	.hamburger span:nth-of-type(3) {
    top: 40px;
}
.hamburger::after{
	content: "MENU";
	font-size: 12px;
	position: absolute;
	bottom: 8px;
	color: #009cd1;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}
.hamburger.active span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 20px;
    transform: translate(-50%, 6px) rotate(-33deg);
}
.hamburger.active span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.active span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 32px;
    transform: translate(-50%, -6px) rotate(33deg);
}
.hamburger.active::after{
	content: "CLOSE";
}
/*
-----------------------------------------------
▼メニュー
----------------------------------------------- */
.nav_list{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	right: -100%;
	transition: ease .4s;
	padding: 10vw 15vw;
	z-index: 102;
}
#header-menu.active{
	right: 0;
}
.nav_list li a{
	color: #009cd1;
	text-decoration: none;
}

/*
-----------------------------------------------
▼page top
----------------------------------------------- */
#pagetop{
	position: fixed;
	bottom: 15px;
	right: 15px;
	cursor: pointer;
	z-index: 10;
}
#pagetop span{
	font-size: 12px;
	color: #0083cc;
	font-weight: 600;
}
.pagetop_img{
	width: 70px;
}
.pagetop_img img{
	width: 100%;
}

@media screen and (max-width: 768px){
	.pagetop_img{
		width: 60px;
	}
}
@media screen and (max-width: 600px){
	.pagetop_img{
		width: 50px;
	}
	#pagetop span{
		font-size: 10px;
	}
}

/*
-----------------------------------------------
▼レスポンシブ
----------------------------------------------- */
@media screen and (max-width: 768px){
	.hamburger{
		width: 58px;
		height: 58px;
	}
	.hamburger span{
		width: 25px;
	}
	.hamburger::after{
		font-size: 9px;
		bottom: 5px;
	}
	.hamburger span:nth-of-type(1){
		top: 15px;
	}
	.hamburger span:nth-of-type(2){
		top: 22px;
	}
	.hamburger span:nth-of-type(3){
		top: 29px;
	}
	.hamburger.active span:nth-of-type(1){
		top: 15px;
	}
	.hamburger.active span:nth-of-type(3){
		top: 27px;
	}
}
@media screen and (max-width: 600px){
	.hamburger{
		width: 50px;
		height: 50px;
	}
	.hamburger span:nth-of-type(1){
		top: 11px;
	}
	.hamburger span:nth-of-type(2){
		top: 18px;
	}
	.hamburger span:nth-of-type(3){
		top: 25px;
	}
	.hamburger::after{
		font-size: 8px;
		bottom: 4px;
	}
	.hamburger.active span:nth-of-type(1){
		top: 11px;
	}
	.hamburger.active span:nth-of-type(3){
		top: 23px;
	}
}