@charset "UTF-8";

@media screen and (min-width:768px) {
	html {
		font-size: 10px;
	}
	body {
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.pcnone {
		display: none;
	}
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}

@media screen and (min-width: 1px) and (max-width: 767px) {
	html {
		font-size: 2.666666vw;
	}
	body {
		min-width: 320px;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.spnone {
		display: none !important;
	}
}









/* SITEPARTS */

img {
	max-width: 100%;
	height: auto;
}
a,
a img,
a video {
	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}
a:hover img {
	opacity: 0.7;
}

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

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

.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: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--color-main);
	width: 100%;
	height: 5rem;
	padding: 0 2rem;
	line-height: 1;
	.logo {
		img {
			width: auto;
			height: 3rem;
		}
	}
}










/* FOOTER */

#footer {
	position: relative;
	background: var(--color-main) url(../img/footer-bg.png) no-repeat center top / 100%;
	width: 100%;
	margin-top: 5rem;
	padding: 5rem 2rem;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--color-w);
	a {
		text-decoration: underline;
		color: var(--color-w);
		&:hover {
			text-decoration: none;
		}
	}
	ul {
		display: flex;
		justify-content: center;
		li {
			&:after {
				content: "|";
				margin: 0 1em;
			}
			&:last-child {
				&:after {
					display: none;
				}
			}
		}
	}
	.copy {
		margin-top: 3rem;
		font-size: 0.9rem;
		line-height: 1.2;
		text-align: center;
	}
}










/* INDEX */

.mv-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: var(--color-blue) url(../img/mv-bg.png) no-repeat center bottom / cover;
	width: 100%;
	margin-bottom: 5rem;
	padding: 2rem 2rem 5rem 2rem;
	overflow: hidden;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	h1 {
		position: relative;
		z-index: 3;
		img {
			display: block;
			margin: 0 auto;
			opacity: 0;
			&.txt1 {
				width: 24.2rem;
				transition: 0.8s 0s ease-out;
				transform: translate(-2rem, 0);
			}
			&.txt2 {
				margin-top: -1.4rem;
				width: 26.5rem;
				transition: 0.8s 0.1s ease-out;
				transform: translate(2rem, 0);
			}
			&.txt3 {
				margin-top: -0.2rem;
				width: 32.5rem;
				transition: 0.8s 0.2s ease-out;
				transform: translate(-2rem, 0);
			}
		}
	}
	.image {
		position: relative;
		width: 34rem;
		margin: 2.5rem auto 0 auto;
		opacity: 0;
		transition: 0.8s 0.6s ease-out;
		transform: scale(1.1,1.1);
		z-index: 2;
	}
	.todate {
		position: absolute;
		top: 32.5rem;
		right: 3rem;
		width: 18.3rem;
		opacity: 0;
		transition: 0.8s 0.6s ease-out;
		transform: scale(0.9,0.9);
		z-index: 3;
	}
	ul {
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: -6.6rem;
		margin-bottom: 0.7rem;
		z-index: 3;
		li {
			width: 10.9rem;
			opacity: 0;
			transition: 0.8s 0.5s ease-out;
			&.point1 {
				transform: translate(0, -2rem);
			}
			&.point2 {
				padding-top: 1.5rem;
				transform: translate(0, 2rem);
			}
			&.point3 {
				transform: translate(0, -2rem);
			}
		}
	}
	.back {
		position: absolute;
		top: -0.5rem;
		left: 0;
		display: block;
		width: 100%;
		opacity: 0;
		transition: 0.8s 1.5s ease-out;
		transform: scale(0.9,0.9);
		z-index: 1;
	}
	.arrow {
		animation: arrow 1.5s ease infinite;
	}
	&.active {
		h1 {
			img {
				&.txt1 {
					opacity: 1;
					transform: translate(0, 0);
				}
				&.txt2 {
					opacity: 1;
					transform: translate(0, 0);
				}
				&.txt3 {
					opacity: 1;
					transform: translate(0, 0);
				}
			}
		}
		.image {
			opacity: 1;
			transform: scale(1,1);
		}
		.todate {
			opacity: 1;
			transform: scale(1,1);
		}
		ul {
			li {
				&.point1 {
					opacity: 1;
					transform: translate(0, 0);
				}
				&.point2 {
					opacity: 1;
					transform: translate(0, 0);
				}
				&.point3 {
					opacity: 1;
					transform: translate(0, 0);
				}
			}
		}
		.back {
			opacity: 1;
			transform: scale(1,1);
		}
	}
}

.worry-area {
	position: relative;
	border-radius: 5rem;
	background: var(--color-main) url(../img/worry-bg.jpg) no-repeat center top / cover;
	padding: 5rem 1.5rem;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	z-index: 4;
	h2 {
		margin-bottom: 3rem;
		padding: 0 0.5rem;
	}
	p {
		position: relative;
		margin-top: 2rem;
		img {
		}
		&:nth-of-type(even) {
			padding-right: 1.5rem;
		}
		&:nth-of-type(odd) {
			padding-left: 1.5rem;
		}
	}
	.arrow {
		position: absolute;
		bottom: -7rem;
		left: 50%;
		display: block;
		width: 15rem;
		height: 12rem;
		margin-left: -7.5rem;
		animation: arrow 1.5s ease infinite;
	}
}

.about-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: var(--color-w) url(../img/about-bg.png) no-repeat center bottom / cover;
	margin-top: -5rem;
	padding: 10rem 2rem 5rem 2rem;
	font-size: 1.4rem;
	line-height: 1.7;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	z-index: 3;
	h2 {
		position: relative;
		margin-bottom: 2rem;
		z-index: 2;
		img {
			display: block;
			&.pop {
				width: 13rem;
				margin-bottom: 0.5rem;
			}
		}
	}
	.image {
		position: absolute;
		top: 7rem;
		right: 2.2rem;
		width: 12.5rem;
		z-index: 1;
	}
	.box {
		position: relative;
		border-radius: 2rem;
		background-color: var(--color-w);
		padding: 3rem 2rem;
		box-shadow: 0 0.5rem 0.5rem rgba(255, 136, 0, 0.4);
		z-index: 2;
		h3 {
			background: linear-gradient(to bottom,  rgba(255,238,51,0) 0%,rgba(255,238,51,0) 49%,rgba(255,238,51,1) 50%,rgba(255,238,51,1) 100%);
			margin-bottom: 1.5rem;
			padding-bottom: 0.5rem;
			font-size: 2rem;
			font-weight: 900;
			line-height: 1;
			text-align: center;
			color: var(--color-main);
			span {
				font-size: 1.4rem;
			}
		}
		p {
			margin-top: 1rem;
			strong {
				font-weight: 700;
				text-decoration: underline;
				color: var(--color-cv1);
			}
		}
		.data {
			margin-top: 1.5rem;
		}
	}
}
.data {
	display: flex;
	justify-content: space-between;
	li {
		width: 14.4rem;
	}
}

.reason-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: var(--color-cv1) url(../img/reason-bg.png) repeat-y center bottom / 100%;
	margin-top: -5rem;
	padding: 8rem 2rem 5rem 2rem;
	font-size: 1.4rem;
	line-height: 1.7;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	z-index: 2;
	h2 {
		position: relative;
		margin-bottom: -2.5rem;
		z-index: 1;
	}
	.box {
		position: relative;
		border-radius: 2rem;
		border: 2px solid var(--color-main);
		background-color: var(--color-w);
		margin-top: 4.5rem;
		padding: 0 2rem 0 2rem;
		box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
		z-index: 2;
		h3 {
			position: relative;
			margin-top: -3.5rem;
			margin-bottom: 1.5rem;
			font-size: 1.8rem;
			font-weight: 900;
			line-height: 1.4;
			text-align: center;
			color: var(--color-main);
			img {
				display: block;
				width: 7rem;
				height: auto;
				margin: 0 auto 0.5rem auto;
			}
		}
		p {
			margin-top: 1rem;
			strong {
				font-weight: 700;
				text-decoration: underline;
				color: var(--color-cv1);
			}
			&.service {
				position: relative;
				border-radius: 0 0 1.8rem 1.8rem;
				background: #fffbcc url(../img/reason-img_02.png) no-repeat right bottom / 13rem;
				width: calc(100% + 4rem);
				margin: 0 -2rem;
				padding: 2rem 13rem 2rem 2rem;
				font-size: 1.6rem;
				font-weight: 900;
				line-height: 1.5;
				strong {
					font-weight: 900;
					text-decoration: none;
				}
			}
		}
		.image {
			width: calc(100% + 4rem);
			margin: 1.5rem -2rem 0 -2rem;
		}
	}
}

.google-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: #e0efff url(../img/google-bg.png) no-repeat center top / 100%;
	margin-top: -5rem;
	padding: 10rem 2rem 5rem 2rem;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	z-index: 1;
	.data {
		padding: 0 2rem;
	}
}

.difference-area {
	position: relative;
	filter: drop-shadow(0 0.8rem 0.8rem rgba(0, 0, 0, 0.2));
	z-index: 4;
	.inner {
		position: relative;
		border-radius: 5rem 5rem 0 0;
		background: #e0efff url(../img/difference-bg.png) repeat-y center top / 100%;
		padding: 2.5rem 2rem 0 2rem;
		width: 100%;
		height: 100%;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 50% 100%, 0 calc(100% - 5rem));
	}
	.box {
		position: relative;
		border-radius: 2rem;
		background-color: var(--color-w);
		margin: 1rem 0;
		padding: 3rem 2rem;
		font-size: 1.4rem;
		line-height: 1.6;
		text-align: center;
		box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.8);
		&:before {
			content: "";
			position: absolute;
			left: 50%;
			bottom: -2.5rem;
			width:0;
			height:0;
			border-style:solid;
			border-width: 2.5rem 3rem 0 3rem;
			border-color: #003 transparent transparent transparent;
			margin-left: -3rem;
		}
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			bottom: -2.2rem;
			width:0;
			height:0;
			border-style:solid;
			border-width: 2.5rem 3rem 0 3rem;
			border-color: var(--color-w) transparent transparent transparent;
			margin-left: -3rem;
		}
		&:nth-of-type(1) {
			z-index: 3;
		}
		&:nth-of-type(2) {
			z-index: 2;
		}
		&:nth-of-type(3) {
			margin-bottom: 3.5rem;
			z-index: 1;
		}
		p {
			margin-top: 1.2rem;
			text-align: center;
			&:first-child {
				margin-top: 0;
			}
		}
		em {
			font-weight: 900;
		}
		strong {
			font-weight: 900;
			color: var(--color-main);
			span {
				font-size: 1.8rem;
			}
		}
		.note {
			font-size: 1.2rem;
		}
		ul {
			display: flex;
			justify-content: space-between;
			margin-top: 1.6rem;
			li {
				width: 14.4rem;
			}
		}
	}
	.btm {
		display: block;
		margin: -1rem auto 0 auto;
		width: 15rem;
	}
}

.valuable-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: #ffebcc url(../img/valuable-bg.png) no-repeat center 11rem / 100%;
	margin-top: -5rem;
	padding: 8rem 2rem 5rem 2rem;
	font-size: 1.4rem;
	line-height: 1.7;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	z-index: 3;
	h2 {
		position: relative;
		margin-bottom: -2.5rem;
		z-index: 2;
	}
	.box {
		position: relative;
		border-radius: 2rem;
		background-color: var(--color-w);
		margin-top: 1rem;
		padding: 3rem 2rem;
		box-shadow: 0 0.5rem 0.5rem rgba(255, 136, 0, 0.4);
		z-index: 1;
		h3 {
			margin-bottom: 2rem;
			font-size: 2rem;
			font-weight: 900;
			line-height: 1.4;
			text-align: center;
			color: var(--color-cv1);
			span {
				background: linear-gradient(to bottom,  rgba(255,238,51,0) 0%,rgba(255,238,51,0) 49%,rgba(255,238,51,1) 50%,rgba(255,238,51,1) 100%);
			}
		}
		p {
			margin-top: 1.2rem;
			strong {
				font-weight: 700;
				text-decoration: underline;
				color: var(--color-cv1);
			}
		}
		.point {
			position: relative;
			background-color: #fff799;
			border-radius: 1rem;
			margin-top: 2rem;
			padding: 1.2rem 2rem 1.6rem 2rem;
			h4 {
				width: 7.5rem;
				margin: 0 auto;
			}
			dl {
				display: flex;
				flex-wrap: wrap;
				margin-top: 1rem;
				dt {
					width: 3.2em;
					color: var(--color-b);
				}
				dd {
					width: calc(100% - 3.2em);
				}
			}
			&:before {
				content: "";
				position: absolute;
				top: -1.4rem;
				left: 50%;
				width:0;
				height:0;
				border-style:solid;
				border-width: 0 1.5rem 1.5rem 1.5rem;
				border-color: transparent transparent #fff799 transparent;
				margin-left: -1.5rem;
			}
		}
		.valuable-list {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-top: 2rem;
			img {
				width: 7rem;
			}
			dl {
				width: calc(100% - 8.5rem);
				dt {
					margin-bottom: 0.5rem;
					font-size: 1.8rem;
					font-weight: 900;
					line-height: 1.3;
				}
				dd {}
			}
		}
	}
}

.case-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background: var(--color-w) url(../img/case-bg.png) center center / 12rem;
	margin-top: -5rem;
	padding: 10rem 2rem 5rem 2rem;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	overflow: hidden;
	z-index: 2;
	.case-slick {
		width: calc(100% + 4rem);
		margin: 2rem -2rem 0 -2rem;
		.read {
			padding: 0 2rem 2rem 2rem;
		}
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			min-height: 8rem;
			font-size: 1.8rem;
			font-weight: 900;
			line-height: 1.3;
			text-align: center;
			color: var(--color-main);
		}
		.data {
			position: relative;
			border-radius: 1rem;
			background-color: var(--color-yellow);
			filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.2));
			img {
				position: relative;
				display: block;
				max-width: 34.5rem;
				width: 34.5rem;
				margin-left: -1rem;
			}
		}
		.slick-next, .slick-prev {
			position: absolute;
			bottom: 14rem;
			display: block;
			width: 3rem;
			height: 6rem;
			padding-top: 6rem;
			font-size: 0;
			overflow: hidden;
			z-index: 10;
		}
		.slick-prev {
			left: 0;
			background: url(../img/case-prev.png) no-repeat left top / 3rem;
		}
		.slick-next {
			right: 0;
			background: url(../img/case-next.png) no-repeat right top / 3rem;
		}
		.slick-dots {
			display: flex;
			justify-content: center;
			gap: 1rem;
			li {
				width: 2rem;
				button {
					display: block;
					border-radius: 2rem;
					background-color: var(--color-main);
					width: 2rem;
					height: 2rem;
					padding-top: 2rem;
					font-size: 0;
					overflow: hidden;
				}
				&.slick-active {
					button {
						background-color: var(--color-cv1);
					}
				}
			}
		}
	}
}

.faq-area {
	position: relative;
	border-radius: 0 0 5rem 5rem;
	background-color: #eee;
	margin-top: -5rem;
	padding: 10rem 2rem 5rem 2rem;
	box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
	overflow: hidden;
	z-index: 1;
	h2 {
		margin-bottom: 3rem;
	}
	.faq-list {
		border: 2px solid var(--color-main);
		border-radius: 2rem;
		background-color: var(--color-w);
		margin-top: 1rem;
		padding: 1.5rem;
		box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
		dt {
			position: relative;
			display: flex;
			align-items: center;
			min-height: 4rem;
			padding: 0 3rem 0 5rem;
			font-size: 1.8rem;
			font-weight: 900;
			letter-spacing: 0;
			line-height: 1.1;
			color: var(--color-main);
			cursor: pointer;
			&:before {
				content: "Q";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				border-radius: 4rem;
				background-color: var(--color-main);
				width: 4rem;
				height: 4rem;
				font-size: 2.4rem;
				font-weight: 900;
				line-height: 4rem;
				letter-spacing: 0;
				text-align: center;
				overflow: hidden;
				color: #ff6;
			}
			&:after {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				background: url(../img/faq-open.png) no-repeat center center / 2rem;
				width: 2rem;
				height: 4rem;
			}
			&.active {
				&:after {
					background: url(../img/faq-close.png) no-repeat center center / 2rem;
				}
			}
		}
		dd {
			position: relative;
			display: none;
			border-top: 2px dashed #ddd;
			min-height: 5.5rem;
			margin-top: 1.4rem;
			padding-top: 1.4rem;
			padding-left: 5rem;
			font-size: 1.4rem;
			line-height: 1.7;
			&:before {
				content: "A";
				position: absolute;
				top: 1.5rem;
				left: 0;
				display: block;
				border-radius: 4rem;
				background-color: #cce6ff;
				width: 4rem;
				height: 4rem;
				font-size: 2.4rem;
				font-weight: 900;
				line-height: 4rem;
				letter-spacing: 0;
				text-align: center;
				overflow: hidden;
				color: var(--color-main);
			}
		}
	}
}

.cv1 {
	display: none;
	position: sticky;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 9rem;
	z-index: 100;
	.cv1-box {
		position: relative;
		width: 37.5rem;
		height: 9rem;
	}
	p {
		height: 4rem;
		padding: 0 2rem;
		z-index: 2;
	}
	ul {
		display: flex;
		height: 5rem;
		filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.15));
		z-index: 1;
		li {
			border-radius: 1rem 1rem 0 0;
			background-color: var(--color-w);
			overflow: hidden;
			&.tel {
				width: 23.7rem;
				margin-right: -0.2rem;
			}
			&.line {
				width: 14rem;
			}
		}
	}
}

.cv2 {
	position: relative;
	padding: 5rem 2rem;
	h2 {
		height: 6rem;
	}
	.cv2-box {
		filter: drop-shadow(0 0 0.8rem rgba(0, 0, 0, 0.15));
	}
	ul {
		position: relative;
		display: flex;
		justify-content: center;
		gap: 4px;
		z-index: 2;
		li {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 1rem 1rem 0 0;
			width: 14.5rem;
			height: 4rem;
			font-size: 1.6rem;
			font-weight: 900;
			line-height: 1;
			text-align: center;
			color: var(--color-w);
			cursor: pointer;
			&.tel {
				border: 2px solid var(--color-cv1);
				background-color: var(--color-cv1);
				border-bottom: none;
				&.active {
					background-color: var(--color-w);
					color: var(--color-cv1);
				}
			}
			&.line {
				border: 2px solid var(--color-cv2);
				background-color: var(--color-cv2);
				border-bottom: none;
				&.active {
					background-color: var(--color-w);
					color: var(--color-cv2);
				}
			}
			&.active:before {
				content: "";
				position: absolute;
				left: 0;
				bottom: -3px;
				display: block;
				background-color: var(--color-w);
				width: 100%;
				height: 4px;
			}
		}
	}
	.content {
		display: none;
		position: relative;
		border-radius: 2rem;
		background-color: var(--color-w);
		padding: 3rem 2rem;
		z-index: 1;
		&:first-of-type {
			display: block;
		}
		dl {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 0.5rem;
			z-index: 1;
			dt {
				background-color: var(--color-w);
				width: 8.5rem;
				margin-bottom: 2rem;
				img {
					width: 7rem;
				}
			}
			dd {
				width: calc(100% - 8.5rem);
				margin-bottom: 2rem;
				font-size: 1.3rem;
				line-height: 1.6;
				strong {
					font-size: 1.8rem;
					font-weight: 900;
				}
			}
		}
		.btn {
			border-radius: 1.6rem;
			background-color: var(--color-w);
			margin-top: 0.6rem;
			filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.2));
		}
		.warning {
			margin: 1rem 0 0 0;
			font-size: 1.2rem;
			line-height: 1;
			text-align: center;
			color: #e30;
		}
		&.tel {
			border: 2px solid var(--color-cv1);
			dl {
				&:before {
					content: "";
					position: absolute;
					top: 0;
					left: 3.5rem;
					display: block;
					border-left: 2px dotted var(--color-cv1);
					height: calc(100% - 7rem);
					z-index: -1;
				}
			}
		}
		&.line {
			border: 2px solid var(--color-cv2);
			dl {
				&:before {
					content: "";
					position: absolute;
					top: 0;
					left: 3.5rem;
					display: block;
					border-left: 2px dotted var(--color-cv2);
					height: calc(100% - 7rem);
					z-index: -1;
				}
			}
		}
	}
}











@keyframes arrow {
	0% {
		transform: translate(0, 0rem);
	}
	50% {
		transform: translate(0, 1rem);
	}
	75% {
		transform: translate(0, 0rem);
	}
	100% {
		transform: translate(0, 0rem);
	}
}

@media screen and (min-width:768px) {
	body {
		position: relative;
		padding: 6rem 0;
	}
	#main {
		position: relative;
		border-radius: 1rem;
		background-color: var(--color-w);
		width: 37.5rem;
		margin-left: 50%;
		box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
		z-index: 10;
	}
	#header {
		border-radius: 1rem 1rem 0 0;
	}
	#footer {
		border-radius: 0 0 1rem 1rem;
	}
}


@media screen and (min-width: 1025px) {
	.cv1 {
		display: none !important;
	}
}
@media screen and (min-width:768px) and (max-width: 1024px) {
	.cv1 {
		display: block;
	}
}

.pc-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	z-index: 2;
	.menu-inner {
		position: relative;
		width: 100%;
		max-width: 100rem;
		padding: 4rem 5rem 0 5rem;
		.menu-area {
			position: relative;
			width: 32rem;
			padding-bottom: 10rem;
			.box {
				border-radius: 2rem;
				background-color: rgba(255,255,255,0.9);
				width: 100%;
				padding: 2rem 3rem 3rem 3rem;
				box-shadow: 0 0.8rem 0.8rem rgba(0, 0, 0, 0.2);
				.menu {
					margin-top: 1.5rem;
					li {
						margin-top: 0.5rem;
						a {
							position: relative;
							display: flex;
							align-items: center;
							border-radius: 0.4rem;
							background-color: #def;
							width: 100%;
							height: 3.5rem;
							padding: 0 2.5rem 0 1.5rem;
							font-size: 1.4rem;
							font-weight: 700;
							line-height: 1;
							color: var(--color-main);
							&:hover {
								background-color: #acf;
							}
							&:after {
								content: "";
								position: absolute;
								top: 50%;
								right: 1.5rem;
								width:0;
								height:0;
								border-style:solid;
								border-width: 0.5rem 0 0.5rem 0.5rem;
								border-color: transparent transparent transparent var(--color-main);
								margin-top: -0.5rem;
							}
						}
					}
				}
				.warning {
					margin: 1.5rem 0 0.5rem 0;
					font-size: 1.2rem;
					line-height: 1;
					text-align: center;
					color: #e30;
				}
				.btn {
					li {
						margin-top: 0.5rem;
					}
				}
			}
			.image1 {
				position: absolute;
				left: -2rem;
				bottom: 0;
				width: 16rem;
			}
			.image2 {
				position: absolute;
				right: -2rem;
				bottom: 0;
				width: 16rem;
			}
		}
	}
}
.pc-img {
	position: fixed;
	bottom: 0;
	left: calc(50% + 42.5rem);
	width: 20rem;
	z-index: 2;
}
.pc-bg {
	position: fixed;
	top: 0;
	left: 0;
	background: #fff url(../img/pc-bg.png) no-repeat center center / cover;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	z-index: 1;
}

@media screen and (max-width: 1024px) {
	#main {
		margin: 0 auto;
	}
	.pc-menu {
		display: none;
	}
	.pc-img {
		position: fixed;
		bottom: 0;
		left: calc(50% + 20rem);
		width: 20rem;
		z-index: 2;
	}
}

@media screen and (min-width: 1px) and (max-width: 767px) {
	.pc-menu, .pc-bg {
		display: none !important;
	}
}