:root {
  --text-color: #533933;
  --btn-color: #DC6450;
}

.teatreatspairing {
  color: var(--text-color);
}
.mv-title {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 0;
  color: var(--text-color);
  height: clamp(167px, calc(17.51vw + 101.33px), 236px);
  font-size: clamp(25px, calc(4.57vw + 7.86px), 43px);
}
.mv-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(/img/usr/event/teatreatspairing/sp/bg-head.png) no-repeat top left;
  background-size: contain;
  z-index: -1;
}
.mv-title .em {
  font-size: clamp(28px, calc(5.08vw + 8.96px), 48px);
}
.mv-img {
  position: relative;
}
.mv-text {
  position: absolute;
  right: clamp(20px, calc(7.61vw + -8.55px), 50px);
  top: clamp(-29px, calc(-2.28vw + -11.43px), -20px);
  writing-mode: vertical-rl;
  line-height: clamp(35px, calc(7.61vw + 6.45px), 65px);
}
.mv-text span {
  display: inline-block;
  padding: clamp(10px, calc(1.27vw + 5.24px), 15px) clamp(5px, calc(1.27vw + 0.24px), 10px);
  line-height: 1;
  font-size: clamp(16px, calc(4.06vw + 0.77px), 32px);
  background-color: #F6EFDA;
}
@media (min-width: 769px) {
  .mv-title {
    text-align: center;
  }
  .mv-title::before {
    position: absolute;
    top: 0;
    left: -62px;
    width: 346px;
    height: 279px;
    background: url(/img/usr/event/teatreatspairing/bg-head.png) no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .container {
    margin-top: 0;
  }
  .section-mv {
    margin: 0 -16px;
  }
  .mv-title {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .mv-title::before {
    aspect-ratio: 750 / 334;
  }
}

.bg-wrap {
  position: relative;
}
.bg-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/usr/event/teatreatspairing/sp/bg.png) repeat-y top center;
  background-size: contain;
  z-index: -1;
}

.page-nav {
  position: relative;
  margin-top: clamp(50px, calc(10.15vw + 11.93px), 90px);
  margin-bottom: 100px;
}
.nav-title {
  margin-bottom: clamp(30px, calc(2.54vw + 20.48px), 40px);
  text-align: center;
  font-size: clamp(23px, calc(3.05vw + 11.58px), 35px);
  color: var(--text-color);
}
.nav-list {
  margin-bottom: clamp(30px, calc(5.08vw + 10.96px), 50px);
  font-size: clamp(18px, calc(1.02vw + 14.19px), 22px);
}
a.list-view {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--btn-color);
  color: #fff;
  font-size: clamp(16px, calc(0.51vw + 14.1px), 18px);
  border-radius: 50vh;
  width: clamp(235px, calc(29.19vw + 125.55px), 350px);
  height: clamp(45px, calc(2.54vw + 35.48px), 55px);
}
a.list-view::after {
  content: "";
  display: block;
  position: absolute;
  margin-top: -3px;
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
  right: 20px;
  top: 50%;
}
.foot-img {
  margin: 25px auto;
  width: clamp(271px, calc(68.53vw + 14.02px), 541px);
}
@media (min-width: 769px) {
  .bg-wrap::before {
    top: 60px;
    left: 50%;
    width: 1920px;
    background: url(/img/usr/event/teatreatspairing/bg.jpg) repeat-y top center;
    transform: translateX(-50%);
  }
  .nav-list {
    display: flex;
    justify-content: center;
  }
  .nav-list-item:not(:last-child) {
    margin-right: 70px;
  }
  .nav-list-item a {
    position: relative;
    padding-right: 60px;
    color: var(--text-color);
  }
  .nav-list-item a::after {
    content: "";
    display: block;
    position: absolute;
    margin-top: -3px;
    width: 12px;
    height: 12px;
    border-left: 2px solid #111111;
    border-bottom: 2px solid #111111;
    transform: translateY(-50%) rotate(-45deg);
    right: 0;
    top: 50%;
  }
}
@media (max-width: 768px) {
  .bg-wrap::before {
    margin: 0 -16px;
    width: 100vw;
    height: calc(100% - (207 / 375 * 100vw));
    top: calc(207 / 375 * 100vw);
    aspect-ratio: 750 / 3478;
  }
  .nav-list-item {
    border-bottom: 1px solid #F6EFDA;
  }
  .nav-list-item a {
    position: relative;
    display: block;
    padding: 20px 30px;
    color: var(--text-color);
  }
  .nav-list-item a::after {
    content: "";
    display: block;
    position: absolute;
    margin-top: -3px;
    width: 12px;
    height: 12px;
    border-left: 1px solid #111111;
    border-bottom: 1px solid #111111;
    transform: translateY(-50%) rotate(-45deg);
    right: 20px;
    top: 50%;
  }
}

.section-pair {
  margin-bottom: clamp(70px, calc(7.61vw + 41.45px), 100px);
}
.section-title {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: clamp(15px, calc(2.54vw + 5.48px), 25px);
  font-size: clamp(25px, calc(2.54vw + 15.48px), 35px);
  text-align: center;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: clamp(30px, calc(6.35vw + 6.21px), 55px);
  height: clamp(2px, calc(0.25vw + 1.05px), 3px);
  transform: translateX(-50%);
  background-color: #C8A164;
}
.goods-list .list-item:not(:last-child) {
  margin-bottom: clamp(70px, calc(1.27vw + 65.24px), 75px);
}
.goods-list .item-title {
  margin-bottom: 15px;
  text-align: center;
}
.goods-list .item-num {
  margin-bottom: clamp(25px, calc(3.81vw + 10.72px), 40px);
  border-bottom: 1px solid #F6EFDA;
  color: #AA7726;
  font-size: clamp(37px, calc(4.57vw + 19.87px), 55px);
}
.goods-list .goods-name {
  display: flex;
  justify-content: center;
}
.goods-list .goods-name .name {
  flex: 1;
  font-size: clamp(21px, calc(0.51vw + 19.1px), 23px);
  width: clamp(calc((100% - 28px) / 2), calc((100% - 3.05vw + 16.58px) / 2), calc((100% - 40px) / 2));
}
.goods-list .goods-name .name-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 clamp(10px, calc(5.08vw + -9.04px), 30px);
  color: #fff;
  background-color: #C8A164;
  border-radius: 50vh;
  width: clamp(28px, calc(3.05vw + 16.58px), 40px);
  height: clamp(28px, calc(3.05vw + 16.58px), 40px);
  font-size: clamp(18px, calc(1.78vw + 11.34px), 25px);
}
.goods-list .goods-pair {
  display: flex;
}
.goods-list .goods-card {
  padding: 10px 12px;
  border-radius: 10px;
}
.goods-list .goods-card:nth-child(odd) {
  background-color: #F6EFDA;
}
.goods-list .goods-card:nth-child(even) {
  margin-left: auto;
  background-color: #E7F2D6;
}
.goods-card__info {
  margin-top: 10px;
}
.goods-card__name {
  font-size: 16px;
}
.goods-card__sub {
  display: block;
  font-size: 14px;
}
.goods-card__price {
  margin-top: 15px;
  font-size: 16px;
}
.goods-card__tax {
  font-size: 14px;
}
.goods-description {
  margin: 20px auto 30px;
  font-size: 16px;
}
a.goods-add-to-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--btn-color);
  color: #fff;
  font-size: 16px;
  border-radius: 50vh;
  width: clamp(235px, calc(3.81vw + 220.72px), 250px);
  height: 45px;
}
a.goods-add-to-cart::after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(225deg);
  right: 20px;
  top: 50%;
}
@media (min-width: 769px) {
  .goods-list .goods-name .name:nth-child(1) {
    display: flex;
    justify-content: flex-end;
  }
  .goods-list .goods-name .name:nth-child(3) {
    display: flex;
    justify-content: flex-start;
  }
  .goods-list .goods-image {
    width: 50%;
    text-align: right;
  }
  .goods-list .goods-image img {
    width: 450px;
  }
  .goods-list .goods-detail {
    width: 50%;
  }
  .goods-list .goods-detail {
    margin-left: 78px;
    width: 342px;
  }
  .goods-list .goods-wrap {
    display: flex;
  }
  .goods-list .goods-card {
    width: calc((100% - 10px) / 2);
  }
}
@media (max-width: 768px) {
  .goods-list .goods-image {
    margin-bottom: 15px;
  }
  .goods-list .goods-card {
    width: calc((100% - 8px) / 2);
  }
  .goods-list .goods-name {
    align-items: center;
  }
}