@charset 'UTF-8';

/*----------------------------------------

	- lead
	- about
	- offer
	- support
	- flow

-----------------------------------------*/

.bg {
	position: relative;
}

.bg::before {
	content: '';
	display: block;
	z-index: -2;
	position: absolute;
	top: 500px;
	right: 0;
	left: 0;
	width: 150vw;
	height: 100%;
	margin: auto;
	background: transparent url(../../img/i_p01.webp) no-repeat left top;
	background-size: cover;
}

@media screen and (min-width: 768px) {
	.bg::before {
		top: -200px;
		right: -1090px;
		width: 1352px;
		height: 1997px;
	}
}

/*----------------------------------------
	lead
-----------------------------------------*/

#lead {
	width: 84%;
	margin: auto;
	padding-top: 179px;
}

#lead h1 {
	line-height: 1.2;
}

#lead h1 span {
	display: block;
}

#lead h1 span:last-child {
	margin: 6px 0 17px;
}

#lead>div {
	margin-top: 53px;
}

#lead>div p {
	display: block;
}

#lead>div p span {
	display: block;
}

#lead>div p span:first-child {
	width: 63.6%;
}

#lead>div p span:last-child {
	margin-top: 11px;
}

@media screen and (min-width: 768px) {
	#lead {
		max-width: 1200px;
		padding-top: 306px;
	}

	#lead h1 span:last-child {
		margin: 12px 0 35px;
	}

	#lead>div {
		display: flex;
		justify-content: space-between;
		margin-top: 107px;
	}

	#lead>div p {
		display: flex;
		align-items: center;
	}

	#lead>div p span:first-child {
		width: 340px;
	}

	#lead>div p span:last-child {
		margin-top: 0;
		margin-left: 40px;
	}
}

/*----------------------------------------
	about
-----------------------------------------*/

#about {
	width: 84%;
	margin: 70px auto 0;
}

#about h1+p {
	margin-top: 23px;
}

#about ul {
	display: grid;
	gap: 5.3vw;
	grid-template-columns: 1fr 1fr;
	margin-top: 28px;
}

#about ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--color_gray);
	font-size: 4.26vw;
	text-align: center;
}

@media screen and (min-width: 768px) {
	#about {
		max-width: 1200px;
		margin-top: 144px;
	}
}

@media screen and (min-width: 1200px) {
	#about h1+p {
		margin-top: 53px;
		line-height: 1.75;
		letter-spacing: unset;
	}

	#about ul {
		display: grid;
		gap: 40px;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin-top: 58px;
	}

	#about ul li {
		font-size: 2.2rem;
	}
}

/*----------------------------------------
	offer
-----------------------------------------*/

#offer {
	width: 84%;
	margin: 77px auto 0;
}

#offer ul {
	display: flex;
	flex-direction: column;
	gap: 50px;
	justify-content: space-between;
	margin-top: 25px;
}

#offer .point {
	display: flex;
	gap: 15px;
	align-items: center;
}

#offer .point span {
	display: block;
}

#offer .point span.robotoSlab {
	line-height: 1;
	text-align: center;
}

#offer .point span.robotoSlab>span:first-child {
	font-size: 1.5rem;
}

#offer .point span.robotoSlab>span:last-child {
	font-size: 4.5rem;
}

#offer .point span.robotoSlab+span {
	margin-top: 4px;
}

#offer .point+p.font16_18 {
	margin-top: 16px;
}

@media screen and (min-width: 768px) {
	#offer {
		max-width: 1200px;
		margin-top: 154px;
	}

	#offer ul {
		display: grid;
		gap: 39px 52px;
		grid-template-columns: auto auto auto;
		margin-top: 59px;
	}

	#offer li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		max-width: 365px;
	}

	#offer .point {
		gap: 30px;
	}

	#offer .point span.robotoSlab {
		width: 74px;
	}

	#offer .point span.robotoSlab>span:first-child {
		font-size: 2.2rem;
	}

	#offer .point span.robotoSlab>span:last-child {
		font-size: 7.1rem;
	}

	#offer .point span.robotoSlab+span {
		width: calc(100% - 104px);
		margin-top: 8px;
	}

	#offer .point+p.font16_18 {
		margin-top: 0;
	}
}

/*----------------------------------------
	support
-----------------------------------------*/

#support {
	width: 84%;
	margin: 77px auto 0;
}

#support section div {
	margin-top: 24px;
}

#support section div dl {
	width: 100%;
}

#support section div dl+dl {
	margin-top: 46px;
}

#support section div dl dd {
	padding-left: calc(1em + 5px);
}

#support section div dl dd:nth-of-type(1) {
	margin-top: 10px;
}

#support section div dl dd::before {
	content: '・';
	display: inline-block;
	margin-right: 5px;
	margin-left: calc(-1em - 5px);
}

#support section div dl:nth-of-type(2)::after {
	content: 'など';
	display: inline-block;
	margin-left: calc(1em + 5px);
	font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
	#support {
		max-width: 1200px;
		margin-top: 151px;
	}

	#support section div {
		display: flex;
		gap: 100px;
		justify-content: space-between;
		margin-top: 53px;
	}

	#support section div dl {
		width: calc(50% - 50px);
	}

	#support section div dl+dl {
		margin-top: 0;
	}

	#support section div dl dd {
		line-height: 2;
	}

	#support section div dl dd:nth-of-type(1) {
		margin-top: 22px;
	}

	#support section div dl:nth-of-type(2)::after {
		font-size: 1.8rem;
	}
}

/*----------------------------------------
	flow
-----------------------------------------*/

#flow {
	width: 100%;
	margin-top: 88px;
	padding: 88px 0 75px;
	background-color: rgba(235, 237, 240, 0.9);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#flow h1 {
	width: 84%;
	margin: auto;
}

#flow>section {
	width: 100%;
	margin: auto;
}

#flow>section .swiper {
	margin-top: 14px;
	padding: 0 8%;
}

#flow>section .swiper #step1 {
	width: 550px;
}

#flow>section .swiper #step2 {
	width: 634px;
}

#flow>section .swiper #step3,
#flow>section .swiper #step4,
#flow>section .swiper #step5,
#flow>section .swiper #step6,
#flow>section .swiper #step7,
#flow>section .swiper #step8 {
	width: 550px;
}

#flow>section .swiper .swiper-slide {
	opacity: 1;
	transition: transform 0.3s ease-out, transform-origin 0.3s ease-out, opacity 0.3s ease-out;
}

#flow>section .swiper .swiper-slide:not(.swiper-slide-active) {
	opacity: 0.3;
	transform: scale(0.75);
	transform-origin: top center;
	transition: transform 0.3s ease-out, transform-origin 0.3s ease-out, opacity 0.3s ease-out;
}

#flow>section .swiper .swiper-slide>p:nth-of-type(1) {
	display: flex;
}

#flow>section .swiper .swiper-slide>p:nth-of-type(1) span.font18_24 {
	display: flex;
	align-items: center;
}

#flow>section .swiper .swiper-slide>p:nth-of-type(1) span.font18_24::before {
	content: '';
	display: block;
	width: 20px;
	height: 1px;
	margin: 0 11px;
	background-color: #000;
}

#flow>section .swiper .swiper-slide:not(#step2)>div {
	margin-top: 24px;
}

#flow>section .swiper .swiper-slide:not(#step2)>div figure {
	width: 140px;
	margin: auto;
}

#flow>section .swiper .swiper-slide:not(#step2)>div p {
	margin-top: 20px;
}

/* #step2 */
#flow>section .swiper .swiper-slide#step2>div {
	margin-top: 20px;
}

#flow>section .swiper .swiper-slide#step2>div figure {
	margin-top: 20px;
}

#flow>section .swiper .swiper-slide#step2>div figure+p {
	margin-top: 20px;
}

/* swiper UI */
.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
	position: static !important;
	max-width: 1200px;
	width: 100%;
	height: 1px;
	margin: 46px auto 0;
	background-color: var(--color_gray);
}

.swiper-scrollbar-drag {
	background-color: var(--color_dark_gray);
}

/* 料金詳細ボタン */
a.graybtn1_s.arrow2_white {
	display: flex;
	align-items: center;
	position: relative;
	width: 200px;
	height: 50px;
	margin: auto;
	padding: 0 40px 0 25px;
	border: 1px solid var(--color_white);
	border-radius: 10em;
	box-shadow: none;
	background: var(--color_grad_hover_gray);
	background-position: 1% 33%;
	background-size: 300% auto;
	color: var(--color_white);
	line-height: 1;
	transition: var(--transition02sec);
}

a.graybtn1_s.arrow2_white::before {
	display: none;
}

a.graybtn1_s.arrow2_white::after {
	right: 16px;
	width: 18px;
	height: 18px;
	margin: auto;
	background: transparent url(../../img/c_arrow02_white.svg) no-repeat center center;
}

@media screen and (min-width: 768px) {
	#flow {
		margin-top: 176px;
		padding: 100px 0 150px;
	}

	#flow>section {
		width: 100%;
		margin: 77px auto 0;
	}

	#flow>section h1 {
		max-width: 1200px;
		width: 84%;
		margin: auto;
	}

	#flow>section {
		margin: 54px auto 0;
	}

	#flow>section .swiper {
		margin-top: 50px;
		padding: 0;
	}

	#flow>section .swiper .swiper-slide>p:nth-of-type(1) span.font18_24::before {
		width: 36px;
		margin: 0 20px;
	}

	#flow>section .swiper .swiper-slide:not(#step2)>div {
		display: flex;
		gap: 30px;
		margin-top: 47px;
	}

	#flow>section .swiper .swiper-slide:not(#step2)>div figure {
		width: 200px;
	}

	#flow>section .swiper .swiper-slide:not(#step2)>div p {
		width: calc(100% - 230px);
	}

	/* #step2 */
	#flow>section .swiper .swiper-slide#step2>div {
		margin-top: 47px;
	}

	#flow>section .swiper .swiper-slide#step2>div figure {
		margin-top: 20px;
	}

	#flow>section .swiper .swiper-slide#step2>div figure+p {
		margin-top: 20px;
	}

	/* swiper UI */
	.swiper-horizontal>.swiper-scrollbar,
	.swiper-scrollbar.swiper-scrollbar-horizontal {
		max-width: 1200px;
		width: 84%;
		height: 1px;
		margin: 96px auto 0;
		background-color: var(--color_gray);
	}

	/* 料金詳細ボタン */
	a.graybtn1_s.arrow2_white {
		width: 254px;
		height: 50px;
		margin-left: 0;
		padding: 0 60px 0 35px;
	}

	a.graybtn1_s.arrow2_white::before {
		display: none;
	}

	a.graybtn1_s.arrow2_white::after {
		right: 36px;
		width: 18px;
		height: 18px;
	}
}

@media (hover: hover) {
	a.graybtn1_s.arrow2_white:hover {
		background-position: 99% 50%;
	}
}

/* next-btn, prev-btn -----------*/
.swiper-btns {
	display: flex;
	justify-content: flex-end;
	width: 84%;
	margin: 21px auto 0;
}

.swiper-btns .next-btn,
.swiper-btns .prev-btn {
	cursor: pointer;
}

.swiper-btns .prev-btn {
	margin-right: 12px;
}

.swiper-btns .next-btn.swiper-button-disabled,
.swiper-btns .prev-btn.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

@media screen and (min-width: 768px) {
	.swiper-btns {
		max-width: 1200px;
		width: 84%;
		margin-top: 40px;
	}

	.swiper-btns .prev-btn {
		margin-right: 24px;
	}
}

@media (hover: hover) {
	.swiper-btns .next-btn:not(.swiper-button-disabled):hover,
	.swiper-btns .prev-btn:not(.swiper-button-disabled):hover {
		border-color: var(--color_white);
		background-position: 99% 50%;
		color: var(--color_white);
	}

	.swiper-btns .next-btn:not(.swiper-button-disabled):hover::before,
	.swiper-btns .prev-btn:not(.swiper-button-disabled):hover::before {
		filter: brightness(0) invert(1);

		-webkit-filter: brightness(0) invert(1);
	}
}


/* お問い合わせはこちら */
#inquiry {
	width: 315px;
	height: 68px;
	margin: 49px auto 0;
}

#inquiry a {
	justify-content: center;
	max-width: unset;
	width: 100%;
	max-height: unset;
	height: 100%;
	padding: 0 60px 0 39px;
}

#inquiry a.graybtn1::before {
	right: 11px;
	width: 45px;
	height: 45px;
	border-radius: 10em;
}

#inquiry a.graybtn1::after {
	right: 26px;
	width: 14px;
	height: 15px;
}

@media screen and (min-width: 768px) {
	#inquiry {
		width: 478px;
		height: 104px;
		margin-top: 110px;
	}

	#inquiry a {
		padding: 0 100px 0 60px;
	}

	#inquiry a.graybtn1::before {
		right: 18px;
		width: 68px;
		height: 68px;
	}

	#inquiry a.graybtn1::after {
		right: 44px;
		width: 15px;
		height: 16px;
	}
}

/* サービストップへ戻る */
#backto {
	width: 84%;
	margin: 52px auto 0;
}

#backto a {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	width: 220px;
	margin: auto;
}

#backto a .prev-btn {
	width: 36px;
	height: 36px;
}

@media screen and (min-width: 768px) {
	#backto {
		width: 656px;
		height: 142px;
		margin-top: 100px;
	}

	#backto a {
		gap: 24px;
		width: 300px;
	}

	#backto a .prev-btn {
		width: 48px;
		height: 48px;
	}

	#backto a:hover .prev-btn {
		border-color: var(--color_white);
		background-position: 99% 50%;
		color: var(--color_white);
	}

	#backto a:hover .prev-btn::before {
		filter: brightness(0) invert(1);

		-webkit-filter: brightness(0) invert(1);
	}
}