@charset "UTF-8";

/* =========================================
   共通・リセットCSS
========================================= */
:root {
  --primary: #FFED00; /* デザインに合わせた鮮やかなイエロー */
  --text: #352f2d;
  --bg-gray: #F5F5F5;
  --white: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; 
  color: var(--text); 
  background-color: var(--bg-gray); 
  line-height: 1.8; 
  letter-spacing: 0.05em; 
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a img:hover { opacity: 0.8; transition: opacity 0.3s ease; }

/* =========================================
   ヘッダー・告知バー
========================================= */
.announcement-bar { 
  background-color: var(--primary); 
  text-align: center; 
  padding: 8px; 
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1.3;          /* 💡 2行になったときの行間 */
}

/* 💡 「公式ストアなら」だけ小さく */
.announcement-small {
  font-size: 9px;           /* お好みで 10〜12px */
}

/* ヘッダー全体：追従設定をし、ロゴエリアの高さ分だけ上にズラして固定する */
/* 💡 ヘッダー全体ラッパー（黄色帯＋ヘッダー） */
.site-header-wrap {
  position: fixed;     /* 💡 sticky → fixed に変更 */
  top: 0;
  left: 0;             /* 💡 追加 */
  width: 100%;         /* 💡 追加 */
  z-index: 100;
  background-color: var(--white);
  transition: transform 0.2s ease;   /* 💡 0.3s → 0.2s に短縮 */
}

.site-header-wrap.is-hidden {
  transform: translateY(-100%);
}

.site-header-wrap.is-compact .announcement-bar {
  display: none;
}

/* 💡 ヘッダーが fixed になった分、body 全体を下にずらす */
body {
  padding-top: 156px;   /* PC版のヘッダー総高さ（黄色帯 + ロゴ + メニュー段の合計）*/
}

@media (max-width: 768px) {
  body {
    padding-top: 130px;  /* スマホ版のヘッダー総高さ */
  }
}

/* ヘッダー本体（sticky関連は削除） */
.header { 
  background-color: var(--white); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

/* --- 上段（ロゴエリア） --- */
.header-top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0px 40px 0px; 
  background-color: var(--white);
}

/* PC版ロゴサイズの制御 */
.header-logo img { 
  height: 100px; 
  width: auto; 
}

/* ハンバーガーボタン：ブラウザ標準スタイルを完全にリセット */
/* ハンバーガーボタン：PC版では非表示 */
.hamburger { 
  display: none; 
}

/* --- 下段（メニュー＆ボタンエリア） --- */
.header-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  /* 💡 下の余白(15px)をなくし、左右の余白だけにする */
  padding: 0 40px; 
  background-color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

.header-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 550px; 
  /* 💡 高さを固定して、ボタンやメニューを縦の中央に揃える */
  height: 48px; 
}

/* 💡 PC版：ナビを左、ONLINE SHOPを右に */
.header-nav { order: 1; }
.header-action { order: 2; }

/* --- ONLINE SHOPボタンの調整 --- */
.btn-online-shop { 
  background: none; 
  border: none; 
  cursor: pointer; 
  padding: 0;
  /* 💡 ボタン自体の高さを親枠に合わせつつ、中身は中央に置く */
  display: flex;
  align-items: center;
  height: 100%; 
}

.btn-online-shop img { 
  /* 💡 親枠が広がっても画像自体は絶対に大きくならないように固定 */
  height: 30px !important; 
  width: auto !important; 
  transition: opacity 0.3s; 
  object-fit: contain; 
}

.btn-online-shop:hover img { 
  opacity: 0.8; 
}

/* スマホ版（SP）のサイズ固定も念のため強化しておきます */
@media (max-width: 768px) {
  .btn-online-shop img { 
    height: 28px !important; 
  }
}
.header-nav { 
  display: flex; 
  /* 💡 親枠の高さ（60px）いっぱいに広げる */
  height: 100%; 
  gap: 30px; 
  font-size: 14px; 
  font-weight: bold; 
  letter-spacing: 0.1em; 
}

/* メニューの下線（黄色）の設定 */
.header-nav a {
  /* 💡 aタグ自体をFlexboxにして、文字を縦の中央に配置 */
  display: flex;
  align-items: center;
  /* 💡 高さを100%にすることで、ボーダーがヘッダーの一番下にピタッとつきます */
  height: 100%; 
  padding-bottom: 0; /* 元の余白は不要なので0に */
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s;
  box-sizing: border-box; /* 線の太さを高さの中に含める */
}
.header-nav a:hover,
.header-nav a.is-active {
  border-bottom: 3px solid var(--primary); 
}

/* --- スマホ（SP）時のレスポンシブ調整 --- */
@media (max-width: 768px) {
  .announcement-bar { 
    padding: 8px; 
    font-size: 10px;
  }
  
  .header { 
    flex-direction: column;          /* 💡 row → column に変更（PC版と同じ縦並び） */
    align-items: center;
    padding: 0;                      /* 💡 padding削除 */
  }
  
/* ロゴエリア（上段） */
  .header-top {
    width: 100%;
    padding: 0px 10px 0;            /* 💡 上10px、左右10px、下0px に変更 */
    background-color: var(--white);
    justify-content: center;
  }
  
  /* 💡 黄色帯：下スクロール時に隠す */
.announcement-bar {
  background-color: var(--primary); 
  text-align: center; 
  padding: 8px; 
  font-size: 9px; 
  font-weight: bold; 
  line-height: 1.3;
  
  /* 💡 追加 */
  position: sticky;
  top: 0;
  z-index: 99;
  transition: transform 0.3s ease;
}

.announcement-bar.is-hidden {
  transform: translateY(-100%);
}
  /* スマホ版ロゴサイズの制御 */
  .header-logo img { height: 60px; }   /* 💡 32px → 60px に変更（お好みで調整） */
  
  /* 💡 ハンバーガーボタン（3本線） */
  .hamburger { 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent; 
    border: none;            
    outline: none;           
    padding: 0;              
    appearance: none;        
    -webkit-appearance: none;
    cursor: pointer;
    width: 22px;
    height: 18px;
    position: relative;
    z-index: 300;
  }

  /* 💡 3本の線 */
  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text);
    transition: all 0.3s;
  }
  
  /* メニュー＆ボタンエリア（下段） */
  .header-bottom { 
    width: 100%;                     /* 💡 auto → 100% */
    padding: 0 20px;                 /* 💡 左右に余白 */
    background-color: var(--white);  /* 💡 背景白に */
    position: static; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);  /* 💡 影を復活 */
  }

  .header-nav { display: none; }
  .btn-online-shop img { height: 24px; }   /* 💡 20 → 24に少し大きく（お好みで） */

    /* 💡 追加：SP版だけハンバーガーとONLINE SHOPの左右を入れ替え */
/* 💡 SP版：ハンバーガーを左、ONLINE SHOPを右に */
  .hamburger { order: 1; }            /* ハンバーガーを左へ */
  .header-action { order: 2; }        /* ONLINE SHOPボタンを右へ */
}


/* =========================================
   フッター
========================================= */
.footer { 
  background-color: var(--primary); 
  padding: 60px 20px 50px; 
  /* ロゴが飛び出す分の空間を上に確保する */
  margin-top: 150px; 
}
.footer-inner { 
  max-width: 800px; /* 全体の幅を広げてゆったり見せる */
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between;
  align-items: flex-start; /* 上揃えにする */
  flex-wrap: wrap; 
  gap: 40px; 
}

/* --- 左側：ロゴ＆LINEエリア --- */
.footer-logo-area { 
  flex: 0 0 auto;        /* 💡 flex: 1 → flex: 0 0 auto に変更（縮ませない） */
  max-width: 600px; 
}

/* 💡ここを修正：PC版のロゴ画像 */
.footer-logo-area > img { 
  width: 380px;          /* 💡 100% → 380px に変更（固定サイズ） */
  max-width: 380px;
  height: auto;
  margin-top: -120px; 
  margin-bottom: 25px;
  display: block;
}

.line-icon { margin-top: 20px; }
/* 💡LINEアイコンの指定 */
.line-icon img { 
  width: 65px !important; 
  height: 50px !important; 
  object-fit: contain; /* 変形防止のおまじない */
  border-radius: 0 !important; /* 💡これを追記して強制的に丸みを解除 */
}

.line-icon { margin-top: 20px; }
.line-icon img { width: 50px; height: 50px; border-radius: 50%; }

/* --- 右側：リンクエリア --- */
.footer-links { 
  flex: 0 0 auto;       /* 💡 flex: 1 → flex: 0 0 auto に変更（伸びないようにする）*/
  min-width: 300px; 
  max-width: 360px;     /* 💡 480px → 360px に縮小（お好みで320〜400px）*/
  padding-top: 15px;
}
.footer-links h3 { font-size: 15px; margin-bottom: 20px; font-weight: bold; }
.shop-links-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12px; 
}

.shop-link-item { 
  background-color: var(--white); 
  padding: 12px 16px;        /* 💡 14px 20px → 12px 16px に縮小 */
  font-size: 13px; 
  font-weight: bold; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-radius: 4px; 
  transition: background 0.3s; 
  position: relative;        /* 💡 追加：バッジを絶対配置するため */
}
.shop-link-item:hover { background-color: #f0f0f0; }
.shop-link-item::after { content: '↗'; font-size: 12px; color: #999; }

/* 💡 公式ストアだけ2列分の幅を取る */
.shop-link-item--featured {
  grid-column: 1 / -1;       /* グリッドの左端〜右端まで全幅 */
  padding-top: 36px;          /* バッジの高さ分だけ上に余白を確保 */
}

/* 💡 黒い「ずっとおトク便で〜」バッジ */
.shop-link-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #352f2d;  /* 黒っぽい色（--text と同じ）*/
  color: var(--white);
  font-size: 10px;
  font-weight: bold;
  padding: 3px 0 3px 15px;   /* 上3px、右0、下3px、左15px */
  border-radius: 4px 4px 0 0; /* 上の角だけ丸める */
  letter-spacing: 0.05em;
  text-align: left;
}

/* --- 最下部：コピーライト等 --- */
.footer-bottom { 
  width: 100%; /* 💡 これを追加して横幅いっぱいに広げます */
  max-width: 800px; 
  margin: 60px auto 0; 
  font-size: 11px; 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; /* 💡 念のため中身を強制的に左寄せにします */
  gap: 20px; 
}

.footer-bottom-links { 
  display: flex; 
  gap: 24px; 
  font-weight: bold; 
  font-size: 13px; 
}

/* --- スマホ（SP）時のレスポンシブ調整 --- */
@media (max-width: 840px) {
  .footer { 
    padding: 60px 20px 40px; 
    margin-top: 100px; 
  }

  .footer-inner { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 💡 center → flex-start に変更 */
    gap: 0;
    max-width: 300px;          /* 💡 追加：「ご購入はこちらから」の幅に合わせる */
    margin: 0 auto;            /* 💡 追加：枠自体は中央寄せ */
    width: 100%;               /* 💡 追加 */
  }

  .footer-logo-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 💡 center → flex-start に変更 */
    width: 100%;
    max-width: 100%;
  }

  .footer-logo-area > img { 
    width: 280px;
    margin-top: -104px;
    margin-bottom: 30px;
    margin-left: 0;            /* 💡 追加：左端に揃える */
  }

  /* ご購入はこちらから（リンク集） */
  .footer-links { 
    width: 100%;
    order: 1;         /* 1番目に表示（ロゴのすぐ下） */
    margin-bottom: 40px;
    padding-top: 0;
  }

  .footer-links h3 {
    text-align: left; /* 1枚目の画像に合わせて左寄せ */
    font-size: 16px;
    margin-bottom: 15px;
  }

  .shop-links-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
  }

  /* LINEアイコン */
  .line-icon {
    order: 2;         /* 2番目に表示（リンク集の下） */
    margin-top: 0;
    margin-bottom: 40px;
    align-self: flex-start; /* 1枚目の画像に合わせて左寄せ */
  }

  .line-icon img {
    width: 50px !important;
    height: 50px !important;
  }

  /* 最下部（会社概要・コピーライト） */
  .footer-bottom {
    order: 3;
    margin: 30px auto 0;       /* 💡 上下マージン + 左右auto で中央寄せ */
    max-width: 300px;          /* 💡 .footer-inner と同じ幅に */
    width: 100%;               /* 💡 親いっぱい */
    align-items: flex-start;
  }

  .footer-bottom-links {
    gap: 20px;
    margin-bottom: 15px;
  }
}

/* =========================================
   モーダル (ONLINE SHOPリスト)
========================================= */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; }
.modal.is-open { display: flex; opacity: 1; }
.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content { background: var(--white); padding: 50px 40px; border-radius: 16px; position: relative; z-index: 1001; width: 90%; max-width: 400px; text-align: center; }
.modal-title { font-size: 24px; font-weight: bold; letter-spacing: 2px; }
.modal-sub { font-size: 13px; color: #666; margin-bottom: 20px; }
.modal-links { display: flex; flex-direction: column; gap: 15px; }
.modal-link-btn { 
  display: block; 
  border: 1px solid #ccc; 
  padding: 10px;                /* 💡 15px → 10px に変更（全ボタンの縦幅を小さく） */
  border-radius: 10px;          /* 💡 角丸を強めて添付画像のような楕円形に */
  font-weight: bold; 
  transition: background 0.3s; 
  font-size: 15px;
}
.modal-link-btn:hover { background: var(--bg-gray); }

/* 💡 公式サイトボタンを特別仕様にする */
.modal-link-btn--featured {
  position: relative;
  padding-top: 30px;             /* 💡 バッジ高さ分の余白を上に確保 */
}

/* 💡 黄色いアテンションバッジ */
.modal-link-badge {
  position: absolute;
  top: 0;                        /* ボタンの上辺にぴったり配置 */
  left: 0;                       /* 💡 左端ぴったり */
  right: 0;                      /* 💡 右端ぴったり（左右いっぱいに広がる） */
  background-color: #ffe700;
  color: var(--text);
  font-size: 9px;
  font-weight: bold;
  padding: 4px 0;                /* 💡 上下4px、左右0px */
  border-radius: 10px 10px 0 0;  /* 💡 上の角だけ丸める（ボタンと同じ10px） */
  letter-spacing: 0.05em;
  text-align: center;            /* 💡 文字を中央に */
}
.modal-close { 
  margin: 20px auto 0;     /* 💡 上40px、左右auto、下0 */
  background: none; 
  border: none; 
  cursor: pointer; 
  color: #666; 
  font-size: 12px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 5px; 
}
.modal-close::before { content: '✕'; font-size: 24px; font-weight: 300; }

/* =========================================
   TOPページ特有スタイル
========================================= */
.carousel-wrapper { 
  background: transparent; 
  overflow: hidden; 
  position: relative; 
  margin-top: 40px;
  margin-bottom: 40px;
}
/* 💡 スマホ版だけFV上の余白をなくす */
@media (max-width: 768px) {
  .carousel-wrapper {
    margin-top: 0;
  }
}
.carousel { 
  display: flex; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  scrollbar-width: none; 
  background: var(--white);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel-slide { 
  flex: 0 0 100%; 
  scroll-snap-align: start; 
  width: 100%;            /* 💡 max-width: 1500px を削除し、画面幅いっぱいに */
  margin: 0 auto; 
}
.fv-link { display: block; width: 100%; }

/* 💡 FV画像を画面幅いっぱいに表示する */
.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- ドットインジケーター非表示 --- */
/*.carousel-dots { text-align: center; padding-top: 10px; }
.dot { display: inline-block; width: 8px; height: 8px; background: #ddd; border-radius: 50%; margin: 0 5px; cursor: pointer; }
.dot.active { background: var(--primary); }*/

/* --- 商品リスト（PC版） --- */
.product-list { max-width: 1000px; margin: 20px auto; display: flex; flex-direction: column; gap: 50px; padding: 0 20px; }
.product-card { background: var(--white); display: flex; align-items: center; gap: 60px; padding: 50px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);}
.product-image { flex: 1; max-width: 400px; }
.product-image img { width: 100%; height: auto; display: block; }

.product-info { flex: 1; }
.product-info h3 { font-size: 28px; color: var(--blue); margin-bottom: 15px; letter-spacing: 1px;}
.product-info .sub-title { font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #352f2d;}
.product-info ul { margin-bottom: 30px; font-size: 16px; line-height: 1.8; list-style: none; padding-left: 0;}
.product-info ul li::before { content: '・'; margin-right: 5px;}
/* 💡 価格表示 */
.product-info .price {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
/* 💡 単位や(税込)など、小さくしたい部分すべてに使う共通スタイル */
.product-info .price-unit {
  font-size: 16px;
  font-weight: 600;
  color: #352f2d;
  margin-left: 1px;
}
.btn-blue { display: inline-block; background: var(--primary); color: var(--text); padding: 14px 50px; font-size: 14px; border-radius: 4px; font-weight: bold; transition: opacity 0.3s;}
.btn-blue:hover { opacity: 0.8; }

.product-info { flex: 1; }
.product-info h3 { 
  font-size: 34px; 
  color: var(--blue); 
  margin-top: -10px;          /* 💡 追加：サブタイトルとの間を詰める */
  margin-bottom: 15px;       /* 💡 8px → 15px に変更：リストとの間を空ける */
  letter-spacing: 1px;
  line-height: 1.3;
}

/* --- スマホ・タブレット（レスポンシブ） --- */
@media (max-width: 768px) {
  .product-card { 
    flex-direction: column; 
    padding: 30px 20px; 
    gap: 30px; 
    text-align: left;            /* 💡 中央寄せ → 左寄せに変更 */
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
  }

  .product-image { 
    width: 100%;
    max-width: 400px; 
    margin: 0 auto; 
  }

  /* 💡 product-info も画像と同じ400px幅にして左寄せ */
  .product-info {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .product-info h3 { font-size: 24px; }
  .product-info ul { 
    text-align: left; 
    display: block;              /* 💡 inline-block → block に変更 */
  }

  /* 💡 黄色ボタンを画像と同じ400px幅にして、中の文字を中央揃え */
  .product-info .btn-blue {
    display: block;              /* inline-block → block で幅指定可能に */
    width: 100%;                 /* 親(product-info)の幅いっぱい = 400px */
    text-align: center;          /* ボタン内テキストを中央揃え */
    padding: 14px 0;             /* 左右paddingは0にして中央揃えを綺麗に */
  }

  /* 💡 サブタイトルと見出しの間を詰める */
  .product-info .sub-title {
    margin-bottom: 5px;          /* デフォルトの10pxから縮小 */
  }

/* 💡 見出しの行間と上下マージンを調整 */
.product-info h3 {
  line-height: 1.2;
  margin-top: -3px;            /* 💡 追加：サブタイトルとの間を詰める */
  margin-bottom: 15px;         /* 💡 8px → 15px に変更：リストとの間を空ける */
}

  /* 💡 リストとボタンの間を詰める */
  .product-info ul {
    margin-bottom: 20px;         /* デフォルトの30pxから縮小 */
    line-height: 1.6;            /* 行間も少しタイトに */
  }
/* 💡 スマホ版の価格表示 */
  .product-info .price {
    margin-bottom: 15px;
    font-size:20px;
    line-height: 1.2;
  }
  .product-info .price-unit {
    font-size: 12px;
  }
}


@media (max-width: 480px) {
  /* 💡 480px以下は固定を解除して「画面いっぱい」に広げる */
  .product-card { 
    width: 100%; 
  }
}
/* =========================================
   会社概要・お問い合わせ 共通スタイル
========================================= */
.page-header { text-align: center; margin: 0 0 40px; }
.page-header h1 { font-size: 26px; font-weight: bold; letter-spacing: 4px;}
.content-box { 
  background: var(--white); 
  max-width: 800px; 
  margin: 60px auto 60px;   /* 💡 上余白を 0 → 60px に変更 */
  padding: 60px; 
  border-radius: 8px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* 会社概要テーブル */
.company-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.company-table th, .company-table td { padding: 24px 10px; border-bottom: 1px solid #ffe700; text-align: left; vertical-align: top; }
.company-table th { width: 30%; font-weight: bold; color: #352f2d; }

/* お問い合わせ */
.contact-text { font-size: 14px; line-height: 2.2; margin-bottom: 50px; }
.contact-text p { margin-bottom: 24px; }
.support-info h3 { font-size: 16px; margin-bottom: 20px; letter-spacing: 1px;}
.support-btns { display: flex; gap: 20px; }
.btn-yellow { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--primary); padding: 20px; border-radius: 40px; font-weight: bold; font-size: 18px; transition: opacity 0.3s;}
.btn-yellow:hover { opacity: 0.8; }
/* 💡 お問い合わせボタン内のアイコン */
.btn-yellow .icon {
  width: 22px;            /* アイコンの幅 */
  height: 22px;           /* アイコンの高さ */
  display: inline-block;
  vertical-align: middle; /* テキストと縦位置を揃える */
}

@media (max-width: 768px) {
  .content-box { 
    padding: 40px 20px;
    margin: 0 auto;            /* 💡 上のグレー余白を消す（60px → 0） */
    max-width: 100%;           /* 💡 画面幅いっぱいに広げる */
    border-radius: 0;          /* 💡 角丸をなくす */
    box-shadow: none;          /* 💡 影をなくす */
  }
  
  /* 💡 スマホでも横並びを維持。項目名の幅を狭めに調整 */
  .company-table th { 
    width: 35%;              /* 項目名の幅（理想画像に合わせて調整） */
    padding: 16px 8px 16px 0;
    font-size: 13px;
    vertical-align: top;     /* 上揃え（複数行のとき項目名が上に来る） */
  }
  .company-table td {
    padding: 16px 0 16px 8px;
    font-size: 13px;
    vertical-align: top;
  }
  
.support-btns { flex-direction: column; }
}

/* 💡 スマホ用の改行制御 */
.br-sp { display: none; }              /* PC版では非表示（改行しない） */
@media (max-width: 768px) {
  .br-sp { display: inline; }          /* スマホでは表示（改行する） */
}

/* =========================================
   スマホ用ハンバーガーメニュー
========================================= */

/* メニュー本体（普段は画面右外に隠れている） */
.sp-menu {
  position: fixed;
  top: 0;
  left: 0;  
  width: 75%;                /* 画面幅の75%（最大280px） */
  max-width: 280px;
  height: 100vh;             /* 画面の高さいっぱい */
  background: var(--white);
  z-index: 200;              /* ヘッダー(100)より前面に */
  
  /* 普段は画面右外に隠す */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  
  padding: 150px 0 0;         /* 上に空間を作る（×ボタンを置くため） */
  overflow-y: auto;          /* 中身が多くなったらスクロール可能 */
}

/* メニューを開いた状態 */
.sp-menu.is-open {
  transform: translateX(0);  /* 画面内にスライドイン */
}

/* メニュー項目リスト */
.sp-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各項目 */
.sp-menu-list li {
  /* 線は li ではなく a に引くため、ここでは何も指定しない */
}


/* 項目のリンク */
.sp-menu-list a {
  display: block;
  padding: 20px 30px;
  color: var(--text);         /* 黒文字 */
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: background 0.2s;
  border-bottom: 1px solid #ffe700;   /* 💡 黄色の区切り線 */
  margin: 0 20px;             /* 💡 左右に余白を入れて線を内側に短くする */
}

/* 💡 最後の項目だけ下線を消す */
.sp-menu-list li:last-child a {
  border-bottom: none;
}

.sp-menu-list a:hover {
  opacity: 0.6;               /* 💡 ホバー時に少し薄くなる */
  transition: opacity 0.3s;   /* 💡 ふんわり変化させる */
}

/* 半透明の黒いオーバーレイ（メニュー外をクリックで閉じる用） */
.sp-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;               /* メニュー(200)より後ろ、ヘッダー(100)より前 */
}

.sp-menu-overlay.is-open {
  display: block;
}

/* メニューが開いたときの「×」アニメーション */
.hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* PC版ではメニュー本体・オーバーレイは表示しない */
@media (min-width: 769px) {
  .sp-menu,
  .sp-menu-overlay {
    display: none !important;
  }
}

/* 💡 視覚的には隠すが、検索エンジン・スクリーンリーダーには読ませる */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}