@charset 'utf-8';

/*-----------------------------------------
  気持ちをハーブで伝えるクリスマスギフト 2026
-----------------------------------------*/
:root {
  --fz-11: 11px;
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-17: 17px;
  --fz-18: 18px;
  --fz-19: 19px;
  --fz-22: 22px;
}
@media (min-width: 376px) and (max-width: 800px) {
  :root {
    --fz-11: 2.93vw;
    --fz-12: 3.2vw;
    --fz-13: 3.46vw;
    --fz-14: 3.73vw;
    --fz-15: 4vw;
    --fz-16: 4.26vw;
    --fz-17: 4.53vw;
    --fz-18: 4.8vw;
    --fz-19: 5.06vw;
    --fz-22: 5.86vw;
  }
}

/*-----------------------------------------
  layout
-----------------------------------------*/
html[data-browse-mode="S"] .chatdealer-main-frame { display: none !important;}
#christmasgift2026 h1,
#christmasgift2026 h2,
#christmasgift2026 h3 { padding: 0; margin: 0; line-height: 0;}
#christmasgift2026 a { color: inherit;}
#christmasgift2026 img { max-width: 100%; height: auto; vertical-align: bottom;}
#christmasgift2026 {
  font-size: var(--fz-14);
  line-height: 1.5;
  color: #392920;
  background: #fff4e3;
  font-feature-settings: "palt";
}
#christmasgift2026 .inner { width: 810px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; position: relative;}

/*-----------------------------------------
  leftmenu
-----------------------------------------*/
#christmasgift2026 #leftmenu {
  width: 340px;
  max-height: calc(100vh - 80px);
  padding: 0 0 60px;
  font-family: "Noto Serif JP", serif;
  overflow: auto;
  position: sticky;
  top: 60px;
  left: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#christmasgift2026 #leftmenu::-webkit-scrollbar { display: none;}
#christmasgift2026 #leftmenu:after {
  content: "";
  width: 71px;
  height: 50px;
  background: url(../../../img/usr/freepage/christmasgift2026/pc_snow02.png) no-repeat center / 100% auto;
  position: absolute;
  bottom: 0;
  left: 16px;
}
#christmasgift2026 #leftmenu .ttl { padding: 34px 20px 0; margin: 0 0 36px; position: relative;}
#christmasgift2026 #leftmenu .ttl:after {
  content: "";
  width: 63px;
  height: 59px;
  background: url(../../../img/usr/freepage/christmasgift2026/pc_snow01.png) no-repeat center / 100% auto;
  position: absolute;
  top: 20px;
  left: 263px;
}
#christmasgift2026 #leftmenu .ttl .line01 { padding: 0 18px; margin: 0 0 0 6px; font-size: 14px; line-height: 1.5; display: inline-block; position: relative;}
#christmasgift2026 #leftmenu .ttl .line01:before,
#christmasgift2026 #leftmenu .ttl .line01:after {
  content: "";
  width: 1px;
  height: 25px;
  background: repeating-linear-gradient(to bottom, #392920 0 2px, transparent 2px 4px);
  position: absolute;
  top: -2px;
}
#christmasgift2026 #leftmenu .ttl .line01:before { left: 6px; transform: rotate(-30deg);}
#christmasgift2026 #leftmenu .ttl .line01:after { right: 7px; transform: rotate(30deg);}
#christmasgift2026 #leftmenu .ttl .line02 { margin: 5px 0 0; font-size: 25px; line-height: 1.5; letter-spacing: 0.08em;}
#christmasgift2026 #leftmenu .menu-box:not(:last-child) { margin: 0 0 50px;}
#christmasgift2026 #leftmenu .menu-box-ttl { margin: 0 0 20px 18px; line-height: 0;}
#christmasgift2026 #leftmenu li { padding: 0 0 0 20px; margin: 0 0 18px 18px; background: url(../../../img/usr/freepage/christmasgift2026/pc_icon01.png) no-repeat left 2px / 15px auto;}
#christmasgift2026 #leftmenu #menu02 li { margin-bottom: 20px; background-image: url(../../../img/usr/freepage/christmasgift2026/pc_icon02.png);}
#christmasgift2026 #leftmenu li a {
  padding: 0 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
#christmasgift2026 #leftmenu li a:hover { color: #b34549;}
#christmasgift2026 #leftmenu li a .sub { width: 100%;}
#christmasgift2026 #leftmenu .icon { margin: 0 0 0 auto; display: flex; gap: 3px;}
#christmasgift2026 #leftmenu .icon span {
  width: 69px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  font-family: sans-serif;
  font-size: var(--fz-13);
	text-align: center;
	word-break: keep-all;
	white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fff;
	display: flex;
  align-items: center;
  justify-content: center;
}
#christmasgift2026 #leftmenu .icon .icon-limited { background: #b34549;}
#christmasgift2026 #leftmenu .icon .icon-season { background: #e1a100;}
#christmasgift2026 #leftmenu .icon .icon-free { background: #7eccb8;}

/*-----------------------------------------
  main
-----------------------------------------*/
#christmasgift2026 #contents { width: 375px; max-width: 100%; overflow-x: hidden;}
#christmasgift2026 .intro { background: #f9dcaf;}
#christmasgift2026 .intro .message { padding: 9.5% 0 0; aspect-ratio: 750 / 467; box-sizing: border-box; background: url(../../../img/usr/freepage/christmasgift2026/mv_message_bg.jpg) no-repeat center top / 100% auto;}
#christmasgift2026 .intro .message p { font-size: var(--fz-13); font-weight: bold; text-align: center; letter-spacing: 0.08em; line-height: 2.38;}

/*-----------------------------------------
  lineup
-----------------------------------------*/
#christmasgift2026 .lineup { 
	padding: 40px 25px 100px;
	background: url(../../../img/usr/freepage/christmasgift2026/lineup_bg.jpg) no-repeat center top / 100% auto;
	position: relative;
	box-sizing: border-box;
}
#christmasgift2026 .lineup .lineup_list.w-icon:after {
  content: "";
  width: 135px;
	height: 71px;
	background-color: transparent;
  background-image: url(../../../img/usr/freepage/christmasgift2026/lineup_deco.png);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
  position: absolute;
  right: -20px;
  bottom: -71px;
}
#christmasgift2026 .lineup h2 { margin: 0 -25px;}
#christmasgift2026 .lineup .lineup_ttl01 { margin-bottom: 12px;}
#christmasgift2026 .lineup .lineup_ttl02 { margin-bottom: 10px;}
#christmasgift2026 .lineup .lineup_list { display: flex; flex-wrap: wrap; gap: 15px 13px; position: relative; z-index: 1;}
#christmasgift2026 .lineup .lineup_list:not(:last-child) { margin-bottom: 38px;}
#christmasgift2026 .lineup .lineup_list li { width: calc((100% - 13px) / 2); position: relative; z-index: 2;}
#christmasgift2026 .lineup .lineup_list li._w100 { width: 100%;}
#christmasgift2026 .lineup li a { line-height: 0; display: block; border-radius: 5px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);}
#christmasgift2026 .lineup li a:hover { opacity: 0.8;}

/*-----------------------------------------
  見出し帯
-----------------------------------------*/
#christmasgift2026 .sec-ttl { position: relative; z-index: 1;}
#christmasgift2026 .sec01-ttl { margin: -4.8% 0 -0.27%;}
#christmasgift2026 .sec02-ttl { margin: -8.67% 0 -6.8%;}

/*-----------------------------------------
  item
-----------------------------------------*/
#christmasgift2026 .gift { padding: 1px 0; background: url(../../../img/usr/freepage/christmasgift2026/gift_bg.jpg) repeat-y center top / 100% auto;}
#christmasgift2026 .petit { padding: 9.3% 0 0; background: url(../../../img/usr/freepage/christmasgift2026/green_bg.jpg) repeat-y center top / 100% auto;}
#christmasgift2026 .item { padding: 0 12.5px 5px;}
#christmasgift2026 .item#honey_set { padding-top: 20px;}
#christmasgift2026 .item#yuzu_set { padding-top: 40px;}
#christmasgift2026 .item#cranberry_set { padding-top: 40px; padding-bottom: 25px;}
#christmasgift2026 .item#tasting_set {
	padding-top: 40px;
	background-color: transparent;
	background-image: url("../../../img/usr/freepage/christmasgift2026/gift05_deco.png");
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
#christmasgift2026 .item-head { margin: 0 -12.5px 2px;}
#christmasgift2026 .item-deco { margin: 9px -12.5px 0; line-height: 0;}
#christmasgift2026 .item#cranberry_set .item-deco { margin-top: 0;}
#christmasgift2026 .item#cranberry_set .item-deco img { position: relative; top: -20px;}
#christmasgift2026 .item#cranberry_set .item-cart { position: relative; z-index: 2;}
#christmasgift2026 .petit .item-deco { margin-bottom: -2px;}
/* スライダー */
#christmasgift2026 .item-slider .swiper-container { overflow: hidden; position: relative;}
#christmasgift2026 .item-slider .swiper-slide { line-height: 0;}
#christmasgift2026 .item .swiper-button-prev,
#christmasgift2026 .item .swiper-button-next { opacity: 0;}
#christmasgift2026 .item .swiper-button-disabled { pointer-events: none;}
/* カートエリア */
#christmasgift2026 .item-cart { padding: 18px 25px 14px; margin: 16px 0 0; background: #fff; border-radius: 6px;}
#christmasgift2026 .petit .item-cart { margin-top: 19px;}
#christmasgift2026 .item-cart .item-desc { padding: 0 0 12px; margin: 0 0 22px; border-bottom: 1px solid #392920; font-size: var(--fz-13); letter-spacing: 0.05em; line-height: 1.8;}
#christmasgift2026 .petit .item-cart .item-desc { padding: 0; margin-bottom: 24px; border: none;}
#christmasgift2026 .item-cart > .price { margin: 0 0 4px; display: flex; align-items: baseline; justify-content: space-between;}
#christmasgift2026 .item-cart > .price .price-head { font-size: var(--fz-19); font-weight: bold; line-height: 1; letter-spacing: 0.05em;}
#christmasgift2026 .item-cart > .price .price-body { font-size: var(--fz-22); font-weight: bold; letter-spacing: -0.01em; line-height: 1;}
#christmasgift2026 .item-cart > .price .price-body span { font-size: var(--fz-14); letter-spacing: 0.05em;}
#christmasgift2026 .item-cart > .notes { margin: 0 0 8px; font-size: var(--fz-12); text-align: right; letter-spacing: -0.02em;}
/* 商品選択 */
#christmasgift2026 .item-cart .item--list { margin: 0 -14px 14px; display: flex; justify-content: space-between; gap: 17px;}
#christmasgift2026 .item-cart .item--list li { width: 100%; padding: 6px 4px 4px; border: 2px solid #cbcbcb; box-sizing: border-box; background: #fff; border-radius: 10px; cursor: pointer;}
#christmasgift2026 .item-cart .item--list li.active { padding: 5px 3px 3px; border: 3px solid #f08b7e; background: #fff9f9;}
#christmasgift2026 .item-cart .item--list:not(.select) li { width: calc(50% - 8.5px); padding: 8px 12px 4px; cursor: auto;}
#christmasgift2026 .item-cart .item--list li .content { display: flex; align-items: center; justify-content: center; gap: 4px;}
#christmasgift2026 .item-cart .item--list:not(.select) li .content { justify-content: flex-start;}
#christmasgift2026 .item-cart .item--list li .content-img { width: 47px; flex-shrink: 0;}
#christmasgift2026 .item-cart .item--list li .content-txt { font-size: var(--fz-14); font-weight: bold; line-height: 1.3; letter-spacing: 0;}
#christmasgift2026 .item-cart .item--list li .price { padding: 0 2px; font-size: var(--fz-22); font-weight: bold; text-align: right; letter-spacing: -0.01em;}
#christmasgift2026 .item-cart .item--list:not(.select) li .price { padding: 0; text-align: left;}
#christmasgift2026 .item-cart .item--list li .price span { font-size: var(--fz-13); letter-spacing: 0.05em;}
#christmasgift2026 .item-cart .item--list li .notes { font-size: var(--fz-11); font-weight: bold; text-align: center; letter-spacing: -0.02em; line-height: 1;}
/* 数量・ボタン */
#christmasgift2026 .qty-area { margin: 0 0 18px; display: flex; align-items: center; justify-content: flex-start;}
#christmasgift2026 .qty-area .number-change { font-size: var(--fz-14);}
#christmasgift2026 .qty { margin: 0 8px 0 18px;}
#christmasgift2026 .qty select {
  width: 67px;
  height: 31px;
  padding: 0 22px 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 3px;
  font-size: 14px;
  line-height: 31px;
  color: #392920;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url(https://www.enherb.jp/img/usr/common/icon_select.png) no-repeat top 11px right 6px / 14px;
}
#christmasgift2026 .bookmark.hide { display: none;}
#christmasgift2026 .bookmark a { width: 20px; height: 20px; display: block; position: relative;}
#christmasgift2026 .bookmark i:before {
  content: '';
  width: 100%;
  height: 100%;
  background: url(../../../img/usr/freepage/snoopy202501/icon_bookmark_off.png) no-repeat center / 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#christmasgift2026 .bookmark .js-cancel-modal i:before { background: url(https://www.enherb.jp/img/usr/common/icon_bookmark.png) no-repeat center / 100%;}
#christmasgift2026 .bookmark.hide i:before { content: none;}
#christmasgift2026 .free-shipping {
  width: 69px;
  height: 20px;
  margin-left: auto;
  font-size: var(--fz-13);
  color: #fff;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7eccb8;
  border-radius: 3px;
}
@media (min-width: 376px) and (max-width: 800px) {
	#christmasgift2026 .free-shipping { width: calc(var(--fz-13) * 5.2); max-width: 90px;}
}

#christmasgift2026 .btn-cart { margin: 0 auto 16px;}
#christmasgift2026 .to-cart {
  padding: 14px 0 13px;
  text-align: center;
  text-decoration: none;
  display: block;
  background: #44342c;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 50%);
}
#christmasgift2026 .to-cart span {
  padding: 0 0 0 34px;
  font-size: var(--fz-18);
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.08em;
  background: url(../../../img/usr/freepage/snoopy202501/icon_cart.png) no-repeat left center / 21px;
}
#christmasgift2026 .detail { text-align: center;}
#christmasgift2026 .detail a {
  margin: 0 0 2px;
  border-bottom: 1px solid #392920;
  font-size: var(--fz-15);
  font-weight: bold;
  color: #392920;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#christmasgift2026 .detail a:after { content: ""; width: 7px; height: 7px; margin: 0 2px 0 0; border-top: 2px solid #392920; border-right: 2px solid #392920; transform: rotate(45deg);}
#christmasgift2026 .detail p { font-size: var(--fz-12); letter-spacing: 0.02em;}
#christmasgift2026 .detail p.note-web { text-align: left;}

/*-----------------------------------------
  other
-----------------------------------------*/
#christmasgift2026 .other { padding: 27.33% 0 0; aspect-ratio: 750 / 536; box-sizing: border-box; background: url(../../../img/usr/freepage/christmasgift2026/other_bg.jpg) no-repeat center top / 100% auto;}
#christmasgift2026 .other .bnr { width: 82.13%; margin: 0 0 0 8.93%; line-height: 0;}
#christmasgift2026 .other .bnr a { display: block; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);}
#christmasgift2026 .other .bnr a:hover { opacity: 0.8;}

/*-----------------------------------------
  feature
-----------------------------------------*/
#christmasgift2026 .feature { padding: 0 0 40px; background: #fff;}
#christmasgift2026 .feature .feature_message { margin: 28px 0 32px; font-size: var(--fz-14); font-weight: bold; text-align: center; color: #0e2a0b; letter-spacing: 0.06em; line-height: 1.72;}
#christmasgift2026 .feature ul { padding: 0 20px;}
#christmasgift2026 .feature li { display: flex; align-items: center; gap: 15px;}
#christmasgift2026 .feature li:not(:last-child) { margin: 0 0 14px;}
#christmasgift2026 .feature li img { width: 112px; flex-shrink: 0;}
#christmasgift2026 .feature li .text { font-size: var(--fz-15); color: #40332b; letter-spacing: 0.04em; line-height: 1.65;}
#christmasgift2026 .feature li .caution { margin: 6px 0 0; font-size: var(--fz-11);}

/*-----------------------------------------
  pagetop
-----------------------------------------*/
#christmasgift2026 #pagetop { width: 50px; height: 50px; display: none; background: #5a4a42; position: fixed; right: 20px; bottom: 20px; z-index: 1;}
#christmasgift2026 #pagetop a { width: 50px; height: 50px; display: block;}
#christmasgift2026 #pagetop a:before,
#christmasgift2026 #pagetop a:after {
  content: "";
  width: 16px;
  height: 16px;
  margin: -1px 0 0 -8px;
  border-top: 1px #fff solid;
  border-left: 1px #fff solid;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
}
#christmasgift2026 #pagetop a:after { margin-top: -9px;}

@media only screen and (min-width: 801px) {
  #christmasgift2026 { padding: 20px 0 40px;}
  #christmasgift2026 #contents { margin: 10px 0 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);}
  #christmasgift2026 #pagetop { display: none !important;}
}
@media only screen and (max-width: 800px) {
  #christmasgift2026 img { width: 100%;}
  #christmasgift2026 .inner { width: auto;}
  #christmasgift2026 #leftmenu { display: none;}
  #christmasgift2026 #contents { width: 100%;}
  #christmasgift2026 .lineup:after { bottom: 17.7vw;}
  #christmasgift2026 .item-cart .item--list li .content-img { width: 12.5vw;}
  #christmasgift2026 .feature li img { width: 30vw;}
  #christmasgift2026 .to-cart span { padding-left: 9vw; background-size: 5.6vw;}
}