/* ============================================
   Base Reset
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   Base
   ============================================ */
html, body {
  overflow-x: hidden; /* ビューポート全体での不意な横スクロールやスワイプバグを100%防止するプロ仕様の設計 */
}

body {
  font-family: 'Shippori Mincho', serif;
  color: #3d3d3d;
  background: #fff;
  letter-spacing: 0.08em; /* 文字間を一律8%に設定 */
}

input, select, textarea, button {
  font-family: inherit;
  letter-spacing: inherit;
}

body.overflow-hidden {
  overflow: hidden;
}

/* ユーティリティ */
.u-sp-only {
  display: inline !important;
}

a {
  color: inherit;
  text-decoration: none;
}

/* トップバー */
.top-bar {
  background-color: #0a1e37;
  padding: 7.5px 16px;
  text-align: center;
  overflow: hidden; /* テキストが極小デバイスではみ出した際の横スクロールを防止 */
}

.top-bar__text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================
   Header - Common & Placeholder Styling
   ============================================ */
.header {
  position: relative;
  z-index: 100;
  background-color: #ffffff;
}

/* Fallback/Placeholder styling for missing button images starting with btn_ */
img[src*="btn_"] {
  display: inline-block;
  object-fit: contain;
  box-sizing: border-box;
}

/* ============================================
   Header - SP (Mobile)
   ============================================ */
.header-pc {
  display: none;
}

.header-sp {
  display: block;
  border-bottom: 1px solid #e5e0d4;
  background-color: #ffffff;
}

.header-sp__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; /* スマホ高さの仕様に合わせた設計 */
  padding: 8px 16px;
  position: relative;
}

.header-sp__left,
.header-sp__right {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 80px; /* 両端の幅を固定して、ロゴが完全に中央になるよう制御 */
}

.header-sp__right {
  justify-content: flex-end;
}

.header-sp__center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-sp__logo img {
  height: 44px; /* 上下の余白8pxを確保するための高さ（60 - 8*2 = 44px） */
  width: auto;
  display: block;
}

.header-sp__search-btn,
.header-sp__icon-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-icon {
  width: 24px; /* 仕様：すべて24px正方形 */
  height: 24px;
}

/* ============================================
   Header - SP (Mobile) Search Area
   ============================================ */
.header-sp__search-area {
  display: none; /* 初期状態は非表示 */
  background-color: #ffffff;
  border-bottom: 1px solid #e5e0d4;
  padding: 16px;
}

.header-sp__search-inner {
  max-width: 480px;
  margin: 0 auto;
}

.header-sp__search-area .search-input-wrapper {
  position: relative;
  width: 100%; /* SPでは全幅に */
}

.header-sp__search-area .search-input {
  width: 100%;
  height: 38px; /* 仕様：高さ38px */
  padding: 0 36px 0 16px;
  border: 1px solid #3d3d3d;
  border-radius: 19px;
  font-size: 14px;
  color: #3d3d3d;
  outline: none;
  background-color: #ffffff;
  box-sizing: border-box;
}

.header-sp__search-area .search-input::placeholder {
  color: #b3b3b3;
}

.header-sp__search-area .search-submit {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; /* 仕様：サーチボタン縦横18px */
  height: 18px;
}

.header-sp__search-area .search-icon {
  width: 18px;
  height: 18px;
}

.header-sp__search-area .search-suggestions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap; /* SPでは画面幅が狭いため、折り返しを許可 */
}

.header-sp__search-area .search-suggestion-pill {
  font-size: 12px;
  color: #3d3d3d;
  background-color: #f0ebe0;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-sp__search-area .search-suggestion-pill:hover {
  background-color: #B48A41;
  color: #ffffff;
}

/* ハンバーガーメニュー */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px; /* 上下左右3pxの余白を設けて、内側を18px正方形に */
  width: 24px; /* 仕様：すべて24px正方形 */
  height: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1001;
}

.hamburger-bar {
  display: block;
  width: 18px; /* 仕様：横線18px */
  height: 2px;
  background-color: #3d3d3d;
}

/* ドロワーメニュー */
.drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000; /* ヘッダーやハンバーガーボタン(z-index: 1001)よりも上に配置して、完全に覆う */
  visibility: hidden;
  transition: visibility 0.3s ease;
  overflow: hidden; /* 内側のleft: -100%にある子要素が不意に画面外で横スクロールを誘発するのを完全に防止 */
}

.drawer-menu.is-open {
  visibility: visible;
}

.drawer-menu__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer-menu.is-open .drawer-menu__overlay {
  opacity: 1;
}

.drawer-menu__inner {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%; /* 仕様：ハンバーガーメニューのメニューは全幅で */
  height: 100%;
  background-color: #ffffff;
  box-shadow: none;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-menu.is-open .drawer-menu__inner {
  transform: translateX(100%);
}

/* 1. ようこそ ゲスト様 ヘッダー */
.drawer-header {
  height: 56px; /* 仕様：要素高さ56px */
  background-color: #0a1e37; /* 仕様：青系背景 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  color: #ffffff;
  flex-shrink: 0;
}

.drawer-header__welcome {
  display: flex;
  align-items: center;
}

.drawer-header__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #B48A41; /* アクセントカラー(ゴールド) */
  border-radius: 50%;
  margin-right: 8px;
}

.drawer-header__welcome-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; /* 仕様：fontsize 11px */
  font-weight: 500;
  margin-right: 6px;
  color: #ffffff;
}

.drawer-header__guest-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; /* 仕様：fontsize 11px */
  font-weight: 500;
  color: #ffffff;
}

.drawer-header__close-btn {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.drawer-header__close-btn:hover {
  opacity: 1;
}

/* スクロール領域 */
.drawer-scrollable {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* 2. ログイン・新規会員登録ボタン */
.drawer-buttons {
  display: flex;
  gap: 10px;
  padding: 16px; /* 仕様：上下の余白16px */
  background-color: #ffffff;
  flex-shrink: 0;
}

.drawer-btn {
  flex: 1;
  height: 38px; /* 仕様：要素高さ38px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px; /* 仕様：fontsize 12px */
  font-weight: 500;
  border-radius: 2px;
  box-sizing: border-box;
  text-decoration: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.drawer-btn:hover {
  opacity: 0.9;
}

.drawer-btn--login {
  background-color: #0a1e37; /* 青系背景 */
  color: #ffffff;
  border: 1px solid #0a1e37;
}

.drawer-btn__icon {
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.drawer-btn--register {
  background-color: #ffffff;
  color: #0a1e37;
  border: 1px solid #0a1e37;
}

.drawer-btn__plus {
  margin-right: 6px;
  font-size: 14px;
  font-weight: 400;
}

/* 3. メインアコーディオン・リンクナビゲーション */
.drawer-nav {
  background-color: #ffffff;
  flex-shrink: 0;
}

.drawer-nav__list {
  list-style: none;
}

.drawer-nav__item {
  border-bottom: 1px solid #e5e0d4; /* 薄い黄色のライン */
}

.drawer-nav__header {
  height: 58px; /* 仕様：要素高さ 58px */
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background-color: #ffffff;
}

.drawer-nav__header--link {
  text-decoration: none;
  color: inherit;
}

.drawer-nav__title {
  font-family: 'Shippori Mincho', serif; /* 仕様：単品等 shippori */
  font-size: 15px; /* 仕様：fontsize 15px */
  font-weight: 700;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 14px;
}

/* 金色の左線インジケータ */
.drawer-nav__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #B48A41; /* アクセントカラー(ゴールド) */
}

/* アコーディオン・トグル記号（+ / -）と直リンク矢印（>） */
.drawer-nav__toggle {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  font-weight: 300;
  color: #B48A41; /* ゴールド */
  width: 24px;
  text-align: center;
  display: block;
}

.drawer-nav__arrow,
.drawer-secondary__arrow {
  position: relative;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #B48A41; /* ゴールド */
  border-right: 1.5px solid #B48A41;
  transform: rotate(45deg);
  margin-right: 6px;
}

/* サブメニュー（アコーディオン中身） */
.drawer-submenu {
  list-style: none;
  display: none; /* 初期状態は非表示 */
  background-color: #fdfcf9; /* 極めて薄い黄色の背景 */
}

.drawer-submenu__item {
  border-bottom: 1px solid #f2edd8; /* サブメニュー内の仕切り線 */
}

.drawer-submenu__item:last-child {
  border-bottom: none;
}

.drawer-submenu__link {
  height: 44px; /* 仕様：要素高さ44px */
  padding: 0 16px 0 28px;
  display: flex;
  justify-content: flex-start; /* 仕様：アコーディオンメニューの中身のテキストがalign centerなのをleftに */
  align-items: center;
  font-family: 'Shippori Mincho', serif; /* 仕様：メニュー内テキスト noto sans */
  font-size: 13px; /* 仕様：fontsize 13px */
  font-weight: 500;
  color: #3d3d3d;
  text-decoration: none;
  position: relative;
}

.drawer-submenu__link::before {
  content: "—"; /* 仕様：サブメニュー頭の「—」 */
  margin-right: 10px;
  color: #B48A41; /* ゴールド */
  font-weight: 300;
}

/* サブメニューの右矢印(薄茶色の小さな>) */
.drawer-submenu__link::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #B48A41;
  border-right: 1px solid #B48A41;
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  right: 16px;
  top: 50%;
}

/* 4. 静的黄色の二次リンク（よくある質問、、、） */
.drawer-secondary {
  background-color: #f0ebe0; /* 仕様：薄い黄色の背景 #f0ebe0 */
  padding: 8px 0;
  border-top: 1px solid #e5e0d4;
  border-bottom: 1px solid #e5e0d4;
  flex-shrink: 0;
}

.drawer-secondary__list {
  list-style: none;
}

.drawer-secondary__item {
  border-bottom: 1.5px solid #ffffff; /* 境界線を白にして視認性アップ */
}

.drawer-secondary__item:last-child {
  border-bottom: none;
}

.drawer-secondary__link {
  height: 46px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Shippori Mincho', serif; /* 仕様：よくある質問等 noto sans */
  font-size: 12px; /* 仕様：fontsize 12px */
  font-weight: 500;
  color: #3d3d3d;
  text-decoration: none;
}

/* 5. SNS・電話番号エリア */
.drawer-bottom {
  background-color: #0a1e37; /* 仕様：青系背景 */
  padding: 32px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.drawer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.drawer-sns__link {
  color: #ffffff;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-sns__link:hover {
  color: #B48A41; /* ゴールド */
}

.drawer-tel__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
}

.drawer-tel__icon {
  color: #B48A41; /* ゴールド */
  display: flex;
  align-items: center;
}

.drawer-tel__label {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  font-weight: 700;
  color: #B48A41; /* ゴールド */
}

.drawer-tel__number {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
}

/* 6. 一番下の「閉じる」ボタン */
.drawer-close-button {
  width: 100%;
  height: 48px;
  background-color: #061426; /* より暗い青系背景 */
  border: none;
  border-top: 1px solid #14283c;
  color: #ffffff;
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.drawer-close-button:hover {
  background-color: #030a17;
}

.drawer-close-button__icon {
  font-size: 16px;
  font-weight: 300;
}

/* ============================================
   ヒーローセクション (SP)
   ============================================ */
.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - 87px); /* 上部ヘッダー(top-bar: 26px, header-sp: 60px, border: 1px = 87px)と高さを合算して100vhになる設計 */
  overflow: hidden;
}

.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out; /* フェード切り替え1.5秒 */
  background-color: #7f7f7f; /* 画像がない場合は灰色背景 */
  z-index: 1;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.47); /* カルーセルの上に#000の47%の透明度のマスク */
  z-index: 3;
}

.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 4; /* テキスト要素の奥、カルーセルの手前(マスクの上)に配置 */
  padding: 0 16px;
  box-sizing: border-box;
}

.hero-subtitle {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* 仕様：スマホ 16px */
  font-weight: 500; /* 仕様：font-weight 500 */
  color: #e8d5a8; /* 仕様：#e8d5a8 */
  letter-spacing: 0.28em; /* 仕様：文字間28% */
  text-indent: 0.28em; /* 文字間ズレ補正 */
  line-height: 1.4;
}

.hero-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 26px; /* 仕様：スマホ 26px */
  font-weight: 400; /* 仕様：font-weight 400 */
  color: #ffffff; /* 仕様：#fff */
  letter-spacing: 0.14em; /* 仕様：文字間14% */
  text-indent: 0.14em; /* 文字間ズレ補正 */
  line-height: 1.5;
  margin-top: 28px; /* 仕様：サブタイトルのした28pxの余白 */
}

/* ============================================
   お知らせセクション (SP)
   ============================================ */
.news-section {
  padding: 24px 16px; /* 仕様：セクション内上下余白 24px */
  background-color: #ffffff;
}

.news-container {
  width: 100%;
}

.news-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px; /* 仕様：「お知らせ」タイトルの下部余白 16px */
}

.news-title-indicator {
  width: 3px;
  height: 16px; /* タイトル(16px)の高さに合わせる */
  background-color: #B48A41; /* ゴールド */
  flex-shrink: 0;
}

.news-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* 仕様：letter-spacing 24% */
  text-indent: 0.24em; /* 文字間による右側へのはみ出し・ズレを中央に戻すインデント */
  line-height: 1.2;
}

.news-item {
  border-bottom: 1px dotted #E5E0D4; /* 仕様：border-bottom 1px dotted #E5E0D4に修正 */
}

.news-item:last-child {
  border-bottom: none; /* 仕様：一番下の線不要 */
}

.news-link {
  display: block;
  padding: 10px 0; /* 仕様：記事一覧一つのアイテムの内部上下余白 10px */
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.news-link:hover .news-item-text {
  text-decoration: underline; /* 仕様：アンダーラインのみ */
}

.news-date {
  display: block;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 500;
  color: #b4ba41; /* 仕様：#b4ba41 (フォント3) */
  letter-spacing: 0.06em; /* 仕様：letter-spacing 6% */
  margin-bottom: 4px; /* 仕様：日付の下部余白 4px */
}

.news-item-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d3d3d;
  letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
  line-height: 1.6;
}

/* ============================================
   ギフトセクション (SP)
   ============================================ */
.gift-section {
  padding: 40px 16px; /* ギフトセクションのSP余白 */
  background-color: #fbf9f4; /* 温かみのあるオフホワイト・薄いベージュ */
  position: relative;
}

.gift-deco {
  display: none; /* スマホでは背景パターン非表示 */
}

.gift-container {
  width: 100%;
}

.gift-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.gift-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* 仕様：下との余白 9px */
}

.gift-tag-icon {
  width: 11px; /* 仕様のアスペクト比に準拠（11px x 17px） */
  height: 17px;
  object-fit: contain;
}

.gift-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* 仕様：Gift 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* 仕様：letter-spacing 32% */
  text-indent: 0.32em; /* 文字間ズレ補正 */
  line-height: 1;
}

.gift-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 仕様：詰め合わせ／贈り物 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* 仕様：letter-spacing 24% */
  text-indent: 0.24em; /* 文字間ズレ補正 */
  line-height: 1.2;
  text-align: center;
}

/* itemBox1：SP */
.gift-intro-card {
  margin-bottom: 32px;
}

.gift-intro-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 24px; /* 仕様：画像の下部余白 24px */
  border-radius: 4px;
  overflow: hidden;
  background-color: #e5e0d4;
}

.gift-intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.gift-intro-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2efea;
  border: 1px dashed #c4bca6;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1;
}

.gift-intro-img-fallback-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  color: #7c725d;
  font-weight: 500;
}

.gift-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gift-intro-subtitle {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px; /* 仕様：贈り物のおつけもの 20px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.14em; /* 仕様：letter-spacing 14% */
  text-indent: 0.14em; /* 文字間ズレ補正 */
  line-height: 1.3;
  margin-bottom: 12px; /* 仕様：下との余白 12px */
}

.gift-intro-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px; /* 仕様：文章 12px */
  font-weight: 400;
  color: #3d3d3d;
  letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
  line-height: 2.00; /* 仕様：line-height 200% */
  margin-bottom: 24px; /* 仕様：下との余白 24px */
  text-align: left;
}

.gift-intro-text .u-pc-inline {
  display: none; /* スマホでは後半の追加テキスト非表示 */
}

.gift-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 14px; /* 仕様：一覧を見る 14px */
  font-weight: 500;
  letter-spacing: 0.12em; /* 仕様：letter-spacing 120% */
  text-indent: 0.12em; /* 文字間ズレ補正 */
  text-decoration: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.gift-more-btn--sp {
  width: 210px; /* 仕様：背景幅 210px */
  padding: 14px 0; /* 仕様：上下の内部余白 14px */
  background-color: #0a1e37;
  color: #ffffff;
  margin-bottom: 24px; /* 仕様：下との余白 24px */
}

.gift-more-btn--sp:hover {
  opacity: 0.85;
}

/* itemBox2：SP */
.gift-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 仕様：スマホ2列グリッド */
  gap: 24px 12px;
  margin-bottom: 24px;
}

.gift-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* CSS Grid内でwhite-space: nowrap等によるカラム突き抜け・はみ出しを防止するプロ仕様の指定 */
}

.gift-product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px; /* 仕様：画像の下部余白 8px */
  border-radius: 4px;
  overflow: hidden;
  background-color: #e5e0d4;
}

.gift-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 4px; /* 親の角丸と完全に一致させてはみ出しを防止 */
}

.gift-product-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2efea;
  border: 1px solid #e5e0d4;
  border-radius: 4px; /* 親の角丸と完全に一致させてはみ出しを防止 */
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

.gift-product-img-fallback-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  font-weight: 600;
  color: #0a1e37;
  margin-bottom: 2px;
  line-height: 1.2;
}

.gift-product-img-fallback-subtitle {
  font-family: 'Shippori Mincho', serif;
  font-size: 8px;
  color: #757575;
  margin-bottom: 6px;
  line-height: 1.2;
}

.gift-product-img-fallback-badges {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.gift-product-img-fallback-badge {
  font-family: 'Shippori Mincho', serif;
  font-size: 8px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 2px;
  color: #ffffff;
  line-height: 1;
}

.gift-product-img-fallback-badge--orange {
  background-color: #B48A41;
}

.gift-product-img-fallback-badge--green {
  background-color: #7b9c7b;
}

.gift-product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gift-product-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 8px; /* 仕様：下との余白 8px */
  flex-wrap: wrap;
}

.gift-badge {
  font-family: 'Shippori Mincho', serif;
  font-size: 10px; /* 仕様：クール便/送料無料 10px */
  font-weight: 500;
  letter-spacing: 0.1em; /* 仕様：letter-spacing 10% */
  padding: 4px 7px; /* 仕様：天地4px 左右7px */
  border-radius: 3px; /* 仕様：border-radius 3px */
  display: inline-block;
  line-height: 1;
}

.gift-badge--cool {
  background-color: #c5dae3; /* 仕様：#c5dae3 */
  color: #2a4d65; /* 仕様：#2a4d65 */
}

.gift-badge--free {
  background-color: #9c4040; /* 仕様：#9c4040 */
  color: #ffffff; /* 仕様：#fff */
}

.gift-product-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px; /* 仕様：商品名 14px */
  font-weight: 500;
  color: #1a1a1a; /* 仕様：#1a1a1a */
  letter-spacing: 0.08em; /* 仕様：letter-spacing 8% */
  text-indent: 0.08em; /* 文字間ズレ補正 */
  line-height: 1.4;
  margin-bottom: 8px; /* 仕様：margin-bottom 8px */
  /* 仕様：min-height: 2.8em; → いらない */
}

.gift-product-desc {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; /* 仕様：説明文 11px */
  font-weight: 400;
  color: #757575; /* 仕様：#757575 */
  letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
  line-height: 1.4;
  margin-bottom: 8px; /* 仕様：margin-bottom 8px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #E5E0D4; /* 仕様：商品簡易説明文が一行入ります。の下に横線入れる */
  padding-bottom: 8px; /* 横線との間に少し余白を確保 */
}

.gift-product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end; /* 仕様：価格：4,980円(税込)のこの行は右寄せで */
  margin-bottom: 8px; /* 仕様：margin-bottom 8px */
}

.gift-price-label {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; /* 仕様：価格 11px */
  font-weight: 400;
  color: #3d3d3d; /* 仕様：#3D3D3D */
  letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
  line-height: 1;
}

.gift-price-value {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* 仕様：4,980円 16px */
  font-weight: 700;
  color: #0a1e37; /* 仕様：#0A1E37 */
  letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
  line-height: 1;
  margin-left: 2px;
}

.gift-price-unit {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 700;
  color: #0a1e37;
  line-height: 1;
  margin-right: 4px;
}

.gift-price-tax {
  font-family: 'Shippori Mincho', serif;
  font-size: 9px; /* 仕様：(税込) 9px */
  font-weight: 400;
  color: #757575; /* 仕様：#757575 */
  letter-spacing: 0; /* 仕様：letter-spacing 0% */
  line-height: 1;
}

.gift-product-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto; /* ボタンの位置をカード下端に揃える */
}

.gift-product-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* スマホ画面幅に合わせて自動伸縮し、カードや画像のはみ出しを完全に防止 */
  max-width: 178px; /* 仕様上の最大幅：178px */
  height: 38px;
  border: 1px solid #0a1e37; /* 仕様カラー */
  border-radius: 19px; /* 角丸丸み */
  background-color: #ffffff;
  color: #0a1e37; /* 仕様：#0a1e37 */
  font-family: 'Shippori Mincho', serif;
  font-size: 12px; /* 仕様：商品を見る 12px */
  font-weight: 500;
  letter-spacing: 0.16em; /* 仕様：letter-spacing 16% */
  text-indent: 0.16em; /* 文字間ズレ補正 */
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  margin-bottom: 8px; /* 仕様：margin-bottom 8px */
}

.gift-product-btn:hover {
  background-color: #0a1e37;
  color: #ffffff;
}

.gift-more-btn-wrapper {
  display: none; /* スマホではPC用ボタンは完全に非表示 */
}

/* ============================================
   ランキングセクション (SP)
   ============================================ */
.ranking-section {
  padding: 56px 16px 100px; /* 上56px 下100px */
  background-color: #ffffff;
}

.ranking-container {
  width: 100%;
}

.ranking-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}

.ranking-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px;
}

.ranking-tag-icon {
  width: 11px;
  height: 17px;
  object-fit: contain;
}

.ranking-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* memo13.md参考：16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* memo13.md参考：32% */
  text-indent: 0.32em;
  line-height: 1;
}

.ranking-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* memo13.md参考：22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* memo13.md参考：24% */
  text-indent: 0.24em;
  line-height: 1.2;
  text-align: center;
}

/* 2列グリッド配置 */
.ranking-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 68px 12px; /* 仕様：上がったバッジ分（44px）要素が重なるので、元のギャップ（24px）に44pxを追加して【68px】に変更 */
  margin-bottom: 24px;
  margin-top: 44px; /* 1行目のバッジが上の要素（ヘッダー）と重ならないように、グリッド上部にも44pxの余白を追加 */
}

.ranking-product-card {
  display: flex;
  flex-direction: column;
  position: relative; /* 順位バッジをカード全体（画像の上）を基準に配置するためにrelativeを設定 */
  min-width: 0; /* CSS Grid内でwhite-space: nowrap等によるカラム突き抜け・はみ出しを防止するプロ仕様の指定 */
}

/* スマホ表示で第6位が最後のアイテムになるため、それ以降は非表示に設定 */
.u-pc-only {
  display: none !important;
}

.ranking-product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px; /* memo13.md参考：画像の下部余白 8px */
  border-radius: 4px;
  /* overflow: hiddenを削除して、上に浮かび上がらせたバッジが隠れないように対応 */
  background-color: #e5e0d4;
}

/* 順位バッジ：画像の上にぴったり重なるよう上に逃がす配置 (SP) */
.ranking-badge {
  position: absolute;
  top: -44px; /* 仕様：画像を上げた分上に逃がす（-44px） */
  left: 0; /* 仕様：left: 0 */
  width: 44px; /* バッジの直径サイズ */
  height: 44px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 10; /* 画像（z-index: 2）やプレースホルダーより前面に表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff; /* 白文字 */
  padding-bottom: 3px; /* カンプ画像に応じた文字位置の微調整 */
  box-sizing: border-box;
}

.ranking-product-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2efea;
  border: 1px solid #e5e0d4;
  border-radius: 4px; /* 親の角丸と完全に一致させてはみ出しを防止 */
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

.ranking-product-img-fallback-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
  line-height: 1.2;
}

.ranking-product-img-fallback-subtitle {
  font-family: 'Shippori Mincho', serif;
  font-size: 9px;
  color: #757575;
  margin-bottom: 6px;
  line-height: 1.2;
}

.ranking-product-img-fallback-logo {
  font-family: 'Shippori Mincho', serif;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background-color: #7b9c7b; /* 大安風の優しいグリーン */
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1;
}

.ranking-product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ranking-product-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 8px; /* memo13.md参考：下との余白 8px */
  flex-wrap: wrap;
}

/* 共通下部ボタン */
.ranking-more-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}

.ranking-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px; /* 一覧を見るボタン（210px）と整合 */
  padding: 14px 0;
  background-color: #0a1e37;
  color: #ffffff;
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-decoration: none;
  border-radius: 24px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.ranking-more-btn:hover {
  opacity: 0.85;
}

/* ============================================
   イベント／特集情報セクション (SP)
   ============================================ */
.event-section {
  padding: 56px 16px; /* セクション内上下余白は56px */
  background-color: #ffffff;
}

.event-container {
  width: 100%;
}

.event-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.event-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 9px; /* EVENT下余白 9px */
}

.event-tag-icon {
  width: 10px; /* 16pxテキストに合わせたコンパクトなサイズに変更 */
  height: 16px;
  object-fit: contain;
}

.event-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* EVENTフォントサイズ 16px に変更 (memo22) */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.event-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* イベント／特集情報フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
}

/* スライダーレイアウト */
.event-slider-outer {
  position: relative;
  width: 100%;
}

.event-swiper {
  width: 100%;
  margin-bottom: 24px; /* swiperの下余白 24px */
  overflow: hidden; /* コンテナ外への不意なはみ出しを防ぐ */
}

/* PC用の矢印はSPでは非表示 */
.event-slider-arrow {
  display: none;
}

.event-slide-item {
  box-sizing: border-box;
}

.event-slide-link {
  display: block;
  width: 100%;
}

.event-slide-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* カンプの比率に合わせる */
  border-radius: 4px;
  overflow: hidden;
  background-color: #e5e0d4;
}

/* ============================================
   イベントスライドのプレースホルダーCSS (灰色背景)
   ============================================ */
.event-slide-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e0d4; /* プレースホルダーで灰色に設定 */
  border-radius: 4px;
}

.event-slide-placeholder span {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  color: #7c725d;
  letter-spacing: 0.05em;
}

/* スライダー用矢印 (SP) */
.event-slider-arrows-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.event-slider-arrow-sp {
  width: 36px; /* 直径の円形 36px */
  height: 36px;
  border: 1px solid #B48A41; /* ゴールド */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  transition: all 0.25s ease;
  user-select: none;
}

.event-slider-arrow-sp span {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 10px; /* 不等号記号のフォントサイズを10pxに変更 (memo22) */
  color: #B48A41;
  line-height: 100%;
}

.event-slider-arrow-sp:active {
  background-color: #fbf9f4;
  transform: scale(0.95);
}

/* ============================================
   お客様の声セクション (SP)
   ============================================ */
.voice-section {
  padding: 56px 16px; /* セクション内上下余白は56px */
  background-color: #ffffff;
}

.voice-container {
  width: 100%;
}

.voice-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.voice-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Voice 下余白 9px */
}

.voice-tag-icon {
  width: 10px; /* 16pxテキストに合わせたコンパクトなサイズ */
  height: 16px;
  object-fit: contain;
}

.voice-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Voice フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.voice-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* お客様の声 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 18px; /* 下余白 18px */
}

.voice-subtitle-block {
  text-align: center;
}

.voice-subtitle-line1,
.voice-subtitle-line2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px; /* ありがとうございます/お客様からレビュー... 13px */
  color: #3d3d3d;
  line-height: 1.7; /* line-height 170% */
  letter-spacing: 0.04em; /* letter-spacing 4% */
}

.voice-subtitle-line1 {
  margin-bottom: 0;
}

.voice-subtitle-line2 {
  margin-bottom: 0;
}

/* スライダー & カード設計 (SP) */
.voice-content-area {
  position: relative;
  width: 100%;
}

.voice-swiper {
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
}

.voice-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 6px; /* 商品名/星評価とレビュー本文の縦隙間 */
  border: 1px solid #E5E0D4; /* border: 1px solid #E5E0D4 */
  border-radius: 4px;
  padding: 16px; /* 要素内部余白 16px */
  box-sizing: border-box;
  background-color: #ffffff;
  min-height: 172px; /* 適切な高さを確保 */
  width: 100%;
  align-items: start;
}

.voice-card-img-placeholder {
  grid-column: 1 / 2;
  grid-row: 1 / 3; /* SPでは画像は1列目で、1行目と2行目にまたがって左に固定 */
  width: 100px;
  height: 100px;
  background-color: #e5e0d4; /* 画像はプレースホルダーで灰色 */
  border-radius: 2px;
  flex-shrink: 0;
}

.voice-card-header-right {
  grid-column: 2 / 3;
  grid-row: 1 / 2; /* 1行目の右側 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* 折り返し防止等 */
}

.voice-card-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px; /* 商品名が入ります。 15px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.08em; /* letter-spacing 8% */
  line-height: 1.2;
  margin-bottom: 6px; /* margin-bottom 6px */
}

.voice-card-stars {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px; /* ★★★★★ 14px */
  color: #B48A41; /* ゴールド */
  line-height: 1;
  letter-spacing: 0.08em; /* letter-spacing 8% */
  margin-bottom: 0;
}

.voice-card-body {
  grid-column: 2 / 3;
  grid-row: 2 / 3; /* 2行目の右側（画像の右隣、星評価の下） */
  width: 100%;
}

.voice-card-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; /* 大安さんの千枚漬は... 11px */
  font-weight: 400;
  color: #3d3d3d;
  line-height: 1.8; /* line-height 180% */
  letter-spacing: 0.04em; /* letter-spacing 4% */
  margin-bottom: 6px; /* margin-bottom 6px */
  /* 3行程度で綺麗に収め、はみ出しを防ぐ */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voice-card-more {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px; /* 続きを見る ▶ 11px */
  color: #B48A41; /* ゴールド */
  letter-spacing: 0.06em; /* letter-spacing 6% */
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.25s ease;
}

.voice-card-more:active {
  opacity: 0.7;
}

/* スライダー用矢印 (SP) */
.voice-slider-arrows-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.voice-slider-arrow-sp {
  width: 36px; /* 直径の円形 36px */
  height: 36px;
  border: 1px solid #B48A41; /* ゴールド */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  transition: all 0.25s ease;
  user-select: none;
}

.voice-slider-arrow-sp span,
.voice-slider-arrow-sp {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 10px; /* 不等号記号のフォントサイズを10pxに変更 (memo23) */
  color: #B48A41;
  line-height: 100%;
}

.voice-slider-arrow-sp:active {
  background-color: #fbf9f4;
  transform: scale(0.95);
}

/* ============================================
   中間イメージ画像セクション (SP)
   ============================================ */
.mid-bg-section {
  width: 100%;
  height: 62vw; /* 幅の62%の高さで画像を表示 */
  overflow: hidden;
  display: block;
}

.mid-bg-picture,
.mid-bg-img {
  width: 100%;
  height: 100%;
  display: block;
}

.mid-bg-img {
  object-fit: cover; /* object-fit cover */
}

/* ============================================
   「まいにちUMAMI野菜」宣言セクション (SP)
   ============================================ */
.umami-section {
  padding: 64px 16px; /* セクション内余白上下 64px */
  background-color: #0a1e37; /* 仕様背景色：青系背景 */
  display: block;
}

.umami-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.umami-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 2; /* スマホ時：タイトルの次にテキスト（2番目） */
}

.umami-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 24px; /* 「まいにちUMAMI野菜」宣言 24px */
  color: #ffffff; /* 白文字 */
  letter-spacing: 0.12em; /* letter-spacing 12% */
  text-indent: 0.12em;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 20px; /* margin-bottom 20px */
  order: 1; /* スマホ時：1番上 */
}

.umami-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px; /* 本文フォントサイズ 13px */
  color: #e8d5a8; /* NotoSansかつこの色の指定（仕様 background:#E8D5A8 は文字色意図） */
  line-height: 2.1; /* line-height 210% */
  letter-spacing: 0.06em; /* letter-spacing 6% */
  text-align: center; /* text-align center */
  margin-bottom: 20px; /* margin-bottom 20px */
  max-width: 480px;
}

.umami-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  order: 4; /* スマホ時：画像（3番目）の下にボタン（4番目）を配置 */
}

.umami-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px; /* width 210 */
  height: 56px; /* height 56 */
  border-radius: 28px; /* 角丸（美しい楕円に自動調整） */
  background-color: #B48A41; /* background: #B48A41 */
  color: #0A1E37; /* 詳しくはこちら　→ は background: #0A1E37 側のテキスト（文字色） */
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px; /* 詳しくはこちら 14px */
  letter-spacing: 0.2em; /* letter-spacing 20% */
  text-indent: 0.2em;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.umami-btn:active {
  opacity: 0.85;
}

/* 画像プレースホルダーエリア */
.umami-image-area {
  width: 100%;
  max-width: 480px;
  order: 3; /* スマホ時：テキスト（2番目）の下に画像（3番目）を配置 */
}

.umami-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* カンプのまいにちUMAMI野菜の正方形に近い比率（約4:3）に適合 */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.umami-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3; /* カンプのまいにちUMAMI野菜の正方形に近い比率（約4:3）に適合 */
  background-color: #e5e0d4; /* プレースホルダー灰色 */
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.umami-placeholder-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7eed7; /* 優しいクリーム色調 */
  border: 1px solid #e5e0d4;
  padding: 24px;
  box-sizing: border-box;
}

.umami-placeholder-en {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  color: #3d3d3d;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

.umami-placeholder-main {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  color: #0a1e37;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.umami-placeholder-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 24px;
  color: #0a1e37;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.1em;
}

/* ============================================
   大安のこだわりセクション (SP)
   ============================================ */
.commitment-section {
  padding: 56px 16px; /* セクション内上下余白56px */
  background-color: #ffffff;
  display: block;
}

.commitment-container {
  width: 100%;
}

.commitment-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.commitment-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Commitment 下余白 9px */
}

.commitment-tag-icon {
  width: 10px; /* 16pxテキストに合わせたコンパクトなサイズ */
  height: 16px;
  object-fit: contain;
}

.commitment-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Commitment フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.commitment-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 大安のこだわり フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* スライダー & カード設計 (SP) */
.commitment-content-area {
  position: relative;
  width: 100%;
}

.commitment-swiper {
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
}

.commitment-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.commitment-card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px; /* 画像下余白 16px */
  border-radius: 4px;
  overflow: hidden;
}

.commitment-card-img-placeholder {
  position: absolute;
  inset: 0;
  background-color: #e5e0d4; /* プレースホルダーで灰色 */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commitment-card-number {
  font-family: 'Shippori Mincho', serif;
  font-size: 36px;
  font-weight: 700;
  color: rgba(180, 138, 65, 0.4); /* ゴールドの半透明重ね */
  position: absolute;
  bottom: 12px;
  right: 16px;
  line-height: 1;
}

.commitment-card-info {
  width: 100%;
}

.commitment-card-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px; /* Part1：おいしさへのこだわり 18px */
  color: #0a1e37;
  letter-spacing: 0.14em; /* letter-spacing 14% */
  line-height: 1.2;
  margin-bottom: 12px; /* 下余白 12px */
  padding-bottom: 12px;
  border-bottom: 1px solid #B48A41; /* border-bottom: 1px solid #B48A41 */
}

.commitment-card-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 12px; /* 本文 12px */
  color: #3d3d3d;
  line-height: 2.0; /* line-height 200% */
  letter-spacing: 0.04em; /* letter-spacing 4% */
  margin-bottom: 22px; /* 下余白 22px */
}

.commitment-card-text .u-pc-inline {
  display: none; /* スマホでは非表示 */
}

/* スライダー用矢印 (SP) */
.commitment-slider-arrows-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 24px;
}

.commitment-slider-arrow-sp {
  width: 36px; /* 直径の円形 36px */
  height: 36px;
  border: 1px solid #B48A41; /* ゴールド */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  transition: all 0.25s ease;
  user-select: none;
}

.commitment-slider-arrow-sp span,
.commitment-slider-arrow-sp {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 10px; /* 矢印 10px */
  color: #B48A41;
  line-height: 100%;
}

.commitment-slider-arrow-sp:active {
  background-color: #fbf9f4;
  transform: scale(0.95);
}

/* 詳しくはこちら / 至貴の商品一覧ボタン (SP) */
.commitment-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.commitment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px; /* width 210 */
  height: 52px; /* height 52 */
  border-radius: 26px; /* 52の半分で完全丸み */
  background-color: #0a1e37; /* background: #0A1E37 */
  color: #ffffff;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px; /* 詳しくはこちら 14px */
  letter-spacing: 0.2em; /* letter-spacing 20% */
  text-indent: 0.2em;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  border: 1px solid #0a1e37;
}

.commitment-btn:active {
  opacity: 0.85;
}

/* ============================================
   ブログセクション (SP)
   ============================================ */
.blog-section {
  padding: 56px 16px; /* セクション内部上下余白56px */
  background-color: #ffffff;
  display: block;
}

.blog-container {
  width: 100%;
}

.blog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.blog-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Blog 下部余白 9px */
}

.blog-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.blog-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Blog フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.blog-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* ブログ フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 20px; /* 下部余白 20px */
}

/* グリッドレイアウト (SP - 2カラム並列) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 12px; /* カード自身のマージン20pxと合わせて美しく調整 */
  width: 100%;
  margin-bottom: 24px;
}

.blog-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-item-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  margin-bottom: 10px; /* 画像下余白 10px */
  border-radius: 4px;
  overflow: hidden;
  order: 1;
}

.blog-item-img-placeholder {
  position: absolute;
  inset: 0;
  background-color: #e5e0d4; /* 灰色プレースホルダー */
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-placeholder-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(10, 30, 55, 0.3); /* 薄いネイビー */
  line-height: 1;
}

.blog-item-date {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px; /* 日付 11px */
  color: #b48a41; /* ゴールド */
  line-height: 1;
  letter-spacing: 0.06em; /* letter-spacing 6% */
  text-indent: 0.06em;
  margin-bottom: 10px; /* 日付下余白 10px */
  order: 2;
}

.blog-item-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 13px; /* テキスト 13px */
  color: #0a1e37;
  line-height: 1.7; /* line-height 170% */
  letter-spacing: 0.06em; /* letter-spacing 6% */
  text-indent: 0.06em;
  margin-bottom: 20px; /* item下部余白 20px */
  order: 3;
}

/* もっと見るボタン (SP) */
.blog-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
}

.blog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px; /* width: 210 */
  height: 48px; /* height: 48 */
  border-radius: 24px; /* 完全角丸 */
  background-color: #0a1e37; /* background: #0A1E37 */
  color: #ffffff;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px; /* もっと見る 14px */
  letter-spacing: 0.2em; /* letter-spacing 20% */
  text-indent: 0.2em;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  border: 1px solid #0a1e37;
}

.blog-btn:active {
  opacity: 0.85;
}

/* ============================================
   店舗情報セクション (SP)
   ============================================ */
.shop-section {
  padding: 56px 16px; /* セクション内部余白 56px */
  background-color: #ffffff;
  display: block;
}

.shop-container {
  width: 100%;
}

.shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.shop-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Shop 下部余白 9px */
}

.shop-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.shop-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Shop フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.shop-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 店舗情報 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* タブヘッダー (SP) */
.shop-tabs {
  display: flex;
  width: 100%;
  height: 47px; /* 要素高さ 47px */
  border-bottom: 1px solid #e5e0d4; /* border-bottom: 1px solid #E5E0D4 */
  margin-bottom: 22px; /* margin-bottom: 22px */
}

.shop-tab-btn {
  flex: 1;
  height: 100%;
  background: none;
  border: none;
  border-bottom: 2px solid transparent; /* 初期状態は下線なし */
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.shop-tab-btn span {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700; /* 本店などテキスト Bold */
  font-size: 13px; /* フォントサイズ 13px */
  color: #0a1e37; /* color: #0A1E37 */
  letter-spacing: 0.06em; /* letter-spacing 6% */
  text-indent: 0.06em;
  line-height: 1;
  text-align: center;
}

/* アクティブなタブボタン (SP) */
.shop-tab-btn.is-active {
  border-bottom-color: #0a1e37; /* ブランド色のアクティブ下線 */
}

.shop-tab-btn.is-active span {
  color: #b48a41; /* アクティブ時にゴールドで美しく強調 */
}

/* タブコンテンツ (共通) */
.shop-tab-content {
  display: none; /* 初期状態は非表示 */
  width: 100%;
}

.shop-tab-content.is-active {
  display: block; /* アクティブ時に表示 */
}

.shop-details-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* マッププレースホルダー (SP) */
.shop-map-area {
  width: 100%;
  aspect-ratio: 16 / 10; /* カンプを忠実にトレースしたアスペクト比 */
  margin-bottom: 22px; /* margin-bottom: 22px */
  border-radius: 4px;
  overflow: hidden;
}

.shop-map-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f1ede4;
  background-image: 
    linear-gradient(rgba(229, 224, 212, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 224, 212, 0.5) 1px, transparent 1px);
  background-size: 20px 20px; /* Google Mapを模した美しいグリッド柄 */
  display: flex;
  flex-content: column;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.shop-map-pin {
  width: 24px;
  height: 32px;
  background-color: #b48a41;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: relative;
}

.shop-map-pin::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 7px;
}

.shop-map-label {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 500;
  color: #b48a41;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 店舗情報テキスト詳細 (SP) */
.shop-info-area {
  width: 100%;
}

.shop-store-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700; /* Bold */
  font-size: 18px; /* 大安本店（平安神宮東）フォントサイズ 18px */
  color: #0a1e37;
  letter-spacing: 0.12em; /* letter-spacing 12% */
  line-height: 1.3;
  margin-bottom: 16px;
}

.shop-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 各行の間隔 */
}

.shop-info-item {
  display: flex;
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-size: 12px; /* 住所等フォントサイズ 12px */
  color: #3d3d3d;
  line-height: 1.5; /* line-height 150% */
  letter-spacing: 0.04em; /* letter-spacing 4% */
}

.shop-info-label {
  flex-shrink: 0;
  font-weight: 500;
}

.shop-info-value {
  font-weight: 400;
}

/* ============================================
   最近チェックした商品セクション (SP)
   ============================================ */
.recent-section {
  padding: 56px 16px; /* セクション内部余白 56px */
  background-color: #ffffff;
  display: block;
}

.recent-container {
  width: 100%;
}

.recent-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.recent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Item 下部余白 9px */
}

.recent-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.recent-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Item フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.recent-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 最近チェックした商品 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* グリッド配置 (SP) */
.recent-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP: 2列配置 */
  gap: 24px 12px; /* 余白はgiftと同じ */
  margin-bottom: 24px;
}

.recent-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* カラムはみ出し防止 */
}

.recent-product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px; /* 画像下余白 8px */
  border-radius: 4px;
  overflow: hidden;
  background-color: #e5e0d4;
}

/* ============================================
   会社情報・会社概要セクション (SP)
   ============================================ */
.company-section {
  padding: 56px 16px; /* セクション内部余白 56px */
  background-color: #fbf9f4; /* プレミアムな白・淡いアイボリー系背景 */
  display: block;
}

.company-container {
  width: 100%;
}

.company-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.company-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Company 下部余白 9px */
}

.company-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.company-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Company フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.company-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 会社情報 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* 4枚のカードグリッド (SP: 2x2) */
.company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 0;
}

.company-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 1:1 正方形 */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10, 30, 55, 0.05);
  display: block;
}

.company-card-img-placeholder {
  position: absolute;
  inset: 0;
  background-color: #3d3d3d;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

/* 極めて精巧な背景グラデーション/パターン（実際の画像が無い場合の美しい意図的な表現） */
.company-card-img-placeholder--1 {
  background-image: 
    linear-gradient(rgba(10, 30, 55, 0.4), rgba(10, 30, 55, 0.65)),
    url('../img/cta-01.jpg');
}

.company-card-img-placeholder--2 {
  background-image: 
    linear-gradient(rgba(10, 30, 55, 0.4), rgba(10, 30, 55, 0.65)),
    url('../img/cta-02.jpg');
}

.company-card-img-placeholder--3 {
  background-image: 
    linear-gradient(rgba(10, 30, 55, 0.4), rgba(10, 30, 55, 0.65)),
    url('../img/cta-03.jpg');
}

.company-card-img-placeholder--4 {
  background-image: 
    linear-gradient(rgba(10, 30, 55, 0.4), rgba(10, 30, 55, 0.65)),
    url('../img/cta-04.jpg');
}

/* FAQ用の大きな「？」マーク */
.company-card-img-placeholder--4::before {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 72px;
  font-weight: 500;
  color: rgba(232, 213, 168, 0.15); /* ゴールド半透明の大きな？ */
  line-height: 1;
}

.company-card-overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 日本語を左下に */
  z-index: 3;
}

.company-card-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px; /* 日本語ラベル 14px */
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.company-card-en {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 12px; /* 英語表記 12px */
  color: #b48a41; /* ゴールド */
  writing-mode: vertical-rl; /* 縦書き指定（プロ仕様） */
  text-orientation: mixed;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* ============================================
   フッターセクション (SP)
   ============================================ */
.footer {
  background-color: #0a1e37; /* background: #0A1E37 */
  padding: 46px 16px; /* セクション内部上下余白 46px */
  display: block;
}

/* アコーディオン (SP) */
.footer-accordions {
  width: 100%;
  margin-bottom: 40px;
}

.footer-accordion-item {
  /* 見出し上下の薄いボーダーは削除 */
}

.footer-accordion-item:first-child {
  /* 見出し上下の薄いボーダーは削除 */
}

.footer-accordion-trigger {
  width: 100%;
  height: 46px; /* スマホの高さは46pxに */
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* 見出しのテキストは中央揃え */
  cursor: pointer;
  outline: none;
}

.footer-accordion-trigger span:first-child {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-size: 16px; /* font-size: 16px */
  color: #e8d5a8; /* color: #E8D5A8 */
  letter-spacing: 0.16em; /* letter-spacing 16% */
  text-indent: 0.16em;
  line-height: 1;
}

.accordion-icon {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 18px;
  color: #e8d5a8;
  line-height: 1;
  transition: transform 0.25s ease;
}

.footer-accordion-trigger.is-active .accordion-icon {
  transform: rotate(180deg);
}

.footer-accordion-content {
  display: none; /* 初期非表示 */
  width: 100%;
}

.footer-accordion-inner {
  padding-bottom: 24px;
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 12px;
  color: #e5e0d4; /* 読みやすい淡灰文字 */
  line-height: 1.8;
}

.footer-accordion-inner p {
  margin-bottom: 12px;
}

.footer-accordion-sub-block {
  margin-top: 16px;
  border-left: 2px solid #b48a41;
  padding-left: 12px;
}

.footer-accordion-sub-title {
  font-weight: 700;
  color: #e8d5a8;
  display: block;
  margin-bottom: 4px;
}

/* クレジットロゴ (共通) */
.credit-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.company-guide-payment-img-wrapper {
  margin-top: 8px;
  margin-bottom: 8px;
  width: 100%;
}

.company-guide-payment-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.credit-logo {
  font-family: 'Shippori Mincho', serif;
  font-size: 9px;
  font-weight: 700;
  color: #0a1e37;
  background-color: #ffffff;
  padding: 3px 8px;
  border-radius: 2px;
  line-height: 1;
  border: 1px solid #e5e0d4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.credit-logo--visa { color: #1a1f71; border-color: #1a1f71; }
.credit-logo--master { color: #eb001b; border-color: #eb001b; }
.credit-logo--diners { color: #0079ac; border-color: #0079ac; }
.credit-logo--amex { color: #016fd0; border-color: #016fd0; }
.credit-logo--jcb { color: #002e74; border-color: #002e74; }

.u-text-warn-sp {
  color: #ff9b9b !important; /* 警告は淡赤で注目度確保 */
  font-weight: 500;
}

.footer-accordion-shipping {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.shipping-fee-pill-sp {
  background-color: #b48a41;
  color: #ffffff;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 2px;
  line-height: 1.2;
}

.shipping-fee-detail-sp {
  font-weight: 700;
  color: #e8d5a8;
}

.footer-contact-block {
  margin-top: 14px;
  background-color: rgba(255, 255, 255, 0.04);
  padding: 12px;
  border-radius: 4px;
}

.footer-contact-title {
  font-weight: 700;
  color: #e8d5a8;
  display: block;
  margin-bottom: 6px;
}

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* フッターコンテナ・ロゴ・SNS (SP) */
.footer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px; /* スマホ、返品・交換についてと、ロゴの合間に余白を付ける */
}

.footer-logo-area {
  margin-bottom: 24px;
}

.footer-logo-img {
  display: block;
  width: 120px; /* SPサイズ: 120px */
  height: auto;
  margin: 0 auto;
}

.sns-img {
  width: 32px; /* スマホ 32pxで画像を表示 */
  height: 32px;
  display: block;
}

/* 心のこもったおつけもの 大安 */
.footer-logo-box {
  border: 1px solid #ffffff;
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.footer-logo-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  color: #ffffff;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  line-height: 1;
}

.footer-logo-main {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  margin-bottom: 2px;
  line-height: 1.1;
}

.footer-logo-kana {
  font-family: 'Shippori Mincho', serif;
  font-size: 9px;
  color: #ffffff;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  line-height: 1;
}

.footer-sns-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.footer-sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.25s ease;
}

.footer-sns-link:active {
  transform: scale(0.95);
}

.sns-svg {
  width: 18px;
  height: 18px;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  margin-bottom: 24px;
}

/* フッターリンク (SP) */
.footer-nav {
  width: 100%;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* 各行の間隔 16px */
}

.footer-nav-link {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-size: 12px; /* 会社概要 12px */
  color: #e8d5a8; /* background: #E8D5A8 (文字色の意図) */
  letter-spacing: 0.12em; /* letter-spacing 12% */
  text-indent: 0.12em;
  line-height: 1;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* ============================================

/* ============================================
   PC (768px以上)
   ============================================ */
@media (min-width: 768px) {
  .top-bar {
    padding: 12px 24px;
  }

  .top-bar__text {
    font-size: 14px;
    gap: 24px;
  }

  /* ヘッダー切り替え */
  .header-sp {
    display: none;
  }

  .header-pc {
    display: block;
  }

  /* レスポンシブ非表示制御 */
  .u-sp-only {
    display: none !important;
  }

  /* PCヘッダー上部（155px） */
  .header-pc__top {
    height: 155px; /* 仕様指定の高さ */
    border-bottom: 1px solid #e5e0d4;
    background-color: #ffffff;
    display: flex;
    align-items: center;
  }

  .header-pc__container {
    width: 100%;
    max-width: 1200px; /* 仕様指定のコンテンツ幅 */
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 左側：検索エリア */
  .header-pc__search {
    width: 380px; /* 検索窓自体の幅は280pxに抑えつつ、サジェストをロゴ側へ広げるため全体幅を380pxに拡張 */
  }

  .search-input-wrapper {
    position: relative;
    width: 280px; /* 仕様：検索窓 280px */
  }

  .search-input {
    width: 100%;
    height: 38px; /* 仕様：高さ38px */
    padding: 0 36px 0 16px;
    border: 1px solid #3d3d3d;
    border-radius: 19px; /* 高さの半分で完全な角丸に */
    font-size: 14px; /* 仕様：フォント14px */
    color: #3d3d3d;
    outline: none;
    background-color: #ffffff;
    font-family: inherit;
  }

  .search-input::placeholder {
    color: #b3b3b3;
  }

  .search-submit {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; /* 仕様：サーチボタン縦横18px */
    height: 18px;
  }

  .search-icon {
    width: 18px; /* 仕様：サーチボタン縦横18px */
    height: 18px;
    background-color: transparent !important; /* 背景色は不要 */
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .search-suggestions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: nowrap; /* 仕様：改行無しに */
  }

  .search-suggestion-pill {
    font-size: 12px;
    color: #3d3d3d;
    background-color: #f0ebe0; /* 薄い黄色の背景 */
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap; /* テキスト改行防止 */
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .search-suggestion-pill:hover {
    background-color: #B48A41; /* アクセントカラー */
    color: #ffffff;
  }

  /* 中央：ロゴエリア */
  .header-pc__logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-pc__subtitle {
    font-size: 16px; /* 仕様指定のフォントサイズ */
    color: #3d3d3d;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
  }

  .header-pc__logo img {
    height: 80px;
    width: auto;
    display: block;
  }

  /* 右側：ユーティリティリンク */
  .header-pc__utility {
    display: flex;
    gap: 20px;
    width: 320px;
    justify-content: flex-end;
  }

  .utility-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
  }

  .utility-link:hover {
    color: #B48A41; /* アクセントカラー */
  }

  .utility-link__icon-wrapper {
    width: 30px; /* 仕様：アイコン縦横30px */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .utility-icon {
    width: 30px; /* 仕様：アイコン縦横30px */
    height: 30px;
  }

  .utility-link__text {
    font-size: 14px; /* 仕様指定のフォントサイズ */
    font-weight: 500;
    white-space: nowrap;
  }

  /* PCヘッダー下部：グローバルナビゲーション（64px） */
  .header-pc__nav {
    height: 64px; /* 仕様指定の高さ */
    border-bottom: 1px solid #e5e0d4;
    background-color: #ffffff;
    position: relative; /* 子要素のdropdown-menuの基準位置にするため */
  }

  .header-pc__nav-container {
    max-width: 1200px; /* 仕様指定のコンテンツ幅 */
    margin: 0 auto;
    padding: 0; /* 1200pxを超えないよう左右のpaddingを0に調整 */
    height: 100%;
  }

  .nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
  }

  .nav-item {
    flex: auto; /* 仕様：すべての要素を同じ幅にせず、テキストプラス左右均等の横幅（flex: auto）で1200pxに自動充填 */
    height: 100%;
    /* dropdown-menuを画面全幅にするため、relativeを解除して親の.header-pc__navを基準にする */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-item + .nav-item .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px; /* 仕様：縦線の高さを16pxに設定 */
    background-color: #e5e0d4; /* 薄い黄色のライン */
  }

  .nav-link {
    font-family: 'Shippori Mincho', serif; /* 仕様：フォントを明朝系に */
    font-size: 16px; /* 仕様指定のフォントサイズ */
    font-weight: 500;
    color: #3d3d3d;
    letter-spacing: 0.18em; /* 仕様：PCナビゲーションのテキストの文字間を18%に設定 */
    text-indent: 0.18em; /* 文字間を広げた際の右側へのはみ出し・ズレを中央に戻すためのインデント */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative; /* 縦の区切り線の基準にするためrelativeを設定 */
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .nav-item:hover .nav-link {
    color: #B48A41; /* アクセントカラー */
    background-color: #fcfbfa;
  }

  /* ホバー時プルダウンメニューの仕組み */
  .dropdown-menu {
    position: absolute; /* 親の.header-pc__navを基準にするためabsoluteに変更 */
    top: 100%; /* ナビゲーションの直下に配置 */
    left: 0;
    transform: none;
    width: 100%; /* 親の.header-pc__navは全幅なので、100%で画面全幅に */
    background-color: #0a1e37; /* 仕様：背景全幅、青系背景（ダークネイビー） */
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 99;
  }

  /* 画面幅が1200pxより大きい場合などの位置ずれ防止のため、親のnav-itemのhoverで表示 */
  .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }

  .dropdown-menu__inner {
    padding: 40px 0; /* 仕様：文字エリアと背景の上下余白は40px */
    text-align: left;
    width: 100%;
  }

  .dropdown-menu__container {
    max-width: 1200px; /* 仕様：文字コンテンツセクションmax-width 1200 */
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
  }

  /* 左側の金色インジケータ */
  .dropdown-menu__indicator {
    width: 3px;
    background-color: #B48A41; /* ゴールド */
    flex-shrink: 0;
    align-self: stretch; /* リストの高さ（1行なら58px、2行なら116px）に合わせて自動的に伸縮 */
  }

  /* メニューリスト */
  .dropdown-menu__list {
    list-style: none;
    flex: 1;
    display: grid;
    gap: 0; /* 行の高さ58pxで制御するためgapは0 */
    box-sizing: border-box;
  }

  /* 5列グリッド配置 */
  .dropdown-menu__list--cols-5 {
    grid-template-columns: repeat(15, 1fr); /* 5列（1行目）と3列（2行目）の最小公倍数である15カラムでグリッドを構成 */
  }

  .dropdown-menu__item {
    height: 58px; /* 仕様：行の高さは58px */
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08); /* 薄い白線で縦に区切る（カンプ画像準拠） */
    box-sizing: border-box;
  }

  /* 1行目（1〜5番目のアイテム）は5等分（3カラム分ずつ占有） */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:nth-child(-n+5) {
    grid-column: span 3;
  }

  /* 2行目（6番目以降のアイテム）は3等分（5カラム分ずつ占有） */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:nth-child(n+6) {
    grid-column: span 5;
  }

  /* コンテンツをホバーした時に表示されるメニューは2行目5等分（3カラム分ずつ占有） */
  .dropdown-menu__list--contents .dropdown-menu__item:nth-child(n+6) {
    grid-column: span 3;
    border-right: 1px solid rgba(255, 255, 255, 0.08); /* 2行目5等分なので右線を復活させる */
  }
  .dropdown-menu__list--contents .dropdown-menu__item:last-child {
    border-right: none !important; /* 最後のアイテム（10番目）は右線を消す */
  }

  /* 縦の区切り線の制御 */
  /* 1行目の右端（5番目）は右線を消す */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:nth-child(5) {
    border-right: none;
  }

  /* 2行目の右端（8番目＝最後のアイテム）は右線を消す */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:last-child {
    border-right: none;
  }

  /* 2行以上ある場合に、1行目のアイテム（1〜5番目）に下線を引く */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:nth-child(-n+5) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* 総数が5個以下の場合は、1行目（＝最終行）なので下線を引かない */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:first-child:nth-last-child(-n+5),
  .dropdown-menu__list--cols-5 .dropdown-menu__item:first-child:nth-last-child(-n+5) ~ .dropdown-menu__item {
    border-bottom: none;
    grid-column: span 3 !important; /* 5個以下の場合は常に5等分（3カラム分）で表示 */
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important; /* 5個以下の時の右線をリセット */
  }

  /* 5個以下の時の右端（5番目）は右線を消す */
  .dropdown-menu__list--cols-5 .dropdown-menu__item:first-child:nth-last-child(-n+5) ~ .dropdown-menu__item:nth-child(5n) {
    border-right: none !important;
  }

  .dropdown-menu__link {
    font-family: 'Shippori Mincho', serif; /* 明朝系 */
    font-size: 15px; /* 仕様：テキストは 15px */
    font-weight: 500;
    color: #ffffff; /* ダークネイビー背景に白文字 */
    letter-spacing: 0.06em; /* 仕様：文字間6% */
    text-indent: 0.06em; /* 文字間ズレ補正 */
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 24px; /* 左右に均等な余白を設ける */
    box-sizing: border-box;
    transition: color 0.2s ease;
  }

  /* 矢印なし・中央揃えメニュー用のスタイル（ご予算で選ぶ、コンテンツ） */
  .dropdown-menu__list--centered .dropdown-menu__link {
    justify-content: center;
    padding: 0;
  }

  .dropdown-menu__link:hover {
    color: #B48A41; /* ホバー時はアクセントカラー(ゴールド) */
  }

  .dropdown-menu__arrow {
    font-family: 'Shippori Mincho', serif; /* 仕様：矢印はshipporiフォントで */
    font-size: 16px;
    color: #B48A41; /* ゴールド */
    font-weight: 400;
    transition: transform 0.2s ease;
  }

  .dropdown-menu__link:hover .dropdown-menu__arrow {
    transform: translateX(4px); /* ホバー時に矢印が少し右にスライドする上品な演出 */
  }

  /* ============================================
     お知らせセクション (PC)
     ============================================ */
  .news-section {
    padding: 36px 24px; /* 仕様：セクション内上下余白 36px */
  }

  .news-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* 縦方向は上揃え */
    justify-content: space-between;
  }

  .news-title-block {
    width: 250px; /* タイトル部分の固定幅 */
    flex-shrink: 0;
    margin-bottom: 0;
    gap: 16px;
    margin-top: 12px; /* 1行目のニュースアイテムのテキスト上端と揃えるためのマージンを10pxパディングに合わせて微調整 */
  }

  .news-title-indicator {
    width: 3px;
    height: 22px; /* タイトル(22px)の高さに合わせる */
  }

  .news-title {
    font-size: 22px;
    letter-spacing: 0.32em; /* 仕様：letter-spacing 32% */
    text-indent: 0.32em; /* 文字間ズレ補正 */
  }

  .news-list {
    flex: 1;
    margin-left: 40px; /* タイトルとリストの間の余白 */
  }

  .news-link {
    display: flex;
    align-items: center; /* 日付とテキストを縦方向中央揃えに */
    padding: 10px 0; /* 仕様：記事一覧一つのアイテムの内部上下余白 10px */
  }

  .news-date {
    width: auto; /* width固定を解除して右マージンで制御 */
    margin-right: 24px; /* 仕様：日付の右余白 24px */
    flex-shrink: 0;
    font-size: 15px;
    letter-spacing: 0.08em; /* 仕様：letter-spacing 8% */
    margin-bottom: 0;
  }

  .news-item-text {
    font-size: 15px;
    letter-spacing: 0.04em; /* 仕様：letter-spacing 4% */
    line-height: 1.5;
  }

  /* ============================================
     ヒーローセクション (PC)
     ============================================ */
  .hero-section {
    height: 600px; /* 仕様：ヒーローセクションの高さは600px */
  }

  .hero-subtitle {
    font-size: 32px; /* 仕様：PC 32px */
    line-height: 1.4;
  }

  .hero-title {
    font-size: 56px; /* 仕様：PC 56px */
    line-height: 1.5;
    margin-top: 32px; /* 仕様：サブタイトルのした32pxの余白 */
  }

  /* ============================================
     ギフトセクション (PC)
     ============================================ */
  .gift-section {
    padding: 100px 0; /* PC用のゆったりとした余白設計 */
    overflow: hidden; /* 背景幾何学デコ（main_itembg）のはみ出しによる横スクロール発生を防止 */
  }

  .gift-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .gift-header {
    margin-bottom: 60px; /* 仕様：詰め合わせ／贈り物 下との余白 60px */
  }

  .gift-tag {
    gap: 12px;
    margin-bottom: 32px; /* 仕様：Gift 下との余白 32px */
  }

  .gift-tag-icon {
    width: 18px; /* PC用に一回り大きく高精細にスケールアップ（18px x 28px） */
    height: 28px;
  }

  .gift-tag-text {
    font-size: 22px; /* 仕様：Gift 22px */
  }

  .gift-title {
    font-size: 38px; /* 仕様：詰め合わせ／贈り物 38px */
  }

  /* itemBox1：PC */
  .gift-intro-card {
    display: flex;
    align-items: center; /* 左右の中央揃え */
    justify-content: space-between;
    margin-bottom: 80px; /* グリッドとの間隔 */
    gap: 5%;
    position: relative; /* 左右の背景画像を絶対配置するための基準 */
  }

  /* 左右の背景装飾画像 (PCのみ) */
  .gift-intro-card::before,
  .gift-intro-card::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* 余白を埋める幅で可変：1200pxコンテナ外側の片側余白（100vwから1200pxを引いて2で割ったサイズ） */
    width: calc((100vw - 1200px) / 2);
    min-width: 100px; /* 最小幅は100pxを維持（これ以上小さくならない） */
    height: 600px; /* 仕様：高さは600pxに変更 */
    background-repeat: no-repeat;
    background-size: contain; /* 上下左右とも見切れることなく、画像全体が必ず常に領域内に収まるように縮小・拡大表示 */
    pointer-events: none;
    z-index: -2; /* コンテンツの下に完全に回り込ませるため、バナー（z-index: -1など）より下に配置 */
    display: none; /* デフォルト（スマホ・タブレット・1300px以下のPC）では非表示 */
  }

  /* 画面幅が1301px以上の時のみ、背景装飾画像を表示 */
  @media (min-width: 1301px) {
    .gift-intro-card::before,
    .gift-intro-card::after {
      display: block;
    }
  }

  /* 左：main_itembg01.png */
  .gift-intro-card::before {
    left: calc(((100vw - 1200px) / 2) * -1); /* 1200pxコンテナの左外側へ浮かせて配置 */
    background-image: url("../img/main_itembg01.png");
    background-position: right center; /* コンテンツ部分に被らないよう、画像の右端をコンテナ境界に固定して外側へ広げる */
  }

  /* 右：main_itembg02.png */
  .gift-intro-card::after {
    right: calc(((100vw - 1200px) / 2) * -1); /* 1200pxコンテナの右外側へ浮かせて配置 */
    background-image: url("../img/main_itembg02.png");
    background-position: left center; /* コンテンツ部分に被らないよう、画像の左端をコンテナ境界に固定して外側へ広げる */
  }

  .gift-intro-img-wrapper {
    width: 47.5%; /* 仕様：画像 47.5% */
    margin-bottom: 0;
    aspect-ratio: 3 / 2; /* 黄金比に近い横長比率 */
  }

  .gift-intro-img-fallback-text {
    font-size: 15px;
  }

  .gift-intro-content {
    width: 47.5%; /* 仕様：テキストエリア 47.5% */
    align-items: flex-start;
    text-align: left;
    height: 100%;
  }

  .gift-intro-subtitle {
    font-size: 30px; /* 仕様：贈り物のおつけもの 30px */
    letter-spacing: 0.18em; /* 仕様：letter-spacing 18% */
    text-indent: 0.18em; /* 文字間ズレ補正 */
    margin-bottom: 28px; /* 仕様：下との余白 28px */
  }

  .gift-intro-text {
    font-size: 15px; /* 仕様：文章 15px */
    letter-spacing: 0.06em; /* 仕様：letter-spacing 6% */
    line-height: 2.20; /* 仕様：line-height 220% */
    margin-bottom: 0;
  }

  .gift-intro-text .u-pc-inline {
    display: inline; /* PC用の追加文章を表示 */
  }

  .gift-more-btn--sp {
    display: none; /* PCではSP用ボタンを非表示 */
  }

  .gift-more-btn--pc {
    width: 250px; /* PC用：少し大きめでゆったりした幅設計 */
    height: 52px;
    border-radius: 26px;
    background-color: #0a1e37;
    border: 1px solid #0a1e37;
    color: #ffffff;
    cursor: pointer;
  }

  .gift-more-btn--pc:hover {
    background-color: transparent;
    color: #0a1e37; /* ホバー時に上品に反転 */
  }

  /* itemBox2：PC */
  .gift-product-grid {
    grid-template-columns: repeat(4, 1fr); /* 仕様：PCは4列グリッド */
    gap: 40px 24px;
    margin-bottom: 60px;
  }

  .gift-product-img-wrapper {
    margin-bottom: 10px; /* 仕様：画像の下部余白 10px */
  }

  .gift-product-img-fallback {
    padding: 16px;
  }

  .gift-product-img-fallback-title {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .gift-product-img-fallback-subtitle {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .gift-product-img-fallback-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
  }

  .gift-badge {
    font-size: 12px; /* 仕様：クール便/送料無料 12px */
    letter-spacing: 0.16em; /* 仕様：letter-spacing 16% */
    padding: 4px 8px;
  }

  .gift-product-title {
    font-size: 18px; /* 仕様：商品名 18px */
    letter-spacing: 0.1em; /* 仕様：letter-spacing 10% */
    text-indent: 0.1em; /* 文字間ズレ補正 */
    margin-bottom: 12px;
    /* 仕様：min-height: 2.8em; → いらない */
  }

  .gift-product-desc {
    font-size: 14px; /* 仕様：説明文 14px */
    margin-bottom: 12px;
    border-bottom: 1px solid #E5E0D4; /* 仕様：商品簡易説明文が一行入ります。の下に横線入れる */
    padding-bottom: 12px; /* 横線との間に余白を確保 */
  }

  .gift-product-price-row {
    margin-bottom: 16px;
  }

  .gift-price-label {
    font-size: 14px; /* 仕様：価格 14px */
    letter-spacing: 0.08em; /* 仕様：letter-spacing 8% */
  }

  .gift-price-value {
    font-size: 22px; /* 仕様：4,980円 22px */
  }

  .gift-price-unit {
    font-size: 15px;
    margin-right: 6px;
  }

  .gift-price-tax {
    font-size: 12px; /* 仕様：(税込) 12px */
  }

  .gift-product-btn-wrapper {
    justify-content: flex-start;
  }

  .gift-product-btn {
    width: 100%; /* PCはカードの横幅に広げる */
    max-width: 100%;
    height: auto;
    padding: 14px 0; /* 仕様：天地余白 14px */
    border-radius: 25px; /* 高さ（約46px）の半分に近い上品な角丸丸み */
    font-size: 14px;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    margin-bottom: 0;
  }

  .gift-more-btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* ============================================
     ランキングセクション (PC)
     ============================================ */
  .ranking-section {
    padding: 116px 0 0px; /* 上116px 下130px */
  }

  .ranking-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .ranking-header {
    margin-bottom: 120px;
  }

  .ranking-tag {
    gap: 12px;
    margin-bottom: 32px;
  }

  .ranking-tag-icon {
    width: 18px;
    height: 28px;
  }

  .ranking-tag-text {
    font-size: 22px;
  }

  .ranking-title {
    font-size: 38px;
  }

  /* PCは5列グリッドの2行（合計10アイテム）で構成 */
  .ranking-product-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 90px 24px; /* 仕様：上がったバッジ分（50px）要素が重なるので、元の縦ギャップ（40px）に50pxを追加して【90px】に変更 */
    margin-bottom: 60px;
    margin-top: 50px; /* 1行目のバッジが上の要素（ヘッダー）と重ならないように、グリッド上部にも50pxの余白を追加 */
  }

  /* PCでのみ表示するアイテムクラス */
  .u-pc-only {
    display: flex !important;
  }

  /* SP用の第6位カードの個別設定をPCで初期化 */
  .ranking-product-card--sp-last {
    display: flex !important;
  }

  .ranking-product-img-wrapper {
    margin-bottom: 10px; /* 画像下部余白 10px */
    /* overflow: hiddenの削除（SPの削除設定を継承） */
    border-radius: 4px;
    overflow: visible; /* 親のoverflow: hiddenの影響を確実に打ち消すために念のため設定 */
  }

  .ranking-badge {
    top: -50px; /* 仕様：画像を上げた分上に逃がす（-50px） */
    left: 0; /* 仕様：left: 0 */
    width: 50px; /* PC用：やや大きめ（50px正方形）にスケールアップ */
    height: 50px;
    font-size: 18px;
    padding-bottom: 4px;
  }

  .ranking-product-img-fallback {
    padding: 16px;
    /* padding-topを削除：バッジが画像自体の左上に重なるため、フォールバック内の余白は上下均等でOK */
  }

  .ranking-product-img-fallback-title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .ranking-product-img-fallback-subtitle {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .ranking-product-img-fallback-logo {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
  }

  .ranking-more-btn-wrapper {
    margin-top: 40px;
  }

  .ranking-more-btn {
    width: 250px; /* PC用ボタン幅 */
    height: 52px;
    border-radius: 26px;
    background-color: #0a1e37;
    border: 1px solid #0a1e37;
    color: #ffffff;
    cursor: pointer;
  }

  .ranking-more-btn:hover {
    background-color: transparent;
    color: #0a1e37; /* ホバーで上品に反転 */
  }

  /* ============================================
     イベント／特集情報セクション (PC)
     ============================================ */
  .event-section {
    padding: 10px 0 100px;; /* セクション内上下余白は100px */
    background-color: #ffffff;
  }

  .event-container {
    max-width: 1200px; /* 画像3枚がmax-width 1200px */
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
  }

  .event-header {
    margin-bottom: 60px; /* ヘッダー下マージン */
  }

  .event-tag {
    gap: 12px;
    margin-bottom: 32px; /* EVENT下余白 */
  }

  .event-tag-icon {
    width: 24px; /* PC用スケールアップ */
    height: 38px;
  }

  .event-tag-text {
    font-size: 38px; /* EVENTフォントサイズ 38px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .event-title {
    font-size: 22px; /* イベント／特集情報フォントサイズ 22px */
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    margin-bottom: 0; /* PCヘッダー下マージンがあるので0に */
  }

  /* PCスライダーのレイアウト */
  .event-slider-outer {
    position: relative;
    width: 100%;
  }

  .event-swiper {
    width: 100%;
    margin-bottom: 0;
    overflow: hidden; /* PC用でも不意のはみ出しを確実に防止 */
  }

  /* 矢印ボタン (PC用) */
  .event-slider-arrow {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px; /* 60px 直径の円形 */
    height: 60px;
    border: 1px solid #B48A41; /* ゴールド */
    border-radius: 50%;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    user-select: none;
  }

  .event-slider-arrow span {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 24px;
    color: #B48A41;
    line-height: 100%;
  }

  .event-slider-arrow--prev {
    left: -92px; /* 画像から32px離す (矢印の幅60px + 32px = 92px) */
  }

  .event-slider-arrow--next {
    right: -92px; /* 画像から32px離す */
  }

  /* 画面幅が狭くなったとき（1384px未満）の矢印ボタンの保護調整：画面からはみ出さないように自動で内側へ引き寄せる */
  @media (max-width: 1380px) {
    .event-slider-arrow--prev {
      left: -20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }
    .event-slider-arrow--next {
      right: -20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }
  }

  @media (max-width: 1240px) {
    .event-slider-arrow--prev {
      left: 10px;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    .event-slider-arrow--next {
      right: 10px;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
  }

  .event-slider-arrow:hover {
    background-color: #0a1e37; /* 青系背景で反転 */
    border-color: #0a1e37;
  }

  .event-slider-arrow:hover span {
    color: #ffffff; /* 白文字に反転 */
  }

  /* SP用のスライダー下矢印はPCでは不要 */
  .event-slider-arrows-sp {
    display: none;
  }

  .event-slide-img-wrapper {
    aspect-ratio: 16 / 10;
  }

  /* ============================================
     お客様の声セクション (PC)
     ============================================ */
  .voice-section {
    padding: 100px 0; /* セクション内上下余白は100px */
    background-color: #ffffff;
  }

  .voice-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .voice-header {
    margin-bottom: 60px;
  }

  .voice-tag {
    gap: 12px;
    margin-bottom: 32px; /* Voice 下余白 32px */
  }

  .voice-tag-icon {
    width: 18px; /* PCサイズへスケール */
    height: 28px;
  }

  .voice-tag-text {
    font-size: 22px; /* Voice 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .voice-title {
    font-size: 38px; /* お客様の声 38px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 32px; /* 下部余白 32px */
  }

  .voice-subtitle-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; /* PCでは一列に並べるための隙間 */
  }

  .voice-subtitle-line1,
  .voice-subtitle-line2 {
    font-size: 16px; /* ありがとうございます / お客様からレビュー... 16px */
    letter-spacing: 0.06em; /* letter-spacing 6% */
    line-height: 1; /* 横一列に並ぶためline-heightは100% (1) */
  }

  /* レビューリスト：2行、3列 */
  .voice-grid-container {
    display: grid !important; /* PCではSwiperを解除しGrid表示 */
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 24px; /* カード同士の間隔 */
    width: 100%;
  }

  .voice-item-wrapper {
    width: auto !important; /* Swiperスライド用のwidth指定をクリア */
    height: auto !important;
  }

  .voice-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 12px; /* 1行目（画像とヘッダー）と2行目（bodyテキスト）の余白 */
    border: 1px solid #E5E0D4;
    border-radius: 4px;
    padding: 16px; /* 要素内部余白 16px */
    box-sizing: border-box;
    background-color: #ffffff;
    min-height: 172px; /* 高さを揃える */
    align-items: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .voice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  }

  .voice-card-img-placeholder {
    grid-column: 1 / 2;
    grid-row: 1 / 2; /* PCでは画像は1行目のみ！2行目は全幅に空ける */
    width: 100px;
    height: 100px;
  }

  .voice-card-header-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2; /* 1行目の右側 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center; /* 商品名と★は画像の上下位置の中央に配置 */
    min-width: 0;
  }

  .voice-card-title {
    font-size: 16px; /* 商品名が入ります。 16px */
    letter-spacing: 0.1em; /* letter-spacing 10% */
    margin-bottom: 8px; /* margin-bottom 8px */
  }

  .voice-card-stars {
    font-size: 16px; /* ★★★★★ 16px */
    letter-spacing: 0.08em; /* letter-spacing 8% */
    margin-bottom: 0; /* 下中央揃えなので下余白は0に */
  }

  .voice-card-body {
    grid-column: 1 / 3; /* 2行目は画像の下も含めて全幅に対応して表示 */
    grid-row: 2 / 3;
    width: 100%;
  }

  .voice-card-text {
    font-size: 13px; /* 本文 13px */
    line-height: 1.9; /* line-height 190% */
    letter-spacing: 0.04em; /* letter-spacing 4% */
    margin-bottom: 14px; /* margin-bottom 14px */
    -webkit-line-clamp: 3; /* PCでも3行に揃えて綺麗に見せる */
  }

  .voice-card-more {
    font-size: 13px; /* 続きを見る ▶ 13px */
    letter-spacing: 0.08em; /* letter-spacing 8% */
  }

  .voice-card-more:hover {
    color: #0a1e37;
  }

  /* SP用のスライダー矢印はPCでは不要 */
  .voice-slider-arrows-sp {
    display: none;
  }

  /* ============================================
     中間イメージ画像セクション (PC)
     ============================================ */
  .mid-bg-section {
    height: 496px; /* 496pxの高さで画像を表示 */
  }

  /* ============================================
     「まいにちUMAMI野菜」宣言セクション (PC)
     ============================================ */
  .umami-section {
    padding: 110px 0; /* セクション内余白上下 110px */
  }

  .umami-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 美しい2カラム分割 */
    column-gap: 5%;
    row-gap: 0;
    align-items: center;
  }

  .umami-title {
    font-size: 42px; /* 「まいにちUMAMI野菜」宣言 42px */
    letter-spacing: 0.22em; /* letter-spacing 22% */
    text-indent: 0.22em;
    text-align: left; /* 左寄せ */
    margin-bottom: 30px; /* タイトルと本文の間 */
    line-height: 1.3;
    grid-column: 1;
    grid-row: 1;
  }

  .umami-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
    grid-column: 1;
    grid-row: 2;
  }

  .umami-text {
    font-size: 18px; /* 本文フォントサイズ 18px */
    line-height: 2.4; /* line-height 240% */
    letter-spacing: 0.1em; /* letter-spacing 10% */
    text-align: left; /* 左寄せ */
    margin-bottom: 40px; /* 本文とボタンの間 */
    max-width: 100%;
  }

  .umami-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    grid-column: 1;
    grid-row: 3;
  }

  .umami-btn {
    width: 317px; /* width 317 */
    height: 69px; /* height 69 */
    border-radius: 35px; /* 高さ（約69px）の半分に近い丸み */
    font-size: 17px; /* 詳しくはこちら 17px */
    letter-spacing: 0.32em; /* letter-spacing 32% */
    text-indent: 0.32em;
    transition: all 0.35s ease;
  }

  .umami-btn:hover {
    background-color: #ffffff; /* ホバーで反転 */
    color: #0A1E37;
  }

  .umami-image-area {
    width: 100%; /* 2カラムの2列目いっぱいに広げる */
    max-width: 100%;
    grid-column: 2;
    grid-row: 1 / 4; /* TitleからButtonまでの全域と高さを同期 */
    align-self: center;
  }

  .umami-image {
    aspect-ratio: 1.2 / 1; /* 横長を強め、カンプ比率を忠実にトレース */
    border-radius: 8px;
  }

  .umami-placeholder {
    aspect-ratio: 1.2 / 1; /* 横長を強め、カンプ比率を忠実にトレース */
    border-radius: 8px;
  }

  .umami-placeholder-inner {
    padding: 40px;
  }

  .umami-placeholder-en {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .umami-placeholder-main {
    font-size: 44px;
  }

  .umami-placeholder-sub {
    font-size: 36px;
    margin-top: 8px;
  }

  /* ============================================
     大安のこだわりセクション (PC)
     ============================================ */
  .commitment-section {
    padding: 110px 0; /* セクション内上下余白110px */
  }

  .commitment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .commitment-header {
    margin-bottom: 60px;
  }

  .commitment-tag {
    gap: 12px;
    margin-bottom: 32px; /* Commitment 下余白 32px */
  }

  .commitment-tag-icon {
    width: 18px;
    height: 28px;
  }

  .commitment-tag-text {
    font-size: 22px; /* Commitment 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .commitment-title {
    font-size: 38px; /* 大安のこだわり 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 32px;
  }

  .commitment-grid-container {
    display: grid !important; /* PCではGridレイアウトで3列並列に */
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
  }

  .commitment-item-wrapper {
    width: auto !important;
    height: auto !important;
  }

  .commitment-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform 0.3s ease;
  }

  .commitment-card:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }

  .commitment-card-img-wrapper {
    margin-bottom: 22px; /* 画像下余白 22px */
  }

  .commitment-card-number {
    font-size: 48px; /* PC用にスケールアップ */
    bottom: 16px;
    right: 24px;
  }

  .commitment-card-title {
    font-size: 20px; /* バランスの良い極上のフォントサイズ */
    letter-spacing: 0.14em;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }

  .commitment-card-text {
    font-size: 15px; /* 本文 15px */
    line-height: 2.15; /* line-height 215% */
    letter-spacing: 0.04em; /* letter-spacing 4% */
    margin-bottom: 50px; /* 下余白 50px */
  }

  .commitment-card-text .u-pc-inline {
    display: inline; /* PCでは表示 */
  }

  .commitment-buttons {
    flex-direction: row; /* 横並び配置 */
    justify-content: center;
    gap: 80px; /* 詳しくはこちら と 至貴の商品一覧 のボタンの間の余白を80pxに */
    margin-top: 24px;
  }

  .commitment-slider-arrows-sp {
    display: none !important; /* PC版ではスライダーが稼働しないため非表示に */
  }

  .commitment-btn {
    width: 369px; /* width 369 */
    height: 70px; /* height 70 */
    border-radius: 35px; /* 完全なカプセル角丸 */
    font-size: 18px; /* 詳しくはこちら / 至貴の商品一覧 18px */
    letter-spacing: 0.32em; /* letter-spacing 32% */
    text-indent: 0.32em;
    transition: all 0.35s ease;
  }

  .commitment-btn:hover {
    background-color: #ffffff; /* 白反転ホバー */
    color: #0a1e37;
    border-color: #0a1e37;
  }

  /* ============================================
     ブログセクション (PC)
     ============================================ */
  .blog-section {
    padding: 110px 0; /* セクション内部上下余白110px */
  }

  .blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .blog-header {
    margin-bottom: 60px;
  }

  .blog-tag {
    gap: 12px;
    margin-bottom: 32px; /* Blog 下部余白 32px */
  }

  .blog-tag-icon {
    width: 18px;
    height: 28px;
  }

  .blog-tag-text {
    font-size: 22px; /* Blog 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .blog-title {
    font-size: 38px; /* ブログ 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px; /* margin-bottom 60px */
  }

  .blog-grid {
    grid-template-columns: repeat(4, 1fr); /* PCは横並び4列 */
    column-gap: 24px;
    row-gap: 0;
    margin-bottom: 50px; /* 下部余白 */
  }

  .blog-item {
    transition: transform 0.3s ease;
  }

  .blog-item:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }

  .blog-item-img-wrapper {
    margin-bottom: 14px; /* 画像下余白 14px */
    order: 1; /* PC順序: 画像が一番上 */
  }

  .blog-item-text {
    font-size: 16px; /* テキスト 16px */
    letter-spacing: 0.08em; /* letter-spacing 8% */
    text-indent: 0.08em;
    margin-bottom: 14px; /* margin-bottom 14px */
    order: 2; /* PC順序: テキストが二番目 */
  }

  .blog-item-date {
    font-size: 13px; /* 日付 13px */
    letter-spacing: 0.08em; /* letter-spacing 8% */
    text-indent: 0.08em;
    margin-bottom: 10px; /* margin-bottom 10px */
    order: 3; /* PC順序: 日付が三番目 */
  }

  .blog-btn-wrapper {
    margin-top: 0;
  }

  .blog-btn {
    transition: all 0.35s ease;
  }

  .blog-btn:hover {
    background-color: #ffffff; /* 白反転ホバー */
    color: #0a1e37;
    border-color: #0a1e37;
  }

  /* ============================================
     店舗情報セクション (PC)
     ============================================ */
  .shop-section {
    padding: 110px 0; /* セクション内部余白 110px */
  }

  .shop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .shop-header {
    margin-bottom: 60px;
  }

  .shop-tag {
    gap: 12px;
    margin-bottom: 32px; /* Shop 下部余白 32px */
  }

  .shop-tag-icon {
    width: 18px;
    height: 28px;
  }

  .shop-tag-text {
    font-size: 22px; /* Shop 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .shop-title {
    font-size: 38px; /* 店舗情報 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px; /* margin-bottom 60px */
  }

  /* PC用大判店舗写真 */
  .shop-banners {
    width: 100%;
    margin-bottom: 50px;
    border-radius: 8px;
    overflow: hidden;
  }

  .shop-banner {
    display: none;
    width: 100%;
  }

  .shop-banner.is-active {
    display: block;
    animation: fadeIn 0.4s ease;
  }

  .shop-banner-placeholder {
    width: 100%;
    aspect-ratio: 1200 / 450; /* カンプを100%忠実にトレースした比率 */
    background-color: #e5e0d4;
    background-image: repeating-linear-gradient(45deg, #e0dacb, #e0dacb 10px, #e5e0d4 10px, #e5e0d4 20px); /* プレミアムな斜線パターン */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .shop-banner-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    font-weight: 500;
    color: rgba(10, 30, 55, 0.4);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  /* タブボタン (PC) */
  .shop-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラム並列 */
    gap: 30px; /* カンプに沿った綺麗な配置 */
    height: auto;
    border-bottom: none;
    margin-bottom: 50px; /* margin-bottom: 50px */
  }

  .shop-tab-btn {
    width: 100%;
    height: 104px; /* height: 104 */
    padding: 36px 32px; /* padding-top: 36px, etc. */
    border-width: 2px 1px 1px 1px; /* border-width: 2px, 1px, 1px, 1px */
    border-style: solid;
    border-color: #e5e0d4; /* border-color: #E5E0D4 */
    background-color: #ffffff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }

  .shop-tab-btn span {
    font-size: 22px; /* 本店などテキスト 22px */
    letter-spacing: 0.18em; /* letter-spacing 18% */
    text-indent: 0.18em;
    color: #0a1e37; /* background: #0A1E37 (文字色意図) */
    font-weight: 500;
    transition: all 0.3s ease;
  }

  /* ホバーおよびアクティブ (PC) */
  .shop-tab-btn:hover {
    background-color: #fbf9f4;
    border-color: #b48a41;
  }

  .shop-tab-btn.is-active {
    border-top-color: #0a1e37 !important; /* border-top-color: #0A1E37 (アクティブ時の上線) */
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 30, 55, 0.05); /* 高級感のある浮き上がり */
  }

  .shop-tab-btn.is-active span {
    color: #0a1e37; /* アクティブ文字色 */
    font-weight: 700;
  }

  /* タブコンテンツ詳細 (PC：横並び2カラム) */
  .shop-details-wrapper {
    flex-direction: row; /* 横並び */
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    width: 100%;
  }

  .shop-map-area {
    width: 47.5%; /* 左カラム：約半幅 */
    aspect-ratio: 1.4 / 1; /* 横長でダイナミックな比率 */
    margin-bottom: 0; /* 下余白のクリア */
  }

  .shop-map-placeholder {
    border-radius: 8px;
  }

  .shop-info-area {
    width: 47.5%; /* 右カラム：約半幅 */
  }

  .shop-store-name {
    font-size: 28px; /* 大安本店（平安神宮東）フォントサイズ 28px */
    letter-spacing: 0.18em; /* letter-spacing 18% */
    margin-bottom: 26px; /* margin-bottom: 26px */
  }

  .shop-info-list {
    gap: 16px; /* 各行の間隔をPC用に広げる */
  }

  .shop-info-item {
    font-size: 16px; /* 住所等 16px */
    line-height: 1.6; /* line-height 100%を可読性の高い1.6に */
    letter-spacing: 0.04em; /* letter-spacing 4% */
    /* 各行の margin-bottom は gap と line-height で表現するが、個別指定が必要な場合は以下 */
  }

  /* 店舗一覧ボタン (PC) */
  .shop-btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
  }

  .shop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px; /* width: 210 */
    height: 48px; /* height: 48 */
    border-radius: 24px; /* border-radius: 999px */
    background-color: #0a1e37; /* background: #0A1E37 */
    color: #ffffff;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: 14px; /* フォント 14px */
    letter-spacing: 0.2em; /* letter-spacing 20% */
    text-indent: 0.2em;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid #0a1e37;
    transition: all 0.35s ease;
  }

  .shop-btn:hover {
    background-color: #ffffff; /* 白反転ホバー */
    color: #0a1e37;
  }

  /* ============================================
     最近チェックした商品セクション (PC)
     ============================================ */
  .recent-section {
    padding: 110px 0; /* セクション内部余白 110px */
  }

  .recent-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .recent-header {
    margin-bottom: 60px;
  }

  .recent-tag {
    gap: 12px;
    margin-bottom: 32px; /* Item 下部余白 32px */
  }

  .recent-tag-icon {
    width: 18px;
    height: 28px;
  }

  .recent-tag-text {
    font-size: 22px; /* Item 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .recent-title {
    font-size: 38px; /* 最近チェックした商品 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px; /* margin-bottom 60px */
  }

  /* 5カラム並列配置 (PC) */
  .recent-product-grid {
    grid-template-columns: repeat(5, 1fr); /* PC: 横並び5列 */
    column-gap: 24px;
    row-gap: 0;
    margin-bottom: 0;
  }

  .recent-product-card {
    transition: transform 0.3s ease;
  }

  .recent-product-card:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }

  .recent-product-img-wrapper {
    margin-bottom: 10px; /* 画像下余白 10px (rankingPC等と連動) */
  }

  /* ============================================
     会社情報・会社概要セクション (PC)
     ============================================ */
  .company-section {
    padding: 110px 0; /* セクション内部余白 110px */
    background-color: #fbf9f4; /* プレミアムアイボリー背景 */
  }

  .company-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .company-header {
    margin-bottom: 60px;
  }

  .company-tag {
    gap: 12px;
    margin-bottom: 32px; /* Company 下部余白 32px */
  }

  .company-tag-icon {
    width: 18px;
    height: 28px;
  }

  .company-tag-text {
    font-size: 22px; /* Company 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .company-title {
    font-size: 38px; /* 会社概要 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px; /* margin-bottom 60px */
  }

  /* 4カラムグリッド (PC: 1x4) */
  .company-grid {
    grid-template-columns: repeat(4, 1fr); /* 横並び4列 */
    gap: 24px;
    margin-bottom: 100px; /* 4枚カードとお買い物ガイドの縦余白 100px */
  }

  .company-card {
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(10, 30, 55, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .company-card:hover {
    transform: translateY(-6px); /* ふわっと上品に浮かぶホバー */
    box-shadow: 0 12px 24px rgba(10, 30, 55, 0.1);
  }

  .company-card:hover .company-card-img-placeholder {
    transform: scale(1.05); /* ホバー時の画像ズーム効果 */
  }

  .company-card-overlay {
    padding: 24px;
  }

  .company-card-label {
    font-size: 20px; /* PC用日本語ラベル 20px */
    letter-spacing: 0.08em;
  }

  .company-card-en {
    top: 24px;
    right: 24px;
    font-size: 16px; /* PC用英語表記 16px */
    letter-spacing: 0.16em;
  }

  /* PCお買い物ガイド 3カラム */
  .company-guide-columns {
    display: grid !important; /* SPのnoneを打ち消し */
    grid-template-columns: repeat(3, 1fr); /* 均等3列 */
    gap: 40px;
    width: 100%;
  }

  .company-guide-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .company-guide-heading {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700; /* Bold */
    font-size: 19px; /* お支払いについて 19px */
    color: #0a1e37;
    letter-spacing: 0.16em; /* letter-spacing 16% */
    text-indent: 0.16em;
    line-height: 1;
    margin-bottom: 12px; /* margin-bottom 12px */
    padding-bottom: 16px;
    border-bottom: 2px solid #b48a41; /* border-bottom: 2px solid #B48A41 */
    box-sizing: border-box;
  }

  .company-guide-body {
    font-family: 'Shippori Mincho', serif;
    font-weight: 400; /* Regular */
    font-size: 13px; /* 本文フォントサイズ 13px */
    color: #3d3d3d;
    line-height: 2.0; /* line-height 200% */
    letter-spacing: 0.04em; /* letter-spacing 4% */
  }

  .company-guide-sub-block {
    margin-top: 18px;
  }

  .company-guide-sub-title {
    font-weight: 700;
    color: #0a1e37;
    display: block;
    margin-bottom: 4px;
  }

  .u-text-warn {
    color: #c53030; /* 赤系でPCでも上品に警告表示 */
    font-weight: 500;
    margin-top: 12px;
  }

  .company-guide-shipping-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }

  .shipping-fee-pill {
    background-color: #b48a41;
    color: #ffffff;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 2px;
    line-height: 1;
  }

  .shipping-fee-detail {
    font-weight: 700;
    color: #0a1e37;
    font-size: 14px;
  }

  .company-contact-block {
    margin-top: 16px;
    background-color: rgba(10, 30, 55, 0.03);
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #e5e0d4;
  }

  .company-contact-title {
    font-weight: 700;
    color: #0a1e37;
    display: block;
    margin-bottom: 8px;
  }

  .company-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* ============================================
     フッターセクション (PC)
     ============================================ */
  .footer {
    padding: 80px 0; /* セクション内部上下余白 80px */
  }

  .footer-container {
    margin-top: 0; /* PC時は余白をリセット */
  }

  .footer-logo-area {
    margin-bottom: 32px;
  }

  .footer-logo-img {
    width: 164px; /* PCサイズ: 164px */
  }

  .sns-img {
    width: 48px; /* PC 48pxで画像を表示 */
    height: 48px;
  }

  .footer-logo-box {
    padding: 12px 36px;
    border-width: 1px;
    transition: background-color 0.3s ease;
  }

  .footer-logo-box:hover {
    background-color: rgba(255, 255, 255, 0.03); /* ホバー時のプレミアム演出 */
  }

  .footer-logo-sub {
    font-size: 13px;
  }

  .footer-logo-main {
    font-size: 40px;
  }

  .footer-logo-kana {
    font-size: 11px;
  }

  .footer-sns-links {
    gap: 28px;
    margin-bottom: 40px;
  }

  .footer-sns-link {
    /* 円形ボーダー不要のため、width/height/border等は不要 */
  }

  .footer-sns-link:hover {
    transform: translateY(-3px);
  }

  .sns-svg {
    width: 20px;
    height: 20px;
  }

  .footer-divider {
    margin-bottom: 32px;
  }

  /* フッターリンク (PC: 横一列配置) */
  .footer-nav-list {
    flex-direction: row; /* 横一列 */
    justify-content: center;
    gap: 32px; /* 各項目の間隔 */
  }

  .footer-nav-link {
    font-size: 15px; /* 会社概要 15px */
    color: rgba(255, 255, 255, 0.85); /* background: #FFFFFFD9 (文字色意図：85%の不透明度白) */
    letter-spacing: 0.16em; /* letter-spacing 16% */
    text-indent: 0.16em;
    transition: color 0.3s ease;
  }

  .footer-nav-link:hover {
    color: #e8d5a8; /* ホバーでゴールドに光る極上デザイン */
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   スマホ用スクロール連動メニュー
   ============================================ */
.sp-scroll-menu {
  display: none; /* デフォルト非表示（PC時は常に非表示） */
}

@media (max-width: 767px) {
  .sp-scroll-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* ドロワーメニュー(10000)より下、通常コンテンツより上 */
    background-color: #0a1e37; /* 青系背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-100%); /* 最初は画面上に隠す */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
  }

  .sp-scroll-menu.is-show {
    transform: translateY(0); /* 画面上から表示 */
    visibility: visible;
  }

  .sp-scroll-menu__inner {
    padding: 14px 16px; /* セクション内部上下余白14px、左右余白16px */
  }

  .sp-scroll-menu__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sp-scroll-menu__item {
    background-color: #0a1e37; /* セルの背景色（青系背景） */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 4px; /* テキストからボーダーまでの余白12px（上下12px、左右4px） */
    color: #ffffff; /* フォント4 */
    font-family: 'Shippori Mincho', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    position: relative; /* 縦線配置の基準 */
  }

  /* 1行目と2行目の間の横線 */
  .sp-scroll-menu__item:nth-child(1),
  .sp-scroll-menu__item:nth-child(2) {
    border-bottom: 1px solid #B48A41;
  }

  /* 左右の間の縦線（テキストの高さ14pxに合わせて中央に配置） */
  .sp-scroll-menu__item:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px; /* テキストの高さ14pxに合わせる */
    background-color: #B48A41;
  }

  /* タップ時のフィードバック効果 */
  .sp-scroll-menu__item:active {
    background-color: #112a4c;
    opacity: 0.9;
  }
}

/* ============================================
   パンくずリスト (Breadcrumb)
   ============================================ */
.breadcrumb {
  background-color: #ffffff;
  padding: 12px 16px; /* スマホ：内部上下余白12px */
}

.breadcrumb__container {
  width: 100%;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__link {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #757575;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.breadcrumb__link:hover {
  opacity: 0.7;
}

.breadcrumb__separator {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 400;
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #757575;
  margin: 0 8px; /* 不要記号の左右余白 */
}

.breadcrumb__current {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* font-weight: 500 (Medium) */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #0A1E37;
}

@media (min-width: 768px) {
  .breadcrumb {
    padding: 16px 0; /* PC：内部上下余白16px */
  }

  .breadcrumb__container {
    max-width: 1200px; /* PC：max-width 1200px のレイアウトに左側を揃える */
    margin: 0 auto;
    padding: 0 16px;
  }

  .breadcrumb__link {
    font-size: 13px; /* PC：13px */
  }

  .breadcrumb__separator {
    font-size: 13px; /* PC：13px */
    margin: 0 10px;
  }

  .breadcrumb__current {
    font-size: 13px; /* PC：13px */
  }
}

/* ============================================
   カテゴリー ヒーローセクション (Category Hero)
   ============================================ */
.category-hero {
  width: 100%;
}

.category-hero__img-wrapper {
  width: 100%;
  aspect-ratio: 100 / 62; /* スマホ：100 / 62の割合で画像表示エリアを確保 */
  background-color: #d9d9d9; /* 背景グレー */
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .category-hero__img-wrapper {
    height: auto; /* PC：width 100% height380pxで画像表示エリアを確保 */
    aspect-ratio: auto;
  }
}

/* ============================================
   カテゴリー名とその説明テキスト (Category Header Text)
   ============================================ */
.category-header-text {
  padding: 40px 16px; /* スマホ：セクション内上下余白40px、左右余白16px */
  text-align: center;
}

.category-header-text__title-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* テキストとボーダーの間の余白 */
  margin-bottom: 14px; /* スマホ：「ご自宅用のお漬物」の下余白14px */
  max-width: 100%;
}

.category-header-text__border {
  width: 30px; /* スマホ：ボーダー幅30px */
  height: 1px;
  background-color: #B48A41; /* アクセントカラー #B48A41 */
  flex-shrink: 0;
}

.category-header-text__title {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 17px; /* スマホ：17px */
  line-height: 100%;
  letter-spacing: 0.22em; /* letter-spacing: 22% */
  color: #0A1E37; /* 青系背景/フォントカラー #0A1E37 */
  margin: 0;
  text-indent: 0.22em; /* letter-spacingによる右側の余白を相殺して完全中央揃えに */
}

.category-header-text__desc {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 12px; /* スマホ：12px */
  line-height: 200%; /* line-height: 200% */
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #3D3D3D; /* フォント1 #3D3D3D */
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
}

@media (min-width: 768px) {
  .category-header-text {
    padding: 80px 16px; /* PC：セクション内上下余白80px、左右余白16px */
  }

  .category-header-text__title-container {
    gap: 24px; /* PC：テキストとボーダーの間の余白を広げる */
    margin-bottom: 24px; /* PC：「ご自宅用のお漬物」の下余白24px */
  }

  .category-header-text__border {
    width: 40px; /* PC：ボーダー幅40px */
  }

  .category-header-text__title {
    font-size: 38px; /* PC：38px */
    letter-spacing: 0.32em; /* letter-spacing: 32% */
    text-indent: 0.32em;
  }

  .category-header-text__desc {
    font-size: 14px; /* PC：14px */
    letter-spacing: 0.06em; /* letter-spacing: 6% */
    max-width: 800px;
  }
}

/* ============================================
   人気商品セクション (Popular Products)
   ============================================ */
.popular-section {
  padding: 56px 16px; /* セクション内部余白 56px */
  background-color: #ffffff;
  display: block;
}

.popular-container {
  width: 100%;
}

.popular-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.popular-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Popular 下部余白 9px */
}

.popular-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.popular-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Popular フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.popular-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* 人気商品 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* グリッド配置 (SP) */
.popular-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP: 2列配置 */
  gap: 24px 12px; /* 余白はgiftと同じ */
  margin-bottom: 24px;
}

.popular-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* カラムはみ出し防止 */
}

@media (min-width: 768px) {
  .popular-section {
    padding: 0px 0; /* セクション内部余白 110px */
    margin-bottom: 70px;
  }

  .popular-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .popular-header {
    margin-bottom: 60px;
  }

  .popular-tag {
    gap: 12px;
    margin-bottom: 32px; /* Popular 下部余白 32px */
  }

  .popular-tag-icon {
    width: 18px;
    height: 28px;
  }

  .popular-tag-text {
    font-size: 22px; /* Popular 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .popular-title {
    font-size: 38px; /* 人気商品 38px (PC共通標準) */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px; /* margin-bottom 60px */
  }

  /* 5カラム並列配置 (PC) */
  .popular-product-grid {
    grid-template-columns: repeat(5, 1fr); /* PC: 横並び5列 */
    column-gap: 24px;
    row-gap: 0;
    margin-bottom: 0;
  }

  .popular-product-card {
    transition: transform 0.3s ease;
  }

  .popular-product-card:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }
}

/* ============================================
   カテゴリー選択エリア (Category Filter)
   ============================================ */
.filter-section {
  padding: 24px 16px; /* スマホ：セクション内部上下余白24px、左右余白16px */
  background-color: #fbf9f4; /* プレミアムアイボリー背景 */
}

.filter-container {
  width: 100%;
}

.filter-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px; /* スマホ：カテゴリーで絞り込むの下余白12px */
}

.filter-heading__icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B48A41; /* アクセントカラー #B48A41 */
}

.filter-heading__text {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 13px; /* スマホ：13px */
  line-height: 100%;
  letter-spacing: 0.08em; /* letter-spacing: 8% */
  color: #0A1E37; /* 青系背景/フォントカラー #0A1E37 */
  margin: 0;
  text-indent: 0.08em;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* スマホ：ボタン間の余白 6px */
}

.filter-btn {
  display: inline-block;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #0A1E37; /* 通常時のテキスト色 */
  background-color: #ffffff; /* 通常時の背景色（白） */
  border: 1px solid rgba(10, 30, 55, 0.3); /* border: 1px solid #0A1E374D (30%の不透明度) */
  padding: 7px 14px; /* スマホ：上下7px、左右14px */
  border-radius: 100px; /* 完全な角丸カプセル型 */
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

/* カレント（アクティブ）状態 */
.filter-btn.is-active {
  background-color: #0A1E37; /* カレント：背景 #0A1E37 */
  color: #ffffff; /* カレント：テキスト #FFFFFF */
  border-color: #0A1E37;
}

/* ホバー効果（PCおよびタッチデバイス対応） */
@media (hover: hover) {
  .filter-btn:not(.is-active):hover {
    background-color: rgba(10, 30, 55, 0.05);
    border-color: #0A1E37;
  }
}

@media (min-width: 768px) {
  .filter-section {
    padding: 48px 0; /* PC：セクション内部上下余白48px */
  }

  .filter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .filter-heading {
    margin-bottom: 16px; /* PC：カテゴリーで絞り込むの下余白16px */
  }

  .filter-heading__icon {
    width: 18px;
    height: 18px;
  }

  .filter-heading__text {
    font-size: 18px; /* PC：18px */
  }

  .filter-buttons {
    gap: 16px; /* PC：ボタン間の余白 16px */
  }

  .filter-btn {
    font-size: 14px; /* PC：14px */
    letter-spacing: 0.06em; /* letter-spacing: 6% */
    padding: 13px 24px; /* PC：上下13px、左右24px */
  }
}

/* ============================================
   カテゴリー商品表示エリア (Category Product Grid)
   ============================================ */
.cat-grid-section {
  padding: 28px 16px 40px; /* スマホ：セクション内部上下余白 28px 40px、左右余白16px */
  background-color: #ffffff;
}

.cat-grid-container {
  width: 100%;
}

/* ソートエリア */
.cat-grid-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E0D4; /* 下部仕切り線 */
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.cat-grid-sort__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cat-grid-sort__label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #757575; /* background: #757575 */
}

.cat-grid-sort__number {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 700; /* Bold */
  font-style: normal;
  font-size: 14px; /* スマホ：14px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A1E37; /* background: #0A1E37 */
}

.cat-grid-sort__select-wrapper {
  position: relative;
  display: inline-block;
}

.cat-grid-sort__select {
  appearance: none; /* デフォルトの矢印を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  border: 1px solid rgba(10, 30, 55, 0.25); /* border: 1px solid #0A1E3740 */
  border-radius: 4px;
  padding: 6px 26px 6px 10px; /* スマホ：上下6px 左10px 右26px */
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #0A1E37; /* background: #0A1E37 */
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.cat-grid-sort__select:focus {
  border-color: #0A1E37;
}

/* プルダウンのカスタム矢印アイコン */
.cat-grid-sort__select-wrapper::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #B48A41; /* 金色の下向き矢印 */
  pointer-events: none; /* クリックイベントを透過 */
}

/* 商品一覧グリッド (SP) */
.cat-grid-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP: 2列配置 */
  gap: 24px 12px; /* 人気商品と同じ */
  margin-bottom: 40px; /* ページネーションとの間隔 */
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pagination__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px; /* スマホ：サイズ 36pxの円 */
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(10, 30, 55, 0.25); /* border: 1px solid #0A1E3740 */
  background-color: #ffffff;
  color: #0A1E37;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

/* 数値と不当記号のフォント設定 */
.pagination__btn--num,
.pagination__btn--arrow {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-size: 13px; /* スマホ：13px */
  line-height: 100%;
  letter-spacing: 0%;
}

.pagination__btn--num {
  font-weight: 500; /* Medium */
}

.pagination__btn--arrow {
  font-weight: 500; /* Medium */
}

/* カレント（アクティブ）状態 */
.pagination__btn.is-active {
  background-color: #0A1E37; /* カレント：背景 #0A1E37 */
  color: #ffffff; /* カレント：テキスト #fff */
  border-color: #0A1E37;
}

/* ホバー効果 */
@media (hover: hover) {
  .pagination__btn:not(.is-active):hover {
    background-color: rgba(10, 30, 55, 0.05);
    border-color: #0A1E37;
  }
}

@media (min-width: 768px) {
  .cat-grid-section {
    padding: 80px 0; /* PC：セクション内部上下余白 80px */
  }

  .cat-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .cat-grid-sort {
    padding-bottom: 16px;
    margin-bottom: 40px;
  }

  .cat-grid-sort__label {
    font-size: 14px; /* PC：14px */
    letter-spacing: 0.06em; /* letter-spacing: 6% */
  }

  .cat-grid-sort__number {
    font-size: 15px; /* PC：15px */
  }

  .cat-grid-sort__select {
    padding: 8px 36px 8px 18px; /* PC：上下8px 左18px 右36px */
    font-size: 13px; /* PC：13px */
    letter-spacing: 0.06em; /* letter-spacing: 6% */
  }

  .cat-grid-sort__select-wrapper::after {
    right: 14px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #B48A41;
  }

  /* 5カラム並列配置 (PC) */
  .cat-grid-products {
    grid-template-columns: repeat(5, 1fr); /* PC: 横並び5列 */
    column-gap: 24px;
    row-gap: 40px; /* 複数行並ぶため、行間余白40pxを確保 */
    margin-bottom: 60px;
  }

  .cat-grid-product-card {
    transition: transform 0.3s ease;
  }

  .cat-grid-product-card:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }

  /* ページネーション (PC) */
  .pagination {
    gap: 12px;
  }

  .pagination__btn {
    width: 40px; /* PC：サイズ 40pxの円 */
    height: 40px;
  }

  .pagination__btn--num {
    font-size: 16px; /* PC：16px */
  }

  .pagination__btn--arrow {
    font-size: 16px; /* PC：16px */
    font-weight: 700; /* PC不当記号：Bold */
  }
}

/* ============================================
   商品詳細画面 (Product Details)
   ============================================ */
.product-main-section {
  padding: 20px 16px 40px; /* スマホ：セクション内部上下余白 20px 40px、左右余白16px */
  background-color: #ffffff;
}

.product-main-container {
  width: 100%;
}

/* 左右カラムレイアウト (PC) */
.product-main-flex {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* カルーセル・画像エリア */
.product-main-gallery {
  width: 100%;
}

.product-gallery-main {
  width: 100%;
  margin-bottom: 8px; /* サムネイルとの間隔 */
}

.product-gallery-main .swiper-slide {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #d9d9d9; /* 画像背景グレー */
  border-radius: 4px;
  overflow: hidden;
}

.product-gallery-main-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #757575;
  font-family: 'Shippori Mincho', serif;
  font-size: 24px;
  font-weight: 700;
}

/* サムネイル一覧 */
.product-gallery-thumbs {
  width: 100%;
}

.product-gallery-thumbs .swiper-slide {
  aspect-ratio: 1 / 1;
  background-color: #d9d9d9; /* 画像背景グレー */
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 1px solid #B48A41; /* アクティブなサムネイルの境界線 */
}

.product-gallery-thumb-placeholder {
  width: 100%;
  height: 100%;
}

/* 商品情報・購入エリア */
.product-main-info {
  width: 100%;
}

/* バッジエリア */
.product-info-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 20px; /* バッジ下余白 20px */
}

.product-badge {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.08em; /* letter-spacing: 8% */
  padding: 4px 10px; /* 天地4px 左右10px */
  border-radius: 3px;
  display: inline-block;
}

.product-badge--cool {
  background-color: #C5DAE3; /* クール便 */
  color: #2A4D65;
}

.product-badge--free {
  background-color: #9C4040; /* 送料無料 */
  color: #ffffff;
}

/* 商品名 */
.product-info-title {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 700; /* Bold */
  font-style: normal;
  font-size: 20px; /* スマホ：20px */
  line-height: 160%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  color: #1A1A1A;
  margin: 0 0 20px; /* 下部余白 20px */
}

/* レビュー */
.product-info-review {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px; /* 下部余白 22px */
}

.product-review-stars {
  display: flex;
  color: #B48A41; /* 濃い星 */
  font-size: 16px; /* スマホ：16px */
  line-height: 1;
}

.product-review-stars .star-empty {
  color: #D9C79E; /* 薄い星 */
}

/* 星の半分の表示 */
.product-review-stars .star-half {
  position: relative;
  display: inline-block;
  color: #D9C79E; /* 背景（薄い星） */
}

.product-review-stars .star-half::after {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #B48A41; /* 前景（濃い星） */
}

.product-review-rating {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 15px; /* スマホ：15px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A1E37;
}

.product-review-count {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 13px; /* スマホ：13px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #B8B8B8;
}

/* 境界線 */
.product-info-divider {
  border: none;
  border-top: 1px solid #E5E0D4;
  margin: 0 0 18px; /* 下部余白 18px */
}

/* 価格エリア */
.product-info-price-area {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.product-price-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 12px; /* スマホ：12px */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  color: #3D3D3D;
  display: inline-block;
  margin-bottom: 0;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.product-price-value {
  font-family: 'Shippori Mincho', serif; /* Shippori Mincho B1 */
  font-weight: 700; /* Bold */
  font-style: normal;
  font-size: 26px; /* スマホ：26px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #0A1E37;
}

.product-price-tax {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0%;
  color: #757575;
}

/* ポイントエリア */
.product-info-points {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px; /* 下部余白 18px */
}

.product-point-badge {
  background-color: #B48A41; /* アクセントカラー #B48A41 */
  color: #ffffff;
  padding: 3px 10px; /* 内部余白3px 10px */
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 10px; /* スマホ：10px */
  line-height: 100%;
  letter-spacing: 0.08em; /* letter-spacing: 8% */
  border-radius: 2px;
}

.product-point-value {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 12px; /* スマホ：12px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #0A1E37;
}

/* 数量エリア */
.product-info-quantity {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px; /* 下部余白 20px */
}

.product-quantity-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 13px; /* スマホ：13px */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  color: #0A1E37;
  display: inline-block;
  margin-bottom: 0;
}

.product-quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid rgba(10, 30, 55, 0.25); /* border: 1px solid #0A1E3740 */
  border-radius: 4px;
  width: fit-content;
  overflow: hidden;
}

.product-quantity-btn {
  width: 40px; /* スマホ：40px正方形 */
  height: 40px;
  background-color: #ffffff;
  border: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 16px;
  color: #0A1E37;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.product-quantity-btn:hover {
  background-color: rgba(10, 30, 55, 0.05);
}

.product-quantity-input {
  width: 50px; /* スマホ：50px 40px */
  height: 40px;
  border: none;
  border-left: 1px solid rgba(10, 30, 55, 0.25);
  border-right: 1px solid rgba(10, 30, 55, 0.25);
  text-align: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 16px;
  color: #0A1E37;
  outline: none;
}

/* カートボタン */
.product-cart-btn {
  width: 100%;
  background-color: #9C4040; /* 大安風の赤系 */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 20px 16px; /* スマホ：上下20px */
  font-family: 'Shippori Mincho', serif;
  font-weight: 700; /* Bold */
  font-style: normal;
  font-size: 17px; /* スマホ：17px */
  line-height: 100%;
  letter-spacing: 0.2em; /* letter-spacing: 20% */
  text-indent: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 20px; /* 下部余白 20px */
  transition: background-color 0.3s ease;
}

.product-cart-btn:hover {
  background-color: #833535;
}

.product-cart-btn__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* サブアクションボタン（お気に入り、メモする） */
.product-sub-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 30px; /* 下部余白 30px */
}

.product-sub-btn {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid rgba(10, 30, 55, 0.4); /* border: 1px solid #0A1E3766 */
  border-radius: 4px;
  padding: 12px 8px; /* スマホ：上下12px */
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 12px; /* スマホ：12px */
  line-height: 100%;
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #0A1E37;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.product-sub-btn:hover {
  background-color: rgba(10, 30, 55, 0.05);
  border-color: #0A1E37;
}

.product-sub-btn__icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 送料インフォメーション */
.product-shipping-info {
  background-color: #fbf9f4; /* プレミアムアイボリー背景 */
  padding: 14px 16px;
  border-radius: 4px;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 11px; /* スマホ：11px */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  color: #0A1E37;
  margin-bottom: 30px; /* 下部余白 30px */
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-shipping-info__symbol {
  color: #B48A41; /* 金色の◆ */
}

/* 決済手段画像 */
.product-payment-methods {
  width: 100%;
  margin-bottom: 20px; /* 下部余白 20px */
}

.product-payment-methods__img-placeholder {
  width: 100%;
  height: 44px;
  background-color: #f0ebe0; /* 決済画像プレースホルダー（灰色・薄いベージュ系） */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
}

/* 注意書き */
.product-notice-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 10px; /* スマホ：10px */
  line-height: 180%; /* line-height: 180% */
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #757575;
  margin: 0;
}

/* 決済ロゴ一覧 */
.payment-logos {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.payment-logo {
  font-family: 'Shippori Mincho', serif;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #E5E0D4;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
}

.payment-logo--amazon {
  background-color: #1a1a1a;
  color: #ff9900;
  border-color: #1a1a1a;
  font-style: italic;
}

.payment-logo--rpay {
  background-color: #ffffff;
  color: #bf0000;
  border-color: #bf0000;
}

.payment-logo--paypay {
  background-color: #ed1a3a;
  color: #ffffff;
  border-color: #ed1a3a;
}

.payment-logo--visa {
  color: #1a1f71;
  border-color: #1a1f71;
  font-style: italic;
}

.payment-logo--master {
  color: #373d3f;
  border-color: #e5e0d4;
  position: relative;
  font-weight: 900;
}

.payment-logo--diners {
  color: #0079ac;
  border-color: #0079ac;
}

.payment-logo--amex {
  background-color: #016fd0;
  color: #ffffff;
  border-color: #016fd0;
}

.payment-logo--jcb {
  background-color: #ffffff;
  color: #002e74;
  border-color: #002e74;
  font-weight: 900;
}

/* 商品詳細ミニ説明 */
.product-info-summary {
  margin-top: 24px;
  padding: 20px 0 0;
  border-top: 1px solid #E5E0D4;
}

.product-info-summary-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: #3D3D3D;
  margin: 0 0 12px;
}

.product-info-meta-table {
  width: 100%;
  border-collapse: collapse;
}

.product-info-meta-table th,
.product-info-meta-table td {
  padding: 4px 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

.product-info-meta-table th {
  font-weight: 500;
  color: #757575;
  width: 100px;
}

.product-info-meta-table td {
  font-weight: 400;
  color: #3D3D3D;
}

/* ============================================
   商品説明セクション (Product Description)
   ============================================ */
.product-desc-section {
  padding: 56px 16px; /* セクション内部余白 SP: 56px */
  background-color: #ffffff;
  border-bottom: 1px solid #E5E0D4;
}

.product-desc-container {
  width: 100%;
}

.product-desc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px; /* SP: 24px */
}

.product-desc-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px;
}

.product-desc-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.product-desc-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 500;
  color: #B48A41; /* 金色（アクセントカラー） */
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1;
}

.product-desc-title-container,
.product-review-title-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* テキストとボーダーの間の余白 */
  max-width: 100%;
}

.product-desc-title,
.product-review-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px; /* スマホ：17px */
  font-weight: 500;
  color: #0a1e37; /* 青系 */
  letter-spacing: 0.22em; /* letter-spacing: 22% */
  text-indent: 0.22em;
  line-height: 1;
  text-align: center;
  margin: 0;
}

.product-desc-body {
  background-color: #fff; /* 薄い黄色の背景→白に変更 */
  padding: 24px 20px; /* 天地24px 左右20px */
  border-radius: 4px;
}

.product-desc-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 200%; /* line-height: 200% */
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  color: #3D3D3D;
  margin: 0 0 12px; /* margin-bottom: 12px */
}

.product-desc-note {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 190%; /* line-height: 190% */
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  color: #757575;
  margin: 0;
}

/* のし・包装について用ヘッダーはセクション側に統合 */

/* 仕様テーブル */
.product-specs-wrapper {
  margin-top: 40px;
  border-top: 1px solid #E5E0D4;
  padding-top: 32px;
}

.product-specs-heading {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 700;
  color: #0A1E37;
  margin: 0 0 20px;
  text-align: center;
}

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #0A1E37;
  border-bottom: 1px solid #E5E0D4;
}

.product-specs-table th,
.product-specs-table td {
  padding: 12px 16px;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  line-height: 1.6;
}

.product-specs-table th {
  background-color: #fbf9f4;
  font-weight: 500;
  color: #0A1E37;
  width: 120px;
  text-align: left;
  border-bottom: 1px solid #E5E0D4;
}

.product-specs-table td {
  font-weight: 400;
  color: #3D3D3D;
  border-bottom: 1px solid #E5E0D4;
}

/* ============================================
   レビューコーナー (Product Reviews)
   ============================================ */
.product-review-section {
  padding: 56px 16px; /* セクション内部余白 SP: 56px */
  background-color: #ffffff;
  border-bottom: 1px solid #E5E0D4;
}

.product-review-container {
  width: 100%;
}

.product-review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px; /* SP: 24px */
}

.product-review-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px;
}

.product-review-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.product-review-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 500;
  color: #B48A41; /* 金色（アクセントカラー） */
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1;
}

/* タイトルは上記で共通定義したため削除 */

/* レビューサマリーボックス */
.product-review-summary-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #E5E0D4;
  border-radius: 4px;
  padding: 18px;
  margin-bottom: 28px;
}

.product-review-summary-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-review-summary-stars {
  display: flex;
  color: #B48A41;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}

.product-review-summary-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.score-value {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: #0A1E37;
}

.score-max {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  color: #757575;
  margin-bottom: 4px;
}

.product-review-summary-count {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  color: #757575;
  margin: 4px 0 0;
}

.product-review-summary-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end; /* 右寄せにする */
}

.star-distribution-row {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #B48A41;
}

/* フィルター・ソートボタン */
.product-review-filter-row {
  display: flex;
  justify-content: center; /* 中央寄せにする */
  gap: 6px;
  margin-bottom: 28px;
}

.review-filter-btn {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border: 1px solid rgba(10, 30, 55, 0.3);
  border-radius: 20px;
  background-color: #ffffff;
  color: #0A1E37;
  cursor: pointer;
  transition: all 0.2s ease;
}

.review-filter-btn.is-active {
  background-color: #0A1E37;
  color: #ffffff;
  border-color: #0A1E37;
}

/* レビュー一覧 */
.product-review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.product-review-card {
  border: 1px solid #E5E0D4;
  border-radius: 4px;
  padding: 16px;
  background-color: #ffffff;
}

.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.review-card-stars-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-card-stars {
  display: flex;
  font-size: 15px;
  color: #B48A41;
  line-height: 1;
}

.review-card-stars .star-empty {
  color: #D9C79E;
}

.review-card-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #0A1E37;
  margin: 0;
}

.review-card-date {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 10px;
  color: #757575;
  line-height: 1;
}

.review-card-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.review-card-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #d9d9d9;
  flex-shrink: 0;
}

.review-card-user-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px;
  color: #0A1E37;
  line-height: 1;
}

.review-card-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 190%;
  letter-spacing: 0.04em;
  color: #3D3D3D;
  margin: 0 0 12px;
}

.review-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #E5E0D4;
}

.review-card-share {
  display: flex;
  gap: 6px;
}

.review-share-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.review-share-btn svg {
  width: 14px;
  height: 14px;
}

.review-share-btn--x {
  background-color: #000000;
}

.review-share-btn--facebook {
  background-color: #1877f2;
}

.review-share-btn--line {
  background-color: #06c755;
}

.review-share-btn:hover {
  opacity: 0.8;
}

.review-card-actions {
  display: flex;
  gap: 12px;
}

.review-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px;
  color: #3D3D3D;
  line-height: 1;
  transition: opacity 0.2s;
}

.review-action-btn:hover {
  opacity: 0.7;
}

.review-action-icon {
  font-size: 12px;
}

.review-action-count {
  font-weight: 700;
  color: #B48A41;
}

/* 下部アクションボタン */
.product-review-bottom-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.review-bottom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 20px;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.25s ease;
  height: 36px;
  box-sizing: border-box;
}

.review-bottom-btn--sort,
.review-bottom-btn--filter {
  background-color: #ffffff;
  border: 1px solid rgba(10, 30, 55, 0.3);
  color: #0A1E37;
  padding: 0 16px;
}

.review-bottom-btn--write {
  background-color: #0A1E37;
  border: 1px solid #0A1E37;
  color: #ffffff;
  padding: 0 20px;
}

.review-bottom-btn--sort:hover,
.review-bottom-btn--filter:hover {
  background-color: rgba(10, 30, 55, 0.05);
}

.review-bottom-btn--write:hover {
  background-color: #1a2f4c;
  border-color: #1a2f4c;
}

/* ============================================
   のし・包装についてセクション (Noshi & Packaging)
   ============================================ */
.product-noshi-section {
  padding: 30px 16px;
  background-color: #ffffff; /* 背景は白 */
}

.product-noshi-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-noshi-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 219px;
  height: 46px;
  border-radius: 4px;
  background-color: #A6C7A6;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.product-noshi-title-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0.12em; /* 12% */
  text-indent: 0.12em;
  color: #ffffff;
}

.product-noshi-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.product-noshi-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 200%; /* 200% */
  letter-spacing: 0.06em; /* 6% */
  color: #3D3D3D;
  margin: 0;
}

.product-noshi-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.product-noshi-image-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-noshi-image-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #E5E0D4; /* 画像はグレー */
  border-radius: 4px;
}

.product-noshi-image-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0.04em; /* 4% */
  color: #0A1E37;
  margin-top: 8px;
}

/* PCレスポンシブ */
@media (min-width: 768px) {
  .product-main-section {
    padding: 40px 0 80px; /* PC：セクション内部上下余白 40px 80px */
  }

  .product-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* 左右割合 580 : 560 余白は60 */
  .product-main-flex {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px; /* 左右カラムの余白 60px */
  }

  .product-main-gallery {
    width: 580px; /* 左カラム 580px */
    flex-shrink: 0;
  }

  .product-main-info {
    flex: 1; /* 右カラム 560px相当（1200 - 32 - 580 - 60 = 528px、コンテナ幅1200px内で自動フィット） */
  }

  /* バッジエリア (PC) */
  .product-badge {
    font-size: 12px; /* PC：12px */
    letter-spacing: 0.12em; /* letter-spacing: 12% */
    padding: 5px 12px; /* 天地5px 左右12px */
  }

  /* 商品名 (PC) */
  .product-info-title {
    font-size: 26px; /* PC：26px */
    line-height: 150%;
    letter-spacing: 0.08em; /* letter-spacing: 8% */
  }

  /* レビュー (PC) */
  .product-review-stars {
    font-size: 18px; /* PC：18px */
  }

  .product-review-rating {
    font-size: 16px; /* PC：16px */
  }

  /* 価格エリア (PC) */
  .product-info-price-area {
    gap: 32px;
  }

  .product-price-label {
    font-size: 13px; /* PC：13px */
    margin-bottom: 0;
  }

  .product-price-value {
    font-size: 28px; /* PC：28px */
  }

  .product-price-tax {
    font-size: 12px; /* PC：12px */
  }

  /* ポイントエリア (PC) */
  .product-point-badge {
    font-size: 11px; /* PC：11px */
  }

  .product-point-value {
    font-size: 13px; /* PC：13px */
  }

  /* 数量エリア (PC) */
  .product-info-quantity {
    gap: 32px;
  }

  .product-quantity-label {
    font-size: 14px; /* PC：14px */
    margin-bottom: 0;
  }

  /* カートボタン (PC) */
  .product-cart-btn {
    padding: 22px 16px; /* PC：上下22px */
    font-size: 18px; /* PC：18px */
  }

  /* サブアクションボタン (PC) */
  .product-sub-btn {
    font-size: 13px; /* PC：13px */
  }

  /* 送料インフォメーション (PC) */
  .product-shipping-info {
    font-size: 12px; /* PC：12px */
  }

  /* 注意書き (PC) */
  .product-notice-text {
    font-size: 11px; /* PC：11px */
  }

  /* 商品詳細ミニ説明 (PC) */
  .product-info-summary-text {
    font-size: 14px;
  }
  .product-info-meta-table th,
  .product-info-meta-table td {
    font-size: 13px;
  }

  /* 商品説明セクション (PC) */
  .product-desc-section {
    padding: 110px 0; /* PC: 110px */
  }

  .product-desc-container,
  .product-noshi-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .product-desc-header {
    margin-bottom: 60px; /* PC: 60px */
  }

  .product-desc-tag {
    gap: 12px;
    margin-bottom: 32px; /* PC: 32px */
  }

  .product-desc-tag-icon {
    width: 18px;
    height: 28px;
  }

  .product-desc-tag-text {
    font-size: 22px; /* Recommend 22px */
  }

  .product-desc-title-container,
  .product-review-title-container {
    gap: 24px; /* PC：テキストとボーダーの間の余白を広げる */
  }

  .product-desc-title {
    font-size: 38px; /* Recommend 38px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .product-desc-body {
    padding: 50px 60px; /* 天地50px 左右60px */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .product-desc-text {
    font-size: 14px;
    line-height: 220%; /* line-height: 220% */
    margin-bottom: 24px; /* margin-bottom: 24px */
  }

  .product-desc-note {
    font-size: 13px;
  }

  /* のし・包装について用ヘッダー (PC) はセクション側に統合 */

  /* 仕様テーブル (PC) */
  .product-specs-wrapper {
    max-width: 900px;
    margin: 60px auto 0;
    padding-top: 48px;
  }

  .product-specs-heading {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .product-specs-table th,
  .product-specs-table td {
    padding: 16px 24px;
    font-size: 13px;
  }

  .product-specs-table th {
    width: 180px;
  }

  /* のし・包装について (PC) */
  .product-noshi-section {
    padding: 30px 0;
  }

  .product-noshi-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .product-noshi-header {
    width: 100%;
    height: 58px;
    padding: 16px 30px;
    border-radius: 6px;
    margin-bottom: 36px;
    justify-content: flex-start;
  }

  .product-noshi-title-text {
    font-size: 18px;
    letter-spacing: 0.14em; /* 14% */
    text-indent: 0.14em;
  }

  .product-noshi-body {
    margin-bottom: 36px;
  }

  .product-noshi-images-grid {
    gap: 24px;
  }

  .product-noshi-image-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    letter-spacing: 0.06em; /* 6% */
    margin-top: 12px;
  }

  /* レビューコーナー (PC) */
  .product-review-section {
    padding: 110px 0; /* PC: 110px */
  }

  .product-review-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .product-review-header {
    margin-bottom: 60px; /* PC: 60px */
  }

  .product-review-tag {
    gap: 12px;
    margin-bottom: 32px; /* PC: 32px */
  }

  .product-review-tag-icon {
    width: 18px;
    height: 28px;
  }

  .product-review-tag-text {
    font-size: 22px;
  }

  .product-review-title {
    font-size: 38px;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  /* レビューサマリーボックス (PC) */
  .product-review-summary-box {
    padding: 32px 40px;
    gap: 40px;
    margin-bottom: 40px;
  }

  .product-review-summary-stars {
    font-size: 26px;
    margin-bottom: 8px;
  }

  .score-value {
    font-size: 40px;
  }

  .score-max {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .product-review-summary-count {
    font-size: 12px;
    margin-top: 8px;
  }

  .product-review-summary-right {
    max-width: 240px;
    gap: 8px;
    align-items: flex-end; /* 右寄せにする */
  }

  .star-distribution-row {
    font-size: 11px;
  }

  /* フィルター・ソートボタン (PC) */
  .product-review-filter-row {
    gap: 12px;
    margin-bottom: 40px;
  }

  .review-filter-btn {
    font-size: 13px;
    padding: 10px 24px;
  }

  /* レビュー一覧 (PC) */
  .product-review-list {
    gap: 24px;
    margin-bottom: 48px;
  }

  .product-review-card {
    padding: 24px 28px;
  }

  .review-card-top {
    margin-bottom: 12px;
  }

  .review-card-stars-title {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .review-card-stars {
    font-size: 18px;
  }

  .review-card-title {
    font-size: 16px;
  }

  .review-card-date {
    font-size: 12px;
  }

  .review-card-user {
    margin-bottom: 12px;
    gap: 10px;
  }

  .review-card-user-avatar {
    width: 36px;
    height: 36px;
  }

  .review-card-user-name {
    font-size: 13px;
  }

  .review-card-text {
    font-size: 13px;
    line-height: 200%;
    margin-bottom: 16px;
  }

  .review-card-footer {
    padding-top: 16px;
  }

  .review-share-btn {
    width: 32px;
    height: 32px;
  }

  .review-share-btn svg {
    width: 16px;
    height: 16px;
  }

  .review-action-btn {
    font-size: 12px;
    gap: 6px;
  }

  .review-action-icon {
    font-size: 14px;
  }

  /* 下部アクションボタン (PC) */
  .product-review-bottom-actions {
    gap: 16px;
    margin-top: 40px;
  }

  .review-bottom-btn {
    font-size: 13px;
    height: 44px;
  }

  .review-bottom-btn--sort,
  .review-bottom-btn--filter {
    padding: 0 24px;
  }

  .review-bottom-btn--write {
    padding: 0 32px;
  }
}

/* ============================================
   おすすめ関連商品セクション (Recommend Products)
   ============================================ */
.recommend-section {
  padding: 56px 16px; /* セクション内部余白 56px */
  background-color: #ffffff; /* 背景は白に */
  display: block;
}

.recommend-container {
  width: 100%;
}

.recommend-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.recommend-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 9px; /* Recommend 下部余白 9px */
}

.recommend-tag-icon {
  width: 10px;
  height: 16px;
  object-fit: contain;
}

.recommend-tag-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px; /* Recommend フォントサイズ 16px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.32em; /* letter-spacing 32% */
  text-indent: 0.32em;
  line-height: 1;
}

.recommend-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px; /* おすすめ関連商品 フォントサイズ 22px */
  font-weight: 500;
  color: #0a1e37;
  letter-spacing: 0.24em; /* letter-spacing 24% */
  text-indent: 0.24em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px; /* 下部余白 22px */
}

/* グリッド配置 (SP) */
.recommend-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP: 2列配置 */
  gap: 24px 12px;
  margin-bottom: 24px;
}

.recommend-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 768px) {
  .recommend-section {
    padding: 110px 0; /* セクション内部余白 110px */
  }

  .recommend-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .recommend-header {
    margin-bottom: 60px;
  }

  .recommend-tag {
    gap: 12px;
    margin-bottom: 32px; /* Recommend 下部余白 32px */
  }

  .recommend-tag-icon {
    width: 18px;
    height: 28px;
  }

  .recommend-tag-text {
    font-size: 22px; /* Recommend 22px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  .recommend-title {
    font-size: 38px; /* おすすめ関連商品 38px */
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    margin-bottom: 60px;
  }

  /* 5カラム並列配置 (PC) */
  .recommend-product-grid {
    grid-template-columns: repeat(5, 1fr); /* PC: 横並び5列 */
    column-gap: 24px;
    row-gap: 0;
    margin-bottom: 0;
  }

  .recommend-product-card {
    transition: transform 0.3s ease;
  }

  .recommend-product-card:hover {
    transform: translateY(-4px); /* 上品に浮き上がるホバー効果 */
  }
}

/* ============================================
   ブログ詳細（single.html）用スタイル (SP)
   ============================================ */
.blog-single-section {
  padding: 30px 16px; /* 内部セクション天地30px */
  background-color: #ffffff;
}

.blog-single-container {
  width: 100%;
}

.blog-single-header {
  margin-bottom: 24px; /* タイトルヘッダー下部余白 */
}

.blog-single-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 20px; /* タイトル部分フォントサイズ 20px (SP) */
  line-height: 160%; /* 160% */
  letter-spacing: 0.06em; /* 6% */
  text-indent: 0.06em;
  color: #0A1E37; /* 青系背景/文字色 */
  margin: 0 0 16px; /* タイトル下部余白 16px */
}

.blog-single-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.blog-single-meta-left {
  display: flex;
  align-items: center;
}

.blog-single-date {
  display: inline-block;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 12px; /* 日付 12px (SP) */
  color: #B48A41; /* ゴールド */
  line-height: 100%;
  letter-spacing: 0.12em; /* 12% */
  text-indent: 0.12em;
  margin-right: 10px; /* margin-right 10px */
}

.blog-single-category {
  display: inline-block;
  border: 1px solid #B48A41;
  padding: 3px 10px; /* 天地3px 左右10px */
  border-radius: 999px; /* 丸みのあるピル型 */
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: #B48A41;
}

.blog-single-meta-row .blog-single-meta-right {
  display: flex;
  align-items: center;
}

.blog-single-share-label {
  display: none; /* スマホではSHARE文字を非表示 */
}

.blog-single-share-buttons {
  display: flex;
  align-items: center;
  gap: 8px; /* SNSボタン同士の間隔 */
}

.blog-single-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; /* 直径 28px */
  height: 28px;
  border-radius: 50%;
  color: #ffffff !important;
  transition: opacity 0.3s ease;
}

.blog-single-share-btn:hover {
  opacity: 0.85;
}

.blog-single-share-btn--x {
  background-color: #000000;
}

.blog-single-share-btn--facebook {
  background-color: #1877F2;
}

.blog-single-share-btn--line {
  background-color: #06C755;
}

.blog-single-thumbnail {
  width: 100%;
  aspect-ratio: 370 / 240; /* 370:240の割合で表示 */
  border-radius: 4px; /* border-radius 4px */
  overflow: hidden;
  margin-bottom: 24px; /* サムネイル下部余白 */
}

.blog-single-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  background-color: #E5E0D4; /* 画像はグレー */
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-single-thumbnail-placeholder span {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(10, 30, 55, 0.3);
  text-transform: uppercase;
}

/* ============================================
   目次セクション (Table of Contents - SP)
   ============================================ */
.blog-toc {
  width: 100%;
  background-color: #FBF8F1; /* 薄いベージュ背景 */
  border-left: 4px solid rgba(180, 138, 65, 0.4); /* border-left: 4px solid #B48A4166 (40%不透明度) */
  border-radius: 4px;
  padding: 22px 20px; /* padding-top/bottom 22px, padding-left/right 20px */
  margin-top: 30px; /* セクション内部上部余白 30px */
  margin-bottom: 30px;
  box-sizing: border-box;
}

.blog-toc-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  text-align: left;
}

/* ３本線（ハンバーガーマーク風） */
.blog-toc-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 14px;
  height: 10px;
  margin-right: 10px; /* margin-right 10px */
}

.blog-toc-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #B48A41; /* ゴールド */
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アコーディオン展開時の３本線の変化用（オプションとして用意） */
.blog-toc.is-open .blog-toc-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.blog-toc.is-open .blog-toc-bar:nth-child(2) {
  opacity: 0;
}
.blog-toc.is-open .blog-toc-bar:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

.blog-toc-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px; /* font-size 15px (SP) */
  line-height: 100%;
  letter-spacing: 0.14em; /* letter-spacing 14% */
  text-indent: 0.14em;
  color: #0A1E37; /* 文字色 #0A1E37 */
}

.blog-toc-content {
  margin-top: 16px;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}

.blog-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 項目間の縦スペース */
}

.blog-toc-item {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.blog-toc-link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition: opacity 0.2s ease;
}

.blog-toc-link:hover {
  opacity: 0.7;
}

/* 01 などの数字 */
.blog-toc-num {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 11px; /* SP: 11px */
  line-height: 100%;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #B48A41; /* ゴールド */
  margin-right: 10px; /* margin-right 10px */
  margin-top: 4px; /* テキストとの垂直位置微調整 */
}

/* 目次のタイトルテキスト */
.blog-toc-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 12px; /* SP: 12px */
  line-height: 180%; /* line-height 180% */
  letter-spacing: 0.06em; /* 6% */
  color: #3D3D3D; /* #3D3D3D */
  text-align: left;
}

/* 記事装飾部分 (entry-content) */
.blog-single-content {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px; /* 本文 font-size: 13px (SP) */
  line-height: 200%; /* line-height: 200% */
  letter-spacing: 0.04em; /* letter-spacing: 4% */
  text-indent: 0.04em;
  color: #3D3D3D; /* フォント色 #3D3D3D */
  padding-top: 20px; /* 本文エリア セクション内部余白 20px 30px (SP) */
  padding-bottom: 30px;
}

.blog-single-content p {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 13px; /* 本文 font-size: 13px (SP) */
  line-height: 200%;
  letter-spacing: 0.04em;
  color: #3D3D3D;
  margin: 0 0 16px; /* margin-bottom: 16px (SP) */
}

/* h2見出し（夏に多い「熱中症」とは？など） */
.blog-single-content h2 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 17px; /* font-size: 17px (SP) */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  text-indent: 0.06em;
  color: #0A1E37;
  border-width: 0px 0px 1px 3px; /* border-width: 0px, 0px, 1px, 3px */
  border-style: solid;
  border-color: #B48A41; /* border-color: #B48A41 */
  padding: 6px 14px; /* 内部余白 天地6px 左右14px */
  margin: 40px 0 22px; /* margin-bottom: 22px */
}

/* h3見出し（味すぐきなど） */
.blog-single-content h3 {
  display: flex;
  align-items: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px; /* font-size: 15px (SP) */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  text-indent: 0.06em;
  color: #0A1E37; /* background: #0A1E37 (テキスト色) */
  margin: 32px 0 14px; /* margin-bottom: 14px */
}

/* ドット (H3見出し横) */
.blog-single-content h3::before {
  content: "";
  display: inline-block;
  width: 6px; /* width: 6px (SP) */
  height: 6px; /* height: 6px (SP) */
  background-color: #B48A41; /* background: #B48A41 */
  border-radius: 50%;
  margin-right: 6px; /* margin-right: 6px */
  flex-shrink: 0;
}

/* h4見出し（夏ギフトにおすすめ） */
.blog-single-content h4 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 16px; /* font-size: 16px (SP) */
  line-height: 100%;
  letter-spacing: 0.06em; /* letter-spacing: 6% */
  text-indent: 0.06em;
  color: #0A1E37; /* background: #0A1E37 */
  text-align: center; /* text-align: center */
  margin: 30px 0 14px; /* margin-bottom: 14px */
}

/* リンクボタン */
.blog-single-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 24px 0 32px;
}

.blog-single-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 334px; /* SPでもはみ出さないように制限 */
  padding: 14px 20px; /* ボタン内天地余白 14px */
  background-color: #B48A41; /* background: #B48A41 */
  box-shadow: 0px 4px 10px 0px rgba(180, 138, 65, 0.3); /* box-shadow: 0px 4px 10px 0px #B48A414D */
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 14px; /* font-size: 14px (SP) */
  line-height: 100%;
  letter-spacing: 0.16em; /* letter-spacing: 16% */
  text-indent: 0.16em;
  color: #FFFFFF; /* background: #FFFFFF (テキスト色) */
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.blog-single-btn:hover {
  background-color: #a07a35;
  box-shadow: 0px 6px 14px 0px rgba(180, 138, 65, 0.4);
}

.blog-single-btn:active {
  transform: translateY(1px);
}

.blog-single-content blockquote {
  border-left: 3px solid #E5E0D4;
  padding: 8px 0 8px 16px;
  margin: 24px 0;
  color: #757575;
  font-style: italic;
}

.blog-single-content ul,
.blog-single-content ol {
  margin: 24px 0;
  padding-left: 20px;
}

.blog-single-content li {
  margin-bottom: 8px;
  line-height: 180%;
}

.blog-single-content strong {
  font-weight: 700;
  color: #0A1E37;
}

/* ============================================
   ブログ詳細（single.html）用スタイル (PC)
   ============================================ */
@media (min-width: 768px) {
  .blog-single-section {
    padding: 60px 0 40px; /* セクション内部上下余白60px 40px */
  }

  .blog-single-container {
    max-width: 900px; /* 読みやすい記事幅に制限 */
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .blog-single-header {
    margin-bottom: 32px;
  }

  .blog-single-title {
    font-size: 32px; /* タイトル部分フォントサイズ 32px (PC) */
    line-height: 170%; /* 170% */
    letter-spacing: 0.08em; /* 8% */
    text-indent: 0.08em;
    margin-bottom: 24px; /* margin-bottom 24px */
  }

  .blog-single-date {
    display: inline-block;
    font-size: 14px; /* 日付 14px */
    letter-spacing: 0.12em; /* 12% */
    text-indent: 0.12em;
    margin-bottom: 0;
    margin-right: 12px; /* margin-light 12px */
  }

  .blog-single-category {
    padding: 4px 12px; /* 天地4px 左右12px */
    font-size: 11px;
  }

  .blog-single-share-label {
    display: inline-block;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0.16em; /* 16% */
    text-indent: 0.16em;
    color: #757575;
    margin-right: 10px; /* margin-light 10px */
  }

  .blog-single-share-btn {
    width: 32px; /* 直径 32px */
    height: 32px;
  }

  .blog-single-share-btn svg {
    transform: scale(1.15); /* アイコンをやや大きく */
  }

  .blog-single-thumbnail {
    aspect-ratio: 1400 / 680; /* PC時は1400:680の割合 */
    margin-bottom: 40px;
  }

  /* ============================================
     目次セクション (Table of Contents - PC)
     ============================================ */
  .blog-toc {
    width: 100%;
    padding: 22px 20px; /* padding保持 */
    margin-top: 40px; /* セクション内部上部余白 40px */
    margin-bottom: 40px;
  }

  .blog-toc-title {
    font-size: 18px; /* font-size 18px (PC) */
  }

  .blog-toc-list {
    gap: 16px; /* gap保持 */
  }

  .blog-toc-num {
    font-size: 13px; /* PC: 13px */
  }

  .blog-toc-text {
    font-size: 14px; /* PC: 14px */
  }

  /* ============================================
     記事装飾部分 (entry-content - PC)
     ============================================ */
  .blog-single-content {
    padding-top: 30px; /* 本文エリア セクション内部余白 30px 40px (PC) */
    padding-bottom: 40px;
  }

  .blog-single-content p {
    font-size: 15px; /* 本文 font-size: 15px (PC) */
    letter-spacing: 0.06em; /* letter-spacing: 6% */
    text-indent: 0.06em;
    margin-bottom: 24px; /* margin-bottom: 24px (PC) */
  }

  /* h2見出し (PC) */
  .blog-single-content h2 {
    font-size: 22px; /* font-size: 22px (PC) */
    line-height: 100%;
    letter-spacing: 0.08em; /* letter-spacing: 8% */
    text-indent: 0.08em;
    border-width: 0px 0px 1px 4px; /* border-width: 0px, 0px, 1px, 4px */
    padding: 8px 18px; /* 内部余白 天地8px 左右18px */
    margin: 60px 0 24px; /* margin-bottom 24px */
  }

  /* h3見出し (PC) */
  .blog-single-content h3 {
    font-size: 15px; /* font-size: 15px (PC) */
    line-height: 100%;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin: 48px 0 20px; /* margin-bottom 20px */
  }

  /* ドット (H3見出し横 - PC) */
  .blog-single-content h3::before {
    width: 8px; /* width: 8 (PC) */
    height: 8px; /* height: 8 (PC) */
    margin-right: 6px; /* margin-rigth 6px */
  }

  /* h4見出し (PC) */
  .blog-single-content h4 {
    font-size: 18px; /* font-size: 18px (PC) */
    line-height: 100%;
    letter-spacing: 0.08em; /* letter-spacing: 8% */
    text-indent: 0.08em;
    margin: 40px 0 20px; /* margin-bottom 20px */
  }

  /* リンクボタン (PC) */
  .blog-single-btn-wrapper {
    margin: 32px 0 40px;
  }

  .blog-single-btn {
    width: 334px; /* width: 334 */
    height: 59px; /* height: 59 */
    padding: 18px 50px; /* padding-top: 18px, padding-right: 50px, padding-bottom: 18px, padding-left: 50px */
    gap: 10px; /* gap: 10px */
    border-radius: 999px; /* border-radius: 999px */
    font-family: 'Shippori Mincho', serif; /* font-family: Shippori Mincho B1 */
    font-weight: 700;
    font-size: 16px; /* font-size: 16px (PC) */
    line-height: 100%;
    letter-spacing: 0.16em; /* letter-spacing: 16% */
    text-indent: 0.16em;
  }
}

.category-hero__img-wrapper {
  width: 100%;
}
.category-hero__img,
.category-hero picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
    .category-hero__img-wrapper {
        height: auto !important;
        aspect-ratio: auto;
    }
}

img.category-hero__img {
    width: 100% !important;
    height: auto !important;
}

.product-sale-rate{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  background:#e60012;
  color:#fff;
  font-weight:bold;
  font-size:0.85em;
  border-radius:4px;
  vertical-align:middle;
}

/* === 共通（PC・SP両方） === */
.product-desc-text .detail_txt_tb1,
.product-desc-text .detail_txt_tb2 {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  table-layout: fixed;        /* はみ出し防止 */
}
.product-desc-text .detail_txt_tb1 th,
.product-desc-text .detail_txt_tb1 td,
.product-desc-text .detail_txt_tb2 th,
.product-desc-text .detail_txt_tb2 td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;     /* 長い文字列の折り返し */
}
.product-desc-text .detail_txt_tb1 th,
.product-desc-text .detail_txt_tb2 th {
  background: #f5f5f5;
  font-weight: bold;
}
.product-desc-text .detail_txt_tb1 th { width: 130px; }

/* === SP（600px以下） === */
@media screen and (max-width: 600px) {

  /* tb1：左右の2列を「縦積み」にして窮屈さを解消 */
  .product-desc-text .detail_txt_tb1,
  .product-desc-text .detail_txt_tb1 tbody,
  .product-desc-text .detail_txt_tb1 tr,
  .product-desc-text .detail_txt_tb1 th,
  .product-desc-text .detail_txt_tb1 td {
    display: block;
    width: auto;
  }
  .product-desc-text .detail_txt_tb1 th {
    border-bottom: none;       /* th と td の境界線を1本に */
  }
  .product-desc-text .detail_txt_tb1 td {
    border-top: none;
  }

  /* tb2：長い見出しを改行させてはみ出し防止 */
  .product-desc-text .detail_txt_tb2 th {
    white-space: normal;
  }

  /* SPは余白・文字をやや詰める */
  .product-desc-text .detail_txt_tb1 th,
  .product-desc-text .detail_txt_tb1 td,
  .product-desc-text .detail_txt_tb2 th,
  .product-desc-text .detail_txt_tb2 td {
    padding: 6px 10px;
    font-size: 0.9rem;
  }
}



      <!-- お問い合わせ -->
      <div id="area1" class="s1_area">
        <div class="titleArea">
          <div class="line"></div>
          <p class="titleP">お問い合わせ</p>
        </div>
        <div class="boxSmall" style="border-top:1px solid #e0e0e0;">
          <!-- [EMAIL] 部分はMakeShopのお問い合わせフォームURLに要変更 -->
          <a href="#" class="contactBtn">&#9654; お問い合わせフォームはこちら</a>
          <p class="s1_area_infoP">お電話やFAX、メールて&#12441;のこ&#12441;注文も承ります。</p>
          <div class="contactTelArea">
            <p>お客さまセンター　<a href="tel:0757610281">075-761-0281(代)</a></p>
            <p>FAX　075-761-0288</p>
            <p>メールアドレス　<a href="mailto:mail@daiyasu.co.jp">mail@daiyasu.co.jp</a></p>
          </div>
        </div>
      </div>