@charset "UTF-8";
/* =========================================================
   ジャイアントコーン × 薬屋のひとりごと コラボキャンペーン LP
   - PCデザイン(1500)をベースに、768pxのメディアクエリでSP(375)対応
   - 実装対象は Kv / Menu / Main（Header・Footerは既存サイト側で差し込む前提）
   - Figmaのテキストは実テキスト、画像のみ画像として実装（section毎にHTML/CSS化）
   ========================================================= */

/* ---------- カラー・変数 ---------- */
:root {
  --cream:      #f7f6f2; /* 背景（生成り） */
  --red-dark:   #8b2530; /* 濃い赤（見出し・カード） */
  --red-btn:    #bd353d; /* ボタン赤（Glicoメンバーズ登録） */
  --red-btn-d:  #9e2831; /* ボタン赤 影 */
  --green-btn:  #359b3e; /* ボタン緑（応募ページログイン） */
  --green-btn-d:#2b8033; /* ボタン緑 影 */
  --green-dark: #215d3a; /* INTRODUCTION 背景 */
  --navy:       #233658; /* FAQ / Contact 背景 */
  --navy-bar:   #2c3f61; /* アコーディオン見出しバー */
  --teal:       #3ba475; /* 英字サブラベル・装飾 */
  --text:       #2b2b2b; /* 基本テキスト */
  --line:       #d8d5cd; /* 罫線 */

  --mincho: "Kaisei Opti", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  /* セクション実装（Figma準拠）で使用するフォント変数 */
  --font-head: "Kaisei Opti", "Hiragino Mincho ProN", "Yu Mincho", serif;   /* 和文見出し */
  /* 欧文ラベル：Figma指定は High Tower Text Regular（Web未提供）。
     近いオールドスタイル・セリフの EB Garamond をWebフォントとしてフォールバック */
  --font-en: "High Tower Text", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;     /* 和文本文・UI */
  /* Figmaのカラートークン */
  --dark_red: #822225;
  --dark_blue: #233658;
  --green: #008c4e;
  --red: #d6001c;
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  --pc-width: 1500px; /* PCデザイン基準幅 */
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 既存サイト側で差し込む共通ヘッダー/フッターは content-box 前提で作られているため、
   上の border-box リセットの影響から除外して元の箱モデルに戻す
   （border-box だと .glico_header_logo の width:75px にpadding:80pxが食い込み、
     ロゴ画像 width:100% が 0px に潰れて表示されなくなる） */
#header_glonavi, #header_glonavi *, #header_glonavi *::before, #header_glonavi *::after,
#smp_header_glonavi, #smp_header_glonavi *, #smp_header_glonavi *::before, #smp_header_glonavi *::after,
#footer_glonavi, #footer_glonavi *, #footer_glonavi *::before, #footer_glonavi *::after,
#smp_footer_glonavi, #smp_footer_glonavi *, #smp_footer_glonavi *::before, #smp_footer_glonavi *::after {
  box-sizing: content-box;
}

/* ---------- 差し込み共通フッターの表示制御 ---------- */
/* 共通フッターは JS が PC版(#footer_glonavi)とSP版(#smp_footer_glonavi)を
   両方DOMに出力する。切替用の共通CSSを本LPは読み込んでいないため、
   未指定だとSP版が常時表示され、SNSアイコンが最大128pxまで拡大して
   フッターが重複表示される。LPと同じ768pxを境に出し分ける。 */
@media (min-width: 769px) { #smp_footer_glonavi { display: none !important; } }
@media (max-width: 768px) { #footer_glonavi     { display: none !important; } }
/* LPの body 背景(クリーム)が透けるのを防ぎ、glico標準の白背景に戻す */
#footer_glonavi, #smp_footer_glonavi { background: #fff; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--mincho);
  color: var(--text);
  background: var(--cream);
  line-height: 1.9;
  font-size: 16px;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h2, p { margin: 0; }

/* ---------- 全体ラッパー（全幅：背景・KVは画面いっぱい、中身は各__innerのmax-widthで制限） ---------- */
.lp {
  width: 100%;
  background: var(--cream);
  overflow: hidden; /* 各セクションの装飾はみ出しを抑制（横スクロール防止） */
}

/* 画像バンド共通：横幅いっぱいに配置 */
.section-img { display: block; }
.section-img img { display: block; width: 100%; }
/* アンカー着地時に見出しが隠れないための余白 */
.section-img[id] { scroll-margin-top: 0; }

/* 共通の飾り見出し（Terms / FAQ） */
.sec-heading {
  text-align: center;
  font-family: var(--mincho);
  font-weight: 700;
}
.sec-heading__ja {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .08em;
  position: relative;
}
/* 見出し上部の菱形オーナメント */
.sec-heading__ja::before {
  content: "";
  display: block;
  width: 14px; height: 14px;
  margin: 0 auto 14px;
  background: var(--teal);
  transform: rotate(45deg);
}
/* Terms の見出しアイコンは 4つのひし形の装飾（他セクションと共通の products-title-diamond.svg を使用） */
.terms .sec-heading__ja::before {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  background: url(../images/products-title-diamond.svg) no-repeat center / contain;
  transform: none;
}
.sec-heading__en {
  display: block;
  margin-top: 10px;
  font-family: var(--font-en);   /* High Tower Text（→EB Garamond） */
  font-size: 32px;
  letter-spacing: .3em;
  color: var(--teal);
  font-weight: 400;
}
.sec-heading--light .sec-heading__ja { color: var(--text); }
/* FAQ は紺背景のため白文字（デザイン準拠） */
.sec-heading--faq .sec-heading__ja { color: #fff; }
/* FAQ の見出しアイコンは白い4つのひし形（Figma準拠） */
.sec-heading--faq .sec-heading__ja::before {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  background: url(../images/faq-title-diamond-white.svg) no-repeat center / contain;
  transform: none;
}
/* FAQ の英字ラベルも白（Figma準拠） */
.sec-heading--faq .sec-heading__en { color: #fff; }

/* =========================================================
   Menu（ページ内アンカーナビ）
   ========================================================= */
.menu {
  background: var(--cream);
  padding: 34px 20px;
  border-bottom: 1px solid var(--line);
}
.menu__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}
.menu__item {
  position: relative;
  padding: 0 26px;
}
/* 項目間の縦罫線 */
.menu__item + .menu__item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 26px;
  background: var(--line);
}
.menu__item a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
  transition: opacity .2s;
}
.menu__item a:hover { opacity: .6; }
/* 下向き三角アイコン */
.menu__item a::after {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--teal);
}

/* =========================================================
   キャンペーン参加はこちら（CTA）
   ========================================================= */
.cta {
  background: #eef1ec;
  padding: 60px 20px 66px;
  text-align: center;
}
.cta__inner { max-width: 1200px; margin: 0 auto; }
.cta__title {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .06em;
  position: relative;
}
.cta__diamond {
  display: block;
  width: 41.14px;
  height: 41.14px;
  margin: 0 auto 18px;
}
.cta__en {
  margin-top: 8px;
  font-family: var(--font-en);   /* High Tower Text（→EB Garamond） */
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: var(--green);           /* #008c4e（Figma 2548:8149） */
  white-space: nowrap;
}
.cta__lead {
  margin-top: 26px;
  font-family: var(--gothic);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.9;
}
.cta__buttons {
  margin: 34px auto 0;
  max-width: 731px;
  display: flex;
  justify-content: center;
  gap: 31px;
  flex-wrap: wrap;
}
/* 応募ボタン（赤=Glicoメンバーズ登録／緑=応募ページログイン）。
   CTA と Application STEP1 で共通仕様（Figma: EntryButton 準拠）。
   幅350px・3px枠・角丸50px・8pxの立体シャドウ・右に丸矢印アイコン。 */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 350px;
  max-width: 100%;
  padding: 10px 20px;
  border: 3px solid;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  /* 右端の丸矢印アイコン。背景画像なら幅・フレックスの影響を受けず確実に描画される */
  background-image: url(../images/btn-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 30px 30px;
  transition: transform .1s, box-shadow .1s, filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(8px); box-shadow: none; }
.btn__body {
  display: flex;
  flex: 1 0 0;
  min-width: 1px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;              /* .application a{color:inherit} に負けないよう明示 */
  white-space: nowrap;
}
.btn__note {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
}
.btn__main {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
}
.btn--register { background-color: var(--red-btn);  border-color: #892027; box-shadow: 0 8px 0 #892027; }
.btn--login    { background-color: var(--green-btn); border-color: #198e24; box-shadow: 0 8px 0 #165f1d; }

/* CTA／応募STEP1のボタンのホバー演出（参考: https://cp.glico.com/icenomi-2026smr/ のボタン挙動）。
   PC（マウス操作＝hover可能かつ769px以上）でのみ、ホバーで8px沈み込み＋立体シャドウを
   消して「押し込み」を表現する。SP・タッチ端末では汎用の明度ホバーも無効化し、
   ホバー演出を付けない（＝PCのみhover）。押し込みの:activeは全端末で維持。 */
.cta__buttons .btn:hover,
.apply-step__buttons .btn:hover { filter: none; }
@media (hover: hover) and (min-width: 769px) {
  .cta__buttons .btn:hover,
  .apply-step__buttons .btn:hover {
    transform: translateY(8px);
    box-shadow: none;
  }
}

/* =========================================================
   応募規約（Terms）
   ========================================================= */
.terms {
  background: var(--cream);
  padding: 66px 20px 72px;
}
.terms__inner { max-width: 1200px; margin: 0 auto; }
.terms .accordion { margin-top: 40px; }

/* =========================================================
   アコーディオン（Terms / FAQ 共通）
   - Accordion_Closed / Open を分けず 1 コンポーネントで実装
   - 閉：＋ / 開：−（.accordion__icon を CSS で切替）
   ========================================================= */
.accordion { margin-bottom: 20px; }
/* Terms のアコーディオンは約840px幅で中央（Figma準拠） */
.accordion--terms {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border: none;
  border-radius: 40px;
  background: var(--navy-bar);
  color: #fff;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
}
/* Terms の見出しバー：紺背景・白文字・中央寄せ・右に▼（Figma準拠） */
.accordion--terms .accordion__head {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  justify-content: center;
  position: relative;
  font-size: 22px;
  font-family: var(--font-body);
}
/* +/− の代わりに▼（三角）。開くと反転 */
.accordion--terms .accordion__icon {
  position: absolute;
  right: 26px; top: 50%;
  transform: translateY(-50%);
}
.accordion--terms .accordion__icon::before {
  width: 0; height: 0;
  background: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff;
  transform: translate(-50%, -50%);
  transition: none;
}
.accordion--terms .accordion__icon::after { display: none; }
.accordion--terms.is-open .accordion__icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
/* ＋ / − アイコン（擬似要素で作図） */
.accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
}
.accordion__icon::before { width: 20px; height: 2px; transform: translate(-50%,-50%); }              /* 横棒（常時） */
.accordion__icon::after  { width: 2px; height: 20px; transform: translate(-50%,-50%); transition: transform .3s; } /* 縦棒（開くと消える） */
.accordion.is-open .accordion__icon::after { transform: translate(-50%,-50%) scaleY(0); }

/* 開閉アニメーション（高さ） */
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.accordion.is-open .accordion__body { max-height: 1200px; }
/* Terms：長文のため十分な高さを確保 */
.accordion--terms.is-open .accordion__body { max-height: 24000px; }
.accordion__inner { padding: 24px 26px 6px; }
/* Terms：リード文は左右16pxインセット、本文ボックスはバーと同幅まで広げる */
.accordion--terms .accordion__inner { padding: 22px 16px 26px; }

.terms__lead {
  font-family: var(--gothic);
  font-size: 14px;
  line-height: 2;
  text-align: left;
}
/* 本文：薄グレーの枠ボックス（Figma準拠）。負マージンでアコーディオン端まで広げバーと同幅に */
.terms__body {
  margin: 22px -16px 0;
  padding: 30px 30px 34px;
  font-family: var(--gothic);
  font-size: 13px;
  line-height: 2.1;
  color: #555;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  text-align: left;
}

/* 各条項リスト（項目ごとに区切り線で整理：参考サイト準拠） */
.terms__list { margin: 0; }
.terms__item {
  padding: 22px 0;
  border-bottom: 1px solid #e4e4e4;
}
.terms__item:first-child { padding-top: 0; }
.terms__item:last-child { padding-bottom: 0; border-bottom: none; }

/* 見出し：ハイライトなし。紺の縦罫＋太字で項目名を明示 */
.terms__ttl {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
}
.terms__def { margin: 0; }
.terms__def > * + * { margin-top: 10px; }
.terms__def p { margin: 0; }

/* 小見出し（［PC］など） */
.terms__sub { font-weight: 700; color: #444; }

/* ※注記 */
.terms__note { font-size: 12px; color: #777; line-height: 1.9; }
.terms__note + .terms__note { margin-top: 2px; }

/* 箇条書き（・） */
.terms__ul { margin: 0; padding: 0; list-style: none; }
.terms__ul > li {
  position: relative;
  padding-left: 1.1em;
}
.terms__ul > li + li { margin-top: 6px; }
.terms__ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--navy);
}

/* 番号付き */
.terms__ol {
  margin: 10px 0 0;
  padding-left: 1.7em;
  list-style: decimal;
}
.terms__ol > li { padding-left: .2em; }
.terms__ol > li + li { margin-top: 6px; }
/* 入れ子の番号リスト（括弧なしの丸数字風） */
.terms__ul .terms__ol,
.terms__def > .terms__ol { margin-top: 8px; }

/* リンク */
.terms__link {
  color: var(--teal);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* =========================================================
   よくある質問（FAQ）
   ========================================================= */
/* セクション全体が紺背景・見出し白（デザイン準拠） */
.faq {
  background: var(--navy);
  padding: 66px 20px 78px;
  position: relative;   /* zakuzaku装飾の基準 */
  overflow: visible;
}
.faq__inner { max-width: 1200px; margin: 0 auto; }
/* 本文を包む白いカード */
.faq__card {
  max-width: 910px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 10px;
  padding: 50px 48px 54px;
}
.faq__lead {
  margin: 0 auto;
  text-align: center;
  font-family: var(--gothic);
  font-size: 14px;
  line-height: 2;
  color: var(--text);
}
/* 質問群 */
.faq__list {
  margin-top: 34px;
}
.accordion--faq { margin-bottom: 20px; }
.accordion--faq:last-child { margin-bottom: 0; }
.accordion--faq .accordion__head { background: var(--navy); }
.faq__q {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .02em;
}
.accordion--faq .accordion__inner { padding: 18px 8px 10px 25px; }
.faq__a {
  display: flex;
  gap: 10px;
  font-family: var(--gothic);
  font-size: 18px;
  line-height: 1.95;
  color: var(--text);
  text-align: left;
}
.faq__a-mark { color: #e8636c; font-weight: 700; flex: 0 0 auto; }

/* =========================================================
   INTRODUCTION（作品紹介：画像バンド）
   ========================================================= */
.introduction img { display: block; width: 100%; }

/* =========================================================
   キャンペーンに関するお問い合わせ（Contact）
   ========================================================= */
/* 生成り背景に「紺の見出しバー＋枠付きボックス」（デザイン準拠） */
.contact {
  background: var(--cream);
  color: var(--text);
  padding: 64px 20px 72px;
  text-align: center;
}
.contact__inner { max-width: 700px; margin: 0 auto; }
.contact__title {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .06em;
  color: #fff;
  background: var(--navy);
  border-radius: 6px 6px 0 0;
  padding: 22px 20px;
  margin: 0;
}
.contact__box {
  background: #fff;
  border: 2px solid var(--navy);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 36px 24px 40px;
}
.contact__sub {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 16px;
}
.contact__tel,
.contact__mail {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: 4px;
}
.contact__tel a, .contact__mail a { text-decoration: none; color: inherit; }
.contact__info {
  font-family: var(--gothic);
  font-size: 15px;
  color: #333;
  margin-top: 6px;
}
.contact__info:first-of-type { margin-top: 18px; }
.contact__note {
  margin-top: 24px;
  font-family: var(--gothic);
  font-size: 12px;
  line-height: 1.9;
  color: #666;
}

/* =========================================================
   SP対応（〜768px）：同一HTMLをレイアウト変更
   ========================================================= */
@media (max-width: 768px) {

  body { font-size: 15px; }

  /* Menu：2列グリッド（最終項目はフル幅）
     Figma(SP)準拠：外枠（周囲のborder）は無し。内側の区切り線のみ。 */
  .menu { padding: 18px 12px; border-bottom: none; }   /* SPはメニュー下の下線なし（Figma準拠） */
  .menu__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 340px;
    /* 周囲のborderは無し（Figma準拠） */
  }
  .menu__item {
    position: relative;
    padding: 0;
  }
  /* PC用の項目間縦罫線は解除 */
  .menu__item + .menu__item::before { content: none; }
  /* 各メニュー項目の左右に縦罫線（Figma準拠：上下8pxインセットの短い線）
     ::after=右側の線（全項目）、::before=左側の線（左列＝奇数項目のみ。中央の二重線を防ぐ） */
  .menu__list .menu__item::after,
  .menu__list .menu__item:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 36px;
    background: var(--line);
  }
  .menu__list .menu__item::after { right: 0; }
  .menu__list .menu__item:nth-child(odd)::before { left: 0; }
  .menu__item:nth-child(5) { grid-column: 1 / -1; }         /* 応募規約はフル幅 */
  .menu__item a {
    justify-content: center;
    width: 100%;
    padding: 14px 6px;
    font-size: 14px;
    gap: 8px;
  }
  .menu__item a::after { border-left-width: 4px; border-right-width: 4px; border-top-width: 5px; }

  /* CTA：ボタン縦積み。
     inner を縦フレックス（definite幅）にして子要素がビューポート幅に収まるよう制約。
     ※nowrap の en/ボタン文言が shrink-to-fit の inner を押し広げて右にはみ出す不具合の対策。 */
  .cta { padding: 44px 18px 100px; }
  .cta__inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .cta__title { font-size: 24px; max-width: 100%; }
  .cta__en { font-size: 20px; white-space: normal; max-width: 100%; }
  .cta__lead { font-size: 13px; margin-top: 18px; max-width: 100%; }
  .cta__buttons { margin-top: 26px; gap: 18px; flex-direction: column; align-items: center; width: 100%; max-width: 100%; }
  /* SP：CTA／Application STEP1 とも同様に width100%・文字縮小で card 幅に収める */
  .cta .btn { width: 100%; max-width: 350px; min-width: 0; background-position: right 16px center; background-size: 26px 26px; }
  .cta .btn__main { font-size: 20px; }
  .cta .btn__note { font-size: 13px; }

  /* 共通見出し */
  .sec-heading__ja { font-size: 24px; }
  .sec-heading__en { font-size: 13px; }

  /* Terms */
  .terms { padding: 48px 16px 52px; }
  .terms .accordion { margin-top: 28px; }
  .accordion__head { padding: 16px 20px; font-size: 15px; border-radius: 32px; }
  .accordion__inner { padding: 18px 18px 4px; }
  .accordion--terms .accordion__inner { padding: 18px 14px 22px; }
  .terms__body { margin: 20px -14px 0; padding: 22px 18px 26px; }
  .terms__item { padding: 18px 0; }
  .terms__ttl { font-size: 14px; }

  /* FAQ */
  .faq { padding: 48px 16px 56px; }
  .faq__card { padding: 28px 18px 32px; margin-top: 28px; border-radius: 8px; }
  .faq__lead { font-size: 13px; text-align: left; }
  .faq__list { margin-top: 24px; }
  .accordion--faq .accordion__head { padding: 16px 18px; align-items: flex-start; }
  .faq__q { font-size: 15px; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .faq__a { font-size: 16px; }

  /* Contact */
  .contact { padding: 40px 18px 48px; }
  .contact__title { font-size: 18px; padding: 18px 16px; }
  .contact__box { padding: 28px 18px 30px; }
  .contact__sub { font-size: 17px; }
  /* 事務局名は少し小さくして「…ひとりごと／コラボキャンペーン事務局」で改行させる */
  .contact__office { font-size: 15px; }
  .contact__tel, .contact__mail { font-size: 18px; }
  .contact__info { font-size: 14px; }
}



/* =========================================================
   以下、各セクション実装（Figma構造に基づくテキスト＋画像）
   ========================================================= */


/* ---------- kv ---------- */
/* ============================================================
   KV（キービジュアル）— トップのヒーロー画像
   ロゴ・キャラ・タイトル・レシートアップロード期間/応募期間の日付まで
   含む1枚のビジュアル画像として配置（Figmaのデザインに準拠）
   ============================================================ */
.kv {
  width: 100%;
  background: #efefef;
  overflow: hidden;
}
.kv__art {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------- lead ---------- */
/* =========================================================
   Lead（リード：大見出し＋導入ストーリー本文）
   Figma node 2548:7852 / PC基準幅 内側 ~1000px
   ========================================================= */
.lead {
  width: 100%;
  background: var(--cream, #f7f6f2);
  overflow: hidden;
}

/* 内側：中央寄せ・上120px / 下350pxの余白 */
.lead__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 20px 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトルと本文のまとまり（gap 40px）＋背景飾りの基準 */
.lead__group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* 背景の飾りイラスト（30%・中央やや右に配置） */
.lead__bg {
  position: absolute;
  top: 31.68%;
  left: 36.33%;
  width: 27.36%;
  height: 68.44%;
  opacity: .30;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

/* タイトルグラフィック（997.5 x 177.5） */
.lead__title {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 997.5px;
  max-width: 100%;
}
.lead__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* 本文ブロック（中央揃え） */
.lead__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1002px;
  text-align: center;
  word-break: break-word;
}
.lead__body p { margin: 0; }

/* 導入2行：Kaisei Opti Bold / 24px / #215d3a / 行間2 */
.lead__lead-line {
  font-family: var(--font-head, "Kaisei Opti", serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 2;
  color: #215d3a;
}

/* 空行（スペーサー：20px相当） */
.lead__gap {
  font-size: 20px;
  line-height: 2.5;
}

/* ストーリー本文：Shippori Mincho B1 ExtraBold / 20px / #333 / 行間2.5
   （Figmaのテキストブロック既定フォント Shippori Mincho B1:ExtraBold を継承） */
.lead__story {
  font-family: "Shippori Mincho B1", "Shippori Mincho", var(--font-head, "Kaisei Opti"), serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 2.5;
  color: #333333;
}

/* =========================================================
   SP対応（〜768px）
   ========================================================= */
@media (max-width: 768px) {
  .lead__inner {
    padding: 64px 18px 140px;
  }
  .lead__group {
    gap: 28px;
  }
  .lead__title {
    width: 100%;
  }
  .lead__lead-line {
    font-size: 17px;
    line-height: 1.9;
  }
  .lead__gap {
    font-size: 14px;
    line-height: 2;
  }
  .lead__story {
    font-size: 14px;
    line-height: 2.1;
    text-align: left;
  }
}


/* ---------- about ---------- */
/* =========================================================
   キャンペーン概要（About / 概要説明＋賞品ティザー）
   Figma node 2548:7977 — full-bleed dark-red section
   Fonts: --font-head Kaisei Opti / --font-en High Tower Text / --font-body Noto Sans JP
   ========================================================= */

.about {
  --dark-red:   #822225;
  --dark-green: #215d3a;
  --about-text: #333333;

  width: 100%;
  /* 濃い赤のベースカラーに和柄（ダイヤ格子）パターン画像を重ねる（Figma準拠） */
  background-color: var(--dark-red);
  background-image: url(../images/about-bg-pattern.png);
  background-repeat: repeat;
  position: relative;   /* zakuzaku装飾の基準 */
  /* Figma同様、装飾（コーン）はセクション境界をまたいで表示するためクリップしない。
     横方向のはみ出しは親 .lp の overflow:hidden で抑制される */
  overflow: visible;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* セクション上部の zakuzaku_img（ジャイアントコーン3本＋「ザクザク」透かし） */
.about__zakuzaku {
  position: absolute;
  top: -4%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  pointer-events: none;
  z-index: 1;
}
.about__zk-cones {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  margin-top: -30px;   /* Figma同様、コーン上部をセクション上端より上に出して境界をまたがせる */
  /* スクロール連動の左右スウィング（--sway をJSで更新） */
  transform: rotate(var(--sway, 0deg));
  transform-origin: top center;
  will-change: transform;
}
.about__zk-cones img {
  display: block;
  width: 165px;
  height: auto;
}
.about__zk-wm {           /* 「ザクザク」透かし（薄い装飾・コーンの背面） */
  position: absolute;
  top: 6px;
  z-index: 1;
  opacity: .55;
  /* スクロール連動の左右スウィング（コーンより控えめ） */
  transform: rotate(calc(var(--sway, 0deg) * 0.6));
  transform-origin: top center;
  will-change: transform;
}
.about__zk-wm--l { left: -3%;  width: 175px; }
.about__zk-wm--r { right: -5%; width: 235px; }

.about *,
.about *::before,
.about *::after { box-sizing: border-box; }

.about__inner {
  width: 100%;
  max-width: 1200px;
  padding: 195px 20px 120px;   /* 上部は zakuzaku 装飾のぶん余白を確保 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* ---------- 見出し ---------- */
.about__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.about__diamond {
  display: block;
  width: 41px;
  height: 41px;
}

.about__heading {
  margin: 0;
  font-family: var(--font-head, "Kaisei Opti", serif);
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  color: #ffffff;
  white-space: nowrap;
}

.about__en {
  margin: 0;
  font-family: var(--font-en, "High Tower Text", Georgia, serif);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 概要説明カード ---------- */
.about__card {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.about__lead {
  margin: 0;
  font-family: var(--font-head, "Kaisei Opti", serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.5;
  color: var(--about-text);
  text-align: center;
}

/* ハイライトマーカー（白文字＋カラーバー） */
.about__mark {
  color: #ffffff;
  padding: 0 .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.about__mark--green { background: var(--dark-green); }
.about__mark--red   { background: var(--dark-red); }

/* ---------- 補足コールアウト ---------- */
.about__callout {
  width: 100%;
  background: #f1f1f0;
  border-radius: 5px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__callout p {
  margin: 0;
  font-family: var(--font-head, "Kaisei Opti", serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  color: #000000;
  text-align: center;
}

.about__callout-em { color: var(--dark-red); }

/* ---------- 注記 ---------- */
.about__note {
  margin: 0;
  font-family: var(--font-body, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--about-text);
  text-align: center;
}
.about__note strong { font-weight: 700; }

/* ---------- 対象商品（賞品ティザーの上） ---------- */
.about__target {
  text-align: center;                /* センター揃え */
  font-family: var(--font-head, "Kaisei Opti", serif);  /* 明朝体（Kaisei Opti） */
}
.about__target-label {   /* 「対象商品」 */
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.6;
  color: var(--green-dark, #215d3a);  /* ブランドの緑 #215d3a */
}
.about__target-name {    /* 「ジャイアントコーン全品」 */
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: #333;                        /* 本文色 #333 */
}

/* ---------- 賞品ティザー ---------- */
.about__prize {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.about__prize-img {
  display: block;
  width: 100%;
  height: auto;   /* 実画像（1本/3本/5本コースの賞品画像入り）の自然比で表示 */
}

/* =========================================================
   改行・折り返し制御ユーティリティ（SP改行の見直し用）
   - .u-nowrap : 語句を途中で改行させない（前後の位置では改行可）
   - .br-sp    : SP（≤768px）のときだけ有効になる改行
   ========================================================= */
.u-nowrap { white-space: nowrap; }
.br-sp { display: none; }
@media (max-width: 768px) {
  .br-sp { display: inline; }
}

/* ========================= SP ========================= */
@media (max-width: 768px) {
  .about__inner {
    padding: 70px 16px 64px;   /* zakuzaku装飾ぶんの上部余白 */
    gap: 28px;
  }

  /* zakuzaku装飾：SPは縮小 */
  .about__zk-cones { margin-top: -14px; gap: 8px; }
  .about__zk-cones img { width: 74px; }
  /* コーン列(幅238px)は中央寄せなので、透かしも中央(50%)基準で配置し、
     どのSP幅でもコーンとの間隔を一定(約12px)に保つ（広い幅で離れすぎない） */
  .about__zk-wm--l { width: 96px;  left:  calc(50% - 227px); } /* 119+12+96 */
  .about__zk-wm--r { width: 122px; right: calc(50% - 253px); } /* 119+12+122 */

  .about__diamond { width: 30px; height: 30px; }
  .about__heading { font-size: 30px; }
  .about__en { font-size: 20px; }

  .about__card {
    padding: 28px 18px;
    gap: 24px;
  }

  .about__lead { font-size: 19px; }

  .about__callout { padding: 18px 14px; }
  .about__callout p { font-size: 16px; line-height: 26px; }

  .about__note { font-size: 14px; line-height: 22px; }

  .about__prize { padding: 16px; }
  .about__target-label { font-size: 22px; }
  .about__target-name { font-size: 28px; }
}

/* ========================= タブレット =========================
   769〜899px：コンテナが縮む一方でコーンはPCサイズ(165px)のままなので、
   zakuzaku透かしをコーンの外側へ押し出して被りを解消する */
@media (min-width: 769px) and (max-width: 899px) {
  .about__zk-wm--l { width: 150px; left: -30px; }
  .about__zk-wm--r { width: 195px; right: -74px; }
}


/* ---------- present ---------- */
/* =========================================================
   present セクション（景品 / Presents）
   Figma node 2548:8155 を忠実に再現
   PCベース + @media(max-width:768px) でSP対応
   ========================================================= */

/* ---- フルブリード（緑背景） ---- */
.present{
  position:relative;
  background:#215d3a; /* --dark-greeen */
  /* Figma同様、装飾（コーン）はセクション境界をまたいで表示するためクリップしない */
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 中央寄せの内側コンテナ */
.present__inner{
  width:100%;
  max-width: 1200px;
  margin:0 auto;
  padding:80px 20px 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  position:relative;
  z-index:2;
}

/* ---------- 見出し ---------- */
.present__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 52px;
}
.present__head-icon{
  width:41.14px;
  height:41.14px;
  display:block;
}
.present__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:48px;
  line-height:normal;
  color:#fff;
  margin:0;
  white-space:nowrap;
}
.present__en{
  font-family:var(--font-en);
  font-weight:400;
  font-size:32px;
  line-height:normal;
  color:#fff;
  text-align:center;
  white-space:nowrap;
}

/* ---------- 白カード（賞品リスト） ---------- */
.present__list{
  width:100%;
  background:#fff;
  border-radius:5px;
  padding:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}

/* ---------- 賞品アイテム ---------- */
.present-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding-bottom:40px;
  border-bottom:1px solid #d7d7d7; /* --gray */
}
.present-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

/* A賞のみ：画像左＋テキスト右 の横並び行 */
.present-item__row{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
/* A賞のテキスト側もB/C賞と同じ横幅基準にして、画像との間隔を他コースと揃える */
.present-item__row .present-item__contents{
  flex:0 1 520px;
  align-items:flex-start;
}

/* B/C賞：画像左＋テキスト右の横並び（画像がDOM先頭＝左） */
.present-item--imgleft{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* 商品画像（1500基準は398px。中間幅ではみ出さないよう縮小を許可＝内側imgはwidth:100%で追従） */
.present-item__img{
  flex:0 1 398px;
  min-width:0;
}
.present-item__img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.present-item__caption{
  margin-top:8px;
  font-family:var(--gothic);
  font-size:18px;
  line-height:1.4;
  text-align:center;
}
.present-item__img--placeholder{
  width:398px;
  height:384px;
  background:#d9d9d9;
  border-radius:0;
}
/* えらべるPay画像下の注釈（旧画像に焼き込まれていたテキスト。始まりを左揃え・※はぶら下げ） */
.present-item__pay-notes{
  margin-top:12px;
  list-style:none;
  padding:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:11px;
  line-height:1.5;
  color:#888;
  text-align:left;
}
.present-item__pay-notes li{
  padding-left:1em;
  text-indent:-1em;
}
.present-item__pay-notes li::before{
  content:"※";
}

/* テキスト側 */
.present-item__contents{
  display:flex;
  flex-direction:column;
  gap:40px;
  min-width:0; /* flex子として縮小可能に（中間幅でのはみ出し防止） */
}
.present-item--imgleft .present-item__contents{
  flex:0 1 520px; /* 1500基準は520px。中間幅では縮小 */
  min-width:0;
  align-items:flex-start;
}

/* 賞名（バッジ＋テキスト） */
.present-item__name{
  display:flex;
  gap:40px;
  align-items:center;
}
.present-item--imgleft .present-item__name{
  align-items:flex-start;
  justify-content:center;
}
.present-item__name--stacked{
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  width:100%;
}
.present-item__badge{
  width:120px;
  height:120px;
  flex-shrink:0;
  display:block;
}
.present-item__name-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.present-item__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:36px;
  line-height:1.3;
  color:#333;
  margin:0;
}
.present-item__title--acryl{
  white-space:normal;
}
.present-item__title--acryl .lg{ display:block; font-size:40px; line-height:1.3; }
.present-item__title--acryl .md{ display:block; font-size:32px; line-height:1.3; }

.present-item__lot{
  font-family:var(--font-body);
  font-weight:700;
  font-size:24px;
  line-height:42px;
  color:#333;
  margin:0;
}
.present-item__num{ color:#bd353d; }

/* A賞：えらべるPay 説明ページへのリンクボタン（Figmaの画像をHTML/CSSで再現） */
.present-item__paylink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:366px;
  max-width:100%;
  padding:14px 24px;
  background-color:#ed4c59;
  border-radius:8px;
  box-shadow:0 4px 6px rgba(0,0,0,.12);
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:19px;
  line-height:1;
  text-decoration:none;
  transition:transform .1s, box-shadow .1s, filter .2s;
}
/* 右端の白い三角矢印（▶）をCSSで描画 */
.present-item__paylink::after{
  content:"";
  flex-shrink:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent #fff;
}
/* えらべるPay説明リンクのホバー：CTA/STEPより控えめに。
   PC（マウス操作）でのみ、わずかに浮き上がり＋影をやや強める程度の軽い演出。
   SP・タッチ端末ではホバーを付けない（:activeの押し込みは全端末で維持）。 */
@media (hover: hover) and (min-width: 769px) {
  .present-item__paylink:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 10px rgba(0,0,0,.18);
    filter:brightness(1.04);
  }
}
.present-item__paylink:active{ transform:translateY(2px); box-shadow:none; }

/* インフォボックス（薄緑） */
.present-item__info{
  width:100%;
  background:#dbe4e0;
  border-radius:10px;
  padding:24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}

/* A賞：注意書きリスト */
.present-item__notes{
  flex:1 0 0;
  min-width:0;
  list-style:disc;
  padding-left:21px;
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:normal;
  color:#333;
  text-align:left;
}
.present-item__notes li{ margin:0; }

/* B/C賞：賞品仕様 */
.present-item__spec{
  width:100%;
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:27px;
  color:#333;
}
.present-item__spec-title{ margin:0; }
.present-item__spec ul{
  list-style:disc;
  padding-left:24px;
  margin:0;
  text-align:left;
}

/* ---------- 装飾（ザクザクイラスト） ---------- */
.present__ornament{
  position:absolute;
  top:-2%;                    /* Figma同様、コーンをセクション上端より上に出して境界をまたがせる */
  /* Figma準拠（デザイン幅1500pxで右端に収まる）。幅を狭めても右端から一定量だけ
     はみ出す位置で固定し、画面外へ流れて見切れないよう min() でクランプ */
  left:min(calc(50% + 400px), calc(100% - 350px));
  width:383px;
  height:532px;
  /* 元の傾き(12.75deg)にスクロール連動の左右スウィングを加算 */
  transform:rotate(calc(12.75deg + var(--sway, 0deg) * 0.7));
  transform-origin:top center;
  will-change:transform;
  pointer-events:none;
  z-index:2;
}
.present__ornament img{
  position:absolute;
  display:block;
}
.present__ornament-rect{ left:19.05%; top:18.43%; width:64%; }
.present__ornament-g1{ left:0; top:0; width:50.97%; }
.present__ornament-g2{ left:65.56%; top:58.06%; width:34.44%; }

/* =========================================================
   SP（〜768px）：カードを縦積みに
   ========================================================= */
@media (max-width:768px){
  .present__inner{
    padding:48px 16px 72px;
    gap:24px;
  }
  .present__head{ padding:10px 0; }
  .present__title{ font-size:32px; }
  .present__en{ font-size:22px; }

  .present__list{
    padding:32px 16px;
    gap:32px;
  }

  /* すべての賞品を縦積みに */
  .present-item,
  .present-item__row,
  .present-item--imgleft{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .present-item--imgleft .present-item__img,
  .present-item--imgleft .present-item__contents{
    order:0;
  }

  .present-item__img,
  .present-item__img--placeholder{
    width:100%;
    max-width:398px;
    height:auto;
  }
  .present-item__img--placeholder{
    aspect-ratio:398/384;
  }

  .present-item__contents{
    width:100%;
    gap:20px;
  }
  .present-item--imgleft .present-item__contents{
    width:100%;
  }
  /* SPでは縦積みになるため、A賞に付けた横幅基準を解除 */
  .present-item__row .present-item__contents{
    flex:0 1 auto;
  }

  /* SPではリンクボタンを中央寄せ */
  .present-item__paylink{
    align-self:center;
    /* SPでは横幅が狭く「…こち／ら」と語中で折り返していたため、
       左右余白とフォントを少し詰めて1行に収める。矢印とテキストの間隔(gap)は
       詰めない。狭い端末では「こちら」を保持したまま「…については／こちら」で改行される */
    padding:14px 16px;
    font-size:17px;
  }

  .present-item__name{
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:100%; /* SPは名前ブロックをフル幅にして中央寄せ（B賞が左に寄る問題の修正） */
  }
  .present-item--imgleft .present-item__name{
    align-items:center;
  }
  .present-item__name--stacked{ align-items:center; }
  .present-item__badge{ width:88px; height:88px; }

  .present-item__name-text{ align-items:center; text-align:center; }
  .present-item__title{
    font-size:26px;
    white-space:normal;
    text-align:center;
  }
  .present-item__title--acryl .lg{ font-size:24px; }
  .present-item__title--acryl .md{ font-size:19px; }
  .present-item__lot{ font-size:19px; line-height:1.6; }

  .present-item__info{ padding:16px; }
  .present-item__notes{ font-size:12px; }
  .present-item__spec{ font-size:14px; line-height:1.7; }

  /* 装飾はSPでは縮小。境界をまたぎつつ、横は画面内に収めて途切れさせない */
  .present__ornament{
    width:150px;
    height:208px;
    top:-56px;       /* セクション上端より上に出して境界をまたがせる */
    left:238px;      /* 右寄せだと画面幅超で途切れるため left で画面内に固定 */
    right:auto;
  }
}


/* ---------- products ---------- */
/* ===== Products section (対象商品 / Products) ===== */
/* Global font vars (define once at project level if not already present) */
.products {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.products__inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 8px 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

/* --- Title block --- */
.products__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 52px;
}

.products__diamond {
  display: block;
  width: 41.14px;
  height: 41.14px;
}

.products__heading {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: normal;
  color: #333333;
  text-align: center;
  word-break: break-word;
}

.products__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  color: #008c4e;
  text-align: center;
  white-space: nowrap;
}

/* --- Lead line --- */
.products__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: #333333;
  text-align: center;
  white-space: nowrap;
}

/* --- Product grid --- */
.products__list {
  list-style: none;
  margin: 0;
  padding: 30px 24px 0;
  width: 100%;
  max-width: 1193px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 40px;
}

.products__item {
  display: flex;
}

.product {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  box-sizing: border-box;
}

.product__photo {
  width: 100%;
  aspect-ratio: 466 / 794;
  position: relative;
}

.product__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  color: #333333;
  text-align: center;
}

/* --- Annotation box --- */
.products__note {
  width: 100%;
  max-width: 838px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 5px;
  padding: 40px;
}

.products__note p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  color: #000000;
}

/* ===== Responsive (SP) ===== */
@media (max-width: 768px) {
  .products__inner {
    padding: 48px 8px 100px;
    gap: 28px;
  }

  .products__title {
    padding: 10px 20px;
  }

  .products__heading {
    font-size: 30px;
  }

  .products__en {
    font-size: 24px;
  }

  .products__lead {
    font-size: 22px;
  }

  .products__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 12px 0;
    column-gap: 12px;
    row-gap: 24px;
  }

  .products__note {
    padding: 24px;
  }
}


/* ============================================================
   応募方法 / Application  section  — clean CSS-class build
   濃赤＋和柄パターンのフルブリード。カード=白角丸。
   ============================================================ */
.apply{
  background-color:var(--dark_red);
  background-image:url(../images/about-bg-pattern.png);
  background-repeat:repeat;
  padding:80px 20px 120px;
  font-family:var(--font-body);
  color:#333;
  -webkit-font-smoothing:antialiased;
  position:relative;   /* zakuzaku装飾の基準 */
  /* 装飾（コーン）はセクション境界をまたいで表示するためクリップしない。
     横のはみ出しは親.lpのoverflow:hiddenで抑制 */
  overflow:visible;
}
.apply__inner{ max-width: 1200px; margin:0 auto; }

/* ---------- 装飾（ザクザクコーン：apply／faq） ---------- */
/* 画像は回転を焼き込み済み。スクロール連動スウィング(--sway)のみ加算 */
.apply__zk, .faq__zk{
  position:absolute;
  pointer-events:none;
  z-index:3;
  will-change:transform;
  transform:rotate(var(--sway, 0deg));
}
.apply__zk img {
  display:block; width:80%; height:auto;
}
.faq__zk img{ display:block; width:100%; height:auto; }
/* zakuzaku_img3：apply上端の左に被せる（Products→Application境界） */
.apply__zk--top{
  /* コンテンツ列（max-width 1200px）の左端基準で配置し、幅を狭めても
     コンテンツに対する位置がズレないようにする。狭い幅では最小16pxで画面内に収める */
  top:-140px; left:max(16px, calc(50% - 600px - 60px)); width:300px;
  transform-origin:top center;
}
/* zakuzaku4 1：apply下端の右に被せる（Application→Terms境界） */
.apply__zk--bottom{
  /* コンテンツ列の右端基準で配置（狭い幅では最小44pxで画面内に収める） */
  bottom:-110px; right:max(44px, calc(50% - 600px + 44px)); width:280px;
  transform-origin:top center;
  transform:rotate(calc(var(--sway, 0deg) * 0.8));
}
/* zakuzaku5 1：faq上端の左に被せる（Terms→FAQ境界） */
.faq__zk{
  /* コンテンツ列の左端基準で配置（狭い幅では最小24pxで画面内に収める） */
  top:-150px; left:max(24px, calc(50% - 600px + -2%)); width:270px;
  transform-origin:top center;
  transform:rotate(calc(var(--sway, 0deg) * 0.9));
}

/* 見出し */
.apply__head{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-bottom:40px;
}
.apply__diamond{ display:block; width:41px; height:41px; }
.apply__title{
  font-family:var(--font-head); font-weight:700; font-size:48px; color:#fff; margin:0;
}
.apply__en{
  font-family:var(--font-en); font-weight:400; font-size:32px; color:#fff;
  text-align:center; line-height:normal;
}

/* ステップ共通カード */
.apply__steps{ display:flex; flex-direction:column; gap:40px; }
.apply-step{
  background:#fff; border-radius:5px; padding:40px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.apply-step__badge{ display:block; width:123.57px; height:auto; }
.apply-step__title{
  width:100%; margin:0; padding-bottom:12px;
  border-bottom:1px solid #863434;
  font-family:var(--font-head); font-weight:700; font-size:22px;
  color:#433636; text-align:center;
}
.apply-step__lead{
  font-size:16px; line-height:1.75; text-align:center; margin:0;
}
.apply-step__buttons{
  display:flex; justify-content:center; gap:31px; flex-wrap:wrap; margin-top:8px;
}

/* Step2/3 の横並び */
.apply-step-row{ display:flex; gap:20px; }
.apply-step-row .apply-step{ flex:1 1 0; min-width:0; }
.apply-step__body{ display:flex; align-items:center; gap:16px; width:100%; }
.apply-step__illust{ display:block; width:165px; height:auto; flex-shrink:0; }
.apply-step__text{ font-size:14px; line-height:1.75; margin:0; }
.apply-step__text--center{ text-align:center; font-size:15px; }
.apply-step__notes{ width:100%; font-size:12px; line-height:1.7; color:#333; }
.apply-step__notes p{ margin:0; }

/* 注意事項カード */
.apply-notice{
  background:#fff; border-radius:5px; overflow:hidden; margin-top:40px;
}
.apply-notice__head{
  margin:0; padding:18px 20px; background:var(--navy); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:24px; text-align:center;
}
.apply-notice__body{ padding:40px; }
.apply-notice__intro{ margin:0; text-align:center; font-size:16px; line-height:1.75; }
/* レシート注意：左画像 ＋ 右（上部テキスト・下部画像）
   Figma準拠：コンテンツ幅833px／ボード46% : 右カラム54%（右がやや広い） */
.apply-notice__receipt{
  display:flex; align-items:flex-start; gap:24px;
  max-width:840px; margin:32px auto;
}
.apply-notice__receipt-board{ flex:0 0 46%; width:46%; height:auto; }
.apply-notice__receipt-info{ flex:1 1 0; min-width:0; }
/* 上部テキスト（前置き・後置きは通常字、①〜⑥は赤太字の縦リスト） */
.apply-notice__receipt-intro,
.apply-notice__receipt-outro{ margin:0; font-size:20px; line-height:1.6; }
.apply-notice__receipt-list{
  list-style:none; margin:4px 0; padding:0;
}
.apply-notice__receipt-list li{
  display:flex; align-items:center; gap:8px;
  font-size:20px; font-weight:700; color:#cc312d; line-height:1.45;
}
.apply-notice__point-num{
  flex:0 0 auto;
  display:inline-flex; justify-content:center; align-items:center;
  width:1.35em; height:1.35em; border-radius:50%;
  background:#cc312d; color:#fff; font-size:0.8em; line-height:1;
}
.apply-notice__receipt-note{ display:block; width:100%; height:auto; margin-top:32px; }
.apply-notice__sub{
  margin:36px 0 16px; text-align:center;
  font-family:var(--font-body); font-weight:700; font-size:20px; color:#333; border-bottom: 1px solid;
}
.apply-notice__list{
  margin:0 auto; list-style:none; font-size:15px; line-height:1.9;
}
.apply-notice__list li{ padding-left:1.4em; text-indent:-1.4em; }
.apply-notice__caution{
  margin:6px auto 0; color:#cc312d; font-size:15px; line-height:1.7;
  padding-left:1.4em; text-indent:-1.4em;
}
/* NGレシート例：6タイルを横1列（SPは2列） */
.apply-notice__ng{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;
  max-width:860px; margin:4px auto 0; list-style:none; padding:0;
}
.apply-notice__ng-item{ margin:0; }
.apply-notice__ng-item img{ display:block; width:100%; height:auto; }

/* OK / NG 商品名 */
.apply-goods{ display:flex; gap:20px; }
.apply-goods__col{ flex:1 1 0; border-radius:10px; padding:24px; text-align:center; }
.apply-goods__col--ok{ background:#e6f0e7; }
.apply-goods__col--ng{ background:#f2e4e1; }
.apply-goods__badge{
  display:inline-block; color:#fff; font-weight:700; font-size:20px;
  padding:5px 34px; border-radius:80px; font-family:var(--font-body);
}
.apply-goods__badge--ok{ background:var(--green); }
.apply-goods__badge--ng{ background:#cc312d; }
.apply-goods__label{ margin:12px 0 16px; font-weight:700; font-size:20px; }
.apply-goods__col--ok .apply-goods__label{ color:var(--green); }
.apply-goods__col--ng .apply-goods__label{ color:#cc312d; }
.apply-goods__list{ list-style:none; display:inline-block; text-align:left; }
.apply-goods__list li{ font-size:20px; line-height:2; position:relative; padding-left:26px; }
.apply-goods__col--ok .apply-goods__list li::before{ content:"\25CB"; color:var(--green); position:absolute; left:0; }
.apply-goods__col--ng .apply-goods__list li::before{ content:"\00D7"; color:#cc312d; position:absolute; left:0; font-weight:700; }
.apply-goods__note{ margin:20px auto 0; max-width:350px; font-size:16px; line-height:1.8; color:#555; text-align:center; }

/* ---- SP ---- */
@media (max-width:768px){
  .apply{ padding:44px 16px 60px; }
  .apply__title{ font-size:30px; }
  .apply__en{ font-size:20px; }
  .apply-step{ padding:24px 16px; }
  .apply-step__title{ font-size:19px; }
  .apply-step__lead{ font-size:14px; }
  /* STEP1 のボタン：card 幅に収まるよう縦積み＋文字縮小（はみ出し対策） */
  .apply-step__buttons{ flex-direction:column; align-items:center; gap:16px; width:100%; }
  .apply-step__buttons .btn{ width:100%; max-width:350px; min-width:0; background-position:right 16px center; background-size:26px 26px; }
  .apply-step__buttons .btn__main{ font-size:19px; line-height:1.4; }
  .apply-step__buttons .btn__note{ font-size:12px; }
  .apply-step-row{ flex-direction:column; }
  .apply-step__body{ flex-direction:column; text-align:center; }
  .apply-step__illust{ width:150px; }
  .apply-notice__head{ font-size:19px; }
  .apply-notice__body{ padding:24px 16px; }
  /* レシート注意：SPは縦積み・画像は中央 */
  .apply-notice__receipt{ flex-direction:column; align-items:center; gap:20px; }
  .apply-notice__receipt-board{ flex:none; width:240px; }
  .apply-notice__receipt-info{ width:100%; }
  .apply-notice__receipt-intro,
  .apply-notice__receipt-outro{ font-size:16px; }
  .apply-notice__receipt-list li{ font-size:16px; }
  .apply-notice__receipt-note{ margin:24px auto 0; max-width:300px; }
  .apply-goods{ flex-direction:column; }
  /* NGレシート例：SPは2列（カード幅いっぱい・左右対称） */
  .apply-notice__ng{ grid-template-columns:repeat(2, 1fr); gap:12px; max-width:none; width:100%; }

  /* 装飾（ザクザクコーン）：SPは縮小し画面内に収める */
  .apply__zk--top{ width:132px; left:6px; top:-64px; }
  .apply__zk--bottom{ width:120px; right:6px; bottom:-52px; }
  .faq__zk{ width:120px; left:6px; top:-64px; }
  .apply-goods__list li {
    font-size: 15px;
  }
  .apply-goods__note {
    font-size: 13px;
  }
}


/* ---------- introduction ---------- */
/* =========================================================
   INTRODUCTION／作品「薬屋のひとりごと」紹介 セクション
   Figma node 2548:11471 を忠実に再現
   PC基準 + @media(max-width:768px) でSP対応
   ========================================================= */

/* あらすじ本文は Figma で Shippori Mincho B1 ExtraBold 指定 */

.introduction {
  --intro-green: #215d3a;
  box-sizing: border-box;
  width: 100%;
  padding: 80px 20px 0;
  background: transparent;
}
.introduction *,
.introduction *::before,
.introduction *::after {
  box-sizing: border-box;
}

.introduction__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.introduction__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 80px;
  background: var(--intro-green);
  border-radius: 5px;
}

/* ---------- テキストカラム ---------- */
.introduction__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 6 1 0;   /* テキスト：ビジュアル＝6:4 */
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.introduction__title {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid #ffffff;
}

.introduction__title-en {
  margin: 0;
  font-family: var(--font-head); /* Kaisei Opti Medium */
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  text-align: left;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.introduction__body {
  width: 100%;
  font-family: "Shippori Mincho B1", "Shippori Mincho", var(--font-body), serif;
  font-weight: 800; /* ExtraBold */
  font-size: 16px;
  line-height: 1.8;
  color: #ffffff;
}
.introduction__body p {
  margin: 0;
}

/* ---------- キービジュアル（白フレーム） ---------- */
.introduction__visual {
  flex: 4 1 0;   /* テキスト：ビジュアル＝6:4 */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 10px;
  background: #ffffff; */
}

.introduction__visual-img {
  display: block;
  width: 100%;
  height: auto;               /* 高さは幅に追従（比率どおり） */
  object-fit: contain;        /* 画像全体が映るように（切り抜きなし） */
}

/* ---------- コーナー装飾（雷紋／flame） ---------- */
/* ベース画像は左上コーナー向き。各コーナーは回転で配置 */
.introduction__flame {
  position: absolute;
  width: 67px;
  height: 67px;
  background: url("../images/introduction-corner.png") no-repeat center / contain;
  pointer-events: none;
}
.introduction__flame--tl {
  top: 25px;
  left: 25px;
  transform: rotate(0deg);
}
.introduction__flame--tr {
  top: 25px;
  right: 25px;
  transform: rotate(90deg);
}
.introduction__flame--br {
  bottom: 25px;
  right: 25px;
  transform: rotate(180deg);
}
.introduction__flame--bl {
  bottom: 25px;
  left: 25px;
  transform: rotate(270deg);
}

/* =========================================================
   SP（〜768px）：画像をテキストの下に縦積み
   ========================================================= */
@media (max-width: 768px) {
  .introduction {
    padding: 48px 16px 0;
  }
  .introduction__card {
    flex-direction: column;
    gap: 32px;
    padding: 60px 30px;
  }
  .introduction__text {
    flex: 0 0 auto;   /* SPは縦積みのため6:4指定をリセット */
    width: 100%;
    order: 1;
  }
  .introduction__visual {
    flex: 0 0 auto;   /* SPは縦積みのため6:4指定をリセット */
    order: 2;
    width: 100%;
    max-width: 322px; /* 302 + 左右10pxフレーム */
    justify-content: center;
  }
  .introduction__visual-img {
    width: 100%;
    height: auto;
    /* aspect-ratio: 302 / 427; */
    margin-bottom: 15px;
  }
  .introduction__flame {
    width: 44px;
    height: 44px;
  }
  .introduction__flame--tr { top: 14px; right: 14px; }
  .introduction__flame--tl { top: 14px; left: 14px; }
  .introduction__flame--bl { bottom: 12px; left: 14px; }
  .introduction__flame--br { bottom: 12px; right: 14px; }

  .introduction__title-en {
    text-align: center;
  }
}

/* =========================================================
   追従CTA「今すぐ応募する」（Go_Apply）
   - スクロールしても常に画面右下に固定
   - ページ最上部では非表示、スクロールすると出現（.is-visible をJSで付与）
   - クリックで #application（応募方法）へスムーススクロール
   ========================================================= */
.go-apply {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: block;
  width: 150px;
  line-height: 0;
  /* 初期（最上部）は非表示・操作不可 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, filter .2s ease;
}
/* スクロール後に出現 */
.go-apply.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.go-apply img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22));
}
.go-apply.is-visible:hover { transform: translateY(-3px); }
.go-apply:hover img { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28)) brightness(1.05); }

/* SPは小さめ・余白も詰める（Figma SP版=114pxを目安） */
@media (max-width: 768px) {
  .go-apply { width: 104px; right: 12px; bottom: 12px; }
}