/* =========================================================
   Bloomy 比較ページ 購入導線カードUI (compare-cards)
   方針: シンプル / 清潔感 / 信頼感 / 柔らかい。装飾最小・絵文字なし。
   ========================================================= */

.bloomy-cc-results {
	--cc-blue: #1f6fff;
	--cc-blue-dark: #1a5fe0;
	--cc-ink: #1f2a44;
	--cc-sub: #6b7891;
	--cc-line: #e7ecf5;
	--cc-bg: #f5f7fb;
	display: flex;
	flex-direction: column;
	gap: 44px;
	color: var(--cc-ink);
}

/* ---- セクション ---- */
.bloomy-cc-section__head {
	margin-bottom: 24px;
}
.bloomy-cc-section__title {
	font-size: 1.32rem;
	font-weight: 800;
	letter-spacing: .01em;
	margin: 0;
	color: var(--cc-ink);
}
.bloomy-cc-section__subtitle {
	margin: 4px 0 0;
	font-size: .82rem;
	color: var(--cc-sub);
}

/* ---- カルーセル ---- */
.bloomy-cc-carousel {
	position: relative;
}
.bloomy-cc-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 4px 2px 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.bloomy-cc-carousel__track::-webkit-scrollbar { height: 6px; }
.bloomy-cc-carousel__track::-webkit-scrollbar-thumb { background: #d6deec; border-radius: 99px; }

.bloomy-cc-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--cc-line);
	background: #fff;
	box-shadow: 0 4px 14px rgba(31, 42, 68, .12);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}
.bloomy-cc-carousel__arrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--cc-ink);
	border-right: 2px solid var(--cc-ink);
}
.bloomy-cc-carousel__arrow--prev { left: -10px; }
.bloomy-cc-carousel__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.bloomy-cc-carousel__arrow--next { right: -10px; }
.bloomy-cc-carousel__arrow--next::before { transform: rotate(45deg); margin-right: 3px; }
.bloomy-cc-carousel.is-scrollable .bloomy-cc-carousel__arrow { display: flex; }
.bloomy-cc-carousel__arrow:disabled { opacity: .35; cursor: default; }

/* ---- カード ---- */
.bloomy-cc-card {
	flex: 0 0 300px;
	max-width: 300px;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: 20px;
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 1px 2px rgba(31, 42, 68, .04), 0 6px 16px -10px rgba(31, 42, 68, .12);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.bloomy-cc-card:hover {
	border-color: #d8e2f4;
	box-shadow: 0 2px 4px rgba(31, 42, 68, .05), 0 18px 38px -18px rgba(31, 42, 68, .26);
	transform: translateY(-3px);
}

.bloomy-cc-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bloomy-cc-card__flag {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--cc-line);
	background: var(--cc-bg);
	display: grid;
	place-items: center;
	box-shadow: 0 1px 3px rgba(31, 42, 68, .12);
}
.bloomy-cc-card__flag img { width: 100%; height: 100%; object-fit: cover; }
.bloomy-cc-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
	color: var(--cc-ink);
}
/* 国名と「Nカ国で使える周遊プラン」を同じ行に（カバレッジ説明を国名の右へ）。
   狭い幅では自然に折り返す。 */
.bloomy-cc-card__titlerow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 2px;
}
.bloomy-cc-card__coverage {
	margin: 0;
	font-size: .76rem;
	color: var(--cc-sub);
	white-space: nowrap;
}

.bloomy-cc-card__excluded {
	margin: 0;
	font-size: .78rem;
	font-weight: 600;
	color: #c0683a;
	background: #fff3ea;
	border-radius: 8px;
	padding: 5px 10px;
	align-self: flex-start;
}

/* ---- タグ ---- */
.bloomy-cc-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bloomy-cc-tag {
	font-size: .72rem;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 99px;
	background: #eef2fa;
	color: #4a5a78;
	line-height: 1.5;
}
.bloomy-cc-tag--popular { background: #fff0f3; color: #d6457a; }
.bloomy-cc-tag--campaign { background: #eafaf1; color: #1f9d63; }
.bloomy-cc-tag--roaming { background: #eaf2ff; color: var(--cc-blue); }
.bloomy-cc-tag--pricedrop { background: #fdeef0; color: #d64545; }

/* ---- チップ（容量/日数・補助） ---- */
.bloomy-cc-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bloomy-cc-chip {
	font-size: .78rem;
	font-weight: 600;
	padding: 6px 11px;
	border-radius: 10px;
	border: 1px solid var(--cc-line);
	background: #fff;
	color: var(--cc-sub);
	cursor: pointer;
	transition: all .15s ease;
}
.bloomy-cc-chip:hover { border-color: #c4d2ec; }
.bloomy-cc-chip.is-active {
	background: var(--cc-blue);
	border-color: var(--cc-blue);
	color: #fff;
}
.bloomy-cc-card__single-spec {
	font-size: .82rem;
	color: var(--cc-sub);
	font-weight: 600;
}

/* ---- フッター: 価格 + アクション（主役） ---- */
.bloomy-cc-card__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--cc-line);
}
.bloomy-cc-card__price {
	display: flex;
	align-items: baseline;
	gap: 2px;
	color: var(--cc-ink);
}
.bloomy-cc-card__price-value {
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.bloomy-cc-card__price-unit { font-size: .95rem; font-weight: 700; }
.bloomy-cc-card__price-days { font-size: .78rem; color: var(--cc-sub); margin-left: 6px; font-weight: 600; }

.bloomy-cc-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bloomy-cc-card__cta {
	display: block;
	text-align: center;
	background: var(--cc-blue);
	color: #fff;
	font-weight: 700;
	font-size: .94rem;
	letter-spacing: .01em;
	padding: 13px 14px;
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 6px 14px -6px rgba(31, 111, 255, .55);
	transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.bloomy-cc-card__cta:hover { background: var(--cc-blue-dark); box-shadow: 0 9px 20px -7px rgba(31, 111, 255, .6); }
.bloomy-cc-card__cta:active { transform: translateY(1px); box-shadow: 0 3px 8px -4px rgba(31, 111, 255, .5); }
.bloomy-cc-card__cta.is-disabled { background: #c4cbd8; box-shadow: none; pointer-events: none; }
.bloomy-cc-card__detail {
	border: 1px solid var(--cc-line);
	background: #fff;
	color: var(--cc-ink);
	font-weight: 600;
	font-size: .86rem;
	padding: 10px 14px;
	border-radius: 12px;
	cursor: pointer;
	order: 2;
}
.bloomy-cc-card__detail:hover { border-color: #c4d2ec; }
.bloomy-cc-card__cta { order: 1; }

/* ---- 空表示 ---- */
.bloomy-cc-empty {
	text-align: center;
	padding: 48px 20px;
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: 18px;
}
.bloomy-cc-empty h3 { margin: 0 0 6px; font-size: 1.05rem; }
.bloomy-cc-empty p { margin: 0; color: var(--cc-sub); font-size: .85rem; }

/* ---- レスポンシブ ---- */
@media (max-width: 600px) {
	.bloomy-cc-card { flex-basis: 80vw; max-width: 80vw; }
	.bloomy-cc-carousel__arrow { display: none !important; }
}

/* =========================================================
   特典・機能をチップUI化（プレビュー ?cards=1 のときのみ適用）
   トグルスイッチ → 柔らかいピル型チップ（Airalo/Booking風）
   ========================================================= */
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: auto;
	padding: 8px 14px;
	border: 1px solid #e7ecf5;
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-row:hover {
	border-color: #c4d2ec;
}
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-row:has(input:checked) {
	background: #1f6fff;
	border-color: #1f6fff;
}
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-row:has(input:checked) .bloomy-plan-filter__toggle-text {
	color: #fff;
}
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__toggle-text {
	font-size: .85rem;
	font-weight: 600;
	color: #4a5a78;
}
/* スイッチUIは隠す（チップ全体で状態表現） */
.bloomy-plan-filter__section--shared-other .bloomy-plan-filter__switch {
	display: none !important;
}

/* =========================================================
   案A: 結果見出しの候補数（主役）/ サイドバー階層の軽量化
   ========================================================= */
.bloomy-cc-results__head {
	margin-bottom: 4px;
}
.bloomy-cc-results__count {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f2a44;
}
.bloomy-cc-results__count strong {
	font-size: 1.5rem;
	font-weight: 800;
	color: #1f6fff;
	margin-right: 2px;
}

/* 絞り込み見出しを軽く（補助であることを示す） */
.bloomy-plan-filter__title--soft {
	font-size: .95rem !important;
	font-weight: 700;
	color: #6b7891 !important;
}
.bloomy-plan-filter__title-note {
	font-size: .78rem;
	font-weight: 600;
	color: #64718f;
}

/* 候補数box（最安撤去後）をコンパクトに */
.bloomy-plan-filter__summary--compact {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 0 2px;
	border: 0;
	background: transparent;
}
.bloomy-plan-filter__summary--compact .bloomy-plan-filter__summary-value {
	font-size: 1.15rem;
	font-weight: 800;
	color: #1f6fff;
}
.bloomy-plan-filter__summary--compact .bloomy-plan-filter__summary-label {
	font-size: .8rem;
	color: #6b7891;
}

/* サイドバーのグループ見出し（おすすめ条件 / 利用シーン）を小さなラベルに */
.bloomy-compare-sidebar .bloomy-plan-filter__section--shared-other .bloomy-plan-filter__section-title {
	font-size: .82rem;
	font-weight: 700;
	color: #6b7891;
	margin-bottom: 8px;
}
.bloomy-compare-sidebar .bloomy-plan-filter__section--shared-other {
	margin-top: 14px;
}

/* =========================================================
   カード内 通常/無制限 トグル（テキスト幅・コンパクト）
   ========================================================= */
.bloomy-cc-card__typetabs {
	display: inline-flex;
	align-self: flex-start;
	gap: 3px;
	background: #f1f4fa;
	border-radius: 999px;
	padding: 3px;
}
.bloomy-cc-typetab {
	border: 0;
	background: transparent;
	color: #6b7891;
	font-size: .82rem;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
}
.bloomy-cc-typetab.is-active {
	background: #1f6fff;
	color: #fff;
}

/* 結果見出し: 件数(主役) ＋ 最安(補助) を横並び */
.bloomy-cc-results__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.bloomy-cc-results__min {
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	color: #6b7891;
}

/* =========================================================
   モバイル: フローティング絞り込み → ボトムシート（Airbnb/Booking風）
   PCでは非表示。サイドバーをモバイルでシート化して再利用。
   ========================================================= */
.bloomy-cc-fab,
.bloomy-cc-fab-overlay,
.bloomy-cc-sheet-cta-wrap { display: none; }

@media (max-width: 900px) {
	.bloomy-cc-fab {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		position: fixed;
		right: 18px;
		bottom: 28px;
		z-index: 1200;
		background: #ffffff;
		color: #FE7F7F;
		border: 1.5px solid #FE7F7F;
		border-radius: 999px;
		padding: 12px 22px;
		font-size: .95rem;
		font-weight: 700;
		box-shadow: 0 4px 16px rgba(31, 42, 68, .14);
		cursor: pointer;
		transition: background .15s ease, color .15s ease;
	}
	.bloomy-cc-fab:active { background: #FE7F7F; color: #fff; }

	.bloomy-cc-fab-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1190;
		background: rgba(31, 42, 68, .42);
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s ease;
	}
	body.bloomy-cc-sheet-open .bloomy-cc-fab-overlay { opacity: 1; pointer-events: auto; }
	body.bloomy-cc-sheet-open .bloomy-cc-fab { display: none; }

	/* サイドバーをボトムシート化 */
	.bloomy-list-page .bloomy-compare-sidebar {
		position: fixed !important;
		left: 0; right: 0; bottom: 0; top: auto !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 1201;
		max-height: 86vh;
		background: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 30px rgba(31, 42, 68, .2);
		transform: translateY(100%) !important; /* 旧 compare.css の !important に勝つため */
		transition: transform .28s cubic-bezier(.22, 1, .36, 1);
		overflow: hidden;
	}
	body.bloomy-cc-sheet-open .bloomy-list-page .bloomy-compare-sidebar {
		transform: translateY(0) !important;
		/* 旧 compare.css の基底が opacity:0/visibility:hidden/pointer-events:none も付けるため、
		   transform だけでは透明・不可視のまま（暗転のみ）。新機構で全て解除して確実に表示する。 */
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.bloomy-list-page .bloomy-compare-sidebar__inner {
		max-height: 86vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 18px 16px 0;
	}
	/* 上部にドラッグハンドル風の余白 */
	.bloomy-list-page .bloomy-compare-sidebar__inner::before {
		content: "";
		display: block;
		width: 40px; height: 4px;
		background: #d7deea; border-radius: 99px;
		margin: 0 auto 14px;
	}

	.bloomy-cc-sheet-cta-wrap {
		display: block;
		position: sticky;
		bottom: 0;
		margin: 8px -16px 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #e7ecf5;
	}
	.bloomy-cc-sheet-cta {
		display: block; width: 100%;
		box-sizing: border-box;
		border: 0; border-radius: 12px;
		background: #2f7ef7; color: #fff;
		font-weight: 800; font-size: .95rem;
		padding: 14px; cursor: pointer;
	}
	.bloomy-cc-sheet-cta:active { background: #2168e0; }

	/* 旧・下部固定バーは撤去 */
	.bloomy-compare-mobile-sticky { display: none !important; }
}

/* =========================================================
   質感向上（大手品質寄せ）: おすすめ強調 / 階層 / 操作感 / a11y
   すべて上書き・装飾のみ。マークアップ非依存で安全。
   ========================================================= */

/* セクション見出し: 先頭にお花アイコン（ファビコンと同じ） */
.bloomy-cc-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bloomy-cc-section__flower {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	object-fit: contain;
	filter: drop-shadow(0 1px 1px rgba(31, 42, 68, .1));
}

/* 「人気」タグを持つカードを淡く強調（おすすめが一目で分かる） */
.bloomy-cc-card:has(.bloomy-cc-tag--popular) {
	border-color: #f4c4d6;
	box-shadow: 0 1px 2px rgba(214, 69, 122, .06), 0 8px 20px -12px rgba(214, 69, 122, .32);
}
.bloomy-cc-card:has(.bloomy-cc-tag--popular):hover {
	border-color: #efaecb;
	box-shadow: 0 2px 4px rgba(214, 69, 122, .08), 0 20px 40px -18px rgba(214, 69, 122, .4);
}

/* タグ：わずかに余白を整え視認性を上げる */
.bloomy-cc-tag {
	padding: 4px 10px;
	letter-spacing: .01em;
}

/* 容量チップ：数字を等幅にして切替時のガタつきを防ぐ */
.bloomy-cc-chip {
	font-variant-numeric: tabular-nums;
}
.bloomy-cc-chip.is-active {
	box-shadow: 0 4px 10px -4px rgba(31, 111, 255, .5);
}

/* タイプタブ：アクティブに軽い浮き上がり */
.bloomy-cc-typetab.is-active {
	box-shadow: 0 2px 6px -2px rgba(31, 111, 255, .5);
}

/* 価格の通貨単位・日数の縦位置を微調整して整える */
.bloomy-cc-card__price-unit { transform: translateY(-1px); }
.bloomy-cc-card__price-days { font-variant-numeric: tabular-nums; }

/* キーボード操作のフォーカスを明確化（アクセシビリティ＋上質感） */
.bloomy-cc-chip:focus-visible,
.bloomy-cc-typetab:focus-visible,
.bloomy-cc-card__detail:focus-visible,
.bloomy-cc-card__cta:focus-visible,
.bloomy-cc-fab:focus-visible,
.bloomy-cc-sheet-cta:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 2px;
}

/* モーション配慮：視差を抑える設定のユーザーには動きを最小化 */
@media (prefers-reduced-motion: reduce) {
	.bloomy-cc-card,
	.bloomy-cc-card__cta,
	.bloomy-cc-chip,
	.bloomy-cc-typetab,
	.bloomy-list-page .bloomy-compare-sidebar {
		transition: none !important;
	}
	.bloomy-cc-card:hover { transform: none; }
}

/* =========================================================
   左サイドバー再構成（国選択統一 / Booking・Airbnb志向）
   サマリカード / プラン種別トグル / 国・地域 / フィルタ行 / 折りたたみ
   ========================================================= */

/* サイドバー内の縦リズム */
.bloomy-list-page .bloomy-compare-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ① 候補数・最安値 サマリカード（2カラム・中央寄せ・数字主役） */
/* ① 候補数・最安: 縦型カード → 横長の低いインフォバー(高さを圧縮し、情報量は維持) */
.bloomy-cc-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	background: #f4f8ff;
	border: 1px solid #e3edfb;
	border-radius: 10px;
	padding: 8px 12px;
	box-shadow: none;
}
.bloomy-cc-summary__cell {
	display: flex;
	flex-direction: row;        /* ラベルと値を横並びに(1行帯) */
	align-items: baseline;
	gap: 5px;
	text-align: left;
}
.bloomy-cc-summary__label {
	font-size: .72rem;
	font-weight: 600;
	color: #7a8aa6;
}
.bloomy-cc-summary__value {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	font-weight: 700;
	color: #1f6fff;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.bloomy-cc-summary__value strong { font-size: 1.02rem; font-weight: 800; }
.bloomy-cc-summary__unit { font-size: .72rem; font-weight: 700; }
.bloomy-cc-summary__value--price { font-size: .92rem; }
.bloomy-cc-summary__sep {
	width: 1px;
	height: 14px;
	align-self: center;
	margin: 0;
	background: #d7e2f4;
}

/* ② プラン種別トグル（通常 / 無制限）セグメント */
.bloomy-cc-plantype {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	background: #eef2f8;
	border-radius: 12px;
	padding: 4px;
}
.bloomy-cc-plantype__btn {
	border: 0;
	background: transparent;
	color: #6b7891;
	font-size: .9rem;
	font-weight: 700;
	padding: 9px 8px;
	border-radius: 9px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bloomy-cc-plantype__btn.is-active {
	background: #fff;
	color: #1f6fff;
	box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 4px 10px -6px rgba(31, 42, 68, .3);
}

/* ③ サイドバー セクション見出し（国・地域 など） */
.bloomy-cc-side-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: #1f2a44;
	margin-bottom: 10px;
}
.bloomy-cc-side-section__icon {
	display: inline-grid;
	place-items: center;
	color: #1f6fff;
}

/* 人気の渡航先ピル（サイドバー / モバイルシート）。TOPのボトムシートと同じ見せ方。
   ピル本体 .bloomy-top-chip-button は compare.css 既存スタイルを流用。 */
.bloomy-cc-side-popular__title {
	font-size: .92rem;
	font-weight: 700;
	color: #1f2a44;
	margin-bottom: 10px;
}
.bloomy-cc-side-popular__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 国・地域 検索バーをサイドバー幅になじませる（チップは上、入力は下の行） */
.bloomy-compare-sidebar .bloomy-compare-destination-filter__search-row { width: 100%; }
.bloomy-compare-sidebar .bloomy-top-searchbar {
	width: 100%;
	flex-wrap: wrap;
	border: 1px solid #e7ecf5;
	border-radius: 12px;
	background: #fff;
	padding: 8px 10px;
	min-height: 48px;
}
.bloomy-compare-sidebar .bloomy-top-searchbar__chips {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bloomy-compare-sidebar .bloomy-top-searchbar__chips:empty { display: none; }
.bloomy-compare-sidebar .bloomy-top-searchbar__input {
	flex: 1 1 auto;
	min-width: 8ch;
	border: 0;
	background: transparent;
	font-size: .92rem;
	padding: 4px 2px;
}

/* 選択中の国・地域チップ。compare.js の renderChips() が .bloomy-top-selected-chip を
   生成するが、比較ページは top.css を読み込まないため当クラスが無スタイルだった
   （素テキストで崩れ＝「CSSが無い/文字が重複して見える」原因）。
   TOPのチップ意匠＋比較サイドバーの落ち着いたトーンに調和させて定義する。 */
.bloomy-compare-sidebar .bloomy-top-selected-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 6px 0 11px;
	border: 1px solid #dce8fb;
	border-radius: 999px;
	background: #eef4ff;
	color: #3f6ad0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip:hover {
	background: #e2edff;
	border-color: #c5dbfb;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip:focus-visible {
	outline: 2px solid #2f7ef7;
	outline-offset: 2px;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip__emoji {
	font-size: 15px;
	line-height: 1;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip__label {
	font-weight: 800;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(63, 106, 208, 0.10);
	color: #3f6ad0;
	font-size: 14px;
	line-height: 1;
}
.bloomy-compare-sidebar .bloomy-top-selected-chip:hover .bloomy-top-selected-chip__remove {
	background: rgba(31, 87, 195, 0.18);
}

/* ④⑤ フィルタ グループ */
.bloomy-cc-filter-group + .bloomy-cc-filter-group { margin-top: 2px; }
.bloomy-cc-filter-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.bloomy-cc-filter-group--collapsible .bloomy-cc-filter-group__head {
	cursor: pointer;
	user-select: none;
}
.bloomy-cc-filter-group__title {
	font-size: 1rem;
	font-weight: 700;
	color: #1f2a44;
}
.bloomy-cc-filter-group__chevron {
	width: 10px; height: 10px;
	border-right: 2px solid #9aa6bd;
	border-bottom: 2px solid #9aa6bd;
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 4px;
}
.bloomy-cc-filter-group.is-open .bloomy-cc-filter-group__chevron { transform: rotate(-135deg); }
.bloomy-cc-filter-group__rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
	transition: max-height .25s ease, opacity .2s ease;
}
.bloomy-cc-filter-group--collapsible:not(.is-open) .bloomy-cc-filter-group__rows {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}

/* フィルタ行: アイコン + (ラベル+説明) + チェックボックス */
.bloomy-cc-filter-row {
	display: grid;
	grid-template-columns: 44px 1fr 24px;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s ease;
}
.bloomy-cc-filter-row:hover { background: #f6f9ff; }
.bloomy-cc-filter-row__icon {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #eaf1ff;
	color: #2f6df6;
}
.bloomy-cc-filter-row__icon--down { background: #e7f7ef; color: #1f9d63; }
.bloomy-cc-filter-row__icon--spark { background: #f1ecfe; color: #7c5cff; }
.bloomy-cc-filter-row__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.bloomy-cc-filter-row__label {
	font-size: .95rem;
	font-weight: 700;
	color: #1f2a44;
}
.bloomy-cc-filter-row__desc {
	font-size: .78rem;
	color: #8a95a9;
	line-height: 1.4;
}
/* 実チェックボックスは隠し、__box で表現 */
.bloomy-cc-filter-row__input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: -1px;
	pointer-events: none;
}
.bloomy-cc-filter-row__box {
	width: 24px; height: 24px;
	border: 2px solid #cdd6e6;
	border-radius: 7px;
	background: #fff;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}
.bloomy-cc-filter-row__box::after {
	content: "";
	position: absolute;
	left: 7px; top: 3px;
	width: 6px; height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}
.bloomy-cc-filter-row__input:checked ~ .bloomy-cc-filter-row__box {
	background: #1f6fff;
	border-color: #1f6fff;
}
.bloomy-cc-filter-row__input:checked ~ .bloomy-cc-filter-row__box::after {
	transform: rotate(45deg) scale(1);
}
.bloomy-cc-filter-row__input:focus-visible ~ .bloomy-cc-filter-row__box {
	outline: 2px solid #1f6fff;
	outline-offset: 2px;
}

/* 絞り込みをリセット */
.bloomy-cc-side-foot {
	border-top: 1px solid #eef1f7;
	padding-top: 14px;
}
.bloomy-cc-reset {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	color: #6b7891;
	font-size: .9rem;
	font-weight: 600;
	padding: 4px 2px;
	cursor: pointer;
	transition: color .15s ease;
}
.bloomy-cc-reset:hover { color: #1f6fff; }
.bloomy-cc-reset__icon { display: inline-grid; place-items: center; }

/* 結果見出し: 件数（主役）左 / 並び替え 右 */
.bloomy-cc-results__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.bloomy-cc-results__headline {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.bloomy-cc-results__sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.bloomy-cc-results__sort-label {
	font-size: .82rem;
	font-weight: 600;
	color: #6b7891;
}

/* モバイル: サマリ/トグルもボトムシート内で見やすく */
@media (max-width: 900px) {
	.bloomy-cc-results__head { gap: 8px; }
	.bloomy-cc-results__sort { width: 100%; justify-content: flex-end; }
}

/* セクション見出し: タイトル(1行目)の下に「説明文(左) + ソート(右)」を同じ行に置く(meta row)。
   モバイルでも同じ行を維持(説明文は縮小+省略、ソートは固定幅)。ソートはカテゴリ共通の1つだけ。 */
.bloomy-cc-section__subrow {
	display: flex;
	align-items: flex-end;       /* 説明文とソートを「下揃え」に(中央でなく下端で揃える) */
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap;            /* 説明文とソートを同じ行に保つ(下に落とさない) */
	margin-top: 4px;
}
.bloomy-cc-section__subrow .bloomy-cc-section__subtitle {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25;           /* 下端をソートピルと揃えやすいよう少し詰める */
	/* 1行に保ち、ソートと同じ高さに揃える。幅潰れバグは解消済みなので nowrap でも縦書きにならない。
	   万一足りない時は末尾を省略(…)して同じ行を維持（説明文は消さない・縦書きにしない）。 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* ソートラッパー: モバイルの既定 .bloomy-cc-results__sort{width:100%} を打ち消し、
   説明文が0幅に潰れて縦書きになるのを防ぐ。内容幅(固定ピル)に収める。
   さらに、背の高いソートが行を高くして説明文を下へ押し下げないよう、負の margin-top で
   上方向に逃がす（行の高さ=説明文の高さに保つ）。下端は align-self:flex-end で説明文と揃える。 */
.bloomy-cc-section__subrow .bloomy-cc-results__sort {
	flex: 0 0 auto !important;
	width: auto !important;
	align-self: flex-end !important;
	justify-content: flex-end !important;
	margin-top: -20px !important;   /* デスクトップ: (ピル高 - 説明文行高) ぶん上へ逃がす */
	margin-bottom: 0 !important;
}
/* ソートピル: 選択肢で幅が変わらないよう最長に固定。文字はピル内で縦横中央。矢印は右端に絶対配置。 */
.bloomy-list-page .bloomy-cc-section__subrow .bloomy-sort-dropdown__button {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	width: 150px !important;       /* 最長(料金が安い順 / Lowest price)に固定 */
	min-width: 150px !important;
	max-width: 150px !important;
	min-height: 40px !important;
	padding: 0 30px !important;
	font-size: 13px !important;
}
.bloomy-list-page .bloomy-cc-section__subrow .bloomy-sort-dropdown__current {
	width: 100% !important;
	text-align: center !important;  /* ピルに対して文字を中央揃え(水平) */
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.bloomy-list-page .bloomy-cc-section__subrow .bloomy-sort-dropdown__chevron {
	position: absolute !important;
	right: 13px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	flex: 0 0 auto !important;
}
@media (max-width: 900px) {
	/* モバイル: 「並び替え」ラベルは省略。ピルは固定幅をやや小さく(説明文と同じ行に収める)。 */
	.bloomy-cc-section__subrow .bloomy-cc-results__sort-label { display: none !important; }
	.bloomy-cc-section__subrow { gap: 8px; }
	/* モバイルはピルが低い(32px)ので、上へ逃がす量も小さく調整(=説明文を押し下げない) */
	.bloomy-cc-section__subrow .bloomy-cc-results__sort { margin-top: -16px !important; }
	.bloomy-list-page .bloomy-cc-section__subrow .bloomy-sort-dropdown__button {
		width: 128px !important;
		min-width: 128px !important;
		max-width: 128px !important;
		height: 32px !important;
		min-height: 32px !important;
		margin: 0 !important;          /* 余計な margin-top で下がらないように */
		line-height: 1 !important;     /* 高さと一致させ文字を縦中央に */
		padding: 0 24px !important;
		font-size: 12px !important;
		box-shadow: 0 4px 10px rgba(42, 83, 153, 0.06) !important;
	}
	.bloomy-list-page .bloomy-cc-section__subrow .bloomy-sort-dropdown__chevron { right: 9px !important; }
}

/* モバイル上部サマリー(検索結果/選択チップ/件数・最安/行き先変更)を非表示にする。
   ただし下部ミニバーのスクロール連動が #bloomy-mobile-results-head を監視しているため、
   要素はDOMに1pxの基点として残し、中身だけ消す（ミニバーJSは触らない）。 */
@media (max-width: 900px) {
	.bloomy-list-page .bloomy-compare-mobile-summary {
		min-height: 0 !important;
		height: 1px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}
	.bloomy-list-page .bloomy-compare-mobile-summary__inner { display: none !important; }
}

/* =========================================================
   カードを可愛く・スッキリ（やわらかい角丸 / 淡い色 / 余白 / 軽い影）
   ========================================================= */
.bloomy-cc-card {
	border-radius: 22px;
	border-color: #eef1f8;
	padding: 20px 20px 18px;
	gap: 13px;
	box-shadow: 0 1px 2px rgba(31, 42, 68, .03), 0 10px 24px -16px rgba(31, 42, 68, .22);
}
.bloomy-cc-card:hover {
	border-color: #e0e8f6;
	box-shadow: 0 2px 4px rgba(31, 42, 68, .04), 0 16px 34px -18px rgba(31, 42, 68, .22);
	transform: translateY(-3px);
}
.bloomy-cc-card__title {
	font-size: .98rem;
	letter-spacing: .01em;
}
/* フラグ: やわらかい円 */
.bloomy-cc-card__flag {
	width: 42px;
	height: 42px;
	border-color: #eef1f8;
	box-shadow: 0 2px 5px rgba(31, 42, 68, .1);
}
/* タグ: 丸く淡いパステルで可愛く */
.bloomy-cc-tag {
	border-radius: 999px;
	padding: 4px 11px;
	font-size: .7rem;
	font-weight: 700;
}
.bloomy-cc-tag--popular  { background: #ffeef4; color: #e85d8c; }
.bloomy-cc-tag--campaign { background: #eafaf0; color: #1faa66; }
.bloomy-cc-tag--roaming  { background: #eaf2ff; color: #4f8bff; }
.bloomy-cc-tag--pricedrop{ background: #fff0ec; color: #f0744a; }
.bloomy-cc-tag--feature  { background: #f1f4fb; color: #6b7891; }
/* GBチップ: ふっくら角丸 */
.bloomy-cc-chip {
	border-radius: 12px;
	border-color: #eef1f8;
}
.bloomy-cc-chip.is-active {
	background: #1f6fff;
	border-color: #1f6fff;
}
/* 周遊カバレッジ表記をやさしく */
.bloomy-cc-card__coverage { color: #8a95a9; }
/* 価格まわりを軽やかに */
.bloomy-cc-card__price-unit { color: #6b7891; }
.bloomy-cc-card__excluded {
	border-radius: 10px;
	background: #fff4ee;
	color: #d2783f;
}
/* セクション小見出しの余白を少しふんわり */
.bloomy-cc-section__subtitle { color: #64718f; }

/* =========================================================
   購入カード 最終デザイン（添付画像ベース：clean / soft / friendly）
   方針:
   - 左カラムフィルター対応タグはカード内に出さない（PHP側で撤去済み）
   - カード内の補助ラベルは Most Popular のみ
   - Fixed Data / Unlimited は全幅セグメント（低め）
   - GB/日数チップは3列・低め・淡ブルー選択（チェック無し）
   - 価格は「80 USD / 7 days」横並び
   - CTAは View details(グレー文字) ＋ Choose this plan(青) を横並び
   この層を最終とし、上の旧定義より優先（縦の間延びを解消）
   ========================================================= */

/* 縦リズムを引き締める */
.bloomy-cc-card { gap: 11px; padding: 18px 18px 16px; }
.bloomy-cc-card__title { font-weight: 800; color: #16264b; }

/* Fixed Data / Unlimited：全幅セグメントコントロール（低め・淡ブルー選択） */
.bloomy-cc-card__typetabs {
	display: flex;
	width: 100%;
	align-self: stretch;
	gap: 4px;
	background: #fff;
	border: 1px solid #e2e9f5;
	border-radius: 14px;
	padding: 4px;
	margin-bottom: 2px;
}
.bloomy-cc-typetab {
	flex: 1 1 0;
	padding: 8px 10px;
	border-radius: 11px;
	font-size: .85rem;
	font-weight: 700;
	color: #6b7891;
	background: transparent;
	box-shadow: none;
}
.bloomy-cc-typetab.is-active {
	background: #eaf2ff;
	color: #1f6fff;
	box-shadow: none;
}
/* 存在しない側の disabled タブ: 「選べない」が自然に分かる・やりすぎない。
   面はほぼ無く(背景は透明=コンテナ白)・文字はグレー寄り・hover/active/pressed感なし・装飾なし。
   active(淡ブルー面+ブランドブルー)より明確に弱いが、読めないほど薄くはしない。 */
.bloomy-cc-typetab.is-disabled,
.bloomy-cc-typetab.is-disabled:hover,
.bloomy-cc-typetab.is-disabled:active,
.bloomy-cc-typetab.is-disabled:focus {
	background: #eef0f4 !important;   /* 薄いグレーの面＝「選べない(無効)」が一目で分かる(activeの青面と明確に区別・やりすぎない) */
	color: #9aa3b2 !important;        /* 文字はグレー寄りで明確に弱い・読める範囲 */
	cursor: default !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
}

/* GB/日数チップ：3列・コンパクト・やわらか（選択=淡ブルー+青文字+青枠） */
.bloomy-cc-card__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 8px;       /* 行gapを広めに＝Most Popularバッジが上の行と重ならない */
	margin-top: 16px;    /* 先頭行バッジ(上にはみ出す)の逃げ */
	overflow: visible;
}
.bloomy-cc-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 38px;
	padding: 6px 4px;
	border-radius: 12px;
	border: 1px solid #e6ebf5;
	background: #fff;
	color: #44516c;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;            /* チップ文字は必ず1行（2行折返し防止） */
}
.bloomy-cc-chip__label { display: inline-block; white-space: nowrap; }
/* 非アクティブのチップ群(hidden)は確実に隠す（display:grid が [hidden] を打ち消すのを防ぐ） */
.bloomy-cc-card__chips[hidden] { display: none !important; }
.bloomy-cc-chip:hover { border-color: #b9cef2; }
.bloomy-cc-chip.is-active {
	background: #eaf2ff;
	border-color: #9fc2ff;
	color: #1f6fff;
	box-shadow: none;
}

/* Most Popular バッジ：チップ外枠基準・上辺中央に軽く重ねる（青系・小さめ）。
   以前は left:12px の左寄せで、チップに対して偏って見えた（星ぶん非対称）。中央寄せに統一。 */
.bloomy-cc-chip__badge {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -12px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #1f6fff;
	color: #fff;
	font-size: .62rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	white-space: nowrap;
	box-shadow: 0 3px 8px -3px rgba(31, 111, 255, .55);
	z-index: 2;
}
.bloomy-cc-chip__badge-star { font-size: .66rem; line-height: 1; }

/* 複数国カードの丸い国旗ストリップ（単一国カードの国旗と統一感／タイトル不揃いを補う） */
/* 国旗ストリップ＋対象外チップを横並び(対象外を国旗の右に置く) */
.bloomy-cc-card__flagrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 7px;
}
.bloomy-cc-card__flags {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 0; /* 余白は親の __flagrow に移管(対象外チップと縦位置を揃える) */
}
/* flagrow内の対象外チップは国旗と縦中央で揃える(旧・下段用の flex-start を上書き) */
.bloomy-cc-card__flagrow .bloomy-cc-card__excluded { align-self: center; }
.bloomy-cc-card__flagdot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px #e6ebf5;
	background: #eef2f8;
	flex: 0 0 auto;
}
.bloomy-cc-card__flagmore {
	margin-left: 2px;
	font-size: .72rem;
	font-weight: 700;
	color: #7886a0;
}

/* 価格：80 USD / 7 days 横並び・上下余白を詰める */
.bloomy-cc-card__foot { gap: 10px; padding-top: 12px; }
.bloomy-cc-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; }
.bloomy-cc-card__price-value { font-size: 1.9rem; font-weight: 800; color: #16264b; }
.bloomy-cc-card__price-unit { font-size: 1rem; font-weight: 800; color: #16264b; transform: none; }
.bloomy-cc-card__price-days { font-size: .8rem; font-weight: 600; color: #8a95a9; margin-left: 4px; }

/* 結果見出しの「件数 / 最安」は左サマリカードと重複 → 非表示にして重複解消。
   ただし compare-cards.js の syncCount がここを「ミラー元」に使うため要素は残す
   （display:none でも textContent は読めるので集計同期は維持）。Sort は右寄せ。 */
.bloomy-cc-results__headline { display: none; }
.bloomy-cc-results__head { justify-content: flex-end; }

/* CTA：View details(グレー文字) ＋ Choose this plan(青) を横並び */
.bloomy-cc-card__actions {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.bloomy-cc-card__detail {
	order: 0;
	border: 0;
	background: transparent;
	padding: 6px 2px;
	color: #6b7891;
	font-weight: 700;
	font-size: .85rem;
	border-radius: 8px;
}
.bloomy-cc-card__detail::after { content: ' \203A'; font-weight: 700; }
.bloomy-cc-card__detail:hover { border-color: transparent; color: #44516c; }
.bloomy-cc-card__cta {
	order: 0;
	flex: 0 0 auto;
	display: inline-block;
	padding: 11px 18px;
	border-radius: 12px;
	font-size: .9rem;
	color: #fff !important;        /* 青ボタンの文字は必ず白（グローバルリンク色に負けない） */
	box-shadow: 0 5px 12px -5px rgba(31, 111, 255, .5);
}
.bloomy-cc-card__cta:hover { color: #fff !important; }

/* デスクトップ: カードを「約3.2枚」見せる（画面幅に依存せず一定の覗き見せ）。
   31.25% = 100%/3.2。gap分を引いて視野内に3.2枚（=4枚目が少し覗く）。
   モバイル(≤900px)は従来の 80vw を維持（このルールは min-width:901 限定）。 */
@media (min-width: 901px) {
	.bloomy-cc-card {
		flex: 0 0 calc(31.25% - 11px);
		max-width: calc(31.25% - 11px);
		min-width: 252px;
	}
}

/* =========================================================
   モバイル国選択シート整理（@media内・デスクトップ(≥901px)非影響）
   - 国選択だけ：5G/データ追加可能/その他条件/最近値下げ/リセットは出さない
   - 横ブレ防止：border-box徹底・overflow-x禁止・100vw不使用
   - コンパクト化：候補数/最安カードの余白を圧縮
   ※ 表示自体は compare-cards.js が display/position をインライン!importantで制御
   ========================================================= */
@media (max-width: 900px) {
	body.bloomy-cc-sheet-open .bloomy-list-page .bloomy-compare-sidebar,
	body.bloomy-cc-sheet-open .bloomy-list-page .bloomy-compare-sidebar * {
		box-sizing: border-box;
	}
	body.bloomy-cc-sheet-open .bloomy-list-page .bloomy-compare-sidebar {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}
	/* 国選択以外はシートに表示しない */
	body.bloomy-cc-sheet-open .bloomy-cc-filter-group,
	body.bloomy-cc-sheet-open .bloomy-cc-side-foot {
		display: none !important;
	}
	/* 候補数/最安値カードをコンパクトに */
	body.bloomy-cc-sheet-open .bloomy-cc-summary {
		padding: 10px 12px !important;
		margin-bottom: 12px !important;
	}
}

/* シート下部CTAの状態別表示（0件=控えめ／更新直後flash） */
.bloomy-cc-sheet-cta.is-empty {
	background: #eef1f6 !important;
	color: #6b7891 !important;
	box-shadow: none !important;
}
.bloomy-cc-sheet-cta.is-flash {
	background: #1f9d6b !important; /* 「✓ 見つかりました」の一瞬だけ成功グリーン */
}

/* ============================================================
   無制限の日数UI：ショートカット(8個 4列×2行) ＋ − 数値 ＋ ＋ スライダー(常時)
   ＋ 容量/無制限の共通プラン選択エリア(案A: min-heightで切替時の高さ安定)
   ============================================================ */
/* プラン選択エリア：容量チップ／無制限UIを内包。両プランがあるカードのみ
   共通 min-height を持たせ、切替時に価格・CTA・カード外枠の高さを安定させる。
   過剰にしないため、無制限側の実高さ目安に合わせた控えめな値にする(要・実機微調整)。 */
.bloomy-cc-card__selectarea {
	width: 100% !important;
	box-sizing: border-box !important;
}
/* 容量チップと無制限UIを同じグリッドセルに重ね、「高い方の中身」でカード高さを決める。
   固定min-heightは使わず、非表示側は visibility:hidden(高さは保持・不可視・不可触)。
   ＝各カードが自分の“高い方”の高さになり、トグル切替でも高さは不変。 */
.bloomy-cc-card__selectarea.is-stable {
	display: grid !important;
	min-height: 0 !important;
}
.bloomy-cc-card__selectarea.is-stable > .bloomy-cc-card__chips,
.bloomy-cc-card__selectarea.is-stable > .bloomy-cc-card__daysel {
	grid-area: 1 / 1 !important;
	align-self: start !important;   /* セル高さに引き伸ばさない＝チップ/日数タグは自然な高さのまま(上寄せ) */
	min-width: 0 !important;
}
.bloomy-cc-card__selectarea.is-stable > .bloomy-cc-card__chips[hidden],
.bloomy-cc-card__selectarea.is-stable > .bloomy-cc-card__daysel[hidden] {
	display: flex !important;        /* [hidden]のdisplay:noneを上書きし、レイアウト(高さ)は残す */
	opacity: 0 !important;           /* 子の visibility:visible !important に打ち消されない確実な不可視化(切替時の重なり=2段階を防ぐ) */
	visibility: hidden !important;   /* 触れない・タブ順からも外す */
	pointer-events: none !important;
	transition: none !important;     /* フェードで一瞬両方見えるのを防ぐ(瞬時に切替) */
}

.bloomy-cc-card__daysel {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 16px 0 2px !important; /* 日数タグの上余白を容量チップ(margin-top:16px)と一致＝タブ切替で中身が上下にズレない */
	width: 100% !important;
	box-sizing: border-box !important;
}
.bloomy-cc-card__daysel[hidden] { display: none !important; }

/* 日数ショートカット：4列グリッド(8個=2行)。短いラベルでも揃う */
.bloomy-cc-card__daychips {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 6px !important;
	width: 100% !important;
}
.bloomy-cc-daychip {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	padding: 6px 4px !important;
	border-radius: 11px !important;
	border: 1px solid #e6ecf6 !important;             /* 未選択は少し柔らかい枠線 */
	background: #ffffff !important;
	color: #56688f !important;                         /* 未選択は少しグレーネイビー寄り */
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	cursor: pointer !important;
	transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}
.bloomy-cc-daychip:hover {
	border-color: #9fc4ff !important;
	background: #f6faff !important;
}
.bloomy-cc-daychip.is-active {
	border-color: var(--bloomy-blue, #0b67e8) !important;
	background: #eef5ff !important;
	color: var(--bloomy-blue, #0b67e8) !important;
	box-shadow: 0 0 0 1px var(--bloomy-blue, #0b67e8) inset !important;
}
/* 英語/スペイン語は "180 days" 等で文字が長いので、4列に自然に収まるよう少しだけ縮める */
html[lang="en"] .bloomy-cc-daychip,
html[lang="es"] .bloomy-cc-daychip {
	font-size: 12px !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
	letter-spacing: -0.02em !important;
}

/* − 数値 ＋ ＋ スライダー（淡ブルーの箱・常時表示） */
.bloomy-cc-card__daybox {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;                /* −/＋ と線の距離。無制限カードが高くなりすぎないよう少し詰める */
	padding: 5px 12px 5px !important;    /* 上下を詰めてdaybox全体を低く＝無制限カードを容量カードの高さに合わせる */
	border-radius: 16px !important;
	background: #f3f8ff !important;
	border: 0 !important;                /* 外側borderを削除(淡い背景＋角丸は維持・浮いて見えないように) */
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.bloomy-cc-card__daypick-row {
	display: grid !important;
	grid-template-columns: 32px minmax(0, 1fr) 32px !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 10px !important;  /* −/＋ボタンを左右それぞれ計10pxずつ内側に寄せる(中央の数字は中央のまま) */
}
.bloomy-cc-card__daypick-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 11px !important;
	border: 1.5px solid #d7e5fb !important;
	background: #ffffff !important;
	color: var(--bloomy-blue, #0b67e8) !important;
	font-size: 19px !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
.bloomy-cc-card__daypick-btn:hover {
	transform: translateY(-1px) !important;
	border-color: #9fc4ff !important;
	background: #f6faff !important;
}
/* 「−」の字形が少し下に見えるので、文字だけ1px上へ(ボタン箱はborder-boxで32pxのまま) */
.bloomy-cc-card__daypick-btn[data-cc-day-minus] {
	box-sizing: border-box !important;
	padding-bottom: 2px !important;
}
.bloomy-cc-card__daypick-value {
	display: flex !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 4px !important;
	min-width: 0 !important;
}
.bloomy-cc-card__daypick-input {
	appearance: textfield !important;
	-moz-appearance: textfield !important;
	width: 60px !important;
	max-width: 84px !important;
	height: 30px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--bloomy-navy, #10275d) !important;
	font-size: 19px !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	text-align: center !important;
	outline: none !important;
}
.bloomy-cc-card__daypick-input::-webkit-outer-spin-button,
.bloomy-cc-card__daypick-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
.bloomy-cc-card__daypick-unit {
	color: var(--bloomy-navy, #10275d) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}
.bloomy-cc-card__daypick-range {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	max-width: 100% !important;
	/* 見た目のトラックは5px(下のrunnable-track)のまま、入力要素の高さを24pxにして
	   上下の透明部分でタッチ判定を拡大。負マージンでエリア全体の高さは増やさない。 */
	height: 24px !important;
	margin: -9px 0 -8px !important;
	background: transparent !important;
	border: none !important;          /* 入力要素の既定borderを消す＝スライダー周りの黒い四角枠を解消 */
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.bloomy-cc-card__daypick-range:focus { outline: none !important; box-shadow: none !important; }
.bloomy-cc-card__daypick-range::-webkit-slider-runnable-track {
	height: 5px !important;
	border-radius: 999px !important;
	background: #e3edfb !important;
}
.bloomy-cc-card__daypick-range::-moz-range-track {
	height: 5px !important;
	border-radius: 999px !important;
	background: #e3edfb !important;
}
.bloomy-cc-card__daypick-range::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--bloomy-blue, #0b67e8) !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(11, 103, 232, .35) !important;
	cursor: pointer !important;
	margin-top: -6.5px !important;   /* 5pxトラックに対し18pxサムを中心化 */
}
.bloomy-cc-card__daypick-range::-moz-range-thumb {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--bloomy-blue, #0b67e8) !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(11, 103, 232, .35) !important;
	cursor: pointer !important;
}
@media (prefers-reduced-motion: reduce) {
	.bloomy-cc-daychip,
	.bloomy-cc-card__daypick-btn { transition: none !important; }
}

/* =========================================================
   専用モバイルボトムシート(.bloomy-cmsheet) — TOPシート相当の見た目。比較ページのみ。
   デスクトップ(>900px)では非表示。モバイルで下から出る(.is-open)。検索バーは開時にJSで移設。
========================================================= */
.bloomy-cmsheet { display: none; }

@media (max-width: 900px) {
	.bloomy-cmsheet {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.22s ease, visibility 0.22s ease;
	}
	.bloomy-cmsheet.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.bloomy-cmsheet__overlay {
		position: absolute;
		inset: 0;
		background: rgba(8, 24, 54, 0.54);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
	.bloomy-cmsheet__sheet {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		height: 90dvh;
		max-height: 90dvh;
		overflow: hidden;
		border-radius: 32px 32px 0 0;
		background: #fff;
		box-shadow: 0 -24px 54px rgba(7, 22, 63, 0.20);
		transform: translateY(102%);
		transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.24, 1);
	}
	.bloomy-cmsheet.is-open .bloomy-cmsheet__sheet {
		transform: translateY(0);
	}
	.bloomy-cmsheet__handle {
		position: absolute;
		top: 12px;
		left: 50%;
		z-index: 4;
		width: 54px;
		height: 5px;
		border-radius: 999px;
		background: #aeb7c7;
		transform: translateX(-50%);
	}
	.bloomy-cmsheet__close {
		position: absolute;
		top: 22px;
		right: 22px;
		z-index: 5;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 999px;
		background: #f2f5fb;
		color: #7d88a0;
		font-size: 30px;
		line-height: 1;
		font-weight: 350;
		cursor: pointer;
	}
	.bloomy-cmsheet__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* 下padは絶対配置フッター(__action)の裏に最後のチップが隠れない高さを確保 */
		padding: 58px 22px 150px;
	}
	/* TOPシート(.bloomy-top-filter-head__title 等)と文字の色/太さ/字間を一致させる。
	   旧値: 色#0d1b3e・タイトル800字間なし・lead750・人気見出し15px — TOPと食い違っていた。 */
	.bloomy-cmsheet__title {
		margin: 0;
		color: #07163f;
		font-size: 22px;
		line-height: 1.25;
		font-weight: 700; /* 軽い方が正解(ブランド指針: 見出しは最大800)。TOPもこの軽さに揃える。 */
		letter-spacing: -0.04em;
	}
	.bloomy-cmsheet__lead {
		margin: 8px 0 0;
		color: #52617f;
		font-size: 13px;
		line-height: 1.55;
		font-weight: 700;
	}
	.bloomy-cmsheet__search-slot { margin: 18px 0 0; }
	.bloomy-cmsheet__popular { margin: 22px 0 0; }
	.bloomy-cmsheet__popular-title {
		margin: 0 0 12px;
		color: #07163f;
		font-size: 14px;
		line-height: 1.35;
		font-weight: 800;
		letter-spacing: -0.035em;
	}
	.bloomy-cmsheet__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;            /* TOPモバイル(7001)と同じ密度＝1行4チップが収まる(旧10px 12pxは3列) */
	}
	.bloomy-cmsheet__action {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 6;
		padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.985);
		border-top: 1px solid #dfe8f6;
		box-shadow: 0 -10px 24px rgba(15, 45, 90, 0.07);
	}
	.bloomy-cmsheet__summary {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 14px;
		margin: 0 0 10px;
	}
	.bloomy-cmsheet__count { margin: 0; color: #0d1b3e; font-size: 14px; font-weight: 700; }
	.bloomy-cmsheet__count span { color: #1f6fff; font-size: 18px; font-weight: 800; }
	.bloomy-cmsheet__price { margin: 0; display: inline-flex; align-items: baseline; gap: 5px; }
	.bloomy-cmsheet__price-label { color: #7a8aa6; font-size: 12px; font-weight: 700; }
	.bloomy-cmsheet__price-main { color: #1f6fff; font-size: 15px; font-weight: 800; }
	.bloomy-cmsheet__cta {
		display: block;
		width: 100%;
		min-height: 52px;
		border: 0;
		border-radius: 14px;
		background: linear-gradient(180deg, #0b67e8 0%, #0758ce 100%);
		color: #fff;
		font-size: 16px;
		font-weight: 800;
		cursor: pointer;
	}
	/* 移設してくる検索バーの iOS 入力ズーム対策 */
	.bloomy-cmsheet .bloomy-top-searchbar__input,
	.bloomy-cmsheet .bloomy-top-searchbar__placeholder { font-size: 16px; }
}

/* シートを開いている間は背面をスクロールさせない */
body.bloomy-cmsheet-open { overflow: hidden; }

/* =========================================================
   専用シート内の検索バー/チップ/人気チップ/サマリを TOP と同一の見た目に複製。
   (比較ページは top.css 未読込のため、TOPの該当スタイルを .bloomy-cmsheet スコープで再現)
========================================================= */
@media (max-width: 900px) {
	/* 検索バー本体(移設) */
	.bloomy-cmsheet .bloomy-top-searchbar {
		position: relative;
		display: flex;
		align-items: center;
		align-content: flex-start;
		flex-wrap: wrap;
		gap: 8px;
		min-height: 46px;
		padding: 7px 16px 7px 43px;
		border-radius: 13px;
		background: #fff;
		border: 1.5px solid #c7d6f0;
	}
	.bloomy-cmsheet .bloomy-top-searchbar:focus-within {
		border-color: #1d6be8;
		box-shadow: 0 0 0 4px rgba(29, 107, 232, 0.08);
	}
	.bloomy-cmsheet .bloomy-top-searchbar::before {
		content: "⌕";
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-52%);
		color: #7586aa;
		font-size: 22px;
		line-height: 1;
		font-weight: 700;
		pointer-events: none;
	}
	.bloomy-cmsheet .bloomy-top-searchbar__chips { display: contents; }
	.bloomy-cmsheet .bloomy-top-searchbar__input {
		flex: 1 1 140px;
		min-width: 110px;
		border: 0;
		outline: 0;
		background: transparent;
		font-size: 16px;
		color: #12234f;
		padding: 4px 0;
	}
	.bloomy-cmsheet .bloomy-top-searchbar__placeholder { color: #97a4bd; font-size: 16px; left: 43px; }
	/* 選択チップ(水色ピル) */
	.bloomy-cmsheet .bloomy-top-selected-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 30px;
		padding: 0 11px;
		border: 0;
		border-radius: 999px;
		background: #eef4ff;
		color: #3f6ad0;
		font-size: 12.5px;
		font-weight: 700;
		cursor: pointer;
	}
	.bloomy-cmsheet .bloomy-top-selected-chip__emoji { font-size: 16px; line-height: 1; }
	.bloomy-cmsheet .bloomy-top-selected-chip__remove { font-size: 17px; line-height: 1; color: #2171f5; }
	/* 人気の渡航先チップ(TOPモバイル7001と同寸: 33px/padding0 10px/font12px/gap5px) */
	.bloomy-cmsheet .bloomy-top-chip-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		min-height: 33px;
		padding: 0 10px;
		border-radius: 10px;
		border: 1px solid #dbe5f4;
		background: #fff;
		color: #12234f;
		font-size: 12px;
		line-height: 1;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
		flex: 0 0 auto;
		box-shadow: 0 4px 10px rgba(41, 72, 130, 0.035);
	}
	.bloomy-cmsheet .bloomy-top-chip-button.is-selected {
		border-color: #75a6ff;
		background: #eef5ff;
		color: #135bd5;
	}
	.bloomy-cmsheet .bloomy-top-chip-button__emoji { font-size: 16px; line-height: 1; }
	/* 下部サマリ 枠カード(候補数 / 最安) */
	.bloomy-cmsheet__summary {
		display: flex;
		align-items: stretch;
		justify-content: center;
		gap: 4px;
		margin: 0 0 12px;
		padding: 9px 12px;
		background: #f4f8ff;
		border: 1px solid #e3edfb;
		border-radius: 14px;
	}
	.bloomy-cmsheet__sumcell {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}
	.bloomy-cmsheet__sumlabel { color: #7a8aa6; font-size: 11px; font-weight: 700; }
	.bloomy-cmsheet__sumvalue { color: #1574f5; font-size: 21px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
	.bloomy-cmsheet__sumsep { width: 1px; align-self: center; height: 26px; background: #d7e2f4; }
}

/* =========================================================
   比較ページ既存の .bloomy-list-page !important ルールに勝つため、
   cmsheet内は 3クラス特異性 + !important で TOP寸法を強制する。
========================================================= */
@media (max-width: 900px) {
	/* 人気チップ: TOPモバイル(7001)同寸=33px/padding0 10px/font12px/gap5px。比較の 32px/999px/13px !important を上書き */
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-chip-button,
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-area-button {
		min-height: 33px !important;
		height: auto !important;
		padding: 0 10px !important;
		gap: 5px !important;
		border-radius: 10px !important;
		border: 1px solid #dbe5f4 !important;
		background: #fff !important;
		color: #12234f !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		box-shadow: 0 4px 10px rgba(41, 72, 130, 0.035) !important;
	}
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-chip-button.is-selected {
		border-color: #75a6ff !important;
		background: #eef5ff !important;
		color: #135bd5 !important;
	}
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-chip-button__emoji { font-size: 16px !important; }
	/* 選択チップ(水色ピル) — TOP同寸 */
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-selected-chip {
		min-height: 30px !important;
		padding: 0 11px !important;
		gap: 8px !important;
		border-radius: 999px !important;
		border: 0 !important;
		background: #eef4ff !important;
		color: #3f6ad0 !important;
		font-size: 12.5px !important;
		font-weight: 700 !important;
	}
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-selected-chip__emoji { font-size: 16px !important; }
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-selected-chip__remove { font-size: 17px !important; color: #2171f5 !important; }
	/* 検索バー: TOP寸(46px/角丸13px) + ⌕アイコン(比較の content:none !important を上書き) */
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-searchbar {
		min-height: 46px !important;
		padding: 7px 16px 7px 43px !important;
		border-radius: 13px !important;
		border: 1.5px solid #c7d6f0 !important;
		box-shadow: none !important;
	}
	.bloomy-list-page .bloomy-cmsheet .bloomy-top-searchbar::before {
		content: "⌕" !important;
		display: block !important;
		position: absolute !important;
		left: 16px !important;
		top: 50% !important;
		transform: translateY(-52%) !important;
		color: #7586aa !important;
		font-size: 22px !important;
		font-weight: 700 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 900px) {
	/* ハンドル: 見た目は小さく(40×4)、実タッチエリアは広く(120×44)。掴みやすさ向上 */
	.bloomy-cmsheet__handle {
		top: 12px !important;
		width: 48px !important;
		height: 5px !important;
		background: #c4cedd !important;
		border-radius: 999px !important;
		cursor: grab;
	}
	.bloomy-cmsheet__handle::after,
	.bloomy-cmsheet__handle::before {
		content: none !important;
		display: none !important;
	}
	/* 引き下げ追従を滑らかに / 背景への스크롤連鎖を抑止 */
	.bloomy-cmsheet__sheet { will-change: transform; }
	.bloomy-cmsheet__scroll { overscroll-behavior: contain; }
}

/* =========================================================
   単一国プランカード(モバイル)の縦調整 — 目的優先(28px paddingは使わない)。
   縦長感の軽減＋容量/無制限の高さをできるだけ揃える＋スライダーを掴みやすく。
   .bloomy-cc-card--single + @media(max-width:900px) にスコープ＝周遊/PC/固定バー非影響。
   ========================================================= */
@media (max-width: 900px) {
	.bloomy-cc-card--single .bloomy-cc-card__selectarea.is-stable { min-height: 0 !important; } /* グリッド重ねで高い方の中身で高さが決まる(固定floor不要) */
	.bloomy-cc-card--single .bloomy-cc-card__daysel { gap: 8px !important; margin: 16px 0 2px !important; }
	.bloomy-cc-card--single .bloomy-cc-card__daychips { gap: 5px !important; }
	.bloomy-cc-card--single .bloomy-cc-daychip { min-height: 36px !important; }
	/* スライダー(daybox/daypick)の調整は base 側で全カード共通に行う(--single限定にしない)。 */
	.bloomy-cc-card--single { padding-top: 16px !important; padding-bottom: 14px !important; }
	.bloomy-cc-card--single .bloomy-cc-card__foot { padding-top: 11px !important; }
}

/* 「一部を含む(some)」カードは高さ安定(案A min-height)を外し、中身でカード高さを決める。
   ＝他カテゴリのように内容で自然な高さに。--some 限定・モバイルのみ・PC非影響。
   注: 容量/無制限の両方を持つカードは切替で高さが変わり得る(トグル高さ固定はしない)。 */
@media (max-width: 900px) {
	.bloomy-cc-card--some .bloomy-cc-card__selectarea.is-stable { min-height: 0 !important; }
}