@charset "utf-8";
/* ==========================================================================
   car salon Belle - front page
   Figma: car-salon-Belle / PC frame 16:2 (1440px)

   このファイルは front-page.php 専用。header-css.php でフロントページのみ読み込む。
   デザイントークン・リセット・ヘッダー・フッター・追従サイドボタンは全ページ共通
   なので css/belle-common.css 側にある（こちらより先に読み込まれる）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   フロントページは全幅レイアウト（親テーマの #wrapper / #main の制約を外す）
   -------------------------------------------------------------------------- */
body.home #wrapper,
body.home #main {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* フロントページ本体。横スクロールが出ないようにクリップする
   （ヘッダー/フッターのラッパーには不要なので .belle 側には持たせない）
   ベースの背景色はフロントページのみ --bg-base（belle-common.css の .belle の #fff を上書き）。
   --bg-base は「セクション色を敷かない＝ベースのまま見せる」箇所で使う */
.belle--front {
	overflow: hidden;
	background: var(--bg-base);
}

/* 共通インナー：1440px 時にコンテンツ幅 1200px（左右ガター 120px）になる */
.belle-inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 共通：セクション見出し（Feature / Menu / Information） */
.belle-heading {
	text-align: center;
	color: #fff;
}

.belle-heading__en {
	display: block;
	font-family: var(--en);
	font-weight: 500;
	font-size: 64px;
	line-height: 1.2;
	letter-spacing: .01em;
}

.belle-heading__jp {
	display: block;
	margin-top: 8px;
	font-family: var(--jp);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.522;
}

/* 共通：小見出し（左寄せ／下線＋青いアクセント） */
.belle-rule-title {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 13px;
	color: var(--blue);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
}

.belle-rule-title::before,
.belle-rule-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
}

.belle-rule-title::before {
	width: 100%;
	background: var(--rule);
}

.belle-rule-title::after {
	width: 31px;
	background: var(--blue);
}

/* 共通：点線区切り */
.belle-dotline {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 4px dotted var(--blue);
}

/* 共通：料金行 */
.belle-price {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.belle-price__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 1.8;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
}

/* 共通：もっと見る（カード下部の濃グレー帯）
   料金行の続きを開閉するトグル。button 要素なのでブラウザ既定の
   枠線・フォント・カーソルを打ち消す。開閉は js/top.js が
   aria-expanded と .belle-more__panel の .is-open を切り替える */
.belle-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	background: var(--dark);
	border: 0;
	appearance: none;
}

.belle-more::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 7px 0 7px;
	border-color: #fff transparent transparent transparent;
}

/* 開いている間は三角形を上向きに */
.belle-more[aria-expanded="true"]::after {
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent #fff transparent;
}

/* 文言は開閉で出し分ける（2つの span を CSS で切り替え） */
.belle-more[aria-expanded="false"] .belle-more__label--close,
.belle-more[aria-expanded="true"] .belle-more__label:not(.belle-more__label--close) {
	display: none;
}

/* 開閉パネル。高さは js/top.js が max-height に実測値（px）を入れて
   アニメーションさせる。grid-template-rows: 0fr → 1fr は書き方が短いが
   補間のブラウザ依存が大きいため使わない。
   visibility を併用し、閉じている間はキーボードフォーカスと
   スクリーンリーダーが中身に到達しないようにする */
.belle-more__panel {
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
	transition:
		max-height 0.3s ease,
		visibility 0.3s;
}

.belle-more__panel.is-open {
	visibility: visible;
}

/* padding はパネル（overflow: hidden）の内側に置く。
   パネル自身に持たせると閉じている間も padding 分の高さが残ってしまう */
.belle-more__inner {
	/* .belle-price の gap と揃え、直前の料金行との間隔を保つ */
	padding-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.belle-more__panel {
		transition: none;
	}
}

/* ==========================================================================
   mv（メインビジュアル）
   ========================================================================== */
.belle-mv {
	position: relative;
	padding-bottom: 100px;
}

/* mv のコピーは他セクション（120px）より外側の 80px 起点 */
.belle-mv .belle-inner {
	max-width: 1320px;
}

.belle-mv__slider {
	overflow: hidden;
}

/* シームレスループ。front-page.php が 4 枚 × 3 セットを出力し、
   1 セット分（画像幅 + 余白 × 4）だけ動かして先頭に戻す。
   余白は gap ではなく li の margin-right で取る
   （gap だと末尾に余白が付かず 1 セットの幅が正確に出ないため） */
.belle-mv__photos {
	--mv-photo: 500px;
	--mv-photo-gap: 10px;
	--mv-set: calc((var(--mv-photo) + var(--mv-photo-gap)) * 4);
	display: flex;
	width: max-content;
	max-width: none;
	height: 480px;
	margin-left: calc(50% - 1015px + 48px);
	animation: belle-mv-photos 40s linear infinite;
}

.belle-mv__photos li {
	flex: 0 0 var(--mv-photo);
	height: 480px;
	margin-right: var(--mv-photo-gap);
	overflow: hidden;
	border-radius: 4px;
}

.belle-mv__photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes belle-mv-photos {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(var(--mv-set) * -1));
	}
}

.belle-mv__catch {
	position: absolute;
	top: 440px;
	left: 0;
	width: 100%;
	overflow: hidden;
	color: #0962e8;
	font-family: var(--en);
	font-weight: 400;
	font-size: 78px;
	line-height: 1.2;
	opacity: .4;
	pointer-events: none;
}

/* コピーも同じ考え方でループ。同一の文字列 3 本を並べ、
   1 本分 = トラック幅の 1/3 だけ動かす（文字幅を px で持たなくて済む） */
.belle-mv__catch-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: belle-mv-catch 40s linear infinite;
}

.belle-mv__catch-track span {
	padding-right: 80px;
}

@keyframes belle-mv-catch {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-33.3333%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.belle-mv__photos,
	.belle-mv__catch-track {
		animation: none;
	}
}

/* テキストは box 内で上下中央。h1 と p は左揃え（開始位置をそろえる）*/
.belle-mv__box {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 658px;
	margin: -114px 0 0;
	padding: 48px 56px;
	min-height: 334px;
	color: #fff;
	background: var(--blue);
	border-radius: 32px;
}

.belle-mv__box h1 {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.4;
	margin: 0;
}

.belle-mv__box p {
	margin-top: 15px;
	font-size: 16px;
	line-height: 1.8;
}

/* ==========================================================================
   section01 : Feature（特徴）
   ========================================================================== */
/* 青い帯はセクション上端より 47px 下から始まり、1 行目のカードが上にはみ出す */
.belle-feature {
	position: relative;
	padding: 0 0 114px;
}

.belle-feature::before {
	content: "";
	position: absolute;
	top: 47px;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--blue);
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}

.belle-feature__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 56px;
	width: 100%;
	max-width: 1330px;
	margin: 0 auto;
	padding: 0 20px 0 114px;
}

.belle-feature .belle-heading {
	flex: 0 0 auto;
	margin-top: 172px;
	text-align: left;
}

.belle-feature .belle-heading__jp {
	margin-top: 16px;
	padding-left: 4px;
}

.belle-feature__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.belle-feature__item {
	position: relative;
	flex: 1 1 420px;
	max-width: 430px;
}

.belle-feature__card {
	display: flex;
	align-items: stretch;
	height: 240px;
	overflow: hidden;
	border-radius: 24px 4px 24px 4px;
}

.belle-feature__thumb {
	flex: 0 0 175px;
	overflow: hidden;
}

.belle-feature__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.belle-feature__txt {
	background-color: var(--bg-2);
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 26px;
}

.belle-feature__txt h3 {
	color: var(--blue);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
}

.belle-feature__txt p {
	font-size: 13px;
	line-height: 1.8;
}

/* カード左下に重なる大きな連番（カード上に描画されるよう z-index を持たせる） */
.belle-feature__num {
	position: absolute;
	z-index: 2;
	bottom: -11px;
	left: -5px;
	color: var(--blue);
	font-family: var(--en);
	font-weight: 500;
	font-size: 68px;
	line-height: 1;
}

/* ==========================================================================
   CTA（まずは、ご相談ください。）
   ========================================================================== */
.belle-cta {
	padding: 96px 0;
	background: var(--bg-base);
}

.belle-cta__box {
	position: relative;
	padding: 62px 94px 59px;
	text-align: center;
	background: #fff;
	border-radius: 32px;
}

/* 四隅のドット */
.belle-cta__box::before,
.belle-cta__box::after,
.belle-cta__dots::before,
.belle-cta__dots::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--footer-bg);
	border-radius: 50%;
}

.belle-cta__box::before { top: 24px; left: 24px; }
.belle-cta__box::after { top: 24px; right: 24px; }
.belle-cta__dots::before { bottom: 24px; left: 24px; }
.belle-cta__dots::after { bottom: 24px; right: 24px; }

.belle-cta__box h2 {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.4;
}

.belle-cta__box > p {
	margin-top: 11px;
	font-size: 16px;
	line-height: 1.8;
}

.belle-cta__btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.belle-cta__btns a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 320px;
	max-width: 340px;
	min-height: 80px;
	padding: 10px;
	color: #fff;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .05em;
	text-align: center;
}

.belle-cta__btns a:nth-child(1) {
	background: var(--blue-light);
	border-radius: 40px 4px 4px 40px;
}

.belle-cta__btns a:nth-child(2) {
	background: var(--blue);
	border-radius: 4px;
}

.belle-cta__btns a:nth-child(3) {
	background: var(--blue-dark);
	border-radius: 4px 40px 40px 4px;
}

/* ==========================================================================
   section02 : Menu（メニュー）
   ========================================================================== */
.belle-menu {
	background-color: var(--blue);
	border-bottom-left-radius: 32px;
	border-top-left-radius: 32px;
	padding: 80px 0 130px;
	position: relative;
	z-index: 1;
}

.belle-menu .belle-heading {
	margin-bottom: 40px;
}

.belle-menu__blocks {
	display: flex;
	flex-direction: column;
	gap: 120px;
}

/* --- 共通：メニューブロック（白いカード） --- */
.belle-block {
	position: relative;
	padding: 0 64px 64px;
	background: #fff;
	border-radius: 24px 4px 24px 4px;
}

/* 写真がカード上端からはみ出すレイアウト */
.belle-block--overhang {
	margin-top: 64px;
	padding-top: 0;
}

.belle-block__copy {
	display: flex;
	align-items: center;
	gap: 48px;
	margin-top: -64px;
	padding-bottom: 64px;
}

.belle-block__photo {
	flex: 0 0 530px;
	max-width: 530px;
	height: 380px;
	overflow: hidden;
	background: #d9d9d9;
	border-radius: 24px;
	box-shadow: 10px 10px 0 0 var(--blue);
}

.belle-block__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.belle-block__lead {
	flex: 1 1 auto;
	min-width: 0;
}

.belle-block__lead h3 {
	color: var(--blue);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4;
}

.belle-block__lead .belle-block__bar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 14px 0;
}

.belle-block__bar span {
	display: block;
	height: 3px;
	background: var(--blue);
	border-radius: 3px;
}

.belle-block__bar span:nth-child(1) { width: 33px; }
.belle-block__bar span:nth-child(2) { width: 8px; }

.belle-block__lead p {
	font-size: 16px;
	line-height: 1.8;
}

/* --- リセット洗車：特徴カード --- */
.belle-featurerow {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 64px;
}

.belle-featurerow__item {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 40px;
	background: var(--bg-1);
	border-radius: 32px;
}

.belle-featurerow__main {
	display: flex;
	align-items: center;
	gap: 40px;
}

.belle-featurerow__thumb {
	flex: 0 0 342px;
	max-width: 342px;
	height: 260px;
	overflow: hidden;
	border-radius: 16px;
}

.belle-featurerow__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.belle-featurerow__txt {
	flex: 1 1 auto;
	min-width: 0;
}

.belle-featurerow__txt p {
	font-size: 16px;
	line-height: 1.8;
}

/* --- リセット洗車：料金表カード ---
   .belle-featurerow__item（--bg-1）の内側に入る入れ子カード。
   同色だと境界が消えるので、.belle-brand__price と同じ白カードにする。
   overflow: hidden は下端の .belle-more（濃グレー帯）を角丸でクリップするため */
.belle-pricecard {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
	border-radius: 24px;
}

.belle-pricecard__body {
	padding: 20px 26px 24px;
}

.belle-pricecard__body h4 {
	margin-bottom: 16px;
	color: var(--blue);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
}

/* ==========================================================================
   セラミックコーティング：選択（3カード）
   ========================================================================== */
.belle-choice {
	margin-top: 64px;
	padding: 56px;
	background: var(--bg-1);
	border-radius: 32px;
}

.belle-choice__lead {
	margin-bottom: 40px;
}

.belle-choice__lead p {
	font-size: 16px;
	line-height: 1.8;
}

.belle-choice__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 24px;
}

.belle-choice__item {
	flex: 1 1 300px;
	max-width: 300px;
	padding: 44px 25px 40px;
	text-align: center;
	background: #fff;
	border-radius: 24px;
}

.belle-choice__icon {
	width: 160px;
	height: 160px;
	margin: 0 auto 16px;
	overflow: hidden;
	border-radius: 50%;
}

.belle-choice__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.belle-choice__item h4 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--blue);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	white-space: nowrap;
}

.belle-choice__item h4 span {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--blue);
}

.belle-choice__item h4::before,
.belle-choice__item h4::after {
	content: "";
	flex: 0 0 20px;
	align-self: flex-start;
	width: 20px;
	height: 19px;
	background: url("../images/top/quote-open.svg") no-repeat center / contain;
}

.belle-choice__item h4::after {
	align-self: flex-end;
	background-image: url("../images/top/quote-close.svg");
}

.belle-choice__item p {
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
}

/* ==========================================================================
   セラミックコーティング：2ブランド
   ========================================================================== */
.belle-brands {
	margin-top: 64px;
}

.belle-brands__lead {
	margin-bottom: 40px;
	text-align: center;
}

.belle-brands__lead h4 {
	position: relative;
	display: inline-block;
	padding-bottom: 22px;
	color: var(--blue);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
}

.belle-brands__lead h4::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 31px;
	height: 2px;
	background: var(--blue);
}

.belle-brands__lead p {
	font-size: 16px;
	line-height: 1.8;
}

/* align-items は stretch にしない。等高にすると片方の料金表アコーディオンを
   開いたときにもう一方のカードも同じ高さまで伸び、.belle-brand__price-body の
   flex: 1 1 auto が余白を吸収して「そちらも開いた」ように見えてしまう */
.belle-brands__list {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.belle-brand {
	display: flex;
	flex-direction: column;
	flex: 1 1 520px;
	overflow: hidden;
	background: var(--bg-1);
	border-radius: 32px;
}

.belle-brand__thumb {
	height: 290px;
	overflow: hidden;
	border-radius: 24px 24px 0 0;
}

.belle-brand__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ブランド名は写真の下端に重ねる（写真より前面に描画する） */
.belle-brand__name {
	position: relative;
	z-index: 1;
	margin: -22px 0 0;
	color: var(--blue);
	font-family: var(--en);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.2;
	text-align: center;
}

.belle-brand__txt {
	padding: 20px 32px 0;
	text-align: center;
}

.belle-brand__badge {
	position: relative;
	display: inline-block;
	min-width: 344px;
	margin-bottom: 24px;
	padding: 5px 24px;
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	background: var(--blue);
	border-radius: 40px;
}

.belle-brand__badge::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 11px 0 11px;
	border-color: var(--blue) transparent transparent transparent;
}

.belle-brand__txt > p {
	font-size: 16px;
	line-height: 1.8;
}

.belle-brand__price {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 22px 20px 20px;
	overflow: hidden;
	background: #fff;
	border-radius: 24px;
}

.belle-brand__price-body {
	flex: 1 1 auto;
	padding: 20px 26px 24px;
}

.belle-brand__price-head {
	margin-bottom: 16px;
	color: var(--blue);
	font-weight: 700;
	text-align: center;
}

.belle-brand__price-head strong {
	display: block;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
}

.belle-brand__price-head span {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.4;
}

.belle-spec {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 24px;
	padding: 11px 0;
}

.belle-spec__row {
	display: flex;
	align-items: center;
	gap: 11px;
}

.belle-spec__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 112px;
	min-width: 112px;
	padding: 4px 14px;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.8;
	white-space: nowrap;
	background: var(--blue);
	border-radius: 30px;
}

.belle-spec__value {
	font-size: 18px;
	line-height: 1.8;
}

.belle-spec__note {
	font-size: 12px;
	line-height: 1.8;
}

/* ==========================================================================
   その他メニュー（アコーディオン）
   ========================================================================== */
.belle-block--plain {
	padding: 64px;
}

.belle-block__title {
	margin-bottom: 36px;
	color: var(--blue);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4;
	text-align: center;
}

.belle-acc {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 64px;
}

.belle-acc__item {
	overflow: hidden;
	background: var(--bg-1);
	border: 2px solid var(--bg-1);
	border-radius: 24px;
}

/* 見出しは button。ブラウザ既定の枠線・背景・フォント・寄せを打ち消す
   （料金表の .belle-more と同じ考え方） */
.belle-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	min-height: 96px;
	padding: 20px 26px 20px 32px;
	color: var(--blue);
	font-family: inherit;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	background: var(--bg-1);
	border: 0;
	appearance: none;
}

.belle-acc__head::after {
	content: "";
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background: url("../images/top/icon-plus.svg") no-repeat center / contain;
}

.belle-acc__head[aria-expanded="true"]::after {
	background-image: url("../images/top/icon-minus.svg");
}

/* 高さは js/top.js が max-height に実測値（px）を入れてアニメーションさせる。
   .belle-acc__panel と同じ「閉じている間は max-height: 0」のパネル。
   visibility を併用し、閉じている間はキーボードフォーカスと
   スクリーンリーダーが中身に到達しないようにする */
.belle-acc__body {
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
	background: #fff;
	transition:
		max-height 0.3s ease,
		visibility 0.3s;
}

/* 最初から開いている項目のための初期値。JS が開いた後は inline の
   max-height（実測値 → none）が優先されるので、ここは初期表示専用 */
.belle-acc__body.is-open {
	max-height: none;
	visibility: visible;
}

/* 余白は .belle-acc__body（overflow: hidden）の内側に置く。
   body 自身に持たせると max-height: 0 でも padding 分の高さが残ってしまう */
.belle-acc__inner {
	padding: 22px 32px 28px;
	font-size: 16px;
	line-height: 1.8;
}

/* 説明文の下に置く料金表。項目が増えても縦に積むだけで済むよう、
   dt（区分）＋ dd（サイズと金額）を並べるだけの作りにしている */
.belle-acc__price {
	margin-top: 18px;
	padding: 18px 24px;
	background: var(--bg-1);
	border-radius: 12px;
}

.belle-acc__price dt {
	margin-bottom: 4px;
	color: var(--blue);
	font-weight: 700;
}

/* 区分と区分の間だけ空ける（先頭の dt には余白を付けない） */
.belle-acc__price dd + dt {
	margin-top: 16px;
}

/* サイズと金額の間は space-between。ただし幅いっぱいに離れると
   読みにくいので max-width で行の長さを抑える */
.belle-acc__price dd {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 280px;
	margin-left: 1em;
}

.belle-acc__price dd span:last-child {
	font-weight: 700;
}

.belle-acc__panel {
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
	transition:
		max-height 0.3s ease,
		visibility 0.3s;
}

.belle-acc__panel.is-open {
	visibility: visible;
}

/* 項目の縦並びと余白はパネル（overflow: hidden）の内側が持つ。
   .belle-acc の中に置くと閉じている間も gap 16px 分の隙間が残るため、
   .belle-acc と同じ並びをここで再現している */
.belle-acc__panel-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* .belle-acc の gap と揃え、直前の項目との間隔を保つ */
	padding-top: 16px;
}

@media (prefers-reduced-motion: reduce) {

	.belle-acc__body,
	.belle-acc__panel {
		transition: none;
	}
}

.belle-pill {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	gap: 10px;
	min-width: 170px;
	min-height: 56px;
	padding: 10px 28px;
	color: #fff !important;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: .05em;
	font-family: inherit;
	background: var(--blue);
	border: 0;
	border-radius: 40px;
	cursor: pointer;
	appearance: none;
}

.belle-pill--chevron::after {
	content: "";
	width: 10px;
	height: 6px;
	background: url("../images/top/icon-chevron.svg") no-repeat center / contain;
}

/* 開いている間はシェブロンを上向きに */
.belle-pill[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* 文言は開閉で出し分ける（2つの span を CSS で切り替え） */
.belle-pill[aria-expanded="false"] .belle-pill__label--close,
.belle-pill[aria-expanded="true"] .belle-pill__label:not(.belle-pill__label--close) {
	display: none;
}

.belle-center {
	margin-top: 32px;
	text-align: center;
}

/* ==========================================================================
   LINE キャンペーン
   ========================================================================== */
.belle-line {
	background-color: #fff;
	border-bottom-right-radius: 32px;
	margin-top: -25px;
	padding: 113px 0 105px;
	position: relative;
	text-align: center;
	z-index: 0;
}

.belle-line__catch {
	display: inline-block;
	max-width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.belle-line__catch p {
	color: var(--green);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4;
	white-space: nowrap;
}

.belle-line__catch strong {
	margin: 0 .25em;
	color: var(--red);
	font-weight: 700;
	font-size: 40px;
}

.belle-line__sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 19px;
	color: var(--green);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.4;
}

.belle-line__sub::before,
.belle-line__sub::after {
	content: "";
	width: 14px;
	height: 21px;
	background: var(--green);
	clip-path: polygon(100% 0, 100% 12%, 12% 100%, 0 88%);
}

.belle-line__sub::after {
	clip-path: polygon(0 0, 12% 0, 100% 88%, 88% 100%);
}

.belle-line__btn {
	align-items: center;
	background-color: #fff;
	border: 3px solid var(--green);
	color: var(--green) !important;
	display: inline-flex;
	justify-content: center;
	gap: 8px;
	min-width: 340px;
	min-height: 64px;
	margin-top: 16px;
	padding: 10px 30px;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	letter-spacing: .05em;
	border-radius: 32px;
}

.belle-line__btn img {
	width: 31px;
	height: 30px;
}

/* ==========================================================================
   Information（お知らせ）
   ========================================================================== */
.belle-info {
	padding: 80px 0 121px;
	background: var(--blue);
	border-top-left-radius: 32px;
	border-top-right-radius: 4px;
}

.belle-info .belle-heading {
	margin-bottom: 40px;
}

.belle-info__card {
	padding: 77px 72px 40px;
	background: #fff;
	border-radius: 24px 4px 24px 4px;
}

.belle-news {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.belle-news__item a,
.belle-news__item > div {
	display: flex;
	align-items: baseline;
	gap: 49px;
	min-height: 56px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

.belle-news__date {
	flex: 0 0 100px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
}

.belle-news__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 18px;
	line-height: 1.8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.belle-info__more {
	margin-top: 24px;
	text-align: center;
}

.belle-info__more .belle-pill {
	min-width: 220px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1200px) {
	.belle-feature__inner {
		padding-left: 40px;
	}

	/* カードだけが青帯から上にはみ出す形は保ちたいので、
	   見出しは青帯の上端（top: 47px）より下に置く */
	.belle-feature .belle-heading {
		margin-top: 80px;
	}
}

@media screen and (max-width: 1040px) {
	/* 青帯が上端から始まるので、見出し上の余白は belle-menu と同じ 80px を取る */
	.belle-feature {
		padding-top: 80px;
	}

	.belle-feature::before {
		top: 0;
	}

	.belle-feature__inner {
		display: block;
		padding: 0 20px;
	}

	/* ここからは見出しがカードの上に回り込み、上余白はセクションの
	   padding-top が持つので margin-top は戻す */
	.belle-feature .belle-heading {
		margin-top: 0;
		margin-bottom: 32px;
		text-align: center;
	}

	.belle-feature__list {
		justify-content: center;
	}

	.belle-brands__list {
		display: block;
	}

	.belle-brand + .belle-brand {
		margin-top: 32px;
	}

	.belle-block,
	.belle-block--plain {
		padding-left: 32px;
		padding-right: 32px;
	}

	.belle-choice {
		padding: 32px;
	}
}

@media screen and (max-width: 767px) {
	.belle {
		--gutter: 20px;
	}

	.belle-mv {
		padding-bottom: 40px;
	}

	/* 1 セットが短くなるので、PC と同じ移動速度になるよう再生時間も詰める。
	   幅は vw で持つ（% だと max-content のトラック基準で解決できない） */
	.belle-mv__photos {
		--mv-photo: 70vw;
		height: 220px;
		margin-left: 0;
		animation-duration: 20s;
	}

	.belle-mv__photos li {
		height: 220px;
	}

	.belle-mv__catch {
		top: 190px;
		font-size: 34px;
	}

	.belle-mv__catch-track {
		animation-duration: 20s;
	}

	.belle-mv__catch-track span {
		padding-right: 40px;
	}

	.belle-mv__box {
		max-width: none;
		margin: 24px 20px 0;
		padding: 32px 24px;
		min-height: 0;
	}

	.belle-mv__box p {
		margin-top: 20px;
	}

	.belle-mv__box h1 {
		font-size: 26px;
	}

	.belle-heading__en {
		font-size: 40px;
	}

	.belle-heading__jp {
		font-size: 18px;
	}

	.belle-feature {
		padding: 48px 0 56px;
	}

	.belle-feature__card {
		height: auto;
		flex-direction: column;
	}

	.belle-feature__thumb {
		flex: 0 0 160px;
		height: 160px;
	}

	/* カードが縦積みになり、左下はテキストの領域になる。連番をそのまま
	   置くと本文に食い込むので、PC と同じくサムネの左下に重ねる。
	   写真の上に乗るため、文字色は青ではなく白 */
	.belle-feature__num {
		top: 118px;
		bottom: auto;
		color: #fff;
		font-size: 48px;
	}

	.belle-cta {
		padding: 48px 0;
	}

	.belle-cta__box {
		padding: 56px 32px;
	}

	.belle-cta__box h2 {
		font-size: 24px;
	}

	.belle-cta__btns {
		display: block;
	}

	.belle-cta__btns a {
		max-width: none;
		margin-top: 12px;
		min-height: 64px;
		border-radius: 8px !important;
	}

	.belle-menu {
		padding: 48px 0 64px;
	}

	.belle-menu__blocks {
		gap: 64px;
	}

	.belle-block,
	.belle-block--plain {
		padding: 0 20px 40px;
	}

	.belle-block--plain {
		padding-top: 40px;
	}

	.belle-block__copy {
		display: block;
		padding-bottom: 32px;
	}

	.belle-block__photo {
		max-width: none;
		height: 220px;
		box-shadow: 6px 6px 0 0 var(--blue);
	}

	.belle-block__lead {
		margin-top: 32px;
	}

	.belle-block__lead h3 {
		font-size: 24px;
	}

	.belle-featurerow__item {
		gap: 24px;
		padding: 24px;
	}

	.belle-featurerow__main {
		display: block;
	}

	.belle-featurerow__thumb {
		max-width: none;
		height: 200px;
		margin-bottom: 20px;
	}

	.belle-pricecard__body {
		padding: 24px 20px 16px;
	}

	.belle-choice {
		padding: 24px 20px;
	}

	.belle-choice__list {
		display: block;
	}

	.belle-choice__item {
		max-width: none;
	}

	.belle-choice__item + .belle-choice__item {
		margin-top: 20px;
	}

	.belle-brand__badge {
		min-width: 0;
		width: 100%;
		font-size: 16px;
	}

	.belle-brand__name {
		font-size: 36px;
	}

	.belle-brand__price {
		margin: 20px 12px 12px;
	}

	.belle-brand__price-body {
		padding: 20px 16px;
	}

	.belle-spec__row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.belle-block__title {
		font-size: 24px;
	}

	.belle-acc__head {
		min-height: 72px;
		padding: 16px 16px 16px 20px;
		font-size: 16px;
	}

	.belle-acc__head::after {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}

	.belle-acc__price {
		padding: 16px 18px;
	}

	.belle-line {
		padding: 56px 0;
	}

	.belle-line__catch p {
		font-size: 18px;
		white-space: normal;
	}

	.belle-line__catch strong {
		font-size: 22px;
	}

	.belle-line__sub {
		font-size: 16px;
	}

	.belle-line__btn {
		min-width: 0;
		width: 100%;
		font-size: 18px;
	}

	.belle-info {
		padding: 48px 0 64px;
	}

	.belle-info__card {
		padding: 32px 20px;
	}

	.belle-news__item a,
	.belle-news__item > div {
		display: block;
		gap: 0;
	}

	.belle-news__title {
		white-space: normal;
		font-size: 16px;
	}
}