@charset "UTF-8";
/* レイアウト: 背景は全幅、中身は日本アクセス参考ページと同じ max-width 1140px（左右30px）
   トーン: 広告バナー（add_banner_20261016_v1）準拠 — 明るいゴールド × チョコ文字（白フチ） × 赤バッジ／赤帯 */
:root{
  --gold-1:#fff7d6;     /* ゴールド ハイライト */
  --gold-2:#f0d272;
  --gold-3:#d4a72c;
  --gold-4:#b8860f;     /* ゴールド シャドウ */
  --choco:#4a2512;      /* タイトル文字のチョコ色 */
  --choco-2:#6b3b20;
  --red:#e61f19;        /* バッジ・帯の赤（素材の端の色） */
  --red-lt:#eb6949;     /* 素材の中央の色 */
  --red-dk:#b9140f;
  --cream:#fffaf0;
  --cream-2:#f7ecd2;
  --ink:#3a2214;
  --muted:#7a5d48;
  --white:#ffffff;

  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-latin:var(--f-display);
  --f-body:var(--f-display);

  --content:1140px;
  --gutter:30px;

  /* 白フチ（バナーのタイトル処理） */
  --edge:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 6px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.6);
  --bg-gold:linear-gradient(115deg,var(--gold-1) 0%,#f8e7a6 20%,var(--gold-2) 48%,var(--gold-3) 78%,var(--gold-4) 100%);
  /* 赤グラデーション：書き出し素材（赤ぐらデーション@2x.png）を横いっぱいに引き伸ばす */
  --bg-red:image-set(url(../img/kv/bg_red.webp) type("image/webp"),url(../img/kv/bg_red.jpg) type("image/jpeg")) center / 100% 100% no-repeat,#e61f19;
}

body{font-family:var(--f-body);color:var(--ink);background:var(--cream);line-height:1.9;-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}

h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance}
p,li,dd,td{text-wrap:pretty}  /* 行末に1〜2文字だけ残る改行を防ぐ */
.sp-br{display:none}

.contents_inner{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:110px 0;position:relative;overflow:hidden}
.sec--gold{background:var(--bg-gold)}
.sec--cream{background:var(--cream)}
#secret{padding-top:80px}
/* ゴールド面の左上に New 筆記体（new.svg）を薄く敷く */
.sec--gold::before{content:"";position:absolute;left:-17%;top:-128px;width:clamp(540px,76.5vw,1080px);aspect-ratio:642.4/421.93;background:url(../img/kv/new.svg) center / contain no-repeat;opacity:.55;pointer-events:none}
#secret.sec--gold::before{content:none}  /* おいしさの秘密は New なし */

/* ---------- 共通パーツ ---------- */
/* 見出し：チョコ色明朝＋白フチ、英字はイタリック */
.ttl{text-align:center;margin-bottom:56px;position:relative}
.ttl .en{display:block;font-family:var(--f-latin);font-weight:600;font-size:24px;letter-spacing:.08em;color:var(--gold-4)}
/* h2：影ではなく3pxの白フチ（線幅6pxを文字の下に描いて外側3pxだけ見せる） */
.ttl h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:.1em;line-height:1.5;margin-top:4px;color:var(--choco);-webkit-text-stroke:6px var(--white);paint-order:stroke fill}
/* 見出し下の飾り：1pxの線1本 */
.ttl .orn{width:140px;height:1px;margin:20px auto 0;background:var(--white)}
.ttl .orn i{display:none}
/* 見出しの英字：ゴールド面は白、クリーム面はゴールド（赤は使わない） */
.sec--gold .ttl .en{color:var(--white)}

.lead{text-align:center;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.08em;line-height:2.2;color:var(--choco)}
.pending{display:inline-block;font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.1em;border:1px solid currentColor;padding:2px 12px;margin-bottom:12px;opacity:.75}

/* 赤ラベル（バナーの「応募期間」枠） */
.label{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid currentColor;padding:4px 14px;font-family:var(--f-display);font-weight:700;letter-spacing:.2em;line-height:1.3;text-align:center}

/* ボタン：赤帯＋白文字＋▶ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-width:min(440px,100%);padding:22px 48px;text-decoration:none;border-radius:999px;
  font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.16em;
  color:var(--white);background:var(--bg-red);
  box-shadow:0 0 0 3px var(--white),0 0 0 4px rgba(224,32,26,.35),0 10px 24px rgba(160,20,10,.3);
  transition:transform .25s ease;
}
.btn::after{content:"";border-left:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;transition:transform .25s ease}
/* hover：ボタンを少し拡大＋矢印が右へ（位置・影は変えない） */
.btn:hover{transform:scale(1.02)}
.btn:hover::after{transform:translateX(2px)}
.deco__bnr:hover .btn{transform:scale(1.02)}
.deco__bnr:hover .btn::after{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}}
.btn:focus-visible{outline:3px solid var(--gold-3);outline-offset:6px}
.btn--sub{background:var(--choco);font-size:15px;padding:14px 32px;min-width:0;box-shadow:0 0 0 2px var(--white),0 6px 14px rgba(60,30,10,.25)}

.notes{font-size:12px;line-height:1.8;color:var(--muted)}
.notes li{padding-left:1em;text-indent:-1em}

/* スクロールで浮かぶ（JS有効時のみ） */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}