/*
-------------------------------------------------------

header

-------------------------------------------------------
*/

.header .header-wrap {
	width: 100%;
	gap: var(--wp--preset--spacing--30);
}

.header .logo {
	white-space: nowrap;
}

.header .wp-block-site-title {
	transition: all .2s;
}

.header .g-nav-block {
	gap: 0 var(--wp--preset--spacing--20);
}

.header .wp-block-navigation ul {
	gap: 0;
}

.header .wp-block-navigation-item__content {
	padding: 8px var(--wp--preset--spacing--20);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
}

.header .wp-block-navigation__submenu-icon {
	display: none;
}

.header .has-child > .wp-block-navigation-item__content::after {
	font-family: 'Material Symbols Outlined';
	content: '\e313';
	font-variation-settings:
		'FILL' 0,
		'wght' 300;
	font-size: 1.5em;
	border: none;
	display: inline-block;
	line-height: 20px;
}

.header .wp-block-navigation__submenu-container {
	right: auto !important;
	left: 0 !important;
	border: solid 1px var(--wp--preset--color--gray);
	border-radius: 4px;
	overflow: hidden !important;
}

.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
	padding-right: var(--wp--preset--spacing--10);
	position: relative;
	justify-content: space-between;
	align-items: center;
}

.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	font-family: 'Material Symbols Outlined';
	content: '\e5cc';
	font-variation-settings:
		'FILL' 0,
		'wght' 300;
	border: none;
	display: inline-block;
	line-height: 20px;
	font-size: 20px;
	transition: all .2s;
}

/*
-------------------------------------------------------

toggle-btn

-------------------------------------------------------
*/

.toggle-btn {
	display: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	cursor: pointer;
}

.toggle-btn p {
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

.toggle-btn::before,
.toggle-btn p::before,
.toggle-btn p::after {
	content: '';
	display: block;
	position: absolute;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var( --wp--preset--color--primary );
	transition: all .2s;
}

.toggle-btn::before {
	top: calc( 50% - 1px );
}

.toggle-btn p::before {
	top: calc( 50% - 8px );
}

.toggle-btn p::after {
	top: calc( 50% + 6px );
}

body.nav-open {
	overflow: hidden;
}

.nav-open .toggle-btn::before {
	opacity: 0;
}

.nav-open .toggle-btn p::before {
	-webkit-transform: translateY( 7px ) rotate( -45deg );
	transform: translateY( 7px ) rotate( -45deg );
}

.nav-open .toggle-btn p::after {
	-webkit-transform: translateY( -7px ) rotate( 45deg );
	transform: translateY( -7px ) rotate( 45deg );
}

.header .overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background: rgba(24, 24, 25, .5);
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

.nav-open .header .overlay {
	opacity: 1;
	visibility: visible;
	z-index: 99;
	transition: all .4s;
}

.header .overlay p {
	text-indent: -9999px;
}

/*
-------------------------------------------------------

1200

-------------------------------------------------------
*/

@media screen and ( max-width: 1200px ) {

	.header .g-nav-block {
		gap: 10px;
	}

	.header .wp-block-navigation-item__content {
		padding-right: 10px;
		padding-left: 10px;
	}

}

/*
-------------------------------------------------------

1000

-------------------------------------------------------
*/

@media screen and ( max-width: 1000px ) {

	/* toggle-btn */

	.toggle-btn {
		display: grid;
		place-content: center;
	}

	.header .overlay {
		display: block;
	}

	.header .g-nav-block {
		width: 400px;
		max-width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--base);
		padding: 64px var(--wp--preset--spacing--30);
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		transform: translateX( calc( 100% + 20px ) );
		transition: transform .4s;
		z-index: 999;
	}

	.nav-open .header .g-nav-block {
		transform: translateX( 0 );
	}

	.header .wp-block-navigation {
		width: 100%;
	}

	.header .wp-block-navigation ul {
		width: 100%;
		flex-direction: column;
	}

	.header .wp-block-navigation-item {
		width: 100%;
		flex-direction: column;
		justify-content: center;
	}

	.header .wp-block-navigation-item__content {
		width: 100%;
		padding: 8px var(--wp--preset--spacing--20);
		position: relative;
	}

	.header .wp-block-navigation-item__content::after {
		font-family: 'Material Symbols Outlined';
		content: '\e5cc';
		font-variation-settings:
			'FILL' 0,
			'wght' 300;
		border: none;
		display: inline-block;
		line-height: 20px;
		font-size: 20px;
		opacity: 0;
		visibility: hidden;
		transition: all .2s;
	}

	.header .has-child > .wp-block-navigation-item__content::after {
		content: '\e145';
		opacity: 1;
		visibility: visible;
		transform: none !important;
	}

	.header .has-child > .wp-block-navigation-item__content.open::after {
		content: '\e15b';
	}
	
	.header .has-child .wp-block-navigation__submenu-container {
		display: none;
		height: auto;
		background: transparent;
		position: relative;
		visibility: visible;
		opacity: 1;
		width: 100% !important;
		border: none;
		border-radius: 0;
		padding-left: var(--wp--preset--spacing--20);
	}

	.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-right: var(--wp--preset--spacing--20);
		padding-left: 1.5em;
	}

	.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: '\f88a';
		font-family: 'Material Symbols Outlined';
		font-variation-settings:
			'FILL' 1,
			'wght' 400;
		line-height: 1.5;
		color: var(--wp--preset--color--dark-gray);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY( -50% );
	}

	.header .g-nav-block .header-button {
		width: 100%;
	}

	.header .g-nav-block .wp-block-button {
		width: 100%;
	}

	:root .g-nav-block :where(.wp-element-button, .wp-block-button__link) {
		height: 48px;
		border-radius: 24px;
	}

}

/*
-------------------------------------------------------

768

-------------------------------------------------------
*/

@media screen and ( max-width: 768px ) {

	.header .g-nav-block {
		transform: none;
		height: 0;
		padding: 0 var(--wp--preset--spacing--30);
		overflow: hidden;
		transition: all .4s;
	}

	.nav-open .header .g-nav-block {
		height: calc(var(--vh, 1vh) * 100);
		overflow: auto;
		padding: 64px var(--wp--preset--spacing--30);
	}

	.header {
		display: flex;
		min-height: 50px;
	}

	.toggle-btn {
		width: 50px;
		height: 50px;
	}

	.toggle-btn::before,
	.toggle-btn p::before,
	.toggle-btn p::after {
		right: 15px;
		left: 15px;
	}

}

/*
-------------------------------------------------------

hover min 769 max 1000

-------------------------------------------------------
*/

@media screen and (min-width: 769px) and (max-width: 1000px) {
	
	.nav-open .header .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--light-gray);
	}

	.nav-open .header .wp-block-navigation-item__content:hover::after {
		opacity: 1;
		visibility: visible;
		transform: translateX( 5px );
	}

}

/*
-------------------------------------------------------

hover

-------------------------------------------------------
*/

@media screen and ( min-width: 769px ) {

	.header .link-to-cover-and-group-blocks:hover .wp-block-site-title {
		color: var(--wp--preset--color--primary);
	}

	.header .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--primary);
	}

	.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--light-gray);
	}

	.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after {
		transform: translateX( 5px );
	}

	/* toggle-btn */

	.toggle-btn:hover::before,
	.toggle-btn:hover p::before,
	.toggle-btn:hover p::after {
		right: 16px;
		left: 16px;
	}

}

/*
-------------------------------------------------------

header-fixed

-------------------------------------------------------
*/

header:has( > .is-style-header-fixed ) {
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 8px rgba(24, 24, 25, .08);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99;
}

/*
-------------------------------------------------------

header-fixed-pc

-------------------------------------------------------
*/

@media screen and ( min-width: 769px ) {

	body:has( .is-style-header-fixed-pc ) {
		padding-top: 64px;
	}

	header:has( > .is-style-header-fixed-pc ) {
		background: var(--wp--preset--color--base);
		box-shadow: 0 0 8px rgba(24, 24, 25, .08);
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
	}

}

/*
-------------------------------------------------------

header-side

-------------------------------------------------------
*/

body:has( .is-style-header-side ) {
	padding-left: 320px;
}

.is-style-header-side .header {
	height: inherit;
	padding: 0;
}

.is-style-header-side .header-wrap {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 320px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0;
	background: var(--wp--preset--color--base);
	z-index: 9999;
	transition: all .4s;
}

.is-style-header-side .logo-block {
	padding: var(--wp--preset--spacing--40);
}

.is-style-header-side .header .g-nav-block {
	width: 100%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--20);
	background: transparent;
	position: relative;
	transform: none;
}

.is-style-header-side .header .wp-block-navigation {
	width: 100%;
}

.is-style-header-side .header .wp-block-navigation ul {
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.is-style-header-side .header .wp-block-navigation-item {
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

.is-style-header-side .header .wp-block-navigation-item::after {
	display: none;
}

.is-style-header-side .header .wp-block-navigation-item__content {
	width: 100%;
	padding: 8px var(--wp--preset--spacing--20);
	position: relative;
}

.is-style-header-side .header .wp-block-navigation-item__content::after {
	font-family: 'Material Symbols Outlined';
	content: '\e5cc';
	font-variation-settings:
		'FILL' 0,
		'wght' 300;
	border: none;
	display: inline-block;
	line-height: 20px;
	font-size: 20px;
	opacity: 0;
	visibility: hidden;
	transition: all .2s;
}

.is-style-header-side .header .has-child > .wp-block-navigation-item__content::after {
	content: '\e145';
	opacity: 1;
	visibility: visible;
	transform: none !important;
}

.is-style-header-side .header .has-child > .wp-block-navigation-item__content.open::after {
	content: '\e15b';
}

.is-style-header-side .header .has-child .wp-block-navigation__submenu-container {
	display: none;
	height: auto;
	background: transparent;
	position: relative;
	visibility: visible;
	opacity: 1;
	width: 100% !important;
	border: none;
}

.is-style-header-side .header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-right: var(--wp--preset--spacing--20);
	padding-left: 30px;
	color: var(--wp--preset--color--contrast);
}

.is-style-header-side .header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: '';
	width: 10px;
	height: 2px;
	position: absolute;
	top: calc( 50% - 1px );
	left: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--dark-gray);
}

.is-style-header-side .header .g-nav-block .header-button {
	width: 100%;
}

.is-style-header-side .header .g-nav-block .wp-block-button {
	width: 100%;
	margin-top: auto;
}

:root .is-style-header-side .g-nav-block :where(.wp-element-button, .wp-block-button__link) {
	height: 48px;
	border-radius: 24px;
}


/*
-------------------------------------------------------

1200

-------------------------------------------------------
*/

@media screen and ( max-width: 1200px ) {

	body:has( .is-style-header-side ) {
		padding-left: 280px;
	}

	.is-style-header-side .header-wrap {
		width: 280px;
	}

}

/*
-------------------------------------------------------

1000

-------------------------------------------------------
*/

@media screen and ( max-width: 1000px ) {

	body:has( .is-style-header-side ) {
		padding-left: 0;
	}

	.is-style-header-side .header-wrap {
		transform: translateX( calc( -100% - 20px ) );
	}

	.nav-open .is-style-header-side .header-wrap {
		transform: translateX( 0 );
	}

}

/*
-------------------------------------------------------

768

-------------------------------------------------------
*/

@media screen and ( max-width: 768px ) {

	.is-style-header-side .header-wrap {
		width: 100%;
		transform: none;
		height: 0;
		overflow: hidden;
		transition: all .4s;
	}

	.nav-open .is-style-header-side .header-wrap {
		height: 100vh;
	}

	.is-style-header-side .logo-block {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
		display: grid;
		place-content: center left;
		height: 64px;
	}

}

/*
-------------------------------------------------------

hover

-------------------------------------------------------
*/

@media screen and ( min-width: 769px ) {
	
	.is-style-header-side .header .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--light-gray);
	}

	.is-style-header-side .header .wp-block-navigation-item__content:hover::after {
		opacity: 1;
		visibility: visible;
		transform: translateX( 5px );
	}

}

/*
-------------------------------------------------------

nav under line

-------------------------------------------------------
*/

@media screen and ( min-width: 1001px ) {

	.header .is-style-nav-under-line .wp-block-page-list > .wp-block-navigation-item::after {
		content: '';
		width: 0;
		height: 2px;
		position: absolute;
		bottom: 0;
		left: 50%;
		background-color: var(--wp--preset--color--primary);
		transition: all .2s;
	}

}

@media screen and ( min-width: 769px ) {

	.header .is-style-nav-under-line .wp-block-page-list > .wp-block-navigation-item:hover::after {
		width: 20px;
		left: calc(50% - 10px);
	}

}

/*
-------------------------------------------------------

nav background color

-------------------------------------------------------
*/

@media screen and ( min-width: 769px ) {

	.header .is-style-nav-background-color .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--light-gray);
	}

}