@charset "UTF-8";

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align: middle;
transition: width 0.5s ease-in-out; /* なめらかに変化 */
}

html, body {
overflow-x: hidden;
width: 100%;
}

/* ハンバーガーボタン */
.ham_btn{
/*リセット*/
border: none;
outline: none;
/*ボタン*/
display: block;
width: 90px;
height: 90px;
background-color: #130e46;
cursor: pointer;
/*配置位置*/
position: fixed;
top: 0;
right: 0;
z-index: 99999;
transition: 200ms;
}


/*三本線*/
.ham_btn span,
.ham_btn::before,
.ham_btn::after{
content: "";
width: 50px;
height: 2px;
background-color: #fff;
position: absolute;
left: 20px;
transform: translateY(-50%);
transition: 200ms;
}
.ham_btn::before{
top: 30%;
}
.ham_btn span{
top: 50%;
}
.ham_btn::after{
top: 70%;
}


/*ナビゲーション展開時*/
.ham_btn.is_open{
background-color: #130e46;
}
.ham_btn.is_open span{
opacity: 0;/*真ん中の１本を見えなくする*/
}
.ham_btn.is_open::before{
top: 50%;
transform:rotate(45deg);
background-color: #fff;
}
.ham_btn.is_open::after{
top: 50%;
transform:rotate(-45deg);
background-color: #fff;
}


/* 画面幅が768px以下のとき */
@media (max-width: 768px) {
	/* ハンバーガーボタン */
	.ham_btn{
	width: 50px;
	height: 50px;
	}
	
	/*三本線*/
	.ham_btn span,
	.ham_btn::before,
	.ham_btn::after{
	width: 30px;
	left: 10px;
	}

}