/* 共通+設定 */
:root{
	--nav-w: 89vw;
	--nav-ease: cubic-bezier(.22,.61,.36,1);
	--btn-w: 44px;
	--btn-right: 0px;
	--btn-inset-left: 0px;
	--nav-top: 71px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
}

.gradian{position:relative;}
.logo_n{
	position:absolute;
	height:50px;
	top:0; left:0;
}
#head_phone{
	height:50px; width:100px;
	position:absolute;
	top:0; right:82px;
	padding-top:6px;
	padding-bottom:2px;
}

#head_budget{
	height:50px; width:100px;
	position:absolute;
	top:0; right:0;
	padding-top:2px;
	padding-bottom:2px;
}
#head_phone img{
	height:42px; width:auto;
	margin:0;
}
#head_budget img{
	height:46px; width:auto;
	margin:0;
}

#nav_close {
	margin:1rem 2rem;
}


/* 1) ベース：リセット軽め */
#global_nav, #global_nav * {
	box-sizing: border-box;
}


/* 2) トグルボタン：右上固定（スマホ想定） */
#navBtn {
	position: fixed;
	top: 72px;
	right: var(--btn-right);       /* right:0 と同義（でも変数に逃がす） */
	z-index: 1100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;  /* 実寸とズレてもJSで--btn-wを上書きするのでOK */
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: transform .28s var(--nav-ease), opacity .2s ease;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.3);
}

#navBtn.no_shadow{
	box-shadow:none;
}

/* 3) オフキャンバス本体 */
#global_nav {
	position: fixed;
	inset: 0;             /* overlay用の疑似要素を収めるため全画面を領域化 */
	pointer-events: none; /* 閉時はクリックを受けない */
	z-index: 1000;
}

/* 3-1) 透過黒の背景（疑似要素で生成） */
#global_nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);  /* 透過黒 */
	opacity: 0;
	transition: opacity .25s ease;
}

/* 3-2) スライドインする白いパネル */
#nav_content {
	position: absolute;
	top: 71px;
	right: 0;
	width: 80%;
	height: 60%;
	bottom: var(--safe-bottom);
	transform: translateX(var(--nav-w));
	transition: transform .28s cubic-bezier(.22,.61,.36,1);
	background: #fff;
	box-shadow: -6px 0 20px rgba(0,0,0,0.2);
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	overflow-x:hidden;
	border-bottom-left-radius: 7px;
}
body.nav-open #nav_content { transform: translateX(0); }
#global_nav.is-open #nav_content {
	transform: translateX(0);
}

/* 4) 開いた状態を示すフラグ（JSで付与予定）
   ここでは body に .nav-open or #global_nav に .is-open のどちらでも対応できるよう両方書いておく */
body.nav-open #global_nav,
#global_nav.is-open {
	pointer-events: auto; /* 背景クリックを受けられるように */
}

body.nav-open #global_nav::before,
#global_nav.is-open::before {
	opacity: 1;
}

body.nav-open #nav_content,
#global_nav.is-open #nav_content {
	transform: translateX(0);
}

/* 5) 背景スクロール固定（オプション：JSでbodyに.nav-openを付ける運用） */
body.nav-open {
	overflow: hidden;
	touch-action: none;
}

/* 6) リストの見た目 */
#nav_list, #nav_list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
 li a{

}
#nav_list > li a{
	border-bottom: 1px dotted #002171;
	font-size: 14px;
	font-weight: bold;
	margin-left:1.5rem;
	position: relative;
	width: 100%;
	display: block;
	padding: 20px 12px;
	padding-left:25px;
	color: #002171;
	line-height: 1;
	text-decoration: none;
}
#nav_list > li a.lvl1::after{
	content: ">";
	position:absolute;
	left:60vw;
}

#nav_list > li > button.nav_close_btn {
	display: block;
	padding: 16px 18px;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	color: #111;
	border-bottom: 1px solid #eee;
}

#nav_list > li.active > a {
	font-weight: 700;
}

/* 7) サブメニュー */
#nav_list li .sub-nav {
	display: none;            /* 初期は閉じる */
	background: #fafafa;
}

#nav_list li.is-open > .sub-nav {
	display: block;           /* 親<li>に.is-openが付いたら開く */
}

#nav_list li .sub-nav a {
	display: block;
	margin-left:2rem;
	padding: 14px 22px 14px 28px; /* 少し字下げ */
	font-size: 14px;
	color: #002171;
	border-bottom: 1px solid #eee;
}

#nav_list li .sub-nav{ display:none; }
#nav_list li.is-open > .sub-nav{ display:block; }
#nav_list li.is-open + .sub-nav{ display:block; }
/* 8) 「閉じる」ボタン */
.nav_close_btn {
	background: #f5f5f5;
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

/* 9) メディアクエリ（タブレット以上の調整が必要なら適宜） */
@media (min-width: 768px) {
	#navBtn {
		top: 16px;
		right: 16px;
	}
	#nav_content {
		width: min(420px, 40vw);
	}
}
#navBtn.navbtn-visible,
body.nav-open #navBtn{
	opacity: 1;
	pointer-events: auto;
}
body.nav-open #navBtn{
	transform: translateX(
		calc(-1 * (var(--nav-w) - (var(--btn-right) + var(--btn-inset-left) + var(--btn-w))))
	);
}
#nav_close{border:none;}