/* =========================
   Header Common
========================= */
:root{
	--header-height:52px;
}

/* 固定ヘッダー */
header.wp-block-template-part{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--header-height);
	z-index:1000;
}

/* =========================
   サイトタイトルとロゴ
========================= */

.wp-block-site-title{
	position:relative;
	z-index:1002;
	font-weight:500;
	font-size:1.52em;
	transform:translateY(8px);
	color:#333;
}

/* Header Inner */
header .alignfull{
	padding:0 16px !important;
	align-items:center;
}


/* =========================
   ハンバーガーメニューボタンの指定
========================= */
.hamburger{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	width:32px;
	height:15px;
	background:none;
	border:none;
	padding:0;
	cursor:pointer;
	position:relative;
	top:8px;
	z-index:1002;
}

/* ハンバーガー3本線 */
.hamburger span{
	display:block;
	width:100%;
	height:1px;
	background:#333;
	transform-origin:center;
	transition:
		transform .5s ease,
		opacity .5s ease;
}

/* 中央線を消す */
.hamburger.is-active span:nth-child(2){
	opacity:0;
}

/* 上下の線を×へ変形 */
.hamburger.is-active span:nth-child(1){
	transform:
		translateY(7px)
		rotate(45deg)
		/* そのままだと×が大きいので少しスケールダウン */
		scaleX(.72);
}
.hamburger.is-active span:nth-child(3){
	transform:
		translateY(-7px)
		rotate(-45deg)
		/* そのままだと×が大きいので少しスケールダウン */
		scaleX(.72);
}


/* =========================
   Global Navigation
========================= */


/* スマホ用ナビ */
nav.globalNav{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	z-index:1000;
	/* 初期状態：ヘッダー部分だけ見える */
	transform:
		translateY(calc(-100% + var(--header-height)));
	transition:
		transform .5s ease;
	/* 背景指定 */
	background:rgba(255,255,255,.75);
	backdrop-filter:blur(16px);
	box-shadow:
		rgba(0,0,0,.12)
		0 25px 20px -20px;
}

/* メニュー展開時 */
nav.globalNav.is-open{
	transform:translateY(0);
}

nav.globalNav .wp-block-navigation__container{
	display:block;
	align-self:start;
	width:80%;
	margin:var(--header-height) auto 0;
}
.wp-block-navigation__submenu-container{
	width:100%;
	margin:0;
	padding-left:16px;
	position: static !important;
left: auto !important;
top: auto !important;
inset: auto !important;
border:none !important;
color:#333;
}
.wp-block-navigation__submenu-container{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);

    transition:
        max-height .5s ease,
        opacity .35s ease,
        transform .35s ease;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"]
~ .wp-block-navigation__submenu-container{

    max-height: 500px; /* 十分大きい値 */
    opacity: 1;
    transform: translateY(0);
}
nav.globalNav > .wp-block-navigation > .wp-block-navigation__container > li{
	width:100%;
}
 .wp-block-navigation-item.has-child{
        display:grid;
        grid-template-columns: 1fr auto;
    }
nav.globalNav .wp-block-navigation__container li a{
	display:block;
	padding:16px 0;
}

.wp-block-navigation-submenu__toggle > svg{
    display:none !important;
}

.wp-block-navigation-submenu__toggle{
    position: relative;
    width: 32px;
    height: 32px;
}

.wp-block-navigation-submenu__toggle::before,
.wp-block-navigation-submenu__toggle::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 14px;
    height: 1px;

    background: #333;
    transform-origin: center;
    transition: transform .35s ease, opacity .35s ease;
}

/* 横線 */
.wp-block-navigation-submenu__toggle::before{
    transform: translate(-50%, -50%);
}

/* 縦線 */
.wp-block-navigation-submenu__toggle::after{
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら縦線だけ回転しながら消える */
.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after{
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0;
}


  /* .wp-block-navigation__submenu-container{
        position:static !important;
        top:auto !important;
        left:auto !important;

        width:100%;
        min-width:0;

        border:none;
        box-shadow:none;

        opacity:1;
        visibility:visible;
    } */

	


/* =========================
   PC Layout
========================= */

@media (min-width:768px){

	.globalNav{
		display:flex;
	}


	.hamburger{
		display:none;
	}

}