@charset "utf-8";

#container {
	overflow: clip;
}

/* index_main
====================================================================== */
.index_main {
	.kv {
		position: relative;
		height: clamp(75rem, calc(100svh - 5rem), 108rem);
		max-height: 70vw;
		&::after {
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			bottom: -1px;
			height: 2px;
			background: repeating-linear-gradient(to right, var(--color-theme) 0 .6rem, transparent .6rem 1.2rem) repeat-x 50%;
			background-size: 1.2rem 2px;
		}
		img {
			object-position: 100% 80%;
		}
		@media screen and (max-width: 743px) {
			height: 100vw;
			max-height: none;
		}
	}

	.lead_block {
		position: relative;
		max-width: var(--base-width-x);
		margin-inline: auto;
		margin-block: 6.4rem 16rem;
		font-weight: var(--font-weight-medium);

		.badge {
			position: absolute;
			right: 2rem;
			top: -25.8rem;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			width: 29.2rem;
			height: 34.4rem;
			padding-bottom: 6.6rem;
			background: url(../img/index/main-badge.png) no-repeat 50%;
			background-size: 100%;
			color: #fff;
			font-weight: var(--font-weight-medium);
			font-size: 4rem;
			line-height: calc(54 / 40);
		}

		.catch {
			font-size: 2.4rem;
			line-height: calc(32 / 24);
			letter-spacing: 0.14em;
		}
		.name {
			--ls: 0.12em;
			margin-block: 3rem 4rem;
			font-size: 5rem;
			line-height: 1;
			strong {
				font-size: 3.5rem;
				font-weight: var(--font-weight-bold);
			}
		}
		.copy {
			font-size: 3.2rem;
			line-height: 1.5;
			letter-spacing: 0.22em;
			font-weight: var(--font-weight-bold);
		}
		.price {
			--ls: 0;
			display: flex;
			align-items: end;
			color: var(--color-theme);
			line-height: 1;
			.num {
				margin-right: 2rem;
				font-size: 20rem;
				font-family: "Lato", sans-serif;
				font-weight: 400;
				letter-spacing: -.05em;
				line-height: 0.75;
			}
			.yen {
				font-size: 6.4rem;
				font-weight: var(--font-weight-bold);
			}
			.tax {
				font-size: 2rem;
				line-height: 1.4;
				font-weight: var(--font-weight-medium);
			}
		}
		.notes {
			border: 1px solid;
			border-radius: 10rem;
			color: var(--color-theme);
			font-size: 1.6rem;
			font-weight: var(--font-weight-medium);
			letter-spacing: 0;
		}
		@media screen and (min-width: 744px), print {
			.price {
				position: absolute;
				right: 0;
				top: 0;
				.tax {
					margin-left: 1rem;
					.excl_tax {
						display: flex;
						flex-direction: row-reverse;
						justify-content: flex-end;
					}
				}
			}
			.notes {
				position: absolute;
				right: 0;
				bottom: .3rem;
				padding: 0.1em 1.2rem 0.2em;
			}
		}
		@media screen and (max-width: 743px) {
			margin-block: 3rem 6.4rem;
			text-align: center;
			font-weight: var(--font-weight-bold);
			.badge {
				right: auto;
				top: -14.4rem;
				left: 1rem;
				transform-origin: 0 0;
				transform: scale(.44);
			}

			.catch {
				font-size: 1.6rem;
				line-height: 1.5;
				letter-spacing: 0.06em;
			}
			.name {
				--ls: 0.06em;
				position: relative;
				margin-block: 2rem 2.5rem;
				font-size: 4.5rem;
				strong {
					display: block;
					margin-top: 1rem;
					font-size: 3rem;
				}
				span {
					position: absolute;
					font-size: 5rem;
					font-weight: var(--font-weight-medium);
					&:first-child {
						top: -.1em;
						left: 3rem;
					}
					&:last-child {
						bottom: -.1em;
						right: 3rem;
					}
				}
			}
			.copy {
				font-size: 2.2rem;
				letter-spacing: 0.1em;
			}
			.price {
				position: relative;
				justify-content: center;
				flex-wrap: wrap;
				margin-top: 2rem;
				.num {
					margin-right: 1rem;
					font-size: 15rem;
					font-weight: 700;
				}
				.yen {
					font-size: 4rem;
					font-weight: 900;
				}
				.tax {
					margin-top: 1.5rem;
					font-weight: var(--font-weight-bold);
					.excl_tax {
						position: absolute;
						right: 2rem;
						top: 4.4rem;
					}
				}
			}
			.notes {
				margin: 1.6rem var(--sp-base-padding) 0;
				padding-block: .7em .8em;
				color: var(--color-theme);
				font-size: 1.6rem;
				line-height: calc(20 / 16);
			}
		}
	}
}


/* section_title
====================================================================== */
.section_title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 10rem;
	text-align: center;
	background-color: var(--color-theme);
	color: #fff;
	font-size: 3.6rem;
	line-height: 1.5;
	--ls: .2em;
	@media screen and (max-width: 743px) {
		height: auto;
		padding-block: 3.6rem;
		font-size: 2.4rem;
		text-align: center;
		--ls: .08em;
	}
}


/* index_introduction
====================================================================== */
.index_introduction {
	overflow: clip;
	padding-bottom: 17rem;
	font-size: 2.4rem;
	line-height: 1.75;
	color: var(--color-theme);
	section {
		position: relative;
		&:not(:last-child) {
			margin-bottom: 18rem;
		}
		h3 {
			margin-bottom: 6rem;
			font-size: 3.5rem;
			line-height: 1.5;
			font-weight: var(--font-weight-medium);
		}
	}
	@media screen and (min-width: 744px), print {
		.section_title {
			margin-bottom: 10rem;
		}
		section {
			width: var(--base-width);
			margin-inline: auto;
			padding-left: 2rem;
			.img {
				position: absolute;
				pointer-events: none;
			}
			&.-introduction01 {
				padding-left: 35rem;
				.img {
					top: -2rem;
					left: -1rem;
					width: 28rem;
				}
			}
			&.-introduction02 {
				.img {
					top: -11rem;
					left: 76rem;
					width: 60rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-bottom: 6rem;
		font-size: 1.6rem;
		section {
			position: relative;
			padding-inline: 3rem;
			z-index: 2;
			&:not(:last-child) {
				margin-bottom: 3rem;
			}
			h3 {
				margin-bottom: 2rem;
				font-size: 2.4rem;
				line-height: 1.5;
				text-align: center;
			}
			.img {
				margin-bottom: 2rem;
				margin-inline: auto;
			}
			&.-introduction01 {
				margin-top: -2rem;
				.img {
					width: 14rem;
				}
			}
			&.-introduction02 {
				.img {
					width: 30rem;
				}
			}
		}
	}
}

/* index_specs
====================================================================== */
.index_specs {
	padding-bottom: 17rem;
	@media screen and (max-width: 743px) {
		padding-bottom: 0;
	}
	.specs_title {
		.tab {
			display: flex;
			gap: 2rem;
			font-size: 1.92rem;
			button {
				--ls: 0;
				width: 9.6rem;
				height: 5rem;
				padding-bottom: 0.1em;
				background-color: #fff;
				border-radius: 10rem;
				color: var(--color-navy);
			}
		}
		@media screen and (min-width: 744px), print {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 10rem;
			text-align: center;
			background-color: var(--color-theme);
			color: #fff;
			font-size: 3.6rem;
			line-height: 1.5;
			--ls: .2em;
			.tab {
				margin-left: 3rem;
				align-items: center;
				button {
					transition: all var(--transition);
					&.is-active {
						background-color: var(--color-navy);
						color: #fff;
						width: calc(9.6rem * 1.25);
						height: calc(5rem * 1.25);
						font-size: calc(1.92rem * 1.25);
					}
					@media (hover) {
						&:hover {
							background-color: var(--color-navy);
							color: #fff;
						}
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			h2 {
				position: relative;
				padding-block: 3.6rem;
				background-color: var(--color-theme);
				color: #fff;
				font-size: 2.4rem;
				line-height: 1.5;
				text-align: center;
				--ls: .08em;
			}
			.tab {
				justify-content: center;
				gap: 1rem;
				padding-block: 4rem;
				font-size: 2.4rem;
				button {
					width: 10rem;
					height: 5.8rem;
					background-color: var(--color-navy);
					color: #fff;
					opacity: 0.5;
					&.is-active {
						opacity: 1;
					}
				}
			}
		}
	}
	.main {
		position: relative;
		margin-bottom: 7rem;
		.images {
			position: absolute;
			width: 70rem;
			li {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transition: opacity 0.6s ease;
				user-select: none;
				pointer-events: none;
				&.is-active {
					opacity: 1;
					transition-duration: .3s;
					z-index: 2;
				}
			}
		}
		@media screen and (min-width: 744px), print {
			height: 54rem;
			.images {
				right: calc(50% - 8rem);
				top: 8.4rem;
			}
			.ph {
				position: absolute;
				top: 8.2rem;
				left: calc(50% + 10rem);
				width: calc(22.6rem * 2 + 2rem);
				display: flex;
				flex-wrap: wrap;
				gap: 2rem;
				z-index: 3;
				li {
					position: relative;
					width: 22.6rem;
					&::after {
						content: "";
						position: absolute;
						inset: 0;
						border: 1px solid #fff;
						pointer-events: none;
					}
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
			.main_inner {
				position: relative;
				height: 24.6rem;
			}
			.images {
				top: 12%;
				left: 0;
				right: 1rem;
				width: 86vw;
				margin-inline: auto;
			}
			.ph {
				margin: 2rem var(--sp-base-padding) 0;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: .6rem;
			}
		}
	}
	.specs {
		table {
			ul {
				display: flex;
				flex-direction: column;
				gap: .8em;
			}
		}
		@media screen and (min-width: 744px), print {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;
			dt {
				display: none;
			}
		}
		@media screen and (max-width: 743px) {
			dl {
				margin-bottom: 2rem;
			}
			dt {
				position: relative;
				padding: .8rem 1.5rem 1rem;
				background-color: var(--color-navy);
				border-radius: 0.7rem;
				color: #fff;
				font-size: 1.5rem;
				line-height: 1.5;
				font-weight: var(--font-weight-medium);
				cursor: pointer;
				&::after {
					content: "";
					position: absolute;
					right: 1.5rem;
					top: calc(50% - 0.7rem);
					width: 1rem;
					height: 1.4rem;
					background-color: #fff;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
					transform: translateY(.2rem) rotate(90deg);
					transition: transform var(--transition);
				}
				&.-open {
					&::after {
						transform: rotate(-90deg);
					}
				}
			}
			dd {
				overflow: hidden;
				height: 0;
				transition: height var(--transition);
				.sp_acc_inner {
					padding-top: 2rem;
				}
			}
		}
	}
	.points {
		margin-top: 11rem;
		font-size: 2rem;
		line-height: 1.8;
		.point + .point {
			margin-top: 7rem;
		}
		h3 {
			width: 29.2rem;
			height: 22.2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding-bottom: 2rem;
			background: url(../img/index/point-bg.svg) no-repeat 50%;
			background-size: 100%;
			font-size: 3.25rem;
			font-weight: var(--font-weight-medium);
			line-height: 1.4;
			color: #fff;
		}
		@media screen and (min-width: 744px), print {
			max-width: 98rem;
			margin-inline: auto;
			.point {
				display: flex;
				align-items: center;
				gap: 4rem;
				h3 {
					flex-shrink: 0;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			font-size: 1.6rem;
			line-height: 1.75;
			.point + .point {
				margin-top: 4rem;
			}
			h3 {
				margin-inline: auto;
				margin-bottom: 1rem;
				transform-origin: 50% 0;
				transform: scale(calc(26 / 29.2));
			}
		}
	}
	.warranty {
		margin-top: 11rem;
		padding-top: 7rem;
		font-size: 2rem;
		line-height: 1.8;
		.box {
			position: relative;
			padding: 6rem 3rem;
			border: 1px solid;
			color: var(--color-brown);
			&::before {
				content: "";
				position: absolute;
				top: -7.5rem;
				right: 0;
				left: 0;
				width: 9.2rem;
				height: 11.2rem;
				margin-inline: auto;
				background: url(../img/index/warranty-badge.svg) no-repeat 50%;
				background-size: 100%;
			}
			h3 {
				margin-bottom: 3rem;
				text-align: center;
				font-size: 3rem;
				line-height: 1.6;
				font-weight: var(--font-weight-medium);
				--ls: .12em;
			}
		}
		.last {
			padding-block: .8rem 1rem;
			background-color: var(--bg-brown);
			color: #fff;
			text-align: center;
			font-size: 3rem;
			line-height: 1.6;
			--ls: .12em;
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			gap: 6rem;
			.box {
				width: calc((100% - 6rem) / 2);
			}
			.last {
				width: 100%;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			font-size: 1.6rem;
			line-height: 1.75;
			padding-block: 9.5rem 7rem;
			background-color: var(--bg-brown);
			.box {
				padding: 5rem var(--sp-base-padding) 3rem;
				background-color: #fff;
				& + .box {
					margin-top: 10rem;
				}
				&::before {
					background-image: url(../img/index/warranty-badge_sp.svg);
				}
				h3 {
					font-size: 2.4rem;
					line-height: 1.5;
				}
			}
			.last {
				margin-top: 3rem;
				padding-block: 0;
				font-size: 2.4rem;
				line-height: 1.5;
			}
		}
	}
}

#overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.is-specs-modal-open #overlay {
	opacity: 0.8;
	pointer-events: auto;
}
.specs_modals {
	--width: 104rem;
	--height: 48rem;
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	z-index: 1000;
	transition: opacity 0.3s ease;
	@media screen and (max-width: 743px) {
		--width: calc(100vw - var(--sp-base-padding) * 2);
		--height: auto;
		display: block;
	}
	&[hidden] {
		opacity: 0;
		pointer-events: none;
	}
	.swiper-wrapper {
		width: 100%;
		height: auto;
		@media screen and (max-width: 743px) {
			height: 100%;
			align-items: center;
			.swiper-slide {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.specs_modal {
		position: relative;
		width: var(--width);
		height: var(--height);
		margin-inline: auto;
		background: #fff;
		font-size: 2rem;
		line-height: 1.75;
		h3 {
			margin-bottom: 2rem;
			font-size: 2.4rem;
			line-height: 1.5;
		}
		.specs_modal_contents {
			position: relative;
			.phs {
				display: flex;
				flex-direction: column;
				gap: 1.5rem;
				dt {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #2b91d4;
					color: #fff;
					height: 6rem;
					font-size: 2rem;
					line-height: 1.5;
					font-weight: var(--font-weight-bold);
				}
			}
		}
		.close {
			position: absolute;
			bottom: 0;
			left: 8rem;
			width: 10rem;
			height: 5rem;
			background-color: #2b91d4;
			text-align: center;
			color: #000;
			padding-top: 2rem;
			font-size: 1.6rem;
			line-height: 1;
			font-weight: var(--font-weight-bold);
			clip-path: ellipse(50% 100% at 50% 101%);
			&::before,
			&::after {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				top: 1.8rem;
				width: 1.2rem;
				margin-inline: auto;
				border-top: 1px solid #000;
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
			@media (hover) {
				&:hover {
					background-color: color-mix(in srgb, #2b91d4 70%, #fff);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			.specs_modal_contents {
				height: var(--height);
				display: flex;
				align-items: center;
				gap: 4rem;
				padding: 3.25rem 9rem;
				.contents {
					flex-grow: 1;
					padding-bottom: 2rem;
				}
				.ph {
					flex-shrink: 0;
					width: 42rem;
				}
				.phs {
					flex-shrink: 0;
					width: 42rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			.specs_modal_contents {
				max-height: calc(100vh - 2rem * 2);
				overflow-y: auto;
				overscroll-behavior-y: contain;
				padding: 4rem 3rem;
				font-size: 1.6rem;
				line-height: 1.75;
			}
			h3 {
				font-size: 2rem;
				text-align: center;
			}
			.specs_modal_contents {
				.ph,
				.phs {
					margin-top: 4rem;
					margin-inline: 2rem;
				}
				.phs {
					gap: 1rem;
					dt {
						height: 3.5rem;
						font-size: 1.6rem;
					}
				}
			}
			.close {
				left: 0;
				right: 0;
				margin-inline: auto;
			}
		}
	}

	.arrow {
		position: absolute;
		top: calc(50% - 6rem / 2);
		width: 6rem;
		height: 6rem;
		z-index: 10;
		&::after {
			content: "";
			position: absolute;
			inset: 0 30% 0 0;
			margin: auto;
			width: 3.5rem;
			height: 3.5rem;
			border-top: 1px solid #000;
			border-right: 1px solid #000;
			transform: rotate(45deg);
		}
		&.-prev {
			left: calc(50% - var(--width) / 2 + 1rem);
			transform: scaleX(-1);
		}
		&.-next {
			right: calc(50% - var(--width) / 2 + 1rem);
		}
		@media (hover) {
			&:hover {
				opacity: 0.5;
			}
		}
		@media screen and (max-width: 743px) {
			width: 4rem;
			height: 5rem;
			background-color: rgba(0,0,0,.5);
			&::after {
				width: 2rem;
				height: 2rem;
				border-color: #fff;
			}
			&.-prev {
				left: 0;
			}
			&.-next {
				right: 0;
			}
		}
	}
}


/* index_partnership
====================================================================== */
.index_partnership {
	.partnership_header {
		position: relative;
		height: 90rem;
		margin-bottom: 9rem;
		h2 {
			background-color: rgba(255,255,255,.8);
			.x {
				position: relative;
				display: block;
				&::before,
				&::after {
					content: "";
					position: absolute;
					right: 0;
					left: 0;
					top: calc(50% - 1px);
					width: 11.4rem;
					margin-inline: auto;
					border-top: 2px solid #000;
					transform: rotate(45deg);
				}
				&::after {
					transform: rotate(-45deg);
				}
			}
		}
		.img {
			position: absolute;
			right: 0;
			left: 0;
			margin-inline: auto;
			width: 64rem;
			bottom: -5.5rem;
			z-index: 1;
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			align-items: center;
			h2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 26.6rem;
				img {
					width: 38rem;
				}
				.x {
					width: 17rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 5rem;
			height: 50rem;
			padding-top: 8.5rem;
			h2 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 22.6rem;
				padding-inline: 3.5rem;
				img {
					display: block;
					width: 24rem;
					&:last-child {
						margin-left: auto;
					}
				}
				.x {
					height: 7rem;
					&::before,
					&::after {
						width: 5rem;
						border-top-width: 1px;
					}
				}
			}
			.img {
				width: 29rem;
				bottom: 2rem;
				z-index: 1;
			}
		}
	}
	.txt_block {
		margin-block: 5rem;
		font-size: 2rem;
		line-height: 1.8;
		.lead {
			color: var(--color-navy);
			font-weight: var(--font-weight-medium);
			font-size: 3rem;
			line-height: calc(50 / 30);
		}
		@media screen and (min-width: 744px), print {
			width: 98rem;
			margin-inline: auto;
		}
		@media screen and (max-width: 743px) {
			margin-block: 4rem;
			padding-inline: 3rem;
			font-size: 1.6rem;
			line-height: 1.75;
			.lead {
				font-size: 2.4rem;
				line-height: 1.5;
			}
		}
	}

	.spacer {
		margin-top: 8rem;
		.spacer_header {
			position: relative;
			display: flex;
			justify-content: end;
			align-items: center;
			height: 40rem;
			margin-bottom: 2rem;
			padding-inline: max(calc((100% - 137rem) / 2), 4rem);
			color: #fff;
			text-align: right;
			h3 {
				font-size: 3rem;
				line-height: calc(50 / 30);
				font-weight: var(--font-weight-medium);
				span {
					display: block;
				}
			}
		}
		.spacer_items {
			padding-inline: 1.2rem;
			.spacer_items_wrapper {
				display: flex;
				margin-inline: auto;
				max-width: calc((22rem + .8rem * 2) * 8);
				cursor: grab;
				&:not(:has(.swiper-slide:not(.swiper-slide-fully-visible))) {
					cursor: default;
				}
				.item {
					width: 22rem;
					padding-inline: .8rem;
					box-sizing: content-box;
					img {
						display: block;
					}
					dt {
						margin-block: 1.5rem 1rem;
						text-align: center;
						font-size: 2.2rem;
						line-height: 1.6;
						font-weight: var(--font-weight-bold);
						color: var(--color-navy);
					}
					dd {
						margin-inline: 1.2rem;
						font-size: 1.8rem;
						line-height: calc(28 / 18);
					}
				}
			}
		}
		.more {
			margin-top: 5rem;
			text-align: center;
			.notes {
				display: block;
				margin-top: 1rem;
				font-size: 1.9rem;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 7rem;
			.spacer_header {
				height: 50rem;
				justify-content: center;
				padding-inline: 0;
				padding-top: 1rem;
				text-align: center;
				h3 {
					font-size: 2.4rem;
					line-height: 1.5;
					span {
						margin-top: 1lh;
					}
				}
			}
			.spacer_items {
				padding-inline: var(--sp-base-padding);
				.spacer_items_wrapper {
					width: auto !important;
					flex-wrap: wrap;
					gap: 0.6rem;
					transform: none !important;
					cursor: default !important;
					.item {
						position: relative;
						width: calc((100% - 0.6rem) / 2);
						padding-inline: 0;
						&::before {
							content: "";
							position: absolute;
							inset: 0;
							background-color: var(--color-navy);
							opacity: 0.5;
							mix-blend-mode: multiply;
							transition: opacity var(--transition);
						}
						dt, dd {
							position: absolute;
							inset: 0;
							display: flex;
							justify-content: center;
							align-items: center;
							transition: opacity var(--transition);
							z-index: 2;
						}
						dt {
							margin-block: 0;
							font-size: 2rem;
							line-height: 1.25;
							color: #fff;
						}
						dd {
							width: 100%;
							margin-inline: 0;
							padding-inline: 1.5rem;
							font-size: 1.5rem;
							line-height: calc(23 / 15);
							color: #fff;
							opacity: 0;
						}
						&:active,
						&:hover {
							&::before {
								opacity: 0.8;
							}
							dt {
								opacity: 0;
							}
							dd {
								opacity: 1;
							}
						}
					}
				}
			}
			.more {
				margin-top: 3rem;
				padding-inline: var(--sp-base-padding);
			}
		}
	}
}

/* index_chassis
====================================================================== */
.index_chassis {
	position: relative;
	margin-top: 16rem;
	padding-bottom: 21rem;
	background-color: #e6e6e6;
	z-index: 1;
	.chassis_img {
		position: absolute;
		top: -8rem;
		left: calc(50% + 3rem);
		width: 62rem;
		z-index: 3;
	}
	@media screen and (min-width: 744px), print {
		scroll-margin-top: calc(var(--target-margin) + 3rem);
	}
	@media screen and (max-width: 743px) {
		margin-top: 7rem;
		padding-bottom: 8rem;
		.chassis_img {
			top: 21rem;
			left: 8rem;
			width: 28rem;
		}
	}
	.chassis_header {
		position: relative;
		overflow: hidden;
		@media screen and (min-width: 744px), print {
			padding-bottom: 9rem;
			.logo {
				height: 10rem;
				padding-inline: calc((100% - var(--base-width)) / 2);
				background-color: #fff;
				img {
					width: 26.6rem;
				}
			}
			.bg {
				position: relative;
				height: 66.2rem;
			}
			.txt {
				position: absolute;
				right: 0;
				left: 0;
				top: 21rem;
				width: var(--base-width);
				margin-inline: auto;
				color: #fff;
				z-index: 3;
				h2 {
					text-align: right;
					font-size: 3.6rem;
					line-height: 1.6;
					font-weight: var(--font-weight-medium);
				}
				.notes {
					text-align: right;
					font-size: 3rem;
				}
				.lead {
					width: 100rem;
					margin-top: 6rem;
					margin-left: auto;
					font-size: 3rem;
					line-height: calc(50 / 30);
					text-align: justify;
				}
				.shape{
					float:left;
					width: 40rem;
					height: 45rem;
					shape-outside: polygon( 0 0, 100% 0, 0 100% );
				}
			}
			&::before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				width: calc(50% + 52rem);
				background-color: #003c64;
				border-top-left-radius: 2rem;
				mix-blend-mode: multiply;
				transform-origin: 0 100%;
				transform: skewX(-41.63deg);
			}
		}
		@media screen and (max-width: 743px) {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			height: 68rem;
			padding: 0 var(--sp-base-padding) 4rem;
			font-size: 1.6rem;
			line-height: 1.75;
			color: #fff;
			.logo {
				width: 17.6rem;
				margin-bottom: 2rem;
				margin-left: auto;
				filter: var(--white-filter);
			}
			h2 {
				text-align: right;
				font-size: 2.4rem;
				line-height: 1.6;
				font-weight: var(--font-weight-medium);
			}
			.notes {
				text-align: right;
				font-size: 2rem;
			}
			.lead {
				margin-top: 2rem;
			}
			&::before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				width: 58rem;
				background-color: #003c64;
				mix-blend-mode: multiply;
				transform-origin: 0 100%;
				transform: skewX(-41.63deg);
				z-index: -1;
			}
			.bg ._of {
				z-index: -2;
			}
		}
	}
	.chassis_contents {
		margin-top: 8rem;
		.badge {
			width: 9.2rem;
			margin-inline: auto;
			margin-bottom: 2rem;
		}
		h3 {
			margin-bottom: 3rem;
			text-align: center;
			font-size: 3.5rem;
			line-height: 1.4;
			font-weight: var(--font-weight-medium);
			color: var(--color-theme);
		}
		.notes {
			margin-top: 4rem;
			font-size: 1.5rem;
			line-height: 1.75;
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 0 6rem;
			section {
				width: calc((100% - 6rem) / 2);
			}
			.notes {
				width: 100%;
				display: flex;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			section + section {
				margin-top: 5rem;
			}
			h3 {
				margin-bottom: 3rem;
				font-size: 2.4rem;
			}
			.notes {
				margin-top: 3rem;
				text-align: center;
			}
		}
	}
}

/* index_flow
====================================================================== */
.index_flow {
	position: relative;
	padding-bottom: 16rem;
	background-color: var(--bg-navy);
	z-index: 2;

	.illust {
		position: absolute;
		pointer-events: none;
		user-select: none;
		z-index: 5;
		&.-main {
			width: 45rem;
			top: -9.4rem;
			right: calc(50% + 37.2rem);
		}
		&.-i0 {
			width: 17rem;
			bottom: -6.5rem;
			left: -11.2rem;
		}
		&.-i1 {
			width: 12rem;
			bottom: -4.4rem;
			right: 1.2rem;
		}
		&.-i2 {
			width: 11rem;
			bottom: 2rem;
			right: 2rem;
		}
		&.-i3 {
			width: 8rem;
			bottom: .5rem;
			right: 1.2rem;
		}
		&.-i4 {
			width: 19rem;
			bottom: 1.2rem;
			right: -6rem;
		}
		&.-i5 {
			width: 55rem;
			bottom: -31.2rem;
			left: calc(100% - 15rem);
		}
	}

	.flow_contents {
		--radius: 1rem;
		position: relative;
		margin-top: 16rem;
		font-size: 2rem;
		line-height: 1.8;
		&::before {
			content: "";
			position: absolute;
			inset: 1rem 0;
			width: 0;
			margin-inline: auto;
			border-left: 1.4rem solid var(--color-theme);
			z-index: -1;
		}
		.flow {
			position: relative;
			background-color: #fff;
			border-radius: var(--radius);
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				border: 1px solid var(--color-theme);
				border-radius: var(--radius);
				pointer-events: none;
			}
			& + .flow {
				margin-top: 6rem;
			}
			header {
				display: flex;
				& > * {
					width: 50%;
				}
				h3 {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					background-color: var(--color-theme);
					color: #fff;
					font-size: 3rem;
					line-height: 1.5;
					font-weight: var(--font-weight-reg);
					.num {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 5.6rem;
						margin-bottom: 0.5rem;
						background-color: #fff;
						border-radius: 100%;
						color: var(--color-theme);
						font-size: 3rem;
						padding-bottom: 0.1em;
						line-height: 1;
						font-weight: var(--font-weight-medium);
						aspect-ratio: 1;
					}
				}
			}
			.desc {
				--ls: 0;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.flow_contents {
			.flow {
				display: grid;
				grid-template-columns: 42rem 1fr;
				header {
					display: flex;
					h3 {
						border-radius: var(--radius) 0 0 var(--radius);
					}
				}
				.desc {
					display: flex;
					align-items: center;
					padding-inline: 5rem 10rem;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-bottom: 9rem;
		.illust {
			&.-main {
				width: 29rem;
				top: 9rem;
				right: 4.5rem;
			}
			&.-i0 {
				width: 14rem;
				bottom: auto;
				top: -9rem;
				left: -.6rem;
			}
			&.-i1 {
				width: 9.2rem;
				bottom: -5.6rem;
				right: 1rem;
			}
			&.-i2 {
				width: 9rem;
				bottom: auto;
				top: 12.4rem;
				right: auto;
				left: 0.5rem;
			}
			&.-i3 {
				width: 7.2rem;
				bottom: auto;
				top: -6.2rem;
				right: -1rem;
			}
			&.-i4 {
				width: 12.2rem;
				bottom: auto;
				top: 9.5rem;
				right: auto;
				left: -2rem;
			}
			&.-i5 {
				width: 30rem;
				bottom: -22rem;
				left: 9rem;
			}
		}

		.flow_contents {
			--radius: .6rem;
			margin-top: 19.6rem;
			font-size: 1.6rem;
			line-height: 1.75;
			.flow {
				& + .flow {
					margin-top: 3.4rem;
				}
				header {
					h3 {
						font-size: 2.4rem;
						border-top-left-radius: var(--radius);
						.num {
							width: 4.4rem;
							margin-bottom: 0.5rem;
							font-size: 2.4rem;
						}
					}
					.ph {
						img {
						border-top-right-radius: var(--radius);
						}
					}
				}
				.desc {
					padding: 2rem;
				}
			}
		}
	}
}

/* index_qa
====================================================================== */
.index_qa {
	overflow: hidden;
	position: relative;
	background-color: #d8edf9;
	padding-block: 11.4rem 15rem;
	text-align: center;
	z-index: 1;
	.bg {
		position: absolute;
		top: 0;
		left: 50%;
		width: 183rem;
		transform: translateX(-50%);
		z-index: -1;
	}
	.lead {
		margin-top: 10rem;
		font-size: 3.6rem;
		line-height: 1.75;
		color: var(--color-navy);
		font-weight: var(--font-weight-bold);
		--ls: .22em;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		padding-block: 13rem 7rem;
		.bg {
			width: 100vw;
		}
		.lead {
			margin-top: 4rem;
			font-size: 2.4rem;
			line-height: 1.5;
			--ls: .06em;
		}
	}
}

/* index_recommend_information
====================================================================== */
.index_recommend_information {
	padding: 6rem;
	ul {
		display: flex;
		justify-content: center;
		gap: 6rem;
		li {
			width: 52rem;
		}
		a {
			display: block;
			text-decoration: none;
			.thumb {
				position: relative;
				display: block;
				aspect-ratio: 260 / 190;
				&.-no-image {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #e6e6e6;
					&::before {
						content: "";
						width: 36rem;
						height: 13.6rem;
						background: url(../img/logo.svg) no-repeat 50%;
						background-size: 100%;
						filter: var(--white-filter);
					}
				}
			}
			.title {
				display: block;
				font-size: 3rem;
				margin-top: 2rem;
				line-height: 1.5;
				font-weight: var(--font-weight-bold);
			}
		}
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		padding: 4rem var(--sp-base-padding);
		ul {
			gap: 2rem;
			flex-direction: column;
			li {
				width: 100%;
			}
			a {
				.thumb {
					&.-no-image {
						&::before {
							width: 18rem;
							height: 6.8rem;
						}
					}
				}
				.title {
					font-size: 1.8rem;
					margin-top: 1rem;
				}
			}
		}
	}
}

/* index_contact
====================================================================== */
.index_contact {
	padding-top: 15rem;
	h2 {
		text-align: center;
		color: var(--color-theme);
		font-weight: var(--font-weight-bold);
		font-size: 3.6rem;
		line-height: 1.75;
		--ls: .22em;
	}
	.title_en {
		width: 22.2rem;
		margin: 2rem auto;
	}
	.form_contents {
		margin-top: 4rem;
		padding-top: 4rem;
		border-top: 1px dashed var(--color-theme);
	}
	@media screen and (max-width: 743px) {
		padding-top: 8rem;
		h2 {
			font-size: 2.4rem;
			--ls: .06em;
		}
		.title_en {
			width: 20rem;
		}
	}
}