/** Shopify CDN: Minification failed

Line 820:0 Expected "}" to go with "{"

**/

/* PCではSP用KVを非表示 */
@media (min-width: 990px) {
  #shopify-section-template--17849182912673__image_banner_xCyjGi {
    display: none !important;
  }
}

/* SPではPC用KVを非表示 */
@media (max-width: 989.98px) {
  #shopify-section-template--17849182912673__image_banner {
    display: none !important;
  }
}


/* マルチカラムの列間に余白を追加 */
.multicolumn .multicolumn-list {
  gap: 7px !important;   /* 横と縦の隙間を設定 */
}


/* モバイル */
.page-width{ padding-left: 1.2rem !important; padding-right: 1.2rem !important; }

/* タブレット */
@media (min-width:750px){
  .page-width{ padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* デスクトップ */
@media (min-width:990px){
  .page-width, .page-width-desktop{
    padding-left: 3.2rem !important;
    padding-right: 3.2rem !important;
  }
  .header:not(.drawer-menu).page-width{
    padding-left: 3.2rem !important;
    padding-right: 3.2rem !important;
  }
}



:root {
  /* デスクトップの最大幅を広げたいとき */
  --page-width: 140rem; /* 例: 1120px相当 → 140rem(16px基準) */
}


/* PC: 4列固定・カード幅をpxで固定して中央寄せ */
@media (min-width: 990px) {
  .multicolumn .grid {
    justify-content: center;            /* 余白は外側に逃がして中央寄せ */
    column-gap: 28px !important;        /* 横の余白 */
    row-gap: 40px !important;           /* 縦の余白 */
  }
  .multicolumn .grid__item {
    flex: 0 0 300px !important;         /* 幅を固定（例: 300px） */
    max-width: 300px !important;
    width: 300px !important;
  }
  /* 画像が伸びる場合の保険 */
  .multicolumn .grid__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* タブレット: 2列固定 */
@media (min-width: 750px) and (max-width: 989px) {
  .multicolumn .grid {
    justify-content: center;
    column-gap: 20px !important;
    row-gap: 20px !important;
  }
  .multicolumn .grid__item {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    width: 300px !important;
  }
}

/* モバイル: 1～2列（お好みで） */
@media (max-width: 749px) {
  .multicolumn .grid {
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  /* 2列にしたいなら： */
  .multicolumn .grid__item {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  /* 1列にしたいなら上のブロックを消して、下を有効化
  .multicolumn .grid__item { flex: 0 0 100% !important; max-width: 100% !important; }
  */
}

/* マルチカラム見出しを中央寄せ */
.multicolumn .title-wrapper-with-link{
  justify-content: center !important;   /* ← 左右中央寄せ */
  text-align: center !important;        /* ← 念のため */
}

/* 見出しテキスト自体も中央に（1行幅を持たせる） */
.multicolumn .title-wrapper-with-link .title{
  width: 100%;
  text-align: center !important;
}

/* （任意）サブ見出しを追加したい場合 */
.multicolumn .title-wrapper-with-link .title::after{
  content: "おすすめ商品";
  display: block;
  margin-top: .8rem;
  font-size: 1.8rem;
  color: #1C1607;
  font-weight: 500;
}

/* SP（幅749px以下）は14pxに上書き */
@media screen and (max-width: 749px) {
  .multicolumn .title-wrapper-with-link .title::after {
    font-size: 14px;
  }
}


/* ✅カード全面を覆う見えないリンク */
.multicolumn-card { position: relative; }              /* 基準にする */
.multicolumn-card .full-unstyled-link{
  position: absolute;
  inset: 0;                                            /* top/right/bottom/left: 0 */
  z-index: 10;
  display: block;
  pointer-events: auto;                                /* 念のため */
}

/* フォーカス可視（キーボード操作用） */
.multicolumn-card .full-unstyled-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 見出し中央寄せ＋縦方向に変更 */
section[id*="__collection_list"] .title-wrapper-with-link,
section[id*="__collection_list"] .title-wrapper {
  display: flex !important;
  flex-direction: column !important; /* ←縦並びに変更 */
  align-items: center !important;    /* 横方向も中央寄せ */
  text-align: center !important;
}

/* サブ見出しを下に表示 */
section[id*="__collection_list"] .title-wrapper-with-link::after {
  content: "カテゴリーから選ぶ";   /* ←お好みの文言に変更 */
  font-size: 1.8rem;
  color: #1C1607;
  font-weight: 500; /* ← 追加：500〜700で調整可 */
}

/* モバイル時（幅749px以下）は14pxに変更 */
@media screen and (max-width: 749px) {
  section[id*="__collection_list"] .title-wrapper-with-link::after {
    font-size: 14px;
  }
}



/* 既存（そのまま利用） */
.line-cta { padding: clamp(40px, 7vw, 96px) 0; text-align: center; }
.line-cta__eyebrow { font-weight: 700; letter-spacing: .08em; opacity: .6; margin: 0 0 .4rem; }
.line-cta__title { font-size: clamp(22px, 3.4vw, 34px); margin: 0 0 .6rem; }
.line-cta__desc { max-width: 56rem; margin: 0 auto 1.6rem; line-height: 1.9; }
.line-cta__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 14px 28px; border-radius: 999px; font-weight: 700;
  background: #06C755; color: #fff; text-decoration: none;
  box-shadow: 0 6px 16px rgba(6,199,85,.25);
}
.line-cta__btn:hover { filter: brightness(0.96); transform: translateY(-1px); }
.line-cta__qr { margin-top: 1.2rem; width: 140px; height: auto; }
/* ボタンレイアウトを中央寄せ */
.line-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* ← 中央に寄せる */
  gap: .6rem;                /* アイコンと文字の間隔はここで一定に */
  padding: 14px 28px;        /* 幅を出したいならこっちで調整 */
  min-width: 320px;          /* さらに幅が欲しければ追加（数値はお好みで） */
}

/* アイコンは小さく固定 */
.line-cta__btn svg{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;            /* 伸び縮みさせない保険 */
}

/* 文字が折り返されてずれるのを防止したい場合（任意） */
.line-cta__btn span{
  white-space: nowrap;
}


/* ▼ 調整（見出しを大きく＆メリハリ） */
.line-cta__eyebrow { font-size: clamp(18px, 2.2vw, 24px); }   /* OFFICIAL LINE を大きめに */
.line-cta__title   { font-size: clamp(26px, 3.8vw, 40px); }   /* 公式LINEアカウント を太めの主役に */
.line-cta__desc    { font-size: clamp(14px, 1.6vw, 18px); }   /* お得な情報を配信中！ は一段小さく */

/* （お好み）背景トーンを軽く敷く場合 */
.line-cta { background: #f7f9fb; border-radius: 16px; }

.line-cta__title {
  font-size: 26px;   /* 好きなサイズに変更 */
  font-weight: 600;
  letter-spacing: 0.05em; /* 字間を統一 */
}

/* 共通フォントスタック（Noto Sans JP 優先） */
:root{
  --jp-gothic: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', '游ゴシック', 'YuGothic', Meiryo, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 1) 全体の既定フォントを Noto に（継承する要素も含めて） */
html, body,
button, input, select, textarea {
  font-family: var(--jp-gothic) !important;
}

/* 2) 見出し系もまとめてNotoに（過去のYu指定を上書き） */
h1, h2, h3, h4, h5, h6,
.heading, .footer-block__heading, .newsletter__title {
  font-family: var(--jp-gothic) !important;
}



/* 味わい表示（カード＆商品ページ共通で使える） */
.flavor-block{ margin-top:0px }
.flavor-row{ display:flex; align-items:center; gap:4px; margin:6px 0 }
.flavor-label{
  width: 40px !important;                    /* ラベル幅（64–76pxお好みで） */
  font-size: 16px;                /* 16–18pxくらいが見やすい */
  color: #111;
}
.flavor-beans .bean{ width:20px; height:20px; margin:0 px; vertical-align:middle; opacity:1 }
.flavor-beans .bean.bean--off{ opacity: 0;
}


/* カード内だけ少しコンパクトにしたい時は微調整（任意） */
.flavor-block--card .flavor-label{ width:68px; font-size:16px }





/* ===== 商品カードの枠・角丸・影 ===== */
.product-card-wrapper .card{
  border: 1px solid #E7E2DA;   /* 枠線色：お好みで */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;             /* 角丸に画像も合わせる */
}

/* 画像と情報エリアの間にうっすら仕切り（任意） */
.product-card-wrapper .card__inner + .card__content{
  border-top: 1px solid #F1EEE8;
}


/* ホバーで少し持ち上げ（任意） */
.product-card-wrapper .card:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-2px);
  transition: box-shadow .2s ease, transform .2s ease;
}



/* ====== 商品カードの本文に左余白を強制 ====== */
/* media でも text でも効くようにセレクタを強めています */
@media (min-width: 990px){
.product-card-wrapper .card.card--media .card__content,
.product-card-wrapper .card.card--text  .card__content{
  padding-left: 14px !important;   /* ← 好みで 18–28px に */
  padding-right: 14px;              /* 右は控えめ */
  padding-bottom: 12px;
  padding-top: 10px;
}
}

/* 内側でさらに余白を付けている要素をフラットに */
.product-card-wrapper .card__information{ margin-left: 0 !important; padding-left: 0 !important; }
.product-card-wrapper .flavor-block{ margin-left: 0 !important; }



/* ===== 特集コレクション：列数と余白を統一（4 / 3 / 2 列） ===== */

/* 共通：子要素の余白はgrid gapに一本化 */
section[id*="__featured_collection"] .grid.product-grid > .grid__item{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important; /* 既存のflex指定を中和 */
  box-sizing: border-box !important;
}

/* ====== 特集コレクション：安全リセット ====== */
@media (min-width: 990px){
  section[id*="__featured_collection"] .grid.product-grid{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 等分に戻す */
    column-gap: 40px !important;
    row-gap: 48px !important;
    justify-content: normal !important;  /* 念のため上書き */
  }
}

/* セクション内の横幅を少し狭めて、自然な余白を確保 */
@media (min-width: 1200px){
  section[id*="__featured_collection"] .page-width{
    max-width: 1200px !important;  /* 1100〜1240で好み調整 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* カード内の情報カラムに最小幅を保証（文字の縦崩れ防止） */
@media (min-width: 1200px){
  section[id*="__featured_collection"] .card{
    min-width: 240px !important; /* 240〜260でOK。A/Bどちらの方式でも併用可 */
  }
}





/* スマホ: 2列 */
@media (max-width: 749px) {
  section[id*="__featured_collection"] .grid.product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* ===== SP（749px以下）での最適化 ===== */
@media (max-width: 749px) {
  /* 1) グリッド：2列＆余白（SP専用） */
  section[id*="__featured_collection"] .grid.product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;  /* 横の間：14〜18で調整 */
    row-gap: 22px !important;     /* 縦の間：20〜28で調整 */
    justify-content: normal !important;
  }

  /* 2) アイテム幅リセット（PC指定の影響を断つ保険） */
  section[id*="__featured_collection"] .grid.product-grid > .grid__item{
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 3) カード内パディングを軽く（左右詰まり防止） */
  .product-card-wrapper .card.card--media .card__content,
  .product-card-wrapper .card.card--text  .card__content,
  section[id*="__featured_collection"] .card__content,
  section[id*="__featured_collection"] .card__information {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  /* 4) 画像は正方形＆coverで統一（はみ出し防止） */
  section[id*="__featured_collection"] .card__media,
  section[id*="__featured_collection"] .media { aspect-ratio: 1/1 !important; }
  section[id*="__featured_collection"] .media img{
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  }

  /* 5) タイトル・価格のサイズ調整（2行で揃える） */
  section[id*="__featured_collection"] .card__heading{
    font-size: 12px !important;     /* PC18px→SP16px */
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(1.35em * 2) !important;
    font-weight:500
  }
  section[id*="__featured_collection"] .price .price-item{
    font-size: 13px !important;     /* 価格も13pxに */
    letter-spacing: 0 !important;
    font-weight:500

  }

  /* 6) “味わい”の詰め方（行間＆豆間隔） */
  .flavor-row{ margin: 3px 0 !important; }               /* 行の上下 */
  .flavor-label{ width: 38px !important; font-size: 12px !important;margin-right: -12px !important; /* ラベルと豆の隙間を最小化 */ }
  .flavor-beans .bean{ width: 14px; height: 14px; margin: 0 -1px; }  /* ←豆の間を詰める */

  /* 7) バッジ位置（はみ出し/重なり防止・任意） */
  section[id*="__featured_collection"] .badge{ top: 10px !important; left: 10px !important; }
}

  /* 1) 味わい行は折返し禁止＋中身を収縮可能に */
  .flavor-row{
    display: flex;
    align-items: center;
    gap: 1px !important;          /* 4→2pxに */
    margin: 1px 0 !important;
    flex-wrap: nowrap !important; /* ←折返し禁止がポイント */
  }

  /* === SP：特集コレクションの商品名と価格の間を詰める === */
@media (max-width: 749px){
  /* 1) 見出しの下マージンを小さく & 固定高さを解除 */
  section[id*="__featured_collection"] .card__heading{
    margin-bottom: 2px !important;   /* ← 好みで 0〜4px */
    min-height: unset !important;    /* ← 2行固定の余白を解除 */
    line-height: 1.28 !important;    /* 文字の詰まりすぎ防止 */
  }

  /* 2) 価格側の上マージンを消す（テーマのデフォルトを打ち消す） */
  section[id*="__featured_collection"] .price,
  section[id*="__featured_collection"] .price__container{
    margin-top: 0 !important;
  }

  /* 3) 見出し直後の価格だけを確実に詰める保険（構造差異に対応） */
  section[id*="__featured_collection"] .card__heading + .price,
  section[id*="__featured_collection"] .card__heading + .price__container{
    margin-top: 0 !important;
  }

  /* 4) 価格の行間も少しだけタイトに（任意） */
  section[id*="__featured_collection"] .price .price-item{
    line-height: 1.2 !important;
  }
}



/* ===== PCのみ：ヘッダー右アイコンに黒い丸枠 ===== */
@media (min-width: 990px){
  :root{
    --pc-ring-size: 40px;   /* 直径：32〜42で調整 */
    --pc-ring-width: 1px;   /* 線の太さ */
    --pc-ring-color: #302F2A;/* 枠色 */
  }

  /* 右側アイコン群を広めにキャッチ（Dawn系の差異も吸収） */
  .header__icons :is(
    .header__icon,
    .header__icon--search,
    .header__icon--account,
    .header__icon--cart,
    .search-modal__toggle,
    .predictive-search__toggle,
    summary.header__icon
  ){
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;              /* 枠が乗る最小当たり判定 */
    min-height: 40px;
    margin-left: 4px;             /* 間隔（任意） */
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
  }

  .header__icons :is(
    .header__icon,
    .header__icon--search,
    .header__icon--account,
    .header__icon--cart,
    .search-modal__toggle,
    .predictive-search__toggle,
    summary.header__icon
  )::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pc-ring-size);
    height: var(--pc-ring-size);
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    box-shadow: 0 0 0 var(--pc-ring-width) var(--pc-ring-color) !important;
    pointer-events: none;          /* クリックを邪魔しない */
    z-index: 1;                    /* ドロップダウン三角より手前に */
  }

  /* 任意：ホバー時に少し濃く */
  .header__icons :is(.header__icon, .search-modal__toggle, .predictive-search__toggle):hover::after{
    box-shadow: 0 0 0 var(--pc-ring-width)
      color-mix(in oklab, var(--pc-ring-color) 85%, black);
  }
}

  





/* ===== 特集コレクションの見え方 改善セット ===== */

/* 0) グリッド余白（すでに4列化済み前提・微調整） */
@media (min-width: 990px) {
  section[id*="__featured_collection"] .grid.product-grid {
    column-gap: 32px !important;
    row-gap: 36px !important;
  }
}

/* 1) 画像エリアを正方形に統一＆トリミングをcover */
section[id*="__featured_collection"] .card__media,
section[id*="__featured_collection"] .media {
  aspect-ratio: 1 / 1 !important;          /* 正方形で統一 */
}
section[id*="__featured_collection"] .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;             /* 余白や歪み防止 */
  display: block !important;
}

/* 2) カードの“面”を出して整える（角丸＋影＋ボーダー） */
section[id*="__featured_collection"] .card {
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
}

@media (min-width: 990px){
/* 3) 情報エリアの内側余白を統一（窮屈さ解消） */
section[id*="__featured_collection"] .card__content,
section[id*="__featured_collection"] .card__information {
  padding: 18px 20px !important;
}
}


/* 4) 商品名：2行で揃え、文字サイズ/行間を最適化 */
@media (min-width: 990px) {
section[id*="__featured_collection"] .card__heading {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;         /* 2行で切る */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.35em * 2) !important;  /* 高さ揃え */
  margin-bottom: 8px !important;
}
}


/* 5) 価格を少し強めに（視線の受け皿） */
section[id*="__featured_collection"] .price {
  margin-top: 6px !important;
}
section[id*="__featured_collection"] .price-item--regular,
section[id*="__featured_collection"] .price-item--sale {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* 6) ドット指標（苦味/酸味など）の行間を詰めて高さブレ抑制 */
section[id*="__featured_collection"] .product-meta,
section[id*="__featured_collection"] .card__information p {
  line-height: 1.3 !important;
  margin: 6px 0 !important;
  font-size: 14px !important;
}

/* タイトルは18px/2行固定（既に似た指定があれば不要） */
section[id*="__featured_collection"] .card__heading {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}
/* 価格は文字間を詰めてドンと見せる */
section[id*="__featured_collection"] .price-item--regular,
section[id*="__featured_collection"] .price-item--sale {
  letter-spacing: 0 !important;
}
/* ラベル幅を統一（例：48px） */
section[id*="__featured_collection"] .flavor-label { width: 48px !important; }
/* 各行の上下マージンを統一 */
section[id*="__featured_collection"] .flavor-row { margin: 4px 0 !important; }







コメントオフするかも！
/* ── Part2 だけ：カードは丸いが、画像側の下角は丸めない ── */
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card{
  border-radius: 14px;            /* 全体の角丸（お好みで） */
  overflow: visible;              /* 子要素の角丸を個別に効かせるため */
}

/* 画像ブロック（card__inner）は上だけ角丸。下は直角に */
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card__inner{
  border-radius: 14px 14px 0 0;   /* ← 下の角を 0 にするのがポイント */
  overflow: hidden;               /* 画像のはみ出し防止 */
}

/* 下側の情報ブロックは下だけ角丸 */
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card__content{
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

/* （保険）画像やメディアに角丸が入っていたら消す */
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card__media,
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card__inner img{
  border-radius: 0 !important;
}

/* 画像と本文の境目のグレー線をまっすぐに（任意） */
#collection-template--17849182912673__featured_collection_Fc4zXK .product-card-wrapper .card__inner + .card__content{
  border-top: 1px solid #e9e7e2;  /* お好みの色に */
}


コメントオフするかも！
/* ── シングルオリジンPart3：枠線を消す＋画像を上下とも角丸 ── */
#collection-template--17849182912673__featured_collection_LihWam .product-card-wrapper .card{
  border: none !important;             /* グレー枠を消す（上書き） */
  box-shadow: none !important;         /* 影を入れている場合も消す */
  background: #fff;                    /* 必要に応じて白地をキープ（お好みで） */
}

/* 画像ブロックを上下とも角丸に */
#collection-template--17849182912673__featured_collection_LihWam .product-card-wrapper .card__inner{
  border-radius: 14px !important;      /* 角丸の大きさはお好みで 10–16px */
  overflow: hidden;                    /* 角丸外にはみ出さないように */
}

/* 画像要素に個別の角丸が入っていたらリセットして card__inner に合わせる */
#collection-template--17849182912673__featured_collection_LihWam .product-card-wrapper .card__media,
#collection-template--17849182912673__featured_collection_LihWam .product-card-wrapper .card__inner img{
  border-radius: 0 !important;
}

/* 画像とテキストの間の仕切り線が出ている場合は消す（任意） */
#collection-template--17849182912673__featured_collection_LihWam .product-card-wrapper .card__inner + .card__content{
  border-top: none !important;
}




/* モバイル（749px以下）の見出しサイズ統一 */
@media screen and (max-width: 749px) {
  /* コレクションリスト */
  section[id*="__collection_list"] h2.h1,
  /* 特集コレクション */
  section[id*="__featured_collection"] h2.h1,
  /* マルチカラム */
  section[id*="__multicolumn"] h2.h1 {
    font-size: 26px !important;
    line-height: 1.28;
    letter-spacing: .01em;
  }
}

/* 特集コレクションだけ左右の余白を調整 */

/* スマホ */
@media (max-width: 749px) {
  section[id*="__featured_collection"] .page-width {
    padding-left: 28px !important;   /* 好みで 12–20px */
    padding-right: 28px !important;
  }


  /* カスタムLiquidのボタン行：SPも左右28pxに */
@media (max-width: 749px){
  .mt-viewall{
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ===== SPヘッダー：ロゴだけ確実に大きさを変える（ヘッダー高さは固定のまま） ===== */
@media (max-width: 989px){
  /* 1) ヘッダーはそのまま（固定高さを使っているなら必要に応じて残す） */
  .header{
    position: relative;
  }

  /* 2) ロゴ本体（img / svg / class 直当て）に強制指定 */
  .header__heading .header__heading-logo,
  .header__heading .header__heading-logo img,
  .header__heading .header__heading-logo svg,
  .header__heading-link img,
  .header__heading-link svg,
  .header__heading :is(img, svg) {
    height: 44px !important;        /* ← ★ここを好きな値に（例：44〜56px） */
    max-height: 44px !important;    /* ← ★同じ値にしておく */
    width: auto !important;         /* テーマ/属性の width を無効化 */
    max-width: none !important;     /* 横幅キャップを解除（横長ロゴ対策） */
    object-fit: contain !important;
  }

  /* 3) もし横にスペースが足りず潰れるなら“少しだけ”横幅上限を戻す（任意）
     ※ 不要ならこのブロックは削除OK */
  .header__heading :is(img, svg){
    max-width: calc(100vw - 120px) !important; /* 左右アイコンの空きに合わせて調整 */
  }
}

/* ── SPヘッダー：丸枠だけ付与（ロゴやサイズは触らない） ── */
/* ── SPヘッダー：丸枠を“重ね描き”に変更（直径を自由に） ── */
@media (max-width: 989px){
  :root{
    --ring-default:rgb(48, 47, 42);  /* 検索などの枠色 */
    --ring-cart:     rgb(48, 47, 42);  /* カートの枠色 */
    --ring-menu:       rgb(48, 47, 42);  /* ハンバーガーの枠色 */
    --ring-width:     1px;      /* 枠の線の太さ */
    --ring-diameter:  36px;     /* ★丸枠の直径：小さくしたい値に（例: 34–40px） */
  }

  /* ベース：円を重ねるための下ごしらえ */
  .header :is(.menu-drawer__toggle, .header__icon){
    position: relative;
    border: none !important;           /* 既存の border/outline を無効化 */
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
  }

  /* 共通の丸枠（円は疑似要素で重ねるので直径を自由に調整できる） */
  .header :is(.menu-drawer__toggle, .header__icon)::after{
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;                       /* 中央に配置 */
    width: var(--ring-diameter);
    height: var(--ring-diameter);
    border-radius: 9999px;
    box-shadow: 0 0 0 var(--ring-width) var(--ring-default);
    pointer-events: none;               /* クリックを邪魔しない */
  }

  /* カートだけ色変更（必要なら残す） */
  .header :is(.header__icon--cart, .icon-cart, .icon-cart-empty)::after{
    box-shadow: 0 0 0 var(--ring-width) var(--ring-cart);
  }

  /* ハンバーガーだけ色変更（必要なら残す） */
  .header :is(.menu-drawer__toggle, .header__icon--menu, [aria-controls="menu-drawer"])::after{
    box-shadow: 0 0 0 var(--ring-width) var(--ring-menu);
  }

  /* Hover（任意） */
  .header :is(.menu-drawer__toggle, .header__icon):hover::after{
    box-shadow: 0 0 0 var(--ring-width)
      color-mix(in oklab, var(--ring-default) 85%, black);
  }
}


/* ── SP：ハンバーガー枠が左にくっつくのを離す（+余白） ── */
@media (max-width: 989px){
  :root{ --menu-left-gap: 4px; }  /* ← 好みで 6〜12px などに調整 */

  /* 1) 通常フロー（flex など）なら margin で右へ */
  .header :is(.menu-drawer__toggle, .header__icon--menu, [aria-controls="menu-drawer"]){
    margin-left: var(--menu-left-gap) !important;
  }

  /* 2) 絶対配置されている場合（left で位置決めされているテーマ用） */
  .header :is(.menu-drawer__toggle, .header__icon--menu, [aria-controls="menu-drawer"]){
    position: relative;                    /* relative を付けると left が効く */
    left: var(--menu-left-gap) !important;
  }

  /* 3) それでも動かない/上書きが強い場合の最終手段：見た目だけ移動 */
  .header :is(.menu-drawer__toggle, .header__icon--menu, [aria-controls="menu-drawer"]).force-gap{
    transform: translateX(var(--menu-left-gap)) !important;
  }
}