@charset "utf-8";

/* ===== Layer order ===== */
@layer reset,
tokens,
base,
layout,
component,
page,
utility,
override;

/* ===== Tokens ===== */
@layer tokens {
	:root {
		--c-primary: #1f44c4;
		--c-light: #fafafa;
		--c-l-gray: #e5e5e5;
		--c-m-gray: #c6c6c6;
		--c-gray: #666;
		--c-bk: #111;
		--c-wh: #fff;
		--c-text: #111;
		--c-bg: #f7f7f7;
		--font-base: "Noto Sans JP", sans-serif;
		--font-en: "Poppins", sans-serif;
		--transition-c: all ease 0.33s;
		--transition-img: all ease-in-out 0.4s;
		--header-h: 90px;
	}

	@media (max-width: 999px) {
		:root {
			--header-h: 60px;
		}
	}
}

/* ===== Reset ===== */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	:where(img, svg, video, canvas, audio, iframe, embed, object) {
		display: block;
		max-width: 100%;
	}

	:where(img, video) {
		width: 100%;
		height: auto;
	}

	:where(ol, ul, menu) {
		list-style: none;
		padding: 0;
	}

	:where(button, input, select, textarea) {
		font: inherit;
		color: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		text-transform: none;
		background-color: transparent;
		background-image: none;
		outline: none;
		border: none;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	input::placeholder,
	select::placeholder,
	textarea::placeholder {
		color: #aaa;
	}
	.select-wrap {
		position: relative;
		display: inline-block;
		width: 100%;
	}
	.select-wrap :where(button, input, select, textarea) {
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	.select-wrap::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 10px;
		height: 10px;
		border-right: 2px solid #222;
		border-bottom: 2px solid #222;
		transform: translateY(-65%) rotate(45deg);
		pointer-events: none;
	}
}

/* ===== Base ===== */
@layer base {
	html {
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0em;
		font-family: var(--font-base);
		color: var(--c-text);
		background: var(--c-bg);
		scroll-behavior: smooth;
		scroll-padding-top: var(--header-h);
		-webkit-text-size-adjust: 100%;
	}

	body {
		position: relative;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-weight: bold;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	:where(a) {
		color: inherit;
		text-decoration: none;
	}

	main {
		width: 100%;
		min-height: 837px;
		position: relative;
	}

	:where(.font-r) {
		font-family: var(--font-round);
		letter-spacing: 0.05em;
	}
}

/* ===== Layout ===== */
@layer layout {
	.l-col {
		display: flex;
		flex-flow: column;
		align-items: flex-start;
	}

	.l-main {
		width: 100%;
		position: relative;
		max-width: 1920px;
		margin-inline: auto;
		overflow: hidden;
	}

	.page-lp-thanks .l-main {
		padding-top: calc(var(--header-h) + 40px);
		min-height: 667px;
	}

	.l-section {
		width: 100%;
		position: relative;
		z-index: 0;
	}

	.l-inner {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
		z-index: 10;
	}

	/* ------------------------------------------------------------
image box
---------------------------------------------------------------*/
	.img-box {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
	}
	.img-box > * {
		width: 100%;
		height: 100%;
	}
	.img-box img {
		width: 100%;
		height: 100%;
	}
	.img-box.--contain img {
		object-fit: contain;
	}
	.img-box.--cover img {
		object-fit: cover;
	}
}

/* ===== Component ===== */
@layer component {
	/* --------- Header --------- */
	.c-header {
		width: min(1920px, 100%);
		position: fixed;
		margin-inline: auto;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: transparent;
		height: var(--header-h);
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-top: 20px;
		transition: all ease 0.33s;
	}

	.c-header__inner {
		width: 100%;
		height: 100%;
		padding-inline: 20px;
		background: var(--c-wh);
		border-radius: 5px;
		overflow: hidden;
		filter: drop-shadow(0px 5px 10px rgb(0 0 0 / 5%));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 50px;
	}

	.c-header__contents {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all ease 0.33s;
	}

	.c-header__logo {
		width: clamp(120px, 8.235vw, 140px);
		height: auto;
		aspect-ratio: 191 / 37;
		display: grid;
		place-items: center;
		overflow: hidden;
		flex-shrink: 0;
	}

	.c-header__logo a {
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		overflow: hidden;
	}

	.c-header__nav-wrapper {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		gap: clamp(20px, 2.941vw, 50px);
	}

	.c-header__nav {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.c-header__nav-list {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(20px, 2.941vw, 50px);
		width: 100%;
		font-weight: bold;
	}

	.c-header__link-btn {
		width: 160px;
		height: auto;
		aspect-ratio: 160 / 50;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	/* --------- SP Navi --------- */

	.c-header__toggle {
		display: none;
		width: 60px;
		height: auto;
		position: absolute;
		aspect-ratio: 1 / 1;
		appearance: none;
		border: none;
		background: var(--c-primary);
		cursor: pointer;
		overflow: hidden;
		top: 0;
		right: 0;
	}

	.c-header__toggle-bar {
		position: relative;
		width: max-content;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		justify-content: center;
		gap: 6px;
	}
	.c-header__toggle-bar span {
		position: relative;
		width: 28px;
		height: 2px;
		border-radius: 999px;
		display: block;
		transition: transform 0.3s, opacity 0.3s;
		background: var(--c-wh);
	}

	.c-header__toggle-bar span:nth-child(2) {
		width: 23px;
	}

	.c-header__toggle-bar span:nth-child(3) {
		width: 15px;
	}

	.c-drawer {
		position: relative;
		background-image: url("../img/lp_ad_truck/drawer-bg.png");
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		translate: 100% 100%;
		transition: translate 0.4s ease;
		display: none;
		padding-top: calc(var(--header-h) + clamp(40px, 10.667vw, 80px));
	}

	.c-drawer__nav ul {
		padding: 32px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* --------- global Navi --------- */
	.c-gnav__wrapper {
		width: 100%;
		gap: 34px;
	}

	.c-gnav {
		width: 100%;
	}

	.c-gnav__list {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 30px;
	}

	.c-gnav__list > li {
		width: 100%;
	}

	.c-gnav__list > li a {
		aspect-ratio: 670 / 143;
	}

	@media (max-width: 999px) {
		.c-header {
			padding: 0;
		}

		.c-header.is-open {
			height: 100lvh;
			padding: 0;
		}

		.c-header__inner {
			border-radius: 0;
			filter: drop-shadow(0px 3px 6px rgb(0 0 0 / 5%));
			flex-flow: column;
			justify-content: flex-start;
			transition: all ease 0.33s;
			padding: 0px;
			gap: 30px;
			background: var(--c-bk);
		}

		.c-header__contents {
			height: 60px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 20;
			background: var(--c-wh);
			padding-left: 15px;
		}

		.c-header__nav {
			display: none;
		}

		.c-header__nav-wrapper .c-header__link-btn {
			display: none;
		}

		.c-header__toggle {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.c-header.is-open .c-drawer {
			translate: 0 0;
			display: flex;
			width: 100%;
			height: 100%;
			padding-inline: clamp(20px, 5.333vw, 40px);
			justify-content: center;
			align-items: flex-start;
		}

		.c-drawer__inner {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			padding-bottom: 30px;
			max-width: 500px;
		}

		.c-gnav-bottom-btn {
			aspect-ratio: 67 / 15;
		}

		.c-header.is-open .c-header__toggle-bar span:nth-child(1) {
			transform: translate(0, 8px) rotate(45deg);
			width: 24px;
		}

		.c-header.is-open .c-header__toggle-bar span:nth-child(2) {
			opacity: 0;
		}

		.c-header.is-open .c-header__toggle-bar span:nth-child(3) {
			transform: translate(0%, -8px) rotate(-45deg);
			width: 24px;
		}
	}

	/* --------- Footer --------- */
	.c-footer {
		width: 100%;
		margin-inline: auto;
		position: relative;
		z-index: 0;
		padding-block: clamp(80px, 5.882vw, 100px) clamp(90px, 7.059vw, 120px);
		background: var(--c-wh);
	}
	.img-footer-copy {
		aspect-ratio: 49 / 13;
		width: clamp(280px, 21.765vw, 370px);
		margin-inline: auto;
	}
	.bottom-fixed-btn {
		display: none;
	}
	@media (max-width: 768px) {
		.bottom-fixed-btn {
			display: flex;
			width: clamp(187px, 50vw, 375px);
			position: fixed;
			bottom: 0;
			right: 0;
			aspect-ratio: 370 / 100;
			z-index: 100;
			opacity: 0;
			transition: opacity ease 0.33s;
		}
		.bottom-fixed-btn.active {
			opacity: 1;
		}
	}
}

/* ===== Utility ===== */
@layer utility {
	[x-cloak] {
		display: none !important;
	}

	.not-scroll {
		overflow: hidden;
		touch-action: none;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.scroll-bar::-webkit-scrollbar {
		width: 3px;
		height: 3px;
		border-radius: 999px;
	}

	.scroll-bar::-webkit-scrollbar-thumb {
		background: var(--c-bk);
	}

	.scroll-bar::-webkit-scrollbar-track {
		background: var(--c-l-gray);
	}

	br.sp {
		display: none;
	}

	@media (max-width: 768px) {
		br.pc {
			display: none;
		}

		br.sp {
			display: inline;
		}
	}

	.u-txt-red {
		color: #f41010;
	}
}

@layer page {
	/* --------- FV --------- */
	.sec-fv {
		z-index: 10;
	}
	.c-fv-slider {
		width: 100%;
		overflow: hidden;
	}
	.img-fv {
		aspect-ratio: 1700 / 1000;
	}
	@media (max-width: 768px) {
		.img-fv {
			aspect-ratio: 25 / 36;
		}
	}

	/* --------- FV SLider --------- */
	.c-fv-slider {
		width: 100%;
	}
	.c-fv-slider-img {
		aspect-ratio: 1700 / 1190;
	}
	.c-fv-slider .swiper-wrapper {
		transition-timing-function: linear;
	}
	@media (max-width: 768px) {
		.sec-fv-slider {
			margin-top: -9px;
			z-index: 0;
		}
	}

	/* --------- Worry --------- */
	.img-worry {
		aspect-ratio: 1700 / 1581;
	}
	@media (max-width: 768px) {
		.img-worry {
			aspect-ratio: 390 / 1019;
		}
	}

	/* --------- CV --------- */
	.sec-cv {
		background-image: url("../img/lp_ad_truck/cv-base-pc.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(50px, 4.706vw, 80px);
	}
	.l-cv {
		align-items: center;
		gap: 45px;
		width: 62%;
		max-width: 1050px;
		margin-inline: auto;
	}
	.c-cv-ttl {
		aspect-ratio: 758 / 113;
	}
	.c-cv__btns {
		width: 100%;
		display: grid;
		grid-template-columns: 332fr 280fr 280fr;
		gap: clamp(15px, 1.765vw, 30px);
		align-items: center;
		padding-inline: clamp(30px, 2.941vw, 50px);
		padding-block: clamp(20px, 2.353vw, 40px);
		background: var(--c-wh);
		border-radius: 5px;
	}
	.c-btn-cv-tel {
		aspect-ratio: 662 / 117;
	}
	.c-btn-cv-black,
	.c-btn-cv-blue {
		aspect-ratio: 7 / 2;
	}

	@media (max-width: 768px) {
		.sec-cv {
			background-image: url("../img/lp_ad_truck/cv-base-sp.png");
		}
		.l-cv {
			width: 100%;
			max-width: 500px;
		}
		.c-cv-ttl {
			aspect-ratio: 625 / 219;
		}
		.c-cv__btns {
			grid-template-columns: 1fr;
		}
		.c-btn-cv-tel {
			aspect-ratio: 59 / 15;
		}
		.c-btn-cv-black,
		.c-btn-cv-blue {
			aspect-ratio: 59 / 12;
		}
	}

	/* --------- reason --------- */
	.img-reason {
		aspect-ratio: 1283 / 3569;
	}
	@media (max-width: 768px) {
		.img-reason {
			aspect-ratio: 390 / 4376;
		}
	}

	/* --------- advantage --------- */
	.sec-advantage {
		background: var(--c-wh);
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(40px, 5.882vw, 100px) clamp(40px, 7.059vw, 120px);
	}
	.l-advantage {
		gap: clamp(20px, 2.353vw, 40px);
		align-items: center;
	}
	.c-advantage-head {
		aspect-ratio: 600 / 139;
		width: 81%;
		max-width: 970px;
	}
	.c-advantage-tbl-wrapper {
		width: 100%;
		gap: clamp(20px, 2.353vw, 40px);
	}
	.c-advantage-tbl-scroll {
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	.c-advantage-tbl {
		aspect-ratio: 1200 / 1027;
	}
	.c-advantage-note {
		aspect-ratio: 1200 / 59;
	}

	@keyframes advantageScrollHint {
		0% {
			transform: translateX(0);
		}
		45% {
			transform: translateX(-28px);
		}
		100% {
			transform: translateX(0);
		}
	}
	.c-advantage-scroll-hint {
		display: none;
	}

	@media (max-width: 768px) {
		.sec-advantage {
			padding-inline: 0;
		}
		.c-advantage-head {
			width: 100%;
			aspect-ratio: 666 / 365;
			padding-inline: clamp(20px, 2.353vw, 40px);
			max-width: 500px;
			margin-inline: auto;
		}
		.c-advantage-note {
			aspect-ratio: 662 / 203;
			padding-inline: clamp(20px, 2.353vw, 40px);
			max-width: 500px;
			margin-inline: auto;
		}
		.c-advantage-tbl-scroll {
			overflow-x: scroll;
			padding-bottom: 8px;
		}
		.c-advantage-tbl {
			min-width: 800px;
		}

		.c-advantage-scroll-hint {
			display: block;
			position: absolute;
			top: 12px;
			right: 20px;
			z-index: 5;
			width: 74px;
			pointer-events: none;
			opacity: 1;
			transition: opacity 0.4s ease, visibility 0.4s ease;
			animation: advantageScrollHint 1.4s ease-in-out infinite;
		}

		.c-advantage-scroll-hint img {
			display: block;
			width: 100%;
			height: auto;
		}

		.c-advantage-scroll-hint.is-hide {
			opacity: 0;
			visibility: hidden;
			animation: none;
		}
	}

	/* --------- scene --------- */
	.img-scene {
		aspect-ratio: 425 / 281;
	}
	@media (max-width: 768px) {
		.img-scene {
			aspect-ratio: 75 / 224;
		}
	}

	/* --------- Case --------- */
	.sec-case {
		background-image: url("../img/lp_ad_truck/case-bg-pc.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		padding-block: clamp(30px, 6.765vw, 115px) clamp(65px, 6.765vw, 115px);
	}
	.l-case {
		width: 100%;
		gap: clamp(25px, 5.882vw, 100px);
	}
	.l-case > .l-inner {
		padding-inline: clamp(20px, 2.353vw, 40px);
	}
	.c-case-ttl {
		aspect-ratio: 14 / 3;
		width: clamp(450px, 45.471vw, 773px);
	}
	.c-case-slider-area {
		width: 100%;
		position: relative;
	}
	.c-case-slider {
		width: 100%;
	}

	.slide-btns {
		position: absolute;
		top: 50%;
		translate: 0 -50%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
		margin-inline: auto;
		width: 84%;
	}
	.btn-slide {
		width: 23px;
		height: auto;
		aspect-ratio: 23 / 43;
		position: relative;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		transition: var(--transition-c);
	}
	@media (hover: hover) {
		.btn-slide:hover {
			opacity: 0.6;
		}
	}
	.btn-slide.--prev {
		background-image: url("../img/lp_ad_truck/icon-chevron-prev.png");
	}
	.btn-slide.--next {
		background-image: url("../img/lp_ad_truck/icon-chevron-next.png");
	}

	.swiper-pagination {
		display: none;
	}

	@media (max-width: 768px) {
		.sec-case {
			background-image: url("../img/lp_ad_truck/case-bg-sp.png");
			padding-inline: clamp(20px, 2.353vw, 40px);
		}
		.l-case > .l-inner {
			padding-inline: 0;
		}
		.c-case-ttl {
			aspect-ratio: 409 / 259;
			width: clamp(205px, 54.667vw, 410px);
			margin-inline: auto;
		}
		.slide-btns {
			width: 100%;
		}
		.btn-slide {
			width: clamp(15px, 3.867vw, 29px);
		}
		.swiper-pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			bottom: -30px !important;
		}
		.swiper-pagination-bullet {
			width: clamp(11px, 2.933vw, 22px);
			height: auto;
			aspect-ratio: 1 / 1;
			border-radius: 999px;
			background: var(--c-m-gray);
			opacity: 1;
		}
		.swiper-pagination-bullet-active {
			background: var(--c-primary);
			opacity: 1;
		}
	}

	/* --------- Case logo --------- */
	.sec-case-logos {
		background: var(--c-wh);
		padding-block: clamp(25px, 2.941vw, 50px);
	}
	.c-case-logo-slider {
		width: 100%;
		overflow: hidden;
	}
	.c-case-logo-slider .swiper-wrapper {
		transition-timing-function: linear;
	}
	.c-case-logo-item {
		width: auto !important;
	}
	.c-case-logo-img {
		width: auto;
	}

	@media (max-width: 768px) {
		.c-case-logo-img {
			height: 100px !important;
		}
	}
	@media (max-width: 500px) {
		.c-case-logo-img {
			height: 50px !important;
		}
	}

	/* --------- plan --------- */
	.img-plan {
		aspect-ratio: 340 / 417;
	}
	@media (max-width: 768px) {
		.img-plan {
			aspect-ratio: 750 / 3869;
		}
	}

	/* --------- area --------- */
	.img-area {
		aspect-ratio: 1700 / 780;
	}
	@media (max-width: 768px) {
		.img-area {
			aspect-ratio: 375 / 658;
		}
	}

	/* --------- flow --------- */
	.sec-flow {
		padding-block: clamp(40px, 5.882vw, 100px);
	}
	.sec-flow > .l-inner {
		max-width: none;
	}
	.l-flow {
		gap: clamp(25px, 3.529vw, 60px);
		align-items: center;
	}
	.c-flow-ttl {
		width: clamp(147px, 17.529vw, 298px);
		aspect-ratio: 298 / 105;
	}
	.c-flow-tbl-wrapper {
		width: 100%;
		padding-left: clamp(150px, 14.706vw, 250px);
	}
	.c-flow-tbl-scroll {
		width: 100%;
		overflow-x: scroll;
		padding-bottom: clamp(15px, 1.765vw, 30px);
	}
	.c-flow-tbl {
		width: 94vw;
		aspect-ratio: 53 / 19;
		margin-right: clamp(150px, 14.706vw, 250px);
	}

	@media (max-width: 768px) {
		.sec-flow {
			padding-inline: clamp(20px, 2.353vw, 40px);
		}
		.c-flow-ttl {
			aspect-ratio: 149 / 61;
			max-width: 500px;
			margin-inline: auto;
		}
		.c-flow-tbl-wrapper {
			padding-left: 0px;
		}
		.c-flow-tbl-scroll {
			overflow: hidden;
			padding-bottom: 0px;
		}
		.c-flow-tbl {
			min-width: 0;
			aspect-ratio: 670 / 2152;
			margin-right: 0px;
		}
	}

	/* --------- FAQ --------- */
	.sec-faq {
		background: var(--c-wh);
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(40px, 5.882vw, 100px) clamp(40px, 7.059vw, 120px);
	}
	.l-faq {
		gap: clamp(20px, 2.353vw, 40px);
		align-items: center;
	}
	.c-faq-ttl {
		width: clamp(140px, 16.471vw, 280px);
		aspect-ratio: 553 / 209;
	}

	@media (max-width: 768px) {
		.c-faq-ttl {
			aspect-ratio: 139 / 61;
			max-width: 500px;
			margin-inline: auto;
		}
	}

	.faq-list {
		width: 100%;
		gap: clamp(15px, 1.765vw, 30px);
	}
	.acc-box {
		width: 100%;
		background: var(--c-light);
		border: 1px solid var(--c-l-gray);
		border-radius: clamp(5px, 0.588vw, 10px);
		position: relative;
		overflow: hidden;
		transition: var(--transition-c);
	}

	.acc-btn {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: clamp(75px, 5.882vw, 100px);
		padding-inline: clamp(50px, 6.176vw, 105px);
		position: relative;
		cursor: pointer;
	}
	.acc-btn::before {
		content: "";
		position: absolute;
		left: clamp(15px, 2.353vw, 40px);
		width: clamp(25px, 2.353vw, 40px);
		height: auto;
		aspect-ratio: 40 / 35;
		background-image: url("../img/lp_ad_truck/faq-icon-q.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.acc-btn::after {
		content: "";
		position: absolute;
		right: clamp(15px, 2.176vw, 37px);
		width: clamp(16px, 1.588vw, 27px);
		height: auto;
		aspect-ratio: 1 / 1;
		background-image: url("../img/lp_ad_truck/faq-icon-plus.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.is-open .acc-btn::after {
		background-image: url("../img/lp_ad_truck/faq-icon-minus.png");
	}
	.acc-btn > p {
		font-size: clamp(14px, 1.176vw, 20px);
		line-height: 1.5;
	}
	.acc-panel {
		width: 100%;
	}
	.acc-panel-inner {
		width: 100%;
		padding-block: 0 clamp(20px, 2.353vw, 40px);
		padding-inline: clamp(20px, 2.353vw, 40px);
		position: relative;
	}
	.acc-panel-inner > p {
		width: 100%;
		font-size: clamp(14px, 1.059vw, 18px);
		line-height: calc(32 / 18);
		letter-spacing: 0.05em;
		text-align: justify;
		padding: clamp(20px, 2.353vw, 40px);
		background: var(--c-wh);
		border-radius: clamp(5px, 0.588vw, 10px);
	}

	/* --------- contact --------- */
	.sec-contact {
		background-image: url("../img/lp_ad_truck/contact-bg-pc.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(40px, 5.882vw, 100px) clamp(40px, 4.118vw, 70px);
	}
	.l-contact {
		gap: 32px;
	}
	.c-contact-ttl {
		aspect-ratio: 2352 / 341;
	}
	.l-contact-group {
		width: 100%;
		gap: clamp(15px, 2.353vw, 40px);
	}
	.c-contact-btns {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(15px, 2.353vw, 40px);
		align-items: center;
	}
	.c-contact-btns > a {
		aspect-ratio: 29 / 9;
	}

	.contact-form-wrapper {
		width: 100%;
		background: var(--c-wh);
		padding-top: clamp(30px, 2.941vw, 50px);
		padding-inline: clamp(20px, 3.529vw, 60px);
		padding-bottom: clamp(40px, 4.706vw, 80px);
		border-radius: clamp(5px, 0.588vw, 10px);
	}

	.form-head {
		width: 100%;
		align-items: center;
		gap: clamp(28px, 2.706vw, 46px);
		margin-bottom: clamp(35px, 2.824vw, 48px);
	}
	.form-head__note {
		font-size: clamp(14px, 1.059vw, 18px);
		line-height: 1.6;
		text-align: center;
	}

	.form-step {
		width: min(885px, 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
		margin-inline: auto;
	}
	#mfp_phase_confirm .form-step {
		margin-bottom: clamp(35px, 2.824vw, 48px);
	}

	.form-step li {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		color: #bfbfbf;
		width: 80px;
		height: auto;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		font-weight: 500;
	}
	.form-step li.active {
		color: var(--c-bk);
	}
	.form-step__num {
		text-align: center;
		font-family: var(--font-en);
		font-size: clamp(12px, 0.941vw, 16px);
	}

	.form-step__dot {
		position: relative;
		width: 20px;
		height: auto;
		aspect-ratio: 1 / 1;
		border: 6px solid #999;
		border-radius: 50%;
		background: #fff;
		box-sizing: border-box;
		z-index: 2;
	}
	.form-step li.active .form-step__dot {
		border-color: var(--c-bk);
	}

	.form-step__txt {
		text-align: center;
		font-size: clamp(14px, 1.059vw, 18px);
		color: var(--c-bk) !important;
	}

	.form-step li::after {
		content: "";
		position: absolute;
		top: 50%;
		border-top: 4px dotted #999;
		z-index: 1;
		translate: 0 -50%;
		left: 50%;
		width: 500%;
	}
	.form-step li:last-child::after {
		content: none;
	}
	.form-step li.active::after {
		border-color: var(--c-bk);
	}

	.form dl.form-items {
		width: 100%;
		display: flex;
		flex-flow: column;
		padding: 0;
		gap: clamp(25px, 2.118vw, 36px);
		max-width: none;
		margin-bottom: clamp(20px, 5.333vw, 40px);
	}
	.form-item {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: clamp(10px, 0.765vw, 13px);
	}

	.form dl.form-items .form-item dt {
		font-size: clamp(16px, 1.176vw, 20px);
		width: max-content;
		align-items: center;
		gap: clamp(12px, 1vw, 17px);
		justify-content: flex-start;
		line-height: 1.4;
		padding: 0;
	}
	.form dl.form-items .form-item dt .req-label {
		font-size: clamp(14px, 0.941vw, 16px);
		line-height: 1;
		display: flex;
		color: var(--c-wh);
		background: var(--c-primary);
		width: 50px;
		height: 30px;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		padding: 0;
	}

	.form dl.form-items .form-item dd {
		width: 100%;
	}

	.form dl.form-items .form-item dd select,
	.form dl.form-items .form-item dd textarea,
	.form dl.form-items .form-item dd input {
		font-size: clamp(16px, 1.059vw, 18px);
		width: 100%;
		padding-right: clamp(26px, 3.235vw, 55px);
		width: 100%;
		background: var(--c-light);
		border: 1px solid var(--c-l-gray);
		border-radius: 5px;
		position: relative;
		overflow: hidden;
		padding-block: clamp(20px, 1.647vw, 28px);
		padding-inline: clamp(14px, 1.765vw, 30px);
		max-width: none;
	}
	.form dl.form-items .form-item dd select,
	.form dl.form-items .form-item dd textarea,
	.form dl.form-items .form-item dd input {
		font-size: clamp(16px, 1.059vw, 18px);
		width: 100%;
		padding-right: clamp(26px, 3.235vw, 55px);
		width: 100%;
		background: var(--c-light);
		border: 1px solid var(--c-l-gray);
		border-radius: 5px;
		position: relative;
		overflow: hidden;
		padding-block: clamp(20px, 1.647vw, 28px);
		padding-inline: clamp(14px, 1.765vw, 30px);
		max-width: none;
	}

	.form dl.form-items .form-item dd textarea {
		width: 100% !important;
		height: clamp(150px, 11.765vw, 200px) !important;
	}

	.pp-box {
		line-height: 2;
		overflow-y: auto;
		height: 142px;
		margin-bottom: 30px;
		padding: 40px 50px;
		width: 100%;
		border: 1px solid var(--c-l-gray);
		border-radius: 5px;
		position: relative;
		padding-block: clamp(20px, 1.765vw, 30px);
		padding-inline: clamp(15px, 1.765vw, 30px);
		max-width: none;
		flex-flow: column;
		display: flex;
		align-items: flex-start;
		gap: clamp(15px, 1.176vw, 20px);
	}
	.pp-box h2 {
		font-size: clamp(14px, 1.059vw, 18px);
	}
	.pp-box h3 {
		font-size: clamp(13px, 0.941vw, 16px);
	}
	.pp-box * {
		font-size: clamp(12px, 0.824vw, 14px);
	}

	.submit-box .agree label {
		font-size: clamp(14px, 1.059vw, 18px);
		position: relative;
	}

	.submit-box .agree input[type="checkbox"] + input + label:before,
	.submit-box .agree input[type="checkbox"] + label:before {
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		margin-right: 18px;
		content: "";
		border: 1px solid var(--c-l-gray);
		background: var(--c-wh);
	}
	.submit-box .agree input[type="checkbox"]:checked + input + label:after,
	.submit-box .agree input[type="checkbox"]:checked + label:after {
		content: "";
		background-image: url("../img/lp_ad_truck/icon-check.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 26px;
		height: auto;
		aspect-ratio: 26 / 20;
		position: absolute;
		left: 4px;
		top: 3px;
	}

	.submit-box #confirm {
		width: clamp(295px, 28.235vw, 480px);
		height: auto;
		background-image: url("../img/lp_ad_truck/contact-btn-confirm.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		height: auto;
		aspect-ratio: 480 / 80;
		cursor: pointer;
		background-color: var(--c-m-gray);
	}
	.submit-box #confirm:hover {
		opacity: 0.7;
	}
	.submit-box #confirm.disable {
		background-image: url("../img/lp_ad_truck/contact-btn-disabled.png");
	}

	#mfp_phase_confirm_inner .mfp_buttons {
		width: 100%;
		gap: 10px;
		color: transparent;
		display: flex;
		justify-content: center;
	}
	#mfp_phase_confirm_inner .mfp_buttons button {
		width: clamp(295px, 28.235vw, 480px);
		height: auto;
		background-image: url("../img/lp_ad_truck/contact-btn-send.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		height: auto;
		aspect-ratio: 480 / 80;
		cursor: pointer;
		background-color: var(--c-m-gray);
	}
	#mfp_phase_confirm_inner .mfp_buttons button:hover {
		opacity: 0.7;
	}
	#mfp_phase_confirm_inner .mfp_buttons #mfp_button_cancel {
		background-image: url("../img/lp_ad_truck/contact-btn-cancel.png");
	}

	#mfp_phase_confirm_inner table {
		margin-bottom: clamp(30px, 3.529vw, 60px);
	}

	@media (max-width: 999px) {
		.form-step {
			width: 600px;
		}

		.form-step li {
			width: 60px;
		}

		.form-step__dot {
			position: relative;
			width: 15px;
			border-width: 4px;
		}

		.form-step li::after {
			width: 260px;
		}
	}
	@media (max-width: 768px) {
		.sec-contact {
			background-image: url("../img/lp_ad_truck/contact-bg-sp.png");
		}
		.c-contact-ttl {
			aspect-ratio: 351 / 74;
			max-width: 750px;
			margin-inline: auto;
		}
		.c-contact-btns {
			grid-template-columns: minmax(0, 1fr);
		}

		.form-step {
			width: 300px;
		}

		.form-step li::after {
			width: 120px;
		}

		#mfp_phase_confirm_inner h4 {
			font-size: clamp(14px, 1.059vw, 18px);
			text-align: center;
		}
		.form-step li::after {
			width: 120px;
		}
		#mfp_confirm_table tbody tr {
			width: 100%;
			display: flex;
			flex-flow: column;
			margin-bottom: 20px;
		}
		#mfp_phase_confirm_inner table th {
			width: 100%;
			padding-right: 0;
			padding: 0;
			font-size: clamp(14px, 0.941vw, 16px);
		}
		#mfp_phase_confirm_inner table th,
		#mfp_phase_confirm_inner table td {
			padding: 0;
			text-align: left;
			font-size: clamp(14px, 0.941vw, 16px);
		}
		#mfp_phase_confirm_inner .mfp_buttons {
			flex-flow: column;
			gap: 0;
		}
		#mfp_phase_confirm_inner .mfp_buttons button {
			width: 100%;
		}
	}

	/* --------- company --------- */
	.sec-company {
		background: var(--c-wh);
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(40px, 5.882vw, 100px) 0;
	}
	.l-company {
		gap: clamp(30px, 2.353vw, 40px);
		align-items: center;
	}
	.c-company-ttl {
		width: clamp(165px, 13.529vw, 230px);
		aspect-ratio: 443 / 210;
	}

	.c-company-info-wrapper {
		width: 100%;
		position: relative;
	}
	.c-company-info {
		aspect-ratio: 1200 / 460;
		z-index: 0;
	}
	.c-company-info__link {
		width: 27%;
		height: auto;
		aspect-ratio: 15 / 1;
		display: block;
		position: absolute;
		z-index: 10;
		bottom: 10%;
		right: 6%;
	}

	@media (max-width: 768px) {
		.c-company-ttl {
			aspect-ratio: 329 / 122;
			max-width: 500px;
			margin-inline: auto;
		}
		.c-company-info {
			aspect-ratio: 670 / 1119;
		}
		.c-company-info__link {
			width: 67%;
			bottom: 4%;
			right: 4%;
		}
	}

	/* --------- thanks --------- */
	.sec-thanks {
		width: 100%;
		padding-inline: clamp(20px, 2.353vw, 40px);
		padding-block: clamp(40px, 5.882vw, 100px);
	}
	.l-thanks-group {
		width: 100%;
		align-items: center;
		gap: clamp(50px, 7.059vw, 120px);
	}
	.c-thanks-head {
		width: 100%;
		align-items: center;
		gap: clamp(24px, 2.353vw, 40px);
	}
	.c-thanks-head__ttl {
		display: grid;
		align-items: center;
		text-align: center;
		gap: 15px;
		width: max-content;
	}
	.c-thanks-head__ttl strong {
		font-size: clamp(24px, 2.471vw, 42px);
		font-weight: 600;
		color: var(--c-primary);
		letter-spacing: 0.05em;
	}
	.c-thanks-head__ttl span {
		font-family: var(--font-en);
		font-weight: 500;
		font-size: clamp(12px, 0.941vw, 16px);
	}
	.c-thanks-head__txt {
		width: 100%;
		text-align: center;
		line-height: 2;
		font-size: clamp(14px, 0.941vw, 16px);
	}
}