@charset "UTF-8";
/*
 * FIND YOUR CASE (src/pages/find-your-case/index.astro). Scoped to body.cf: other pages keep their look.
 * Black, white and grey, like the top page (public/css/home.css). Phone first; two columns from 768px.
 * Spacing: 4 / 8 / 16 / 24 / 40 / 64 px. Tap targets 56px or more.
 */
body.cf {
	--cf-ink: #111;
	--cf-sub: #707070;
	--cf-line: #e3e3e3;
	--cf-soft: #f4f4f3;
	--cf-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background: #fff;
}
body.cf .cf-main {
	max-width: 1080px; margin: 0 auto; padding: 0 16px 80px; box-sizing: border-box;
	font-family: var(--cf-font); letter-spacing: .04em; color: var(--cf-ink); line-height: 1.8;
}
body.cf .cf-main * { box-sizing: border-box; }
body.cf .cf-main h1, body.cf .cf-main h2, body.cf .cf-main h3 {
	margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: var(--cf-font); font-weight: 400; text-align: left;
}
body.cf .cf-main h1:before, body.cf .cf-main h1:after, body.cf .cf-main h2:before, body.cf .cf-main h2:after,
body.cf .cf-main h3:before, body.cf .cf-main h3:after { content: none; }
body.cf .cf-main p { margin: 0; }
body.cf .cf-main ul, body.cf .cf-main ol { margin: 0; padding: 0; list-style: none; }
body.cf .cf-main img { max-width: 100%; height: auto; }
body.cf .cf-main a { color: var(--cf-ink); text-decoration: none; }
body.cf .cf-main a:hover { opacity: 1; }
body.cf .cf-main section { margin: 0; padding: 0; }
body.cf .cf-main [hidden] { display: none !important; }

.cf-eyebrow { font-size: 10px; letter-spacing: .32em; color: var(--cf-sub); }

/* ---- buttons ---- */
body.cf .cf-btn {
	-webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 28px; border: 1px solid var(--cf-ink); border-radius: 0; background: #fff; color: var(--cf-ink);
	font: inherit; font-size: 12px; letter-spacing: .24em; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
body.cf .cf-btn-dark { background: var(--cf-ink); color: #fff; }
body.cf .cf-btn-dark:hover { background: #333; }
body.cf .cf-btn-outline:hover { background: var(--cf-soft); }
body.cf .cf-btn-light { background: #fff; color: var(--cf-ink); border-color: #fff; }
body.cf .cf-btn-light:hover { background: #e9e9e9; }
body.cf .cf-btn:disabled { opacity: .3; cursor: default; }
body.cf .cf-btn:focus-visible, body.cf .cf-opt:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }

/* ---- ① intro: the photo of the cases (fills its square), the copy on black ---- */
body.cf .cf-intro { margin: 0 -16px; background: #0c0c0c; color: #fff; }
.cf-intro-photo { background: #e6e4e1; aspect-ratio: 1 / 1; overflow: hidden; }
body.cf .cf-main .cf-intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-intro-body { padding: 40px 24px 48px; text-align: center; }
.cf-intro .cf-eyebrow { color: #9a9a9a; }
body.cf .cf-main .cf-title { margin: 16px 0 0; font-size: 30px; letter-spacing: .2em; line-height: 1.3; text-align: center; font-weight: 300; }
.cf-lead { margin: 12px 0 0 !important; font-size: 14px; letter-spacing: .16em; }
.cf-text { margin: 24px auto 0 !important; max-width: 30em; font-size: 12px; line-height: 2.1; color: #c9c9c9; text-align: left; }
.cf-steps { display: flex; justify-content: center; gap: 0; margin: 32px 0 0 !important; }
.cf-steps li { position: relative; padding: 0 10px; font-size: 9px; letter-spacing: .2em; color: #8d8d8d; }
.cf-steps li + li:before { content: ''; position: absolute; left: -3px; top: 50%; width: 6px; height: 1px; background: #555; }
.cf-start-wrap { margin: 32px 0 0 !important; }
.cf-start-wrap .cf-btn { min-width: 240px; }
.cf-note { margin: 16px 0 0 !important; font-size: 12px; color: #c9c9c9; }
.cf-note a { color: inherit !important; text-decoration: underline !important; }

/* ---- ② / ③ questions ---- */
body.cf .cf-question { max-width: 960px; margin: 0 auto; padding-top: 24px; }
.cf-progress { display: flex; align-items: center; gap: 16px; }
.cf-progress-count { font-size: 12px; letter-spacing: .2em; min-width: 3.2em; }
.cf-progress-bar { flex: 1; height: 2px; background: var(--cf-line); }
.cf-progress-bar span { display: block; height: 100%; background: var(--cf-ink); transition: width .25s ease; }
.cf-q-head { margin: 32px 0 24px; text-align: center; }
.cf-q-no { font-size: 11px; letter-spacing: .32em; color: var(--cf-sub); }
body.cf .cf-main .cf-q-title { margin: 8px 0 0; font-size: 20px; letter-spacing: .1em; line-height: 1.5; text-align: center; }
.cf-q-hint { margin: 8px 0 0 !important; font-size: 11px; color: var(--cf-sub); }

.cf-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cf-options-colors, .cf-options-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.cf .cf-opt {
	-webkit-appearance: none; appearance: none; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
	margin: 0; padding: 12px 16px; border: 1px solid var(--cf-line); border-radius: 0; background: #fff; color: var(--cf-ink);
	font: inherit; font-size: 14px; letter-spacing: .06em; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
body.cf .cf-opt:hover { border-color: #9a9a9a; }
body.cf .cf-opt[aria-pressed="true"] { border-color: var(--cf-ink); background: var(--cf-ink); color: #fff; }
body.cf .cf-opt:disabled { cursor: default; color: #b5b5b5; background: #fafafa; border-color: var(--cf-line); }
.cf-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-opt-label { font-size: 14px; line-height: 1.5; }
.cf-opt-note { margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--cf-sub); }
.cf-opt[aria-pressed="true"] .cf-opt-note, .cf-opt[aria-pressed="true"] .cf-opt-count { color: #bdbdbd; }
.cf-opt-count { margin-top: 2px; font-size: 10px; letter-spacing: .08em; line-height: 1.5; color: var(--cf-sub); }
.cf-swatch { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.cf-opt[aria-pressed="true"] .cf-swatch { box-shadow: 0 0 0 2px #fff; }
.cf-options-colors .cf-opt { padding: 12px; gap: 10px; }
.cf-options-colors .cf-opt-label { font-size: 13px; }

/* "該当商品 ○件" and the candidates: square photos with the official name underneath; 2 columns on phones, 4 on PC */
.cf-hit { margin: 32px 0 16px !important; padding: 0 0 10px; border-bottom: 1px solid var(--cf-ink); font-size: 13px; letter-spacing: .12em; }
.cf-hit-none { color: #8a1c1c; letter-spacing: .04em; }
.cf-hit-result { margin: 24px auto 0 !important; max-width: 720px; text-align: center; }
.cf-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; }
.cf-thumbs li { min-width: 0; }
/* 在庫切れ (2026-11-10): the photo stays as it is, a label on it and the name in grey */
.cf-thumb-img, .cf-card-photo { position: relative; }
.cf-soldout { position: absolute; left: 0; top: 0; padding: 4px 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; letter-spacing: .12em; line-height: 1.4; }
.cf-thumbs li.is-soldout .cf-thumb-name, .cf-thumbs li.is-soldout .cf-thumb-color { color: #8a8a8a; }
.cf-chips li.is-soldout { color: #8a8a8a; }
.cf-thumbs a { display: block; }
.cf-thumb-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; border: 1px solid #efefef; overflow: hidden; }
body.cf .cf-main .cf-thumb-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
body.cf .cf-main .cf-thumbs a:hover img { opacity: .8; }
.cf-noimg { font-size: 10px; letter-spacing: .2em; color: #b0b0b0; }
.cf-thumb-name { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; }
.cf-thumb-color { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .08em; color: var(--cf-sub); text-align: center; }

/* back / next stay at the bottom of the screen on phones while the options scroll */
/* 戻る / 次へ: right under the options, above the count and the thumbnails */
.cf-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; margin: 24px 0 0; }
.cf-nav .cf-btn { width: 100%; padding: 0 8px; }

/* ---- ④ results ---- */
body.cf .cf-result { padding-top: 32px; }
.cf-result-head { text-align: center; }
body.cf .cf-main .cf-result-title { margin: 8px 0 0; font-size: 19px; letter-spacing: .1em; line-height: 1.5; text-align: center; }
.cf-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0 0 !important; }
.cf-summary li { padding: 5px 10px; background: var(--cf-soft); font-size: 11px; line-height: 1.6; }
.cf-summary-q { margin-right: 6px; color: var(--cf-sub); }
.cf-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 32px 0 0 !important; }
.cf-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 0 0 16px; border-bottom: 1px solid var(--cf-line); }
.cf-card-photo { display: block; align-self: start; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; border: 1px solid #f0f0f0; }
.cf-card-photo img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.15); }
.cf-card-rank { font-size: 10px; letter-spacing: .24em; color: var(--cf-sub); }
body.cf .cf-main .cf-card-name { margin: 2px 0 0; font-size: 15px; letter-spacing: .08em; line-height: 1.5; overflow-wrap: anywhere; }
.cf-card-price { margin: 4px 0 0 !important; font-size: 13px; }
.cf-reason { margin: 10px 0 0 !important; font-size: 12px; line-height: 1.8; }
.cf-diff { margin: 10px 0 0 !important; padding: 8px 10px; background: var(--cf-soft); font-size: 11px; line-height: 1.7; }
.cf-diff strong { display: block; font-weight: 600; letter-spacing: .08em; }
.cf-facts { margin: 6px 0 0 !important; font-size: 11px; line-height: 1.7; color: var(--cf-sub); }
.cf-chips-title { margin: 12px 0 0 !important; font-size: 10px; letter-spacing: .14em; color: var(--cf-sub); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0 !important; }
.cf-chips li { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .06em; }
.cf-chips img { display: block; width: 32px; height: 32px; object-fit: cover; border: 1px solid var(--cf-line); background: #fff; }
.cf-chips .cf-more { color: var(--cf-sub); }
.cf-card-link { margin: 14px 0 0 !important; }
body.cf .cf-card-link a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--cf-ink);
	font-size: 11px; letter-spacing: .2em; transition: background .2s, color .2s;
}
body.cf .cf-card-link a:hover { background: var(--cf-ink); color: #fff; }
.cf-partial-head { margin: 40px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cf-ink); }
body.cf .cf-main .cf-partial-head h3 { font-size: 13px; letter-spacing: .08em; line-height: 1.7; text-align: center; }
.cf-empty { margin: 40px 0 0 !important; font-size: 13px; text-align: center; }
.cf-result-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 40px 0 0; }
.cf-foot-note { margin: 24px 0 0 !important; font-size: 11px; color: var(--cf-sub); text-align: center; }
.cf-all { margin: 16px 0 0 !important; text-align: center; font-size: 12px; }
body.cf .cf-all a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #bbb; }

/* ---- tablet / PC ---- */
@media screen and (min-width: 768px) {
	body.cf .cf-main { padding: 0 40px 112px; }
	body.cf .cf-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; min-height: 520px; }
	.cf-intro-photo { aspect-ratio: 1 / 1; }
	.cf-intro-body { display: flex; flex-direction: column; justify-content: center; padding: 56px 56px; text-align: left; }
	body.cf .cf-main .cf-title { font-size: 40px; text-align: left; }
	.cf-text { margin-left: 0 !important; }
	.cf-steps { justify-content: flex-start; }
	.cf-steps li:first-child { padding-left: 0; }
	body.cf .cf-question { padding-top: 48px; }
	.cf-q-head { margin: 48px 0 32px; }
	body.cf .cf-main .cf-q-title { font-size: 24px; }
	.cf-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cf-options-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cf-options-sets, .cf-options-type, .cf-options-size { grid-template-columns: minmax(0, 1fr); }
	.cf-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
	.cf-thumb-name { font-size: 12px; }
	.cf-nav { margin: 32px 0 0; grid-template-columns: 200px 1fr; }
	body.cf .cf-result { padding-top: 48px; }
	body.cf .cf-main .cf-result-title { font-size: 24px; }
	.cf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
	.cf-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; border: 0; align-content: start; }
	.cf-card-photo img { transform: scale(1.1); }
	.cf-result-nav { grid-template-columns: repeat(2, 260px); justify-content: center; gap: 16px; margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
	.cf-progress-bar span { transition: none; }
}