@charset "utf-8";

/* ==========================================================================
   /vehicledelivery/ — イントロ（全幅背景・左本文・右画像）
   ========================================================================== */

.r-renewal--vehicledelivery .r-vehicledelivery-intro {
	position: relative;
		padding: 1em 0;
	overflow: hidden;
}
@media screen and (min-width: 799px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-intro {
	padding: 2.6em 0;
	}
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #9a6b45;
	background-image: url('../img/renewal/sub/service/delivery-/pc/derivery-img01.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__inner {
	position: relative;
	z-index: 1;
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px 32px;
	align-items: center;
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__desc {
	margin: 0;
	font-family: var(--r-font-base);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: #fff;
}

@media screen and (min-width: 799px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-intro__body {
		grid-template-columns: 1fr 47.4%;
		align-items: start;
	}
	.r-vehicledelivery-intro__col--text {
		margin: -.1em 0 0 .5em;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-intro__desc {
		font-size: 1.2rem;
		line-height: 1.7;
	}
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__photo {
	margin: 0;
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro__photo picture,
.r-renewal--vehicledelivery .r-vehicledelivery-intro__photo img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 1023px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-intro__bg {
		background-image: url('../img/renewal/sub/service/delivery-/pc/derivery-img01-tb.jpg');
	}
}

@media screen and (min-width: 1024px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-intro__inner {
		width: min(90%,880px);
		margin-inline: auto;
	}
}

@media screen and (max-width: 798px) {

	.r-renewal--vehicledelivery .r-vehicledelivery-intro__bg {
		background-image: url('../img/renewal/sub/service/delivery-/sp/derivery-img01-sp.jpg');
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-intro__body {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-intro__desc {
		font-size: .875em;
		line-height: 1.5em;
	}
}

.r-vehicledelivery-intro__col--visual {
	width: 59%;
	margin: 0 auto;
}
	@media screen and (min-width: 799px) {
		.r-vehicledelivery-intro__col--visual {
		width: 100%;
	}

}


/* ==========================================================================
   /vehicledelivery/ — 遠方納車の流れ（ボックス流用）
   ========================================================================== */

.r-renewal--vehicledelivery .r-vehicledelivery-flow {
	margin: 0;
	padding: 30px 0 48px;
	background-color: #efe7da;
}
@media screen and (max-width: 798px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-flow {
		padding-bottom: 32px;
	}
}
@media screen and (min-width: 799px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-flow {
		padding: 2.8em 0 3em;
	}

}


.r-renewal--vehicledelivery .r-vehicledelivery-flow__box {
	--r-vehicledelivery-flow-radius: .8em;
	padding: 0 1em 0;
	border-radius: 0 var(--r-vehicledelivery-flow-radius) 0 var(--r-vehicledelivery-flow-radius);
	overflow: hidden;
  background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url(../img/renewal/sub/service/delivery-/pc/derivery-img04-2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 100px center;
  background-size: 100% 100%, 55% auto;
}

.r-renewal--vehicledelivery .r-vehicledelivery-flow__title {
	margin: 0 -1em 1em;
}

.r-renewal--vehicledelivery .r-vehicledelivery-flow__title picture,
.r-renewal--vehicledelivery .r-vehicledelivery-flow__title img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 var(--r-vehicledelivery-flow-radius) 0 0;
}

.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure {
	margin: 0;
}

.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure picture,
.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure img {
	width: 100%;
}
.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure img {
	width: 92%;
	margin: auto;
}


.r-renewal--vehicledelivery .r-vehicledelivery-flow__note {
	display: grid;
	grid-template-columns: 1em 1fr;
	margin: .5em 0 0;
	padding: 0 0 0 1em;
	font-family: var(--r-font-base);
	font-size: .85em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #673a1b;
	line-height: 1.55;
}


.r-lower-services__row--bottom .r-lower-services__btn:nth-child(1) {
  background: #8e3233;
  color: #fff;
  border: solid 1px #8e3233;
}

@media screen and (min-width: 799px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__note {
		width: fit-content!important;
	margin: 1em 0 .5em auto;
	font-size: 12px;
	text-align: right;
	line-height: 1.65;
		box-sizing: border-box;
		width: 100%;
		max-width: 800px;
		margin: -40px auto 0;
		padding: 0 32px;
		font-size: 16px;
		position: relative;
		z-index: 2;
	}
}

@media screen and (min-width: 799px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box.r-dash-box,
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box {
		padding-bottom: 52px;
		background-color: #fff;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
			url('../img/renewal/sub/service/delivery-/pc/derivery-img04-2.png');
		background-repeat: no-repeat, no-repeat;
		background-position: center, right 100px center;
		background-size: 100% 100%, 55% auto;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure picture,
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure img {
		width: 76%;
		margin: 2.7em auto 0;
	}

}

@media screen and (min-width: 1024px) {
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box {
		width: 850px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width: 798px) {

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box {
		--r-vehicledelivery-flow-radius: 40px;
		--r-vehicledelivery-flow-figure-gap: 16px;
		padding: 0 16px 0;
		border-radius: 0 1em 0 1em;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box.r-dash-box,
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__box {
		background-color: #fff;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
			url('../img/renewal/sub/service/delivery-/pc/derivery-img04-2.png');
		background-repeat: no-repeat, no-repeat;
		background-position: center, right 100px center;
		background-size: 100% 100%, 55% auto;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__title {
		margin: 0 -16px var(--r-vehicledelivery-flow-figure-gap);
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__title picture,
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__title img {
		border-radius: 0 var(--r-vehicledelivery-flow-radius) 0 0;
	}

	.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure picture,
	.r-renewal--vehicledelivery .r-vehicledelivery-flow__figure img {
		width: 96%;
		margin-inline: auto;
	}

}

/* =========================================================
   スクロールインアニメーション（全媒体共通）
   発火: body.is-loaded ＋ 各セクション（data-r-animate）の is-inview
   ========================================================= */

/* --- グループA：全国納車の導入（説明文FadeLeft／地図・車両FadeRight） --- */
.r-renewal--vehicledelivery .r-vehicledelivery-intro[data-r-animate] .r-vehicledelivery-intro__col--text {
	opacity: 0;
	transform: translateX(-30px);
}

.r-renewal--vehicledelivery .r-vehicledelivery-intro[data-r-animate] .r-vehicledelivery-intro__photo {
	opacity: 0;
	transform: translateX(30px);
}

body.is-loaded .r-renewal--vehicledelivery .r-vehicledelivery-intro[data-r-animate].is-inview .r-vehicledelivery-intro__col--text {
	animation: r-anim-fade-left 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--vehicledelivery .r-vehicledelivery-intro[data-r-animate].is-inview .r-vehicledelivery-intro__photo {
	animation: r-anim-fade-right 0.8s ease 0.2s forwards;
}

/* --- グループB：遠方納車の流れ（見出しfadeup→帯slideReveal→フロー図RotateY→注意fadeup） --- */
.r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate] .r-vehicledelivery-flow__title,
.r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate] .r-vehicledelivery-flow__note {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate] .r-vehicledelivery-flow__figure {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

body.is-loaded .r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate].is-inview .r-vehicledelivery-flow__title {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate].is-inview .r-vehicledelivery-flow__figure {
	animation: r-anim-rotate-y 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--vehicledelivery .r-vehicledelivery-flow[data-r-animate].is-inview .r-vehicledelivery-flow__note {
	animation: r-anim-fade-up 0.8s ease 0.6s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-renewal--vehicledelivery [data-r-animate] .r-vehicledelivery-intro__col--text,
	.r-renewal--vehicledelivery [data-r-animate] .r-vehicledelivery-intro__photo,
	.r-renewal--vehicledelivery [data-r-animate] .r-vehicledelivery-flow__title,
	.r-renewal--vehicledelivery [data-r-animate] .r-vehicledelivery-flow__note,
	.r-renewal--vehicledelivery [data-r-animate] .r-vehicledelivery-flow__figure {
		opacity: 1;
		transform: none;
		animation: none;
	}
}


.r-dash-box > [class*="__title"] img {
	border-radius: 0 1em 0 0 !important;
	transform: translateY(2px);
}