:root{
  --bg:#F7F0E6; --ink:#1a1a1a; --ink-soft:#4a4a4a; --accent:#b88a5a;
  --card:rgba(255,255,255,.6); --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  background:var(--bg) url("../img02/background01.png") repeat;
  font-family:'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height:1.65;
}
/* header */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(130%) blur(8px);
  background:rgba(247,240,230,.65);border-bottom:1px solid rgba(0,0,0,.05)}
.nav-inner{max-width:1100px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo {
  height:40px;  /* ヘッダーの高さにフィット */
  width:auto;
  border-radius:0;
  box-shadow:none;
}
.brand-name{font-weight:700;letter-spacing:.06em}
.btn{padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(184,138,90,.25)}
/* layout */
.wrap{max-width:1100px;margin:24px auto 80px;padding:0 18px}
.panel{margin:18px auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.panel img{display:block;width:100%;height:auto}
.flex{display:grid;grid-template-columns:1fr;gap:18px}
.copy{padding:18px}
@media (min-width:900px){ .flex{grid-template-columns:1.1fr .9fr} .copy{padding:24px 28px} }
.bullets{margin:.5rem 0 0 1rem;padding:0}
.bullets li{margin:.25rem 0}
.steps{margin:.5rem 0 0 1rem;padding:0}
/* footer */
footer{margin:80px 0 60px}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 18px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.qr{display:flex;align-items:center;gap:16px}
.qr img{width:132px;height:auto}
.link{font-weight:700;word-break:break-all}
.muted{color:var(--ink-soft);font-size:.95rem}
/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

img { display:block; width:100%; height:auto; }

.product-shot {
  background:#E9DEC8; /* 画像のベージュに合わせる */
  overflow:hidden;    /* はみ出し対策 */
}
.product-shot img { display:block; }

.btn-secondary {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .3s, color .3s;
}
.btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}

.product-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 40px;
}

.product-card {
  text-align: center;
  text-decoration: none;
  color: #8B5E3C;             /* 赤茶色の文字 */
  background: #F7F0E6;        /* サイト全体のベージュ背景に合わせる */
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
  width: 220px;
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.product-card p {
  margin-top: 12px;
  font-weight: 600;
  font-size: 1rem;
  color: #8B5E3C;             /* 赤茶色 */
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}