/* ============================================================
   fv.css — お弁当総選挙 FVバナー
   PC: max-width 1280px 固定、超えた分は白背景
   SP: max-width 767px で 393px 固定レイアウトに切り替え
   ============================================================ */

/* ============================================================
   Variables
   ============================================================ */
:root {
  --c-black:   #111111;
  --c-white:   #ffffff;
  --c-orange:  #FE6D03;
  --c-or-dark: #C45F16;
  --c-yellow:  #F7B818;
  --c-yellow2: #F7BC25;
  --c-green:   #698D03;
  --c-green-bg:#FFF8E6;

  --g-gold: linear-gradient(
    162deg,
    #A57D24 32.5%, #D8BE62 40.8%,
    #F1DD80 45.4%, #FBF2A8 53.1%,
    #F1DD80 61.2%, #A57D24 71.8%
  );
  --g-btn: linear-gradient(169.67deg, #FF862E 53.08%, #EE6A0A 54.12%);

  --f-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --f-num:  'Inter', 'TT Norms Pro', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
}

/* ============================================================
   Reset / Body
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }

/* body は白背景 → PCで1280px超えた部分が白になる */
body {
  font-family: var(--f-base);
  background: #ffffff;
}


/* ============================================================
   PC レイアウト (min-width: 768px)
   .fv = 最大幅1280px、中央寄せ、左右は白
   ============================================================ */
.fv {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 832px;
  overflow: hidden;
  background: #f7f0e4;
  margin: 0 auto;
  font-family: var(--f-base);
}

/* ① 背景 .bento-bg */
.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bento-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fv__bg--sp { display: none; }  /* PC時はSP背景非表示 */

/* ② 白円 */
.fv__circle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.fv__circle-svg { width: 100%; height: 100%; }

/* PC用白円 */
.fv__circle--pc {
  width: 820px;
  height: 820px;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}
/* SP用白円（デフォルト非表示） */
.fv__circle--sp { display: none; }

/* SP専用オーバーレイ（PC時非表示） */
.fv__sp-overlay { display: none; }

/* ③ 紙吹雪 */
.fv__confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.confetti { position: absolute; display: block; opacity: .9; }
.confetti--tri { width: 0; height: 0; border-style: solid; }
.confetti--tri.confetti--orange { border-width: 0 7px 12px; border-color: transparent transparent #FE6D03; }
.confetti--tri.confetti--green  { border-width: 0 7px 12px; border-color: transparent transparent #698D03; }
.confetti--tri.confetti--yellow { border-width: 0 7px 12px; border-color: transparent transparent #F7B818; }
.confetti--tri.confetti--pink   { border-width: 0 7px 12px; border-color: transparent transparent #FF6B9D; }
.confetti--dot { width: 8px; height: 8px; border-radius: 50%; }
.confetti--dot.confetti--yellow { background: #F7B818; }
.confetti--dot.confetti--pink   { background: #FF6B9D; }
.confetti--dot.confetti--green  { background: #698D03; }
.confetti--dot.confetti--orange { background: #FE6D03; }

/* ④ ハートバッジ */
.fv__hearts {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.heart-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 5px 12px 5px 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-size: 15px;
  font-weight: 700;
}
.heart-badge__icon { color: #FE6D03; line-height: 1; }
.heart-badge__num  { font-family: var(--f-num); font-weight: 600; font-size: 15px; line-height: 1; }

/* ⑤ コンテンツ */
.fv__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  /* PC: Figma 期間 top:469px に合わせて上部に余白 */
  padding-top: 469px;
  padding-bottom: 24px;
}

/* 9周年バッジ */
.fv__ninth {
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fv__crown { position: absolute; top: -28px; z-index: 5; width: 56px; }
.fv__crown-svg { width: 56px; height: auto; }
.fv__ninth-ring {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 68%, transparent 68.1%),
    conic-gradient(#A57D24 0%, #D8BE62 21%, #F1DD80 33%, #FBF2A8 52%, #F1DD80 73%, #A57D24 100%);
  padding: 5px;
}
.fv__ninth-ring::before {
  content: '';
  position: absolute; inset: 5px; border-radius: 50%;
  background: rgba(255,255,255,.93); z-index: 0;
}
.ninth-ring__num {
  position: relative; z-index: 1;
  font-family: 'Times New Roman', serif;
  font-size: 54px; font-weight: 700; font-style: italic;
  background: var(--g-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
  line-height: 1; letter-spacing: -1px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
  transform: skewX(-5deg);
}
.ninth-ring__label {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 700;
  background: var(--g-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
  line-height: 1.3; text-align: center;
  filter: drop-shadow(0 .3px .3px rgba(0,0,0,.2));
  margin-top: -2px;
}

/* タイトル「お弁当総選挙」 */
.fv__title-wrap { margin-top: 4px; }
.fv__title { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1; }
.fv__title-oben { display: flex; align-items: flex-end; gap: 4px; }
.fv__char { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fv__char-stroke { position: absolute; pointer-events: none; z-index: 0; }
.fv__char-fill   { position: relative; z-index: 1; }

.fv__char--o .fv__char-fill    { width: 110px; height: 106px; transform: rotate(-9.29deg); }
.fv__char--o .fv__char-stroke  { width: 143px; height: 138px; top:50%; left:50%; transform: translate(-50%,-50%) rotate(-9.29deg); }
.fv__char--ben .fv__char-fill  { width: 97px;  height: 101px; }
.fv__char--ben .fv__char-stroke{ width: 124px; height: 129px; top:50%; left:50%; transform: translate(-50%,-50%); }
.fv__char--to .fv__char-fill   { width: 94px;  height: 104px; transform: rotate(6.36deg); }
.fv__char--to .fv__char-stroke { width: 122px; height: 132px; top:50%; left:50%; transform: translate(-50%,-50%) rotate(6.36deg); }

.fv__title-senkyo-wrap {
  position: relative; display: flex; align-items: center; justify-content: center; margin-top: -8px;
}
.fv__title-crown-wrap { position: absolute; top: -26px; right: 0; width: 40px; z-index: 2; }
.fv__title-crown-wrap svg { width: 100%; height: auto; }
.fv__title-senkyo { font-size: 116px; font-weight: 900; color: var(--c-orange); letter-spacing: -5px; line-height: 1; position: relative; z-index: 1; }

/* 緑リボン帯 */
.fv__ribbon { position: relative; width: 100%; margin-top: 6px; height: 64px; display: flex; align-items: center; justify-content: center; }
.fv__ribbon-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.fv__ribbon-text { position: relative; z-index: 1; font-size: 22px; font-weight: 700; color: var(--c-white); white-space: nowrap; line-height: 1.4; letter-spacing: .3px; }
.fv__ribbon-quote { color: var(--c-yellow); }

/* 開催期間 */
.fv__period { display: flex; align-items: flex-end; gap: 13px; margin-top: 22px; line-height: 1; }
.fv__period-block { display: flex; align-items: flex-end; }
.fv__period-y  { font-family: var(--f-num); font-size: 24px; font-weight: 700; color: var(--c-black); }
.fv__period-m  { font-family: var(--f-num); font-size: 28px; font-weight: 700; color: var(--c-black); }
.fv__period-d  { font-family: var(--f-num); font-size: 28px; font-weight: 700; }
.fv__period-d--green  { color: var(--c-green); }
.fv__period-d--yellow { color: var(--c-yellow2); }
.fv__period-dow { font-family: var(--f-num); font-size: 16px; font-weight: 700; color: var(--c-black); letter-spacing: .5px; margin-left: 4px; padding-bottom: 1px; }
.fv__period-sep { font-family: var(--f-num); font-size: 22px; font-weight: 700; color: var(--c-black); padding-bottom: 3px; }

/* カウントダウン */
.fv__countdown { margin-top: 14px; background: var(--c-green-bg); border: 2px dashed var(--c-green); border-radius: 18px; padding: 8px 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 360px; font-variant-numeric: tabular-nums; }
.fv__cd-label { font-size: 16px; font-weight: 600; color: var(--c-black); line-height: 1; }
.fv__cd-body  { display: flex; align-items: center; gap: 16px; }
.fv__cd-days  { display: flex; align-items: baseline; }
.fv__cd-pre, .fv__cd-suf { font-size: 24px; font-weight: 600; color: var(--c-black); }
.fv__cd-num   { font-family: var(--f-num); font-size: 56px; font-weight: 700; color: var(--c-yellow); line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fv__cd-divider { display: block; width: 1px; height: 40px; background: rgba(0,0,0,.22); }
.fv__cd-timer { display: flex; align-items: center; gap: 8px; }
.fv__cd-unit  { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fv__cd-time  { font-family: var(--f-num); font-size: 36px; font-weight: 500; color: var(--c-black); line-height: 1; font-variant-numeric: tabular-nums; }
.fv__cd-lbl   { font-size: 10px; font-weight: 600; color: var(--c-black); line-height: 1; }
.fv__cd-colon { font-family: var(--f-num); font-size: 28px; font-weight: 700; color: var(--c-black); line-height: 1; padding-bottom: 14px; }

/* CTAボタン */
.fv__btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 360px; padding: 24px 50px 20px; gap: 2px;
  background: var(--g-btn); border-radius: 21px;
  box-shadow: 0 8px 0 var(--c-or-dark);
  margin-top: 28px;
  transition: transform .15s, box-shadow .15s;
}
.fv__btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 0 var(--c-or-dark); }
.fv__btn:active { transform: translateY(4px);  box-shadow: 0 4px 0 var(--c-or-dark); }
.fv__btn-badge {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--c-white); border: 2px solid var(--c-orange); border-radius: 20px;
  padding: 5px 14px; font-family: var(--f-num); font-size: 13px; font-weight: 500; color: var(--c-orange); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.fv__btn-badge strong { font-size: 18px; font-weight: 700; }
.fv__btn-text { font-size: 28px; font-weight: 700; color: var(--c-white); letter-spacing: -.3px; line-height: 1; }

/* または */
.fv__sublink { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--c-black); display: flex; align-items: center; gap: 4px; }
.fv__sublink-a { color: var(--c-yellow); text-decoration: underline; text-decoration-color: var(--c-yellow); font-weight: 700; }


/* ============================================================
   SP (max-width: 767px)
   Figma実寸: 393 × 614px — 固定幅 393px、中央寄せ
   ============================================================ */
@media (max-width: 767px) {

  /* SP: 幅100%（背景が画面いっぱいに広がるように） */
  .fv {
    width: 100%;
    max-width: 100%;
    height: calc(100vw * 1228 / 786);
    background: #ffffff;
  }

  /* SP背景：画面幅いっぱいに表示 */
  .fv__bg--pc { display: none; }
  .fv__bg--sp {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .fv__bg--sp .bento-bg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* PC用白円を非表示、SP用白円を表示 */
  .fv__circle--pc { display: none; }
  .fv__circle--sp {
    display: block;
    width: 354px;
    height: 354px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* SP専用オーバーレイを表示
     Figma: 9周年バッジ top≈30px, タイトル top≈136px, リボン top≈230px
     オーバーレイはposition:absoluteで z-index:2, データUI は z-index:3 で上に */
  .fv__sp-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 393px;
    z-index: 2;
    pointer-events: none;
    padding-top: 0;
  }

  /* SP: データUIはコンテンツ幅中央揃え
     背景画像にタイトル焼き込み済み → SP背景の高さ約60%あたりからデータUI開始 */
  .fv__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 393px;
    margin: 0 auto;
    padding-top: 240px;
    padding-bottom: 32px;
  }

  /* 9周年バッジ（PC版は非表示、SP版オーバーレイ内のみ表示） */
  .fv__ninth:not(.fv__ninth--sp) { display: none; }
  .fv__ninth--sp { margin-top: 40px; }

  /* 紙吹雪サイズを小さく */
  .confetti--tri { border-width: 0 5px 9px !important; }
  .confetti--dot { width: 6px; height: 6px; }

  /* ハートバッジ */
  .heart-badge { font-size: 12px; padding: 4px 9px 4px 7px; }
  .heart-badge__num { font-size: 12px; }

  /* 9周年バッジ */
  .fv__ninth { margin-top: 18px; }
  .fv__crown  { width: 36px; top: -18px; }
  .fv__crown-svg { width: 36px; }
  .fv__ninth-ring { width: 68px; height: 68px; }
  .ninth-ring__num { font-size: 36px; }
  .ninth-ring__label { font-size: 9px; }

  /* PC版のタイトル・リボン・バッジはSP非表示（SP専用オーバーレイに移動） */
  .fv__title-wrap { display: none; }
  .fv__ribbon:not(.fv__ribbon--sp) { display: none; }
  .fv__ninth:not(.fv__ninth--sp) { display: none; }

  /* SP専用タイトル（オーバーレイ内） */
  .fv__sp-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 4px;
  }
  .fv__title-oben { gap: 3px; }

  /* タイトル文字 — Figma実寸: お:53.9×52.4, 弁:47.4×49.7, 当:45.9×51.1 */
  .fv__char--o .fv__char-fill    { width: 54px;  height: 52px; }
  .fv__char--o .fv__char-stroke  { width: 70px;  height: 69px; }
  .fv__char--ben .fv__char-fill  { width: 47px;  height: 50px; }
  .fv__char--ben .fv__char-stroke{ width: 61px;  height: 63px; }
  .fv__char--to .fv__char-fill   { width: 46px;  height: 51px; }
  .fv__char--to .fv__char-stroke { width: 60px;  height: 65px; }

  /* 総選挙: Figma 75.834px/56.817px → 76px統一 */
  .fv__title-senkyo { font-size: 76px; letter-spacing: -3px; margin-top: -4px; }
  .fv__title-crown-wrap { width: 28px; top: -18px; right: -2px; }

  /* リボン: Figma h:45.661px、w:378px */
  .fv__ribbon--sp {
    width: 378px;
    height: 46px;
    margin-top: 4px;
  }
  .fv__ribbon-text { font-size: 15px; }

  /* 開催期間: Figmaに直接記述なし → PCの縮小版
     top≈281px相当 */
  .fv__period { margin-top: 70px; gap: 8px; }
  .fv__period-y  { font-size: 17px; }
  .fv__period-m  { font-size: 20px; }
  .fv__period-d  { font-size: 20px; }
  .fv__period-dow{ font-size: 13px; margin-left: 3px; }
  .fv__period-sep{ font-size: 17px; padding-bottom: 2px; }

  /* カウントダウン */
  .fv__countdown {
    margin-top: 24px;
    min-width: unset;
    width: 320px;
    padding: 6px 16px 11px;
    gap: 6px;
    border-radius: 14px;
  }
  .fv__cd-label { font-size: 13px; }
  .fv__cd-body  { gap: 10px; }
  .fv__cd-pre, .fv__cd-suf { font-size: 17px; }
  .fv__cd-num   { font-size: 42px; }
  .fv__cd-divider { height: 32px; }
  .fv__cd-timer { gap: 5px; }
  .fv__cd-time  { font-size: 28px; }
  .fv__cd-colon { font-size: 21px; padding-bottom: 10px; }
  .fv__cd-lbl   { font-size: 9px; }

  /* CTAボタン */
  .fv__btn {
    margin-top: 55px;
    width: 312px;
    padding: 18px 36px 14px;
    border-radius: 18px;
    box-shadow: 0 6px 0 var(--c-or-dark);
  }
  .fv__btn-text  { font-size: 23px; }
  .fv__btn-badge { font-size: 11px; padding: 4px 12px; top: -14px; }
  .fv__btn-badge strong { font-size: 15px; }

  /* または */
  .fv__sublink { margin-top: 10px; font-size: 13px; }
}


/* ============================================================
   メニューリンク Section
   PC: 1280px max-width / py:48px px:90px / 横1行 縦区切り
   SP: max-width 767px → 393px / py:28px px:8px / 2列折り返し
   ============================================================ */

/* ---- Wrapper ---- */
.nav-menu {
  width: 100%;
  background: #698D03;
}

.nav-menu__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ---- MENU ラベル ---- */
.nav-menu__title {
  font-family: var(--f-num);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .5px;
  line-height: 1;
}

/* ---- リンクリスト ---- */
.nav-menu__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ---- 各アイテム（PC: 縦区切りボーダー付き） ---- */
.nav-menu__item {
  border-left: 1px solid rgba(255,255,255,.6);
  flex: 0 0 160px;
}
/* 最後のアイテムは右ボーダーも付く */
.nav-menu__item--last {
  border-right: 1px solid rgba(255,255,255,.6);
}

/* ---- リンク本体 ---- */
.nav-menu__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px;
  width: 100%;
  text-decoration: none;
  transition: opacity .2s;
}
.nav-menu__link:hover { opacity: .75; }

/* ---- ラベルテキスト ---- */
.nav-menu__label {
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1;
}

/* ---- 下矢印アイコン（逆三角形） ---- */
.nav-menu__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-menu__arrow img {
  width: 14px;
  height: 5px;
  display: block;
  /* Figma: -scale-y-100 → 三角形が下向き（SVGは上向き三角形なので反転） */
  transform: scaleY(-1);
}


/* ============================================================
   メニューリンク — SP (max-width: 767px)
   Figma: 393px / py:28px px:8px / flex-wrap 2列
   ============================================================ */
@media (max-width: 767px) {

  .nav-menu__inner {
    max-width: 393px;
    padding: 28px 8px;
    gap: 16px;
  }

  /* SP: 2列折り返し、縦ボーダーなし */
  .nav-menu__list {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .nav-menu__item {
    border-left: none;
    flex: 0 0 160px;
  }
  .nav-menu__item--last {
    border-right: none;
  }

  .nav-menu__link {
    padding: 16px 20px;
    gap: 8px;
  }

  .nav-menu__label {
    font-size: 14px;
  }
}


/* ============================================================
   About Section
   PC: max-width 1280px / 左右2カラム (gap:64px) / py:80px
   SP: max-width 767px / 縦積み / py:160px-180px
   ============================================================ */

.about {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}
.about__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.about__bg--sp { display: none; }
.about__bg--pc {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.about__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about__bg-deco {
  position: absolute;
  pointer-events: none;
}
.about__bg-deco--tl { top: 0; left: 0; width: 418px; height: auto; }
.about__bg-deco--tr { top: 0; right: 0; width: 124px; height: auto; }
.about__bg-deco--bl { bottom: 0; left: 0; width: 136px; height: auto; }
.about__bg-deco--br { bottom: 0; right: 0; width: 213px; height: auto; }

.about__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  align-items: center;
  gap: 64px;
}
.about__left { flex: 0 0 484px; display: flex; flex-direction: column; gap: 48px; }
.about__heading { display: flex; flex-direction: column; gap: 16px; }
.about__label { font-family: var(--f-num); font-size: 20px; font-weight: 700; color: #698D03; letter-spacing: .6px; text-transform: uppercase; line-height: 1; }
.about__title { display: flex; flex-direction: column; gap: 16px; }
.about__title-line { display: block; line-height: 1; }
.about__title-line--en { font-family: var(--f-num); font-size: 48px; font-weight: 700; color: #111111; letter-spacing: 1.44px; text-transform: capitalize; white-space: nowrap; }
.about__title-line--jp2 { font-family: var(--f-base); font-size: 48px; font-weight: 700; color: #FE6D03; letter-spacing: 1.44px; white-space: nowrap; }
.about__title-line--jp3 { font-family: var(--f-base); font-size: 48px; font-weight: 700; color: #111111; letter-spacing: 1.44px; white-space: nowrap; }
.about__title-green  { color: #698D03; }
.about__title-orange { color: #FE6D03; }
.about__body { font-family: var(--f-base); font-size: 16px; font-weight: 600; color: #111111; line-height: 1.8; }
.about__right { flex: 1; display: flex; justify-content: center; }
.about__card { position: relative; background: #FFF8E6; border: 2px dashed #698D03; border-radius: 28px; padding: 40px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 340px; }
.about__card-heading { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 217px; height: 34px; }
.about__card-heading-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 34px; width: auto; z-index: 0; }
.about__card-heading-bg--sp { display: none; }
.about__card-heading-bg--pc { display: block; width: 217px; height: 34px; }
.about__card-heading-text { position: relative; z-index: 1; font-family: var(--f-base); font-size: 16px; font-weight: 600; color: #ffffff; letter-spacing: 1px; line-height: 1.5; padding: 0 16px; }
.about__card-heading-text--sp { display: none; }
.about__condition { display: flex; align-items: center; gap: 12px; }
.about__condition-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.about__condition-icon img { width: 100%; height: 100%; display: block; }
.about__icon--sp { display: none !important; }
.about__icon--pc { display: block !important; }
.about__condition-icon--green { background: #698D03; border-radius: 100px; }
.about__condition-icon--green img { width: 21px; height: 21px; }
.about__condition-text { font-family: var(--f-base); font-size: 16px; font-weight: 600; color: #111111; line-height: 1.5; white-space: nowrap; }
.about__condition-green { color: #698D03; }

@media (max-width: 767px) {
  .about__bg--pc { display: none; }
  .about__bg--sp { display: block; }
  .about__deco--sp-ellipse-tl { top: -30px; left: -80px; width: 283px; height: 118px; }
  .about__deco--sp-ellipse-tr { top: 100px; right: -50px; width: 141px; height: 87px; }
  .about__deco--sp-ellipse-bl { bottom: 60px; left: -20px; width: 193px; height: 120px; }
  .about__deco--sp-ellipse-br { bottom: -10px; right: -30px; width: 207px; height: 91px; }
  .about__deco--sp-food-tl { top: -10px; left: -30px; width: 214px; height: 143px; overflow: hidden; transform: rotate(-24.57deg); }
  .about__deco--sp-food-tr { top: 40px; right: -20px; width: 187px; height: 125px; overflow: hidden; }
  .about__deco--sp-food-bl { bottom: 60px; left: 0; width: 213px; height: 144px; overflow: hidden; }
  .about__deco--sp-food-br { bottom: 40px; right: 0; width: 150px; height: 110px; overflow: hidden; }
  .about__inner { max-width: 393px; flex-direction: column; gap: 50px; padding: 160px 12px 180px; align-items: center; }
  .about__left { flex: none; width: 100%; gap: 28px; align-items: center; }
  .about__heading { gap: 8px; align-items: center; width: 100%; }
  .about__label { font-size: 16px; letter-spacing: .48px; text-align: center; }
  .about__title { gap: 0; align-items: center; text-align: center; }
  /* SP: 1行目「Muscle Deli9周年」、2行目「お弁当総選挙とは？」 */
  .about__title { white-space: normal; }
  .about__title-line--en { display: inline; font-size: 28px; letter-spacing: .84px; white-space: normal; }
  .about__title-line--jp2 { display: inline; font-size: 28px; letter-spacing: .84px; white-space: normal; }
  .about__title-line--jp3 { display: block; font-size: 28px; letter-spacing: .84px; line-height: 1.3; margin-top: 0; text-align: center; }
  .about__body { font-size: 14px; letter-spacing: 1px; text-align: center; }
  .about__body br { display: none; }
  .about__right { width: 100%; }
  .about__card { width: 100%; padding: 40px; min-width: unset; gap: 16px; }
  .about__card-heading-bg--pc { display: none; }
  .about__card-heading-bg--sp { display: block; width: 140px; height: 34px; }
  .about__card-heading-text { font-size: 14px; }
  .about__card-heading-text--sp { display: block; }
  .about__icon--pc { display: none !important; }
  .about__icon--sp { display: block !important; }
  .about__condition { gap: 8px; }
  .about__condition-icon { width: 30px; height: 30px; }
  .about__condition-icon--green img { width: 18px; height: 18px; }
  .about__condition-text { font-size: 14px; letter-spacing: 1px; }
}

/* ============================================================
   Benefit Section
   PC/SP共通: max-width 1280px の中に 393px コンテンツ幅
   背景色: #FFF8E6 / py: 80px
   ============================================================ */

.benefit {
  position: relative;
  width: 100%;
  background: #FFF8E6;
  overflow: hidden;
}

/* 左背景デコ */
.benefit__bg {
  position: absolute;
  top: -40px;
  left: -164px;
  width: 611px;
  pointer-events: none;
  z-index: 0;
}
.benefit__bg-img { width: 100%; height: auto; display: block; }
/* PC/SP 切り替え */
.benefit__bg--sp { display: none; }
.benefit__bg--pc {
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  pointer-events: none;
  z-index: 0;
}
.benefit__bg--pc .benefit__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Inner */
.benefit__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* ---- セクションタイトル ---- */
.benefit__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.benefit__label {
  font-family: var(--f-num);
  font-size: 16px;
  font-weight: 700;
  color: #698D03;
  letter-spacing: .48px;
  text-transform: uppercase;
  line-height: 1;
}
.benefit__title {
  font-family: var(--f-base);
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  letter-spacing: .84px;
  line-height: 1;
  white-space: nowrap;
}
.benefit__title-orange { color: #FE6D03; }

/* ---- カード群 ---- */
.benefit__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 393px;
}

/* ---- カードラッパー（タグ + カード重なり） ---- */
.benefit__card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* タグとカードを z-index で重ねる */
  isolation: isolate;
}

/* ---- タグ（カード上部の帯） ---- */
.benefit__card-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  z-index: 2;
  margin-bottom: -16px; /* カードに重なる */
  white-space: nowrap;
}
.benefit__card-tag--yellow { background: #F7B818; }
.benefit__card-tag--green  { background: #698D03; }

.benefit__tag-crown {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.benefit__tag-text {
  font-family: var(--f-base);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.benefit__tag-text strong { font-size: 20px; }

/* タグ下の▼矢印 */
.benefit__tag-arrow {
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 11px;
}
.benefit__tag-arrow img {
  width: 13px;
  height: 11px;
  transform: scaleY(-1); /* 下向き */
}

/* ---- カード本体 ---- */
.benefit__card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.benefit__card--yellow {
  border: 2px solid #F7B818;
  padding: 28px 16px;
  gap: 4px;
}
.benefit__card--green {
  border: 2px solid #698D03;
  padding: 36px 16px;
  gap: 24px;
}

/* ---- コインイラスト ---- */
.benefit__coin { display: flex; justify-content: center; }
.benefit__coin-img { width: 176px; height: 132px; display: block; }

/* ---- ポイント表示 ---- */
.benefit__point-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.benefit__point-sub {
  font-family: var(--f-base);
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1;
  white-space: nowrap;
}
.benefit__point-num {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.benefit__point-n {
  font-family: var(--f-num);
  font-size: 48px;
  font-weight: 700;
  color: #FE6D03;
  line-height: 1;
}
.benefit__point-unit {
  font-family: var(--f-base);
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1.5;
  padding-bottom: 2px;
}

/* キラキラ星 */
.benefit__point-stars { position: relative; height: 0; width: 100%; }
.benefit__star { position: absolute; }
.benefit__star--1 { width: 12px; left: 7px;  top: -50px; }
.benefit__star--2 { width: 8px;  left: 106px; top: -24px; }

/* 説明文 */
.benefit__note {
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  line-height: 1.5;
  width: 100%;
  margin-top: 8px;
}

/* ---- 緑カード内コンテンツ ---- */
.benefit__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
}
.benefit__block-title {
  font-family: var(--f-base);
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1.5;
  text-align: center;
}
.benefit__block-green { color: #698D03; }
.benefit__block-desc {
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  line-height: 1.5;
  max-width: 324px;
  text-align: left;
}

/* 区切り線 */
.benefit__divider {
  width: 1px;
  height: 200px;
}
.benefit__divider img { width: 1px; height: 200px; }

/* アナウンステキスト */
.benefit__announce {
  font-family: var(--f-base);
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.benefit__announce-orange { color: #FE6D03; }
.benefit__announce-br--sp { display: none; }
@media (max-width: 767px) {
  .benefit__announce-br--sp { display: inline; }
}

/* ---- CTAボタン ---- */
.benefit__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.benefit__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  padding: 24px 50px 20px;
  gap: 2px;
  background: var(--g-btn);
  border-radius: 21px;
  box-shadow: 0 8px 0 var(--c-or-dark);
  transition: transform .15s, box-shadow .15s;
}
.benefit__btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 0 var(--c-or-dark); }
.benefit__btn:active { transform: translateY(4px);  box-shadow: 0 4px 0 var(--c-or-dark); }

.benefit__btn-badge {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: #ffffff;
  border: 2px solid var(--c-orange);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--f-num);
  font-size: 12px; font-weight: 500; color: var(--c-orange); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.benefit__btn-badge strong { font-size: 18px; font-weight: 700; }
.benefit__btn-text {
  font-family: var(--f-base);
  font-size: 24px; font-weight: 700; color: #ffffff; letter-spacing: -.3px; line-height: 1;
}
.benefit__cta-note {
  font-family: var(--f-base);
  font-size: 14px; font-weight: 600; color: #111111; line-height: 1;
}

/* ============================================================
   Benefit — SP (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* SP: PC背景非表示、SP背景を表示 */
  .benefit__bg--pc { display: none; }
  .benefit__bg--sp {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    pointer-events: none;
    z-index: 0;
  }
  .benefit__bg--sp .benefit__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Inner */
  .benefit__inner {
    max-width: 393px;
    padding: 80px 12px;
    gap: 28px;
    align-items: center;
  }

  /* セクションタイトル */
  .benefit__heading { align-items: center; gap: 8px; }
  .benefit__label { font-size: 16px; }
  .benefit__title { font-size: 28px; }

  /* カード群 */
  .benefit__cards { gap: 20px; max-width: 100%; }

  /* タグ */
  .benefit__card-tag { padding: 8px 12px; }
  .benefit__card-tag--yellow .benefit__tag-text,
  .benefit__card-tag--green  .benefit__tag-text { font-size: 16px; }
  .benefit__card-tag--yellow .benefit__tag-text strong,
  .benefit__card-tag--green  .benefit__tag-text strong { font-size: 20px; }

  /* 黄色カード: SP は縦積み・中央寄せ */
  .benefit__card--yellow {
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    gap: 4px;
  }
  .benefit__card--yellow .benefit__coin { margin-right: 0; }
  .benefit__card--yellow .benefit__coin-img { width: 176px; height: 132px; }
  .benefit__card--yellow .benefit__point-wrap { align-items: center; flex: none; width: 100%; }

  /* ポイント行: SP は縦積み・中央寄せ */
  .benefit__point-wrap { align-items: center; gap: 8px; }
  .benefit__point-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .benefit__point-pre {
    font-family: var(--f-base);
    font-size: 24px; font-weight: 700; color: #111111; line-height: 1;
    white-space: nowrap;
    /* SP: 単独行 */
    width: 100%;
    text-align: center;
  }
  /* SP: 200 + ポイント付与 を横並び1行に */
  .benefit__point-num {
    display: flex;
    align-items: flex-end;
  }
  .benefit__point-n { font-size: 48px; }
  .benefit__point-unit { font-size: 24px; line-height: 1.5; }
  .benefit__note { font-size: 14px; margin-top: 8px; text-align: left; }

  /* 緑カード: SP は縦積み・中央寄せ */
  .benefit__card--green {
    flex-direction: column;
    align-items: center;
    padding: 36px 16px;
    gap: 42px;
  }

  /* 2ブロック縦積み */
  .benefit__block-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }
  .benefit__block { flex: none; align-items: center; }
  .benefit__block-title { font-size: 24px; text-align: center; line-height: 1.5; }
  .benefit__block-desc { font-size: 14px; text-align: left; width: 100%; max-width: 324px; }

  /* 区切り線: SP は横線（SVG非表示→border代替） */
  .benefit__divider {
    width: 200px;
    height: 1px;
    border-top: 1px dashed #698D03;
  }
  .benefit__divider img { display: none; }

  /* アナウンス */
  .benefit__announce { font-size: 18px; white-space: normal; text-align: center; }

  /* CTAボタン */
  .benefit__btn { width: 100%; max-width: 350px; }
}


/* ============================================================
   New Menu Section
   PC/SP共通: max-width 1280px 内に 393px コンテンツ幅
   背景白 / py:80px
   ============================================================ */

.new-menu {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}

/* ---- 背景デコ ---- */
.new-menu__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.new-menu__deco { position: absolute; }
.new-menu__deco img { display: block; width: 100%; height: 100%; }

.new-menu__deco--ellipse-tr {
  top: -30px; right: -80px;
  width: 291px; height: 239px;
}
.new-menu__deco--ellipse-bl1 {
  bottom: 60px; right: 30px;
  width: 205px; height: 182px;
}
.new-menu__deco--ellipse-bl2 {
  bottom: 20px; left: -20px;
  width: 178px; height: 158px;
}
.new-menu__deco--confetti {
  inset: 0; width: 100%; height: 100%;
}
.new-menu__deco--confetti img { object-fit: cover; opacity: .7; }

/* ---- Inner ---- */
.new-menu__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}

/* ---- ヘッダー ---- */
.new-menu__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 369px;
}
.new-menu__label {
  font-family: var(--f-num);
  font-size: 16px;
  font-weight: 700;
  color: #698D03;
  letter-spacing: .48px;
  text-transform: uppercase;
  line-height: 1;
}
.new-menu__title {
  font-family: var(--f-base);
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  letter-spacing: .84px;
  line-height: 1;
  white-space: nowrap;
}
.new-menu__title-orange { color: #FE6D03; }
.new-menu__desc {
  font-family: var(--f-base);
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---- 2×2グリッド ---- */
.new-menu__grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
  width: 369px;       /* 178.5×2 + 12 gap */
  justify-content: center;
}
.new-menu__item {
  flex: 0 0 178.5px;
  width: 178.5px;
}

/* ---- メニューカード ---- */
.menu-card {
  position: relative;
  background: #ffffff;
  border: 0.75px solid #698D03;
  border-radius: 21px;
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  overflow: visible;
  height: 100%;
  padding-bottom: 21px;
}

/* NEWバッジ */
.menu-card__new-badge {
  position: absolute;
  top: -8px;
  left: -11px;
  width: 27.5px;
  height: 27.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.menu-card__badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.menu-card__badge-text {
  position: relative;
  z-index: 1;
  font-family: var(--f-num);
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 1;
}

/* 画像エリア */
.menu-card__img-wrap {
  width: 100%;
  height: 141.75px;
  border-radius: 21px 21px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}
.menu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストエリア */
.menu-card__body {
  display: flex;
  flex-direction: column;
  gap: 6.75px;
  padding: 0 6px;
}

/* タグ */
.menu-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.5px 6px 3px;
  border-radius: 6px;
  font-family: var(--f-num);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .05px;
  line-height: 1;
}
.menu-card__tag--lean {
  border: 0.75px solid #DF8074;
  color: #DF8074;
}
.menu-card__tag--gain {
  border: 0.75px solid #FE6D03;
  color: #DF8074;
}

/* 商品名 */
.menu-card__name {
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
}

/* PFC情報 */
.menu-card__pfc {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu-card__pfc-item {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--f-num);
  font-size: 10.5px;
  font-weight: 500;
  color: #111111;
  line-height: 1;
}
.menu-card__colon {
  font-size: 8px;
  margin: 0 1px;
}
.menu-card__val {
  font-size: 10.5px;
}
.menu-card__val small {
  font-size: 7.5px;
}
.menu-card__sep {
  color: rgba(17,17,17,.3);
  font-size: 9px;
  line-height: 1;
}

/* ---- 全メニューリンク ---- */
.new-menu__viewall {
  width: 100%;
  max-width: 369px;
  display: flex;
  justify-content: center;
}
.new-menu__viewall-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #698D03;
  font-family: var(--f-base);
  font-size: 16px;
  font-weight: 700;
  color: #698D03;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .2s;
}
.new-menu__viewall-link:hover { opacity: .7; }
.new-menu__viewall-link img { display: block; }

/* ============================================================
   New Menu — SP (max-width: 767px) — 同じ幅のまま
   ============================================================ */
@media (max-width: 767px) {
  .new-menu__inner {
    max-width: 393px;
    padding: 80px 24px;
    align-items: center;
  }
  .new-menu__header {
    align-items: center;
    max-width: 100%;
  }
  .new-menu__label { text-align: center; }
  .new-menu__title { text-align: center; white-space: normal; }
  .new-menu__desc  { text-align: center; }
  /* グリッド: 左右余白を確保してカードを小さく */
  .new-menu__grid {
    width: 100%;
    gap: 16px 12px;
  }
  .new-menu__item {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px);
  }
}


/* ============================================================
   Vote Section (投票方法)
   PC: max-width 1280px / 4ステップ横並び (1100px幅)
   SP: max-width 767px → 縦積み
   ============================================================ */

.vote {
  position: relative;
  width: 100%;
  background: #FFF8E6;
  overflow: hidden;
}

/* 背景紙吹雪 */
.vote__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* 背景画像 SP用 */
.vote__bg-sp {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vote__bg-sp-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media (max-width: 767px) {
  .vote__bg-sp { display: block; }
  .vote__bg { display: none; }
}
.vote__confetti {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
}

/* ---- Inner ---- */
.vote__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ---- ヘッダー ---- */
.vote__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.vote__label {
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 700;
  color: #698D03;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.vote__title {
  font-family: var(--f-base);
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 1.44px;
  line-height: 1;
  text-align: center;
  width: 100%;
  max-width: 1100px;
}

/* ---- ステップリスト（横並び） ---- */
.vote__steps {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1100px;
  max-width: 100%;
}

/* ---- 各ステップ（カード＋矢印） ---- */
.vote__step {
  display: flex;
  align-items: center;
  gap: 0;
}
.vote__step--last { flex: 0 0 230px; }

/* ---- カード ---- */
.vote__step-card {
  background: #ffffff;
  border-radius: 28px;
  width: 230px;
  height: 355px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 12px;
  flex-shrink: 0;
}

/* STEPバッジ */
.vote__step-badge {
  background: #698D03;
  color: #ffffff;
  font-family: var(--f-num);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  padding: 4px 12px 2px;
  border-radius: 50px;
  width: 120px;
  text-align: center;
  flex-shrink: 0;
}

/* ステップ画像 */
.vote__step-img-wrap {
  width: 100%;
  height: 199px;
  overflow: hidden;
  flex-shrink: 0;
}
.vote__step-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* テキストエリア */
.vote__step-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  padding: 0 8px;
}
.vote__step-title {
  font-family: var(--f-base);
  font-size: 16px;
  font-weight: 700;
  color: #698D03;
  text-align: center;
  line-height: 1;
  letter-spacing: -1px;
}
.vote__step-desc {
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 400;
  color: #111111;
  line-height: 1.2;
}
.vote__step-link {
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 500;
  color: #F7B818;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
  display: block;
}
.vote__step-link:hover { opacity: .75; }

/* ---- ステップ間の矢印 ---- */
.vote__step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 37px;
  flex-shrink: 0;
  margin: 0 8px;
}
.vote__step-arrow img {
  width: 37px;
  height: 25px;
  /* rotate -90deg → 右向き三角 */
  transform: rotate(-90deg) scaleY(-1);
}

/* ---- CTAボタン ---- */
.vote__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vote__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 360px;
  padding: 24px 50px 20px;
  gap: 2px;
  background: var(--g-btn);
  border-radius: 21px;
  box-shadow: 0 8px 0 var(--c-or-dark);
  transition: transform .15s, box-shadow .15s;
}
.vote__btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 0 var(--c-or-dark); }
.vote__btn:active { transform: translateY(4px);  box-shadow: 0 4px 0 var(--c-or-dark); }
.vote__btn-badge {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: #ffffff;
  border: 2px solid var(--c-orange);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--f-num);
  font-size: 14px; font-weight: 500; color: var(--c-orange); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.vote__btn-badge strong { font-size: 20px; font-weight: 700; }
.vote__btn-text { font-size: 28px; font-weight: 700; color: #ffffff; letter-spacing: -.3px; line-height: 1; }
.vote__cta-note { font-size: 14px; font-weight: 500; color: #111111; text-align: center; line-height: 1; }


/* ============================================================
   Vote — SP (max-width: 767px) → 縦積み
   ============================================================ */
@media (max-width: 767px) {

  .vote__inner {
    max-width: 393px;
    padding: 80px 20px;
    gap: 40px;
  }

  .vote__label { font-size: 16px; letter-spacing: .48px; }
  .vote__title { font-size: 28px; letter-spacing: .84px; text-align: center; }

  /* SP: 縦積み */
  .vote__steps {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .vote__step {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .vote__step--last { flex: none; width: 100%; max-width: 360px; }

  /* SP: カードは幅100% */
  .vote__step-card {
    width: 100%;
    height: auto;
    padding: 18px 12px;
  }
  .vote__step-img-wrap { height: auto; aspect-ratio: 412 / 398; }

  /* SP: 矢印は下向き（縦並びなので回転変更） */
  .vote__step-arrow {
    width: 37px;
    height: 25px;
    margin: 12px 0;
  }
  .vote__step-arrow img {
    width: 37px;
    height: 25px;
    transform: scaleY(-1); /* 下向き三角 */
  }

  /* ボタン */
  .vote__btn { width: min(360px, 100%); }
}


/* ============================================================
   Ranking Section
   PC: max-width 1280px / 背景 #FFF8E6 / 表彰台グラフィック中央
   SP: max-width 767px → 393px表示
   ============================================================ */

.ranking {
  position: relative;
  width: 100%;
  background: #FFF8E6;
  overflow: hidden;
}

/* ---- 背景デコ（紙吹雪・リボン） ---- */
.ranking__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ranking__bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* PC/SP 切り替え */
.ranking__bg-img--pc { display: block; }
.ranking__bg-img--sp { display: none; }

/* ---- Inner ---- */
.ranking__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ---- ヘッダー ---- */
.ranking__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.ranking__label {
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 700;
  color: #698D03;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

/* PC タイトル（1行） */
.ranking__title {
  font-family: var(--f-base);
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 1.44px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.ranking__title--sp { display: none; }
.ranking__title--pc { display: block; }

.ranking__title-num {
  font-family: var(--f-num);
  font-size: 68px;
  font-weight: 700;
  color: #FE6D03;
  line-height: 1;
}
.ranking__title-orange { color: #FE6D03; }

/* ---- 表彰台グラフィック ---- */
.ranking__podium-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.ranking__podium-img {
  max-width: 727px;
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Ranking — SP (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  .ranking__bg-img--pc { display: none; }
  /* SP背景: 393×635pxの画像をセクション全体に合わせる */
  .ranking__bg-img--sp {
    display: block;
    object-fit: cover;
    object-position: center top;
  }
  /* セクション高さを背景画像のアスペクト比に合わせる */
  .ranking {
    min-height: calc(100vw * 635 / 393);
  }

  .ranking__inner {
    max-width: 393px;
    padding: 140px 12px 80px;
    gap: 28px;
  }

  .ranking__label { font-size: 16px; letter-spacing: .48px; }

  /* SP: タイトル切り替え（2行表示） */
  .ranking__title--pc { display: none; }
  .ranking__title--sp { display: block; }
  .ranking__title {
    font-size: 28px;
    letter-spacing: .84px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  .ranking__title-num { font-size: 48px; }

  /* 表彰台: SP版グラフ画像（1310×549px → 幅100%でリサイズ） */
  .ranking__podium-img {
    max-width: 369px;
    width: 100%;
    height: auto;
  }
}


/* ============================================================
   Note Section (注意事項)
   PC: max-width 1280px / コンテンツ幅 980px / py:80px
   SP: max-width 767px → 全幅 px:32px
   ============================================================ */

.note {
  width: 100%;
  background: #F2F2F2;
}

.note__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Figma: コンテンツ幅 980px ＋ px:32px */
  box-sizing: border-box;
}

/* 980px幅の内側ラッパー効果はpadding調整で実現 */
.note__inner > * {
  max-width: 980px;
  width: 100%;
}

.note__title {
  font-family: var(--f-base);
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  line-height: 1;
  white-space: nowrap;
}

.note__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.note__list li {
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 400;
  color: #111111;
  line-height: 1.5;
}

/* ============================================================
   Note — SP (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  .note__inner {
    max-width: 393px;
    padding: 80px 32px;
    gap: 12px;
  }

  .note__title {
    font-size: 16px;
  }

  .note__list {
    gap: 6px;
  }

  .note__list li {
    font-size: 10px;
  }
}


/* ============================================================
   CTA Final Section (締めのCTA)
   PC: 背景 #FEF5F0 / コンテンツ幅 715px / 王冠 + テキスト + ボタン
   SP: 393px / gap:32px
   ============================================================ */

.cta-final {
  position: relative;
  width: 100%;
  background: #FEF5F0;
  overflow: hidden;
}

/* ---- 背景デコ ---- */
.cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cta-final__bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cta-final__bg-img--pc { display: block; }
.cta-final__bg-img--sp { display: none; }

/* ---- Inner ---- */
.cta-final__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 90px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ---- 王冠 ---- */
.cta-final__crown {
  display: flex;
  justify-content: center;
}
.cta-final__crown-img {
  width: 138px;   /* Figma: 月桂樹+王冠グループ約138px相当 */
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.1));
}

/* ---- テキストブロック ---- */
.cta-final__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 「あなたのイチオシを、No.1に！」 */
.cta-final__headline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 4px;
  line-height: 1;
}
.cta-final__headline-black {
  font-family: var(--f-base);
  font-size: 40px;
  font-weight: 700;
  color: #111111;
  line-height: 1;
}
.cta-final__headline-orange {
  font-family: var(--f-base);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(166.54deg, #FF9243 19.9%, #FF9243 54.3%, #FE6D03 54.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.cta-final__headline-no1 {
  font-family: var(--f-num);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(154.62deg, #FF9243 19.9%, #FF9243 54.3%, #FE6D03 54.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
/* PC: ラッパーを透過させて親flexに直接参加させる */
.cta-final__headline-no1-wrap {
  display: contents;
}
/* PC: サブテキストは1行 */
.cta-final__sub br { display: none; }

/* サブコピー */
.cta-final__sub {
  font-family: var(--f-base);
  font-size: 24px;
  font-weight: 400;
  color: #111111;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

/* ---- CTAボタン ---- */
.cta-final__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-final__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 360px;
  padding: 24px 50px 20px;
  gap: 2px;
  background: var(--g-btn);
  border-radius: 21px;
  box-shadow: 0 8px 0 var(--c-or-dark);
  transition: transform .15s, box-shadow .15s;
}
.cta-final__btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 0 var(--c-or-dark); }
.cta-final__btn:active { transform: translateY(4px);  box-shadow: 0 4px 0 var(--c-or-dark); }
.cta-final__btn-badge {
  position: absolute;
  top: -18px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: #ffffff;
  border: 2px solid var(--c-orange);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--f-num);
  font-size: 14px; font-weight: 500; color: var(--c-orange); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.cta-final__btn-badge strong { font-size: 20px; font-weight: 700; }
.cta-final__btn-text {
  font-size: 28px; font-weight: 700; color: #ffffff; letter-spacing: -.3px; line-height: 1;
}
.cta-final__note {
  font-size: 14px; font-weight: 500; color: #111111; text-align: center; line-height: 1;
}

/* ============================================================
   CTA Final — SP (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* 背景画像 393×650px のアスペクト比でセクション高さを確保 */
  .cta-final {
    min-height: calc(100vw * 650 / 393);
  }
  .cta-final__bg-img--pc { display: none; }
  .cta-final__bg-img--sp {
    display: block;
    object-fit: fill;
  }

  .cta-final__inner {
    max-width: 393px;
    padding: 120px 20px 80px;
    gap: 32px;
  }

  /* 王冠 */
  .cta-final__crown-img { width: 90px; }

  /* テキスト */
  .cta-final__text { gap: 18px; }

  /* タイトル文字サイズ縮小 */
  .cta-final__headline-black  { font-size: 20px; }
  .cta-final__headline-orange { font-size: 28px; }
  .cta-final__headline-no1    { font-size: 36px; }

  /* No.1に！ を改行させない・2行目に */
  .cta-final__headline-no1-wrap { display: inline; white-space: nowrap; flex-basis: 100%; text-align: center; }
  /* SP: サブテキストは改行あり */
  .cta-final__sub br { display: inline; }

  /* SP: 「あなたのイチオシを、」1行目・「No.1に！」2行目 */
  .cta-final__headline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    row-gap: 4px;
  }
  .cta-final__headline-no1 { flex-basis: auto; }

  .cta-final__sub {
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }

  /* ボタン */
  .cta-final__btn { width: min(350px, 100%); }
  .cta-final__btn-text { font-size: 24px; }
  .cta-final__btn-badge { font-size: 12px; }
  .cta-final__btn-badge strong { font-size: 18px; }
}


/* ============================================================
   PC専用オーバーライド (min-width: 768px)
   ============================================================ */

/* ---- FV 背景画像切り替え ---- */
/* (HTMLで fv-pc-background.jpg / fv-sp-background.jpg に差し替え済み) */

/* ---- CTA: No.1 をベースラインに揃える ---- */
@media (min-width: 768px) {
  .cta-final__headline-no1 {
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    top: 0.15em;
  }
}

/* ---- 全セクション全幅化（MENUナビ以外） ---- */
/* nav-menu は max-width: 1280px のまま維持 */
.about,
.benefit,
.new-menu,
.vote,
.ranking,
.note,
.cta-final {
  width: 100%;
  /* overflow: hidden は各セクションで維持 */
}

/* ---- Benefit PC版: コンテンツ幅 1100px / カード横並び ---- */
@media (min-width: 768px) {

  .benefit__inner {
    max-width: 1280px;
    padding: 80px 90px;
    gap: 64px;
  }

  /* ---- Benefit PC: Figma node 27:4201 準拠 ---- */
  /* カード群: max-width:850px / gap:36px */
  .benefit__cards {
    flex-direction: column;
    gap: 36px;
    width: 100%;
    max-width: 850px;
  }

  /* タグ: px:28px / フォント 20px/24px */
  .benefit__card-tag { padding: 8px 28px; }
  .benefit__card-tag--yellow .benefit__tag-text,
  .benefit__card-tag--green  .benefit__tag-text { font-size: 20px; }
  .benefit__card-tag--yellow .benefit__tag-text strong,
  .benefit__card-tag--green  .benefit__tag-text strong { font-size: 24px; }

  /* 黄色カード: コイン左＋テキスト右 横並び / px:50px py:36px */
  .benefit__card--yellow {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 36px 50px;
  }
  .benefit__card--yellow .benefit__coin { flex-shrink: 0; margin-right: 8px; }
  .benefit__card--yellow .benefit__coin-img { width: 176px; height: 132px; }
  .benefit__card--yellow .benefit__point-wrap { align-items: flex-start; flex: 1; }

  /* ポイント横一行: 「1商品レビューにつき 200 ポイント付与」 */
  .benefit__point-line {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
    white-space: nowrap;
  }
  .benefit__point-pre {
    font-family: var(--f-base);
    font-size: 28px; font-weight: 700; color: #111111; line-height: 1.57;
    width: auto; text-align: left;
  }
  .benefit__point-num {
    display: flex;
    align-items: flex-end;
  }
  .benefit__point-n {
    font-family: var(--f-num);
    font-size: 48px; font-weight: 700; color: #FE6D03; line-height: 1;
  }
  .benefit__point-unit {
    font-family: var(--f-base);
    font-size: 28px; font-weight: 700; color: #111111; line-height: 1.57; padding-bottom: 0;
  }
  .benefit__note { font-size: 14px; margin-top: 8px; }

  /* 緑カード: flex-col / px:50px py:36px / gap:36px */
  .benefit__card--green {
    flex-direction: column;
    padding: 36px 50px;
    gap: 36px;
  }
  /* 2ブロック横並び */
  .benefit__card--green > .benefit__block-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }
  .benefit__block { flex: 1; }
  .benefit__block-title { font-size: 28px; text-align: left; line-height: 1.57; }
  .benefit__block-green { color: #698D03; }
  .benefit__block-desc { font-size: 14px; max-width: 324px; text-align: left; }

  /* 縦区切り線 w:0 h:148px (SVG) */
  .benefit__divider { width: 1px; height: 148px; align-self: center; }
  .benefit__divider img { width: 1px; height: 148px; }

  /* アナウンス: 24px 横一行 */
  .benefit__announce { font-size: 24px; white-space: nowrap; text-align: center; }

  /* ---- New Menu PC版: 1100px幅 / 4列横並び ---- */
  .new-menu__inner {
    max-width: 1280px;
    padding: 80px 90px;
    align-items: flex-start;
    gap: 64px;
  }

  .new-menu__header {
    max-width: none;
  }
  .new-menu__label { font-size: 20px; letter-spacing: .6px; }
  .new-menu__title { font-size: 48px; letter-spacing: 1.44px; }
  .new-menu__desc  { font-size: 16px; }

  /* 4列横並び (Figma: justify-content: space-between / w:1100px) */
  .new-menu__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 20px;
    width: 1100px;
    max-width: 100%;
  }
  .new-menu__item {
    flex: 0 0 230px;
    width: 230px;
  }

  /* カードサイズ Figma: h:280px / img:189px / rounded:28px / border:1px */
  .menu-card {
    border-radius: 28px;
    border-width: 1px;
    height: 280px;
    padding-bottom: 28px;
  }
  .menu-card__img-wrap {
    height: 189px;
    border-radius: 28px 28px 0 0;
  }
  .menu-card__body { padding: 0 8px; gap: 9px; }
  .menu-card__name { font-size: 16px; }
  .menu-card__pfc  { gap: 8px; }
  .menu-card__pfc-item { font-size: 14px; }
  .menu-card__val  { font-size: 14px; }
  .menu-card__val small { font-size: 10px; }

  /* NEWバッジ拡大 (Figma: size:52px) */
  .menu-card__new-badge {
    width: 52px;
    height: 52px;
    top: -26px;
    left: -26px;
  }
  .menu-card__badge-text { font-size: 19.5px; }

  /* 「全メニューを見る」リンク */
  .new-menu__viewall { max-width: none; }
  .new-menu__viewall-link { font-size: 20px; }
}


/* ============================================================
   Point Section (ポイントとは)
   PC: max-width 1280px / コンテンツ幅 1100px / py:80px
   SP: max-width 767px → 393px / py:120px
   ============================================================ */

.point {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}

/* 背景 */
.point__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.point__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 四隅デコ */
.point__bg-decos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.point__bg-deco {
  position: absolute;
}
.point__bg-deco--tl { top: 0; left: 0; }
.point__bg-deco--tr { top: 0; right: 0; }
.point__bg-deco--bl { bottom: 0; left: 0; }
.point__bg-deco--br { bottom: 0; right: 0; }
@media (max-width: 767px) {
  .point__bg-decos--pc { display: none; }
}

/* Inner */
.point__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ---- ヘッダー ---- */
.point__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}
.point__label {
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 700;
  color: #698D03;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1;
}
.point__title {
  font-family: var(--f-base);
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 1.44px;
  line-height: 1;
  white-space: nowrap;
}
.point__title-orange { color: #FE6D03; }

/* ---- カード ---- */
.point__card {
  background: #ffffff;
  border: 2px solid #698D03;
  border-radius: 28px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: center;
  width: 100%;
  max-width: 900px;
}

/* ---- 上部: 1P→1円 ---- */
.point__overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.point__catch {
  font-family: var(--f-base);
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.point__catch-orange { color: #FE6D03; }

.point__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.point__icon-item {
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.point__icon-img { width: 100%; height: auto; display: block; }
.point__icon-arrow { width: 24px; height: 24px; display: block; }

/* ---- 下部: 説明 + 3サービス ---- */
.point__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 630px;
}
.point__desc {
  font-family: var(--f-base);
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.point__desc-orange { color: #FE6D03; }
.point__deco-l,
.point__deco-r { width: 17px; height: 22px; display: block; flex-shrink: 0; }
.point__deco-l { transform: scaleY(-1) rotate(180deg); }

/* PC: 3サービス横並び (MuscleDeliのsub-wrapを展開) */
.point__services {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 580px;
  margin-top: 8px;
}
/* PC: services-sub は中身を展開して横並びに */
.point__services-sub {
  display: contents;
}
.point__service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 132px;
  text-align: center;
}
.point__service-icon { width: 80px; height: 80px; display: block; }
.point__service-text {
  font-family: var(--f-base);
  font-size: 12px;
  font-weight: 500;
  color: #111111;
  line-height: 1.5;
  text-align: center;
}
.point__sep {
  display: flex;
  align-items: center;
  align-self: center;
  height: 87.5px;
}
.point__sep img { height: 87.5px; width: 1px; display: block; }


/* ============================================================
   Point — SP (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

  .point__inner {
    max-width: 393px;
    padding: 120px 12px;
    gap: 48px;
  }

  .point__label { font-size: 16px; letter-spacing: .48px; }
  .point__title { font-size: 28px; letter-spacing: .84px; }

  .point__card {
    padding: 36px 16px;
    gap: 42px;
    max-width: 100%;
  }

  .point__catch { font-size: 20px; white-space: normal; text-align: center; }

  .point__desc {
    font-size: 16px;
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
    line-height: 1.5;
  }

  /* SP: 上段:Muscleデリ中央 / 下段:2つ横並び */
  .point__services {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 304px;
    width: 100%;
  }
  /* PC用区切り線をSPで非表示 */
  .point__sep--pc { display: none; }

  /* 上段: MuscleDeliアイコン中央 */
  .point__service--shop {
    width: 200px;
    align-items: center;
  }

  /* 下段: 定期+YOUR BREAD 横並び */
  .point__services-sub {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .point__services-sub .point__sep {
    display: flex;
    align-items: center;
    align-self: center;
    height: 87.5px;
  }
  .point__services-sub .point__sep img { height: 87.5px; width: 1px; }
  .point__services-sub .point__service { flex: 1; }
}



/* ============================================================
   New Menu — 四隅食材デコ（PC）
   常にセクションの端に固定。ブラウザを広げても追従。
   ============================================================ */
.new-menu__corner {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 1;
}
/* 左上: 人参 */
.new-menu__corner--tl {
  top: 0;
  left: 0;
  width: 180px;
  height: auto;
}
/* 右上: たまご */
.new-menu__corner--tr {
  top: 0;
  right: 0;
  width: 200px;
  height: auto;
}
/* 左下: きのこ */
.new-menu__corner--bl {
  bottom: 0;
  left: 0;
  width: 160px;
  height: auto;
}
/* 右下: ブロッコリー */
.new-menu__corner--br {
  bottom: 0;
  right: 0;
  width: 180px;
  height: auto;
}

/* SP: PC四隅デコ非表示 */
@media (max-width: 767px) {
  .new-menu__corner { display: none; }
}

/* SP用四隅デコ: PCでは非表示 */
.new-menu__sp-corner {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 767px) {
  .new-menu__sp-corner { display: block; }
  .new-menu__sp-corner--tl { top: 0; left: 0; width: auto; height: auto; }
  .new-menu__sp-corner--tr { top: 0; right: 0; width: auto; height: auto; }
  .new-menu__sp-corner--bl { bottom: 0; left: 0; width: auto; height: auto; }
  .new-menu__sp-corner--br { bottom: 0; right: 0; width: auto; height: auto; }
}


/* ---- Point カード左上コインイラスト ---- */
.point__card {
  position: relative;
  overflow: visible;
}
.point__card-coin {
  position: absolute;
  top: -80px;
  left: -90px;
  width: 180px;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 767px) {
  .point__card-coin {
    width: 100px;
    top: -35px;
    left: -40px;
  }
}