/* =========================================================
   Rental（レンタルセット）
   Figma node 113:28778。筆記体見出し＋サブ＋枝線画／セット価格ボックス（丸ドット区切り）／
   写真カルーセル（縦長カード190×300・間隔40px・左右チラ見え・丸ドットページ送り）。
   カルーセルは Swiper（同梱v11）。ギャラリー帯と同じループ条件（枚数で成立）。
   ※ 細部余白は後でまとめて調整。まず構造優先。モバイルは後回し。
   ========================================================= */

.rental {
	position: relative;
	width: 100%;
	/* 暖色オフホワイト。※Figmaのframe fillがメタデータに出ず、スクショから推定。要確認 */
	background: var(--bg-studio); /* #f5f4f1 */
	padding: 70px 0 56px;
	overflow: hidden; /* カルーセルの左右チラ見えを画面端で切る */
}

.rental__inner {
	/* 外枠の幅は共通クラス .l-wide（980px）。中心軸はPlans/Reasonsと統一。
	   見出しは中央寄せテキスト、価格ボックスは width:100% で親(980)にフィット。
	   ※ カルーセルは __inner の外（全幅のまま）。 */
}

/* --- 見出し --- */
.rental__header {
	position: relative;
	text-align: center;
	margin-bottom: 36px;
}
.rental__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-script-ink); /* #231f20 */
}
.rental__sub {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	color: var(--color-subhead); /* #a3937c */
}
/* 見出し左上の装飾（botanical_berry.svg）。Figma：section x323（中心640から-317）・129×129 */
.rental__deco-berry {
	position: absolute;
	left: calc(50% - 317px);
	top: -8px;
	width: 129px;
	height: 129px;
	pointer-events: none;
}

/* =========================================================
   中央ブロック「振袖レンタルフルセット」（Figma 113:28778 / Frame 10）
   全幅ラッパ rental__lead-wrap の両端にオレンジ半円。中身 rental__lead は980中央・左寄せ。
   ※ PC基準で実装。スマホレスポンシブは別途。
   ========================================================= */
.rental__lead-wrap {
	position: relative;   /* 半円の基準（全幅） */
	width: 100%;
}

/* 両端のオレンジ半円（径326pxの円を半分だけ画面外へ。.rental の overflow:hidden で見切れをクリップ） */
.rental__semi {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 326px;
	height: 326px;
	border-radius: 50%;
	background: var(--color-accent-orange); /* #ffc481 */
	z-index: 0;
	pointer-events: none;
}
.rental__semi--left  { left: -163px; }
.rental__semi--right { right: -163px; }

/* 中身：980中央・中央寄せ（Figma最新）。テキストは半円より前面（z-index:1） */
.rental__lead {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 50px;
	text-align: center;
}

/* 最上部の訴求コピー（Figma：サブの下・見出しの上。ゴシックW6 20px 中央） */
.rental__lead-headline {
	margin: 0 0 24px;
	font-family: var(--font-gothic);
	font-weight: 600; /* W6 */
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.4px;
	color: var(--color-text);
}

/* 装飾の蝶（Figma：右上・右半円の上あたり。中央寄せ本文には被らない右側） */
.rental__lead-butterfly {
	position: absolute;
	right: 18%;     /* Figma x906/1280 ≒ 右端から約19% */
	top: 16px;
	width: 131px;
	height: auto;
	z-index: 1;     /* 半円(0)より前面。中央テキストの右外なので被らない */
	pointer-events: none;
}

/* 見出し（明朝W6・32px） */
.rental__lead-title {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 32px;
	letter-spacing: 0.64px;
	line-height: 1.3;
	color: var(--color-text);
}

/* 価格：plans の .num/.tax/.yen と同じ強弱。85,000 を特大＋--color-price */
.rental__lead-price {
	margin: 6px 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 0.48px;
	line-height: 1.1;
	color: var(--color-text); /* 税込・円 */
}
.rental__lead-price .tax { font-size: 20px; }
.rental__lead-price .num { font-size: 48px; color: var(--color-price); } /* #ff846a・主役 */
.rental__lead-price .yen { font-size: 20px; }

/* 区切り線（all-plans-data と同じ line.svg を流用。中央・可変） */
.rental__lead-rule {
	display: block;
	width: 430px;       /* Figma幅。max-width:100%で可変・はみ出さない */
	max-width: 100%;
	height: auto;
	margin: 18px auto;  /* 中央寄せ */
	border: 0;
}

/* 本文（ゴシックW3 20px/lh32）。1行目だけ W6 強調（Figma） */
.rental__lead-text {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.4px;
	color: var(--color-text);
}
.rental__lead-emph {
	font-weight: 600; /* W6相当・強調行 */
}
/* スマホ改行用 span：既定は inline（PC/タブレットは現状の改行のまま）。SPで block 化＝改行 */
.rental__spbr { display: inline; }

/* 追加文言（前撮り・成人式当日…／＊フルパック…）。本文の下に間隔 */
.rental__lead-note {
	margin: 24px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.4px;
	color: var(--color-text);
}

/* =========================================================
   写真カルーセル（Swiper・全幅・左右チラ見え）
   ギャラリー帯と同じ構成。カード190×300・間隔40px・丸ドットページ送り。
   ========================================================= */
.rental__carousel {
	width: 100%;
	margin-top: 100px; /* 価格ブロックとギャラリーの間隔 */
	padding-bottom: 32px; /* ドットの居場所 */
}

/* slidesPerView:'auto' 用に各スライド幅を固定（縦長カード） */
.rental__carousel .swiper-slide {
	width: 190px;
	height: auto;
}

/* 縦長カード（角丸なし・写真の影あり） */
.rental__card {
	display: block;
	width: 190px;
	height: 300px;
	margin: 0;
	overflow: hidden;
	border-radius: 0;                /* Figma：rounded-rectangleだが半径0（直角） */
	background: var(--bg-tan);
	box-shadow: var(--shadow-photo); /* 8px 6px 0 0 rgba(163,147,124,0.3) */
}
.rental__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 丸ドットページネーション（ギャラリー帯と統一・dynamicBullets） --- */
.rental__carousel .swiper-pagination {
	bottom: 0;
}
.rental__carousel .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: var(--color-border-card); /* 非アクティブ：くすみトープ */
	opacity: 1;
	transition: background 0.2s ease;
}
.rental__carousel .swiper-pagination-bullet-active {
	background: var(--color-subhead); /* アクティブ：#a3937c */
}

/* =========================================================
   スマホ（≤599px）：セット価格ボックスを plans-mamafuri のレイアウト系に揃える
   （余白・padding・文字サイズ・rule のみ流用。タイトル改行は入れない）。タブレット/PC不変。
   ========================================================= */
@media (max-width: 599px) {
	.rental { padding: 60px 0; }
	.rental__title { font-size: 60px; }
	.rental__sub { margin-top: 0; }

	/* 中央ブロック rental__lead のスマホ対応 */
	.rental__lead { padding: 0 25px; }
	.rental__lead-butterfly { top: 5px; left: calc(50% - 60px); }
	/* headlineの上余白を0に・titleの上に90px（余白配分の付け替え） */
	.rental__lead-headline { font-size: 18px; margin-top: 0; }
	.rental__lead-title { font-size: 26px; margin-top: 90px; }
	.rental__lead-emph { font-size: 16px; }
	.rental__lead-text { font-size: 18px; line-height: 1.6; }
	.rental__lead-note { font-size: 18px; }
	.rental__carousel { margin-top: 50px; }
	/* 両端のオレンジ半円：画面外まで広げて見切れ量を調整 */
	.rental__semi--left  { left: -60vw; }
	.rental__semi--right { right: -60vw; }
	/* スマホのみ改行（本文・noteの span を block 化） */
	.rental__spbr { display: block; }
}