/*
 * 動く部分の見た目（静的 HTML の site.css には「最初の状態」しか無いので、切り替わった後の状態と、
 * 最初は隠れている要素の見た目をここに置く）。値は本番 React のインライン style と同じ。
 * site.css は「#root .c-…」（ID の強さ）なので、こちらは :is(#root, html) を前に付けて上回る（#root が無い HTML でも効く）。
 * 状態は属性で表す：aria-pressed / aria-expanded / data-open / details[open] / data-scrolled。
 */
[hidden] { display: none !important; }

/* ── ナビ（SharedNav） ── */
:is(#root, html) [data-nav][data-scrolled] { background: rgba(10,10,10,0.92); }
:is(#root, html) [data-nav-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
:is(#root, html) [data-nav-toggle][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
:is(#root, html) [data-nav-toggle][aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
:is(#root, html) .js-nav-menu { border-top: 1px solid rgba(0,0,0,0.06); padding: 16px 0 24px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 768px) { .js-nav-menu { display: none !important; } }
:is(#root, html) .js-nav-menu > a { font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 15px; color: #fff; text-decoration: none; padding: 12px 8px; border-radius: 8px; font-weight: 400; }
:is(#root, html) .js-nav-menu > a:last-child { color: #f3070d; font-weight: 700; }

/* ── 選択ボタン（aria-pressed） ── */
/* 製品：容量ボタン・色ボタン／記事一覧：目的・カテゴリ／動画：カテゴリ／カタログ：ブランド */
:is(#root, html) [data-select-style="pill"][aria-pressed="true"] { color: #fff; background: #f3070d; border-color: #f3070d; }
:is(#root, html) [data-select-style="pill"][aria-pressed="false"] { color: #555; background: #f9f9f9; border-color: #e5e5e5; }
/* 製品：ラインナップのカード（枠の色だけ変わる） */
:is(#root, html) [data-select-style="card"][aria-pressed="true"] { border-color: #f3070d; }
:is(#root, html) [data-select-style="card"][aria-pressed="false"] { border-color: #e5e5e5; }
/* 動画：カテゴリ（文字の太さも変わる） */
:is(#root, html) [data-select-style="movie"][aria-pressed="true"] { font-weight: 700; color: #fff; background: #f3070d; border-color: #f3070d; }
:is(#root, html) [data-select-style="movie"][aria-pressed="false"] { font-weight: 400; color: #555; background: #f9f9f9; border-color: #e5e5e5; }
/* カタログ：ブランド */
:is(#root, html) [data-select-style="brand"][aria-pressed="true"] { color: #fff; background: #f3070d; border-color: #f3070d; }
:is(#root, html) [data-select-style="brand"][aria-pressed="false"] { color: #1d1d1f; background: #f9f9f9; border-color: #e5e5e5; }
/* カタログ：カテゴリ（色はボタンごとに --cat-color） */
:is(#root, html) [data-select-style="cat"][aria-pressed="true"] { color: #fff; background: var(--cat-color, #555); border-color: var(--cat-color, #555); }
:is(#root, html) [data-select-style="cat"][aria-pressed="false"] { color: var(--cat-color, #555); background: transparent; border-color: #e5e5e5; }
:is(#root, html) [data-select-style="cat-all"][aria-pressed="true"] { color: #fff; background: #555; border-color: #555; }
:is(#root, html) [data-select-style="cat-all"][aria-pressed="false"] { color: #555; background: transparent; border-color: #e5e5e5; }

/* ── 製品：関連製品「さらに見る」 ── */
:is(#root, html) [data-disclosure-style="related"][aria-expanded="true"] { background: #f3070d; color: #fff; }
:is(#root, html) [data-disclosure-style="related"][aria-expanded="false"] { background: #f9f9f9; color: #f3070d; }

/* ── Q&A ページの折りたたみ ── */
:is(#root, html) [data-accordion][data-open] [data-accordion-icon] { transform: rotate(45deg); }

/* ── 記事の FAQ（details） ── */
:is(#root, html) details.js-faq > summary { list-style: none; }
:is(#root, html) details.js-faq > summary::-webkit-details-marker { display: none; }
:is(#root, html) details.js-faq[open] { background: #f0f0f0; }
:is(#root, html) details.js-faq[open] > summary [data-accordion-icon] { transform: rotate(45deg); }
:is(#root, html) .js-faq-answer { padding: 0 16px 14px; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 14px; color: #555; line-height: 1.8; }

/* ── 製品一覧の FAQ（details） ── */
:is(#root, html) details.js-pfaq > summary { list-style: none; }
:is(#root, html) details.js-pfaq > summary::-webkit-details-marker { display: none; }
:is(#root, html) details.js-pfaq[open] > summary [data-accordion-icon] { transform: rotate(180deg); }
:is(#root, html) .js-pfaq-answer { padding: 0 20px 16px; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 14px; color: #555; line-height: 1.8; border-top: 1px solid rgba(0,0,0,0.06); }
:is(#root, html) .js-pfaq-answer > p { margin: 12px 0 0; }
:is(#root, html) .js-pfaq-answer > a { display: inline-block; margin-top: 12px; color: #f3070d; font-weight: 700; }

/* ── 記事一覧：0件・空の列 ── */
:is(#root, html) .js-article-empty { box-sizing: border-box; width: 100%; padding: 20px; border: 1px solid #e5e5e5; border-radius: 12px; background: #f0f0f0; }
@media (min-width: 768px) { :is(#root, html) .js-article-empty { padding: 28px; } }
:is(#root, html) .js-article-empty > p { margin: 0 0 14px; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 15px; color: #1d1d1f; line-height: 1.7; }
:is(#root, html) .js-article-empty > button { box-sizing: border-box; min-height: 44px; padding: 9px 14px; border: 1px solid #f3070d; border-radius: 8px; background: #f9f9f9; color: #f3070d; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; }
:is(#root, html) .js-empty-column { margin: 0; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 13px; color: #999; line-height: 1.7; }

/* ── カタログ：ホバー・0件 ── */
:is(#root, html) [data-catalog-card]:hover { border-color: #f3070d; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
:is(#root, html) [data-catalog-card]:hover [data-catalog-card-button] { opacity: 0.9; }
:is(#root, html) .js-catalog-empty { text-align: center; padding: 64px 24px; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 15px; color: #555; }

/* ── 動画：0件 ── */
:is(#root, html) .js-movie-empty { text-align: center; padding: 80px 24px; font-family: 'Noto Sans JP',system-ui,sans-serif; font-size: 15px; color: #999; }

/* ── 出現演出：印刷では必ず見せる ── */
@media print { [data-reveal-pending] { opacity: 1 !important; transform: none !important; transition: none !important; } }