@charset "utf-8";
@import url("root.css");

header {

	margin: 0 auto;
	transition: all .2s;
	position: fixed;
	width: 100%;
	z-index: 9900;
	height: 100%;
	max-height: 90px;

	@media(max-width:480px) {
		max-height: 60px;
	}

	&.nospace {

		left: 0;
		right: 0;
		margin: auto;
		top: 0;

		#gmenu {

			width: 100%;
			margin: 0;
			border-radius: 0;
			box-shadow: none;

		}

		&.shadow {

			#gmenu {
				box-shadow: 0 5px 15px rgba(0, 0, 0, .16);
			}

		}
	}

	.logo {
		width: 10vw;
		max-width: 200px;
		display: flex;
		align-items: center;

		@media screen and (max-width: 1680px) {
			width: 8vw;
		}

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

			width: 100%;
			max-width: 150px;
		}

		@media(max-width:480px) {
			width: 100%;
			max-width: 100px;
		}

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}
	}

	#gmenu {
		height: 100%;

		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 45px;
		transition: .5s;

		box-shadow: 0 5px 20px rgba(2, 132, 199, .05);

		@media screen and (max-width:1680px) {
			padding: 0 30px;
		}

		@media(max-width:1380px) {
			padding: 0 30px;

			.smallpc_inquiry {
				margin-right: 4em;

				a {
					background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
					color: white;
					display: block;
					padding: 10px 15px;
					border-radius: 100px;
					letter-spacing: 0.05em;
					font-weight: 600;
				}

			}
		}

		@media(max-width:480px) {
			.smallpc_inquiry {
				margin-right: 30px;

				a {
					padding: 8px 15px;
					font-size: 1.4rem;
					i{
						margin: 0;
						font-size: 95%;
						margin-right: 8px;
					}
				}
			}
		}

		.gmenu {

			display: flex;
			justify-content: space-between;
			align-items: center;

			@media(max-width:1380px) {
				justify-content: flex-end;

				&.pc {
					display: none;
				}
			}

			>li {

				position: relative;
				font-weight: bold;
				/* border-right: 2px solid #eee; */

				a {

					padding: 1.5em 0.2em;
					margin-left: 1em;
					font-size: 1.6rem;
					text-align: center;
					color: var(--black);
					display: flex;
					align-items: center;
					text-decoration: none;
					transition: .1s;
					line-height: 2rem;

					position: relative;

					@media screen and (max-width:1680px) {
						padding: 1em 0.2em;
						font-size: 1.4rem;
					}

					&::after {
						position: absolute;
						content: "";
						height: 3px;
						width: 0%;
						border-radius: 100px;
						background: var(--orange);
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						transition: all .2s;
					}

					&:hover {

						&::after {
							width: 100%;
						}
					}

					i {

						height: 100%;
						display: flex;
						align-items: center;
						font-size: 95%;

					}

					@media(max-width:1380px) {
						font-size: 1.4rem;
						padding: 1.5em 12px;
					}

				}

				&.inquiry {

					a {

						background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
						border-radius: 999px;
						border: 2px solid transparent;
						color: #fff;
						border: 1px solid #FF8500;
						margin-left: 20px;
						padding: 12px 20px 13px;
						transition: all .1s;
						display: flex;
						align-items: center;

						&::after {
							display: none;
						}

						span,
						i {
							line-height: 1;
							display: flex;
							align-items: center;
						}

						i {
							margin: 0;
							margin-right: 5px;
							position: relative;
							top: 2px;
						}

						&:hover {

							background: #fff;
							color: #FF8500;

						}

					}

				}

				.submenu {

					position: absolute;
					display: none;
					background: var(--deep-blue);
					border-radius: 15px;
					width: max-content;
					top: 90%;
					left: 0;
					z-index: 999999;

					ul {

						margin: 0;
						padding: 1em 2em;

					}

					li {

						width: 100%;
						text-align: center;

						a {

							color: #fff;
							display: flex;
							padding: 10px 5px;
							font-size: 13px;
							font-weight: normal;

							&:hover {
								opacity: .6;
							}

						}

					}

				}

				&:nth-child(4),
				&:nth-child(5) {

					&:hover {

						.submenu {
							display: block;
						}

					}

				}

				&.tel {
					&.contact {
						list-style: none;
						text-align: center;

						p {
							margin: 0;
						}

						a {
							display: inline-block;
							color: inherit;
							text-decoration: none;
							padding: 0;

							&::after {
								display: none;
							}

						}

						strong {
							display: flex;
							align-items: center;
							font-size: 2.4rem;
							line-height: 1.2;
							font-weight: 700;
							font-family: var(--montserrat);
							background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
							-webkit-background-clip: text;
							background-clip: text;
							color: transparent;
							-webkit-text-fill-color: transparent;

							@media screen and (max-width:1680px) {
								font-size: 1.8rem;
							}
						}

						i {
							margin-right: 5px;
							font-size: 85%;

						}

						small {
							display: block;
							font-size: 1.4rem;
							font-weight: 500;

							@media screen and (max-width:1680px) {
								font-size: 1.2rem;
							}

							span {
								font-weight: 700;
							}
						}
					}

				}
			}

		}

	}

	@media(max-width:1380px) {

		#gmenu {
			width: 100%;
			margin: 0;
			padding: 0 2em;
			border-radius: 0;

			align-items: center;
			position: relative;
			overflow: hidden;

		}

		nav.globalMenuSp {

			position: fixed;
			inset: 0;
			transform: translateY(-100%);
			transition: .6s;
			z-index: 102;
			overflow-y: auto;

			&.active {
				transform: translateY(0);
			}

			ul {

				background: #fafafa;
				padding: 12vw 0 0;
				margin: 0;

				li {

					border-bottom: 1px dotted #666;

					a {

						display: block;
						padding: 1em 0 1em 3vw;

					}

				}

			}

		}

		.navToggle {

			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 8vw;
			height: 100%;
			z-index: 103;

			span {

				position: absolute;
				left: 2vw;
				width: 2vw;
				min-width: 40px;
				border-bottom: 3px solid var(--navy);
				transition: .35s;

			}

			&.active {

				span:nth-child(1) {
					transform: rotate(-45deg);
				}

				span:nth-child(2) {
					transform: rotate(45deg);
				}

			}

		}

	}

}

/*------------------------------------------------------------*/
/* ハンバーガーメニュー                                   */
/*------------------------------------------------------------*/
.min_header,
.min_header_Toggle {
	display: none;
}

@media screen and (max-width: 1380px) {
	.min_header_Toggle {
		box-sizing: border-box;
		display: block;
		position: absolute !important;
		/* bodyに対しての絶対位置指定 */
		right: 2em;
		bottom: 0;
		top: 0;
		margin: auto;
		/* background: #666; */
		width: 40px;
		aspect-ratio: 1/1;
		height: 100%;
		cursor: pointer;
		z-index: 103;
		text-align: center;

		@media screen and (max-width: 820px) {
			right: 2em;
		}

		@media screen and (max-width: 480px) {
			width: 40px;
			right: 1vw;
		}

		span {
			box-sizing: border-box;
			display: block;
			position: absolute;
			/* .min_header_Toggleに対して */
			width: 2vw;
			min-width: 40px;
			border-bottom: solid 4px var(--deep-blue);
			transition: .35s ease-in-out;
			border-radius: 3px;

			@media screen and (max-width: 480px) {
				width: calc(100% - 4vw);
				min-width: 0;
				left: 0;
				right: 0;

			}

			&:nth-child(1) {
				top: 39%;
			}

			&:nth-child(2) {
				top: 61%;
			}
		}

		&.active {

			span {

				/* 最初のspanをマイナス45度に */
				&:nth-child(1) {
					top: 50%;
					transform: rotate(-45deg);
					border-color: var(--black);

				}

				/* 2番目と3番目のspanを45度に */
				&:nth-child(2),
				&:nth-child(3) {
					top: 50%;
					transform: rotate(45deg);
					/* border-color: white; */
					border-color: var(--black);
				}
			}
		}

	}

	nav {

		&.min_header {
			display: block;
			padding: 50px;
			padding-top: 90px;
			background: white;
			/* background: url(../img/top/cando_bg.png) repeat-x;
			background-size: contain; */
			filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
			position: fixed;
			width: 100%;
			max-height: 100vh;
			max-width: 50vw;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			color: #000;
			text-align: center;
			transform: translateX(200%);
			transition: all 0.6s;
			overflow-y: auto;
			z-index: 102;

			&.on {
				transform: translateX(100%);

			}

			@media screen and (max-width: 820px) {
				max-width: 100vw;
				padding-top: 50px;

				&.on {
					transform: translateX(0);

				}

			}

			.min_header_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				max-width: 500px;
				margin: 0 auto;

				ul {
					width: 100%;
					max-width: 500px;

					display: flex;

					li {
						width: 50%;

						@media screen and (max-width: 480px) {
							width: 100%;
						}

						&.gmenu_logo {
							width: 100%;

							@media screen and (max-width: 480px) {
								margin-bottom: 2em;

								img {
									max-width: 300px;
								}
							}

							a {
								padding: 0;
								text-align: center;

								small {
									display: inline-block;
									font-size: 1rem;
									margin-bottom: -10px;

									@media screen and (max-width: 480px) {
										font-size: 0.9rem;
									}
								}
							}
						}

						a {
							width: 100%;
							height: 100%;
							display: block;
							text-align: center;
							font-size: 1.5rem;
							font-weight: 500;
							color: var(--text-navy);
							padding: 10px 0;
							text-decoration: none;
							transition: all .1s;

							@media screen and (max-width: 480px) {
								font-size: 1.5rem;
								padding: 10px 0;
							}

							&:hover {
								opacity: 0.7;
							}
						}

					}

					&.contact_box {
						align-items: center;
						flex-direction: column;
						margin-top: 30px;

						@media screen and (max-width: 480px) {
							margin-top: 20px;
						}

						li {
							max-width: 400px;
							margin-bottom: 6px;

							@media screen and (max-width: 480px) {
								margin-bottom: 4px;
								max-width: 230px;
							}

							a {
								padding: 12px;
								text-align: center;
								font-size: 1.4rem;
								font-weight: 600;

								@media screen and (max-width: 480px) {
									padding: 10px;
									font-size: 1.3rem;
								}

								&:hover {
									color: white;
								}

							}

							&.inquiry {
								a {
									color: white;

									background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);

									&:hover {
										opacity: 0.7;
									}

								}
							}

							&.tel {
								width: 100%;

								a {
									&:hover {
										opacity: 0.7
									}

									;

									i {
										font-size: 70%;
										color: var(--deep-blue);

									}

									strong {
										font-family: var(--jost);
										font-weight: 600;
										color: var(--deep-blue);
										font-size: 2.4rem;

									}

									small {
										font-weight: 500;
										color: var(--black);
									}
								}
							}
						}
					}
				}

			}
		}

	}

}