@charset "utf-8";

/* ==========================================================================
   下層20ページ共通 $2014 上部画像カバー / 文字画像タイトル
   ========================================================================== */

.r-renewal {
	margin-top: 0;
	padding-top: 0;
	line-height: 1.5em;
	color: #673a1b;
}

/* 下層20ページ共通：本文行間を 1.5em に統一（各ページ個別指定より優先） */
.r-renewal li,
.r-renewal dt,
.r-renewal td,
.r-renewal th,
.r-renewal [class*="__text"],
.r-renewal [class*="__desc"],
.r-renewal [class*="__catch"],
.r-renewal [class*="__copy"] {
	line-height: 1.5em;
}

.r-lower-mv {
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.r-lower-mv__img {
	width: 100%;
	height: 255px;
	overflow: hidden;
}

.r-lower-mv__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.r-lower-mv__img picture {
	display: block;
	width: 100%;
	height: 100%;
}

.r-lower-ttl {
	margin: 0;
	padding: 70px 0 50px;
 	padding: 73px 0 2.6em;
	background-color: #efe7da;
}

/* フォーム2ページ（/inquiry・/loan/form）のみタイトル帯を白
   body には WP 標準の page-{slug} ではなく、テーマ filter のスラッグ直クラスが付く */
body.r-renewal-lower.inquiry .r-lower-ttl,
body.r-renewal-lower.form .r-lower-ttl {
	background-color: #fff;
}

.r-lower-ttl__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	opacity: 0;
}

/* ページタイトル（h1）：見た目は画像のまま、既定スタイルを打ち消し */
.r-lower-ttl__heading {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
  overflow: hidden;
}

.r-lower-ttl__heading picture,
.r-lower-ttl__inner picture {
	display: block;
	width: 100%;
}

.r-lower-ttl__heading img,
.r-lower-ttl__inner img {
	display: block;
	width: 100%;
	height: 113px; /* ファイブスターのプレミアム保証のみの可能性もあり*/
  object-fit: none;        /* 画像本来のサイズを保持（拡大縮小しない） */
  object-position: center; /* 中央寄せ */
}

/* 2セクション目（文字画像タイトル）: Fade in（開始0.4秒遅れ・全媒体共通） */
body.is-loaded.r-renewal-lower .r-lower-ttl__inner {
	animation: r-anim-fade-in 0.8s ease 0.4s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-lower-ttl__inner {
		opacity: 1;
		animation: none;
	}
}

@keyframes r-anim-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media screen and (max-width: 798px) {
	.r-lower-mv__img {
		height: 2.95em;
  }

  .r-lower-ttl__heading img,
  .r-lower-ttl__inner img {
		object-fit: cover;
    height: auto;
	}

	.r-lower-ttl {
		padding: 25px 0 1em;
	}

	/*
	 * 下層20ページ共通：ページタイトル帯より下の各セクションは左右余白20pxのみ
	 * - MV / タイトル帯（.r-lower-mv / .r-lower-ttl）は .r-container を使わないため対象外
	 * - 店舗詳細の店舗ナビ（.r-shopdetail-stores）とフッターは対象外
	 */
	.r-renewal section:not(.r-lower-mv):not(.r-lower-ttl):not(.r-shopdetail-stores) > .r-container,
	.r-renewal nav > .r-container,
	.r-lower-services:not(.r-shopdetail-stores) .r-lower-services__head .r-container,
	.r-lower-services:not(.r-shopdetail-stores) > .r-container {
		padding-left: .9em;
		padding-right: .9em;
	}
}

/* ==========================================================================
   下層20ページ共通 $2014 ファイブスター 5つのサービス
   ========================================================================== */

.r-lower-services {
	--r-lower-services-color: #8e3233;
	--r-lower-services-gap: 20px;
	margin: 0;
	padding: 0 0 1.5em;
	background-color: #efe7da;
}
@media screen and (min-width: 799px) {
	.r-lower-services {
		padding-bottom: 2em;
	}

}
.r-lower-services__head {
	border-top: 1px solid var(--r-lower-services-color);
	border-bottom: 1px solid var(--r-lower-services-color);
}

.r-lower-services__title {
	margin: 0;
	padding: .2em .5em;
	font-family: var(--r-font-base);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: #953334;
}

@media screen and (min-width: 799px) {
	.r-lower-services__title {
		padding: .05em 0;
		font-size: 1.75rem;
		letter-spacing: 0.04em;
	}
}


.r-lower-services__body {
	padding-top: 1.3em;
}
@media screen and (min-width: 799px) {
	.r-lower-services__body {
		padding-top: 1.8em;
	}
}
.r-lower-services__row--top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--r-lower-services-gap);
}

.r-lower-services__row--bottom {
	display: flex;
	justify-content: center;
	gap: var(--r-lower-services-gap);
	margin-top: var(--r-lower-services-gap);
}

.r-lower-services__row--bottom .r-lower-services__btn {
	flex: 0 1 calc((100% - (2 * var(--r-lower-services-gap))) / 3);
	max-width: calc((100% - (2 * var(--r-lower-services-gap))) / 3);
}

.r-lower-services__btn {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1em;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3.3em;
	padding: .4em .2em;
	font-family: var(--r-font-base);
	font-size: .9em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	color: var(--r-lower-services-color);
	background-color: #fff;
	border: 2px solid currentColor;
	border-radius: .5em;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	border-radius: 1em;
}
@media screen and (min-width: 799px) {
	.r-lower-services__btn {
		height: 3.5em;
		padding: 0 .2em;
		border-radius: 1em;
		font-size: 1em;
		border: 3px solid currentColor;
	}

}



body.shop01 .r-lower-services__row--top .r-lower-services__btn:nth-child(1),
body.shop02 .r-lower-services__row--top .r-lower-services__btn:nth-child(2),
body.shop03 .r-lower-services__row--top .r-lower-services__btn:nth-child(3),
body.shop04 .r-lower-services__row--bottom .r-lower-services__btn:nth-child(1),
body.shop05 .r-lower-services__row--bottom .r-lower-services__btn:nth-child(2) {
	color: #fff;
	background-color: var(--r-lower-services-color);
	border-color: var(--r-lower-services-color);
}





.r-lower-services__btn::after {
	content: "";
	display: grid;
	width: .4em;
	height: .4em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}


.r-lower-services__btn:hover,
.r-lower-services__btn:focus-visible {
	background-color: var(--r-lower-services-color);
	border-color: var(--r-lower-services-color);
	color: #fff;
}

@media screen and (min-width: 1024px) {
	.r-lower-services__head .r-container,
	.r-lower-services > .r-container {
		width: 800px;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

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


	.r-lower-services__row--top,
	.r-lower-services__row--bottom {
		display: flex;
		flex-direction: column;
		gap: .88em;
		width: min(100%,14em);
		margin: 0 auto;
	}

	.r-lower-services__row--bottom {
		margin-top: 12px;
	}

	.r-lower-services__row--bottom .r-lower-services__btn {
		flex: none;
		max-width: none;
		width: 100%;
	}

}

/* =========================================================
   「ファイブスター 5つのサービス」フッターナビ：スクロールインアニメーション
   （店舗詳細の店舗ナビ .r-shopdetail-stores は対象外）
   見出し fadeup → 各ボタン fadeup を 0.2秒ずつ
   ========================================================= */
.r-lower-services[data-r-animate]:not(.r-shopdetail-stores) .r-lower-services__title,
.r-lower-services[data-r-animate]:not(.r-shopdetail-stores) .r-lower-services__btn {
	opacity: 0;
	transform: translateY(30px);
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__title {
	animation: r-anim-fade-up 0.8s ease 0s forwards;
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__row--top .r-lower-services__btn:nth-of-type(1) {
	animation: r-anim-fade-up 0.8s ease 0.2s forwards;
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__row--top .r-lower-services__btn:nth-of-type(2) {
	animation: r-anim-fade-up 0.8s ease 0.4s forwards;
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__row--top .r-lower-services__btn:nth-of-type(3) {
	animation: r-anim-fade-up 0.8s ease 0.6s forwards;
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__row--bottom .r-lower-services__btn:nth-of-type(1) {
	animation: r-anim-fade-up 0.8s ease 0.8s forwards;
}

body.is-loaded .r-lower-services[data-r-animate]:not(.r-shopdetail-stores).is-inview .r-lower-services__row--bottom .r-lower-services__btn:nth-of-type(2) {
	animation: r-anim-fade-up 0.8s ease 1s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.r-lower-services[data-r-animate]:not(.r-shopdetail-stores) .r-lower-services__title,
	.r-lower-services[data-r-animate]:not(.r-shopdetail-stores) .r-lower-services__btn {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ==========================================================================
   SERVICE共通 $2014 破線ボックス枠（SVG path を JS で描画）
   - abs 要素は padding edge 基準のため、透明 border を置かない
   - 線はボックス外縁に中心を合わせる（stroke 4px → path inset 2px）
   ========================================================================== */
.r-dash-box {
	--r-box-dash-width: 2.2px;
	--r-box-pad-x: 32px;
	--r-box-title-radius: 24px;
	position: relative;
	background-color: #fff;
	border: dashed 2px #6a3906;
}

.r-renewal--highlow .r-dash-box {
	--r-box-title-radius: var(--r-highlow-hi-radius, 24px);
}

.r-renewal--guarantee .r-guarantee-plans__box.r-dash-box {
	--r-box-title-radius: var(--r-guarantee-plans-radius, 24px);
}

.r-renewal--guarantee .r-guarantee-road__box.r-dash-box {
	--r-box-title-radius: var(--r-guarantee-road-radius, 24px);
}

.r-renewal--guarantee .r-guarantee-renew__box.r-dash-box {
	--r-box-title-radius: var(--r-guarantee-renew-radius, 24px);
}

.r-renewal--returnguarantee .r-dash-box {
	--r-box-title-radius: var(--r-returnguarantee-example-radius, 24px);
}

.r-renewal--afterservice .r-dash-box {
	--r-box-title-radius: var(--r-afterservice-block-radius, 24px);
}

.r-renewal--vehicledelivery .r-dash-box {
	--r-box-title-radius: var(--r-vehicledelivery-flow-radius, 24px);
}

.r-dash-box > .r-dash-box__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* 上辺破線を見出し画像の上に描画（上マージン0時の白帯を防ぐ） */
	z-index: 1;
	overflow: visible;
}

/* 上は0（白帯防止）。左右は破線幅ぶん内側へ */
.r-dash-box > [class*="__title"] {
	margin-top: -2px !important;
	margin-right: calc(var(--r-box-dash-width) - var(--r-box-pad-x)) !important;
	margin-left: calc(var(--r-box-dash-width) - var(--r-box-pad-x)) !important;
}

.r-dash-box > [class*="__title"] img {
	border-radius: 0 max(0px, calc(var(--r-box-title-radius) - var(--r-box-dash-width))) 0 0 !important;
	transform: translateY(2px);
}

@media screen and (max-width: 798px) {
	.r-dash-box {
		--r-box-dash-width: 0px;
		--r-box-pad-x: 16px;
	}

	.r-dash-box > [class*="__title"] img {
		transform: translateY(2px);
	}
}

.r-dash-box > .r-dash-box__svg path {
  stroke: #6a3906;
}