@charset "utf-8";

/* Common ------------------------------------------------- */
body {
	counter-reset: support-number 0;
}
section {
	padding-block: clamp(4.4rem, var(--sp-44px), 6.4rem) clamp(5rem, var(--sp-50px), 7rem);
}
.inner {
	width: 100%;
	max-width: 100rem;
	margin: 0 auto;
}
@media screen and (max-width: 834px) {
	.inner {
		padding-inline: 2rem;
	}
	.beige_wrap {
		padding-inline: 0;
	}
}
img {
	height: auto;
}

/* FV------------------------------------------------------- */
.firstView {
	--FV-img: url(/assets/images/support/IMG_FV.webp);
	padding: 0;
}
.firstView::before {
	content: 'Support';
	bottom: 2rem;
}
#mainCatch {
	font-size: clamp(3.4rem, var(--sp-34px), 6rem);
}
@media screen and (max-width: 600px) {
	.firstView {
		--spFV-img: url(/assets/images/support/IMG_FV_sp.webp);
	}
}

/* Lead ----------------------------------------------------- */
#support_main .lead p {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.7rem, var(--sp-17px), 2rem);
	margin-bottom: 0;
}

/* Main Contents --------------------------------------------- */
#support_main h2 {
	text-align: left;
	position: relative;
	margin-bottom: 0.5em;
	& span {
		display: block;
		font-family: var(--fontFamily-sans-noto);
		font-weight: 500;
		font-size: 75%;
	}
	&::before {
		display: inline-block;
		position: relative;
		counter-increment: support-number 1;
		content: 'サポート ' counter(support-number);
		background-image: linear-gradient(#0a54ea, #2234da);
		color: #fff;
		font-weight: 700;
		font-size: 50%;
		line-height: 1;
		letter-spacing: 0.08em;
		padding: 0.3em 0.8em 0.4em;
		margin-bottom: 0.3em;
	}
}
#support_main .flexWrap {
	display: flex;
	align-items: center;
	gap: 3rem;
	&:nth-of-type(2) {
		margin-top: 4rem;
	}
}
#support_main .flexWrap .desc {
	background-color: #fff;
	border: 1px solid #d71d63;
	padding: 1em;
	margin-top: 2rem;
	& h3 {
		background-color: #d71d63;
		color: #fff;
		line-height: 1;
		text-align: center;
		padding: 0.5em 0.3em;
		margin-bottom: 0.5em;
	}
	& ul {
		margin-bottom: 0;
	}
}
#support_main .flexWrap .desc.sub {
	border-color: #2234da;
	position: relative;
	& h3 {
		background-color: #2234da;
	}
	& h4 {
		color: #2234da;
		line-height: 1.2;
		position: relative;
		padding-left: 2rem;
		font-size: 1.15em;
		&::before {
			position: absolute;
			content: '';
			width: 1rem;
			aspect-ratio: 1/1;
			background-color: #d71d63;
			border-radius: 50em;
			left: 0.5rem;
			top: 20%;
		}
	}
	& ul {
		margin-bottom: 1em;
	}
	& p {
		margin-block: 1em 0;
		padding-inline: 0.5em;
		line-height: 1.4;
	}
	&::before,
	&::after {
		position: absolute;
		content: '';
		clip-path: polygon(0 50%, 100% 0, 100% 100%);
		width: 4rem;
		aspect-ratio: 3/8;
		top: 50%;
		transform: translateY(-50%);
	}
	&::before {
		background-color: #2234da;
		left: -4rem;
	}
	&::after {
		background-color: #fff;
		left: -3.9rem;
	}
}
#support_main .flexWrap p {
	margin-bottom: 0;
}
#support_main .flexWrap img {
	width: 48rem;
	height: auto;
}
@media screen and (max-width: 834px) {
	#support_main .flexWrap {
		flex-direction: column;
		&:nth-of-type(2) {
			margin-top: 2rem;
		}
	}
	#support_main img {
		margin: 0 auto 1em;
	}
	#support_main .flexWrap .desc.sub::before,
	#support_main .flexWrap .desc.sub::after {
		display: none;
	}
	#support_main .flexWrap .desc.sub h3 {
		line-height: 1.2;
	}
}