@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Fix layout

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*──────────────────┐

	PC

└──────────────────*/

@media screen and (min-width:671px){
	
	#menu .fix{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-direction:column;
		flex-direction:column;
		flex-grow:1;
	}
	
	#menu .fix .footer{
		/*
		flex-grow:1;
		*/
		height:200px;
	}
	
}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

@media screen and (max-width:670px){
	
	#menu{
		position:absolute;
		width:0;
	}
	
	#menu .tree{
		position:fixed;
		bottom:-100%;
		left:0;
		width:100%;
		height:calc(100dvh - var(--mb_height_header));
		background-color:var(--mb_color_menu);
		transition:all var(--animation_time);
		overflow-y:scroll;
		overscroll-behavior-y:contain;
	}

	#menu .tree.active{
		bottom:0;
	}
	
	#menu .tree .footer{
		height:var(--mb_height_header);
	}

}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Style

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#menu{
	display:-webkit-flex;
    display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
}

#menu .level1,
#menu .level2{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
}

#menu a{
	text-decoration:none;
}

/*──────────────────┐

	PC

└──────────────────*/

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

	#menu .level1{
		width: var(--menu_width);
		background-color: var(--menu_lv1);
		border-top: #1e5bff 1px solid;
		border-right: #001448 1px solid;
		border-bottom: #001448 1px solid;
		border-left: #1e5bff 1px solid;
	}

	#menu .level2{
		width: var(--menu_width);
		background-color: var(--menu_lv2);
		border-top: #487aff 1px solid;
		border-right: #487aff 1px solid;
		border-bottom: #003dd2 1px solid;
		border-left: #487aff 1px solid;
	}

	#menu p{
		padding-left:1em;
		font-size:1.4em;
		color:#fff;
	}

	#menu a{
		height:45px;
	}

	#menu a.large{
		height:75px;
	}

	#menu .icon{
		background-size:30px;
		background-position:right 1em center;
		background-repeat:no-repeat;
	}

}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

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

	#menu p{
		margin-left:calc(30px + 1em + 1em);
		padding-right:2em;
		color:var(--font_color);
		font-size:1.5em;
	}

	#menu .level1,
	#menu .level2{
		margin:0 auto;
		width:80%;
	}

	#menu .level1{
		height:65px;
		font-weight:bold;
		border-top:var(--mb_color_gray) 1px solid;
	}

	#menu .level2{
		height:55px;
	}

	#menu .icon{
		background-size:30px;
		background-position:left 1em center;
		background-repeat:no-repeat;
	}

	/*-- Level 1 decoration --*/
	
	#menu a:not(.logo):has(+ ul){
		position:relative;
	}
	
	#menu a:not(.logo):has(+ ul)::before{
		content:"";
		position:absolute;
		right:1em;
		width: 0;
		height: 0;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
		border-top:var(--mb_color_gray) 5px solid;
	}
	
	/*-- Level 2 decoration --*/
	
	#menu .level2 p{
		position:relative;
	}
	
	#menu .level2 p::before{
		content:"";
		position:absolute;
		top:calc(50% - 5px);
		left:-1em;
		width:0;
		height:0;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-left:var(--mb_color_gray) 5px solid;
	}
	
}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Logo

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#menu .logo{
	-webkit-justify-content:center;
	justify-content:center;
}

/*──────────────────┐

	PC

└──────────────────*/

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

	#menu .logo{
		height:var(--menu_width);
	}

	#menu .logo img{
		width:90%;
	}
	
}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

@media screen and (max-width:670px){
	
	#menu .logo{
		position:fixed;
		top:0;
		left:0;
		padding:10px;
		width:100%;
		height:var(--mb_height_header);
		border-bottom:var(--mobile_main_border) 1px solid;
		border-radius:0 0 22px 22px;
		background:#fafafa;
		transition:all var(--animation_time);
		box-shadow:5px 0px 10px 1px rgba(0, 0, 0, 0.1);
	}

	#menu .logo.active{
		border-radius:0;
		background:var(--mb_color_menu);
		box-shadow:none;
	}

	#menu .logo img{
		width:60%;
		filter:invert(100);
	}

}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Tel

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	
#menu .tel{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction:column;
	flex-direction:column;
}

#menu .tel span:nth-child(1){
	padding-left:1.2em;
	font-size:2em;
	font-weight: bold;
	line-height:2em;
	background-size:auto 1.2em;
	background-position:left center;
	background-repeat:no-repeat;
}

#menu .tel span:nth-child(2){
	font-size: 1.2em;
}

/*──────────────────┐

	PC

└──────────────────*/

@media screen and (min-width:671px){
	
	#menu .tel{
		pointer-events:none;
		cursor:default;
	}

	#menu .tel span{
		color:#fff;
	}

	#menu .tel span:nth-child(1){
		background-image:url(image/tel.png);
	}

}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

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

	#menu .tel span{
		color:var(--font_color);
	}

	#menu .tel span:nth-child(1){
		background-image:url(image/mb_tel.png);
	}

}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Call

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*──────────────────┐

	PC

└──────────────────*/

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

	#menu .call{
		display:none;
	}
	
}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

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

	#menu .call{
		position:fixed;
		right:20px;
		bottom:90px;
		width:50px;
		height:50px;
		border:var(--mobile_main_border) 1px solid;
		border-radius:50%;
		background-color:var(--mb_color_strong);
		background-image: url(image/tel.png);
		background-size: auto 30px;
        background-position: center center;
        background-repeat: no-repeat;
        transform: scale(-1, 1);
		cursor:pointer;
	}

	/*-- Hidden text for Google PageSpeed Insights --*/
	#menu .call{
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Hamburger

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*──────────────────┐

	PC

└──────────────────*/

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

	#menu .hamburger{
		display:none;
	}
	
}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

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

	#menu .hamburger{
		position:fixed;
		right:20px;
		bottom:20px;
		width:50px;
		height:50px;
		border:var(--mobile_main_border) 1px solid;
		border-radius:50%;
		background:var(--mb_color_strong);
		cursor:pointer;
	}

	#menu .hamburger span{
		display:inline-block;
		transition:all var(--animation_time);
		position:absolute;
		left:14px;
		height:3px;
		border-radius:2px;
		background:#fff;
		width:45%;
	}

	#menu .hamburger span:nth-of-type(1){
		top:15px; 
	}

	#menu .hamburger span:nth-of-type(2){
		top:23px;
	}

	#menu .hamburger span:nth-of-type(3){
		top:31px;
	}

	#menu .hamburger.active span:nth-of-type(1) {
		top:18px;
		left:18px;
		transform:translateY(6px) rotate(-45deg);
		width:30%;
	}

	#menu .hamburger.active span:nth-of-type(2) {
		opacity:0;
	}

	#menu .hamburger.active span:nth-of-type(3){
		top:30px;
		left:18px;
		transform:translateY(-6px) rotate(45deg);
		width:30%;
	}
	
}/* @media */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Contact form

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#menu .contact_form{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	gap:7.5px;
	padding:1em;
}

#menu .contact_form *{
	width:100%;
	font-weight:normal;
	border:none;
	border-radius:5px;
	resize:vertical;
}

#menu .contact_form *::placeholder{
	color:var(--gray);
}

#menu .contact_form > span{
	display:block;
	text-align:center;
}

#menu .contact_form > input,
#menu .contact_form > textarea{
	padding:3px;
	border:var(--gray) 1px solid;
}

#menu .contact_form > textarea{
	min-height:calc(6px + 10em);
}

#menu .contact_form > button{
	transition:all var(--animation_time);
}

#menu .contact_form > button:hover{
	color:#fff;
	background:var(--orange);
}
/*──────────────────┐

	PC

└──────────────────*/

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

	#menu .contact_form > *{
		font-size:var(--font_size);
	}

	#menu .contact_form > span{
		color:#f6f1f1;
		background:var(--orange);
		
		
		/*
		color:var(--mb_color_menu);
		background:var(--mb_color_gray);
		background:#f6f1f1;
		color:var(--orange);
		

		*/
	}

	#menu .contact_form > button{
		background:#eee;
	}

}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

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

	#menu .contact_form{
		height:auto;
		padding:2em 1em;
	}

	#menu .contact_form > *{
		font-size:var(--mb_font_size);
	}

	#menu .contact_form > button{
		padding:5px;
		color:#fff;
		background:#555;
	}

}/* @media */