@charset "UTF-8";
/* =========================================================
   renewal-loandetail.css  オートローン詳細（/payment/loan01/ ほか）
   prefix: .r-loan-*
   ※ STEP は renewal-flow.css（.r-flow-*）を流用
   ========================================================= */

/* -----------------------------------------------------------------
   共通見出し（黄色マーカー画像）
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-heading {
	margin: 0 auto 28px;
	text-align: center;
}

.r-renewal--loandetail .r-loan-heading img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------
   こんな方におすすめ
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-reasons {
	margin: 0;
	padding: 5em 0;
	background-color: #efe7da;
}

.r-renewal--loandetail .r-loan-reasons__box {
	position: relative;
	width: min(100%,900px);
	margin: 0 auto;
	padding: 4.4em 2.3em;
	background-color: #fff;
	border-radius: 0 .5em 0 .5em;
}

.r-renewal--loandetail .r-loan-reasons__bubble {
	position: absolute;
	top: -22px;
	left: 36px;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.r-renewal--loandetail .r-loan-reasons__bubble img {
	display: block;
	width: 260px;
	max-width: 70%;
	height: auto;
}

@media screen and (min-width: 799px) {
	.r-renewal--loandetail .r-loan-reasons__bubble {
		top: -2em;
	}

	.r-renewal--loandetail .r-loan-reasons__bubble img {
		width: 300px;
		max-width: none;
	}
}

.r-renewal--loandetail .r-loan-reasons__list {
	list-style: none;
	width: 97%;
	margin: 0 auto;
	padding: 0;
}

.r-renewal--loandetail .r-loan-reason:not(:last-child) {
	margin-bottom: .7em;
}

.r-renewal--loandetail .r-loan-reason__bar {
	margin: 0 0 .35em;
	padding: 0;
	line-height: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.r-renewal--loandetail .r-loan-reason__bar img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.r-renewal--loandetail .r-loan-reason__text {
	margin: 0;
	padding: .4em 3em .5em;
	color: #6a3906;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
}

/* 無理のない返済計画をご提案 */
.r-renewal--loandetail .r-loan-callout {
	width: 97%;;
    margin: 2em auto 0;
    padding: 1em 2em;
    background-color: #f5ede2;
    border: 2px solid #6a3906;
    border-radius: 1em;
}

.r-renewal--loandetail .r-loan-callout__title {
	margin: 0 auto;
	text-align: center;
	color: #6a3906;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.4;
}

.r-renewal--loandetail .r-loan-marker {
	background: linear-gradient(transparent 58%, #ffff60 58%);
	padding: 0 4px;
}

.r-renewal--loandetail .r-loan-callout__text {
margin: 0;
    color: #6a3906;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    text-align: left;
    margin: .8em auto;
}

/* -----------------------------------------------------------------
   返済イメージ（茶色帯 + 白ボックス）
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-image {
	margin: 0;
	padding: 56px 0;
	background-color: #7c5a34;
}

.r-renewal--loandetail .r-loan-image__box {
	width: min(100%,900px);
	margin: 0 auto;
	padding: 1em;
	background-color: #fff;
	border-radius: .6em;
}
@media screen and (min-width: 799px) {
	.r-renewal--loandetail .r-loan-image__box {
		border-radius: 1.8em;
	}
}
.r-renewal--loandetail .r-loan-image__chart {
	margin: 0 auto 40px;
	text-align: center;
}

.r-renewal--loandetail .r-loan-image__chart img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* お支払いプラン例（両サイド短線見出し） */
.r-renewal--loandetail .r-loan-plans__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 .6em;
	color: #d71718;
	font-size: 1.7em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.r-renewal--loandetail .r-loan-plans__title::before,
.r-renewal--loandetail .r-loan-plans__title::after {
	content: "";
	width: 34px;
	height: 2px;
	background-color: #d71718;
}

/* お支払いプラン例をベージュのボックスで囲む */
.r-renewal--loandetail .r-loan-plansbox {
	margin-top: .5em;
	padding: 1em;
	background-color: #f3ecdd;
	border-radius: .5em;
}

.r-renewal--loandetail .r-loan-plansbox .r-loan-plans__title {
	margin-top: 0;
}

.r-renewal--loandetail .r-loan-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.r-renewal--loandetail .r-loan-plan {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #cbb78f;
	border-radius: 6px;
}

.r-renewal--loandetail .r-loan-plan__name {
	margin: 0;
	padding: .4em;
	background-color: #6e4a24;
	color: #fff;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04em;
}

.r-renewal--loandetail .r-loan-plan__car {
	margin: 0;
	padding: 1em .5em .7em;
	text-align: center;
	line-height: 0;
}

.r-renewal--loandetail .r-loan-plan__car img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.r-renewal--loandetail .r-loan-plan__spec {
	margin: 0;
	padding: 0;
	color: #673a1b;
	font-size: .95em;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0;
}

.r-renewal--loandetail .r-loan-plan__table {
	width: calc(90% - .6em);
    margin: 0 auto .75em auto;
	border-collapse: collapse;
	table-layout: fixed;
}

.r-renewal--loandetail .r-loan-plan__table th,
.r-renewal--loandetail .r-loan-plan__table td {
	padding: .3em .5em;
	border: 1px solid #6a3906;
	font-size: .95em;
	line-height: 1.3;
}

.r-renewal--loandetail .r-loan-plan__table th {
	width: 8em;
	background-color: #f6f2e6;
	color: #673a1b;
	font-weight: 400;
	text-align: left;
	letter-spacing: -0.02em;
}

.r-renewal--loandetail .r-loan-plan__table td {
	color: #673a1b;
	text-align: right;
	white-space: nowrap;
}

@media only screen and (min-width: 798px) and (max-width: 949px) {
  /* タブレット縦向きのときだけに適用するスタイル */
  .r-renewal--loandetail .r-loan-plan__table {
    width: calc(90% - .6em);
  }
  .r-renewal--loandetail .r-loan-plan__table th {
    width: 100%;
  }
  .r-renewal--loandetail .r-loan-plan__table tr,
  .r-renewal--loandetail .r-loan-plan__table th,
  .r-renewal--loandetail .r-loan-plan__table td {
    display: block; /* セルを縦に並べる場合 */
    text-align: left;
  }
  .r-renewal--loandetail .r-loan-plan__table th,
  .r-renewal--loandetail .r-loan-plan__table td {
    border: none;
  }
  .r-renewal--loandetail .r-loan-plan__table tr {
    border: 1px solid #6a3906;
    border-bottom: none;
  }
  .r-renewal--loandetail .r-loan-plan__table th,
  .r-renewal--loandetail .r-loan-plan__table .is-total td {
    border-bottom: 1px solid #6a3906;
    
  }
}

/* お支払い回数の見出しセル */
.r-renewal--loandetail .r-loan-plan__table tr.is-count th {
	background-color: #dac8b4;
}

/* 残価設定額行：見出しは赤、金額は他行と同じ茶系・通常太さ */
.r-renewal--loandetail .r-loan-plan__table tr.is-residual th {
	background-color: #d71718;
	color: #fff;
}

.r-renewal--loandetail .r-loan-plan__table tr.is-residual td {
	color: #673a1b;
	font-weight: 400;
}

.r-renewal--loandetail .r-loan-plan__table tr.is-total th {
	background-color: #81512d;
	color: #fff;
}

.r-renewal--loandetail .r-loan-plan__table tr.is-total td {
	color: #673a1b;
	font-weight: 400;
	font-size: inherit;
}

/* -----------------------------------------------------------------
   お申込みの流れ（STEP は .r-flow-* を流用）
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-flow {
	margin: 0;
	padding: 56px 0 64px;
	background-color: #efe7da;
}

.r-renewal--loandetail .r-loan-flow__lead {
	margin: 0 auto 40px;
	max-width: 800px;
	color: #673a1b;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.9;
	text-align: center;
	letter-spacing: 0;
}

/* STEP 見た目は renewal-flow.css（loan / flow 共通）に集約 */

/* -----------------------------------------------------------------
   契約満了時（残価設定ローン専用）
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-owari {
	margin: 0;
	padding: 56px 0;
	background-color: #956134;
}

.r-renewal--loandetail .r-loan-owari__box {
	max-width: 900px;
	margin: 0 auto;
	padding: 36px 48px 44px;
	background-color: #fff;
	border-radius: 16px;
}

.r-renewal--loandetail .r-loan-owari__title {
	display: block;
	width: 100%;
	margin: 0 auto 18px;
	padding: 10px 0;
	border-top: 2px solid #d71718;
	border-bottom: 2px solid #d71718;
	color: #d71718;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}

.r-renewal--loandetail .r-loan-owari__lead {
	margin: 0 0 28px;
	color: #673a1b;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 0;
}

.r-renewal--loandetail .r-loan-owari__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.r-renewal--loandetail .r-loan-owari__item {
	position: relative;
	padding-top: 18px;
}

.r-renewal--loandetail .r-loan-owari__num {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #d71718;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.r-renewal--loandetail .r-loan-owari__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 14px 0;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #cbb78f;
	border-radius: 0 18px 0 18px;
}

.r-renewal--loandetail .r-loan-owari__ttl {
	margin: 0 0 12px;
	color: #231815;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
}

.r-renewal--loandetail .r-loan-owari__car {
	margin: 0 0 16px;
	text-align: center;
	line-height: 0;
}

.r-renewal--loandetail .r-loan-owari__car img {
	display: inline-block;
	width: 150px;
	max-width: 100%;
	height: auto;
}

.r-renewal--loandetail .r-loan-owari__price {
	margin: auto -14px 0;
	padding: 4px 8px;
	background-color: #d71718;
	color: #fff;
	text-align: center;
}

.r-renewal--loandetail .r-loan-owari__price-sm {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 0.35;
	padding: 10px 0 0 0;
}

.r-renewal--loandetail .r-loan-owari__price-lg {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.r-renewal--loandetail .r-loan-owari__price-lg em {
	font-style: normal;
	font-size: 26px;
}

/* loan02：契約満了時（PC/TB） */
@media screen and (min-width: 799px) {
	.r-renewal--loan02 .r-loan-owari__title {
		font-size: 32px;
	}

	.r-renewal--loan02 .r-loan-owari__lead {
		color: #000;
		font-size: 20px;
	}

	.r-renewal--loan02 .r-loan-owari__num {
		width: 52px;
		height: 52px;
		font-size: 39px;
	}

	.r-renewal--loan02 .r-loan-owari__item {
		padding-top: 26px;
	}

	.r-renewal--loan02 .r-loan-owari__card {
		border: 2px solid #956134;
	}

	.r-renewal--loan02 .r-loan-owari__ttl {
		font-size: 18px;
	}

	.r-renewal--loan02 .r-loan-owari__price-sm {
		font-size: 18px;
	}

	/*
	 * 3カラム目「残額のお支払い」だけ見た目が違う原因:
	 * 1・2カラムは em（大きい数字）で行高が伸びるため、同じ price-lg 枠の高さを揃える。
	 * em も同枠内で中央寄せし、有無に関わらず赤帯の見た目を統一する。
	 */
	.r-renewal--loan02 .r-loan-owari__price-lg {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		min-height: 34px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
	}

	.r-renewal--loan02 .r-loan-owari__price-lg em {
		font-size: 26px;
		line-height: 1;
	}
}

/* -----------------------------------------------------------------
   下部 2ボタン（ローン審査 / お問い合わせ）
------------------------------------------------------------------ */
.r-renewal--loandetail .r-loan-contact {
	margin: 0;
	padding: 52px 0 60px;
	background-color: #fff;
}

.r-renewal--loandetail .r-loan-contact__cols {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
}

.r-renewal--loandetail .r-loan-contact__col {
	flex: 0 1 380px;
	text-align: center;
}

.r-renewal--loandetail .r-loan-contact__lead {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}


@media screen and (min-width: 799px) {
	.r-renewal--loandetail .r-loan-contact__lead {
		display: grid;
		align-items: flex-end;
		height: 3em;
	}
	.r-renewal--loandetail .r-loan-contact__btn--loan,
	.r-renewal--loandetail .r-loan-contact__btn--inquiry {
		height: 4.6em;
	}
}

.r-renewal--loandetail .r-loan-contact__col--loan .r-loan-contact__lead {
	color: #673a1b;
}

.r-renewal--loandetail .r-loan-contact__col--inquiry .r-loan-contact__lead {
	color: #1f3a6b;
}

/* /payment のローン審査ボタンとサイズ・アイコンを揃える */
.r-renewal--loandetail .r-loan-contact__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
    width: min(100%,350px);
	margin: 0 auto;
	padding: 12px 24px;
	border-radius: 999px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: filter 0.2s ease;
	border: 1px solid #1d2088;
}

.r-renewal--loandetail .r-loan-contact__col--loan .r-loan-contact__btn {
	border: 1px solid #6a3906;
}


.r-renewal--loandetail .r-loan-contact__btn:hover,
.r-renewal--loandetail .r-loan-contact__btn:focus-visible {
	filter: brightness(1.08);
}

.r-renewal--loandetail .r-loan-contact__btn--loan {
	background-image: linear-gradient(rgba(70, 42, 12, 0.42), rgba(70, 42, 12, 0.42)), var(--r-loan-btn-bg);
}

.r-renewal--loandetail .r-loan-contact__btn--inquiry {
	background-image: linear-gradient(rgba(18, 32, 64, 0.35), rgba(18, 32, 64, 0.35)), var(--r-loan-btn-bg);
}

.r-renewal--loandetail .r-loan-contact__btn-icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	line-height: 0;
}

.r-renewal--loandetail .r-loan-contact__btn-icon img {
	display: block;
	width: 44px;
	height: auto;
}

/* -----------------------------------------------------------------
   SP
------------------------------------------------------------------ */
@media screen and (max-width: 798px) {
	.r-renewal--loandetail .r-loan-heading {
margin: .6em auto .8em;
        width: 89%;
	}

	.r-renewal--loandetail .r-loan-reasons {
		padding: 2em 0;
	}

	.r-renewal--loandetail .r-loan-reasons__box {
		padding: 1.6em .8em;
	}

	.r-renewal--loandetail .r-loan-reasons__bubble {
		top: -18px;
		left: 0;
	}

	.r-renewal--loandetail .r-loan-reasons__bubble img {
		width: 150px;
		max-width: none;
	}

	.r-renewal--loandetail .r-loan-reason__text {
		padding: 0 .3em;
		color: #6a3906;
		font-size: .95em;
		line-height: 1.3;
	}

	.r-renewal--loandetail .r-loan-callout {
		width: 100%;
		margin-top: .7em;
		padding: .6em ;
		border-width: 1px;
		border-radius: .5em;
	}

	.r-renewal--loandetail .r-loan-callout__title {
		color: #6a3906;
		font-size: 1.2em;
		white-space: normal;
	}

	.r-renewal--loandetail .r-loan-callout__text {
		color: #6a3906;
		font-size: .9em;
		line-height: 1.5;
		text-align: left;
		margin-top: .15em;
	}

	.r-renewal--loandetail .r-loan-image {
		padding: 2em 0;
	}

	.r-renewal--loandetail .r-loan-image__box {
		padding: 1.2em .5em 1em;
	}

	.r-renewal--loandetail .r-loan-image__chart {
		width: 80%;
		margin: 0 auto 1em;
	}

	.r-renewal--loandetail .r-loan-plans__title {
		gap: 10px;
		font-size: 1.15em;
	}

	.r-renewal--loandetail .r-loan-plans__title::before,
	.r-renewal--loandetail .r-loan-plans__title::after {
		width: 22px;
	}

	/* SP：車画像は名前バーの右上に配置（absolute）／テーブル含め角丸なし */
	.r-renewal--loandetail .r-loan-plan {
		overflow: visible;
		border-radius: 0;
	}

	.r-renewal--loandetail .r-loan-plan__name {
		border-radius: 0;
	}

	.r-renewal--loandetail .r-loan-plan__car {
        position: absolute;
        top: -.8em;
        right: -3vh;
        z-index: 1;
        width: 9.5em;
        margin: 0;
	}

	.r-renewal--loandetail .r-loan-plan__car img {
		width: 70%;
	}

	/* SP：スペック文言は3割小さく左寄せ */
	.r-renewal--loandetail .r-loan-plan__spec {
		padding: .5em .5em .1em 2.2em;
		font-size: .8em;
		text-align: left;
	}

	.r-renewal--loandetail .r-loan-plansbox {
		padding: .6em .5em 1.2em;
	}

	.r-renewal--loandetail .r-loan-plans {
		grid-template-columns: 1fr;
		gap: .9em;
	}

	.r-renewal--loandetail .r-loan-plan__name {
		font-size: 16px;
	}

	.r-renewal--loandetail .r-loan-plan__table,
	.r-renewal--loandetail .r-loan-plan__table th,
	.r-renewal--loandetail .r-loan-plan__table td {
		border-radius: 0;
	}

	.r-renewal--loandetail .r-loan-plan__table th,
	.r-renewal--loandetail .r-loan-plan__table td {
		padding: .15em .9em;
		font-size: .9em;
		font-weight: 400;
	}

	.r-renewal--loandetail .r-loan-plan__table th {
		width: 50%;
	}

	.r-renewal--loandetail .r-loan-plan__table tr.is-residual th,
	.r-renewal--loandetail .r-loan-plan__table tr.is-residual td,
	.r-renewal--loandetail .r-loan-plan__table tr.is-total th,
	.r-renewal--loandetail .r-loan-plan__table tr.is-total td {
		font-size: .82em;
		font-weight: 400;
	}

	/* 残価設定額のセルが枠からはみ出さないよう調整 */
	.r-renewal--loandetail .r-loan-plan__table tr.is-residual td {
		letter-spacing: -0.03em;
	}

	.r-renewal--loandetail .r-loan-flow {
		padding: 5vw 0;
	}

	.r-renewal--loandetail .r-loan-flow__lead {
		margin: 0 auto .8em;
font-size: .95em;
        line-height: 1.3;
	}

	.r-renewal--loandetail .r-loan-owari {
		padding: 40px 0;
	}

	.r-renewal--loandetail .r-loan-owari__box {
		padding: 28px 18px 30px;
		border-radius: 0;
	}

	.r-renewal--loandetail .r-loan-owari__title {
		padding: 2px 24px;
		font-size: 19px;
	}

	.r-renewal--loandetail .r-loan-owari__lead {
		color: #000;
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
	}

	.r-renewal--loandetail .r-loan-owari__list {
		grid-template-columns: 1fr;
		gap: 20px;
		width: 94%;
        margin: auto;
	}

	/* SP：番号1・タイトル6・車画像3の横並び（3ボックス共通） */
	.r-renewal--loandetail .r-loan-owari__item {
		padding-top: 0;
	}

	.r-renewal--loandetail .r-loan-owari__num {
		top: 32px;
		left: 6px;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		font-size: 27px;
	}

	.r-renewal--loandetail .r-loan-owari__card {
		display: grid;
		grid-template-columns: 6fr 3fr;
		align-items: center;
		column-gap: 10px;
		height: auto;
		padding: 12px 12px 0 42px;
		border: 2px solid #956134;
	}

	.r-renewal--loandetail .r-loan-owari__ttl {
		grid-column: 1;
		margin: 0;
		font-size: .95em;
		line-height: 1.3;
		text-align: left;
	}

	.r-renewal--loandetail .r-loan-owari__car {
		grid-column: 2;
		margin: 0;
	}

	.r-renewal--loandetail .r-loan-owari__car img {
		width: 100%;
	}

	.r-renewal--loandetail .r-loan-owari__price {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;
		justify-content: center;
		grid-column: 1 / -1;
		margin: 12px -12px 0 -42px;
		white-space: nowrap;
	}

	.r-renewal--loandetail .r-loan-owari__price-sm,
	.r-renewal--loandetail .r-loan-owari__price-lg {
		display: inline;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}

	.r-renewal--loandetail .r-loan-owari__price-sm {
		font-weight: 400;
	}

	.r-renewal--loandetail .r-loan-owari__price-lg em {
		font-size: 1.5em;
		line-height: 1;
	}

	/* 「残額のお支払い」のみ 2px 大きく（お支払い0円の通常文字は 16px のまま） */
	.r-renewal--loan02 .r-loan-owari__item:nth-of-type(3) .r-loan-owari__price-lg {
		font-size: 18px;
	}

	.r-renewal--loandetail .r-loan-contact {
		padding: 40px 0 44px;
	}

	.r-renewal--loandetail .r-loan-contact__cols {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5em;
	}

	.r-renewal--loandetail .r-loan-contact__col {
		flex: 1 1 auto;
	}

	.r-renewal--loandetail .r-loan-contact__lead {
		font-size: .95em;
		margin-bottom: .5em;
	}

	.r-renewal--loandetail .r-loan-contact__btn {
		width: min(92%, 400px);
		height: 4.5em;
		margin-inline: auto;
		font-size: .95em;
		padding: .6em;
	}

	/* SP：ボタンアイコンを半分サイズに */
	.r-renewal--loandetail .r-loan-contact__btn-icon img {
		height: auto;
	}

	.r-renewal--loandetail .r-loan-contact__btn--loan .r-loan-contact__btn-icon img {
		width: 37px;
	}

	.r-renewal--loandetail .r-loan-contact__btn--inquiry .r-loan-contact__btn-icon img {
		width: 45px;
	}
}

/* =================================================================
   オートリース専用（/payment/lease/）
================================================================= */
/* オートリースに含まれるもの */
.r-renewal--lease .r-lease-included {
	max-width: 720px;
	margin: 8px auto 0;
	padding: 24px 26px 26px;
	border: 2px dashed #cbb78f;
	border-radius: 0;
}

.r-renewal--lease .r-lease-included__title {
	margin: 0 0 18px;
	color: #6a3906;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04em;
}

@media screen and (min-width: 799px) {
	.r-renewal--lease .r-lease-included__title {
		font-size: 24px;
	}
}

.r-renewal--lease .r-lease-included__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.r-renewal--lease .r-lease-included__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 12px 6px 10px;
	background-color: #fff;
	border: 1px solid #956134;
	border-radius: 0;
}

.r-renewal--lease .r-lease-included__icon {
	margin: 0 0 6px;
	line-height: 0;
}

.r-renewal--lease .r-lease-included__icon img {
	display: inline-block;
	width: 92px;
	max-width: 110%;
    margin: -5px auto;
	height: auto;
}

.r-renewal--lease .r-lease-included__label {
	margin: 0;
	color: #6a3906;
	font-size: 16px;
	font-weight: 450;
	line-height: 1.3;
	letter-spacing: -0.5px;
	text-align: center;
}

/* 契約満了時：残価ローンと同じ（背景・タイトル・本文） */
@media screen and (min-width: 799px) {
	.r-renewal--lease .r-loan-owari__title {
		font-size: 32px;
	}

	.r-renewal--lease .r-loan-owari__lead {
		color: #000;
		font-size: 20px;
	}
}

/* 契約満了時（PC：完成カード画像を4カラム／番号・見出しは非表示） */
.r-renewal--lease .r-lease-owari__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 8px;
}

.r-renewal--lease .r-lease-owari__num,
.r-renewal--lease .r-lease-owari__ttl {
	display: none;
}

.r-renewal--lease .r-lease-owari__fig {
	margin: 0;
	line-height: 0;
	text-align: center;
}

.r-renewal--lease .r-lease-owari__fig img {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 798px) {
	/* オートリースに含まれるもの：SPは2カラム */
	.r-renewal--lease .r-lease-included {
		padding: 18px 14px 18px;
		border-radius: 0;
	}

	.r-renewal--lease .r-lease-included__title {
		margin-bottom: 14px;
		color: #6a3906;
		font-size: 20px;
	}

	.r-renewal--lease .r-lease-included__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.r-renewal--lease .r-lease-included__item {
		border: 1px solid #956134;
		border-radius: 0;
	}

	/* 最後の行に1つだけ余った場合は中央カラムへ */
	.r-renewal--lease .r-lease-included__item:last-child:nth-child(3n + 1) {
		grid-column: 2;
	}

	.r-renewal--lease .r-lease-included__icon img {
		width: 100px;
	}

	.r-renewal--lease .r-lease-included__label {
		color: #6a3906;
		font-size: 16px;
	}

	/* 契約満了時：残価ローンと同じ（タイトル余白・本文色） */
	.r-renewal--lease .r-loan-owari__title {
		padding: 2px 24px;
	}

	.r-renewal--lease .r-loan-owari__lead {
		color: #000;
		font-size: 15px;
        line-height: 1.8;
	}

	/* 契約満了時：SPは1カラムのボックス、中は番号1・文字6・画像3の横並び（loan02と同構成） */
	.r-renewal--lease .r-lease-owari__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.r-renewal--lease .r-lease-owari__item {
		position: relative;
		display: grid;
		grid-template-columns: 6fr 3fr;
		align-items: center;
		column-gap: 10px;
		padding: 12px 12px 12px 47px;
		overflow: visible;
		background-color: #fff;
		border: 1px solid #956134;
		border-radius: 0 18px 0 18px;
		text-align: left;
	}

	.r-renewal--lease .r-lease-owari__num {
		display: flex;
		position: absolute;
		top: 50%;
		left: 6px;
		transform: translateY(-50%);
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #d71718;
		color: #fff;
		font-size: 27px;
		font-weight: 700;
		line-height: 2.5px;
	}

	.r-renewal--lease .r-lease-owari__ttl {
		display: block;
		grid-column: 1;
		margin: 0;
		color: #673a1b;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: 0;
		text-align: left;
	}

	.r-renewal--lease .r-lease-owari__fig {
		grid-column: 2;
		margin: 0;
	}

	.r-renewal--lease .r-lease-owari__fig img {
		/* width: calc(100% + 45px); */
        max-width: none;
        /* transform: translateX(-40px); */
	}
}

/* =========================================================
   スクロールインアニメーション（全媒体共通）
   発火: body.is-loaded ＋ 各セクション（data-r-animate）の is-inview
   各セクション内で番号ごとに 0.2秒ずつ開始をずらす
   ========================================================= */

/* ===== loan01：オートローン ===== */

/* --- おすすめポイント：吹き出し → 理由3つ → 補足枠（ZoomIn） --- */
.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-reason,
.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-callout {
	opacity: 0;
	transform: scale(0.9);
}

body.is-loaded .r-renewal--loan01 .r-loan-reasons[data-r-animate].is-inview .r-loan-reasons__bubble {
	animation: r-anim-zoom-in 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(1) {
	animation: r-anim-zoom-in 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(2) {
	animation: r-anim-zoom-in 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(3) {
	animation: r-anim-zoom-in 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-reasons[data-r-animate].is-inview .r-loan-callout {
	animation: r-anim-zoom-in 0.8s ease 0.8s forwards;
}

/* --- 返済イメージ：見出し(RotateY) → 図(fadeup) → 例3つ(RotateY) --- */
.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-heading,
.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-plan {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-image__chart {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--loan01 .r-loan-image[data-r-animate].is-inview .r-loan-heading {
	animation: r-anim-rotate-y 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-image[data-r-animate].is-inview .r-loan-image__chart {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(1) {
	animation: r-anim-rotate-y 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(2) {
	animation: r-anim-rotate-y 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(3) {
	animation: r-anim-rotate-y 0.8s ease 0.8s forwards;
}

/* --- お申込みの流れ：見出し(RotateY) → STEP／矢印(fadeup) --- */
.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-loan-heading {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-flow-step {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
	opacity: 0;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-loan-heading {
	animation: r-anim-rotate-y 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1) {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2) {
	animation: r-anim-fade-up 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.8s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3) {
	animation: r-anim-fade-up 0.8s ease 1s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.2s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4) {
	animation: r-anim-fade-up 0.8s ease 1.4s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.6s forwards;
}

body.is-loaded .r-renewal--loan01 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(5) {
	animation: r-anim-fade-up 0.8s ease 1.8s forwards;
}

/* --- 下部ボタン：ローン審査 / お問い合わせ（まとめて fadeup） --- */
.r-renewal--loan01 .r-loan-contact[data-r-animate] .r-loan-contact__cols {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--loan01 .r-loan-contact[data-r-animate].is-inview .r-loan-contact__cols {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
	.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-reason,
	.r-renewal--loan01 .r-loan-reasons[data-r-animate] .r-loan-callout,
	.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-heading,
	.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-plan,
	.r-renewal--loan01 .r-loan-image[data-r-animate] .r-loan-image__chart,
	.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-loan-heading,
	.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-flow-step,
	.r-renewal--loan01 .r-loan-contact[data-r-animate] .r-loan-contact__cols {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.r-renewal--loan01 .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
		opacity: 1;
		transform: translateX(-50%);
		animation: none;
	}
}

/* ===== loan02：残価設定ローン ===== */

/* --- おすすめポイント：吹き出し → 理由3つ → 補足枠（ZoomIn） --- */
.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-reason,
.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-callout {
	opacity: 0;
	transform: scale(0.9);
}

body.is-loaded .r-renewal--loan02 .r-loan-reasons[data-r-animate].is-inview .r-loan-reasons__bubble {
	animation: r-anim-zoom-in 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(1) {
	animation: r-anim-zoom-in 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(2) {
	animation: r-anim-zoom-in 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(3) {
	animation: r-anim-zoom-in 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-reasons[data-r-animate].is-inview .r-loan-callout {
	animation: r-anim-zoom-in 0.8s ease 0.8s forwards;
}

/* --- 返済イメージ：見出し(RotateY) → 図(fadeup) → 例3つ(RotateY) --- */
.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-heading,
.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-plan {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-image__chart {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--loan02 .r-loan-image[data-r-animate].is-inview .r-loan-heading {
	animation: r-anim-rotate-y 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-image[data-r-animate].is-inview .r-loan-image__chart {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(1) {
	animation: r-anim-rotate-y 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(2) {
	animation: r-anim-rotate-y 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(3) {
	animation: r-anim-rotate-y 0.8s ease 0.8s forwards;
}

/* --- お申込みの流れ：見出し(RotateY) → STEP／矢印(fadeup) --- */
.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-loan-heading {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-flow-step {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
	opacity: 0;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-loan-heading {
	animation: r-anim-rotate-y 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1) {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2) {
	animation: r-anim-fade-up 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.8s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3) {
	animation: r-anim-fade-up 0.8s ease 1s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.2s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4) {
	animation: r-anim-fade-up 0.8s ease 1.4s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.6s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(5) {
	animation: r-anim-fade-up 0.8s ease 1.8s forwards;
}

/* --- 契約満了時：見出し・説明(fadeup) → 比較カード3つ(RotateY) --- */
.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__title,
.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__lead {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__item {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

body.is-loaded .r-renewal--loan02 .r-loan-owari[data-r-animate].is-inview .r-loan-owari__title {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-owari[data-r-animate].is-inview .r-loan-owari__lead {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-owari[data-r-animate].is-inview .r-loan-owari__item:nth-of-type(1) {
	animation: r-anim-rotate-y 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-owari[data-r-animate].is-inview .r-loan-owari__item:nth-of-type(2) {
	animation: r-anim-rotate-y 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--loan02 .r-loan-owari[data-r-animate].is-inview .r-loan-owari__item:nth-of-type(3) {
	animation: r-anim-rotate-y 0.8s ease 0.8s forwards;
}

/* --- 下部ボタン：ローン審査 / お問い合わせ（まとめて fadeup） --- */
.r-renewal--loan02 .r-loan-contact[data-r-animate] .r-loan-contact__cols {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--loan02 .r-loan-contact[data-r-animate].is-inview .r-loan-contact__cols {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-renewal--loan02 .r-loan-contact[data-r-animate] .r-loan-contact__cols,
	.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
	.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-reason,
	.r-renewal--loan02 .r-loan-reasons[data-r-animate] .r-loan-callout,
	.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-heading,
	.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-plan,
	.r-renewal--loan02 .r-loan-image[data-r-animate] .r-loan-image__chart,
	.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-loan-heading,
	.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-flow-step,
	.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__title,
	.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__lead,
	.r-renewal--loan02 .r-loan-owari[data-r-animate] .r-loan-owari__item {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.r-renewal--loan02 .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
		opacity: 1;
		transform: translateX(-50%);
		animation: none;
	}
}

/* ===== lease：オートリース ===== */

/* --- グループA：おすすめポイント（ZoomIn） --- */
.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-reason,
.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-callout {
	opacity: 0;
	transform: scale(0.9);
}

body.is-loaded .r-renewal--lease .r-loan-reasons[data-r-animate].is-inview .r-loan-reasons__bubble {
	animation: r-anim-zoom-in 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(1) {
	animation: r-anim-zoom-in 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(2) {
	animation: r-anim-zoom-in 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-reasons[data-r-animate].is-inview .r-loan-reason:nth-of-type(3) {
	animation: r-anim-zoom-in 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-reasons[data-r-animate].is-inview .r-loan-callout {
	animation: r-anim-zoom-in 0.8s ease 0.8s forwards;
}

/* --- グループB：料金イメージ（見出しRotateY→図/含まれるもの fadeup→料金例カードRotateY） --- */
.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-heading,
.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-plan {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-image__chart,
.r-renewal--lease .r-loan-image[data-r-animate] .r-lease-included {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-loan-heading {
	animation: r-anim-rotate-y 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-loan-image__chart {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-lease-included {
	animation: r-anim-fade-up 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(1) {
	animation: r-anim-rotate-y 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(2) {
	animation: r-anim-rotate-y 0.8s ease 0.8s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-image[data-r-animate].is-inview .r-loan-plan:nth-of-type(3) {
	animation: r-anim-rotate-y 0.8s ease 1s forwards;
}

/* --- グループC：お申込みの流れ（見出しfadeup→STEP／矢印fadeup） --- */
.r-renewal--lease .r-loan-flow[data-r-animate] .r-loan-heading,
.r-renewal--lease .r-loan-flow[data-r-animate] .r-flow-step {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--lease .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
	opacity: 0;
}

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

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1) {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(1)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2) {
	animation: r-anim-fade-up 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(2)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 0.8s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3) {
	animation: r-anim-fade-up 0.8s ease 1s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(3)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.2s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4) {
	animation: r-anim-fade-up 0.8s ease 1.4s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(4)::after {
	animation: r-flow-arrow-fade-up 0.8s ease 1.6s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-flow[data-r-animate].is-inview .r-flow-step:nth-of-type(5) {
	animation: r-anim-fade-up 0.8s ease 1.8s forwards;
}

/* --- 契約満了時：見出し・説明fadeup → 4カードRotateY --- */
.r-renewal--lease .r-loan-owari[data-r-animate] .r-loan-owari__title,
.r-renewal--lease .r-loan-owari[data-r-animate] .r-loan-owari__lead {
	opacity: 0;
	transform: translateY(30px);
}

.r-renewal--lease .r-loan-owari[data-r-animate] .r-lease-owari__item {
	opacity: 0;
	transform: rotateY(-75deg);
	transform-origin: center center;
	backface-visibility: hidden;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-loan-owari__title {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-loan-owari__lead {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-lease-owari__item:nth-of-type(1) {
	animation: r-anim-rotate-y 0.8s ease 0.4s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-lease-owari__item:nth-of-type(2) {
	animation: r-anim-rotate-y 0.8s ease 0.6s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-lease-owari__item:nth-of-type(3) {
	animation: r-anim-rotate-y 0.8s ease 0.8s forwards;
}

body.is-loaded .r-renewal--lease .r-loan-owari[data-r-animate].is-inview .r-lease-owari__item:nth-of-type(4) {
	animation: r-anim-rotate-y 0.8s ease 1s forwards;
}

/* --- グループD：下部CTA（fadeup） --- */
.r-renewal--lease .r-loan-contact[data-r-animate] .r-loan-contact__cols {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-renewal--lease .r-loan-contact[data-r-animate].is-inview .r-loan-contact__cols {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-reasons__bubble,
	.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-reason,
	.r-renewal--lease .r-loan-reasons[data-r-animate] .r-loan-callout,
	.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-heading,
	.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-plan,
	.r-renewal--lease .r-loan-image[data-r-animate] .r-loan-image__chart,
	.r-renewal--lease .r-loan-image[data-r-animate] .r-lease-included,
	.r-renewal--lease .r-loan-flow[data-r-animate] .r-loan-heading,
	.r-renewal--lease .r-loan-flow[data-r-animate] .r-flow-step,
	.r-renewal--lease .r-loan-owari[data-r-animate] .r-loan-owari__title,
	.r-renewal--lease .r-loan-owari[data-r-animate] .r-loan-owari__lead,
	.r-renewal--lease .r-loan-owari[data-r-animate] .r-lease-owari__item,
	.r-renewal--lease .r-loan-contact[data-r-animate] .r-loan-contact__cols {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.r-renewal--lease .r-loan-flow[data-r-animate] .r-flow-step:not(:last-child)::after {
		opacity: 1;
		transform: translateX(-50%);
		animation: none;
	}
}