/*グローバルナビゲーション*/
/*チェックボックスを非表示にする*/
#OPEN{
  display: none;
}

/*ハンバーガーメニューボタン*/
@media screen and (min-width:769px){
	label.menu-btn{
		display:none;
	}
}@media screen and (max-width: 768px){
	label.menu-btn{
	  position: fixed;
	  top: 0px;
	  right: 0px;
	  display: flex;
	  height: 40px;
	  width: 40px;
	  justify-content: center;
	  align-items: center;
	  z-index:3;
	  background-color:var(--back-color_dark);
	  text-indent:-1000em;
	}
	label.menu-btn:hover {
	  cursor: pointer;
	}
	/* 三本線の実装 */
	.menu-btn span,
	.menu-btn span::before,
	.menu-btn span::after{
	  content: "";
	  display: block;
	  height: 2px;
	  width: 20px;
	  border-radius: 2px;
	  background-color: #FFF;
	  position: absolute;
	  transition: all 0.3s ease-in-out;
	}
	label.menu-btn span::before{
	  bottom: 6px;
	}
	label.menu-btn span::after{
	  top: 6px;
	}
	
	#OPEN:checked ~ label span{
		background:transparent;
	}
	
	#OPEN:checked ~ label span::before{
		transform: rotate(45deg);
		transform-origin:center center 0;
		top: 0px;
	}
	#OPEN:checked ~ label span::after{
		transform: rotate(-45deg);
		transform-origin:center center 0;
		top: 0px;
	}
}

/*PC用*/
@media screen and (min-width:769px){

	div.global__navigation--compact{
		margin:0;
		padding:0;
		width:auto;
		height:auto;
		flex:0 0 auto;
	}
	
	div.global__navigation--compact ul.menu{
		margin:0;
		padding:0;
		width:auto;
		height:auto;
		list-style:none;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
		position:relative;
		gap:1em;
	}
	
	div.global__navigation--compact ul.menu li{
		margin:0;
		padding:0.5em;
		width:auto;
		height:auto;
		flex:1 1 auto;
		text-align:left;
		cursor:pointer;
		transition: all 0.3s ease-in-out;
	}
	
	div.global__navigation--compact ul.menu li a{
		display:block;
		text-align:left;
		text-decoration:none;
		color:var(--text-color);
	}
	
	div.global__navigation--compact ul.menu li:hover{
		background:var(--back-color_dark);
		color:#FFF;
	}
	
	div.global__navigation--compact ul.menu li:hover a{
		color:#FFF;
	}
	
	/*-------------子メニュー--------------*/
	div.global__navigation--compact ul.sub-menu{
		list-style:none;
		margin:0;
		padding:0 1em 0 1em;
		width:100%;
		height:0px;
		max-height:0px;
		background:var(--back-color_dark);
		overflow:hidden;
		white-space:nowrap;
		position:absolute;
		left:0;
		top:2.8em;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		transition: all 0.3s ease-out;
		overflow:hidden;
	}
	div.global__navigation--compact ul.menu li:hover ul.sub-menu{
		padding:1em;
		height:auto;
		max-height:900px;
		top:2.8em;
		gap:2em;
	}
	
	div.global__navigation--compact ul.sub-menu li{
		margin:0;
		padding:0;
		flex:1 1 calc(50% - 2em);
		text-align:left;
	}
	
	div.global__navigation--compact ul.sub-menu li a{
		margin:0;
		padding:2em;
		display:block;
		width:auto;
		height:100%;
		text-align:left;
		color:#FFF;
	}
	
	div.global__navigation--compact ul.sub-menu li a::after{
		content:"";
		display:block;
		margin:0;
		padding:0;
		height:1px;
		width:0px;
		background:#FFF;
		transition: all 0.3s ease-in-out;
	}
	
	div.global__navigation--compact ul.sub-menu li:hover a::after{
		content:"";
		display:block;
		margin:0;
		padding:0;
		height:1px;
		width:100%;
		background:#FFF;
	}
	div.global__navigation--compact i{
		color:#FFF;
	}
}
/*モバイル用*/
@media screen and (max-width: 768px){
	div.global__navigation--compact nav{
		background:var(--back-color_bright);
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		line-height:40px;
		overflow:auto;
  		overflow-y: auto;
  		-webkit-overflow-scrolling: touch;
		transition: all 0.3s ease-in-out;
		position:fixed;
		z-index:2;
		top:0;
		right:-100%;
	}
	
	#OPEN:checked ~ nav{
		width:100%;
		height:100%;
		position:fixed;
		top:0;
		right:0;
	}
	
	div.global__navigation--compact ul.menu{
		margin:0;
		padding:0;
		width:auto;
		height:auto;
		list-style:none;
	}
	
	div.global__navigation--compact ul.menu li{
		margin:0;
		padding:0;
		width:auto;
		height:auto;
		line-height:40px;
		text-indent:1em;
		cursor:pointer;
		background:var(--back-color_dark);
		color:#FFF;
		border-bottom:solid 1px #FFF;
	}
	div.global__navigation--compact ul.menu li a{
		text-decoration:none;
		color:#FFF;
	}
	/*-------------子メニュー--------------*/
	div.global__navigation--compact ul.sub-menu{
		margin:0;
		padding:0;
		width:100%;
		height:auto;
		max-height:0px;
		list-style:none;
		white-space:nowrap;
		transition:max-height 0.3s ease-in-out;
		overflow:hidden;
	}

	div.global__navigation--compact ul.menu li:hover ul.sub-menu{
		height:auto;
		max-height:900px;
	}

	div.global__navigation--compact ul.menu li:active ul.sub-menu{
		height:auto;
		max-height:900px;
	}
	

	div.global__navigation--compact ul.menu li:action ul.sub-menu{
		height:auto;
		max-height:900px;
	}
	
	div.global__navigation--compact ul.sub-menu li{
		
	}
	
	div.global__navigation--compact ul.sub-menu li:last-child{
		border-bottom:none;
	}
	
	div.global__navigation--compact ul.sub-menu li a{
		margin:0;
		padding:0;
		width:100%;
		height:100%;
		display:block;
		text-decoration:none;
		display:block;
		background:var(--back-color_bright);
		color:#000;
	}
	
	div.global__navigation--compact ul.sub-menu li a:hover{
		background:var(--back-color_dark);
		color:#FFF;
	}
	
}


div.global__navigation--compact i~ span{
	display:inline-block;
	margin-left:0.2em;
}


/*カテゴリナビゲーション*/

aside .category ul{
	list-style:none;
	margin:0 0 20px 0;
	padding:0;
	line-height:2.5em;
}

aside .category ul li{
	border-bottom:dotted 1px #333;
}

aside .category ul li a{
	text-decoration:none;
	display:block;
	color:#009900;
}

aside .category ul li a::before{
	content:"\0276F";
	color:#006600;
	margin-right:1em;
}

aside .category ul li a:hover::before{
	content:"\0276F";
	color:#009900;
	margin-right:1.1em;
}

/*戻るボタン*/


button.bottom__btn--back{
	appearance: none;
	display:block;
	color:#FFF;
	background-color:var(--back-color_dark);
	border: none;
	cursor: pointer;
	outline: none;
	margin:2rem auto 2rem auto;
	padding:0 1rem 0 1rem;
	text-align:center;
	font-size:1rem;
	font-weight:800;
	line-height:40px;
	min-width:180px;
	min-height:40px;
	vertical-align:bottom;
}

button.back::before{
	content:"\0276E\0276E";
	display:inline-block;
	margin-right:0.25em;
}

/*footerナビゲーション*/

div.footer__navi--center{
	margin:0;
	padding:0;
	width:calc(100% - 400px - 2em);
	height:auto;
	overflow:hidden;
}@media screen and (max-width:768px){
	div.footer__navi--center{
		width:100%;
	}
}

div.footer__navi--center ul{
	margin:0 0px 1em 0px;
	padding:0;
	width:100%;
	height:auto;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

div.footer__navi--center ul li{
	flex:0 1 auto;
	margin:0 0 8px 0;
	padding:0;
	width:calc(33.333% - 5px);
	height:auto;
}@media screen and (max-width:768px){
	div.footer__navi--center ul li{
		width:calc(50% - 5px);
	}
}


div.footer__navi--center a{
	margin:0;
	padding:5px;
	display:block;
	text-align:center;
	background-color:var(--back-color_dark);
	color:var(--text-color_inversion);
	white-space:nowrap;
	overflow:hidden;
}

div.footer__navi--center a:hover{
	background:var(--back-color_hover-dark);
	text-decoration:none;
}