/* ============================================================
   リセット & 変数
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:   #ffffff;
  --off:     #faf8f5;
  --warm:    #f7f5f2;
  --beige:   #f3efe9;
  --cream:   #f5f1ea;
  --border:  #e4dfd5;
  --sand:    #d8cfc0;
  --text:    #1a1410;
  --sub:     #5a5450;
  --muted:   #9a978b;
  --light:   #c8c5bc;
  --btn:     #262b21;
  --accent:  #c9956b;
  --gold:    #e8b21e;
  --green:   #89a558;
  --rank1:   #c9956b;
  --rank2:   #b5afa6;
  --rank3:   #c8a882;

  --serif: 'Noto Serif JP','ヒラギノ明朝 ProN','Georgia',serif;
  --sans:  'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --lat:   'Cormorant Garamond','Georgia',serif;

  --max: 1040px;
  --px:  48px;
}

body { background:var(--white); font-family:var(--sans); color:var(--text); font-weight:300; -webkit-font-smoothing:antialiased; }
img  { display:block; max-width:100%; }

/* ── ナビ ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;           /* 上下は高さで管理 */
  height: 64px;              /* ナビ高さを固定 */
  background: var(--off);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ヘッダー */
    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(246,242,235,.95);
      backdrop-filter:blur(8px);
      border-bottom:1px solid rgba(0,0,0,.04);
    }
    .site-header__inner{
      width:min(1280px, calc(100% - 40px));
      margin:0 auto;
      min-height:84px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .site-logo img{
      height:48px;
      width:auto;
      object-fit:contain;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:28px;
      flex-wrap:wrap;
    }
    .site-nav a{
      font-size:14px;
      color:var(--text);
      text-decoration: none;
      font-weight: 500;
    }
    .site-nav a.is-kamone{
      color:#35c6c9;
      font-weight:600;
    }
    .site-nav .btn-shop{
      background:var(--accent);
      color:#fff;
      padding:12px 22px;
      border-radius:10px;
      font-weight:700;
    }

    .hero h1,
.hero p {
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* ── ロゴリンク ── */
.nav__logo-link {
  display: flex;             /* flexでvertical-alignズレを完全解消 */
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  outline: none;
  /* ホバー時のフェード */
  opacity: 1;
  transition: opacity .22s ease;
}
.nav__logo-link:hover  { opacity: .75; }
.nav__logo-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ロゴ画像本体 */
.nav__logo {
  display: block;            /* inline のズレを排除 */
  height: 32px;              /* PC: 32px */
  width: auto;               /* 縦横比を保持 */
  object-fit: contain;
}

/* ── ナビリンク ── */
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin-left: 40px;         /* ロゴとリンクの間隔 */
}
.nav__links a {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--text); }

/* ── 共通 ── */
.wrap  { max-width:var(--max); margin:0 auto; padding:0 var(--px); }

.sec-label { display:block; font-family:var(--lat); font-size:40px; font-weight:300; font-style:italic; letter-spacing:0.06em; color:var(--text); margin-bottom:2px; }
.sec-sub   { display:block; font-size:18px; letter-spacing:0.18em; color:var(--muted); font-weight:300; }

.heading    { font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); font-weight:400; line-height:1.75; letter-spacing:0.06em; color:var(--text); margin-bottom:18px; }
.heading--lg { font-size:clamp(24px,3vw,36px); line-height:1.7; margin-bottom:20px; }
.heading--c  { text-align:center; }

.body-text { font-size:16px; font-weight:300; line-height:1.8; letter-spacing:0.05em; color:var(--sub); margin-bottom:28px; text-shadow: 0 0 black;}

.divider       { width:40px; height:1px; background:var(--sand); margin:20px 0; }
.divider--c    { margin:20px auto; }

/* ── ボタン（共通） ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:400; letter-spacing:0.11em;
  text-decoration:none !important; white-space:nowrap; cursor:pointer; border:none;
  border-radius:100px;
  transition: background .25s, color .25s, border-color .25s,
              transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn:hover  { transform:translateY(-3px); }
.btn:active { transform:translateY(-1px); }

.btn--dark {
  padding:13px 30px; font-size:11px;
  background:var(--btn); color:var(--off) !important;
  box-shadow:0 4px 18px rgba(26,20,16,.18);
}
.btn--dark:hover { background:var(--accent); box-shadow:0 8px 24px rgba(201,149,107,.35); }

.btn--outline {
  padding:12px 28px; font-size:11px;
  background:transparent; color:var(--text) !important;
  border:1.5px solid var(--sand);
  box-shadow:0 2px 10px rgba(26,20,16,.06);
}
.btn--outline:hover { background:var(--text); color:var(--off) !important; border-color:var(--text); box-shadow:0 8px 20px rgba(26,20,16,.2); }

.btn--accent {
  padding:13px 30px; font-size:11px;
  background:var(--accent); color:var(--off) !important;
  box-shadow:0 4px 18px rgba(201,149,107,.3);
}
.btn--accent:hover { background:#b5835a; box-shadow:0 8px 24px rgba(201,149,107,.45); }

.btn--lg { padding:16px 40px; font-size:12px; }

.btn svg { flex-shrink:0; transition:transform .25s ease; }
.btn--dark:hover svg,
.btn--accent:hover svg { transform:translateX(3px); }

/* ── フェードイン ── */
.fd { opacity:0; transform:translateY(22px); transition:opacity .85s ease, transform .85s ease; }
.fd.in { opacity:1; transform:translateY(0); }
.fd.d1 { transition-delay:.1s; } .fd.d2 { transition-delay:.2s; }
.fd.d3 { transition-delay:.3s; } .fd.d4 { transition-delay:.4s; }

/* ── 星評価 ── */
.stars { display:inline-flex; gap:2px; }
.stars span { color:var(--gold); font-size:13px; line-height:1; }

/* ============================================================
   ヒーロー
============================================================ */
.hero {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:640px; background:var(--off); overflow:hidden;
}
.hero__left {
  background:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 64px 80px 60px;
  position:relative; overflow:hidden;
}
.hero__left::before { content:''; position:absolute; width:480px; height:480px; border-radius:50%; border:1px solid rgba(201,149,107,.15); top:-140px; left:-160px; pointer-events:none; }
.hero__left::after  { content:''; position:absolute; width:280px; height:280px; border-radius:50%; border:1px solid rgba(216,207,192,.4); bottom:-80px; right:-40px; pointer-events:none; }

.hero__tag { display:inline-flex; align-items:center; gap:12px; margin-bottom:32px; opacity:0; animation:fadeUp .8s ease .05s forwards; }
.hero__tag-line { width:32px; height:1px; background:var(--accent); }
.hero__tag-text { font-family:var(--lat); font-size:11px; font-weight:300; font-style:italic; letter-spacing:0.18em; color:var(--accent); }

.hero__catch {
  font-family:var(--serif); font-size:clamp(36px,3.6vw,52px);
  font-weight:500; line-height:1.85; letter-spacing:0.04em; color:var(--text);
  margin-bottom:12px;
  opacity:0; animation:fadeUp .9s cubic-bezier(.25,.46,.45,.94) .15s forwards;
}
.hero__catch em { position:relative; display:inline; white-space:nowrap; font-style:normal; }
.hero__catch em::after { content:''; position:absolute; left:-2px; right:-2px; bottom:3px; height:8px; background:linear-gradient(90deg,rgba(201,149,107,.25),rgba(237,229,214,.65)); z-index:-1; border-radius:4px; transform:skewX(-4deg); }

.hero__sub { font-size:13px; font-weight:300; line-height:2.1; letter-spacing:0.06em; color:var(--sub); margin-bottom:48px; opacity:0; animation:fadeUp .9s cubic-bezier(.25,.46,.45,.94) .28s forwards; }

/* ヒーロー信頼バッジ */
.hero__trust {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-bottom:36px;
  opacity:0; animation:fadeUp .9s ease .38s forwards;
}
.hero__trust-item { display:flex; align-items:center; gap:7px; }
.hero__trust-num  { font-family:var(--lat); font-size:22px; font-weight:400; letter-spacing:-0.01em; color:var(--text); line-height:1; }
.hero__trust-label { font-size:9.5px; font-weight:300; letter-spacing:0.08em; color:var(--muted); line-height:1.5; }
.hero__trust-sep   { width:1px; height:28px; background:var(--border); flex-shrink:0; }

.hero__btns { display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:fadeUp .9s cubic-bezier(.25,.46,.45,.94) .48s forwards; }

.hero__note { display:flex; align-items:center; gap:10px; margin-top:32px; flex-wrap:wrap; opacity:0; animation:fadeUp .9s ease .6s forwards; }
.hero__note-sep  { width:1px; height:12px; background:var(--sand); flex-shrink:0; }
.hero__note-item { font-size:9.5px; font-weight:300; letter-spacing:0.1em; color:var(--light); }

.hero__right { position:relative; background:var(--off); overflow:hidden; animation:slideIn .95s cubic-bezier(.25,.46,.45,.94) .08s both; }
.hero__right::before { content:''; position:absolute; left:0; top:0; bottom:0; width:36px; background:linear-gradient(to right,var(--cream),transparent); z-index:2; pointer-events:none; }
.hero__img { position:absolute; inset:36px 36px 36px 28px; overflow:hidden; background:var(--beige); }
.hero__img img { width:100%; height:100%; object-fit:cover; object-position:55% 18%; display:block; animation:zoomIn 1.6s cubic-bezier(.25,.46,.45,.94) .15s both; }
.hero__deco { position:absolute; right:14px; bottom:52px; writing-mode:vertical-rl; font-family:var(--lat); font-size:9px; font-style:italic; letter-spacing:0.2em; color:rgba(180,170,158,.45); z-index:3; pointer-events:none; }

/* ============================================================
   ① 共感（暮らし）
============================================================ */
.s-empathy { padding:104px 0; background:var(--white); }
.s-empathy__inner { max-width:var(--max); margin:0 auto; padding:0 var(--px); display:grid; grid-template-columns:1fr 1fr; gap:0 72px; align-items:center; }
.s-img { width:100%; overflow:hidden; background:var(--beige); }
.s-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.s-img:hover img { transform:scale(1.04); }

/* ============================================================
   ② 人気ランキング — NEW
============================================================ */
.s-rank {
  padding:104px 0;
  background:var(--beige);
  position:relative; overflow:hidden;
}
.s-rank::before {
  content:''; position:absolute;
  width:700px; height:700px; border-radius:50%;
  border:1px solid rgba(201,149,107,.08);
  top:-300px; right:-250px; pointer-events:none;
}

.s-rank__header {
  max-width:var(--max); margin:0 auto; padding:0 var(--px);
  margin-bottom:56px;
  display:flex; align-items:flex-end; justify-content:space-between;
}

/* カード列 */
.s-rank__list {
  max-width:var(--max); margin:0 auto; padding:0 var(--px);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.rank-card {
  background:var(--white);
  text-decoration:none !important; color:inherit;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.rank-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(26,20,16,.1); }

/* 順位バッジ */
.rank-card__badge {
  position:absolute; top:12px; left:12px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--lat); font-size:11px; font-weight:400;
  color:var(--white); line-height:1;
}
.rank-card__badge--1 { background:var(--rank1); box-shadow:0 3px 10px rgba(201,149,107,.5); }
.rank-card__badge--2 { background:var(--rank2); }
.rank-card__badge--3 { background:var(--rank3); }
.rank-card__badge--n { background:var(--light); }

/* ベストセラーリボン */
.rank-card__ribbon {
  position:absolute; top:0; right:0; z-index:2;
  background:var(--accent); color:var(--white);
  font-size:8px; font-weight:400; letter-spacing:0.1em;
  padding:4px 10px;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%);
}

.rank-card__img {
  width:100%; aspect-ratio:1; overflow:hidden; background:var(--beige);
}
.rank-card__img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.rank-card:hover .rank-card__img img { transform:scale(1.06); }

.rank-card__body { padding:14px 14px 18px; flex:1; display:flex; flex-direction:column; gap:6px; }

.rank-card__cat   { font-family:var(--lat); font-size:8.5px; font-style:italic; letter-spacing:0.12em; color:var(--accent); }
.rank-card__name  { font-size:11px; font-weight:400; letter-spacing:0.04em; color:var(--text); line-height:1.5; }
.rank-card__price { font-size:11px; font-weight:400; letter-spacing:0.04em; color:var(--text); margin-top:2px; }
.rank-card__price span { font-size:9px; font-weight:300; color:var(--muted); }

/* 星＋レビュー数 */
.rank-card__review { display:flex; align-items:center; gap:5px; }
.rank-card__review-count { font-size:9.5px; font-weight:300; letter-spacing:0.04em; color:var(--muted); }

/* 売れた数バー */
.rank-card__sold { margin-top:6px; }
.rank-card__sold-label { font-size:9px; font-weight:300; letter-spacing:0.06em; color:var(--muted); margin-bottom:4px; }
.rank-card__sold-bar { height:3px; background:var(--border); border-radius:100px; overflow:hidden; }
.rank-card__sold-fill { height:100%; background:linear-gradient(90deg,var(--accent),#e8b21e); border-radius:100px; transition:width .8s ease; }

.rank-card__cta {
  display:block; width:100%; padding:10px 0;
  background:var(--btn); color:var(--off) !important;
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:0.1em; text-align:center;
  text-decoration:none !important; border:none; cursor:pointer;
  transition:background .25s ease;
}
.rank-card__cta:hover { background:var(--accent); }

/* ============================================================
   ③ プリン（主役）
============================================================ */
.s-purin { padding:104px 0; background:var(--white); position:relative; overflow:hidden; }
.s-purin::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; border:1px solid rgba(201,149,107,.1); top:-200px; right:-200px; pointer-events:none; }
.s-purin__header { max-width:var(--max); margin:0 auto; padding:0 var(--px); margin-bottom:64px; text-align:center; }
.s-purin__hero { max-width:var(--max); margin:0 auto; padding:0 var(--px); display:grid; grid-template-columns:1fr 1fr; gap:0 56px; align-items:center; margin-bottom:56px; }
.s-purin__main-img { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--cream); }
.s-purin__main-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.s-purin__main-img:hover img { transform:scale(1.03); }
.s-purin__flavors { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.s-purin__flavor { background:var(--warm); padding:28px 24px; text-align:center; }
.s-purin__flavor-num  { font-family:var(--lat); font-size:10px; font-style:italic; letter-spacing:0.14em; color:var(--accent); display:block; margin-bottom:10px; }
.s-purin__flavor-name { font-family:var(--serif); font-size:14px; font-weight:400; letter-spacing:0.08em; color:var(--text); display:block; margin-bottom:8px; }
.s-purin__flavor-desc { font-size:11px; font-weight:300; line-height:1.8; letter-spacing:0.04em; color:var(--muted); }

/* ============================================================
   ④ 焼き菓子 Kamone
============================================================ */
.s-baked { padding:104px 0; background:#ffdcc7; }
.s-baked__inner { max-width:var(--max); margin:0 auto; padding:0 var(--px); display:grid; grid-template-columns:1fr 1fr; gap:0 72px; align-items:center; }
.s-baked__body { order:1; }
.s-baked__img-wrap { order:2; display:flex; flex-direction:column; align-items:center; gap:20px; }
.s-baked__logo { width:100%; }
.s-baked__img  { width:100%; aspect-ratio:1; overflow:hidden; background:var(--cream); }
.s-baked__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.s-baked__img:hover img { transform:scale(1.04); }
.s-baked__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.s-baked__tag  { font-size:10px; font-weight:300; letter-spacing:0.1em; color:var(--accent); border:1px solid rgba(201,149,107,.4); padding:4px 14px; border-radius:100px; }
/* =========================
   Kamoneセクション背景グラデ
========================= */
.s-baked {
  background: linear-gradient(
    135deg,
    #fff1eb 0%,
    #fce7f3 25%,
    #f3e8ff 55%,
    #e0f2fe 80%,
    #e6fffa 100%
  );
}
.s-baked {
  position: relative;
  overflow: hidden;
}

.s-baked::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 20% 30%,
    rgba(255, 200, 220, 0.25),
    transparent 40%
  ),
  radial-gradient(
    circle at 80% 70%,
    rgba(180, 210, 255, 0.25),
    transparent 40%
  );

  pointer-events: none;
}
.s-baked_inner {
  position: relative;
  z-index: 1;
}


/* =========================
   Kamone見出しの英字フォント
========================= */
.s-baked .sec-label .en,
.sec-label .en {
  font-family: 'Josefin Sans', sans-serif !important;
  font-style: normal !important;   /* 斜体をやめたい場合 */
  font-weight: 400;
  letter-spacing: 0.08em;

  display: inline-block;
  background: linear-gradient(90deg, #f3a6c5 0%, #d1a7d8 30%, #a8c0e8 65%, #7fd6d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* もし既存の .sec-label が italic 指定なら親の影響も抑える */
.s-baked .sec-label {
  font-style: normal;
}


/* =========================
   Kamoneボタンをグラデ化
========================= */
.s-baked .btn,
.s-baked .btn--dark,
.s-baked a.btn,
.s-baked a.btn--dark {
  background: linear-gradient(90deg, #f3a6c5 0%, #d1a7d8 30%, #a8c0e8 65%, #7fd6d8 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(168, 160, 216, 0.28);
}

/* ボタン内の文字やSVGも白に */
.s-baked .btn *,
.s-baked .btn--dark *,
.s-baked a.btn *,
.s-baked a.btn--dark * {
  color: #fff !important;
  stroke: #fff !important;
  fill: none;
}

/* hover */
.s-baked .btn:hover,
.s-baked .btn--dark:hover,
.s-baked a.btn:hover,
.s-baked a.btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(168, 160, 216, 0.36);
  filter: saturate(1.05) brightness(1.02);
}
/* ============================================================
   ⑤ こだわり
============================================================ */
.s-craft { padding:104px 0; background:var(--white); }
.s-craft__header { max-width:var(--max); margin:0 auto; padding:0 var(--px); margin-bottom:72px; }
.s-craft__grid { max-width:var(--max); margin:0 auto; padding:0 var(--px); display:grid; grid-template-columns:1fr 1fr; gap:0 56px; align-items:center; margin-bottom:80px; }
.s-craft__grid:last-child { margin-bottom:0; }
.s-craft__grid--rev .s-craft__img  { order:1; }
.s-craft__grid--rev .s-craft__body { order:2; }
.s-craft__img { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--cream); }
.s-craft__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.s-craft__img:hover img { transform:scale(1.03); }
.s-craft__body { padding:8px 0; }
.s-craft__num { font-family:var(--lat); font-size:40px; font-weight:300; letter-spacing:-0.01em; color:rgba(200,197,188,.5); display:block; margin-bottom:12px; line-height:1; }

/* ============================================================
   ⑥ 口コミ・信頼性 — NEW
============================================================ */
.s-trust {
  padding:104px 0;
  background:var(--beige);
  position:relative; overflow:hidden;
}
.s-trust__header { max-width:var(--max); margin:0 auto; padding:0 var(--px); margin-bottom:64px; text-align:center; }

/* サマリーバー */
.s-trust__summary {
  max-width:var(--max); margin:0 auto; padding:0 var(--px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border); border:1px solid var(--border);
  margin-bottom:64px;
}
.trust-stat { background:var(--white); padding:32px 20px; text-align:center; }
.trust-stat__num {
  font-family:var(--lat); font-size:36px; font-weight:400;
  letter-spacing:-0.01em; color:var(--text); display:block; margin-bottom:6px; line-height:1;
}
.trust-stat__num em { font-size:18px; font-style:normal; }
.trust-stat__label { font-size:10px; font-weight:300; letter-spacing:0.1em; color:var(--muted); }

/* レビューカード */
.s-trust__reviews {
  max-width:var(--max); margin:0 auto; padding:0 var(--px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-bottom:48px;
}
.review-card {
  background:var(--white);
  padding:28px 24px;
  border-left:3px solid var(--accent);
  position:relative;
}
.review-card__quote {
  position:absolute; top:20px; right:20px;
  font-family:var(--lat); font-size:40px; font-weight:300;
  color:rgba(201,149,107,.15); line-height:1;
}
.review-card__stars { margin-bottom:14px; }
.review-card__text {
  font-size:12px; font-weight:300; line-height:2;
  letter-spacing:0.04em; color:var(--sub);
  margin-bottom:18px;
}
.review-card__meta { display:flex; align-items:center; gap:10px; }
.review-card__avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--beige); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.review-card__name { font-size:10.5px; font-weight:400; letter-spacing:0.06em; color:var(--text); }
.review-card__date { font-size:9.5px; font-weight:300; letter-spacing:0.06em; color:var(--text); }

/* メディア掲載バー */
.s-trust__media {
  max-width:var(--max); margin:0 auto; padding:0 var(--px);
  border-top:1px solid var(--border); padding-top:40px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.s-trust__media-label {
  font-size:9px; letter-spacing:0.18em; color:var(--text);
  font-weight:300; white-space:nowrap;
}
.s-trust__media-logos {
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.s-trust__media-item {
  font-family:var(--lat); font-size:12px; font-style:italic;
  font-weight:300; letter-spacing:0.1em; color:var(--text);
  border:1px solid var(--border); padding:5px 16px; border-radius:100px;
}

/* ============================================================
   ⑦ ギフト
============================================================ */
.s-gift { padding:104px 0; background:var(--white); position:relative; overflow:hidden; }
.s-gift::after { content:''; position:absolute; width:500px; height:500px; border-radius:50%; border:1px solid rgba(201,149,107,.1); bottom:-180px; left:-180px; pointer-events:none; }
.s-gift__inner { max-width:var(--max); margin:0 auto; padding:0 var(--px); display:grid; grid-template-columns:1fr 1fr; gap:0 64px; align-items:center; }
.s-gift__img { width:100%; aspect-ratio:1; overflow:hidden; background:var(--beige); position:relative; }
.s-gift__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.s-gift__img:hover img { transform:scale(1.03); }
.s-gift__badge { position:absolute; top:20px; left:20px; background:var(--accent); color:var(--off); font-family:var(--lat); font-size:10px; font-style:italic; letter-spacing:0.14em; padding:6px 16px; border-radius:100px; box-shadow:0 4px 14px rgba(201,149,107,.3); }
.s-gift__checklist { list-style:none; margin-bottom:32px; }
.s-gift__checklist li { font-size:12px; font-weight:300; line-height:1.8; letter-spacing:0.04em; color:var(--sub); padding:10px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.s-gift__checklist li:first-child { border-top:1px solid var(--border); }
.s-gift__checklist li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ============================================================
   ⑧ 商品一覧
============================================================ */
.s-products { padding:104px 0; background:var(--beige); }
.s-products__header { max-width:var(--max); margin:0 auto; padding:0 var(--px); margin-bottom:48px; display:flex; align-items:flex-end; justify-content:space-between; }
.s-products__grid { max-width:var(--max); margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; background:var(--border); border:1px solid var(--border); margin-bottom:48px; }
.s-prod { background:var(--white); text-decoration:none !important; color:inherit; display:flex; flex-direction:column; transition:background .2s ease; }
.s-prod:hover { background:var(--warm); }
.s-prod__img { width:100%; aspect-ratio:1; overflow:hidden; background:var(--beige); }
.s-prod__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.s-prod:hover .s-prod__img img { transform:scale(1.05); }
.s-prod__info { padding:16px 18px 20px; flex:1; display:flex; flex-direction:column; gap:5px; }
.s-prod__cat   { font-family:var(--lat); font-size:9px; font-style:italic; letter-spacing:0.14em; color:var(--accent); }
.s-prod__name  { font-size:11.5px; font-weight:400; letter-spacing:0.05em; color:var(--text); line-height:1.6; }
.s-prod__review { display:flex; align-items:center; gap:5px; }
.s-prod__review-txt { font-size:9.5px; font-weight:300; letter-spacing:0.04em; color:var(--muted); }
.s-prod__price { font-size:11px; font-weight:400; letter-spacing:0.04em; color:var(--text); margin-top:auto; padding-top:6px; border-top:1px solid var(--border); }
.s-prod__cta {
  display:block; padding:11px 0; background:var(--btn); color:var(--off) !important;
  font-family:var(--sans); font-size:10px; font-weight:400; letter-spacing:0.1em;
  text-align:center; text-decoration:none !important;
  transition:background .25s ease;
}
.s-prod__cta:hover { background:var(--accent); }

.s-products__footer { max-width:var(--max); margin:0 auto; padding:0 var(--px); text-align:center; }

/* ============================================================
   アニメーション
============================================================ */
@keyframes fadeUp  { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes zoomIn  { from { transform:scale(1.05); } to { transform:scale(1); } }

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:960px) {
  :root { --px:32px; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero__left { order:2; padding:60px 32px; } .hero__right { order:1; height:420px; }
  .hero__img { inset:20px; }
  .hero__catch { font-size:clamp(28px,6vw,40px); }
  .s-empathy__inner, .s-purin__hero, .s-baked__inner,
  .s-craft__grid, .s-gift__inner { grid-template-columns:1fr; gap:40px; }
  .s-baked__body { order:1; } .s-baked__img-wrap { order:2; }
  .s-craft__grid--rev .s-craft__img { order:1; } .s-craft__grid--rev .s-craft__body { order:2; }
  .s-purin__flavors { grid-template-columns:1fr; }
  .s-rank__list { grid-template-columns:repeat(3,1fr); }
  .s-trust__summary { grid-template-columns:repeat(2,1fr); }
  .s-trust__reviews { grid-template-columns:1fr 1fr; }
  .s-products__grid { grid-template-columns:repeat(2,1fr); }
  .s-products__header { flex-direction:column; align-items:flex-start; gap:16px; }
  .s-rank__header { flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (max-width:600px) {
  :root { --px:24px; }
  .hero__left { padding:48px 24px; } .hero__catch { font-size:28px; line-height:1.8; }
  .hero__btns { flex-direction:column; gap:12px; }
  .btn--dark,.btn--outline,.btn--accent { width:100%; justify-content:center; }
  .hero__right { height:300px; } .hero__img { inset:12px; }
  .hero__trust { gap:12px; }
  .s-empathy,.s-purin,.s-baked,.s-craft,.s-gift,.s-products,.s-rank,.s-trust { padding:72px 0; }
  .s-rank__list { grid-template-columns:1fr 1fr; gap:8px; }
  .s-trust__summary { grid-template-columns:1fr 1fr; }
  .s-trust__reviews { grid-template-columns:1fr; }
  .s-products__grid { grid-template-columns:1fr; }
  .nav { padding: 0 24px; height: 52px; }
  .nav__links { gap: 16px; margin-left: 20px; }
}

/* ============================================================
   フッター
   背景色: #2a2218（温かみのある深ブラウン）
   文字色: #f5f0e8（オフホワイト〜ベージュ）
   アクセント: #c9956b（カラメル）
============================================================ */
/* ================================================================
  footer（新フッター用）
================================================================ */
.site-footer{
  background: linear-gradient(90deg, #3a2418 0%, #5a341f 100%);
  color: #f6efe6;
  margin-top: 80px;
}

.footer__main{
  padding: 64px 0 40px;
}

.footer__inner{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.footer__brand{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__logo-link{
  display: inline-block;
  width: fit-content;
}

.footer__logo{
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
}

.footer__tagline{
  font-size: 14px;
  line-height: 1.9;
  color: rgba(246, 239, 230, 0.88);
}

.footer__sns{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: rgba(246, 239, 230, 0.92);
  text-decoration: none;
  transition: opacity .2s ease;
}

.footer__sns:hover{
  opacity: .75;
}

.footer__sns-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__sns-label{
  font-size: 14px;
}

.footer__address{
  font-size: 13px;
  color: rgba(246, 239, 230, 0.72);
}

.footer__nav-group{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__nav-heading{
  font-size: 14px;
  font-weight: 700;
  color: #d2b56d;
  margin: 0;
}

.footer__nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer__nav-link{
  font-size: 14px;
  line-height: 1.8;
  color: rgba(246, 239, 230, 0.88);
  text-decoration: none;
  transition: opacity .2s ease;
}

.footer__nav-link:hover{
  opacity: .75;
}

.footer__divider{
  height: 1px;
  background: rgba(255,255,255,.12);
}

.footer__bottom{
  padding: 18px 0 24px;
}

.footer__inner--bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer__copy,
.footer__copy-sub{
  font-size: 13px;
  color: rgba(246, 239, 230, 0.72);
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 900px){
  .footer__inner{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer__brand{
    grid-column: 1 / -1;
  }

  .footer__logo{
    max-width: 180px;
  }
}

@media (max-width: 640px){
  .footer__main{
    padding: 48px 0 28px;
  }

  .footer__inner{
    width: min(1180px, calc(100% - 28px));
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer__inner--bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__logo{
    max-width: 160px;
  }
}


/* ── ナビロゴ レスポンシブ ── */
@media (max-width: 960px) {
  .nav { padding: 0 32px; height: 56px; }
  .nav__links { gap: 20px; margin-left: 28px; }
}
@media (max-width: 600px) {
  .nav { padding: 0 24px; height: 52px; }
  .nav__logo { height: 24px; }   /* スマホ: 24px */
  .nav__links { gap: 14px; margin-left: 16px; }
  .nav__links a { font-size: 9.5px; letter-spacing: 0.1em; }
}
@media (max-width: 380px) {
  /* 極小画面: リンクを3件に絞って折り返し防止 */
  .nav__links .nav__hide-xs { display: none; }
}
/* ========================================
   mobile hamburger menu
======================================== */

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 120;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: #4b4139;
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}

/* 開いた状態 */
.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* PCはそのまま */
@media (min-width: 901px) {
  .site-nav {
    display: flex !important;
  }
}

/* スマホ・タブレット */
@media (max-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header__inner {
    min-height: 72px;
    width: min(1280px, calc(100% - 28px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
  }

  .site-logo {
    position: relative;
    z-index: 120;
  }

  .site-logo img {
    height: 38px;
    width: auto;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 100%);
    padding: 18px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(77, 60, 49, 0.08);
    box-shadow: 0 18px 40px rgba(77, 60, 49, 0.12);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    z-index: 110;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    display: block;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(77, 60, 49, 0.06);
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  .site-nav .btn-shop {
    margin-top: 6px;
    text-align: center;
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
  }
}
/* ヘッダーメニューの下線を消す */
.header nav a,
.header-menu a,
.site-nav a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* hover時にも出ないようにする */
.header nav a:hover,
.header-menu a:hover,
.site-nav a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}


/* Kamone専用スタイル */
/* Kamone専用（.enと完全統一） */
.is-kamone {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.08em;
  display: inline-block;

  background: linear-gradient(90deg, #f3a6c5 0%, #d1a7d8 30%, #a8c0e8 65%, #7fd6d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  text-decoration: none !important;
  border-bottom: none !important;
}

.is-kamone:hover {
  filter: brightness(1.1);
}