/*-----
* default-style.css ver1.0.0
* テーマのデフォルト設定
-----*/
/***** common *****/

/***** site-header *****/
.site-header{
	
}
.site-header>.inner{
	
}
.site-header>.inner>p{
	color: #fff;
}
.site-header .gmenu>.head-menu>.default-menu{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.site-header .gmenu>.head-menu>.default-menu>li:not(:last-child){
	margin-right: 1rem;
}
.site-header .gmenu>.head-menu>.default-menu>li>a{
	color: #fff;
}
.site-header .gmenu>.head-menu>.default-menu>li>a:hover{
	opacity:0.5;
}
.site-header .gmenu>.sp-gmenu-close{
	display: none;
}
.hamburger{
	display:none;
}
@media screen and (max-width:768px){
	.site-header>.inner{
		height: calc(30px + 2rem);
		padding: 1rem 5%;
	}
	.site-header .gmenu{
		display: none;
		justify-content: flex-start;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgb(0 0 0 / 50%);
		z-index: 1;
		opacity: 0;
		transition: all 300ms 0s ease;
	}
	.site-header .gmenu.sp-active{
		opacity: 1;
	}
	.site-header .gmenu>.head-menu{
		width: 80%;
		background-color: var(--key-color);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		transform: translateX(-100%);
		transition: all 300ms 0s ease;
	}
	.site-header .gmenu.sp-active>.head-menu{
		transform: translateX(0%);
	}
	.site-header .gmenu>.head-menu>.default-menu{
		width: 100%;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: flex-end;
		padding: calc(30px + 2rem) 2rem 0 0;
	}
	.site-header .gmenu>.head-menu>.default-menu>li:not(:last-child){
		margin-right: 0rem;
		margin-bottom: 1rem;
	}
	.site-header .gmenu>.sp-gmenu-close{
		display: inline-block;
		position: absolute;
		top: 1rem;
		right: 0.6rem;
		height: 2.3rem;
		font-weight: normal;
		font-family: monospace;
	}
	.site-header .gmenu>.sp-gmenu-close>div{
		height: inherit;
	}
	.site-header .gmenu>.sp-gmenu-close>div>span{
		display: inline-block;
		font-size: 3rem;
		color: #fff;
		line-height: 0.6em;
		height: 100%;
	}
	.hamburger{
		display:block;
		position: fixed;
		top: 1rem;
		right: 1rem;
	}
	.hamburger>div{
		width: 35px;
		height: 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: nowrap;
		cursor: pointer;
	}
	.hamburger>div>span{
		display: block;
		width: 100%;
		height: 3px;
		background: #fff;
		box-shadow: 0 0 1px var(--key-color);
	}
}