/* 写真集ナビ.com ── Luminous Archive（lumiarc.work）の骨格を採った型
実物から採った値: 背景 rgb(3,0,5) / CTA linear-gradient(90deg,#8a6314,#b8892b 45%,#e8c24a)
カード rgba(255,255,255,.03)+1px rgba(255,255,255,.08) / 角丸16 / 脇の箱は枠 rgba(255,255,255,.16) */
:root{
--bg:#0a0705; --ink:#fff; --mute:#c7bda6; --dim:#9c8f74;
--v1:#8a6314; --v2:#b8892b; --v3:#e8c24a;
--card:rgba(255,255,255,.03); --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 34px;
position:relative;z-index:5}
.logo{display:flex;align-items:center;gap:11px;font-size:19px;letter-spacing:.06em}
.logo em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:13px;
background:linear-gradient(135deg,var(--v1),var(--v3))}
.site-header nav{display:flex;gap:26px;font-size:13px;color:var(--mute)}
.site-header nav .on{color:#fff;border-bottom:2px solid var(--v3);padding-bottom:3px}
/* 表紙を敷いた全面ヒーロー */
.hero{position:relative;min-height:560px;display:grid;place-items:center;text-align:center;overflow:hidden;padding:40px 24px 60px}
.wall{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(7,1fr);gap:16px;
transform:rotate(-4deg);filter:blur(2px) saturate(.9);opacity:.5}
.wall b{display:block;aspect-ratio:3/4;border-radius:10px;background:linear-gradient(160deg,#2a1a3c,#120a1c)}
.hero::after{content:"";position:absolute;inset:0;
background:radial-gradient(60% 55% at 50% 40%,rgba(3,0,5,.55),rgba(3,0,5,.93) 72%)}
.hero-in{position:relative;z-index:2;max-width:1120px}
.kick{margin:0 0 14px;font-size:12px;letter-spacing:.42em;color:#d9b45f}
h1.big{margin:0;font-size:104px;line-height:1.05;font-weight:900;letter-spacing:.02em;
text-shadow:0 0 42px rgba(168,85,247,.75),0 0 90px rgba(217,70,239,.45)}
.hero p{margin:22px 0 0;font-size:16px;color:#f2ece0}
.hero p.p2{color:#d9b45f}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:30px;height:60px;padding:0 44px;border-radius:999px;
font-size:17px;font-weight:700;background:linear-gradient(90deg,var(--v1) 0%,var(--v2) 45%,var(--v3) 100%);
box-shadow:0 14px 48px rgba(147,51,234,.45)}
/* 本体と脇 */
.shell{display:grid;grid-template-columns:1fr 300px;gap:26px;max-width:1360px;margin:0 auto;padding:0 34px 70px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel h2{margin:0 0 4px;font-size:21px}
.lbl{font-size:10px;letter-spacing:.3em;color:#d9b45f;margin:0 0 6px}
.lead{margin:0 0 18px;font-size:12px;color:var(--dim)}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cover{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#2b2110,#130b1d);display:grid;place-items:center}
.cover span{font-size:10px;color:#7a6f58;letter-spacing:.1em}
.pr{position:absolute;left:8px;top:8px;font-size:9px;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.66);color:#f2e2b8}
.card .t{padding:10px 12px 14px;font-size:12px;line-height:1.5}
.card .d{color:var(--dim);font-size:10px;margin-top:5px}
.card .y{color:#f0d08a;font-weight:700;margin-top:6px}
.chips{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.chips b{font-size:11px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--mute);font-weight:400}
.chips b.on{background:linear-gradient(90deg,var(--v1),var(--v3));border-color:transparent;color:#fff}
.rows{display:grid;gap:14px}
.row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;
background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.row .cover{border-radius:10px}
.row .badge{font-size:10px;padding:4px 9px;border-radius:999px;background:rgba(147,51,234,.28);color:#f2e2b8}
.row h3{margin:10px 0 0;font-size:16px;line-height:1.5}
.row .meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px}
.row .price{font-size:15px;font-weight:700}
.row .go{font-size:11px;letter-spacing:.14em;color:#f0d08a}
/* 脇 */
aside .w{border:1px solid var(--line2);border-radius:8px;padding:16px;margin-bottom:18px}
aside h4{margin:0 0 12px;font-size:13px}
.search{display:flex;gap:8px}
.search i{flex:1;height:34px;border-radius:8px;border:1px solid var(--line2);display:block}
.search b{height:34px;padding:0 14px;border-radius:8px;display:grid;place-items:center;font-size:11px;
background:linear-gradient(90deg,var(--v2),var(--v3))}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs b{font-size:10px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);font-weight:400;color:var(--mute)}
.tabs b.on{background:linear-gradient(90deg,var(--v1),var(--v3));border-color:transparent;color:#fff}
.rk{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.rk .cover{border-radius:8px;aspect-ratio:3/4}
.rk p{margin:0;font-size:11px;line-height:1.5}
.rk .y{font-size:10px;color:#f0d08a;margin-top:3px}
.cats{display:grid;gap:8px}
.cats div{display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 12px;border-radius:8px;
border:1px solid var(--line);font-size:12px;background:linear-gradient(90deg,rgba(147,51,234,.16),transparent)}
.cats span{font-size:10px;color:var(--dim)}
/* ── スマホ ─────────────────────────────────────────────
2026-09-19 ユーザー「スマホ版くそレイアウト崩れてるぞ」。
見出しが104px固定、脇が2段組のまま、注目作品が4列で潰れていた。 */
@media(max-width:900px){
.site-header{padding:12px 18px;flex-wrap:wrap;gap:10px}
.site-header nav{gap:16px;font-size:12px}
.hero{min-height:0;padding:26px 18px 38px}
.wall{grid-template-columns:repeat(4,1fr);gap:10px;inset:-10%}
h1.big{font-size:clamp(32px,9.6vw,54px);line-height:1.18;
text-shadow:0 0 26px rgba(168,85,247,.7),0 0 56px rgba(217,70,239,.4)}
.kick{font-size:10px;letter-spacing:.3em}
.hero p{font-size:14px;line-height:1.85;margin-top:16px}
.cta{height:52px;padding:0 28px;font-size:15px;margin-top:22px}
/* 脇の欄は本文の下へ。2段組のまま潰すと読めない */
.shell{grid-template-columns:1fr;gap:18px;padding:0 18px 50px}
.panel{padding:16px;border-radius:14px}
.panel h2{font-size:18px}
.picks{grid-template-columns:repeat(2,1fr);gap:10px}
.card .t{font-size:11px;padding:8px 10px 12px}
.rows{gap:10px}
.row{grid-template-columns:104px 1fr;gap:12px;padding:10px;border-radius:14px}
.row h3{font-size:14px;margin-top:8px}
.row .meta{flex-wrap:wrap;gap:6px}
.chips b{font-size:10px;padding:5px 11px}
/* 固定の宣伝枠。狭い画面では下に細く貼る（流し込みにすると先頭に出て邪魔になる） */
aside .w{padding:14px}
.rk{grid-template-columns:44px 1fr}
.cats div{height:auto;min-height:40px;padding:9px 12px}
/* 詳細ページ */
.d-grid{grid-template-columns:1fr!important}
.d-cover{max-width:none;margin:0}
.d-title{font-size:22px!important;line-height:1.5!important}
}
@media(max-width:420px){
/* 1列にすると表紙が画面いっぱいに伸びて間延びする。2列のまま詰める */
.picks{gap:8px}
.row{grid-template-columns:88px 1fr}
}
/* ヒーローの副題。サイト名の下で、いちばん伝えたい一文を大きく出す */
.hero .sub2{margin:16px 0 0;font-size:26px;font-weight:700;color:#f2e2b8;line-height:1.6}
@media(max-width:900px){.hero .sub2{font-size:19px;margin-top:12px}}
/* 一覧の行に出す仕様（レーベル・収録点数・分類） */
.row .spec{font-size:11px;color:var(--dim);letter-spacing:.02em}
.row .spec span{opacity:.5;margin:0 2px}
.card .t .d + .d{margin-top:2px;opacity:.75}
.home .wp-block-post-title, .home .entry-title{display:none!important}
.site-header{display:none!important}
.home .wp-site-blocks, .home .entry-content, .home .wp-block-post-content, .home main.wp-block-group, .home .is-layout-constrained{
max-width:none!important;width:auto!important;margin:0!important;padding:0!important}
.home .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:none!important}
body{margin:0!important;background:#030005}
.home .shell > p{display:none}
.price{font-size:15px;font-weight:800;color:#e8c24a;font-variant-numeric:tabular-nums}
.star{color:#e8c24a;letter-spacing:1px;font-size:12px}
.nostar{font-size:11px;color:var(--dim)}
.rev{font-size:11px;color:var(--mute)}
.card .price,.row .price{display:block;margin-top:4px}
.buy{display:inline-block;margin-top:8px;padding:8px 18px;border-radius:999px;
  background:linear-gradient(90deg,#8a6314,#b8892b 45%,#e8c24a);color:#1b1206;
  font-size:12.5px;font-weight:800;text-decoration:none}
.pr-bar{font-size:11px;color:var(--dim);padding:6px 0}
/* もとは <i>/<b> の飾りだった。本物のフォームにするので同じ見た目を当てる */
.search input{flex:1;height:34px;border-radius:8px;border:1px solid var(--line2);
  background:rgba(255,255,255,.04);color:var(--ink);padding:0 10px;font:inherit;font-size:12px;min-width:0}
.search button{height:34px;padding:0 14px;border-radius:8px;border:0;cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;color:#1b1206;
  background:linear-gradient(90deg,var(--v2),var(--v3))}
/* もとは .cats div。リンクにするので同じ見た目を当てる */
.cats a{display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:9px 12px;
  border-radius:8px;border:1px solid var(--line);font-size:12px;color:var(--ink);text-decoration:none}
.cats a:hover{border-color:var(--v3);color:var(--v3)}
.chips a{font-size:11px;padding:6px 14px;border-radius:999px;border:1px solid var(--line2);
  color:var(--mute);text-decoration:none}
.chips a:hover{border-color:var(--v3);color:var(--v3)}
/* 右のランキングは題名が灰色で読めなかった（2026-09-27 実測） */
.rk h4{margin:0;font-size:11.5px;line-height:1.5;font-weight:700;color:var(--ink)}
.row .buy{align-self:flex-start}
/* .badge は .row の中にしか当たっていない。詳細ページでは素の文字になる */
.badge{display:inline-block;font-size:10px;padding:4px 10px;border-radius:999px;
  background:rgba(232,194,74,.18);color:#f0d08a;font-weight:700}
/* 分類の札。楽天の商品写真は白地が多く、半透明の黒だと読めない */
.pr{background:rgba(12,8,3,.82);color:#f0d08a;font-weight:700;font-size:10px;
  padding:4px 9px;border:1px solid rgba(232,194,74,.35);backdrop-filter:blur(2px)}
/* 差し替えの枠は span。もとが div だった箱は block に戻す */
.kka{display:contents}
.card .t .d,.card .t .y,.row .meta,.rk .rev{display:block}
.row .meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
/* 一覧の行。写真集は題名が短かったが、楽天の商品名は長い。
   スマホだと題名6行・写真が小さく浮く形になっていた（2026-09-27 実測） */
.row{align-items:start}
/* **grid の子は既定で min-width:auto。** これを 0 にしないと、中の
   nowrap な1行が列を押し広げて、ページ全体が右にはみ出す（2026-09-27 実測） */
.row > *{min-width:0}
.row .cover{aspect-ratio:1;align-self:start}
/* **記事側のテーマが .sz-art .wp-block-post-content :where(h3) で18px・上30pxを当てている。**
   :where() は強さ0なので (0,2,0)。こちらも class を2つにしないと負ける（2026-09-27 実測） */
.rows .row h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:16px;margin:10px 0 0}
.row .spec{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:900px){
  .row{grid-template-columns:118px 1fr;gap:12px}
  .rows .row h3{-webkit-line-clamp:2;font-size:13.5px;margin-top:6px}
  .row .meta{margin-top:8px;flex-direction:column;align-items:flex-start;gap:2px}
  .row .buy{margin-top:8px;padding:7px 15px;font-size:12px}
  /* 店名まで入れると「25,846件…」と切れて、切れ端だけが残る */
  .row .mise{display:none}
}
/* 日本語の折り返し。既定だと「ブ／レスレット」「金運開運アイ／テム図鑑」のように
   語の途中で割れる。auto-phrase は文節で折る（Chrome119・Safari18〜）。
   効かないブラウザでも strict で行頭の約物だけは避けられる（2026-09-27 指摘「改行おかしいよ」） */
.hero-in p,.hero .sub2,h1.big,.card .t,.row h3,.rk h4,.lead,.panel p{
  word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
/* 記事と商品ページ。テーマの表がスマホで壊れる。
   table を display:block にしておきながら th は table-cell のままなので、
   セルが46px幅で縦に潰れる。しかも th の背景が明るいベージュで白文字＝読めない。
   本文にも左右の余白が無く、文字が画面のふちに貼りつく（2026-09-27 実測） */
.sz-art .wp-block-post-content{padding-left:16px;padding-right:16px}
.sz-art .wp-block-table{overflow-x:auto;margin:14px 0}
.sz-art .wp-block-table table{display:table;width:100%;border-collapse:collapse;font-size:12.5px;background:transparent}
.sz-art .wp-block-table thead,.sz-art .wp-block-table tbody{display:table-row-group}
/* テーマは .sz-art .wp-block-table tbody tr で block にしている。
   class を同じ数だけ並べないと勝てない */
.sz-art .wp-block-table tr,
.sz-art .wp-block-table thead tr,
.sz-art .wp-block-table tbody tr{display:table-row}
.sz-art .wp-block-table th,.sz-art .wp-block-table td{
  display:table-cell;border:1px solid var(--line);padding:9px 11px;text-align:left;
  vertical-align:top;color:var(--ink);background:transparent;line-height:1.6}
.sz-art .wp-block-table thead th{background:rgba(232,194,74,.12);color:#f0d08a;font-weight:700;white-space:nowrap}
.sz-art .wp-block-table tbody th{background:rgba(255,255,255,.04);font-weight:700}
.sz-art .wp-block-post-content > h2{margin:30px 0 12px}
@media(min-width:901px){.sz-art .wp-block-post-content{padding-left:0;padding-right:0}}

/* 記事の題名。テーマの既定だとスマホで6行になる */
.wp-block-post-title{font-size:clamp(21px,5.2vw,32px);line-height:1.45;word-break:auto-phrase}
/* **器のCSSをトップだけに絞ったら、記事側でテーマの alignfull が復活して
   画面より26px はみ出した**（100vw をスクロールバー込みで計算するため。2026-09-27 実測） */
body:not(.home) .wp-block-group.alignfull,
body:not(.home) .entry-content.alignfull,
body:not(.home) .wp-block-post-content .alignfull{
  width:auto;max-width:100%;margin-left:0;margin-right:0}
/* **記事の上の帯が明るいベージュのまま、文字だけ白になって読めない。**
   サイト全体が暗いので、帯も暗くそろえる（2026-09-27 指摘「詳細画面みづらい」） */
.sz-art > .sz-art-head,
.sz-art-head{background:linear-gradient(180deg,#1a1208,#0a0705);border-bottom:1px solid var(--line);padding:20px 16px 22px}
.sz-art > .sz-art-head .sz-crumb,
.sz-art-head .sz-crumb,.sz-art-head .sz-crumb a,
.sz-art-head .sz-art-meta,.sz-art-head .sz-art-meta *{color:var(--mute)}
.sz-art-head .sz-art-meta b{color:var(--ink)}
.sz-art > .sz-art-head .wp-block-post-title,
.sz-art-head .wp-block-post-title{color:var(--ink)}
/* PCで1行1152pxになって読みにくい。本文は絞って中央に置く（スマホは全幅のまま） */
@media(min-width:901px){
  body:not(.home) .wp-block-post-content > *,
  body:not(.home) .sz-art .wp-block-post-content > *{max-width:900px;margin-left:auto;margin-right:auto}
}
/* 商品の詳細ページ */
.d-grid{display:grid;grid-template-columns:320px 1fr;gap:26px;align-items:start;justify-items:stretch}
/* **テーマが justify-items を start にしているので、子が中身の幅まで縮む。**
   写真は中身が無い箱なので 2px になっていた（2026-09-27 実測） */
.d-grid > *{min-width:0;justify-self:stretch;width:100%}
.d-cover .cover{aspect-ratio:1;width:100%;border-radius:12px;border:1px solid var(--line)}
.d-kane{border:1px solid var(--line2);border-radius:12px;padding:16px;margin-top:16px}
.d-kane .lbl{margin:0 0 4px}
.d-nedan{font-size:30px;font-weight:800;line-height:1.2}
.d-nedan .price{font-size:30px}
.panel .cta{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px}
@media(max-width:900px){
  .d-grid{grid-template-columns:1fr;gap:16px}
  .d-nedan,.d-nedan .price{font-size:26px}
}
/* 見出しは「金運開運」「アイテム図鑑」の2つの塊でだけ折る */
h1.big span{display:inline-block}
@media(max-width:900px){h1.big{font-size:clamp(30px,8.6vw,48px)}}