:root{
    --ink:#1c1a17;
    --bordeaux:#5a1320;
    --bordeaux-deep:#3d0c16;
    --gold:#b08d4f;
    --gold-soft:#cdab6f;
    --cream:#f6f1e7;
    --cream-deep:#ede4d3;
    --red-card:   #3B1720;
    --red-card-2: #4A1E29;    
    --line:#d8cdb8;
    --muted:#6f6657;
    --pop:#c0392b;        /* ワイワイ感を出す差し色（赤） */
    --pop-warm:#d98324;   /* 暖色アクセント */
    --wh:#ffffff;
    --hair:       rgba(239,231,218,0.14);
    --hair-dark:  rgba(44,36,25,0.16);
        
  }
  
  
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Hiragino Mincho ProN",sans-serif;
    color:var(--ink);background:var(--cream);line-height:1.9;
    font-feature-settings:"palt";letter-spacing:.02em;
  }
  h2{ color: #333333;}
  
  
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .eyebrow{
    font-size:.74rem;letter-spacing:.3em;color:var(--gold);
    font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;
    text-transform:uppercase;display:block;margin-bottom:1em;
  }

  /* ---- HERO（写真前提・ワイワイ） ---- */
  .hero{
    position:relative;overflow:hidden;color:var(--cream);
    min-height:560px;display:flex;align-items:flex-end;
  }
  
 .hero-photo{
  position:absolute;
  inset:0;
  background-image:url("https://smile-c.co.jp/bistro-agile/cms/wp-content/uploads/2026/08/somu.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 25%;
}
  
  .hero-photo .ph-label{display:none}
  .hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(to right,rgba(61,12,22,.94) 0%,rgba(61,12,22,.7) 42%,rgba(61,12,22,.25) 70%,rgba(61,12,22,.45) 100%),
      linear-gradient(to top,rgba(61,12,22,.7) 0%,rgba(61,12,22,.15) 50%,transparent 100%);
  }
  .hero .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:56px}
  .hero .badge{
    display:inline-flex;align-items:center;gap:8px;background:rgba(217,131,36,.25);
    border:1px solid rgba(217,131,36,.6);padding:7px 16px;border-radius:999px;
    font-size:.74rem;letter-spacing:.12em;color:#f0d49a;margin-bottom:20px;font-weight:700;
    backdrop-filter:blur(4px);
  }
  .hero h1{
    font-size:clamp(2.1rem,5.6vw,3.6rem);font-weight:800;line-height:1.4;
    letter-spacing:.03em;margin-bottom:.6em;text-shadow:0 2px 20px rgba(0,0,0,.4);
  }
  .hero h1 .accent{color:var(--gold-soft)}
  .hero p.lead{font-size:clamp(1rem,2.3vw,1.18rem);max-width:32em;color:rgba(246,241,231,.95);line-height:1.9;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .hero-stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
  .hero-stat{display:flex;align-items:baseline;gap:6px}
  .hero-stat .n{font-family:"Helvetica Neue",Arial,sans-serif;font-size:1.9rem;font-weight:700;color:var(--gold-soft);line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
  .hero-stat .l{font-size:.82rem;color:rgba(246,241,231,.85)}

  section{padding:84px 0}
  .section-head{margin-bottom:44px;max-width:42em}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .section-head h2{font-size:clamp(1.6rem,3.8vw,2.3rem);font-weight:800;line-height:1.5;letter-spacing:.03em;position:relative;padding-bottom:.5em;display:inline-block}
  .section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--pop-warm);border-radius:2px}
  .section-head.center h2::after{left:50%;transform:translateX(-50%)}
  .section-head p{margin-top:1.2em;color:var(--muted);font-size:1.02rem}

/* ---------- Body-weight meter (signature element) ---------- */
  .meter{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
  }
  .meter-label{
    font-size:10px;
    letter-spacing:0.14em;
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .meter-track{
    position:relative;
    flex:1;
    height:3px;
    border-radius:2px;
    background:linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.14));
  }
  .meter-track::before{
    content:"";
    position:absolute; inset:0;
    border-radius:2px;
    background:linear-gradient(90deg, #E7DCC4 0%, var(--gold) 55%, #7A3B1E 100%);
    opacity:0.35;
  }
  .meter-dot{
    position:absolute;
    top:50%; transform:translate(-50%,-50%);
    width:9px; height:9px;
    border-radius:50%;
    background:var(--gold-soft);
    box-shadow:0 0 0 3px rgba(0,0,0,0.25), 0 0 8px rgba(230,190,120,0.7);
  }
  .white-card .meter-track::before{ opacity:0.55; }
  .white-card .meter-dot{ background:var(--amber-card); box-shadow:0 0 0 3px rgba(0,0,0,0.08); }
  .white-card .meter-label{ color:var(--white-dim); }


  /* ---- ゲーム・イベント（主役・上位） ---- */
  .events{background:linear-gradient(160deg,#fbf6ec,#f3e8d4)}
  .events-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .event-card{
    background:#fff;border:2px solid var(--line);border-radius:12px;overflow:hidden;
    position:relative;transition:transform .25s,border-color .25s,box-shadow .25s;
  }
  .event-card:hover{transform:translateY(-4px);border-color:var(--pop-warm);box-shadow:0 14px 32px rgba(122,42,24,.14)}
  .event-photo{
    height:160px;background:var(--cream-deep) center/cover no-repeat;position:relative;
    display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
  }
  .event-photo .ph{font-size:.78rem;color:#a99a7e;text-align:center;padding:14px;letter-spacing:.04em;line-height:1.6}
  .event-body{padding:26px 28px 30px}
  .event-day{position:absolute;top:0;right:0;z-index:2;background:var(--pop);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:5px 14px;border-radius:0 10px 0 12px;font-family:"Helvetica Neue",Arial,sans-serif}
  .event-icon{font-size:1.7rem;margin-bottom:10px;display:block}
  .event-name{font-size:1.3rem;font-weight:800;color:var(--bordeaux);margin-bottom:.5em;line-height:1.35}
  .event-desc{font-size:.92rem;color:var(--muted);line-height:1.85;margin-bottom:1.1em}
  .event-meta{font-size:.84rem;color:var(--ink);border-top:1px dashed var(--line);padding-top:1em;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
  .event-meta .em-price{color:#fff;background:var(--pop-warm);font-weight:700;padding:4px 12px;border-radius:999px;font-size:.8rem}

  /* ---- ソムリエ（気さく） ---- */
  .somm{background:var(--bordeaux-deep);color:var(--cream)}
  .somm-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:50px;align-items:center}
  .somm-photo{border-radius:10px;overflow:hidden;aspect-ratio:1/1;position:relative;box-shadow:0 16px 40px rgba(0,0,0,.4)}
  .somm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .somm-photo .tag{position:absolute;left:0;bottom:0;background:var(--pop-warm);color:#fff;font-size:.74rem;letter-spacing:.15em;padding:8px 16px;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;border-radius:0 8px 0 0}
  .somm-body .eyebrow{color:var(--gold-soft)}
  .somm-body h3{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;line-height:1.5;margin-bottom:.7em}
  .somm-body h3 em{font-style:normal;color:var(--gold-soft)}
  .somm-body p{margin-bottom:1.2em;color:rgba(246,241,231,.85);font-size:.98rem}
  .somm-body .pull{font-size:1.1rem;color:var(--gold-soft);font-weight:700;border-left:3px solid var(--pop-warm);padding-left:16px;margin:1.4em 0}

  /* ---- 世界を旅するセラー ---- */
  .lineup{text-align:center;background:var(--cream-deep)}
  .lineup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 40px}
  .stat{background:#fff;border-radius:12px;padding:36px 16px;border:2px solid var(--line)}
  .stat .num{font-family:"Helvetica Neue",Arial,sans-serif;font-size:clamp(2.4rem,6vw,3.2rem);font-weight:800;color:var(--bordeaux);line-height:1}
  .stat .num small{font-size:.36em;margin-left:.2em;color:var(--muted);font-weight:400}
  .stat .cap{margin-top:.9em;font-size:.92rem;color:var(--muted)}
  .regions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:48em;margin:0 auto}
  .regions span{border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.88rem;color:var(--muted);background:#fff}

  /* ---- 相場観（気軽に試せる） ---- */
  .market{background:var(--cream)}
  .market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
  .market-card{background:#fff;border:2px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .25s}
  .market-card:hover{border-color:var(--gold)}
  .market-photo{
      height:120px;
      background:var(--cream-deep) center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      border-bottom:1px solid var(--line)
}
  .market-photo .ph{font-size:.74rem;color:#a99a7e;text-align:center;line-height:1.5;padding:10px}
  .market-body{padding:24px 26px 26px}
  .mc-type{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .mc-namerow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .mc-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
  .mc-name{font-size:1.1rem;font-weight:800;color:var(--ink);line-height:1.3}
  .mc-price{display:inline-block;font-family:"Helvetica Neue",Arial,sans-serif;font-size:.9rem;color:#fff;background:var(--pop-warm);padding:3px 12px;border-radius:999px;font-weight:700;white-space:nowrap}
  .mc-price small{font-weight:400;font-size:.78em}
  .mc-row{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:6px 0;color:var(--muted)}
  .mc-row b{color:var(--ink);font-weight:700}
  .mc-note{font-size:.82rem;color:var(--muted);margin-top:12px;line-height:1.7}

  /* ---- ペアリング（気軽に） ---- */
  .pairing{background:var(--bordeaux-deep);color:var(--cream)}
  .pairing .section-head h2{color:var(--cream)}
  .pairing .section-head h2::after{background:var(--gold)}
  .pairing .section-head p{color:rgba(246,241,231,.72)}


  /* ---- グラス ---- */
  .glasses{background:var(--cream-deep)}
  .glass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .glass-card{text-align:center;background:#fff;border-radius:12px;padding:26px 18px;border:2px solid var(--line)}
  .glass-shape{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:14px}
  .glass-shape svg{height:100%;width:auto}
  .glass-name{font-size:1rem;font-weight:800;color:var(--bordeaux);margin-bottom:.4em}
  .glass-for{font-size:.74rem;color:var(--pop-warm);font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.1em;font-weight:700;margin-bottom:.7em}
  .glass-desc{font-size:.82rem;color:var(--muted);line-height:1.8}

  /* ---- 持ち込み ---- */
  .byo{background:var(--cream)}
  .byo-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center}
  .byo-body h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;line-height:1.4;margin-bottom:.6em;color:var(--ink)}
  .byo-body p{color:var(--muted);margin-bottom:1.1em;font-size:.96rem}
  .byo-price-card{background:linear-gradient(160deg,var(--bordeaux),var(--bordeaux-deep));color:var(--cream);padding:40px 36px;border-radius:14px;text-align:center;box-shadow:0 14px 34px rgba(90,19,32,.25)}
  .byo-pc-label{font-size:.72rem;letter-spacing:.25em;color:var(--gold-soft);font-family:"Helvetica Neue",Arial,sans-serif;margin-bottom:12px;font-weight:700}
  .byo-pc-price{font-family:"Helvetica Neue",Arial,sans-serif;font-size:2.8rem;font-weight:800;color:#fff;line-height:1}
  .byo-pc-price small{font-size:.32em;color:rgba(246,241,231,.8);margin-left:.3em;font-weight:400}
  .byo-pc-note{font-size:.82rem;color:rgba(246,241,231,.7);margin-top:12px;line-height:1.7}
  .byo-pc-highlight{font-size:.82rem;color:var(--gold-soft);background:rgba(246,241,231,.08);border:1px solid rgba(246,241,231,.25);border-radius:8px;padding:12px 16px;margin-bottom:20px;line-height:1.7}

  /* ---- CTA ---- */
  .cta-band{background:linear-gradient(150deg,#6e1828,#3d0c16);color:var(--cream);text-align:center;padding:90px 0}
  .cta-band h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;line-height:1.5;margin-bottom:.5em; color:#ffffff;}
  .cta-band p{color:rgba(246,241,231,.85);max-width:30em;margin:0 auto 2.2em}
  .btn{display:inline-block;background:var(--pop-warm);color:#fff;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.1em;font-size:.96rem;padding:18px 50px;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s}
  .btn:link{ color:#ffffff; }
  .btn:visited{ color:#ffffff; }
  .btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(217,131,36,.4)}
  .cta-sub{margin-top:1.5em;font-size:.86rem;color:rgba(246,241,231,.65)}
  .cta-sub a{color:var(--gold-soft);text-decoration:none}
 



 /* ---------- Spotlight (split layout) ---------- */
  .spotlight{
    margin-top:36px;
    background:linear-gradient(160deg, var(--red-card), #2A0F16);
    border:1px solid var(--hair);
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr;
  }
  @media (max-width:820px){
    .spotlight{ grid-template-columns:1fr; }
  }
  .spotlight-photo, .spotlight-wine{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    min-height:220px;
  }



  .spotlight-text{
    padding:34px 34px 30px;
    display:flex; flex-direction:column;
    justify-content:center;
  }
  .spotlight-eyebrow{
    font-size:10px; letter-spacing:0.24em; color:var(--gold);
    margin-bottom:14px;
  }
  .spotlight-dish{
  
    font-family:'Noto Serif JP', serif;
    font-size:22px; font-weight:500;
    margin:0 0 8px; color:var(--wh);
  }
  .spotlight-desc{
    font-size:12.5px; color:var(--ink-dim); margin:0 0 22px;
  }
  .spotlight-wine-name{
    font-family:'Noto Serif JP', serif;
    font-size:17px; font-weight:700;
    color:var(--gold-soft); margin:0 0 8px;
  }
  .spotlight-copy{
    font-size:13px; line-height:1.85; color:var(--ink-dim); margin:0 0 4px;
  }



.with-row{
    display:flex; align-items:center; gap:10px;
    margin-bottom:8px;
  }
  .with-row::after{
    content:"";
    flex:1; height:1px;
    background:var(--hair);
  }
  .white-card .with-row::after{ background:var(--hair-dark); }

  .with-label{
    font-size:10px;
    letter-spacing:0.28em;
    color:var(--gold);
    font-weight:700;
  }
  .white-card .with-label{ color:#9C6B2E; }



  @media(max-width:820px){
    section{padding:60px 0}
    .events-grid{grid-template-columns:1fr}
    .somm-grid{grid-template-columns:1fr;gap:30px}
    .lineup-stats{grid-template-columns:1fr}
    .market-grid{grid-template-columns:1fr}
    .glass-grid{grid-template-columns:1fr;}
    .byo-inner{grid-template-columns:1fr;gap:28px}
  }