/**
 * Studio-Navi 比較トレイ(B-4・§6-2(3))の見た目。
 *  - ロジックは sn-compare.js。ここは「比較に追加」ボタン・下部固定バー・トースト・チップの見た目だけ。
 *  - 見た目の作り込みは後のデザインパスで再調整可(まずは機能が伝わる最小の上質さ)。
 *  - 配色はサイトのアクセント(深い青緑)に寄せる。♡(赤)とは別系統で「比較=情報整理」を示す。
 */

:root {
	--sn-compare-accent: #1f6f78; /* 比較の識別色(深い青緑) */
}

/* =========================================================
 * 1) 「比較に追加」ボタン
 * ========================================================= */
.sn-compare-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #555;
	line-height: 1;
	padding: 0;
}
.sn-compare-btn__ico-wrap {
	display: inline-flex;
}
.sn-compare-btn svg {
	transition: transform 0.1s ease;
}
.sn-compare-btn:active svg {
	transform: scale(0.85);
}

/* カード上の丸ボタン(サムネ左上=♡は右上なので重ならない) */
.sn-compare-btn--card {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	color: #555;
}
.sn-compare-btn--card:hover {
	background: #fff;
}
.sn-compare-btn--card.is-in {
	background: var(--sn-compare-accent);
	color: #fff;
}

/* 詳細ページのラベル付きボタン。オーナーFB(2026-07-13)=他のCTAボタン(.sn-cta__btn)と同サイズ・全幅。 */
.sn-compare-btn--cta {
	width: 100%;
	gap: 10px;
	padding: 17px 22px;            /* .sn-cta__btn と同じ縦横 */
	border-radius: 999px;          /* ピル形 */
	border: 1.5px solid var(--sn-compare-accent);
	background: #fff;
	color: var(--sn-compare-accent);
	font-weight: 700;
	font-size: 15.5px;             /* .sn-cta__btn と同じ */
	letter-spacing: .02em;
	box-sizing: border-box;
	margin-bottom: 10px;          /* 下のお気に入りボタンとの間隔(.sn-cta__btns の gap と同じ) */
}
.sn-compare-btn--cta:hover {
	background: rgba(31, 111, 120, 0.06);
}
.sn-compare-btn--cta.is-in {
	background: var(--sn-compare-accent);
	color: #fff;
}

/* =========================================================
 * 2) 下部固定バー
 * ========================================================= */
.sn-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: #fff;
	border-top: 1px solid #e3e3e3;
	box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.10);
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
.sn-compare-bar[hidden] {
	display: none;
}

/* SWELLの「上に戻る」ボタン(#pagetop)が比較バーの裏に隠れる問題への対応。
   比較バー表示中はJS(sn-compare.js)が --sn-compare-bar-h にバーの実測高さを入れる。
   SWELL本体のbottom指定(1.25em/64px/2.5em等)より確実に上へ出すため !important で上書き。 */
body.sn-has-compare-bar .p-fixBtnWrap {
	bottom: calc(var(--sn-compare-bar-h, 0px) + 12px) !important;
}

/* 比較バーがフッター最下部(会社概要などのリンク行)に重なる問題への対応。
   バーは画面下に固定のため、最下部までスクロールするとフッターに被る。
   比較バー表示中だけフッターに「バーの高さ分」の下余白を足し、
   中身をバーの上へ押し上げる(フッター自身の余白なので背景の隙間も出ない)。 */
body.sn-has-compare-bar .l-footer {
	padding-bottom: var(--sn-compare-bar-h, 0px);
}
.sn-compare-bar__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.sn-compare-bar__label {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 0.9rem;
	color: #333;
}
.sn-compare-bar__items {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
}
.sn-compare-bar__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.sn-compare-bar__count {
	font-size: 0.85rem;
	color: #666;
	white-space: nowrap;
}
.sn-compare-bar__go {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--sn-compare-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.sn-compare-bar__go:hover {
	background: #185860;
}

/* チップ(バー内の1スタジオ) */
.sn-compare-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	padding: 4px 8px 4px 4px;
	border: 1px solid #e3e3e3;
	border-radius: 999px;
	background: #fafafa;
}
.sn-compare-chip__thumb {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: #e9e9e9;
	flex: 0 0 auto;
}
.sn-compare-chip__thumb--empty {
	background-color: #e9e9e9;
}
.sn-compare-chip__name {
	flex: 0 1 auto;
	min-width: 0;               /* 省略記号(…)を効かせるために必須 */
	font-size: 0.82rem;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sn-compare-chip__remove {
	flex: 0 0 auto;
	display: inline-flex;      /* ×を上下左右きっちり中央に(line-height依存をやめる) */
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ddd;
	color: #444;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.sn-compare-chip__remove:hover {
	background: #cbcbcb;
}

/* スマホ: バーを2段に */
@media (max-width: 600px) {
	.sn-compare-bar__inner {
		flex-wrap: wrap;
	}
	.sn-compare-bar__label {
		display: none;
	}
	.sn-compare-bar__items {
		order: 2;
		width: 100%;
	}
	.sn-compare-bar__actions {
		order: 1;
		width: 100%;
		justify-content: space-between;
	}
	.sn-compare-bar__go {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* =========================================================
 * 3) トースト(上限超過などの案内)
 * ========================================================= */
.sn-compare-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%) translateY(10px);
	z-index: 9500;
	max-width: 90vw;
	padding: 12px 18px;
	border-radius: 10px;
	background: rgba(30, 30, 30, 0.94);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.5;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.sn-compare-toast.is-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================
 * 4) 比較画面(/compare/)
 * ========================================================= */
.sn-compare-page {
	padding: 28px 16px 120px; /* 下部バーに隠れないよう余白を広めに */
}
.sn-compare-page__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.sn-compare-page__head {
	margin-bottom: 18px;
}
.sn-compare-page__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 6px;
}
.sn-compare-page__lead {
	color: #555;
	font-size: 0.95rem;
	margin: 0;
}
.sn-compare-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f4f4f4;
	color: #444;
	font-size: 0.9rem;
}
.sn-compare-notice--ok {
	background: #e6f4ec;
	color: #1c6b40;
}
.sn-compare-empty {
	padding: 40px 20px;
	text-align: center;
	color: #555;
	line-height: 1.9;
}
.sn-compare-page__browse,
.sn-compare-empty .sn-compare-page__browse {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--sn-compare-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}

/* 表(横スクロール・1列目=項目名は左固定) */
.sn-compare-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
}
.sn-compare-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 520px;
	/* fixed=列幅を「1行目(thead)の指定幅」だけで決める。
	   セルの文字量では列が広がらない → 全スタジオ列が常に同じ幅=画像も同じ大きさ */
	table-layout: fixed;
}
.sn-compare-table th,
.sn-compare-table td {
	border-bottom: 1px solid #eee;
	border-right: 1px solid #f0f0f0;
	padding: 12px 14px;
	vertical-align: top;
	text-align: left;
	overflow-wrap: break-word; /* fixedで長い文字列がセルからはみ出さないよう折り返す保険 */
}
.sn-compare-table thead th {
	background: #fafafa;
	border-bottom: 2px solid #e6e6e6;
	position: sticky;
	top: 0;
	z-index: 1;
}
.sn-compare-table__axis-h,
.sn-compare-table__axis {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #fafafa;
	font-weight: 700;
	white-space: nowrap;
	min-width: 92px;
}
.sn-compare-table thead .sn-compare-table__axis-h {
	z-index: 3;
	/* fixedではmin-widthが列幅に効かないためwidthで明示。「写真の鮮度」が1行で収まる幅 */
	width: 118px;
}
/* (A) スタジオ列ヘッダ:画像をバナー状に大きく(2026-07-13リッチ化・Fable設計) */
.sn-compare-table__studio {
	/* 全列同一の固定幅。件数(2〜10)が増えたら表全体が横に伸びてスクロール。
	   件数が少なく余白が出る時は余りが各列へ均等配分され、その場合も全列同一のまま */
	width: 240px;
}
.sn-compare-studio {
	display: flex;
	flex-direction: column;   /* 画像(上)→ 名前(下)の縦積み */
	align-items: stretch;
	gap: 8px;
	text-decoration: none;
	color: #222;
}
.sn-compare-studio__thumb {
	display: block;
	width: 100%;
	height: 141px;                    /* aspect-ratio非対応ブラウザ用の保険((240-28)×2/3) */
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: #ececec;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); /* 白っぽい写真でも輪郭が出る */
}
@supports (aspect-ratio: 3 / 2) {
	.sn-compare-studio__thumb {
		height: auto;
		aspect-ratio: 3 / 2;          /* sn_card(320×214)とほぼ同比率=列幅に追従 */
	}
}
/* 写真なしの列:単なる灰色ではなく「未登録」と分かる控えめな表現 */
.sn-compare-studio__thumb--empty {
	background: linear-gradient(135deg, #f3f3f3, #e7e7e7);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sn-compare-studio__thumb--empty::after {
	content: "No Photo";
	font-size: 0.78rem;
	color: #ababab;
	letter-spacing: 0.08em;
}
.sn-compare-studio__name {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;             /* 長い名前は2行で省略(列高さを暴れさせない) */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sn-compare-studio:hover .sn-compare-studio__name {
	color: var(--sn-compare-accent);  /* リンクであることをさりげなく示す */
}

/* 表全体の質感:PDFのトーンに寄せる(枠の影+ヘッダ下のアクセント線) */
.sn-compare-tablewrap {
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.sn-compare-table thead th {
	background: #fff;                                   /* ヘッダは白でクリーンに(項目列は既存の#fafafaが勝つ) */
	border-bottom: 2px solid rgba(31, 111, 120, 0.45); /* PDF風の細いアクセント下線 */
	padding-bottom: 14px;
}
/* 行ホバーで「いま見ている行」を淡く示す(◯×の色付きセルの方が強く残る) */
.sn-compare-table tbody tr:hover .sn-compare-cell {
	background-color: #fafcfc;
}
.sn-compare-cell__val {
	font-size: 0.9rem;
	color: #333;
	line-height: 1.5;
}

/* セルの ◯/× トグル */
.sn-compare-verdict {
	display: inline-flex;
	gap: 6px;
	margin-top: 8px;
}
.sn-cmp-vbtn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid #d5d5d5;
	background: #fff;
	color: #999;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sn-cmp-vbtn--good.is-active {
	border-color: #1c8a4e;
	background: #1c8a4e;
	color: #fff;
}
.sn-cmp-vbtn--concern.is-active {
	border-color: #c0392b;
	background: #c0392b;
	color: #fff;
}

/* (C) ◯×を付けたセルを淡く色付け(:has非対応ブラウザでは無色=実害なし・Fable設計) */
.sn-compare-cell {
	transition: background-color 0.18s ease;
}
.sn-compare-cell:has(.sn-cmp-vbtn--good.is-active) {
	background-color: #f1f8f3;   /* ◯=淡い緑(ボタンの#1c8a4e系の超淡色) */
}
.sn-compare-cell:has(.sn-cmp-vbtn--concern.is-active) {
	background-color: #fbf2f0;   /* ×=淡い赤(#c0392b系の超淡色) */
}

/* メモ保存フォーム / 非会員CTA */
.sn-compare-memo,
.sn-compare-guest {
	margin-top: 24px;
	padding: 20px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #fff;
}
.sn-compare-memo__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 4px;
}
.sn-compare-memo__hint {
	color: #666;
	font-size: 0.85rem;
	margin: 0 0 14px;
}
.sn-compare-memo__label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 12px 0 6px;
}
.sn-compare-memo input[type="text"],
.sn-compare-memo textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	font-size: 0.95rem;
	box-sizing: border-box;
}
.sn-compare-memo__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.sn-compare-memo__note {
	color: #888;
	font-size: 0.82rem;
}
.sn-compare-btn-save {
	display: inline-block;
	padding: 12px 28px;
	border: none;
	border-radius: 999px;
	background: var(--sn-compare-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
}
.sn-compare-btn-save:hover {
	background: #185860;
}
.sn-compare-btn-pdf {
	display: inline-block;
	padding: 12px 26px;
	border: 1.5px solid var(--sn-compare-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--sn-compare-accent);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}
.sn-compare-btn-pdf:hover {
	background: rgba(31, 111, 120, 0.06);
}
.sn-compare-guest p {
	margin: 0 0 12px;
	color: #444;
}

/* =========================================================
 * 5) マイページの比較メモ一覧
 * ========================================================= */
.sn-memo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sn-memo-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 4px;
	border-bottom: 1px solid #eee;
}
.sn-memo-item__title {
	font-weight: 700;
	color: #222;
	text-decoration: none;
}
.sn-memo-item__title:hover {
	text-decoration: underline;
}
.sn-memo-item__meta {
	display: block;
	font-size: 0.82rem;
	color: #888;
	margin-top: 2px;
}
.sn-memo-item__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sn-memo-item__btn {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--sn-compare-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--sn-compare-accent);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.sn-memo-item__btn:hover {
	background: rgba(31, 111, 120, 0.06);
}
.sn-memo-item__btn--del {
	border-color: #c0392b;
	color: #c0392b;
}
.sn-memo-item__btn--del:hover {
	background: rgba(192, 57, 43, 0.06);
}
.sn-memo-logo {
	margin-bottom: 12px;
}
.sn-memo-logo img {
	max-height: 80px;
	width: auto;
}

/* =========================================================
 * 6) AI解説(この比較の見どころ)= 比較表の直下(Fable設計)
 *    順位に見えない工夫:番号なし・全カード同色・同サイズのグリッド
 * ========================================================= */
.sn-compare-ai {
	margin-top: 24px;
	padding: 22px 22px 20px;
	border: 1px solid #dbe7e8;
	border-radius: 12px;
	background: linear-gradient(180deg, #f5fafa 0%, #ffffff 72px); /* 上端だけ淡い青緑の気配 */
}
/* display:flex等を使う要素は hidden が効かなくなるため明示的に殺す(重要) */
.sn-compare-ai [hidden] {
	display: none !important;
}
.sn-compare-ai__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 1.1rem;
	font-weight: 700;
	color: #1c3f45;
}
.sn-compare-ai__icon {
	color: var(--sn-compare-accent);
	flex: 0 0 auto;
}
.sn-compare-ai__lead {
	margin: 0 0 16px;
	font-size: 0.88rem;
	color: #5a6b6d;
}

/* ① 初期:ボタン */
.sn-compare-ai__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border: none;
	border-radius: 999px;
	background: var(--sn-compare-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}
.sn-compare-ai__btn:hover {
	background: #185860;
}
.sn-compare-ai__btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ② 生成中 */
.sn-compare-ai__loading {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	color: #5a6b6d;
	font-size: 0.9rem;
}
.sn-compare-ai__loading-text {
	margin: 0;
}
.sn-compare-ai__spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(31, 111, 120, 0.18);
	border-top-color: var(--sn-compare-accent);
	animation: sn-cai-spin 0.8s linear infinite;
}
@keyframes sn-cai-spin {
	to { transform: rotate(360deg); }
}

/* ④ エラー */
.sn-compare-ai__error p {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: #8a4a42;
}
.sn-compare-ai__retry {
	display: inline-block;
	padding: 8px 20px;
	border: 1.5px solid var(--sn-compare-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--sn-compare-accent);
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
}
.sn-compare-ai__retry:hover {
	background: rgba(31, 111, 120, 0.06);
}

/* ⑤ 非会員CTA */
.sn-compare-ai__guest p {
	margin: 0 0 12px;
	color: #444;
	font-size: 0.92rem;
}
.sn-compare-ai__register {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--sn-compare-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}
.sn-compare-ai__register:hover {
	background: #185860;
}

/* ③ 表示後:サーバー返却HTML(.sn-cai__*)の飾り */
.sn-cai__overview {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.9;
	color: #333;
}
.sn-cai__fits {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 面で見せる=順序に意味を持たせない */
	gap: 10px;
}
.sn-cai__fit {
	padding: 12px 14px;
	border: 1px solid #e0ebeb;
	border-radius: 10px;
	background: #fff;
}
.sn-cai__fit-label {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(31, 111, 120, 0.08);  /* 全件同色=優劣なし */
	color: var(--sn-compare-accent);
	font-size: 0.8rem;
	font-weight: 700;
}
.sn-cai__fit-note {
	display: block;
	font-size: 0.88rem;
	line-height: 1.7;
	color: #444;
}
.sn-cai__disclaimer {
	margin: 0;
	padding-top: 12px;
	border-top: 1px dashed #d7e2e2;
	font-size: 0.78rem;
	line-height: 1.6;
	color: #8a9698;
}

/* スマホ(600px以下):列を細く・AIカードの余白を詰める */
@media (max-width: 600px) {
	.sn-compare-table__studio {
		width: 176px;       /* 固定幅・全列同一。画面に約2列が見え、横スクロールが伝わる */
	}
	.sn-compare-table thead .sn-compare-table__axis-h {
		width: 110px;       /* 「写真の鮮度」5文字+パディング28pxが収まる最小幅 */
	}
	.sn-compare-studio__thumb {
		height: 99px;       /* aspect-ratio非対応時の保険((176-28)×2/3) */
		border-radius: 8px;
	}
	.sn-compare-studio__name {
		font-size: 0.85rem;
	}
	.sn-compare-ai {
		padding: 16px 14px 14px;
	}
	.sn-cai__fits {
		grid-template-columns: 1fr;  /* 用途カードは1列に */
	}
}