@charset "utf-8";

/*
page-line
*/
.page-line {
	margin-bottom: 80px;
	@media (width <= 800px) {
		margin-bottom: 16px;
	}
}


/*
domestic01
*/
:root {
	--honsha: #EC2424;
	--niigata: #009FEF;
	--kitakanto: #0A2F83;
	--hokkaido: #004513;
	--tohoku: #188129;
	--chubu: #784F00;
	--hamamatsu: #06999B;
	--shizuoka: #F66E34;
	--kansai: #3B6866;
	--chushikoku: #C84C67;
	--kyushu: #985227;
}
.domestic01 {
	margin-bottom: 120px;
	@media (width <= 800px) {
		margin-bottom: 48px;
	}
}
.domestic-content {
	position: relative;
	padding: 32px;
	border-radius: 32px;
	@media (width <= 800px) {
		width: calc(100% + 30px);
		border-radius: 0;
		padding: 32px 14px 56px;
		margin-left: -15px;
	}
	&::before {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		content: "";
		background-image: url(../img/bg_domestic.webp);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		border-radius: 32px;
		pointer-events: none;
		z-index: 0;
		@media (width <= 800px) {
			border-radius: 0;
		}
	}
	.index {
		position: absolute;
		left: 32px;
		top: 32px;
		width: 100%;
		max-width: 693px;
		background-color: var(--lightblue);
		border-radius: 16px;
		padding: 48px 24px;
		z-index: 1;
		@media (width <= 800px) {
			position: relative;
			left: auto;
			top: auto;
			max-width: inherit;
			padding: 0;
			margin-bottom: 40px;
		}
		h2 {
			margin-bottom: 24px;
			@media (width <= 800px) {
				cursor: pointer;
				padding: 24px 20px;
				margin-bottom: 0;
			}
			&.open {
				.en {				
					&::after {
						@media (width <= 800px) {
							rotate: 0deg;
						}
					}
				}
			}
			.en {
				position: relative;
				display: inline-block;
				color: var(--blue);
				font-size: 24px;
				font-weight: 600;
				padding-right: 27px;
				&::after {
					position: absolute;
					right: 0;
					top: 50%;
					translate: 0 -50%;
					width: 12px;
					height: 7px;
					content: "";
					background-image: url(../img/arrow_d02.svg);
					background-repeat: no-repeat;
					background-position: left top;
					background-size: cover;
					pointer-events: none;
					transition: rotate 0.3s ease-out;
					@media (width <= 800px) {
						rotate: -180deg;
					}
				}
			}
		}
		.slide-content {
			position: relative;
			display: flex;
			justify-content: space-between;
			width: 100%;
			@media (width <= 800px) {
				display: none;
				padding: 0 20px 30px;
				z-index: 2;
			}
			ul {
				width: 100%;
				margin: 0;
				padding: 0;
				@media (width <= 800px) {
					&:nth-child(1) {
						margin-bottom: 12px;
					}
				}
				li {
					display: flex;
					flex-wrap: wrap;
					gap: 12px;
					line-height: 1.4;
					margin: 0 0 12px;
					padding: 0;
					&:last-child {
						margin-bottom: 0;
					}
					ul {
						margin-bottom: 24px;
						@media (width <= 800px) {
							margin-bottom: 0;
						}
					}
					&.honsha {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--honsha);
								}
							}
							&.dot {
								&::before {
									background-color: var(--honsha);
								}
							}
						}
					}
					&.niigata {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--niigata);
								}
							}
							&.dot {
								&::before {
									background-color: var(--niigata);
								}
							}
						}
					}
					&.kitakanto {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--kitakanto);
								}
							}
							&.dot {
								&::before {
									background-color: var(--kitakanto);
								}
							}
						}
					}
					&.hokkaido {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--hokkaido);
								}
							}
							&.dot {
								&::before {
									background-color: var(--hokkaido);
								}
							}
						}
					}
					&.tohoku {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--tohoku);
								}
							}
							&.dot {
								&::before {
									background-color: var(--tohoku);
								}
							}
						}
					}
					&.chubu {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--chubu);
								}
							}
							&.dot {
								&::before {
									background-color: var(--chubu);
								}
							}
						}
					}
					&.hamamatsu {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--hamamatsu);
								}
							}
							&.dot {
								&::before {
									background-color: var(--hamamatsu);
								}
							}
						}
					}
					&.shizuoka {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--shizuoka);
								}
							}
							&.dot {
								&::before {
									background-color: var(--shizuoka);
								}
							}
						}
					}
					&.kansai {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--kansai);
								}
							}
							&.dot {
								&::before {
									background-color: var(--kansai);
								}
							}
						}
					}
					&.chushikoku {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--chushikoku);
								}
							}
							&.dot {
								&::before {
									background-color: var(--chushikoku);
								}
							}
						}
					}
					&.kyushu {
						a {
							@media (width >= 800px) {
								&:hover {
									color: var(--kyushu);
								}
							}
							&.dot {
								&::before {
									background-color: var(--kyushu);
								}
							}
						}
					}
					a {
						position: relative;
						display: inline-block;
						color: #5D5D5D;
						font-size: 14px;
						font-weight: 500;
						text-decoration: none;
						transition: color 0.3s ease-out;
						&.dot {
							&::before {
								position: absolute;
								left: -8px;
								top: 50%;
								translate: 0 -50%;
								width: 4px;
								height: 4px;
								content: "";
								border-radius: 50%;
								pointer-events: none;
							}
						}
						&.sales {
							font-weight: 400;
						}
					}
				}
			}
		}
	}
	.read-map {
		position: absolute;
		right: 32px;
		bottom: 32px;
		color: var(--white);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.6;
		margin: 0;
		z-index: 2;
		@media (width <= 800px) {
			position: relative;
			right: auto;
			bottom: auto;
			font-size: 16px;
			line-height: 1.75;
			z-index: 0;
		}
	}
	.domestic-map {
		position: relative;
		width: 100%;
		max-width: 747px;
		margin: 0 13% 0 auto;
		z-index: 2;
		pointer-events: none;
		@media (width <= 800px) {
			max-width: inherit;
			margin: -96px 0 0;
		}
		.domestic-map-img {
			position: relative;
			mask-image: url(../img/domestic_map.svg);
			mask-repeat: no-repeat;
			mask-position: center top;
			mask-size: cover;
			background: transparent;
			backdrop-filter: blur(14px);
			--webkit-backdrop-filter: blur(14px);
			background-color: rgba(255, 255, 255, 0.7);
			z-index: 0;
			img {
				opacity: 0;
			}
		}
		.domestic-map-img-sp {
			display: none;
			@media (width <= 800px) {
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				img {
					width: 100%;
				}
			}
		}
		.pin {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 11px;
			height: 14px;
			pointer-events: none;
			@media (width <= 800px) {
				display: none;
			}
			&::before {
				position: absolute;
				left: 50%;
				bottom: 0;
				translate: -50% 0;
				width: 100%;
				height: 100%;
				background-color: #5D5D5D;
				mask-image: url(../img/icon_pin.svg);
				mask-repeat: no-repeat;
				mask-position: left top;
				content: "";
				pointer-events: none;
				transform-origin: center bottom;
				transition: all 0.3s ease-out;
			}
			&.active {
				&::before {
					scale: 2;
				}
			}
			&.p0101 {
				translate: 795% 1120%;
				&::before {
					background-color: var(--honsha);
				}
			}
			&.p0108 {
				translate: 695% 1232%;
				&::before {
					background-color: var(--honsha);
				}
			}
			&.p0201 {
				translate: 645% 240%;
				&::before {
					background-color: var(--niigata);
				}
			}
			&.p0202 {
				translate: 260% 670%;
				&::before {
					background-color: var(--niigata);
				}				
			}
			&.p0301 {
				translate: 645% 920%;
				&::before {
					background-color: var(--kitakanto);
				}				
			}
			&.p0302 {
				translate: 975% 825%;
				&::before {
					background-color: var(--kitakanto);
				}				
			}
			&.p0303 {
				translate: 730% 1010%;
				&::before {
					background-color: var(--kitakanto);
				}				
			}
			&.p0401 {
				translate: 1930% -1620%;
				&::before {
					background-color: var(--hokkaido);
				}				
			}
			&.p0501 {
				translate: 1450% 10%;
				&::before {
					background-color: var(--tohoku);
				}				
			}
			&.p0502 {
				translate: 1630% -325%;
				&::before {
					background-color: var(--tohoku);
				}				
			}
			&.p0503 {
				translate: 1190% 420%;
				&::before {
					background-color: var(--tohoku);
				}				
			}
			&.p0601 {
				translate: -375% 1155%;
				&::before {
					background-color: var(--chubu);
				}				
			}
			&.p0603 {
				translate: -25% 645%;
				&::before {
					background-color: var(--chubu);
				}				
			}
			&.p0701 {
				translate: -100% 1325%;
				&::before {
					background-color: var(--hamamatsu);
				}				
			}
			&.p0801 {
				translate: 165% 1280%;
				&::before {
					background-color: var(--shizuoka);
				}				
			}
			&.p0901 {
				translate: -890% 1255%;
				&::before {
					background-color: var(--kansai);
				}				
			}
			&.p1001 {
				translate: -2145% 1175%;
				&::before {
					background-color: var(--chushikoku);
				}				
			}
			&.p1002 {
				translate: -1585% 1170%;
				&::before {
					background-color: var(--chushikoku);
				}				
			}
			&.p1003 {
				translate: -2310% 1295%;
				&::before {
					background-color: var(--chushikoku);
				}				
			}
			&.p1004 {
				translate: -1580% 1455%;
				&::before {
					background-color: var(--chushikoku);
				}				
			}
			&.p1101 {
				translate: -3060% 1370%;
				&::before {
					background-color: var(--kyushu);
				}				
			}
			&.p1102 {
				translate: -3190% 2115%;
				&::before {
					background-color: var(--kyushu);
				}				
			}
		}
	}
}


/*
domestic02
*/
.domestic02 {
	padding: 96px 0 80px;
	@media (width <= 800px) {
		padding: 64px 0 56px;
	}
	h2 {
		color: var(--blue);
		font-size: 32px;
		line-height: 1.43;
		margin-bottom: 40px;
		@media (width <= 800px) {
			font-size: 24px;
			margin-bottom: 32px;
		}
	}
}
.office {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 4.3%;
	@media (width <= 800px) {
		flex-wrap: wrap;
		gap: 16px 0;
	}
	h3 {
		display: block;
		width: 100%;
		color: var(--darkblue-30);
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 12px;
		.maplink {
			position: absolute;
			top: 0;
			right: 0;
			color: var(--blue);
			font-family: "Figtree", sans-serif;
			font-size: 16px;
			font-weight: 400;
			text-decoration: none;
			padding: 0 18px 0 20px;
			&::before,
			&::after {
				position: absolute;
				top: 50%;
				translate: 0 -50%;
				background-repeat: no-repeat;
				background-position: left top;
				background-size: cover;
				content: "";
				pointer-events: none;
			}
			&::before {
				left: 0;
				width: 11px;
				height: 16px;
				background-image: url(../img/icon_map.svg);
			}
			&::after {
				right: 0;
				width: 12px;
				height: 12px;
				background-image: url(../img/icon_link.svg);
			}
		}
	}
	h4 {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0;
		@media (width <= 800px) {
			font-size: 14px;
		}
	}
	.office-content {
		display: flex;
		flex-direction: column;
		gap: 24px 0;
		width: 47.8%;
		@media (width <= 800px) {
			width: 100%;
			gap: 16px 0;
		}
		&.wide {
			width: 100%;
			.office-detail {
				display: flex;
				justify-content: space-between;
				@media (width <= 800px) {
					flex-wrap: wrap;
				}
				.l-office {
					width: 67.4%;
					@media (width <= 800px) {
						width: 100%;
					}
					.access {
						display: flex;
						width: 100%;
						margin-top: 20px;
						@media (width <= 800px) {
							flex-wrap: wrap;
						}
						.l-access {
							width: 80px;
							@media (width <= 800px) {
								width: 100%;
							}
						}
						.r-access {
							width: calc(100% - 80px);
							display: flex;
							@media (width <= 800px) {
								width: 100%;
								flex-wrap: wrap;
							}
							.access-detail {
								&:nth-child(1) {
									width: 45%;
									@media (width <= 800px) {
										width: 100%;
										margin-bottom: 12px;
									}
								}
								&:nth-child(2) {
									width: 55%;
									@media (width <= 800px) {
										width: 100%;
									}
								}
								p {
									line-height: 1.5;
									margin: 0;
									@media (width <= 800px) {
										font-size: 14px;
										line-height: 1.7;;
									}
								}
							}
						}
					}
				}
				.r-office {
					width: 220px;
					@media (width <= 800px) {
						display: none;
					}
					.accessmap {
						height: 220px;
					}
				}
			}
		}
		.office-detail {
			width: 100%;
			background-color: var(--white);
			border-radius: 12px;
			padding: 24px;
			@media (width <= 800px) {
				padding: 24px 14px;
			}
			.tel-content {
				margin-bottom: 0;
			}
			.sales-detail {
				margin-top: 24px;
				@media (width <= 800px) {
					margin-top: 16px;
				}
				h3 {
					color: var(--black);
					@media (width <= 800px) {
						margin-bottom: 8px;
					}
				}
			}
			.bikou {
				font-size: 12px;
				text-align: right;
				margin: 10px 0 -10px;
			}
		}
	}
}


/*
related-pages
*/
.related-pages {
	ul {
		li {
			&:nth-child(2) {
				display: none;
			}
		}
	}
}