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

/*
-----------------------------------------------
▼ハンバーガーメニュー
----------------------------------------------- */
.hamburger {
    position: fixed;
    top: 32px;
    right:32px;
    cursor: pointer;
    width: 74px;
    height: 67px;
    z-index: 10;
	background-color: #333;
	border: solid 1px #fff;
	border-radius: 5px;
}
.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 4px;
    background-color: #fff;
    width: 55%;
    z-index: 10;
	left: 50%;
	transform: translateX(-50%);
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 17px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 30px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 43px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 30px;
	left: 50%;
    transform: translateX(-50%) rotate(-40deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 30px;
	left: 50%;
    transform: translateX(-50%) rotate(40deg);
}


/*
-----------------------------------------------
▼ナビゲーションメニュー
----------------------------------------------- */
nav {
    position: fixed;
    top: 24px;
    width: 100%;
    z-index: 10;
}
.header-menu_box {
    /*最初はナビゲーションボタンは非表示*/
    display: none;
    list-style:none;
	width: 50%;
	background-color: #ffffff;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	padding: 8% 3%;
	
}
.header-menu li a{
    padding: 8px;
    font-size: 22px;
    color: #333333;
    display: flex;
    text-decoration: none;
	align-items: center;
}
.header-menu li{
	border-bottom: solid 1px #999999;
}
.header-menu li i{
	width: 8%;
	color: #0f2f93;
}
.header-menu li p{
	width: 92%;
}
.header_sns{
	display: flex;
	column-gap: 10px;
	margin-top: 10px;
}
.header_sns i{
    color: #999999;
}

/*
-----------------------------------------------
▼page top button
----------------------------------------------- */
button.page-top{
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #ffffff;
	background-color: #0f2f93;
	border: solid 2px #0f2f93;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	opacity: 0;
	visibility: hidden;
	transition: .2s;
}
button.page-top i{
	font-size: 2rem;
}
button.page-top p{
	font-size: 1.6rem;
	margin-top: 0.1em;
	font-weight: 700;
}
.is-active{
	opacity: 1!important;
	visibility: visible!important;
}
button.page-top:hover{
	background-color: #ffffff;
	color: #0f2f93;
}
@media screen and (max-width: 767px){
		.header-menu_box{
		width: 100%;
	}
}
@media screen and (max-width: 600px){
	button.page-top{
		width: 60px;
		height: 60px;
	}
	button.page-top i{
		font-size: 1.5rem;
	}
	button.page-top p{
		font-size: 1.4rem;
	}
	.hamburger{
		width: 54px;
		height: 47px;
		top: 18px;
		right: 22px;
	}
	.hamburger span{
		width: 52%;
		height: 3px;
	}
	.hamburger span:nth-of-type(1){
		top: 11px;
	}
	.hamburger span:nth-of-type(2){
		top: 21px;
	}
	.hamburger span:nth-of-type(3){
		top: 31px;
	}
	.hamburger.open span:nth-of-type(1){
		top: 22px;
	}
	.hamburger.open span:nth-of-type(3){
		top: 22px;
	}
	.header-menu_box{
		padding-top: 17%;
	}
	.header-menu li a{
		font-size: 16px;
	}
	.header_sns{
		margin-top: 12px;
	}
	.header_sns i{
		font-size: 25px;
	}
}