/*ヘッダナビゲーション*/
.header__navi--small-01{
	margin:0 1rem 0 0;
	padding:0;
	width:fit-content;
}
.header__navi--small-01 ul{
	list-style:none;
	margin:0;
	padding:0;
	font-size:0.8em;
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

.header__navi--small-01 ul li{
	flex:1;
	margin:0;
	padding:0;
	width:auto;
}

.header__navi--small-01 ul li a{
	display:block;
	margin:0;
	padding:0.25em 1em 0.3em 1em;
	width:auto;
	height:100%;
	text-decoration:none;
	border-radius:1.2em;
	color:var(--white);
	background:var(--headernavi--bg);
}

.header__navi--small-01 ul li a:hover{
	background:var(--headernavi--bghover);
}

.header__navi--small-02{
	margin:0;
	padding:0;
	width:fit-content;
}@media screen and (max-width: 768px){
	.header__navi--small-02{
		margin:auto;
		padding:0;
	}
}
.header__navi--small-02 ul{
	list-style:none;
	margin:0;
	padding:0;
	font-size:0.8em;
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

.header__navi--small-02 ul li{
	margin:0;
	padding:0;
	width:auto;
}

.header__navi--small-02 ul li a{
	display:block;
	margin:0;
	padding:0.25em 1em 0.3em 1em;
	width:auto;
	height:100%;
	text-decoration:none;
	border-radius:1.2em;
	color:var(--white);
}

/*グローバルナビゲーション*/
/*チェックボックスを非表示にする*/
#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;
	  text-indent:-1000em;
	  background:var(--hamburgermenu-btn);
	}
	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:40px;
		flex:0 0 auto;
		background:var(--global--navigation-background);
	}
	
	div.global__navigation--compact ul.menu{
		margin:0 0 0 0;
		padding:0 1em 0.5em 1em;
		width:auto;
		height:auto;
		list-style:none;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		/*position:relative;*/
	}
	
	div.global__navigation--compact ul.menu li{
		margin:0;
		padding:0.25em 0 0.25em 0;
		width:auto;
		height:auto;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;
		text-align:center;
		cursor:pointer;
		color:var(--white);
		border-left:groove 2px var(--white);
		transition:background 0.3s ease-in-out;
		position:relative;
	}
	
	div.global__navigation--compact ul.menu li:last-child{
		border-right:groove 2px var(--white);
	}
	
	div.global__navigation--compact ul.menu li a{
		margin:0;
		padding:0;
		width:100%;
		height:100%;
		display:block;
		text-align:center;
		text-decoration:none;
		color:var(--white);
	}
	
	div.global__navigation--compact ul.menu li:hover{
		color:var(--white);
		background:var(--global--navigation-sub);
	}
	
	div.global__navigation--compact ul.menu li:hover a{
		color:var(--white);
	}
	
	/*-------------子メニュー--------------*/
	div.global__navigation--compact ul.sub-menu{
		list-style:none;
		margin:0;
		padding:0;
		/*flex:0 0 calc(25% - 2em);*/
		text-align:left;
		border:none;
		width:100%;
		height:0;
		max-height:0px;
		overflow:hidden;
		white-space:nowrap;
		position:absolute;
		left:0;
		top:2em;
		/*
		display:flex;
		flex-wrap:wrap;
		*/
		transition:all 0.3s ease-out;
		overflow:hidden;
		z-index:10;
		background:var(--global--navigation-sub);
	}
	div.global__navigation--compact ul.menu li:hover ul.sub-menu{
		padding:0.5em;
		height:auto;
		max-height:900px;
	}
	
	div.global__navigation--compact ul.sub-menu li{
		margin:0;
		padding:0;
		flex:0 0 calc(25% - 2em);
		text-align:left;
		border:none;
	}
	

	
	div.global__navigation--compact ul.sub-menu li:last-child{
		border:none;
	}
	
	div.global__navigation--compact ul.sub-menu li a{
		margin:0;
		/*padding:2em;*/
		padding:0.75em;
		display:block;
		width:auto;
		height:100%;
		text-align:left;
		color:#FFF;
	}
	
	div.global__navigation--compact ul.sub-menu li a::before{
		display:inline-block;
		margin-right:0.25em;
		content:"\0276F";
	}
	
	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{
		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%;
		background:var(--global--navigation-sub);
	}
	
	#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;
		color:#FFF;
		
	}
	div.global__navigation--compact ul.menu li a{
		text-decoration:none;
		color:#FFF;
	}
	
	div.global__navigation--compact ul.menu li{
		border-bottom:solid 1px #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{
		border-top:dotted 1px #FFF;
		border-bottom:none;
		background:var(--Header-background);
	}
	
	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;
		text-indent:2.5em;
	}
	
	div.global__navigation--compact ul.sub-menu li a:hover{
	
	}
}

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;
}

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

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

/*戻るボタン*/

button.bottom__btn--back{
	appearance: none;
	display:block;
	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;
	border-radius:2em;
	background:var(--Header-background);
	color:var(--white);
}

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

/*footerナビゲーション01

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

div.footer__navi--list ul{
	font-weight:800;
	text-align:left;
	margin:0 0 2em 0;
	padding:0;
	width:100%;
	height:auto;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

div.footer__navi--list ul li{
	flex:0 1 calc(20% - 1em);
	margin:0;
	padding:0;
	padding-left:1em;
	height:auto;
	border-left:solid 1px #FFF;
	
}@media screen and (max-width:768px){
	div.footer__navi--list{
		display:none;
	}
}

div.footer__navi--list a{
	margin:0;
	padding:0.25em;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	color:#FFF;
}

div.footer__navi--list a:hover{
	text-decoration:none;
}

div.footer__navi--list ul li ul{
	all:initial;
	list-style:none;
	font-weight:300;
	display:block;
	text-align:left;
	margin-top:1em;
}

div.footer__navi--list ul li ul li{
	all:initial;
	display:block;
}
*/

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

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

div.footer__navi--list ul{
	margin:0 0 2em 0;
	padding:0;
	width:100%;
	height:auto;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}

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

div.footer__navi--list a{
	margin:0;
	padding:5px;
	display:block;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	color:#FFF;
	border-radius:1.2em;
	background:var(--footer-menu-bg);
}

div.footer__navi--list a:hover{
	text-decoration:none;
	background:var(--footer-menu-bghover);
}

@media screen and (max-width:768px){
	div.footer__navi--list{
		display:none;
	}
}

/*INDEXスクロール*/
.wrap__scroll--button{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  position:absolute;
  bottom:0.5em;
}

.wrap__scroll--button p{
	margin:0;
	padding:0;
	text-align:center;
	color:#FFF;
}

.wrap__scroll--button .field{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width:180px;
}

.wrap__scroll--button .mouse{
  width: 24px;
  height: 46px;
  background:rgba(255,255,255,0.8);
  border: 1px solid #000;
  border-radius: 16px;
  position: relative;
  overflow:hidden;
  &::before {
    content:"";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
    -webkit-animation: wheel 2s infinite;
  }
}

.wrap__scroll--button .mouse a{
	display:block;
	width:auto;
	height:100%;
	overflow:hidden;
	text-indent:-100em;
	position:relative;
	z-index:2;
}

@keyframes wheel {
  to {
    opacity: 0;
    top: 40px;
  }
}

@-webkit-keyframes wheel {
  to {
    opacity: 0;
    top: 40px;
  }
}

/*ページトップボタン*/
p.up__btn--bottom{
	margin:0;
	padding:0;
	position:fixed;
	bottom:0;
	right:0;
	background:var(--hamburgermenu-btn);
}

p.up__btn--bottom a{
	margin:0;
	padding:0;
	width:40px;
	height:40px;
	line-height:42px;
	display:block;
	
	color:#FFF;
	text-align:center;
	overflow:hidden;
}

p.up__btn--bottom a *{
	color:#FFF;
	cursor:pointer;
}