@charset "UTF-8";




/* CSS STYLE */

html {
	font-size: 2.666666vw;
}
body {
	padding-top: 6rem;
	min-width: 320px;
	font-size: 1.5rem;
	line-height: 1.7;
}

.spnone {
	display: none !important;
}










/* SITEPARTS */

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

.inner, .inner-mid, .inner-min, .inner-sml {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	z-index: 1;
}

.page-head {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray);
	width: 100%;
	min-height: 11.5rem;
	padding: 3.2rem 0;
	overflow: hidden;
	h1, p {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding-left: 2rem;
		padding-right: 2rem;
		font-size: 2.3rem;
		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: 0.4rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.1rem;
			font-weight: 500;
		}
		.sub {
			position: relative;
			display: block;
			width: 100%;
			margin-top: 1rem;
			padding-left: 2.8rem;
			font-size: 1.3rem;
			font-weight: 500;
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				display: block;
				border-top: 1px solid var(--color-w);
				width: 2rem;
			}
		}
	}
	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: 14rem;
	padding: 3rem 0;
	h1 {
		font-size: 2.3rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.06em;
		text-align: center;
		.shoulder {
			display: block;
			width: 100%;
			margin-bottom: 0.4rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.1rem;
			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: 10rem;
	padding: 3rem 0;
	h1 {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 2rem;
		padding-right: 2rem;
		font-size: 2.1rem;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0.06em;
		color: var(--color-b);
	}
}

.bread {
	position: relative;
	width: calc(100% - 4rem);
	min-height: 5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
	padding: 1.5rem 0;
	font-size: 0;
	color: #757575;
	z-index: 1;
	white-space: nowrap;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	li {
		display: inline-block;
		white-space: nowrap;
		font-size: 1rem;
		line-height: 1.3;
		&: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);
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			right: 1.5rem;
			border-radius: 2rem;
			background: var(--color-main) url(../img/ar_01.png) no-repeat center center / 2rem;
			width: 2rem;
			height: 2rem;
			margin-top: -1rem;
		}
	}
	&.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;
			}
		}
	}
	&.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;
			}
		}
	}
}
.btn2 {
	a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #e9e0dc;
		border-radius: 0.5rem;
		min-height: 4.6rem;
		padding: 0.4rem 4rem 0.6rem 4rem;
		font-size: 1.5rem;
		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);
		}
	}
}

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


/* FADE */

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










/* HEADER */

#header {
	position: fixed;
	top: -6.5rem;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-w);
	width: 100%;
	height: 6rem;
	padding: 0 0 0 2rem;
	line-height: 1;
	z-index: 10000;
	transition: 0.2s ease;
	&.view {
		top: 0;
	}
	.header-logo {
		width: 12.2rem;
	}
	.header-menu {
		height: 6rem;
		.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 {
				display: none;
			}
			.reserve {
				display: none;
			}
			#menu-open {
				position: relative;
				background-color: var(--color-main);
				width: 6rem;
				height: 6rem;
				margin-left: 2rem;
				padding-top: 3.8rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.1rem;
				line-height: 1;
				text-align: center;
				color: var(--color-w);
				span {
					position: absolute;
					top: 2.2rem;
					left: 50%;
					display: block;
					border-top: 1px solid var(--color-w);
					width: 1.6rem;
					margin-left: -0.8rem;
					transition: 0.2s ease;
				}
				&:before {
					content: "";
					position: absolute;
					top: 1.6rem;
					left: 50%;
					display: block;
					border-top: 1px solid var(--color-w);
					width: 1.6rem;
					margin-left: -0.8rem;
					transition: 0.2s ease;
				}
				&:after {
					content: "";
					position: absolute;
					top: 2.8rem;
					left: 50%;
					display: block;
					border-top: 1px solid var(--color-w);
					width: 1.6rem;
					margin-left: -0.8rem;
					transition: 0.2s ease;
				}
				&.active {
					span {
						display: none;
					}
					&:before {
						top: 2.2rem;
						transform: rotate(45deg);
					}
					&:after {
						top: 2.2rem;
						transform: rotate(-45deg);
					}
				}
				div {
					&:before {
						content: "MENU";
					}
				}
				&.active {
					div {
						&:before {
							content: "CLOSE";
						}
					}
				}
			}
		}
	}
	.menu-main {
		display: none;
		position: absolute;
		top: 6rem;
		left: 0;
		background-color: var(--color-main);
		width: 100%;
		height: calc(100vh + 6rem);
		padding: 2rem;
		color: var(--color-w);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		.menu {
			width: 100%;
			> li {
				border-bottom: 1px solid #f3baa5;
				> a, > span {
					display: block;
					padding: 1.9rem 1rem 2.1rem 1rem;
					font-size: 1.5rem;
					font-weight: 500;
					line-height: 1;
					text-decoration: none;
					color: var(--color-w);
				}
				&.sub-menu {
					> span {
						position: relative;
						&:after {
							content: "＋";
							position: absolute;
							top: 50%;
							right: 0.5em;
							transform: translate(0, -50%);
						}
						&.active {
							&:after {
								content: "－";
							}
						}
					}
					.sub {
						display: none;
						padding: 0 0 1rem 0.5em;
						li {
							position: relative;
							margin-bottom: 1.2rem;
							padding-left: 1em;
							&:before {
								content: "・";
								position: absolute;
								top: 0;
								left: 0;
							}
							a {
								display: block;
								text-decoration: none;
								color: var(--color-w);
							}
						}
					}
				}
			}
		}
		.sp-fc {
			margin: 2rem 0;
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #f0bd00;
				border-radius: 0.5rem;
				background-color: #fff7d9;
				width: 28.8rem;
				height: 5.8rem;
				margin: 0 auto;
				padding: 0 0 0 2rem;
				font-size: 1.7rem;
				font-weight: 500;
				line-height: 1;
				text-decoration: none;
				color: var(--color-b);
				box-shadow: 0 0.3rem 0 #f0bd00;
				&:after {
					content: "";
					display: block;
					border-radius: 2rem;
					background: var(--color-main) url(../img/ar_01.png) no-repeat center center / 2rem;
					width: 2rem;
					height: 2rem;
					margin-left: 1rem;
				}
			}
		}
		.sp-cv {
			background-color: var(--color-w);
			margin-top: 2rem;
			padding: 2rem;
			li {
				margin-bottom: 1.4rem;
			}
			.btn {
				a {
					width: 100%;
					height: 6rem;
					min-width: inherit;
					min-height: inherit;
					padding: 0;
					font-size: 1.7rem;
					&:after {
						background-size: 2rem;
						width: 2rem;
						height: 2rem;
						margin-top: -1rem;
					}
				}
				&.com {
					a {
						background-color: var(--color-main);
						color: var(--color-w);
						box-shadow: 0 0.4rem 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: 0 1rem 0 0;
						}
						&:after {
							position: relative;
							top: inherit;
							right: inherit;
							display: inline-block;
							vertical-align: middle;
							background: var(--color-w) url(../img/ar_02.png) no-repeat center center / cover;
							margin: 0 0 0 1rem;
						}
					}
				}
				&.buz {
					a {
						border: 2px solid var(--color-btn);
						background-color: var(--color-btn);
						color: var(--color-b);
						box-shadow: 0 0.4rem 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: 0 1rem 0 0;
						}
						&:after {
							position: relative;
							top: inherit;
							right: inherit;
							display: inline-block;
							vertical-align: middle;
							background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
							margin: 0 0 0 1rem;
						}
					}
				}
				&.sim {
					a {
						&:after {
							position: relative;
							top: inherit;
							right: inherit;
							display: inline-block;
							vertical-align: middle;
							margin: 0 0 0 1rem;
						}
					}
				}
			}
			.sp-tel {
				margin-top: 2rem;
				padding: 0 0.5rem;
				text-align: center;
				img {
					display: block;
					margin-bottom: 0.8rem;
				}
				.time {
					white-space: nowrap;
					font-size: 1.1rem;
					font-weight: 500;
					letter-spacing: 0.01em;
					color: var(--color-txt2);
				}
			}
		}
		.sp-link {
			margin-top: 2rem;
			li {
				margin-top: 1rem;
				a {
					display: block;
					width: 100%;
					font-size: 1.3rem;
					font-weight: 500;
					line-height: 1;
					text-decoration: none;
					color: var(--color-w);
				}
			}
		}
		#menu-close {
			background: url(../img/close.png) no-repeat center top / 5rem;
			width: 5rem;
			margin: 2rem auto 10rem auto;
			padding-top: 6rem;
			text-align: center;
			line-height: 1;
			&:after {
				content: "CLOSE";
			}
		}
	}
}

.sp-menu {
	position: fixed;
	bottom: -5.5rem;
	left: 0;
	display: flex;
	width: 100%;
	height: 5rem;
	z-index: 1000;
	transition: 0.2s ease;
	&.active {
		bottom: 0;
	}
	li {
		width: 100%;
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--color-main);
			width: 100%;
			height: 5rem;
			font-size: 1.3rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-w);
			&:before {
				content: "";
				background: url(../img/btn-icon_01.png) no-repeat center center / 1.6rem;
				width: 1.6rem;
				height: 1.6rem;
				margin-right: 0.6rem;
			}
		}
		&:nth-of-type(2) {
			a {
				background-color: var(--color-btn);
				color: var(--color-b);
				&:before {
					background-image: url(../img/btn-icon_02.png);
				}
			}
		}
		&:nth-of-type(3) {
			a {
				background-color: #3d3d3d;
				&:before {
					background-image: url(../img/btn-icon_04.png);
				}
			}
		}
	}
}










/* FOOTER */

#footer {
	position: relative;
	background-color: #f5e8e4;
	width: 100%;
	padding: 5rem 0 10rem 0;
	z-index: 1;
	.footer-top {
		.data {
			width: 100%;
			.logo {
				width: 21rem;
				margin: 0 auto;
			}
			.add {
				margin-top: 1.2rem;
				font-size: 1.3rem;
				color: var(--color-b);
				text-align: center;
				span {
					font-size: 1.1rem;
				}
			}
		}
		.footer-menu {
			display: none;
		}
		.fc {
			border-top: 1px solid #dfcfcc;
			margin: 3rem 0;
			padding-top: 3rem;
			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;
				margin: 0 auto;
				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;
				}
			}
		}
	}
	.footer-btm {
		.link {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.3rem;
			line-height: 1;
			li {
				&:after {
					content: "|";
					margin: 0 2rem;
				}
				&:last-child {
					&:after {
						display: none;
					}
				}
			}
		}
		.sns {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1.2rem;
			margin-top: 2rem;
			li {
				width: 3rem;
			}
		}
		.copy {
			margin-top: 2rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.2rem;
			line-height: 1;
			text-align: center;
			color: #8a8a8a;
		}
	}
}

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

.cv-area {
	position: relative;
	background-color: var(--color-bg2);
	width: 100%;
	padding: 1px 2rem 3.5rem 2rem;
	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 0.4rem 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: 2rem;
		font-size: 2.8rem;
		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: -0.8rem;
				left: 0;
				display: block;
				width: 100%;
				border-bottom: 0.4rem solid var(--color-main);
			}
		}
		&:before, &:after {
			content: "";
			display: block;
			height: 3.2rem;
			border-left: 0.3rem solid var(--color-main);
			margin-bottom: -0.8rem;
		}
		&:before {
			transform: rotate(-40deg);
			margin-right: 1.6rem;
		}
		&:after {
			transform: rotate(40deg);
			margin-left: 1.6rem;
		}
	}
	ul {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.2rem 2%;
		width: 100%;
		z-index: 2;
		li {
			width: 49%;
		}
	}
	.btn {
		a {
			width: 100%;
			height: 8rem;
			min-width: inherit;
			min-height: inherit;
			&:after {
				background-size: 2rem;
				width: 2rem;
				height: 2rem;
				margin-top: -1rem;
			}
		}
		&.com {
			a {
				flex-wrap: wrap;
				background-color: var(--color-main);
				padding: 0;
				font-size: 1.7rem;
				color: var(--color-w);
				box-shadow: 0 0.4rem 0 #ab3004;
				&:before {
					content: "";
					display: block;
					background: url(../img/btn-icon_01.png) no-repeat center center / 2.4rem;
					width: 100%;
					height: 2.4rem;
					margin: 0 0 0.5rem 0;
				}
				&:after {
					position: relative;
					top: inherit;
					right: inherit;
					display: inline-block;
					vertical-align: middle;
					background: var(--color-w) url(../img/ar_02.png) no-repeat center center / cover;
					margin: 0 0 0 0.5rem;
				}
			}
		}
		&.buz {
			a {
				flex-wrap: wrap;
				border: 2px solid var(--color-btn);
				background-color: var(--color-btn);
				padding: 0;
				font-size: 1.7rem;
				color: var(--color-b);
				box-shadow: 0 0.4rem 0 #99ab1e;
				&:before {
					content: "";
					display: block;
					background: url(../img/btn-icon_02.png) no-repeat center center / 2.4rem;
					width: 100%;
					height: 2.4rem;
					margin: 0 0 0.5rem 0;
				}
				&:after {
					position: relative;
					top: inherit;
					right: inherit;
					display: inline-block;
					vertical-align: middle;
					background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
					margin: 0 0 0 0.5rem;
				}
			}
		}
		&.sim {
			width: 19rem;
			a {
				height: 7rem;
				font-size: 1.5rem;
				&:after {
					right: 1rem;
				}
			}
		}
	}
	.btm {
		background-image: repeating-linear-gradient(90deg, #916758, #916758 2px, transparent 2px, transparent 6px);
		background-position: left top;
		background-repeat: repeat-x;
		background-size: 100% 2px;
		width: 100%;
		margin: 2rem auto 0 auto;
		padding-top: 2rem;
		.tel {
			width: 28rem;
			margin: 0 auto;
		}
		.time {
			margin-top: 0.6rem;
			font-size: 1.1rem;
			font-weight: 500;
			line-height: 1.45;
			text-align: center;
			color: #754b3b;
		}
		&> img {
			display: none;
		}
	}
	.trick {
		position: absolute;
		bottom: 11.8rem;
		left: 1.5rem;
		width: 8rem;
		z-index: 1;
	}
	.shop {
		position: absolute;
		bottom: 11rem;
		right: 1.4rem;
		width: 7rem;
		height: auto;
	}
	&:has(+ #footer) {
		margin-top: 10rem;
	}
	&.solar {
		h2, h3 {
			&:before, &:after {
				display: none;
			}
		}
		.trick {
			position: absolute;
			bottom: inherit;
			top: 3.2rem;
			left: 1rem;
			width: 6.2rem;
			z-index: 1;
		}
		.shop {
			position: absolute;
			bottom: inherit;
			top: 2.8rem;
			right: 1.8rem;
			width: 5.4rem;
			height: auto;
		}
	}
}










/* INDEX */

#warp.index {
	overflow: hidden;
}

.mv-area {
	position: relative;
	background: var(--color-bg) url(../img/index/index-mv-img-sp.jpg) no-repeat center center / cover;
	width: 100%;
	height: 58rem;
	z-index: 1;
	overflow: hidden;
	.mv-read {
		position: absolute;
		top: 50%;
		left: 50%;
		/*background-color: rgba(255, 255, 255, 0.9);*/
		width: 33.5rem;
		padding: 1px 1rem 2.5rem 1rem;
		transform: translate(-50%, -50%);
		/*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-sp.png) no-repeat center top / 31.4rem;
				width: 31.4rem;
				height: 6.8rem;
				margin-top: -2.8rem;
				padding-left: 0.5rem;
				padding-bottom: 3rem;
				font-size: 1.4rem;
				font-weight: 500;
				line-height: 1;
				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.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: 29.5rem;
				margin: -0.4rem auto 0 auto;
				padding-bottom: 0.5rem;
				font-size: 4rem;
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0;
				color: var(--color-b);
				white-space: nowrap;
				.left {
					text-align: right;
				}
				.center {
					margin: 0 0.4rem;
					font-family: 'Roboto', sans-serif;
					font-size: 10rem;
					font-weight: 700;
					line-height: 1;
					color: var(--color-main);
				}
				span {
					font-size: 2.1rem;
					letter-spacing: 0.02em;
				}
				strong {
					font-weight: 900;
					color: var(--color-main);
				}
			}
		}
		.sub {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 1.2rem;
			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.2rem;
				border-left: 0.2rem solid var(--color-main);
			}
			&:before {
				transform: rotate(-30deg);
				margin-right: 1.8rem;
			}
			&:after {
				transform: rotate(30deg);
				margin-left: 1.8rem;
			}
		}
		/*.btn {
			width: 29.5rem;
			margin: 1.3rem auto 0 auto;
			a {
				border-color: var(--color-btn);
				background-color: var(--color-btn);
				width: 29.5rem;
				height: 5.6rem;
				padding: 0 0 0.2rem 0;
				font-size: 2rem;
				color: var(--color-b);
				box-shadow: 0 0.5rem 0 #99ab1e;
				span {
					position: absolute;
					top: -0.7rem;
					left: -0.9rem;
					display: block;
					background: url(../img/index/index-mv-btn-bg.png) no-repeat left top / 5.6rem;
					width: 5.6rem;
					height: 4.2rem;
					padding-top: 1rem;
					font-size: 1.3rem;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0;
					text-align: center;
					color: var(--color-main);
				}
				&:after {
					background: #fff url(../img/ar_03.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-top: -1.2rem;
				}
			}
		}*/

		.btn {
			position: absolute;
            bottom: 14%;
            left: 10%;
			width: 80%;
			a {
				border-color: var(--color-btn);
				background-color: var(--color-btn);
				display: block;
				padding: 2.5% 0;
				font-size: 1.6rem;
				border-radius: 5rem;
				color: var(--color-b);
				box-shadow: 0 0.5rem 0 #000;
				min-height: auto;
				span {
					position: absolute;
					top: -0.7rem;
					left: -0.9rem;
					display: block;
					background: url(../img/index/index-mv-btn-bg.png) no-repeat left top / 5.6rem;
					width: 5.6rem;
					height: 4.2rem;
					padding-top: 1rem;
					font-size: 1.3rem;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0;
					text-align: center;
					color: var(--color-main);
				}
				&:after {
					background: #fff url(../img/ar_03.png) no-repeat center center / 2.4rem;
					width: 2.4rem;
					height: 2.4rem;
					margin-top: -1.2rem;
				}
			}
		}
	}
	.mv-image {
		display: none;
	}
}

.index-head {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 5rem 0 2.2rem 0;
	padding-bottom: 2.2rem;
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.2rem;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.08em;
		text-align: center;
		color: var(--color-b);
		img {
			display: none;
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	p {
		font-size: 1.5rem;
		text-align: center;
		img {
			width: 3.6rem;
			height: 3.6rem;
			vertical-align: middle;
		}
	}
	&:first-child {
		margin-top: 0;
	}
}

.index-sub-head {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
	font-size: 2.1rem;
	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;
	}
}

.index-campaign {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 3rem 0 4rem 0;
	h2 {
		margin-bottom: 2rem;
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
	}
	.campaign-info {
		display: none;
		position: relative;
		width: 100%;
		&.slick-initialized {
			display: block;
		}
		.img-box {
			width: 33.5rem;
			height: 19.4rem;
			margin: 0;
			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 / 3.2rem;
			width: 3.2rem;
			height: 3.2rem;
			margin-top: -1.6rem;
			padding-top: 3.2rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.2s ease;
			&.slick-prev {
				left: -1.6rem;
				transform: rotate(-180deg);
			}
			&.slick-next {
				right: -1.6rem;
			}
		}
	}
	fw-embed-feed {
		margin-top: 2rem;
	}
}

.index-about {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 5rem 0 8rem 0;
	z-index: 1;
	.about-contents {
		position: relative;
		width: 100%;
		.about {
			position: relative;
			background-color: var(--color-w);
			width: 100%;
			margin-top: 1rem;
			padding: 2.5rem;
			.read {
				h3 {
					position: relative;
					margin-bottom: 1.5rem;
					font-size: 2rem;
					font-weight: 500;
					line-height: 1.45;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: -2.5rem;
						display: block;
						height: 100%;
						border-left: 3px solid var(--color-main);
					}
				}
				p {
					text-align: justify;
				}
			}
			.img-box {
				position: absolute;
				top: 2.5rem;
				right: 2.5rem;
				width: 7rem;
				height: 6rem;
				padding: 0;
			}
		}
	}
	.about-diagnosis {
		position: relative;
		width: 100%;
		.diagnosis {
			display: flex;
			width: 100%;
			min-height: 14rem;
			background-color: var(--color-w);
			margin-top: 1rem;
			.img-box {
				position: relative;
				width: 13rem;
				padding: 0;
				z-index: 1;
			}
			.read {
				align-self: center;
				position: relative;
				width: calc(100% - 13rem);
				padding: 1rem 0.5rem;
				z-index: 2;
				h3 {
					font-size: 2.1rem;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0;
					text-align: center;
					color: var(--color-b);
					strong {
						position: relative;
						margin-right: 0.6rem;
						font-weight: 500;
						z-index: 2;
						&:before, &:after {
							content: "";
							position: absolute;
							top: 50%;
							display: block;
							border-radius: 3.2rem;
							background-color: var(--color-yellow);
							width: 3.2rem;
							height: 3.2rem;
							margin-top: -1.5rem;
							z-index: -1;
						}
						&:before {
							left: -0.6rem;
						}
						&:after {
							right: -0.5rem;
						}
					}
					div {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5rem;
						background-color: var(--color-main);
						width: 16.4rem;
						height: 2.4rem;
						margin: 0 auto 1.2rem auto;
						padding-bottom: 0.1rem;
						font-size: 1rem;
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0;
						color: var(--color-w);
						&:after {
							content: "";
							position: absolute;
							left: 50%;
							bottom: -0.6rem;
							width:0;
							height:0;
							border-style:solid;
							border-width: 0.7rem 0.4rem 0 0.4rem;
							border-color: var(--color-main) transparent transparent transparent;
							margin-left: -0.4rem;
						}
					}
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 0.2rem;
					margin-top: 1rem;
					li {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 0.3rem;
						background-color: #eee;
						height: 2rem;
						padding: 0 0.4rem 0.1rem 0.4rem;
						font-size: 0.9rem;
						font-weight: 500;
						line-height: 1;
						color: #393939;
					}
				}
				.btn {
					margin-top: 0.6rem;
					text-align: center;
					a {
						border: none;
						background-color: none;
						width: 100%;
						height: auto;
						min-width: auto;
						min-height: auto;
						padding: 0;
						box-shadow: none;
						font-size: 1.4rem;
						&:after {
							position: relative;
							top: inherit;
							right: inherit;
							width: 1.6rem;
							height: 1.6rem;
							margin: 0 0 0 0.6rem;
							letter-spacing: 0;
						}
					}
				}
			}
		}
	}
}

.index-voice {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 5rem 0;
	.customer-voice {
		position: relative;
		display: none;
		width: calc(100% - 6rem);
		margin: 0 auto;
		color: var(--color-txt2);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
			display: flex;
		}
		.slick-slide {
			height: auto !important;
		}
		.voice {
			background-color: var(--color-bg);
			width: 31.5rem;
			padding: 2.5rem 2.5rem 3rem 2.5rem;
			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;
						line-height: 1.2;
						letter-spacing: 0;
						text-align: center;
						color: #9a9390;
					}
				}
				.title {
					width: calc(100% - 8.5rem);
					h3 {
						font-size: 1.7rem;
						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 0.8rem 0.1rem 0.8rem;
							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 / 3.2rem;
			width: 3.2rem;
			height: 3.2rem;
			margin-top: -1.6rem;
			padding-top: 3.2rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.2s ease;
			&.slick-prev {
				left: -2rem;
				transform: rotate(-180deg);
			}
			&.slick-next {
				right: -2rem;
			}
		}
	}
}

.index-service {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 5rem 0;
	.service-list {
		position: relative;
		display: none;
		width: calc(100% - 2rem);
		margin: 0 auto;
		box-shadow: 0.7rem 0.7rem 2rem rgba(213, 185, 178, 0.15);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
		display: flex;
		}
		.slick-slide {
		height: auto !important;
		}
		.service {
			background-color: var(--color-w);
			width: 31.5rem;
			.img-box {
				width: 100%;
				height: 16rem;
				padding: 0;
			}
			.read {
				align-self: center;
				width: 100%;
				padding: 2.5rem 2.5rem 3.5rem 2.5rem;
				h3 {
					display: flex;
					align-items: center;
					margin-bottom: 1.8rem;
					font-size: 2rem;
					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: 1.5rem;
						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;
					text-align: center;
				}
			}
		}
		.slick-arrow {
			position: absolute;
			top: 6.5rem;
			border: none;
			border-radius: 5rem;
			background: var(--color-main) url(../img/ar-big_01.png) no-repeat center center / 3.2rem;
			width: 3.2rem;
			height: 3.2rem;
			padding-top: 3.2rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.2s ease;
			&.slick-prev {
				left: -2rem;
				transform: rotate(-180deg);
			}
			&.slick-next {
				right: -2rem;
			}
		}
	}
}

.index-maker {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 5rem 0 8rem 0;
	.maker-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		li {
			position: relative;
			border: 1px solid #ddd;
			border-radius: 0.5rem;
			background-color: var(--color-w);
			width: calc(calc(100% - 1rem) / 3);
			height: 4.8rem;
			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: 5rem 0;
	z-index: 1;
	.column-list {
		position: relative;
		display: none;
		width: calc(100% - 2rem);
		margin: 0 auto;
		box-shadow: 0.7rem 0.7rem 2rem rgba(213, 185, 178, 0.15);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
		display: flex;
		}
		.slick-slide {
		height: auto !important;
		}
		a {
			display: block;
			background-color: var(--color-w);
			width: 31.5rem;
			padding: 0;
			text-decoration: none;
			color: var(--color-txt);
			.img-box {
				width: 100%;
				height: 18.8rem;
				padding: 0;
			}
			.read {
				padding: 2.5rem 2rem;
				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;
				}
			}
		}
		.slick-arrow {
			position: absolute;
			top: 18.8rem;
			border: none;
			border-radius: 5rem;
			background: var(--color-main) url(../img/ar-big_01.png) no-repeat center center / 3.2rem;
			width: 3.2rem;
			height: 3.2rem;
			margin-top: -1.6rem;
			padding-top: 3.2rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.2s ease;
			&.slick-prev {
				left: -2rem;
				transform: rotate(-180deg);
			}
			&.slick-next {
				right: -2rem;
			}
		}
	}
}

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










/* COLUMN */

.column-all-list {
	position: relative;
	.column {
		width: 100%;
		margin-bottom: 4rem;
		> 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: 1rem;
				font-size: 1.8rem;
				font-weight: 500;
				line-height: 1.5;
				color: var(--color-b);
			}
		}
		dl {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			flex-direction: row-reverse;
			margin-top: 1.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;
			}
		}
	}
}

.pager {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin-top: 5rem;
	ul {
		display: flex;
		justify-content: center;
		gap: 0.2rem;
		width: 100%;
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 4.6rem;
			height: 4.6rem;
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 4.6rem;
				background-color: var(--color-bg);
				width: 4.6rem;
				height: 4.6rem;
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0;
				text-decoration: none;
				color: var(--color-b);
			}
			&.active {
				a {
					background-color: #716661;
					color: var(--color-w);
				}
			}
		}
	}
	.prev, .next {
		width: 8rem;
		height: 4.6rem;
		margin: 2rem 0.2rem 0 0.2rem;
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0.5rem;
			background-color: var(--color-bg);
			width: 8rem;
			height: 4.6rem;
			font-size: 1.5rem;
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0;
			text-decoration: none;
			color: var(--color-b);
		}
	}
	.prev {
		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.5rem;
				transform: rotate(-45deg);
			}
		}
	}
	.next {
		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.5rem;
				transform: rotate(45deg);
			}
		}
	}
}

.category-list-pc {
	display: none;
}
.category-list-sp {
	display: flex;
	align-items: center;
	margin-bottom: 3rem;
	dt {
		width: calc(100% - 24rem);
		font-size: 1.4rem;
		font-weight: 500;
		color: var(--color-b);
	}
	dd {
		position: relative;
		width: 24rem;
		select {
			position: relative;
			border: 1px solid #ccc;
			background-color: var(--color-w);
			width: 100%;
			height: 4.2rem;
			padding: 0.5rem 1.5rem;
			z-index: 1;
		}
		&:after {
			content: "";
			position: absolute;
			top: 1.8rem;
			right: 1.4rem;
			width:0;
			height:0;
			border-style:solid;
			border-width: 0.6rem 0.5rem 0 0.5rem;
			border-color: var(--color-b) transparent transparent transparent;
			z-index: 2;
		}
	}
}

.tag-list {
	width: 100%;
	margin-top: 6rem;
	dt {
		margin-bottom: 2rem;
		font-size: 2rem;
		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;
		}
	}
}

.text-data {
	.column-days {
		width: 100%;
		margin-bottom: 2rem;
		.category {
			display: flex;
			flex-wrap: wrap;
			gap: 0.3rem;
			margin-bottom: 1rem;
			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);
			}
		}
		.days {
			display: flex;
			flex-wrap: wrap;
			gap: 0.3rem;
			li {
				display: flex;
				align-items: center;
				border-radius: 2.4rem;
				background-color: #f5f5f5;
				height: 2.4rem;
				padding: 0 1.5rem 0.1rem 1.5rem;
				font-size: 1.2rem;
				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.3rem;
		color: #a4a4a4;
	}
	h1, h2 {
		margin-bottom: 1.8rem;
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.5;
		color: var(--color-b);
	}
	.column-tag {
		margin-bottom: 3rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1em;
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1;
		color: #616161;
		a {
			text-decoration: underline;
			color: #616161;
		}
	}
	figure, .wp-caption {
		width: 100% !important;
		margin: 3rem 0 5rem 0;
		img {
			display: block;
		}
		figcaption, .wp-caption-text {
			margin-top: 1rem;
			text-align: center;
			font-size: 1.2rem;
			line-height: 1.4;
			text-align: center;
			color: #a4a4a4;
		}
	}
	.column-index {
		border: 1px solid #ccc;
		background-color: var(--color-w);
		width: 100%;
		margin: 5rem 0;
		padding: 2.5rem 2.5rem;
		dt {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1.2rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			&:after {
				content: "";
				display: block;
				width: calc(100% - 5rem);
				border-top: 1px solid #ccc;
			}
		}
		dd {
			position: relative;
			margin-top: 0.3rem;
			padding-left: 1.2em;
			font-size: 1.6rem;
			line-height: 1.5;
			&:before {
				content: "\30FB";
				position: absolute;
				top: 0;
				left: -0.1em;
				font-weight: 700;
				color: var(--color-main);
			}
			a {
				display: inline-block;
				position: relative;
				text-decoration: underline;
				padding-right: 1.2em;
				color: var(--color-txt);
				&:after {
					content: "";
					background: url(../img/head-ar_02.png) no-repeat center center / 1rem;
					position: absolute;
					top: 0.34em;
					right: 0;
					display: block;
					width: 1em;
					height: 1em;
				}
			}
		}
	}
}

.text-area {
	a {
		text-decoration: underline;
		&[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: 5rem 0 2.5rem 0;
		padding: 1.5rem 0;
		font-size: 2rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h3 {
		border-bottom: 1px solid #d2d2d2;
		margin: 4rem 0 2rem 0;
		padding: 0 0 1.5rem 0;
		font-size: 1.9rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h4 {
		border-bottom: 1px dotted #d2d2d2;
		margin: 4rem 0 2rem 0;
		padding: 0 0 1.5rem 0;
		font-size: 1.7rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
		&:first-child {
			margin-top: 0;
		}
	}
	h5 {
		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;
		}
	}
	h6 {
		margin: 3rem 0 2rem 0;
		font-size: 1.5rem;
		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: 5rem 0;
		padding: 2em;
		dt {
			margin-bottom: 1rem;
			font-size: 1.7rem;
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-b);
		}
		&:first-child {
			margin-top: 0;
		}
	}
	table {
		border: 1px solid #c8b8b3;
		width: 100%;
		margin: 5rem 0;
		th {
			border: 1px solid #c8b8b3;
			background-color: #f6f6f6;
			padding: 1rem 1.5rem;
			font-weight: 500;
			line-height: 1.7;
			color: var(--color-b);
		}
		td {
			border: 1px solid #c8b8b3;
			background-color: var(--color-w);
			padding: 1rem 1.5rem;
			line-height: 1.7;
		}
		&:first-child {
			margin-top: 0;
		}
	}
	iframe {
		display: block;
		margin: 5rem 0;
		&:first-child {
			margin-top: 0;
		}
	}
	.text-column {
		width: 100%;
		margin: 3rem 0 4rem 0;
		.image {
			width: 100%;
			margin-bottom: 2rem;
		}
		.read {
			width: 100%;
		}
	}
	.alignleft, .alignright, aligncenter {
		float: none;
		width: 100%;
		margin: 2rem 0;
	}
	p:has(.alignleft), p:has(.alignright) {
		margin: 3rem 0 4rem 0;
		.alignleft, .alignright, aligncenter {
			&:first-child {
				margin-top: 0;
			}
		}
	}
}

.share-area {
	h3 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5rem 0 1.8rem 0;
		font-family: 'Roboto', sans-serif;
		font-size: 1.8rem;
		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: 6rem;
		}
		&:before {
			margin-right: 1.5rem;
		}
		&:after {
			margin-left: 1.5rem;
		}
	}
	ul {
		display: flex;
		justify-content: center;
		gap: 1rem;
		li {
			width: 4.4rem;
			height: 4.4rem;
			a, span {
				display: block;
				border-radius: 4.4rem;
				width: 4.4rem;
				height: 4.4rem;
				overflow: hidden;
				cursor: pointer;
				img {
					transition: 0.2s ease;
				}
			}
		}
		.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: 5rem;
		text-align: center;
	}
}










/* SERVICE */

.service-bread {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	height: 5rem;
	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: calc(100% - 4rem);
		height: 4rem;
		margin-left: auto;
		margin-right: auto;
		font-size: 1rem;
		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 {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	z-index: 1;
	h1 {
		font-size: 3rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--color-b);
		span {
			display: table;
			border: 2px solid var(--color-main);
			border-radius: 3.8rem;
			height: 3.8rem;
			margin-bottom: 1.5rem;
			padding: 0 2.5rem;
			font-size: 1.5rem;
			font-weight: 500;
			line-height: calc(3.8rem - 5px);
			white-space: nowrap;
			color: var(--color-main);
		}
		strong {
			position: relative;
			font-weight: 700;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				top: 0.1rem;
				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: 1rem;
		font-size: 1.5rem;
		color: var(--color-b);
	}
	.image {
		position: relative;
		width: 100%;
		height: 28rem;
		margin-top: 3.5rem;
		overflow: hidden;
		img {
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			max-width: initial;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}
}

.service-about {
	position: relative;
	background-color: var(--color-main);
	width: 100%;
	margin-bottom: 13rem;
	padding-bottom: 1px;
	z-index: 2;
	&.eco {
		background-color: #0071bc;
		margin-bottom: 11rem;
		.merit-title {
			strong {
				color: #ffd200;
			}
		}
	}
	.osusume {
		position: relative;
		background-color: var(--color-w);
		width: 100%;
		margin-bottom: 4rem;
		padding: 3.6rem 2rem 4rem 2rem;
		box-shadow: 0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.06);
		h2 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 2rem;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.3;
			color: var(--color-b);
			&:after, &:before {
				content: "";
				display: block;
				width: 3rem;
				border-top: 2px solid #c8c8c8;
			}
			&:before {
				margin-right: 2rem;
			}
			&:after {
				margin-left: 2rem;
			}
			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 {
			li {
				background: url(../img/service/service-check.png) no-repeat left 0.1rem / 2.2rem;
				min-height: 2.2rem;
				margin-top: 0.8rem;
				padding-left: 3rem;
				font-size: 1.6rem;
				line-height: 1.5;
			}
		}
		&:after {
			content: "";
			position: absolute;
			bottom: -2rem;
			left: 50%;
			width:0;
			height:0;
			border-style:solid;
			border-width: 2.1rem 1.4rem 0 1.4rem;
			border-color: #fff transparent transparent transparent;
			margin-left: -1.4rem;
		}
	}
	.merit-title {
		margin-bottom: 2rem;
		font-size: 2.4rem;
		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;
		margin-bottom: -13rem;
		.merit {
			position: relative;
			border: 1px solid var(--color-main);
			background-color: var(--color-bg);
			width: 100%;
			margin-top: 1rem;
			padding: 2rem;
			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 {
					align-self: flex-start;
					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 {
					align-self: center;
					width: calc(100% - 8rem);
					margin: -0.45rem 0;
					font-size: 2rem;
					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.5rem;
				font-size: 1.5rem;
				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: 7.8rem;
				margin-top: 1rem;
				padding: 1.5rem 2rem 1.5rem 6.5rem;
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 1.6;
				color: #333;
				&:before {
					content: "";
					position: absolute;
					top: 1.6rem;
					left: 1.8rem;
					display: block;
					background: var(--color-w) url(../img/service/service-merit.png) no-repeat left top / 4rem;
					width: 4rem;
					height: 4rem;
				}
			}
		}
	}
}

.service-head {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 5rem 0 2.2rem 0;
	padding-bottom: 2.2rem;
	font-size: 2.4rem;
	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: 4.5rem 0 5rem 0;
}
.relief-title {
	background: url(../img/head-icon_01.png) no-repeat center bottom / 3.6rem;
	margin: 5rem 0 4.5rem 0;
	padding-bottom: 2.2rem;
	h2 {
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0;
		text-align: center;
		color: var(--color-b);
		white-space: nowrap;
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	p {
		margin-top: 1.5rem;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.5;
		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 {
	position: relative;
	width: 100%;
	.relief {
		position: relative;
		background-color: var(--color-bg);
		width: 100%;
		margin-top: 3rem;
		padding: 1px 2rem 3rem 2rem;
		font-size: 1.5rem;
		letter-spacing: 0;
		.num {
			position: relative;
			width: 4.4rem;
			margin: -2.2rem auto 1.6rem 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: 1rem;
			font-size: 1.9rem;
			font-weight: 500;
			line-height: 1.5;
			text-align: center;
			color: var(--color-b);
		}
		p {
			text-align: justify;
		}
		a {
			text-decoration: underline;
			color: var(--color-main);
		}
	}
}

.service-flow {
	position: relative;
	background-color: var(--color-bg);
	padding: 4.5rem 0 5rem 0;
}
.flow-area {
	position: relative;
	background-color: var(--color-w);
	width: 100%;
	padding: 2rem;
	.flow {
		position: relative;
		width: calc(100% - 5rem);
		background-color: var(--color-bg);
		margin: 2rem 0 0 5rem;
		padding: 2.3rem 2rem 2rem 2rem;
		font-size: 1.5rem;
		z-index: 2;
		.step {
			position: absolute;
			top: 2rem;
			left: -5rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 5rem;
			z-index: 2;
			p {
				position: relative;
				display: block;
				border-radius: 3rem;
				background-color: #585858;
				width: 3rem;
				height: 3rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.3rem;
				font-weight: 500;
				line-height: 3rem;
				letter-spacing: 0;
				text-align: center;
				color: var(--color-w);
				z-index: 2;
				span {
					position: absolute;
					top: -2rem;
					left: 0;
					display: block;
					width: 3rem;
					font-size: 1.2rem;
					line-height: 1;
					text-align: center;
					color: var(--color-b);
					white-space: nowrap;
					z-index: 1;
				}
			}
			.icon {
				display: none;
			}
			&:before {
				content: "";
				position: absolute;
				top: -3rem;
				left: 0;
				display: block;
				background-color: var(--color-w);
				width: 5rem;
				height: 7rem;
				z-index: -1;
			}
			&:after {
				content: "";
				position: absolute;
				top: calc(50% - 1px);
				right: 0;
				display: block;
				width: 90%;
				border-top: 2px solid #585858;
				z-index: 1;
			}
		}
		h3 {
			position: relative;
			margin-bottom: 1rem;
			padding-left: 1.5rem;
			font-size: 1.7rem;
			font-weight: 500;
			line-height: 1.3;
			color: var(--color-b);
			&:before {
				content: "";
				position: absolute;
				top: 0.9rem;
				left: 0;
				border-radius: 0.6rem;
				background-color: var(--color-main);
				width: 0.6rem;
				height: 0.6rem;
			}
		}
		.btn-flow {
			margin-top: 1.5rem;
			.btn {
				margin-top: 1rem;
				&.com {
					a {
						background-color: var(--color-main);
						width: 100%;
						height: 5.4rem;
						padding-right: 3rem;
						font-size: 1.6rem;
						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: 1rem;
						}
						&:after {
							background: var(--color-w) url(../img/ar_02.png) no-repeat center center / cover;
						}
					}
				}
				&.buz {
					a {
						border: 2px solid var(--color-btn);
						background-color: var(--color-btn);
						width: 100%;
						height: 5.4rem;
						padding-right: 3rem;
						font-size: 1.6rem;
						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: 1rem;
						}
						&:after {
							background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
						}
					}
				}
				&.type2 {
					a {
						width: 100%;
						height: 5.4rem;
						font-size: 1.6rem;
						font-weight: 500;
					}
				}
			}
		}
		.tel {
			margin: 1.5rem 0 1rem 0;
			img {
				display: block;
				width: 100%;
				height: auto;
				margin-bottom: 0.6rem;
			}
			span {
				display: block;
				font-size: 1rem;
				font-weight: 500;
				line-height: 1.45;
				color: #754b3b;
			}
		}
		.tel2 {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 1.2rem 0 1rem 0;
			em {
				display: block;
				border-radius: 0.3rem;
				background-color: #f5f5f5;
				width: 5rem;
				height: 2rem;
				margin-right: 0.5rem;
				font-size: 1rem;
				font-weight: 700;
				text-align: center;
				line-height: 2rem;
				color: var(--color-main);
			}
			img {
				display: block;
				width: calc(100% - 5.5rem);
				height: auto;
			}
			span {
				display: block;
				width: 100%;
				margin-top: 0.5rem;
				font-size: 1rem;
				font-weight: 500;
				line-height: 1.45;
				color: #754b3b;
			}
		}
		.note {
			margin-top: 1rem;
			font-size: 1.2rem;
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				left: -5rem;
				display: block;
				background-color: var(--color-w);
				width: 5rem;
				height: 100%;
				z-index: 1;
			}
		}
	}
	&:before {
		content: "";
		position: absolute;
		top: 2rem;
		left: 3.5rem;
		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% - 4rem);
		z-index: 1;
	}
}

.service-voice {
	position: relative;
	background-color: var(--color-w);
	padding: 4.5rem 0 7rem 0;
	.service-customer-voice {
		position: relative;
		display: none;
		width: calc(100% - 2rem);
		margin: 0 auto;
		color: var(--color-txt2);
		&.slick-initialized {
			display: block;
		}
		.slick-track {
			display: flex;
		}
		.slick-slide {
			height: auto !important;
		}
		.voice {
			background-color: var(--color-bg);
			width: 31.5rem;
			padding: 2.5rem 2.5rem 3rem 2.5rem;
			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.8rem;
				.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: 1.1rem;
						line-height: 1.2;
						text-align: center;
						color: #9a9390;
					}
				}
				.title {
					width: calc(100% - 8.5rem);
					h3 {
						font-size: 1.7rem;
						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 0.8rem 0.1rem 0.8rem;
							font-size: 1.2rem;
							line-height: 1;
							color: var(--color-main);
						}
					}
					.name {
						margin-top: 1rem;
						font-size: 1.1rem;
						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 / 3.2rem;
			width: 3.2rem;
			height: 3.2rem;
			margin-top: -1.6rem;
			padding-top: 3.2rem;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			z-index: 10;
			transition: 0.2s ease;
			&.slick-prev {
				left: -2rem;
				transform: rotate(-180deg);
			}
			&.slick-next {
				right: -2rem;
			}
		}
		.slick-dots {
			position: absolute;
			bottom: -2rem;
			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: -10rem;
	padding: 4.5rem 0 10rem 0;
	z-index: 1;
	&:has( + .diagnosis-form) {
		margin-bottom: 0;
		padding: 4.5rem 0 5rem 0;
	}
}
.faq-area {
	width: 100%;
	dt {
		position: relative;
		display: flex;
		background-color: var(--color-w);
		width: 100%;
		min-height: 4.5rem;
		margin-top: 1rem;
		cursor: pointer;
		&:before {
			content: "Q.";
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #5b5b5b;
			width: 4rem;
			padding-left: 0.4rem;
			font-family: 'Roboto', sans-serif;
			font-size: 1.7rem;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1;
			color: var(--color-w);
			z-index: 1;
		}
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 1rem;
			display: block;
			background: url(../img/faq-open.png) no-repeat center center / 1rem;
			width: 1rem;
			height: 1rem;
			margin-top: -0.5rem;
		}
		span {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #5b5b5b;
			width: calc(100% - 4rem);
			padding: 1rem 4rem 1rem 2rem;
			font-size: 1.6rem;
			font-weight: 500;
			line-height: 1.4;
			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: 4.5rem;
			&:before {
				content: "A.";
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--color-main);
				width: 4rem;
				padding-left: 0.4rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.7rem;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 1;
				color: var(--color-w);
				z-index: 1;
			}
			&:after {
				content: "";
				position: absolute;
				top: -0.4rem;
				left: 1.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% - 4rem);
				padding: 1.2rem 2rem 1.5rem 2rem;
				font-size: 1.5rem;
				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: 4.5rem 0 8rem 0;
	h2 {
		position: relative;
		display: table;
		background-color: var(--color-w);
		margin: 0 auto;
		padding: 0 2rem;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.25;
		text-align: center;
		letter-spacing: 0.06em;
		color: var(--color-b);
		z-index: 2;
		span {
			display: block;
			margin-bottom: 1rem;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1;
			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 {
		position: relative;
		border-top: 2px solid var(--color-main);
		background-color: var(--color-w);
		margin: -4.2rem -2rem 0 -2rem;
		padding: 5rem 2rem 0 2rem;
		.sub {
			font-size: 1.5rem;
			text-align: center;
			color: #666;
		}
		.images {
			p {
				margin-top: 2rem;
			}
		}
		.note {
			background-color: #f5f5f5;
			margin-top: 2.5rem;
			padding: 1.8rem 2rem;
			font-size: 1.2rem;
			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);
	padding: 4.5rem 0 5rem 0;
	z-index: 1;
	.terms-area {
		background-color: var(--color-w);
		margin-top: 1rem;
		padding: 3rem 2rem;
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(../img/service/solar-battery-head-btm.png) no-repeat center bottom / 18rem;
			margin-bottom: 1.2rem;
			padding-bottom: 1.8rem;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.06em;
			color: var(--color-b);
			img {
				width: auto;
				height: 2.8rem;
				margin-right: 1rem;
			}
			& + p {
				font-size: 1.5rem;
				text-align: center;
			}
		}
		h4 {
			margin: 4rem 0 2.5rem 0;
			font-size: 1.7rem;
			font-weight: 500;
			line-height: 1.3;
			text-align: center;
			color: var(--color-b);
		}
	}
	.terms-check {
		margin-top: 1.5rem;
		li {
			position: relative;
			background-color: #f9f9f9;
			width: 100%;
			margin-top: 1.5rem;
			padding: 1.6rem 1.5rem 1.8rem 9.5rem;
			font-size: 1.5rem;
			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 / 7.5rem;
				display: block;
				width: 7.5rem;
				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 / 13rem;
				width: 14rem;
				height: 1rem;
			}
		}
	}
	.terms-list {
		margin-top: 6rem;
		.terms {
			position: relative;
			border: 1px solid #dcdcdc;
			background-color: var(--color-w);
			width: 100%;
			margin-top: 6rem;
			.point {
				position: absolute;
				top: -4rem;
				left: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5rem;
				background-color: var(--color-main);
				width: 28rem;
				height: 5rem;
				margin-left: -14rem;
				padding-bottom: 0.2rem;
				font-size: 1.2rem;
				font-weight: 500;
				line-height: 1.3;
				text-align: center;
				color: var(--color-w);
				z-index: 2;
				&:before {
					content: "";
					position: absolute;
					top: -0.5rem;
					right: -0.8rem;
					background: url(../img/btn-point.png) no-repeat center center / 1.6rem;
					width: 1.6rem;
					height: 1.4rem;
				}
				&: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: 1.8rem 2rem 2rem 2rem;
				font-size: 1.5rem;
				line-height: 1.6;
			}
			h5 {
				position: relative;
				margin-bottom: 1rem;
				padding-left: 1.2rem;
				font-size: 1.8rem;
				font-weight: 500;
				line-height: 1.3;
				color: var(--color-b);
				&:before {
					content: "";
					position: absolute;
					top: 55%;
					left: 0;
					display: block;
					border-left: 2px solid var(--color-main);
					height: calc(100% - 0.4rem);
					transform: translate(0, -50%);
				}
			}
		}
	}
}

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

.all-electric-ecocute {
	position: relative;
	background-color: var(--color-w);
	padding: 8.5rem 0 0 0;
	.ecocute-head {
		position: relative;
		padding-bottom: 3rem;
		z-index: 2;
		dt {
			margin-bottom: 1rem;
			font-size: 1.9rem;
			font-weight: 500;
			line-height: 1.3;
			text-align: center;
			color: var(--color-b);
		}
		dd {
			font-size: 1.5rem;
			text-align: center;
		}
		.img1 {
			position: absolute;
			top: -4.8rem;
			left: 2rem;
			width: 8.4rem;
			height: auto;
		}
		.img2 {
			position: absolute;
			top: -6.6rem;
			right: 4rem;
			width: 7rem;
			height: auto;
		}
		.img3 {
			position: absolute;
			bottom: -5.4rem;
			left: 4rem;
			width: 4.5rem;
			height: auto;
		}
		.img4 {
			position: absolute;
			bottom: -6rem;
			right: 4rem;
			width: 6rem;
			height: auto;
		}
	}
	.ecocute-type {
		position: relative;
		background-color: var(--color-bg);
		padding: 4rem 0 5rem 0;
		z-index: 1;
		.inner-mid {
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
		}
		.ecocute-area {
			background-color: var(--color-w);
			width: 100%;
			padding: 3rem 2rem 2rem 2rem;
			h3 {
				display: flex;
				justify-content: center;
				align-items: center;
				background: url(../img/service/all-electric-head-btm.png) no-repeat center bottom / 20rem;
				margin-bottom: 0.8rem;
				padding-bottom: 2rem;
				font-size: 2rem;
				font-weight: 700;
				line-height: 1;
				letter-spacing: 0.06em;
				color: var(--color-b);
				img {
					width: auto;
					height: 3rem;
					margin-right: 1.5rem;
				}
				& + p {
					margin-bottom: 2rem;
					font-size: 1.5rem;
					text-align: center;
				}
			}
			table {
				position: relative;
				display: block;
				width: 100%;
				margin-top: 3rem;
				overflow-x: scroll;
				-webkit-overflow-scrolling: touch;
				&:before {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					display: block;
					border-radius: 0.5rem;
					background: url(../img/swipe.png) no-repeat center center / cover;
					width: 14rem;
					height: 8.8rem;
					margin: -4.4rem 0 0 -7rem;
				}
				&.touch:before {
					display: none;
				}
				tbody {
					display: table;
					width: 90rem;
					th {
						border: 1px solid #c1c1c1;
						background-color: #f8f8f8;
						width: 20%;
						padding: 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: 1rem;
						text-align: center;
						vertical-align: middle;
					}
				}
			}
			.ecocute-data {
				margin-top: 2rem;
				dl {
					border-top: 1px solid #c1c1c1;
					border-left: 1px solid #c1c1c1;
					border-right: 1px solid #c1c1c1;
					width: 100%;
					&:last-child {
						border-bottom: 1px solid #c1c1c1;
					}
					dt {
						border-bottom: 1px solid #c1c1c1;
						background-color: #f8f8f8;
						width: 100%;
						padding: 1rem;
						font-size: 1.6rem;
						font-weight: 500;
						text-align: center;
						color: var(--color-b);
					}
					dd {
						padding: 1.5rem 2rem 1.8rem 2rem;
						font-size: 1.5rem;
						&.image {
							text-align: center;
							border-bottom: 1px solid #c1c1c1;
							padding: 2rem;
							img {
								width: auto;
								height: 10rem;
							}
						}
						&.sub {
							padding: 1rem;
							font-size: 1.6rem;
							font-weight: 500;
							text-align: center;
							color: var(--color-b);
						}
					}
				}
			}
			.note {
				margin-top: 1rem;
				font-size: 1.2rem;
			}
		}
	}
}

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

.service-relief {
	&.all-electric {
		background-color: var(--color-bg);
		padding-bottom: 0;
		.relief-list {
			.relief {
				background-color: var(--color-w);
			}
		}
	}
}

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

.switching-eco {
	position: relative;
	background-color: #f8fcff;
	width: 100%;
	margin-bottom: -11rem;
	padding: 3rem 2rem 2rem 2rem;
	box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
	h3 {
		width: 28rem;
		margin: 0 auto 1rem auto;
		.top {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-end;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			img {
				align-self: center;
				width: 21rem;
				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: 26rem;
				height: 4.5rem;
				margin-top: 1rem;
				font-size: 1.8rem;
				font-weight: 700;
				line-height: 4.3rem;
				text-align: center;
				color: var(--color-b);
				&:after {
					content: "";
					position: absolute;
					bottom: -1.2rem;
					left: 50%;
					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;
			width: 100%;
			margin: 1.4rem auto 0 auto;
			font-size: 4rem;
			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 / 3.4rem;
				width: 3.4rem;
				height: 3.8rem;
				margin-right: 1rem;
			}
		}
	}
	.read {
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0;
		text-align: center;
		color: var(--color-b);
		strong {
			font-size: 2.2rem;
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.sub {
		margin-top: 0.3rem;
		font-size: 1.2rem;
		text-align: center;
	}
	h4 {
		position: relative;
		background-color: #0071bc;
		width: 100%;
		height: 4.8rem;
		margin: 2rem 0 4rem 0;
		font-size: 1.7rem;
		font-weight: 500;
		line-height: 4.6rem;
		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 {
		margin-top: 3rem;
		p {
			margin-top: 3rem;
		}
	}
	.note {
		border: 1px solid #e4ebf1;
		background-color: var(--color-w);
		margin-top: 2rem;
		padding: 2rem;
		font-size: 1.2rem;
		line-height: 1.8;
		li {
			position: relative;
			padding-left: 1em;
			&:before {
				content: "※";
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
}

.switching-support {
	position: relative;
	background-color: var(--color-w);
	padding: 4.5rem 0 5rem 0;
	.support-area {
		position: relative;
		width: 100%;
		margin-bottom: 4rem;
		.image {
			position: relative;
			width: calc(100% + 4rem);
			margin: 0 -2rem 2rem -2rem;
		}
		.read {
			width: 100%;
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
			h3 {
				position: relative;
				margin-bottom: 1.5rem;
				padding-left: 2.2rem;
				font-size: 2.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: 100%;
				margin-top: 2.5rem;
				li {
					display: flex;
					align-items: center;
					background: #f5f5f5 url(../img/service/switching-support-check.png) no-repeat 1.8rem center / 3.2rem;
					margin-top: 0.5rem;
					height: 6rem;
					padding: 1.2rem 2.5rem 1.6rem 6.6rem;
					font-size: 1.5rem;
					font-size: 500;
					line-height: 1;
					color: var(--color-b);
					strong {
						position: relative;
						font-size: 2.1rem;
						font-weight: 700;
						color: var(--color-main);
						&.zero {
							position: relative;
							bottom: -0.2rem;
							margin: 0 0.4rem;
							font-family: 'Roboto', sans-serif;
							font-size: 3.3rem;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
	.whats {
		background: url(../img/service/switching-support-sim.png) no-repeat center bottom / 29.5rem;
		width: 100%;
		margin-bottom: 1rem;
		padding-bottom: 2.2rem;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.55;
		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: 100%;
			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;
			}
		}
	}
}










/* Diagnosis */

.diagnosis-about {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	.title {
		margin-bottom: 1.5rem;
		font-size: 2.4rem;
		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: 0.4rem;
		margin-top: 1.8rem;
		li {
			position: relative;
			border: 1px solid var(--color-main);
			border-radius: 3.8rem;
			background-color: #fffdee;
			width: 100%;
			height: 3.8rem;
			padding: 0 1rem;
			font-size: 1.5rem;
			font-weight: 500;
			line-height: calc(3.8rem - 3px);
			text-align: center;
			white-space: nowrap;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				bottom: -10px;
				left: 50%;
				width: 0;
				height: 0;
				border-style:solid;
				border-width: 10px 6px 0 6px;
				border-color: var(--color-main) transparent transparent transparent;
				margin-left: -6px;
				z-index: 1;
			}
			&:after {
				content: "";
				position: absolute;
				bottom: -8.5px;
				left: 50%;
				width: 0;
				height: 0;
				border-style:solid;
				border-width: 10px 6px 0 6px;
				border-color: #fffdee transparent transparent transparent;
				margin-left: -6px;
				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;
		border-top: 2px solid var(--color-main);
		background-color: var(--color-w);
		width: calc(100% + 4rem);
		margin: 3rem -2rem 0 -2rem;
		padding: 2.5rem 2rem 3rem 2rem;
		box-shadow: 0.8rem 0.8rem 2rem rgba(0, 0, 0, 0.06);
		h2 {
			font-size: 2.2rem;
			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.6rem;
					height: auto;
					margin-right: 0.6rem;
				}
			}
		}
		ul {
			background-image: radial-gradient(circle, #776f6d 0.5px, transparent 0.5px);
			background-position: left top;
			background-repeat: repeat-x;
			background-size: 5px 1px;
			margin-top: 2rem;
			padding-top: 2rem;
			li {
				flex-shrink: 4;
				background: url(../img/service/service-check.png) no-repeat left 0.1rem / 2.5rem;
				min-height: 2.6rem;
				margin: 1.2rem 0;
				padding-top: 0.3rem;
				padding-left: 3.5rem;
				font-size: 1.6rem;
				line-height: 1.45;
				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	&.simulator {
		margin-bottom: 0;
		padding-bottom: 5rem;
		.simulator-area {
			position: relative;
			border-top: 2px solid var(--color-main);
			background-color: var(--color-w);
			width: 100%;
			margin: 2rem auto 0 auto;
			padding: 3rem 2rem;
			h2 {
				margin-bottom: 2.5rem;
				font-size: 2.4rem;
				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: 3rem -2rem 1.5rem -2rem;
				padding: 0 2rem 1.5rem 2rem;
				font-size: 1.8rem;
				font-weight: 700;
				line-height: 1.3;
				color: var(--color-b);
				&:before {
					content: "・";
					position: absolute;
					top: 0;
					left: 0;
					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: 100%;
				height: 4.4rem;
				padding: 0.5rem 1rem;
				vertical-align: middle;
				font-size: 1.4rem;
				color: var(--color-txt);
				&: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-txt);
			}
			.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: 100%;
					min-height: 5rem;
					margin: 0;
					padding: 0.5rem 2rem 0.7rem 2rem;
					font-size: 1.6rem;
					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;
				}
			}
			.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 {
				position: relative;
				display: block;
				width: 100%;
				margin: 3rem 0;
				overflow-x: scroll;
				-webkit-overflow-scrolling: touch;
				&:before {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					display: block;
					border-radius: 0.5rem;
					background: url(../img/swipe.png) no-repeat center center / cover;
					width: 14rem;
					height: 8.8rem;
					margin: -4.4rem 0 0 -7rem;
					z-index: 2;
				}
				&.touch {
					&:before {
						display: none;
					}
				}
				tbody {
					position: relative;
					display: table;
					width: 72rem;
					z-index: 1;
					th {
						border: 1px solid #ddd;
						background-color: #eee;
						padding: 1rem;
						font-size: 1.4rem;
						font-weight: 700;
						letter-spacing: 0;
					}
					td {
						border: 1px solid #ddd;
						background-color: var(--color-w);
						padding: 1rem;
						font-size: 1.4rem;
						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.4rem 1.5rem;
					line-height: 1.2;
					z-index: 1;
					h4 {
						border-right: 1px solid #ccc;
						margin: 0 1.5rem 0 0;
						padding-right: 2rem;
						font-size: 1.5rem;
						font-weight: 700;
						color: var(--color-b);
					}
					p {
						font-size: 1.6rem;
						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 {
						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%;
							margin-bottom: 1rem;
							padding: 1.3rem 1.5rem 1.5rem 1.5rem;
							h4 {
								border-bottom: 1px solid #ccc;
								margin: 0 0 0.8rem 0;
								padding-bottom: 0.8rem;
								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;
							}
						}
					}
					.moneyArea002 {
						line-height: 1.2;
						.split001, .split002, .split003 {
							border-radius: 1rem;
							background-color: var(--color-bg);
							width: 100%;
							margin-bottom: 0.5rem;
							padding: 1.3rem 1.5rem 1.5rem 1.5rem;
							h4 {
								border-bottom: 1px solid #ccc;
								margin: 0 0 0.8rem 0;
								padding-bottom: 0.8rem;
								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: 5.5rem 0 5rem 0;
	table {
		position: relative;
		display: block;
		width: 100%;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		&:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			border-radius: 0.5rem;
			background: url(../img/swipe.png) no-repeat center center / cover;
			width: 14rem;
			height: 8.8rem;
			margin: -4.4rem 0 0 -7rem;
		}
		&.touch:before {
			display: none;
		}
		tbody {
			display: table;
			width: 100rem;
			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.5rem;
					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.2rem;
		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: 4.5rem 2rem 5rem 2rem;
	margin: 0 auto;
	.need-wish {
		width: 100%;
		.wish {
			border: 1px solid #ebdfdc;
			width: 100%;
			background-color: var(--color-w);
			margin-top: 1rem;
			padding: 2.2rem 2rem 2rem 2rem;
			font-size: 1.5rem;
			h3 {
				position: relative;
				background: url(../img/diagnosis/diagnosis-need-head-btm.png) no-repeat center bottom / 42rem;
				margin-bottom: 0.5rem;
				padding-bottom: 2.4rem;
				font-size: 1.7rem;
				font-weight: 700;
				line-height: 1.4;
				text-align: center;
				color: var(--color-b);
				span {
					span {
						font-size: 1.5rem;
					}
				}
			}
			strong {
				font-weight: 500;
				color: var(--color-main);
			}
			&:nth-of-type(1) {
				h3 {
					img {
						position: absolute;
						bottom: 4.9rem;
						width: auto;
						height: 2.6rem;
						&:nth-of-type(1) {
							left: 5.8rem;
						}
						&:nth-of-type(2) {
							right: 5.7rem;
						}
					}
				}
			}
			&:nth-of-type(2) {
				h3 {
					img {
						position: absolute;
						bottom: 5rem;
						width: auto;
						height: 3.7rem;
						&:nth-of-type(1) {
							left: -0.8rem;
						}
						&:nth-of-type(2) {
							right: -1.1rem;
						}
					}
				}
			}
		}
	}
	.note {
		margin-top: 1.5rem;
		font-size: 1.4rem;
	}
}

.diagnosis-complete {
	position: relative;
	padding-top: 4.5rem;
	z-index: 2;
	h2 {
		margin-bottom: 2rem;
		font-size: 1.9rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
		strong {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2.4rem;
			font-weight: 700;
			img {
				width: 4.5rem;
				margin-top: -1rem;
				margin-right: 0.4rem;
			}
		}
	}
	ol {
		position: relative;
		counter-reset: dc;
		margin-bottom: -4.5rem;
		li {
			position: relative;
			border: 3px solid var(--color-main);
			background-color: var(--color-main);
			width: 100%;
			margin-top: 1rem;
			padding: 1.8rem 2.5rem 1.8rem 6.5rem;
			font-size: 1.8rem;
			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: 1.8rem;
				left: 1.8rem;
				display: block;
				border-radius: 3.4rem;
				background-color: var(--color-w);
				width: 3.4rem;
				height: 3.4rem;
				font-family: 'Roboto', sans-serif;
				font-size: 1.5rem;
				font-weight: 500;
				line-height: 3.4rem;
				letter-spacing: 0;
				text-align: center;
				color: var(--color-main);
			}
		}
	}
	& + .service-flow {
		padding-top: 9rem;
	}
}

.diagnosis-form {
	position: relative;
	background-color: var(--color-main);
	padding: 4.5rem 0 5rem 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: 2rem;
		padding-bottom: 2.4rem;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1;
		img {
			width: 2.8rem;
			height: auto;
			margin-right: 1rem;
		}
	}
	hr {
		margin: 2rem 0;
		border-top: 1px solid var(--color-w);
	}
	.form-input {
		padding: 0 2rem;
		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: 2rem;
			padding: 0 2rem;
			label {
				display: inline-block;
				border: 1px solid var(--color-w);
				width: 100%;
				padding: 2.4rem 1.6rem;
				line-height: 1;
				input[type="checkbox"] {
					display: none;
					& + span {
						background-color: transparent;
						padding: 0 0 0.2rem 4rem;
						font-size: 1.5rem;
						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;
							}
						}
					}
				}
			}
		}
		.btn {
			margin-top: 2rem;
			padding: 0 2rem;
			button {
				border: 2px solid var(--color-btn);
				background-color: var(--color-btn);
				width: 100%;
				min-height: 5.4rem;
				font-size: 1.8rem;
				color: var(--color-b);
				&:after {
					background: var(--color-w) url(../img/ar_03.png) no-repeat center center / cover;
				}
			}
		}
	}
}

.diagnosis-area {
	position: relative;
	background-color: var(--color-bg);
	padding: 0 0 5rem 0;
	z-index: 1;
	dl {
		position: relative;
		padding-top: 1rem;
		&:after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			background: url(../img/diagnosis/diagnosis-map.png) no-repeat right top / 31rem;
			width: 31rem;
			height: 31rem;
			z-index: -1;
			opacity: 0.2;
		}
		dt {
			border-left: 2px solid var(--color-main);
			margin: 3rem 0 1.4rem 0;
			padding-left: 0.8rem;
			font-size: 1.7rem;
			font-weight: 500;
			line-height: 1;
			color: var(--color-b);
			&:first-child {
				margin-top: 0;
			}
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 1.8rem;
			font-size: 1.5rem;
			line-height: 1;
		}
	}
}









/* NEWS */

.news-list {
	width: 100%;
	border-top: 1px solid #d2d2d2;
	dt {
		width: 100%;
		padding: 1.5rem 1rem 0.5rem 1rem;
		font-family: 'Roboto', sans-serif;
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1.3;
		color: #a4a4a4;
	}
	dd {
		border-bottom: 1px solid #d2d2d2;
		width: 100%;
		padding: 0 0 1.5rem 0;
		font-size: 1.5rem;
		line-height: 1.5;
		a {
			position: relative;
			display: block;
			width: 100%;
			padding: 0 4rem 0 1rem;
			color: var(--color-b);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2; 
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				right: 1rem;
				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.3s ease;
			}
		}
	}
}










/* FORM */

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

#warp.form {
	position: relative;
	background-color: var(--color-bg);
	.form-area {
		position: relative;
		width: 100%;
		padding: 0 !important;
		.read {
			position: relative;
			width: 100%;
			padding: 3rem 2rem;
			h1 {
				width: 100%;
				margin-bottom: 2.5rem;
				font-size: 2.3rem;
				font-weight: 700;
				line-height: 1.3;
				letter-spacing: 0.06em;
				color: var(--color-b);
				span {
					display: block;
					margin-bottom: 0.6rem;
					font-family: 'Roboto', sans-serif;
					font-size: 1.1rem;
					font-weight: 500;
				}
			}
			dl {
				margin: 2rem 0;
				dt {
					margin-bottom: 1.4rem;
					font-size: 1.6rem;
					font-weight: 700;
					line-height: 1.6;
					color: var(--color-main);
				}
				dd {
					position: relative;
					margin-top: 0.2rem;
					padding-left: 3rem;
					font-size: 1.6rem;
					font-weight: 500;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0.4rem;
						left: 0;
						display: block;
						border-radius: 2rem;
						background: var(--color-main) url(../img/check.png) no-repeat center center / cover;
						width: 2rem;
						height: 2rem;
					}
				}
			}
			.image {
				border: 1px solid #d4d4d4;
				margin-top: 2rem;
				font-size: 0;
			}
		}
		.form-input {
			position: relative;
			background-color: var(--color-w);
			width: 100%;
			padding: 3rem 2rem 5rem 2rem;
			h2 {
				border-bottom: 1px solid #929292;
				margin-bottom: 2rem;
				padding-bottom: 1rem;
				font-size: 1.4rem;
				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.2;
			color: #d81414;
			&:before {
				content: "";
				position: absolute;
				top: -0.1rem;
				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;
	}
	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: 2.5rem;
		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;
		margin: 1.2rem 0;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		.fileup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #6b5e5e;
			width: 14rem;
			height: 4.4rem;
			font-size: 1.5rem;
			font-weight: 500;
			color: #fff;
			cursor: pointer;
			transition: 0.2s ease;
		}
		.input-text {
			max-width: 16rem;
			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 {
	position: relative;
	background-color: var(--color-bg);
	width: 100%;
	padding: 5rem 2rem;
	.logo {
		width: 16.8rem;
		margin: 0 auto;
	}
	.copy {
		margin-top: 2rem;
		font-family: 'Roboto', sans-serif;
		font-size: 1.2rem;
		line-height: 1;
		text-align: center;
		color: #8a8a8a;
	}
}

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

.form-shooting {
	.shooting-head1 {
		position: relative;
		margin: 2rem 0 1rem 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: 3rem 0 2rem 0;
		font-size: 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.4rem;
				margin-right: 0.6rem;
			}
		}
		strong {
			font-weight: 700;
			color: var(--color-main);
		}
	}
	.shooting-box {
		display: block;
		background-color: var(--color-w);
		padding: 2rem;
		font-size: 1.3rem;
		strong {
			font-size: 1.5rem;
			color: var(--color-b);
		}
		em {
			color: var(--color-b);
		}
		.tel {
			margin: 0.8rem 0;
		}
		.photo {
			border-bottom: 1px dotted #999;
			margin-bottom: 1.5rem;
			padding-bottom: 1.5rem;
			.text {
				width: 100%;
				margin-bottom: 1rem;
				font-size: 1.3rem;
				letter-spacing: 0;
				h4, h5 {
					position: relative;
					margin-bottom: 0.8rem;
					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: 100%;
			}
			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
		.send {
			border-bottom: 1px dotted #999;
			margin-bottom: 1.5rem;
			padding-bottom: 1.5rem;
			.text {
				width: 100%;
				margin-bottom: 1rem;
				font-size: 1.4rem;
				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: 100%;
			}
		}
		.send-end {
			position: relative;
			padding-left: 2.8rem;
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1.3;
			color: var(--color-main);
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				border-radius: 2rem;
				background: var(--color-main) url(../img/check.png) no-repeat center center / cover;
				width: 2rem;
				height: 2rem;
			}
		}
	}
}

.diagnosis-form {
	.form-input {
		.title {
			margin-bottom: 0.3rem;
			font-size: 1.5rem;
			font-weight: 500;
			color: var(--color-w);
		}
		p {
			strong {
				color: var(--color-w);
			}
		}
	}
	.form-shooting {
		margin-bottom: 3rem;
		.shooting-head1 {
			display: block;
			text-align: left;
			color: var(--color-w);
				&:before {
					background-color: var(--color-w);
				}
		}
		.shooting-head2 {
			color: var(--color-w);
			strong {
				color: var(--color-w);
			}
		}
	}
	.shooting-box {
		color: var(--color-txt);
		strong {
			font-size: 1.6rem;
			color: var(--color-b) !important;
		}
		.tel {
			img {
				width: 34rem;
			}
		}
	}
}










/* OTHER */

.company-list {
	width: 100%;
	dt {
		border-top: 1px solid #999;
		width: 100%;
		padding: 1.6rem 0;
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-b);
	}
	dd {
		border-top: 1px dotted #ddd;
		width: 100%;
		padding: 1.6rem 0;
		font-size: 1.5rem;
		line-height: 1.6;
	}
	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: 3rem 0 1.4rem 0;
		padding-bottom: 0.7rem;
		font-size: 1.7rem;
		font-weight: 500;
		color: var(--color-b);
		a {
			text-decoration: underline;
			color: var(--color-b);
		}
		&:first-child {
			margin-top: 0;
		}
	}
	dd {
		width: 100%;
		font-size: 1.5rem;
		a {
			text-decoration: underline;
			color: var(--color-txt);
		}
		&:last-child {
			margin-top: 3rem;
		}
	}
	ul {
		width: 100%;
	}
}










/* Franchise 2025.09 */

.fc-assignment {
	position: relative;
	background: var(--color-w) url(../img/fc/franchise-assignment-bg.png) no-repeat top center / 100% 30rem;
	padding: 0 0 3rem 0;
	z-index: 2;
	&:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -3rem;
		display: block;
		background: url(../img/fc/franchise-assignment-ar.png) no-repeat top center / 18rem;
		width: 100%;
		height: 4.5rem;
	}
	h2 {
		margin: 1rem 0 3rem 0;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1;
		text-align: center;
		color: var(--color-b);
		strong {
			display: block;
			margin-top: 1.2rem;
			font-size: 2.6rem;
			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: 0.5rem;
				padding-bottom: 0.5rem;
				color: #ac4141;
			}
		}
	}
	.about-img {
		position: relative;
		width: calc(100% + 4rem);
		margin: 0 -2rem;
	}
}

.fc-support {
	position: relative;
	background-color: var(--color-bg);
	padding: 4.5rem 0 5rem 0;
	z-index: 1;
	h2 {
		position: relative;
		border-bottom: 2px solid #decac4;
		background-color: var(--color-w);
		margin-bottom: 3rem;
		padding: 1.5rem 2rem;
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--color-b);
		span {
			font-size: 1.6rem;
		}
		strong {
			font-size: 2.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: 2rem;
			margin-left: -2rem;
		}
		&:before {
			border-color: rgba(222, 202, 196, 0);
			border-top-color: #decac4;
			border-width: 2.3rem;
			margin-left: -2.3rem;
		}
	}
	.support-misaki {
		width: 100%;
		margin-bottom: 4rem;
		dl {
			width: 100%;
			dt {
				position: relative;
				margin-bottom: 1.5rem;
				padding-left: 3.5rem;
				font-size: 2.2rem;
				font-weight: 700;
				line-height: 1.4;
				color: var(--color-b);
				&:before {
					content: "";
					position: absolute;
					top: 0.6rem;
					left: 0;
					background: url(../img/fc/franchise-support-check.png) no-repeat center center / 100%;
					width: 2.2rem;
					height: 2.2rem;
				}
			}
			dd {
				margin-bottom: 2rem;
			}
		}
		img {
			width: 60%;
			margin: 0 20%;
		}
	}
	.support-service {
		width: 100%;
		.box {
			background-color: var(--color-w);
			width: 100%;
			margin-top: 2rem;
			padding: 2rem;
			box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
			h3 {
				margin-bottom: 1.5rem;
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;
				text-align: center;
				img {
					width: auto;
					height: 2.6rem;
					vertical-align: bottom;
				}
			}
			p {
				margin-top: 1.5rem;
			}
		}
		.box-all {
			background-color: var(--color-w);
			width: 100%;
			margin-top: 2rem;
			padding: 2rem;
			box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
			.read {
				width: 100%;
				margin-bottom: 1.5rem;
				h3 {
					position: relative;
					margin-bottom: 1.2rem;
					padding-left: 2.6rem;
					font-size: 2rem;
					font-weight: 500;
					line-height: 1.4;
					color: var(--color-b);
					&:before {
						content: "";
						position: absolute;
						top: 0.6rem;
						left: 0;
						display: block;
						border: 0.6rem solid var(--color-main);
						border-radius: 1.6rem;
						width: 1.6rem;
						height: 1.6rem;
					}
				}
			}
			img {
				width: 100%;
			}
		}
		& + .note {
			margin-top: 1.5rem;
			font-size: 1.2rem;
		}
	}
}

.fc-comparison {
	position: relative;
	background-color: var(--color-w);
	padding: 4.5rem 0 5rem 0;
	.comparison-list {
		position: relative;
		display: block;
		width: 100%;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		&:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			border-radius: 0.5rem;
			background: url(../img/swipe.png) no-repeat center center / cover;
			width: 14rem;
			height: 8.8rem;
			margin: -4.4rem 0 0 -7rem;
		}
		&.touch:before {
			display: none;
		}
		tbody {
			display: table;
			width: 90rem;
		}
		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.2rem;
		}
	}
	.comparison-read {
		margin-top: 2rem;
		text-align: center;
		img {
			width: 18rem;
			height: auto;
		}
		p {
			position: relative;
			width: 100%;
			margin-top: 1rem;
			padding: 0.5rem 0;
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1.6;
			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: 4.5rem 0 5rem 0;
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		img {
			vertical-align: middle;
			width: 12rem;
			height: auto;
			margin-right: 1rem;
		}
	}
	.bonus-list {
		width: 100%;
		margin-bottom: 2rem;
		&:last-child {
			margin-bottom: 0;
		}
		img {
			width: 100%;
		}
		.read {
			width: 100%;
			margin-top: 1.2rem;
			h3 {
				margin-bottom: 1.2rem;
				font-size: 1.8rem;
				font-weight: 700;
				line-height: 1.5;
				color: var(--color-b);
				span {
					display: block;
					border-radius: 4rem;
					background-color: var(--color-main);
					width: 12rem;
					height: 4rem;
					margin-bottom: 1rem;
					font-size: 1.4rem;
					line-height: 3.8rem;
					text-align: center;
					color: var(--color-yellow);
				}
			}
			p {
				margin-top: 1rem;
				strong {
					font-weight: 500;
					color: var(--color-main);
				}
			}
		}
	}
}

.fc-flow {
	position: relative;
	background-color: var(--color-w);
	padding: 4.5rem 0 5rem 0;
	.main-points {
		border-top: 1px solid #ccc;
		width: 100%;
		th {
			vertical-align: middle;
			border-bottom: 1px solid #ccc;
			background-color: #f8f8f8;
			width: 30%;
			padding: 1rem;
			font-weight: 700;
			line-height: 1.6;
			color: #534b48;
		}
		td {
			vertical-align: middle;
			border-bottom: 1px solid #ccc;
			background-color: var(--color-w);
			width: 70%;
			padding: 1rem;
			line-height: 1.6;
		}
		.special {
			th {
				background-color: var(--color-main);
				font-size: 1.8rem;
				color: var(--color-w);
			}
			td {
				font-size: 1.5rem;
				color: var(--color-b);
			}
		}
		& + .note {
			margin-top: 1.5rem;
			font-size: 1.2rem;
		}
	}
	.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% - 4rem);
				}
			}
			& .step {
				top: 1.5rem;
				margin-top: 0;
				&:before {
					background-color: var(--color-bg);
				}
			}
		}
	}
}