/*---------------------------------
	body start
---------------------------------*/
html{
	scroll-behavior: smooth;
}

body{
	--v-headerHeight: 5.5em;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #FFF;
	
	& > *{
		flex-grow: 0;
		flex-shrink: 0;
	}

	& > main{
		flex-grow: 1;
		width: 100%;
		overflow: hidden;
	}
}

[id]{
	scroll-margin-top: var(--v-headerHeight);
}

/*---------------------------------
	body end
---------------------------------*/

/*---------------------------------
	header start
---------------------------------*/
body{
	--v-headerHeight: 6em;
}

.header{
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1em 2em 1em 1.5em;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: nowrap;
	background: #FFF;
	
	& .header_nav{
		flex-grow: 1;
		
		@media(max-width: 1024px){
			display: none;
		}
	}
	
	@media(min-width: 1025px){
		& .header_drawerButton{
			display: none;
		}
	}
}

.headerLogo{
	margin: 0;
	
	& img{
		max-width: 8em;
	}
}

.headerNav{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5em;
	flex-wrap: nowrap;
	
	& .headerNav_item{
		position: relative;
		
		& > a,
		& > a:hover{
			text-decoration: none;
			color: inherit;
		}
		
		& .headerNav_itemHead{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: .1em;
			padding: 1em 0;
			font-weight: var(--f-weight-bold);
			
			&:before{
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				border-bottom: 2px solid var(--c-hex-theme);
				opacity: 0;
				transition: opacity .25s;
			}
		}
		
		&:hover .headerNav_itemHead:before{
			opacity: 1;
		}
		
		&:has(.headerNav_dropdown) .headerNav_itemHead:after{
			content: "keyboard_arrow_down";
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1em;
			height: 1em;
			font-family: "Material Symbols Outlined";
			font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
			font-weight: 400;
			font-size: 125%;
			line-height: 100%;
			transform: translateY(.1em);
			overflow: hidden;
		}
		
		.headerNav_dropdown{
			position: absolute;
			top: calc(100% - 2px);
			left: 50%;
			transform: translateX(-50%);
			visibility: hidden;
			opacity: 0;
			transition: all .25s;
		}
		
		&:hover .headerNav_dropdown{
			visibility: visible;
			opacity: 1;
		}
			
		& .headerNavDropdownContent{
			width: max-content;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			background-color: var(--c-hex-themeContrast);
			border: 2px solid var(--c-hex-theme);
			
			& .headerNavDropdownContent_item{
				width: 100%;
				
				& > a{
					display: block;
					width: 100%;
					padding: .75em 1.5em;
					color: var(--c-hex-themeContrast);
					text-align: center;
					text-decoration: none;
					background-color: var(--c-hex-theme);
					transition: all .25s;
					
					&:hover{
						color: var(--c-hex-theme);
						text-decoration: none;
						background-color: var(--c-hex-themeContrast);
					}
				}
			}
		}
	}
}

.headerDrawerButton{
	--p-buttonSize: 3em;
	--p-iconWidth: 1.5em;
	--p-iconHeight: .75em;
	--p-borderWidth: 3px;
	flex-shrink: 0;
	position: relative;
	z-index: 200;
	width: var(--p-buttonSize);
	height: var(--p-buttonSize);
	cursor: pointer;
	
	&:before{
		content: "";
		position: absolute;
		top: calc(50% - (var(--p-iconHeight) / 2));
		left: calc(50% - (var(--p-iconWidth) / 2));
		width: var(--p-iconWidth);
		height: var(--p-borderWidth);
		background-color: var(--c-hex-base);
		border-radius: var(--p-borderWidth);
		transition: all .25s;
	}

	&:after{
		content: "";
		position: absolute;
		bottom: calc(50% - (var(--p-iconHeight) / 2));
		left: calc(50% - (var(--p-iconWidth) / 2));
		width: var(--p-iconWidth);
		height: var(--p-borderWidth);
		background-color: var(--c-hex-base);
		border-radius: var(--p-borderWidth);
		transition: all .25s;
	}
}

body.is-drawerActive .headerDrawerButton{
	&:before{
		top: calc(50% - (var(--p-borderWidth) / 2));
		transform: rotate(45deg);
	}

	&:after{
		bottom: calc(50% - (var(--p-borderWidth) / 2));
		transform: rotate(-45deg);
	}
}

@media(min-width: 1025px){
	.drawer{
		display: none;
	}
}

@media(max-width: 1024px){
	.drawerOverray{
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		z-index: 80;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		opacity: 0;
		visibility: hidden;
		transition: all .25s;
	}
	
	body.is-drawerActive .drawerOverray{
		opacity: 1;
		visibility: visible;
	}
	
	.drawer{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 90;
		width: 90%;
		height: 100%;
		padding-top: var(--v-headerHeight);
		background: #FFF;
		transform: translateX(100%);
		opacity: 0;
		transition: all .25s;
	}
	
	body.is-drawerActive .drawer{
		transform: translateX(0);
		opacity: 1;
	}
}

.drawer_section{
	padding: 1.5em 1.5em;
}

.drawerNav{
	display: flex;
	flex-direction: column;
	gap: .5em;
	
	& .drawerNav_item{
		display: block;
		border-bottom: 1px solid var(--c-hex-lightgray);
		
		& .drawerNav_itemHead{
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			padding: 0 .5em;
			
			& a{
				flex-grow: 1;
				padding: 1em 0;
				color: inherit;
				text-decoration: none;
			}
			
			& .drawerNav_subListToggleButton{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.5em;
				height: 1.5em;
				transform-origin: 50% 45%;
				transition: all .25s;
				
				&:after{
					content: "keyboard_arrow_down";
					display: flex;
					align-items: center;
					justify-content: center;
					width: 1em;
					height: 1em;
					font-family: "Material Symbols Outlined";
					font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
					font-weight: 400;
					font-size: 200%;
					overflow: hidden;
				}
			}
		}
		
		&[open]{
			& .drawerNav_subListToggleButton{
				transform: rotate(180deg);
			}
		}
		
		& .drawerNav_subList{
			display: flex;
			flex-direction: column;
			gap: .25em;
			padding-bottom: 1.5em;
			
			& .drawerNav_subListItem{
				position: relative;
				padding-left: 1em;
				
				&:before{
					content: "・";
					position: absolute;
					top: 0;
					left: 0;
				}
				
				& a,
				& a:hover{
					color: inherit;
				}
			}
		}
		
		&:has(.drawerNav_subList){
			&:not([open]){
				& .drawerNav_subList{
					height: 0;
					opacity: 0;
					padding: 0;
					margin: 0;
				}
			}
			
			&[open]{
				& .drawerNav_subList{
					height: auto;
					opacity: 1;
				}
			}
		}
	}
}

/*---------------------------------
	header end
---------------------------------*/

/*---------------------------------
	cta start
---------------------------------*/
.cta{
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin: 0 auto;
	padding: clamp(1em, 1vw, 1.5em);
	width: min(95%, 1350px);
	z-index: 50;
	background: var(--bg-hex-theme-light02);
	border-radius: 1em 1em 0 0;
	
	@media(max-width: 601px){
		justify-content: center;
		font-size: min(2.25vw, 100%);
	}
	
	& .cta_mail{
		--p-color: var(--c-hex-theme);
		--p-color-contrast: var(--c-hex-themeContrast);
		--p-borderWidth: 2px;
		--p-paddingX: 1.5em;
		--p-paddingY: .6em;
		flex-shrink: 1;
		flex-grow: 0;
		display: block;
		position: relative;
		width: 27em;
		padding: var(--p-paddingY) calc(var(--p-paddingX) + 1em) calc(var(--p-paddingY) * 1.2) calc(var(--p-paddingX) + 2em);
		color: var(--p-color-contrast);
		font-size: 125%;
		text-align: center;
		font-weight: var(--f-weight-bold);
		text-decoration: none;
		background-color: var(--p-color);
		border:  var(--p-borderWidth) solid var(--p-color);
		border-radius: 2em;
		outline: none !important;
		transition: background-color 0.25s, color 0.25s;
		
		&:hover{
			color: var(--p-color);
			text-decoration: none;
			background-color: var(--p-color-contrast);
		}
		
		&:before{
			content: "mail";
			position: absolute;
			top: 50%;
			left: .5em;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1em;
			height: 1em;
			font-family: "Material Symbols Outlined";
			font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
			font-weight: 400;
			font-size: 200%;
			overflow: hidden;
		}
		
		&:after{
			content: "arrow_forward";
			position: absolute;
			top: 50%;
			right: .75em;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1em;
			height: 1em;
			font-family: "Material Symbols Outlined";
			font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
			font-weight: 400;
			font-size: 125%;
			overflow: hidden;
		}
	}
	
	& .cta_tel{
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: .25em;
		margin: 0 1em;
		text-align: center;
		
		& .cta_telNum{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: .25em;
			font-size: 200%;
			font-weight: bold;
			text-decoration: none;
			color: inherit;
			
			&:before{
				content: "call";
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1em;
				height: 1em;
				margin-bottom: -.1em;
				font-family: "Material Symbols Outlined";
				font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;
				font-weight: 400;
				font-size: 150%;
				color: var(--c-hex-theme);
				line-height: 100%;
				overflow: hidden;
			}
		}
		
		& .cta_telSubText{
			font-weight: var(--f-weight-bold);
			margin: 0 0 .5em;
			
			@media(min-width: 601px){
				font-size: 90%;
			}
		}
		
	}
}

/*---------------------------------
	cta end
---------------------------------*/

/*---------------------------------
	footer start
---------------------------------*/
.footer{
	padding: 3em 0;
	color: var(--c-hex-themeContrast);
	font-weight: var(--f-weight-bold);
	background: var(--bg-hex-theme);
	
	& .footer_contentsSection{
		--p-gap: 2.5em;
		display: flex;
		align-content: flex-start;
		justify-content: space-between;
		gap: var(--p-gap);
		width: min(90%, 1200px);
		margin: 0 auto;
		
		@media(min-width: 1025px){
			& .footer_info,
			& .footer_map{
				width: calc(100% - var(--p-gap) / 2);
			}
		}
		
		@media(max-width: 1024px){
			flex-direction: column;
			
			& .footer_info,
			& .footer_map{
				width: 100%;
			}
		}
	}
	
	& .footer_logo{
		margin: 0;
		
		& img{
			max-width: 16em;
			
			@media(max-width: 1024px){
				max-width: 10em;
			}
		}
	}
	
	& .footerNav{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 1em 0;
		
		& .footerNavItem{
			position: relative;
			padding: 0 1.25em;
			
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: -1px;
				height: 100%;
				border-right: 2px solid #FFF;
				transform: rotate(20deg);
			}
			&:after{
				content: "";
				position: absolute;
				top: 0;
				right: -1px;
				height: 100%;
				border-right: 2px solid #FFF;
				transform: rotate(20deg);
			}
			
			& a{
				text-decoration: none;
				color: inherit;
			}
		}
	}
	
	& .footerMap{
		position: relative;
		width: 100%;
		height: 20em;
		
		& iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	
	& .footer_copySection{
		width: min(90%, 1200px);
		margin: 0 auto;
	}
}

/*---------------------------------
	footer end
---------------------------------*/

/*---------------------------------
	section start
---------------------------------*/
.section{
	position: relative;
	z-index: 5;
	padding: 5em 0 7.5em;
	
	@media(max-width: 600px){
		padding: 2.5em 0 5em;
	}
	
	&.section--bgThemeLight{
		background-color: var(--bg-hex-theme-light02);
	}
	
	&.section--bgLightgray{
		background-color: var(--bg-hex-lightgray);
	}

	& .section_inner{
		position: relative;
		z-index: 10;
		width: 90%;
		margin-right: auto;
		margin-left: auto;
		
		&.section_inner--mw900{
			max-width: 900px;
		}

		&.section_inner--mw960{
			max-width: 960px;
		}
		
		&.section_inner--mw1150{
			max-width: 1150px;
		}

		&.section_inner--mw1200{
			max-width: 1200px;
		}

		&.section_inner--mw1250{
			max-width: 1250px;
		}
		
		&.section_inner--mw1300{
			max-width: 1300px;
		}
	}
}

/*---------------------------------
	section end
---------------------------------*/

/*---------------------------------
	subpageHead start
---------------------------------*/
.subpageHead{
	position: relative;
	margin: 0;
	
	& .subpageHead_bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		
		& img{
			position: relative;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 11;
		}
		
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: 12;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.5);
		}
	}
	
	& .subpageHead_inner{
		padding: 5em 0;
		margin: 0 auto;
	}
	
	& .subpageHead_text{
		position: relative;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .25em;
		text-align: center;
		font-weight: var(--f-weight-bold);
		font-size: 175%;
		color: #FFF;
		
		& span{
			font-size: 60%;
		}
	}
}

/*---------------------------------
	subpageHead end
---------------------------------*/