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

:root {
  /* 色 */
  --color-text: #262626;
  --color-gold: #b9931f;
  --color-gold-dark: #a3821c;

  /* フォント */
  --ff-base: 'Zen Old Mincho', serif!important;
  --fz-title: 40px!important;
  --fz-lead: 16px!important;
  --fz-btn: 18px!important;

  --ls-wide: 0.4em;

  /* リード背景画像サイズ・余白 */
  --read-bg-w: 430px;
  --read-bg-gap: 5%;

  /* feature 用 */
  --w-container: 1000px;
  --overlap-x: 5%;
  --stagger-y: clamp(16px, 4vw, 56px);
  --panel-pad: clamp(16px,3.5vw,32px);
  --title-size: clamp(36px,6vw,72px);
  --title-overhang: 0.6em;
  --illust-w: clamp(120px, 18vw, 180px);
  --illust-clear: calc(var(--illust-w) * 0.23); /* 文字と被らないためのクリアランス */
  --texture: url("/gourmand/img/patisi/plaster_mirror_1024.jpg");
}

/* レイアウトコンテナ */
.l-container {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 16px; /* 端の貼り付き防止 */
}

/* ========== patisi Block ========== */
.patisi {
  font-family: var(--ff-base);
  color: var(--color-text);
}

.patisi__hero img { display:block; width:100%; height:auto; }

/* リード */
.patisi__read {
  margin: 5% 0 0;
  width: 100%;
  background: url("/gourmand/img/patisi/event/pc-read-bg.png")
              no-repeat right center / var(--read-bg-w) auto;
  min-height: 420px; /* 短文時の保険 */
}

.patisi__read-title {
  font: 500 38px/1.2 var(--ff-base);
  text-align: center;
  letter-spacing: var(--ls-wide);
  margin: clamp(16px, 4vw, 28px) 0 0;
}

.patisi__read-text {
  font: 500 var(--fz-lead)/2.6 var(--ff-base);
}

@media (max-width: 1000px) {
  .patisi__read-text {
    width: calc(100% - var(--read-bg-w) - var(--read-bg-gap));
  }
}

@media (max-width: 767px) {
  .patisi__read {
    --read-bg-w: 220px;
    background-position: center bottom;
    padding-bottom: calc(var(--read-bg-w) + 20px);
    min-height: 0;
  }
  .patisi__read-text {
    width: auto; /* テキスト幅は制御解除 */
  }
}

/* ボタン（Block扱いでOK） */
.btn {
  display: block;
  width: fit-content;
  margin: clamp(20px, 5%, 60px) auto 0;
  padding: clamp(14px, 2%, 24px) clamp(24px, 4%, 48px);
  background-color: var(--color-gold);
  color: #fff!important;
  font: 500 var(--fz-btn)/1.4 var(--ff-base);
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .2s;
  position: relative;
}
.btn::after {
  content: "";
  font-size: .8em;
  margin-left: 10px;
  position: relative;
  top: -1px;
}
.btn:hover {
  background-color: #fff;
  color: var(--color-gold-dark)!important;
  border-color: var(--color-gold-dark);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; transform: none; }
  .btn:hover { transform: none; }
}

/* SP調整 */
@media (max-width: 767px) {
  .patisi__read {
    --read-bg-w: 220px;
    background-position: center bottom;
    padding-right: 0;
    padding-bottom: calc(var(--read-bg-w) + 20px);
    min-height: 0;
  }
  .patisi__read-title { font-size: 28px; }
}

/* ========== feature Block（タイトル） ========== */

.feature{
  max-width: var(--w-container);
  margin: clamp(24px,8vw,180px) auto 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ← 1行に戻す */
  align-items: start;
  position: relative;
  isolation: isolate;
}

.feature__media{
  position: relative;
  grid-column: 1; /* 左 */
  z-index: 1;
}
.feature__media picture,
.feature__media img{ display:block; width:100%; height:auto; }

.feature__title{
  position: absolute;
  transform: translateY(calc(-1 * var(--title-overhang)));
  left: clamp(8px,2vw,16px);
  top: 0;
  margin: 0;
  font: 500 56px/1.05 var(--ff-base);
  letter-spacing: .08em;
  color: var(--color-gold);
  pointer-events: none;
  z-index: 2; /* タイトルが常に上 */
}

.feature__panel{
  margin-top: var(--stagger-y);
  width: calc(100% + var(--overlap-x));        /* ← 横幅を“重なり量”ぶん拡張 */
  margin-left: calc(-1.5 * var(--overlap-x));     /* ← 同量左へ寄せて右端は据え置き */
  margin-right: 0;
  background: var(--texture) repeat;
  background-size: 400px;
  /* ← イラストの分だけ上余白を足して、本文に被らないようにする */
  padding: var(--panel-pad) var(--panel-pad) var(--panel-pad) calc(var(--panel-pad) + var(--overlap-x));
}

.feature__illust{
  position: absolute;
  right: clamp(8px,2vw,16px);
  top: calc(-1 * var(--illust-clear));   /* 上に逃がすので本文と被りにくい */
  width: var(--illust-w);
  pointer-events: none;
}

.feature__lead{ 
  font: 500 clamp(18px,2.4vw,22px)/1.8 var(--ff-base); margin:0 0 .6em; }
.feature__text{
  font: 500 var(--fz-lead)/2.6 var(--ff-base);
  line-height: 2; }

/* 反転（画像右／パネル左） */
.feature--reverse .feature__media{ grid-column: 2; }
.feature--reverse .feature__panel{
  grid-column: 1;
  transform: translateX(var(--overlap-x));
  margin-top: var(--stagger-y);
  width: calc(100% + var(--overlap-x));
  margin-left: 0;
  margin-right: calc(-1 * var(--overlap-x));    /* ← 右へ食い込ませる */
}
.feature--reverse .feature__title{
  left:auto; right: clamp(8px,2vw,16px); text-align:right;
}
.feature--reverse .feature__illust{
  right:auto; left: clamp(8px,2vw,16px);
}

/* 1000px以下：少しだけ重なり弱める（任意） */
@media (max-width: 1000px){
  :root{
    --overlap-x: 6%;
    --stagger-y: clamp(10px, 3vw, 36px);
  }
}

/* SP：縦積み。横の重なりは外し、軽く上につける */
@media (max-width: 767px){
  .feature{
    grid-template-columns: 1fr;
    gap: clamp(12px,4vw,20px);
  }
  .feature__panel{
    width: auto;
    margin: 0;
    padding: var(--panel-pad);
    grid-column: 1;
    transform: translateX(0);
    margin-top: clamp(-8px,-2vw,-4px); /* ほんの少しだけ上に被せたい時は負値 */
  }
}

/* ===== Pairing section ===== */

:root{
  --w-container: 1000px;
  --color-text: #262626;
  --color-gold: #b9931f;
  --color-gold-dark: #a3821c;

  --pair-ribbon: #bdd2ed;        /* 青帯 */
  --pair-tea-bg: #ded3c9;        /* 茶帯 */
  --pair-card-bg: rgba(255,255,255,.85);

  --deco-left: url("/gourmand/img/patisi/img-item01.png");
  --deco-right: url("/gourmand/img/patisi/img-item02.png");
}

.pairing{
  max-width: var(--w-container);
  margin: clamp(24px,6vw,56px) auto;
  padding: clamp(16px,3vw,96px);
  color: var(--color-text);

  /* 漆喰＋左右の飾り（多層背景） */
  background-image:
    var(--deco-left),
    var(--deco-right),
    var(--texture);
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    left  clamp(12px, 2.2vw, 20px)  top clamp(12px, 1.4vw, 6px),
    right clamp(12px, 2.2vw, 20px)  top clamp(10px, 1.0vw, 4px),
    0 0;
  background-size:
    clamp(64px, 10vw, 120px),
    clamp(80px, 12vw, 140px),
    420px;
}

/* ヘッダー */
.pairing__head{ text-align:center; margin-bottom: clamp(16px,4vw,48px); }
.pairing__eyebrow{ font: 500 14px/1.2 'var(--ff-base)', serif; letter-spacing:.2em; margin:0; }
.pairing__title{ font: 500 clamp(22px,3.2vw,30px)/1.3 'var(--ff-base)', serif; letter-spacing:.2em; margin:.25em 0 0; }
.pairing__lead{ color: var(--color-gold); font: 500 18px/1.6 'var(--ff-base)', serif; letter-spacing:.25em; margin:.3em 0 0; }

/* グリッド */
.pairing__grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(14px,2.6vw,24px);
}
@media (max-width: 767px){
  .pairing__grid{ grid-template-columns: 1fr; }
  .pairing{
    background-position:
      left 8px top 0,
      right 8px top 0,
      0 0;
    background-size:
      56px, 72px, 320px;
  }
}

/* カード */
.pairing-card{
  position: relative;
  background: var(--pair-card-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
}
.pairing-card__media{ margin:0; }
.pairing-card__media img{
  display:block; width:100%; height:auto; object-fit: cover;
}

/* 青帯（商品名）＋ × を境目に重ねる */
.pairing-card__ribbon{
  position: relative; z-index: 2; 
  background: var(--pair-ribbon);
}
.pairing-card__name{
  text-align:center;
  padding: 18px 12px;
  font: 500 clamp(14px,1.6vw,16px)/1.4 'Zen Old Mincho', serif;
  letter-spacing:.08em;
}
.pairing-card__cross{
  position: absolute;
  left: 50%;
  bottom: calc(-0.5em);           /* はみ出し量は好みで */
  transform: translateX(-50%);
  font: 600 clamp(20px,2vw,24px)/1 var(--ff-base);
  color: #8f7f70;
  z-index: 3;                     /* いちばん前に */
  pointer-events: none;           /* クリックの邪魔をしない */
}

/* 茶帯（リンク・行まるごと） */
.pairing-card__tea{
  font-family: var(--ff-base);
  display:flex; justify-content:center; align-items:center; gap:.5em;
  position: relative; z-index: 1; 
  padding: 14px 36px 16px;
  background: var(--pair-tea-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.pairing-card__tea::after{
 content: "\203A";                     /* › のUnicode */
  font-family: "Noto Sans JP","Segoe UI Symbol",system-ui,sans-serif; /* 擬似要素だけ別フォント */
  position:absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  color: var(--color-gold-dark);
}

/* 4桁コードだけ色替え */
.pairing-card__sku{
  color: var(--color-gold-dark);
  font-weight: 500;
  letter-spacing: .06em;
}

/* hover/focus */
.pairing-card__tea:hover{
  background: var(--color-gold);
  color: #fff;
}
.pairing-card__tea:hover::after{ color:#fff; }
.pairing-card__tea:hover .pairing-card__sku{ color:#fff; }
.pairing-card__tea:focus-visible{
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
}

/* 説明 */
.pairing-card__text{
  padding: 12px 14px 16px;
  font: 500 16px/2 'Zen Old Mincho', serif;
  color: var(--color-text);
}