@charset "utf-8";
.main-header {
	position: fixed;
	top: 0;
	background-color: #fff;
	width: 100%;
	padding: 20px 6%;
	z-index: 9999;
	box-shadow: 0 0 25px -5px rgba(0,0,0,0.15);
}
.customize-support .main-header{
	top: 32px;
}
.customize-support {
	padding-top: 90px;
}
body {
	padding-top: 90px;
}

.header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-logo {
	width: 62%;
	max-width: 250px;
}

.header-button {
	position: relative; /*ボタン内側の基点となるためrelativeを指定*/
	background: transparent linear-gradient(136deg, #fbb03b 0%, #ed1c24 100%) 0% 0% no-repeat padding-box;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	z-index: 10000;
}

/*ボタン内側*/
.header-button span {
	display: inline-block;
	transition: all 0.4s; /*アニメーションの設定*/
	position: absolute;
	left: 50%;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	width: 45%;
	transform: translate(-50%, -50%);
}

.header-button span:nth-of-type(1) {
	top: 32%;
}

.header-button span:nth-of-type(2) {
	top: 50%;
}

.header-button span:nth-of-type(3) {
	top: 68%;
}

/*is-activeクラスが付与されると線が回転して×に*/

.header-button.is-active span:nth-of-type(1) {
	transform: translate(-50%, -50%) rotate(-45deg);
	top: 50%;
}

.header-button.is-active span:nth-of-type(2) {
	opacity: 0; /*真ん中の線は透過*/
}

.header-button.is-active span:nth-of-type(3) {
	transform: translate(-50%, -50%) rotate(45deg);
	top: 50%;
}
.global-nav {
	display: none;
}
.gnav-anchor {
	font-size: calc(10px + 0.8vw);
}

/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #333;
	color: #fff;
}

/*----------------------------
* メニュー本体
*----------------------------*/
.global-nav{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent linear-gradient(136deg, #fbb03b 0%, #ed1c24 100%) 0% 0% no-repeat padding-box;
}
.gnav-item{
	width: 100%;
	height: auto;
	padding: 1em;
	line-height: 2;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
}

/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
.global-nav{
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s linear;
}
/* アニメーション後のメニューの状態 */
.global-nav.is-active{
	pointer-events: auto;
	opacity: 1;
}

@media screen and (max-width: 479px) {
	.main-header{
		padding: 16px 6%;
	}
	.header-button {
		width: 40px;
		height: 40px;
	}
	.customize-support .main-header{
		top: 46px;
	}
	.customize-support {
		padding-top: 46px;
		padding-top: 72px;
	}
	body {
		padding-top: 70px;
	}
	.gnav-anchor {
		font-size: calc(10px + 1.5vw);
	}
}