@charset "UTF-8";




/* CSS STYLE */

html {
	font-size: 10px;
}
@media screen and (max-width: 1200px) {
	html {
		font-size: 0.8333333vw;
	}
}
body {
	padding-top: 12rem;
	font-size: 1.6rem;
	line-height: 1.7;
}

a:hover,
a:active {
	color: var(--color-green);
	text-decoration: underline;
}

a,
a img,
a video {
	transition: 0.2s ease;
}
a:hover img {
	opacity: 0.6;
}
a[href^="tel:"] {
	pointer-events: none;
	cursor: default;
}

.pcnone {
	display: none !important;
}










/* SITEPARTS */

#warp {
	position: relative;
	width: 100%;
}

.inner {
	position: relative;
	width: 100%;
	max-width: 120rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5rem;
	padding-right: 5rem;
	z-index: 1;
}
.inner-mid {
	position: relative;
	width: 100%;
	max-width: 110rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5rem;
	padding-right: 5rem;
	z-index: 1;
}
.inner-min {
	position: relative;
	width: 100%;
	max-width: 100rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5rem;
	padding-right: 5rem;
	z-index: 1;
}
.inner-sml {
	position: relative;
	width: 100%;
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5rem;
	padding-right: 5rem;
	z-index: 1;
}

.page-head {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray);
	width: 100%;
	min-height: 25rem;
	padding: 8rem 0;
	overflow: hidden;
	h1, p {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		max-width: 120rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5rem;
		padding-right: 5rem;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.06em;
		z-index: 2;
		color: var(--color-w);
		.shoulder {
			display: block;
			width: 100%;
			margin-bottom: 1rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.6rem;
			font-weight: 500;
		}
		.sub {
			position: relative;
			margin-left: 2.2rem;
			padding-left: 5rem;
			font-size: 1.8rem;
			font-weight: 500;
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				display: block;
				border-top: 1px solid var(--color-w);
				width: 3rem;
			}
		}
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		max-width: initial;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}

.page-head-simple {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-main);
	color: var(--color-w);
	width: 100%;
	min-height: 21rem;
	padding: 4rem 0;
	h1 {
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.06em;
		text-align: center;
		.shoulder {
			display: block;
			width: 100%;
			margin-bottom: 1rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.6rem;
			font-weight: 500;
			text-align: center;
		}
	}
}

.page-head-sub {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg);
	width: 100%;
	min-height: 13rem;
	padding: 4rem 0;
	h1 {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		max-width: 120rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5rem;
		padding-right: 5rem;
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0.06em;
		color: var(--color-b);
	}
}

.bread {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 120rem;
	min-height: 9rem;
	margin-left: auto;
	margin-right: auto;
	padding: 3rem 5rem;
	font-size: 1.2rem;
	line-height: 1.3;
	color: #757575;
	z-index: 1;
	li {
		&:after {
			content: "／";
			margin: 0 1.2rem;
			font-weight: 700;
			color: #e3e3e3;
		}
		&:last-child {
			&:after {
				display: none;
			}
		}
	}
	a {
		color: #757575;
	}
}

.btn {
	position: relative;
	line-height: 1;
	a, button {
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		vertical-align: middle;
		border: 2px solid var(--color-main);
		border-radius: 0.6rem;
		background-color: var(--color-w);
		min-width: 20rem;
		min-height: 5rem;
		margin: 0;
		padding: 0.5rem 2rem 0.7rem 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.04em;
		text-decoration: none;
		text-align: center;
		color: var(--color-main);
		box-shadow: 0 0.3rem 0 var(--color-main);
		transition: 0.2s linear;
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			right: 1.6rem;
			border-radius: 2rem;
			background: var(--color-main) url(../img/ar_01.png) no-repeat center center / 2rem;
			width: 2rem;
			height: 2rem;
			margin-top: -1rem;
			transition: 0.15s linear;
		}
		&:hover {
			background-color: var(--color-main);
			color: var(--color-w);
			transform: translate(0, 0.3rem);
			box-shadow: 0 0 0 var(--color-main);
			&:after {
				background-image: url(../img/ar_02.png);
				background-color: #fff;
				width: 2.4rem;
				height: 2.4rem;
				right: 1.4rem;
				margin-top: -1.2rem;
			}
		}
		&.point {
			&:before {
				content: "";
				position: absolute;
				top: -1.4rem;
				right: -1.4rem;
				background: url(../img/btn-point.png) no-repeat center center / 1.6rem;
				width: 1.6rem;
				height: 1.4rem;
			}
		}
	}
	&.type2 {
		a, button {
			background-color: var(--color-main);
			color: var(--color-w);
			box-shadow: 0 0.5rem 0 #ab3004;
			&:after {
				background: var(--color-w) url(../img/ar_02.png) no-repeat center center / 2rem;
			}
			&:hover {
				transform: translate(0, 0.5rem);
				border: 2px solid #ab3004;
				background-color: #ab3004;
				box-shadow: 0 0 0 #ab3004;
			}
		}
	}
	&.type3 {
		a, button {
			border: 2px solid var(--color-btn);
			background-color: var(--color-btn);
			color: var(--color-b);
			box-shadow: 0 0.5rem 0 #99ab1e;
			&:after {
				background: var(--color-w) url(../img/ar_03.png) no-repeat center center / 2rem;
			}
			&:hover {
				transform: translate(0, 0.5rem);
				border: 2px solid #99ab1e;
				background-color: #99ab1e;
				box-shadow: 0 0 0 #99ab1e;
			}
		}
	}
}

.btn2 {
	position: relative;
	line-height: 1;
	a, button {
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		vertical-align: middle;
		border: 1px solid #e9e0dc;
		border-radius: 0.5rem;
		min-height: 5.4rem;
		padding: 0.5rem 4rem 0.7rem 4rem;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		color: var(--color-b);
		&:after {
			content: "";
			display: block;
			border-top: 0.15rem solid var(--color-b);
			border-right: 0.15rem solid var(--color-b);
			width: 0.8rem;
			height: 0.8rem;
			margin-left: 1rem;
			transform: rotate(45deg);
		}
		&:hover {
			border: 1px solid var(--color-txt);
			background-color: #f3f3f3;
		}
	}
}

.big {
	font-size: 120%;
}
.sml {
	font-size: 85%;
}
.note {
	font-size: 85%;
}

.img-box {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	img {
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		max-width: initial;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	a {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.img-box a:hover img,
a:hover .img-box img {
	transform: scale(1.05,1.05);
}


/* FADE */

.fade {
	opacity: 0;
	transition: 0.8s linear;
}
.fade.active {
	opacity: 1;
}
.fade-l, .pc-fade-l {
	position: relative;
	opacity: 0;
	transform: translate(-2rem, 0);
	transition: 0.8s ease-out;
}
.fade-l.active, .pc-fade-l.active {
	opacity: 1;
	transform: translate(0, 0);
}
.fade-r, .pc-fade-r {
	position: relative;
	opacity: 0;
	transform: translate(2rem, 0);
	transition: 0.8s ease-out;
}
.fade-r.active, .pc-fade-r.active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.fade-t {
	position: relative;
	opacity: 0;
	transform: translate(0, -2rem);
	transition: 0.8s ease-out;
}
.fade-t.active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.fade-b {
	position: relative;
	opacity: 0;
	transform: translate(0, 2rem);
	transition: 0.8s ease-out;
}
.fade-b.active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.fade-w {
	transition: 0.8s ease-out;
	transform: scale(1.1,1.1);
	opacity: 0;
}
.fade-z {
	transition: 0.8s ease-out;
	transform: scale(0.9,0.9);
	opacity: 0;
}
.fade-w.active,
.fade-z.active {
	transform: scale(1,1);
	opacity: 1;
}
.blur {
	transition: 5s ease;
	filter: blur(10rem);
	transform: scale(1.5,1.5);
	opacity: 1;
}
.blur.active {
	filter: blur(0);
	transform: scale(1,1);
	opacity: 1;
}










/* HEADER */

#header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-w);
	width: 100%;
	height: 12rem;
	padding: 0 0 0 5rem;
	line-height: 1;
	z-index: 10000;
	.header-logo {
		width: 23.5rem;
	}
	.header-menu {
		height: 12rem;
		.menu-top {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 6rem;
			.sns {
				display: flex;
				gap: 1rem;
				font-size: 0;
				img {
					width: 2.5rem;
				}
			}
			.tel {
				width: 23rem;
				margin-left: 3rem;
				padding-top: 1.9rem;
				.time {
					margin-top: 0.5rem;
					font-size: 1.2rem;
					line-height: 1;
					letter-spacing: 0.025em;
					color: #5e5e5e;
					white-space: nowrap;
					span {
						font-size: 1rem;
					}
				}
			}
			.reserve {
				display: flex;
				width: 40rem;
				height: 6rem;
				margin-left: 2rem;
				li {
					width: 20rem;
					height: 6rem;
					a {
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: var(--color-main);
						width: 20rem;
						height: 6rem;
						padding-bottom: 0.2rem;
						font-size: 1.6rem;
						font-weight: 500;
						text-align: center;
						text-decoration: none;
						line-height: 1;
						color: var(--color-w);
						&:before {
							content: "";
							display: block;
							background: url(../img/btn-icon_01.png) no-repeat center center / 2rem;
							width: 2rem;
							height: 2rem;
							margin-right: 1.2rem;
							transition: 0.3s ease;
						}
						&:hover {
							background-color: #ab3004;
						}
					}
					&:nth-of-type(2) {
						a {
							background-color: var(--color-btn);
							color: var(--color-b);
							&:before {
								background: url(../img/btn-icon_02.png) no-repeat center center / 2rem;
							}
							&:hover {
								background-color: #99ab1e;
							}
						}
					}
				}
			}
			#menu-open {
				display: none;
			}
		}
		.menu-main {
			.menu {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				> li {
					position: relative;
					&:before {
						content: "";
						position: absolute;
						top: 50%;
						left: 0;
						display: block;
						border-left: 1px solid #dfdfdf;
						height: 1.6rem;
						margin-top: -0.8rem;
					}
					&:first-child {
						&:before {
							display: none;
						}
					}
					> a, > span {
						position: relative;
						display: flex;
						align-items: center;
						height: 6rem;
						padding: 0 2.6rem 0.2rem 2.6rem;
						font-size: 1.5rem;
						font-weight: 500;
						line-height: 1;
						text-decoration: none;
						color: var(--color-b);
						cursor: pointer;
						transition: 0.2s ease;
						&:hover {
							color: var(--color-main);
							&:before {
								content: "";
								position: absolute;
								left: 2.6rem;
								bottom: 0;
								display: block;
								width: calc(100% - 5.2rem);
								border-bottom: 2px solid var(--color-main);
							}

						}
					}
					&.sub-menu {
						> span {
							&:after {
								content: "";
								display: block;
								background: url(../img/head-ar.png) no-repeat center center / 1rem;
								width: 1rem;
								height: 1rem;
								margin: 0.2rem 0 0 1rem;
							}
							&:before {
								width: calc(100% - 7.2rem);
							}
						}
						.sub {
							position: absolute;
							top: 100%;
							left: 0;
							display: none;
							background-color: #f2f2f2;
							white-space: nowrap;
							li {
								border-bottom: 1px solid #e2e2e2;
								white-space: nowrap;
								background-color: #f2f2f2;
							}
							a {
								display: block;
								background-color: #f2f2f2;
								padding: 2rem;
								white-space: nowrap;
								font-size: 1.4rem;
								font-weight: 400;
								line-height: 1;
								text-decoration: none;
								color: var(--color-b);
								&:hover {
									background-color: var(--color-w);
								}
							}
						}
					}
				}
			}
			.sp-fc, .sp-cv, .sp-link, #menu-close {
				display: none;
			}
		}
	}
}

.sp-menu {
	display: none;
}










/* FOOTER + */

#footer {
	position: relative;
	background-color: #f5e8e4;
	width: 100%;
	padding: 8rem 0 5rem 0;
	z-index: 1;
	.footer-top {
		position: relative;
		display: flex;
		justify-content: space-between;
		.data {
			z-index: 1;
			width: 21rem;
			.logo {
				width: 21rem;
			}
			.add {
				margin-top: 1.5rem;
				font-size: 1.3rem;
				color: var(--color-b);
				span {
					font-size: 1.1rem;
				}
			}
		}
		.footer-menu {
			display: flex;
			justify-content: flex-end;
			gap: 3.4rem;
			width: calc(100% - 25rem);
			padding-top: 1.4rem;
			font-size: 1.5rem;
			font-weight: 500;
			color: var(--color-b);
			z-index: 1;
			a {
				color: var(--color-b);
			}
			li {
				ul {
					margin-top: 1.2rem;
					font-size: 1.4rem;
					font-weight: 400;
					color: #706865;
					li {
						position: relative;
						margin-top: 0.4rem;
						padding-left: 1em;
						&:before {
							content: "・";
							position: absolute;
							top: 0;
							left: 0;
						}
					}
					a {
						color: #706865;
					}
				}
			}
		}
		.fc {
			position: absolute;
			bottom: -1.5rem;
			right: 0;
			z-index: 2;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #f0bd00;
				border-radius: 0.5rem;
				background-color: #fff7d9;
				width: 20.6rem;
				height: 5rem;
				padding: 0 4rem 0.1rem 3rem;
				font-size: 1.6rem;
				font-weight: 500;
				line-height: 1.3;
				text-decoration: none;
				color: var(--color-b);
				box-shadow: 0 0.3rem 0 #f0bd00;
				&:after {
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					right: 1.6rem;
					border-radius: 2rem;
					background: var(--color-main) url(../img/ar_01.png) no-repeat center center / 2rem;
					width: 1.8rem;
					height: 1.8rem;
					margin-top: -0.9rem;
					transition: 0.15s linear;
				}
				&:hover {
					background-color: #f0bd00;
					color: var(--color-w);
					transform: translate(0, 0.3rem);
					box-shadow: 0 0 0 #f0bd00;
					&:after {
						background-image: url(../img/ar_02.png);
						background-color: #fff;
						width: 2.2rem;
						height: 2.2rem;
						right: 1.4rem;
						margin-top: -1.1rem;
					}
				}
			}
		}
	}
	.footer-btm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #dfcfcc;
		margin-top: 8.5rem;
		padding-top: 3rem;
		.link {
			display: flex;
			align-items: center;
			font-size: 1.3rem;
			line-height: 1;
			li {
				&:after {
					content: "|";
					margin: 0 2rem;
				}
				&:last-child {
					&:after {
						display: none;
					}
				}
			}
		}
		.sns {
			display: none;
		}
		.copy {
			font-family: 'Roboto', sans-serif;
			font-size: 1.2rem;
			line-height: 1;
			color: #8a8a8a;
		}
	}
}

.go-top {
	position: fixed;
	bottom: 4rem;
	right: 4rem;
	width: 5rem;
	height: 5rem;
	z-index: 1000;
	opacity: 0;
	transition: 0.2s ease;
	&.active {
		opacity: 1;
	}
	a {
		position: relative;
		display: block;
		border-radius: 6rem;
		background: var(--color-w) url(../img/go-top.png) no-repeat center center / 6rem;
		width: 6rem;
		height: 6rem;
		padding-top: 6rem;
		font-size: 0;
		box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.15);
		overflow: hidden;
		&:hover {
			width: 6.8rem;
			height: 6.8rem;
			padding-top: 6.8rem;
			margin: -0.4rem 0 0 -0.4rem;
		}
	}
}

.cv-area {
	position: relative;
	background-color: var(--color-bg2);
	width: calc(100% - 10rem);
	margin: 0 auto;
	padding: 1px 5rem 5rem 5rem;
	z-index: 2;
	.read {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background: url(../img/cv-txt.png) no-repeat center top / 31.5rem;
		width: 31.5rem;
		height: 6.8rem;
		margin: -2.8rem auto 1.6rem auto;
		padding-bottom: 3.1rem;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.06em;
		color: var(--color-b);
		white-space: nowrap;
		strong {
			position: relative;
			font-size: 1.8rem;
			font-weight: 700;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				top: -0.6rem;
				left: 50%;
				display: block;
				border-radius: 0.3rem;
				background-color: var(--color-main);
				width: 0.3rem;
				height: 0.3rem;
				margin-left: -0.15rem;
			}
		}
	}
	h2, h3 {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-bottom: 2.5rem;
		font-size: 4.2rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.08em;
		color: var(--color-b);
		strong {
			position: relative;
			font-weight: 700;
			color: var(--color-main);
			&:after {
				content: "";
				position: absolute;
				bottom: -1rem;
				left: 0;
				display: block;
				width: 100%;
				border-bottom: 0.4rem solid var(--color-main);
			}
		}
		&:before, &:after {
			content: "";
			display: block;
			height: 4.2rem;
			border-left: 0.3rem solid var(--color-main);
			margin-bottom: -1rem;
		}
		&:before {
			transform: rotate(-45deg);
			margin-right: 3rem;
		}
		&:after {
			transform: rotate(45deg);
			margin-left: 3rem;
		}
	}
	ul {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 1rem;
		background-image: repeating-linear-gradient(90deg, #916758, #916758 2px, transparent 2px, transparent 6px);
		background-position: left bottom;
		background-repeat: repeat-x;
		background-size: 100% 2px;
		min-width: 63rem;
		max-width: 77rem;
		margin: 0 auto;
		padding-bottom: 2.5rem;
		z-index: 2;
	}
	.btn {
		width: 100%;
		max-width: 31rem;
		a {
			width: 100%;
			max-width: 31rem;
			height: 7rem;
			font-size: 1.6rem;
			&:after {
				background-size: 2.4rem;
				width: 2.4rem;
				height: 2.4rem;
				margin-top: -1.2rem;
			}
			&:hover {
				&:after {
					width: 2.8rem;
					height: 2.8rem;
					margin-top: -1.4rem;
				}
			}
		}
		&.com {
			a {
				background-color: var(--color-main);
				height: 6.8rem;
				padding-right: 3rem;
				font-size: 1.8rem;
				color: var(--color-w);
				box-shadow: 0 0.5rem 0 #ab3004;
				&:before {
					content: "";
					display: block;
					background: url(../img/btn-icon_01.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 1.5rem;
					transition: 0.2s ease;
				}
				&:after {
					background: var(--color-w) url(../img/ar_02.png) no-repeat center center / 2.4rem;
				}
				&:hover {
					transform: translate(0, 0.5rem);
					border: 2px solid #ab3004;
					background-color: #ab3004;
					box-shadow: 0 0 0 #ab3004;
				}
			}
		}
		&.buz {
			a {
				border: 2px solid var(--color-btn);
				background-color: var(--color-btn);
				height: 6.8rem;
				padding-right: 3rem;
				font-size: 1.8rem;
				color: var(--color-b);
				box-shadow: 0 0.5rem 0 #99ab1e;
				&:before {
					content: "";
					display: block;
					background: url(../img/btn-icon_02.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 1.5rem;
					transition: 0.2s ease;
				}
				&:after {
					background: var(--color-w) url(../img/ar_03.png) no-repeat center center / 2.4rem;
				}
				&:hover {
					transform: translate(0, 0.5rem);
					border: 2px solid #99ab1e;
					background-color: #99ab1e;
					box-shadow: 0 0 0 #99ab1e;
				}
			}
		}
		&.sim {
			a {
				justify-content: flex-start;
				padding-left: 1.8rem;
				&:before {
					content: "";
					display: block;
					background: url(../img/btn-icon_03.png) no-repeat center center / 2.6rem;
					width: 2.6rem;
					height: 3.2rem;
					margin-right: 1.6rem;
					transition: 0.2s ease;
				}
				&:hover {
					&:before {
						background-image: url(../img/btn-icon_03_hover.png);
					}
				}
			}
		}
	}
	.btm {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 80rem;
		margin: 0.8rem auto 0 auto;
		.tel {
			width: 35.6rem;
			margin-left: 2rem;
			margin-right: 1.5rem;
			padding-bottom: 0.4rem;
		}
		.time {
			margin-right: 2rem;
			padding-bottom: 0.4rem;
			font-size: 1.3rem;
			font-weight: 500;
			line-height: 1.45;
			color: #754b3b;
		}
		&> img {
			width: auto;
			height: 5.2rem;
		}
	}
	.trick {
		position: absolute;
		top: 1.4rem;
		right: calc(50% + 24rem);
		width: 11.5rem;
		z-index: 1;
	}
	.shop {
		position: absolute;
		top: -3rem;
		left: calc(50% + 24rem);
		width: 12rem;
		height: auto;
	}
	&:has(+ #footer) {
		margin-top: 11rem;
		margin-bottom: 5rem;
	}
}

/*.side-bar {
	position: fixed;
	top: 50%;
	right: 0;
	width: 5rem;
	height: 19rem;
	margin-top: -9.5rem;
	z-index: 900;
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0.5rem 0 0 0.5rem;
		background-color: var(--color-main);
		width: 5rem;
		height: 19rem;
		padding: 1rem;
		line-height: 1.2;
		text-decoration: none;
		text-align: center;
		color: var(--color-w);
		box-shadow: 0 0.3rem 0 #a73105;
		&:hover {
			box-shadow: 0 0 0 #a73105;
		}
	}
}*/










/* INDEX */

#warp.index {
	padding-bottom: 5rem;
	overflow: hidden;
	&:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		background-color: var(--color-bg);
		width: 100%;
		height: 21rem;
		z-index: 1;
	}
}

.mv-area {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	height: 68rem;
	z-index: 1;
	overflow: hidden;
	.mv-read {
		position: absolute;
		top: 50%;
		left: 50%;
		/*background-color: rgba(255, 255, 255, 0.9);*/
		width: 46rem;
		padding: 1px 2.5rem 2.5rem 2.5rem;
		transform: translate(-50%, -58%);
		/*box-shadow: 0.4rem 0.4rem 2rem rgba(0, 0, 0, 0.15);*/
		z-index: 2;
		h1 {
			position: relative;
			width: 100%;
			.read {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				background: url(../img/index/index-mv-txt-bg.png) no-repeat center top / 41rem;
				width: 41rem;
				height: 7.2rem;
				margin-top: -2.8rem;
				padding-bottom: 3rem;
				padding-left: 1rem;
				font-size: 1.8rem;
				font-weight: 500;
				line-height: 1;
				color: var(--color-b);
				white-space: nowrap;
				strong {
					position: relative;
					font-size: 2.2rem;
					font-weight: 700;
					color: var(--color-main);
					&:before {
						content: "";
						position: absolute;
						top: -0.7rem;
						left: 50%;
						display: block;
						border-radius: 0.3rem;
						background-color: var(--color-main);
						width: 0.3rem;
						height: 0.3rem;
						margin-left: -0.15rem;
					}
				}
			}
			.main {
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: repeating-linear-gradient(90deg, #3e1302, #3e1302 2px, transparent 2px, transparent 8px);
				background-position: left bottom;
				background-repeat: repeat-x;
				background-size: 100% 2px;
				width: 36rem;
				margin: -0.5rem auto 0 auto;
				padding-bottom: 0.5rem;
				font-size: 4.1rem;
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.08em;
				color: var(--color-b);
				white-space: nowrap;
				.left {
					text-align: right;
				}
				.center {
					margin: 0 0.5rem;
					font-family: 'Roboto', sans-serif;
					font-size: 12rem;
					font-weight: 500;
					line-height: 1;
					color: var(--color-main);
				}
				.right {
					text-align: left;
				}
				span {
					font-size: 2.6rem;
					letter-spacing: 0.02em;
				}
				strong {
					font-weight: 700;
					color: var(--color-main);
				}
			}
		}
		.sub {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 1.6rem;
			font-size: 1.9rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			strong {
				font-weight: 700;
				color: var(--color-main);
			}
			&:before, &:after {
				content: "";
				display: block;
				height: 2.4rem;
				border-left: 0.2rem solid var(--color-main);
			}
			&:before {
				transform: rotate(-30deg);
				margin-right: 2rem;
			}
			&:after {
				transform: rotate(30deg);
				margin-left: 2rem;
			}
		}
		/*.btn {
			width: 36rem;
			margin: 2rem auto 0 auto;
			a {
				border-color: var(--color-btn);
				background-color: var(--color-btn);
				width: 36rem;
				height: 7.4rem;
				font-size: 2.3rem;
				color: var(--color-b);
				box-shadow: 0 0.5rem 0 #99ab1e;
				span {
					position: absolute;
					top: -1.6rem;
					left: -2.7rem;
					display: block;
					background: url(../img/index/index-mv-btn-bg.png) no-repeat left top / 7.4rem;
					width: 7.4rem;
					height: 5.4rem;
					padding-top: 1.2rem;
					font-size: 1.7rem;
					font-weight: 700;
					line-height: 1;
					text-align: center;
					color: var(--color-main);
				}
				&:after {
					right: 2rem;
					background: #fff url(../img/ar_03.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-top: -1.2rem;
				}
				&:hover {
					transform: translate(0, 0.5rem);
					border-color: #99ab1e;
					background-color: #99ab1e;
					box-shadow: 0 0 0 #99ab1e;
					&:after {
						right: 1.8rem;
						width: 2.8rem;
						height: 2.8rem;
						margin-top: -1.4rem;
					}
				}
			}*/

            .btn {
			position: absolute;
            bottom: 40px;
            left: 15%;
            width: 70%;
			a {
				border-color: var(--color-btn);
				background-color: var(--color-btn);
				display: block;
				padding: 1.8% 0;
				font-size: 1.8rem;
                border-radius: 5rem;
				color: var(--color-b);
				box-shadow: 0 0.5rem 0 #000;
				&:after {
					right: 2rem;
					background: #fff url(../img/ar_03.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-top: -1.2rem;
				}
				&:hover {
					transform: translate(0, 0.5rem);
					border-color: #99ab1e;
					background-color: #99ab1e;
					box-shadow: 0 0 0 #000;
					&:after {
						right: 1.8rem;
						width: 2.8rem;
						height: 2.8rem;
						margin-top: -1.4rem;
					}
				}
			}
		}
	}
	.mv-image {
		position: relative;
		display: none;
		width: 100%;
		height: 62rem;
		z-index: 1;
		&.slick-initialized {
			display: block;
		}
		.image {
			position: relative;
			background-color: var(--color-gray);
			width: 100vw;
			height: 62rem;
			overflow: hidden;
			img {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
				max-width: initial;
				width: 100%;
				height: 100%;
			}
		}
		.slick-dots {
			position: absolute;
			bottom: -3rem;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			gap: 0.4rem;
			li {
				width: 3rem;
				height: 2px;
				font-size: 0;
				line-height: 0;
				button {
					background-color: #efd5cd;
					width: 3rem;
					height: 2px;
					padding-top: 2px;
					font-size: 0;
					line-height: 0;
					overflow: hidden;
				}
				&.slick-active {
					button {
						background-color: #e84609;
					}
				}
			}
		}
	}
}

.index-head {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 8rem 0 3rem 0;
	padding-bottom: 2.8rem;
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.5rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.08em;
		text-align: center;
		color: var(--color-b);
		img {
			width: auto;
			height: 4.6rem;
			margin-right: 2rem;
			&:has(+ strong) {
				margin: 0 0.8rem;
			}
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	p {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.6rem;
		text-align: center;
		img {
			width: 6rem;
			height: 6rem;
		}
	}
	&:first-child {
		margin-top: 0;
	}
}

.index-sub-head {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 3rem;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-b);
	&:before, &:after {
		content: "";
		display: block;
		width: 2.2rem;
		border-bottom: 0.2rem solid var(--color-main);
	}
	&:before {
		margin-right: 1.6rem;
	}
	&:after {
		margin-left: 1.6rem;
	}
}

.other-link {
	margin-top: 1.5rem;
	text-align: right;
	font-size: 1.5rem;
	a {
		text-decoration: underline;
		color: #3e1302;
		&:hover {
			text-decoration: none;
		}
	}
}

.index-campaign {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	/*padding: 5rem 0 6rem 0;*/
	padding: 0 0 8rem 0;
	h2 {
		margin-bottom: 2rem;
		font-size: 2.1rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
	}
	.campaign-info {
		display: none;
		position: relative;
		width: 100%;
		margin-bottom: 4.5rem;
		&.slick-initialized {
			display: block;
		}
		.img-box {
			width: 28rem;
			height: 16rem;
			margin: 0 1rem;
			padding: 0;
		}
		.slick-arrow {
			position: absolute;
			top: 50%;
			border: none;
			border-radius: 5rem;
			background: var(--color-main) url(../img/ar-big_01.png) no-repeat center center / 4.8rem;
			width: 4.8rem;
			height: 4.8rem;
			margin-top: -2.4rem;
			padding-top: 4.8rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.1s linear;
			&.slick-prev {
				left: -2.4rem;
				transform: rotate(-180deg);
				&:hover {
					left: -2.8rem;
				}
			}
			&.slick-next {
				right: -2.4rem;
				&:hover {
					right: -2.8rem;
				}
			}
			&:hover {
				width: 5.6rem;
				height: 5.6rem;
				margin-top: -2.8rem;
				opacity: 0.8;
			}
		}
		.slick-dots {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			position: absolute;
			bottom: -4.5rem;
			left: 0;
			width: 100%;
			height: 2rem;
			font-size: 0;
			line-height: 0;
			li {
				width: 2rem;
				height: 2rem;
				button {
					border: 0.7rem solid #fff;
					border-radius: 2rem;
					background-color: #f8c7b5;
					width: 2rem;
					height: 2rem;
					padding-top: 0.6rem;
					font-size: 0;
					line-height: 0;
					overflow: hidden;
				}
				&.slick-active {
					button {
						background-color: var(--color-main);
						box-shadow: 0 0 0 0.15rem var(--color-main);
					}
				}
			}
		}
	}
	fw-embed-feed {
		margin-top: 8.5rem;
	}
}

.index-about {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 8rem 0 27rem 0;
	z-index: 1;
	.about-contents {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2rem 1.8%;
		width: 100%;
		.about {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-color: var(--color-w);
			width: 49.1%;
			padding: 4rem 0 4rem 4rem;
			.read {
				width: calc(100% - 22.5rem);
				h3 {
					position: relative;
					margin-bottom: 1.5rem;
					font-size: 2.2rem;
					font-weight: 500;
					line-height: 1.45;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0.4rem;
						left: -4rem;
						display: block;
						height: calc(100% - 0.8rem);
						border-left: 3px solid var(--color-main);
					}
				}
				p {
					text-align: justify;
				}
			}
			.img-box {
				width: 18.8rem;
				height: 18.8rem;
				padding: 0;
			}
		}
	}
	.about-diagnosis {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 2.5rem;
		width: 100%;
		.diagnosis {
			width: calc(calc(100% - 5rem) / 3);
			background-color: var(--color-w);
			.img-box {
				position: relative;
				width: 100%;
				height: 21.5rem;
				padding: 0;
				z-index: 1;
			}
			.read {
				position: relative;
				padding: 1px 2rem 3.5rem 2rem;
				z-index: 2;
				h3 {
					font-size: 2.8rem;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0;
					text-align: center;
					color: var(--color-b);
					strong {
						position: relative;
						margin-right: 1rem;
						font-weight: 500;
						z-index: 2;
						&:before, &:after {
							content: "";
							position: absolute;
							top: 50%;
							display: block;
							border-radius: 4.6rem;
							background-color: var(--color-yellow);
							width: 4.6rem;
							height: 4.6rem;
							margin-top: -2.2rem;
							z-index: -1;
						}
						&:before {
							left: -0.9rem;
						}
						&:after {
							right: -0.8rem;
						}
					}
					div {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5rem;
						background-color: var(--color-main);
						width: 28rem;
						height: 4rem;
						margin: -2rem auto 2rem auto;
						padding-bottom: 0.2rem;
						font-size: 1.6rem;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0;
						color: var(--color-w);
						&:after {
							content: "";
							position: absolute;
							left: 50%;
							bottom: -1rem;
							width:0;
							height:0;
							border-style:solid;
							border-width: 1.1rem 0.6rem 0 0.6rem;
							border-color: var(--color-main) transparent transparent transparent;
							margin-left: -0.6rem;
						}
					}
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 0.4rem;
					margin-top: 2rem;
					li {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 0.4rem;
						background-color: #eee;
						height: 3.2rem;
						padding: 0 1.2rem 0.1rem 1.2rem;
						font-size: 1.3rem;
						font-weight: 500;
						line-height: 1;
						color: #393939;
					}
				}
				.btn {
					margin-top: 2rem;
					text-align: center;
					a {
						width: 21rem;
					}
				}
			}
		}
	}
}

.index-about + .cv-area {
	margin-top: -16rem;
}

.index-voice {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 8rem 0;
	.customer-voice {
		position: relative;
		display: none;
		width: 100%;
		color: var(--color-txt2);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
			display: flex;
		}
		.slick-slide {
			height: auto !important;
		}
		.voice {
			background-color: var(--color-bg);
			width: 35rem;
			margin: 0 1.2rem;
			padding: 3rem 3rem 3.5rem 3rem;
			font-size: 1.5rem;
			.voice-top {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				border-bottom: 1px solid #ebdcd8;
				width: 100%;
				margin-bottom: 1.5rem;
				padding-bottom: 1.5rem;
				.user {
					width: 7rem;
					.image {
						border-radius: 7rem;
						background-color: var(--color-w);
						width: 7rem;
						height: 7rem;
						overflow: hidden;
					}
					p {
						margin-top: 0.8rem;
						font-size: 0.9rem;
						font-weight: 500;
						letter-spacing: 0;
						line-height: 1.2;
						letter-spacing: 0;
						text-align: center;
						color: #9a9390;
					}
				}
				.title {
					width: calc(100% - 8.5rem);
					h3 {
						font-size: 1.8rem;
						font-weight: 500;
						line-height: 1.45;
						color: var(--color-b);
					}
					ul {
						display: flex;
						gap: 0.3rem;
						li {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							border: 1px solid var(--color-main);
							border-radius: 0.3rem;
							height: 2.4rem;
							margin-top: 1.2rem;
							padding: 0 1rem 0.1rem 1rem;
							font-size: 1.2rem;
							line-height: 1;
							color: var(--color-main);
						}
					}
				}
			}
			p {
				text-align: justify;
				strong {
					font-weight: 700;
					color: var(--color-main);
				}
			}
		}
		.slick-arrow {
			position: absolute;
			top: 50%;
			border: none;
			border-radius: 5rem;
			background: var(--color-main) url(../img/ar-big_01.png) no-repeat center center / 4.8rem;
			width: 4.8rem;
			height: 4.8rem;
			margin-top: -2.4rem;
			padding-top: 4.8rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.1s linear;
			&.slick-prev {
				left: calc(50% - 58.5rem);
				transform: rotate(-180deg);
				&:hover {
					left: calc(50% - 58.9rem);
				}
			}
			&.slick-next {
				right: calc(50% - 58.5rem);
				&:hover {
					right: calc(50% - 58.9rem);
				}
			}
			&:hover {
				width: 5.6rem;
				height: 5.6rem;
				margin-top: -2.8rem;
				opacity: 0.8;
			}
		}
	}
}

.index-service {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 8rem 0;
	.service-list {
		.service {
			display: flex;
			justify-content: space-between;
			background-color: var(--color-w);
			width: 100%;
			min-height: 29rem;
			margin-top: 2rem;
			box-shadow: 0.7rem 0.7rem 2rem rgba(213, 185, 178, 0.15);
			.img-box {
				width: 39rem;
				padding: 0;
			}
			.read {
				align-self: center;
				width: calc(100% - 39rem);
				padding: 3rem 4rem;
				h3 {
					display: flex;
					align-items: center;
					margin-bottom: 1.8rem;
					font-size: 2.4rem;
					font-weight: 500;
					line-height: 1.45;
					color: var(--color-b);
					span {
						display: block;
						background-color: var(--color-main);
						width: 4.4rem;
						height: 4.4rem;
						margin-right: 2rem;
						font-family: 'Roboto', sans-serif;
						font-size: 1.6rem;
						font-weight: 500;
						letter-spacing: 0;
						line-height: 4.4rem;
						text-align: center;
						color: var(--color-w);
					}
				}
				.btn {
					margin-top: 2.2rem;
				}
			}
			&:nth-of-type(even) {
				flex-direction: row-reverse;
			}
		}
	}
}

.index-maker {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 8rem 0 10rem 0;
	.maker-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		li {
			position: relative;
			border: 1px solid #ddd;
			border-radius: 0.5rem;
			background-color: var(--color-w);
			width: 16rem;
			height: 7rem;
			overflow: hidden;
			img {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
				max-width: initial;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
		}
	}
}

.index-column {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 6rem 0;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: -16rem;
		left: 0;
		display: block;
		background-color: var(--color-bg);
		width: 100vw;
		height: 16rem;
	}
	.column-list {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 2.5rem;
		width: 100%;
		a {
			display: block;
			background-color: var(--color-w);
			width: calc(calc(100% - 5rem) / 3);
			padding: 0;
			text-decoration: none;
			color: var(--color-txt);
			box-shadow: 0.7rem 0.7rem 2rem rgba(213, 185, 178, 0.15);
			.img-box {
				padding-top: 59.5%;
			}
			.read {
				padding: 2rem 3rem 2.5rem 3rem;
				h3 {
					margin-bottom: 1.5rem;
					font-size: 1.9rem;
					font-weight: 500;
					line-height: 1.5;
					color: var(--color-b);
				}
				.txt {
					font-size: 1.5rem;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					color: #616161;
				}
				.day {
					margin-top: 2.4rem;
					font-family: 'Roboto', sans-serif;
					font-size: 1.4rem;
					text-align: right;
					color: #a4a4a4;
				}
			}
			&:hover {
				h3 {
					text-decoration: underline;
				}
			}
		}
	}
}

.index-news {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	/*padding: 6rem 0 10rem 0;*/
	padding: 8rem 0 0 0;
}










/* COLUMN */

.column-all-list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 5rem 3rem;
	.column {
		width: calc(calc(100% - 6rem) / 3);
		> a {
			display: block;
			text-decoration: none;
			.img-box {
				padding-top: 59.5%;
			}
			.category {
				display: flex;
				flex-wrap: wrap;
				gap: 0.3rem;
				margin-top: 2rem;
				li {
					display: flex;
					align-items: center;
					border: 1px solid var(--color-main);
					border-radius: 2.4rem;
					height: 2.4rem;
					padding: 0 1rem 0.1rem 1rem;
					font-size: 1.2rem;
					line-height: 1;
					color: var(--color-main);
				}
			}
			h2, h3 {
				margin-top: 0.6rem;
				font-size: 1.9rem;
				font-weight: 500;
				line-height: 1.5;
				color: var(--color-b);
			}
			&:hover {
				h2, h3 {
					text-decoration: underline
				}
			}
		}
		dl {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			flex-direction: row-reverse;
			margin-top: 2.5rem;
			dt {
				font-family: 'Roboto', sans-serif;
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;
				color: #b2b2b2;
			}
			dd {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem 1em;
				width: calc(100% - 8rem);
				font-size: 1.3rem;
				font-weight: 400;
				line-height: 1;
				color: #616161;
			}
			a {
				text-decoration: underline;
				color: #616161;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

.pager {
	position: relative;
	width: 100%;
	height: 5.2rem;
	margin-top: 6rem;
	padding: 0 10rem;
	ul {
		display: flex;
		justify-content: center;
		gap: 0.3rem;
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 5.2rem;
			height: 5.2rem;
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5.2rem;
				background-color: var(--color-bg);
				width: 5.2rem;
				height: 5.2rem;
				font-size: 1.6rem;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0;
				text-decoration: none;
				color: var(--color-b);
				&:hover {
					background-color: var(--color-bg2);
				}
			}
			&.active {
				a {
					background-color: #716661;
					color: var(--color-w);
				}
			}
		}
	}
	.prev, .next {
		width: 9rem;
		height: 5.2rem;
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0.5rem;
			background-color: var(--color-bg);
			width: 9rem;
			height: 5.2rem;
			font-size: 1.6rem;
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0;
			text-decoration: none;
			color: var(--color-b);
			&:hover {
				background-color: var(--color-bg2);
			}
		}
	}
	.prev {
		position: absolute;
		top: 0;
		left: 0;
		a {
			&:before {
				content: "";
				display: block;
				border-top: 0.15rem solid var(--color-b);
				border-left: 0.15rem solid var(--color-b);
				width: 0.8rem;
				height: 0.8rem;
				margin-right: 0.6rem;
				transform: rotate(-45deg);
			}
		}
	}
	.next {
		position: absolute;
		top: 0;
		right: 0;
		a {
			&:after {
				content: "";
				display: block;
				border-top: 0.15rem solid var(--color-b);
				border-right: 0.15rem solid var(--color-b);
				width: 0.8rem;
				height: 0.8rem;
				margin-left: 0.6rem;
				transform: rotate(45deg);
			}
		}
	}
}

.category-list-pc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 5rem;
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0.5rem;
		background-color: var(--color-bg);
		height: 5rem;
		padding: 0 2.5rem;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		color: var(--color-txt);
		&:hover {
			background-color: var(--color-bg2);
		}
	}
	.active {
		a {
			background-color: #716661;
			color: var(--color-w);
		}
	}
}
.category-list-sp {
	display: none;
}

.tag-list {
	width: 100%;
	margin-top: 8rem;
	dt {
		margin-bottom: 2.6rem;
		font-size: 2.8rem;
		font-weight: 500;
		line-height: 1;
		color: var(--color-b);
	}
	dd {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #b8b8b8;
			border-radius: 0.4rem;
			height: 3.2rem;
			padding: 0 1rem 0.1rem 1rem;
			font-size: 1.3rem;
			line-height: 1;
			text-decoration: none;
			color: var(--color-txt);
			white-space: nowrap;
			&:hover {
				border: 1px solid var(--color-txt);
				background-color: #f3f3f3;
			}
		}
	}
}

.text-data {
	.column-days {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 2.6rem;
		.category {
			display: flex;
			flex-wrap: wrap;
			gap: 0.3rem;
			li {
				display: flex;
				align-items: center;
				border: 1px solid var(--color-main);
				border-radius: 3.6rem;
				height: 3.6rem;
				padding: 0 1.6rem 0.2rem 1.6rem;
				font-size: 1.4rem;
				line-height: 1;
				color: var(--color-main);
			}
		}
		.days {
			display: flex;
			flex-wrap: wrap;
			gap: 0.3rem;
			li {
				display: flex;
				align-items: center;
				border-radius: 3.6rem;
				background-color: #f5f5f5;
				height: 3.6rem;
				padding: 0 2rem 0.2rem 2rem;
				font-size: 1.4rem;
				line-height: 1;
				color: #707070;
				em {
					font-weight: 400;
					color: var(--color-b);
				}
			}
		}
	}
	.infor-days {
		margin-bottom: 1.5rem;
		font-family: 'Roboto', sans-serif;
		font-size: 1.5rem;
		color: #a4a4a4;
	}
	h1, h2 {
		margin-bottom: 2.4rem;
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1.55;
		color: var(--color-b);
	}
	.column-tag {
		margin-bottom: 3.5rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1em;
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
		color: #616161;
		a {
			text-decoration: underline;
			color: #616161;
			&:hover {
				text-decoration: none;
			}
		}
	}
	figure, .wp-caption {
		width: 100% !important;
		margin: 3.5rem 0 6rem 0;
		img {
			display: block;
		}
	}
	figcaption, .wp-caption-text {
		margin-top: 1rem;
		text-align: center;
		font-size: 1.3rem;
		line-height: 1.4;
		text-align: center;
		color: #a4a4a4;
	}
	.column-index {
		border: 1px solid #ccc;
		background-color: var(--color-w);
		width: 100%;
		margin: 6rem 0;
		padding: 3.5rem 4rem;
		dt {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1.4rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			&:after {
				content: "";
				display: block;
				width: calc(100% - 5.6rem);
				border-top: 1px solid #ccc;
			}
		}
		dd {
			position: relative;
			margin-top: 0.5rem;
			padding-left: 1.6em;
			font-size: 1.8rem;
			line-height: 1.5;
			&:before {
				content: "\30FB";
				position: absolute;
				top: 0;
				left: 0.3em;
				font-weight: 700;
				color: var(--color-main);
			}
			a {
				display: inline-block;
				position: relative;
				text-decoration: underline;
				padding-right: 1.5em;
				color: var(--color-txt);
				&:hover {
					text-decoration: none;
				}
				&:after {
					content: "";
					background: url(../img/head-ar_02.png) no-repeat center center / 1.2rem;
					position: absolute;
					top: 0.35em;
					right: 0;
					display: block;
					width: 1em;
					height: 1em;
				}
			}
		}
	}
}

.text-area {
	a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
			color: var(--color-main);
		}
		&[target="_blank"] {
			background: url(../img/link-blank.png) no-repeat right 0.5rem / 1.6rem;
			padding-right: 1.5em;
		}
		&[href$=".pdf"] {
			background: url(../img/link-pdf.png) no-repeat right 0.5rem / 1.6rem;
			padding-right: 1.5em;
		}
	}
	h2 {
		border-top: 1px solid var(--color-main);
		border-bottom: 1px solid var(--color-main);
		margin: 6rem 0 2.5rem 0;
		padding: 2.4rem 0;
		font-size: 2.8rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h3 {
		border-bottom: 1px solid #d2d2d2;
		margin: 5rem 0 2rem 0;
		padding: 0 0 1.8rem 0;
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h4 {
		border-bottom: 1px dotted #d2d2d2;
		margin: 4.5rem 0 2rem 0;
		padding: 0 0 1.6rem 0;
		font-size: 2.1rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h5 {
		margin: 4rem 0 2rem 0;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h6 {
		margin: 3rem 0 2rem 0;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	p {
		margin: 1.5rem 0;
		img {
			margin: 1.5rem 0;
		}
		&:first-child {
			margin-top: 0;
		}
	}
	ul {
		margin: 4rem 0;
		li {
			position: relative;
			margin: 0.5rem 0;
			padding-left: 1em;
			&:before {
				content: "\30FB";
				position: absolute;
				top: 0;
				left: -0.2em;
				font-weight: 500;
				color: var(--color-main);
			}
		}
		&:first-child {
			margin-top: 0;
		}
	}
	ol {
		counter-reset: number;
		margin: 4rem 0;
		li {
			position: relative;
			margin: 0.5rem 0;
			padding-left: 1.5em;
			&:before {
				counter-increment: number;
				content: ''counter(number)'';
				position: absolute;
				top: 0.5rem;
				left: 0;
				display: block;
				border-radius: 1.8rem;
				background-color: var(--color-main);
				width: 1.8rem;
				height: 1.8rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1rem;
				letter-spacing: 0;
				line-height: 1.8rem;
				text-align: center;
				color: var(--color-w);
			}
		}
		&:first-child {
			margin-top: 0;
		}
	}
	dl {
		background-color: #f6f6f6;
		margin: 6rem 0;
		padding: 3.5rem 4rem;
		dt {
			margin-bottom: 1rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-b);
		}
		&:first-child {
			margin-top: 0;
		}
	}
	table {
		border: 1px solid #c8b8b3;
		width: 100%;
		margin: 6rem 0;
		th {
			border: 1px solid #c8b8b3;
			background-color: #f6f6f6;
			padding: 1.4rem 2rem;
			font-weight: 500;
			line-height: 1.7;
			color: var(--color-b);
		}
		td {
			border: 1px solid #c8b8b3;
			background-color: var(--color-w);
			padding: 1.4rem 2rem;
			line-height: 1.7;
		}
		&:first-child {
			margin-top: 0;
		}
	}
	iframe {
		display: block;
		margin: 6rem 0;
		&:first-child {
			margin-top: 0;
		}
	}
	.text-column {
		display: flex;
		justify-content: space-between;
		margin: 3rem 0 4rem 0;
		.image {
			width: 35rem;
		}
		.read {
			width: calc(100% - 38rem);
		}
		&.rev {
			flex-direction: row-reverse;
		}
	}
	.alignleft {
		float: left;
		margin: 0 3rem 1.5rem 0;
	}
	.alignright {
		float: right;
		margin: 0 0 1.5rem 3rem;
	}
	.aligncenter {
		float: none;
		display: block;
		margin: 2rem auto;
	}
	.alignnone {
		float: none !important;
	}
	.size-thumbnail {
		width: 10rem !important;
	}
	.size-medium {
		width: 30rem !important;
	}
	.size-full {
		width: 100% !important;
	}
	p:has(.alignleft) {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 3rem 0 4rem 0;
		.alignleft {
			float: none;
			margin: 0 3rem 0 0;
		}
	}
	p:has(.alignright) {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
		margin: 3rem 0 4rem 0;
		.alignright {
			float: none;
			margin: 0 0 0 3rem;
		}
	}
}

.share-area {
	h3 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 6rem 0 2.5rem 0;
		font-family: 'Roboto', sans-serif;
		font-size: 2.1rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
		&:before, &:after {
			content: "";
			display: block;
			border-top: 1px solid #c8b8b3;
			width: 10rem;
		}
		&:before {
			margin-right: 3rem;
		}
		&:after {
			margin-left: 3rem;
		}
	}
	ul {
		display: flex;
		justify-content: center;
		gap: 1rem;
		li {
			width: 5rem;
			height: 5rem;
			a, span {
				display: block;
				border-radius: 5rem;
				width: 5rem;
				height: 5rem;
				overflow: hidden;
				cursor: pointer;
				img {
					transition: 0.2s ease;
				}
				&:hover {
					img {
						opacity: 0.6;
					}
				}
			}
		}
		.urlcopybtn {
			position: relative;
			.msg {
				display: none;
				position: absolute;
				bottom: -2.2rem;
				left: 50%;
				border-radius: 2rem;
				background-color: var(--color-main);
				padding: 0 0.8rem;
				font-size: 1rem;
				line-height: 1.8rem;
				color: var(--color-w);
				white-space: nowrap;
				transform: translate(-50%, 0);
			}
		}
	}
	.btn2 {
		margin-top: 6rem;
		text-align: center;
	}
}










/* SERVICE */

.service-bread {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	height: 4rem;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	ul {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		max-width: 120rem;
		height: 4rem;
		margin-left: auto;
		margin-right: auto;
		padding: 0 5rem;
		font-size: 1.2rem;
		line-height: 1.3;
		color: #757575;
	}
	li {
		&:after {
			content: "／";
			margin: 0 1.2rem;
			font-weight: 700;
			color: #e3e3e3;
		}
		&:last-child {
			&:after {
				display: none;
			}
		}
	}
	a {
		color: #757575;
	}
}

.service-mv {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	height: 51rem;
	padding-bottom: 8rem;
	z-index: 1;
	.image {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(50% - 2rem);
		height: 100%;
		overflow: hidden;
		img {
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			max-width: initial;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}
	h1 {
		width: 50%;
		font-size: 4.8rem;
		font-weight: 700;
		line-height: 1.4;
		color: var(--color-b);
		span {
			display: table;
			border: 2px solid var(--color-main);
			border-radius: 5rem;
			height: 5rem;
			margin-bottom: 1rem;
			padding: 0 3.5rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: calc(5rem - 5px);
			white-space: nowrap;
			color: var(--color-main);
		}
		strong {
			position: relative;
			font-weight: 700;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				top: 0.4rem;
				left: 50%;
				display: block;
				border-radius: 0.5rem;
				background-color: #ced420;
				width: 0.5rem;
				height: 0.5rem;
				margin-left: -0.25rem;
			}
		}
		em {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	p {
		margin-top: 2rem;
		width: 50%;
		font-size: 1.6rem;
		color: var(--color-b);
	}
}

.service-about {
	position: relative;
	background-color: var(--color-main);
	width: 100%;
	margin-bottom: 16rem;
	padding: 1px 0;
	z-index: 2;
	&.eco {
		background-color: #0071bc;
		margin-bottom: 30rem;
		.merit-title {
			strong {
				color: #ffd200;
			}
		}
	}
	.osusume {
		position: relative;
		background-color: var(--color-w);
		width: 100%;
		max-width: 110rem;
		margin: -7rem auto 8rem auto;
		padding: 5rem 14rem 6rem 14rem;
		box-shadow: 0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.06);
		h2 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 2.6rem;
			font-size: 2.8rem;
			font-weight: 700;
			line-height: 1.3;
			color: var(--color-b);
			&:after, &:before {
				content: "";
				display: block;
				width: 6rem;
				border-top: 2px solid #c8c8c8;
			}
			&:before {
				margin-right: 2.5rem;
			}
			&:after {
				margin-left: 2.5rem;
			}
			span {
				background: linear-gradient(to bottom,  rgba(226,255,106,0) 0%,rgba(226,255,106,0) 60%,rgba(226,255,106,1) 61%,rgba(226,255,106,1) 100%);
			}
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 1.5rem 2%;
			li {
				width: 49%;
				flex-shrink: 4;
				background: url(../img/service/service-check.png) no-repeat left 0.1rem / 2.5rem;
				min-height: 2.6rem;
				padding-left: 3.5rem;
				font-size: 1.8rem;
				line-height: 1.45;
			}
		}
		&:after {
			content: "";
			position: absolute;
			bottom: -2rem;
			left: 50%;
			width:0;
			height:0;
			border-style:solid;
			border-width: 2.1rem 1.3rem 0 1.3rem;
			border-color: #fff transparent transparent transparent;
			margin-left: -1.3rem;
		}
	}
	.merit-title {
		margin-bottom: 2.8rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		color: var(--color-w);
		strong {
			font-weight: 700;
			color: var(--color-yellow);
		}
	}
	.merit-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: -16rem;
		.merit {
			position: relative;
			border: 1px solid var(--color-main);
			background-color: var(--color-bg);
			width: calc(50% - 1rem);
			padding: 4rem;
			box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
			h3 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				strong {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					align-content: center;
					flex-wrap: wrap;
					gap: 0.7rem;
					background-color: var(--color-main);
					width: 5.6rem;
					height: 5.6rem;
					font-family: 'Roboto', sans-serif;
					font-size: 1.1rem;
					letter-spacing: 0;
					line-height: 1;
					text-align: center;
					color: var(--color-w);
					span {
						display: block;
						width: 100%;
						font-size: 1.6rem;
						color: var(--color-yellow);
					}
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						right: -0.9rem;
						width:0;
						height:0;
						border-style:solid;
						border-width: 0.4rem 0 0.4rem 1rem;
						border-color: transparent transparent transparent var(--color-main);
						margin-top: -0.4rem;
					}
				}
				div {
					width: calc(100% - 8rem);
					margin: -0.45rem 0;
					font-size: 2.3rem;
					font-weight: 500;
					line-height: 1.4;
					color: var(--color-b);
					span {
						position: relative;
						border-bottom: 2px solid var(--color-main);
					}
				}
			}
			.text {
				margin-top: 1.8rem;
				font-size: 1.6rem;
				line-height: 1.7;
			}
			.point {
				position: relative;
				display: flex;
				align-items: center;
				background-image: radial-gradient(circle, #e84709 1px, transparent 1px), radial-gradient(circle, #e84709 1px, transparent 1px), radial-gradient(circle, #e84709 1px, transparent 1px), radial-gradient(circle, #e84709 1px, transparent 1px);
				background-position: left top, right top, left bottom, left top;
				background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
				background-size: 6px 2px, 2px 6px, 6px 2px, 2px 6px;
				background-color: var(--color-w);
				width: 100%;
				min-height: 8.8rem;
				margin-top: 1.6rem;
				padding: 2rem 2.5rem 2rem 7.5rem;
				font-size: 1.6rem;
				font-weight: 500;
				line-height: 1.6;
				color: #333;
				&:before {
					content: "";
					position: absolute;
					top: 1.8rem;
					left: 2rem;
					display: block;
					background: var(--color-w) url(../img/service/service-merit.png) no-repeat left top / 4.4rem;
					width: 4.4rem;
					height: 4.4rem;
				}
			}
		}
	}
}

.service-head {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 8rem 0 3.2rem 0;
	padding-bottom: 3.4rem;
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--color-b);
	strong {
		font-weight: 700;
		color: var(--color-main);
	}
	em {
		background: linear-gradient(to bottom,  rgba(226,255,106,0) 0%,rgba(226,255,106,0) 65%,rgba(226,255,106,1) 66%,rgba(226,255,106,1) 100%);
		font-weight: 700;
	}
	&:first-child {
		margin-top: 0;
	}
}



.service-relief {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 8rem 0;
}
.relief-title {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 8rem 0 3.5rem 0;
	padding-bottom: 3.4rem;
	h2 {
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.08em;
		text-align: center;
		color: var(--color-b);
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	p {
		margin-top: 1.8rem;
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.55;
		text-align: center;
		color: var(--color-b);
		strong {
			font-weight: 500;
			color: var(--color-main);
		}
		em {
			background: linear-gradient(to bottom,  rgba(255,250,112,0) 0%,rgba(255,250,112,0) 45%,rgba(255,250,112,1) 46%,rgba(255,250,112,1) 100%);
			font-weight: 500;
		}
	}
	&:first-child {
		margin-top: 0;
	}
}
.relief-list {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	.relief {
		position: relative;
		background-color: var(--color-bg);
		width: 100%;
		padding: 0 2rem 3rem 2rem;
		font-size: 1.6rem;
		letter-spacing: 0;
		.num {
			position: relative;
			width: 4.4rem;
			margin: -2.2rem auto 2rem auto;
			padding-bottom: 0.6rem;
			font-family: 'Roboto', sans-serif;
			font-size: 2.8rem;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1;
			text-align: center;
			color: var(--color-main);
			span {
				display: block;
				border-radius: 4.4rem;
				background-color: var(--color-main);
				width: 4.4rem;
				height: 4.4rem;
				margin-bottom: 2rem;
				font-size: 1.2rem;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 4.4rem;
				text-align: center;
				color: var(--color-w);
			}
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				display: block;
				border-bottom: 2px solid var(--color-main);
				width: 3rem;
				margin-left: -1.5rem;
			}
		}
		h3 {
			margin-bottom: 1.4rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1.5;
			text-align: center;
			color: var(--color-b);
			& + p {
				padding: 0 1.4rem;
			}
		}
		p {
			text-align: justify;
		}
		a {
			text-decoration: underline;
			color: var(--color-main);
			&:hover {
				text-decoration: none;
				color: var(--color-b);
			}
		}
	}
}

.service-flow {
	position: relative;
	background-color: var(--color-bg);
	padding: 7.5rem 0 8rem 0;
}
.flow-area {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 5rem;
	.flow {
		position: relative;
		width: calc(100% - 20rem);
		background-color: var(--color-bg);
		margin: 1rem 0 0 20rem;
		padding: 3.5rem 5rem 3.5rem 8.5rem;
		z-index: 2;
		.step {
			position: absolute;
			top: 50%;
			left: -16.5rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 20.5rem;
			margin-top: -4rem;
			z-index: 2;
			p {
				position: relative;
				display: block;
				border-radius: 4.5rem;
				background-color: #585858;
				width: 4.5rem;
				height: 4.5rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.6rem;
				font-weight: 500;
				line-height: 4.5rem;
				letter-spacing: 0;
				text-align: center;
				color: var(--color-w);
				z-index: 2;
				span {
					position: absolute;
					top: -2rem;
					left: 0;
					display: block;
					width: 4.5rem;
					font-size: 1.4rem;
					line-height: 1;
					text-align: center;
					color: var(--color-b);
					z-index: 1;
				}
			}
			.icon {
				position: relative;
				border: 2px solid var(--color-main);
				border-radius: 8rem;
				background-color: var(--color-w);
				width: 8rem;
				height: 8rem;
				overflow: hidden;
				z-index: 2;
				img {
					position: absolute;
					top: 0;
					left: 0;
					object-fit: cover;
					max-width: initial;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
			}
			&:before {
				content: "";
				position: absolute;
				bottom: 0.5rem;
				left: 0;
				display: block;
				background-color: var(--color-w);
				width: 4.5rem;
				height: 9.5rem;
				z-index: -1;
			}
			&:after {
				content: "";
				position: absolute;
				top: calc(50% - 1px);
				left: 5%;
				display: block;
				width: 90%;
				border-top: 2px solid var(--color-main);
				z-index: 1;
			}
		}
		h3 {
			position: relative;
			margin-bottom: 1.5rem;
			font-size: 2.4rem;
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-b);
			&:before {
				content: "";
				position: absolute;
				top: 1.5rem;
				left: -2.4rem;
				border-radius: 0.6rem;
				background-color: var(--color-main);
				width: 0.6rem;
				height: 0.6rem;
			}
		}
		.btn-flow {
			display: flex;
			margin-top: 1.6rem;
			.btn {
				margin-right: 1rem;
				&.com {
					a {
						background-color: var(--color-main);
						width: 25rem;
						height: 6rem;
						padding-right: 3rem;
						font-size: 1.8rem;
						font-weight: 500;
						color: var(--color-w);
						box-shadow: 0 0.5rem 0 #ab3004;
						&:before {
							content: "";
							display: block;
							background: url(../img/btn-icon_01.png) no-repeat center center / 2.4rem;
							width: 2.4rem;
							height: 2.4rem;
							margin-right: 1.5rem;
							transition: 0.2s ease;
						}
						&:after {
							background: var(--color-w) url(../img/ar_02.png) no-repeat center center / cover;
						}
						&:hover {
							transform: translate(0, 0.5rem);
							border: 2px solid #ab3004;
							background-color: #ab3004;
							box-shadow: 0 0 0 #ab3004;
						}
					}
				}
				&.buz {
					a {
						border: 2px solid var(--color-btn);
						background-color: var(--color-btn);
						width: 25rem;
						height: 6rem;
						padding-right: 3rem;
						font-size: 1.8rem;
						font-weight: 500;
						color: var(--color-b);
						box-shadow: 0 0.5rem 0 #99ab1e;
						&:before {
							content: "";
							display: block;
							background: url(../img/btn-icon_02.png) no-repeat center center / 2.4rem;
							width: 2.4rem;
							height: 2.4rem;
							margin-right: 1.5rem;
							transition: 0.2s ease;
						}
						&:after {
							background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
						}
						&:hover {
							transform: translate(0, 0.5rem);
							border: 2px solid #99ab1e;
							background-color: #99ab1e;
							box-shadow: 0 0 0 #99ab1e;
						}
					}
				}
				&.type2 {
					a {
						width: 32rem;
						height: 6rem;
						font-size: 1.8rem;
						font-weight: 500;
					}
				}
			}
		}
		.tel {
			display: flex;
			align-items: center;
			margin: 2rem 0 2.5rem 0;
			img {
				width: 35.6rem;
				height: auto;
				margin-right: 1.5rem;
			}
			span {
				font-size: 1.3rem;
				font-weight: 500;
				line-height: 1.45;
				color: #754b3b;
			}
		}
		.tel2 {
			display: flex;
			align-items: center;
			margin: 2rem 0 2.5rem 0;
			em {
				display: block;
				border-radius: 0.4rem;
				background-color: #f5f5f5;
				width: 8rem;
				height: 3rem;
				margin-right: 0.8rem;
				font-size: 1.4rem;
				font-weight: 700;
				text-align: center;
				line-height: 2.8rem;
				color: var(--color-main);
			}
			img {
				width: 29rem;
				height: auto;
				margin-right: 1rem;
			}
			span {
				font-size: 1.2rem;
				font-weight: 500;
				line-height: 1.3;
				color: #754b3b;
			}
		}
		.note {
			margin-top: 1rem;
			font-size: 1.3rem;
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
		&:first-child {
			margin-top: 0;
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: -20rem;
				display: block;
				background-color: var(--color-w);
				width: 20rem;
				height: 50%;
				z-index: 1;
			}
		}
		&:last-child {
			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				left: -20rem;
				display: block;
				background-color: var(--color-w);
				width: 20rem;
				height: 50%;
				z-index: 1;
			}
		}
	}
	&:before {
		content: "";
		position: absolute;
		top: 5rem;
		left: 10.6rem;
		display: block;
		background-image: radial-gradient(circle, #585858 1px, transparent 1px);
		background-position: left top;
		background-repeat: repeat-y;
		background-size: 2px 8px;
		width: 2px;
		height: calc(100% - 10rem);
		z-index: 1;
	}
}

.service-voice {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 11rem 0;
	.service-customer-voice {
		position: relative;
		display: none;
		width: 100%;
		color: var(--color-txt2);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
			display: flex;
		}
		.slick-slide {
			height: auto !important;
		}
		.voice {
			background-color: var(--color-bg);
			width: 49rem;
			margin: 0 1rem;
			padding: 3rem 3rem 3.5rem 3rem;
			font-size: 1.5rem;
			.voice-top {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				border-bottom: 1px solid #ebdcd8;
				width: 100%;
				margin-bottom: 1.5rem;
				padding-bottom: 1.5rem;
				.user {
					width: 8.6rem;
					.image {
						border-radius: 8.6rem;
						background-color: var(--color-w);
						width: 8.6rem;
						height: 8.6rem;
						overflow: hidden;
					}
					p {
						margin-top: 0.8rem;
						font-size: 1.1rem;
						line-height: 1.2;
						text-align: center;
						color: #9a9390;
					}
				}
				.title {
					width: calc(100% - 11.5rem);
					h3 {
						font-size: 1.9rem;
						font-weight: 500;
						line-height: 1.45;
						color: var(--color-b);
					}
					ul {
						display: flex;
						gap: 0.3rem;
						li {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							border: 1px solid var(--color-main);
							border-radius: 0.3rem;
							height: 2.4rem;
							margin-top: 1rem;
							padding: 0 1rem 0.1rem 1rem;
							font-size: 1.2rem;
							line-height: 1;
							color: var(--color-main);
						}
					}
					.name {
						margin-top: 1rem;
						font-size: 1.3rem;
						line-height: 1.2;
						color: #9a9390;
					}
				}
			}
			p {
				text-align: justify;
				strong {
					font-weight: 700;
					color: var(--color-main);
				}
			}
		}
		.slick-arrow {
			position: absolute;
			top: 50%;
			border: none;
			border-radius: 5rem;
			background: var(--color-main) url(../img/ar-big_01.png) no-repeat center center / 4.8rem;
			width: 4.8rem;
			height: 4.8rem;
			margin-top: -2.4rem;
			padding-top: 4.8rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.1s linear;
			&.slick-prev {
				left: calc(50% - 57.5rem);
				transform: rotate(-180deg);
				&:hover {
					left: calc(50% - 57.9rem);
				}
			}
			&.slick-next {
				right: calc(50% - 57.5rem);
				&:hover {
					right: calc(50% - 57.9rem);
				}
			}
			&:hover {
				width: 5.6rem;
				height: 5.6rem;
				margin-top: -2.8rem;
				opacity: 0.8;
			}
		}
		.slick-dots {
			position: absolute;
			bottom: -3rem;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			gap: 1rem;
			li {
				width: 2.8rem;
				height: 2px;
				font-size: 0;
				line-height: 0;
				button {
					border-radius: 3rem;
					background-color: #efd5cd;
					width: 2.8rem;
					height: 3px;
					padding-top: 3px;
					font-size: 0;
					line-height: 0;
					overflow: hidden;
				}
				&.slick-active {
					button {
						background-color: #e84609;
					}
				}
			}
		}
	}
}

.service-faq {
	position: relative;
	background-color: var(--color-bg);
	margin-bottom: -27rem;
	padding: 7.5rem 0 29rem 0;
	z-index: 1;
	&:has( + .diagnosis-form) {
		margin-bottom: 0;
		padding: 7.5rem 0 8rem 0;
	}
}
.faq-area {
	width: 100%;
	dt {
		position: relative;
		display: flex;
		background-color: var(--color-w);
		width: 100%;
		min-height: 8rem;
		margin-top: 1.5rem;
		cursor: pointer;
		&:before {
			content: "Q.";
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #5b5b5b;
			width: 8rem;
			padding-left: 0.5rem;
			font-family: 'Roboto', sans-serif;
			font-size: 2.4rem;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1;
			color: var(--color-w);
			z-index: 1;
		}
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 3rem;
			display: block;
			background: url(../img/faq-open.png) no-repeat center center / 2rem;
			width: 2rem;
			height: 2rem;
			margin-top: -1rem;
		}
		span {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #5b5b5b;
			width: calc(100% - 8rem);
			padding: 2.5rem 6rem 2.5rem 2.5rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-b);
		}
		&.active {
			&:after {
				background-image: url(../img/faq-close.png);
			}
			span {
				border-bottom: 1px dotted #5b5b5b;
				color: var(--color-main);
			}
		}
	}
	dd {
		display: none;
		width: 100%;
		div {
			position: relative;
			display: flex;
			background-color: var(--color-w);
			width: 100%;
			min-height: 8rem;
			&:before {
				content: "A.";
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--color-main);
				width: 8rem;
				padding-left: 0.5rem;
				font-family: 'Roboto', sans-serif;
				font-size: 2.4rem;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 1;
				color: var(--color-w);
				z-index: 1;
			}
			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 3.4rem;
				width:0;
				height:0;
				border-style:solid;
				border-width: 1rem 0.6rem 0 0.6rem;
				border-color: #5b5b5b transparent transparent transparent;
				z-index: 2;
			}
			span {
				align-self: center;
				display: block;
				border-bottom: 1px solid var(--color-main);
				width: calc(100% - 8rem);
				padding: 2.5rem;
				font-size: 1.6rem;
				font-weight: 400;
				line-height: 1.6;
			}
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
		}
	}
}

/* 太陽光発電＆蓄電池 */

.solar-battery-double {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 11rem 0;
	h2 {
		position: relative;
		display: table;
		background-color: var(--color-w);
		margin: 0 auto;
		padding: 0 5rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		letter-spacing: 0.06em;
		color: var(--color-b);
		z-index: 2;
		span {
			display: block;
			margin-bottom: 1rem;
			font-size: 2.6rem;
			font-weight: 500;
			letter-spacing: 0.04em;
			text-align: center;
		}
		em {
			background: linear-gradient(to bottom,  rgba(226,255,106,0) 0%,rgba(226,255,106,0) 65%,rgba(226,255,106,1) 66%,rgba(226,255,106,1) 100%);
			font-weight: 700;
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.double-use {
		border: 2px solid var(--color-main);
		background-color: var(--color-w);
		margin-top: -2rem;
		padding: 4rem 5rem 5rem 5rem;
		.sub {
			font-size: 1.8rem;
			text-align: center;
			color: #666;
		}
		.images {
			display: flex;
			justify-content: space-between;
			margin-top: 3rem;
			p {
				&:nth-of-type(1) {
					width: 42rem;
				}
				&:nth-of-type(2) {
					width: 44rem;
				}
			}
		}
		.note {
			background-color: #f5f5f5;
			margin-top: 4rem;
			padding: 2.8rem 3.5rem;
			font-size: 1.3rem;
			line-height: 1.7;
			li {
				position: relative;
				padding-left: 1em;
				&:before {
					content: "※";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}
}

.solar-battery-terms {
	position: relative;
	background-color: var(--color-bg);
	margin-top: -16rem;
	padding: 24rem 0 8rem 0;
	z-index: 1;
	.terms-area {
		background-color: var(--color-w);
		margin-top: 2rem;
		padding: 5rem;
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(../img/service/solar-battery-head-btm.png) no-repeat center bottom / 28rem;
			margin-bottom: 1.2rem;
			padding-bottom: 2.6rem;
			font-size: 3.2rem;
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.06em;
			color: var(--color-b);
			img {
				width: auto;
				height: 4.2rem;
				margin-right: 1.5rem;
			}
			& + p {
				font-size: 1.8rem;
				text-align: center;
			}
		}
		h4 {
			margin: 6rem 0 3.5rem 0;
			font-size: 2.6rem;
			font-weight: 500;
			line-height: 1.3;
			text-align: center;
			color: var(--color-b);
		}
	}
	.terms-check {
		display: flex;
		justify-content: space-between;
		margin-top: 2.2rem;
		li {
			position: relative;
			background-color: #f9f9f9;
			width: calc(calc(100% - 2rem) / 3);
			padding: 1.9rem 2.5rem 2.1rem 10.5rem;
			font-size: 1.6rem;
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				background: #f6e6e1 url(../img/service/solar-battery-check.png) no-repeat center center / 8rem;
				display: block;
				width: 8rem;
				height: 100%;
			}
			&:after {
				content: "";
				position: absolute;
				bottom: -1rem;
				right: 0;
				display: block;
				background: url(../img/service/solar-battery-check-shadow.png) no-repeat right top / 14rem;
				width: 14rem;
				height: 1rem;
			}
		}
	}
	.terms-list {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		margin-top: 7rem;
		.terms {
			position: relative;
			border: 1px solid #dcdcdc;
			background-color: var(--color-w);
			width: calc(50% - 1rem);
			.point {
				position: absolute;
				top: -3.5rem;
				left: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 7rem;
				background-color: var(--color-main);
				width: 39rem;
				height: 7rem;
				margin-left: -19.5rem;
				padding-bottom: 0.2rem;
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 1.3;
				text-align: center;
				color: var(--color-w);
				z-index: 2;
				&:before {
					content: "";
					position: absolute;
					top: -0.7rem;
					right: -1rem;
					background: url(../img/btn-point.png) no-repeat center center / 2rem;
					width: 2rem;
					height: 1.8rem;
				}
				&:after {
					content: "";
					position: absolute;
					bottom: -1.5rem;
					left: 50%;
					width:0;
					height:0;
					border-style:solid;
					border-width: 1.6rem 0.8rem 0 0.8rem;
					border-color: var(--color-main) transparent transparent transparent;
					margin-left: -0.8rem;
				}
			}
			.image {
				position: relative;
				z-index: 1;
			}
			.read {
				padding: 3rem 4rem;
				font-size: 1.6rem;
				line-height: 1.6;
			}
			h5 {
				position: relative;
				margin-bottom: 1.2rem;
				padding-left: 2rem;
				font-size: 2.3rem;
				font-weight: 500;
				line-height: 1.3;
				color: var(--color-b);
				&:before {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					display: block;
					border-left: 3px solid var(--color-main);
					height: calc(100% - 0.4rem);
					transform: translate(0, -50%);
				}
			}
		}
	}
}

/* オール電化（エコキュート） */

.all-electric-ecocute {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 0 0;
	.ecocute-head {
		position: relative;
		padding-bottom: 4rem;
		z-index: 2;
		dt {
			margin-bottom: 1.8rem;
			font-size: 2.6rem;
			font-weight: 500;
			line-height: 1.3;
			text-align: center;
			color: var(--color-b);
		}
		dd {
			font-size: 1.6rem;
			text-align: center;
		}
		.img1 {
			position: absolute;
			top: 2rem;
			left: 0;
			width: 21rem;
			height: auto;
		}
		.img2 {
			position: absolute;
			top: 1rem;
			right: 0;
			width: 17.4rem;
			height: auto;
		}
		.img3 {
			position: absolute;
			bottom: -9rem;
			left: 11rem;
			width: 10.4rem;
			height: auto;
		}
		.img4 {
			position: absolute;
			bottom: -9rem;
			right: 7rem;
			width: 16.2rem;
			height: auto;
		}
	}
	.ecocute-type {
		position: relative;
		background-color: var(--color-bg);
		padding: 6rem 0 8rem 0;
		z-index: 1;
		.inner-mid {
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
		}
		.ecocute-area {
			background-color: var(--color-w);
			width: 100%;
			padding: 4.5rem 5rem 5rem 5rem;
			h3 {
				display: flex;
				justify-content: center;
				align-items: center;
				background: url(../img/service/all-electric-head-btm.png) no-repeat center bottom / 26rem;
				margin-bottom: 1.2rem;
				padding-bottom: 2.8rem;
				font-size: 3.2rem;
				font-weight: 700;
				line-height: 1;
				letter-spacing: 0.06em;
				color: var(--color-b);
				img {
					width: auto;
					height: 3.5rem;
					margin-right: 1.5rem;
				}
				& + p {
					margin-bottom: 3rem;
					font-size: 1.8rem;
					text-align: center;
				}
			}
			&.harf {
				width: calc(50% - 1rem);
				h3 {
					font-size: 2.8rem;
					& + p {
						margin-bottom: 2rem;
						font-size: 1.6rem;
						text-align: center;
					}
				}
			}
			table {
				width: 100%;
				margin-top: 3rem;
				th {
					border: 1px solid #c1c1c1;
					background-color: #f8f8f8;
					width: 20%;
					padding: 1.1rem 1rem;
					font-weight: 500;
					text-align: center;
					color: var(--color-b);
					vertical-align: middle;
				}
				td {
					border: 1px solid #c1c1c1;
					background-color: var(--color-w);
					width: 20%;
					padding: 1.1rem 1rem;
					text-align: center;
					vertical-align: middle;
				}
			}
			.ecocute-data {
				display: flex;
				margin-top: 2rem;
				dl {
					border-top: 1px solid #c1c1c1;
					border-right: 1px solid #c1c1c1;
					border-bottom: 1px solid #c1c1c1;
					width: 100%;
					&:first-child {
						border-left: 1px solid #c1c1c1;
					}
					dt {
						border-bottom: 1px solid #c1c1c1;
						background-color: #f8f8f8;
						width: 100%;
						padding: 1.1rem 1rem;
						font-weight: 500;
						text-align: center;
						color: var(--color-b);
					}
					dd {
						padding: 1.6rem 2rem 2rem 2rem;
						font-size: 1.5rem;
						&.image {
							text-align: center;
							border-bottom: 1px solid #c1c1c1;
							padding: 2rem 1rem;
							img {
								width: auto;
								height: 10rem;
							}
						}
						&.sub {
							padding: 1.1rem 1rem;
							font-weight: 500;
							text-align: center;
							color: var(--color-b);
						}
					}
				}
			}
			.note {
				margin-top: 1.6rem;
				font-size: 1.3rem;
			}
		}
	}
}

.all-electric-cv {
	padding: 7rem 0 0 0;
	& > h2 {
		margin-bottom: 5rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		color: var(--color-b);
		span {
			display: block;
			margin-bottom: 0.2rem;
			font-size: 2.6rem;
			font-weight: 500;
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
}

.service-relief {
	&.all-electric {
		background-color: var(--color-bg);
		margin-top: -16rem;
		padding: 24rem 0 0 0;
		.relief-list {
			.relief {
				background-color: var(--color-w);
			}
		}
	}
}

/* 電力会社の切り替え */

.switching-eco {
	position: relative;
	background-color: #f8fcff;
	width: 100%;
	margin-bottom: -30rem;
	padding: 5rem;
	box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
	h3 {
		margin-bottom: 1rem;
		.top {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			font-size: 2.6rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			img {
				align-self: center;
				width: 30rem;
				height: auto;
				margin-right: 0.8rem;
			}
			.ha {
				padding-bottom: 0.4rem;
			}
			.use {
				align-self: center;
				position: relative;
				border-radius: 0.5rem;
				background-color: #ffd200;
				width: 30rem;
				height: 5.5rem;
				font-size: 2.3rem;
				font-weight: 700;
				line-height: 5.5rem;
				text-align: center;
				color: var(--color-b);
				&:after {
					content: "";
					position: absolute;
					bottom: -1.5rem;
					left: 5rem;
					display: block;
					background: url(../img/service/switching-eco-head_01.png) no-repeat top right / 3rem;
					width: 3rem;
					height: 1.5rem;
				}
			}
		}
		.btm {
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(../img/service/switching-eco-head_03.png) no-repeat center center / 100% 100%;
			width: 40.5rem;
			height: 8.5rem;
			margin: 2rem auto 0 auto;
			font-size: 6rem;
			font-weight: 700;
			line-height: 5.5rem;
			text-align: center;
			color: var(--color-main);
			&:before {
				content: "";
				display: block;
				background: url(../img/service/switching-eco-head_02.png) no-repeat center center / 5rem;
				width: 5rem;
				height: 5.6rem;
				margin-right: 1.2rem;
			}
		}
	}
	.read {
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.6;
		text-align: center;
		color: var(--color-b);
		strong {
			font-size: 2.3rem;
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.sub {
		margin-top: 0.3rem;
		font-size: 1.3rem;
		text-align: center;
	}
	h4 {
		position: relative;
		background-color: #0071bc;
		width: 100%;
		height: 7rem;
		margin: 2rem 0 5rem 0;
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 6.8rem;
		text-align: center;
		color: var(--color-w);
		&:after {
			content: "";
			position: absolute;
			bottom: -1rem;
			left: 50%;
			width:0;
			height:0;
			border-style:solid;
			border-width: 1.1rem 0.7rem 0 0.7rem;
			border-color: #0071bc transparent transparent transparent;
			margin-left: -0.7rem;
		}
	}
	.images {
		display: flex;
		justify-content: space-between;
		margin-top: 5rem;
		p {
			&:nth-of-type(1) {
				width: 42rem;
			}
			&:nth-of-type(2) {
				width: 44rem;
			}
		}
	}
	.note {
		border: 1px solid #e4ebf1;
		background-color: var(--color-w);
		margin-top: 3rem;
		padding: 2.8rem 3.5rem;
		font-size: 1.3rem;
		line-height: 1.7;
		li {
			position: relative;
			padding-left: 1em;
			&:before {
				content: "※";
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
}

.switching-support {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 8rem 0;
	overflow: hidden;
	.support-area {
		position: relative;
		width: 100%;
		min-height: 50rem;
		margin-bottom: 6rem;
		.image {
			position: absolute;
			top: 0;
			left: calc(50% + 8rem);
			width: calc(50vw - 8rem);
			max-height: 52rem;
			overflow: hidden;
			img {
				width: 100%;
				height: auto;
			}
		}
		.read {
			width: calc(50% + 2rem);
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
			h3 {
				position: relative;
				margin-bottom: 2.2rem;
				padding-left: 3.6rem;
				font-size: 3.2rem;
				font-weight: 500;
				line-height: 1.4;
				color: var(--color-b);
				strong {
					font-weight: 500;
					color: var(--color-main);
				}
				&:before {
					content: "";
					position: absolute;
					top: 52%;
					left: 0;
					display: block;
					border-left: 4px solid var(--color-main);
					height: calc(100% - 0.8rem);
					transform: translate(0, -50%);
				}
			}
			ul {
				width: 38rem;
				margin-top: 2.5rem;
				li {
					display: flex;
					align-items: center;
					background: #f5f5f5 url(../img/service/switching-support-check.png) no-repeat 2rem center / 3.2rem;
					margin-top: 0.5rem;
					height: 7rem;
					padding: 1.3rem 2.5rem 1.7rem 7rem;
					font-size: 1.6rem;
					font-size: 500;
					line-height: 1;
					color: var(--color-b);
					strong {
						position: relative;
						font-size: 2.6rem;
						font-weight: 700;
						color: var(--color-main);
						&.zero {
							position: relative;
							bottom: -0.3rem;
							margin: 0 0.5rem;
							font-family: 'Roboto', sans-serif;
							font-size: 4rem;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
	.whats {
		background: url(../img/service/switching-support-sim.png) no-repeat center bottom / 51.5rem;
		width: 100%;
		height: 6.5rem;
		margin-bottom: 1.5rem;
		font-size: 2.4rem;
		font-weight: 500;
		text-align: center;
		color: var(--color-b);
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.btn.sim {
		text-align: center;
		padding-bottom: 0.5rem;
		a {
			width: 35rem;
			height: 9.4rem;
			padding-right: 5.5rem;
			font-size: 2.2rem;
			&:before {
				content: "";
				display: block;
				background: url(../img/btn-icon_03.png) no-repeat center center / 3.6rem;
				width: 3.6rem;
				height: 4.5rem;
				margin-right: 1.8rem;
				transition: 0.2s ease;
			}
			&:after {
				border-radius: 3.2rem;
				width: 3.2rem;
				height: 3.2rem;
				margin-top: -1.6rem;
			}
			&:hover {
				&:before {
					background-image: url(../img/btn-icon_03_hover.png);
				}
				&:after {
					width: 3.6rem;
					height: 3.6rem;
					margin-top: -1.8rem;
				}
			}
		}
	}
}










/* Diagnosis */

.diagnosis-about {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	margin-bottom: 13rem;
	padding-bottom: 1px;
	.title {
		margin: 1rem 0;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		color: var(--color-b);
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.point {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 2rem;
		li {
			position: relative;
			border: 1px solid var(--color-main);
			border-radius: 5.4rem;
			background-color: #fffdee;
			height: 5.4rem;
			padding: 0 3.5rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: calc(5.4rem - 3px);
			text-align: center;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				bottom: -11px;
				left: 50%;
				width: 0;
				height: 0;
				border-style:solid;
				border-width: 11px 7px 0 7px;
				border-color: var(--color-main) transparent transparent transparent;
				margin-left: -7px;
				z-index: 1;
			}
			&:after {
				content: "";
				position: absolute;
				bottom: -9.5px;
				left: 50%;
				width: 0;
				height: 0;
				border-style:solid;
				border-width: 11px 7px 0 7px;
				border-color: #fffdee transparent transparent transparent;
				margin-left: -7px;
				z-index: 2;
			}
		}
	}
	.read {
		margin-top: 1.5rem;
		text-align: center;
		em {
			font-weight: 700;
			color: var(--color-b);
		}
		strong{
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.osusume {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid var(--color-main);
		background-color: var(--color-w);
		width: 100%;
		margin: 4rem 0 -13rem 0;
		padding: 5rem;
		box-shadow: 0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.06);
		h2 {
			padding: 0 5rem;
			font-size: 2.6rem;
			font-weight: 500;
			line-height: 1.45;
			text-align: center;
			color: var(--color-b);
			strong {
				font-weight: 700;
				color: var(--color-main);
			}
			span {
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 2.8rem;
					height: auto;
					margin-right: 0.7rem;
				}
			}
		}
		ul {
			background-image: radial-gradient(circle, #776f6d 0.5px, transparent 0.5px);
			background-position: left top;
			background-repeat: repeat-y;
			background-size: 1px 6px;
			padding-left: 6rem;
			li {
				flex-shrink: 4;
				background: url(../img/service/service-check.png) no-repeat left 0.1rem / 2.5rem;
				min-height: 2.6rem;
				margin: 1.8rem 0;
				padding-left: 3.5rem;
				font-size: 1.8rem;
				line-height: 1.45;
				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	&.simulator {
		margin-bottom: 11rem;
		padding-bottom: 8rem;
		.simulator-area {
			position: relative;
			border-top: 2px solid var(--color-main);
			background-color: var(--color-w);
			width: 80rem;
			margin: 4rem auto;
			padding: 5rem 8rem 6rem 8rem;
			h2 {
				margin-bottom: 4rem;
				font-size: 3.6rem;
				font-weight: 700;
				line-height: 1;
				text-align: center;
				color: var(--color-b);
			}
			h3 {
				position: relative;
				border-bottom: 1px solid #ddd;
				width: calc(100% + 4rem);
				margin: 5rem -2rem 1.5rem -2rem;
				padding: 0 2rem 1.5rem 2rem;
				font-size: 2.1rem;
				font-weight: 700;
				line-height: 1.3;
				color: var(--color-b);
				&:before {
					content: "・";
					position: absolute;
					top: 0;
					left: -0.5rem;
					font-weight: 700;
					color: var(--color-main);
				}
			}
			h4 {
				margin: 2.5rem 0 1.2rem 0;
				font-size: 1.8rem;
				font-weight: 700;
				line-height: 1.3;
				color: var(--color-b);
			}
			#kenshinhyo_area {
				margin: 3rem 0;
				text-align: center;
			}
			input[type="text"], input[type="url"], input[type="tel"], input[type="email"], input[type="number"], select {
				border: 1px solid #ccc;
				background-color: var(--color-w);
				width: 31rem;
				height: 4.8rem;
				padding: 0.5rem 1rem;
				vertical-align: middle;
				font-size: 1.6rem;
				color: var(--color-b);
				&:focus {
					background-color: var(--color-bg);
				}
			}
			select {
				background: var(--color-w) url(../img/form-select.png) no-repeat right center / 1.6rem;
				padding-right: 2rem;
				color: var(--color-b);
			}
			.button {
				margin-top: 4rem;
				text-align: center;
				input {
					position: relative;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					align-content: center;
					vertical-align: middle;
					border: 2px solid var(--color-main);
					border-radius: 0.6rem;
					background-color: var(--color-w);
					min-width: 32rem;
					min-height: 6rem;
					margin: 0;
					padding: 0.5rem 2rem 0.7rem 2rem;
					font-size: 1.8rem;
					font-weight: 700;
					line-height: 1.3;
					letter-spacing: 0.04em;
					text-decoration: none;
					text-align: center;
					color: var(--color-main);
					box-shadow: 0 0.3rem 0 var(--color-main);
					transition: 0.2s linear;
					&:hover {
						background-color: var(--color-main);
						color: var(--color-w);
						transform: translate(0, 0.3rem);
						box-shadow: 0 0 0 var(--color-main);
					}
				}
			}
			.list {
				font-size: 1.3rem;
				color: #666;
				li {
					position: relative;
					padding-left: 1em;
					&:before {
						content: "※";
						position: absolute;
						top: 0;
						left: 0;
						font-weight: 500;
					}
				}
			}
			table {
				width: calc(100% + 10rem);
				margin: 3rem -5rem;
				th {
					border: 1px solid #ddd;
					background-color: #eee;
					padding: 1rem;
					font-size: 1.5rem;
					font-weight: 700;
					letter-spacing: 0;
				}
				td {
					border: 1px solid #ddd;
					background-color: var(--color-w);
					padding: 1rem;
					font-size: 1.5rem;
					font-weight: 500;
					letter-spacing: 0;
				}
				.line {
					border-right: 2px solid #ddd;
				}
				.red {
					font-weight: 700;
					color: var(--color-main);
				}
			}
			.priceArea001 {
				.year_now {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #ddd;
					border-radius: 1rem;
					background-color: var(--color-w);
					margin-bottom: 2.5rem;
					padding: 1.8rem 2rem;
					line-height: 1.2;
					z-index: 1;
					h4 {
						border-right: 1px solid #ccc;
						margin: 0 2rem 0 0;
						padding-right: 2rem;
						font-size: 1.6rem;
						font-weight: 700;
						color: var(--color-b);
					}
					p {
						font-size: 1.8rem;
						font-weight: 700;
						color: var(--color-main);
					}
					&:after {
						content: "";
						position: absolute;
						bottom: calc(-2rem - 2px);
						left: 50%;
						width:0;
						height:0;
						border-style:solid;
						border-width: 2rem 2rem 0 2rem;
						border-color: #fb0 transparent transparent transparent;
						margin-left: -2rem;
						z-index: -1;
					}
				}
				.arrow {
					display: none;
				}
				.priceArea002 {
					.moneyArea001 {
						display: flex;
						gap: 1rem;
						margin-bottom: 1rem;
						line-height: 1.2;
						.reduction {
							border: 2px solid var(--color-main);
							p {
								color: var(--color-main);
							}
						}
						.year_future {
							border: 2px solid #0071bb;
							p {
								color: #0071bb;
							}
						}
						.reduction, .year_future {
							border-radius: 1rem;
							background-color: var(--color-w);
							width: 100%;
							padding: 1.6rem 2rem 1.8rem 2rem;
							h4 {
								border-bottom: 1px solid #ccc;
								margin: 0 0 1rem 0;
								padding-bottom: 1rem;
								font-size: 1.7rem;
								font-weight: 700;
								text-align: center;
								color: var(--color-b);
							}
							p {
								font-size: 1.6rem;
								font-weight: 700;
								text-align: center;
							}
						}
					}
					.moneyArea002 {
						display: flex;
						gap: 1rem;
						margin-bottom: 2rem;
						line-height: 1.2;
						.split001, .split002, .split003 {
							border-radius: 1rem;
							background-color: var(--color-bg);
							width: 100%;
							padding: 1.6rem 2rem 1.8rem 2rem;
							h4 {
								border-bottom: 1px solid #ccc;
								margin: 0 0 1rem 0;
								padding-bottom: 1rem;
								font-size: 1.5rem;
								font-weight: 700;
								text-align: center;
								color: var(--color-b);
							}
							p {
								font-size: 1.6rem;
								font-weight: 700;
								text-align: center;
								color: var(--color-main);
							}
						}
						.split001, .split002 {
							 flex-shrink: 1.15;
						}
						.split003 {
							 flex-shrink: 1;
						}
					}
				}
			}
		}
		.simulator-note {
			width: 80rem;
			margin: 0 auto;
			font-size: 1.3rem;
			color: #666;
			li {
				position: relative;
				padding-left: 1em;
				&:before {
					content: "※";
					position: absolute;
					top: 0;
					left: 0;
					font-weight: 500;
				}
			}
		}
	}
}

.diagnosis-comparison {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 7.5rem 0 8rem 0;
	table {
		width: 100%;
		th {
			vertical-align: middle;
			border: 1px solid #c1c1c1;
			background-color: #e3e3e3;
			padding: 1.2rem 2rem;
			font-size: 1.6rem;
			font-weight: 500;
			text-align: center;
			color: var(--color-b);
			&.store {
				background-color: var(--color-main);
				width: 36%;
				color: var(--color-w);
			}
			&.home {
				background-color: var(--color-btn);
				width: 36%;
				color: var(--color-b);
			}
			img {
				position: relative;
				width: 1.8rem;
				height: auto;
				margin-top: -0.4rem;
				margin-right: 0.6rem;
				vertical-align: middle;
			}
		}
		td {
			vertical-align: middle;
			border: 1px solid #c1c1c1;
			background-color: #f8f8f8;
			padding: 1.2rem 2rem;
			font-size: 1.6rem;
			&.sub {
				font-weight: 700;
			}
			&.store {
				background-color: #fff3ef;
			}
			&.home {
				background-color: #fcffe6;
			}
			li {
				position: relative;
				padding-left: 1em;
				&:before {
					content: "・";
					position: absolute;
					top: 0;
					left: 0;
					font-weight: 500;
				}
			}
		}
	}
	.note {
		margin-top: 2rem;
		font-size: 1.3rem;
		strong {
			font-weight: 400;
			color: var(--color-main);
		}
		li {
			position: relative;
			padding-left: 1em;
			&:before {
				content: "※";
				position: absolute;
				top: 0;
				left: 0;
				font-weight: 500;
			}
		}
	}
}

.diagnosis-need {
	background-color: var(--color-bg);
	width: 100%;
	padding: 7.5rem 5rem 8rem 5rem;
	margin: 0 auto;
	.need-wish {
		display: flex;
		justify-content: space-between;
		.wish {
			border: 1px solid #ebdfdc;
			width: calc(50% - 1rem);
			background-color: var(--color-w);
			padding: 3rem;
			h3 {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				background: url(../img/diagnosis/diagnosis-need-head-btm.png) no-repeat center bottom / 42rem;
				margin-bottom: 1rem;
				padding-bottom: 2.4rem;
				font-size: 2.1rem;
				font-weight: 700;
				line-height: 1.3;
				text-align: center;
				color: var(--color-b);
			}
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
			&:nth-of-type(1) {
				h3 {
					gap: 1.5rem;
					img {
						width: auto;
						height: 3.2rem;
					}
				}
			}
			&:nth-of-type(2) {
				h3 {
					gap: 1rem;
					img {
						width: auto;
						height: 5rem;
					}
				}
			}
			p {
				padding: 0 1rem;
			}
		}
	}
	.note {
		margin-top: 2.5rem;
		font-size: 1.6rem;
		text-align: center;
	}
}

.diagnosis-complete {
	position: relative;
	padding-top: 4.5rem;
	z-index: 2;
	h2 {
		margin-bottom: 3.5rem;
		font-size: 2.6rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		color: var(--color-b);
		strong {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 3.8rem;
			font-weight: 700;
			img {
				width: 5.8rem;
				margin-top: -1.5rem;
				margin-right: 0.7rem;
			}
		}
	}
	ol {
		position: relative;
		counter-reset: dc;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: -6.5rem;
		li {
			position: relative;
			border: 3px solid var(--color-main);
			background-color: var(--color-main);
			width: calc(50% - 0.5rem);
			padding: 2.9rem 3rem 2.9rem 10.5rem;
			font-size: 2.2rem;
			font-weight: 500;
			color: var(--color-w);
			box-shadow: 0 0 0 1px inset var(--color-w);
			&:before {
				counter-increment: dc;
				content: counter(dc, decimal-leading-zero);
				position: absolute;
				top: 2.4rem;
				left: 3.5rem;
				display: block;
				border-radius: 5rem;
				background-color: var(--color-w);
				width: 5rem;
				height: 5rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 5rem;
				letter-spacing: 0;
				text-align: center;
				color: var(--color-main);
			}
		}
	}
	& + .service-flow {
		padding-top: 14rem;
	}
}

.diagnosis-form {
	position: relative;
	background-color: var(--color-main);
	padding: 7.5rem 0 8rem 0;
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../img/head-icon_01_w.png) no-repeat center bottom / 3.6rem;
		margin-bottom: 3rem;
		padding-bottom: 3.5rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1;
		img {
			width: 4.6rem;
			height: auto;
			margin-right: 1.6rem;
		}
	}
	hr {
		margin: 3rem 0;
		border-top: 1px solid var(--color-w);
	}
	.form-input {
		width: 60rem;
		margin: 0 auto;
		color: var(--color-w);
		dt {
			color: var(--color-w);
			.required {
				background-color: var(--color-yellow);
				color: var(--color-b);
			}
			.note {
				color: var(--color-w);
			}
		}
		dd {
			.error {
				color: var(--color-yellow);
				&:before {
					background: url(../img/form-error_02.png) no-repeat center center / 2rem;
				}
			}
		}
		input[type="text"], input[type="url"], input[type="tel"], input[type="email"], select {
			border: none;
		}
		textarea {
			border: none;
		}
		label {
			input[type="radio"] {
				& + span {
					border: none;
					color: var(--color-txt);
				}
			}
			input[type="checkbox"] {
				& + span {
					border: none;
					color: var(--color-txt);
				}
				&:checked {
					& + span {
						&:before {
							background: url(../img/form-check_02.png) no-repeat center center / cover;
						}
					}
				}
			}
		}
		.privacy-check {
			margin-top: 4rem;
			label {
				display: inline-block;
				border: 1px solid var(--color-w);
				padding: 2.4rem 3rem;
				line-height: 1;
				input[type="checkbox"] {
					display: none;
					& + span {
						background-color: transparent;
						padding: 0 0 0.2rem 3.8rem;
						font-size: 1.6rem;
						font-weight: 500;
						color: var(--color-w);
						&:before {
							border: none;
						}
					}
					&:checked {
						& + span {
							&:before {
								background: url(../img/form-check_02.png) no-repeat center center / cover;
							}
						}
					}
				}
			}
			& + .error {
				width: auto;
				margin-left: auto;
				margin-right: auto;
			}
		}
		.btn {
			margin-top: 4rem;
			button {
				border: 2px solid var(--color-btn);
				background-color: var(--color-btn);
				min-width: 31rem;
				color: var(--color-b);
				&:after {
					background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
				}
				&:hover {
					border: 2px solid var(--color-w);
					transform: translate(0, 0.5rem);
					background-color: var(--color-w);
					color: var(--color-main);
					box-shadow: 0 0 0 #ab3004;
					&:after {
						background-image: url(../img/ar_01.png);
					}
				}
			}
		}
	}
}

.diagnosis-area {
	position: relative;
	background-color: var(--color-bg);
	padding: 0 0 8rem 0;
	dl {
		background: url(../img/diagnosis/diagnosis-map.png) no-repeat right top / 37rem;
		padding-top: 1rem;
		dt {
			border-left: 2px solid var(--color-main);
			margin: 3rem 0 1.5rem 0;
			padding-left: 1.5rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			&:first-child {
				margin-top: 0;
			}
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 2rem;
			font-size: 1.5rem;
			line-height: 1;
		}
	}
}










/* NEWS */

.news-list {
	display: flex;
	flex-wrap: wrap;
	dt {
		border-bottom: 1px solid #d2d2d2;
		width: 13rem;
		padding: 2.2rem 0;
		font-family: 'Roboto', sans-serif;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.3;
		text-align: center;
		color: #a4a4a4;
	}
	dd {
		border-bottom: 1px solid #d2d2d2;
		width: calc(100% - 13rem);
		padding: 0;
		font-size: 1.6rem;
		line-height: 1.3;
		a {
			position: relative;
			display: block;
			width: 100%;
			padding: 2.1rem 7rem 2.1rem 0;
			color: var(--color-b);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				right: 2rem;
				display: block;
				border-radius: 2.2rem;
				background: var(--color-main) url(../img/ar_01.png) no-repeat center center / 2.2rem;
				width: 2.2rem;
				height: 2.2rem;
				margin-top: -1.1rem;
				transition: 0.2s ease;
			}
			&:hover {
				&:after {
					right: 1.7rem;
					width: 2.8rem;
					height: 2.8rem;
					margin-top: -1.4rem;
				}
			}
		}
	}
}










/* FORM */

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 7rem;
	margin-top: -12rem;
	padding: 0 5rem;
	.logo {
		width: 16.8rem;
	}
}

#warp.form {
	position: relative;
	background-color: var(--color-bg);
	padding: 5rem 0;
	.form-area {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		.read {
			position: sticky;
			top: 5rem;
			width: calc(100% - 50rem);
			&.non {
				position: relative;
				top: 0;
			}
			h1 {
				width: 100%;
				margin-bottom: 4rem;
				font-size: 3.6rem;
				font-weight: 700;
				line-height: 1.3;
				letter-spacing: 0.06em;
				color: var(--color-b);
				span {
					display: block;
					margin-bottom: 1rem;
					font-family: 'Roboto', sans-serif;
					font-size: 1.6rem;
					font-weight: 500;
				}
			}
			dl {
				margin: 2.5rem 0;
				dt {
					margin-bottom: 1.2rem;
					font-size: 1.8rem;
					font-weight: 700;
					line-height: 1.6;
					color: var(--color-main);
				}
				dd {
					position: relative;
					margin-top: 0.6rem;
					padding-left: 4rem;
					font-weight: 500;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0.1rem;
						left: 0.5rem;
						display: block;
						border-radius: 2.5rem;
						background: var(--color-main) url(../img/check.png) no-repeat center center / cover;
						width: 2.5rem;
						height: 2.5rem;
					}
				}
			}
			.image {
				border: 1px solid #d4d4d4;
				margin-top: 2.5rem;
				font-size: 0;
			}
		}
		.form-input {
			position: relative;
			background-color: var(--color-w);
			width: 44rem;
			padding: 3rem 3rem 5rem 3rem;
			h2 {
				border-bottom: 1px solid #929292;
				margin-bottom: 3rem;
				padding-bottom: 1.8rem;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 1.3;
				text-align: center;
				color: var(--color-b);
			}
		}
	}
}

.form-input {
	dt {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin: 2rem 0 0.5rem 0;
		font-size: 1.5rem;
		font-weight: 500;
		color: var(--color-b);
		.required {
			display: block;
			border-radius: 0.3rem;
			background-color: #ff3673;
			height: 2rem;
			margin-left: 0.8rem;
			padding: 0 0.5rem;
			font-size: 1.2rem;
			font-weight: 400;
			line-height: 2rem;
			color: var(--color-w);
		}
		.note {
			flex-grow: 10;
			font-size: 1.3rem;
			text-align: right;
			color: #999;
		}
	}
	dd {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin: 0.5rem 0 1rem 0;
		font-size: 1.4rem;
		.error {
			position: relative;
			width: 100%;
			margin-top: 0.7rem;
			padding-left: 2.5rem;
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1;
			color: #d81414;
			&:before {
				content: "";
				position: absolute;
				top: -0.2rem;
				left: 0;
				border-radius: 2rem;
				display: block;
				background: url(../img/form-error.png) no-repeat center center / 2rem;
				width: 2rem;
				height: 2rem;
			}
		}
		.note {
			margin-top: 1.2rem;
			font-size: 1.4rem;
		}
		.title {
			font-size: 1.5rem;
			color: var(--color-b);
			&+ .note {
				margin-top: 0;
			}
		}
		p {
			strong {
				color: var(--color-main);
			}
		}
	}
	input[type="text"], input[type="url"], input[type="tel"], input[type="email"], select {
		border: 1px solid #ccc;
		background-color: var(--color-w);
		width: 100%;
		height: 4.4rem;
		padding: 0.5rem 1rem;
		vertical-align: middle;
		font-size: 1.5rem;
		color: var(--color-b);
		&:focus {
			background-color: var(--color-bg);
		}
		&.size1 {
			width: 7.5rem;
		}
		&.size2 {
			width: 10rem;
		}
		&.size3 {
			width: 12.5rem;
		}
	}
	select {
		background: var(--color-w) url(../img/form-select.png) no-repeat right center / 1.6rem;
		padding-right: 2rem;
		color: var(--color-b);
	}
	textarea {
		border: 1px solid #ccc;
		background-color: var(--color-w);
		width: 100%;
		height: 15rem;
		padding: 0.5rem 1rem;
		vertical-align: middle;
		font-size: 1.5rem;
		color: var(--color-b);
	}
	.search {
		border: none;
		background-color: #6b5e5e;
		width: 9rem;
		height: 4.4rem;
		margin-left: 1rem;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 4.4rem;
		text-align: center;
		color: var(--color-w);
		transition: 0.2s ease;
		&:hover {
			background-color: var(--color-b);
		}
	}
	label {
		input[type="radio"] {
			display: none;
			& + span {
				position: relative;
				display: inline-flex;
				align-items: center;
				border: 1px solid #ccc;
				background-color: var(--color-w);
				width: 100%;
				height: 4.4rem;
				padding: 0.5rem 1rem 0.6rem 3.6rem;
				vertical-align: middle;
				font-size: 1.5rem;
				line-height: 1.3;
				&:before {
					content: "";
					position: absolute;
					top: 1.3rem;
					left: 1.2rem;
					display: block;
					border: 1px solid #ccc;
					border-radius: 1.6rem;
					background-color: var(--color-w);
					width: 1.6rem;
					height: 1.6rem;
					box-shadow: inset 0 0 0 0.3rem #fff;
				}
			}
			&:checked {
				& + span {
					color: var(--color-b);
					&:before {
						background-color: var(--color-main);
					}
				}
			}
		}
		input[type="checkbox"] {
			display: none;
			& + span {
				position: relative;
				display: inline-flex;
				align-items: center;
				border: 1px solid #ccc;
				background-color: var(--color-w);
				width: 100%;
				height: 4.4rem;
				padding: 0.5rem 1rem 0.6rem 3.6rem;
				vertical-align: middle;
				font-size: 1.5rem;
				line-height: 1.3;
				&:before {
					content: "";
					position: absolute;
					top: 1.3rem;
					left: 1.2rem;
					display: block;
					border: 1px solid #ccc;
					background: var(--color-w);
					width: 1.6rem;
					height: 1.6rem;
				}
			}
			&:checked {
				& + span {
					color: var(--color-b);
					&:before {
						background: url(../img/form-check.png) no-repeat center center / cover;
					}
				}
			}
		}
		cursor: pointer;
	}
	.sparse {
		display: flex;
		flex-wrap: ;
		gap: 0.5rem;
	}
	.full {
		label {
			display: block;
			width: 100%;
			margin-top: 0.4rem;
		}
	}
	.privacy-txt {
		background-color: #f3f3f3;
		width: 100%;
		height: 13rem;
		padding: 2.4rem 3rem;
		font-size: 1.2rem;
		line-height: 1.7;
		color: #666;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		h3 {
			margin-top: 2rem;
			font-size: 1.4rem;
			font-weight: 700;
			&:first-child {
				margin-top: 0;
			}
		}
		h4 {
			margin-top: 1rem;
			font-size: 1.2rem;
			font-weight: 700;
			&:first-child {
				margin-top: 0;
			}
		}
		p {
			margin-top: 1rem;
			&:first-child {
				margin-top: 0;
			}
		}
		ul {
			margin-top: 1rem;
			li {
				position: relative;
				padding-left: 1em;
				&:before {
					content: "\30FB";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			&:first-child {
				margin-top: 0;
			}
		}
		ol {
			counter-reset: number2;
			margin-top: 1rem;
			li {
				position: relative;
				margin: 0.5rem 0;
				padding-left: 1.8em;
				&:before {
					counter-increment: number2;
					content: ''counter(number2)'.';
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			&:first-child {
				margin-top: 0;
			}
		}
		.note {
			font-size: 1.1rem;
		}
	}
	.privacy-check {
		width: 100%;
		margin-top: 2rem;
		text-align: center;
		label {
			display: inline-block;
			input[type="checkbox"] {
				display: none;
				& + span {
					border: none;
					height: auto;
					padding: 0 0 0 3.4rem;
					font-size: 1.5rem;
					line-height: 1;
					color: var(--color-b);
					&:before {
						top: 50%;
						left: 0;
						width: 2.6rem;
						height: 2.6rem;
						margin-top: -1.3rem;
					}
				}
				&:checked {
					& + span {
						&:before {
							background: url(../img/form-check.png) no-repeat center center / cover;
						}
					}
				}
			}
		}
	}
	.btn {
		width: 100%;
		margin-top: 2rem;
		text-align: center;
		button {
			min-width: 25rem;
			min-height: 5.8rem;
			font-size: 1.8rem;
		}
	}
	.fileup-all {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin: 1.2rem 0;
		.fileup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #6b5e5e;
			width: 18rem;
			height: 4.4rem;
			font-size: 1.5rem;
			font-weight: 500;
			color: #fff;
			cursor: pointer;
			transition: 0.2s ease;
			&:hover {
				background-color: var(--color-b);
			}
		}
		.input-text {
			max-width: 16.5rem;
			margin: 0 0.5rem 0 1.5rem;
			font-size: 1.4rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.mwform-file-delete {
			cursor: pointer;
		}
	}
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 10rem;
	padding: 0 5rem;
	.logo {
		width: 16.8rem;
	}
	.copy {
		font-family: 'Roboto', sans-serif;
		font-size: 1.2rem;
		line-height: 1;
		color: #8a8a8a;
	}
}

.form-complete {
	h1, h2 {
		margin-bottom: 2.6rem;
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
	}
	p {
		margin-top: 2rem;
	}
	h3 {
		margin: 6rem 0 2.5rem 0;
		font-size: 2.1rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		color: var(--color-b);
	}
	fw-embed-feed {
		margin: 2.5rem auto 6rem auto;
	}
	.btn2 {
		margin-top: 6rem;
	}
}

.form-shooting {
	.shooting-head1 {
		position: relative;
		margin: 2.6rem 0 1.2rem 0;
		padding-left: 1em;
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1.3;
		color: var(--color-b);
			&:before {
				content: "";
				position: absolute;
				top: 0.8rem;
				left: 0;
				border-radius: 0.6rem;
				background-color: var(--color-main);
				width: 0.6rem;
				height: 0.6rem;
			}
	}
	.shooting-head2 {
		position: relative;
		margin: 4rem 0 2.6rem 0;
		font-size: 2.2rem;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--color-b);
		span {
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			img {
				width: 2.8rem;
				margin-right: 1rem;
			}
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
		&:before,&:after {
			content: "";
			position: absolute;
			bottom: 1.4rem;
			width: 6rem;
			border-top: 1px solid #ccc0bd;
		}
		&:before {
			left: 0;
		}
		&:after {
			right: 0;
		}
	}
	.shooting-box {
		display: block;
		background-color: var(--color-w);
		padding: 3rem;
		font-size: 1.4rem;
		strong {
			font-size: 1.5rem;
			color: var(--color-b);
		}
		em {
			color: var(--color-b);
		}
		.tel {
			margin: 0.8rem 0;
			img {
				width: 33rem;
			}
		}
		.photo {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			border-bottom: 1px dotted #999;
			width: 100%;
			margin-bottom: 2.4rem;
			padding-bottom: 2rem;
			.text {
				width: calc(100% - 20rem);
				font-size: 1.2rem;
				letter-spacing: 0;
				h4, h5 {
					position: relative;
					margin-bottom: 1rem;
					padding-top: 0.2rem;
					padding-left: 3.4rem;
					font-size: 1.4rem;
					font-weight: 500;
					line-height: 1.4;
					color: var(--color-b);
					span {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						border-radius: 2.4rem;
						background-color: #777;
						width: 2.4rem;
						height: 2.4rem;
						font-size: 1.2rem;
						font-weight: 700;
						line-height: 2.3rem;
						text-align: center;
						letter-spacing: 1;
						color: #fff;
					}
				}
			}
			img {
				width: 18rem;
			}
			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
		.send {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			border-bottom: 1px dotted #999;
			width: 100%;
			margin-bottom: 2rem;
			padding-bottom: 2rem;
			.text {
				width: calc(100% - 23.5rem);
				font-size: 1.3rem;
				letter-spacing: 0;
				line-height: 1.5;
				h4, h5 {
					position: relative;
					margin-bottom: 0.2rem;
					font-size: 1.4rem;
					font-weight: 500;
					color: var(--color-main);
				}
			}
			img {
				border: 1px solid #ccc;
				width: calc(21.5rem + 2px);
			}
		}
		.send-end {
			position: relative;
			padding-left: 3.4rem;
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1.4;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				border-radius: 2.5rem;
				background: var(--color-main) url(../img/check.png) no-repeat center center / cover;
				width: 2.5rem;
				height: 2.5rem;
			}
		}
	}
}

.diagnosis-form {
	.form-input {
		.title {
			margin-bottom: 0.4rem;
			font-size: 1.6rem;
			font-weight: 500;
			color: var(--color-w);
		}
		p {
			strong {
				color: var(--color-w);
			}
		}
	}
	.form-shooting {
		margin-bottom: 4rem;
		.shooting-head1 {
			display: block;
			text-align: left;
			color: var(--color-w);
				&:before {
					background-color: var(--color-w);
				}
		}
		.shooting-head2 {
			font-size: 2.4rem;
			color: var(--color-w);
			span {
				img {
					margin-right: 1rem;
				}
			}
			strong {
				color: var(--color-w);
			}
			&:before,&:after {
				bottom: 1.6rem;
				border-top: 1px solid var(--color-w);
				width: 8rem;
			}
		}
	}
	.shooting-box {
		color: var(--color-txt);
		strong {
			font-size: 1.6rem;
			color: var(--color-b) !important;
		}
		.tel {
			img {
				width: 34rem;
			}
		}
		.photo {
			margin-bottom: 2rem;
			padding-bottom: 2rem;
			.text {
				width: calc(100% - 20rem);
				font-size: 1.4rem;
				letter-spacing: 0;
				h4, h5 {
					padding-top: 0;
					font-size: 1.6rem;
				}
			}
		}
		.send {
			.text {
				font-size: 1.5rem;
				h4, h5 {
					margin-bottom: 1rem;
					font-size: 1.7rem;
				}
			}
		}
		.send-end {
			font-size: 2rem;
			line-height: 1.2;
		}
	}
}










/* OTHER */

.company-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	dt {
		border-bottom: 1px solid #999;
		width: 21rem;
		padding: 2.5rem 3rem;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-of-type {
			border-top: 1px solid #999;
		}
	}
	dd {
		border-bottom: 1px solid #ddd;
		width: calc(100% - 21rem);
		padding: 2.5rem 0 2.5rem 3rem;
		font-size: 1.6rem;
		line-height: 1.6;
		&:first-of-type {
			border-top: 1px solid #ddd;
		}
	}
	ul {
		li {
			position: relative;
			padding-left: 1em;
			&:before {
				content: "\30FB";
				position: absolute;
				top: 0;
				left: -0.2em;
				font-weight: 500;
			}
		}
	}
}

.privacy-policy {
	h2 {
		margin-top: 5rem;
		font-size: 2.1rem;
		font-weight: 500;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h3 {
		margin-top: 3rem;
		font-size: 1.8rem;
		font-weight: 500;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	p {
		margin-top: 1.5rem;
		&:first-child {
			margin-top: 0;
		}
	}
	ul {
		margin-top: 1.5rem;
			li {
				position: relative;
				padding-left: 1em;
				&:before {
					content: "\30FB";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		&:first-child {
			margin-top: 0;
		}
	}
	ol {
		counter-reset: number3;
		margin-top: 1.5rem;
					li {
						position: relative;
						margin: 0.5rem 0;
						padding-left: 1.8em;
						&:before {
							counter-increment: number3;
							content: ''counter(number3)'.';
							position: absolute;
							top: 0;
							left: 0;
						}
					}
		&:first-child {
			margin-top: 0;
		}
	}
	.note {
		font-size: 1.5rem;
		padding-left: 1em;
	}
}

.sitemap {
	width: 100%;
	dt {
		border-bottom: 1px solid #ccc;
		width: 100%;
		margin: 4rem 0 1.5rem 0;
		padding-bottom: 0.6rem;
		font-size: 1.8rem;
		font-weight: 500;
		color: var(--color-b);
		a {
			text-decoration: underline;
			color: var(--color-b);
			&:hover {
				text-decoration: none;
			}
		}
		&:first-child {
			margin-top: 0;
		}
	}
	dd {
		width: 100%;
		padding-left: 1em;
		font-size: 1.6rem;
		a {
			text-decoration: underline;
			color: var(--color-txt);
			&:hover {
				text-decoration: none;
			}
		}
		&:last-child {
			margin-top: 4rem;
		}
	}
	ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		li {
			margin-right: 2em;
		}
	}
}










/* Franchise 2025.09 */

.fc-assignment {
	position: relative;
	background: var(--color-w) url(../img/fc/franchise-assignment-bg.png) no-repeat top center / 100% 55rem;
	padding: 0 0 5rem 0;
	z-index: 2;
	&:after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -4rem;
		display: block;
		background: url(../img/fc/franchise-assignment-ar.png) no-repeat top center / 100%;
		width: 25rem;
		height: 6rem;
		margin-left: -12.5rem;
	}
	h2 {
		margin: 3.5rem 0 3rem 0;
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
		strong {
			display: block;
			margin-top: 2rem;
			font-size: 3.8rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			span {
				background-image: radial-gradient(circle, #ac4141 1.5px, transparent 0.15rem);
				background-position: left bottom;
				background-repeat: repeat-x;
				background-size: 0.8rem 0.3rem;
				margin-right: 1rem;
				padding-bottom: 0.5rem;
				color: #ac4141;
			}
		}
	}
	.about-img {
		max-width: 82rem;
		margin: 0 auto;
	}
}

.fc-support {
	position: relative;
	background-color: var(--color-bg);
	padding: 7rem 0 8rem 0;
	z-index: 1;
	h2 {
		position: relative;
		border-bottom: 2px solid #decac4;
		background-color: var(--color-w);
		margin-bottom: 6rem;
		padding: 3rem 5rem;
		font-size: 3.8rem;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--color-b);
		span {
			font-size: 3rem;
		}
		strong {
			font-size: 4.8rem;
			font-weight: 700;
			color: var(--color-main);
		}
		&:after, &:before {
			top: 100%;
			left: 50%;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}
		&:after {
			border-color: rgba(255, 255, 255, 0);
			border-top-color: #ffffff;
			border-width: 3rem;
			margin-left: -3rem;
		}
		&:before {
			border-color: rgba(222, 202, 196, 0);
			border-top-color: #decac4;
			border-width: 3.3rem;
			margin-left: -3.3rem;
		}
	}
	.support-misaki {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		margin-bottom: 6rem;
		dl {
			width: calc(100% - 46rem);
			dt {
				position: relative;
				margin-bottom: 1rem;
				padding-left: 5rem;
				font-size: 2.8rem;
				font-weight: 700;
				line-height: 1.4;
				color: var(--color-b);
				&:before {
					content: "";
					position: absolute;
					top: 0.7rem;
					left: 0;
					background: url(../img/fc/franchise-support-check.png) no-repeat center center / 100%;
					width: 2.6rem;
					height: 2.6rem;
				}
			}
			dd {
				margin-bottom: 3rem;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		img {
			width: 35rem;
		}
	}
	.support-service {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 3rem;
		.box {
			background-color: var(--color-w);
			width: calc(50% - 1.5rem);
			padding: 4rem;
			box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
			h3 {
				margin-bottom: 3rem;
				font-size: 1.5rem;
				font-weight: 400;
				line-height: 1;
				text-align: center;
				img {
					width: auto;
					height: 4rem;
					vertical-align: bottom;
				}
			}
			p {
				margin-top: 2rem;
			}
		}
		.box-all {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: flex-start;
			background-color: var(--color-w);
			width: 100%;
			padding: 4rem;
			box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
			.read {
				width: calc(100% - 36rem);
				h3 {
					position: relative;
					margin: 1.2rem 0 1.8rem 0;
					padding-left: 3.5rem;
					font-size: 2.6rem;
					font-weight: 500;
					line-height: 1.4;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0.8rem;
						left: 0;
						display: block;
						border: 0.7rem solid var(--color-main);
						border-radius: 2.2rem;
						width: 2.2rem;
						height: 2.2rem;
					}
				}
			}
			img {
				width: 32rem;
			}
		}
		& + .note {
			margin-top: 2rem;
			font-size: 1.3rem;
		}
	}
}

.fc-comparison {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 8rem 0;
	.comparison-list {
		width: 100%;
		th {
			vertical-align: middle;
			border: 1px solid #ccc;
			background-color: #e8e8e8;
			width: 16%;
			padding: 1.5rem;
			font-weight: 500;
			line-height: 1.6;
			text-align: center;
			color: var(--color-b);
			&.main {
				background-color: #fbeae4;
				width: 28%;
			}
		}
		td {
			vertical-align: middle;
			border: 1px solid #ccc;
			background-color: var(--color-w);
			padding: 1.5rem;
			line-height: 1.5;
			text-align: center;
		}
		.denki0 {
			border-left: 6px solid var(--color-main);
			border-right: 6px solid var(--color-main);
		}
		.blank {
			border: none;
			background: none;
		}
		tr {
			&:first-child {
				.denki0 {
					border-top: 6px solid var(--color-main);
					background-color: #ffffa8;
					padding: 0.8rem 1.5rem;
					img {
						width: auto;
						height: 4rem;
					}
				}
			}
			&:last-child {
				.denki0 {
					border-bottom: 6px solid var(--color-main);
				}
			}
		}
		& + .note {
			margin-top: 1.5rem;
			font-size: 1.3rem;
		}
	}
	.comparison-read {
		margin-top: 2rem;
		text-align: center;
		img {
			width: 18rem;
			height: auto;
		}
		p {
			position: relative;
			width: 61rem;
			margin: 2rem auto 0 auto;
			padding: 1rem 0;
			font-size: 2.8rem;
			font-weight: 700;
			line-height: 1.7;
			color: var(--color-b);
			&:before, &:after {
				content: "";
				position: absolute;
				display: block;
				border-top: 2px solid var(--color-main);
				border-left: 2px solid var(--color-main);
				width: 3rem;
				height: 3rem;
			}
			&:before {
				top: 0;
				left: 0;
			}
			&:after {
				bottom: 0;
				right: 0;
				transform: rotate(180deg);
			}
		}
	}

}

.fc-bonus {
	position: relative;
	background-color: var(--color-bg);
	padding: 7rem 0 8rem 0;
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5rem;
		line-height: 1;
		img {
			vertical-align: middle;
			width: 25rem;
			height: auto;
			margin-right: 2rem;
		}
	}
	.bonus-list {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 6rem;
		&:last-child {
			margin-bottom: 0;
		}
		&.rev {
			flex-direction: row-reverse;
		}
		img {
			width: 41rem;
			height: auto;
		}
		.read {
			width: calc(100% - 46rem);
			h3 {
				margin-bottom: 2rem;
				font-size: 2.8rem;
				font-weight: 700;
				line-height: 1.5;
				color: var(--color-b);
				span {
					display: block;
					border-radius: 4.6rem;
					background-color: var(--color-main);
					width: 13.5rem;
					height: 4.6rem;
					margin-bottom: 2rem;
					font-size: 1.8rem;
					line-height: 4.4rem;
					text-align: center;
					color: var(--color-yellow);
				}
			}
			p {
				margin-top: 1.5rem;
				strong {
					font-weight: 500;
					color: var(--color-main);
				}
			}
		}
	}
}

.fc-flow {
	position: relative;
	background-color: var(--color-w);
	padding: 7.5rem 0 8rem 0;
	.main-points {
		border-top: 1px solid #ccc;
		width: 100%;
		th {
			vertical-align: middle;
			border-bottom: 1px solid #ccc;
			background-color: #f8f8f8;
			width: 20%;
			padding: 1.8rem 3rem;
			font-weight: 700;
			color: #534b48;
		}
		td {
			vertical-align: middle;
			border-bottom: 1px solid #ccc;
			background-color: var(--color-w);
			width: 80%;
			padding: 1.8rem 3rem;
		}
		.special {
			th {
				background-color: var(--color-main);
				font-size: 2.1rem;
				color: var(--color-w);
			}
			td {
				font-size: 1.7rem;
				color: var(--color-b);
			}
		}
		& + .note {
			margin-top: 2rem;
			font-size: 1.3rem;
		}
	}
	.flow-area {
		background-color: var(--color-bg);
		.flow {
			background-color: var(--color-w);
			&:first-child {
				&:before {
					background-color: var(--color-bg);
					height: 9rem;
				}
			}
			&:last-child {
				&:before {
					background-color: var(--color-bg);
					height: calc(100% - 9rem);
				}
			}
			& .step {
				top: 1.5rem;
				margin-top: 0;
				&:before {
					background-color: var(--color-bg);
				}
			}
		}
	}
}