@charset "utf-8";

:root {
	
	--pg-bg-orange : #F6EFEA;
	--pg-bg-yellow : #F8F7EB;
	--pg-green : #6B905A;
	--pg-dark-green : #586556;
	
	--pg-fz-12   : clamp(10px, 1.1719vw, 12px);
	--pg-fz-16-s : clamp(12px, 1.5625vw, 16px);
	--pg-fz-16   : clamp(14px, 1.5625vw, 16px);
	--pg-fz-18   : clamp(14px, 1.7578vw, 18px);
	--pg-fz-18-l : clamp(16px, 1.7578vw, 18px);
	--pg-fz-22   : clamp(14px, 2.1484vw, 22px);
	--pg-fz-24   : clamp(16px, 2.3438vw, 24px);
	--pg-fz-28   : clamp(20px, 2.7344vw, 28px);
	
	--pg-boxshadow : 0 3px 6px rgb(0,0,0,0.16);
}

[data-browse-mode="P"] .for-sp { display: none !important;}
[data-browse-mode="S"] .for-pc { display: none !important;}

[data-browse-mode="P"] .pane-contents { overflow-x: hidden;}

/* ----------------------------------
 ハーブティー
---------------------------------- */
#herbal_tea { max-width: 1080px; margin: 0 auto; color: var(--pg-dark-green);}
#herbal_tea * { color: var(--pg-dark-green); box-sizing: border-box;}
#herbal_tea h2 {
	padding: 0;
	margin: 0 0 40px;
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho", "MS Mincho", "Yu Mincho", serif;
	font-size: var(--pg-fz-28);
	font-weight: 700;
	text-align: center;
	color: var(--pg-green);
}
#herbal_tea .sec-inner { position: relative; z-index: 2;}
#herbal_tea .header-frame .ttl-sub { margin: 0 0 10px; font-size: 16px; font-weight: 700; text-align: center; color: var(--pg-green);}
#herbal_tea .header-frame h2.ttl { text-align: center; line-height: 1.0; color: var(--pg-dark-green);}
#herbal_tea .design-button { max-width: 480px; margin: 60px auto 0;}
#herbal_tea .design-button a { width: 100%; padding: 0; text-decoration: none; display: block; position: relative; z-index: 3; transition: 0.3s;}
#herbal_tea .design-button a:hover { opacity: 0.7;}

[data-browse-mode="S"] #herbal_tea h2 { margin: 0 0 25px;}
[data-browse-mode="S"] #herbal_tea .header-frame { text-align: left;}
[data-browse-mode="S"] #herbal_tea .header-frame .ttl-sub { font-size: 14px; text-align: left;}
[data-browse-mode="S"] #herbal_tea .header-frame h2.ttl { text-align: left;}
[data-browse-mode="S"] #herbal_tea .design-button { margin: 40px auto 0;}

/* 00.メインビジュアル
---------------------------------- */
#herbal_tea #sec_visual { margin: 0 auto; text-align: center;}

/* 01.ラインナップ
---------------------------------- */
#herbal_tea #sec_lineup { padding: 50px 0 60px;}
#herbal_tea #sec_lineup .lineup-list { display: flex; flex-wrap: wrap; gap: 40px;}
#herbal_tea #sec_lineup .lineup-list li { width: calc((100% - 40px * 5)/6);}
#herbal_tea #sec_lineup .lineup-list li a { text-decoration: none; transition: 0.3s;}
#herbal_tea #sec_lineup .lineup-list li a:hover { opacity: 0.7;}
#herbal_tea #sec_lineup .lineup-list li .image { width: 100%; padding: 100% 0 0; margin: 0 0 15px; position: relative;}
#herbal_tea #sec_lineup .lineup-list li figure {
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	overflow: hidden;
	transition: 0.3s;
}
#herbal_tea #sec_lineup .lineup-list li .name { font-size: var(--pg-fz-16-s); font-weight: 700; text-align: center; color: var(--pg-dark-green); transition: 0.3s;}

[data-browse-mode="S"] #herbal_tea #sec_lineup { padding: 30px 25px;}
[data-browse-mode="S"] #herbal_tea #sec_lineup .lineup-list { gap: 18px;}
[data-browse-mode="S"] #herbal_tea #sec_lineup .lineup-list li { width: calc((100% - 18px * 2)/3);}
[data-browse-mode="S"] #herbal_tea #sec_lineup .lineup-list li .image { margin: 0 0 10px;}

/* 02.ぴったりな一杯を探しましょう
---------------------------------- */
#herbal_tea #sec_match { padding: 30px 0 70px;}
#herbal_tea #sec_match .navi-list { display: flex; flex-wrap: wrap; gap: 20px;}
#herbal_tea #sec_match .navi-list li { width: calc((100% - 20px * 2)/3);}
#herbal_tea #sec_match .navi-list li a {
  width: 100%;
  height: 60px;
	padding: 0 60px 0 30px;
  border-radius: 10px;
	font-size: var(--pg-fz-18-l);
  text-decoration: none;
	color: var(--pg-dark-green);
	display: flex;
	align-items: center;
  background: var(--pg-bg-yellow);
  box-shadow: var(--pg-boxshadow);
	position: relative;
	transition: 0.3s;
}
#herbal_tea #sec_match .navi-list li a:hover { opacity: 0.7;}
#herbal_tea #sec_match .navi-list li a:hover::after { top: calc(50% - 5px);}
#herbal_tea #sec_match .navi-list li a strong { font-size: var(--pg-fz-18-l); font-weight: 700; color: #E9784E;}
#herbal_tea #sec_match .navi-list li a::after {
  content: '';
  width: 13px;
  height: 13px;
  border-top: var(--pg-dark-green) 2px solid;
  border-left: var(--pg-dark-green) 2px solid;
  display: block;
  position: absolute;
  top: calc(50% - 9.5px);
  right: 30px;
  transform: rotate(-135deg);
	transition: 0.3s;
}
[data-browse-mode="S"] #herbal_tea #sec_match { padding: 30px 0 35px;}
[data-browse-mode="S"] #herbal_tea #sec_match h2 { letter-spacing: -0.5px;}
[data-browse-mode="S"] #herbal_tea #sec_match .navi-list { padding: 0 25px;}
[data-browse-mode="S"] #herbal_tea #sec_match .navi-list li { width: 100%;}
[data-browse-mode="S"] #herbal_tea #sec_match .navi-list li a { height: 50px; padding: 0 50px 0 20px;}
[data-browse-mode="S"] #herbal_tea #sec_match .navi-list li a::after { width: 9px; height: 9px; top: calc(50% - 7.5px); right: 20px;}
[data-browse-mode="S"] #herbal_tea #sec_match .design-button { padding: 0 25px;}

/* 03.旬な情報から探す
---------------------------------- */
#herbal_tea #sec_season { padding: 40px 0 50px; position: relative;}
#herbal_tea #sec_season::before {
	content: '';
	width: 200vw;
	height: 100%;
	display: block;
	background: var(--pg-bg-orange);
	position: absolute;
	left: -50vw;
	top: 0;
	bottom: 0;
}
#herbal_tea #sec_season_info { padding: 40px 40px 8px; border-radius: 10px; background: #FFF;}

[data-browse-mode="S"] #herbal_tea #sec_season { padding: 30px 15px;}
[data-browse-mode="S"] #herbal_tea #sec_season_info { padding: 20px; border-radius: 10px 0 0 10px; margin: 0 -15px 0 0;}
[data-browse-mode="S"] #herbal_tea #sec_season #top-banner-list.swiper-wrapper { flex-wrap: nowrap;}
[data-browse-mode="S"] #herbal_tea #sec_season #top-banner-list.swiper-wrapper li { padding: 0 !important;}

[data-browse-mode="S"] #herbal_tea .swiper-navi-button {
	content: '';
	width: 32px;
	height: 32px;
	border-radius: 32px;
	background: var(--pg-green);
	position: absolute;
	top: calc(48vw - 80px);
}
[data-browse-mode="S"] #herbal_tea .swiper-navi-button::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: #FFF 2px solid;
  border-left: #FFF 2px solid;
  display: block;
  position: absolute;
  top: calc(50% - 4px);
  left: calc(50% - 5px);
  transform: rotate(135deg);
}
[data-browse-mode="S"] #herbal_tea .swiper-navi-button.swiper-button-prev { left: 6px !important;}
[data-browse-mode="S"] #herbal_tea .swiper-navi-button.swiper-button-next { right: 20px !important;}
[data-browse-mode="S"] #herbal_tea .swiper-navi-button.swiper-button-disabled { display: none !important;}
[data-browse-mode="S"] #herbal_tea .swiper-navi-button.swiper-button-prev::after { left: calc(50% - 3px) !important; transform: rotate(-45deg) !important;}

/* 04.あなたのお悩みタイプから探す
---------------------------------- */
#herbal_tea #sec_type { padding: 70px 0;}
#herbal_tea #sec_type .type-list { display: flex; flex-wrap: wrap; gap: 40px;}
#herbal_tea #sec_type .type-list li { width: calc((100% - 40px * 4)/5); padding: calc((100% - 40px * 4)/5) 0 0; position: relative;}
#herbal_tea #sec_type .type-list li a {
	border: #AABC66 2px solid;
  border-radius: 10px;
  text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: var(--pg-boxshadow);
	transition: 0.3s;
	opacity: 1.0 !important;
}
#herbal_tea #sec_type .type-list li .name { font-size: var(--pg-fz-22); font-weight: 700; text-align: center; color: #FFF; transition: 0.3s;}
#herbal_tea #sec_type .type-list li.type01 a { border: #AABC66 2px solid; background: #AABC66;}
#herbal_tea #sec_type .type-list li.type02 a { border: #A5BBC3 2px solid; background: #A5BBC3;}
#herbal_tea #sec_type .type-list li.type03 a { border: #D8AAAC 2px solid; background: #D8AAAC;}
#herbal_tea #sec_type .type-list li.type04 a { border: #E9784E 2px solid; background: #E9784E;}
#herbal_tea #sec_type .type-list li.type05 a { border: #9B8EAD 2px solid; background: #9B8EAD;}
#herbal_tea #sec_type .type-list li a:hover  { background: #FFF !important;}
#herbal_tea #sec_type .type-list li.type01 a:hover .name { color: #AABC66;}
#herbal_tea #sec_type .type-list li.type02 a:hover .name { color: #A5BBC3;}
#herbal_tea #sec_type .type-list li.type03 a:hover .name { color: #D8AAAC;}
#herbal_tea #sec_type .type-list li.type04 a:hover .name { color: #E9784E;}
#herbal_tea #sec_type .type-list li.type05 a:hover .name { color: #9B8EAD;}

[data-browse-mode="S"] #herbal_tea #sec_type { padding: 40px 25px 30px;}
[data-browse-mode="S"] #herbal_tea #sec_type .header-frame { margin: 0 -10px;}
[data-browse-mode="S"] #herbal_tea #sec_type .type-list { gap: 18px;}
[data-browse-mode="S"] #herbal_tea #sec_type .type-list li { width: calc((100% - 18px * 2)/3); padding-top: calc((100% - 18px * 2)/3);}
[data-browse-mode="S"] #herbal_tea #sec_type .type-list li .name { letter-spacing: -0.5px;}

/* 05.私たちのおすすめセレクト
---------------------------------- */
#herbal_tea #sec_select { padding: 40px 0 50px; position: relative;}
#herbal_tea #sec_select::before {
	content: '';
	width: 200vw;
	height: 100%;
	display: block;
	background: var(--pg-bg-orange);
	position: absolute;
	left: -50vw;
	top: 0;
	bottom: 0;
}
#herbal_tea #sec_select #sec_select_item_frame { padding: 40px; border-radius: 10px; background: #FFF;}
#herbal_tea #sec_select #sec_select_item_frame h3 { padding: 0; margin: 0; font-size: var(--pg-fz-24); color: var(--pg-dark-green); line-height: 1.2;}
#herbal_tea #sec_select #select_item_list { display: flex; flex-wrap: wrap; gap: 32px;}
#herbal_tea #sec_select #select_item_list li { width: calc((100% - 32px * 3)/4); align-self: stretch;}
#herbal_tea #sec_select #select_item_list li a { height: 100%; text-decoration: none; transition: 0.3s; display: flex; flex-direction: column;}
#herbal_tea #sec_select #select_item_list li a:hover { opacity: 0.7;}
#herbal_tea #sec_select #select_item_list li div + div { padding-top: 10px;}
#herbal_tea #sec_select #select_item_list li .icon span {
  padding: 2px 10px;
  border-radius: 5px;
  font-size: var(--pg-fz-16-s);
  font-weight: 700;
  color: #FFF;
  background: var(--pg-dark-green);
}
#herbal_tea #sec_select #select_item_list li .icon span.green  { background: #AABC66;}
#herbal_tea #sec_select #select_item_list li .icon span.orange { background: #E9784E;}
#herbal_tea #sec_select #select_item_list li .icon span.blue   { background: #A5BBC3;}
#herbal_tea #sec_select #select_item_list li .icon span.purple { background: #9B8EAD;}
#herbal_tea #sec_select #select_item_list li .icon span.pink   { background: #D8AAAC;}
#herbal_tea #sec_select #select_item_list li .icon span.yellow { background: #EAC348;}
#herbal_tea #sec_select #select_item_list li .text  { font-size: var(--pg-fz-16); color: var(--pg-dark-green); line-height: 1.2;}
#herbal_tea #sec_select #select_item_list li .price { margin: auto 0 0; font-size: var(--pg-fz-18); font-weight: 700; text-align: right; color: var(--pg-dark-green);}
#herbal_tea #sec_select #select_item_list li .price .tax { font-size: var(--pg-fz-12); font-weight: 400; color: var(--pg-dark-green);}

[data-browse-mode="S"] #herbal_tea #sec_select { padding: 30px 15px;}
[data-browse-mode="S"] #herbal_tea #sec_select #sec_select_item_frame { padding: 20px 0; border-radius: 10px 0 0 10px; margin: 0 -15px 0 0;}
[data-browse-mode="S"] #herbal_tea #sec_select #sec_select_item_frame h3 { padding: 0 20px; margin: 0; font-size: var(--pg-fz-24); color: var(--pg-dark-green); line-height: 1.2;}
[data-browse-mode="S"] #herbal_tea #sec_select #select_item_list li .icon span { padding: 2px 4px; font-size: 11px; font-weight: 500; letter-spacing: -0.5px;}
[data-browse-mode="S"] #herbal_tea #sec_select #sec_select_items { padding: 0 20px;}
[data-browse-mode="S"] #herbal_tea #sec_select #select_item_list.swiper-wrapper { flex-wrap: nowrap; gap: 0; align-items: stretch !important;}
[data-browse-mode="S"] #herbal_tea #sec_select #select_item_list.swiper-wrapper .swiper-slide { height: auto !important;}

/* 06.おすすめのガラス茶器
---------------------------------- */
#herbal_tea #sec_osusume { padding: 0 0 60px; position: relative;}

[data-browse-mode="S"] #herbal_tea #sec_osusume { padding: 0 25px 40px;}

/* 07.インスタグラム
---------------------------------- */
#herbal_tea #sec_visumo { padding: 0 0 60px; position: relative;}
#herbal_tea #sec_visumo h2 { margin: 0 0 20px; font-family: "Open Sans", "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium"; color: var(--pg-dark-green);}
#herbal_tea #sec_visumo .ttl-sub { padding: 0 0 30px; margin: 0 0 40px; text-align: center; color: var(--pg-green); position: relative;}
#herbal_tea #sec_visumo .ttl-sub::after { content: ''; width: 40px; border-top: var(--pg-green) 4px solid; display: block; position: absolute; bottom: 0; left: calc(50% - 20px);}
#herbal_tea #sec_visumo .ecbn-selection-image-loading-more { display: none !important;}

[data-browse-mode="S"] #herbal_tea #sec_visumo h2 { margin-bottom: 15px;}
[data-browse-mode="S"] #herbal_tea #sec_visumo .ttl-sub { padding: 0 0 20px; margin: 0 0 30px; letter-spacing: -0.5px;}
[data-browse-mode="S"] .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
[data-browse-mode="S"] .ecbn-selection-page-wrapper li.ecbn-selection-item > div > a { width: 100% !important; margin: 0; padding-top: 100% !important;}
[data-browse-mode="S"] .ecbn-selection-page-wrapper .ecbn-selection-to-nextpage > a.ecbn-selection-to-nextpage-btn {
	width: 50%;
	margin: 15px auto 0;
	border: var(--pg-dark-green) 1px solid;
	background: #FFF;
}