/* ===============
   GRAVY Base Styles (ヘッダー修正版＋PC安定版)
   --------------- */
:root{
  --bg:#ffffff; --ink:#1b1b1b; --muted:#6b6b6b;
  --brand:#8A7B6E; --brand-ink:#3e3833; --tint:#f6f4f2; --accent:#1f4e3d;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08); --max:1120px;

  /* Header dynamics */
  --header-h:140px;                    /* PCヘッダー高さ（ロゴ大きめ） */
  --header-h-mobile:100px;             /* モバイル */
  --header-bg:rgba(255,255,255,.95);
  --header-bg-scrolled:rgba(255,255,255,.98);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-top:calc(var(--header-h) + env(safe-area-inset-top));
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(92%,var(--max));margin-inline:auto}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid currentColor;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{color:var(--brand-ink);background:transparent}
.btn.ghost:hover{background:#eee7e1}

/* ===== Header ===== */
.site-header{
  position:fixed; left:0; right:0; top:0;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  z-index:9999;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eee; 
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:background .25s ease, height .25s ease, box-shadow .25s ease;
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  height:var(--header-h);
  max-width:var(--max);
  margin:0 auto;
  padding:0 max(20px, calc((100vw - var(--max)) / 2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* ロゴ（PC既定） */
.logo{flex:0 0 auto}
.logo img{
  height:100px;                 /* ロゴ大きめ */
  width:auto;
  max-width:none;
  object-fit:contain;
  display:block;
  transition:height .25s ease;
}

/* ===== Desktop Nav ===== */
.main-nav{flex:1 1 auto; min-width:0; text-align:right}
.main-nav ul{
  display:flex;
  flex-wrap:nowrap;             /* 折り返し禁止（PC） */
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a{
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  padding:10px 0;
  display:inline-block;
  position:relative;
  transition:opacity .2s;
  white-space:nowrap;           /* 文言も1行 */
}
.main-nav a:hover{color:var(--brand-ink);text-decoration:none}
.main-nav a.is-active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:8px;
  height:2px; background:var(--brand);
}

/* スクロール後（PC） */
body.is-scrolled{ --header-h:100px; }
body.is-scrolled .site-header{
  background:var(--header-bg-scrolled);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
body.is-scrolled .logo img{ height:70px; }

/* WordPress 管理バー対策 */
body.admin-bar .site-header{ top:46px; }
body.admin-bar{
  padding-top:calc(var(--header-h) + 46px + env(safe-area-inset-top));
}
@media (min-width:783px){
  body.admin-bar .site-header{ top:32px; }
  body.admin-bar{
    padding-top:calc(var(--header-h) + 32px + env(safe-area-inset-top));
  }
}

/* ===== モバイル＆トグル ===== */
.nav-toggle{
  position:absolute !important;     /* 完全に視覚から隠す */
  appearance:none !important;
  -webkit-appearance:none !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  z-index:-1 !important;
}
.hamburger{
  display:none;
  width:28px; height:24px;
  position:relative;
  cursor:pointer;
  z-index:10000;
}
.hamburger span{
  position:absolute; left:0; right:0;
  height:2px; background:var(--ink);
  border-radius:1px; transition:.2s;
}
.hamburger span:nth-child(1){top:2px}
.hamburger span:nth-child(2){top:11px}
.hamburger span:nth-child(3){bottom:2px}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:clamp(56px,8vw,96px) 0;
  overflow:clip;
}
.hero-inner{max-width:800px}
.hero h1{
  font-size:clamp(28px,5vw,48px);
  line-height:1.2;
  margin:0 0 12px;
  letter-spacing:.02em;
}
.hero p{color:var(--muted);margin:0 0 24px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-media{
  position:absolute; inset:0 0 auto;
  height:min(56vh,640px);
  background:linear-gradient(120deg,#d6d0cb 0%,#f8f6f4 100%);
  mask-image:linear-gradient(#000,transparent 80%);
  z-index:-1;
}

/* Sections */
.section{
  padding:clamp(56px,8vw,88px) 0;
  scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top) + 20px);
}
.section.tint{background:var(--tint)}
.section-head{margin-bottom:28px}
.section-head h2{
  font-size:clamp(22px,3.2vw,32px);
  margin:0 0 8px;
}
.lead{color:var(--muted)}

/* Grids */
.grid{display:grid;gap:24px}
.products{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Cards */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid #eee;
}
.card-media.ratio{aspect-ratio:16/10;background:#f0efee}
.card-body{padding:18px}
.card h3{margin:0 0 6px;font-size:18px}
.product-copy{color:var(--muted);margin:6px 0 12px}
.product-spec{margin:0 0 16px;padding-left:18px;color:var(--muted)}

/* ===== Guarantee (保証セクションをゆったり見せる) ===== */
#guarantee .section-head{
  margin-bottom:32px;
}
#guarantee .section-head .lead{
  margin-top:6px;
  line-height:1.9;
}

/* カードの並びと余白 */
.grid.guarantee{
  display:grid;
  grid-template-columns:1fr;            /* モバイル：1列 */
  gap:20px;                             /* カード間の余白 */
}

#guarantee .card{
  padding:24px 26px;                    /* 内側余白をしっかり */
  border-radius:20px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  border:1px solid #eee;
}
#guarantee .card h3{
  margin:2px 0 10px;
  font-size:18px;
  letter-spacing:.01em;
}
#guarantee .card p{
  margin:0;
  line-height:1.9;
  color:var(--muted);
}

/* PCではカードを横並びにしてさらに余裕を出す */
@media (min-width:720px){
  .grid.guarantee{
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:28px;
  }
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:center;
}
.about-media.ratio{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.bullets{margin:16px 0 0;padding-left:20px}

/* Contact */
.narrow{max-width:760px}
.contact-form{
  display:grid;
  gap:16px;
  background:#fff;
  padding:20px;
  border:1px solid #eee;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.form-row{display:grid;gap:6px}
label{font-weight:600}
input,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  font:inherit;
}
input:focus,textarea:focus{
  outline:2px solid #cdbfb5;
  border-color:#cdbfb5;
}
.contact-meta{color:var(--muted);margin-top:16px}

/* Footer */
.site-footer{
  border-top:1px solid #eee;
  padding:28px 0;
  background:#fff;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-nav{display:flex;gap:16px}
.logo.small img{opacity:.9}

/* ===== PCの“タイト幅”最適化（モバイルは触らない） ===== */
@media (min-width:721px) and (max-width:1200px){
  .main-nav ul{ gap:20px; }
  .main-nav a{ font-size:14px; }
  .logo img{ height:88px; }
}

/* ===== モバイル（既存挙動＋ブランドセクションを修正） ===== */
@media (max-width:720px){
  :root{ --header-h:var(--header-h-mobile); }
  body.is-scrolled{ --header-h:80px; }

  .header-inner{ padding:0 20px; }
  .hamburger{ display:block; }

  /* ヘッダー直下に展開されるドロワー */
  .main-nav{
    position:fixed;
    top:calc(var(--header-h) + env(safe-area-inset-top));
    left:0; right:0;
    background:#fff; 
    border-bottom:1px solid #eee;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transform:translateY(-120%);
    opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s ease;
    z-index:9998;
    max-height:calc(100vh - var(--header-h) - env(safe-area-inset-top));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav ul{
    flex-direction:column; gap:0;
  }
  .main-nav li{ border-top:1px solid #f0f0f0; }
  .main-nav a{ display:block; padding:16px 20px; font-size:16px; }

  /* ハンバーガー開閉（チェックボックスハック） */
  .nav-toggle:checked ~ .hamburger span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }
  .nav-toggle:checked ~ .main-nav{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }

  /* モバイルのロゴ（従来の大きめ） */
  .logo img{ height:80px; max-width:none; }
  body.is-scrolled .logo img{ height:60px; }

  /* モバイルのセクション補正 */
  .section{
    scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top) + 16px);
  }

  /* ▼ ブランドについて：テキストと画像を縦並び＆画像を大きく */
  .about-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .about-media.ratio{
    max-width:420px;
    margin-inline:auto;
  }
}

/* ===== 追加の安定化（PCは1行固定） ===== */
@media (min-width:721px){
  .header-inner{ flex-wrap:nowrap; }  /* 1行固定 */
}