@charset "UTF-8";
/* CSS Document */

/*
 * drawer-nav：ハンバーガーメニュー（959px以下で表示）
 * ※PC（960px以上）ではグローバルナビを使うため非表示。
 * ※960px以上での見た目変化が無いため、1199pxの区切りは省略し959/767の2段のみ。
 */


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

PC設定（960px以上）：drawer-navは非表示

*******************************************************/
.drawer-nav__btn{
	display:none;
}

.drawer-nav__content{
	display:none;
}




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

タブレットの設定 768px~959pxの場合に適用

*******************************************************/
@media screen and (max-width: 959px){

	/* ハンバーガーボタン（ヘッダー右上に固定） */
	.drawer-nav__btn{
		display:flex;
		align-items:center;
		justify-content:center;
		position:fixed;
		top:11px;
		right:16px;
		width:44px;
		height:44px;
		background:var(--color-white);
		border:1px solid var(--color-border);
		border-radius:4px;
		z-index:120;
		cursor:pointer;
	}

	.drawer-nav__btn-icon,
	.drawer-nav__btn-icon::before,
	.drawer-nav__btn-icon::after{
		content:"";
		display:block;
		width:22px;
		height:2px;
		background:var(--color-text);
		transition:transform .2s;
	}

	.drawer-nav__btn-icon{
		position:relative;
	}

	/* 開いている間はハンバーガーを隠し、×ボタンへ切り替える */
	.drawer-nav.is-open .drawer-nav__btn{
		display:none;
	}

	.drawer-nav__btn-icon::before{
		position:absolute;
		top:-7px;
		left:0;
	}

	.drawer-nav__btn-icon::after{
		position:absolute;
		top:7px;
		left:0;
	}

	/* ドロワー本体（オーバーレイ） */
	.drawer-nav__content{
		display:none;
		position:fixed;
		inset:0;
		background:var(--color-white);
		z-index:115;
		overflow-y:auto;
		padding:76px 0 40px;
	}

	.drawer-nav__content.is-open{
		display:block;
	}

	.drawer-nav__wrapper{
		position:relative;
	}

	/* 展開時の左上ロゴ（ヘッダーのロゴ位置に合わせて固定） */
	.drawer-nav__logo{
		position:fixed;
		top:13px;
		left:16px;
		z-index:120;
	}

	.drawer-nav__logo-img{
		height:38px;
		width:auto;
	}

	/* 閉じるボタン（ハンバーガーと同じ枠で右上に固定） */
	.drawer-nav__close-btn{
		position:fixed;
		top:11px;
		right:16px;
		width:44px;
		height:44px;
		background:var(--color-white);
		border:1px solid var(--color-border);
		border-radius:4px;
		z-index:125;
		cursor:pointer;
	}

	.drawer-nav__close-btn::before,
	.drawer-nav__close-btn::after{
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:24px;
		height:2px;
		background:var(--color-text);
	}

	.drawer-nav__close-btn::before{
		transform:translate(-50%,-50%) rotate(45deg);
	}

	.drawer-nav__close-btn::after{
		transform:translate(-50%,-50%) rotate(-45deg);
	}

	/* リンク一覧 */
	.drawer-nav__box{
		display:flex;
		flex-direction:column;
	}

	.drawer-nav__item{
		border-bottom:1px solid var(--color-border);
	}

	.drawer-nav__item:first-child{
		border-top:1px solid var(--color-border);
	}

	.drawer-nav__link{
		display:block;
		padding:16px 4px;
		font-size:16px;
		font-weight:500;
		color:var(--color-text);
	}

	.drawer-nav__link:hover{
		color:var(--color-primary-dark);
	}

	/* ドロワー内のTEL・ボタン */
	.drawer-nav__tel{
		display:block;
		margin-top:24px;
		text-align:center;
		font-size:24px;
		font-weight:700;
		color:var(--color-primary-dark);
	}

	.drawer-nav__tel-hours{
		display:block;
		margin-top:4px;
		text-align:center;
		font-size:12px;
		color:var(--color-text-sub);
	}

	.drawer-nav__btns{
		display:flex;
		flex-direction:column;
		gap:12px;
		margin-top:20px;
	}

}




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

SPの設定 767px以下の場合に適用

*******************************************************/
@media screen and (max-width: 767px){

	.drawer-nav__content{
		padding:72px 0 32px;
	}

	.drawer-nav__link{
		font-size:15px;
	}

}