@charset "UTF-8";
/* =========================================================
   JA「JA特産品 プレゼントキャンペーン」LP
   Figma フレーム「5」(440×5151 / SP) の数値をそのまま実装。
   中央カラムは常に 440px 幅・コンテンツ 380px（左右 30px）。
   ========================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
  color: #000; background: #fff; font-weight: 400;
  /* Figma のテキストは全て PALT（プロポーショナルメトリクス）指定 */
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; }

/* ---------- design tokens（Figma のカラー値） ---------- */
:root {
  --red:   #DD3E56;  /* キャンペーンカラー */
  --green: #539605;  /* ニッポンエールご当地グミ */
  --cream: #FFFBEA;  /* ページ背景 */
  --stripe-a: #FFEA7D;
  --stripe-b: #FFE382;
}

/* ---------- layout（PC01：中央はSP幅カラム／PCで左右レール） ---------- */
main, .site-footer { width: 100%; max-width: 440px; margin: 0 auto; }
main { background: var(--cream); }
.container { padding: 0 30px; }          /* 440 - 30*2 = 380 */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 16px); }   /* 固定ヘッダー分 */
/* ---------- 固定ヘッダー（Figma: 白帯 440×70 / JAロゴ 54×32 @ x20,y19）
   0813戻しPDF p6/p7 のご指摘②「PCヘッダー固定・SPカラム内ヘッダーなし」に対応。
   PC(1024px〜)は全幅でロゴ左寄せ、それ未満は中央440pxカラムの左端に揃える。 ---------- */
/* ヘッダーは全幅で上部固定（PC・SP共通／ロゴは画面左寄せ）。
   440px設計（帯70px・ロゴ32px・左余白20px）を基準に、
   440px未満の端末では同じ比率で縮小するレスポンシブ指定。 */
:root { --header-h: min(70px, 15.91vw); }
body { padding-top: var(--header-h); }
.site-header {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: 100%; height: var(--header-h); background: #fff; border-bottom: 1px solid #CCCCCC;
}
.site-header__inner {
  display: flex; align-items: center; height: 100%; padding-left: min(20px, 4.55vw);
}
/* ロゴは高さ基準。JAはだの等の横長ロゴに差し替えても崩れません。
   ロゴ全体がトップへのリンク（.site-header__home）。 */
.site-header__home { display: flex; align-items: center; }
.site-header__logo { width: auto; height: min(32px, 7.27vw); }


.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- hero ---------- */
.hero { position: relative; line-height: 0; }
.hero img { width: 100%; }
.hero__pc { display: none; }
.hero__sp { display: block; }
/* CTAボタン（Figma: 437×115 @ x1,y830）。
   KV画像にはボタンを含めず、この要素で表示する（スクロール時に下部固定へ切替） */
.hero__cta {
  position: absolute; z-index: 2;
  left: 0.23%; width: 99.32%; top: 85.97%; height: 13.01%;
  background: url("../images/rail-cta.png?v=2") center center / contain no-repeat;
  border-radius: 999px;
}
.hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* =========================================================
   キャンペーン期間 / 注意事項
   ========================================================= */
.sec--period { padding-top: 30px; }

.info-card + .info-card { margin-top: 15px; }
.info-card__head {
  background: var(--red); color: #fff; text-align: center;
  font-size: 20px; font-weight: 700; line-height: 24px; padding: 8px 10px;
  border-radius: 12px 12px 0 0;
}
.info-card__body { background: #fff; border-radius: 0 0 12px 12px; padding: 20px; }
.info-card__body--period { padding-bottom: 31px; }
.info-card__body--notes { padding-bottom: 44px; }
.info-card__date { font-size: 24px; font-weight: 700; line-height: 28.8px; color: #000; }
.info-card__note { font-size: 15px; font-weight: 400; line-height: 24px; margin-top: 8px; }
.info-card__text { font-size: 14px; font-weight: 400; line-height: 24px; }

/* 各期の応募締切 */
.deadline { margin-top: 26px; }
.deadline__rows { margin-top: 15px; }
.deadline__ttl { font-size: 18px; font-weight: 700; line-height: 21.6px; color: var(--red); }
.deadline__row {
  display: flex; align-items: center; gap: 40px;
  padding: 16px 0; border-top: 1px solid #CCCCCC;
}
.deadline__row:last-of-type { border-bottom: 1px solid #CCCCCC; }
.deadline__k { font-size: 18px; font-weight: 400; line-height: 21.6px; }
.deadline__v { font-size: 18px; font-weight: 700; line-height: 21.6px; }
.deadline__note { margin-top: 10px; font-size: 11px; font-weight: 400; line-height: 13.2px; }

/* =========================================================
   キャンペーン概要（黄色ストライプ＋紙吹雪）
   ========================================================= */
.stripe-bg {
  margin-top: 30px;
  padding-bottom: 30px;
  background-image:
    url("../images/confetti.png?v=2"),
    repeating-linear-gradient(90deg, var(--stripe-a) 0 28.6px, var(--stripe-b) 28.6px 57.2px);
  background-repeat: no-repeat, repeat;
  background-size: 100% 379px, auto;
  background-position: top center, top left;
}
.sec--campaign { padding-top: 30px; }
.sec-head { text-align: center; color: var(--red); font-size: 24px; font-weight: 700; line-height: 28.8px; }
.sec-head__en {
  display: block; margin-top: 4px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 16px; font-weight: 700; line-height: 19.4px; letter-spacing: .05em;
}
.lead { margin-top: 15px; text-align: center; font-size: 15px; font-weight: 700; line-height: 26.2px; color: #000; }

/* ---- 賞品紹介カード ---- */
.card { position: relative; background: #fff; border-radius: 12px; padding: 30px 20px 28px; }
.card__ribbon {
  position: absolute; z-index: 2; top: -19px; left: 50%; transform: translateX(-50%); height: auto;
}
.prize { margin-top: 47px; }
/* 抽選バッジ（Figma: 124×124 @ x313,y1818 / 文字が傾いているため画像で配置） */
.prize__badge {
  position: absolute; z-index: 2; top: -37px; right: -27px; width: 124px; height: 124px;
}

.prize__photo { position: relative; }
.prize__photo img { width: 100%; }
.prize__photo figcaption {
  position: absolute; left: 7px; top: 7px;
  font-size: 11px; font-weight: 500; line-height: 11px; color: #000;
}
.prize__t1 {
  display: flex; align-items: baseline; justify-content: center; height: 28px;
  margin-top: 16px; color: var(--red);
  font-size: 21px; font-weight: 900; line-height: 28px;
}
.prize__t1 .big { font-size: 30px; }
.prize__t2 {
  margin-top: 5px; text-align: center; color: var(--red);
  font-size: 56px; font-weight: 700; line-height: 67.2px;
}
.prize__desc { margin-top: 10px; text-align: center; font-size: 16px; font-weight: 500; line-height: 24px; }

/* ---- Wチャンス ---- */
.wchance { margin-top: 36px; padding-bottom: 20px; }
.wchance__lead { height: 56px; margin-top: 4px; text-align: center; font-size: 16px; font-weight: 700; line-height: 28px; }
.wchance__bar {
  display: flex; align-items: center; justify-content: center;
  width: 285px; height: 45px; margin: 12px auto 0;
  background: var(--green); color: #fff; text-align: center;
  font-size: 16px; font-weight: 500; line-height: 19.2px; border-radius: 4px;
}
.wchance__t1 { margin-top: 6px; text-align: center; color: var(--green); font-size: 24px; font-weight: 700; line-height: 28.8px; }
.wchance__t2 { margin-top: 3px; text-align: center; color: var(--green); font-size: 40px; font-weight: 700; line-height: 48px; }
.wchance__photo { width: 195px; margin: 16px auto 0; }
.wchance__note { margin-top: 8px; font-size: 11px; font-weight: 500; line-height: 13.2px; }

.envelope { margin-top: 15px; width: 100%; }

/* =========================================================
   ご応募の手順（画像）
   ========================================================= */
.sec--steps { padding-top: 30px; }
.steps-img { width: 100%; }

/* =========================================================
   応募規約
   ========================================================= */
.sec--terms { padding-top: 60px; }
.terms {
  height: 221px; overflow-y: auto; background: #fff;
  border: 1px solid #CCCCCC; border-radius: 8px; padding: 20px;
}
.terms::-webkit-scrollbar { width: 6px; }
.terms::-webkit-scrollbar-track { background: #D9D9D9; border-radius: 100px; }
.terms::-webkit-scrollbar-thumb { background: #8A8A8A; border-radius: 100px; }
.terms h2 { text-align: center; font-size: 20px; font-weight: 700; line-height: 24px; color: #000; }
.terms__body { margin-top: 28px; font-size: 15px; font-weight: 400; line-height: 18px; white-space: pre-wrap; }
.terms__body a { color: var(--red); text-decoration: underline; word-break: break-all; }

/* =========================================================
   よくある質問
   ========================================================= */
.sec--faq { padding-top: 54px; padding-bottom: 62px; }
.faq__head {
  background: var(--red); color: #fff; text-align: center;
  font-size: 24px; font-weight: 700; line-height: 28.8px; padding: 8px 10px;
}
.faq__list { margin-top: 20px; }
.faq__item { background: #fff; border-radius: 5px; padding: 20px; }
.faq__item + .faq__item { margin-top: 10px; }
.faq__q {
  display: flex; align-items: flex-start; gap: 5px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0 20px 0 0; position: relative;
}
.faq__q .mark {
  flex: 0 0 auto; font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700;
  line-height: 24.2px; color: var(--red);
}
.faq__q .txt { font-size: 16px; font-weight: 700; line-height: 19.2px; color: var(--red); padding-top: 3px; }
.faq__q::after {
  content: ""; position: absolute; right: 3px; top: 4px; width: 11px; height: 11px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform .2s;
}
.faq__item.open .faq__q::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > .faq__a-inner { overflow: hidden; }
.faq__a .row { display: flex; align-items: flex-start; gap: 5px; padding-top: 16px; }
.faq__a .mark {
  flex: 0 0 auto; font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700;
  line-height: 24.2px; color: var(--red);
}
.faq__a p { font-size: 14px; font-weight: 400; line-height: 24.5px; color: #000; white-space: pre-wrap; }

/* =========================================================
   footer
   ========================================================= */
.site-footer { background: #fff; color: #000; text-align: center; padding: 50px 20px 40px; }
.site-footer .f-ttl { font-size: 15px; font-weight: 700; line-height: 18px; }
.site-footer .f-body { margin-top: 20px; font-size: 15px; font-weight: 400; line-height: 18px; }
.site-footer .f-time { margin-top: 20px; font-size: 15px; font-weight: 400; line-height: 18px; }
.site-footer .f-note { margin-top: 10px; font-size: 10px; font-weight: 400; line-height: 12px; }
.site-footer .copy { margin-top: 20px; font-size: 10px; line-height: 12px; color: #707070; }
.site-footer a { color: inherit; }

/* =========================================================
   CTA（.hero__cta）は KV内の位置からスタートし、
   そこを通り過ぎてスクロールすると画面下部に固定（SP/タブレットのみ）。
   固定時のみボタン画像を表示（KV内ではKV画像のボタンに重なる透明ホットスポット）。
   ========================================================= */
@media (max-width: 1023px) {
  .hero__cta.is-fixed {
    position: fixed; z-index: 20;
    left: 50%; transform: translateX(-50%); top: auto; bottom: 12px;
    width: min(437px, 99.32vw); height: auto; aspect-ratio: 437 / 115;
    background: url("../images/rail-cta.png?v=2") center center / contain no-repeat;
    border-radius: 999px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  }
  .hero__cta.is-fixed:active { transform: translateX(-50%) translateY(2px); }
  /* 固定CTAに隠れないようフッター下に余白 */
  .site-footer { padding-bottom: 130px; }
}

/* =========================================================
   PC01: 背景（オレンジ波）＋ 左右固定レール
   ========================================================= */
.rail { display: none; }

@media (min-width: 461px) {
  body.lp { background: #FDB515 url("../images/bg-pc.jpg?v=2") center center / cover fixed no-repeat; }
}

@media (min-width: 1024px) {
  .rail {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: fixed; top: 0; bottom: 0; z-index: 5; padding: 24px;
    width: min(430px, calc(50vw - 240px)); text-align: center;
  }
  .rail--left  { right: 50%; margin-right: 220px; }
  .rail--right { left: 50%;  margin-left: 220px; }
  .rail__title { width: 90%; max-width: 360px; margin-bottom: 30px; }
  .rail__cta { display: block; width: 92%; max-width: 380px; transition: transform .12s, opacity .12s; }
  .rail__cta:hover { transform: translateY(-2px); opacity: .95; }
  .rail__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
  .rail__nav { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 300px; }
  .rail__nav a {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--red); color: #fff; font-weight: 700; font-size: 16px;
    padding: 15px 22px; border-radius: 8px; box-shadow: 0 3px 0 rgba(0,0,0,.15);
  }
  .rail__nav a::after { content: "▶"; font-size: 11px; }
  .rail__nav a:hover { filter: brightness(1.05); }
}

/* 440px 未満の端末では左右余白を比率で詰める */
@media (max-width: 439px) {
  .container { padding: 0 6.8%; }
  .wchance__bar { width: 100%; max-width: 285px; }
  .prize__badge { right: -6.2%; }
  .deadline__row { gap: 24px; }
}