/* ================================================== */
/* 🚀メイン画像　中央寄せ + はみ出し防止 ＆　ズーム */
/* ================================================== */
.center-img {
  text-align: center;
  overflow: hidden;
}

/* ゆっくり微妙ズーム スピード調整*/
.slow-zoom img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  animation: slowZoom 10s ease-in-out forwards;
}
/* ズーム 大きさ調整*/
@keyframes slowZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}


/* ================================================== */
/* 🚀 カテゴリアイコンデザイン【統合版】 */
/* ================================================== */

/* --- 1. 【基本設定】コンテナ（PC/SP共通） --- */
.a-category-icon-area {
  text-align: center;
  margin-bottom: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
}

.a-category-icon {
  display: block;
  text-align: center;
  flex-shrink: 0;
}

.a-category-icon a {
  display: block;
  text-decoration: none;
  color: #333;
  position: relative;
}

/* --- 2. 【画像デザインとホバー効果】 --- */
.a-category-icon-area .category-icon-img {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 5px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.a-category-icon a:hover .category-icon-img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  opacity: 0.9;
}

/* --- 3. 【SEOテキストは残す：画面外へ退避（レイアウト影響ゼロ）】 --- */
.category-text,
.a-category-icon p{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}




/* 画像だけは表示を維持 */
.a-category-icon-area .category-icon-img {
  font-size: initial !important;
  line-height: initial !important;
  color: initial !important;
}

/* ================================================== */
/* 📱 カテゴリアイコン：レスポンシブレイアウト */
/* ================================================== */

/* --- 4. 【モバイルレイアウト】(767px以下) --- */
.a-flex-row {
  display: flex;
  justify-content: space-around; /* 画面幅いっぱいに広げる */
  flex-wrap: nowrap;             /* 折り返さない */
  overflow-x: hidden;            /* 横スクロール無効 */
  padding-bottom: 0;
  width: 100%;
}

.a-category-icon {
  /* 5個を1行に収めるため縮小を許可 */
  flex-basis: auto;
  flex-shrink: 1;
  min-width: 50px;
  margin: 10px 3px;
}

/* --- 5. 【PCレイアウト】(768px以上)：5個を均等割り --- */
@media (min-width: 768px) {
  .a-category-icon-area.a-flex-row{
    justify-content: space-between; /* 間延びを止める */
    gap: 24px;                      /* 余白はgapで管理 */
    overflow: hidden;
  }

  .a-category-icon{
    flex: 1 1 0;        /* 5個を均等幅にする */
    margin: 10px 0;     /* 横marginを消す（gapに一本化） */
    min-width: 0;       /* はみ出し防止 */
  }
}


/* ================================================== */
/* 🗺️ 地域別マップエリア全体のデザイン */
/* ================================================== */

/* --- 1. エリア全体のコンテナ設定 --- */
.a-map-area {
  text-align: center;   /* 全体を中央揃え */
  padding: 15px 15px;   /* 上下に余白 */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 2. 見出しのデザイン --- */
.a-map-heading {
  font-size: 1.2rem;    /* 少し大きめのサイズ */
  font-weight: bold;
  margin-bottom: 25px;
  color: #333;
}

/* --- 3. 画像マップ用のコンテナ（必要なら使用） --- */
.a-map-container {
  max-width: 500px;
  margin: 0 auto 30px;
}

/* 画像自体はレスポンシブにし、コンテナ幅に合わせる */
.a-map-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

/* --- 4. カテゴリアイコンと地図の間隔調整 --- */
.a-category-icon-area {
  margin-bottom: 30px !important;
}

/* ================================================== */
/* 🗺️ 地名一覧（都道府県リンク）のデザイン */
/* ================================================== */

.a-prefecture-list {
  text-align: left;       /* テキストリンクは左揃えにする */
  max-width: 800px;       /* PCでの幅を地図よりも少し広げる */
  margin: 0 auto;
  padding: 0 10px;
}

/* --- 1. エリア見出し（北海道・東北など） --- */
.a-area-heading {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  border-left: 5px solid #B5322B; /* 赤いライン */
  padding-left: 8px;
  margin-top: 30px;
  margin-bottom: 15px;
}

/* --- 2. 都道府県のリスト設定 --- */
.a-prefecture-group {
  list-style: none;   /* リストの黒点を削除 */
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;           /* 項目間の隙間 */

  /* スマホ：2列表示 */
  grid-template-columns: repeat(2, 1fr);
}

/* 3. 個別のリンクのデザイン */
.a-prefecture-group li {
  background-color: #f7f7f7;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.2s;
}

.a-prefecture-group li a {
  display: block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  padding: 10px 0;
}

.a-prefecture-group li a:hover {
  background-color: #f0f0f0;
  color: #ED0000;
}

/* --- 4. PC表示（768px以上）での調整 --- */
@media (min-width: 768px) {
  .a-prefecture-group {
    /* PCでは4列表示に */
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================================== */
/* 🗺️ jQuery Japan Map 用：クリックずれ対策付きレイアウト */
/* ================================================== */

/* 外側ラッパー：レイアウトだけ担当（幅・余白） */
.gohan-japan-map {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0 10px;
  text-align: center;
  position: static !important;   /* 親の position の影響を減らす */
}

/* 内側：japanMap が直接描画する要素 */
#gohan-japan-map-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  position: static !important;   /* relative などを付けない */
}

/* transform無効化はcanvasだけに限定（他UIを巻き込まない） */
#gohan-japan-map-inner canvas{
  transform: none !important;
}


/* 下の隙間防止（念のため） */
#gohan-japan-map-inner,
#gohan-japan-map-inner canvas {
  line-height: 0;
}

/* ★ canvas は CSS で絶対に拡大縮小しない */
#gohan-japan-map-inner canvas {
  display: block;
  margin: 0 auto;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

/* スマホ時の余白調整（お好みで） */
@media (max-width: 767px) {
  .gohan-japan-map {
    margin-bottom: 30px;
    padding: 0 8px;
  }
}





/* ================================================== */
/* 🗺 iframe 版 日本地図のレイアウト（高さ調整版） */
/* ================================================== */

.gohan-japan-map-iframe-wrap {
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0 10px;
}

/* PC・タブレットは固定高さでたっぷり余裕を取る */
.gohan-japan-map-iframe {
  display: block;
  width: 100%;
  border: none;
  height: 700px;  /* 地図全体＋余白が入るくらいの十分な高さ */
}

/* スマホは画面幅に応じて高さを増やす（縦長にして下が切れないように） */
@media (max-width: 767px) {
  .gohan-japan-map-iframe {
    height: 140vw;  /* 画面幅の 1.4 倍の高さ → 日本列島全部＋ちょい余白 */
  }
}



/* まず両方非表示にしておく（念のため） */
.map-caption-pc,
.map-caption-sp {
  display: none;
}

/* PC向け（例：769px以上）ではPC用だけ表示 */
@media (min-width: 769px) {
  .map-caption-pc {
    display: block;
  }
}

/* スマホ向け（768px以下）ではスマホ用だけ表示 */
@media (max-width: 768px) {
  .map-caption-sp {
    display: block;
  }
}




/* ▼ .a-map-area 内の余白をゼロにし、見出しだけ適度に余白を戻す ▼ */

/* .a-map-area 全体の外側余白をゼロに */
.a-map-area {
  margin-top: 0;
}

/* 見出しブロック（スマホ用）の余白をゼロに */
.a-map-area .map-caption-sp {
  margin: 0 !important;
  padding: 0 !important;
}

/* 見出し h2：上下余白を調整（上 12px / 下 8px） */
.a-map-area .map-caption-sp .a-map-heading {
  margin: 0 0 4px !important;   /* 見出し → 地図の距離は 4px */
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}

/* .a-map-area 内すべての p タグの上下余白をゼロに */
.a-map-area p {
  margin: 0 !important;
  padding: 0 !important;
}

/* ショートコードを包む構造（div, figure, section）も余白ゼロに */
.a-map-area div,
.a-map-area figure,
.a-map-area section {
  margin: 0 !important;
  padding: 0 !important;
}

/* iframe（＝map.html）の上下余白を完全リセット */
.a-map-area iframe {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}




/* スマホのとき、本文エリア（main）を画面いっぱいに近づける */
@media (max-width: 768px) {
  body.page #main.main {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* テーマ側で左右に大きめ padding がある場合に備えて */
    padding-left: 0;
    padding-right: 0;
  }
}

/* スマホ：本文コンテンツの左右余白をほぼゼロにする */
@media (max-width: 768px) {

  /* entry-content 自体の左右 margin / padding を消す */
  #main.main .entry-content.cf {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 特に地図ブロック（a-map-area）の左右 padding も削る */
  #main.main .entry-content.cf .a-map-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* 念のため、entry-content 直下の子要素の左右マージンもゼロに寄せる */
  #main.main .entry-content.cf > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* ================================
   アクセントカラー（深い赤 #B5322B）
   ================================ */

/* 強調ボタンなど（例：トップへ戻る） */
.button,
.btn,
.more-button a {
  background-color: #B5322B !important;
  border-color: #B5322B !important;
}

/* グローバルナビ（ヘッダー）の下線 */
#navi {
  border-top: 4px solid #B5322B !important;
}

/* マーカー風の強調テキスト */
.highlight {
  background: #F8D4CF !important;
  color: #B5322B !important;
}


/* ================================
   地図セクション見出し（PC/SP共通・見出し専用）
   ※ ボタンに見せない
   ================================ */

.map-caption-pc .a-map-heading,
.map-caption-sp .a-map-heading{
  background: transparent !important;
  color: #444 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 16px 0 10px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* 見出し下の区切り線（情報ブロックだと明示） */
.map-caption-pc .a-map-heading::after,
.map-caption-sp .a-map-heading::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  margin: 10px auto 0;
  background: rgba(181,50,43,0.35); /* #B5322B 薄め */
  border-radius: 999px;
}



/* ヘッダー下の余白調整 */
.header,
.header .tagline {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



/* ================================
   人気のカテゴリ：見出し（正本）
================================ */
.cat-lead{
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 16px 0 10px;
}



/* 3アイコン：クリック要素を同じ箱に統一（a/label混在を吸収） */
.kuu-mobile-header-buttons a,
.kuu-mobile-header-buttons .menu-button-in{
  width:44px !important;
  height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

/* 右端の詰まりを均す（必要なら） */
.kuu-mobile-header-buttons{
  padding-right: 6px !important;
  gap: 10px !important;
}





/* ==========================================
   Kuu TOP 専用：北欧ミニマル統一（上書き）
   ※ custom-design.css の末尾に追加
   ========================================== */

body.home,
body.front-page{
  --kuu-main:#E34A3A;
  --kuu-sub:#F8D4CF;
  --kuu-accent:#B5322B;

  --kuu-bg:#FFFBFA;
  --kuu-text:#3A302C;
  --kuu-head:#1F1A17;
  --kuu-muted:#6B5E58;
  --kuu-border:rgba(0,0,0,.07);

  background: var(--kuu-bg);
  color: var(--kuu-text);
}

/* ------------------------------------------
   1) 「人気のカテゴリ」見出しを“品よく”
   ------------------------------------------ */
body.home .cat-lead{
  color: var(--kuu-muted);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 18px 0 10px;
}

/* ------------------------------------------
   2) カテゴリアイコン：丸サイズ/余白/影の統一
   ------------------------------------------ */

/* レイアウト密度を少し上げる（SP/PC共通） */
body.home .a-category-icon-area{
  margin-bottom: 26px !important;
}

/* hover影は薄く。通常は影なし */
body.home .a-category-icon-area .category-icon-img{
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
  box-shadow: none;
  border: 1px solid var(--kuu-border);
  background: #fff; /* 画像の透明部分がある場合の下地 */
}

/* hover：上品に */
@media (hover:hover){
  body.home .a-category-icon a:hover .category-icon-img{
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* ------------------------------------------
   3) ラベルは “小さく薄く” 表示（SEO退避を解除）
   ※ ここが世界観を一段上げるポイント
   ------------------------------------------ */

/* いったん退避指定を打ち消す */
body.home .a-category-icon p{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 6px 0 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ラベルの見た目を北欧ミニマルに */
body.home .a-category-icon p{
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--kuu-muted);
  font-weight: 600;
}

/* ------------------------------------------
   4) 地図見出し（a-map-heading）を “短い下線” に統一
   ※ 既存::afterは良いので色と余白だけ整える
   ------------------------------------------ */
body.home .map-caption-pc .a-map-heading,
body.home .map-caption-sp .a-map-heading{
  color: var(--kuu-head) !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  margin: 18px 0 8px !important;
}

/* 下線の色をKuu基準に */
body.home .map-caption-pc .a-map-heading::after,
body.home .map-caption-sp .a-map-heading::after{
  background: rgba(227,74,58,.35) !important; /* --kuu-main 薄め */
}

/* ------------------------------------------
   5) 地域チップ（ボタン）をミニマルに
   ------------------------------------------ */
body.home .a-prefecture-group li{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--kuu-border);
  border-radius: 999px;
}

body.home .a-prefecture-group li a{
  padding: 10px 0;
  color: var(--kuu-head);
  font-weight: 600;
  letter-spacing: .04em;
}

body.home .a-prefecture-group li a:hover{
  background: rgba(227,74,58,.06);
  color: var(--kuu-accent);
}




/* ==================================================
   TOP：カテゴリ帯（SVG/画像どちらでも）最終FIX【1本化・確定版】
   - 5アイコンを常に“塊として中央寄せ”
   - はみ出し（左右欠け）を防止（=切れない）
   - ラベルは常に1行（海藻・海苔も1行）※全カテゴリ同一サイズ
   - 既存の「SEOテキスト退避」をTOPカテゴリ帯だけ解除
   ================================================== */

/* ===== TOPのカテゴリ帯だけ、退避ルールを無効化してラベルを表示 ===== */
body.home .a-category-icon-area .category-text{
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  border: 0 !important;

  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;      /* 1行固定 */
  font-size: clamp(10px, 2.8vw, 12px) !important; /* ★狭い端末で自動縮小して折れない */
  line-height: 1.2 !important;
  margin: 6px 0 0 !important;
  color: #444 !important;
}

/* ===== 5つのアイコンを「塊」で中央寄せ（PC/SP共通の土台） ===== */
body.home .a-category-icon-area.a-flex-row{
  display: flex !important;
  justify-content: center !important;   /* 塊で中央寄せ */
  align-items: flex-start !important;
  flex-wrap: nowrap !important;

  gap: clamp(8px, 2vw, 18px) !important; /* ★端末幅でgapも自動調整 */
  width: 100% !important;
  max-width: 720px !important;          /* PCで間延びさせない */
  margin: 0 auto 4px !important;
  padding: 0 12px !important;           /* ★左右欠け防止の安全余白 */

  overflow: visible !important;         /* ★これが無いと“欠け”が起きやすい */
}

/* ===== 各アイコンは均等に縮む（固定幅78pxは禁止：狭い端末で破綻する） ===== */
body.home .a-category-icon{
  flex: 1 1 0 !important;
  min-width: 0 !important;              /* ★これが無いとテキスト幅で押し出される */
  margin: 0 !important;
  text-align: center !important;
}

/* リンク内部も縦並び中央揃え */
body.home .a-category-icon a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ===== SVG枠（squircle）===== */
body.home .category-icon-svg{
  width: clamp(44px, 12vw, 56px) !important;
  height: clamp(44px, 12vw, 56px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(7px, 2vw, 10px) !important;
  color: #fff !important;
  margin: 0 auto !important;
}
body.home .category-icon-svg svg{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ===== 画像アイコン版でも同じ箱サイズで揃える（SVG/画像どちらでもOK） ===== */
body.home .a-category-icon-area .category-icon-img{
  width: clamp(44px, 12vw, 56px) !important;
  height: clamp(44px, 12vw, 56px) !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 背景色（URLで判定） */
body.home .a-category-icon a[href*="/food_type/meat/"]       .category-icon-svg{ background:#F8D4CF; }
body.home .a-category-icon a[href*="/food_type/seafood/"]    .category-icon-svg{ background:#CFE6FB; }
body.home .a-category-icon a[href*="/food_type/seaweed/"]    .category-icon-svg{ background:#D7EFD9; }
body.home .a-category-icon a[href*="/food_type/tsukemono/"]  .category-icon-svg{ background:#F6E7B8; }
body.home .a-category-icon a[href*="/food_type/seasoning/"]  .category-icon-svg{ background:#E6DDF7; }
/* ↑　カテゴリの位置調整ここまで */


/* TOPだけ：上の無駄スペース（body margin-top 50px）を消す */
body.home{
  margin-top: 0 !important;
}

/* 念のため：TOPのメイン領域も上余白があれば潰す */
body.home #content,
body.home #content-in,
body.home #main,
body.home #main-in{
  margin-top: 0 !important;
}


/* =========================================================
   Kuu Mobile Menu UI – ハンバーガーメニュー（アイコンNG　子階層NG）
   影響範囲：.navi-menu-content 内だけ
   ========================================================= */
:root{
  --menu-accent: 185, 135, 80; /* 焦げ茶・墨寄り */
}

/* 外側の余白（いまの状態を維持） */
.navi-menu-content{
  background:#fff !important;
  padding: 18px 16px 24px !important;
  box-sizing: border-box !important;
}

/* “カード”本体＝ul にまとめる（事故が少ない） */
.navi-menu-content ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  background:#fff !important;
  border:1px solid rgba(0,0,0,.05) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
}

.navi-menu-content li{
  margin:0 !important;
  padding:0 !important;
}

/* 通常行（地域/カテゴリ/ランキング/問い合わせ） */
.navi-menu-content li:not(.menu-section-title) > a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;  /* 左基準 */
  width:100% !important;
  box-sizing:border-box !important;

  padding: 18px 16px !important;
  line-height:1.6 !important;
  text-decoration:none !important;

  font-size:16px !important;
  font-weight:500 !important;             /* 太字禁止 */
  letter-spacing:.02em !important;

  color: rgb(var(--menu-accent)) !important;
  background: rgba(var(--menu-accent), .06) !important;  /* うす色 */
  border-bottom:1px solid rgba(0,0,0,.05) !important;
}

/* 矢印（右端固定） */
.navi-menu-content li:not(.menu-section-title) > a::after{
  content:"›" !important;
  margin-left:auto !important;
  opacity:.35 !important;
  font-size:18px !important;
}

/* 見出し（商品・レビューを探す / その他） */
.navi-menu-content li.menu-section-title > a{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;

  padding:12px 14px !important;
  margin:0 !important;

  background: rgba(var(--menu-accent), .18) !important;  /* 見出しは少し濃く */
  color: rgb(var(--menu-accent)) !important;

  font-size:16px !important;
  font-weight:500 !important;             /* 強すぎない */
  letter-spacing:.12em !important;

  border-bottom:1px solid rgba(0,0,0,.05) !important;
}

/* 見出しは矢印なし */
.navi-menu-content li.menu-section-title > a::after{
  content:"" !important;
}

/* 押した時の反応（アプリ感の決め手） */
.navi-menu-content li > a:active{
  background: rgba(var(--menu-accent), .08) !important;
}

/* 最後の線は消す */
.navi-menu-content li:last-child > a{
  border-bottom:none !important;
}
/* 色が見えない対策：アルファを上げる（これだけで見た目が変わる） */
.navi-menu-content li:not(.menu-section-title) > a{
  background: rgba(var(--menu-accent), .08) !important; /* .04 → .08 */
}

.navi-menu-content li.menu-section-title > a{
  background: rgba(var(--menu-accent), .18) !important; /* .12 → .18 */
}



/* =========================
 * トップスライダー：3〜4件見えるサイズ（SP優先）
 * おすすめフラグ、星評価優先　トップスライダー：最小限で崩れない
 * ========================= */
.md-otomo-top-slider__list{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:0;
  margin:0;
  list-style:none;
  -webkit-overflow-scrolling:touch;
}

.md-otomo-top-slider__item{
  flex:0 0 28%;     /* 3〜4件見える目安（SP） */
  max-width:28%;
}

/* 画像を「50〜100px」の範囲に収める */
.md-otomo-top-slider__thumb{
  width:100%;
  height:80px;      /* ここで高さ固定（50〜100内で調整） */
  overflow:hidden;
  border-radius:12px;
}

.md-otomo-top-slider__thumb img{
  width:100%;
  height:100%;
  object-fit:cover; /* 破綻しにくい */
  display:block;
}

/* タイトルは2行に固定して崩れ防止 */
.md-otomo-top-slider__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
  font-size:13px;
  margin-top:6px;
}

/* 評価行はコンパクトに */
.md-otomo-top-slider__rating{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}

.md-otomo-top-slider__score{
  font-size:12px;
}

/* 種類タグも控えめに */
.md-otomo-top-slider__type{
  margin-top:4px;
  font-size:11px;
  opacity:.8;
}

/* PCは横幅を少し広げて見やすく（必要なら） */
@media (min-width: 768px){
  .md-otomo-top-slider__item{
    flex:0 0 18%;
    max-width:18%;
  }
  .md-otomo-top-slider__thumb{ height:90px; }
}



/* ================================
 * TOP Feature Title（最終・衝突ゼロ）
 * ================================ */

.kuu-top-feature{
  padding: 0 16px;
  margin-top: 16px;
}

.kuu-top-feature__title{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: #5d5d5d;
}

.kuu-top-feature__desc{
  margin-top: 6px;
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}

/* 静かな区切り線（北欧ミニマム） */
.kuu-top-feature__title::after{
  content: '';
  display: block;
  width: 25px;
  height: 1px;
  background: #999;
  margin-top: 8px;
}



/* ======================================
 * productページ：上余白は main に 50px だけ
 * それ以外の“ヘッダーオフセット要素”は全潰し（差し替え）
 * ====================================== */

/* 外側の余白は全部ゼロ */
body.single-product #content,
body.single-product #content-in,
body.single-product #main,
body.single-product #main-in,
body.single-product #wrapper,
body.single-product #container,
body.single-product #container-in,
body.single-product .content,
body.single-product .content-in{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 余白を入れるのはここだけ */
body.single-product main#kuu-product-main{
  padding-top: 50px !important;
}

/* 固定ヘッダー用スペーサー類（名前違いをまとめて潰す） */
body.single-product .header-spacer,
body.single-product .fixed-header-space,
body.single-product .site-header-spacer,
body.single-product .header-space,
body.single-product .header-gap,
body.single-product .site-header-space,
body.single-product .header-offset,
body.single-product .fixed-header-spacer,
body.single-product #header-space,
body.single-product #header-gap{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* もし “body に padding-top” が入っているタイプなら、それもゼロ化 */
body.single-product{
  padding-top: 0 !important;
  margin-top: 0 !important;
}





/* =====================================================
 * TOP：おすすめ（md_otomo_top_slider）完全版CSS【差し替え用】
 * SP：横スワイプ（1段で3つ見える）
 * PC：グリッド（1024px〜）
 * PC：テキスト段ズレを強制的に解消
 * 影響範囲：TOPおすすめスライダーのみ
 * ===================================================== */

/* ---- スコープを3通り用意（当たらない問題を潰す） ---- */
.kuu-top-feature .md-otomo-top-slider,
#md-top-ranking .md-otomo-top-slider,
.md-otomo-top-slider{
  box-sizing: border-box;
}

/* ---------- 共通：リンク ---------- */
.kuu-top-feature .md-otomo-top-slider__link,
#md-top-ranking .md-otomo-top-slider__link,
.md-otomo-top-slider__link{
  color: inherit;
  text-decoration: none;
  display: flex;                 /* ←縦揃えの土台 */
  flex-direction: column;        /* ←縦揃えの土台 */
  align-items: center;           /* ←中央寄せ */
}

.kuu-top-feature .md-otomo-top-slider__link:visited,
#md-top-ranking .md-otomo-top-slider__link:visited,
.md-otomo-top-slider__link:visited{
  color: inherit;
}

/* ---------- 共通：サムネ（切れ防止の本命） ---------- */
.kuu-top-feature .md-otomo-top-slider__thumb,
#md-top-ranking .md-otomo-top-slider__thumb,
.md-otomo-top-slider__thumb{
  overflow: visible !important;
  height: auto !important;
}

.kuu-top-feature .md-otomo-top-slider__thumb img,
#md-top-ranking .md-otomo-top-slider__thumb img,
.md-otomo-top-slider__thumb img{
  display: block;
  object-fit: contain !important;  /* 切らない */
  object-position: center;
  height: auto;
  margin: 0 auto;
}

/* ---------- 共通：本文（縦ズレ解消の本命） ---------- */
.kuu-top-feature .md-otomo-top-slider__body,
#md-top-ranking .md-otomo-top-slider__body,
.md-otomo-top-slider__body{
  width: 100%;
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
}

/* タイトル：2行固定（ズレ防止） */
.kuu-top-feature .md-otomo-top-slider__title,
#md-top-ranking .md-otomo-top-slider__title,
.md-otomo-top-slider__title{
  font-size: 13px;
  line-height: 1.4;
  margin: 0 !important;

  /* 2行で固定（ここが“揃う”決定打） */
  min-height: calc(1.4em * 2) !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 評価行：詰める */
.kuu-top-feature .md-otomo-top-slider__rating,
#md-top-ranking .md-otomo-top-slider__rating,
.md-otomo-top-slider__rating{
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 !important;
}

.kuu-top-feature .md-otomo-top-slider__score,
#md-top-ranking .md-otomo-top-slider__score,
.md-otomo-top-slider__score{
  font-size: 12px;
  color: #444;
  margin-left: 2px;
  opacity: .9;
}

/* ★の間隔（このスライダー内だけ） */
.kuu-top-feature .md-otomo-top-slider .kuu-rating-stars-base,
.kuu-top-feature .md-otomo-top-slider .kuu-rating-stars-fill,
#md-top-ranking .md-otomo-top-slider .kuu-rating-stars-base,
#md-top-ranking .md-otomo-top-slider .kuu-rating-stars-fill,
.md-otomo-top-slider .kuu-rating-stars-base,
.md-otomo-top-slider .kuu-rating-stars-fill{
  letter-spacing: -0.12em;
	font-size: 12px;
}


/* ☆　スマホのみ ★を小さくする */
@media screen and (max-width: 767px) {
  .kuu-top-feature .md-otomo-top-slider .kuu-rating-stars-base,
  .kuu-top-feature .md-otomo-top-slider .kuu-rating-stars-fill,
  #md-top-ranking .md-otomo-top-slider .kuu-rating-stars-base,
  #md-top-ranking .md-otomo-top-slider .kuu-rating-stars-fill,
  .md-otomo-top-slider .kuu-rating-stars-base,
  .md-otomo-top-slider .kuu-rating-stars-fill {
    font-size: 9px;
  }
}




/* 価格 */
.kuu-top-feature .md-otomo-top-slider__price,
#md-top-ranking .md-otomo-top-slider__price,
.md-otomo-top-slider__price{
  margin: 0 !important;
  font-size: 12px;
  color: #444;
}

/* 価格スマホのみ ★を小さくする */
@media screen and (max-width: 767px) {
.kuu-top-feature .md-otomo-top-slider__price,
#md-top-ranking .md-otomo-top-slider__price,
.md-otomo-top-slider__price{
    font-size: 9px;
  }
}

/* =====================================================
 * SP（〜1023px）：横スワイプ、1段で3つ見える
 * ===================================================== */
@media (max-width: 1023px){

  .kuu-top-feature{
    overflow-x: hidden; /* ページ横スクロール事故防止 */
  }

  .kuu-top-feature .md-otomo-top-slider,
  #md-top-ranking .md-otomo-top-slider,
  .md-otomo-top-slider{
    padding: 0 10px;
  }

  .kuu-top-feature .md-otomo-top-slider__list,
  #md-top-ranking .md-otomo-top-slider__list,
  .md-otomo-top-slider__list{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: flex-start;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    margin: 0;
    padding: 0;
  }
  .kuu-top-feature .md-otomo-top-slider__list::-webkit-scrollbar,
  #md-top-ranking .md-otomo-top-slider__list::-webkit-scrollbar,
  .md-otomo-top-slider__list::-webkit-scrollbar{
    display: none;
  }

  .kuu-top-feature .md-otomo-top-slider__item,
  #md-top-ranking .md-otomo-top-slider__item,
  .md-otomo-top-slider__item{
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: none;
    scroll-snap-align: start;
  }

  /* SP画像サイズ */
  .kuu-top-feature .md-otomo-top-slider__thumb img,
  #md-top-ranking .md-otomo-top-slider__thumb img,
  .md-otomo-top-slider__thumb img{
    width: 80px;
    max-width: 80px;
    margin: 0 auto 6px;
  }
}

/* =====================================================
 * PC（1024px〜）：グリッド + 画像大きめ
 * ===================================================== */
@media (min-width: 1024px){

  .kuu-top-feature .md-otomo-top-slider,
  #md-top-ranking .md-otomo-top-slider,
  .md-otomo-top-slider{
    padding: 0 10px;
    overflow: visible;
  }

  .kuu-top-feature .md-otomo-top-slider__list,
  #md-top-ranking .md-otomo-top-slider__list,
  .md-otomo-top-slider__list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* ←6だと間延びしやすいので4 */
    gap: 48px;
    align-items: start;
    margin: 0;
    padding: 0;
  }

  .kuu-top-feature .md-otomo-top-slider__item,
  #md-top-ranking .md-otomo-top-slider__item,
  .md-otomo-top-slider__item{
    flex: initial;
  }

  /* PC画像サイズ（ここが変わらない問題を潰すため !important） */
  .kuu-top-feature .md-otomo-top-slider__thumb img,
  #md-top-ranking .md-otomo-top-slider__thumb img,
  .md-otomo-top-slider__thumb img{
    width: 180px !important;
    max-width: 180px !important;
    margin: 0 auto 14px !important;
  }

  .kuu-top-feature .md-otomo-top-slider__rating,
  #md-top-ranking .md-otomo-top-slider__rating,
  .md-otomo-top-slider__rating{
    justify-content: center;
  }
}


/* =====================================================
 * TOPおすすめ：PCグリッド時の「画像下テキストが中央に来ない」最終FIX
 * - グリッドセルの中でカード自体を中央に置く
 * - カード内の中身も中央基準に統一
 * ===================================================== */
@media (min-width: 1024px){

  /* グリッドセル内でアイテム（カード）を中央配置 */
  .kuu-top-feature .md-otomo-top-slider__list{
    justify-items: center !important;
  }

  /* カード本体を「縦並び・中央基準」にする（ここが決定打） */
  .kuu-top-feature .md-otomo-top-slider__item{
    display: flex !important;
    justify-content: center !important;
  }

  /* a要素をカード幅いっぱい + 中央寄せ */
  .kuu-top-feature .md-otomo-top-slider__link{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 本文ブロックも中央基準に統一 */
  .kuu-top-feature .md-otomo-top-slider__body{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* タイトル・価格も個別に中央固定（テーマの左寄せ上書き対策） */
  .kuu-top-feature .md-otomo-top-slider__title,
  .kuu-top-feature .md-otomo-top-slider__price{
    text-align: center !important;
  }

  /* ★行はflexなので justify を中央固定 */
  .kuu-top-feature .md-otomo-top-slider__rating{
    justify-content: center !important;
  }
}

/* =====================================================
 * TOPおすすめ：画像の飛び出しを止めつつ、表示サイズはSP/PCで指定
 * ===================================================== */

/* 1) “負margin/変な余白”だけ潰す（サイズはここで決めない） */
.kuu-top-feature .md-otomo-top-slider__thumb img.wp-post-image{
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 2) 画像のセンタリングはthumb側で */
.kuu-top-feature .md-otomo-top-slider__thumb{
  display: flex !important;
  justify-content: center !important;
}

/* 3) SP（〜1023px）：80px */
@media (max-width: 1023px){
  .kuu-top-feature .md-otomo-top-slider__thumb img.wp-post-image{
    width: 80px !important;
    max-width: 80px !important;
  }
}

/* 4) PC（1024px〜）：180px */
@media (min-width: 1024px){
  .kuu-top-feature .md-otomo-top-slider__thumb img.wp-post-image{
    width: 180px !important;
    max-width: 180px !important;
  }
}


/* =====================================================
 * TOPおすすめ：商品名が数文字で2行になるのを止める（幅の潰れ対策）
 * ===================================================== */

/* PC：画像180pxに合わせてタイトルも180pxの箱を持たせる */
@media (min-width: 1024px){
  .kuu-top-feature .md-otomo-top-slider__body .md-otomo-top-slider__title{
    width: 180px !important;      /* ← max-width ではなく width を固定 */
    max-width: 180px !important;
    min-width: 180px !important;  /* 念のため */
    text-align: center !important;
  }
}

/* SP：画像80pxに合わせる */
@media (max-width: 1023px){
  .kuu-top-feature .md-otomo-top-slider__body .md-otomo-top-slider__title{
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
	font-size: 10px !important;
    text-align: center !important;
  }
}



/* =====================================
   ヘッダー：ユーザーアイコン（共通）
   ===================================== */

/* SVGアイコン共通 */
.kuu-user-icon{
  width:22px;
  height:22px;
  display:block;
}

/* 未ログイン：線画 */
body:not(.logged-in) .kuu-user-icon{
  fill:none;
  stroke:#444;
  stroke-width:1.8;
}

/* ログイン済 ＋ プロフ画像なし：塗り */
body.logged-in .kuu-user-icon{
  fill:#bfbfbf;     /* ← 好きな色に変えてOK */
  stroke:none;
}

/* プロフ画像 */
.kuu-header-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  display:block;
  object-fit:cover;
}


/* =========================================================
   商品ページ（single-product）：レビュー本文 2行で折りたたみ
   → 3行目に1文字でも入るカードだけ JS が「続きをみる」を表示
   ========================================================= */

body.single-product .md-review-cards .glsr-review .glsr-review-content,
body.single-product .md-review-cards .glsr-review .glsr-review-text{
  overflow: hidden;
  max-height: 3.6em; /* 2行分（1行=1.8em想定） */
}

/* <p>余白で高さがブレるのを抑える */
body.single-product .md-review-cards .glsr-review .glsr-review-content p{
  margin: 0;
}

/* 展開時 */
body.single-product .md-review-cards .glsr-review.is-expanded .glsr-review-content,
body.single-product .md-review-cards .glsr-review.is-expanded .glsr-review-text{
  overflow: visible;
  max-height: none;
}

/* ボタン（商品ページでも共通クラスで扱う） */
body.single-product .md-review-cards .glsr-review .md-review-readmore{
  display: none; /* 必要なカードだけJSが表示 */
  align-items: center;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 6px 0 0;
  font-size: 12px;
  color: #E34A3A;
  cursor: pointer;
}





/* =====================================================
   商品ページ：ユーザー行右端に「♡ 数字」（余白バグ完全FIX）
   原因：WP ULike の padding / min-width が空きを作る
   ===================================================== */

/* 「〇〇のクチコミ」直下に出るダミー(LIKED/いいね)を消す */
body.single-product .md-ulike-assets{
  display:none !important;
}

/* レビューカードを縦にして、ユーザー行を下に固定 */
body.single-product .glsr-review.md-review-card{
  display:flex;
  flex-direction:column;
}

/* 長文で崩れない */
body.single-product .glsr-review .glsr-review-content,
body.single-product .glsr-review .glsr-review-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 既存hrが不安定なので消してborderで統一 */
body.single-product .glsr-review.md-review-card hr{
  display:none !important;
}

/* ユーザー行：常に下に寄せる＋上に下線 */
body.single-product .glsr-review.md-review-card .md-review-author{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);

  display:flex;
  align-items:center;
  gap:8px;
}

/* 左側（アバター）は固定 */
body.single-product .glsr-review.md-review-card .md-review-author-avatar{
  flex:0 0 auto;
}

/* ユーザー名は伸びる */
body.single-product .glsr-review.md-review-card .md-review-author-name{
  flex:1 1 auto;
  min-width:0;
}

/* いいねは右端固定 */
body.single-product .glsr-review.md-review-card .md-review-like{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

/* --- ここからが本命：WP ULike 側の余白・幅を根こそぎ潰す --- */

/* 外枠/背景/影を消して横並びに */
body.single-product .glsr-review.md-review-card .md-review-like .wpulike,
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_general_class{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  gap:4px !important;            /* ← ここが“間隔”の唯一の調整点 */
}

/* ボタン：WP ULike の padding/min-width が空きを作るので潰す */
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_btn,
body.single-product .glsr-review.md-review-card .md-review-like .wpulike button.wp_ulike_btn,
body.single-product .glsr-review.md-review-card .md-review-like .wpulike-heart button.wp_ulike_btn,
body.single-product .glsr-review.md-review-card .md-review-like .wpulike button.wp_ulike_btn.wp_ulike_put_text{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  padding:0 !important;
  margin:0 !important;

  min-width:0 !important;        /* ★これが無いと50px幅が残る */
  width:auto !important;         /* ★念押し */
  line-height:1 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  cursor:pointer;
}

/* LIKED/Like テキストは消す */
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_btn > span{
  display:none !important;
}

/* 未いいね：♡ */
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_btn::before{
  content:"♡";
  font-size:14px;
  line-height:1;
  color:#666;
}

/* いいね済み：♥（赤） */
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_is_liked .wp_ulike_btn::before{
  content:"♥";
  color:#E34A3A;
}

/* 数字 */
body.single-product .glsr-review.md-review-card .md-review-like .count-box,
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_counter{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;

  font-size:12px !important;
  line-height:1 !important;
  color:#111;

  margin-left:0 !important;      /* auto が入ってても殺す */
}

/* いいね済みは数字も赤 */
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_is_liked .count-box,
body.single-product .glsr-review.md-review-card .md-review-like .wp_ulike_is_liked .wp_ulike_counter{
  color:#E34A3A !important;
}