@charset "utf-8";

#header {
	position:fixed;
	background-color:transparent;
	transition: .3s;
	background: #FFFFFF;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .33) 60%);
	.logo {
		a {
			text-shadow:0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF;
			
		}
	}
	&.scroll {
		background-color:rgba(255,255,255,.8);
	}
	#menu-gmenu {
		& > li {
			& > a {
				text-shadow:0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF;
			}
		}
	}
}

main {
	overflow: clip;
}

section {
	.wrap {
		padding:100px 0;
		.contents {
			.ttl_h2 {
				font-size:min(4.0vw,4.0rem);
				font-weight:500;
				text-align:center;
				line-height:1.5;
				margin-bottom:.33em;
				span {
					font-size:1.3em;
					font-family:inherit;
					font-weight:600;
				}
				& + p {
					text-align:center;
					font-size:1.8rem;
					line-height:1.8;
					margin-bottom:3em;
				}
			}
			.btn {
				font-size:2.4rem;
				letter-spacing:.03em;
				background-color:var(--color_main);
				display:grid;
				grid-template-columns:1.33em auto .55em;
				grid-column-gap:.66em;
				align-items:center;
				justify-content:center;
				color:var(--color_white);
				height:2.6em;
				padding:0 .5em;
				border-radius:6px;
				box-shadow:0 2px 4px rgba(0,0,0,.5);
				max-width:14em;
				margin:0 auto;
				border:1px solid var(--color_main);
				&::after {
					content:'';
					aspect-ratio:1;
					border-right:3px solid var(--color_white);
					border-bottom:3px solid var(--color_white);
					transform:rotate(-45deg);
				}
			}
			.splide__arrow {
				background:url(../img/common/arrow_red.svg) no-repeat center center/contain;
				width:50px;
				height:50px;
				box-shadow:0 4px 4px rgba(0,0,0,.2);
				opacity:1;
				svg {
					display:none;
				}
				&.splide__arrow--next {
					right:-50px;
				}
				&.splide__arrow--prev {
					left:-50px;
					background-image:url(../img/common/arrow_red_prev.svg);
				}
			}
		}
	}
}

#mv {
	.wrap {
		aspect-ratio:1.76;
		background:url(../img/top/mv_bg.jpg) no-repeat center center/cover;
		display:grid;
		grid-template-columns:1fr;
		align-items:center;
		justify-content:center;
		overflow:hidden;
		position:relative;
		&::before {
			content:'';
			display:block;
			width:60%;
			height:100%;
			position:absolute;
			z-index:2;
			left:0;
			top:0;
			background: #F5F1EDD9;
			background: linear-gradient(90deg, rgba(245, 241, 237, 1) 25%, rgba(255, 255, 255, 0.85) 50%, rgba(245, 255, 255, 0.46) 75%, rgba(255, 255, 255, 0) 100%);
		}
		&::after {
			content:'';
			display:block;
			width:250px;
			aspect-ratio:1;
			background:url(../img/top/mv_obj.png) no-repeat center center/contain;
			position:absolute;
			z-index:3;
			left:5%;
			bottom:10%;
		}
		.contents {
			display:grid;
			justify-items:start;
			position:relative;
			z-index:4;
			h1 {
				font-size:min(4.4vw,5.0rem);
				font-weight:500;
				line-height:1.5;
				margin-bottom:.5em;
				text-shadow:0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF,0 0 6px #FFFFFF,0 0 7px #FFFFFF;
				span {
					font:inherit;
					font-size:1.4em;
				}
			}
			p {
				font-size:min(2.0vw,2.2rem);
				line-height:1.5;
				margin-bottom:3em;
				text-shadow:0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF,0 0 6px #FFFFFF,0 0 7px #FFFFFF;
			}
			ul {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				grid-column-gap:15px;
				font-size:2.0rem;
				li {
					a {
						display:grid;
						grid-template-columns:2.6em 7.5em .66em;
						align-items:center;
						grid-column-gap:.5em;
						border:2px solid var(--color_main);
						border-radius:8px;
						line-height:1.5;
						height:4em;
						padding:0 1em;
						background-color:var(--color_bg1);
						span {
							aspect-ratio:1;
							background-color:var(--color_main);
							border-radius:50%;
							display:grid;
							align-items:center;
							justify-content:center;
							grid-template-columns:60%;
						}
						&::after {
							content:'';
							aspect-ratio:1;
							border-right:2px solid var(--color_def);
							border-bottom:2px solid var(--color_def);
							transform:rotate(-45deg);
						}
						&.btn_search {
							border-color:var(--color_sub);
							background-color:var(--color_bg2);
							span {
								background-color:var(--color_sub);
							}
						}
					}
				}
			}
		}
		#mv_slider {
			position:absolute;
			width:100%;
			height:100%;
			inset:0;
			z-index:1;
			pointer-events:none;
			.splide__track {
				width:100%;
				height:100%;
			}
			.splide__slide {
				width:100%;
				height:100%;
				img {
					display:block;
					width:100%;
					height:100%;
					object-fit:cover;
				}
			}
		}
	}
}


@media screen and (min-width:1640.1px) {
	
	#mv {
		.wrap {
			/* aspect-ratio:unset;
			height:900px; */
		}
	}

}


#select {
	.wrap {
		background:url(../img/top/select_bg.png) no-repeat center top/min(100vw, 1400px) auto;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-column-gap:2%;
				li {
					a {
						display:block;
						border-radius:10px;
						box-shadow:0 4px 25px rgba(0,0,0,.15);
						p {
							font-size:min(2.4vw,2.0rem);
							line-height:1;
							padding:1em;
							display:grid;
							grid-template-columns:1fr 1.5em;
							align-items:center;
						}
					}
				}
			}
		}
	}
}

#area {
	.wrap {
		background:url(../img/top/area_bg.jpg) no-repeat center center/cover;
		.contents {
			.point {
				font-size:min(3.0vw,2.6rem);
				color:var(--color_main);
				display:grid;
				grid-template-columns:repeat(3,auto);
				align-items:center;
				justify-content:center;
				grid-column-gap:2em;
				margin-bottom:2em;
				strong {
					line-height:1.5;
					text-align:center;
					span {
						font-size:1.23em;
					}
				}
				&::before,&::after {
					content:'';
					width:3em;
					height:3px;
					background-color:var(--color_main);
					transform:translateY(.1em) rotate(50deg);
				}
				&::after {
					transform:translateY(.1em) rotate(-50deg);
				}
			}
			.contents_inner {
				background-color:var(--color_white);
				padding:60px;
				border-radius:10px;
				box-shadow: 0 4px 25px rgba(0,0,0,.2);
				display:grid;
				grid-template-columns:repeat(3,1fr);
				grid-gap:15px;
				font-size:2.0rem;
				margin-bottom:2.5em;
				li {
					a {
						box-shadow:0 0 3px rgba(0,0,0,.25);
						border-radius:10px;
						padding:.5em .75em;
						display:grid;
						grid-template-columns:5em 1fr .5em;
						grid-column-gap:.5em;
						align-items:center;
						p {
							font:inherit;
						}
						&::after {
							content:'';
							aspect-ratio:1;
							border-right:2px solid var(--color_def);
							border-bottom:2px solid var(--color_def);
							transform:rotate(-45deg);
						}
					}
				}
			}
		}
	}
}

#think {
	.wrap {
		background:url(../img/top/think_bg.jpg) no-repeat center bottom/cover;
		.contents {
			.ttl_h2 {
				margin-bottom:1em;
			}
			.contents_inner {
				display:flex;
				flex-wrap:wrap;
				gap: 30px 2%;
				justify-content:center;
				font-size:min(2.2vw,2.2rem);
				li {
					width:32%;
					background-color:var(--color_white);
					border-radius:10px;
					box-shadow:0 4px 25px rgba(0,0,0,.15);
					display:grid;
					justify-items:center;
					grid-row-gap:1em;
					padding:1.5em;
					img {
						width:33%;
					}
					p {
						font-size:inherit;
						line-height:1.5;
						text-align:center;
						font-weight:600;
						span {
							font-size:1.36em;
						}
					}
				}
			}
		}
	}
}

#possible {
	.wrap {
		background:url(../img/top/possible_bg.png) no-repeat center top/min(100vw,1400px) auto;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:72% 1fr;
				align-items:center;
				.msg {
					display:grid;
					grid-template-columns:25% 1fr;
					grid-column-gap:8%;
					align-items:end;
					.detail {
						padding-bottom:2em;
						h2 {
						font-size:min(2.6vw,2.6rem);
							font-weight:500;
							margin-bottom:2.5em;
							span {
								font-family:inherit;
								font-size:1.2em;
							}
						}
						p {
							font-size:min(1.8vw,1.8rem);
							margin-bottom:2em;
						}
						a {
							font-size:1.8rem;
							color:var(--color_main);
							display:inline-grid;
							grid-template-columns:auto 1.8em;
							align-items:center;
							grid-column-gap:.66em;
						}
					}
				}
				.photo {
					display:grid;
					grid-template-columns:auto 1fr;
					grid-column-gap:15%;
					align-items:end;
					p {
						font-size:min(2.4vw,2.4rem);
						letter-spacing:.5em;
						writing-mode: vertical-rl;
						text-indent:-4em;
						padding-top:4em;
						span {
							font:inherit;
						}
					}
					.img {
						position:relative;
						padding-bottom:6em;
						img {
							display:block;
							&:last-child {
								position:absolute;
								width:150%;
								max-width:150%;
								left:25%;
								bottom:90%;
								z-index:-1;
							}
						}
					}
				}
			}
		}
	}
}


#service {
	.wrap {
		background:url(../img/top/possible_bg02.jpg) no-repeat center center/cover;
		.contents {
			.contents_inner {
				display:flex;
				flex-wrap:wrap;
				gap: 40px 3.5%;
				justify-content:center;
				font-size:min(2.4vw,2.2rem);
				li {
					width:31%;
					a {
						background-color:var(--color_white);
						border-radius:10px;
						display:grid;
						grid-template-rows:auto 1fr;
						height: 100%;
						box-shadow: 0 2px 10px rgba(0,0,0,.15);
						.detail {
							font-size:min(2.0vw,1.8rem);
							padding: 1.5em;
							display:grid;
							grid-template-rows:auto 1fr auto;
							h3 {
								font-size:min(2.1vw,2.0rem);
								margin-bottom:.66em;
								line-height: 1.3;
							}
							p {
								font:inherit;
								line-height:1.5;
								margin-bottom:.66em;
							}
							.link {
								font-size:1.6rem;
								width:7em;
								color:var(--color_main);
								display:grid;
								grid-template-columns:1fr 1.66em;
								align-items:center;
								margin-left:auto;
							}
						}
					}
				}
			}
		}
	}
}

#consultation {
	.wrap {
		background:url(../img/top/consultation_bg.jpg) no-repeat center center/cover;
		.contents {
			.contents_inner {
				max-width:1000px;
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:8%;
				li {
					background:url(../img/top/consultation_bg.png) no-repeat center center/cover var(--color_main);
					border-radius:10px;
					display:grid;
					justify-items:center;
					align-content:center;
					aspect-ratio:1.58;
					* {
						color:var(--color_white);
					}
					h3 {
						font-size:min(2.4vw,2.4rem);
						margin-bottom:.5em;
					}
					p {
						font-size:min(1.8vw,1.8rem);
						line-height:1.5;
						margin-bottom:1.5em;
					}
					dl {
						display:grid;
						grid-row-gap:1em;
						justify-items:center;
						dt {
							font-size:min(2.4vw,2.4rem);
							span {
								font-size:min(6.4vw,6.4rem);
							}
						}
						dd {
							font-size:min(1.8vw,1.6rem);
							line-height:1.3;
							text-align:center;
						}
					}
					&:first-child {
						background-color:var(--color_sub);
					}
				}
			}
		}
	}
}

#proposal {
	.wrap {
		background:url(../img/top/proposal_bg.png) no-repeat center center/min(100vw,1400px) auto;
		.contents {
			h2 {
				margin-bottom:.66em;
			}
			#proposal_slider {
				margin:0 auto 50px;
				.splide__list {
					padding:15px 30px!important;
				}
				li {
					a {
						background-color:var(--color_white);
						border-radius:10px;
						box-shadow:0 4px 10px rgba(0,0,0,.15);
						padding:1.5em;
						display:grid;
						grid-template-rows:auto 1fr repeat(3,auto);
						height:100%;
						.img {
							overflow:hidden;
							border-radius:5px;
							img {
								display:block;
								aspect-ratio: 3/2;
								object-fit: cover;
							}
						}
						.catch {
							color:var(--color_sub);
							text-align:center;
							font-size:1.4rem;
							line-height:1.5;
							margin:1em 0 .66em;
						}
						h3 {
							display:grid;
							grid-template-columns:repeat(2,auto);
							align-items:center;
							justify-content:center;
							font-size:2.4rem;
							grid-column-gap:.33em;
							margin-bottom:.33em;
							span {
								font-size:1.5rem;
								color:#777777;
								font-weight:500;
							}
						}
						dl {
							font-size:1.6rem;
							display:grid;
							grid-template-columns:auto 1fr;
							align-items:center;
							grid-column-gap:.5em;
							dt {
								font-size:1.4rem;
								color:var(--color_sub);
								border:1px solid var(--color_sub);
								border-radius:3px;
								padding:.33em;
							}
							dd {
								line-height:1.5;
							}
							&:has( + dl) {
								margin-bottom:.5em;
							}
						}
					}
				}
			}
		}
	}
}

#simulation {
	.wrap {
		background:url(../img/top/simulation_bg.jpg) no-repeat center top/cover;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:8%;
			}
			.select {
				margin-bottom:30px;
				li {
					font-size:1.8rem;
					dl {
						dt {
							font-weight:600;
							margin-bottom:.75em;
						}
						dd {
							display:flex;
							gap:10px;
							label {
								background-color:var(--color_white);
								border:1px solid var(--color_def);
								box-shadow:0 4px 4px rgba(0,0,0,.2);
								border-radius:6px;
								display:grid;
								align-items:center;
								justify-content:center;
								height:3em;
								padding:0 1em;
								flex-grow:1;
								cursor: pointer;
								input {
									display:none;
								}
								&:has(input:checked) {
									color:var(--color_white);
									border:none;
								}
								&:has([name="type"]:checked) {
									background-color:var(--color_sub);
								}
								&:has([name="people"]:checked) {
									background-color:var(--color_main);
								}
							}
						}
					}
				}
			}
			.img {
				margin-bottom:50px;
				img {
					display:block;
					&.type2 {
						display:none;
					}
				}
			}
			.price {
				grid-row-gap:50px;
				li {
					dl {
						font-size:1.6rem;
						display:grid;
						justify-items:center;
						padding:2.5em;
						border-radius:15px;
						height: 100%;
						dt {
							font-size:2.0rem;
							margin-bottom:1em;
						}
						.price {
							font-size:4.0rem;
							font-weight:600;
							span {
								font-size:1.45em;
								&.type1opt {
									font-size: inherit;
								}
							}
						}
						.note {
							margin-top:1em;
							line-height:1.5;
							text-align: center;
							span {
								font:inherit;
								display: inline-block;
							}
						}
					}
					&.other {
						dl {
							background-color:#ECEBEA;
							border:1px solid var(--color_def);
						}
					}
					&.self {
						dl {
							background:url(../img/top/simulation_bg.png) no-repeat center center/100% 100% var(--color_main);
							* {
								color:var(--color_white);
							}
						}
					}
					&.total {
						grid-area:2/1/3/3;
						dl {
							background:url(../img/top/simulation_bg.png) no-repeat center center/100% 100% var(--color_sub);
							* {
								color:var(--color_white);
							}
							.price {
								span {
									font-size: 1.6em;
									&.inline-block {
										font:inherit;
										display: inline-block;
										line-height: 1;
									}
								}
							}
						}
					}
				}
			}
			& > .note {
				font-size: 1.8rem;
				display: grid;
				justify-content: center;
				padding-top: 1em;
				ul {
					li {
						line-height: 1.6;
						text-indent: -1em;
						padding-left: 1em;
					}
					&.type2 {
						display: none;
					}
				}
			}
			h2 {
				& + p {
					.type2 {
						display:none;
					}
				}
			}
			&:has([value="type2"]:checked) {
				p {
					.type1 {
						display:none;
					}
					.type2 {
						display:block;
					}
				}
				.img {
					img {
						&.type1 {
							display:none;
						}
						&.type2 {
							display:block;
						}
					}
				}
				.note {
					ul {
						&.type1 {
							display:none;
						}
						&.type2 {
							display:block;
						}
					}
				}
				.type1opt {
					display: none;
				}
			}
		}
	}
}

#voice {
	.wrap {
		background:url(../img/top/voice_bg.png) no-repeat center top/min(100vw,1400px) auto;
		.contents {
			h2 {
				margin-bottom:.66em;
			}
			#voice_slider {
				margin:0 auto 50px;
				.splide__list {
					padding:15px 20px!important;
				}
				li {
					a {
						background-color:#F5F1ED;
						border-radius:10px;
						box-shadow:0 4px 10px rgba(0,0,0,.15);
						padding:2em 1.5em;
						display:grid;
						grid-template-rows:repeat(3,auto) 1fr;
						justify-items:center;
						height:100%;
						img {
							width:78px;
						}
						.cate {
							padding:.66em 0;
						}
						h3 {
							font-size:2.0rem;
							color:var(--color_sub);
							line-height:1.5;
							margin-bottom:.5em;
						}
						p {
							line-height:1.5;
						}
					}
				}
				&:not(:has(.splide__slide:nth-child(2))),
				&:not(:has(.splide__slide:nth-child(3))),
				&:not(:has(.splide__slide:nth-child(4))){
					.splide__list {
						transform: unset!important;
					}
					.splide__arrows {
						display:none;
					}
				}
				&:not(:has(.splide__slide:nth-child(4))){
					margin-left: auto;
					margin-right: auto;
					.splide__list {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 30px;
						.splide__slide {
							margin:0!important;
						}
					}
					&:not(:has(.splide__slide:nth-child(3))) {
						max-width: 760px;
					}
					&:not(:has(.splide__slide:nth-child(2))) {
						max-width: 380px;
					}
				}
			}
		}
	}
}


@media (hover:hover) {

	section {
		.wrap {
			.contents {
				.btn {
					img,&::after {
						transition: .3s;
					}
					&:hover {
						opacity: 1;
						background-color: var(--color_bg1);
						color:var(--color_main);
						img {
							filter: var(--color_main_f);
						}
						&::after {
							border-color: var(--color_main);
							transform: translateX(3px) rotate(-45deg);
						}
					}
				}
				.splide__arrow {
					transition: .3s;
					&:hover {
						&.splide__arrow--next {
							transform: translate(3px,-50%);
						}
						&.splide__arrow--prev {
							transform: translate(-3px,-50%);
						}
					}
				}
			}
		}
	}
	
	#mv {
		.wrap {
			.contents {
				ul {
					li {
						a {
							span {
								transition: .3s;
								img {
									transition: .3s;
								}
							}
							&::after {
								transition: .3s;
							}
							&:hover {
								opacity: 1;
								background-color: var(--color_main);
								color:var(--color_bg1);
								span {
									background-color:var(--color_bg1);
									img {
										filter:var(--color_main_f);
									}
								}
								&::after {
									border-color:var(--color_bg1);
									transform: translateX(3px) rotate(-45deg);
								}
							}
							&.btn_search {
								&:hover {
									background-color: var(--color_sub);
									color:var(--color_bg2);
									span {
										background-color:var(--color_bg2);
										img {
											filter:var(--color_sub_f);
										}
									}
									&::after {
										border-color:var(--color_bg2);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#select {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							.img {
								overflow: hidden;
								img {
									transition: .3s;
								}
							}
							p {
								transition: .3s;
								img {
									transition: .3s;
								}
							}
							&:hover {
								opacity: 1;
								.img {
									img {
										transform: scale(1.03);
									}
								}
								p {
									color:var(--color_main);
									img {
										transform: translateX(3px);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#area {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							p {
								transition: .3s;
							}
							&::after {
								transition: .3s;
							}
							&:hover {
								opacity: 1;
								box-shadow: 0 4px 25px rgba(0,0,0,.25);
								background-color: var(--color_main);
								p {
									color:var(--color_bg1);
								}
								&::after {
									border-color:var(--color_bg1);
									transform: translateX(3px) rotate(-45deg);
								}
							}
						}
					}
				}
			}
		}
	}

	#possible {
		.wrap {
			.contents {
				.contents_inner {
					.msg {
						.detail {
							a {
								img {
									transition: .3s;
								}
								&:hover {
									opacity: 1;
									img {
										transform: translateX(3px);
									}
								}
							}
						}
					}
				}
			}
		}
	}


	#service {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							overflow: hidden;
							.img {
								overflow: hidden;
								img {
									transition: .3s;
								}
							}
							.detail {
								.link {
									img {
										transition: .3s;
									}
								}
							}
							&:hover {
								opacity: 1;
								background-color: var(--color_bg1);
								box-shadow: 0 4px 25px rgba(0,0,0,.2);
								.img {
									img {
										transform: scale(1.03);
									}
								}
								.detail {
									.link {
										img {
											transform: translateX(3px);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#consultation {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							.img {
								overflow: hidden;
								img {
									transition: .3s;
								}
							}
							&:hover {
								opacity: 1;
								background-color: var(--color_bg2);
								.img {
									img {
										transform: scale(1.03);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#proposal {
		.wrap {
			.contents {
				#proposal_slider {
					li {
						a {
							.img {
								img {
									transition: .3s;
								}
							}
							&:hover {
								opacity: 1;
								background-color: var(--color_bg2);
								.img {
									img {
										transform: scale(1.03);
									}
								}
							}							
						}
					}
				}
			}
		}
	}

	#simulation {
		.wrap {
			.contents {
				.select {
					li {
						dl {
							dd {
								label {
									transition: .3s;
									&:has([name="type"]) {
										&:hover {
											background-color:var(--color_sub);
											color:var(--color_bg2);
											border-color:var(--color_sub);
										}
									}
									&:has([name="people"]) {
										&:hover {
											background-color:var(--color_main);
											color:var(--color_bg1);
											border-color:var(--color_main);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#voice {
		.wrap {
			.contents {
				#voice_slider {
					li {
						a {
							&:hover {
								opacity: 1;
								background-color: var(--color_bg2);
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:1300px) {


	section {
		.wrap {
			.contents {
				.splide__arrow {
					width:40px;
					height:40px;
					&.splide__arrow--next {
						right:-20px;
					}
					&.splide__arrow--prev {
						left:-20px;
					}
				}
			}
		}
	}

}

@media screen and (max-width:1024px) {

	#mv {
		.wrap {
			/* aspect-ratio:1.5; */
			padding: 6vw 0;
			align-content: end;
			.contents {
				p {
					margin-bottom:2.5em;
				}
			}
			&::after {
				width:min(20%,250px);
				left:1%;
				bottom:1%;
			}
		}
	}
	
	#area {
		.wrap {
			.contents {
				.contents_inner {
					padding:30px;
					font-size:min(2.0vw,2.0rem);
				}
			}
		}
	}

	#proposal {
		.wrap {
			.contents {
				#proposal_slider {
					.splide__track {
						overflow:visible;
					}
					li {
						width:320px!important;
					}
				}
			}
		}
	}
	
	#voice {
		.wrap {
			.contents {
				#voice_slider {
					.splide__track {
						overflow:visible;
					}
					li {
						width:300px!important;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {

	section {
		.wrap {
			padding:50px 0;
			.contents {
				.ttl_h2 {
					font-size:min(5.0vw,3.0rem);
					& + p {
						font-size:min(4.3vw,1.6rem);
						margin-bottom:2em;
					}
				}
				.btn {
					font-size:min(4.4vw,2.0rem);
				}
				.splide__arrow {
					width:30px;
					height:30px;
					&.splide__arrow--next {
						right:-15px;
					}
					&.splide__arrow--prev {
						left:-15px;
					}
				}
			}
		}
	}

	#mv {
		.wrap {
			aspect-ratio:1;
			position:relative;
			padding:10vw 0 0;
			align-content:center;
			&::before {
				width:80%;
			}
			.contents {
				h1 {
					font-size:min(5.2vw,3.0rem);
				}
				p {
					font-size:min(4.0vw,1.8rem);
					margin-bottom:2em;
				}
				ul {
					grid-template-columns:1fr;
					grid-row-gap:10px;
					font-size:min(4.3vw,2.0rem);
					li {
						a {
							height:3.6em;
							line-height:1.2;
						}
					}
				}
			}
			.splide__slide {
				img {
					object-position:right center;
				}
			}
		}
	}

	#select {
		.wrap {
			.contents {
				.contents_inner {
					grid-template-columns:repeat(2,1fr);
					grid-gap:min(5vw,20px);
					li {
						a {
							p {
								font-size:min(4.3vw,2.0rem);
								padding:.5em 1em;
							}
						}
					}
				}
			}
		}
	}

	#area {
		.wrap {
			background:url(../img/top/area_bg.jpg) no-repeat left center/cover;
			.contents {
				.ttl_h2 {
					& + p {
						margin-bottom:1em;
					}
				}
				.point {
					font-size:min(3.8vw,2.6rem);
					grid-column-gap:0;
					margin:0 -20px 1.5em;
					&::before,&::after {
						height:2px;
					}
				}
				.contents_inner {
					padding:15px;
					grid-template-columns:repeat(2,1fr);
					grid-gap:10px;
					font-size:min(3.7vw,1.8rem);
					li {
						a {
							border-radius:6px;
							padding:1em .5em;
							grid-template-columns:4em 1fr .5em;
							p {
								font:inherit;
							}
						}
					}
				}
			}
		}
	}

	#think {
		.wrap {
			background:url(../img/top/think_bg.jpg) no-repeat center bottom/100% auto #f5f5f3;
			.contents {
				.contents_inner {
					gap: 10px 2%;
					font-size:min(3.0vw,2.2rem);
					li {
						padding:1em 0;
						img {
							width:40%;
						}
						&:nth-last-child(-n+2) {
							width:40%;
							img {
								width:33%;
							}
						}
					}
				}
			}
		}
	}

	#possible {
		.wrap {
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:50px;
					.msg {
						grid-template-columns:25% 1fr;
						align-items:center;
						.detail {
							padding-bottom:0;
							h2 {
								font-size:min(5vw,2.6rem);
								margin-bottom:1em;
							}
							p {
								font-size:min(3.6vw,1.8rem);
								margin-bottom:1em;
							}
							a {
								font-size:min(4.4vw,1.8rem);
							}
						}
					}
					.photo {
						grid-template-columns:auto 50%;
						grid-column-gap:10%;
						justify-content:center;
						p {
							font-size:min(4.4vw,2.4rem);
							text-indent:-2.5em;
							padding-top:2.5em;
							span {
								display:block;
								padding-top:6em;
							}
						}
						.img {
							padding-bottom:0em;
							width:min(50%,160px);
							img {
								&:last-child {
									width:140%;
									max-width:140%;
									left:50%;
									bottom:40%;
								}
							}
						}
					}
				}
			}
		}
	}


	#service {
		.wrap {
			.contents {
				.contents_inner {
					gap: 15px 4%;
					font-size:min(3.6vw,2.2rem);
					li {
						width:48%;
						a {
							.detail {
								font-size:min(3.5vw,1.6rem);
								padding: 1em;
								h3 {
									font-size:min(3.8vw,2.0rem);
								}
								.link {
									font-size:min(3.5vw,1.6rem);
								}
							}
						}
					}
				}
			}
		}
	}

	#consultation {
		.wrap {
			.contents {
				h2 {
					& + p {
						margin-bottom:1em;
					}
				}
				.contents_inner {
					grid-column-gap:3%;
					max-width:560px;
					li {
						aspect-ratio:.9;
						* {
							color:var(--color_white);
						}
						h3 {
							font-size:min(4vw,1.8rem);
						}
						p {
							font-size:min(3.0vw,1.5rem);
							margin-bottom:1.0em;
						}
						dl {
							grid-row-gap:.5em;
							dt {
								font-size:min(4vw,1.8rem);
								span {
									font-size:min(8vw,6.4rem);
								}
							}
							dd {
								font-size:min(3.2vw,1.6rem);
								min-height:3.9em;
							}
						}
					}
				}
			}
		}
	}

	#proposal {
		.wrap {
			.contents {
				#proposal_slider {
					margin:0 auto 30px;
					.splide__list {
						padding:0!important;
					}
					li {
						width:260px!important;
						a {
							padding:1em;
							.catch {
								font-size:1.2rem;
							}
							h3 {
								font-size:2.0rem;
								span {
									font-size:1.4rem;
								}
							}
							dl {
								font-size:1.3rem;
								dt {
									font-size:1.2rem;
								}
							}
						}
					}
				}
			}
		}
	}

	#simulation {
		.wrap {
			.contents {
				h2 {
					& + p {
						text-align:left;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					grid-column-gap:4%;
					grid-row-gap:15px;
				}
				.select {
					margin-bottom:20px;
					li {
						font-size:1.5rem;
					}
				}
				.img {
					margin-bottom:30px;
				}
				.price {
					grid-row-gap:15px;
					li {
						dl {
							font-size:1.4rem;
							padding:1.5em 0;
							border-radius:10px;
							dt {
								font-size:1.6rem;
								margin-bottom:.5em;
							}
							.price {
								font-size:min(7.6vw,3.0rem);
							}
							.note {
								font-size:min(3.6vw,1.5rem);
							}
						}
						&.total {
							grid-area:unset;
							dl {
								padding:1.5em 1em;
							}
							.price {
								font-size:min(7.2vw,3.0rem);
								text-align: center;
							}
							span {
								line-height: 1.2;
							}
						}
					}
				}
				.note {
					font-size: 1.3rem;
				}
			}
		}
	}

	#voice {
		.wrap {
			.contents {
				#voice_slider {
					margin:0 auto 30px;
					.splide__list {
						padding:0!important;
					}
					li {
						width:260px!important;
						a {
							padding:1.5em;
							img {
								width:70px;
							}
							h3 {
								font-size:1.8rem;
							}
						}
					}
				}
			}
		}
	}

}