/** Shopify CDN: Minification failed

Line 9:0 Unexpected "<"
Line 1209:0 Unexpected "<"

**/


<style>

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

  共通・基本設定

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

html, body { max-width: 100%; overflow-x: hidden; }

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }



/* 見出し設定 */

.deck-win-heading-clean {

  margin: 48px 0 24px; padding-left: 14px;

  font-size: 20px; font-weight: bold; border-left: 3px solid #f5b400; line-height: 1.4;

}

/* ===== レシピ一覧の注釈（タップ誘導）：親しみやすさ重視版 ===== */

.deck-recipe-hint {

  display: flex;

  align-items: center;

  justify-content: flex-end; 

  gap: 4px;

  font-size: 11px;

  font-weight: bold;

  color: #444;               /* 少しだけ濃くして読みやすく */

  margin: -15px 0 12px auto;

  padding: 5px 10px;

  background: #fff4d1;       /* 柔らかい黄色 */

  border-radius: 6px;        /* 角を少し丸くしてオシャレに */

  width: fit-content;

  border: 1px solid #ffe082; /* 非常に薄い枠線で丁寧な印象に */

}



.deck-recipe-hint::before {

  content: "💡";

  font-size: 13px;

}



@media (max-width: 768px) {

  .deck-recipe-hint {

    font-size: 10px;

    padding: 4px 8px;

    margin-top: -12px;

  }

}

/* カードグリッド */

.card-grid-8x4 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }

@media (max-width: 768px) { .card-grid-8x4 { grid-template-columns: repeat(5, 1fr); } }



.card-item { position: relative; }

.card-item img { width: 100%; max-width: 150px; border-radius: 6px; display: block; margin: 0 auto; cursor: zoom-in; }

  /* 拡大中（is-active）の時だけ強制的に画面中央に持ってくる */

.card-item.is-active img {

  position: fixed !important; 

  left: 50% !important;

  transform: translateX(-50%) !important;

  z-index: 99999 !important;

  /* ...他の設定... */

}

.card-count {

  position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.75);

  color: #fff; font-size: 14px; font-weight: bold; padding: 3px 6px; border-radius: 4px;

}



/* ×ボタン */

.card-close {

  width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.8);

  color: #fff; font-size: 20px; border: none; cursor: pointer;

  display: none; align-items: center; justify-content: center; position: fixed; z-index: 100001;

}



/* 白いもや：画面の3倍のサイズで上下左右を鉄壁ガード */

#custom-overlay-bg {

  position: fixed !important;

  /* 画面の中心を起点にする */

  top: 50% !important;

  left: 50% !important;

  /* 画面サイズの3倍(300%)の巨大な板を敷く */

  width: 300vw !important;

  height: 300vh !important;

  /* 巨大な板を中央にずらす */

  transform: translate(-50%, -50%) !important;



  background: rgba(255,255,255,0.85) !important; 

  backdrop-filter: blur(15px) !important; 

  -webkit-backdrop-filter: blur(15px) !important; 

  

  z-index: 99998 !important;

  display: none; 

  pointer-events: auto !important;

  

  /* スマホの慣性スクロールによる「戻り」の隙間も物理的に消去 */

  will-change: transform;

}



/* カードがアクティブな時だけ表示 */

body.has-card-active #custom-overlay-bg {

  display: block !important;

}

  body.has-card-active { overflow: hidden; touch-action: none; }



/* 拡大画像：なめらか設定を削除し、指に直結させます */

.card-item.is-active img {

  position: fixed; 

  left: 50%; 

  transform: translateX(-50%) scale(1.0); 

  max-height: 51vh !important; 

  max-width: 82vw !important;

  width: auto !important; 

  height: auto !important; 

  z-index: 99999;

  border-radius: 10px; 

  background: #fff; 

  box-shadow: 0 15px 35px rgba(0,0,0,0.3);

  /* ★重要：ここに transition（なめらかアニメ）は絶対に書かない */

}

/* PC・iPadなど横長画面では画像が大きくなりすぎないよう調整 */

@media (min-width: 769px) {

  .card-item.is-active img {

    max-height: 55vh !important; 

    max-width: 50vw !important;

  }

}

/* 白パネル */

#card-thumbnail-gallery {

  position: fixed; z-index: 100002; background: rgba(255,255,255,0.98);

  padding: 8px 12px !important; border-radius: 12px; display: none;

  flex-direction: column; align-items: center; width: 95% !important;

  max-width: 500px !important; box-sizing: border-box !important;

  box-shadow: 0 5px 25px rgba(0,0,0,0.15);

}



/* サムネエリア：見切れを防止しつつ、枚数に応じて配置を最適化 */

.thumb-scroll-inner {

  display: flex !important;

  gap: 12px !important;

  overflow-x: auto !important;

  padding: 15px 10px !important; /* 左右の余白を少し広げて1枚目がくっつかないように調整 */

  min-height: 75px !important;

  flex: 1;

  scroll-behavior: smooth;

  /* justify-content: center を削除し、自動調整に任せる */

  justify-content: flex-start !important; 

}



/* サムネが少ない時だけ中央に寄せる魔法のコード */

.thumb-scroll-inner::before,

.thumb-scroll-inner::after {

  content: "";

  flex: 1;

}



/* スマホなど幅が狭い端末での微調整 */

@media (max-width: 768px) {

  .thumb-scroll-inner {

    /* スマホで枚数が多い時はスクロールしやすくするため左詰め(safe)に設定 */

    justify-content: safe center;

    gap: 8px !important;

    min-height: 65px !important;

    padding: 10px 5px !important;

  }

}

.thumb-scroll-inner::-webkit-scrollbar { display: none; }



/* サムネ画像：隙間ゼロの設定 */

.thumb-scroll-inner img {

  width: 42px !important;

  height: 58px !important;

  object-fit: cover !important;

  display: block !important;

  flex-shrink: 0 !important;

  border-radius: 4px !important;

  transition: transform 0.2s ease-out, border 0.2s ease-out !important;

  cursor: pointer !important;

  border: 2px solid transparent !important;

  box-sizing: border-box !important; 

  position: relative;

}



/* 選択中のサムネ：影（もや）を削除し、拡大と枠線のみにする */

.thumb-scroll-inner img.is-selected {

  transform: scale(1.2) !important; 

  border: 2.5px solid #2feb7f !important;

  z-index: 10 !important;

  /* 黒いもや（影）を完全に削除 */

  box-shadow: none !important;

}

  /* 復活：矢印ボタンの見た目 */

.thumb-scroll-arrow {

  width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ddd;

  background: white; cursor: pointer; display: flex; align-items: center; justify-content: center;

  flex-shrink: 0; padding: 0;

}

.thumb-scroll-arrow:active { transform: scale(0.9); }

.thumb-scroll-arrow.left::before { content: ""; border-style: solid; border-width: 5px 6px 5px 0; border-color: transparent #333 transparent transparent; }

.thumb-scroll-arrow.right::before { content: ""; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #333; }



/* UIパーツのスリム化 */

.thumb-cart-control {

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

  border: 1px solid #e0e0e0 !important; border-radius: 4px !important;

  margin: 4px 0 !important; height: 30px !important;

}

.thumb-cart-control button { width: 35px; height: 30px !important; border: none; background: transparent !important; color: #333 !important; font-size: 16px; }

.thumb-cart-control .cart-qty { min-width: 35px; text-align: center; font-size: 14px; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; line-height: 30px; }



/* カートボタン：大きすぎず、数ミリだけ厚みを出した最適サイズ */

.custom-add-btn {

  background: #2feb7f !important; color: #000 !important; 

  min-height: 48px !important; /* ★55pxから48pxへ。標準より数ミリ厚い絶妙なライン */

  padding: 0 15px !important; 

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 24px !important; /* 角丸も少し落ち着かせました */

  font-weight: bold !important; font-size: 16px !important; 

  width: 100% !important; 

  margin-top: 10px !important;

  cursor: pointer;

  line-height: 1 !important;

}



  

#card-thumbnail-gallery form { width: 100%; }

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

  ★追加：PC・iPadなど大きな画面の時だけ全体を大きくする設定

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

@media (min-width: 769px) {

/* 3. サムネイル画像自体を大きくし、サイズを固定 */

  .thumb-scroll-inner img { 

    width: 68px !important; 

    height: 95px !important; /* ★PC版の固定高さ */

    border-radius: 6px !important; 

  }

  /* 2. 白パネル全体を横に広く、余白もゆったり */

  #card-thumbnail-gallery { 

    max-width: 750px !important; 

    padding: 24px !important; 

    border-radius: 24px; 

  }



  /* 3. サムネイル画像自体を大きく（42px → 68px） */

  .thumb-scroll-inner img { 

    width: 68px !important; 

    border-radius: 6px !important; 

  }



  /* 4. サムネ同士の隙間を広げる */

  .thumb-scroll-inner { 

    gap: 18px !important; 

    min-height: 100px !important; 

  }



  /* 5. 矢印ボタンを大きく */

  .thumb-scroll-arrow { 

    width: 35px; 

    height: 35px; 

  }



  /* 6. 数量操作ボタンを大きく */

  .thumb-cart-control { 

    height: 45px !important; 

    margin: 10px 0 !important; 

  }

  .thumb-cart-control button { 

    width: 50px; 

    height: 45px !important; 

    font-size: 20px; 

  }

  .thumb-cart-control .cart-qty { 

    min-width: 50px; 

    font-size: 18px; 

    line-height: 45px; 

  }



 /* 7. カートに入れるボタンをPC向けにさらに押しやすく調整 */

  .custom-add-btn { 

    font-size: 20px !important; 

    padding: 20px 25px !important; /* ★ 15pxから20pxに増やしてさらに大きく */

    border-radius: 40px !important; 

    margin-top: 12px !important; 

  }

}

  /* カード移動用の矢印ボタン：サイズと見た目の自動調整 */

.card-nav-btn {

  position: fixed;

  transform: translateY(-50%);

  /* ★画面幅に応じてサイズを自動変更（最小40px〜最大60px） */

  width: clamp(40px, 6vw, 60px) !important;

  height: clamp(40px, 6vw, 60px) !important;

  background: rgba(255, 255, 255, 0.92);

  border: none;

  border-radius: 50%;

  /* ★アイコンサイズも自動調整 */

  font-size: clamp(18px, 2.5vw, 28px) !important;

  font-weight: bold;

  color: #333;

  z-index: 100003;

  cursor: pointer;

  display: none;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

  transition: opacity 0.2s, background 0.2s;

}



/* --- 位置の設定 --- */



/* スマホ（小さな画面）：端に寄せてカードを広く見せる */

#card-nav-prev { left: 8px; }

#card-nav-next { right: 8px; }



/* ★PC・iPad（769px以上）：カードに被らない黄金比率で配置 */

@media (min-width: 769px) {

  #card-nav-prev { 

    /* 中央から外側へ大きく離し、被りを完全に防止 */

    left: calc(50% - 360px) !important; 

  }

  #card-nav-next { 

    right: calc(50% - 360px) !important; 

  }

}



/* 超ワイドモニター：離れすぎないよう最大値を固定 */

@media (min-width: 1400px) {

  #card-nav-prev { left: calc(50% - 400px) !important; }

  #card-nav-next { right: calc(50% - 400px) !important; }

}



/* スマホでの透過度調整 */

@media (max-width: 768px) {

  .card-nav-btn { opacity: 0.75; }

}

/* スマホ用の個別調整 */

@media (max-width: 768px) {

  .card-nav-btn { opacity: 0.8; top: 35%; width: 40px; height: 40px; }

}

.card-nav-btn:active { transform: translateY(-50%) scale(0.9); background: #2feb7f; }



/* カードが開いている時だけボタンを表示 */

body.has-card-active .card-nav-btn {

  display: flex !important;

}

 



/* 枚数表示：極小サイズにして、その分カードを下に下げるスペースを作る */

#card-counter {

  position: fixed;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.45);

  color: white;

  padding: 1px 8px;

  border-radius: 10px;

  font-size: 10px;

  font-weight: bold;

  letter-spacing: 0.5px;

  z-index: 100003;

  display: none;

  pointer-events: none;

}

body.has-card-active #card-counter { display: block; }



/* PCでの矢印ボタンをもっと目立たせる（ホバー時） */

@media (min-width: 769px) {

  .card-nav-btn:hover { background: #2feb7f; color: white; scale: 1.1; }

}

  /* カート内一覧のオーバーレイ画面 */

#cart-list-overlay {

  position: fixed; top: 0; left: 0; width: 100%; height: 100%;

  background: rgba(0,0,0,0.85); z-index: 200000;

  display: none; flex-direction: column; align-items: center; padding: 40px 20px;

}

#cart-list-overlay h3 { color: #fff; margin-bottom: 20px; font-size: 18px; }

.cart-list-container {

  width: 100%; max-width: 400px; max-height: 70vh; overflow-y: auto;

  background: #fff; border-radius: 12px; padding: 15px;

}

.cart-list-item {

  display: flex; align-items: center; gap: 15px; padding: 10px 0;

  border-bottom: 1px solid #eee;

}

.cart-list-item img { width: 50px; border-radius: 4px; }

.cart-list-item-info { flex: 1; }

.cart-list-qty-control { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

.qty-btn { 

  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ddd; 

  background: #f9f9f9; cursor: pointer; display: flex; align-items: center; 

  justify-content: center; font-size: 16px; font-weight: bold; color: #333; 

}

.item-qty-num { font-size: 16px; font-weight: bold; min-width: 24px; text-align: center; }

  .cart-list-close {

  margin-top: 25px; background: #2feb7f; color: #000; border: none;

  padding: 12px 30px; border-radius: 25px; font-weight: bold; cursor: pointer;

}

#cart-status-msg { cursor: pointer; text-decoration: underline; transition: transform 0.2s; }

#cart-status-msg:active { transform: scale(0.95); }

  /* --- カード一覧のバッジ(×3など)を画像の上に浮かせる --- */

.card-item { position: relative !important; }

/* --- 枚数バッジ：左下ギリギリに「浮かせて」配置 --- */

.card-count {

  position: absolute !important;

  /* 数値を小さくするほど角に寄ります */

  bottom: 3px !important;   

  left: 3px !important;     

  background: rgba(0, 0, 0, 0.7) !important; 

  color: #fff !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  padding: 2px 6px !important;

  border-radius: 4px !important; /* 全ての角を丸くして独立させる */

  backdrop-filter: blur(4px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  z-index: 5;

  pointer-events: none;

}

/* --- 拡大画像とパネルの間の枚数表示(1/27など) --- */

#card-counter {

  position: fixed !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  background: rgba(0, 0, 0, 0.5) !important;

  color: white !important;

  padding: 3px 12px !important;

  border-radius: 12px !important;

  font-size: 11px !important;

  font-weight: bold !important;

  z-index: 100005 !important;

  display: none;

  pointer-events: none;

  /* topはJavaScriptで計算します */

}



/* 拡大中は矢印を表示 */

body.has-card-active .card-nav-btn { display: flex !important; }

  /* --- 既存Aのデザインに干渉せず、枚数表示だけを右上に逃がす設定 --- */

#card-counter {

  /* 既存のJS計算をCSSで強制的に上書き固定します */

  position: fixed !important;

  top: 15px !important;    /* 画面の一番上からの距離 */

  right: 15px !important;  /* 画面の右端からの距離 */

  left: auto !important;   /* JSの中央寄せを解除 */

  transform: none !important; /* JSのズレを完全に防止 */

  

  /* スタイリッシュなデザイン：背景を消し、文字を端末サイズに自動最適化 */

  background: none !important;

  color: #333 !important;  /* 視認性の良いダークグレー */

  font-weight: bold !important;

  border: none !important;

  box-shadow: none !important;

  

  /* 端末の幅に合わせて文字サイズを自動で小さくする（最小10px〜最大14px） */

  font-size: clamp(10px, 2.8vw, 14px) !important;

  

  z-index: 200005 !important;

  pointer-events: none; /* 画像のクリックを邪魔しない */

  display: none;

}



/* カードが拡大中（既存Aのクラス）の時だけ表示 */

body.has-card-active #card-counter {

  display: block !important;

}

  /* カート一覧内の＋－ボタンのデザイン */

.cart-list-qty-control {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 8px;

}

.qty-btn {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 1px solid #ddd;

  background: #f9f9f9;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  font-weight: bold;

  color: #333;

}

.item-qty-num {

  font-size: 16px;

  font-weight: bold;

  min-width: 24px;

  text-align: center;

}

  /* カート一覧：モダンなカプセル型数量コントロール */

.cart-list-qty-control {

  display: flex;

  align-items: center;

  background: #f0f0f2 !important; /* 薄いグレーの背景 */

  border-radius: 20px !important;

  padding: 2px !important;

  width: fit-content !important;

  margin-top: 8px !important;

}



.qty-btn {

  width: 32px !important;

  height: 32px !important;

  border: none !important;

  background: transparent !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 18px !important;

  color: #333 !important;

}



.item-qty-num {

  font-size: 14px !important;

  font-weight: bold !important;

  min-width: 30px !important;

  text-align: center !important;

  color: #000 !important;

}
/* カート一覧の削除ボタン（右下テキストリンク風） */
.item-remove-link {
  background: none !important;
  border: none !important;
  color: #999 !important;
  font-size: 11px !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-top: 5px;
  transition: color 0.2s;
  display: inline-block;
  text-align: right;
}
.item-remove-link:hover {
  color: #e74c3c !important; /* ホバーで警告の赤に */
}
  /* 還元ポイントのテキストスタイル */
.item-point-display {
  font-size: 11px !important;
  color: #f39c12 !important; /* 記事に合うオレンジ色 */
  font-weight: bold !important;
  margin-bottom: 2px;
}

/* 右側エリアの微調整（ポイントと金額を綺麗に並べる） */
.cart-list-price-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

/* 右側の金額と削除ボタンを並べるエリア */
.cart-list-price-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
 /* 還元ポイントのスタイル（金額の下に配置） */
.item-point-display {
  font-size: 11px !important;
  color: #f39c12 !important; /* 鮮やかなオレンジ */
  font-weight: bold !important;
  margin-top: 2px;    /* 金額との間に少し隙間を作る */
  margin-bottom: 2px; /* 削除ボタンとの間隔 */
  line-height: 1;
}

/* 右側の価格・ポイント・削除をまとめるエリア */
.cart-list-price-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  justify-content: center;
}
  /* カート一覧の最下部合計エリア */
.cart-total-summary {
  margin-top: 15px;
  padding: 15px;
  background: #fff9eb; /* 非常に薄いオレンジ背景 */
  border-radius: 8px;
  border: 1px solid #ffe082;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.total-summary-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.total-summary-label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.total-summary-value-price {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  font-family: sans-serif;
}

.total-summary-value-pt {
  font-size: 16px;
  font-weight: bold;
  color: #f39c12; /* 記事に合わせたオレンジ */
}
  /* 金額の後に「(税込み)」を自動で表示させる設定 */
#panel-price-display div:first-child::after,
.cart-list-price-zone div:first-child::after,
.total-summary-value-price::after {
  content: " (税込み)";
  font-size: 0.7em; /* 少し小さめに表示してスッキリさせます */
  margin-left: 4px;
  vertical-align: middle;
}
  /* --- ポップアップ確認画面のデザイン --- */
.popup-modal-overlay { 
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(0, 0, 0, 0.7); z-index: 210000; align-items: center; justify-content: center; backdrop-filter: blur(4px); 
}
.popup-modal-content { 
  background: #fff; width: 85%; max-width: 320px; border-radius: 24px; overflow: hidden; 
  box-shadow: 0 15px 50px rgba(0,0,0,0.3); text-align: center; 
  animation: popup-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
@keyframes popup-bounce { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.popup-modal-header { background: linear-gradient(135deg, #ff9800, #f44336); padding: 25px 20px; color: #fff; }
.popup-emoji { font-size: 45px; display: block; margin-bottom: 10px; }
.popup-modal-header h3 { margin: 0; font-size: 18px; font-weight: 900; color: #fff !important; }
.popup-modal-body { padding: 30px 20px; }
.main-msg { font-size: 16px; font-weight: bold; color: #333; line-height: 1.5; margin-bottom: 10px; }
.sub-msg { font-size: 11px; color: #999; margin: 0; }
.popup-modal-footer { display: flex; gap: 12px; padding: 0 20px 30px; }
.modal-btn { flex: 1; padding: 15px; border: none; border-radius: 15px; font-size: 14px; font-weight: bold; cursor: pointer; }
.btn-cancel { background: #f0f0f0; color: #666; }
.btn-ok { background: #ff9800; color: #fff; box-shadow: 0 4px 0 #d35400; }
  /* デッキレシピの直下に文章として表示する設定 */
/* 右下の案内：文字サイズを標準（デフォルト）に変更 */
.recipe-footer-text-refined {
  display: block !important;
  text-align: right !important; /* PC版は右寄せ */
  /* font-size の指定を削除し、標準サイズを適用 */
  color: #888;
  margin: 15px 0 25px auto;
  padding: 0 10px;
  font-family: sans-serif;
  line-height: 1.6;
  letter-spacing: 0.02em;
  width: 100%;
}

/* キラキラアイコン */
.recipe-footer-text-refined::before {
  content: "✨";
  margin-right: 4px;
  vertical-align: middle;
}

/* 強調部分：バラけ防止設定 */
.recipe-footer-text-refined span {
  color: #444;
  font-weight: bold;
  border-bottom: 1.5px solid #ff9800;
  display: inline-block; 
  padding-bottom: 1px;
}

/* ★スマホ版の設定 */
@media (max-width: 768px) {
  .recipe-footer-text-refined {
    text-align: center !important; /* スマホのみ中央寄せ */
    /* ここでも font-size 指定を削除 */
    margin: 10px 0 20px;
    padding: 0 !important;
  }
}
</style>