/* ▼ ハーブティー特典（2026-10-16）  herb-gift.css
   index.html / product.html の .hg-sec と、プランカードの .hg-tag 用 */
.hg-sec{position:relative;padding:72px 20px;background:
  radial-gradient(60% 80% at 15% 20%,rgba(251,227,216,.75) 0%,rgba(251,227,216,0) 70%),
  radial-gradient(50% 70% at 90% 85%,rgba(233,210,154,.35) 0%,rgba(233,210,154,0) 70%),
  linear-gradient(160deg,#FFFDFA 0%,#FBF3EC 55%,#F7EBE2 100%);overflow:hidden}
.hg-sec--in{padding:0 0 44px;background:none}
.hg-card{position:relative;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;
  padding:44px 48px;border-radius:24px;background:rgba(255,255,255,.72);
  box-shadow:0 24px 60px -36px rgba(120,86,40,.45),inset 0 0 0 1px rgba(201,162,90,.35)}
.hg-card::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid rgba(201,162,90,.28);pointer-events:none}
.hg-art img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 40px -24px rgba(120,86,40,.55)}
.hg-label{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.hg-label span{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:19px;letter-spacing:.08em;color:#A9823E}
.hg-label em{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:#fff;padding:3px 12px;border-radius:999px;
  background:linear-gradient(135deg,#D4AE62 0%,#B98C43 55%,#D9B970 100%)}
.hg-title{font-family:'Noto Serif JP','Yu Mincho',serif;font-weight:500;font-size:clamp(22px,2.3vw,29px);line-height:1.6;letter-spacing:.1em;color:#3A2E22;margin:0 0 16px}
.hg-lead{font-size:15px;line-height:2;letter-spacing:.03em;color:#4A3F36;margin:0 0 20px}
.hg-lead strong{font-weight:700;color:#8A5A2B;background:linear-gradient(transparent 62%,rgba(242,201,184,.55) 62%)}
.hg-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hg-steps li{position:relative;padding:12px 10px 11px;border-radius:12px;background:#FFFCF8;border:1px solid rgba(201,162,90,.35);
  font-size:13px;line-height:1.6;color:#4A3F36;text-align:center}
.hg-steps b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:20px;line-height:1.1;color:#C08A5A;margin-bottom:4px}
.hg-note{font-size:12px;line-height:1.85;color:#7A6D62;margin:0 0 20px}
.hg-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;text-decoration:none;
  font-size:14.5px;font-weight:700;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,#C9A25A 0%,#B08640 55%,#CFAE69 100%);
  box-shadow:0 10px 24px -12px rgba(150,110,50,.8);transition:transform .15s,box-shadow .2s}
.hg-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(150,110,50,.9)}
.hg-btn::after{content:"→";font-weight:400}

/* プランカードの札 */
.plan-info .hg-tag{display:flex;justify-content:center;margin-top:8px}
.hg-tag span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#7A5523;background:linear-gradient(180deg,#FFF7E8,#F6E5C4);border:1px solid rgba(185,140,67,.45);white-space:nowrap}
.hg-tag svg{width:14px;height:14px;flex:0 0 auto}
.hg-tag small{font-size:10.5px;font-weight:500;color:#8E7350}

@media (min-width:861px){
  .hg-card{grid-template-columns:1fr;gap:34px;padding:40px 48px 46px}
  .hg-art img{aspect-ratio:21/8;object-fit:cover;object-position:50% 52%}
  .hg-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:44px;align-items:start}
  .hg-body>.hg-label,.hg-body>.hg-title,.hg-body>.hg-lead{grid-column:1}
  .hg-body>.hg-steps,.hg-body>.hg-note,.hg-body>.hg-btn{grid-column:2}
  .hg-body>.hg-label{grid-row:1}
  .hg-body>.hg-title{grid-row:2}
  .hg-body>.hg-custom{grid-row:3}
  .hg-body>.hg-lead{grid-row:4 / span 2}
  .hg-body>.hg-steps{grid-row:1 / span 3;align-self:end}
  .hg-body>.hg-note{grid-row:4}
  .hg-body>.hg-btn{grid-row:5;justify-self:start}
}
@media (max-width:860px){
  .hg-card{grid-template-columns:1fr;gap:18px;padding:30px 22px 32px;text-align:left}
  .hg-art{max-width:640px;margin:0 auto}
}
@media (max-width:560px){
  .hg-sec{padding:48px 14px}
  .hg-sec--in{padding:0 0 32px}
  .hg-card{padding:24px 18px 28px;border-radius:20px}
  .hg-card::before{inset:7px;border-radius:15px}
  .hg-title{font-size:21px;letter-spacing:.08em}
  .hg-lead{font-size:14.5px;line-height:1.95}
  .hg-steps{grid-template-columns:1fr;gap:8px}
  .hg-steps li{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px}
  .hg-steps b{margin:0;font-size:18px}
  .hg-btn{display:flex;justify-content:center}
}
/* サイト共通の文字サイズ指定（!important）に負けないよう、この枠の中だけ固定 */
.hg-sec .hg-title{font-size:clamp(22px,2.3vw,29px)!important;line-height:1.6!important;margin:0 0 16px!important}
.hg-sec .hg-lead{font-size:15px!important;line-height:2!important}
.hg-sec .hg-steps li{font-size:13px!important;line-height:1.6!important}
.hg-sec .hg-note{font-size:12px!important;line-height:1.85!important}
.hg-sec .nw{white-space:nowrap}
.plan-info .hg-tag span{font-size:12px!important;line-height:1.4!important}
.plan-info .hg-tag small{font-size:10.5px!important}
@media (max-width:560px){
  .hg-sec .hg-title{font-size:21px!important}
  .hg-sec .hg-lead{font-size:14.5px!important;line-height:1.95!important}
}
@media (max-width:360px){
  .hg-sec .hg-title{font-size:19px!important;letter-spacing:.05em}
}
/* カスタマイズの一文（2026-10-16追加） */
.hg-sec .hg-custom{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:-6px 0 18px!important;padding:10px 14px;border-radius:12px;
  background:linear-gradient(90deg,rgba(242,201,184,.35),rgba(233,210,154,.25));font-size:13.5px!important;line-height:1.6!important;font-weight:700;letter-spacing:.04em;color:#7A4E2A}
.hg-sec .hg-custom span{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:.08em;color:#A9823E}
@media (min-width:861px){ .hg-body>.hg-custom{grid-column:1} }
.hg-sec .hg-custom i{font-style:normal;display:inline-block}
.hg-sec .hg-custom span{margin-right:12px}
@media (max-width:400px){ .plan-info .hg-tag span{flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:14px;row-gap:0} .plan-info .hg-tag small{flex-basis:100%;text-align:center} }
/* ▲ ハーブティー特典 ここまで */