/*****************************************
*                  index                 *
*****************************************/

@font-face {
  font-family: "Source Han Serif TW";
  src: url("../font/SourceHanSerifTW-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Serif TW Medium";
  src: url("../font/SourceHanSerifTW-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kozuka Mincho Pr6N Medium";
  src: url("../font/Kozuka Mincho Pr6n-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Garamond Pro Semibold";
  src: url("../font/Adobe Garamond Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  min-width: 1150px;
}

#main {
  overflow: hidden;
}

.area {
  position: relative;
}
.section {
  position: relative;
  background-repeat: no-repeat;
}

.banner,
.banner picture,
.banner img {
  display: block;
}

.banner {
  line-height: 0;
}

.banner img{
  width: 100%;
  min-height: 497px;
  object-fit: cover;
}
#custom {
}
#standard {
}

#custom .section {
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

#cut-1 {
  height: 497px;
}

#cut-small-bar {
  height: 65px;
  background-image: url(../images/index/small_bar2026.png);
  background-size: auto 100%;
  background-color: #b19156;
}

.small-bar-social {
  display: flex;
  gap: 24px;
  width: auto;
  height: 35px;
  position: absolute;
  right: 35px;
  top: 15px;
}

.small-bar-link {
  display: block;
  width: 35px;
  height: 35px;
}

#cut-2 {
  height: 3941px;
  background-image: url(../images/index/gogotea_bg2024.png);
  background-size: auto 12%;
  background-repeat: repeat !important;
  position: relative;
}

.sec-sub-bg-head {
  background-image: url(../images/index/sec-sub-bg-head.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 84px;
  width: 1126px;
  position: absolute;
  left: 50%;
  margin-left: -570px;
  top: 195px;
}

.sec-sub-bg-body {
  background-image: url("../images/index/sec-sub-bg-body.png");
  background-size: contain;
  background-repeat: repeat;
  height: 3255px;
  width: 1126px;
  position: absolute;
  left: 50%;
  margin-left: -570px;
  top: 260px;
}

.sec-sub-bg-foot {
  background-image: url("../images/index/sec-sub-bg-foot.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 84px;
  width: 1126px;
  position: absolute;
  left: 50%;
  margin-left: -570px;
  bottom: 348px;
}

#cut-3 {
  height: 1283px;
  background-image: url(../images/index/cut-3-bg.jpg?v=180814);
}
#cut-4 {
  height: 1588px;
  background-image: url(../images/index/cut-4-bg.jpg?v=180814);
}

#cut-2 .title {
  position: relative;
  z-index: 2;
  top: 60px;
  left: 199px;
  width: 595px;
  height: 58px;
  background: url(../images/index/main-sec-title.png) 0 0 no-repeat;
  background-size: auto 100%;
}
#cut-2 .part {
  position: absolute;
}
.picture {
  position: relative;
}
.picture .sec-btn-1 {
  position: absolute;
  bottom: 61px;
  left: 100px;
  width: 347px;
  height: 48px;
  padding: 0;
  background: url(../images/index/sec-1-v2-btn.png?t=20260601) 0 0 no-repeat;
  background-size: 100% 100%;
  z-index: 3;
}

.sec-1-lead,
.sec-1-description {
  position: absolute;
  z-index: 3;
  margin: 0;
  user-select: text;
}

.sec-1-lead {
  top: 173px;
  left: 530px;
  width: 470px;
  color: #111111;
  font-family: "Source Han Serif TW", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
  letter-spacing: 1.8px;
}

.sec-1-lead p {
  margin: 0;
}

.sec-1-lead .sec-lead-indent,
.sec-2-lead .sec-lead-indent,
.sec-3-lead .sec-lead-indent,
.sec-4-lead .sec-lead-indent,
.sec-5-lead .sec-lead-indent {
  margin-left: 32px;
}

.sec-1-description {
  top: 615px;
  left: 85px;
  width: 470px;
  color: #333333;
  font-family: "Kozuka Mincho Pr6N Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: justify;
  text-align-last: left;
}

.sec-1-description sup,
.sec-1-note {
  color: #937723;
}

.sec-1-description sup {
  position: relative;
  top: -1.45em;
  font-size: 0.62em;
  line-height: 0;
  letter-spacing: -9px;
}

.sec-1-note {
  position: absolute;
  left: 411px;
  top: 77px;
  white-space: nowrap;
  font-size: 0.6em;
  letter-spacing: 1px;
}

.sec-1-em {
  color: #937723;
}

.sec-1-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-note-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-1-punct {
  font-family: "Source Han Serif TW Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-weight: 500;
}

.sec-punct {
  font-family: "Source Han Serif TW Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-weight: 500;
}

.sec-btn-1 .type1 {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding-left: 52px;
  box-sizing: border-box;
  transform: none;
  color: #633e18;
  font-family: "Source Han Serif TW Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.sec-btn-1 .type1 em {
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  font-synthesis: none;
  margin-right: 0;
  transform: translateY(2px);
}

.sec-btn-1 .type1:after {
  content: "";
  display: flex;
  align-items: center;
  width: 14px;
  height: 23px;
  line-height: 0;
  background: url("../images/index/arrow.png") center center no-repeat;
  background-size: contain;
}

.sec-2-lead,
.sec-2-description {
  position: absolute;
  z-index: 3;
  margin: 0;
  user-select: text;
}

.sec-2-lead {
  top: 230px;
  left: 205px;
  width: 455px;
  color: #111111;
  font-family: "Source Han Serif TW", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
}

.sec-2-lead p {
  margin: 0;
}

.sec-2-description {
  top: 337px;
  left: 189px;
  width: 400px;
  color: #333333;
  font-family: "Kozuka Mincho Pr6N Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 3px;
  text-align: justify;
  text-align-last: left;
}

.sec-2-em,
.sec-2-description sup,
.sec-2-note {
  color: #937723;
}

.sec-2-description sup {
  position: relative;
  top: -1.45em;
  font-size: 0.62em;
  line-height: 0;
  letter-spacing: -9px;
}

.sec-2-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-2-note {
  position: absolute;
  left: 334px;
  top: 103px;
  white-space: nowrap;
  font-size: 0.6em;
  letter-spacing: 1px;
}

.sec-3-lead,
.sec-3-description {
  position: absolute;
  z-index: 3;
  margin: 0;
  user-select: text;
}

.sec-3-lead {
  top: 130px;
  left: 577px;
  width: 430px;
  color: #111111;
  font-family: "Source Han Serif TW", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
  letter-spacing: 1.8px;
}

.sec-3-lead p {
  margin: 0;
}

.sec-3-description {
  top: 294px;
  left: 472px;
  width: 399px;
  color: #333333;
  font-family: "Kozuka Mincho Pr6N Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: justify;
  text-align-last: left;
}

.sec-3-em,
.sec-3-description sup,
.sec-3-note {
  color: #937723;
}

.sec-3-description sup {
  position: relative;
  top: -1.45em;
  font-size: 0.62em;
  line-height: 0;
  letter-spacing: -9px;
}

.sec-3-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-3-note {
  position: absolute;
  left: 338px;
  top: 103px;
  white-space: nowrap;
  font-size: 0.6em;
  letter-spacing: 1px;
}

.sec-4-lead,
.sec-4-description {
  position: absolute;
  z-index: 3;
  margin: 0;
  user-select: text;
}

.sec-4-lead {
  top: 110px;
  left: 43px;
  width: 470px;
  color: #111111;
  font-family: "Source Han Serif TW", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 1.8px;
}

.sec-4-lead p {
  margin: 0;
}

.sec-4-description {
  top: 271px;
  left: 144px;
  width: 361px;
  color: #333333;
  font-family: "Kozuka Mincho Pr6N Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: justify;
  text-align-last: left;
}

.sec-4-em,
.sec-4-description sup,
.sec-4-note {
  color: #937723;
}

.sec-4-description sup {
  position: relative;
  top: -1.45em;
  font-size: 0.62em;
  line-height: 0;
  letter-spacing: -9px;
}

.sec-4-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-4-note {
  position: absolute;
  left: 300px;
  top: 127px;
  white-space: nowrap;
  font-size: 0.6em;
  letter-spacing: 1px;
}

.sec-4-leaf-5 {
  position: absolute;
  right: 172px;
  bottom: -4px;
  width: 260px;
  z-index: 5;
  pointer-events: none;
}

.sec-5-lead,
.sec-5-description {
  position: absolute;
  z-index: 3;
  margin: 0;
  user-select: text;
}

.sec-5-lead {
  top: 88px;
  left: 576px;
  width: 400px;
  color: #111111;
  font-family: "Source Han Serif TW", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
  letter-spacing: 1.4px;
}

.sec-5-lead p {
  margin: 0;
}

.sec-5-description {
  top: 268px;
  left: 484px;
  width: 384px;
  color: #333333;
  font-family: "Kozuka Mincho Pr6N Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 2px;
  text-align: justify;
  text-align-last: left;
}

.sec-5-em,
.sec-5-description sup,
.sec-5-note {
  color: #937723;
}

.sec-5-description sup {
  position: relative;
  top: -1.45em;
  font-size: 0.62em;
  line-height: 0;
  letter-spacing: -9px;
}

.sec-5-en {
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 600;
}

.sec-5-note {
  position: absolute;
  right: 3px;
  top: 132px;
  white-space: nowrap;
  font-size: 0.6em;
  letter-spacing: 1px;
}

.picture .photo {
  width: 100%;
}

#leaf1 {
  position: absolute;
  background: url(../images/index/leaf_1.png) 0 0 no-repeat;
  width: 222px;
  height: 263px;
  z-index: 5;
  top: 864px;
  left: 442px;
  pointer-events: none;
  background-size: contain;
}
#leaf2 {
  position: absolute;
  background: url(../images/index/leaf_2.png) 0 0 no-repeat;
  width: 151px;
  height: 139px;
  z-index: 5;
  top: 1187px;
  left: 168px;
  pointer-events: none;
  background-size: contain;
}
#leaf3 {
  position: absolute;
  background: url(../images/index/leaf_5.png) 0 0 no-repeat;
  width: 319px;
  height: 207px;
  z-index: 5;
  top: 1756px;
  left: 457px;
  pointer-events: none;
  background-size: contain;
}
#leaf4 {
  position: absolute;
  background: url(../images/index/leaf_4.png) 0 0 no-repeat;
  width: 267px;
  height: 248px;
  z-index: 5;
  top: 2215px;
  left: 254px;
  pointer-events: none;
  background-size: contain;
}
#leaf5 {
  position: absolute;
  background: url(../images/index/leaf_5.png?v=2505) 0 0 no-repeat;
  width: 100%;
  height: 231px;
  z-index: 5;
  top: 2692px;
  left: 567px;
  pointer-events: none;
  background-size: contain;
}
.picture .sec-btn-4 {
  position: absolute;
  bottom: 69px;
  left: 134px;
  width: 373px;
  height: 48px;
  padding: 0;
  background: url(../images/index/sec-1-v2-btn.png?t=20260601) 0 0 no-repeat;
  background-size: 100% 100%;
  z-index: 3;
}

.sec-btn-4 .type1 {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding-left: 52px;
  box-sizing: border-box;
  transform: none;
  color: #633e18;
  font-family: "Source Han Serif TW Medium", "Source Han Serif TC", "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.sec-btn-4 .type1 em {
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-family: "Adobe Garamond Pro Semibold", "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  font-synthesis: none;
  margin-right: 0;
  transform: translateY(2px);
}

.sec-btn-4 .type1:after {
  content: "";
  display: flex;
  align-items: center;
  width: 14px;
  height: 23px;
  line-height: 0;
  background: url("../images/index/arrow.png") center center no-repeat;
  background-size: contain;
}

#sec-1 {
  top: 304px;
  left: 0;
  z-index: 2;
}

#sec-2 {
  top: 1225px;
  left: 0;
  z-index: 2;
}

#sec-3 {
  top: 1822px;
  left: 0;
  z-index: 3;
}

#sec-4 {
  top: 2357px;
  left: 0;
  z-index: 3;
}

#sec-5 {
  top: 3010px;
  left: 0;
  z-index: 3;
}

#standard .title,
#standard .content {
  position: absolute;
}

#standard .content {
  width: 100%;
}

#campaign {
  height: 506px;
  background-image: url(../images/index/campaign-bg.jpg);
  background-color: #760805;
  background-position: center top;
}

#campaign .title {
  top: 49px;
  left: 403px;
  width: 195px;
  height: 76px;
  background: url(../images/index/campaign-title.png) 0 0 no-repeat;
}

#campaign .content {
  top: 174px;
}

#campaign ul {
  font-size: 0;
  text-align: center;
}

#campaign li {
  display: inline-block;
  width: 455px;
  height: 243px;
  margin: 0 13px;
  background: #dec73c;
}

#campaign li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #feefc9;
  overflow: hidden;
}

#campaign li a img {
  display: block;
}

#campaign li a:hover img {
  opacity: 0.5;
}

#campaign li a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/index/campaign-frame.png) 0 0 no-repeat;
  box-sizing: border-box;
}

#products {
  height: 484px;
  background-image: url(../images/index/products-bg.jpg);
  background-color: #760805;
  background-position: center top;
}

#products .title {
  top: 57px;
  left: 376px;
  width: 248px;
  height: 76px;
  background: url(../images/index/products-title.png) 0 0 no-repeat;
}

#products .content {
  top: 178px;
}

#products .related-content {
}
#products .related-content li {
  /*	border-color: #ffe55f;
	background: #ffe55f;*/
  background: #ffffff;
}

#products .related-content li a {
  border-color: transparent;
  background: #ffffff;
}

#products .related-content li a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#products .related-content .order-0 {
  left: -185px;
}
#products .related-content .order-1 {
  left: 0;
}
#products .related-content .order-2 {
  left: 186px;
}
#products .related-content .order-3 {
  left: 372px;
}
#products .related-content .order-4 {
  left: 558px;
}
#products .related-content .order-5 {
  left: 744px;
}

#products .related-content li a {
  color: #961d0d;
}

#products .related-arrow {
}
#products .related-arrow li {
  height: auto;
}
#products .related-arrow li a {
  top: 79px;
  width: 57px;
  height: 60px;
  background-position: center top;
}
#products .related-arrow li a:hover {
  background-position: center bottom;
}
#products .related-arrow li.prev a {
  background-image: url(../images/index/arrow-prev.png);
  left: 13px;
}
#products .related-arrow li.next a {
  background-image: url(../images/index/arrow-next.png);
  right: 13px;
}

#mainbanner {
  position: relative;
  width: 1150px;
  margin: 0 auto;
}
.mainbanner_arrows {
  position: absolute;
  z-index: 10;
}

#bn_prev {
  background-image: url(../images/index/arrow_left.png);
  height: 67px;
  width: 16px;
  left: 0;
  top: -300px;
  cursor: pointer;
}
#bn_next {
  background-image: url(../images/index/arrow_right.png);
  height: 67px;
  width: 16px;
  right: 0;
  top: -300px;
  cursor: pointer;
}

#tvcm {
  height: 598px;
  background-image: url(../images/index/tvcm-bg.png);
  background-color: #760805;
  background-position: center top;
}

#tvcm .title {
  top: 66px;
  left: 392px;
  width: 214px;
  height: 83px;
  background: url(../images/index/tvcm-title.png) 0 0 no-repeat;
  background-size: auto 100%;
}

#tvcm .content {
  top: 177px;
}

#tvcm .videos-content li {
}
#tvcm .videos-content li a {
}
#tvcm .videos-content li a:after {
  top: 103px;
  left: 155px;
  background: url(../images/index/tvcm-play.png) 0 0 no-repeat;
}
#tvcm .videos-content li a:before {
  content: "";
  display: block;
  position: absolute;
  top: 103px;
  left: 155px;
  width: 54px;
  height: 54px;
  background: url(../images/index/tvcm-play.png) 0 bottom no-repeat;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#tvcm .videos-content li a:hover:before {
  opacity: 1;
}
#tvcm .pic {
  background: rgba(68, 16, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/*#tvcm .videos-content li a:hover .pic {background: rgba(68, 16, 0, 1);}*/
/*#tvcm .videos-content li a .pic img {opacity: 0.5; filter: alpha(opacity=50);}*/
#tvcm .videos-content li a:hover .pic img {
  opacity: 1;
  filter: alpha(opacity=1);
}
#tvcm .pic:after {
  border-color: #e9bd7d;
  border-width: 2px;
}

#tvcm .videos-content {
  height: 307px;
}

#tvcm .videos-content .name {
  color: #ffd485;
  text-align: center;
}

#tvcm-slide-swipe .name {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
}

#tvcm .videos-arrow {
}
#tvcm .videos-arrow li {
  height: auto;
}
#tvcm .videos-arrow li.prev {
  left: 13px;
}
#tvcm .videos-arrow li.next {
  right: 13px;
}
#tvcm .videos-arrow li a {
  top: 92px;
  width: 57px;
  height: 60px;
  background-position: center top;
}
#tvcm .videos-arrow li a:hover {
  background-position: center bottom;
}
#tvcm .videos-arrow li.prev a {
  background-image: url(../images/index/arrow-prev.png);
  left: 13px;
}
#tvcm .videos-arrow li.next a {
  background-image: url(../images/index/arrow-next.png);
  right: 13px;
}

#tvcm .slide-arrow .swiper-button-prev,
#tvcm .slide-arrow .swiper-button-next {
  top: 92px;
  width: 57px;
  height: 60px;
  margin-top: 0;
  background-position: center top;
  background-repeat: no-repeat;
}
#tvcm .slide-arrow .swiper-button-prev:hover,
#tvcm .slide-arrow .swiper-button-next:hover {
  background-position: center bottom;
}
#tvcm .slide-arrow .swiper-button-prev:after,
#tvcm .slide-arrow .swiper-button-next:after {
  content: none;
}
#tvcm .slide-arrow .swiper-button-prev {
  left: 13px;
  background-image: url(../images/index/arrow-prev.png);
}
#tvcm .slide-arrow .swiper-button-next {
  right: 13px;
  background-image: url(../images/index/arrow-next.png);
}

#knowledge {
  height: 289px;
  margin-top: -289px;
}

#knowledge .inner {
  width: 1125px;
  margin: 0 auto;
}

#knowledge .content {
}
#knowledge ul {
  font-size: 0;
  text-align: left;
}
#knowledge li {
  display: inline-block;
  margin-right: 9px;
  background-color: #ffd985;
}
#knowledge li a {
  display: block;
  width: 366px;
  height: 196px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
#knowledge li a:hover {
  opacity: 0.7;
}
#knowledge li a.item-1 {
  background-image: url(../images/index/knowledge-1-2024.png);
}
#knowledge li a.item-2 {
  background-image: url(../images/index/knowledge-2.jpg);
}
#knowledge li a.item-3 {
  background-image: url(../images/index/knowledge-3-2023.png);
}

#shop {
  height: 368px;
  background-image: url(../images/index/shop-bg.jpg);
  background-color: #760805;
  background-position: center top;
}

#shop .title {
  top: 48px;
  left: 414px;
  width: 158px;
  height: 77px;
  background: url(../images/index/shop-title.png) 0 0 no-repeat;
}

#shop .content {
  top: 178px;
}

#shop ul {
  font-size: 0;
  text-align: center;
}
#shop li {
  display: inline-block;
  width: 230px;
  height: 100px;
  margin: 0 3px;
  vertical-align: top;
  background: #f9e9c0;
}

#shop li a {
  display: table-cell;
  width: 230px;
  height: 100px;
  vertical-align: middle;
  background: url(../images/index/shop-arrow.png) left center no-repeat;
}

#shop li a:hover {
  opacity: 0.5;
}

#shop li a img {
  margin: 0 0 0 0;
}

#social {
  padding: 89px 0;
  background: url(../images/index/social-bg.jpg) #814e19 center top no-repeat;
}

#social .content {
  position: relative;
}

#social ul {
  font-size: 0;
  text-align: center;
}

#social li {
  position: relative;
  display: inline-block;
  margin: 0 13px;
  background: #a81600;
}

#social li a {
  position: relative;
  display: block;
  width: 455px;
  height: 100px;
  /*background-image: url(./images/index/social-items.jpg);*/
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
}

#social li a:hover {
  opacity: 0.45;
}

#social li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: #f1d9a6 0px solid; /* #f1d9a6 */
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
  -webkit-transition: border-width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: border-width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: border-width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: border-width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: border-width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#social li:hover:after {
  border-width: 3px;
}

#social li a.facebook {
  background-position: center center;
}
#social li a.instagram {
  background-position: center center;
}

.small-bar-social div {
  width: 35px;
  height: 35px;
}

#pop {
}

.pop-container {
  background: rgba(70, 1, 1, 0.8);
}

.pop-main {
  margin-top: 80px;
  margin-bottom: 80px;
}
.pop-main .btn-close {
  top: -67px;
  right: -6px;
  width: 124px;
  height: 56px;
  background-image: url(../images/index/pop-btn-close.png);
}
.pop-main .btn-close:hover {
  background-position: center bottom;
}

#video {
  width: 1000px;
}
#video .embed {
  width: 1000px;
  height: 560px;
  background: #000000;
  overflow: hidden;
}
#video .btn-close {
}

.button {
  border: none;
  color: #ffffff;
  text-align: center;
  padding: 20px;
  width: 347px;
  height: 48px;
  cursor: pointer;
  position: relative;
}

.button span {
  cursor: pointer;
  display: inline-block;
  transition: 0.5s;
  position: absolute;
  top: 9px;
}

.type1 {
  left: 274px;
}
.type2 {
  left: 288px;
}

.button > span:after {
  content: url("../images/index/arrow.png");
  display: inline-block;
}

.button:hover span {
  /*padding-left: 10px;*/
}

.button:hover > span:after {
  animation: fade 1s linear;
}

@keyframes fade {
  5% {
    opacity: 1;
  }
  60% {
    opacity: 0;
    transform: translateX(15px);
  }
  61%,
  80% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}




@media screen and (max-width: 1100px) {
  body,
  #wrap,
  #wrap2,
  #main,
  #standard,
  #standard .section,
  #standard .section .inner {
    width: 100%;
    min-width: 0;
  }

  img{width: 100%;}
  .sec-sub-bg-head,.sec-sub-bg-body,.sec-sub-bg-foot{display: none;}
  .banner img{
   min-height: 124.8vw; 
}
div#custom {
  top: -1.60vw;
}

#custom .section .inner {
  height: 100%;
}

#custom #cut-1 {
  height: 158.93vw;
  background-image: url(../m/images/index/cut-1-bg.jpeg);
  overflow: visible;
  z-index: 1;
  background-size: 100% auto;
}

#cut-2 {
  height: 968.00vw;
  background-image: url(../m/images/index/cut-2-bg-25.png);
  background-size: 100% auto;
}
#cut-small-bar {
  height: 14.40vw;
  background-image: url(../m/images/index/small_bar2026.jpg);
  background-size: 100% auto;
}
.small-bar-social {
  gap: 3.67vw;
  width: auto;
  height: 9.33vw;
  position: absolute;
  right: 4.00vw;
  top: 3.20vw;
}

.small-bar-link {
  width: 9.33vw;
  height: 9.33vw;
}
#sec-1,#sec-2,#sec-3,#sec-4,#sec-5{
  position: relative !important;
  top: initial !important;
}
#sec-1 { height: 192.00vw; }
#sec-2 { height: 148.33vw; }
#sec-3 { height: 154.67vw; }
#sec-4 { height: 170.67vw; }
#sec-5 { height: 205.33vw; }

.picture .photo{
  position: relative;
  width: 96%;
  left: 2%;
}
#sec-1 .photo{ top: 19.4667vw; }
#sec-2 .photo{ top: 8.8vw; }
#sec-3 .photo{ top: 8.8vw; }
#sec-4 .photo{ top: 1.333vw; }
#sec-5 .photo{ top: 8.8vw; }

#cut-1 .caption {
  top: 16.80vw;
  left: 17.07vw;
  width: 17.33vw;
  height: 100.27vw;
  background: url(../m/images/index/caption.png) 0 0 no-repeat;
  background-size: contain;
}

#cut-1 .new {
  top: 4.00vw;
  left: 6.13vw;
  width: 25.07vw;
  height: 15.47vw;
  transform: rotate(-7.2deg);
  z-index: 1;
}

#cut-2 .title {
  position: relative;
  z-index: 2;
  top: 5.60vw;
  left: 22.67vw;
  height: 12.80vw;
  background: url(../m/images/index/main-sec-title.png) 0 0 no-repeat;
  background-size: contain;
}

.button {
  padding: 0;
  width: 69.33vw;
  height: 9.96vw;
}

.picture .sec-btn-1 {
  bottom: -10.67vw;
  left: 10.13vw;
  width: 69.33vw;
  height: 9.96vw;
  padding: 0;
  background: url(../m/images/index/sec-1-v3-btn.png?t=20260601) 0 0 no-repeat;
  background-size: 100% 100%;
}

.sec-1-lead,
.sec-2-lead,
.sec-3-lead,
.sec-4-lead {
  display: block;
  left: 5.33vw;
  width: 85.33vw;
  font-size: 3.30vw;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.20vw;
}

.sec-5-lead {
  display: block;
  left: 7.20vw;
  width: 76.00vw;
  font-size: 3.30vw;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.20vw;
}

.sec-1-description,
.sec-2-description,
.sec-3-description,
.sec-4-description,
.sec-5-description {
  display: block;
  left: 11.47vw;
  width: 73.33vw;
  font-size: 3.20vw;
  line-height: 1.8;
  letter-spacing: 0.22vw;
  text-align: justify;
  text-align-last: left;
}

.sec-1-lead { top: 32.20vw; }
.sec-2-lead { top: 21.53vw; }
.sec-3-lead { top: 21.53vw; }
.sec-4-lead { top: 14.00vw; }
.sec-5-lead { top: 22.87vw; }

.sec-1-lead,
.sec-3-lead {
  left: 2.33vw;
}

.sec-2-lead {
  left: 2.33vw;
}

.sec-4-lead {
  left: 2.33vw;
}

.sec-1-description {
  top: 132.07vw;
  width: 66.00vw;
  letter-spacing: 0.50vw;
}

.sec-2-description {
  top: 112.67vw;
  left: 13.47vw;
  width: 63.33vw;
  letter-spacing: 0.46vw;
}
.sec-3-description {
  top: 110.13vw;
  width: 57.67vw;
  letter-spacing: 0.40vw;
}
.sec-4-description {
  top: 112.80vw;
  width: 56.67vw;
}
.sec-5-description {
  top: 128.20vw;
  width: 57.00vw;
}

.sec-5-description .mb {
  display: inline;
}

.sec-1-lead .sec-lead-indent,
.sec-2-lead .sec-lead-indent,
.sec-3-lead .sec-lead-indent,
.sec-4-lead .sec-lead-indent,
.sec-5-lead .sec-lead-indent {
  margin-left: 0;
}

.sec-1-description sup,
.sec-2-description sup,
.sec-3-description sup,
.sec-4-description sup,
.sec-5-description sup {
  top: -1.45em;
  font-size: 0.62em;
  letter-spacing: -1.6vw;
}

.sec-1-note {
  left: 53.67vw;
  top: 25.80vw;
  font-size: 0.67em;
  letter-spacing: 0.13vw;
}

.sec-2-note,
.sec-3-note,
.sec-4-note {
  left: 40.67vw;
  top: 35.73vw;
  font-size: 0.67em;
  letter-spacing: 0.13vw;
}

.sec-2-note {
  left: 49.97vw;
  top: 25.73vw;
}

.sec-3-note {
  left: 44.67vw;
  top: 25.73vw;
}

.sec-4-note {
  left: 43.67vw;
  top: 29.60vw;
}

.sec-5-note {
  right: 0;
  top: 34.67vw;
  font-size: 0.67em;
  letter-spacing: 0.13vw;
}

.sec-1-tea {
  position: absolute;
  top: 157.4vw;
  left: 32.2vw;
  width: 20.8vw;
  z-index: 6;
  pointer-events: none;
}

.sec-1-leaf-8,
.sec-3-leaf-3,
.sec-3-leaf-5,
.sec-4-leaf-9 {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.sec-1-leaf-8 {
  top: 98vw;
  left: 18vw;
  width: 42vw;
}

.sec-3-leaf-3 {
  top: 9vw;
  left: -6vw;
  width: 24vw;
}

.sec-3-leaf-5 {
  top: 139vw;
  left: 51vw;
  width: 40vw;
  z-index: 2;
}

.sec-4-leaf-9 {
  top: 95vw;
  left: 17vw;
  width: 35vw;
}

.sec-4-leaf-5 {
  display: none;
  right: -5vw;
  bottom: -12vw;
  width: 40vw;
  z-index: 5;
}

.picture .sec-btn-4 {
  bottom: 7.47vw;
  left: 10.13vw;
  width: 69.33vw;
  height: 9.96vw;
  padding: 0;
  background: url(../m/images/index/sec-1-v3-btn.png?t=20260601) 0 0 no-repeat;
  background-size: 100% 100%;
}

.picture .sec-btn-1 .type1,
.picture .sec-btn-4 .type1 {
  display: flex;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-left: 15%;
  gap: clamp(6px, 0.8vw, 8px);
  font-size: clamp(18px, 2.4vw, 24px);
}

.sec-4-tea {
  position: absolute;
  top: 114.6vw;
  right: 8.00vw;
  width: 10.8vw;
  z-index: 6;
  pointer-events: none;
}

#custom .section .picture {
  position: relative;
  width: 89.33vw;
  margin: 0 auto 5.87vw;
}

#custom .section .picture .photo2 {
  top: 19.47vw;
  left: 2.13vw;
}

#cut-2 h2 {
  width: 69.07vw;
  height: 34.40vw;
  margin: 11.20vw 0 2.67vw 16.53vw;
}

#cut-3 h2 {
  width: 146.67vw;
  height: 29.07vw;
  margin: 6.93vw 0 3.73vw 14.93vw;
}

#cut-4 h2 {
  width: 116.80vw;
  height: 29.60vw;
  margin: 5.60vw 0 3.20vw 29.87vw;
}

#cut-5 h2 {
  width: 51.47vw;
  height: 18.40vw;
  margin: 4.27vw 0 5.60vw 24.00vw;
}

/* leaf */
#leaf1 { width: 22.67vw; height: 70.13vw; top: 212.00vw; right: 1.33vw; left: initial;}
#leaf2 { width: 44.00vw; height: 70.13vw; top: 295.47vw; right: 1.33vw; left: initial;}
#leaf3 { width: 24.00vw; height: 29.33vw; top: 361.33vw; }
#leaf4 { width: 10.67vw; height: 8.00vw; top: 380.00vw; right: 10.67vw; left: initial;}
#leaf5 { width: 45.33vw; height: 47.47vw; top: 492.80vw; right: 1.33vw; left: initial;}
#leaf6 { width: 32.00vw; height: 21.33vw; top: 678.67vw; }
#leaf7 { width: 10.67vw; height: 66.13vw; top: 706.13vw; right: 6.67vw; left: initial;}

#leaf1,
#leaf2,
#leaf3,
#leaf4,
#leaf5,
#leaf6,
#leaf7 {
  z-index: 6;
}


#leaf1 {

  background: url(../m/images/index/leaf_1.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf2 {
  background: url(../m/images/index/leaf_2.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf3 {
  background: url(../m/images/index/leaf_5.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf4 {
  background: url(../m/images/index/leaf_4.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf5 {
  background: url(../m/images/index/leaf_5.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf6 {
  background: url(../m/images/index/leaf_6.png) 0 0 no-repeat;
  background-size: contain;
}
#leaf7 {
  background: url(../m/images/index/leaf_7.png) 0 0 no-repeat;
  background-size: contain;
}
#campaign {
  padding-bottom: 1.60vw;
  background-size: 100vw 81.07vw;
}

#campaign .title {
  top: 6.13vw;
  left: 32.53vw;
  width: 35.73vw;
  height: 13.33vw;
}

#campaign .content {
  padding-top: 26.40vw;
}

#campaign li {
  width: 90.13vw;
  height: 48.00vw;
  margin: 0 auto 4.80vw;
}

#campaign li a img {
  width: 90.13vw;
}

#products {
  height: auto;
  padding-bottom: 6.67vw;
  background-size: 100vw 156.27vw;
}
#products .content{
  position: relative;
}
#products .title {
  top: 5.07vw;
  left: 29.33vw;
  width: 42.40vw;
  height: 13.60vw;
  background: url(../m/images/index/products-title.png) 0 0 no-repeat;
  background-size: contain;
}

#products .content {
  top: 0;
  padding-top: 24.53vw;
}

#products #related a.mb.btn-more {
  display: block !important;
  width: 72.00vw;
  height: 13.33vw;
  margin: 8.00vw auto 0;
  color: #5c110c !important;
  text-align: center;
  line-height: 13.33vw;
  background-color: transparent !important;
  background-image: url(../m/images/index/products-more.jpeg?v=20260605) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

#products #related:not(.collapse) a.mb.btn-more {
  display: none !important;
}

#mainbanner {
  width: 93.33vw;
}

#bn_prev,
#bn_next {
  height: 9.33vw;
  width: 5.33vw;
  top: -64.00vw;
}

#tvcm { 
/*   height: 77.33vw; */
  height: 87.33vw;
  background-image: url(../m/images/index/tvcm-bg.png);
  background-color: #731008;
  background-position: center top;
  background-size: 100vw 101.60vw;
}

#tvcm .title {
  top: 5.60vw;
  left: 30.93vw;
  width: 40.00vw;
  height: 18.67vw;
  background: url(../m/images/index/tvcm-title.png) 0 0 no-repeat;
  background-size: contain;
}

#tvcm .content {
  top: 25.87vw;
}

#tvcm .slide-content a,
#tvcm .slide-content .pic,
#tvcm .slide-content .vid {
  width: 72.00vw;
  height: 38.40vw;
}

#tvcm .slide-arrow .swiper-button-prev,
#tvcm .slide-arrow .swiper-button-next {
  width: 14px;
  height: 16px;
  background-size: 14px 16px;
}
#tvcm .slide-arrow .swiper-button-prev {
  background-image: url(../m/images/index/arrow-prev.png);
}
#tvcm .slide-arrow .swiper-button-next {
  background-image: url(../m/images/index/arrow-next.png);
}

#knowledge {
  height: 80.80vw;
  margin-top: -82.93vw;
}
#knowledge .inner{
  width: 100%;
}
#knowledge ul {
    text-align: center;
}
#knowledge li {
  margin: 0 0 1.6vw;
}
#knowledge li a {
  width: 89.60vw;
  height: 23.47vw;
}
#knowledge li a.item-1 {
  background-image: url(../m/images/index/knowledge-1-2024.png);
}
#knowledge li a.item-2 {
  background-image: url(../m/images/index/knowledge-2.jpg);
}
#knowledge li a.item-3 {
  background-image: url(../m/images/index/knowledge-3-2023.png);
}

#knowledge li a:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: #cc935b 1px solid;
  box-sizing: border-box;
}

#shop {
  padding-bottom: 6.93vw;
  background-size: 100vw 86.40vw;
}

#shop .title {
  margin-top: 7.73vw;
  left: 34.67vw;
  width: 29.07vw;
  height: 14.40vw;
}

#shop .content {
  margin-top: 4.80vw;
}

#shop li {
  width: 44.00vw;
  height: 23.47vw;
  margin: 0 0.80vw 1.60vw;
}

#shop li a {
  width: 44.00vw;
  height: 23.47vw;
  background-size: 44.00vw 23.47vw;
}

#standard #social {
  padding: 8.80vw 0;
  background-size: 100vw 41.07vw;
}

#social li {
  margin: 0 0.67vw;
}

#social li a {
  width: 43.73vw;
  height: 22.67vw;
}
  
}

@media screen and (min-width: 751px) and (max-width: 1100px) {
  #products .title {
    left: 50%;
    width: min(50.2vw, 502px);
    height: auto;
    aspect-ratio: 502 / 176;
    background-size: contain;
    transform: translateX(-50%);
  }

  #products #related {
    position: relative;
    width: min(850px, 100%);
    height: 216px;
    margin: 0 auto;
  }

  #products #related .related-content {
    width: min(738px, calc(100% - 112px));
    height: 216px;
    margin: 0 auto;
  }

  #products #related .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
  }

  #products #related .swiper-slide a {
    margin-right: auto;
    margin-left: auto;
  }

  #products #related .related-arrow {
    display: block !important;
  }

  #products #related a.mb.btn-more {
    display: none !important;
  }
}