/*====================================*/
/* drivepass */
/*====================================*/
/*== common =======*/
main.drivepass {
	--color-border: #00a9be;
	--color-plan-01: #ad0755;
	--color-benefits: #368548;
	--color-benefits-dt: #f4f4f4;
	--rule-apply-color: #007ace;

	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	/*-- 関西エリア --*/
	.kyoto-hyogo {
		--title-color: #ad0755;
	}
	.wakayama-nara {
		--title-color: #096633;
		--color-plan-01: #096633;
	}
	.kyoto-biwako {
		--title-color: #ff9b00;
		--color-plan-01: #ff9b00;
	}
	.kansai_daitamba {
		--title-color: #c00500;
		--color-plan-01: #c00500;
	}
	.kansai_taikounoyu {
		--title-color: #ff9b00;
		--color-plan-01: #ef5a6e;
	}
	.kansai_adventure_world {
		--title-color: #ff9b00;
		--color-plan-01: #ff9b00;
	}
	/*-- 中国エリア --*/
	.chugokudrive_2day {
		--title-color: #ff9b00;
		--color-plan-01: #ff9b00;
	}
	.chugokudrive_3day {
		--title-color: #03a0e8;
		--color-plan-01: #03a0e8;
	}
	.chugoku_iwami {
		--title-color: #ff9b00;
		--color-plan-01: #ff9b00;
	}
	.chugoku_tottori_a {
		--title-color: #1eb9e6;
		--color-plan-01: #1eb9e6;
	}
	.chugoku_tottori_b {
		--title-color: #ff6600;
		--color-plan-01: #ff6600;
	}
	.chugoku_orizurutower_2day {
		--title-color: #ff9c00;
		--color-plan-01: #ff9c00;
	}
	.chugoku_orizurutower_3day {
		--title-color: #0071c0;
		--color-plan-01: #0071c0;
	}
	.chugoku_sanin_a {
		--title-color: #1eb9e6;
		--color-plan-01: #1eb9e6;
		--plan-select: #1eb9e6;
	}
	.chugoku_sanin_b {
		--title-color: #ff6600;
		--color-plan-01: #ff6600;
		--plan-select: #ff6600;
	}

	/*-- 四国エリア --*/
	.shikokudrive_2day,
	.shikokudrive_3day {
		--title-color: #f766c4;
		--color-plan-01: #f766c4;
	}
	.shikoku_tour_a {
		--title-color: #7e328e;
		--color-plan-01: #7e328e;
		--plan-select: #7e328e;
	}
	.shikoku_tour_b {
		--title-color: #ffe201;
		--color-plan-01: #ffe201;
		--plan-select: #a08e00;
	}
	.shikoku_tour_c {
		--title-color: #eb6101;
		--color-plan-01: #eb6101;
		--plan-select: #eb6101;
	}
	.shikoku_tour_d {
		--title-color: #1d2088;
		--color-plan-01: #1d2088;
		--plan-select: #1d2088;
	}
	.shikoku_actland_2day,
	.shikoku_actland_3day {
		--title-color: #f766c4;
		--color-plan-01: #f766c4;
	}
	/*-- 九州エリア --*/
	.kyushudrive_a,
	.kyushu-marine_a {
		--title-color: #97e3ff;
		--color-plan-01: #97e3ff;
		--rule-apply-color: #007ace;
	}
	.kyushudrive_b,
	.kyushu-marine_b {
		--title-color: #ffb1fb;
		--color-plan-01: #ffb1fb;
		--rule-apply-color: #007ace;
	}
	.kyushudrive_c {
		--title-color: #ffc9ca;
		--color-plan-01: #ffc9ca;
		--rule-apply-color: #007ace;
	}
	.kyushudrive_d_3d,
	.kyushudrive_d_4d,
	.kyushu-marine_c_3d,
	.kyushu-marine_c_4d {
		--title-color: #ffd27a;
		--color-plan-01: #ffd27a;
		--rule-apply-color: #007ace;
	}

	.step.kyushudrive_a h2,
	.step.kyushu-marine_a h2{
		color: var(--color-black);
	}

  /*-- ツーリングプラン --*/
	.course-meishin {
	  --title-color: #7e328e;
	  --color-plan-01: #7e328e;
	}
	.course-chugoku {
	  --title-color: #00b0f0;
	  --color-plan-01: #00b0f0;
	}
	.course-hanwa {
	  --title-color: #ffc002;
	  --color-plan-01: #ffc002;
	}
	.course-kagawa {
	  --title-color: #ff3301;
	  --color-plan-01: #ff3301;
	}
	.course-ehime {
	  --title-color: #4473c4;
	  --color-plan-01: #4473c4;
	}
	.course-saga {
	  --title-color: #ffc002;
	  --color-plan-01: #ffc002;
	}
	.course-oita {
	  --title-color: #92d050;
	  --color-plan-01: #92d050;
	}
	.course-miyazaki {
	  --title-color: #00b0f0;
	  --color-plan-01: #00b0f0;
	}

	/*.t_kep{
	  --title-color: #333333;
	  --color-plan-01:#e07283;
	}

	.t_sep{
	  --title-color: #333333;
	  --color-plan-01:#7bbf7d;
	}*/

	
}
/*== エリア個別指定 =======*/
/*-- drive-pass_select-plan --*/
main[data-area="kyushudrive"],
main[data-area="kyushu-marine"] {
	.plan-item h3 {
		color: var(--color-black);
	}
}
main[data-area="shikoku_tour"] {
	.plan-item {
		p {
			width: 360px;
			margin-inline: auto;
		}
		@media (max-width: 576px) {
			p {
				width: 87%;
			}
		}
	}
}
/*-- step h2--*/
main[data-area="kyushudrive"],
main[data-area="kyushu-marine"] {
	.step h2 {
		color: var(--color-black);
	}
}
/*== //エリア個別指定 =======*/

.tag-etclimited {
	max-width: 190px;
	text-align: center;
	padding-block: 7px;
	padding-inline: 5px;
	margin-inline: auto;
	margin-block: clamp(26px, calc(22.25px + 0.625vw), 31px) clamp(11px, calc(8.75px + 0.375vw), 14px);
	border: 1px solid var(--color-medium-gray);
}

.tag-new {
	max-width: 70px;
	text-align: center;
	padding-inline: 5px;
	color: var(--color-white);
	font-size: var(--font-size-14);
	font-weight: 600;
	background-color: #ff0000;
	border-radius: 9999px;
}
.tag-use {
	max-width: 177px;
	width: 100%;
	text-align: center;
	padding-block: 10px;
	padding-inline: 5px;
	font-size: var(--font-size-18);
	font-weight: 500;
	background-color: #fdc8d6;
	border-radius: 9999px;
}
@media (max-width: 768px) {
	.tag-use {
		max-width: 110px;
		padding-block: 5px;
		font-size: var(--font-size-12);
	}
}
@media (max-width: 576px) {
	.tag-use {
		max-width: 70px;
		padding-block: 0;
		font-size: var(--font-size-10);
	}
}
.step-confirm {
	padding-bottom: clamp(45px, calc(-33.75px + 13.125vw), 150px);

	.step-confirm_applyttl {
		position: relative;
		color: var(--colA1);
		font-size: var(--font-size-24);
		text-align: center;
		margin-top: 68px;

		&::before,
		&::after {
			position: absolute;
			top: 0;
			bottom: 0;
			display: block;
			content: "";
			width: 30px;
			height: 2px;
			margin-block: auto;
			background-color: var(--colA1);
		}
		&::before {
			right: -50px;
		}
		&::after {
			left: -50px;
		}
	}
	@media (max-width: 576px) {
		.step-confirm_applyttl {
			font-size: var(--font-size-18);
			margin-top: 40px;
		}
	}

	.l-box-order {
		&.counter-round-group {
			width: 100%;

			.counter-round-item {
				padding-block: clamp(27px, calc(22.5px + 0.75vw), 33px);
				padding-inline: clamp(10px, calc(-5.75px + 2.625vw), 31px);
				margin-bottom: 60px;
				border-radius: 10px;

				&:not(:has(+ .counter-round-item)) {
					margin-bottom: 0;
				}
				.l-flex {
					width: 90%;
					margin-inline: auto;
				}
			}
		}
		&.shikoku_tour h4 {
			position: relative;
			.notes {
				position: absolute;
				bottom: -2em;
				right: 0;
				font-weight: normal;
			}
		}
	}
}
#rule_apply_btn {
	margin-top: clamp(32px, calc(7.25px + 4.125vw), 65px);

	.ruleActBtn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 546px;
		min-height: 108px;
		color: var(--color-white);
		font-size: var(--font-size-20);
		font-weight: 600;
		line-height: 1.5;
		text-align: center;
		background-color: var(--color-medium-gray);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 14px;
		transition: all 0.2s ease;

		&.on {
			background-color: var(--rule-apply-color);
		}
		&::after {
			position: absolute;
			top: 50%;
			right: 17px;
			font-family: "Font Awesome 7 Free" !important;
			content: "\f35a";
			font-weight: 900;
			display: inline-block;
			transform: translateY(-50%);
		}
		&.off {
			pointer-events: none;
			cursor: default;
		}
		&.on:hover {
			opacity: 0.75;
		}
	}
	@media (max-width: 576px) {
		.ruleActBtn {
			width: 370px;
			min-height: 100px;
			font-size: var(--font-size-16);
		}
	}
}
dl.step-confirm_notes {
	grid-template-columns: max-content 1fr;
	padding-block: clamp(27px, calc(22.5px + 0.75vw), 33px);
	padding-inline: clamp(10px, calc(-5.75px + 2.625vw), 31px);
	margin-top: clamp(30px, calc(15px + 2.5vw), 50px);
	& > dd {
		padding-left: 30px;

		a[target="_blank"] {
			color: var(--color-black) !important;
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
			&::after {
				color: var(--color-black);
			}
		}
	}
}
@media (max-width: 576px) {
	dl.step-confirm_notes {
		display: block;

		& > dt {
			margin-bottom: 13px;
		}
		& > dd {
			padding-left: 0;
		}
	}
}
/*== kv-slide =======*/
.kv-slide {
	.l-container-l {
		padding-bottom: clamp(40px, calc(29.5px + 1.7500000000000002vw), 54px);
	}
	@media (max-width: 768px) {
		.l-container-l {
			padding-top: 28px;
			width: 80vw;
		}
	}
}
/*== drive-pass =======*/
.drive-pass {
	padding-block: clamp(35px, calc(-1px + 6vw), 83px) clamp(50px, calc(-4px + 9vw), 122px);
	background-color: var(--colA2);

	&.top {
		border-top: 5px solid var(--colA1);
	}

	nav.anc-nav-links {
		margin-bottom: clamp(30px, calc(-6px + 6vw), 78px);
	}
	nav.anc-nav-links ul {
		max-width: 970px;
		gap: clamp(16px, calc(0.25px + 2.625vw), 37px) clamp(24px, calc(-32.25px + 9.375vw), 75px);

		&:has(> li:nth-child(6)) {
			max-width: 900px;
			gap: clamp(16px, calc(0.25px + 2.625vw), 37px) clamp(24px, calc(-32.25px + 9.375vw), 99px);
		}
	}
}
/*-- about-drive-pass --*/
.about-drive-pass {
	padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
	margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);
}
.about-drive-pass_point {
	padding-inline: clamp(30px, calc(-7.5px + 6.25vw), 80px);
	margin-top: clamp(39px, calc(3.75px + 5.875vw), 86px);

	@media (max-width: 768px) {
		.l-grid-03 {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.l-grid-sp {
		gap: 45px 40px;
	}
	.point-item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2fr 1fr;
		min-height: 150px;
		height: 100%;

		.point {
			position: absolute;
			top: -23px;
			left: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 110px;
			height: 40px;
			color: var(--color-white);
			font-weight: 600;
			background: linear-gradient(135deg, #93c3e5 0%, #93c3e5 15%, var(--colA1) 15%, var(--colA1) 100%);
			border-radius: 5px;
			transform: translateX(-50%);
		}
		.point-txt {
			display: grid;
			place-items: center;
			padding-top: 17px;
		}
		p {
			font-size: var(--font-size-18);
			line-height: 1.5;
			font-weight: 600;
		}
		p > span {
			font-size: var(--font-size-16);
			font-weight: 400;
		}
		a {
			text-align: center;
			text-decoration: underline;
			padding-bottom: 20px;
		}
	}
	@media (max-width: 768px) {
		.point-item {
			margin-bottom: 38px;
		}
		.point-item:last-child {
			margin-bottom: 0;
		}
	}
	.recommend {
		max-width: 650px;
		display: flex;
		align-items: center;
		gap: 30px;
		padding-block: clamp(13px, calc(3.25px + 1.625vw), 26px);
		padding-inline: clamp(17px, calc(-4.0000000000000036px + 3.5000000000000004vw), 45px);
		margin-top: clamp(24px, calc(6.75px + 2.875vw), 47px);
		margin-inline: auto;

		img {
			max-width: 190px;
		}
		ul.type_circle {
			margin-bottom: 0;
		}
	}
	@media (max-width: 576px) {
		.recommend {
			flex-direction: column;
			gap: 9px;
		}
	}
}
.about-drive-pass_examples {
	padding-block: clamp(26px, calc(12.5px + 2.25vw), 44px) clamp(26px, calc(-3.25px + 4.875vw), 65px);
	padding-inline: clamp(20px, calc(-2.5px + 3.75vw), 50px);
	margin-block: clamp(40px, calc(25px + 2.5vw), 60px) clamp(35px, calc(12.5px + 3.75vw), 65px);
	margin-inline: clamp(30px, calc(-7.5px + 6.25vw), 80px);

	h3 {
		display: grid;
		place-items: center;
		max-width: 370px;
		min-height: 80px;
		margin-bottom: clamp(40px, calc(15.25px + 4.125vw), 73px);
		margin-inline: auto;
		background-color: var(--color-white);
		border-radius: 5px;
	}
	@media (max-width: 576px) {
		h3 {
			max-width: 230px;
			min-height: 55px;
		}
	}
	.exampl_group {
		position: relative;
		display: grid;
		place-items: center;
		border-radius: 10px;
		padding-block: clamp(25px, calc(3.9999999999999964px + 3.5000000000000004vw), 53px);
		padding-inline: clamp(20px, calc(14.75px + 0.8750000000000001vw), 27px);
		margin-bottom: clamp(42px, calc(16.499999999999996px + 4.25vw), 76px);

		&:last-child {
			margin-bottom: 0;
		}
		h4 {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		@media (max-width: 576px) {
			h4.heading-bl-round {
				border-radius: 5px;
			}
		}
	}
	p.catch-m {
		color: var(--colA1);
		margin-bottom: clamp(13px, calc(-1.25px + 2.375vw), 32px);
	}
	.example_img img {
		max-width: 883px;
		width: 100%;
		margin-bottom: clamp(13px, calc(-2px + 2.5vw), 33px);
	}
	.example_use {
		gap: 48px;

		.example_use_img img {
			max-width: 490px;
			width: 100%;
		}
	}
	.acc-examples {
		margin-top: 32px;
	}
	@media (max-width: 768px) {
		.example_use {
			flex-direction: column;
			padding-top: 13px;
			gap: 11px;

			.example_use_img img {
				max-width: initial;
			}
			p.catch-s {
				text-align: center;
				line-height: 1.5;
			}
		}
	}
	@media (max-width: 576px) {
		p.catch-m {
			font-size: var(--font-size-14);
		}
	}
}
@media (max-width: 768px) {
	.about-drive-pass_examples {
		margin-inline: 10px;
	}
}
.about-drive-pass_benefits {
	.acc-use {
		margin-top: 32px;
		margin-inline: clamp(30px, calc(-7.5px + 6.25vw), 80px);
		.acc-use_inner {
			display: grid;
			justify-items: center;
			padding-block: clamp(22px, calc(0.25px + 3.6249999999999996vw), 51px);
			padding-inline: clamp(18px, calc(-51px + 11.5vw), 110px);
		}
		h4 {
			margin-bottom: clamp(14px, calc(-1.75px + 2.625vw), 35px);
		}
		p.acc-use_txt {
			font-size: var(--font-size-18);
		}
		ul.l-grid {
			grid-template-columns: repeat(3, 1fr);
			gap: clamp(14px, calc(-2.5px + 2.75vw), 36px) clamp(10px, calc(-20px + 5vw), 50px);
			margin-block: clamp(12px, calc(-5.25px + 2.875vw), 35px) clamp(11px, calc(0.4999999999999982px + 1.7500000000000002vw), 25px);
		}
		ul > li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 240px;
			height: 200px;
			background-color: var(--color-white);
			border-radius: 10px;

			&:first-child {
				grid-column: 1 / -1;
				justify-self: center;
				width: 260px;
				height: 240px;

				img {
					max-width: 101px;
					width: 100%;
					margin-bottom: clamp(14px, calc(-1px + 2.5vw), 34px);
				}
			}

			img {
				max-width: 92px;
				width: 100%;
				margin-bottom: clamp(10px, calc(5.5px + 0.75vw), 16px);
			}
		}
		@media (max-width: 768px) {
			p.acc-use_txt {
				font-size: var(--font-size-12);
				text-align: center;
			}
			.heading-pk-square {
				width: 150px;
			}
			ul > li {
				width: 160px;
				height: 150px;

				&:first-child {
					width: 170px;
					height: 150px;

					img {
						max-width: 64px;
					}
				}
				img {
					max-width: 60px;
				}
			}
		}
		@media (max-width: 576px) {
			ul > li {
				width: 85px;
				height: 90px;

				&:first-child {
					width: 106px;
					height: 98px;

					img {
						max-width: 40px;
					}
				}
				img {
					max-width: 37px;
				}
			}
		}
	}
	@media (max-width: 576px) {
		.btn-accordion-v {
			max-width: 310px;
		}
	}
}
/*== product-list =======*/
.product-list {
	padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
	padding-inline: clamp(30px, calc(-7.5px + 6.25vw), 80px);

	nav.anc-nav-links {
		margin-top: clamp(28px, calc(6.25px + 3.6249999999999996vw), 57px);

		ul {
			flex-wrap: wrap;
			gap: 56px;
			width: 100%;
		}
		ul > li {
			a {
				padding-bottom: clamp(10px, calc(2.5px + 1.25vw), 20px);
			}
		}
		@media (max-width: 768px) {
			ul {
				gap: 8px 40px;
			}
		}
		@media (max-width: 576px) {
		}
	}
}
.product-area {
	padding-bottom: clamp(40px, calc(21.25px + 3.125vw), 65px);
	margin-bottom: clamp(40px, calc(21.25px + 3.125vw), 65px);
	border-bottom: 2px solid var(--colA1);

	&:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	h3 {
		display: grid;
		place-items: center;
		margin-bottom: clamp(25px, calc(8.5px + 2.75vw), 47px);

		span {
			position: relative;
			font-size: unset;
			padding: 0;
			overflow: visible;
			border-bottom: none;

			&::before {
				content: "";
				position: absolute;
				top: 9px;
				left: -50px;
				display: block;
				width: 39px;
				height: 29px;
				background-image: url(/drivepass/assets/img/icon/icon_car.png);
			}

			&::after {
				display: block;
				content: "";
				max-width: 60px;
				height: 5px;
				margin-top: 11px;
				margin-inline: auto;
				background-color: var(--colA1);
			}
		}
		@media (max-width: 768px) {
			span {
				&::before {
					top: 6px;
					left: -40px;
					width: 31px;
					height: 23px;
					background-size: cover;
				}
			}
		}
	}
	.l-grid-tb {
		justify-content: flex-start;
		align-items: flex-start;
		/* grid-template-columns: 356px 1fr; */
		grid-template-columns: max-content 1fr;
		gap: 44px;
	}
	.area-map {
		max-width: 356px;
		width: 25.429vw;

		img {
			width: 100%;
		}
	}
	@media (max-width: 768px) {
		.area-map {
			max-width: initial;
			width: 60%;
			margin-bottom: 20px;
			margin-inline: auto;
		}
	}
	ul.area-banner {
		max-width: 640px;
		width: 100%;
		flex-wrap: wrap;
		align-items: flex-start;
		/* gap: 45px 40px; */
		gap: clamp(20px, calc(-130px + 12.5vw), 45px) clamp(10px, calc(-12.5px + 3.75vw), 40px);
	}
	@media (max-width: 768px) {
		ul.area-banner {
			gap: 40px 30px;
		}
	}
	ul.area-banner > li {
		max-width: 300px;
		width: 47%;

		a {
			display: block;
			text-decoration: none;
		}
		img {
			max-width: 300px;
			width: 100%;
			margin-bottom: 5px;
		}
		p {
			font-size: var(--font-size-18);
			color: var(--color-black);
			font-weight: 600;
			line-height: 1.3;
		}
	}
	@media (max-width: 768px) {
		ul.area-banner > li {
			width: 46%;
		}
	}
	@media (max-width: 576px) {
		ul.area-banner > li {
			width: 100%;
			margin: auto;
		}
	}
}
#nishinippon-area.product-area {
	h3 span {
		&::before {
			height: 24px;
			background-image: url(/drivepass/assets/img/icon/icon_motorcycle.png);
		}
	}
	@media (max-width: 768px) {
		h3 span {
			&::before {
				width: 39px;
				left: -50px;
			}
		}
	}
}

/*== apply-process =======*/
.apply-process {
	padding-block: clamp(41px, calc(17px + 4vw), 73px) clamp(39px, calc(9px + 5vw), 79px);
	background-color: var(--color-light-ivory);

	h2 {
		margin-bottom: clamp(9px, calc(-16.500000000000004px + 4.25vw), 43px);
	}
	h3 {
		text-align: center;
	}
	p {
		font-size: var(--font-size-20);
		text-align: center;
	}
	@media (max-width: 768px) {
		.l-container-m {
			width: 90vw;
		}
		p {
			font-size: var(--font-size-16);
		}
	}
	.btn-group {
		gap: 30px 86px;
		flex-wrap: wrap;

		.icf-roundbtn-h {
			max-width: 510px;
			min-height: 100px;
			font-size: var(--font-size-18);
			border: none;
			box-shadow: none;

			small {
				display: block;
				font-size: var(--font-size-16);
			}
		}
		@media (max-width: 768px) {
			a {
				margin-inline: auto;
			}
		}
	}
}
.apply-process_flow {
	margin-bottom: clamp(53px, calc(23.75px + 4.875vw), 92px);

	ul {
		gap: 100px;
		margin-top: clamp(59px, calc(26.75px + 5.375vw), 102px);
	}
	ul > li {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px 0;
		width: 280px;
		height: 280px;
		background-color: var(--color-white);
		border-radius: 140px;

		&:nth-child(2)::before {
			content: "";
			position: absolute;
			top: 50%;
			left: -55px;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-top: 18px solid transparent;
			border-bottom: 18px solid transparent;
			border-left: 24px solid #03a9be;
			border-right: 0;
		}
		&:nth-child(2)::after {
			content: "";
			position: absolute;
			top: 50%;
			right: -55px;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-top: 18px solid transparent;
			border-bottom: 18px solid transparent;
			border-left: 24px solid #03a9be;
			border-right: 0;
		}
	}
	ul > li p {
		font-weight: 400;
		line-height: 1.5;
	}
	ul > li:nth-child(1) .apply-illust {
		bottom: -24px;
	}
	ul > li:nth-child(2) .apply-illust {
		bottom: -10px;
	}
	ul > li:nth-child(3) .apply-illust {
		bottom: -42px;
	}
	.apply-no {
		width: 108px;
		margin-top: -45px;
	}
	.apply-illust {
		position: absolute;
		width: 176px;

		img {
			width: 100%;
		}
	}
	@media (max-width: 768px) {
		ul {
			flex-direction: column;
		}
		ul > li {
			width: 220px;
			height: 220px;

			&:nth-child(2)::before {
				top: -88px;
				left: 50%;
				transform: translateX(-50%) rotate(90deg);
			}
			&:nth-child(2)::after {
				top: initial;
				bottom: -44px;
				left: 50%;
				transform: translateX(-50%) rotate(90deg);
			}
		}
		.apply-illust {
			width: 126px;
		}
	}
}
.apply-process_first {
	max-width: 1100px;

	p {
		margin-block: clamp(9px, calc(3px + 1vw), 17px) clamp(32px, calc(6.4999999999999964px + 4.25vw), 66px);
	}
	.btn-group {
		gap: 30px clamp(10px, calc(-42.5px + 8.75vw), 80px);
	}
	@media (max-width: 576px) {
		.btn-group {
			grid-template-columns: 1fr;
		}
	}
}
.apply-process_submitted {
	max-width: 1100px;
	padding-top: clamp(42px, calc(-21px + 10.5vw), 126px);

	h3 {
		margin-bottom: clamp(30px, calc(1.5px + 4.75vw), 68px);
	}
	.btn-group {
		gap: 30px clamp(10px, calc(-42.5px + 8.75vw), 80px);
		margin-bottom: clamp(25px, calc(-0.5000000000000036px + 4.25vw), 59px);

		@media (max-width: 768px) {
			a {
				margin-inline: auto;
			}
		}
	}
	.link-icf-ricon {
		font-size: var(--font-size-18);
	}
	.link-icf-ricon:hover::after {
		color: var(--colA1);
	}
	@media (max-width: 768px) {
		.link-icf-ricon {
			font-size: var(--font-size-16);
		}
	}
	@media (max-width: 576px) {
		.btn-group {
			grid-template-columns: 1fr;
		}
	}
}

/*====================================*/
/* .drivepass-detail（詳細） */
/*====================================*/
/*== drive-pass_overview =======*/
main:not([data-area="chugoku_iwami"], [data-area="chugokudrive"], [data-area="chugoku_sanin"]) {
	.drive-pass_overview {
		.term {
			display: none;
		}
	}
}

.drive-pass_overview {
	padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
	padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
	margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);

	h2 {
		margin-bottom: clamp(23px, calc(14.75px + 1.375vw), 34px);
	}
	.lead-m {
		margin-bottom: clamp(15px, calc(9.75px + 0.8750000000000001vw), 22px);
	}
	dl.dl-list {
		margin-top: clamp(25px, calc(16.75px + 1.375vw), 36px);

		& > dt {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		& > dd {
			align-content: center;
			h3 {
				margin-top: clamp(5px, calc(-2.5px + 1.25vw), 15px);
			}
			& > ul {
				margin-top: clamp(6px, calc(0px + 1vw), 14px);
			}
			& > ul.type_circle {
				margin-left: 1em;
			}
		}
		@media (max-width: 576px) {
			& > dt {
				justify-content: flex-start;
				text-align: left;
			}
		}
	}
	dl.dl-grid.dl-grid-sp {
		@media (max-width: 576px) {
			& > dd {
				margin-left: 2rem;
			}
		}
	}
	.bd-gray {
		margin-top: clamp(15px, calc(11.896907216494846px + 0.7216494845360825vw), 22px);
		margin-bottom: clamp(23px, calc(-4.949367088607595px + 3.6392405063291138vw), 46px);
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--color-white);
			width: 100%;
			height: 46px;
			background-color: var(--colA1);
		}
		& > div {
			text-align: center;
			padding-block: clamp(12px, calc(6px + 1vw), 20px) clamp(22px, calc(16px + 1vw), 30px);
			padding-inline: 11px;
			img {
				margin-block: 1em;
			}
		}
		& .l-grid-tb {
			position: relative;
			gap: 40px;

			@media (min-width: 769px) {
				&::before {
					position: absolute;
					top: 50%;
					left: 50%;
					content: "";
					width: 1px;
					height: 85%;
					background-color: var(--color-medium-gray);
					transform: translate(-50%, -50%);
				}
			}
		}
	}
	table {
		width: 100%;
		table-layout: fixed;
		word-break: break-all;
		th {
			font-size: var(--font-size-14);
			padding: 5px;
		}
		td {
			font-size: var(--font-size-14);
			padding: 5px;
			.indent-pars {
				text-indent: 0;
				padding-left: 0;
			}
		}
	}
	@media (max-width: 576px) {
		table {
			margin-left: -5vw;
			th {
				font-size: var(--font-size-10);
				padding: 3px;
			}
			td {
				font-size: var(--font-size-10);
				padding: 3px;
			}
		}
	}
	.bg-b {
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
		color: var(--color-white);
		font-weight: 600;
		padding-block: clamp(15px, calc(-3.227848101265824px + 2.3734177215189876vw), 30px);
		padding-inline: clamp(22px, calc(6.202531645569621px + 2.0569620253164556vw), 35px);
		margin-top: clamp(23px, calc(-19.531645569620252px + 5.537974683544303vw), 58px);
		margin-bottom: clamp(23px, calc(-4.949367088607595px + 3.6392405063291138vw), 46px);
		@media (max-width: 576px) {
			p {
				font-size: var(--font-size-16);
			}
		}
	}
}
/*== drive-pass_plan =======*/
.drive-pass_plan {
	padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
	padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
	margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);

	h2 {
		margin-bottom: clamp(16px, calc(-12.5px + 4.75vw), 54px);
	}
	.plan-map {
		img {
			display: block;
			margin-inline: auto;
		}
	}
}
/*== drive-pass_select-plan =======*/
.shikoku_tour_b {
	&.plan-item {
		h3 {
			color: var(--color-black);
		}
	}
}
.drive-pass_select-plan {
	padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
	padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
	margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);

	h2 {
		margin-bottom: clamp(23px, calc(14.75px + 1.375vw), 34px);
	}
	p.notes {
		font-size: var(--font-size-16);
		text-align: center;
		margin-bottom: clamp(18px, calc(-9.75px + 4.625vw), 55px);
		a {
			color: var(--color-red);
		}
	}
	.step-confirm_notes {
		.l-flex {
			justify-content: center;
			gap: 20px 70px;
		}
		@media (max-width: 576px) {
			.l-flex {
				flex-direction: column;
			}
		}
	}
}
.plan-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, calc(-23.5px + 7.249999999999999vw), 45px) clamp(20px, calc(-23.5px + 7.249999999999999vw), 78px);
	padding-block: clamp(18px, calc(-1.5px + 3.25vw), 44px);
	padding-inline: 49px;

	&:not(:nth-last-child(1 of .plan-group)) {
		margin-bottom: clamp(30px, calc(12.75px + 2.875vw), 53px);
	}

	&.grid-1 {
		grid-template-columns: repeat(1, 1fr);
		gap: 26px;
	}
	& .plan-item-txt {
		margin-bottom: -25px;
	}
}
@media (max-width: 768px) {
	.plan-group {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-inline: 0;
		& > p {
			padding-inline: 3vw;
		}
		& .plan-item-txt {
			margin-bottom: -10px;
		}
	}
}
/* .plan-item-wrapper {
	padding-block: clamp(23px, calc(7.25px + 2.625vw), 44px) clamp(26px, calc(14.75px + 1.875vw), 41px);
	p {
		width: 90%;
		margin-inline: auto;
	}
	.plan-group {
		padding-block: clamp(14px, calc(6.5px + 1.25vw), 24px);
	}
} */
.plan-item {
	max-width: 432px;
	width: 100%;
	padding-bottom: clamp(25px, calc(17.5px + 1.25vw), 35px);
	background-color: var(--color-white);
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 20px;
	@media (min-width: 769px) {
		&.col-1 {
			max-width: initial;
			display: flex;
			padding-bottom: 0;

			h3 {
				display: flex;
				align-items: center;
				justify-content: center;
				max-width: 307px;
				width: 63%;
				height: 100%;
				border-radius: 20px 0 0 20px;
			}
			.col-1-cont {
				width: 100%;
				padding-block: clamp(13px, calc(1px + 2vw), 29px);
				dl {
					max-width: 571px;
				}
			}
		}
	}
	h3 {
		font-size: var(--font-size-22);
		color: var(--color-white);
		font-weight: 600;
		line-height: 1.6;
		text-align: center;
		padding-block: clamp(13px, calc(4px + 1.5vw), 25px);
		margin-bottom: clamp(15px, calc(10.5px + 0.75vw), 21px);
		background-color: var(--title-color);
		border-radius: 20px 20px 0 0;
	}
	dl.dl-grid {
		max-width: 360px;
		width: 87%;

		&.dl-border {
			padding-bottom: 13px;
			margin-bottom: 13px;
			border-bottom: 1px solid var(--color-medium-gray);
		}
	}
	.icf-boxbtn {
		display: block;
		max-width: 360px;
		width: 87%;
		font-family: var(--font-size-18);
		font-weight: 600;
		padding-inline: clamp(15px, calc(8.25px + 1.125vw), 24px);
		padding-block: clamp(11px, calc(5px + 1vw), 19px);
		margin-top: clamp(15px, calc(9.75px + 0.8750000000000001vw), 22px);
		margin-inline: auto;
		border-radius: 14px;
		box-shadow: 0px 3px 6px #00000029;
	}
	@media (max-width: 576px) {
		h3 {
			font-size: var(--font-size-18);
		}
		dl.dl-grid {
			width: 87%;
		}
		.icf-boxbtn {
			width: 87%;
		}
	}
}
@media (max-width: 576px) {
	.plan-item {
		width: 90%;
	}
}
.plan-select {
	margin-block: clamp(17px, calc(7.25px + 1.625vw), 30px) clamp(25px, calc(10px + 2.5vw), 45px);
	td {
		text-align: center;
	}
	.plan-select_name {
		color: var(--plan-select);
		font-weight: 600;
		text-align: left;
	}
	.btn-group {
		width: 1px;
		a {
			font-weight: 600;
			text-align: left;
			border-radius: 14px;
		}
		@media (max-width: 576px) {
			a {
				width: 35vw;
				min-width: initial;
			}
		}
	}
}
/*== drive-pass_accordion-group =======*/
.drive-pass_accordion-group {
	padding-block: clamp(42px, calc(27.75px + 2.375vw), 61px);
	margin-bottom: clamp(42px, calc(12px + 5vw), 82px);

	.btn-accordion-v {
		max-width: 430px;
		color: var(--color-black);
		font-size: var(--font-size-18);
		font-weight: 500;
		border: 2px solid var(--colA1);

		&::after {
			position: absolute;
			right: 2rem;
			color: var(--colA1);
		}
	}
	@media (max-width: 576px) {
		.btn-accordion-v {
			max-width: 280px;
			min-height: 55px;
			font-size: var(--font-size-16);
		}
	}
}
/*== drive-pass_benefits =======*/
.drive-pass_benefits {
	margin-bottom: clamp(24px, calc(19.5px + 0.75vw), 30px);
}
.acc-benefits {
	counter-reset: bonus-count;
	.l-container-m {
		width: 95%;
		padding-top: clamp(28px, calc(11.5px + 2.75vw), 50px);
	}
	h3 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 245px;
		height: 68px;
		color: var(--color-white);
		font-size: var(--font-size-30);
		font-weight: 600;
		margin-bottom: 42px;
		margin-inline: auto;
		background: linear-gradient(135deg, #88c495 0%, #88c495 15%, var(--color-benefits) 15%, var(--color-benefits) 100%);
		border-radius: 5px;
	}
	@media (max-width: 576px) {
		h3 {
			height: 50px;
			font-size: var(--font-size-20);
			margin-bottom: clamp(34px, calc(28px + 1vw), 42px);
		}
	}
}
.benefits-group {
	margin-bottom: clamp(40px, calc(3.25px + 6.125vw), 89px);
	.h2-heading-m {
		color: var(--color-benefits);
		text-align: left;
		margin-bottom: 0.5em;
	}
	h4 {
		counter-increment: bonus-count;
		display: grid;
		align-items: center;
		grid-template-columns: 1fr 9fr;
		gap: 8px 24px;
		color: var(--color-benefits);
		font-size: var(--font-size-24);
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: clamp(15px, calc(1.5px + 2.25vw), 33px);

		.benefit-no {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			max-width: 120px;
			max-height: 50px;
			font-size: var(--font-size-18);
			padding-block: clamp(6px, calc(0px + 1vw), 14px);
			border: 1px solid var(--color-benefits);
			border-radius: 5px;

			&::after {
				display: block;
				content: counter(bonus-count);
				font-family: var(--font-Hind) !important;
				font-size: var(--font-size-26);
				font-weight: 700;
			}
		}
	}
	@media (max-width: 576px) {
		h4 {
			grid-template-columns: 1fr;
			font-size: var(--font-size-18);

			.benefit-no {
				max-width: 70px;
				font-size: var(--font-size-16);

				span {
					font-size: var(--font-size-20);
				}
			}
		}
	}
	dl.dl-list {
		display: grid;
		grid-template-columns: 1.4fr 8.6fr;

		& > dt {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--font-size-18);
			background-color: var(--color-benefits-dt);
		}
		& > dd {
			ul.caution_list {
				margin-top: 0.5rem;
			}
			img {
				max-width: 100%;
				width: auto;
				margin-block: 1.5rem;
			}
		}
		@media (max-width: 576px) {
			& > dt {
				font-size: var(--font-size-16);
				justify-content: flex-start;
			}
		}
		.l-grid {
			gap: 2em;

			.item-group {
				display: flex;
				flex-direction: column;
				justify-items: center;
				height: 100%;
			}
			dd {
				height: 100%;
				display: grid;
				flex-direction: column;
				grid-template-rows: 208px 0.5fr 1fr;
			}
			.item-title {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0.5em;
			}
		}
	}
	@media (max-width: 576px) {
		dl.dl-list {
			grid-template-columns: 1fr;

			.l-grid {
				display: flex;
				flex-direction: column;
			}
		}
	}
}

/*== drive-pass_model-route =======*/
.drive-pass_model-route {
	margin-bottom: 30px;

	a.btn-accordion-v {
		font-weight: 600;
		&::after {
			font-size: var(--font-size-20);
		}
	}
}
/*== drive-pass_area-events =======*/
.acc-area-events {
	counter-reset: bonus-count;
	.l-container-m {
		width: 95%;
		padding-top: clamp(28px, calc(11.5px + 2.75vw), 50px);

		p {
			margin-bottom: 1em;
		}
	}
	ul.bnr-group {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		width: 75%;
		margin: auto;

		li {
			width: 45%;
			p {
				margin-bottom: 0.2em;
			}
			.bnr-link {
				max-width: 375px;
				a {
					display: block;
				}
				img {
					display: inline;
					width: auto;
				}
			}
		}
	}
}

/*== drive-pass_faq =======*/
.drive-pass_faq {
	.btn-accordion-bb {
		span {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		i {
			margin-left: 2.5rem;
		}
	}
}
.acc-faq {
	margin-top: clamp(36px, calc(14.999999999999996px + 3.5000000000000004vw), 64px);

	.acc-use_inner {
		padding-block: clamp(44px, calc(24.5px + 3.25vw), 70px) clamp(36px, calc(6.75px + 4.875vw), 75px);
		padding-inline: clamp(30px, calc(-6.75px + 6.125vw), 79px);
	}
	h3 {
		font-size: var(--font-size-30);
		font-weight: 600;
		text-align: center;
		margin-top: clamp(25px, calc(-19.25px + 7.375vw), 84px);
		margin-bottom: clamp(28px, calc(19px + 1.5vw), 40px);

		&:first-child {
			margin-top: 0;
		}
	}
	@media (max-width: 576px) {
		h3 {
			font-size: var(--font-size-20);
		}
	}

	details {
		counter-increment: main-num sub-num;
		border-top: 1px solid var(--color-medium-gray);
		interpolate-size: allow-keywords;

		&::details-content {
			transition:
				height 0.3s ease-out,
				opacity 0.3s ease-out;
			height: 0;
			opacity: 0;
			overflow: hidden;
			padding-bottom: 32px;
		}
		summary {
			position: relative;
			color: var(--colA1);
			font-size: var(--font-size-22);
			line-height: 1.5;
			font-weight: 600;
			padding-left: 9rem;
			padding-right: 7rem;
			margin-top: clamp(20px, calc(8px + 2vw), 36px);
			/* margin-bottom: 20px; */
			cursor: pointer;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				display: inline-block;
			}
			&::after {
				position: absolute;
				right: 0;
				font-family: "Font Awesome 7 Free" !important;
				font-weight: 900;
				display: inline-block;
				content: "\2b";
			}
		}
		div.answer {
			padding-top: 2rem;
			padding-left: 9rem;
			transition: height 0.3s ease-out;

			img {
				display: block;
				max-width: 100%;
				width: auto;
				margin-block: 2rem;
			}
			.answer_sub {
				margin-block: clamp(5px, calc(-2.5px + 1.25vw), 15px) clamp(15px, calc(3.75px + 1.875vw), 30px);
			}
			ul {
				margin-top: 1.5rem;
			}
		}
		@media (max-width: 576px) {
			summary {
				font-size: var(--font-size-14);
				padding-left: 5.5rem;
				padding-right: 4rem;
			}
			div.answer {
				font-size: var(--font-size-14);
				padding-left: 0;
			}
		}
	}

	details:not(.has-branch + .has-branch) {
		counter-increment: main-num;
	}
	details:not(.has-branch) summary::before {
		content: "Q." counter(main-num) " ";
	}
	details.start-branch {
		counter-reset: sub-num 1;
	}
	details.has-branch {
		counter-increment: sub-num;
	}
	details.has-branch summary::before {
		content: "Q." counter(main-num) "-" counter(sub-num) " ";
	}
	details[open]::details-content {
		height: auto;
		opacity: 1;
	}
	details[open] {
		summary::after {
			content: "\f068";
		}
	}
	.answer_sub_inq {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 760px;
		padding-block: clamp(23px, calc(17.75px + 0.8750000000000001vw), 30px);
		padding-inline: 20px;
		margin-top: clamp(20px, calc(8px + 2vw), 36px);
		margin-inline: auto;
		border: 3px solid var(--colA1);
		border-radius: 10px;

		.heading-bl-square {
			max-width: 500px;
			width: 100%;
			margin-bottom: clamp(20px, calc(14px + 1vw), 28px);
		}
		.freedial {
			display: flex;
			align-items: flex-end;
			font-size: var(--font-size-18);
			font-weight: 600;
			margin-bottom: clamp(12px, calc(3px + 1.5vw), 24px);

			.icon-freedial {
				margin-right: clamp(5px, calc(-1px + 1vw), 13px);
			}
			span.tel {
				font-size: var(--font-size-30);
			}
			span.notes-r {
				font-size: var(--font-size-40);
			}
			span.notes-r.txt-l {
				font-size: 5rem;
			}
		}
		.caution_list {
			margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
		}
		.link-txt-wapper {
			font-size: var(--font-size-20);
			margin-top: clamp(11px, calc(9.5px + 0.25vw), 13px);
		}
		@media (max-width: 576px) {
			.heading-bl-square {
				min-height: 89px;
				font-size: var(--font-size-16);
				line-height: 1.5;
				text-align: center;
			}
			.freedial {
				flex-wrap: wrap;
				justify-content: center;

				span.tel {
					font-size: var(--font-size-26);
				}
				span.notes-r {
					font-size: var(--font-size-30);
				}
				span.notes-r.txt-l {
					font-size: var(--font-size-36);
				}
				.reception-hours {
					width: 100%;
					text-align: center;
					margin-top: 0.5rem;
				}
			}
			.link-txt-wapper {
				font-size: var(--font-size-18);
			}
		}
	}
}
/*== drive-pass_inquiry =======*/
.drive-pass_inquiry {
	padding-block: clamp(48px, calc(39px + 1.5vw), 60px) clamp(58px, calc(41.5px + 2.75vw), 80px);
	margin-top: clamp(46px, calc(-4.25px + 8.375vw), 113px);
	background-color: var(--colA2);

	.l-flex {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 28px;
		margin-top: clamp(36px, calc(20.25px + 2.625vw), 57px);
		margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);

		.h3-heading-s {
			font-size: var(--font-size-22);
		}
		.freedial {
			display: flex;
			align-items: flex-start;
			font-size: var(--font-size-36);
			font-weight: 600;
			.icon {
				padding-top: 5px;
			}
			.icon-freedial {
				margin-right: clamp(5px, calc(-1px + 1vw), 13px);
			}
			span.txt-l {
				font-size: 4.6rem;
				text-decoration: underline;
			}
		}
	}
	@media (max-width: 768px) {
		.freedial {
			flex-wrap: wrap;
			justify-content: center;

			span.txt-l {
				font-size: var(--font-size-36);
			}
		}
	}
	.link-txt-wapper {
		font-size: var(--font-size-18);
		margin-top: clamp(11px, calc(9.5px + 0.25vw), 13px);

		a {
			position: relative;
			font-size: var(--font-size-18);
			margin-left: 1em;

			&::after {
				position: absolute;
				top: 3px;
				font-size: var(--font-size-20);
			}
		}
	}
}

/*== drive-pass_etcarea =======*/
.drive-pass_etcarea {
	padding-block: clamp(46px, calc(-4.25px + 8.375vw), 113px) clamp(43px, calc(-2.75px + 7.625vw), 104px);

	.l-container-l {
		max-width: 950px;
	}
	ul.area-banner {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		/* gap: 24px; */
		gap: 24px;
		margin-top: clamp(39px, calc(24.75px + 2.375vw), 58px);

		li {
			/* max-width: 380px; */
			max-width: 300px;
			a {
				display: block;
				text-decoration: none;
			}
			p {
				font-size: var(--font-size-18);
				color: var(--color-black);
				font-weight: 600;
			}
			img {
				margin-bottom: 5px;
			}
		}
	}
	@media (max-width: 576px) {
		ul.area-banner {
			flex-direction: column;

			li {
				max-width: 272px;
				margin-inline: auto;
			}
		}
	}
}

/*====================================*/
/* step 共通パーツ */
/*====================================*/
.step {
	padding-bottom: clamp(20px, calc(-10px + 5vw), 60px);

	&.shikoku_tour_b h2 {
		color: var(--color-black);
	}
	h2 {
		max-width: 460px;
		width: 100%;
		min-height: 75px;
		font-size: var(--font-size-20);
		text-align: center;
		padding-block: 0.5em;
		margin-bottom: clamp(23px, calc(20px + 0.5vw), 27px);
		background-color: var(--color-plan-01);
		border-radius: 14px;
		box-shadow: 0px 3px 6px #00000029;
	}
	h3 {
		margin-top: 39px;
		margin-bottom: clamp(26px, calc(20.75px + 0.8750000000000001vw), 33px);
	}
	@media (max-width: 768px) {
		.l-container-m {
			width: 100%;
		}
	}
	@media (max-width: 576px) {
		h2 {
			max-width: 350px;
			min-height: 65px;
			font-size: var(--font-size-16);
		}
	}
}
.step_count {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 140px;
	width: 100%;
	font-weight: 600;
	border: 1px solid var(--colA1);
	padding-block: clamp(7px, calc(1.25px + 0.625vw), 12px);
	margin-bottom: clamp(44px, calc(32px + 2vw), 60px);
	border-radius: 5px;

	.step_count_current {
		font-family: Arial, Helvetica, sans-serif;
		font-size: var(--font-size-28);
		color: var(--colA1);
		margin-left: 1rem;
	}
	.step_count_total {
		font-family: Arial, Helvetica, sans-serif;
		color: #b5b5b5;
		margin-left: 1rem;
	}
}
.step_flow {
	--gray: #b5b5b5;
	position: relative;
	width: 100%;

	&::after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 2px;
		background-color: #b5b5b5;
		transform: translate(-50%, -50%);
		border-radius: 5px;
	}
	.step_flow__line-active {
		position: absolute;
		top: 50%;
		height: 4px;
		background-color: var(--colA1);
		transform: translateY(-50%);
		border-radius: 5px;
		z-index: 4;
	}
	.step_flow__arrow {
		position: absolute;
		left: clamp(0px, calc(-2.75px + 3.125vw), 25px); /*--tb調整する--*/
		top: 50%;
		transform: translateY(-50%);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 13px solid var(--colA1);
		z-index: 4;
	}
	ul {
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		gap: clamp(6px, 4cqw, 84px);
		padding-inline: clamp(0px, calc(-2.5px + 4.25vw), 50px);

		&.step7 {
			grid-template-columns: repeat(7, 1fr);
			gap: clamp(6px, 7cqw, 122px);
		}
		&.step10 {
			grid-template-columns: repeat(10, 1fr);
			gap: clamp(6px, 3cqw, 72px);
		}
		&.step11 {
			grid-template-columns: repeat(11, 1fr);
			gap: clamp(6px, 2cqw, 62px);
		}
	}
	ul > li {
		position: relative;
		width: 30px;
		height: 30px;
		background-color: var(--color-white);
		border: 2px solid #b5b5b5;
		border-radius: 9999px;
		z-index: 5;
	}
	ul > li.is-active {
		background-color: var(--colA1);
		border: 2px solid var(--colA1);
		&::after {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			background-color: var(--color-white);
			border-radius: 9999px;
			z-index: 5;
		}
	}
	ul > li a {
		position: relative;
		display: block;
		height: 100%;
		z-index: 10;

		&:hover {
			background-color: var(--colA1);
			border-radius: 9999px;
		}
	}
	ul > li span {
		position: absolute;
		bottom: -35px;
		left: -37px;
		display: inline-block;
		width: 100px;
		height: 100%;
		color: var(--color-black);
		font-size: var(--font-size-14);
		line-height: 1.3;
		text-align: center;
	}
	@media (max-width: 768px) {
		ul > li span {
			font-size: var(--font-size-10);
		}
	}
	ul > li.is-active span {
		color: var(--colA1);
		font-weight: 600;
	}
	ul > li.is-current::before {
		position: absolute;
		top: -28px;
		left: -7px;
		right: 0;
		content: "";
		display: block;
		width: 41px;
		height: 22px;
		margin-inline: auto;
		background-image: url(/drivepass/assets/img/icon/icon_car_side.png);
		background-size: cover;
	}
	@media (max-width: 576px) {
		.step_flow__arrow {
			left: 2.1vw;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
			border-left: 8px solid var(--colA1);
		}
		ul > li {
			width: 19px;
			height: 19px;
		}
		ul > li.is-active {
			&::after {
				width: 13px;
				height: 13px;
			}
		}
		ul > li span {
			display: none;
		}
		ul > li.is-current::before {
			top: -18px;
			width: 25px;
			height: 13px;
		}
	}
}

/*== step-confirm =======*/
.step-confirm {
	h3 {
		margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
		line-height: 1.2;
	}
	h4 {
		font-weight: 600;
		margin-top: clamp(30px, calc(16.5px + 2.25vw), 48px);
	}
	img {
		max-width: 1040px;
		width: auto !important;
		margin-top: clamp(34px, calc(24.25px + 1.625vw), 47px);
	}
	p.indent {
		margin-top: clamp(20px, calc(12.5px + 1.25vw), 30px);
	}
	.l-grid.l-grid-02 {
		max-width: 1040px;
		gap: 15px 40px;
	}
	.step-confirm-info {
		width: 100%;
		margin-bottom: clamp(30px, calc(15px + 2.5vw), 50px);

		&:last-of-type {
			margin-bottom: 0;
		}
		h4 {
			font-size: var(--font-size-20);
			font-weight: 600;
			padding-block: 12px;
			padding-inline: 21px;
			background-color: #dbf4ff;
			border-radius: 5px;
			margin-top: 0;
			margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
		}
		.bd-lgray {
			display: inline-block;
			padding-block: 16px;
			padding-inline: 20px;
		}
		& > ul.type_circle {
			margin-left: 0.5em;
		}
	}
	.bd-lgray {
		padding: clamp(10px, calc(3.924050632911392px + 0.7911392405063291vw), 15px);
		margin-top: clamp(15px, calc(5.2784810126582276px + 1.2658227848101267vw), 23px);
		p.indent {
			margin-top: 0;
		}
	}
	@media (max-width: 576px) {
		h3 {
			font-size: var(--font-size-22);
			text-align: center;
		}
		.l-grid.l-grid-02 img:nth-child(2) {
			margin-top: 15px;
		}
		.step-confirm-info {
			h4 {
				font-size: var(--font-size-18);
			}
		}
	}
}

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