/* ============================================================
   ダーティ醸造  dirtyjozo.co.jp
   闇のブランドサイト  共通スタイル
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --bg:#0b0b0c;
  --bg-2:#111013;
  --ink:#050505;
  --text:#c9c5bd;
  --text-strong:#e7e4dd;
  --dim:#8b877f;
  --faint:#6a675f;
  --line:rgba(201,197,189,.32);
  --line-soft:rgba(201,197,189,.16);
  --accent:#7a1c12;         /* 血のような赤 */
  --gutter:clamp(20px,5vw,90px);
  --jp:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --en:"Cormorant Garamond","EB Garamond",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--jp);
  font-weight:400;
  line-height:2.1;
  letter-spacing:.14em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 全面グランジテクスチャ */
.grain{
  position:fixed;inset:0;z-index:-2;
  background:#0b0b0c url('../images/texture.jpg') center top/cover no-repeat;
  filter:contrast(1.05) brightness(.5) grayscale(1);
  opacity:.5;
}
.grain::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- 見出し・テキスト ---------- */
h1,h2,h3{font-weight:500;letter-spacing:.2em;color:var(--text-strong);line-height:1.7;margin:0}
.sec-title{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:500;margin-bottom:1.6em}
.lead{font-size:clamp(.92rem,1.15vw,1.02rem);color:var(--text);line-height:2.4;letter-spacing:.16em}
.dim{color:var(--dim)}
.en{font-family:var(--en);letter-spacing:.04em}
.ruby{font-size:.55em;letter-spacing:.3em;color:var(--dim);display:block;margin-bottom:.2em}
.sign{display:block;text-align:right;margin-top:1.8em;color:var(--dim);font-size:.9rem;letter-spacing:.35em}

/* ---------- ヘッダー ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);
  background:linear-gradient(180deg,rgba(6,6,7,.85),rgba(6,6,7,0));
  transition:background .4s;
}
.site-head.solid{background:rgba(7,7,8,.94);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:.7em;letter-spacing:.32em;font-size:.82rem;color:var(--text-strong)}
/* ロゴマーク（web_まとめol.ai より抽出したベクター） */
.mark{
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url('../images/logo.svg') no-repeat center/contain;
  mask:url('../images/logo.svg') no-repeat center/contain;
  vertical-align:middle;
}
.brand .mark{width:27px;height:26px}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);font-size:.78rem;letter-spacing:.24em}
.nav a{color:var(--dim);transition:color .3s;position:relative;padding:4px 0;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text-strong)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--line);transition:width .35s}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav-toggle{display:none;background:none;border:0;color:var(--text-strong);font-size:1.4rem;cursor:pointer;letter-spacing:0}

/* ---------- レイアウト ---------- */
main{position:relative;z-index:1}
.section{padding:clamp(70px,11vh,150px) var(--gutter);position:relative}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.split.narrow-img{grid-template-columns:.85fr 1fr}
.center{text-align:center}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid var(--line);background:rgba(10,10,10,.35);
  color:var(--text-strong);font-family:var(--jp);
  font-size:.82rem;letter-spacing:.24em;
  padding:.85em 1.6em;cursor:pointer;
  transition:background .35s,border-color .35s,color .35s,letter-spacing .35s;
}
.btn:hover{background:rgba(122,28,18,.22);border-color:rgba(201,197,189,.6);letter-spacing:.3em}
.btn .cart{font-size:1.05em;transform:translateY(-1px)}
.btn.line{border-color:rgba(140,180,120,.5)}
.btn.line:hover{background:rgba(80,120,60,.2)}

/* ---------- 墨（インク）飾り ---------- */
.ink{position:absolute;z-index:0;pointer-events:none;
  background:url('../images/ink.svg') center/contain no-repeat;opacity:.9;
  filter:brightness(.4);}
.ink.a{width:120px;height:120px}
.ink.b{width:70px;height:70px}
.ink.c{width:180px;height:180px}

/* ---------- 縦のリベット/綴じ目（背表紙） ---------- */
.seam{
  position:absolute;top:0;bottom:0;right:clamp(10px,4vw,70px);width:2px;z-index:0;
  background:
    linear-gradient(rgba(201,197,189,.14),rgba(201,197,189,.14)) center/1px 100% no-repeat;
}
.seam::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:9px;background-image:radial-gradient(circle,rgba(230,228,222,.5) 1.4px,transparent 1.6px);
  background-size:9px 34px;background-position:center;
}

/* ---------- ポラロイド風フレーム ---------- */
.pola{background:#e9e4d6;padding:14px 14px 46px;
  box-shadow:0 24px 50px rgba(0,0,0,.6);transform:rotate(-1.4deg);
  filter:saturate(.85) brightness(.96)}
.pola img{filter:grayscale(.35) contrast(1.05) brightness(.82)}
.frame{border:1px solid var(--line-soft);box-shadow:0 26px 60px rgba(0,0,0,.65)}

/* ---------- 商品カード ---------- */
.price{font-size:1.02rem;letter-spacing:.14em;color:var(--text-strong);margin:1.4em 0 1em}
.price .sep{color:var(--faint);margin:0 .8em}
.prod-mini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4em}
.prod-mini img{height:230px;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.prod-mini .nm{font-size:1.05rem;letter-spacing:.12em;color:var(--text-strong)}
.prod-mini .rd{font-size:.62rem;color:var(--dim);letter-spacing:.2em}
.prod-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px)}

/* ---------- フッター ---------- */
.site-foot{position:relative;z-index:1;border-top:1px solid var(--line-soft);
  padding:70px var(--gutter) 60px;background:rgba(5,5,6,.6)}
.foot-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:40px;align-items:flex-start}
.foot-brand .mark{width:46px;height:45px}
.foot-brand p{margin:.8em 0 0;color:var(--faint);font-size:.72rem;letter-spacing:.2em;line-height:2}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 34px;font-size:.78rem;letter-spacing:.2em}
.foot-nav a{color:var(--dim)}.foot-nav a:hover{color:var(--text-strong)}
.copy{margin-top:46px;text-align:center;color:var(--faint);font-size:.66rem;letter-spacing:.28em}
.disclaimer{max-width:1180px;margin:0 auto;color:var(--faint);font-size:.64rem;
  line-height:2.1;letter-spacing:.1em;border-top:1px dashed var(--line-soft);
  padding-top:26px;margin-top:40px}

/* ---------- 汎用 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
.eyebrow{font-size:.72rem;letter-spacing:.4em;color:var(--faint);margin-bottom:1.6em}
.mt-s{margin-top:1.2em}.mt-m{margin-top:2em}.mt-l{margin-top:3.4em}
hr.rule{border:0;border-top:1px solid var(--line-soft);margin:0}

/* ---------- レスポンシブ ---------- */
@media(max-width:820px){
  body{line-height:2}
  .nav{position:fixed;inset:0 0 0 auto;width:min(76vw,320px);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;
    background:rgba(7,7,8,.97);padding:0 40px;
    transform:translateX(100%);transition:transform .45s;font-size:.95rem}
  .nav.open{transform:none}
  .nav-toggle{display:block;z-index:70}
  .split,.split.narrow-img{grid-template-columns:1fr;gap:34px}
  .prod-row{grid-template-columns:repeat(2,1fr);gap:30px}
  .seam{display:none}
}
@media(max-width:480px){
  .prod-row{grid-template-columns:1fr 1fr;gap:20px}
  .prod-mini img{height:170px}
}