/* =========================================================
   Iwatsukiya Craft & Warm - main.css (FINAL consolidated)
   - Base + Header/Footer + Components + All pages
   ========================================================= */

/* Reset-ish */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.75;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(136, 170, 92, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Skip link */
.skip {
  position: absolute;
  left: -999px; top: 8px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip:focus { left: 8px; }

/* Tokens */
:root{
  --bg: #F6F0E6;         /* ivory */
  --surface: #FFFFFF;
  --surface2: #F3E7D6;   /* warmer band */
  --line: #E3D6C5;
  --text: #2E241C;       /* warm charcoal */
  --muted: #6B5E54;

  --primary: #5A3A24;    /* deep brown */
  --primary-ink: #FFFFFF;

  --accent: #6E8A43;     /* matcha green */
  --accent2: #A4B97B;
  --shadow: 0 10px 26px rgba(46, 36, 28, .08);

  --radius-card: 16px;
  --radius-btn: 10px;
  --container: 1200px;
}

/* Layout */
.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}
.section{ padding: 88px 0; }
.section-tight{ padding-top: 36px; }
@media (max-width: 768px){
  .section{ padding: 64px 0; }
  .container{ width: calc(100% - 28px); }
}

/* Typography */
.h2{
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 10px;
  letter-spacing: .02em;
}
.h3{
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
}
.section-lead{
  margin: 0;
  color: var(--muted);
}
.section-head{ margin-bottom: 26px; }
.row-between{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
@media (max-width: 768px){
  .row-between{ align-items:flex-start; flex-direction:column; }
  .h2{ font-size: 22px; }
}

/* Links */
.link{
  color: var(--primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(90, 58, 36, .35);
  padding-bottom: 2px;
}
.link:hover{ border-bottom-color: rgba(90,58,36,.75); }

/* Breadcrumb */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.breadcrumb a{
  border-bottom: 1px solid rgba(46,36,28,.18);
}
.breadcrumb a:hover{ border-bottom-color: rgba(46,36,28,.5); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); box-shadow: none; }

.btn-primary{
  background: var(--primary);
  color: var(--primary-ink);
  border-color: rgba(0,0,0,0);
}
.btn-outline{
  background: transparent;
  color: var(--primary);
  border-color: rgba(90, 58, 36, .55);
}
.btn-lg{
  padding: 12px 16px;
  font-size: 15px;
}
.btn-full{ width: 100%; }

/* Badges */
.badge-row{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 0; margin: 0 0 16px;
}
.badge{
  display:inline-flex;
  align-items:center;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: var(--primary);
}
.badge-accent{
  background: rgba(110, 138, 67, .12);
  border-color: rgba(110, 138, 67, .25);
  color: #3B4B24;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(246, 240, 230, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand{
  display:flex; align-items:center; gap: 12px;
  min-width: 220px;
}
.brand-mark{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 900;
  color: var(--primary);
}
.brand-name{
  display:block;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  line-height: 1.1;
}
.brand-sub{
  display:block;
  font-size: 12px;
  color: var(--muted);
}

.nav{ display: flex; align-items:center; gap: 12px; }
.nav-links{
  display:flex;
  gap: 18px;
  list-style:none;
  padding: 0; margin: 0;
}
.nav-links a{
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 6px;
  border-radius: 10px;
}
.nav-links a:hover{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
}
.header-ctas{
  display:flex; gap: 10px;
}
.nav-toggle, .nav-panel { display:none; }

/* Mobile nav */
@media (max-width: 980px){
  .nav-links, .header-ctas{ display:none; }
  .nav-toggle{
    display:flex;
    align-items:center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .nav-toggle-lines{
    width: 18px; height: 12px; position: relative;
    display:block;
  }
  .nav-toggle-lines::before,
  .nav-toggle-lines::after{
    content:"";
    position:absolute; left:0; right:0;
    height:2px;
    background: var(--primary);
    border-radius: 2px;
  }
  .nav-toggle-lines::before{ top:0; }
  .nav-toggle-lines::after{ bottom:0; }
  .nav-toggle-label{ font-size: 13px; font-weight: 700; color: var(--primary); }

  .nav-panel{
    display:block;
    position: fixed;
    inset: 72px 0 auto 0;
    background: rgba(246,240,230,.98);
    border-bottom: 1px solid var(--line);
    transform: translateY(-140%);
    transition: transform .25s ease;
    padding: 16px 14px 18px;
  }
  .nav-panel.is-open{ transform: translateY(0); }
  .nav-panel .nav-links{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .nav-panel .nav-links a{
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 12px 10px;
  }
  .nav-ctas{ display:flex; gap: 10px; margin-top: 12px; }
}

/* Mobile bottom bar */
.bottom-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display:none;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(246,240,230,.96);
  border-top: 1px solid var(--line);
  z-index: 1100;
}
@media (max-width: 980px){
  .bottom-bar{ display:flex; }
  body{ padding-bottom: 76px; }
}

/* Cards */
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
}
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .cards-3{ grid-template-columns: 1fr; }
}
.icon{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(90,58,36,.06);
  border: 1px solid rgba(90,58,36,.12);
  color: var(--primary);
  font-weight: 900;
  margin-bottom: 10px;
}

/* Grids */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .cards-grid{ grid-template-columns: 1fr; }
}
.cards-grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .cards-grid-4{ grid-template-columns: 1fr; }
}
.cards-grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){
  .cards-grid-3{ grid-template-columns: 1fr; }
}

/* Product cards thumbs */
.product .thumb{
  height: 160px;
  border-radius: 14px;
  border: 1px solid var(--line);
/*  background:
    radial-gradient(240px 160px at 25% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.10), rgba(110,138,67,.08));
  margin-bottom: 12px; */
}

.product-mini .thumb{ height: 130px; }
.product-cta{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.thumb-cta{
  background:
    radial-gradient(260px 160px at 20% 20%, rgba(110,138,67,.26), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.10), rgba(255,255,255,.2));
}

/* Bands */
.band{
  background: var(--surface2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-inner{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px){
  .band-inner{ grid-template-columns: 1fr; }
}
.band-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.fineprint{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Mini cards */
.mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.mini-card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.mini-title{
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 6px;
  font-family: "Noto Serif JP", serif;
}
.mini-body{ color: var(--muted); font-size: 13px; }
@media (max-width: 980px){
  .mini-grid{ grid-template-columns: 1fr; }
}

/* Tables */
.table-note{
  color: var(--muted);
  font-size: 12.5px;
  margin: 8px 0 10px;
}
.table-scroll{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.94);
}
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 13px;
  color: var(--text);
}
.table th{
  position: sticky;
  top: 0;
  background: rgba(246, 240, 230, .95);
  text-align: left;
  font-weight: 900;
  color: var(--primary);
}
.table tbody tr:hover td{
  background: rgba(110,138,67,.06);
}
.table-compact{ min-width: 520px; }

/* Steps */
.steps{
  list-style:none;
  padding: 0; margin: 0;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.steps li{
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
}
.step-num{
  width: 26px; height: 26px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(90,58,36,.10);
  color: var(--primary);
  font-weight: 900;
}
.step-label{ font-weight: 800; font-size: 13px; }
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr 1fr; }
}

/* Two columns / Panels */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .two-col{ grid-template-columns: 1fr; }
}
.panel{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
}
.panel .muted{ color: var(--muted); font-weight: 700; }

/* Spec list */
.spec-list{
  list-style:none;
  padding: 0;
  margin: 12px 0 0;
  display:grid;
  gap: 8px;
}
.spec-list li{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items:start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(227,214,197,.85);
  background: rgba(246,240,230,.45);
}
.spec-k{
  font-weight: 900;
  color: var(--primary);
  font-family: "Noto Serif JP", serif;
}
.spec-v{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 560px){
  .spec-list li{ grid-template-columns: 1fr; }
}
.cta-row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Callout */
.callout{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(110,138,67,.22);
  background: rgba(110,138,67,.10);
  padding: 14px 16px;
}
.callout-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: #3B4B24;
  margin-bottom: 6px;
}
.callout-body{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* Accordion */
.accordion{ display:grid; gap: 10px; }
.acc{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  padding: 0;
}
.acc summary{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 900;
  color: var(--primary);
  list-style:none;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:"＋";
  float:right;
  color: var(--muted);
}
.acc[open] summary::after{ content:"－"; }
.acc-body{
  padding: 0 14px 14px;
  color: var(--muted);
  font-weight: 700;
}

/* Final CTA */
.final-cta{
  background: rgba(90,58,36,.04);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-split{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .cta-split{ grid-template-columns: 1fr; }
}
.cta-card p{ color: var(--muted); font-weight: 700; }

/* CTA strip (used in detail/concept) */
.cta-strip{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(110,138,67,.22);
  background: rgba(110,138,67,.10);
  padding: 16px 16px;
}
.cta-strip-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: #3B4B24;
  margin-bottom: 6px;
}
.cta-strip-text{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.cta-strip-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .cta-strip{ flex-direction: column; align-items:flex-start; }
}

/* =========================================================
   Shared Page Hero (subpages)  Desktop=2col / SP=1col
   ========================================================= */
.page-hero{
  padding: 34px 0 28px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}

/* ===== Desktop 기본（今まで通り：2カラム） ===== */
.page-hero-inner{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: center;
}

/* 右：画像（.page-hero-copy があっても無くても右に固定） */
.page-hero-inner > .page-hero-media{
  grid-column: 2;
  grid-row: 1 / -1; /* 縦に伸ばす */
}

/* 左：テキスト群（新HTML＝直下に要素が並んでも左に固定） */
.page-hero-inner > .page-hero-copy{ grid-column: 1; }
.page-hero-inner > .kicker,
.page-hero-inner > .page-title,
.page-hero-inner > .page-lead,
.page-hero-inner > .page-hero-actions,
.page-hero-inner > .jump-links{
  grid-column: 1;
}

/* copyラッパーはDesktopでは普通に箱として扱う */
.page-hero-copy{ display: block; }

.page-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 10px;
  letter-spacing: .02em;
}
.page-lead{
  margin: 0;
  color: var(--muted);
  max-width: 75ch;
}
.page-hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* 画像枠（inline の background-image を表示） */
.page-hero-media{
  height: 350px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  background-color: rgba(246,240,230,.6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(280px 220px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  pointer-events:none;
}

/* ===== SPだけ 1カラム + 指定順に並べる ===== */
@media (max-width: 980px){
  .page-hero-inner{
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  /* 旧HTML（.page-hero-copy に入ってる）でも並び替えできるようにする */
  .page-hero-copy{ display: contents; }

  /* 並び順 */
  .page-hero .kicker{ order: 1; }
  .page-hero .page-title{ order: 2; }
  .page-hero .page-hero-media{ order: 3; }
  .page-hero .page-lead{ order: 4; }
  .page-hero .page-hero-actions{ order: 5; }
  .page-hero .jump-links{ order: 6; }

  .page-hero-media{
    height: clamp(180px, 54vw, 260px);
  }
}

/* =========================================================
   TOP page blocks (hero + etc.)
   ========================================================= */
.hero{
  padding: 44px 0 54px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.8), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.45), rgba(255,255,255,0));
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
}
.kicker{
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
}
.hero-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: .02em;
}
.hero-lead{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 70ch;
}
.hero-actions{ display:flex; gap: 12px; margin: 0 0 18px; flex-wrap:wrap; }
.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 560px;
}
.metric{
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 12px;
}
.metric-num{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 2px;
}
.metric-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.hero-media{
  position: relative;
  min-height: 420px;
}
.hero-image{
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.2)),
    repeating-linear-gradient(45deg, rgba(90,58,36,.06), rgba(90,58,36,.06) 6px, rgba(90,58,36,.02) 6px, rgba(90,58,36,.02) 12px);
  box-shadow: var(--shadow);
}
.hero-image-main{ position:absolute; inset: 0 0 48px 0; }
.hero-image-sub{
  position:absolute;
  right: 12px;
  bottom: -50px;
  width: 52%;
  height: 42%;
  background:
    radial-gradient(300px 200px at 40% 40%, rgba(110,138,67,.25), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.25));
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 32px; }
  .hero-media{ min-height: 280px; order: -1; }
  .hero-image-main{ inset: 0; }
  .hero-image-sub{ display:none; }
}

/* Trade block (TOP/anywhere) */
.trade{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .trade{ grid-template-columns: 1fr; }
}
.trade-actions{ margin: 12px 0 0; }
.trade-flow{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.flow-item{
  display:flex;
  align-items:center;
  gap: 8px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}
.flow-dot{
  width: 22px; height: 22px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(110,138,67,.18);
  color: #3B4B24;
  font-weight: 900;
}
.checklist .checklist-ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.checklist li{ margin: 6px 0; }

/* Quality block */
.quality{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: center;
}
.quality-media{
  height: 320px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.10), rgba(90,58,36,.12));
  box-shadow: var(--shadow);
}
.labels{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; }
@media (max-width: 980px){
  .quality{ grid-template-columns: 1fr; }
  .quality-media{ height: 240px; }
}

.quality-media1{
  height: 300px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.10), rgba(90,58,36,.12));
  box-shadow: var(--shadow);
}
.labels{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; }
@media (max-width: 980px){
  .quality{ grid-template-columns: 1fr; }
  .quality-media1{ height: 240px; }
}


/* News cards */
.card.news{
  display:block;
  transition: transform .12s ease;
}
.card.news:hover{ transform: translateY(-2px); }
.news-date{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.news-title{
  font-weight: 900;
  color: var(--primary);
  margin-top: 6px;
}

/* Company block (TOP) */
.company{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: start;
}
.company-media{ display:grid; gap: 12px; }
.company-map{
  height: 220px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(260px 200px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.10), rgba(110,138,67,.10));
}
.company-meta{
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.meta-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}
.meta-text{ color: var(--muted); font-size: 13px; }
.company-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.mini-timeline{ margin-top: 12px; display:grid; gap: 8px; }
.tl{ display:flex; gap: 10px; align-items:baseline; }
.tl-year{ width: 62px; font-weight: 900; color: var(--primary); font-family:"Noto Serif JP", serif; }
.tl-text{ color: var(--muted); font-weight: 700; font-size: 13px; }
@media (max-width: 980px){
  .company{ grid-template-columns: 1fr; }
}

/* =========================================================
   Tabs (shared)
   ========================================================= */
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom: 16px;
}
.tab{
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--primary);
  font-weight: 900;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tab:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.tab.is-active{
  background: rgba(110,138,67,.14);
  border-color: rgba(110,138,67,.25);
  color: #3B4B24;
}

/* =========================================================
   Products page (products.html / page-products.php)
   ========================================================= */
.media-split{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 16px;
  align-items: center;
}
.media-split.reverse{ grid-template-columns: 1.05fr .95fr; }
/* media（商品詳細の画像枠） */
/* Products page (products.html / page-products.php) */
.media{
  height: 260px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;

  /* 画像の表示（←ここが今回の本丸） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(246,240,230,.6);

  /* グラデを重ねるための土台 */
  position: relative;
}

/* グラデは疑似要素で“上に重ねる”＝画像を消さない */
.media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(280px 220px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  pointer-events:none;
}

/* 既存のSP高さ指定はそのままでOK */
@media (max-width: 980px){
  .media-split, .media-split.reverse{ grid-template-columns: 1fr; }
  .media{ height: 200px; }
}

/* =========================================================
   Product detail pages (rusk-sweet / rusk-spicy)
   + Gallery zoom overlay
   ========================================================= */
.detail-hero{
  padding: 34px 0 22px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}
.detail-hero-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}
.detail-hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.jump-links{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.detail-hero-media{ display:grid; gap: 12px; }

.gallery{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
/* === Gallery: 実画像を背景で表示できるようにする（上書きしない） === */
.gallery-main{
  width: 100%;
  height: 260px;
  border-radius: 16px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;

  /* ここが重要：画像の表示設定 */
  background-color: rgba(246,240,230,.65);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* グラデは疑似要素で重ねる（画像を消さない） */
.gallery-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(280px 220px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  pointer-events:none;
}

/* 辛口側のトーン（必要なら class="gallery-main spicy" の時だけ） */
.gallery-main.spicy::before{
  background:
    radial-gradient(280px 220px at 65% 35%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.10), rgba(90,58,36,.14));
}

.gthumb{
  width: 58px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  background-color: rgba(246,240,230,.65);

  /* サムネ画像の表示設定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gthumb.is-active{
  border-color: rgba(110,138,67,.45);
  box-shadow: 0 0 0 3px rgba(110,138,67,.18);
}

/* detail layout */
.detail-layout{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
  align-items: start;
}
.detail-main .detail-block + .detail-block{ margin-top: 28px; }

.detail-side{
  position: sticky;
  top: 92px;
  display:grid;
  gap: 12px;
}
@media (max-width: 980px){
  .detail-hero-inner{ grid-template-columns: 1fr; }
  .gallery-main{ height: 200px; }
  .detail-layout{ grid-template-columns: 1fr; }
  .detail-side{ position: static; }
}
.side-card .side-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 10px;
}
.side-list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 10px;
}
.side-list li{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(227,214,197,.85);
  background: rgba(246,240,230,.45);
}
.side-list span{ color: var(--muted); font-weight: 800; font-size: 13px; }
.side-list b{ color: var(--text); font-weight: 900; }
.side-actions{ display:grid; gap: 10px; margin-top: 12px; }

.side-link{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  color: var(--primary);
}
.side-link:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }

/* Image overlay (zoom) */
.img-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display:grid;
  place-items:center;
}
.img-overlay-backdrop{
  position:absolute;
  inset: 0;
  background: rgba(46,36,28,.55);
}
.img-overlay-panel{
  position: relative;
  width: min(920px, calc(100% - 24px));
  background: rgba(246,240,230,.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.img-overlay-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--primary);
  font-size: 22px;
  font-weight: 900;
  cursor:pointer;
}
.img-overlay-img{
  height: min(70vh, 520px);
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(320px 220px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  background-size: cover;
  background-position: center;
}
.img-overlay-note{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* =========================================================
   OEM page (oem.html / page-oem.php)
   ========================================================= */
.oem-hero{
  padding: 34px 0 22px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}
.oem-hero-inner{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: center;
}
.oem-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.oem-hero-media{
  height: 280px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.12), rgba(90,58,36,.12));
  box-shadow: var(--shadow);
}
.oem-quick{ margin-top: 16px; }
.oem-inline-cta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.oem-table{ min-width: 980px; }
@media (max-width: 980px){
  .oem-hero-inner{ grid-template-columns: 1fr; }
  .oem-hero-media{ height: 200px; }
}

/* =========================================================
   Company page (company.html / page-company.php)
   ========================================================= */
.company-hero-media{
  background:
    radial-gradient(280px 220px at 40% 35%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
}

.message-card{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.message-photo{
  height: 260px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(240px 180px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.10), rgba(90,58,36,.12));
}
.message-body p{ margin: 0 0 10px; color: var(--muted); font-weight: 700; }
.message-sign{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sign-name{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: var(--primary);
}
.sign-sub{ color: var(--muted); font-weight: 800; font-size: 13px; }
@media (max-width: 980px){
  .message-card{ grid-template-columns: 1fr; }
  .message-photo{ height: 250px; }
}

/* Profile grid */
.profile-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .profile-grid{ grid-template-columns: 1fr; }
}
.table-profile{ min-width: 520px; }
.table-profile th{ width: 80px; white-space: nowrap; }
.profile-actions{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

/* Timeline */
.timeline{ display:grid; gap: 12px; }
.t-item{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items:start;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.t-year{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: var(--primary);
}
.t-title{
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}
.t-text{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 560px){
  .t-item{ grid-template-columns: 1fr; }
}

/* Access */
.access-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:start;
}
.access-map{
  height: 320px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
}
.access-info .spec-list{ margin-top: 10px; }
@media (max-width: 980px){
  .access-grid{ grid-template-columns: 1fr; }
  .access-map{ height: 220px; }
}

/* 認証ロゴ */
.company-ninshou-logo{
  padding-top: 50px;
}

/* =========================================================
   FAQ page (faq.html / page-faq.php)
   ========================================================= */
.faq-controls{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.faq-actions{ display:flex; gap: 10px; flex-wrap: wrap; }
.faq-grid{ display:grid; gap: 22px; }

.faq-group{
  background: rgba(255,255,255,.45);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.faq-group .h2{ margin-bottom: 10px; }
.faq-group .accordion{ gap: 10px; }
@media (max-width: 980px){
  .faq-group{ padding: 12px; }
}

/* =========================================================
   Contact page (contact.html / page-contact.php)
   ========================================================= */
.contact-switch{
  padding: 16px;
  border-radius: 18px;
}
.switch-head{ margin-bottom: 12px; }
.switch-buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.switch-note{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-layout{ display:grid; gap: 16px; }
.contact-panel{ display:none; }
.contact-panel.is-active{ display:block; }

.form{ display:grid; gap: 12px; }
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 6px;
}
.req{
  font-size: 11px;
  font-weight: 900;
  color: #3B4B24;
  background: rgba(110,138,67,.14);
  border: 1px solid rgba(110,138,67,.25);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
input, select, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  font-size: 14px;
  color: var(--text);
}
.checks{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  padding: 10px 0 0;
}
.checks label{
  font-weight: 800;
  color: var(--text);
}
.consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-weight: 900;
  color: var(--primary);
}
.consent input{ width: 18px; height: 18px; margin-top: 4px; }
.submit-row{
  margin-top: 6px;
  display:grid;
  gap: 8px;
}
.page-lead b{ color: var(--primary); }

/* =========================================================
   Concept / Belief page (concept.html / page-concept.php)
   ========================================================= */
.belief-hero{
  padding: 34px 0 22px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}
.belief-hero-inner{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: center;
}
.belief-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.belief-hero-media{
  height: 280px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  box-shadow: var(--shadow);
}

.belief-quote{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: 18px;
  border: 1px solid rgba(110,138,67,.22);
  background: rgba(110,138,67,.10);
  padding: 14px 16px;
}
.quote-mark{
  font-family: "Noto Serif JP", serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: #3B4B24;
  margin-top: -6px;
}
.quote-text{
  margin: 0 0 6px;
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: .02em;
}
.quote-note{
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.mvv-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .belief-hero-inner{ grid-template-columns: 1fr; }
  .belief-hero-media{ height: 200px; }
  .mvv-grid{ grid-template-columns: 1fr; }
}
.mvv{ position: relative; overflow: hidden; }
.mvv-label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: #3B4B24;
  background: rgba(110,138,67,.14);
  border: 1px solid rgba(110,138,67,.25);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  margin-bottom: 10px;
}
.mvv p{ margin: 0; color: var(--muted); font-weight: 700; }
.mvv-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
}
.mvv-list b{ color: var(--primary); }

.belief-split{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 16px;
  align-items: center;
}
.belief-split.reverse{ grid-template-columns: 1.05fr .95fr; }
.belief-media{
  height: 300px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(280px 220px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.10), rgba(90,58,36,.12));
  box-shadow: var(--shadow);
}
.belief-media.organic{
  background:
    radial-gradient(280px 220px at 60% 35%, rgba(255,255,255,.92), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(110,138,67,.14), rgba(90,58,36,.08));
}
.belief-media.smalllot{
  background:
    radial-gradient(280px 220px at 40% 35%, rgba(255,255,255,.92), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.14), rgba(110,138,67,.08));
}
@media (max-width: 980px){
  .belief-split, .belief-split.reverse{ grid-template-columns: 1fr; }
  .belief-media{ height: 220px; }
}

/* =========================================================
   Privacy policy page (privacy.html / page-privacy.php)
   ========================================================= */
.policy-layout{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .policy-layout{ grid-template-columns: 1fr; }
}
.policy-main{ padding: 18px; }
.policy-main p{
  color: var(--muted);
  font-weight: 700;
  margin: 10px 0;
}
.policy-main ul{
  margin: 10px 0 14px;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 700;
}
.policy-main li{ margin: 6px 0; }
.policy-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 18px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227,214,197,.85);
  background: rgba(246,240,230,.45);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.policy-note{
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
  border-left: 4px solid rgba(110,138,67,.35);
  padding-left: 10px;
}
.policy-hr{
  border: none;
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}
.policy-contact{
  margin-top: 10px;
  display:grid;
  gap: 6px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(110,138,67,.22);
  background: rgba(110,138,67,.10);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.policy-cta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.policy-side{
  position: sticky;
  top: 92px;
  display:grid;
  gap: 12px;
}
@media (max-width: 980px){
  .policy-side{ position: static; }
}
.policy-toc{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
.policy-toc a{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  color: var(--primary);
}
.policy-toc a:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background: rgba(46,36,28,.06);
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.footer-inner{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.footer-name{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  color: var(--primary);
}
.footer-meta{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.footer-links{
  display:flex; flex-wrap:wrap;
  gap: 10px 14px;
}
.footer-links a{
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  border-bottom: 1px solid rgba(46,36,28,.18);
}
.footer-links a:hover{ border-bottom-color: rgba(46,36,28,.5); }
.footer-legal{
  display:flex;
  flex-direction:column;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 980px){
  .footer-inner{ grid-template-columns: 1fr; }
}

/* =========================================================
   Single Post (News) styles
   ========================================================= */
.post-hero{
  padding: 34px 0 22px;
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}

.post-hero-inner{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .post-hero-inner{ grid-template-columns: 1fr; }
}

.post-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 10px;
}
@media (max-width: 980px){
  .post-title{ font-size: 26px; }
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}
.post-meta a{
  color: var(--primary);
  border-bottom: 1px solid rgba(90,58,36,.25);
}
.post-meta a:hover{ border-bottom-color: rgba(90,58,36,.65); }
.post-dot{ opacity: .65; }
.post-sep{ opacity: .6; margin: 0 6px; }

.post-badges{ display:flex; gap: 8px; flex-wrap:wrap; margin-bottom: 10px; }
.post-lead{
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  max-width: 78ch;
}
.post-hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.post-thumb{
  height: 280px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background:
    radial-gradient(280px 220px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.12), rgba(110,138,67,.10));
  background-size: cover;
  background-position: center;
}
@media (max-width: 980px){
  .post-thumb{ height: 200px; }
}

/* post layout */
.post-layout{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .post-layout{ grid-template-columns: 1fr; }
}
.post-main{ padding: 18px; }
.post-side{
  position: sticky;
  top: 92px;
  display:grid;
  gap: 12px;
}
@media (max-width: 980px){
  .post-side{ position: static; }
}

/* content typography */
.entry-content{
  color: var(--text);
}
.entry-content p{
  color: var(--muted);
  font-weight: 700;
  margin: 12px 0;
}
.entry-content h2, .entry-content h3{
  font-family: "Noto Serif JP", serif;
  color: var(--primary);
}
.entry-content h2{
  margin: 24px 0 10px;
  font-size: 22px;
  font-weight: 900;
}
.entry-content h3{
  margin: 18px 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.entry-content ul, .entry-content ol{
  margin: 12px 0 14px;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 700;
}
.entry-content li{ margin: 6px 0; }
.entry-content a{
  color: var(--primary);
  border-bottom: 1px solid rgba(90,58,36,.25);
}
.entry-content a:hover{ border-bottom-color: rgba(90,58,36,.65); }

.entry-content blockquote{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(110,138,67,.22);
  background: rgba(110,138,67,.10);
  color: var(--text);
}
.entry-content blockquote p{ margin: 0; color: var(--text); }

.entry-content img{
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin: 12px 0;
}

/* tags */
.post-tags{ margin-top: 18px; }
.post-tags-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 8px;
}
.tag-row{ display:flex; flex-wrap:wrap; gap: 8px; }
.tag{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--primary);
}
.tag:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }

/* prev/next */
.post-nav{ display:grid; gap: 10px; }
.post-nav-item{
  border: 1px solid rgba(227,214,197,.85);
  background: rgba(246,240,230,.45);
  border-radius: 14px;
  padding: 10px 10px;
}
.post-nav-label{
  font-weight: 900;
  color: var(--primary);
  font-family: "Noto Serif JP", serif;
  margin-bottom: 6px;
}
.post-nav-link a{
  font-weight: 900;
  color: var(--text);
}
.post-nav-link a:hover{
  color: var(--primary);
  border-bottom: 1px solid rgba(90,58,36,.45);
}

/* latest in sidebar */
.side-news{ display:grid; gap: 10px; }
.side-news-item{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
}
.side-news-item:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }
.side-news-date{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.side-news-title{
  margin-top: 6px;
  font-weight: 900;
  color: var(--primary);
}

/* =========================================================
   Post List (home.php / archive.php) styles
   ========================================================= */
.archive-head{
  margin-bottom: 14px;
}
.archive-controls{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.archive-search{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.archive-search input[type="search"]{
  width: min(420px, 78vw);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  font-size: 14px;
  color: var(--text);
}

.archive-meta{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.archive-grid{
  margin-top: 10px;
}

.archive-card{
  display:block;
}
.archive-thumb{
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(246,240,230,.6);
}
.archive-thumb img{
  width: 100%;
  height: auto;
  display:block;
}
.archive-thumb.is-placeholder{
  height: 160px;
  background:
    radial-gradient(240px 160px at 25% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(90,58,36,.10), rgba(110,138,67,.08));
}
.archive-excerpt{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.archive-tax{
  margin-top: 10px;
}

/* Pagination */
.pagination{
  margin-top: 18px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}
.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  color: var(--primary);
}
.pagination a:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.pagination .current{
  background: rgba(110,138,67,.14);
  border-color: rgba(110,138,67,.25);
  color: #3B4B24;
}
.pagination .dots{
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

/* HERO images */
.hero-image-main{
  background-image: url("../img/0328/0328_0147.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-image-sub{
  background-image: url("../img/0328/0328_0014.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================
   Feature icon: image-ready
========================================= */
.card.feature .icon{
  width: 56px;          /* ←枠を大きく */
  height: 56px;         /* ←枠を大きく */
  border-radius: 16px;  /* 角丸は既存トーンに合わせる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.card.feature .icon img{
  width: 30px;          /* ←中のアイコンサイズ */
  height: 30px;
  display: block;
  object-fit: contain;
}

/* スマホは少し小さく */
@media (max-width: 980px){
  .card.feature .icon{
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  .card.feature .icon img{
    width: 28px;
    height: 28px;
  }
}

/* =========================================
   Product thumbnails (cards-grid)
========================================= */
.card.product .thumb{
  height: 160px;                 /* 枠の高さ（好みで調整OK） */
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 12px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(246,240,230,.6); /* 画像未設定時の下地 */
}

/* スマホは少し低く */
@media (max-width: 980px){
  .card.product .thumb{ height: 140px; }
}

/* 画像割り当て（main.css が assets/css/main.css の場合） */
.thumb--bar{        background-image: url("../img/products/cereal-bar.jpg"); }
.thumb--granola{    background-image: url("../img/products/granola.jpg"); }
.thumb--nuts{       background-image: url("../img/products/nuts-dried.jpg"); }
.thumb--rusk-spicy{ background-image: url("../img/products/rusk-spicy.jpg"); }
.thumb--rusk-sweet{ background-image: url("../img/products/rusk-sweet.jpg"); }

/* 写真ごとの見せたい位置の微調整（必要なものだけ） */
.thumb--rusk-spicy{ background-position: center 70%; } /* 上が白いので少し下寄せ */
.thumb--nuts{       background-position: 30% center; } /* 左手前のナッツを少し優先 */

/* ラスク（スイーツ）だけ被写体位置を下寄せにして、上の白場を減らす */
.thumb--rusk-sweet{
  background-position: center 70%;
}


/* =========================================
   Quality media image  ※全体が欠けないように（contain）
========================================= */
.quality-media{
  background-image: url("../img/ninshou.png");
  background-size: contain;          /* ← cover から contain に変更 */
  background-position: center;
  background-repeat: no-repeat;

  /* 枠の見た目 */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  /* 画像が収まったときの余白色（お好みで） */
  background-color: rgba(246,240,230,.6);

  /* 高さは比率で決める（横長画像に強い） */
  aspect-ratio: 16 / 9;
  min-height: 0;                     /* 既存のmin-heightが邪魔なら無効化 */
}

/* SPでは少し縦を詰める（横長なので高さが出すぎないように） */
@media (max-width: 980px){
  .quality-media{
    aspect-ratio: 16 / 10;           /* ちょい縦長にして見やすく */
  }
}

.quality-media1{
  background-image: url("../img/ninshou1.png");
  background-size: contain;          /* ← cover から contain に変更 */
  background-position: center;
  background-repeat: no-repeat;

  /* 枠の見た目 */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  /* 画像が収まったときの余白色（お好みで） */
  background-color: rgba(246,240,230,.6);

  /* 高さは比率で決める（横長画像に強い） */
  aspect-ratio: 16 / 9;
  min-height: 0;                     /* 既存のmin-heightが邪魔なら無効化 */
}

/* SPでは少し縦を詰める（横長なので高さが出すぎないように） */
@media (max-width: 980px){
  .quality-media1{
    aspect-ratio: 16 / 10;           /* ちょい縦長にして見やすく */
  }
}

/* =========================================
   FIX: mobile horizontal overflow (Quality section)
========================================= */
@media (max-width: 980px){

  /* 1) セクション全体の横はみ出しを封じる（保険） */
  html, body{ overflow-x: hidden; }

  /* 2) 品質セクション（左+右）を縦積みにする */
  .container.quality{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* 3) 子要素が幅を持ってはみ出すのを防ぐ */
  .container.quality > *,
  .container.quality .panel,
  .container.quality .quality-media{
    min-width: 0;
    max-width: 100%;
  }

  /* 4) 画像枠は必ず親幅に収める */
  .quality-media{
    width: 100%;
  }
}

/* =========================================
   Company media (company-map)
========================================= */
.company-map{
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(246,240,230,.6);
}

@media (max-width: 980px){
  .company-map{ min-height: 200px; }
}

/* =========================================
   Company page: message photo
========================================= */
.message-photo{
  width: 100%;
  max-width: 360px;     /* 文章横に置く想定。全幅にしたいなら外してOK */
  aspect-ratio: 3 / 4;  /* 写真の見せ方：比率固定で綺麗 */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center 10%; /* 顔が少し上なので上寄せ気味 */
  background-repeat: no-repeat;
  background-color: rgba(246,240,230,.6);
}

/* SPでは横幅いっぱいに */
@media (max-width: 980px){
  .message-photo{
    max-width: 100%;
  }
}

/* =========================================
   Header / Nav (logo + desktop + mobile drawer)
========================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

/* Brand */
.brand{ display:flex; align-items:center; gap: 10px; text-decoration:none; }
.brand-logo{
  height: 56px;        /* 好みで調整OK */
  width: auto;         /* ←これが重要（比率維持） */
  max-width: 280px;    /* 長すぎる時の保険（任意） */
  display: block;
  object-fit: contain; /* 保険（imgに対して） */
  aspect-ratio: auto;  /* もし1/1が当たってても解除 */
}
@media (max-width: 980px){
  .brand-logo{
    height: 48px;
    max-width: 240px;
  }
}

/* Desktop nav */
.site-nav{ display:block; }
.nav-links{
  display:flex;
  gap: 16px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  font-weight: 900;
  color: var(--text);
  text-decoration:none;
  padding: 8px 8px;
  border-radius: 10px;
}
.nav-links a:hover{
  background: rgba(246,240,230,.65);
  color: var(--primary);
}

/* CTA */
.header-cta{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* Hamburger */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}
.nav-toggle-lines{
  display:block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  position: relative;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: var(--text);
}
.nav-toggle-lines::before{ top: -6px; }
.nav-toggle-lines::after{ top: 6px; }

/* Mobile drawer */
.mobile-menu{
  display:none;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.95);
}
.mobile-menu-inner{
  padding: 14px 0 18px;
}
.mobile-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 6px;
}
.mobile-links a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227,214,197,.85);
  background: rgba(246,240,230,.45);
  font-weight: 900;
  color: var(--text);
  text-decoration:none;
}
.mobile-links a:hover{
  background: rgba(246,240,230,.7);
  color: var(--primary);
}
.mobile-cta{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

/* Responsive: hide desktop nav on mobile */
@media (max-width: 980px){
  .site-nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* When open */
.site-header.is-open .mobile-menu{ display:block; }

/* Optional: animate hamburger to X */
.site-header.is-open .nav-toggle-lines{ background: transparent; }
.site-header.is-open .nav-toggle-lines::before{
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-open .nav-toggle-lines::after{
  top: 0;
  transform: rotate(-45deg);
}

/* Active nav state */
.nav-links a.is-active{
  background: rgba(110,138,67,.14);
  border: 1px solid rgba(110,138,67,.22);
  color: #3B4B24;
}

/* mobile active */
.mobile-links a.is-active{
  border-color: rgba(110,138,67,.35);
  background: rgba(110,138,67,.12);
  color: #3B4B24;
}

/* =========================================
   OEM steps: prevent wrapping
========================================= */
.steps{
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* PCは折り返しOK（チップ自体は改行させない） */
}

.steps li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 86px;            /* ←ここで幅を確保（必要なら 92px など） */
  white-space: nowrap;        /* ←テキストを改行させない */
}

/* ラベル側も念のため */
.steps .step-label{
  white-space: nowrap;
  line-height: 1;             /* 高さぶれ防止 */
}

/* スマホは横スクロールにして確実に1行維持 */
@media (max-width: 980px){
  .steps{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;       /* スクロールバーの余白 */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* 任意：気持ちよく */
  }
  .steps li{
    flex: 0 0 auto;
    scroll-snap-align: start;  /* 任意 */
  }
}

/* =========================================
   OEM section mobile fix: prevent overflow
========================================= */
@media (max-width: 980px){

  /* 1) OEMセクション内は横方向に溢れさせない（保険） */
  #oem,
  #oem .container,
  #oem .band-inner{
    overflow-x: hidden;
  }

  /* 2) 左の4要素（カテゴリ/包材/最小ロット/オーガニック）を1列に */
  #oem .mini-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  #oem .mini-card{
    width: 100%;
    min-width: 0; /* flexやgridのはみ出し対策 */
  }

  /* 3) 右側の「進め方（目安）」を縦積みに（横スクロール禁止） */
  #oem .steps{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    overflow: visible !important;
    flex-wrap: nowrap; /* flex指定があっても崩れにくいように */
    padding-bottom: 0 !important;
  }

  #oem .steps li{
    width: 100%;
    min-width: 0 !important;   /* これがないと飛び出すことがある */
    white-space: normal !important; /* 1列なので改行OK（縦幅で吸収） */
    justify-content: flex-start;
  }

  /* ラベルが窮屈なら少し余白を足す */
  #oem .steps .step-label{
    line-height: 1.2;
  }

  /* 4) 2カラム構造をスマホで縦積みに（もし既に入ってなければ） */
  #oem .band-inner{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* 右側パネルの内部が横に広がるのを防ぐ */
  #oem .oem-mini,
  #oem .panel{
    min-width: 0;
  }
}

/* =========================================
   Trade flow: stack vertically on mobile
========================================= */
@media (max-width: 980px){
  /* ①〜④の並びを縦積み */
  .trade-flow{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .trade-flow .flow-item{
    width: 100%;
    min-width: 0;
    justify-content: flex-start; /* 左揃え */
  }
}

/* Google Map embed (responsive) */
.access-map{ padding: 0; overflow: hidden; }
.map-embed{
  width: 100%;
  aspect-ratio: 16 / 10;      /* お好みで 16/9 でもOK */
  position: relative;
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   Company: Philosophy section (PDF-like layout)
   ========================================================= */
.philosophy{
  /* PDFに合わせて背景はページと同じトーンでOK */
}

.philo-head{
  margin-bottom: 24px;
}

.philo-title{
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 56px;            /* PDFの大見出し感 */
  letter-spacing: .04em;
  margin: 0 0 14px;
}

.philo-lead{
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 18px;
  max-width: 72ch;
}

/* 3つの大見出し（緑＋影） */
.philo-words{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: center;
  margin: 34px 0 28px;
}

.philo-word{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 42px;
  color: var(--accent);
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(46,36,28,.20); /* PDFの“うっすら影” */
  white-space: nowrap;
}

/* ラベル＋説明（3行） */
.philo-lines{
  display: grid;
  gap: 22px;
  margin-top: 8px;
}

.philo-line{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
}

.philo-pill{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid rgba(110,138,67,.75);
  color: #3B4B24;
  background: rgba(110,138,67,.18);
  font-weight: 900;
  letter-spacing: .08em;
}

.philo-text{
  margin: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.9;
}

/* Responsive */
@media (max-width: 980px){
  .philo-title{ font-size: 38px; }

  .philo-words{
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 22px 0 18px;
  }
  .philo-word{
    font-size: 28px;
    white-space: normal;
  }

  .philo-line{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .philo-pill{
    width: fit-content;
  }
  .philo-text{
    font-size: 16px;
  }
}

/* =========================================
   Company profile table: fit on mobile (no cutoff)
========================================= */
@media (max-width: 560px){
  /* 横スクロール前提の min-width を解除して画面に収める */
  .table{ min-width: 0 !important; width: 100%; table-layout: fixed; }
  .table-profile{ min-width: 0 !important; }

  /* 長い文字（住所など）を折り返して見切れ防止 */
  .table th,
  .table td{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* もし親要素の影響でスクロールが殺されている場合の保険 */
  .table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================
   Contact switch tabs: “button” look (only on contact page)
========================================= */
#contact-switch .switch-buttons{
  /* セグメントの台座 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(90,58,36,.06);
}

/* ボタン本体（badgeと差を付ける：角丸を大きくしすぎない＋高さを出す＋影） */
#contact-switch .switch-buttons .tab{
  border-radius: 14px;                 /* ← pill(999px)をやめる */
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(90,58,36,.35);

  box-shadow: 0 10px 18px rgba(46,36,28,.08);
  transform: none;                      /* 共通tabのhover transformを無効化 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 「押せる」ヒント（矢印） */
#contact-switch .switch-buttons .tab::after{
  content: "→";
  font-weight: 900;
  opacity: .7;
}

#contact-switch .switch-buttons .tab:hover{
  border-color: rgba(90,58,36,.6);
  box-shadow: 0 12px 24px rgba(46,36,28,.12);
}

/* 選択中＝塗りつぶし（強いコントラストで“選ばれてる感”） */
#contact-switch .switch-buttons .tab.is-active{
  background: var(--primary);
  color: var(--primary-ink);
  border-color: rgba(0,0,0,0);
  box-shadow: 0 14px 28px rgba(46,36,28,.18);
}

#contact-switch .switch-buttons .tab.is-active::after{
  content: "✓";
  opacity: 1;
}

/* SPは縦積みにして押しやすく */
@media (max-width: 560px){
  #contact-switch .switch-buttons{ grid-template-columns: 1fr; }
  #contact-switch .switch-buttons .tab{ width: 100%; }
}