@charset "UTF-8";

/* ============== 
reset.css
================*/
.section-eyecatch {
  max-width: none;
}

.section-eyecatch > .sectioning > .main_width {
  max-width: none;
}

.section-eyecatch > .sectioning {
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  color: initial;
  text-decoration: none;
}

h2,
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

section {
  margin: 0 auto;
}

/* ============== 
font
================*/

body {
  font-family: "futura-pt", "Hiragino Sans", sans-serif;
}

.section-title,
.event-day,
.heading {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 600;
  color: var(--main-title);
  text-align: center;
}

.heading {
  margin: 0 auto;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  letter-spacing: 1.2px;
}

/* ============== 
font/font-color
================*/

:root {
  --main-title: #d2c09e;
  --title-red: #922020;
  --title-green: #105840;
  --bg-white: #fff;
  --bg-red: linear-gradient(180deg, #6b0e0e, #590707 50%, #611515);
  --bg-green: linear-gradient(180deg, #174133, #034d35);
  --bg-light-green: linear-gradient(180deg, #105840, #19503d);
  --bg-brand: #ebebeb;
  --bg-select: #f5f5f5;
  --bg-coupon: #b7a07f;
  --tab-red: #611515;
  --tab-brand: #174133;
  --tab-select: #105840;
  /* --tab-brand-bottom: #d8d7d7;
  --tab-select-bottom: #efefef; */
  --rec-green: #4e8861;
  --rec-hover-red: #e9d9d9;
  --rec-hover-green: #d5dfdc;
  --rec-tag-red: #871010;
  --rec-tag-green: #175c33;
  --accent-color: #9b815c;
  --coupon-color: #d31717;
  --more-btn: #474747;
  --regular-price: #626161;
}

/* ============== 
width
================*/

:root {
  --container-width: 1120px;
  --inner-width: 900px;
  --item-column: 750px;
  --coupon-width: 600px;
}

/* ============== 
common
================*/

/* body {
  background: #efefef;
} */

.column {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}

small {
  font-size: 12px;
  color: #fff;
}

.sp_only {
  display: none;
}

.hidden-content {
  display: block;
}

.common-wrap {
  margin-top: 150px;
  padding: 0 16px;

  background: linear-gradient(180deg, rgba(107, 14, 14, 0.4), rgba(89, 7, 7, 0.4) 50%, rgba(97, 21, 21, 0.4)), url(../images/xmasfair2025/fv-bg.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}

@media screen and (max-width: 768px) {
  p {
    font-size: 14px;
  }

  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }
}

@media screen and (max-width: 375px) {
  .hidden-content {
    display: none;
  }

  .hidden-content.show {
    display: block;
  }
}

/* ============== 
fv_飾り
================*/

.o-img {
  position: absolute;
  z-index: 5;
}

/* オーナメント（左） */
.ornament_left-img {
  max-width: 70px;
  width: 8%;
  right: 75%;
}

.ornament_right-img {
  max-width: 70px;
  width: 8%;
  left: 75%;
}

.o_brand-img {
  max-width: 160px;
  width: 20%;
  left: 0;
}

.o_select-img {
  max-width: 160px;
  width: 20%;
  right: 0;
}

@media screen and (max-width: 768px) {
  .o_brand-img,
  .o_select-img {
    display: none;
  }
}

/* ============== 
fv
================*/

.fv {
  position: relative;
  max-width: var(--inner-width);
  margin: 0 auto;
  background: var(--bg-red) url(../images/xmasfair2025/fv-bg.jpg) no-repeat;
  text-align: center;
}

.main-title {
  display: inline-block;
  padding-top: 80px;
  color: var(--main-title);
  font-size: 26px;
  line-height: 1.2;
}

.main-title span {
  display: block;
  font-size: 16px;
}

.event-day {
  color: var(--main-title);
  font-size: 24px;
  text-align: center;
}

/* ============== 
lead
================*/

h2.section-title,
h3.sub-title,
.lead-text {
  text-align: center;
}

.lead-text {
  margin: 20px auto;
  color: #fff;
}

.lead-text > h3 {
  margin: 0 auto;
  color: #fff;
}

.lead-text > .sub-title {
  font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5rem);
}

.lead-text > div > p {
  margin-bottom: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.lead-text div {
  margin: 20px auto;
}

.big {
  font-size: 24px;
  font-weight: bold;
  color: #e1e787;
}

@media screen and (max-width: 768px) {
  .lead-text > div > p {
    font-size: 14px;
  }
}

/* クリスマスまであと何日？*/

#count-day {
  margin: 20px auto;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}
.num {
  margin-right: 4px;
  padding: 10px;
  background: #fff;
  color: #960218;
  font-size: 30px;
  font-weight: bold;
  border-radius: 5px;
}

@media screen and (max-width: 768px) {
  .num {
    font-size: 20px;
  }
}

/* ============== 
YUKIZAKI XMAS 2025
================*/

.limited-container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.title {
  margin-bottom: 16px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1.75px;
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 24px;
  }
}

@media screen and (max-width: 378px) {
  .title {
    font-size: 18px;
  }
}

/* 特別イベント2025 */

.event-title-wrap {
  margin: 0 auto 20px;
  max-width: 400px;
}

.event-title-wrap img {
  width: 100%;
}

/* ストライプ */

.stripe {
  max-width: var(--inner-width);
  margin: 0 auto;
  height: 5px;
  background: repeating-linear-gradient(-45deg, #fff 0 10px, #6b0e0e 10px 20px);
}

.stripe.margin {
  margin-bottom: 32px;
}

.event-wrap {
  justify-content: space-evenly;
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 3%;
  background-color: var(--bg-white);
  box-sizing: border-box;
}

.coupon-text > h3,
.wrapping-text > h3 {
  margin: 0 auto 10px;
  color: var(--title-red);
  font-weight: bold;
}

.sub-title.sp_only {
  margin: 0 auto;
  color: var(--title-red);
  font-weight: bold;
}

/* クーポン */
.coupon-text,
.coupon-ticket {
  width: 50%;
  text-align: center;
}

.coupon-text > p {
  font-size: 14px;
}

.coupon-discount {
  max-width: 350px;
  margin: 8px auto 16px;
}

.coupon-discount li {
  margin-bottom: 4px;
  padding: 1.5%;
  background-color: #dddddd;
  font-size: 16px;
  box-sizing: border-box;
}

.coupon-discount li span {
  color: #393939;
  font-size: 20px;
  font-weight: 600;
}

.coupon-discount li small {
  color: #000;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .coupon-discount li span {
    font-size: 14px;
  }
}

/* coupon */

.c-detail {
  position: relative;
  display: inline-block;
  padding: 25px;
  color: #fff;
  background: #0e4633;
  border-radius: 15px;
  text-align: center;
  line-height: 1.5;
}

.c-detail > p {
  color: #fff;
  font-size: 14px;
}

.c-detail > h3 {
  margin: 16px auto;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}

.c-detail::before,
.c-detail::after {
  position: absolute;
  top: 205px;
  width: 30px;
  height: 30px;
  content: "";
  border-radius: 50%;
  background: #fff;
}

.c-detail::before {
  left: -15px;
}

.c-detail::after {
  right: -15px;
}

.code {
  max-width: 280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 5px 5px;
  font-size: 12px;
  font-weight: bold;
  background-color: var(--bg-white);
  border-radius: 9999px;
  box-sizing: border-box;
}

.code > p {
  color: var(--coupon-color);
  font-weight: bold;
}

.code.column {
  justify-content: center;
  column-gap: 4px;
}

.emphasis {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.emphasis small {
  color: var(--coupon-color);
}

p.expiry {
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px dashed #fff;
  color: #fff;
  font-size: 16px;
}

.notes {
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 375px) {
  .coupon-text > p {
    font-size: 12px;
  }
}

/*wrapping */

.wrapping-text,
.wrapping-img {
  width: 50%;
}

.wrapping-column {
  justify-content: left;
}

.wrapping-select {
  max-width: 350px;
  margin: 8px auto 0;
}

.wrapping-select img {
  width: 100%;
}

.wrapping-img {
  text-align: center;
}

.img-wrap {
  margin: 10px auto;
}

.wrapping-img img {
  width: 100%;
  max-width: 400px;
  border: 2px solid#bfbbbb;
  border-radius: 20px;
}

.wrapping-text > p {
  margin: 0 auto;
  font-size: 14px;
  text-align: center;
}

.sub-title > small {
  font-size: 16px;
}

.wrapping-text > small {
  font-size: 14px;
  text-align: center;
}

.border {
  border-bottom: 2px solid var(--coupon-color);
}
.pc_only small,
.sp_only small {
  color: #000;
}

/* ボタン */
.link-btn > .column {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 3px;
  color: #333333;
}

.link-btn {
  display: block;
  max-width: 320px;
  margin: 20px auto 0;
  text-align: center;
}

.link-btn a {
  padding: 3% 5%;
  background: #a18966;
  border-radius: 9999px;
  color: #fff;
  transition: all 0.1s;
}

.link-btn a:hover {
  border: 3px solid #dbcaa7;
}

.hidden_500 {
  display: none;
}

@media screen and (max-width: 768px) {
  .stripe {
    max-width: 600px;
  }
  .coupon-text,
  .coupon-ticket {
    width: 100%;
  }

  .event-wrap {
    max-width: 600px;
    flex-direction: column-reverse;
    padding: 8% 16px;
  }

  .c-detail {
    margin: 10px auto;
  }

  .c-detail > h3 {
    font-size: 20px;
  }

  .wrapping-text {
    width: 80%;
  }

  .wrapping-text br {
    display: none;
  }

  .wrapping-select {
    max-width: none;
  }

  .wrapping-img {
    width: 100%;
  }

  .wrapping-text > p {
    text-align: left;
  }

  .link-btn a {
    font-size: 14px;
  }

  .c-detail::before,
  .c-detail::after {
    top: 196px;
  }
}

@media screen and (max-width: 500px) {
  p.expiry {
    font-size: 13px;
  }

  h3.sub-title {
    font-size: 16px;
  }

  .c-detail > h3 {
    margin-block: 8px;
    font-size: 16px;
    line-height: 1.4;
  }

  .notes {
    font-size: 12px;
  }

  .notes br {
    display: none;
  }

  .wrapping-text {
    width: 100%;
  }

  .c-detail::before,
  .c-detail::after {
    top: 178px;
  }
}

@media screen and (max-width: 375px) {
  .hidden_500 {
    display: block;
  }

  .c-detail {
    padding: 18px;
  }

  .c-detail > p {
    font-size: 12px;
  }

  .c-detail:before,
  .c-detail:after {
    top: 168px;
    width: 25px;
    height: 25px;
  }

  .wrapping-text > p {
    font-size: 12px;
  }

  .link-btn a {
    font-size: 12px;
  }
}

/* ============== 
検索
================*/

.content-inner {
  max-width: var(--inner-width);
  margin: 0 auto;
}

/* 検索 brand */
.list-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  margin-bottom: 32px;
}

.list-wrap.budget {
  row-gap: 20px;
  margin-bottom: 0;
}

.list-wrap.select-budget {
  row-gap: 8px;
}

h3.search-title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  text-align: left;
}

.list-wrap > li {
  width: calc(100% / 3 - 8px);
  background-color: var(--bg-white);
  text-align: left;
  border-radius: 10px;
  font-weight: bold;
  box-sizing: border-box;
  transition: all 0.3s;
}

.list-wrap > li small {
  color: #000;
}

.list-wrap::after {
  content: "";
  display: block;
  width: calc(100% / 3 - 8px);
}

.list-wrap > li:hover {
  background: rgb(226, 226, 226);
}

.arrow {
  position: relative;
  display: inline-block;
  padding: 0 0 0 1%;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow::before,
.arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2%;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.arrow a {
  display: block;
  padding: 20px 10px;
  line-height: 1.2;
}
.arrow-brand a {
  padding: 10px 10px 10px 2px;
}

.search-btn::before {
  width: 25px;
  height: 25px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.search-btn::after {
  right: 15px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.search-btn.green-btn::before {
  background: var(--bg-green);
}

.search-btn.light-green-btn::before {
  background: var(--bg-light-green);
}

/* クーポンアイテム */

.green-btn {
  position: relative;
}

.coupon-tag {
  position: absolute;
  top: -10px;
  left: 10px;
  padding: 2px 10px;
  background-color: var(--coupon-color);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  border-radius: 9999px;
}

/* もっと見るボタンのスタイル */
.more-button {
  background: var(--rec-green);
  color: white;
  margin: 10px auto 20px;
  padding: 10px 60px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.more-button:hover {
  background: var(--rec-green);
}

/*  */
.brand li {
  display: list-item; /* 通常表示 */
}

.brand li.hidden {
  display: none; /* 非表示用 */
}

@media screen and (max-width: 768px) {
  h3.search-title {
    font-size: 18px;
  }

  .list-wrap > li {
    width: calc(100% / 2 - 8px);
  }

  .arrow a {
    font-size: 13px;
  }

  .search-btn::before {
    width: 20px;
    height: 20px;
  }

  .search-btn::after {
    right: 13px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }

  .list-wrap.brand {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 428px) {
  .list-wrap > li {
    width: 100%;
  }

  .arrow-brand a {
    padding: 10px;
  }
}

/* tab */

.tabBox .tabArea {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  column-gap: 10px;
  width: 100%;
  padding: 40px 16px 0;
  background: #6c0e0e;
  box-sizing: border-box;
}

.tabBox .tabArea .one_tab {
  display: block;
  width: 220px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.tabBox .tabArea .one_tab .tab_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: #fff;
  border-radius: 20px 20px 0 0;
  box-sizing: border-box;
}

.tabBox .tabArea .one_tab.bottom .tab_inner {
  border-radius: 0 0 20px 20px;
}

.tabBox .tabArea .one_tab:nth-child(1) .tab_inner {
  background-color: var(--tab-brand);
}

.tabBox .tabArea .one_tab:nth-child(2) .tab_inner {
  background-color: var(--tab-select);
}
.tabBox .tabArea .one_tab:nth-child(3) .tab_inner {
  background-color: #a18966;
}

.tabBox .tabArea.bottom .one_tab:nth-child(1) .tab_inner {
  background-color: var(--bg-brand);
  color: #181818;
}

.tabBox .tabArea.bottom .one_tab:nth-child(2) .tab_inner {
  background-color: var(--bg-select);
  color: #181818;
}
.tabBox .tabArea.bottom .one_tab:nth-child(3) .tab_inner {
  background-color: var(--bg-select);
  color: #181818;
}

.tabBox .tabArea .one_tab.select .tab_inner {
  height: 80px;
  color: #fff;
}
.tabBox .tabArea.bottom {
  padding: 0 8px;
  background: #6b0e0e;
  align-items: flex-start;
}

.contents .tab_main {
  display: none;
  text-align: center;
  min-height: 280px;
  transition-duration: 0.3s;
}
.tab_main.is_show {
  display: block;
}

@media screen and (max-width: 768px) {
  .tabBox .tabArea .one_tab .tab_inner {
    font-size: 14px;
  }
}

@media screen and (max-width: 378px) {
  .tabBox .tabArea .one_tab .tab_inner {
    font-size: 11px;
  }
}

/* タブの中 */

/* 背景 */
.bg.green {
  background: var(--bg-green);
}

.bg.red {
  background: var(--bg-red);
}

.bg.light-green {
  background: var(--bg-light-green);
}
.bg.beige{
  background: #a18966;
}
/* 検索 */
.innerArea {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 50px 16px;
}

.title-separator {
  max-width: none;
  background: var(--accent-color);
}

.title-separator div {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 30px 16px;
  color: #fff;
  box-sizing: border-box;
}

.section-title.lead {
  margin: 0 auto;
  color: #fbe8c4;
  font-size: clamp(1rem, 0.65rem + 1.75vw, 1.875rem);
  text-align: center;
  letter-spacing: 1.2px;
}

.section-title span {
  display: block;
  letter-spacing: 1.2px;
  font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5rem);
  color: #fbe8c4;
}

/*  */

.lead-wrap {
  margin-bottom: 40px;
}

.lead-wrap > p {
  color: #fff;
}

.item-column {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: 5%;
  max-width: var(--item-column);
  margin: 0 auto;
  margin-bottom: 40px;
}

.item-text,
.item-img {
  width: 40%;
  text-align: left;
}

.item-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: url(../images/xmasfair2025/bg-red.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.item-img.green {
  background-image: url(../images/xmasfair2025/bg-green.jpg);
}

.item-img img {
  width: 100%;
  vertical-align: top;
  filter: drop-shadow(5px 5px 5px #292929);
}

/* item-text */
.brand-name,
.item-text > p {
  color: #fff;
}

.item-text > .brand-name {
  font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.5rem);
  font-weight: 400;
}

.item-text > .regular-price {
  margin-top: 8px;
  font-size: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
}

.item-text > .price-off {
  font-size: clamp(1.125rem, 0.975rem + 0.75vw, 1.5rem);
}

.item-text > .price-off small {
  color: #fff;
}

p.type {
  font-size: 12px;
}

.coupon-use {
  font-size: 13px;
}

.main-off-tag {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  padding: 1px 4px;
  border: 1px solid #fff;
  white-space: nowrap;
  margin-top: 3px;
}

.main-more-btn {
  display: block;
  max-width: 220px;
  margin-top: 20px;
  padding: 10px;
  background: var(--accent-color);
  text-align: center;
  transition: all 0.3s;
}

.main-more-btn a {
  display: block;
  color: #fff;
}

.main-more-btn:hover {
  background: #6a5230;
}

@media screen and (max-width: 768px) {
  .item-text,
  .item-img {
    width: 100%;
  }

  .main-more-btn {
    max-width: none;
  }

  .innerArea {
    padding: 20px 16px;
  }
}

@media screen and (max-width: 500px) {
  .item-column {
    display: grid;
    grid-template-columns: minmax(120px, 50%) 1fr;
    justify-items: center;
    align-items: center;
    gap: 8px;
  }
}

@media screen and (max-width: 378px) {
  .item-column {
    grid-template-columns: minmax(120px, 40%) 1fr;
  }
}

/* recommed */

.bg-brand {
  background: var(--bg-brand);
}

.bg-select {
  background: var(--bg-select);
}

.section-title.rec {
  padding: 32px 0;
  font-size: 24px;
  font-weight: 600;
  text-align: left;
}

.section-title.rec.red {
  color: var(--title-red);
}

.section-title.rec.green {
  color: var(--title-green);
}

.rec-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 8px;
  row-gap: 48px;
  margin: 16px 0 32px;
}

.rec-wrap::before {
  content: "";
  display: block;
  width: 24%;
  order: 1;
}

.rec-wrap li {
  position: relative;
  width: 24%;
  padding: 15px;
  box-sizing: border-box;
  transition: all 0.5s;
  cursor: pointer;
}

.rec-wrap li:hover {
  background: var(--rec-hover-red);
}

.rec-wrap.mens li:hover {
  background: var(--rec-hover-green);
}

.rec-img img {
  width: 100%;
  filter: drop-shadow(3px 3px 3px rgba(160, 160, 160, 0.7));
}

.rec-text {
  margin-top: -5px;
  text-align: left;
}

.innerArea_w .rec-text{
      margin-top: 5px;

}
.brand {
  font-weight: 400;
}

.price {
  font-size: 18px;
  font-weight: 700;
}

.product-name {
  font-size: 14px;
}

.regular-price {
  color: var(--regular-price);
  font-size: 12px;
  text-decoration: line-through;
}

.price-off,
.price-off small {
  color: var(--rec-tag-red);
}

.rec-text.green > .price-off,
.rec-text.green > .price-off small {
  color: var(--rec-tag-green);
}
.rec-text.green > .rec-off-tag {
  background: var(--rec-tag-green);
}

/* クーポンタグ */
.rec-coupon-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-color);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1;
}

/* %タグ */

.rec-off-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--rec-tag-red);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.more-btn {
  max-width: 380px;
  margin: 0 auto 50px;
  border: 1px solid #333333;
}

.more-btn a {
  display: block;
  padding: 15px 0;
  color: #333333;
  transition: all 0.3s;
}

.more-btn :hover {
  background: #d0d0d0;
}

@media screen and (max-width: 768px) {
  .rec-wrap {
    row-gap: 24px;
  }

  .rec-wrap li {
    width: 48%;
    padding: 8px;
  }

  .price {
    font-size: 14px;
  }

  .price small {
    font-size: 10px;
  }

  .more-btn a {
    font-size: 14px;
  }
}

@media screen and (max-width: 378px) {
  .section-title.rec {
    font-size: 18px;
  }
}

.stripe.green {
  background: repeating-linear-gradient(-45deg, #fff 0 10px, var(--bg-green) 10px 20px);
}
.stripe.light-green {
  background: repeating-linear-gradient(-45deg, #fff 0 10px, var(--bg-light-green) 10px 20px);
}

#coupon-way {
  padding: 80px;
  background: var(--bg-red);
}

.step-wrap {
  max-width: var(--item-column);
  margin: 20px auto 10px;
  padding: 16px;
  background: #fff;
  border-radius: 20px;
}

.couponcode-wrap {
  max-width: 550px;
  margin: 0 auto;
  padding: 16px 0;
}

.step-img {
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

.step-img img {
  width: 100%;
}

.coupon-input {
  justify-content: left;
  margin-top: 10px;
  height: 60px;
  border-top: 1px dotted #666;
  border-bottom: 1px dotted #666;
}

.sub {
  display: block;
  line-height: 40px;
  border-left: 10px solid #ccc;
  color: #2e2e2e;
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  padding-left: 8px;
}

.couponcode-text {
  width: 40%;
  height: 60px;
  padding-left: 16px;
  background: #e9e9e9;
  font-size: 13px;
  line-height: 60px;
  border-right: 1px dotted #666;
}

.coupon-box {
  width: 170px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #666;
}

.coupon-list {
  display: inline-block;
  text-decoration: none;
  margin: 10px 5px 0 0;
  padding: 4px;
  color: #333;
  border-radius: 3px;
  border: 2px solid var(--title-red);
}

.coupon-list::before {
  content: "!";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px #ccc solid;
  line-height: 21px;
  text-align: center;
  border-radius: 15px;
}

.triangle {
  width: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #fff;
  margin: 16px auto;
}

.show-text {
  color: #fff;
  text-align: center;
}

/* step2 */

.coupon-modal.column {
  justify-content: center;
}

.couponcode-img {
  max-width: 140px;
}

.couponcode-img img {
  width: 100%;
}

.column.coupon {
  column-gap: 8px;
  white-space: nowrap;
}

.column.coupon p small {
  color: #000;
}

.coupon-day {
  margin-bottom: 2%;
  font-size: 12px;
}

.coupon-modal-text span {
  padding: 2px 80px 2px 2px;
  border: 1px solid #666;
}

.copy-icon {
  padding: 2px;
  border: 2px solid var(--title-red);
}

.copy-icon img {
  width: 30px;
  height: 30px;
}

.copy-icon p {
  color: #666;
  font-size: 12px;
}

/* step3 */
.coupon-box.step3 {
  border: 2px solid var(--title-red);
}

.coupon-input.sp_only {
  display: none;
}

@media screen and (max-width: 768px) {
  #coupon-way {
    padding: 3% 3% 10% 3%;
  }
}

@media screen and (max-width: 500px) {
  .hidden_sp {
    display: none;
  }

  .coupon-input.sp_only {
    display: block;
  }

  .coupon-input {
    height: auto;
    border: none;
  }

  .couponcode-bg {
    margin-bottom: 10px;
    padding: 10px;
    background: #e9e9e9;
    font-weight: bold;
  }

  .coupon-box {
    min-width: 220px;
    width: 70%;
  }

  .show-text br {
    display: none;
  }

  .column.coupon span {
    display: block;
  }
}

@media screen and (max-width: 378px) {
  .coupon-modal.column {
    column-gap: 8px;
  }
  .coupon-modal-text span {
    padding: 2px 40px 2px 2px;
  }
}