@charset "UTF-8";
/* =========================================================
   product-common.css  (v1.6)
   全カテゴリ共通の骨格。
   - 商品テーマ色（--theme-*）：タグ・キャッチコピー・POINTバッジ・強度バー等
   - UI色（--ui-*）：画像枠・表組・原料アイコン・製品の特長見出し・POINTタイトル等
   v1.4: 本文の視認性UP
   v1.5: アレンジ例の■色をテーマ色に統一・材料タイトル文字をノーマル体化・重複削除
   v1.6: 上下パンくずの文字サイズ統一（スマホ幅の.breadcrumb個別font-size指定を削除）
========================================================= */

/* ============================================
   1. リセット
============================================ */
.page *{
  margin:0;
  padding:0;
}

/* ============================================
   2. デザイントークン（テーマ非依存）
============================================ */
:root{
  --color-text:        #24272d;
  --color-muted:       #646a73;
  --color-sub:         #3f4650;
  --color-line:        #878066;
  --color-line-soft:   #aab0ba;
  --color-accent:      #ea7105;
  --color-accent-dk:   #b84f00;

  --color-crumb:       #666;
  --color-crumb-hover: #d9d9d9;

  --color-bg:          #ffffff;
  --color-soft:        #f9f2e0;
  --color-soft-2:      #f4f4f2;

  --container:         960px;
  --container-lower:   760px;
  --container-wide:    1024px;
  --gap-col:           62px;
  --side-padding:      24px;
  --buy-btn-w:         301px;

  --radius: 0;
  --font-base:
    -apple-system, BlinkMacSystemFont,
    "Yu Gothic", "YuGothic",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    sans-serif;

  /* ==== テーマ変数のデフォルト値（＝緑） ==== */
  --theme-color:        #3a8c3f;
  --theme-color-light:  #5cc168;
  --theme-color-soft:   #a8d4a0;
  --theme-color-dark:   #1f5a26;
  --theme-color-bg:     #f6fceb;
  --theme-color-stripe: #e3edd1;

  /* ==== UI色（テーマ非依存・常にプラチナ系） ==== */
  --ui-color:        #6c757d;
  --ui-color-light:  #9ba3ab;
  --ui-color-soft:   #ced4da;
  --ui-color-dark:   #343a40;
  --ui-color-bg:     #f8f9fa;
  --ui-color-stripe: #e9ecef;
}

/* ============================================
   3. ベース設定
============================================ */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  font-family: var(--font-base);
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-bg);
}
.page,.page *{ box-sizing: border-box; }
.page{
  width: min(100% - var(--side-padding), 440px);
  margin: 40px auto 90px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 17.6px;
  line-height: 1.75;
  letter-spacing: .02em;
}
.page img{ display:block; max-width:100%; height:auto; }
.page a{ color:inherit; text-decoration:none; }
.page a:hover{ text-decoration:underline; }
.page button{ font:inherit; }

body,
.page p,.page li,.page dd,.page dt,
.page span,.page td,.page th,.page div{
  font-weight: 550;
  font-synthesis: weight style;
}
.page h1,.page h2,.page h3,.page h4,.page h5,.page h6,
.page strong,.page b,.page em{ font-weight: 700; }

/* ============================================
   4. パンくず
============================================ */
.breadcrumb{
  margin: 30px 0 40px;
  color: var(--color-crumb);
  font-size: .90em;
  font-weight: 500;
}
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px; margin:0; padding:0; list-style:none;
}
.breadcrumb li{
  display:inline-flex; align-items:center;
  padding: 3px 10px;
  border: 1px solid var(--color-crumb);
  border-radius: 6px;
  color: var(--color-crumb);
  background: #fff;
  line-height: 1.5;
  transition: background-color .15s ease;
}
.breadcrumb li a{ display:inline-block; color: inherit; }
.breadcrumb li:not([aria-current="page"]):hover{ background: var(--color-crumb-hover); }
.breadcrumb a:hover{ text-decoration: none; }
.breadcrumb li[aria-current="page"]{
  background: var(--color-crumb);
  border-color: var(--color-crumb);
  color: #fff;
  font-weight: 700;
}
.breadcrumb--bottom{
  margin: 50px 0 0;
  border-top: 0; padding-top: 0;
}

/* ============================================
   5. 上半分
============================================ */
.product{
  display:grid; grid-template-columns: 1fr;
  gap: 42px; align-items:start;
  margin-bottom: 60px;
}
.gallery{ margin:0; position: static; }

/* ▼ 画像枠：UI色（プラチナ系） */
.gallery__main{
  position: relative;
  display:grid; place-items:center;
  width:100%; aspect-ratio:1.04 / 1;
  padding:0;
  border:1px solid var(--ui-color);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  cursor: zoom-in;
  transition: border-color .2s ease;
}
.gallery__main:hover{ border-color: var(--ui-color-light); }
.gallery__main img{
  width:100%; height:100%;
  object-fit:cover;
  cursor: zoom-in;
}
.gallery__main::after{
  /* v1.8: 文字グリフの"+"はフォントの字面の重心が中央からズレるため、
     CSSの背景グラデーションで正確な十字線を描画する方式に変更。
     これにより縦横とも幾何学的に正確な中央寄せになります。 */
  content: "";
  position: absolute; right: 10px; bottom: 10px;
  width: 28px; height: 28px;
  background-color: var(--color-crumb);
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 2px, 2px 12px;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gallery__thumbs{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px; margin-top:15px; padding:0; list-style:none;
}
.gallery__thumbs li{ list-style:none; min-width:0; }
.gallery__item{ min-width:0; list-style:none; }

/* ▼ サムネイル：UI色 */
.gallery__thumb{
  display:grid; place-items:center;
  width:100%; aspect-ratio:1.03 / 1;
  padding:0;
  border:1px solid var(--ui-color);
  border-radius:12px;
  background:#fff;
  cursor:pointer; overflow:hidden;
  transition: border-color .2s ease;
}
.gallery__thumb:hover,
.gallery__thumb.is-active{ border-color: var(--ui-color-light); }
.gallery__thumb:focus-visible{ outline:3px solid #4d90fe; outline-offset:4px; }
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   画像拡大モーダル v1.2
   ─ 画面中央・#666枠・白半透明背景
============================================ */
.img-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.5);
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.img-modal::backdrop{
  background: rgba(0, 0, 0, 0.5);
}

.img-modal img{
  display: block;
  max-width: calc(92vw - 48px);
  max-height: calc(92vh - 48px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 2px solid #666;
  border-radius: 4px;
  background: #fff;
}

.img-modal__close{
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #666;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.img-modal__close:hover{
  background: #fff;
  color: #333;
}

.product__left .purchase-link{ margin-top: 60px; }

/* ▼ キャッチコピー：テーマ色を残す */
.product__lead{
  margin:0 0 8px;
  color: var(--theme-color);
  font-size:1.14em; font-weight: 700;
  text-shadow: 0 0 1px currentColor, 0 0 1px currentColor;
}
.product__title{
  margin:0 0 12px;
  color:#11151b;
  font-size: clamp(28px, 2vw + 16px, 39px);
  line-height:1.25; font-weight: 700;
}

/* ▼ タグ：テーマ色を残す */
.product-tags{
  display:flex; flex-wrap:wrap;
  gap:7px; margin:0 0 6px;
  padding:0; list-style:none;
}
.product-tags li{
  padding:.32em .7em;
  border:1px solid var(--theme-color);
  border-radius:999px;
  color: var(--theme-color);
  background:#fff;
  font-size:.74em; font-weight: 600; line-height:1.3;
}
.product-tags--green{ margin: 10px 0 22px; }
.product-tags--green li{
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
}

/* ▼ 製品概要文：v1.4 濃色化 */
.product__summary{
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: .95em; font-weight: 500;
  letter-spacing: 0.05em; line-height: 1.9;
}

/* ============================================
   6. セクション見出し
============================================ */
.section-h{
  margin:0 0 20px;
  color:#11151b;
  font-size:1.12em; font-weight: 700; line-height:1.25;
}
.section-h--ribbon{ display:flex; align-items:center; }
.section-h--ribbon::before{
  content:"";
  display:inline-block;
  width:.85em; height:.85em;
  margin-right:8px;
  background: var(--color-accent);
}
/* ▼ ■ の色をラインナップと同色（テーマ色）に統一するグループ
   v1.5: #arrange-h を追加 */
#scale-h.section-h--ribbon::before,
#lineup-h.section-h--ribbon::before,
#howto-h.section-h--ribbon::before,
#qa-h.section-h--ribbon::before,
#arrange-h.section-h--ribbon::before{ background: var(--theme-color); }

#recipe-h.section-h--ribbon::before,
#youtube-h.section-h--ribbon::before,
#media-h.section-h--ribbon::before{ background: var(--theme-color-soft); }

/* ▼「製品の特長」帯：UI色 */
.section-h--band{
  display:block; margin:0 0 32px; padding:18px 0;
  border:2px solid var(--ui-color);
  color: var(--ui-color-dark);
  text-align:center;
  background-image:
    repeating-linear-gradient(
      -45deg,
      var(--ui-color-stripe) 0 2px,
      var(--ui-color-bg) 2px 4px
    );
  background-size: 5.66px 5.66px;
}

/* ============================================
   7. 製品特徴 / ラインナップ表組
============================================ */
.variant-card{
  margin:0 0 34px;
  border:1px solid var(--color-line);
  background:#fff;
  overflow:hidden;
}
.variant-card > div{
  display:grid;
  grid-template-columns: 96px 1fr;
  border-top:1px solid var(--color-line);
}
.variant-card > div:first-of-type{ border-top:0; }

/* ▼ 表組の項目背景：UI色 */
.variant-card dt{
  margin:0; padding:8px 10px;
  background-image:
    repeating-linear-gradient(
      -45deg,
      var(--ui-color-stripe) 0 2px,
      var(--ui-color-bg) 2px 4px
    );
  background-size: 5.66px 5.66px;
  color: var(--ui-color-dark);
  font-size:.78em; font-weight:700;
}
.variant-card dd{
  margin:0; padding:8px 10px;
  border-left:1px solid var(--color-line);
  color:#11151b;
  font-size:.78em; font-weight: 400;
}

/* ============================================
   7-b. スペック特徴アイコン（原料由来など）：UI色
============================================ */
.feature-badges{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 0 40px;
  padding: 14px 14px;
  list-style: none;
  background: var(--ui-color-bg);
  border-radius: 14px;
}
.feature-badge{
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 4px; padding: 4px 0;
}
.feature-badge__icon{
  width: 46px; height: 46px;
  display: block; line-height: 0;
}
.feature-badge__icon svg,
.feature-badge__icon img{
  width: 100%; height: 100%; display: block;
}
.feature-badge__icon svg * {
  fill: var(--ui-color) !important;
  stroke: var(--ui-color) !important;
}
.feature-badge__text{
  min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 0;
  transform: translateX(-10px);
}
.feature-badge__label{
  margin: 0;
  color: #11151b;
  font-size: .78em; font-weight: 500;
  line-height: 18px; letter-spacing: 0;
}

.page .feature-badge__value{
  margin: 0;
  color: var(--theme-color);
  font-size: .95em; font-weight: 900;
  font-synthesis: weight;
  line-height: 20px; letter-spacing: 0;
}

.page .feature-badge__value--sm{
  font-size: .82em; line-height: 20px;
}

/* ============================================
   8. 使用量とゼリー強度
============================================ */
.usage-scale{ margin-bottom: 40px; }
.usage-scale .scale-row{
  display:grid; grid-template-columns: 1fr;
  gap:14px; align-items:center;
  margin:0 0 30px; padding:8px 0;
}
.page .scale-label{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:100%; max-width:200px;
  justify-self:start;
  padding:14px 18px;
  border-radius:999px;
  background-image: linear-gradient(44deg,
    var(--theme-color-grad-start),
    var(--theme-color) 57%,
    var(--theme-color-dark)
  );
  color:#fff;
  font-weight: 800; font-size:1em;
  letter-spacing:.06em; text-align:center;
}
.scale-bar{ position:relative; width:100%; }
.scale-bar__track{
  position:relative; height:14px;
  background: var(--color-soft);
  overflow:visible;
}
.scale-bar__track::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      transparent calc(33.333% - 1px), rgba(255,255,255,.85) calc(33.333% - 1px),
      rgba(255,255,255,.85) calc(33.333% + 1px), transparent calc(33.333% + 1px),
      transparent calc(66.666% - 1px), rgba(255,255,255,.85) calc(66.666% - 1px),
      rgba(255,255,255,.85) calc(66.666% + 1px), transparent calc(66.666% + 1px));
  pointer-events:none;
}
.scale-bar__track--clarity,
.scale-bar__track--strength{
  background-image: radial-gradient(#ccc 0.8px, transparent 1.3px);
  background-size: 2.8px 2.8px;
  background-color: #fff;
}

/* ▼ 強度バーのマーカー：テーマ色を残す */
.scale-bar__marker{
  position:absolute; top:50%; left:50%;
  width:22px; height:22px;
  background: linear-gradient(180deg,
    var(--theme-color) 0%,
    var(--theme-color) 50%,
    var(--theme-color-soft) 50%,
    var(--theme-color-soft) 100%);
  border:2px solid #fff;
  transform: translate(-50%,-50%) rotate(45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.scale-bar__caption{
  display:flex; justify-content:space-between;
  margin-top:12px; padding:0 4px;
  color: var(--color-sub);
  font-size:.9em; font-weight: 400;
}

/* ============================================
   9. 下半分
============================================ */
.product-lower{
  width: 100%;
  max-width: var(--container-lower);
  margin: 0 auto;
}
.product-lower > section{ margin-bottom: 60px; }
.product-lower > section:last-of-type{ margin-bottom: 0; }

.point-list{ display:grid; gap:34px; }
.point-list .point:first-child{ margin-top: 20px; }
.point-list .point:last-child{ margin-bottom: 20px; }

/* ▼ POINT見出し：UI色 */
.point h3{
  display:flex; flex-direction: column;
  align-items: flex-start; gap:8px;
  margin:0 0 10px;
  color: var(--ui-color-dark);
  font-size:1.05em; font-weight: 800; line-height:1.35;
}
.page .point__title{
  font-weight: 800;
  color: var(--ui-color-dark);
  line-height: 1.35;
}

/* ▼ POINTバッジ：テーマ色を残す */
.point__no{
  display:inline-flex; align-items:center;
  min-height:31px; padding:0 15px;
  border-radius:999px;
  background: var(--theme-color);
  color:#fff;
  font-size:.72em; letter-spacing:.08em; white-space:nowrap;
  font-weight: 600;
}

/* ▼ POINT本文：v1.4 濃色化 */
.point p{
  margin:0;
  color: var(--color-text);
  font-size:.95em; font-weight: 500; line-height:1.9;
}


/* ▼「製品の特長」の下の区切り線：UI色（プラチナ系） */
.product-intro {
  border-bottom: 2px solid var(--ui-color);
  padding-bottom: 40px;
}

.lineup{
  margin-top: -80px !important;
  padding-top: 0;
}

.lineup-grid{
  display:grid; grid-template-columns: 1fr;
  gap: 30px; margin-bottom: 40px;
}
.lineup-col{
  display: flex; flex-direction: column; gap: 18px;
}
.lineup-col .variant-card{ margin:0; }

/* ▼ ラインナップ画像枠：UI色 */
.lineup-img{
  margin: 0;
  border: 2px solid var(--ui-color);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease;
}
.lineup-img:hover{ border-color: var(--ui-color-light); }
.lineup-img a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  line-height: 0;
}
.lineup-img a:hover{ opacity:.85; text-decoration:none; }
.lineup-img img{
  width: auto; height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.lineup-grid:has(> .lineup-col:only-child){
  grid-template-columns: minmax(280px, 480px);
  justify-content: center;
}

/* 9-3. 購入ボタン */
.purchase-area{ margin: 32px 0 60px; }
.purchase-link{
  display: block;
  width: var(--buy-btn-w);
  max-width: 100%;
  margin-left: auto; margin-right: auto;
  line-height: 0;
}
.purchase-link img{ display: block; width: 100%; height: auto; }
.purchase-link:hover{ opacity: .85; text-decoration: none; }

/* 9-4. レシピ */
.recipe-grid{
  display:grid; grid-template-columns: 1fr;
  gap: 30px; margin:0; padding:0;
  list-style:none;
}
.recipe-card{ margin:0; list-style:none; }
.recipe-card__inner{
  display:block;
  border:1px solid var(--color-line);
  background:#fff;
  color:inherit;
  overflow:hidden;
  text-decoration: none;
  transition: border-color .2s ease;
}
.page .recipe-card__inner,
.page .recipe-card__inner:hover,
.page .recipe-card__inner:focus{
  text-decoration: none;
  border-color: var(--color-line);
}
.page .recipe-card__inner:hover,
.page .recipe-card__inner:focus{
  border-color: var(--theme-color-dark);
}
.recipe-card figure{ margin:0; }
.recipe-card img{
  width:100%; height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.recipe-card figcaption{
  padding:10px 12px;
  border-top:1px solid var(--color-line);
  background: var(--color-soft-2);
  color:#11151b;
  font-size:.9em; font-weight: 500;
  text-align:center;
  text-decoration: none;
}
.page .recipe-card__inner figcaption,
.page .recipe-card__inner:hover figcaption,
.page .recipe-card__inner:focus figcaption,
.page .recipe-card__inner figcaption *,
.page .recipe-card__inner:hover figcaption *,
.page .recipe-card__inner:focus figcaption *{
  text-decoration: none;
}

/* 9-5. YouTube */
.youtube__embed{
  position:relative;
  width:100%; aspect-ratio:16 / 9;
  background:#000;
  border:1px solid var(--color-line);
  overflow:hidden;
  margin-bottom: 100px;
}
.youtube__embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* ============================================
   10. タブレット（521px～）
============================================ */
@media (min-width: 521px){
  .page{ width: min(100% - var(--side-padding), 640px); }
  .gallery__main{ padding: 0; border-radius: 18px; }
  .gallery__thumb{ padding: 0; border-radius: 14px; }
  .gallery__thumbs{ gap: 13px; }
  .gallery__main::after{
    width: 32px; height: 32px;
    right: 12px; bottom: 12px;
    background-size: 14px 2px, 2px 14px;  /* v1.8: タブレット幅でもサイズに合わせて十字線を拡大 */
  }
  .product-tags{ gap:10px; margin:0 0 8px; }
  .product-tags li{ font-size:.82em; }
  .product-tags--green{ margin: 10px 0 30px; }
  .variant-card > div{ grid-template-columns: 140px 1fr; }
  .variant-card dt,
  .variant-card dd{ padding:10px 14px; font-size:.84em; }
  .point h3{
    flex-direction: row;
    align-items: center;
    gap: 14px;
    font-size: 1.16em;
  }
  .feature-badges{ gap: 6px; padding: 16px 18px; }
  .feature-badge{ grid-template-columns: 52px 1fr; gap: 5px; }
  .feature-badge__icon{ width: 52px; height: 52px; }
  .feature-badge__label{ font-size: .82em; line-height: 20px; }
  .page .feature-badge__value{ font-size: 1em; line-height: 22px; }
  .page .feature-badge__value--sm{ font-size: .88em; line-height: 22px; }
}

/* ============================================
   11. デスクトップ（881px～）
============================================ */
@media (min-width: 881px){
  .page{
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto 140px;
  }
  .breadcrumb{
    width: min(var(--container-wide), calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .breadcrumb--bottom{
    width: auto; margin-left: 0; transform: none;
  }
  .product{
    width: min(var(--container-wide), calc(100vw - 48px));
    margin-left: 50%; transform: translateX(-50%);
    grid-template-columns: minmax(300px, 400px) minmax(440px, 1fr);
    gap: 72px; margin-bottom: 80px;
  }
  .gallery{ position: sticky; top: 24px; }

  .usage-scale .scale-row{
    grid-template-columns: 170px 1fr;
    gap: 26px;
  }
  .page .scale-label{
    max-width: 170px;
    justify-self: auto;
  }

  .product-lower > section{ margin-bottom: 80px; }

  .lineup{ margin-top: 0; padding-top: 80px; }
  .lineup-grid,
  .recipe-grid{ grid-template-columns: 1fr 1fr; }
  .lineup-grid:has(> .lineup-col:only-child){
    grid-template-columns: minmax(320px, 520px);
    justify-content: center;
  }
  .purchase-area{ margin: 40px 0 80px; }

  .feature-badges{ gap: 7px; }
  .feature-badge{ grid-template-columns: 56px 1fr; }
  .feature-badge__icon{ width: 56px; height: 56px; }
  .page .feature-badge__value{ font-size: 1.05em; line-height: 24px; }
  .page .feature-badge__value--sm{ font-size: .92em; line-height: 24px; }
}

/* ============================================
   12. スマホ専用調整（～520px）
============================================ */
@media (max-width: 520px){
  .page{
    width: min(100% - 40px, 440px);
    margin-top: 0; padding-top: 60px;
  }
  /* v1.7: 上下とも一回り小さいサイズに統一し、下に30pxのマージンを確保 */
  .breadcrumb{ margin: 0 0 30px; font-size: .68em; }
  .product__title{ margin: -10; line-height: 1; }
  .page .product-tags{
    margin: -20px 0 0;
    line-height: 1; font-size: .80em;
    gap: 4px;   /* v1.7: 1行目タグの間隔を詰める（7px→4px） */
  }
  .page .product-tags.product-tags--green{
    display: flex; flex-wrap: wrap; gap: 4px;   /* v1.7: 2行目タグの間隔を詰める（7px→4px） */
    margin: -38px 0 20px;   /* v1.7: タグ下のマージンを20pxに */
    line-height: 1;
    position: relative; z-index: 1;
    font-size: .80em;
  }
  .page .product-tags li,
  .page .product-tags--green li{
    margin: 0; padding: .3em .7em;
    line-height: 1.2;
  }
  .page .purchase-link{ width: 240px; max-width: 100%; }
  .product__left .purchase-link{ margin-top: 30px; }
  .product-lower > .lineup,
  .product-lower > .recipe,
  .product-lower > .youtube,
  .product-lower > .media-features,
  .product-lower > .howto,
  .product-lower > .qa,
  .product-lower > .arrange-recipes{
    padding-left: 20px; padding-right: 20px;
  }
  .gallery__main,
  .gallery__thumbs{
    width: calc(100% - 40px);
    margin-left: 20px; margin-right: 20px;
  }
  .gallery__main{ margin-top: -20px; }  /* v1.8: 緑タグとメイン画像の間隔を30px確保するため -50px→-20pxに調整（30px分ゆとりを追加） */
  .page .variant-card > div{ grid-template-columns: 120px 1fr; }
  .page .feature-badge__label{ font-size: .68em; line-height: 16px; }
  .page .feature-badge__value{ font-size: .82em; line-height: 18px; }
  .page .feature-badge__value--sm{ font-size: .72em; line-height: 18px; }
  .page .scale-label{
    font-size: .82em;
    padding: 10px 14px;
    margin-bottom: 0px;
  }
}

/* ============================================
   13. メディア掲載  v1.2
   ─ v1.2: dual版（表紙+中面 縦並び／SP横並び）対応
============================================ */
.media-features{ margin: 0 0 60px; }
.media-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 24px;
}
.media-card{
  list-style: none;
  border: 1px solid var(--color-line);
  background: #fff;
  overflow: hidden;
}
.media-card__inner{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
}

/* ---- 左カラム（画像エリア） ---- */
.media-card__covers{
  padding: 24px 20px;
  background: var(--color-soft-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.media-card__cover{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-card__cover img{
  width: auto;
  max-width: 160px;
  max-height: 230px;
  height: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.media-card__cover--inside img{
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* ---- 単一画像版（従来）互換：cover が直接 __inner の子の場合 ---- */
.media-card__inner > .media-card__cover{
  padding: 24px 20px;
  background: var(--color-soft-2);
}

/* ---- 右カラム（本文エリア） ---- */
.media-card__body{ padding: 26px 28px; }
.media-card__label{
  margin: 0 0 8px;
  color: var(--theme-color);
  font-size: .72em; letter-spacing: .2em;
  font-weight: 700;
}
.media-card__title{
  margin: 0 0 16px;
  color: #11151b;
  font-size: 1.08em; font-weight: 700;
  line-height: 1.5;
}
.media-card__issue{
  display: inline-block;
  margin-left: 6px;
  color: var(--color-sub);
  font-size: .9em; font-weight: 500;
}
.media-card__meta{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 12px;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--theme-color-bg);
  font-size: .86em; line-height: 1.6;
}
.media-card__meta dt{ color: var(--theme-color); font-weight: 700; }
.media-card__meta dd{ margin: 0; color: var(--color-sub); font-weight: 400; }
.media-card__desc{
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: .92em; font-weight: 500;
  line-height: 1.85;
}
.media-card__button{ margin: 0; }
.media-card__cta,
.media-card__cta:link,
.media-card__cta:visited{
  display: inline-block;
  padding: 10px 22px;
  background: var(--theme-color);
  color: #fff;
  font-size: .85em; font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease;
}
.media-card__cta:hover,
.media-card__cta:focus{
  background: var(--theme-color-dark);
  color: #fff;
  text-decoration: none;
}
.media-card__cta:hover{ opacity: .9; }

/* ============================================
   SP（～520px）：dual版は左カラムを横並びに
============================================ */
@media (max-width: 520px){
  .media-card__inner{ grid-template-columns: 1fr; }
  .media-card__inner > .media-card__cover{ padding: 22px 20px; }
  .media-card__cover img{ max-width: 150px; max-height: 220px; }
  .media-card__body{ padding: 20px 18px 22px; }
  .media-card__meta{
    grid-template-columns: 56px 1fr;
    font-size: .82em;
  }

  /* dual版：SPで表紙(a)と中面(b)を横並び */
  .media-card__covers{
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 22px 20px;
  }
  .media-card__covers .media-card__cover img{
    max-width: 130px;
    max-height: 180px;
  }
}

/* ============================================
   14. ラインナップ下 購入リンク（グラデーションボタン）
============================================ */
.purchase-link-bottom {
  text-align: center;
  margin: 70px 0 60px;
}
.purchase-link-bottom .purchase-link-text {
  display: inline-block;
  padding: 14px 48px;
  color: #fff;
  font-size: 19px; font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%);
  border-radius: 4px;
  position: relative; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.purchase-link-bottom .purchase-link-text::after {
  content: '';
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  pointer-events: none; z-index: 1;
}
.purchase-link-bottom .purchase-link-text:hover,
.purchase-link-bottom .purchase-link-text:focus,
.purchase-link-bottom .purchase-link-text:active {
  color: #fff;
  text-decoration: none !important;
}
.purchase-link-bottom .purchase-link-text:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #E85D00 0%, #FFC107 100%);
}
.purchase-link-bottom .purchase-link-text:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.purchase-link-bottom .purchase-link-text::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transition: left 0.6s;
  pointer-events: none; z-index: 0;
}
.purchase-link-bottom .purchase-link-text:hover::before { left: 100%; }
@media (max-width: 880px) {
  .purchase-link-bottom { margin: 62px 0 48px; }
  .purchase-link-bottom .purchase-link-text {
    padding: 12px 36px;
    font-size: 17px;
  }
  .purchase-link-bottom .purchase-link-text:hover {
    transform: translateY(-2px) scale(1.05);
  }
  .purchase-link-bottom .purchase-link-text::after {
    top: 4px; left: 4px; right: 4px; bottom: 4px;
  }
}

/* YouTubeセクションが無い時、下パンくずの上余白を追加 */
.product-lower:not(:has(.youtube)) + .breadcrumb--bottom {
  margin-top: 100px;
}

/* =========================================================
   15. 使い方（HOWTO） / Q&A  v1.4
========================================================= */

.howto,
.qa{
  margin-top: 80px;
}

.howto-list,
.qa-list{
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.howto-card{
  border: 1px solid var(--theme-color-soft, #dcdcdc);
  border-radius: 10px;
  padding: 22px 26px 24px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.howto-card__title{
  display: block;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  color: var(--theme-color, #333);
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.howto-card__body{
  margin: 0;
  color: var(--color-text);
  font-size: .95em;
  font-weight: 500;
  line-height: 1.9;
}

.qa-card{
  border: 1px solid var(--qa-color-soft, #bfe3ee);
  border-radius: 10px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.qa-card__title{
  display: block;
  margin: 0;
  padding: 14px 22px;
  background: var(--qa-color-bg, #e8f6fb);
  color: var(--qa-color-dark, #1f7a94);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.qa-card__body{
  margin: 0;
  padding: 16px 22px 20px;
  color: var(--color-text);
  font-size: .95em;
  font-weight: 500;
  line-height: 1.9;
  background: #fff;
}

@media (min-width: 521px){
  .howto-card__title{
    font-size: 1.16em;
  }
}

@media (max-width: 880px){
  .howto,
  .qa{ margin-top: 60px; }

  .howto-list,
  .qa-list{
    gap: 14px;
    margin-top: 22px;
  }

  .howto-card{ padding: 18px 20px 20px; border-radius: 8px; }
  .howto-card__title{ font-size: 1em; }
  .howto-card__body{ font-size: .92em; line-height: 1.85; }

  .qa-card{ border-radius: 8px; }
  .qa-card__title{ font-size: .95em; padding: 12px 18px; }
  .qa-card__body{ padding: 14px 18px 18px; font-size: .92em; line-height: 1.85; }
}

/* =========================================================
   16. アレンジ例（arrange-recipes）  v1.5
   ─ 茶色ヘッダー、白背景の材料エリア、クリーム色の作り方エリア
   ─ 材料タイトル：ノーマル体
   ─ 材料の group（■）・作り方の group（***** name *****）：テーマ色
========================================================= */

.arrange-recipes{
  margin-top: 60px;
}

.arrange-recipe{
  margin: 28px 0 0;
  border: 1px solid #d9cfc0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.arrange-recipe + .arrange-recipe{
  margin-top: 40px;
}

/* ---- タイトル（茶色ヘッダー） ---- */
.arrange-recipe__title{
  display: block;
  padding: 16px 20px;
  background: #4a3a2e;
  color: #fff;
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .04em;
}

/* ---- リード文 ---- */
.arrange-recipe__lead{
  margin: 0;
  padding: 16px 20px 8px;
  color: var(--color-text);
  font-size: .92em;
  font-weight: 500;
  line-height: 1.8;
}

/* ---- 上部エリア（写真 + 材料） ---- */
.arrange-recipe__top{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 12px 20px 24px;
}

/* ---- 写真 ---- */
.arrange-recipe__photo{ margin: 0; }
.arrange-recipe__photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* ---- 材料エリア ---- */
.arrange-recipe__ingredients{ min-width: 0; }

/* v1.5: 材料タイトル文字をノーマル体化（700 -> 500） */
.page .arrange-recipe__ing-title{
  margin: 0 0 20px;
  padding: 0 0 8px;
  border-bottom: 1px dashed #b8a99a;
  color: var(--color-text);
  font-size: .95em;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}

.arrange-recipe__ingredients ul{
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.arrange-recipe__ingredients li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  padding: 4px 0;
  color: var(--color-text);
  font-size: .92em;
  font-weight: 500;
  line-height: 1.6;
}
.arrange-recipe__ingredients .ing-name{
  flex: 1 1 auto;
  font-weight: 500;
}
.arrange-recipe__ingredients .ing-amount{
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 500;
}

/* ---- 材料の group（■ ほうじ茶ぷりん）：テーマ色 ---- */
.arrange-recipe__ingredients .arrange-recipe__group{
  margin: 12px 0 4px;
  color: var(--theme-color);
  font-size: .95em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
}
.arrange-recipe__ingredients .arrange-recipe__group:first-of-type{
  margin-top: 6px;
}

/* ---- 作り方エリア（クリーム色背景） ---- */
.arrange-recipe__steps{
  padding: 20px 20px 24px;
  background: #faf3e6;
  border-top: 1px solid #ecdfc9;
}

.arrange-recipe__make-title{
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 24px;
  background: #4a3a2e;
  color: #fff;
  border-radius: 999px;
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

/* ---- 作り方の group：***** name ***** 形式（テーマ色） ---- */
.arrange-recipe__steps .arrange-recipe__group{
  margin: 18px 0 8px;
  color: var(--theme-color);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.arrange-recipe__steps .arrange-recipe__group::before{
  content: "***** ";
  color: var(--theme-color);
}
.arrange-recipe__steps .arrange-recipe__group::after{
  content: " *****";
  color: var(--theme-color);
}
.arrange-recipe__steps .arrange-recipe__group:first-of-type{
  margin-top: 4px;
}

/* ---- 手順リスト ---- */
.arrange-recipe__steps ol{
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: arrange-step;
}
.arrange-recipe__steps li{
  position: relative;
  padding: 6px 0 6px 44px;
  color: var(--color-text);
  font-size: .92em;
  font-weight: 500;
  line-height: 1.85;
  counter-increment: arrange-step;
}
.arrange-recipe__steps li::before{
  content: "【" counter(arrange-step, decimal) "】";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.85;
}

/* ---- タブレット以上（521px～） ---- */
@media (min-width: 521px){
  .arrange-recipe__top{
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr);
    gap: 24px;
    padding: 16px 24px 28px;
  }
  .arrange-recipe__lead{
    padding: 20px 24px 4px;
    font-size: .95em;
  }
  .arrange-recipe__steps{
    padding: 24px 24px 28px;
  }
  .arrange-recipe__title{
    padding: 18px 24px;
    font-size: 1.06em;
  }
  .arrange-recipe__steps li{
    padding-left: 48px;
    font-size: .95em;
  }
  .arrange-recipe__ingredients .arrange-recipe__group{
    font-size: 1em;
  }
  .arrange-recipe__steps .arrange-recipe__group{
    font-size: 1.05em;
  }
}

/* ---- SP（～520px） ---- */
@media (max-width: 520px){
  .arrange-recipes{ margin-top: 40px; }
  .arrange-recipe__title{
    padding: 14px 16px;
    font-size: .98em;
  }
  .arrange-recipe__lead{
    padding: 14px 16px 6px;
    font-size: .88em;
  }
  .arrange-recipe__top{
    padding: 10px 16px 20px;
    gap: 16px;
  }
  .arrange-recipe__steps{
    padding: 18px 16px 22px;
  }
  .arrange-recipe__steps li{
    padding-left: 40px;
    font-size: .88em;
  }
  .arrange-recipe__make-title{
    padding: 7px 20px;
    font-size: .88em;
  }
  .arrange-recipe__ingredients .arrange-recipe__group{
    font-size: .9em;
  }
  .arrange-recipe__steps .arrange-recipe__group{
    font-size: .95em;
  }
}
/* ============================================
   ▼ セクション間余白の統一（スマホ対策 v22.0）
============================================ */

/* 全セクションに最低限の下余白を保証 */
.product-lower > section {
  margin-bottom: 48px;
}

/* パンくず（下）に上余白を確保
   → 直前セクションが何であっても離れて表示される */
.breadcrumb--bottom {
  margin-top: 48px;
}

/* ============================================
   ▼ スマホ表示（768px以下）
============================================ */
@media (max-width: 768px) {

  /* セクション間の余白をさらに広めに */
  .product-lower > section {
    margin-bottom: 40px;
  }

  /* 製品ラインナップの上余白を強化
     → 製品の特長との被り防止 */
  .lineup {
    margin-top: 40px;
    clear: both;         /* floatが残っていた場合の保険 */
  }

  /* 製品の特長（POINT）の下余白を確保 */
  .product-intro {
    margin-bottom: 40px;
  }

  /* パンくず（下）の上余白 */
  .breadcrumb--bottom {
    margin-top: 40px;
  }

  /* POINTカード同士の隙間も確保（詰まり防止） */
  .point-list {
    gap: 20px;
  }

  .point {
    margin-bottom: 0;    /* gapで管理するのでmarginはリセット */
  }
}

/* ============================================
   ▼ スマホ縦（480px以下）でさらに調整
============================================ */
@media (max-width: 480px) {

  .product-lower > section {
    margin-bottom: 32px;
  }

  .lineup,
  .breadcrumb--bottom {
    margin-top: 32px;
  }
}
/* ============================================
   ▼ 製品ラインナップの上余白（スマホ強化版 v22.1）
============================================ */

/* PC・共通 */
.lineup {
  margin-top: 60px !important;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .lineup {
    margin-top: 56px !important;
    padding-top: 16px;
  }

  /* 「製品の特長」セクションの下余白も強化 */
  .product-intro {
    margin-bottom: 40px !important;
    padding-bottom: 8px;
  }

  /* 最後のPOINTカードの下余白 */
  .point-list > .point:last-child {
    margin-bottom: 24px;
  }

  /* 見出し「■ 製品ラインナップ」の上下余白 */
  .lineup > .section-h,
  #lineup-h {
    margin-top: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .lineup {
    margin-top: 48px !important;
  }
}
/* ============================================
   ▼ パンくず調整（スマホ幅）v22.2
   ─ 上パンくずの上余白を +40px
   ─ v1.6: フォントサイズの個別指定は削除（下部パンくずと統一するため）
============================================ */
@media (max-width: 520px){
  /* 上のパンくずリスト：上マージンのみ調整。フォントサイズは基本値(.90em)を継承し、下部パンくずと統一 */
  .breadcrumb{
    margin-top: 10px;         /* +10px 追加 */
  }

  /* パンくずの各項目：文字サイズを縮小した分、パディングも少し詰める */
  .breadcrumb li{
    padding: 3px 9px;
    line-height: 1.5;
  }
}