@charset "UTF-8";
/* ============================================================
   今日はのんびり、〆鍋におまかせキャンペーン LP
   PCデザイン(1500)をベースに、768pxで SP(375) にレスポンシブ対応
   ============================================================ */

/* ---------- カラー・共通変数 ---------- */
:root{
  --brown:        #7a3601;   /* 濃茶（枠線・ボタン・見出し） */
  --brown-text:   #5f3410;   /* 本文の茶色 */
  --red:          #e61f10;   /* コースタグ */
  --bg:           #f9dc95;   /* 背景の黄色（画像が読めない場合のフォールバック） */
  --card:         #ffffff;   /* 白カード */
  --gray:         #f1ebe5;   /* STEP のグレーボックス */
  --faq-bar:      #f2efe9;   /* FAQ 見出しバー */
  --font: "Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Kaku Gothic ProN",
          "BIZ UDPGothic","Yu Gothic","游ゴシック体",Meiryo,sans-serif;
  --content: 1200px;         /* コンテンツ最大幅 */
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--brown-text);
  background-color:var(--brown);  /* コンテンツ幅(1500px)より外側のサイドは濃茶 */
  line-height:1.7;
  font-weight:500;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

/* LP 全体ラッパー（デザイン幅 1500 を上限に中央寄せ）
   コンテンツ背景（クリーム＋小ドット）は body から .lp へ移動し、
   1500px より外側のサイドは body の濃茶が見えるようにする */
.lp{
  max-width:1500px;
  margin-inline:auto;
  overflow:hidden;
  background-color:#fbdd97;                     /* bg.png のベース色（フォールバック） */
  background-image:url("../images/bg.png");     /* period以下コンテンツの背景（クリーム＋小ドット） */
  background-size:1500px;                        /* タイル（2倍書き出しのため 1500px で表示） */
}

/* ============================================================
   KV
   ============================================================ */
/* KVは全幅バンド。イラストは最大1500pxで中央配置し、
   それより広い画面では左右の余白を濃茶で敷く（イラストは欠けない） */
.kv{ background:var(--brown); }
.kv img{ display:block; width:100%; max-width:1500px; margin-inline:auto; }

/* ============================================================
   応募期間・概要（section_time）
   上下の濃茶バーで挟まれたエリア
   ============================================================ */
.period{
  border-top:24px solid var(--brown);
  border-bottom:24px solid var(--brown);
  padding:44px 20px 56px;
  /* period は従来の黄色ドット背景を維持（body背景の上に重ねる） */
  background-color:var(--bg);
  background-image:url("../images/bg-pattern.png");
  background-size:500px;
}
.period__inner{ max-width:var(--content); margin-inline:auto; }

/* Figma書き出しの期間ボックス画像 */
.period-img{
  margin:0 auto;
  max-width:1180px;
  text-align:center;
}
.period-img img{
  display:block;
  width:100%;
  height:auto;
}

/* 期間の白ボックス（旧・HTML版／未使用） */
.period-box{
  background:#fff;
  border-radius:22px;
  padding:26px 40px;
  max-width:1180px;
  margin-inline:auto;
}
.period-row{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin:0;
  padding:6px 0;
}
.period-row dt{
  flex:0 0 auto;
  width:230px;
  font-weight:700;
  color:var(--brown-text);
  letter-spacing:.08em;
  font-size:20px;
}
.period-row dd{
  margin:0;
  font-weight:700;
  color:var(--brown-text);
  font-size:26px;
  letter-spacing:.02em;
}
.period-row dd small{ font-size:.62em; font-weight:700; }
.period-row .dash{ margin-right:.4em; }
.period-box hr{
  border:0;
  border-top:1px solid #e7c98f;
  margin:4px 0;
}

/* 概要テキスト */
.period-lead{
  text-align:center;
  font-weight:700;
  font-size:26px;
  color:var(--brown-text);
  margin-top:30px;
  line-height:1.6;
}
.period-lead small{ font-size:.7em; }

/* ============================================================
   共通ボタン「応募はこちらから」
   ============================================================ */
.btn-wrap{ text-align:center; margin-top:34px; }
.btn-entry{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:460px;
  padding:24px 40px;
  background:var(--brown);
  color:#fff;
  font-size:24px;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  border-radius:999px;       /* ピル型 */
  box-shadow:0 5px 0 rgba(74,32,0,.35);
  transition:transform .1s, box-shadow .1s, opacity .2s;
}
.btn-entry::after{         /* 白い丸 */
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  width:34px;height:34px;
  background:#fff;
  border-radius:50%;
}
.btn-entry::before{        /* 丸の中の茶色▶ */
  content:"";
  position:absolute;
  right:38px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  width:0;height:0;
  border-style:solid;
  border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--brown);
}
.btn-entry:hover{ opacity:.9; }
.btn-entry:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(74,32,0,.35); }

/* ============================================================
   Menu（ナビゲーション）
   ============================================================ */
.menu{ padding:40px 20px; }
.menu__list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 18px;
  max-width:1400px;
  margin-inline:auto;
}
.menu__list a{ display:block; transition:transform .1s, opacity .2s; }
.menu__list img{ display:block; width:240px; }
.menu__list a:hover{ transform:translateY(-3px); opacity:.92; }

/* ============================================================
   セクション共通
   ============================================================ */
.sec{ padding:20px 20px 60px; }

/* 見出しリボン */
.ribbon{
  text-align:center;
  margin:0 0 -96px;      /* リボンの約半分をカードに重ねる */
  position:relative;
  z-index:2;
}
.ribbon img{ width:320px; }
/* 重なりを増やした分だけカード上部に余白を足し、タイトル下の間隔は従来どおり保つ */
.ribbon + .card{ padding-top:138px; }
.ribbon + .prize-list > .prize-card:first-child{ padding-top:130px; }

/* 白カード */
.card{
  background:var(--card);
  border:6px solid var(--brown);
  border-radius:40px;
  max-width:1280px;
  margin-inline:auto;
  padding:64px 60px;
}
.card + .card{ margin-top:40px; }

/* 注釈テキスト */
.note{ font-size:14px; line-height:1.7; color:var(--brown-text); }
.note--center{ text-align:left; max-width: 1280px; margin: 22px auto 0; }

/* ============================================================
   賞品紹介
   ============================================================ */
/* コースごとに茶色ボーダーのボックスで囲む（Figma準拠） */
.prize-list{
  max-width:1280px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.prize-card{
  position:relative;
  background:var(--card);
  border:6px solid var(--brown);
  border-radius:40px;
  padding:56px 70px;
}
/* 2個目コースの上に置く鍋の画像 */
.prize-nabe{
  position:absolute;
  top:-58px;
  left:40px;
  width:172px;
  height:auto;
  z-index:2;
  pointer-events:none;
}

.prize-row{
  display:flex;
  align-items:center;
  justify-content:center;        /* 余った幅を左右に分散し、中央の空白を抑える */
  gap:clamp(48px, 8%, 120px);    /* 中央の余白を控えめに（デザイン準拠） */
}
/* 左カラムは両カード共通の固定幅：タグサイズ・画像の左端位置を統一する
   （デスクトップでは340px固定。幅が足りない中間サイズでは縮小して溢れ防止） */
.prize-info{ flex:0 1 auto; width:400px; min-width:0; }
.prize-info__inner{ display:block; }

/* コースタグ（赤）：左カラム幅いっぱい＝両コースで同一サイズ */
.course-tag{
  display:block;
  width:100%;
  text-align:center;
  background:var(--red);
  color:#fff;
  font-weight:700;
  border-radius:6px;
  padding:10px 26px;
  margin-bottom:22px;
  white-space:nowrap;
}
.course-tag__price{ font-size:28px; }
.course-tag__tax{ font-size:17px; }
.course-tag__label{ font-size:24px; }

.prize-name{
  font-size:26px;
  font-weight:700;
  color:var(--brown-text);
  line-height:1.5;
}
.prize-name b{ font-size:34px; }
.prize-size{
  margin-top:12px;
  font-size:15px;
  font-weight:700;
  color:var(--brown-text);
  line-height:1.6;
}

/* 賞品画像 */
.prize-img{
  flex:0 0 auto;
  width:400px;
  height:auto;
  display:block;
  border-radius:4px;
}

/* ============================================================
   対象商品
   ============================================================ */
/* 対象商品ヘッダー：リボン＋キャラクター装飾（すべてFigma書き出しの透過PNG） */
.target-header{
  position:relative;
  max-width:1040px;
  margin:0 auto -90px;   /* リボンの約半分をカードに重ねる */
  padding-top:46px;
  min-height:250px;   /* キャラクターを4隅に配置するため縦の余白を確保 */
  display:flex;
  justify-content:center;
  align-items:flex-end;
  z-index:2;
}
.target-header__ribbon{ margin:0; }
.target-header__ribbon img{ position:relative; z-index:2; width:300px; }
/* 重なりを増やした分だけカード上部に余白を足し、タイトル下の間隔を保つ */
.target-header + .card{ padding-top:140px; }
.thchar{ position:absolute; z-index:1; transform-origin:center bottom; }
/* ヘッダー側：pom（左下）＋mouse（右下）でリボンを下から囲む */
.thchar--pom{   width:180px; left:11%; bottom:-8px; }  /* 左下（PCはタイトル寄り） */
.thchar--mouse{ width:122px; right:10%; bottom:4px; }  /* 右下（PCはタイトル寄り） */

/* 1つ目のカード下部に dog（左）＋cat（右）を掛けて配置 */
.target-footer{
  position:relative;
  z-index:3;               /* カードより前面に出す */
  max-width:1040px;
  margin:-70px auto 0;     /* カード下端に食い込ませる */
  min-height:140px;
  pointer-events:none;
}
.thchar--dog{   width:110px; left:4%;  bottom:40px; }   /* カード下端・左 */
.thchar--cat{   width:132px; right:4%; bottom:40px; }   /* カード下端・右 */

/* 画面内に入ったらキャラクターがぴょんぴょん跳ねる（約2.5秒） */
.target-header.is-inview .thchar,
.target-footer.is-inview .thchar{
  animation:thchar-bounce 0.9s cubic-bezier(0.28,0.84,0.42,1) 2 forwards;
}
.target-footer.is-inview .thchar--dog{   animation-delay:0.15s; }
.target-footer.is-inview .thchar--cat{   animation-delay:0.30s; }
.target-header.is-inview .thchar--mouse{ animation-delay:0.45s; }
/* プリンだけ大きめに跳ねる */
.target-header.is-inview .thchar--pom{ animation-name:thchar-bounce-lg; animation-delay:0s; }

@keyframes thchar-bounce{
  0%{   transform:translateY(0) scale(1); }
  30%{  transform:translateY(-24px) scale(1.03); }
  50%{  transform:translateY(0) scale(0.92); }
  70%{  transform:translateY(-8px) scale(1.01); }
  100%{ transform:translateY(0) scale(1); }
}
@keyframes thchar-bounce-lg{
  0%{   transform:translateY(0) scale(1); }
  30%{  transform:translateY(-40px) scale(1.12); }
  50%{  transform:translateY(0) scale(0.85); }
  70%{  transform:translateY(-18px) scale(1.06); }
  100%{ transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .target-header.is-inview .thchar,
  .target-footer.is-inview .thchar{ animation:none; }
}

.series-title{
  text-align:center;
  font-size:24px;
  font-weight:700;
  color:var(--brown-text);
  margin:0 0 26px;
  padding-bottom:18px;
  border-bottom:2px solid var(--brown);
}
.series-title sup{ font-size:.5em; vertical-align:super; }
.product-grid{ text-align:center; margin:0; }
/* Figmaデザインに合わせ、商品パッケージが各カードで同じ大きさに見えるよう
   1行あたりの商品数に応じて画像幅（カード内側幅に対する割合）を指定 */
.product-grid img{ height:auto; }
.product-grid--basic img{ width:86%; }   /* 5個/行のグリッド */
.product-grid--meat  img{ width:34%; }   /* 2個 */
.product-grid--otona img{ width:50%; }   /* 3個 */

/* ============================================================
   応募方法（STEP）
   ============================================================ */
.step + .step{ margin-top:20px; }
.step-head{
  text-align:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--brown-text);
  margin:0 0 18px;
  padding-bottom:18px;
  border-bottom:2px solid var(--brown);
}
.step-body{
  display:flex;
  align-items:center;
  gap:40px;
  background:var(--gray);
  border-radius:10px;
  padding:36px 44px;
}
.step-ill{ flex:0 0 auto; width:210px; }
.step-text{ flex:1 1 0; }
.step-text h4{
  font-size:28px;
  font-weight:700;
  color:var(--brown-text);
  margin:0 0 14px;
}
.step-text .lead-sub{ font-weight:700; margin:10px 0 4px; }
.step-text p + .note{ margin-top:12px; }
/* STEP1 主要説明文（Figma: M PLUS Rounded 1c Bold / 28px / line-height 48px） */
.step-lead{
  font-family:"M PLUS Rounded 1c",var(--font);
  font-weight:700;
  font-size:28px;
  line-height:1.7;
}
/* 応募方法：本文（文章部分）はデザイン準拠のダークグレー #333。
   見出し（STEP／h4）・アコーディオン見出しなどのタイトルは従来の茶色のまま、赤字項目は赤のまま */
#howto .step-text p,
#howto .step-notes,
#howto .notice__intro,
#howto .notice__list{
  color:#333;
}

/* ============================================================
   アコーディオン（撮影時の注意事項／FAQ 共通）
   ============================================================ */
.accordion{ margin-top:20px; }
.faq .accordion + .accordion{ margin-top:16px; }

.accordion__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--faq-bar);
  border:0;
  border-radius:6px;
  padding:22px 30px;
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  color:var(--brown-text);
  text-align:left;
  line-height:1.5;
  cursor:pointer;
}
.accordion__icon{
  flex:0 0 auto;
  font-size:26px;
  font-weight:700;
  line-height:1;
  color:var(--brown-text);
}
/* STEP2「撮影時の注意事項」：STEP本文と同じグレーボックス内に収め、
   見出しは中央寄せ・上下に茶色の罫線（Figma準拠） */
.step-body--notice{ flex-direction:column; align-items:stretch; }
.step-main{ display:flex; align-items:center; gap:40px; }
/* 電話＋テキスト行の下に横幅いっぱいで並ぶ注意事項リスト */
.step-notes{ margin-top:20px; text-align: left;}
.step-body--notice .accordion{ margin-top:28px; }
.step-body--notice .accordion__head{
  position:relative;
  background:transparent;
  border-radius:0;
  border-top:3px solid var(--brown);
  border-bottom:3px solid var(--brown);
  justify-content:center;
  padding:16px 40px;
  color:var(--brown);
}
.step-body--notice .accordion__icon{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  color:var(--brown);
}
.step-body--notice .accordion__inner{ padding:24px 4px; }
/* 展開時に一番下に表示する「×閉じる」ボタン（見出しと同じスタイル） */
.accordion__close{
  display:block;
  width:100%;
  background:transparent;
  border:0;
  border-top:3px solid var(--brown);
  border-bottom:3px solid var(--brown);   /* 「撮影時の注意事項」見出しと同じく下の線も追加 */
  padding:16px;
  font-family:"M PLUS Rounded 1c",var(--font);
  font-weight:700;
  font-size:19px;
  color:var(--brown);
  text-align:center;
  cursor:pointer;
}
/* パネル：JSで max-height を切り替え */
.accordion__panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}
.accordion__inner{ padding:24px 30px 6px; }
.faq .accordion__inner{ border-bottom:1px solid #e2d9c9; }
.faq .accordion__inner p{ font-size:15px; color:var(--brown-text); }

/* 撮影時の注意事項の中身（Figma書き出し画像＋実テキスト） */
.notice__intro{ font-size:14px; margin-bottom:22px; text-align: left;}
.notice__row{ display:flex; gap:26px; justify-content:center; align-items:flex-start; margin-bottom:26px; }
.notice__row .notice__fig{ flex:1 1 0; }
.notice__fig{ margin:0; text-align:center; }
.notice__fig img{ width:100%; height:auto; }
.notice__fig--bad{ margin:0 0 26px; }
/* 悪い例の画像は上のコンテンツ（良い例などの行）と横幅を揃える＝全幅 */
.notice__fig--bad img{ width:100%; max-width:none; }
.notice__row2{ display:flex; gap:34px; align-items:flex-start; }
/* line-height を広げ、横の画像（悪い例の下・redbox）と同じぐらいの高さに揃える */
.notice__list{ flex:1 1 0; list-style:none; margin:0; padding:0; font-size:13px; line-height:2.8; }
.notice__list li{ position:relative; padding-left:1.1em; margin-bottom:.4em; }
.notice__list li::before{ content:"・"; position:absolute; left:0; }
/* Figmaで赤字＋「※」始まりの注意項目 */
.notice__list li.is-red{ color:#c1272d; }
.notice__list li.is-red::before{ content:"※"; }
.notice__redbox{ flex:0 0 300px; }

/* ============================================================
   よくある質問 / 応募規約
   ============================================================ */
.terms p{ font-size:14px; line-height:1.9; }
.terms-period{ margin:26px 0 0; }
.terms-period dt{
  font-weight:700;
  border-bottom:1px solid #e2d9c9;
  padding-bottom:6px;
  margin-bottom:6px;
}
.terms-period dd{ margin:0; font-size:14px; }

/* 応募規約 本文 */
.terms h3{
  font-size:16px;
  font-weight:700;
  color:var(--brown);
  border-bottom:1px solid #e2d9c9;
  padding-bottom:6px;
  margin:36px 0 12px;
}
.terms h4{ font-size:14px; font-weight:700; margin:18px 0 4px; }
.terms ul,.terms ol{ margin:8px 0 0; padding-left:1.4em; }
.terms ul{ list-style:disc; }
.terms ol{ list-style:decimal; }
.terms li{ font-size:14px; line-height:1.9; }
.terms li + li{ margin-top:4px; }
.terms .terms-note{ font-size:13px; line-height:1.8; margin:8px 0 0; }
.terms .terms-step{ margin:12px 0 0; }
.terms a{ color:#0a58ca; text-decoration:underline; word-break:break-all; }

/* 規約：一部表示＋スクロール（背景・枠なし） */
.terms-scroll{
  max-height:420px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:10px;
}
.terms-scroll > :first-child{ margin-top:0; }
.terms-scroll h3:first-of-type{ margin-top:20px; }
.terms-scroll::-webkit-scrollbar{ width:8px; }
.terms-scroll::-webkit-scrollbar-thumb{ background:#cdbfa6; border-radius:8px; }
@media (max-width:768px){
  .terms-scroll{ max-height:340px; }
}

/* ============================================================
   お問い合わせ
   ============================================================ */
.contact{ padding:40px 20px 70px; }
.contact__inner{
  max-width:770px;
  margin-inline:auto;
  background:var(--brown);
  border-radius:28px;
  padding:32px 60px 34px;   /* Figma：左右60pxで白箱を内側に */
  text-align:center;
}
.contact__lead{
  color:#fff;
  font-weight:700;
  font-size:24px;
  line-height:1.5;
  margin-bottom:28px;
}
.contact__box{
  background:#fff;
  border-radius:12px;
  padding:30px 20px;
}
.contact__office{ font-weight:700; font-size:18px; margin-bottom:10px; }
.contact__tel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--brown);
  font-weight:700;
  font-size:40px;
  letter-spacing:.04em;
}
.contact__tel a{ text-decoration:none; }
.contact__tel-ico{ display:inline-flex; }
.contact__mail{ font-weight:700; font-size:20px; margin-top:6px; }
.contact__mail a{ color:inherit; text-decoration:none; }
.contact__note{ font-size:13px; margin-top:18px; line-height:1.8; }

/* ============================================================
   Figmaで「M PLUS Rounded 1c（Bold）」が使われている箇所に適用
   （STEPタイトル／小見出し／アコーディオン見出し・FAQ質問／電話番号）
   ============================================================ */
.step-text h4,
.step-text .lead-sub,
.accordion__head,
.contact__tel{
  font-family:"M PLUS Rounded 1c",var(--font);
}

/* ============================================================
   レスポンシブ（SP：768px 以下）
   ============================================================ */
@media (max-width:768px){

  /* 長文の日本語が折り返されずはみ出すのを防止 */
  .period-row dd,.period-lead,.note,.terms p,.terms-period dd,
  .step-text p,.accordion__head,.faq .accordion__inner p,.contact__note{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  body{ background-size:750px; }

  /* 応募期間 */
  .period{ border-width:14px; padding:26px 16px 34px; background-size:250px; }
  .period-box{ border-radius:14px; padding:18px 18px; }
  .period-row{ flex-direction:column; gap:2px; padding:8px 0; }
  .period-row dt{ width:auto; font-size:14px; }
  .period-row dd{ font-size:16px; }
  .period-row .dash{ display:none; }
  .period-lead{ font-size:16px; margin-top:20px; }

  /* ボタン */
  .btn-entry{
    min-width:0; width:100%; max-width:340px;
    font-size:18px; padding:18px 24px;
  }
  .btn-entry::after{  right:18px; width:28px; height:28px; }
  .btn-entry::before{ right:28px; border-width:5px 0 5px 8px; }

  /* メニュー */
  .menu{ padding:24px 12px; }
  .menu__list{ gap:14px 12px; }
  .menu__list img{ width:44vw; max-width:220px; }

  /* セクション・カード */
  .sec{ padding:16px 14px 40px; }
  .card{ border-width:4px; border-radius:22px; padding:40px 18px; }
  .card + .card{ margin-top:24px; }
  .ribbon{ margin-bottom:-58px; }
  .ribbon img{ width:190px; }
  .ribbon + .card{ padding-top:84px; }
  .ribbon + .prize-list > .prize-card:first-child{ padding-top:78px; }

  /* 賞品 */
  .prize-list{ gap:26px; }
  .prize-card{ border-width:4px; border-radius:22px; padding:34px 18px 26px; }
  .prize-nabe{ width:104px; top:-40px; left:14px; }
  .prize-row{ flex-direction:column-reverse; gap:20px; align-items:center; }
  .prize-info{ width:100%; text-align:center; }
  .course-tag{ padding:8px 18px; margin-bottom:14px; }
  .course-tag__price{ font-size:22px; }
  .course-tag__label{ font-size:19px; }
  .prize-name{ font-size:19px; }
  .prize-name b{ font-size:26px; }
  .prize-size{ font-size:13px; margin-top:10px; }
  .prize-img{ width:100%; }

  /* 対象商品ヘッダー */
  /* 対象商品ヘッダー：SPは添付レイアウトに合わせてキャラを縦にジグザグ配置（重ならないよう配置）
     サイズ・位置・高さをすべて vw で統一し、どの画面幅でも同じ間隔になるようにする */
  /* SPはキャラをフレーム（リボン／カード）に被せない配置にする（PCは従来どおり被せる） */
  .target-header{ min-height:min(80vw,380px); padding-top:6px; margin-bottom:-55px; align-items:flex-end; }
  .target-header__ribbon img{ width:180px; }
  .target-header + .card{ padding-top:87px; }
  /* プリン（pom）・スコーン（mouse）はタイトルに被らないよう、ヘッダー上部にまとめて配置 */
  .thchar--pom{   width:40vw; max-width:200px; left:6%;    right:auto; top:0;    bottom:auto; }
  .thchar--mouse{ width:28vw; max-width:140px; left:auto;  right:6%;   top:5vw; bottom:auto; }
  /* 1つ目のカード下部：マフィン（dog）・ベーグル（cat）はカード枠に被せず、
     上下カードの間に配置。フッターを flex にして各キャラを縦中央寄せすることで、
     キャラの高さに関係なく上下の余白が常にほぼ均等になる */
  .target-footer{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 6%; min-height:min(28vw,150px); margin-top:0;
  }
  .target-footer .thchar{ position:static; }   /* flex の縦中央寄せに乗せる */
  .thchar--dog{   width:27vw; max-width:132px; }
  .thchar--cat{   width:31vw; max-width:150px; }
  .series-title{ font-size:16px; padding-bottom:14px; }
  /* SP幅デザイン実測：basic 86% / 3商品カード 64%（お肉は2商品のため個数比で43%） */
  .product-grid--basic img{ width:86%; }
  .product-grid--meat  img{ width:43%; }
  .product-grid--otona img{ width:64%; }

  /* 撮影時の注意事項 */
  .notice__row,.notice__row2{ flex-direction:column; gap:18px; }
  .notice__list{ line-height:1.9; text-align: left;}   /* SPは縦積みで画像と並ばないため通常の行間に戻す */
  .notice__redbox{ flex-basis:auto; max-width:320px; margin:0 auto; }
  .notice__fig--bad img{ max-width:100%; }

  /* STEP */
  .step-head{ font-size:22px; }
  .step-body{ flex-direction:column; gap:20px; padding:24px 18px; text-align:center; background:#fff; }  /* SPはグレー背景を消して白に */
  .step-main{ flex-direction:column; gap:20px; align-items:center; }
  .step-body--notice .accordion__head{ padding:14px 30px; }
  .step-ill{ width:140px; }
  .step-text{ text-align:left; }
  .step-text h4{ font-size:19px; text-align: center;}
  .step-lead{ font-size:20px; }

  /* アコーディオン */
  .accordion__head{ font-size:15px; padding:16px 18px; }
  .accordion__inner{ padding:16px 14px 4px; }

  /* お問い合わせ */
  .contact__inner{ border-radius:20px; padding:24px 18px 26px; }
  .contact__lead{ font-size:17px; margin-bottom:20px; }
  .contact__box{ padding:24px 16px; }
  .contact__tel{ font-size:28px; }
  .contact__tel-ico svg{ width:26px; height:26px; }
  .contact__mail{ font-size:16px; }
}