: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);
}

body {
  margin:0;
  color:var(--ink);
  background: var(--bg) url("../img/background01.png") repeat;
  font-family:'Noto Sans JP', sans-serif;
  line-height:1.65;
}

/* ===== ヘッダー ===== */
.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;}

.brand .logo {
  height:40px;   /* ヘッダーの高さに合わせる */
  width:auto;    /* 幅は自動で調整される */
  border-radius:0;
  box-shadow:none;
}

.brand-name {font-family:"Playfair Display", serif; font-size:22px;}
.btn {
  padding:10px 16px; border-radius:999px; font-weight:600; text-decoration:none;
}
.btn-primary {background:var(--accent); color:#fff;}
.btn-ghost {background:transparent; color:var(--ink-soft);}

/* ===== コンテンツ ===== */
.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; margin:0;}
.panel a {display:block; text-decoration:none; color:inherit;}

/* ===== フッター ===== */
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;}
.footer-grid {display:grid; gap:18px;}
.qr {display:flex; align-items:center; gap:16px;}
.qr img {width:132px; height:auto;}
.muted {color:var(--ink-soft); font-size:.95rem;}
.link {font-weight:700; word-break:break-all;}

/* ===== アニメーション ===== */
.reveal {
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in {opacity:1; transform:none;}

/* 4枚目だけを対象にする */
.panel:nth-of-type(4) img {
  width: 103%;       /* さらに少し拡大（102% → 103%） */
  margin-left: -1.5%; /* 左にずらす量も微調整 */
}
.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);
}