:root {
  --green: #4E7123;
  --brown: #77612E;
  --orange: #f2a000;
  --ink: #413833;
}

* {
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
.section-teabag {
  position: relative;
  margin: 0;
  color: var(--ink);
  background: #FFF8EF;
  overflow: hidden;
}
.section-teabag p .em {
  color: #64A53B;
}
.section-inner {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

/* mv */
.section-mv {
  margin: 0 auto;
  padding-top: 32px;
  width: min(1856px, calc(100% - 32px * 2));
}
.section-mv h1 {
  margin: 0;
  text-align: center;
}
.section-mv h1 img {
  border-radius: 60px;
}

/* intro */
.section-intro {
  position: relative;
  margin: min(120px, calc(120 / 1920 * 100vw)) auto min(180px, calc(180 / 1920 * 100vw));
  text-align: center;
}
.section-intro p {
  line-height: calc(40 / 18);
  font-size: max(18px, calc(18 / 1920 * 100vw));
  font-weight: bold;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/* time */
.section-time {
  position: relative;
  z-index: 100;
}
.time-block {
  position: relative;
  padding-bottom: 120px;
}
.time-block:not(:first-child) {
  margin-top: 140px;
}
.time-block::before {
  content: "";
  position: absolute;
  margin-right: calc(50% - 50vw);
  width: calc(100% + ((100vw - 100%) / 2));
  height: 100%;
  z-index: 0;
  background: #fff;
  border-radius: 0 0 0 100px;
}
.time-block:nth-child(even):before {
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  border-radius: 0 0 100px 0;
}
.time-visual,
.time-products {
  position: relative;
  z-index: 1;
}
.time-visual {
  display: flex;
  align-items: flex-start;
  color: var(--green);
}
.time-block--afternoon .time-visual {
  color: var(--brown);
}
.time-block--night .time-visual {
  color: #565972;
}
.time-main-img {
  margin: max(-60px, calc(-60 / 1920 * 100vw)) max(80px, calc(80 / 1920 * 100vw)) 0 max(-360px, calc(-360 / 1920 * 100vw));
  width: min(760px, calc(760 / 1920 * 100vw));
  height: auto;
  border-radius: 0 0 100px 0;
}
.time-block:nth-child(even) .time-main-img {
  order: 3;
  margin: max(-60px, calc(-60 / 1920 * 100vw)) max(-360px, calc(-360 / 1920 * 100vw)) 0 auto;
  border-radius: 0 0 0 100px;
}
.time-copy {
  margin-top: 120px;
}
.time-block:nth-child(even) .time-copy {
  order: 2;
}
.time-heading {
  font-size: 50px;
  font-weight: 600;
  line-height: calc(80 / 50);
  letter-spacing: 0.02em;
  margin: 0 0 60px;
}
.time-description {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: calc(40 / 18);
  margin: 0;
  font-weight: 600;
}
.time-label {
  align-self: start;
  border-left: 1px solid var(--green);
  margin-top: -60px;
  margin-left: auto;
  padding-left: 20px;
  font-weight: 600;
}
.time-block:nth-child(even) .time-label {
  order: 1;
  border-left: 0;
  border-right: 1px solid var(--brown);
  margin-left: unset;
  margin-right: min(80px, calc(80 / 1920 * 100vw));
  padding: 0 10px 0 0;
}
.time-block--night .time-label {
  border-left: 1px solid #565972;
}
.time-label img {
  width: min(68px, calc(68 / 1920 * 100vw));
  margin: min(15px, calc(15 / 1920 * 100vw)) auto;
}
.time-label time {
  display: block;
  text-align: center;
  font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px);
}
.time-label strong {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 8px auto 0;
  font-size: clamp(16px, calc(70 / 1920 * 100vw), 70px);
  line-height: 1.4;
  letter-spacing: 0.18em;
}
.time-products {
  display: flex;
  justify-content: center;
  margin-top: min(60px, calc(60 / 1920 * 100vw));
  gap: min(80px, calc(80 / 1920 * 100vw));
}
.product-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: min(226px, calc(226 / 1200 * 100%))
}
.product-card__image {
  width: 100%;
  margin: 0 auto min(15px, calc(15 / 1920 * 100vw));
}
.product-card__name {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: clamp(16px, calc(22 / 1920 * 100vw), 22px);
  font-weight: 600;
}
.product-card__price {
  margin: 5px 0 15px;
  font-size: clamp(16px, calc(17 / 1920 * 100vw), 17px);
}
.product-card__price .tax {
  font-size: clamp(12px, calc(12 / 1920 * 100vw), 12px);
}
.product-card__body {
  margin-bottom: 25px;
  padding-top: 15px;
  border-top: 1px solid #E9E5DF;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: clamp(14px, calc(14 / 1920 * 100vw), 14px);
  font-weight: bold;
  line-height: calc(28 / 14);
}
.product-card__meta {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px 25px;
  margin: 25px auto;
  width: 176px;
  max-width: 100%;
  color: #64A53B;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
}
.leaf-rating {
  display: flex;
  gap: 14px;
}
.leaf-rating img {
  width: 14px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.product-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top :auto;
  gap: 10px;
  width: min(100%, 250px);
  height: 48px;
  color: #fff!important;
  background: #413833;
  border-radius: 30px;
  font-size: 15px;
  transition: 0.3s ease;
}
.product-card__button::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("/img/usr/pages/teabag/icon-cart.png") no-repeat;
}
.product-card__button:hover {
  opacity: 0.7;
}

/* recommend */
.section-recommend {
  position: relative;
  padding: min(315px, calc(315 / 1920 * 100vw)) 0 0;
}
.section-recommend::before {
  position: absolute;
  z-index: 0;
  top: max(-655px, calc(-655 / 1920 * 100vw));
  left: 50%;
  width: 100%;
  aspect-ratio: 1920 / 1458;
  background: url("/img/usr/pages/teabag/bg-recommend01.jpg") center top / 100% auto no-repeat;
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}
.section-recommend .bg-wrap {
  position: relative;
  padding-top: min(282px, calc(282 / 1920 * 100vw));
  padding-bottom: min(120px, calc(120 / 1920 * 100vw));
  width: 100%;
  aspect-ratio: 1920 / 1777;
  background: url("/img/usr/pages/teabag/bg-recommend02.png") center top no-repeat;
  background-size: cover;
}
.section-recommend__heading {
  margin-bottom: min(80px, calc(80 / 1920 * 100vw));
  text-align: center;
}
.section-recommend__title {
  margin: 0 0 min(60px, calc(60 / 1920 * 100vw));
  font-family: serif;
  font-size: clamp(16px, calc(60 / 1920 * 100vw), 60px);
  font-weight: 600;
  letter-spacing: 0.15em;
}
.section-recommend__lead {
  margin: 0;
  font-size: clamp(16px, calc(18 / 1920 * 100vw), 18px);
  font-weight: 600;
  line-height: calc(40 / 18);
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.section-recommend__list {
  display: flex;
  flex-direction: column;
  gap: min(40px, calc(40 / 1920 * 100vw));
  width: 100%;
  margin: 0 auto;
}
.section-recommend__item {
  display: flex;
  gap: min(52px, calc(52 / 1920 * 100vw));
  padding: min(40px, calc(40 / 1920 * 100vw));
  background: #fff;
}
.section-recommend__image {
  width: min(560px, calc(560 / 1200 * 100%));
}
.section-recommend__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.section-recommend__body {
  flex: 1;
}
.section-recommend__catch {
  margin: 0 0 min(10px, calc(10 / 1920 * 100vw));
  color: #64A53B;
  font-size: clamp(16px, calc(20 / 1920 * 100vw), 20px);
  font-weight: 600;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.section-recommend__name {
  margin: 0;
  padding-bottom: min(20px, calc(20 / 1920 * 100vw));
  border-bottom: 1px solid #E9E5DF;
  font-family: serif;
  font-size: clamp(16px, calc(36 / 1920 * 100vw), 36px);
  font-weight: 600;
  line-height: calc(54 / 36);
  letter-spacing: 0.06em;
}
.section-recommend__name span {
  display: block;
}
.section-recommend__price {
  margin: min(20px, calc(20 / 1920 * 100vw)) 0;
  font-family: serif;
  font-weight: 600;
  font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px);
}
.section-recommend__price span {
  font-size: clamp(16px, calc(18 / 1920 * 100vw), 18px);
}
.section-recommend__description {
  margin: 0 0 min(30px, calc(30 / 1920 * 100vw));
  line-height: calc(32 / 16);
  font-size: clamp(16px, calc(16 / 1920 * 100vw), 16px);
  font-weight: 500;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
/* bg */
.section-intro::before {
  content: '';
  position: absolute;
  top: max(-190px, calc(-190 / 1920 * 100vw));
  left: min(379px, calc(379 / 1920 * 100vw));
  width: min(1205px, calc(1205 / 1920 * 100vw));
  aspect-ratio: 1205 / 340;
  background: url("/img/usr/pages/teabag/bg-leaf01.png") center top no-repeat;
  background-size: contain;
  z-index: 1;
}
.time-block--morning::after {
  content: '';
  position: absolute;
  bottom: min(168px, calc(168 / 1920 * 100vw));
  right: max(-150px, calc(-150 / 1920 * 100vw));
  width: min(250px, calc(250 / 1920 * 100vw));
  aspect-ratio: 250 / 354;
  background: url("/img/usr/pages/teabag/bg-leaf02.png") center top no-repeat;
  background-size: contain;
  z-index: 1;
}
.time-block--afternoon::after {
  content: '';
  position: absolute;
  top: min(538px, calc(538 / 1920 * 100vw));
  left: max(-192px, calc(-192 / 1920 * 100vw));
  width: min(261px, calc(261 / 1920 * 100vw));
  aspect-ratio: 261 / 404;
  background: url("/img/usr/pages/teabag/bg-leaf03.png") center top no-repeat;
  background-size: contain;
  z-index: 1;
}
.time-block--afternoon .time-products::after {
  content: '';
  position: absolute;
  bottom: max(-172px, calc(-172 / 1920 * 100vw));
  right: min(62px, calc(62 / 1920 * 100vw));
  width: min(84px, calc(84 / 1920 * 100vw));
  aspect-ratio: 84 / 86;
  background: url("/img/usr/pages/teabag/bg-leaf04.png") center top no-repeat;
  background-size: contain;
  z-index: 1;
}
.time-block--night::after {
  content: '';
  position: absolute;
  bottom: min(36px, calc(36 / 1920 * 100vw));
  right: max(-153px, calc(-153 / 1920 * 100vw));
  width: min(216px, calc(216 / 1920 * 100vw));
  aspect-ratio: 216 / 419;
  background: url("/img/usr/pages/teabag/bg-leaf05.png") center top no-repeat;
  background-size: contain;
  z-index: 1;
}
@media (min-width: 768px) {
  .sp-only {
    display: none;
  }
}
@media (max-width: 767px) {
  .pc-only {
    display: none;
  }
  .section-inner {
    width: 100%;
  }
  /* mv */
  .section-mv {
    padding-top: 0;
    border-radius: 0;
    width: 100vw;
  }
  .section-mv h1 img {
    border-radius: 0 0 calc(30 / 390 * 100vw) calc(30 / 390 * 100vw);
  }
  /* intro */
  .section-intro {
    margin: calc(60 / 390 * 100vw) auto calc(90 / 390 * 100vw);
  }
  .section-intro p {
    padding: 0 calc(16 / 390 * 100vw);
    font-size: calc(15 / 390 * 100vw);
    line-height: calc(28 / 15);
  }
  /* time */
  .time-block {
    width: calc(100vw - (16 / 390 * 100vw));
    margin-left: calc(16 / 390 * 100vw);
    padding: 0 0 calc(40 / 390 * 100vw);
    background: #fff;
    border-radius: 0 0 0 calc(40 / 390 * 100vw);
  }
  .time-block:nth-child(even) {
    margin-left: unset;
    margin-right: calc(16 / 390 * 100vw);
    border-radius: 0 0 calc(40 / 390 * 100vw) 0;
  }
  .time-block::before {
    display: none;
  }
  .time-visual {
    flex-wrap: wrap;
  }
  .time-main-img {
    order: 1;
    margin: calc(-32 / 390 * 100vw) 0 auto calc(-16 / 390 * 100vw);
    width: calc(301 / 390 * 100vw);
  }
  .time-block:nth-child(even) .time-main-img {
    margin: calc(-32 / 390 * 100vw) calc(-16 / 390 * 100vw) auto 0;
  }
  .time-label {
    order: 2;
    margin: calc(-32 / 390 * 100vw) calc(16 / 390 * 100vw) 0 auto;
    padding-left: calc(8 / 390 * 100vw);
  }
  .time-block:nth-child(even) .time-label {
    margin: calc(-32 / 390 * 100vw) auto 0 calc(16 / 390 * 100vw);
  }
  .time-label img {
    width: calc(31 / 390 * 100vw);
    margin-bottom: calc(9 / 390 * 100vw);
  }
  .time-block:nth-child(even) .time-main-img {
    order: 2;
  }
  .time-label time {
    font-size: calc(12 / 390 * 100vw);
  }
  .time-label strong {
    margin-top: calc(4 / 390 * 100vw);
    font-size: calc(33 / 390 * 100vw);
  }
  .time-copy {
    order: 3;
    margin-top: calc(32 / 390 * 100vw);
    padding: 0 calc(16 / 390 * 100vw) 0 calc(20 / 390 * 100vw);
    width: 100%;
  }
  .time-block:nth-child(even) .time-copy {
    order: 3;
  }
  .time-heading {
    margin-bottom: calc(20 / 390 * 100vw);
    font-size: calc(24 / 390 * 100vw);
  }
  .time-heading br {
    display: none;
  }
  .time-description {
    font-size: calc(15 / 390 * 100vw);
    line-height: calc(28 / 15);
  }
  .time-products {
    margin: calc(30 / 390 * 100vw) auto 0;
    padding: 0 calc(16 / 390 * 100vw) 0 calc(20 / 390 * 100vw);
    gap: calc(50 / 390 * 100vw);
    flex-direction: column
  }
  .time-block:nth-child(even) .time-products {
    padding: 0 calc(20 / 390 * 100vw) 0 calc(16 / 390 * 100vw);
  }
  .product-card {
    gap: calc(16 / 390 * 100vw);
    width: 100%;
    text-align: left;
  }
  .product-card__inner {
    display: flex;
    flex-wrap: wrap;
  }
  .product-card__image {
    order: 2;
    width: calc(173 / 390 * 100vw);
    margin: 0;
  }
  .product-card__heading {
    display: flex;
    align-items: flex-end;
    order: 1;
    margin-bottom: calc(16 / 390 * 100vw);
    padding-bottom: calc(6 / 390 * 100vw);
    border-bottom: 1px solid #E9E5DF;
    width: 100%;
  }
  .product-card__name {
    font-size: calc(22 / 390 * 100vw);
  }
  .product-card__price {
    margin: 0 0 0 auto;
    font-size: calc(14 / 390 * 100vw);
    text-align: right;
  }
  .product-card__price .tax {
    font-size: calc(10 / 390 * 100vw);
  }
  .product-card__content {
    order: 3;
    flex: 1;
    margin-left: calc(20 / 390 * 100vw);
  }
  .product-card__body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: calc(14 / 390 * 100vw);
    text-align: center;
  }
  .product-card__meta {
    width: auto;
    margin: calc(15 / 390 * 100vw) auto 0;
    gap: calc(16 / 390 * 100vw);
  }
  .leaf-rating {
    gap: calc(8 / 390 * 100vw);
  }
  .leaf-rating img {
    width: calc(14 / 390 * 100vw);
  }
  .product-card__button {
    margin: calc(15 / 390 * 100vw) auto 0;
    width: calc(300 / 390 * 100vw);
    height: calc(48 / 390 * 100vw);
    text-align: center;
    font-size: calc(13 / 390 * 100vw);
  }
  /* recommend */
  .section-recommend {
    padding: calc(222 / 390 * 100vw) 0 0;
  }
  .section-recommend::before {
    top: calc(-322 / 390 * 100vw);
    width: 100%;
    aspect-ratio: 780 / 1488;
    background: url(/img/usr/pages/teabag/sp/bg-recommend01.jpg) center top / 100% auto no-repeat;
  }
  .section-recommend .bg-wrap {
    padding: calc(180 / 390 * 100vw) calc(16 / 390 * 100vw) calc(40 / 390 * 100vw);
    aspect-ratio: 780 / 3500;
    background: url(/img/usr/pages/teabag/sp/bg-recommend02.png) center top no-repeat;
    background-size: contain;
  }
  .section-recommend__heading {
    margin-bottom: calc(30 / 390 * 100vw);
  }
  .section-recommend__title {
    margin-bottom: calc(25 / 390 * 100vw);
    font-size: calc(28 / 390 * 100vw);
  }
  .section-recommend__lead {
    font-size: calc(15 / 390 * 100vw);
    line-height: calc(28 / 15);
  }
  .section-recommend__list {
    gap: calc(24 / 390 * 100vw);
  }
  .section-recommend__item {
    display: block;
    padding: calc(20 / 390 * 100vw);
  }
  .section-recommend__image {
    margin-bottom: calc(20 / 390 * 100vw);
    width: 100%;
  }
  .section-recommend__image img {
    border-radius: calc(12 / 390 * 100vw);
  }
  .section-recommend__catch {
    text-align: center;
    font-size: calc(15 / 390 * 100vw);
  }
  .section-recommend__name {
    padding-bottom: calc(12 / 390 * 100vw);
    text-align: center;
    font-size: calc(24 / 390 * 100vw);
  }
  .section-recommend__price {
    margin: calc(12 / 390 * 100vw) 0;
    text-align: center;
    font-size: calc(20 / 390 * 100vw);
  }
  .section-recommend__price span {
    font-size: calc(12 / 390 * 100vw);
  }
  .section-recommend__description {
    margin-bottom: calc(20 / 390 * 100vw);
    font-size: calc(14 / 390 * 100vw);
    line-height: calc(28 / 14);
  }
  /* bg */
  .section-intro::before {
    content: '';
    position: absolute;
    top: calc(-70 / 390 * 100vw);
    left: calc(39 / 390 * 100vw);
    width: calc(303 / 390 * 100vw);
    aspect-ratio: 303 / 239;
    background: url("/img/usr/pages/teabag/sp/bg-leaf01.png") center top no-repeat;
    background-size: contain;
    z-index: 1;
  }
  .time-block--morning::after {
    content: '';
    position: absolute;
    bottom: calc(-42 / 390 * 100vw);
    right: calc(34 / 390 * 100vw);
    width: calc(79 / 390 * 100vw);
    aspect-ratio: 79 / 58;
    background: url("/img/usr/pages/teabag/sp/bg-leaf02.png") center top no-repeat;
    background-size: contain;
    z-index: 1;
  }
  .time-block--afternoon::after {
    content: '';
    position: absolute;
    top: unset;
    bottom: calc(-42 / 390 * 100vw);
    left: calc(60 / 390 * 100vw);
    width: calc(76 / 390 * 100vw);
    aspect-ratio: 76 / 65;
    background: url("/img/usr/pages/teabag/sp/bg-leaf03.png") center top no-repeat;
    background-size: contain;
    z-index: 1;
  }
  .time-block--afternoon .time-products::after {
    display: none;
  }
  .time-block--night::after {
    display: none;
  }
}