*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#f3f0ea; --sub:#a9a39b; --mute:#857f77;   /* ★2026-09-21 社長決裁「少しだけ濃くする」＝読みにくさの解消。#6e6963 は黒地で 3.39:1（基準4.5）／新しい値は 4.64:1。--mute は字の色にしか使っていない（18か所すべて color:） */
  --paper:#0b0b0d; --wash:#141416; --line:#232326; --line-soft:#1b1b1e;
  --pink:#d9b25a; --pink-dim:rgba(217,178,90,.55);   /* 9/18 社長「ピンク…イメージと違う」＝差し色は金。名前は --pink のまま（読む箇所が多いため） */
  --pink-ink:var(--pink);   /* ★2026-09-21 追加。差し色を**字に使う時だけ**の色。飾り（線・地・影 39か所）は --pink のまま＝社長がOKされた光り方を変えない。
                               黒い地では今までどおり（--pink をそのまま使う）。白い地の3つの世界だけ、下で濃い値に差し替える。 */
  --adv:#d9b25a; --adv-hi:#e8c77a;
  --maxw:1240px;
  --sans:'Noto Sans JP',-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}
html{scroll-behavior:smooth;color-scheme:dark}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:13.5px;line-height:1.9;
  font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

.devbar{background:#3b0f24;color:#ffd9ec;font-size:10.5px;text-align:center;padding:6px 12px;letter-spacing:.08em}
.devbar b{color:#fff}

/* ---------- masthead ---------- */
.nav{background:var(--paper)}
.reload{margin-left:auto;flex:none;background:none;border:1px solid var(--line);color:var(--sub);
  font-family:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer;padding:9px 15px;
  display:inline-flex;align-items:center;gap:7px;line-height:1}
.reload:hover{border-color:var(--ink);color:var(--ink)}
.reload span{font-size:15px;line-height:1}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:96px;display:flex;align-items:center;gap:40px}
.logo{text-decoration:none;flex:none;display:block}
.logo b{display:block;font-weight:300;font-size:21px;letter-spacing:.2em;line-height:1;color:var(--ink)}
.logo .rule{height:1px;background:var(--pink-dim);margin:9px 0 7px}
.logo small{display:block;font-size:8.5px;letter-spacing:.42em;color:var(--pink-ink);text-indent:.1em}
.nav-links{display:flex;gap:26px;list-style:none;font-size:11.5px;flex:1;letter-spacing:.08em}
.nav-links a{color:var(--sub);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--pink)}
.cartbtn{flex:none;position:relative;background:none;border:none;color:var(--ink);cursor:pointer;
  min-height:44px;padding:6px 2px 6px 26px;font-size:11.5px;font-family:inherit;letter-spacing:.12em}   /* 44px＝指で押せる高さ（スマホ幅検査 9/17） */
.cartbtn:hover{opacity:.6}
.cartbtn svg{position:absolute;left:0;top:50%;margin-top:-8px;width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.3}
.badge{margin-left:7px;font-size:11px;color:var(--sub)}

/* ---------- category bar（スマホでは横に流す・1行） ---------- */
.catbar{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.92);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(8px)}
.catbar-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap}
.catbar a{white-space:nowrap;text-decoration:none;color:var(--sub);font-size:11.5px;letter-spacing:.08em;
  padding:14px 16px 13px;border-bottom:1px solid transparent;margin-bottom:-1px}
.catbar a:hover{color:var(--ink);border-bottom-color:var(--pink)}
.catbar a.on{color:var(--ink);border-bottom-color:var(--pink)}
.catbar a.cu{color:var(--pink-ink);letter-spacing:.16em;margin-left:auto;padding-left:18px;border-left:1px solid var(--line)}

/* ---------- hero（横に流れるシーン集） ---------- */
.hero{background:var(--wash);overflow:hidden;position:relative}
.hero::before,.hero::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.hero::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.hero::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.hero-track{display:flex;gap:3px;width:max-content;animation:heroflow 110s linear infinite}
.hero:hover .hero-track{animation-play-state:paused}
.hero-track img{height:360px;width:auto;display:block;object-fit:cover}
.hero-track .ph{height:360px;width:540px;display:grid;place-items:center;background:linear-gradient(150deg,#141416,#1e1e22)}
.hero-track .ph svg{width:70px;height:70px;opacity:.35}
@keyframes heroflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-track{animation:none}}
.hero-cap{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;padding:28px 2px 30px}
.hero-cap h1{font-weight:300;font-size:17px;letter-spacing:.18em;color:var(--ink)}
.hero-cap span{font-size:11px;letter-spacing:.14em;color:var(--sub)}

.notice{font-size:11.5px;color:var(--sub);letter-spacing:.06em;border:1px solid var(--line);padding:11px 16px;margin:0 0 10px}

/* ---------- 入口2つ（既製品／オーダーメイド） ---------- */
.lines{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:14px 0 6px}
.line{position:relative;display:block;text-decoration:none;overflow:hidden;background:var(--wash);aspect-ratio:16/9}
.line img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .25s,transform .6s}
.line:hover img{opacity:1;transform:scale(1.02)}
.line .ph{width:100%;height:100%;display:grid;place-items:center}
.line .ph svg{width:60px;height:60px;opacity:.3}
.line .tx{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(0deg,rgba(11,11,13,.86),transparent)}
.line .tx i{font-style:normal;display:block;font-size:9.5px;letter-spacing:.36em;color:var(--pink-ink)}
.line .tx b{display:block;font-weight:400;font-size:17px;letter-spacing:.14em;margin-top:4px}
.line .tx span{display:block;font-size:11px;color:var(--sub);letter-spacing:.06em;margin-top:3px}
@media(max-width:760px){.lines{grid-template-columns:1fr;gap:14px}}

/* ---------- category tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;padding:8px 0 4px}
.tiles.n3{grid-template-columns:repeat(3,1fr)}
.tile{text-decoration:none;display:block}
.tile .im{aspect-ratio:4/3;background:linear-gradient(150deg,#141416,#1e1e22);display:grid;place-items:center;
  transition:opacity .25s;overflow:hidden}
.tile .im img{width:100%;height:100%;object-fit:cover}
.tile:hover .im{opacity:.75}
.tile .im svg{width:34px;height:34px;opacity:.35}
.tile .tx{padding:11px 1px 0}
.tile .tx b{display:block;font-size:12px;font-weight:400;letter-spacing:.06em;line-height:1.6}
.tile .tx i{font-style:normal;font-size:10px;color:var(--mute);letter-spacing:.1em}

/* ---------- sections ---------- */
.sec{padding:70px 0 4px;scroll-margin-top:60px}
.sec-head{margin-bottom:26px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sec-head h2{font-weight:300;font-size:19px;letter-spacing:.24em;display:inline-block}
.sec-head h2 a{color:inherit;text-decoration:none}
.sec-head h2 a:hover{opacity:.62}
.sec-head .cnt{font-size:10.5px;color:var(--mute);letter-spacing:.14em}
/* ★14px にした（2026-09-12）。スマホ390pxの実測で12pxが「読みにくい」に出た（しきい値14px）。
   ★効く場所は2つ: ①ネオンサインの節の説明文（今回足した物） ②依頼フォームの説明文
   （`request_form_html` の <p class="lead"> が sec-head の中にある）＝art / gift でもここだけ大きくなる。
   これで4ページすべて「読みにくい段落 0個」になった。 */
.sec-head .lead{font-size:14px;color:var(--sub);max-width:44em;line-height:1.95;flex-basis:100%}
.more{margin-top:34px;text-align:center}
.more a{display:inline-block;text-decoration:none;color:var(--ink);font-size:11.5px;letter-spacing:.14em;
  border:1px solid var(--line);padding:14px 30px;transition:background .2s,border-color .2s}
.more a:hover{background:var(--wash);border-color:var(--pink)}
.more a i{font-style:normal;color:var(--mute);font-size:10.5px;margin-left:10px;letter-spacing:.1em}

/* ---------- オーダーメイドの表（部屋 × モチーフ） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chips span{font-size:10.5px;letter-spacing:.1em;color:var(--mute);margin-right:6px;align-self:center}
.chips button{font-family:inherit;font-size:11px;letter-spacing:.08em;color:var(--sub);background:none;
  border:1px solid var(--line);padding:7px 13px;cursor:pointer;line-height:1.4}
.chips button.on{color:var(--paper);background:var(--pink);border-color:var(--pink)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.mcell{display:block;text-decoration:none}
.mcell .im{aspect-ratio:4/5;background:linear-gradient(150deg,#141416,#1e1e22);overflow:hidden;display:grid;place-items:center}
.mcell .im img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.mcell:hover .im img{opacity:.8}
.mcell .im svg{width:34px;height:34px;opacity:.3}
.mcell .tx{padding:9px 1px 0;font-size:11px;color:var(--sub);letter-spacing:.06em}
.mcell .tx b{font-weight:400;color:var(--ink)}
.mcell[hidden]{display:none}
@media(max-width:1000px){.mgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px}}

/* ---------- サイズ・流れ（オーダーメイド） ---------- */
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px}
.size{border:1px solid var(--line);padding:18px 18px 16px}
.size b{display:block;font-weight:300;font-size:26px;letter-spacing:.1em;line-height:1}
.size i{font-style:normal;display:block;font-size:12px;margin-top:8px;color:var(--ink)}
.size span{display:block;font-size:11px;color:var(--sub);margin-top:2px}
.size em{font-style:normal;display:block;font-size:11px;color:var(--pink-ink);margin-top:10px;letter-spacing:.08em}
@media(max-width:760px){.sizes{grid-template-columns:1fr 1fr;gap:12px}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.step i{font-style:normal;display:block;font-size:10px;letter-spacing:.3em;color:var(--pink-ink)}
.step b{display:block;font-weight:400;font-size:14px;letter-spacing:.1em;margin-top:6px}
.step p{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.9}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:18px}}
.cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta button,.cta a.btn{font-family:inherit;font-size:12px;letter-spacing:.16em;cursor:pointer;text-decoration:none;
  padding:15px 30px;border:1px solid var(--pink);background:var(--pink);color:var(--paper);line-height:1.4;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.cta button:hover,.cta a.btn:hover{background:#e8c77a}
.cta small{font-size:11px;color:var(--sub);letter-spacing:.06em}

/* ---------- 依頼フォーム（オーダーメイド） ---------- */
.req{max-width:640px;display:flex;flex-direction:column;gap:16px}
.req label{display:block;font-size:11.5px;letter-spacing:.08em;color:var(--sub)}
.req label i{font-style:normal;font-size:9.5px;color:var(--pink-ink);margin-left:6px;letter-spacing:.14em}
.req input[type=text],.req input[type=email],.req select,.req textarea{display:block;width:100%;margin-top:6px;
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--wash);border:1px solid var(--line);padding:11px 12px;line-height:1.5}
.req textarea{resize:vertical;min-height:120px}
.req input:focus,.req select:focus,.req textarea:focus{outline:1px solid var(--pink);outline-offset:-1px}
.req-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.req-file input{display:block;margin-top:8px;font-size:12px;color:var(--sub)}
.req-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.req-thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line)}
.req-agree{display:flex;gap:8px;align-items:flex-start;font-size:12px}
.req-agree input{width:16px;height:16px;margin-top:3px;flex:none}
.req-agree a{color:var(--ink)}
.req .cta{margin-top:6px}
.req button[disabled]{opacity:.5;cursor:wait}
.req-done{max-width:640px;border:1px solid var(--pink);padding:22px 24px;font-size:13px;line-height:2}
.req-done b{display:block;font-weight:400;font-size:15px;letter-spacing:.1em;margin-bottom:6px}
@media(max-width:760px){.req-2{grid-template-columns:1fr}}
/* ---------- 依頼フォーム＝絵とボタンで選ぶ（2026-09-17 社長決裁の設計） ---------- */
.req-pick{max-width:760px;gap:30px}
.req [hidden]{display:none!important}
.pk{border-top:1px solid var(--line-soft);padding-top:18px}
.pk-h{display:block;font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--ink);margin-bottom:12px}
.pk-h i{font-style:normal;color:var(--pink-ink);font-size:10px;letter-spacing:.3em;margin-right:10px}
.pk-tip{font-size:12px;color:var(--sub);margin:8px 0 0;line-height:1.9}
.pk-alt{display:flex;gap:8px;align-items:center;font-size:12px;margin-top:12px}
.pk-alt input{width:16px;height:16px}
.pk-note{margin-top:10px}
.pk-sub{display:block;font-size:11px;color:var(--sub);margin:4px 0 2px;letter-spacing:.02em}
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pk-grid label{position:relative;display:block;cursor:pointer;border:1px solid var(--line);background:var(--wash);padding:0 0 10px}
.pk-grid input{position:absolute;opacity:0;width:1px;height:1px}
.pk-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pk-place img{aspect-ratio:4/5}
.pk-grid span{display:block;font-size:12.5px;letter-spacing:.1em;margin:10px 12px 0;color:var(--ink)}
.pk-grid small{display:block;font-size:11px;color:var(--sub);letter-spacing:.02em;margin-top:2px}
.pk-grid label.pk-txt{display:grid;place-items:center;min-height:96px;padding:12px;text-align:center}
.pk-grid label.pk-txt span{margin:0}
.pk-grid label.on,.pk-grid label:has(input:checked){border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.pk-pills{display:flex;flex-wrap:wrap;gap:8px}
.pk-pills label{position:relative;cursor:pointer}
.pk-pills input{position:absolute;opacity:0;width:1px;height:1px}
.pk-pills span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:9px 14px;font-size:12px;letter-spacing:.08em;min-height:40px;box-sizing:border-box}
.pk-pills span em{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.pk-pills label.on span,.pk-pills label:has(input:checked) span{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.pk-pills label.pk-chk input{position:static;opacity:1;width:16px;height:16px}
.pk-pills label.pk-chk span{border:none;padding:0 0 0 6px;min-height:0}
.pk-props .prop{border:1px solid var(--line);padding:14px 16px;margin-top:10px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:12px;position:relative}
.pk-props .prop input{position:absolute;opacity:0;width:1px;height:1px}
.pk-props .prop i{font-style:normal;color:var(--pink-ink);letter-spacing:.2em;font-size:12px;padding-top:2px}
.pk-props .prop b{display:block;font-weight:400;font-size:13.5px;line-height:1.7}
.pk-props .prop small{display:block;font-size:12px;color:var(--sub);line-height:1.8;margin-top:2px}
.pk-props .prop.on,.pk-props .prop:has(input:checked){border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.pk-props .pq{border:1px solid var(--pink);padding:14px 16px;margin-top:12px;font-size:13px;line-height:1.9}
.pk-props .pq input{display:block;width:100%;margin-top:8px;font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);background:var(--wash);color:var(--ink)}
.pk-props .psz{font-size:12.5px;color:var(--sub);margin-top:12px;line-height:1.9}
.pk-props .psz b{font-weight:400;color:var(--ink)}
/* ---- 依頼欄の作り直し（2026-09-18・流れを先に見せる／写真が主役／送るボタンは最初から） ---- */
.rq-flow{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);max-width:900px}
.rq-flow li{padding:16px 18px;border-left:1px solid var(--line)}
.rq-flow li:first-child{border-left:none}
.rq-flow i{font-style:normal;color:var(--pink-ink);font-size:11px;letter-spacing:.3em}
.rq-flow b{display:block;font-weight:400;font-size:14.5px;letter-spacing:.1em;margin:6px 0 4px;color:var(--ink)}
.rq-flow span{display:block;font-size:12px;color:var(--sub);line-height:1.8}
.req-pick{max-width:900px;gap:22px}
.rq-drop{position:relative;display:block;border:1.5px dashed var(--pink);background:var(--wash);padding:30px 20px;text-align:center;cursor:pointer;transition:background .15s}
.rq-drop:hover,.rq-drop.over{background:rgba(217,178,90,.08)}
.rq-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.rq-drop b{display:inline-block;background:var(--pink);color:#fff;font-weight:500;font-size:14px;letter-spacing:.16em;padding:12px 30px;min-height:44px;box-sizing:border-box}
.rq-drop span{display:block;font-size:12px;color:var(--sub);margin-top:10px;letter-spacing:.04em}
.req-thumbs{margin-top:10px}
.req-thumbs img{width:88px;height:88px}
.rq-opt{font-size:11px;color:var(--sub);letter-spacing:.04em;margin-left:12px}
.rq-row{display:grid;grid-template-columns:96px 1fr;gap:10px 14px;align-items:start;padding:10px 0;border-top:1px dashed var(--line-soft)}
.rq-row:first-of-type{border-top:none}
.rq-k{font-size:12.5px;color:var(--ink);letter-spacing:.1em;padding-top:11px}
.pk-pills span small{font-size:10.5px;color:var(--sub);margin-left:2px}
.rq-thumbpills span img{width:48px;height:36px;object-fit:cover;margin:-4px 0}
.rq-sizes span{flex-direction:column;align-items:flex-start;gap:0;line-height:1.4;padding:7px 14px}
.rq-sizes span small{margin-left:0}
.rq-ai{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.rq-ai button{background:none;border:1px solid var(--line);color:var(--ink);padding:10px 18px;font:inherit;font-size:12.5px;letter-spacing:.08em;cursor:pointer;min-height:44px}
.rq-ai small{font-size:11.5px;color:var(--sub);flex:1 1 260px;line-height:1.7}
.rq-send button{font-size:14px;padding:16px 34px;letter-spacing:.14em}
.req input[type=checkbox]{color-scheme:light;accent-color:var(--pink);width:18px;height:18px}   /* 黒い四角に見えた（9/18 撮影で確認） */
@media(max-width:760px){
  .rq-flow{grid-template-columns:1fr}
  .rq-flow li{border-left:none;border-top:1px solid var(--line)}
  .rq-flow li:first-child{border-top:none}
  .rq-row{grid-template-columns:1fr;gap:6px}
  .rq-k{padding-top:0}
  .rq-send button{width:100%}
}
@media(max-width:640px){.pk-grid{grid-template-columns:1fr 1fr;gap:8px}.pk-grid label.pk-txt{min-height:72px}}

/* ---------- カテゴリページ ---------- */
.cat-head{padding:34px 0 6px}
.cat-head h1{font-weight:300;font-size:22px;letter-spacing:.22em}
.cat-head .cnt{font-size:10.5px;color:var(--mute);letter-spacing:.14em;margin-left:16px}
.cat-head .lead{font-size:12.5px;color:var(--sub);max-width:46em;margin-top:14px;line-height:2}
.cat-body{padding:30px 0 4px}
.cat-empty{border:1px solid var(--line);padding:34px 24px;text-align:center;font-size:12px;color:var(--sub);letter-spacing:.06em;line-height:2}
.cat-other{padding:70px 0 0}
/* ★2026-09-21 カテゴリごとの話。**新しい見た目を作らず**、下の「ほかのカテゴリ」と同じ見出しの形・
   同じ本文の形（.cat-head .lead）を使い回す。 */
.cat-note{padding:64px 0 0}
.cat-note p{font-size:12.5px;color:var(--sub);max-width:46em;margin-top:18px;line-height:2}
.cat-other h2,.cat-note h2{font-weight:300;font-size:15px;letter-spacing:.2em;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.cat-other .tiles{margin-top:22px}
@media(max-width:760px){ .cat-head{padding:22px 0 4px} .cat-head h1{font-size:18px;letter-spacing:.16em}
  .cat-body{padding:20px 0 4px} .cat-other{padding:46px 0 0} .cat-note{padding:44px 0 0} }

/* ---------- products ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:46px 26px}
.item{display:flex;flex-direction:column}
.item .im{aspect-ratio:1/1;background:var(--wash);overflow:hidden;display:grid;place-items:center}
.item .im img{width:100%;height:100%;object-fit:cover}
.item .im svg{width:36px;height:36px;opacity:.3}
.item .nm{font-size:12.5px;margin-top:12px;line-height:1.7}
.item .nm a{text-decoration:none}
.item .sp{font-size:11px;color:var(--sub);margin-top:3px}
.item .price{font-size:12px;margin-top:8px;letter-spacing:.04em}
.item .price.na{color:var(--mute)}
.item .buy{margin-top:10px}
.item .buy button,.item .buy a{font-family:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer;text-decoration:none;
  display:inline-block;padding:10px 18px;border:1px solid var(--line);background:none;color:var(--ink)}
.item .buy button:hover,.item .buy a:hover{border-color:var(--pink)}

/* ---------- 作品カード（絵が主役・比率が違っても切らない） ---------- */
.art{display:flex;flex-direction:column}
.art .im{aspect-ratio:1/1;background:#000;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line-soft)}
.art .im img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.art:hover .im img{transform:scale(1.03)}
.art .im svg{width:36px;height:36px;opacity:.3}
.art .nm{font-size:13px;margin-top:12px;line-height:1.7;letter-spacing:.06em}
.art .nm a{text-decoration:none}
.art .k{font-size:9.5px;letter-spacing:.3em;color:var(--pink-ink);margin-top:10px}
.art .sp{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.8}
.art .price{font-size:13px;margin-top:8px;letter-spacing:.04em}
.art .price small{font-size:10px;color:var(--sub);margin-left:6px}
.art .price.na{color:var(--mute)}
.art .buy{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.art .buy a,.art .buy button{font-family:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer;text-decoration:none;
  padding:10px 16px;border:1px solid var(--line);background:none;color:var(--ink);
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.art .buy a:hover,.art .buy button:hover{border-color:var(--pink)}
.art .buy .pri{background:var(--pink);border-color:var(--pink);color:var(--paper)}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 22px}
@media(max-width:1000px){.agrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.agrid{grid-template-columns:repeat(2,1fr);gap:26px 12px}}

/* ---------- Before / After（オーダーメイドの実例） ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}
.ba figure{margin:0}
.ba .im{aspect-ratio:1/1;background:#000;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line-soft)}
.ba .im img{width:100%;height:100%;object-fit:contain}
.ba figure.rm .im img{object-fit:cover}
.ba figcaption{font-size:10.5px;letter-spacing:.3em;color:var(--pink-ink);margin-top:10px}
.ba figcaption span{display:block;letter-spacing:.06em;color:var(--sub);font-size:11.5px;margin-top:2px}
@media(max-width:640px){.ba{gap:10px}}

/* ---------- ネオンサイン（カテゴリ1件＝絵と言葉の2列） ---------- */
.signrow{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.signrow .im{aspect-ratio:4/3;background:#0c0c10;overflow:hidden;border:1px solid var(--line-soft)}
.signrow .im img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.signrow .im:hover img{opacity:.88}
.signrow .tx .cat-empty{text-align:left;margin-top:0}
@media(max-width:760px){.signrow{grid-template-columns:1fr;gap:16px}}

/* ---------- 部屋に掛けると（実物の合成写真） ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.room{display:block;text-decoration:none}
.room .im{aspect-ratio:3/2;background:var(--wash);overflow:hidden}
.room .im img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.room:hover .im img{opacity:.85}
.room .tx{font-size:11px;color:var(--sub);margin-top:8px;letter-spacing:.06em}
.room .tx b{font-weight:400;color:var(--ink)}
@media(max-width:760px){.rooms{grid-template-columns:1fr 1fr;gap:12px}}

/* ---------- 商品ページ ---------- */
.pdp{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;padding:30px 0 0}
.pdp .main{background:#000;border:1px solid var(--line-soft);display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden}
.pdp .main img{width:100%;height:100%;object-fit:contain}
.pdp .subs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pdp .subs .im{aspect-ratio:3/2;background:var(--wash);overflow:hidden}
.pdp .subs img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-weight:300;font-size:22px;letter-spacing:.16em}
.pdp .k{font-size:9.5px;letter-spacing:.3em;color:var(--pink-ink);margin-bottom:8px}
.pdp .price{font-size:18px;margin-top:16px;letter-spacing:.04em}
.pdp .price small{font-size:11px;color:var(--sub);margin-left:8px}
.pdp .price.na{color:var(--mute);font-size:14px}
.pdp .ptable{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;align-items:baseline}
.pdp .ptable span{color:var(--sub);font-size:12.5px;letter-spacing:.06em}.pdp .ptable b{font-weight:400;font-size:16px}
.pdp .ptable small{grid-column:1/-1;margin:2px 0 0;font-size:11px;color:var(--sub)}
.pdp .desc{font-size:12.5px;color:var(--sub);line-height:2;margin-top:18px;white-space:pre-line}
.pdp .opt{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--sub);line-height:2}
.pdp .opt b{font-weight:400;color:var(--ink);display:block;letter-spacing:.1em}
.pdp .cta{margin-top:22px}
@media(max-width:760px){.pdp{grid-template-columns:1fr;gap:22px;padding:16px 0 0}}
/* ★2026-09-25 社長（スマホ）「下の方でチェックボックスとか色を変えたり…スクロールすると上の画像が上に行っちゃうから
   何回も下に行って押して上に戻って確認して…画像は下にスクロールしても画面内に収まるようにしてほしい」
   → スマホだけ、絵の枠をカテゴリの帯（sticky・高さ49px）の下に貼り付ける。枠は画面の高さの40%まで（選ぶ欄が見える余白を残す）。
     左の列の div を display:contents にして、.main を .pdp（背の高い格子）の直接の子にする＝sticky が効く。
     左右のすき間は box-shadow で地の色を横に伸ばし、下を流れる文字が透けないようにする */
@media(max-width:760px){.pdp>div:first-child{display:contents}
.pdp .main{position:sticky;top:49px;z-index:40;width:min(100%,40vh);justify-self:center;
box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(-10px -100vmax)}}

/* ---------- 運営店舗 ---------- */
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fam{display:block;text-decoration:none;border:1px solid var(--line);padding:22px 22px 20px;transition:border-color .2s}
.fam:hover{border-color:var(--pink)}
.fam .k{font-size:9.5px;letter-spacing:.34em;color:var(--pink-ink)}
.fam .n{font-size:15px;letter-spacing:.1em;margin-top:6px}
.fam .d{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.9}
@media(max-width:760px){.family{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{margin-top:90px;border-top:1px solid var(--line);padding:56px 0 34px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
/* ★2026-09-20 夜 h4 → h2 に変えた。見出しの段を飛ばしていた（h1 → h4）＝読み上げの人に
   「間に2段あるはず」と伝わる。W3C の文法チェックで全ページ error（サインアーク desktop-c8 と同じ形）。
   見た目は変えない＝ここで小さく灰色にしているので、段だけ正しくすればよい。 */
.foot h2{font-size:10.5px;letter-spacing:.24em;color:var(--mute);font-weight:400;margin-bottom:14px}
.foot ul{list-style:none;font-size:11.5px;line-height:2.3}
.foot ul a{color:var(--sub);text-decoration:none}
.foot ul a:hover{color:var(--ink)}
.foot-logo b{display:block;font-weight:300;font-size:17px;letter-spacing:.2em}
.foot-logo small{display:block;font-size:8.5px;letter-spacing:.42em;color:var(--pink-ink);margin-top:6px}
.corp-fold{margin-top:18px}
.corp-fold summary{cursor:pointer;font-size:11px;color:var(--sub);letter-spacing:.14em;list-style:none}
.corp-fold summary::-webkit-details-marker{display:none}
.corp-fold summary::after{content:' ＋';color:var(--mute)}
.corp-fold[open] summary::after{content:' −'}
.corp{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:11px;color:var(--sub);margin-top:12px}
.corp dt{color:var(--mute);letter-spacing:.1em}
.foot-btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10.5px;color:var(--mute);
  letter-spacing:.1em;margin-top:44px;padding-top:20px;border-top:1px solid var(--line-soft)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}

/* ---------- 規約ページ ---------- */
.policy{max-width:820px;margin:0 auto;padding:40px 32px 0}
.policy h1{font-weight:300;font-size:21px;letter-spacing:.2em}
.policy .dates{font-size:11px;color:var(--mute);margin-top:10px;letter-spacing:.1em}
.policy .lead{font-size:12.5px;color:var(--sub);margin-top:22px;line-height:2}
.policy section{margin-top:40px;scroll-margin-top:70px}
.policy h2{font-weight:400;font-size:14px;letter-spacing:.14em;padding-bottom:10px;border-bottom:1px solid var(--line)}
.policy h3{font-weight:400;font-size:12.5px;margin-top:18px;letter-spacing:.08em}
.policy p{font-size:12.5px;margin-top:12px;line-height:2;color:var(--sub)}
.policy ul,.policy ol{font-size:12.5px;margin:12px 0 0 1.4em;line-height:2;color:var(--sub)}
.policy strong{color:var(--ink);font-weight:400}
.policy-box{border:1px solid var(--line);padding:14px 18px;margin-top:14px}
.policy-box p{margin-top:2px}

/* ---------- 白い地×黒い額（2026-09-18 社長決裁「ネオンアートマフィアにしよう…白背景に、黒ベースのカードの中に、商品を光らせておく…ネオンサインとギフトの方も手直しして」）
   写経元＝neonartmafia.com/us/shop（実物を撮って確認）：地はほぼ白・ナビも白・商品の絵は暗い四角の中で光る・名前と値段は白い面・買うボタンは黒。
   ＝art / sign / gift の3つを同じ形に。黒は「絵の額」と「一番下の帯（フッター）」にだけ残す。入口（3枚の扉）は写真の全面なので触らない。 ---------- */
body.w-art,body.w-sign,body.w-gift{--ink:#17171a;--sub:#57534e;--mute:#746f68;--paper:#f6f5f3;--wash:#ffffff;--line:#dedad4;--line-soft:#ebe8e4;
  --pink:#a87a1c;--pink-ink:#906818;--pink-dim:rgba(168,122,28,.45);--frame:#0e0e11;color-scheme:light;--adv:#d9b25a;--adv-hi:#e8c77a}
/* ★2026-09-21 社長決裁「少しだけ濃くする」＝白い地の上で小さい字が薄すぎた分だけを直す（色味は変えていない・明るさだけ）。
   --mute #8a847d→#746f68（3.39:1→4.57:1）／字に使う差し色 --pink-ink（飾りの --pink は据え置き）。 */
/* 差し色は世界ごと＝ロゴの光の色（9/18 社長決裁：アート=A 金の縁／サイン=サイン3 水色の輪／ギフト=ギフト3 金の光の線） */
body.w-sign{--pink:#1d86a8;--pink-ink:#1a7897;--pink-dim:rgba(29,134,168,.45);--adv:#8fd8f0;--adv-hi:#b5e6f6}
body.w-gift{--pink:#9c7640;--pink-ink:#8c6a39;--pink-dim:rgba(156,118,64,.45);--adv:#e3c690;--adv-hi:#eed6ad}
.logo{min-width:0;flex:0 1 auto}
.logo img{display:block;height:auto;width:auto;max-height:44px;max-width:100%}   /* 高さ固定だと狭い幅で横に潰れた（9/18 親ロゴ・390幅で23%） */
.foot-logo img{display:none;height:auto;width:auto;max-height:40px;max-width:100%}
.foot-logo .fl-txt{display:block}.foot-logo .fl-txt img{display:block}
/* 入口の扉＝それぞれの子ロゴ（黒い地は screen で消える）。9/18 社長決裁の親3の見本のとおり */
.door .tx b img,.door:hover .tx b img{position:static;inset:auto;display:block;height:76px;width:auto;max-width:100%;object-fit:contain;transform:none;transition:none;mix-blend-mode:screen;margin:6px 0 2px}   /* .door img（扉の写真を全面に敷く指定）が子ロゴにも効いて文字に重なった */
@media(max-width:760px){.door .tx b img{height:40px}}
body.w-art .foot-logo .fl-art,body.w-sign .foot-logo .fl-sign,body.w-gift .foot-logo .fl-gift{display:block}
body.w-art .foot-logo .fl-txt,body.w-sign .foot-logo .fl-txt,body.w-gift .foot-logo .fl-txt{display:none}
@media(max-width:760px){.logo img{max-height:34px}
  .policy .lead,.policy p,.policy ul,.policy ol{font-size:14px}}   /* 規約の本文が12.5pxで読みにくいに出た（9/18 390幅） */
html:has(body.w-art),html:has(body.w-sign),html:has(body.w-gift){color-scheme:light}
body.w-art .nav,body.w-sign .nav,body.w-gift .nav{background:#fff}
body.w-art .catbar,body.w-sign .catbar,body.w-gift .catbar{background:rgba(255,255,255,.95)}
/* 絵の額＝黒。絵はこの中で光る */
body.w-art .art .im,body.w-sign .art .im,body.w-gift .art .im,
body.w-art .ba .im,body.w-sign .ba .im,body.w-gift .ba .im,
body.w-art .pdp .main,body.w-sign .pdp .main,body.w-gift .pdp .main,
body.w-art .pdp .subs .im,body.w-sign .pdp .subs .im,body.w-gift .pdp .subs .im,
body.w-art .tile .im,body.w-sign .tile .im,body.w-gift .tile .im,
body.w-art .mcell .im,body.w-sign .mcell .im,body.w-gift .mcell .im,
body.w-art .signrow .im,body.w-sign .signrow .im,body.w-gift .signrow .im,
body.w-art .room .im,body.w-sign .room .im,body.w-gift .room .im,
body.w-art .line,body.w-sign .line,body.w-gift .line,
body.w-art .hero-track .ph,body.w-sign .hero-track .ph,body.w-gift .hero-track .ph{background:var(--frame);border-color:var(--frame)}
body.w-art .hero,body.w-sign .hero,body.w-gift .hero{background:var(--frame)}
/* 商品カード＝白い面の上に黒い額（Mafia の一覧と同じ並び：額→名前→値段） */
body.w-art .art,body.w-sign .art,body.w-gift .art{background:#fff;padding-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px -16px rgba(0,0,0,.28)}
body.w-art .art>p,body.w-sign .art>p,body.w-gift .art>p,
body.w-art .art>div:not(.im),body.w-sign .art>div:not(.im),body.w-gift .art>div:not(.im){margin-left:14px;margin-right:14px}
body.w-art .art .im,body.w-sign .art .im,body.w-gift .art .im{border:none}
body.w-art .art .k,body.w-sign .art .k,body.w-gift .art .k{margin-top:14px}
/* 押すボタン＝黒（Mafia の ADD TO CART）。桃色は小さな印と選んだ時の縁にだけ使う */
body.w-art .art .buy .pri,body.w-sign .art .buy .pri,body.w-gift .art .buy .pri,
body.w-art .cta button,body.w-sign .cta button,body.w-gift .cta button,
body.w-art .cta a.btn,body.w-sign .cta a.btn,body.w-gift .cta a.btn,
body.w-art .add,body.w-sign .add,body.w-gift .add,
body.w-art .checkout,body.w-sign .checkout,body.w-gift .checkout,
body.w-art .rq-drop b,body.w-sign .rq-drop b,body.w-gift .rq-drop b{background:var(--ink);border-color:var(--ink);color:#fff}
body.w-art .cta button:hover,body.w-sign .cta button:hover,body.w-gift .cta button:hover,
body.w-art .cta a.btn:hover,body.w-sign .cta a.btn:hover,body.w-gift .cta a.btn:hover,
body.w-art .add:hover,body.w-sign .add:hover,body.w-gift .add:hover{background:var(--pink);border-color:var(--pink)}
body.w-art .cta a.btn[style*="background:none"],body.w-sign .cta a.btn[style*="background:none"],body.w-gift .cta a.btn[style*="background:none"]{background:none!important;color:var(--ink)!important;border-color:var(--ink)}
body.w-art .add.done,body.w-sign .add.done,body.w-gift .add.done{background:none;color:var(--ink)}
body.w-art .chips button.on,body.w-sign .chips button.on,body.w-gift .chips button.on{color:#fff}
/* 白い面に載せる箱 */
body.w-art .size,body.w-sign .size,body.w-gift .size,
body.w-art .fam,body.w-sign .fam,body.w-gift .fam,
body.w-art .rq-flow,body.w-sign .rq-flow,body.w-gift .rq-flow,
body.w-art .cat-empty,body.w-sign .cat-empty,body.w-gift .cat-empty{background:#fff}
body.w-art .rq-drop,body.w-sign .rq-drop,body.w-gift .rq-drop{background:#fff}
body.w-art .rq-drop:hover,body.w-sign .rq-drop:hover,body.w-gift .rq-drop:hover{background:#f7f4ee}
body.w-art .req,body.w-sign .req,body.w-gift .req{color:var(--ink)}
/* 一番下の帯は黒のまま＝サイトの顔 */
body.w-sign .foot{--pink:#8fd8f0}body.w-gift .foot{--pink:#e3c690}
.foot{--ink:#f3f0ea;--sub:#a9a39b;--mute:#857f77;--line:#232326;--line-soft:#1b1b1e;--pink:#d9b25a;--pink-ink:#d9b25a;
  background:#0b0b0d;color:var(--ink);color-scheme:dark}
body.w-art .devbar,body.w-sign .devbar,body.w-gift .devbar{background:#f1e6cc;color:#5a4516}

/* ---------- 明るい壁（2026-09-18 社長「背景が全部黒でカードも黒でメリハリがない…やりすぎるとアートがぼやける」）
   参照＝Neon Designs（同じUVプリント×LEDの店＝ナビ・写真帯・依頼の帯は黒、商品の並びだけ白い面）・Giant Sculptures（一覧は明るい灰色の面）
   ＝黒は「ネオンの世界」として上下の帯に残し、選ぶ所だけ画廊の壁の色に。絵の枠（.im）は黒のまま＝絵は暗い額の中で光る ---------- */
.wall-off{--ink:#1c1a18;--sub:#6b645d;--mute:#6b645d;--paper:#f2efea;--wash:#e8e4de;--line:#d9d3cb;--line-soft:#e4dfd8;
  /* ★2026-09-21 --mute #958d85 は壁の色の上で 2.58:1 しかなかった（今回の測定12本には出ていない＝98本のページで使われているのに数えられていなかった）→ 4.60:1 に */
  --pink:#d6568c;--pink-ink:#b82d67;--pink-dim:rgba(214,86,140,.5);
  background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;margin-top:34px;padding:8px 0 80px;position:relative}
.wall-off + .wall-off-end{height:0}
.wall-off .art .im,.wall-off .pdp .main,.wall-off .tile .im,.wall-off .signrow .im,.wall-off .rooms .im{background:#101012;border-color:#101012}
.wall-off .art .im{box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.wall-off .cta button,.wall-off .cta a.btn{color:#fff}
.wall-off .cta a.btn[style*="background:none"]{color:var(--ink)!important;border-color:var(--ink)}
.wall-off .art .buy a,.wall-off .art .buy button{color:var(--ink);border-color:var(--line)}
.wall-off .art .buy .pri{color:#fff}
.wall-off .req input[type=text],.wall-off .req input[type=email],.wall-off .req select,.wall-off .req textarea{background:#fff;color:var(--ink)}
.wall-off .pdp-sel select{background:#fff;color:var(--ink)}
.wall-off .add{color:#fff}.wall-off .add.done{color:var(--ink)}
.wall-off .sizes .size{background:#fff}
.wall-off select,.wall-off input{color-scheme:light}
@media(max-width:760px){.wall-off{border-radius:14px 14px 0 0;margin-top:22px}}

/* ---------- 入口（2つの扉） ---------- */
.gate{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 215px)}
.gate.n3{grid-template-columns:repeat(3,1fr)}
.door{position:relative;display:block;text-decoration:none;overflow:hidden;min-height:420px}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.door:hover img{transform:scale(1.03)}
.door .sh{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.1) 100%)}
.door.gift .sh{background:linear-gradient(0deg,rgba(43,38,34,.7) 0%,rgba(43,38,34,.15) 55%,rgba(43,38,34,.05) 100%)}
.door.sign .sh{background:linear-gradient(0deg,rgba(4,6,14,.8) 0%,rgba(4,6,14,.28) 55%,rgba(4,6,14,.1) 100%)}
.door.sign .tx i{color:#9fe8ff}
.door .tx{position:absolute;left:0;right:0;bottom:0;padding:34px 36px 38px;color:#fff}
.door .tx i{font-style:normal;display:block;font-size:10px;letter-spacing:.4em;color:var(--pink-ink)}
.door.gift .tx i{color:#f3dfb0}
.door .tx b{display:block;font-weight:300;font-size:34px;letter-spacing:.2em;margin-top:8px;line-height:1.2}
.door .tx span{display:block;font-size:12px;letter-spacing:.1em;margin-top:10px;opacity:.9}
.door .tx em{font-style:normal;display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.18em;border:1px solid rgba(255,255,255,.6);padding:11px 22px}
.door:hover .tx em{background:#fff;color:#0b0b0d}

/* ---------- オーダーメイドの入口（9/18） ---------- */
.om{padding:34px 0 30px;border-bottom:1px solid var(--line-soft)}
.om-in{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center}
.om h1{font-weight:400;font-size:12px;letter-spacing:.24em;color:var(--pink-ink);margin:0 0 10px}
.om-head{font-size:25px;line-height:1.55;font-weight:400;letter-spacing:.04em;margin:0 0 16px;color:var(--ink);word-break:auto-phrase;text-wrap:balance}
.om-pts{list-style:none;padding:0;margin:0 0 16px}.om-pts li{position:relative;padding-left:22px;margin:4px 0;font-size:14px}
.om-pts li:before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
.om-price{font-size:14px;margin:0 0 16px}.om-price small{display:block;font-size:12px;color:var(--sub)}
.om-cta{display:flex;gap:10px;flex-wrap:wrap}.om-cta .btn,.om-cta button{padding:14px 20px;font-size:13px;letter-spacing:.08em;cursor:pointer;font-family:inherit}
.om-cta .btn{background:var(--pink);color:#0b0b0d;text-decoration:none;border:1px solid var(--pink)}
.om-cta button{background:none;color:var(--ink);border:1px solid var(--line)}
.promise{padding:28px 0 8px}.promise h2{font-size:20px;margin:0 0 14px}.promise ol{list-style:none;padding:0;margin:0;display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.promise li{border-top:1px solid var(--line,#ddd);padding-top:10px}.promise b{display:block;font-size:15px;margin-bottom:4px}.promise p{font-size:13.5px;margin:0;color:var(--sub)}.promise a{color:inherit}
.story{position:relative;background:#171310;color:#f3ece2;margin:0}.story-im img{display:block;width:100%;height:auto}.story-tx{position:absolute;left:0;top:0;bottom:0;width:38%;background:linear-gradient(90deg,rgba(14,11,9,.82) 0,rgba(14,11,9,.62) 78%,rgba(14,11,9,0) 100%);padding-right:28px!important;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 max(24px,calc((100vw - 1160px)/2))}.story-k{font-size:11px;letter-spacing:.32em;color:#c9a46a;margin:0 0 18px}.story h2{word-break:auto-phrase;font-size:34px;line-height:1.6;font-weight:400;letter-spacing:.08em;margin:0 0 22px;color:#fff}.story-tx p:not(.story-k){word-break:auto-phrase;text-wrap:pretty;font-size:13.5px;line-height:2.1;margin:0 0 6px;color:#e6dccd}.steps-h{font-size:20px;margin:26px 0 4px}.steps-note{font-size:13px;color:var(--sub);margin:10px 0 0}.steps-note a{color:inherit}
.ax-hero{position:relative;background:#0b0b0c}.ax-hero>img{display:block;width:100%;height:auto}
.ax-hero-tx{position:absolute;left:max(24px,4vw);bottom:9%;max-width:60%;color:#fff}
.ax-k{font-size:12px;font-weight:400;letter-spacing:.3em;color:#ddd;margin:0 0 10px}.ax-k1{display:inline;font:inherit;letter-spacing:inherit;margin:0;color:inherit}
.ax-cs{color:#9a9a9f;font-size:13px;margin:-14px 0 22px}
.ax-h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(44px,8vw,120px);line-height:.95;letter-spacing:.02em;margin:0;color:#fff}
.ax-btns{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.ax-btn{display:inline-block;border:1px solid #fff;color:#fff;text-decoration:none;padding:12px 22px;font-size:13px;letter-spacing:.12em}.ax-btn.f{background:#fff;color:#000}
.ax-feat{display:grid;grid-template-columns:1fr 1fr;background:#fff;color:#111}
.ax-feat-l img{width:100%;display:block;height:100%;object-fit:cover}
.ax-feat-r{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.ax-fk{position:absolute;left:36px;top:36px;font-size:12px;letter-spacing:.35em;color:#888;margin:0}
.ax-one{display:block;max-width:320px;width:100%;height:auto;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.ax-seal{position:absolute;right:28px;top:28px;width:140px;height:140px;z-index:2}
.ax-feat-r h2{font-size:26px;font-weight:500;margin:26px 0 4px}.ax-feat-r h2 a{color:inherit;text-decoration:none}.ax-feat-r p{margin:0;color:#555;font-size:14px}
.ax-cats{background:#0b0b0c;padding:70px max(24px,4vw)}.ax-cats h2,.ax-strip-h h2{font-family:Anton,sans-serif;font-weight:400;font-size:44px;letter-spacing:.03em;margin:0 0 26px;color:#fff}
.ax-cat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ax-cat{position:relative;aspect-ratio:3/5;overflow:hidden;border-radius:6px;display:block}.ax-cat img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.ax-cat span{position:absolute;left:14px;top:14px;font-family:Anton,sans-serif;font-size:28px;color:#fff;text-shadow:0 0 6px #ff3ea5,0 0 18px #ff3ea5}
.ax-band{background:#000;padding:80px max(24px,4vw) 60px}.ax-band h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(40px,6vw,84px);margin:0;color:#fff;line-height:1.05}
.ax-cust{background:#fff;color:#111;padding:56px max(24px,4vw) 64px}
.ax-of{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.ax-pv{position:sticky;top:20px}.ax-pv .cfg-img img,.ax-pv canvas{display:block;width:100%;height:auto;border-radius:6px;background:#111}
.ax-pv p{margin:12px 0 2px;font-size:15px;font-weight:700}.ax-pv small{font-size:12px;color:#666}
.ax-st{display:grid;grid-template-columns:56px 1fr;gap:0 18px;padding:30px 0;border-top:1px solid #e3e3e3}.ax-st:first-child{border-top:0;padding-top:0}
.ax-n{font-family:Anton,sans-serif;font-size:34px;line-height:1;font-weight:400}
.ax-st h3{font-size:18px;font-weight:700;margin:4px 0 14px}.ax-st h3 small{font-weight:400;color:#666;font-size:13px}
.ax-sub{font-size:13px;color:#666;margin:-6px 0 14px;line-height:1.8}
.ax-cust .cfg .cfg-h{display:none}.ax-cust .cfg-sz{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ax-cust .cfg-s{border:1px solid #ccc;border-radius:6px;padding:12px 4px;background:#fff;color:#111;font-weight:700}.ax-cust .cfg-s.on{border:2px solid #111;padding:11px 3px}
.ax-cust .cfg-s small{display:block;white-space:nowrap;font-weight:400;font-size:12px;color:#555}
.ax-cust .cfg-lt{margin-top:16px}.ax-cust .cfg-t{margin-top:16px}.ax-cust .cfg-s[data-s=custom]{grid-column:auto;display:block;white-space:nowrap}.ax-cust .cfg-s[data-s=custom] small{display:block;margin:0}
.ax-feat-r>a{display:block;text-align:center}.ax-one{margin:0 auto}.ax-k1{white-space:nowrap}
.ax-drop{display:block;border:1.5px dashed #999;border-radius:8px;padding:26px 16px;text-align:center;cursor:pointer}
.ax-drop input{position:absolute;width:1px;height:1px;opacity:0}.ax-drop strong{display:inline-block;background:#111;color:#fff;padding:11px 22px;border-radius:4px;font-size:14px}
.ax-drop span{display:block;font-size:12px;color:#666;margin-top:10px}
.ax-alt{display:block;font-size:13px;margin:12px 0 0;color:#444}.ax-msg{display:block;font-size:13px;color:#b0306a;margin-top:8px}
/* ★2026-09-21 この「必須」の札は**黒い地に白**が元の作り。ただし `.req label i` の方が指定が強く、
   差し色で上書きされていた（黒の上で 3.76:1＝読みにくい）。札の中だけ字の色を白に戻す。 */
.ax-fl{display:block;font-size:14px;margin:0 0 14px;--pink-ink:#fff}.ax-fl i{font-style:normal;font-size:11px;background:#111;color:#fff;padding:1px 6px;border-radius:3px;margin-left:6px}
.ax-fl input,.ax-fl textarea{display:block;width:100%;margin-top:6px;border:1px solid #bbb;border-radius:4px;padding:11px;font:inherit;font-size:16px;box-sizing:border-box}
.ax-agree{font-size:13px;display:flex;gap:8px;align-items:center;margin:4px 0 18px}
.ax-go{display:block;width:100%;background:#111;color:#fff;border:0;border-radius:4px;padding:18px;font-size:16px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.ax-note{font-size:13px;color:#444;text-align:center;margin:12px 0 0}
.ax-flow{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:40px;font-size:12px;color:#555;justify-content:center}.ax-flow span:not(:last-child)::after{content:"→";margin:0 10px;color:#aaa}
.ax-strip{background:#0b0b0c;padding:56px 0 64px}.ax-strip-h{display:flex;align-items:baseline;gap:16px;padding:0 max(24px,4vw) 22px}.ax-strip-h h2{margin:0}.ax-strip-h span{color:#9a9a9f;font-size:13px}
.ax-strip-v{overflow:hidden}.ax-strip-t{display:flex;width:max-content;animation:axstrip linear infinite}.ax-strip-v:hover .ax-strip-t{animation-play-state:paused}
.ax-sp{flex:0 0 auto;width:220px;margin-right:14px;color:#ddd;text-decoration:none;font-size:13px}.ax-sp img{display:block;width:220px;height:275px;object-fit:cover;border-radius:6px}.ax-sp span{display:block;margin-top:8px}
@keyframes axstrip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ax-strip-v{overflow-x:auto}.ax-strip-t{animation:none}}
@media(max-width:760px){.ax-hero-tx{position:static;max-width:none;padding:24px}.ax-feat{grid-template-columns:1fr}.ax-cat-row{grid-template-columns:repeat(2,1fr)}
.ax-seal{width:64px;height:64px;right:10px;top:10px}.ax-feat-r{padding:24px 20px 40px}.ax-fk{position:static;align-self:flex-start;margin:0 0 16px}.ax-one{max-width:56%}
.ax-of{grid-template-columns:1fr;gap:24px}.ax-pv{position:sticky;top:0;z-index:3;background:#fff;padding:8px 0}.ax-pv .cfg-img img,.ax-pv canvas{max-height:34vh;object-fit:cover}.ax-pv p{margin:6px 0 0;font-size:13px}.ax-pv small{display:none}
.ax-st{grid-template-columns:40px 1fr;gap:0 12px}.ax-n{font-size:26px}.ax-cust .cfg-sz{grid-template-columns:repeat(2,1fr)}.ax-cust .cfg-s[data-s=custom]{grid-column:1/-1}
.ax-sp,.ax-sp img{width:150px}.ax-sp img{height:188px}.ax-strip-h h2,.ax-cats h2{font-size:32px}
.ax-k{letter-spacing:.14em}.ax-strip-h{display:block}.ax-strip-h h2{white-space:nowrap;margin:0 0 4px}}
/* ★2026-09-20 夜 761〜1000px（タブレット・小さいノート）で、/art/ だけページ全体が縮んで表示されていた。
   実測＝幅768を指定してもレイアウト幅が 895 になる（900→958・1000→1007／390・1024・1280 は正常）。
   原因＝大きさ選び `.cfg-sz` が 5 列のままで、中の字が `white-space:nowrap` なので 5 列ぶんの
   最低幅（約895px）を要求していた。760px以下には既に 2 列の指定が在ったが、その1段だけ抜けていた。
   ★**新しい見た目は作らず、760px以下で既に使っている「2列」の効く幅を 1000px まで広げるだけ。**
   （サインアーク desktop-c8 が同じ日に同じ形で直した＝既にある形の効く幅を変える）
   ★当てる前にブラウザ側で試して、390/768/900/1000/1024/1280 の全部が指定どおりになるのを確認済み。 */
@media(min-width:761px) and (max-width:1000px){
.ax-cust .cfg-sz{grid-template-columns:repeat(2,1fr)}.ax-cust .cfg-s[data-s=custom]{grid-column:1/-1}}
.sx-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#000;height:min(82vh,720px);overflow:hidden}
.sx-hero>img{grid-column:2;grid-row:1;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.sx-hero-tx{grid-column:1;grid-row:1;align-self:end;padding:0 32px 9% max(24px,4vw);color:#fff}
.sx-k{font-family:Lato,sans-serif;font-size:12px;letter-spacing:.3em;color:#eee;margin:0 0 14px}.sx-k h1{display:inline;font:inherit;letter-spacing:inherit;margin:0;color:inherit;white-space:nowrap}
.sx-h1{font-family:Lato,sans-serif;font-weight:700;font-size:clamp(38px,4.6vw,70px);line-height:1.1;letter-spacing:.06em;margin:0}
.sx-btns{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.sx-btn{display:inline-block;border:1px solid #fff;color:#fff;text-decoration:none;padding:13px 24px;font-size:13px;letter-spacing:.14em;background:rgba(0,0,0,.35)}.sx-btn.f{background:#fff;color:#000}
.sx-svc{background:#fff;color:#111;padding:80px max(24px,4vw) 70px;text-align:center}
.sx-svc h2,.sx-sec .sx-en{font-family:Lato,sans-serif;font-weight:300;font-size:38px;letter-spacing:.12em;margin:0 0 8px}
.sx-cs{color:#757575;font-size:13px;margin:0 0 40px}
.sx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1200px;margin:0 auto;text-align:left}
.sx-tile{color:#111;text-decoration:none;display:block}.sx-tile img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.sx-tile b{display:block;font-family:Lato,sans-serif;font-weight:400;font-size:15px;letter-spacing:.16em;margin:16px 0 2px}.sx-tile span{font-size:13px;color:#666}
.sx-sec{background:#000;color:#fff;padding:70px 0 60px}.sx-sec+.sx-sec{border-top:1px solid #1d1d1f}
.sx-sh{text-align:center;padding:0 24px 30px}.sx-sh h2{font-size:15px;font-weight:500;letter-spacing:.1em;margin:0 0 10px;color:#ddd}.sx-sh p{margin:0;color:#9a9a9f;font-size:13px}.sx-sh span{display:inline-block;margin-top:8px;font-size:12px;color:#77777c;letter-spacing:.1em}
.sx-sec .sx-en{color:#fff}
.sx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sx-w{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff;text-decoration:none;background:#111}
.sx-w img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.sx-w:hover img{transform:scale(1.04)}
.sx-w span{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.sx-w b{display:block;font-family:Lato,sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em}.sx-w i{font-style:normal;font-size:12px;color:#ccc}
.sx-own{display:flex;align-items:center;justify-content:center;border:1px solid #333;background:#0b0b0c;aspect-ratio:auto;min-height:220px;grid-column:span var(--sp4)}.sx-own span{position:static;background:none;padding:0;text-align:center}.sx-own b{font-weight:300;font-size:22px;letter-spacing:.16em}.sx-own i{display:inline-block;margin-top:12px;border:1px solid #fff;padding:9px 18px;color:#fff;font-size:12.5px;letter-spacing:.1em}
.sx-own:hover{background:#151517}
.sx-sis{text-align:center;font-size:12.5px;color:#9a9a9f;margin:22px 0 0}.sx-sis a{color:#ddd}
.sx-band h2{font-family:Lato,sans-serif;font-weight:700;letter-spacing:.06em}.sx-cust .ax-n{font-family:Lato,sans-serif;font-weight:300;font-size:30px}
/* ★サインの大きさの札は寸法（40 × 30 cm）＝5枚を1行に並べると横にはみ出す（9/20 実測 1391px）。3列で折り返す */
.sx-cust .cfg-sz{grid-template-columns:repeat(3,1fr)}.sx-cust .cfg-s{font-size:15px}.sx-cust .cfg-s small{font-size:11px;letter-spacing:0;white-space:normal}
.sx-cust .cfg-s[data-s=custom]{grid-column:auto}
@media(max-width:1000px){.sx-tiles{grid-template-columns:repeat(2,1fr)}.sx-grid{grid-template-columns:repeat(3,1fr)}.sx-own{grid-column:span var(--sp3)}}
@media(max-width:760px){.sx-own{grid-column:span var(--sp2);min-height:150px}}
@media(max-width:760px){.sx-hero{display:block;height:auto}.sx-hero>img{height:auto;aspect-ratio:4/3}.sx-hero-tx{padding:24px 20px 28px}
.sx-k{letter-spacing:.14em}.sx-svc{padding:54px 20px 50px}.sx-svc h2,.sx-sec .sx-en{font-size:28px}.sx-tiles{gap:22px 14px}.sx-tile b{font-size:13px;letter-spacing:.1em}
.sx-grid{grid-template-columns:repeat(2,1fr)}.sx-sec{padding:50px 0 44px}.sx-own b{font-size:17px}}
@media(max-width:1100px){body:not(.w-gift) .story-tx{position:static;width:auto;background:none;padding:30px max(24px,calc((100vw - 1160px)/2)) 34px!important}}
@media(max-width:760px){.story-tx{position:static;width:auto;background:none;padding:26px 20px 30px}.story h2{font-size:24px}.story-tx p br{display:none}}
.glt{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}.glt figure{margin:0}.glt img{display:block;width:100%;height:auto}.glt figcaption{font-size:13px;color:var(--sub);padding:8px 2px 0;line-height:1.7}.glt figcaption b{display:block;font-size:14.5px;color:var(--ink)}.glt-tb{overflow-x:auto}.glt-tb table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}.glt-tb th,.glt-tb td{border-bottom:1px solid var(--line,#ddd);padding:10px 8px;text-align:right;white-space:nowrap}.glt-tb thead th{font-size:12px;color:var(--sub);font-weight:400}.glt-tb th:first-child{text-align:left}.glt-tb tbody th small{display:block;font-size:11px;color:var(--sub);font-weight:400}.glt-note{font-size:13px;color:var(--sub);margin:10px 0 0}.glt-tb .sm{display:none}body.w-sign .rq-light{display:none}.rq-lnote{align-self:center;font-size:12px;color:var(--sub)}
@media(max-width:760px){.glt{grid-template-columns:1fr}.glt-tb .lg{display:none}.glt-tb .sm{display:inline}.glt-tb table{min-width:0;font-size:12.5px}.glt-tb th,.glt-tb td{padding:9px 3px}.glt-tb thead th{font-size:11px}}
.rq2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start;margin-top:8px}.rq2-l{position:sticky;top:120px}.cfg-img img{display:block;width:100%;height:auto}.rq2-r.req-pick{max-width:none;gap:0}.rq2-r .pk{padding:18px 0}.rq2-r #pk0{border-top:none;padding-top:0}.rq2-r #pk0 .cfg{margin:0}.req .cfg-l{display:flex;font-size:inherit;letter-spacing:0;color:var(--ink)}.cfg-t{flex-wrap:wrap}.cfg-t span{white-space:nowrap}
@media(max-width:760px){.rq2{grid-template-columns:1fr;gap:14px}.rq2-l{position:static}}
.om-more{font-size:12.5px;color:var(--sub);margin:14px 0 0}.om-more span{display:block;font-size:11px;margin-top:4px}
.om-pair{display:grid;grid-template-columns:1fr auto 1.35fr;gap:10px;align-items:center}
.om-pair figure,.om-trio figure,.ba2 figure{margin:0}.om-pair img,.om-trio img,.ba2 img{display:block;width:100%;height:auto}
.om-pair figcaption,.om-trio figcaption,.ba2 figcaption{font-size:11px;color:var(--sub);margin-top:6px;letter-spacing:.06em}
.om-arr{font-style:normal;font-size:22px;color:var(--pink-ink)}
.om-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ba2{display:grid;grid-template-columns:1fr auto 3fr;gap:12px;align-items:center;margin:0 0 26px}
.ba-afs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ba-af{display:block;text-decoration:none;color:var(--ink)}.ba-af span{display:block;font-size:12px;margin-top:6px;letter-spacing:.06em}
@media(max-width:760px){.om{padding:22px 0 22px}.om-in{grid-template-columns:1fr;gap:20px}.om-head{font-size:20px}
  .ba2{grid-template-columns:1fr}.ba2 .ba-bf{width:62%;justify-self:center}.ba2 .om-arr{transform:rotate(90deg);justify-self:center}}
/* 入口だけ＝親の TLS GROUP のマークを大きく（9/18 社長「マークのロゴみたいなのを1個ここにドンと」） */
.gate-mast .nav-in{height:auto;padding-top:20px;padding-bottom:16px}
.gate-mast .logo img{max-height:120px}
@media(max-width:760px){.gate-mast .nav-in{padding-top:14px;padding-bottom:10px}.gate-mast .logo img{max-height:84px}}
.gate-cap{text-align:center;padding:26px 18px 6px}
.gate-cap h1{font-weight:300;font-size:16px;letter-spacing:.2em}
.gate-cap span{display:block;font-size:11px;color:var(--sub);letter-spacing:.12em;margin-top:6px}
@media(max-width:1000px){.gate.n3{grid-template-columns:1fr;min-height:0}.gate.n3 .door{min-height:46vh}}
@media(max-width:760px){.gate,.gate.n3{grid-template-columns:1fr;min-height:0}.door,.gate.n3 .door{min-height:62vh}.door .tx{padding:22px 20px 26px}.door .tx b{font-size:26px}}
.switch{font-size:10.5px;letter-spacing:.2em;color:var(--pink-ink);text-decoration:none;padding:13px 0 12px 18px;border-left:1px solid var(--line);white-space:nowrap}
.switch:hover{color:var(--ink)}

/* ---------- スマホ ---------- */
@media(max-width:760px){
  .wrap{padding:0 18px}
  .nav-in{height:76px;padding:0 18px;gap:16px}
  .nav-links{display:none}
  .catbar-in{flex-wrap:nowrap;overflow-x:auto;padding:0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .catbar-in::-webkit-scrollbar{display:none}
  .catbar a{padding:13px 12px 12px}
  .catbar a.cu{margin-left:0;padding-left:12px}
  .switch{margin-left:0;padding-left:12px}
  .hero-track img,.hero-track .ph{height:240px}
  .hero-track .ph{width:360px}
  .hero-cap{padding:18px 2px 22px;gap:10px}
  .hero-cap h1{font-size:14px}
  .tiles{grid-template-columns:1fr 1fr;gap:18px 12px}
  .sec{padding:50px 0 4px}
  .grid{grid-template-columns:1fr 1fr;gap:30px 12px}
  .policy{padding:26px 18px 0}
}

/* ---------- カート（照明堂の写経・黒地） ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;width:410px;max-width:94vw;background:var(--wash);color:var(--ink);z-index:90;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.cart.on{transform:none}
.cart-hd{padding:26px 28px 20px;display:flex;align-items:center;justify-content:space-between}
.cart-hd h2{font-weight:400;font-size:14px;letter-spacing:.24em}
.cart-hd button{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--sub);font-family:inherit}
.cart-bd{flex:1;overflow-y:auto;padding:0 28px}
.cart-empty{color:var(--mute);font-size:12px;text-align:center;padding:70px 0;letter-spacing:.1em}
.ci{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.ci .im{aspect-ratio:1/1;background:#1f1f22;overflow:hidden}.ci .im img{width:100%;height:100%;object-fit:cover;display:block}
.ci b{font-size:12px;font-weight:400;line-height:1.7;display:block;margin-bottom:4px;letter-spacing:.04em}
.ci .cd{font-size:9.5px;color:var(--mute);letter-spacing:.12em}
.ci .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:28px;height:28px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--sub);font-family:inherit}
.qty span{min-width:26px;text-align:center;font-size:12px}
.ci .pp{font-size:13.5px}
.ci .rm{background:none;border:none;color:var(--mute);font-size:10.5px;cursor:pointer;font-family:inherit;padding:0;letter-spacing:.08em}
.cart-ft{border-top:1px solid var(--line);padding:22px 28px 28px}
.sumrow{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px;color:var(--sub);letter-spacing:.04em}
.sumrow.total{font-size:16px;color:var(--ink);margin:14px 0 4px}
.ship-note{font-size:11px;color:var(--sub);border-top:1px solid var(--line);padding-top:10px;margin:12px 0 0;letter-spacing:.04em}
.checkout{display:block;width:100%;background:var(--pink);color:#111;border:none;padding:16px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;letter-spacing:.2em;margin-top:16px}
.checkout:hover{opacity:.85}.checkout[disabled]{opacity:.5;cursor:default}
.co-head{font-size:13px;letter-spacing:.2em;padding:6px 0 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.co-head button{background:none;border:none;color:var(--sub);font-size:11px;cursor:pointer;font-family:inherit;letter-spacing:.1em}
.co-sum{font-size:11.5px;color:var(--sub);line-height:1.9;padding:12px 0;border-bottom:1px solid var(--line)}
.co-sum b{color:var(--ink);font-weight:400}
.co-form label{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--mute);margin:16px 0 6px}
.co-form label i{font-style:normal;color:var(--pink-ink);margin-left:6px;font-size:10px}
.co-form input,.co-form select,.co-form textarea{width:100%;border:1px solid var(--line);border-radius:0;background:var(--paper);
  font:inherit;font-size:16px;padding:11px 12px;color:var(--ink);letter-spacing:.02em}
.co-form input:focus,.co-form select:focus,.co-form textarea:focus{outline:none;border-color:var(--pink)}
.co-form textarea{min-height:76px;resize:vertical}
.co-consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 0;border-top:1px solid var(--line);font-size:11.5px;color:var(--sub);line-height:1.8}
.co-consent input{width:16px;height:16px;margin-top:3px;flex:none;accent-color:var(--pink)}
.co-consent a{color:var(--ink)}
.co-err{display:none;margin-top:10px;font-size:11.5px;color:#ff8aa8;line-height:1.7}.co-err.on{display:block}
.co-note{font-size:11px;color:var(--mute);line-height:1.8;margin-top:12px;letter-spacing:.02em}
.co-done{padding:40px 0 20px;text-align:center}
.co-done h3{font-weight:400;font-size:17px;letter-spacing:.16em;margin-bottom:14px}
.co-done .oid{font-size:12px;letter-spacing:.14em;border:1px solid var(--line);display:inline-block;padding:8px 16px;margin-bottom:18px}
.co-done p{font-size:12px;color:var(--sub);line-height:2}
.pdp-sel{margin:18px 0 0}
.cfg{margin:20px 0 0}
.cfg-h{font-size:12.5px;letter-spacing:.12em;color:var(--sub);margin:16px 0 8px}.cfg-h small{margin-left:8px;letter-spacing:0}
.cfg-sz{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cfg-s[data-s=custom]{grid-column:1/-1;display:flex;justify-content:center;align-items:baseline;gap:10px}.cfg-s[data-s=custom] small{margin:0}
.cfg-om{font-size:13px;margin:10px 0 0;color:var(--ink)}
.cfg-s{border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit;font-size:15px;font-weight:700;padding:10px 4px;cursor:pointer;border-radius:0}
.cfg-s small{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-top:2px}
.cfg-s.on{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.cfg-lt{display:grid;gap:6px}
.cfg-l{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;cursor:pointer}
.cfg-l input{width:18px;height:18px;flex:none;accent-color:var(--pink)}
.cfg-l span{flex:1}.cfg-l b{display:block;font-size:14px}.cfg-l small{display:block;font-size:11.5px;color:var(--sub)}
.cfg-l em{font-style:normal;font-size:11px;color:var(--sub);white-space:nowrap}
.cfg-l.off{opacity:.5;cursor:default}
.cfg-t{display:flex;align-items:baseline;gap:10px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.cfg-t b{font-size:24px}.cfg-t small{font-size:11px;color:var(--sub)}
.add:disabled{opacity:.4;cursor:default}
.cfg-cs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 12px 10px 40px;margin-top:-4px}
.cfg-cs[hidden]{display:none}
.cfg-cn{flex-basis:100%;font-size:11.5px;color:var(--sub)}
.cfg-c{width:44px;height:44px;border-radius:50%;border:0;padding:9px;background:var(--c);background-clip:content-box;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;margin:-4px}
.cfg-c.on{box-shadow:inset 0 0 0 2px var(--ink)}
#pdpOpt{font-size:16px}
.cfg-cv{display:block;width:100%;height:auto}
/* ★2026-09-25 社長「画像がちゃんと綺麗に収まってない…下の方が切れちゃったり」＝商品ページの枠は正方形（object-fit:contain の img 前提）なのに、
   光らせ方の canvas は height:auto で縦長（960x1200）のまま入り、枠の overflow:hidden で下が切れていた（390幅で枠354×354・canvas 352×440 を実測）。
   → 枠の中の canvas も img と同じく枠いっぱい＋contain にする */
/*   height:100% は aspect-ratio で決まる格子の枠では効かなかった（直した後も 336×419 のまま・9/25 実測）＝枠に重ねて貼る */
@media(min-width:761px){.pdp .main{position:relative}}   /* スマホは sticky（これも重ねる土台になる）＝上書きしない */
.pdp .main .cfg-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pdp-sel label{display:block;font-size:12.5px;letter-spacing:.12em;color:var(--sub);margin-bottom:8px}
.pdp-sel select{width:100%;border:1px solid var(--line);border-radius:0;background:var(--wash);font:inherit;font-size:16px;padding:11px 12px;color:var(--ink)}
.add{margin-top:14px;width:100%;background:var(--pink);color:#111;border:1px solid var(--pink);border-radius:0;padding:14px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.14em;cursor:pointer}
.add.done{background:none;color:var(--ink)}