@charset "UTF-8";
/* ============================================================
   チーザ＆リーデル キャンペーンLP
   実装対象：Kv / Menu(nav) / Main（header・footerは除外）
   PCデザイン(1500)ベース ／ SPは 768px ブレイクポイントで対応
   Figmaのインスペクト値（色・フォント・余白）を優先
============================================================ */

/* -----------------------------------------------------------
   デザイントークン（Figmaの値）
----------------------------------------------------------- */
:root {
  --black:        #000000;  /* 背景・ベース */
  --white:        #ffffff;  /* カード背景 */
  --red:          #BD353D;  /* ブランド赤（見出しバー・登録ボタン等） */
  --red-accent:   #CC312D;  /* 注意番号・強調赤 */
  --red-border:   #892027;  /* 登録ボタンの縁／影 */
  --green:        #359B3E;  /* ログインボタン */
  --green-border: #198E24;  /* ログインボタンの縁 */
  --green-shadow: #165F1D;  /* ログインボタンの影 */
  --gold:         #DFC174;  /* 見出しの金色（画像側） */
  --gray:         #333333;  /* 注釈グレー */

  --font-gothic: "Noto Sans JP", sans-serif;
  --font-mincho: "Shippori Mincho B1", "Shippori Mincho", serif;

  --content-w: 960px;  /* コンテンツ最大幅 */
  --card-w:    930px;  /* 白カードの基準幅 */
  --nav-h:     74px;   /* PCナビ高さ */
}

/* -----------------------------------------------------------
   リセット / ベース
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-gothic);
  color: var(--black);
  background: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* SP専用の改行（PCでは無効） */
.br-sp { display: none; }

h2, h3, h4, p { margin: 0; }

/* アンカー移動時に少しだけ上に余白を確保（ナビは追従しないため最小限） */
:target { scroll-margin-top: 20px; }

/* -----------------------------------------------------------
   Menu / グローバルナビ（sticky）
----------------------------------------------------------- */
.gnav {
  position: relative;   /* スクロール追従はさせず、この位置に固定（ページと一緒にスクロール） */
  z-index: 100;
  padding: 10px 15px;   /* 左右・上に余白を作り、内側のバーを浮かせる */
  /* KV下端にバーの半分ほどを重ねる（barの半分 37px ＋ 上padding 10px） */
  margin-top: -47px;
}
.gnav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 4px 2px rgba(0,0,0,.25);
  overflow: hidden;     /* 角丸に合わせて中身をクリップ */
}
.gnav__list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  min-height: var(--nav-h);
}
.gnav__list li { text-align: center; }
.gnav__list a {
  display: block;
  padding: 10px 4px;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 16px;
  color: #050000;
  text-decoration: none;
  letter-spacing: .04em;
  transition: opacity .2s;
}
.gnav__list a:hover { opacity: .6; }
/* メニュー文字はデザイン化テキストのため画像（SVG）で表示。全ラベル155px幅で字面を統一 */
.gnav__label {
  display: block;
  width: 100%;
  max-width: 155px;
  height: auto;
  margin: 0 auto;
}
.gnav__share a { display: block; }

/* ハンバーガー（SPのみ表示） */
.gnav__hamburger { display: none; }

/* -----------------------------------------------------------
   共通ヘッダー / フッター（Glico共通・参考サイト準拠）
   ※ common_glonavi.css は #header_glonavi 指定のため素のheader/footerと非干渉
----------------------------------------------------------- */
header {
  position: relative;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
header .logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100px;
}
header .brand {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 118px;
  height: auto;
}
header .logo a,
header .brand a { display: block; }

footer {
  background: #fff;
  padding: 40px;
}
footer .copy {
  text-align: center;
  font-size: 0.6em;
  color: rgba(33,33,33,.8);
}

@media (max-width: 768px) {
  header { height: 45px; }
  header .logo { width: 45px; }
  header .brand { right: 20px; width: 62px; }
  footer { padding: 40px 15px; }
  footer .copy p { letter-spacing: -0.02em; }
}

/* -----------------------------------------------------------
   セクション共通
----------------------------------------------------------- */
.section { width: 100%; }
.section--dark  { background: var(--black); color: var(--white); }
.section--light { background: var(--white); color: var(--black); }

.inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 76px 15px 80px;
}

/* セクション見出し（画像ロゴ） */
.sec-title { margin-bottom: 40px; }
.sec-title img { width: 500px; max-width: 100%; margin: 0 auto; }  /* 画像は2倍書き出し・表示は等倍500pxでシャープに */

/* 注釈テキスト共通 */
.note { font-size: 14px; line-height: 1.7; margin-top: 16px; }
.note--white { color: var(--white); }
.note--black { color: var(--black); }
.note--gray  { color: var(--gray); font-size: 12px; }

/* -----------------------------------------------------------
   KV / メインビジュアル
----------------------------------------------------------- */
.kv { background: var(--black); }
.kv img { width: 100%; max-width: 1500px; margin: 0 auto; }

/* -----------------------------------------------------------
   About / キャンペーン概要
----------------------------------------------------------- */
.about-card {
  background: var(--white);
  padding: 48px 30px 40px;
}
.about-card img { max-width: 680px; margin: 0 auto; }

/* -----------------------------------------------------------
   Entry / キャンペーン参加（CTAブロック）
----------------------------------------------------------- */
.entry-lead {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: .02em;
  margin-bottom: 20px;
}
.entry-note {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* CTAボタン群 */
.cta-group {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-group--stack { flex-direction: column; align-items: center; gap: 20px; }

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 350px;
  max-width: 100%;
  padding: 12px 24px;
  border-radius: 50px;
  border: 3px solid;
  color: var(--white);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.cta-btn__text { display: flex; flex-direction: column; align-items: center; flex: 1; }
.cta-btn__sub  { font-weight: 500; font-size: 14px; line-height: 1.4; }
.cta-btn__main { font-weight: 700; font-size: 24px; line-height: 1.3; }
.cta-btn__arrow { width: 26px; height: 26px; flex: 0 0 auto; }

.cta-btn--regi {
  background: var(--red);
  border-color: var(--red-border);
  box-shadow: 0 8px 0 var(--red-border);
}
.cta-btn--login {
  background: var(--green);
  border-color: var(--green-border);
  box-shadow: 0 8px 0 var(--green-shadow);
}
/* ホバーで沈む（PC＝マウス環境のみ。タッチ端末には適用しない） */
@media (hover: hover) and (pointer: fine) {
  .cta-btn:hover        { transform: translateY(4px); }
  .cta-btn--regi:hover  { box-shadow: 0 4px 0 var(--red-border); }
  .cta-btn--login:hover { box-shadow: 0 4px 0 var(--green-shadow); }
}

/* クリック時はさらに深く沈む（hoverより後に定義して:activeを優先させる） */
.cta-btn:active        { transform: translateY(6px); }
.cta-btn--regi:active  { box-shadow: 0 2px 0 var(--red-border); }
.cta-btn--login:active { box-shadow: 0 2px 0 var(--green-shadow); }

/* -----------------------------------------------------------
   Present / プレゼント内容
----------------------------------------------------------- */
.section--present {
  background: url("../images/present-bg.jpg") center top / cover no-repeat;
  color: var(--white);
}
.present-sp-only { display: none; }   /* PCでは非表示（SPのみ1枚画像で表示） */
.present-card {
  background: var(--white);
  color: var(--black);
  padding: 55px 30px 25px;
  border-radius: 8px;
  overflow: hidden;
}
.present-heading { max-width: 700px; margin: 0 auto 24px; }
.present-list { display: flex; flex-direction: column; gap: 0; }
.present-list li {
  padding: 0 20px 16px;
  border-bottom: 1px dashed var(--black);
  margin-top: 24px;
}
.present-list li:first-child { margin-top: 0; }

/* -----------------------------------------------------------
   Product / 対象商品
----------------------------------------------------------- */
.product-sub {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.product-card {
  background: var(--white);
  color: var(--black);
  padding: 60px 20px;
}
.product-img { max-width: 704px; margin: 0 auto; }
.product-note-red {
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 24px;
}

/* -----------------------------------------------------------
   Application / 応募方法（STEPカード）
----------------------------------------------------------- */
.step-card {
  position: relative;
  background: var(--white);
  color: var(--black);
  padding: 40px 30px;
  margin-bottom: 40px;
}
/* 背景（白カード）は全幅のまま、中の文章の幅だけ730pxに制限して中央寄せ */
.step-title,
.step-text,
.cta-group {
  max-width: 730px;         /* ボタン横並び幅（350×2＋gap30） */
  margin-left: auto;
  margin-right: auto;
}
.step-badge { margin: 0 auto 10px; width: 120px; }
.step-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 28px;
  color: var(--black);
  padding-bottom: 14px;
  margin-bottom: 20px;
  position: relative;
}
/* 見出し下の金色ライン */
.step-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(340px, 90%);
  height: 2px;
  background: var(--gold);
}
.step-text { font-weight: 500; font-size: 18px; line-height: 1.7; }
.step-text--sm { font-size: 16px; line-height: 1.65; text-align: justify; }
.step-text + .cta-group { margin-top: 28px; }  /* STEP1：テキストとボタンの間隔 */
.step-illust { width: 150px; margin: 0 auto 20px; }
.step-notes { margin-top: 24px; text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
.step-notes .note { text-align: justify; }

/* レシート撮影時・アップロード時の注意事項 */
.receipt-notice {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--red);
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  text-align: left;
}
.receipt-notice__title {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 27px;
  text-align: center;
  padding: 18px 10px;
}
.receipt-notice__body { padding: 40px 30px 50px; display: flex; flex-direction: column; gap: 40px; }
.receipt-notice__lead {
  color: var(--gray);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
}

/* 良い撮影例（画像＋番号リスト） */
.receipt-explain { display: flex; gap: 30px; align-items: flex-start; justify-content: center; }
.receipt-explain__img { flex: 0 0 400px; max-width: 400px; }
.receipt-explain__text { flex: 1; font-weight: 500; font-size: 18px; color: var(--gray); line-height: 1.9; }
.receipt-points { margin: 8px 0; }
.receipt-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  counter-increment: rp;
  color: var(--red-accent);
  font-weight: 700;
  font-size: 20px;
  margin: 6px 0;
}
.receipt-points { counter-reset: rp; }
.receipt-points li::before {
  content: counter(rp);
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--red-accent);
  color: var(--white);
  font-size: 15px;
  line-height: 25px;
  text-align: center;
}
.receipt-point-img { margin-top: 16px; max-width: 323px; }

.receipt-block__title {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.receipt-block__list { font-weight: 500; font-size: 16px; line-height: 1.8; }
.receipt-block__note { color: var(--red-accent); font-weight: 500; font-size: 16px; line-height: 1.8; margin-top: 16px; }
.receipt-ng { margin: 0 auto; }

.howto-foot-note { text-align: left; font-size: 20px; margin-top: 24px; line-height: 1.6; }

/* -----------------------------------------------------------
   アコーディオン共通（Terms / FAQ）
   Closed=「＋」／Open=「−」に切替（1コンポーネント）
----------------------------------------------------------- */
.acc { text-align: left; }
.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--font-gothic);
  text-align: left;
}
.acc__body { display: none; }
.acc.is-open > .acc__body { display: block; }

/* ＋ / − アイコン（CSSで生成） */
.acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.acc__icon::before { width: 22px; height: 3px; transform: translate(-50%,-50%); }              /* 横棒（常時） */
.acc__icon::after  { width: 3px; height: 22px; transform: translate(-50%,-50%); transition: opacity .2s; } /* 縦棒（閉=表示） */
.acc.is-open .acc__icon::after { opacity: 0; } /* 開いたら縦棒を消して「−」に */

/* Terms用アコーディオン */
.acc--terms .acc__head {
  background: var(--red);
  color: var(--white);
  padding: 20px 24px;
}
.acc--terms .acc__label {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .06em;
}
.terms-intro {
  color: var(--white);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .05em;
  text-align: justify;
  padding: 24px 4px;
}
.terms-box {
  background: var(--white);
  color: var(--black);
  padding: 30px;
  text-align: left;
}
.terms-block { padding: 16px 0; }
.terms-block + .terms-block { border-top: 0; }
.terms-cat {
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--black);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.terms-box p { font-size: 14px; line-height: 1.9; font-weight: 500; letter-spacing: .04em; margin-bottom: 8px; }
.terms-note { color: var(--gray); }
.terms-step { font-weight: 700; }
.terms-list { font-size: 14px; line-height: 1.9; font-weight: 500; letter-spacing: .04em; }
.terms-list--dot li { position: relative; padding-left: 1.2em; margin-bottom: 6px; }
.terms-list--dot li::before { content: "・"; position: absolute; left: 0; }
.terms-list--num { counter-reset: tnum; }
.terms-list--num li { position: relative; padding-left: 1.8em; margin-bottom: 6px; counter-increment: tnum; }
.terms-list--num li::before { content: "(" counter(tnum) ")"; position: absolute; left: 0; }
.terms-box a { color: #1d1df3; text-decoration: underline; word-break: break-all; }

/* -----------------------------------------------------------
   FAQ / よくある質問
----------------------------------------------------------- */
.faq-card { background: var(--white); color: var(--black); padding: 60px 20px; }
.faq-lead {
  font-weight: 700;
  font-size: 18px;
  color: var(--gray);
  line-height: 1.8;
  text-align: center;
  margin-bottom: 32px;
}
.faq-list { display: flex; flex-direction: column; gap: 16px; max-width: 730px; margin: 0 auto; }
.acc--faq .acc__head {
  background: var(--black);
  color: var(--white);
  border-radius: 30px;
  padding: 16px 24px;
}
.acc--faq .acc__label {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .06em;
  line-height: 1.4;
}
.faq-answer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 16px 24px 8px;
}
.faq-a { color: var(--red); font-weight: 700; font-size: 26px; line-height: 1.3; flex: 0 0 auto; }
.faq-answer p { font-size: 18px; line-height: 1.8; text-align: left; letter-spacing: .03em; }

/* -----------------------------------------------------------
   Contact / お問い合わせ
----------------------------------------------------------- */
.section--contact .inner { padding-top: 40px; padding-bottom: 40px; }
.contact-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  color: var(--black);
  border-radius: 30px;
  overflow: hidden;
}
.contact-card__title {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 22px;
  padding: 24px 16px;
}
.contact-card__body { padding: 30px 16px; display: flex; flex-direction: column; gap: 8px; }
.contact-card__org { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; }
.contact-card__tel { font-weight: 700; font-size: 24px; letter-spacing: .04em; }
.contact-card__hours { font-size: 12px; line-height: 1.8; }

/* ============================================================
   SP対応（〜768px）
============================================================ */
@media (max-width: 768px) {

  :root { --nav-h: 56px; }

  .br-sp { display: inline; }   /* SP専用の改行を有効化 */

  /* --- Menu：SPは常時表示の2列グリッド（デザイン準拠・ハンバーガー廃止） --- */
  .gnav { margin-top: -46px; padding: 0 15px; }  /* KV下端に重ねる */
  .gnav__inner { padding: 14px 16px 16px; }       /* 角丸白カードの内側余白 */
  .gnav__hamburger { display: none; }

  .gnav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 0;
    min-height: 0;
    align-items: stretch;
  }
  .gnav__list a {
    padding: 13px 4px;
    font-size: 14px;
    border-bottom: 1px solid #050000;   /* 各項目の下線 */
  }
  .gnav__share { grid-column: 1 / -1; }  /* SHAREは横幅いっぱい・中央 */
  .gnav__share a {
    justify-content: center;
    border-bottom: 0;
    padding-top: 15px;
  }

  /* --- セクション余白 --- */
  .inner { padding: 40px 15px 48px; }
  .sec-title { margin-bottom: 24px; }
  /* .sec-title img { max-width: 260px; } */

  /* --- KV --- */
  .kv img { max-width: 100%; }

  /* --- About --- */
  .about-card { padding: 24px 15px; }
  .about-card img { max-width: 100%; }   /* 680px指定が横はみ出しするのでコンテナ幅に収める */

  /* --- Present：SPはデザイン専用の1枚画像に切り替え --- */
  .present-pc-only { display: none; }
  .present-sp-only { display: block; width: 100%; }

  /* --- Product：SPは2+1縦積み画像。デザイン実寸285pxで中央寄せ --- */
  .product-img { max-width: 285px; }

  /* --- Entry / CTA --- */
  .entry-lead { font-size: 17px; }
  .entry-note { font-size: 12px; }
  .cta-group { gap: 16px; }
  .cta-btn { width: 100%; max-width: 340px; padding: 10px 18px; }
  .cta-btn__main { font-size: 20px; }
  .cta-btn__sub { font-size: 12px; }

  /* --- Present --- */
  .present-card { padding: 30px 15px 20px; }
  .present-list li { padding: 0 5px 12px; }

  /* --- Product --- */
  .product-sub { font-size: 16px; }
  .product-card { padding: 30px 15px; }
  .product-note-red { font-size: 14px; text-align: left; }

  /* --- Application --- */
  .step-card { padding: 30px 15px; }
  .step-title { font-size: 22px; }
  .step-text { font-size: 16px; }
  .step-badge { width: 100px; }

  .receipt-notice__title { font-size: 18px; }
  .receipt-notice__body { padding: 24px 15px 30px; gap: 30px; }
  .receipt-notice__lead { font-size: 15px; text-align: left; }
  .receipt-explain { flex-direction: column; gap: 20px; align-items: center; }
  .receipt-explain__img { flex-basis: auto; width: 100%; max-width: 320px; }
  .receipt-explain__text { font-size: 15px; }
  .receipt-points li { font-size: 16px; }
  .receipt-block__title { font-size: 18px; }
  .receipt-block__list,
  .receipt-block__note { font-size: 14px; }
  .howto-foot-note { font-size: 13px; }

  /* --- Terms --- */
  .acc--terms .acc__head { padding: 16px; }
  .acc--terms .acc__label { font-size: 16px; }
  .terms-box { padding: 20px 15px; }
  .terms-intro { font-size: 13px; }

  /* --- FAQ --- */
  .faq-card { padding: 30px 15px; }
  .faq-lead { font-size: 15px; }
  .acc--faq .acc__head { padding: 14px 18px; border-radius: 20px; }
  .acc--faq .acc__label { font-size: 16px; }
  .faq-answer { padding: 14px 8px 8px; }
  .faq-a { font-size: 20px; }
  .faq-answer p { font-size: 15px; }
  .acc__icon { width: 18px; height: 18px; }
  .acc__icon::before { width: 18px; }
  .acc__icon::after { height: 18px; }

  /* --- Contact --- */
  .contact-card__title { font-size: 18px; }
  .contact-card__tel { font-size: 20px; }
}