@charset "UTF-8";

:root {
	--mainColor: #0084FF;
	--lightColor: #D8ECFF;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	color: #000000;
}

p:not(:last-child) {
	margin-bottom: 1em;
}

a:link,
a:visited {
	text-decoration: none;
}


img {
	max-width: 100%;
	width: 100%;
	height: auto;
	zoom: 0.5;
	vertical-align: top;
}

/*----------------------------------------
■レイアウト
----------------------------------------*/
#container {
	display: flex;
	flex-direction: column;
	letter-spacing: 5%;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	position: relative;
}

section>.inner {
	padding: 30px 15px;
}

header {
	background-color: #fff;

	.inner {
		display: flex;
		align-items: center;

		gap: 5px;
		padding: 5px;
		text-align: center;
		height: 50px;
		font-size: 14px;

		.logo {
			height: 50px;
			width: auto;
			aspect-ratio: 621/69;
		}
	}
}

footer {
	text-align: center;
	font-size: 12px;
	background-color: #fff;

	.inner {
		padding: 5px;
	}
}

.floatWrap {
	background-color: #fff;
	display: flex;
	padding: 10px;
	gap: 10px;
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 1;

	a {
		flex: 1;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5px;
		border-radius: 10px;
		padding: 10px 20px;
		border: 1px solid #FFF;

		&.tel:link,
		&.tel:visited {
			background: linear-gradient(0deg, #00A616 0%, #5F0 100%);

			&:before {
				content: "";
				width: 20px;
				aspect-ratio: 1;
				mask-image: url(../img/icon_tel.svg);
				mask-size: contain;
				mask-repeat: no-repeat;
				background-color: #fff;
			}
		}

		&.mail:link,
		&.mail:visited {
			background: linear-gradient(0deg, #D50000 0%, #FFA200 100%);

			&:before {
				content: "";
				width: 20px;
				aspect-ratio: 20/16;
				mask-image: url(../img/icon_mail.svg);
				mask-size: contain;
				mask-repeat: no-repeat;
				background-color: #fff;
			}
		}
	}

}


/*----------------------------------------
■汎用クラス
----------------------------------------*/

.btn_1 {}

.title_1 {
	font-size: 24px;
	font-weight: bold;
	color: var(--mainColor);
	text-align: center;
	line-height: 130%;
	margin-bottom: 24px;
}

.useCredit {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 0;
	}

	.attention {
		font-size: 12px;
	}
}

.ctaMail,
.btn_1 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #FFF;
	background: linear-gradient(0deg, #D50000 0%, #FFA200 100%);
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	padding: 10px 20px;
	position: relative;

	&:after {
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		aspect-ratio: 20/16;
		mask-image: url(../img/icon_mail.svg);
		mask-size: contain;
		mask-repeat: no-repeat;
		background-color: #fff;
	}
}

.ctaBlock {
	background: linear-gradient(84deg, #0084FF 0%, #0036C0 100%);
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #fff;

	.title {
		font-size: 24px;
		font-weight: 800;
		color: #fff;
		text-align: center;
		margin-bottom: 0;

		em {
			font-size: 40px;
			color: #F6FF00;
			font-weight: 900;
		}
	}

	.ms_time {
		display: flex;
		gap: 10px;

		.messege {
			background-color: #fff;
			color: var(--mainColor);
			padding: 10px;
			border-radius: 10px;
			flex: 1;
			text-align: center;
		}

		.time {
			color: #fff;
		}
	}

	a.tel {
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 600;
		font-style: normal;
		font-size: 50px;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		gap: 5px;
		text-box-trim: trim-both;

		&:link,
		&:visited {
			color: #fff;
		}

		.icon {
			border: 1px solid #fff;
			border-radius: 50%;
			width: 36px;
			aspect-ratio: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8px;

			img {
				width: 100%;
				filter: brightness(0) invert(1);
			}
		}

	}
}

/*----------------------------------------
■sec_trouble
----------------------------------------*/
#sec_trouble {
	background-color: var(--lightColor);

	.inner {
		.imgs {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
	}
}

/*----------------------------------------
■sec_price
----------------------------------------*/
#sec_price {
	background-color: #fff;

	.inner {
		.priceBoxes {
			display: flex;
			flex-direction: column;
			gap: 20px;

			.box {
				border: 1px solid var(--mainColor);

				.title {
					background-color: var(--mainColor);
					padding-block: 10px;
					color: #fff;
					font-weight: bold;
					text-align: center;
					font-size: 18px;
				}

				.detail {
					padding: 10px;
					display: flex;
					flex-direction: column;
					gap: 10px;

					ul {
						display: flex;
						flex-direction: column;
						gap: 5px;

						li {
							&:before {
								content: "・";
							}
						}
					}

					font-size: 14px;
				}
			}
		}
	}
}

/*----------------------------------------
■sec_steps
----------------------------------------*/
#sec_steps {
	background-color: #fff;

	.stepBoxes {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.box {
			border-radius: 10px;
			background: #FFF;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
			display: flex;
			padding: 20px;

			gap: 10px;
			align-self: stretch;

			.step {
				border-radius: 5px;
				background: #0084FF;
				display: flex;
				flex-direction: column;
				width: 50px;
				height: 50px;
				justify-content: center;
				align-items: center;
				aspect-ratio: 1;
				color: #fff;
				font-size: 14px;
				font-family: "Barlow Condensed", sans-serif;

				&:before {
					content: "STEP";
				}
			}

			.detail {
				font-size: 14px;
				font-weight: bold;
				line-height: 150%;
				letter-spacing: 0.07em;
				flex: 1;

				.attention {
					font-size: 12px;
					color: #7a7a7a;
					line-height: 120%;
					font-weight: normal;
					margin-top: 6px;
				}
			}

			&:after {
				content: "";
				width: 40px;
				height: 40px;
				background-size: contain;
				background-repeat: no-repeat;
			}

			&.step1:after {
				background-image: url(../img/step/icon_inq.svg);
			}

			&.step2:after {
				background-image: url(../img/step/icon_track.svg);
			}

			&.step3:after {
				background-image: url(../img/step/icon_mitumori.svg);
			}

			&.step4:after {
				background-image: url(../img/step/icon_start.svg);
			}

			&.step5:after {
				background-image: url(../img/step/icon_pay.svg);
			}
		}
	}
}

/*----------------------------------------
■sec_faq
----------------------------------------*/
#sec_faq {
	background-color: var(--lightColor);

	.faqBoxes {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.box {
			background-color: #fff;
			display: flex;
			padding: 15px;
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			align-self: stretch;
			font-size: 14px;
			border-radius: 10px;

			.q {
				display: flex;
				gap: 10px;
				padding-top: 4px;
				font-weight: bold;

				&:before {
					content: "Q";
					font-size: 20px;
					margin-top: -4px;
					font-family: "Barlow Condensed", sans-serif;
					background-color: var(--mainColor);
					border-radius: 50%;
					color: #fff;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: none;
					font-weight: bold;

				}
			}

			.a {
				display: flex;
				gap: 10px;
				padding-top: 4px;


				&:before {
					content: "A";
					font-size: 20px;
					margin-top: -4px;
					font-family: "Barlow Condensed", sans-serif;
					background-color: #FF9000;
					border-radius: 50%;
					color: #fff;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: none;
					font-weight: bold;

				}
			}

		}
	}
}

/*----------------------------------------
■form
----------------------------------------*/
.layout-nocover .nocover-body .center-wrap .center-body {
	max-width: none;
}

#form {
	background-color: #fff;

	.formWrap {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 20px;

		.row {
			display: flex;
			flex-direction: column;
			gap: 5px;

			label {
				font-weight: bold;
				display: flex;
				gap: 5px;

				&.required {
					&:after {
						content: "必須";
						border-radius: 6px;
						background: #C2172D;
						display: flex;
						padding: 5px 10px;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 12px;
						font-weight: normal;
					}
				}
			}
		}
	}

	.submitBtn {
		width: 100%;

		&:after {
			mask-image: url(../img/arrow_2.svg);
			width: 20px;
			height: 20px;
		}
	}
}

/*----------------------------------------
■corpAbout
----------------------------------------*/
#corpAbout {
	background-color: var(--mainColor);
	color: #fff;

	.title_1 {
		color: #fff;
	}

	.aboutWrap {
		display: flex;
		flex-direction: column;
		gap: 20px;
		font-size: 14px;
	}
}


@media(min-width: 768px) {
	#container {
		background-color: #f7f7f7;

		>div,
		>section,
		>header,
		>footer {
			max-width: 480px;
			margin-inline: auto;
			width: 100%;
		}

		img {
			zoom: 1;
		}

		header {


			.inner {
				.logo {
					height: 30px;
					width: auto;
					aspect-ratio: 621/69;
				}
			}
		}
	}
}