@charset "utf-8";

<!--メニュー開閉ボタン-->
.menu-btn{
}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
	position: relative;
	cursor: pointer;
    width: 57px;
    height:57px;
	border-radius: 5px;
	background-color: #2E2624;
	z-index: 10;
}
/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 14px;
	width: 51%;
	height: 2px;
	border-radius: 5px;
	background: #FFF;
}
.openbtn span:nth-of-type(1) {
	top:13px;	
}
.openbtn span:nth-of-type(2) {
	top:21px;
}
.openbtn span:nth-of-type(3) {
	top:29px;
}
.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-3px;
	text-transform: uppercase;
	font-size: 12px;
	color: #FFF;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn.active {
	background-color: #50423F;
}
.openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 14px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
    top: 26px;
    left: 14px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
	top: 9px;
	left: 11px;
    transform: translateY(0) rotate(-45deg);
}
/*メニュー開閉ボタン_END*/
/*フェードインメニュー*/
.menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.7);
	z-index: 98;
}
/* アニメーション前のメニューの状態 */
.menu{
  transform-origin: top left;
  transform: rotateZ(-90deg);
  transition: all .3s ease;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: rotateZ(0deg);
}
/* フェードインメニュー_END */

/*フッターフェードインメニュー*/
.fi_menu01 {
	position: fixed;
	z-index: 97;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
}
.fi_menu02 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 4px 8px;
}
.fi_menu02 li {
	flex: 0 0 30%;
}
.fi_menu02 li a, .fi_menu02 li span {
	display: block;
	cursor: pointer;
	padding-top: 6px;
	padding-bottom: 4px;
	border-radius: 12px;
	border: 2px solid #1E2C5B;
	background-color: #FFF;
	text-align: center;
}
.fi_menu02 li img {
	max-width: 92px;
	width: 80%;
	height: auto;
}
/*フッターフェードインメニュー_END*/