/* ══════════════════════════════════════════════════════════════
   オンラア購買部 — style.css 差し替え案（陳列型）
   参照：密買東京（www.mitsubai.com/tokyo）の水準

   考え方は「足す」ではなく「引く」。
   ・地は純白のみ。藁半紙・グラデーション・影・角丸を全廃
   ・写真は額装せず、そのまま置く（白背景の写真が地に溶ける）
   ・一覧に文字を置かない（触った時だけ名前と値）
   ・色はサイト側に持たない。商品の色だけ
   ・朱は検印の1箇所だけ残す（一点物の証明＝思想に結びついた要素）
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff;
  --ink:#111111;
  --soft:#8d8d8d;      /* 補足・キャプション */
  --faint:#b5b5b5;     /* さらに弱い（ラベル） */
  --rule:#e6e6e6;      /* 細罫 */
  --shu:#a8332a;       /* 検印。ここ以外に使わない */

  /* トラッキングは4段しか使わない */
  --t-body:.02em;
  --t-head:.02em;
  --t-label:.14em;
  --t-caps:.30em;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Serif JP", serif;
  font-weight:400;
  line-height:1.7;
  letter-spacing:var(--t-body);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

/* ══════════════ 共通ヘッダー ══════════════ */

.bar{
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:13px 18px;
  font-size:.68rem;letter-spacing:var(--t-label);color:var(--soft);
}
.bar a:hover{color:var(--ink)}

/* ワードマーク。字間を大きく空けて中央に置く */
.mark{padding:34px 18px 8px;text-align:center}
.mark .jp{
  display:block;font-size:clamp(1.25rem,4.6vw,1.85rem);font-weight:700;
  letter-spacing:.62em;text-indent:.62em;line-height:1.5;
}
.mark .en{
  display:block;margin-top:9px;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.62rem;letter-spacing:.42em;text-indent:.42em;color:var(--faint);
}
/* 記事・about では小さく */
.mark.small{padding:20px 18px 6px}
.mark.small .jp{font-size:1.0rem;letter-spacing:.44em;text-indent:.44em}
.mark.small .en{display:none}

.koujou{
  text-align:center;padding:16px 18px 0;
  font-size:.72rem;color:var(--faint);letter-spacing:.08em;
}

/* ══════════════ 陳列（index） ══════════════ */

.shelf{
  max-width:760px;margin:0 auto;padding:52px 20px 0;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:64px 26px;align-items:start;
}

.it{position:relative;display:block;grid-column:span 3}
/* 左右に振り、大きさも変えて不規則に見せる（7点で一巡） */
.it:nth-child(7n+1){grid-column:3 / span 4}
.it:nth-child(7n+2){grid-column:8 / span 3}
.it:nth-child(7n+3){grid-column:2 / span 3}
.it:nth-child(7n+4){grid-column:6 / span 4}
.it:nth-child(7n+5){grid-column:4 / span 3}
.it:nth-child(7n+6){grid-column:8 / span 4}
.it:nth-child(7n+7){grid-column:5 / span 4}

.it img{display:block;width:100%;height:auto}
.it:hover img{opacity:.72}

/* 名前と値は載せない。触った時にだけ出す */
.cap{
  position:absolute;left:0;right:0;top:100%;padding-top:9px;
  opacity:0;transition:opacity .16s linear;pointer-events:none;
}
.it:hover .cap,.it:focus-visible .cap{opacity:1}
.cap b{display:block;font-size:.76rem;font-weight:400;line-height:1.5}
.cap i{display:block;font-style:normal;font-size:.68rem;color:var(--faint);letter-spacing:.04em}
.it:focus-visible{outline:1px solid var(--ink);outline-offset:6px}

/* もらわれていったもの */
.gone{max-width:760px;margin:0 auto;padding:108px 20px 0;text-align:center}
.gone .lbl{font-size:.66rem;letter-spacing:var(--t-caps);color:var(--faint)}
.gone .row{margin-top:26px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.gone .gi{flex:0 0 108px}
.gone .gi img{display:block;width:100%;height:auto;opacity:.7}
.gone .gi:hover img{opacity:1}

.tail{padding:96px 20px 0;text-align:center}
.tail .toc{
  display:inline-block;font-size:.7rem;letter-spacing:var(--t-label);
  border:1px solid var(--rule);padding:11px 26px;
}
.tail .toc:hover{border-color:var(--ink)}

/* ══════════════ 記事（items/*.html） ══════════════ */

article{max-width:680px;margin:0 auto;padding:14px 22px 44px}
.backlink{font-size:.7rem;letter-spacing:.08em;color:var(--soft);margin:20px 0 2px;display:inline-block}
.backlink:hover{color:var(--ink)}

.tag{
  display:inline-block;font-size:.66rem;letter-spacing:var(--t-label);
  color:var(--soft);margin:16px 0 12px;
  /* 枠と角丸を外す。文字だけ */
}
.ware{font-size:.66rem;letter-spacing:.1em;color:var(--faint);margin-left:12px}

article h1{
  font-weight:700;font-size:clamp(1.6rem,4.2vw,2.0rem);
  line-height:1.5;letter-spacing:var(--t-head);margin:2px 0 18px;
}

.lead-q{
  font-size:1.0rem;font-weight:400;color:var(--soft);
  padding-left:0;border:none;margin:0 0 34px;line-height:1.85;
  /* 朱の左罫を外す。引用は色でなく位置で示す */
}

/* 写真は額装しない。地が白なので写真の白背景と一体になる */
.plate{position:relative;margin:6px 0 12px}
.plate img{display:block;width:100%;height:auto}

/* 検印。サイトで朱を使う唯一の場所 */
.kenin{
  position:absolute;top:-14px;right:-6px;
  width:72px;height:72px;border-radius:50%;
  border:2px solid var(--shu);color:var(--shu);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:.62rem;line-height:1.4;letter-spacing:.1em;font-weight:700;
  transform:rotate(-9deg);background:var(--paper);
}
.kenin b{font-size:.84rem;letter-spacing:var(--t-head)}
.kenin.sold{font-size:.56rem;letter-spacing:var(--t-head);transform:rotate(-12deg)}

.caption{font-size:.7rem;color:var(--faint);text-align:right;letter-spacing:.04em;margin-bottom:38px}

.essay p{font-size:1.02rem;margin:0 0 1.3em;text-indent:1em;line-height:1.95}
.essay p:first-child{text-indent:0}
.essay .q{color:var(--ink)}   /* 朱をやめる */

.spec{margin:44px 0 8px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0}
.spec h2{font-size:.66rem;letter-spacing:var(--t-caps);color:var(--faint);font-weight:400;margin-bottom:14px}
.spec dl{display:grid;grid-template-columns:5.5em 1fr;row-gap:9px;column-gap:16px;font-size:.9rem}
.spec dt{color:var(--soft);letter-spacing:.06em}
.spec dd{color:var(--ink)}

.ohuzuri{margin:34px 0 8px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price-lg{font-size:1.24rem;font-weight:700;letter-spacing:var(--t-head)}
.price-lg small{font-size:.74rem;font-weight:400;color:var(--faint);margin-right:5px}
.price-lg.sold-price{color:var(--faint);text-decoration:line-through}
.nokori-lg,.sold-lg{
  font-size:.7rem;color:var(--soft);letter-spacing:.08em;
  border:none;padding:0;   /* 枠を外す */
}

.hikitoru{
  margin-left:auto;display:inline-block;
  background:var(--ink);color:var(--paper);
  font-weight:700;font-size:.94rem;letter-spacing:var(--t-label);
  padding:14px 30px;border:none;
}
.hikitoru:hover{background:var(--shu)}
.hikitoru:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.note{font-size:.7rem;color:var(--faint);margin-top:16px;letter-spacing:.04em;line-height:1.8}

/* ══════════════ この店について（about） ══════════════ */

.about{max-width:680px;margin:0 auto;padding:14px 22px 44px}
.about h1{font-weight:700;font-size:1.7rem;letter-spacing:var(--t-head);margin:22px 0 10px}
.about .sub{color:var(--soft);font-size:.92rem;margin-bottom:26px}
.about h2{
  font-size:.98rem;font-weight:700;color:var(--ink);
  letter-spacing:var(--t-head);margin:36px 0 10px;
  padding-bottom:0;border:none;   /* 罫を外す */
}
.about p{font-size:.98rem;margin:0 0 1.1em;line-height:1.95}
.about .faq dt{font-weight:700;margin-top:18px;font-size:.94rem}
.about .faq dd{color:var(--soft);margin:5px 0 0;font-size:.92rem}

/* ══════════════ てばなす連動 ══════════════ */

.tebanasu{
  max-width:680px;margin:70px auto 0;padding:24px 22px;
  border-top:1px solid var(--rule);
}
.tebanasu .lbl{font-size:.66rem;letter-spacing:var(--t-caps);color:var(--faint);margin-bottom:10px}
.tebanasu p{font-size:.9rem;line-height:1.95;color:var(--soft)}
.tebanasu p b{color:var(--ink);font-weight:400}
.tebanasu a{border-bottom:1px solid var(--rule)}
.tebanasu a:hover{border-color:var(--ink)}
.tebanasu .sub{font-size:.82rem;margin-top:8px;color:var(--faint)}
/* 陳列ページでは幅を広げる */
.shelf ~ .tebanasu,body > .tebanasu{max-width:760px}

/* ══════════════ 足元 ══════════════ */

footer{
  padding:56px 20px 62px;text-align:center;
  font-size:.66rem;letter-spacing:.1em;color:var(--faint);line-height:2.1;
}
footer .who{color:var(--soft)}
footer a:hover{color:var(--ink)}

@media (max-width:620px){
  .shelf{gap:44px 16px;padding-top:34px}
  /* 狭い画面では hover が使えない前提で名前と値を常に出す
     （@media (hover:none) だけだと、タッチ対応PCや実機の条件差で漏れる） */
  .cap{position:static;opacity:1;padding-top:8px}
  .cap b{font-size:.72rem}
  .cap i{font-size:.66rem}
  .it,
  .it:nth-child(7n+1),.it:nth-child(7n+2),.it:nth-child(7n+3),
  .it:nth-child(7n+4),.it:nth-child(7n+5),.it:nth-child(7n+6),.it:nth-child(7n+7){
    grid-column:span 6;
  }
  .gone .gi{flex:0 0 96px}
  .kenin{width:60px;height:60px;font-size:.56rem;top:-10px}
  .hikitoru{margin-left:0;width:100%;text-align:center}
}

/* 触れない端末では名前を常に出す */
@media (hover:none){
  .cap{position:static;opacity:1;padding-top:7px}
}