@charset "utf-8";
/*===================================
ドロワーナビ
===================================*/


/*アイコンの位置
--------------------------------*/
.nav-drawer {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
}
/*アイコンのクリック範囲*/
.nav-open {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
/*ハンバーガーアイコン
--------------------------------*/
.nav-border::before,
.nav-border::after {
	position: absolute;
	content: "";
	display: block;
	height: 3px; /*線の太さ*/
	width: 28px; /*線の長さ*/
	background: var(--theme-color01);
	cursor: pointer;
	transition: .5s;
}
.nav-border::before {
	top: 6px;
}
.nav-border::after {
	top: 19px;
}
/*ハンバーガーアイコン（クリック後の×印）
--------------------------------*/
#nav-input01:checked ~ .nav-open .nav-border::before,
#nav-input01:checked ~ .nav-open .nav-border::after,
#nav-input02:checked ~ .nav-open .nav-border::before,
#nav-input02:checked ~ .nav-open .nav-border::after {
	top: 12px;
	bottom: auto;
	transform-origin: center;
}
#nav-input01:checked ~ .nav-open .nav-border::before,
#nav-input02:checked ~ .nav-open .nav-border::before {
	transform: rotate(-35deg);
}
#nav-input01:checked ~ .nav-open .nav-border:after,
#nav-input02:checked ~ .nav-open .nav-border:after {
	transform: rotate(35deg);
}
/*ドロワーの中身
--------------------------------*/
#nav-input01 ~ .nav-content {
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	bottom: 0;
	transform: translate(-50%,calc(100% - 20px));
	width: 16rem;
	padding-top: 2rem;
}
/*ドロワーの中身（クリック後）
--------------------------------*/
#nav-input01:checked ~ .nav-content {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%,calc(100% + 0px));
}
/*ドロワーのメニュー内容
--------------------------------*/
.nav-drawer-menu {
	padding: 0 10px 20px;
	background: #fff;
	border-radius: 6px;
}
/*ドロワーの背景
--------------------------------*/
.drawer_nav-close {
	position: fixed;
	display: block;
	visibility: hidden;
	z-index: -1;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .5s;
}
/*ドロワーの背景（クリック後）
--------------------------------*/
#nav-input01:checked ~ .drawer_nav-close {
	visibility: visible;
	opacity: 1;
	width: 100%;
}


/*================================
TABLET縦 834px～0px
================================*/
@media (max-width: 834px) {
	/*ドロワーの背景
	--------------------------------*/
	.drawer_nav-close {
		position: fixed;
		display: block;
		visibility: hidden;
		z-index: -1;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.25);
		opacity: 0;
		transition: .5s;
		backdrop-filter: blur(5px)
	}
	/*ドロワーの中身
	--------------------------------*/
	#nav-input02 ~ .nav-content {
		position: fixed;
		z-index: 1;
		overflow: auto;
		top: 0;
		right: 0;
		max-width: 400px;
		width: 100%;
		height: 100%;
		background: #fff;
		transition: .3s ease-in-out;
		transform: translateX(105%);
		padding: 100px 40px;
	}
	/*ドロワーの背景（クリック後）
	--------------------------------*/
	#nav-input02:checked ~ .drawer_nav-close {
		visibility: visible;
		opacity: 1;
		width: 100%;
	}
	/*ドロワーの中身（クリック後）
	--------------------------------*/
	#nav-input02:checked ~ .nav-content {
		transform: translateX(0%);
	}

	/*ドロワーのメニュー内容
	--------------------------------*/
	.nav-drawer-menu {
		padding: 0 10px 20px;
		background: #fff;
		border-radius: 6px;
	}
	.nav-drawer-menu > li {
		position: relative;
		z-index: 1;
		padding: 4px 0;
	}
	.nav-drawer-menu > li:not(:last-child) {
		border-bottom: 1px solid #eee;
	}
	.nav-drawer-menu .drawer_link {
		transition: .3s;
		display: block;
		padding: 4px 0;
		font-weight: 700;
		line-height: 1.6;
		color: rgba(85, 85, 85, 1);
	}
	.nav-drawer-menu .drawer_link:hover {
		color: rgba(85, 85, 85, 0.7);
	}

	/*ドロワーのサブメニュー関連
	-----------------------------------*/
	.drawer_sub_menu {
		position: relative;
		z-index: 1;
	}
	/*サブメニューのボタン表示エリア*/
	.drawer_sub_menu-open {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 53px;
	}
	/*ドロワーのサブメニューのボタン
	--------------------------------*/
	.sub-nav-border {
		position: absolute;
		z-index: 1;
		top: 20px;
		right: 10px;
		display: block;
		width: 20px;
		height: 10px;
		transition: .5s;
	}
	/*▼のマーク*/
	.sub-nav-border::before {
		position: absolute;
		content: "";
		top: 0;
		border-top: 10px solid #009cea;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}
	.sub-nav-border::after {
		position: absolute;
		content: "";
		top: -2px;
		border-top: 10px solid #fff;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}
	/*ドロワーのサブメニューのボタン（クリック後）
	--------------------------------*/
	/*▼の場合*/
	#drawer_sub_menu-input02:checked ~ .drawer_sub_menu-open .sub-nav-border,
	#drawer_sub_menu-input03:checked ~ .drawer_sub_menu-open .sub-nav-border {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
		-webkit-transform-origin: center;
		transform-origin: center;
	}
	/*ドロワーのサブメニューコンテンツ
	--------------------------------*/
	.drawer_sub_menu-content {
		overflow: hidden;
		-webkit-transition: all 0.8s 0s ease;
		transition: all 0.8s 0s ease;
		max-height: 0;
	}
	/*ドロワーのサブメニューコンテンツ（チェック後）
	--------------------------------*/
	#drawer_sub_menu-input02:checked ~ .drawer_sub_menu-content,
	#drawer_sub_menu-input03:checked ~ .drawer_sub_menu-content {
		max-height: 1000px;/*適当に大きな数字*/
	}
	/*ドロワーのサブメニューの中身
	--------------------------------*/
	.drawer_sub_menu-lists {
		padding: 10px 0 10px 15px;
	}
	.drawer_sub_menu-lists li {
		padding: 4px 0;
	}
	.drawer_sub_menu-lists .sub_menu_link {
		line-height: 1.6;
		color: rgba(85, 85, 85, 1);
	}
	

}


/*================================
SP表示 667px～0px
================================*/
@media (max-width: 667px) {

	/*アイコンの位置
	--------------------------------*/
	.nav-drawer {}
	/*アイコンのクリック範囲*/
	.nav-open {}
	/*ハンバーガーアイコン
	--------------------------------*/
	.nav-border::before,
	.nav-border::after {}
	.nav-border::before {}
	.nav-border::after {}
	/*ドロワーの背景
	--------------------------------*/
	.drawer_nav-close {}
	/*ドロワーの中身
	--------------------------------*/
	#nav-input01 ~ .nav-content {}
	#nav-input02 ~ .nav-content {}
	/*ドロワーの中身（クリック後）
	--------------------------------*/
	#nav-input01:checked ~ .nav-content {}
	#nav-input02:checked ~ .nav-content {}
	/*ドロワーの背景（クリック後）
	--------------------------------*/
	#nav-input02:checked ~ .drawer_nav-close {}

	/*ドロワーのメニュー内容
	--------------------------------*/
	.nav-drawer-menu {}
	.nav-drawer-menu > li {}
	.nav-drawer-menu .drawer_link {}


}