/* ===== SAKURA CAFE 共通スタイル（全特典ページで読み込み） ===== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;700;800&display=swap');

/* 見出しを明朝に＝均質な“テンプレ感”を避け、編集的な温かみを出す */
h1 { font-family:"Shippori Mincho B1", serif; letter-spacing:.02em; }

/* ページ全体に淡い温かみ（紙のような下地） */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 480px at 12% -12%, rgba(95,114,102,.055), transparent 60%),
    radial-gradient(980px 460px at 112% 8%, rgba(201,164,76,.06), transparent 55%),
    radial-gradient(700px 380px at 50% 118%, rgba(184,123,100,.05), transparent 60%); }

/* セクションのスクロール出現 */
.srv{ opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.srv.in{ opacity:1; transform:none; }

/* ===== 上部の戻り／メニューバー ===== */
.sknav{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:42rem; margin:0 auto; padding:12px 20px; }
.sknav a.home{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#5f7266; text-decoration:none; transition:color .2s; }
.sknav a.home:hover{ color:#3f382f; }
.sknav .brand{ font-size:11px; letter-spacing:.24em; color:#7d7266; }
.sknav button.menu{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#5f7266;
  background:#fffdf8; border:1px solid #e6dccb; border-radius:999px; padding:6px 14px; cursor:pointer; transition:.2s; }
.sknav button.menu:hover{ background:rgba(95,114,102,.08); }

/* ===== 追従ボタン（常時アクセス） ===== */
.skfab{ position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:#fff; background:#5f7266; border:none; border-radius:999px;
  padding:11px 16px; box-shadow:0 12px 28px -10px rgba(63,56,47,.55); cursor:pointer; transition:transform .25s ease; }
.skfab:hover{ transform:translateY(-2px); }
.skfab:active{ transform:translateY(0); }

/* ===== ドロワー（特典切替メニュー） ===== */
.skdrawer-ov{ position:fixed; inset:0; z-index:70; background:rgba(63,56,47,.35);
  opacity:0; pointer-events:none; transition:opacity .3s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.skdrawer-ov.open{ opacity:1; pointer-events:auto; }
.skdrawer{ position:fixed; top:0; right:0; height:100%; width:86%; max-width:340px; z-index:80; background:#fffdf8;
  box-shadow:-24px 0 60px -24px rgba(63,56,47,.45); transform:translateX(102%);
  transition:transform .34s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; }
.skdrawer.open{ transform:none; }
.skdrawer .hd{ padding:18px 20px; border-bottom:1px solid #e6dccb; display:flex; align-items:center; justify-content:space-between; }
.skdrawer .hd .t{ font-family:"Shippori Mincho B1",serif; font-weight:700; font-size:15px; color:#3f382f; }
.skdrawer .hd button{ background:none; border:none; font-size:18px; color:#7d7266; cursor:pointer; line-height:1; }
.skdrawer .list{ padding:10px; overflow:auto; }
.skdrawer a.item{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; text-decoration:none; color:#3f382f; transition:background .18s; }
.skdrawer a.item:hover{ background:rgba(95,114,102,.07); }
.skdrawer a.item.active{ background:rgba(95,114,102,.12); }
.skdrawer a.item .n{ flex:none; width:26px; height:26px; border-radius:999px; background:rgba(95,114,102,.12); color:#5f7266; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.skdrawer a.item.active .n{ background:#5f7266; color:#fff; }
.skdrawer a.item .tx{ font-size:13px; font-weight:500; line-height:1.35; }
.skdrawer a.item.home .tx{ font-weight:700; color:#5f7266; }

/* ===== 下部ナビ ===== */
.skbottom{ max-width:42rem; margin:44px auto 0; padding:0 20px 8px; }
.skbottom .inner{ border-top:1px dashed #e6dccb; padding-top:24px; }
.skbottom .back{ text-align:center; }
.skbottom .back a{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff;
  background:#5f7266; border-radius:16px; padding:13px 28px; text-decoration:none; transition:.2s; }
.skbottom .back a:hover{ background:#4c5c52; }
.skbottom .others{ margin-top:20px; }
.skbottom .others p{ text-align:center; font-size:11px; color:#7d7266; margin-bottom:10px; letter-spacing:.06em; }
.skbottom .grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.skbottom .grid a{ font-size:12px; color:#3f382f; text-decoration:none; background:#fffdf8; border:1px solid #e6dccb;
  border-radius:12px; padding:11px 13px; transition:.2s; line-height:1.35; }
.skbottom .grid a:hover{ border-color:rgba(95,114,102,.4); background:rgba(95,114,102,.05); }

@media (prefers-reduced-motion: reduce){
  .srv{opacity:1;transform:none;transition:none}
  .skdrawer,.skdrawer-ov,.skfab{transition:none}
}