/* =========================
   Base (product page)
========================= */
:root{
    --bg:#f1f1f1;
    --paper:#ffffff;
    --ink:#0f0f10;
    --muted: rgba(15,15,16,.62);
    --soft: rgba(15,15,16,.10);
    --shadow: 0 26px 70px rgba(0,0,0,.18);
    --radius: 22px;
    --max: 1120px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-serif, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing:.02em;
  }
  
  img{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration:none; }
  
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  .container{
    width:min(var(--max), calc(100% - 48px));
    margin-inline:auto;
  }
  
  /* fixed / sticky どっちでも干渉しないように余白を確保 */
  .page{
    padding-top: 96px;
  }
  
  /* =========================
     Header safety (このページで崩れないように保険)
  ========================= */
  .site-header .nav-list{
    margin:0;
    padding:0;
    list-style:none;
  }
  .site-header .nav-list li{ margin:0; padding:0; }
  
  /* =========================
     Product hero
  ========================= */
  .product-hero{
    display:grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    padding: 140px 90px;
    background: var(--bg);
    align-items:center;
  }
  
  .product-hero__paper{
    background: var(--paper);
    box-shadow: var(--shadow);
    padding:48px 52px;
  }
  
  .product-hero__eyebrow{
    margin:0 0 12px;
    font-size:12px;
    letter-spacing:.2em;
    color:rgba(15,15,16,.55);
  }
  
  .product-hero__title{
    margin:14px 0 20px;
    display:grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align:left;
  }
  
  /* フリガナ */
  .product-hero__title .title-ruby{
    font-size:11px;
    letter-spacing:.28em;
    color:rgba(15,15,16,.55);
  }
  
  /* 本文 */
  .product-hero__title .title-main{
    font-size:36px;
    letter-spacing:.14em;
    line-height:1.15;
  }
  
  
  .product-hero__rule{
    display:block;
    width:42px;
    height:1px;
    background:rgba(15,15,16,.25);
    margin:0 0 18px;
  }
  
  .product-hero__lead{
    margin:0;
    font-size:14px;
    line-height:2;
    color:rgba(15,15,16,.72);
  }
  
  .product-hero__price{
    margin:28px 0 0;
    font-size:13px;
    letter-spacing:.14em;
    color: rgba(15,15,16,.78);
  }
  
  .product-hero__visual{
    min-height:420px;
    background:url("/assets/img/product-hero.png") no-repeat;
    background-size:cover;
    background-position:60% 30%;
    /* filter:grayscale(1) contrast(1.05); */
    opacity:.94;
  }
  
  /* =========================
     Exhibition grid
  ========================= */
  .product-exhibition{
    padding:100px 90px 140px;
  }
  
  .exhibition__title{
    margin:0 0 40px;
    font-size:18px;
    letter-spacing:.24em;
  }
  
  .exhibition-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:32px;
  }
  
  .exhibit{
    background: var(--paper);
    box-shadow:0 18px 46px rgba(0,0,0,.14);
    padding:22px;
  }
  
  .exhibit img{
    width:100%;
    margin-bottom:14px;
  }
  
  .exhibit h3{
    margin:0 0 6px;
    font-size:14px;
    letter-spacing:.10em;
  }
  
  .exhibit p{
    margin:0;
    font-size:13px;
    color:rgba(15,15,16,.68);
    line-height:1.9;
  }
  
  /* =========================
     Responsive
  ========================= */
  @media (max-width: 1100px){
    .product-hero{
      padding: 120px 48px;
      grid-template-columns: 380px 1fr;
      gap: 40px;
    }
    .product-exhibition{ padding: 86px 48px 120px; }
    .exhibition-grid{ grid-template-columns: repeat(2,1fr); }
  }
  
  @media (max-width: 820px){
    .product-hero{
      grid-template-columns: 1fr;
      padding: 96px 18px 70px;
      gap: 26px;
    }
    .product-hero__visual{ min-height: 320px; }
    .product-hero__paper{ padding: 34px 26px; }
  
    .product-exhibition{ padding: 70px 18px 100px; }
    .exhibition-grid{ grid-template-columns: 1fr; }
  }