/* **************************************************

      		　ハンバーガーメニュー

************************************************** */

/* メニュー表示中は画面スクロールできないようにする */
.scroll_off {
	/* overflow:hidden; */
}

/* -----------------------------------------------------

　　　　3本線の設定（クリックされていない状態）

----------------------------------------------------- */
#menu {
	width:2rem;
    height:var(--header-height);
	/* position:fixed;
	top:0%;
	right:0rem;
	z-index:30; */
	display:flex;
	pointer-events:auto;
}
body#page #menu {
    left:auto;
    right:2rem;
}

/* 背景でクリック可能に */
.menu_button {
	width:100%;
	height:30%;
	background:none;
	border:0;
	margin:auto;
}
.menu_button span.menu_icon:before,
.menu_button span.menu_icon ,
.menu_button span.menu_icon:after {
	width:2rem;
	height:1px;
	position:absolute;
	content:'';
	display:block; /* width：min(calc(50 / var(--full-width) * 100vw), 50px)； */
	background-color:#fff;
	transition:all .4s;
}
body.page-template-page-top .menu_button span.menu_icon:before,
body.page-template-page-top .menu_button span.menu_icon ,
body.page-template-page-top .menu_button span.menu_icon:after {
    background-color:#fff;
}

/* 真ん中の線 */
.menu_button span.menu_icon {
}
/* 上の線 */
.menu_button span.menu_icon:before {
	bottom:calc(var(--header-height) * 0.33 / 2); /* 14.6vh * 30% ÷ 2 */
    bottom:11px;
}
/* 下の線 */
.menu_button span.menu_icon:after {
	top:calc(var(--header-height) * 0.33 / 2); /* 14.6vh * 30% ÷ 2 */
    top:12px;
}
/* 右側エリア（画面外に隠しておく） */
.menulist {
	width:100%;
    height:100%;
    display:block;
	position:fixed;
	top:0;
	right:0;              /* ← -100% をやめて常に0にしておく */
	z-index:-10;
    background:#000;
    padding-top:var(--header-height);
    overflow:hidden;
    /* ここからフェード用 */
    opacity:0;           /* 初期状態は透明 */
    visibility:hidden;   /* クリックできないように非表示扱い */
    pointer-events:none; /* 背景クリックを通す */
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
}
body.page-template-page-top .menulist {
    padding-top:calc(var(--header-height) + 1.5rem);
}



/* -----------------------------------------------------

	3本線を×に切り替え（クリックされた状態）

----------------------------------------------------- */
.menu_chg#menu {
}
/* メニューオープン時は真ん中の線を透明にする */
.menu_chg .menu_button span.menu_icon ,
body.page-template-page-top .menu_chg .menu_button span.menu_icon {
	background-color:rgba(255, 255, 255, 0);
}
/* 上の線を斜めに */
.menu_chg .menu_button span.menu_icon::before {
	bottom:0;
	background-color:#fff;
	transform:rotate(45deg);
}
/* 下の線を斜めに */
.menu_chg .menu_button span.menu_icon::after {
	top:0;
	background-color:#fff;
	transform:rotate(-45deg);
}

/* 隠していた右側エリアを画面内に戻す */
.menu_open.menulist {
	position:fixed;
	right:0;
    top:0;
	z-index:-10;
    height:100%;
    opacity:1;           /* 不透明に */
    visibility:visible;  /* 表示扱いに */
    pointer-events:auto; /* クリック可能に */
}

/* -----------------------------------------------------

	　　　　　      メニューOPEN

----------------------------------------------------- */
.menulist_inner {
    justify-content:center;
    display:flex;
    margin:auto;
	width:auto;
    height:100%;
}

body.page-template-page-top .menulist_inner ul {
    margin-right:auto;
}
.menulist_inner ul {
    display:flex;
    flex-flow:column;
    justify-content:space-around;
    align-items:flex-start ;
    margin:auto;
    height:calc(100% -var(--header-height));
}
.menulist_inner ul li {
    width:100%;
	height:auto;
    display:block;
    text-align:center;
    margin-bottom:7vh;
}

.menulist_inner ul li a {
    font-size:1.6rem;
    line-height:1em;
    display:block;
    margin-top:0.5em;
    color:#fff;
    
}

.menulist_inner ul li a:hover {
    text-decoration:none;
    opacity:0.7;
}