/* --- 初期設定 & 共通スタイル（Ultra Lint-Clean） --- */
html { -webkit-text-size-adjust: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #eee;
  line-height: 1.8;
  background-color: #111;
  overflow-x: hidden;
  font-size: 16px;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
.container { max-width: 900px; margin: 0 auto; padding: 0 1rem; }

/* --- ヘッダー --- */
.site-header {
  background-color: #222;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.top-bar {
  background-color: #000;
  color: #eee;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 一部のリンタが gap を警告する場合があるので column/row も併記 */
  gap: 0.8rem;
  column-gap: 0.8rem;
  row-gap: 0.6rem;

  flex-wrap: wrap;
  padding: 1rem 1rem;
}
.logo { height: 40px; flex-shrink: 0; }
.header-cta {
  background-color: #c0392b;
  color: #fff;
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  transition: background-color 0.3s;
  white-space: nowrap;
}
.header-cta:hover { background-color: #e74c3c; }

/* --- ヒーロー（保守的：100vh） --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
.hero-video {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: none;
  z-index: -1;
}
.hero-text h1 {
  font-size: 4rem; /* ← h1は今のまま */
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero-text .pre-heading {
  position: absolute;
  top: 2rem; left: 2rem;
  font-size: 1.6rem;   /* PC表示は少し小さめ */
  color: #FFC300;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0.3rem 1rem;
  border-radius: 8px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  text-align: left;
  margin-bottom: 0;
}
/* --- 真ん中のテキスト（pre-heading以外のp） --- */
.hero-text p:not(.pre-heading) {
  font-size: 2.2rem;  /* ← PCでちょい小さめに修正 */
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

/* --- USP（強み） --- */
.usp-section {
  padding: 4rem 1rem;
  text-align: center;
  border-top: 2px solid #333;
}
.usp-text {
  font-size: 1.9rem;          /* ← 2.1remから少し小さく */
  line-height: 1.6;
  font-weight: bold;
  display: inline-block;      /* ← 横幅制御 */
  max-width: 95%;             /* ← 自然に改行できる余裕を持たせる */
  margin: 0 auto;
  text-align: center;
  word-break: keep-all;       /* ← 日本語を変なところで切らない */
}
.usp-arrow {
  font-size: 3rem;
  color: #e6b422;
  margin: 1.5rem 0;
}
.usp-note {
  font-size: 0.9rem;
  margin-top: 1rem;
  opacity: 0.8;
}

/* --- プロモーション --- */
.promo-text { padding: 4rem 0; text-align: center; }
.promo-text p { font-size: 2.8rem; font-weight: bold; line-height: 1.5; }
.promo-text .promo-note { font-size: 1rem; font-weight: normal; margin-top: 1rem; opacity: 0.8; }

/* =========================
   食べ感セクション（tabekan.png専用）
   ========================= */
.image-section img[src*="tabekan.png"] {
  display: block;
  margin: 2rem auto;       /* 上下に余白＋中央寄せ */
  max-width: 860px;        /* PCでの最大横幅を制限 */
  width: 95%;              /* 画面幅に対して自動調整 */
  height: auto;            /* アスペクト比を維持 */
  border-radius: 12px;     /* 角丸でスマート感 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* ほんのり影 */
}

/* =========================
   本物かつお＆共通画像（warayaki01.jpg 専用＋共通ベース）
   ========================= */
.image-section img{
  display: block;
  max-width: 95%;
  margin: 0.8rem auto 0;  /* ベースの上余白 */
  border-radius: 8px;
  height: auto;
}
.image-section img[src*="warayaki01.jpg"]{
  display: block;
  margin: 1.6rem auto 1.2rem;  /* 上下に少し余白＋中央寄せ */
  max-width: 920px;            /* PCでの最大横幅を制限 */
  width: 95%;                  /* 画面に応じて縮む */
  height: auto;                /* アスペクト比維持 */
  border-radius: 12px;         /* 角丸でスマートに */
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* --- キャッチコピー --- */
.catchphrase-section { padding: 1.5rem 1rem 4rem; text-align: center; }
.catchphrase-section p { color: #e6b422; font-size: 1.5rem; font-weight: bold; }
.catchphrase-section h2 { color: #eee; font-size: 2.25rem; margin-top: 1rem; }

/* --- フィーチャー --- */
.feature-section { padding: 3rem 1rem; }
.feature-section h2 { color: #e6b422; text-align: center; font-size: 2.2rem; margin-bottom: 3rem; }
.feature-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  column-gap: 3rem;
  row-gap: 3rem;
  flex-wrap: wrap;
}
.text-block { flex: 1 1 320px; min-width: 0; }
.image-block { flex: 1 1 320px; min-width: 0; }
.feature-section.reverse .feature-content { flex-direction: row-reverse; }

/* --- 食べ方提案（見出し・メイン画像） --- */
.how-to-eat { padding: 5rem 1rem; text-align: center; }
.how-to-eat h2 { color: #e6b422; font-size: 2.5rem; }
.how-to-eat .sub-heading { color: #eee; font-size: 2rem; margin-bottom: 2.5rem; }
.how-to-eat .main-image {
  margin: 0 auto; max-width: 900px; width: 100%;
  border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* --- 食べ方ギャラリー --- */
.eat-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  text-align: center;
}
.grid-item { overflow: hidden; }
.item-text {
  width: 100%; color: #eee; font-weight: bold;
  font-size: 1.1rem; margin-bottom: 1rem;
}
.grid-item img {
  width: 100%; height: auto; transition: transform 0.3s ease; border-radius: 8px;
}
.grid-item:hover img { transform: scale(1.05); }

/* --- 代表紹介動画（セクション見出し） --- */
.youtube-section { padding: 5rem 1rem; text-align: center; }
.youtube-section h2 { color: #e6b422; font-size: 2.5rem; }
.youtube-section .sub-heading { color: #eee; font-size: 2.5rem; margin-bottom: 2.5rem; }

/* --- 商品セクション（CTA） --- */
.cta-section { padding: 5rem 1rem; text-align: center; }
.cta-section h2, .cta-section .sub-heading { color: #e6b422; font-size: 2.5rem; }
.cta-section .sub-heading { margin-bottom: 3rem; }

.price-gallery {
  display: flex;
  justify-content: center;
  gap: 2rem;
  column-gap: 2rem;
  row-gap: 2rem;
  flex-wrap: wrap;
}
.product-item { flex: 1 1 320px; max-width: 420px; }

.product-item img {
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: block;
  width: 100%;
}
.product-item:hover img { transform: scale(1.05); }

.product-info { margin-top: 1.5rem; text-align: center; }

.shipping-tag {
  display: inline-block;
  font-size: 0.9rem;
  color: #3498db;
  border: 1px solid #3498db;
  background-color: rgba(52,152,219,0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

/* 商品名（ベース） */
.product-name {
  font-size: 1.3rem;
  color: #eee;
  margin: 0.8rem 0;
  font-weight: 700;
}

/* スペック＆注記 */
.product-spec {
  font-size: 1.1rem;
  color: #eee;
  font-weight: bold;
  line-height: 1.5;
}
.product-note {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 特別価格 */
.special-price {
  margin-top: 0.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #e6b422;
}

/* 価格（商品名と同じサイズ・白文字） */
.product-price {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}

/* お申し込みボタン（赤バナー） */
.cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 1.4rem;
  border-radius: 6px;
  background-color: #c0392b;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: background-color .25s ease, transform .05s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.cta-btn:hover { background-color: #e74c3c; }
.cta-btn:active { transform: translateY(1px); }

/* --- レスポンシブ動画コンテナ --- */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
}
.video-container iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* =========================
   食べ方画像セクション（PC用デザイン調整）
   ========================= */
.image-section img[src*="tabekata.jpg"] {
  display: block;
  max-width: 900px;   /* PC時の最大幅を制限 */
  width: 95%;         /* 横幅は95%まで広げる */
  margin: 1.5rem auto 0;  /* 上に少し余白、中央寄せ */
  border-radius: 10px;    /* 角丸で柔らかい印象 */
  box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* 影で立体感 */
  height: auto;
}

/* --- フッター --- */
.site-footer {
  text-align: center;
  padding: 3rem 0;
  background-color: #222;
  color: #888;
  font-size: 0.9rem;
}
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.footer-links a {
  color: #ccc; text-decoration: none; font-size: 0.9rem; transition: color 0.3s;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* =============================
   レスポンシブ（保守版 / ここから下に集約）
   ============================= */

/* 992px以下（タブレット） */
@media (max-width: 992px) {
  .header-container { justify-content: space-between; }
  .hero-text h1 { line-height: 1.2; }
  .hero-text p:not(.pre-heading) { line-height: 1.6; }
  /* USP：タブレットでも少しだけ締める */
  .usp-text { font-size: 1.3rem; line-height: 1.5; }
  .usp-text.strong { font-size: 1.5rem; }
}

/* 768px以下（スマホ） */
@media (max-width: 768px) {
  /* 上段のコラボ文（既に中央だが明示） */
  .top-bar {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    text-align: center;
  }

  /* ▼ ヘッダーは縦積み（ロゴ → CTA）、どちらも中央 */
  .header-container{
    position: relative;
    display: flex;
    flex-direction: column;   /* ← 縦並び */
    align-items: center;      /* ← 中央寄せ */
    justify-content: center;
    gap: 0.6rem;              /* ロゴとボタンの間隔 */
    padding: 0.6rem 0.8rem;
  }

  .logo{
    height: 28px;
    display: block;
    margin: 0 auto;           /* 念のため中央 */
  }

  .header-cta{
    position: static;         /* ← 絶対配置をやめる */
    transform: none;
    right: auto; top: auto;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin: 0.2rem auto 0;    /* 中央配置＆少しだけ上の余白 */
  }

/* --- ヒーロー動画（スマホ～PC共通） --- */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* 切れないように contain に変更 */
  background-color: #000;   /* 余白は黒で自然に */
  z-index: -1;
}

  /* ヒーロー内テキスト */
  .hero-text { 
    position: relative; 
    z-index: 1; 
    text-align: center; 
    padding: 1.2rem 1rem; 
  }
  .hero-text .pre-heading {
    position: static; 
    font-size: 1.2rem; 
    color: #e6b422;
    background-color: transparent; 
    padding: 0; 
    text-align: center;
    margin-bottom: 1rem; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  }
  .hero-text h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin: 0.2rem 0 0.6rem;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero-text p:not(.pre-heading) {
    font-size: 1.1rem;
    line-height: 1.6; 
    margin: 0 auto; 
    max-width: 30em;
  }
}

/* ======== ★ USP（強み）スマホ最適化（1文字ぶん＝1emの余白） ★ ======== */
@media (max-width: 768px){
  .usp-section{
    padding: 2rem 1rem 1em;   /* 下だけ“1文字分”の余白に統一 */
    text-align: center;       /* セクション全体をセンター寄せ */
  }
  .usp-section p{ margin: 0; text-align: center; }

  /* 通常USPテキスト（スマホ時は置き換え） */
  .usp-text{
    font-size: 0;
    line-height: 0;
    margin: 0 auto;
    max-width: 92vw;
    text-align: center;
    position: relative;
  }
  .usp-text::before{
    content: "選び抜いた本場土佐の戻り鰹を\A釣れたその日に藁焼きにして\A冷蔵のまま出荷！";
    display: block;
    white-space: pre-wrap;
    font-size: clamp(1.05rem, 4vw, 1.2rem); /* 強調USPと統一 */
    line-height: 1.6;
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    text-align: center;
  }

  .usp-text.strong{
    position: relative;
    font-size: 0;
    margin-bottom: 0.15rem;
    text-align: center;
  }
  .usp-text.strong::before{
    content: "翌日、あなたが食べたことが無い\A土佐の戻りかつお藁焼き（生）を\A味わうことができます！";
    display: block;
    white-space: pre-wrap;
    font-size: clamp(1.05rem, 4vw, 1.2rem); /* 強調USP基準に統一 */
    line-height: 1.6;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    letter-spacing: .02em;
    margin: 0 auto;
    max-width: 92vw;
    text-align: center;
  }

  .usp-arrow{
    font-size: 2rem;
    margin: 1rem 0;
    color: #e6b422;
    text-align: center;
  }

  .usp-note{
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0.25rem auto 0;
    text-align: center;
  }

  .usp-section + .image-section{ padding-top: 0 !important; margin-top: 0; }
}

/* 480px以下（小型iPhone）：同じく“1文字分”キープ */
@media (max-width: 480px){
  .usp-section{ padding: 1.8rem 1rem 1em; text-align: center; }

  /* 両方とも強調USPと同じサイズに */
  .usp-text::before,
  .usp-text.strong::before{
    font-size: clamp(1rem, 4.6vw, 1.1rem);
    line-height: 1.55;
    text-align: center;
  }

  .usp-arrow{
    font-size: 1.6rem;
    margin: 0.7rem 0;
    text-align: center;
  }

  .usp-note{
    margin: 0.2rem auto 0;
    line-height: 1.3;
    text-align: center;
  }

  .usp-section + .image-section{ padding-top: 0 !important; margin-top: 0; }
}

/* =========================
   プロモ（コラボ告知）行崩れ対策
   ========================= */
.promo-text p{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;
  margin: 0;
}
.promo-text .promo-note{ white-space: normal; }

@media (max-width: 992px){
  .promo-text{
    /* 下の余白を控えめに（旧: 3rem 0 2rem） */
    padding: 3rem 0 1.2rem;
  }
  .promo-text p{
    font-size: clamp(1.2rem, 2.2vw + 0.6rem, 1.8rem);
    line-height: 1.5;
    letter-spacing: .01em;
  }
  /* 注意書きも詰める */
  .promo-text .promo-note{
    font-size: 0.95rem;
    opacity: .85;
    margin-top: .5rem; /* 旧: .8rem */
  }
}

@media (max-width: 768px){
  .promo-text{
    /* さらに下をタイトに（旧: 2.2rem 0 1.4rem） */
    padding: 2rem 0 0.6rem;
  }
  .promo-text p{
    font-size: clamp(1.05rem, 4.2vw, 1.35rem);
    line-height: 1.55;
    letter-spacing: .01em;
    max-width: 95%;
    margin-inline: auto;
  }
  .promo-text .promo-note{
    font-size: 0.9rem;
    opacity: .85;
    margin-top: .35rem; /* 旧: .8rem */
  }
}

@media (max-width: 480px){
  .promo-text{
    /* 一番タイト（下だけさらに詰める） */
    padding: 1.6rem 0 0.45rem;
  }
  .promo-text p{
    font-size: clamp(1rem, 3.8vw, 1.2rem);
    line-height: 1.5;
  }
  .promo-text .promo-note{
    margin-top: .3rem;
  }
}

/* =========================
   本物かつおセクションの調整（スマホの更なる詰め）
   ========================= */
@media (max-width: 768px){
  /* 共通ベース（上余白）を効かせつつ、特定だけ更に詰める */
  .image-section img[src*="warayaki01.jpg"]{
    margin-top: 0.22rem !important; /* 旧: 0.3rem */
  }
  .promo-text + .image-section img[src*="warayaki01.jpg"]{
    margin-top: 0.16rem !important; /* 最もタイトな設定 */
  }
}

/* =========================
   レスポンシブ：キャッチコピー（スマホ）
   ========================= */
@media (max-width: 768px){
  .catchphrase-section{
    padding: 1rem 1rem 0.5rem;
  }

  /* ▼ 金色テキスト「土佐では、冷凍カツオは食べません！」 */
  .catchphrase-section p{
    display: block;
    text-align: center;
    margin: 0 auto .8rem;
    padding-inline: .5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.2rem, 5vw, 1.6rem); /* ★1段階大きく調整 */
    line-height: 1.4;
    letter-spacing: 0;
    color: #e6b422; /* 金色に統一 */
    white-space: normal;
  }
}

@media (max-width: 480px){
  .catchphrase-section{
    padding: .9rem 1rem .45rem;
  }
  .catchphrase-section p{
    font-size: clamp(1.05rem, 4.5vw, 1.35rem); /* ★小型スマホも少し大きく */
  }
}

/* =========================
   レスポンシブ：特徴セクション見出し（スマホ）
   ========================= */
@media (max-width: 768px){
  .feature-section h2{
    font-size: 0;
    text-align: center;
    white-space: pre-wrap;
    margin-bottom: 1rem;
  }

  .feature-section h2::before{
    display: block;
    font-weight: bold;
    color: #e6b422; /* 金色に統一 */
    line-height: 1.35;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem); /* YouTube h2 と同じ */
    text-align: center;
  }

  .feature-section.reverse h2::before{
    content: "新鮮なかつおだけを選抜します！";
  }
  .feature-section.reverse + .feature-section h2::before{
    content: "すべて「わら」で焼き上げます！";
  }
  .feature-section:not(.reverse) h2::before{
    content: "かつおの藁焼きは\A熟練の職人が焼き上げます！";
  }

  /* ===== ここから間隔調整 ===== */

  /* feature 全体のパディングをスマホでは軽めに */
  .feature-section{
    padding: 1rem 1rem 1.4rem; /* 3rem→1rem に圧縮 */
  }

  /* 直前がキャッチコピーのときはさらにギュッと */
  .catchphrase-section + .feature-section{
    margin-top: 0 !important;
    padding-top: 0.22rem;      /* USP→食べ感くらいの詰まり具合 */
  }

  /* feature 同士が並ぶときの間隔を小さめに統一 */
  .feature-section + .feature-section{
    margin-top: 0.6rem;
  }
}

@media (max-width: 480px){
  .feature-section{
    padding: .9rem 1rem 1.2rem;
  }

  .catchphrase-section + .feature-section{
    padding-top: .18rem;       /* 小型端末はさらにほんの少し詰める */
  }

  .feature-section h2::before{
    font-size: clamp(1.05rem, 5vw, 1.35rem); /* YouTube h2 と同じ（小型端末用） */
  }
}

/* =========================
   食べ方提案セクション（スマホ最適化）
   ========================= */
@media (max-width: 768px){
  /* ★ セクション間の余白を詰める（ここが効きます） */
  .how-to-eat{
    padding: 2rem 1rem 1rem;            /* 下だけ 1rem に縮小（既定: 5rem） */
  }

  /* ▼ 金色見出しを YouTube h2 と同じサイズに統一 */
  .how-to-eat h2{
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    text-align: center;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem); /* YouTube h2 と同じ */
    line-height: 1.35;
    margin-bottom: .8rem;
    letter-spacing: 0;
    color: #e6b422;
  }

  .how-to-eat .sub-heading{
    text-align: center;
    font-size: clamp(1.05rem, 3.8vw, 1.2rem);
    line-height: 1.4;
    margin-bottom: 1.1rem;             /* メイン画像との間を少し詰める */
    opacity: .95;
    font-weight: normal;
  }

  /* メイン画像の下マージンを控えめに */
  .how-to-eat .main-image{
    display:block;
    margin: 0 auto 0.9rem;             /* 1.6rem → 0.9rem */
    max-width: 900px;
    width: 100%;
  }

  /* ギャラリーのスキマを詰める */
  .how-to-eat .eat-gallery{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: .8rem;                 /* 横のスキマ */
    row-gap: .5rem;                    /* 縦のスキマ */
    margin-top: .6rem;                 /* ギャラリー上の余白も少しだけ */
    text-align: center;
  }

  .how-to-eat .eat-gallery .grid-item img{
    display:block;
    width:100%;
    height:auto;
  }

  .how-to-eat .eat-gallery .item-text p{
    text-align: center;
    font-size: clamp(1.05rem, 3.8vw, 1.2rem);
    line-height: 1.35;
    margin-top: .35rem;                /* 画像とテキストの間も少し詰める */
    opacity: .95;
    font-weight: normal;
  }
}

/* 480px以下：さらにコンパクトに */
@media (max-width: 480px){
  /* ★ さらに少しだけ詰める */
  .how-to-eat{
    padding: 1.6rem 1rem .8rem;        /* 下を .8rem まで圧縮 */
  }

  /* ▼ 金色見出しを YouTube h2 と同じサイズに統一（小型端末） */
  .how-to-eat h2{
    font-size: clamp(1.05rem, 5vw, 1.35rem); /* YouTube h2 と同じ */
    line-height: 1.35;
    color: #e6b422;
  }

  .how-to-eat .sub-heading,
  .how-to-eat .eat-gallery .item-text p { font-size: clamp(0.95rem, 3.6vw, 1.1rem); }

  .how-to-eat .main-image{ margin-bottom: .75rem; }  /* さらに少し詰める */

  .how-to-eat .eat-gallery{
    column-gap: .6rem; 
    row-gap: .4rem;                     /* 極小時の縦スキマをさらに詰める */
  }

  .how-to-eat .eat-gallery .item-text p{
    margin-top: .3rem;
  }
}

/* =========================
   YouTubeセクション（スマホ最適化・はみ出し防止）
   ========================= */
@media (max-width: 768px){
  .youtube-section{
    /* 上も下もバランスよく */
    padding: 1.2rem 1rem 1.8rem;        /* 下を 1rem → 1.8rem に少し広げた */
  }

  .youtube-section h2{
    display: block;
    text-align: center;
    margin: 0 auto .8rem;
    padding-inline: .5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: 0;
    color: #e6b422;
    white-space: normal;
  }

  .youtube-section .sub-heading{
    text-align: center;
    margin: 0 auto 1.3rem;              /* 1.1rem → 1.3rem に少し戻した */
    padding-inline: .5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1rem, 3.5vw, 1.15rem);
    line-height: 1.4;
    opacity: .95;
  }

  /* ▶ 直下のCTAとのスキマ：少し余裕を戻す */
  .youtube-section + .cta-section{
    padding-top: 1.6rem !important;     /* 1rem → 1.6rem に調整 */
    margin-top: 0 !important;
  }
}
@media (max-width: 480px){
  .youtube-section{
    padding: 1rem 1rem 1.6rem;          /* 下を .8rem → 1.6rem に */
  }
  .youtube-section h2{ font-size: clamp(1.05rem, 5vw, 1.35rem); }
  .youtube-section .sub-heading{
    font-size: clamp(0.9rem, 3.4vw, 1.05rem);
    margin-bottom: 1.2rem;              /* 1rem → 1.2rem に微調整 */
  }
  .youtube-section + .cta-section{
    padding-top: 1.4rem !important;     /* .8rem → 1.4rem に調整 */
  }
}

/* =========================
   CTAセクション（スマホ最適化）
   ========================= */
@media (max-width: 768px){
  .cta-section h2,
  .cta-section .sub-heading {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    text-align: center;
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    line-height: 1.2;
    margin-bottom: .8rem;
    letter-spacing: .01em;
    color: #e6b422;
    font-weight: bold;
  }

  .cta-section .product-name {
    font-size: clamp(1.1rem, 4.2vw, 1.25rem);
    line-height: 1.4;
  }

  .cta-section{
    padding-bottom: 1.2rem; /* ← 少し増やす */
  }

  .cta-section .product-item { margin-bottom: 3.5rem; }
  .cta-section .product-item:last-child{
    margin-bottom: 1.4rem;  /* ← 最後の商品下に1行分の余裕 */
  }

  .cta-section .special-price {
    text-align: center;
    font-size: clamp(1.2rem, 4.6vw, 1.35rem);
    white-space: nowrap;
    display: block;
    margin: .6rem auto 0;
    font-weight: bold;
    color: #e6b422;
  }

  /* ▼ CTAの次の画像セクションとの間隔を1行分空ける */
  #cta + .image-section{
    margin-top: 0;
    padding-top: 1.2rem;  /* ← ここで1行分確保 */
  }
  #cta + .image-section img{
    display: block;
    margin: .3rem auto 0;
    max-width: 95%;
    height: auto;
  }
}
@media (max-width: 480px){
  .cta-section h2,
  .cta-section .sub-heading {
    font-size: clamp(1.3rem, 6.2vw, 1.6rem);
    font-weight: bold;
  }
  .cta-section .product-name { font-size: clamp(1rem, 4vw, 1.15rem); }

  .cta-section{
    padding-bottom: 1rem; /* 極小時は少しだけ控えめに */
  }
  .cta-section .product-item:last-child{
    margin-bottom: 1.2rem;
  }
  .cta-section .special-price {
    font-size: clamp(1.1rem, 4.4vw, 1.25rem);
  }
  #cta + .image-section{ padding-top: 1rem; }
  #cta + .image-section img{ margin-top: .25rem; }
}

/* ===== ヒーロー動画：スマホで上下の黒帯を出さず、左右は絶対切らない ===== */
@media (max-width: 768px){
  .hero{
    /* 100vhをやめて、動画の比率に合わせた箱にする */
    min-height: auto;
    height: auto;
    aspect-ratio: 16 / 9;   /* 横:縦 = 16:9（フルで見せる） */
    position: relative;
    overflow: hidden;
  }
  .hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;    /* 左右はみ出しナシ・トリミングなし */
    background-color: #000; /* 余白が出ても自然に見えるように（任意） */
    z-index: -1;            /* 既存のテキストを上に */
  }
}

/* ▼ 金色テキストを YouTube見出しと同じ見え方に統一 */
@media (max-width: 768px){
  .catchphrase-section p{
    display: block;
    text-align: center;
    margin: 0 auto .8rem;
    padding-inline: .5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem); /* ← YouTube h2 と同じ */
    line-height: 1.35;
    letter-spacing: 0;
    color: #e6b422;
    white-space: normal;
  }
}
@media (max-width: 480px){
  .catchphrase-section p{
    font-size: clamp(1.05rem, 5vw, 1.35rem); /* ← YouTube h2 と同じ */
  }
}