/* skin-luxeta — Luxeta（luxeta.jp）の記事側 /guide/
   2026-10-21 ユーザー指示「トップ(luxeta.jp)と /guide/ が別サイトに見える → トップの雰囲気で全体をまとめる」。
   手本は media-platform/apps/web/assets/watch.css と root.mjs（白いヘッダー＋ロゴ画像・黒＋ボルドー・Noto Sans JP・
   白いカード＋うすい影・角12px・丸いボタン）。色の値はトップと同じ。金色・ピンクは使わない。 */
.skin-luxeta{
  --radius:12px;
  --bg:#faf9f8; --panel:#ffffff; --bg2:#faf9f8;
  --accent:#7a1f2b; --accent-deep:#5e1520; --accent-soft:#f6ecee;
  --accent2:#2f6f62; --accent3:#8a6d3b;
  --ink:#1a1a1a; --sub:#6f6a68; --line:#e8e3e1;
  --lx-shadow:0 1px 2px rgba(26,26,26,.04),0 8px 24px rgba(26,26,26,.05);
  --font-body:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,serif;
  --font-head:var(--font-body);
  background:var(--bg);
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.75;
}
.skin-luxeta a{color:var(--accent-deep)}
.skin-luxeta h1,.skin-luxeta h2,.skin-luxeta h3,.skin-luxeta .brand,.skin-luxeta .card h3{font-family:var(--font-body);font-weight:900;letter-spacing:0}
.skin-luxeta :focus-visible{outline-color:var(--accent)}

/* ---- ヘッダー：白・下に細い線・ロゴ画像40px・丸いナビ（トップの header.site と同じ） ---- */
.skin-luxeta .site-head{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.skin-luxeta .site-head .wrap{min-height:56px;gap:12px}
.skin-luxeta .brand .logo.logo-full{height:40px;max-width:min(58vw,280px)}
.skin-luxeta .nav{gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.skin-luxeta .nav::-webkit-scrollbar{display:none}
.skin-luxeta .nav a{white-space:nowrap;color:var(--ink);font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px}
.skin-luxeta .nav a:hover,.skin-luxeta .nav a[aria-current]{background:var(--accent-soft);color:var(--accent-deep)}
.skin-luxeta form.search input{background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13px;padding:6px 12px;width:150px}
.skin-luxeta form.search button{background:var(--accent);border-radius:999px;font-size:12px;padding:6px 12px}
.skin-luxeta form.search button:hover{background:var(--accent-deep)}
@media (max-width:759px){.skin-luxeta form.search{display:none}}

/* ---- トップのヒーロー：飾りなし・左寄せ・英字の小見出し（トップの .lx-hero と同じ） ---- */
.skin-luxeta .hero{background:none;border-bottom:0;padding:28px 0 10px}
.skin-luxeta .hero-grid{grid-template-columns:1fr}
.skin-luxeta .hero-art{display:none}
.skin-luxeta .hero .kicker{font-family:var(--font-serif);font-weight:600;letter-spacing:.3em;color:var(--accent);font-size:15px;text-transform:none;margin:0}
.skin-luxeta .hero h1{font-size:clamp(26px,5.4vw,40px);line-height:1.35;letter-spacing:.02em;margin:6px 0 10px;max-width:none;color:var(--ink)}
.skin-luxeta .hero p{color:var(--sub);font-size:16px;max-width:44em}
.skin-luxeta .hero-search{margin:18px 0 10px;max-width:520px}
.skin-luxeta .hero-search input{border:1px solid var(--line);border-radius:999px;background:#fff;padding:11px 18px;font-size:15px}
.skin-luxeta .hero-search input:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.skin-luxeta .hero-search button{background:var(--accent);border-radius:999px;font-weight:900;font-size:13px;padding:0 18px}
.skin-luxeta .hero-search button:hover{background:var(--accent-deep)}
.skin-luxeta .quick a{background:#fff;border-color:var(--line);color:var(--ink)}
.skin-luxeta .quick a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ---- 見出し（トップの h2 と同じ：太く黒く、飾りなし） ---- */
.skin-luxeta .section{padding:28px 0}
.skin-luxeta .section-h{margin:0 0 14px}
.skin-luxeta .section-h h2{font-size:clamp(18px,3.6vw,22px);font-weight:900}
.skin-luxeta .section-sub{font-size:12px;color:var(--sub)}

/* ---- 「今日の目的は？」の札：絵と番号を消して、トップの「カテゴリから探す」と同じ白いカードに ---- */
.skin-luxeta .problems{padding:18px 0 0}
.skin-luxeta .pcards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.skin-luxeta .pcards li{--pc:var(--accent)}
.skin-luxeta .pgrid.pcards a{grid-template-columns:1fr;gap:6px;padding:18px 44px 18px 18px;min-height:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:none}
.skin-luxeta .pgrid.pcards a::before{display:none}
.skin-luxeta .pgrid.pcards a:hover{transform:none;border-color:var(--accent);box-shadow:var(--lx-shadow)}
.skin-luxeta .pcards .pc-art,.skin-luxeta .pcards .pc-no{display:none}
.skin-luxeta .pgrid.pcards b{font-size:18px;font-weight:900}
.skin-luxeta .pgrid.pcards .pc-txt span{font-size:13px;color:var(--sub)}
.skin-luxeta .pcards .pc-go{background:var(--accent-soft)}
.skin-luxeta .pgrid.pcards a:hover .pc-go{background:var(--accent)}
.skin-luxeta .pgrid.pcards a:hover .pc-go::after{border-color:#fff}

/* ---- 記事カード（トップの .item / .card と同じ：白・うすい影・角12px） ---- */
.skin-luxeta .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lx-shadow)}
.skin-luxeta .card:hover{transform:none;border-color:var(--accent);box-shadow:0 1px 2px rgba(26,26,26,.04),0 12px 28px rgba(122,31,43,.12)}
.skin-luxeta .card h3{font-size:15.5px;line-height:1.5;font-weight:900}
.skin-luxeta .thumb{background:var(--accent-soft)}
.skin-luxeta .thumb .title-card,.skin-luxeta .hero-card .title-card{background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
.skin-luxeta .chip{color:var(--accent-deep);background:var(--accent-soft)}
.skin-luxeta .chips a{background:#fff;border-color:var(--line);color:var(--ink)}
.skin-luxeta .chips a:hover{border-color:var(--accent);color:var(--accent-deep)}
.skin-luxeta .meta{font-size:12px}
.skin-luxeta .pager a,.skin-luxeta .pager span{border-radius:999px;background:#fff}
.skin-luxeta .pager .current{background:var(--accent);border-color:var(--accent)}
.skin-luxeta .sgrid li{background:#fff;border:1px solid var(--line);box-shadow:var(--lx-shadow)}

/* ---- 記事ページ ---- */
.skin-luxeta .post-head h1{font-size:clamp(22px,4.6vw,32px);line-height:1.35;letter-spacing:0;font-weight:900}
.skin-luxeta .crumb a,.skin-luxeta .crumb{color:var(--sub);font-size:12px}
.skin-luxeta .byline .who i{background:var(--accent)}
.skin-luxeta .pr{background:none;border:0;border-left:3px solid var(--accent);border-radius:0;padding:2px 0 2px 12px;font-size:12px;color:var(--sub)}
.skin-luxeta .pr::before{display:none}
.skin-luxeta .hero-card{border-radius:var(--radius);box-shadow:var(--lx-shadow)}
.skin-luxeta .content h2{font-size:clamp(19px,3.6vw,23px);border-bottom:2px solid var(--ink);font-weight:900}
.skin-luxeta .content h2::after{background:var(--accent)}
.skin-luxeta .content h3{border-left:4px solid var(--accent);font-weight:900}
.skin-luxeta .content strong{background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.skin-luxeta .verdict{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--lx-shadow)}
.skin-luxeta .verdict .lbl{color:var(--accent-deep)}
.skin-luxeta .verdict .lbl::before{background:var(--accent);border-radius:50%;transform:none}
.skin-luxeta .tbl{border-radius:var(--radius);background:#fff;box-shadow:var(--lx-shadow)}
.skin-luxeta .tbl thead th,.skin-luxeta .tbl thead th:first-child{background:var(--accent-soft);color:var(--ink);font-size:12.5px}
.skin-luxeta .cta{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);box-shadow:var(--lx-shadow)}
.skin-luxeta .related a{background:#fff}
.skin-luxeta .related a:hover{border-color:var(--accent)}
.skin-luxeta .nl-box{background:#fff;border:1px solid var(--line);box-shadow:var(--lx-shadow)}

/* ---- ボタン：丸い・ボルドー・影なし（トップの .btn と同じ） ---- */
.skin-luxeta .btn{background:var(--accent);border-radius:999px;box-shadow:none;font-weight:900;font-size:14px;padding:10px 18px}
.skin-luxeta .btn:hover{background:var(--accent-deep);text-decoration:none}
.skin-luxeta .rk-btn,.skin-luxeta .rk-search-btn{background:var(--accent)}
.skin-luxeta .rk-price{color:var(--accent-deep)}

/* ---- フッター：白・上に細い線（トップの footer.site と同じ） ---- */
.skin-luxeta .site-foot{background:#fff;border-top:1px solid var(--line);margin-top:48px;padding:28px 0;font-size:12.5px;color:var(--sub)}
.skin-luxeta .site-foot a{color:var(--sub)}
.skin-luxeta .site-foot a:hover{color:var(--accent-deep)}
.skin-luxeta .site-foot .foot-nav{width:100%;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px}

/* ---- スマホ：トップと同じく、ロゴの下にメニューを横スクロールで出す（共通テーマは960px以下でメニューを隠すので戻す） ---- */
@media (max-width:960px){
  .skin-luxeta .site-head .wrap{flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;padding-top:8px;padding-bottom:6px}
  .skin-luxeta .brand{flex:1 1 100%}
  .skin-luxeta .brand .logo.logo-full{height:34px}
  .skin-luxeta .site-head .nav{display:flex;flex:1 1 100%;margin:0 -16px;padding:0 16px}
  .skin-luxeta .site-head .nav a{font-size:12.5px;padding:5px 9px}
}

/* ---- 案件ボックス（inc/brands.php のオレンジ）をボルドーに。atelier と同じく !important で上書き ---- */
.skin-luxeta .content .alg-btn,.skin-luxeta .alg-sticky .alg-btn{background:linear-gradient(180deg,#8d2a38 0%,var(--accent) 100%)!important;box-shadow:0 4px 0 var(--accent-deep),0 14px 24px -14px rgba(122,31,43,.7)!important}
.skin-luxeta .content .alg-btn:hover{box-shadow:0 5px 0 var(--accent-deep),0 18px 28px -14px rgba(122,31,43,.8)!important}
.skin-luxeta .content .alg-btn:active{box-shadow:0 1px 0 var(--accent-deep)!important}
.skin-luxeta .content .alg-btn-arr::after,.skin-luxeta .alg-sticky .alg-btn-arr::after{border-color:var(--accent)!important}
.skin-luxeta .content .alg-mid,.skin-luxeta .content .alg-cta li.is-top,.skin-luxeta .g-offer{border-color:var(--accent)!important;background:linear-gradient(180deg,var(--accent-soft),#fff)!important}
.skin-luxeta .content .alg-mid-h,.skin-luxeta .content .alg-ribbon,.skin-luxeta .g-offer .go-h{background:var(--accent)!important}
.skin-luxeta .content .alg-cta{border-color:var(--line)!important;background:#fff!important;box-shadow:var(--lx-shadow)}

/* ==== 2026-11-09 ダーク統一：トップ(STREAM)の黒×金に /guide/ も合わせる ====
   値は stream-media/app.css と同じ（背景#0b0b0f・金#c9a24b・売る側の緑#4fd1a5）。上の白基調の指定を変数と個別指定で上書きする。 */
.skin-luxeta{
  --bg:#0b0b0f; --panel:#14141a; --bg2:#101015;
  --accent:#c9a24b; --accent-deep:#e2c274; --accent-soft:#c9a24b1f;
  --accent2:#4fd1a5; --accent3:#c9a24b;
  --ink:#f4f4f6; --sub:#a0a0ad; --line:#ffffff1f;
  --lx-shadow:0 0 0 1px #ffffff0a;
  --font-serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  color-scheme:dark;
}
.skin-luxeta,.skin-luxeta body{background:var(--bg);color:var(--ink)}
.skin-luxeta .site-head{background:#0b0b0fee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
/* ロゴは画像（白地用）をやめ、トップと同じ金の文字ロゴ */
.skin-luxeta .brand .logo.logo-full{display:none}
.skin-luxeta .brand::before{content:"LUXETA";font-family:var(--font-serif);font-weight:700;letter-spacing:.34em;color:#c9a24b;font-size:17px;line-height:40px;display:block}
.skin-luxeta .nav a{color:#d6d6de}
.skin-luxeta .nav a:hover,.skin-luxeta .nav a[aria-current]{background:#c9a24b22;color:#c9a24b}
.skin-luxeta form.search input,.skin-luxeta .hero-search input{background:#14141a;color:var(--ink);border-color:var(--line)}
.skin-luxeta form.search input::placeholder,.skin-luxeta .hero-search input::placeholder{color:#7d7d8a}
.skin-luxeta form.search button,.skin-luxeta .hero-search button{background:var(--accent);color:#000}
.skin-luxeta form.search button:hover,.skin-luxeta .hero-search button:hover{background:var(--accent-deep)}
.skin-luxeta .hero .kicker{color:var(--accent)}
.skin-luxeta .quick a,.skin-luxeta .pgrid.pcards a,.skin-luxeta .card,.skin-luxeta .chips a,.skin-luxeta .pager a,.skin-luxeta .pager span,
.skin-luxeta .sgrid li,.skin-luxeta .verdict,.skin-luxeta .tbl,.skin-luxeta .cta,.skin-luxeta .related a,.skin-luxeta .nl-box{background:var(--panel)}
.skin-luxeta .card:hover{box-shadow:0 12px 28px #c9a24b1f}
.skin-luxeta .pgrid.pcards a:hover .pc-go::after{border-color:#000}
.skin-luxeta .site-foot{background:#08080b;border-top:1px solid #ffffff12}
.skin-luxeta .content .alg-mid,.skin-luxeta .content .alg-cta li.is-top,.skin-luxeta .g-offer{background:linear-gradient(180deg,var(--accent-soft),var(--panel))!important}
.skin-luxeta .content .alg-cta{background:var(--panel)!important}
.skin-luxeta img.wp-post-image,.skin-luxeta .thumb img{filter:none}
.skin-luxeta .btn,.skin-luxeta a.btn,.skin-luxeta .cta a.btn{color:#000}
