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

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

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

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



		span {
			box-sizing: border-box;
			display: block;
			position: absolute;
			/* .min_header_Toggleに対して */
			width: 2vw;
			min-width: 40px;
			border-bottom: solid 4px var(--blue);
			-webkit-transition: .35s ease-in-out;
			-moz-transition: .35s ease-in-out;
			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%;
					-webkit-transform: rotate(-45deg);
					-moz-transform: rotate(-45deg);
					transform: rotate(-45deg);
					border-color: var(--black);

				}

				/* 2番目と3番目のspanを45度に */
				&:nth-child(2),
				&:nth-child(3) {
					top: 50%;
					-webkit-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					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%;

							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;
									}
								}

								picture {
									margin-top: -10px;
									display: inline-block;
									width: 50%;
									max-width: 350px;
									margin-bottom: 30px;

									@media screen and (max-width: 480px) {
										width: 100%;
										margin-top: -5px;
										margin-bottom: 25px;
										max-width: 250px;
									}
								}

							}
						}

						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.4rem;
								padding: 6px 0;
							}

							&:hover {
								color: var(--light-blue);
							}
						}

					}

					&.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;

									&:hover {
										color: var(--light-blue);
									}


								}
							}

							&.tel {
								width: 100%;

								a {
									&:hover {
										color: var(--text-navy)
									}

									;

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

									}

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

									}

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

			}
		}



	}


}