/* CafeSeek v2 — 2026-09-05 正本は docs/DESIGN.md。**この CSS が DESIGN.md と食い違ったら DESIGN.md が勝つ。** 影ゼロ／グラデーションゼロ／背景画像ゼロ／赤ゼロ。段差は面の明度差と 1px の毛髪線だけ。 */ :root{ /* Colors — 旧サイトから継承（アクセントの明度だけ AA へ落とした） */ --bg:#FFFDF8; --surface-1:#FFFFFF; --surface-2:#FAF5EE; --surface-3:#F5EDE1; --line:#E7DCCB; --line-strong:#D9C9B2; --ink:#2F2620; --ink-2:#5A4C42; --ink-3:#6B5D52; --ink-4:#A99C8F; --accent:#A0562A; /* Roast — 押せるもの・選ばれているものだけ */ --accent-soft:#C2703D; /* Terracotta — 文字に使わない（3.64:1） */ --player-bg:#000; /* Type */ --font-display-latin:'Fraunces',Georgia,'Times New Roman',serif; --font-display-ja:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif; --font-latin:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-ja:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif; --font-ui:var(--font-latin),var(--font-ja); --text-caption:12px; --text-label:13px; --text-body-sm:14px; --text-body:15px; --text-body-lg:17px; --text-title-sm:20px; --text-title:24px; --text-page:40px; /* Space & shape */ --gap-xs:4px; --gap-sm:8px; --gap:12px; --gap-md:16px; --gap-lg:24px; --gap-xl:32px; --section:56px; --page:1240px; --radius:12px; --radius-pill:9999px; --header-h:60px; --row-h:60px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-latin),var(--font-ja);font-size:var(--text-body);line-height:1.75; font-feature-settings:"tnum"} img{max-width:100%;height:auto} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} [hidden]{display:none!important} /* 言語切替: が JA なら [data-l=en] を隠す */ html[data-lang="ja"] [data-l="en"],html[data-lang="en"] [data-l="ja"]{display:none} h1,h2,h3{font-family:var(--font-display-ja);font-weight:700;line-height:1.4;margin:0; word-break:keep-all;overflow-wrap:anywhere} html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3{font-family:var(--font-display-latin);font-weight:600} .wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gap-lg)} /* ── Header ───────────────────────────────────────────────────────── */ .hd{height:var(--header-h);border-bottom:1px solid var(--line);background:var(--bg); position:sticky;top:0;z-index:30} .hd__in{max-width:var(--page);margin:0 auto;padding:0 var(--gap-lg);height:100%; display:flex;align-items:center;gap:var(--gap-md)} .mark{font-family:var(--font-display-latin);font-weight:600;font-size:22px;color:var(--ink); letter-spacing:0;white-space:nowrap} .mark:hover{text-decoration:none} .hd__note{font-size:var(--text-label);color:var(--ink-3);white-space:nowrap} .hd__nav{margin-left:auto;display:flex;align-items:center;gap:var(--gap-md);font-size:var(--text-body-sm)} .hd__nav a{color:var(--ink-2)} .hd__nav a[aria-current]{color:var(--ink);font-weight:500} .lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden} .lang button{appearance:none;border:0;background:transparent;font:inherit;font-size:var(--text-caption); color:var(--ink-3);padding:6px 12px;cursor:pointer;min-height:32px} .lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .burger{display:none;appearance:none;border:1px solid var(--line);background:var(--surface-1); border-radius:var(--radius-pill);width:44px;height:36px;cursor:pointer;align-items:center;justify-content:center} .burger span{display:block;width:18px;height:2px;background:var(--ink-2);border-radius:2px;position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink-2);border-radius:2px} .burger span::before{top:-6px}.burger span::after{top:6px} /* ── Filter bar（全幅・stage の上）──────────────────────────────────── ⚠ 当初これは右列の 380px パネルの中にあった。実測すると一覧の1行目が PC で 728px・ SP で 784px の位置に落ち、**商品が最初の画面から押し出されていた**（LSN-0262）。 全幅にすると 8＋7 のチップが 2 段に収まり、1行目が上がる。 */ .bar{grid-column:1/-1;border-bottom:1px solid var(--line);padding:0 0 var(--gap-md);margin-bottom:var(--gap-sm)} .bar__in{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--gap) var(--gap-lg);align-items:start} .bar__in .search{grid-row:1/span 2} .bar__in .bar__g>.chips:first-child{margin-top:0} /* ── Stage（トップの上半分） ───────────────────────────────────────── */ .stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap-lg); padding:var(--gap-lg) 0 var(--section)} .player{position:relative;aspect-ratio:16/9;background:var(--player-bg);border-radius:var(--radius); overflow:hidden;width:100%} .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .player__cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:var(--gap);appearance:none;border:0;background:transparent;cursor:pointer; font:inherit;color:#fff;width:100%} .player__disc{width:72px;height:72px;border-radius:var(--radius-pill);background:var(--surface-1); display:flex;align-items:center;justify-content:center} .player__disc svg{fill:var(--ink)} .player__hint{font-size:var(--text-label);color:#CFC6BA} .now{height:var(--row-h);display:flex;align-items:center;gap:var(--gap-sm); border-bottom:1px solid var(--line);font-size:var(--text-body-sm);min-width:0} .now__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink-3);flex:none} .now.is-live .now__dot{background:var(--accent)} .now.is-idle .now__dot{background:var(--ink)} .now.is-loading .now__dot{background:var(--ink-4)} .now__state{font-size:var(--text-caption);color:var(--ink-3);white-space:nowrap} .now.is-live .now__state{color:var(--accent)} .now__name{font-weight:500;color:var(--ink);white-space:nowrap} .now__title{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} .now__ext{margin-left:auto;font-size:var(--text-label);white-space:nowrap} .info{display:flex;gap:var(--gap-md);padding:var(--gap-lg) 0;border-bottom:1px solid var(--line)} .info__b{min-width:0} .info__name{font-size:var(--text-title-sm);font-weight:500;color:var(--ink);margin:0 0 var(--gap-xs); font-family:inherit} .info__meta{font-size:var(--text-caption);color:var(--ink-3);margin:0 0 var(--gap-sm)} .info__why{font-size:var(--text-body-sm);color:var(--ink-2);margin:0 0 var(--gap-sm)} .info__links{display:flex;flex-wrap:wrap;gap:var(--gap);font-size:var(--text-label)} /* ── Browser panel ───────────────────────────────────────────────── */ .panel{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius); display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - var(--header-h) - var(--gap-lg)); position:sticky;top:calc(var(--header-h) + var(--gap))} .panel__hd{padding:var(--gap-md) var(--gap-md) var(--gap-sm);border-bottom:1px solid var(--line);flex:none} .panel__t{font-size:var(--text-label);color:var(--ink-2);font-weight:500;font-family:inherit} .panel__s{font-size:var(--text-caption);color:var(--ink-3);margin:2px 0 0} .panel__filters{padding:var(--gap) var(--gap-md);border-bottom:1px solid var(--line)} .search{width:100%;height:44px;border-radius:var(--radius-pill);border:1px solid var(--line); background:var(--bg);color:var(--ink);font:inherit;font-size:var(--text-body-sm);padding:0 var(--gap-md)} .search::placeholder{color:var(--ink-3)} .search:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 2px var(--accent)} .chips{display:flex;flex-wrap:wrap;gap:var(--gap-sm);margin-top:var(--gap)} .chips__label{font-size:var(--text-caption);color:var(--ink-2);font-weight:500;margin:var(--gap) 0 0} .pill{appearance:none;border:1px solid transparent;background:var(--surface-2);color:var(--ink-2); font:inherit;font-size:var(--text-caption);border-radius:var(--radius-pill);padding:6px 12px; min-height:32px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease; display:inline-flex;align-items:center;gap:6px;text-decoration:none} .pill:hover{background:var(--surface-3);text-decoration:none} .pill[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .pill .n{font-size:11px;opacity:.7} .list{overflow-y:auto;flex:1;min-height:0;padding-bottom:var(--gap-sm)} .grp{display:flex;align-items:baseline;gap:var(--gap-sm);flex-wrap:wrap; padding:var(--gap-md) var(--gap-md) var(--gap-sm);border-bottom:1px solid var(--line); font-size:var(--text-label);font-weight:500;color:var(--ink)} .grp .n{font-size:var(--text-caption);color:var(--ink-3);font-weight:400} .grp .s{flex-basis:100%;font-size:var(--text-caption);color:var(--ink-3);font-weight:400;line-height:1.6} .grp--sub{font-weight:400;color:var(--ink-2)} .row{display:flex;align-items:center;gap:var(--gap);min-height:var(--row-h);padding:var(--gap-sm) var(--gap-md); border-bottom:1px solid var(--line);border-left:2px solid transparent;text-decoration:none;color:inherit; transition:background .18s ease} .row:hover{background:var(--surface-2);text-decoration:none} .row[aria-selected="true"]{background:var(--surface-3);border-left-color:var(--accent)} .row__body{min-width:0;flex:1} .row__name{display:block;font-size:var(--text-body-sm);font-weight:500;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row__meta{display:block;font-size:var(--text-caption);color:var(--ink-3);line-height:1.5; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row.is-dormant .row__name{color:var(--ink-3);font-weight:400} .row--link .row__name{font-weight:400} .row__ext{color:var(--ink-3);font-size:var(--text-body-sm);flex:none} .row__np{color:var(--accent)} .av{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-2);flex:none; display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .av--24{width:24px;height:24px;font-size:10px} .av--48{width:48px;height:48px;font-size:16px} .av__i{font-family:var(--font-latin);font-weight:600;font-size:13px;color:var(--ink-2)} .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill); background:var(--surface-2);color:var(--ink-2);font-size:var(--text-caption);white-space:nowrap;flex:none} .chip--live{background:transparent;color:var(--accent);border:1px solid var(--accent)} /* ── Mood Reading（B面を押したときだけ） ─────────────────────────── */ .mood{background:var(--surface-2);border-bottom:1px solid var(--line);padding:var(--gap-md)} .mood__t{font-size:var(--text-label);color:var(--ink-2);font-weight:500;margin:0 0 var(--gap-sm);font-family:inherit} .mood__l{display:flex;flex-direction:column;gap:var(--gap-sm)} .mood__l a{font-size:var(--text-body-sm);color:var(--ink);display:block} .mood__l a .d{display:block;font-size:var(--text-caption);color:var(--ink-3);line-height:1.5} .mood__more{font-size:var(--text-label);margin-top:var(--gap-sm);display:inline-block} /* ── 下段の棚 ─────────────────────────────────────────────────────── */ .shelf{padding-top:var(--section)} .shelf__hd{margin-bottom:var(--gap-md)} .shelf__rule{display:block;width:22px;height:2px;background:var(--accent-soft);border-radius:2px;margin-bottom:var(--gap)} .shelf h2{font-size:var(--text-title-sm);color:var(--ink)} .shelf__s{font-size:var(--text-body-sm);color:var(--ink-2);margin:var(--gap-xs) 0 0;max-width:60ch} .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap-xl)} .lrow{display:block;padding:var(--gap) 0;border-bottom:1px solid var(--line);color:inherit} .lrow:hover{text-decoration:none} .lrow:hover .lrow__n{text-decoration:underline} .lrow__n{font-size:var(--text-body);font-weight:500;color:var(--ink)} .lrow__d{display:block;font-size:var(--text-label);color:var(--ink-3);line-height:1.6} .lrow__pr{display:inline-block;margin-left:var(--gap-sm);font-size:11px;color:var(--ink-3); border:1px solid var(--line);border-radius:var(--radius-pill);padding:1px 7px;vertical-align:1px} .more{display:inline-block;margin-top:var(--gap-md);font-size:var(--text-body-sm)} /* ── 下層ページ ───────────────────────────────────────────────────── */ .page{padding:var(--section) 0} .page h1{font-size:var(--text-page);line-height:1.2;font-weight:700;margin:0 0 var(--gap-md)} .page__lede{font-size:var(--text-body-lg);color:var(--ink-2);max-width:62ch;margin:0 0 var(--gap-xl)} .page h2{font-size:var(--text-title-sm);margin:var(--section) 0 var(--gap-md)} .page p{max-width:70ch;color:var(--ink-2)} .section__hd{display:flex;align-items:baseline;gap:var(--gap-sm);flex-wrap:wrap; padding-bottom:var(--gap-sm);border-bottom:1px solid var(--line-strong);margin-bottom:var(--gap)} .section__hd h2{margin:0;font-size:var(--text-title-sm)} .section__hd .n{font-size:var(--text-caption);color:var(--ink-3)} .section__hd .s{flex-basis:100%;font-size:var(--text-label);color:var(--ink-3)} .crow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--gap) var(--gap-md); padding:var(--gap-md) 0;border-bottom:1px solid var(--line)} .crow__av{grid-row:1/span 3} .crow__top{display:flex;align-items:baseline;gap:var(--gap-sm);flex-wrap:wrap;min-width:0} .crow__name{font-size:var(--text-body);font-weight:500;color:var(--ink)} .crow__meta{font-size:var(--text-caption);color:var(--ink-3)} .crow__ext{font-size:var(--text-label);white-space:nowrap} .crow__why{grid-column:2/span 2;font-size:var(--text-label);color:var(--ink-2);margin:0} .crow__sub{color:var(--ink-3);margin-left:var(--gap-sm)} .crow__terms{grid-column:2/span 2;font-size:var(--text-caption);color:var(--ink-3); border-left:2px solid var(--line-strong);padding-left:var(--gap);margin:var(--gap-xs) 0 0} .crow__faces{grid-column:2/span 2;display:flex;flex-wrap:wrap;gap:var(--gap-md);font-size:var(--text-label)} .crow.is-dormant .crow__name{color:var(--ink-3)} /* ── Buttons ─────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--gap-lg); border-radius:var(--radius);font:inherit;font-size:var(--text-body);font-weight:500;cursor:pointer; background:var(--ink);color:var(--bg);border:1px solid var(--ink);text-decoration:none} .btn:hover{text-decoration:none;opacity:.9} .btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--line-strong)} /* ── Footer ──────────────────────────────────────────────────────── */ .ft{border-top:1px solid var(--line);margin-top:var(--section);padding:var(--gap-xl) 0 var(--section); font-size:var(--text-label);color:var(--ink-3)} .ft__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-lg)} .ft p{margin:0 0 var(--gap-sm);max-width:52ch} .ft a{color:var(--ink-2)} .ft__nav{display:flex;flex-wrap:wrap;gap:var(--gap)} /* ── SP ──────────────────────────────────────────────────────────── */ @media (max-width:900px){ :root{--header-h:52px} .wrap,.hd__in{padding:0 var(--gap-md)} .hd__note{display:none} .hd__nav{display:none} .hd__nav.is-open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;background:var(--bg); border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:var(--gap-sm) var(--gap-md)} .hd__nav.is-open a{padding:var(--gap-sm) 0;width:100%} .burger{display:inline-flex;margin-left:auto;order:2} .lang{order:1;margin-left:auto} .hd__nav.is-open{order:3} .stage{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 var(--section)} /* SP は 順に 映像 → いま流れているもの → 絞り込み → 一覧。絞り込みを映像の下へ回す。 */ /* SP は 映像 → いま流れているもの → 絞り込み → 一覧 の順にする */ .stage{display:flex;flex-direction:column} .stage>div:first-of-type{order:1} .bar{order:2;border-bottom:0;padding:var(--gap) 0 0;margin:0} .panel{order:3;position:static;max-height:none;border-top:1px solid var(--line)} /* SP は縦が足りない。上のチップ列が「選ぶところ」を既に言っているので、 パネルの見出しと棚の説明文は畳む（一覧の1行目を上げるため・LSN-0262）。 */ .panel__hd{display:none} .grp .s{display:none} .grp{padding-top:var(--gap)} .bar__in{grid-template-columns:minmax(0,1fr);gap:var(--gap)} .bar__in .search{grid-row:auto} /* ⚠ SP で 8＋7 のチップを折り返すと 500px を使い、一覧の1行目が画面の外へ出た（実測 784px）。 SP だけ 1 行の横スクロールにする。ラベルは上に別行で置き、何を訊かれているか分かるようにする。 */ .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;padding-bottom:2px;margin-top:var(--gap-sm)} .chips::-webkit-scrollbar{display:none} .chips>.pill{flex:none} .chips__label{margin:var(--gap-sm) 0 0} .stage__player{position:sticky;top:var(--header-h);z-index:20;background:var(--bg); margin:0 calc(var(--gap-md) * -1)} .player{border-radius:0} .panel{border-left:0;border-right:0;border-radius:0;max-height:none;margin:0 calc(var(--gap-md) * -1)} .list{overflow:visible;max-height:none} .info{display:none} .info.is-open{display:flex} .links{grid-template-columns:minmax(0,1fr)} .ft__g{grid-template-columns:minmax(0,1fr)} .crow{grid-template-columns:48px minmax(0,1fr)} .crow__ext{grid-column:2} .crow__why,.crow__terms,.crow__faces{grid-column:2} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important} }