:root{
    --container:1200px;
    --ink:#111111;
    --stroke:#111111;       /* 黒の1px線 */
    --paper:#fffdfa;        /* 少し生成りの白 */
    --accent:#e60023;       /* 朱（和の赤） */
    --muted:#6b6f76;
    --nav-h:72px;
    --gutter:20px;          /* モバイルの左右余白 */
    --gutter-lg:20px;       /* デスクトップの左右余白 */
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font:15px/1.75 "Hiragino Kaku Gothic ProN","Yu Gothic", "Noto Sans JP", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing:.01em;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:3px}

  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  @media (min-width:1000px){ .wrap{padding:0 var(--gutter-lg)} }

  /* ================= NAV (和の直線・罫線) ================= */
  #mnav{position:absolute;opacity:0;pointer-events:none}
  header.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--stroke)}
  .navbar{height:var(--nav-h);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
  .brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
  .mon{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--stroke);font-weight:900}
  .brand .jp{font-weight:800;font-size:20px;letter-spacing:.08em}
  .brand .en{font-size:12px;color:var(--muted);letter-spacing:.08em}

  .links{display:none;justify-content:center;gap:26px}
  .links a{padding:12px 0;border-bottom:2px solid transparent;font-weight:700}
  .links a:hover{border-bottom-color:var(--accent)}

  .right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
  .search{display:none;gap:8px}
  .search input{border:1px solid var(--stroke);background:#fff;padding:10px 12px;min-width:260px}
  .btn{border:1px solid var(--stroke);background:var(--ink);color:#fff;padding:10px 16px;font-weight:800;cursor:pointer}
  .btn.ghost{background:#fff;color:var(--ink)}
  .btn.small{padding:8px 12px}

  .ham{display:inline-flex;width:46px;height:46px;border:1px solid var(--stroke);align-items:center;justify-content:center;cursor:pointer}
  .bar{width:22px;height:2px;background:var(--ink);position:relative}
  .bar:before,.bar:after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)}
  .bar:before{top:-7px}.bar:after{top:7px}

  @media (min-width:1020px){
    .links{display:flex}
    .search{display:flex}
    .ham{display:none}
  }

  /* ===== Drawer (固定・ズレない) ===== */
  .backdrop{position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.2s;z-index:90}
  .drawer{
    position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;background:var(--paper);z-index:99;
    border-top:1px solid var(--stroke);transform:translateY(-100%);transition:.25s ease;pointer-events:none;display:flex;flex-direction:column;
  }
  .drawer .wrap{padding:14px var(--gutter)}
  .msearch input{border:1px solid var(--stroke);background:#fff;padding:12px;width:100%}
  .mnav{display:grid;margin-top:12px}
  .mnav a{padding:16px 0;border-bottom:1px solid var(--stroke);font-weight:700}
  #mnav:checked ~ .backdrop{opacity:1;pointer-events:auto}
  #mnav:checked ~ .drawer{transform:translateY(0);pointer-events:auto}

  /* ================= HERO（和見出し＋縦ラベル） ================= */
  .hero{border-bottom:1px solid var(--stroke)}
  .hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;padding:28px 0}
  @media (max-width:980px){.hero .wrap{grid-template-columns:1fr; text-align:center}}
  .lead{
    position:relative;padding-left:16px;
  }
  .lead:before{
    content:"NEW"; position:absolute; left:-12px; top:2px; writing-mode:vertical-rl;
    letter-spacing:.2em; font-weight:800; font-size:12px; background:transparent; color:var(--accent);
  }
  .ttl{font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0 0 10px;font-weight:900;letter-spacing:.08em}
  .sub{color:#2e3136;max-width:60ch;margin:0 0 16px}
  .cta{display:flex;gap:10px;flex-wrap:wrap}
  @media (max-width:980px){.cta{justify-content:center}}

  .hero-art{border:2px solid var(--stroke);background:#fff;position:relative}
  .hero-art::after{content:"";position:absolute;inset:14px;border:2px solid var(--stroke)}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
  .hero-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--stroke);background:#f7f7f7}

  /* ================= SECTION 共通 ================= */
  .section{padding:22px 0;border-bottom:1px solid var(--stroke)}
  .head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
  .head-row h2{margin:0;font-size:22px;letter-spacing:.12em}
  .more{border:1px solid var(--stroke);padding:8px 12px;background:#fff;font-weight:800}

  /* ================= PRODUCTS ================= */
  .grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  @media (max-width:1400px){.grid5{grid-template-columns:repeat(4,1fr)}}
  @media (max-width:1040px){.grid5{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:760px){ .grid5{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .grid5{grid-template-columns:1fr} }

  .card{border:1px solid var(--stroke);background:#fff;display:flex;flex-direction:column}
  .media{border-bottom:1px solid var(--stroke);background:#fafafa;display:grid;place-items:center;padding:14px}
  .media img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#f4f4f5}
  .meta{padding:12px;display:grid;gap:6px}
  .brand{font-size:12px;color:var(--muted);letter-spacing:.12em}
  .title{font-weight:800}
  .price{font-weight:900}
  .yen{font-feature-settings: "palt" 1}

  /* ================= BANNERS / 特集 ================= */
  .features .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
  @media (max-width:980px){.features .grid{grid-template-columns:1fr}}
  .feat{position:relative;border:1px solid var(--stroke);background:#fff}
  .feat img{width:100%;height:320px;object-fit:cover;border-bottom:1px solid var(--stroke)}
  .feat .txt{padding:12px}
  .feat .tag{position:absolute;left:8px;top:8px;border:1px solid var(--stroke);background:#fff;padding:6px 8px;font-weight:800;letter-spacing:.18em}

  /* ================= BLOG（読み物） ================= */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media (max-width:980px){.grid3{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.grid3{grid-template-columns:1fr}}
  .post{border:1px solid var(--stroke);background:#fff}
  .post img{width:100%;height:180px;object-fit:cover;border-bottom:1px solid var(--stroke)}
  .post .body{padding:12px}
  .post h3{margin:0 0 6px;font-size:18px;font-weight:800}
  .post p{margin:0 0 10px}

  /* ================= INFO BAR ================= */
  .info{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:#fff}
  .info .wrap{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:10px 0}
  .pill{border:1px solid var(--stroke);padding:8px 12px;background:#fff}

  /* ================= FOOTER（中央寄せ・和の余白） ================= */
  footer{background:var(--paper);border-top:1px solid var(--stroke)}
  .foot{padding:22px 0}
  .foot .brand{justify-content:center}
  .foot .links{display:flex;gap:16px;justify-content:center}
  .foot .links a{border:1px solid var(--stroke);padding:8px 10px;background:#fff}
  .copy{border-top:1px solid var(--stroke);padding:12px 0;color:var(--muted);text-align:center}