@charset "UTF-8";

.mv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  padding: 25px 0 0 0;
  position: relative;
}
.mv__slide {
  width: 100%;
}
.mv__slide__in {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100vw !important;
  padding-right: 4px;
  gap: 4px;
}
.mv__slide__in__text {
  width: 29.7222222222%;
  padding-left: 4.4444444444vw;
  position: relative;
  z-index: 1;
}
.mv__slide__in__text .more-btn {
  width: 19.4444444444vw;
  height: 4.0277777778vw;
  font-size: 1.1805555556vw;
  background-size: 0.4166666667vw auto;
  background-position: right 0.8333333333vw center;
}
.mv__slide__in__text__ttl {
  font-family: din-2014, sans-serif;
  font-size: 8.1944444444vw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-top: 7.5vw;
  text-shadow: 4px 4px 6px rgba(255, 255, 255, 0.9);
  color: #A9894B;
}
.mv__slide__in__text__ttl-sub {
  font-family: din-2014, sans-serif;
  font-size: 1.6666666667vw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin-bottom: 3.75vw;
}
.mv__slide__in__text__desc {
  font-size: 1.3888888889vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: left;
  color: #a9894b;
  margin-bottom: 18px;
  margin-bottom: 1.25vw;
}
.mv__slide__in__img-block {
  width: calc(35.13889% - 4.5px);
  aspect-ratio: 1/1;
}
.mv__slide__in__img-block img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.mv__slide__in__img-block video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.mv__slide__in__img-block iframe {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.mv__slide-navi {
  max-width: 984px;
  margin: 22px auto 0;
}
.mv__slide-navi__in {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* width: 196px !important; */
  background-color: #fff;
  border: 1px solid #fff;
  padding: 3px;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  cursor: pointer;
}
.mv__slide-navi__in:hover {
  opacity: 0.8;
}
.mv__slide-navi__in__img-block {
  width: calc(50% - 1px);
  aspect-ratio: 1/1;
}
.mv__slide-navi__in__img-block img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.mv__slide-navi .slick-current .mv__slide-navi__in {
  border-color: #a9894b;
}
.info {
  padding: 0 30px;
  margin: 20px auto 30px;
}
.info__in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1035px;
  margin: 0 auto;
}
.info__list {
  width: calc(100% - 140px);
  padding-right:30px;
}
.info__list .more-btn-oval {
  width: 140px;
}
.info__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
.info__item + .info__item {
  margin-top: 14px;
}
.info__item__cate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 90px;
  height: 19px;
  background-color: #a9894b;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}
.info__item__text {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: underline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 28px;
  width:100%;
}
.side__product {
  border: 1px solid #e6e6e6;
  padding: 9px 12px 12px;
  overflow: hidden;
  max-height: 875px;
  -webkit-transition: max-height 0.6s;
  transition: max-height 0.6s;
}
.side__product__wrap {
  width: 100%;
}
.side__product._open {
  max-height: 2000px;
}
.side__product__head {
  width: 100%;
  height: 42px;
  border-radius: 42px;
  background-color: #a9894b;
  position: relative;
  overflow: hidden;
  margin-bottom: 11px;
}
.side__product__head__ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 150px;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #a9894b;
  border: 2px solid #a9894b;
  background-color: #fff;
  border-radius: 42px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.side__product__head__ttl:hover {
  opacity: 0.8;
}
.side__product__head__ttl._active {
  background-color: #a9894b;
  color: #fff;
  z-index: 0;
  pointer-events: none;
}
.side__product__head__ttl:first-child {
  left: 0;
}
.side__product__head__ttl:last-child {
  right: 0;
}
.side__product__list__item {
  width: 100%;
  margin-bottom: 8px;
}
.side__product__list__item > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.side__product__list__item__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 126px;
  aspect-ratio: 129/94;
  overflow: hidden;
}
.side__product__list__item__img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.side__product__list__item.w100 .side__product__list__item__img {
    aspect-ratio:initial;
    width: 100%;
}
.side__product__list__item__text {
  width: calc(100% - 126px);
  padding-left: 16px;
}
.side__product__list__item__text__ex {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-decoration: underline;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.side__product__list__item__ico {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: 40px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: #a9894b;
  padding: 0 2px;
  margin-bottom: 8px;
}
.side__product__list__item__ico._bg-wh {
  color: #a9894b;
  background-color: #fff;
  border: 1px solid #a9894b;
}
.js-tab-block:not(._active) {
  display: none;
}
.side__bnr {
  margin-top: 32px;
}
.side__bnr__img {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.column__right .side__bnr:first-child {
  margin-top: 0;
}
.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px 8px;
}
.product + .more-btn-oval {
  width: 180px;
  margin: 19px 0 0 auto;
}
.product__item {
  width: calc(25% - 6.25px);
}
.product__item a {
  display: block;
}
.product__item__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  aspect-ratio: 152/114;
  border: 1px solid #e0e0e0;
}
.product__item__img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.product__item__caption {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: underline;
  padding: 10px 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.container {
  margin-bottom: 40px;
}
.container__bnr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-top: 23px;
}
.container__bnr__item {
  width: calc(50% - 4px);
}
.container__bnr__item a {
  display: block;
}
.container__bnr__item img {
  display: block;
  width: 100%;
}
.container__movie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: 23px;
}
.container__movie__item,
.container__movie__large {
  width: calc(50% - 4px);
  aspect-ratio: 312/192;
  position: relative;
}
.container__movie__item iframe,
.container__movie__item video,
.container__movie__large iframe,
.container__movie__large video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.container__movie__large {
  width: 100%;
  margin-top: 23px;
}
.container__movie__large .video-brn::after {
  background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play.png);
  background-size: 86px auto;
}
.no-webp .container__movie__large .video-brn::after {
  background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play.png);
}
.video-brn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.video-brn img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.video-brn::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play_small.png);
  background-size: 42px auto;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.no-webp .video-brn::after {
  background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play_small.png);
}
@media only screen and (max-width: 767px) {
  .mv {
    display: block;
    padding-top: 35px;
    padding-right: 0;
    padding-bottom: 142px;
  }
  .mv__slide .slick-list {
    overflow: visible !important;
  }
  .mv__slide__in {
    padding-left: 4px;
    gap: 0 4px;
    position: relative;
  }
  .mv__slide__in__text {
    width: 100% !important;
    padding-left: 10px !important;
    position: static;
  }
  .mv__slide__in__text .more-btn {
    width: 100% !important;
    max-width: 327px;
    height: 56px !important;
    font-size: 17px;
    background-size: 6px auto;
    background-position: right 12px center;
    position: absolute;
    bottom: -212px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .mv__slide__in__text__ttl {
    font-size: 54px !important;
    padding-top: 0;
  }
  .mv__slide__in__text__ttl-sub {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }
  .mv__slide__in__text__desc {
    width: 100%;
    font-size: 16px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -156px;
  }
  .mv__slide__in__img-block {
    width: calc(50% - 2px);
  }
  .mv__slide-navi {
    width: 333px !important;
    margin-top: 12px;
  }
  .info {
    padding: 0 24px;
    margin: 39px auto 48px;
  }
  .info__in {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 28px 0;
  }
  .info__list {
    width: 100%;
    padding-right:15px;
  }
  .info__item + .info__item {
    margin-top: 10px;
  }
  .info__item__text {
    width: calc(100% - 69px);
    padding-right: 0;
    margin-right: -0.6rem;
  }
  .info__item__cate {
  font-size: 12px;
  width: 70px;
}
.info__item__text {
  font-size: 12px;
  padding-left: 5px;
}
  .side__product__list__item__text {
    padding-left: 26px;
  }
  .side__bnr {
    margin-top: 32px !important;
  }
  .side__bnr__img {
    margin-bottom: 11px !important;
  }
  .column__right .side__bnr:first-child {
    margin-top: 0 !important;
  }
  .product {
    gap: 8px 8px;
  }
  .product + .more-btn-oval {
    margin-top: 28px;
  }
  .product__item {
    width: calc(50% - 4.5px);
  }
  .container {
    margin-bottom: 55px;
  }
  .container:last-child {
    margin-bottom: 34px;
  }
  .container__bnr {
    margin-top: 19px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .container__bnr__item {
    width: 100%;
  }
  .container__movie {
    gap: 5px;
    margin-top: 20px;
  }
  .container__movie__item,
  .container__movie__large {
    width: 100%;
  }
  .container__movie__large {
    margin-top: 20px;
  }
  .container__movie__large .video-brn::after {
    background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play_small.png);
    background-size: 44px auto;
  }
  .no-webp .container__movie__large .video-brn::after {
    background-image: url(https://d2w53g1q050m78.cloudfront.net/wwwpurestonecom/uploads/img/top/ico_play_small.png);
  }
  .video-brn::after {
    background-size: 44px auto;
  }
}
@media only screen and (max-width: 1100px) {
  .mv__slide-navi {
    width: 720px;
  }
  .mv__slide-navi__in {
    width: 180px !important;
  }
}
@media only screen and (max-width: 1100px) and (max-width: 767px) {
  .mv__slide-navi__in {
    width: 111px !important;
  }
}
@media only screen and (max-width: 1000px) {
  .side__bnr {
    margin-top: 0;
  }
  .side__bnr__img {
    margin-bottom: 4px;
  }
  .column__right .side__bnr {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 16px !important;
    -moz-column-gap: 16px !important;
    column-gap: 16px !important;
  }
}
@media only screen and (max-width: 1320px) {
  .column__right .side__bnr {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
@media only screen and (max-width: 1000px) and (max-width: 767px) {
  .column__right .side__bnr {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
    -webkit-column-gap: 0 !important;
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
}
/* ここから下、追加CSS（トップ4列スマホ3列用） */
/* Flexbox レイアウトによる推奨アイテムグリッド */
section.container > ul.container__rcm-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 各バナー項目のスタイル */
section.container > ul.container__rcm-list > li.container__rcm-item {
  width: calc((100% - 45px) / 4) !important; /* 横4列の場合（gap 15px×3 = 45px） */
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 画像のスタイル */
section.container > ul.container__rcm-list > li.container__rcm-item a img {
  width: 100% !important;
  display: block !important;
  border-radius: 4px !important;
}

/* テキストエリアのスタイル（1行固定、中央揃え、はみ出しは ellipsis 表示） */
section.container > ul.container__rcm-list > li.container__rcm-item input {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 0 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 2em !important;
  line-height: 2em !important;
  text-align: center !important;
  background: #fff;
}

/* スマホ表示：768px 以下で横3列 */
@media (max-width: 768px) {
  section.container > ul.container__rcm-list > li.container__rcm-item {
    width: calc((100% - 30px) / 3) !important; /* gap 15px×2 = 30px */
  }
}


/* 共通スタイル */
.login-buttons {
  text-align: center !important;
  margin: 20px 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* PC版用 */
.login-buttons__row {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  width: 100% !important;
}

.login-buttons__row a {
  flex: 1 !important;
  max-width: 250px !important;
  padding: 15px 20px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  text-align: center !important;
  transition: background-color 0.3s, transform 0.2s !important;
  border: none !important;
}

/* 通常状態の色指定 */
/* ログインボタン：白背景、オレンジ文字＆枠 */
.login-btn {
  background-color: #fff !important;
  color: #ff5722 !important;
  border: 2px solid #ff5722 !important;
  border-style: solid !important;
}
  
/* 他のボタン：オレンジ背景、白文字 */
.newarrival-btn,
.restock-btn {
  background-color: #ff5722 !important;
  color: #fff !important;
}

/* ホバー時の挙動 */
.login-btn:hover {
  background-color: #ff5722 !important;
  color: #fff !important;
}
.newarrival-btn:hover,
.restock-btn:hover {
  background-color: #e64a19 !important;
}

/* スマホ版用：初期状態で非表示 */
.login-buttons__row--sp {
  display: none !important;
}

/* スマホ用レイアウト（幅768px以下） */
@media (max-width: 768px) {
  /* PC版を非表示 */
  .login-buttons__row--pc {
    display: none !important;
  }
  /* スマホ版を表示 */
  .login-buttons__row--sp {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  /* 1段目（ログインボタン）は全幅に近い */
  .login-buttons__row--sp:first-of-type a {
    flex: 1 1 90% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    background-color: #fff !important;
    color: #ff5722 !important;
    border: 2px solid #ff5722 !important;
    border-style: solid !important;
  }
  /* 2段目（新商品一覧 と 再入荷品一覧）は均等配置 */
  .login-buttons__row--sp:last-of-type a {
    flex: 1 1 48% !important;
    text-align: center !important;
    padding: 12px 0 !important;
    background-color: #ff5722 !important;
    color: #fff !important;
    border: none !important;
    margin: 0 1% !important;
  }
  .login-buttons__row--sp a:hover {
    background-color: #e64a19 !important;
  }
a.login-btn {
  border: 2px solid #ff5722 !important;
  background-color: #ffffff; /* 必要に応じて背景色を変更 */
  color: #ff5722; /* テキスト色を合わせるなら指定 */
  /* ボタンの形状を際立たせるなら border-radius や padding も追加 */
  /* border-radius: 4px; */
  /* padding: 8px 16px; */
}


}


/* ブロック全体のコンテナ */
.rcm-blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

/* 各ブロック */
.rcm-block {
  width: 100%;
}

/* 2列グリッドの設定（PC版・スマホ版共通） */
.container__rcm-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* 各アイテムのスタイル */
.container__rcm-item {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 画像のスタイル */
.container__rcm-item a img {
  width: 100% !important;
  display: block !important;
  border-radius: 4px !important;
}

/* input（テキスト）のスタイル */
.container__rcm-item input {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 2em !important;
  line-height: 2em !important;
  text-align: center !important;
  background: #fff !important;
}

.ts-fair-border {
  border: 2px solid #edebeb;   /* 枠線の色と太さ */
  border-radius: 8px;         /* 角の丸み */
  padding: 15px;              /* 内側の余白 */
  margin: 0 auto;             /* 中央寄せ（必要に応じて） */
}


/* グローバルナビの自動開閉 */
@media (min-width: 768px) {
  .header__nav__item:hover .pull-down-menu {
    display: block !important;
  }

  .pull-down-menu {
    top: 100%;
    left: 0;
    position: absolute !important;
    z-index: 1000;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .pull-down-menu__in {
    max-height: none !important;
    height: auto !important;
    padding: 20px !important; /* ←上下に余白追加（必要に応じて調整） */
    overflow: visible !important;
  }

  .header__nav__item {
    position: relative !important;
    overflow: visible !important;
  }
}


<!--ここから中央の新着用CSS-->

/* =========================================
   新着・再入荷・ピックアップ共通エリア CSS
   (3列+リンク横並び・画像4:3・ベージュデザイン)
   ========================================= */

/* セクション全体の余白 */
.center-new-arrival {
    margin-top: 50px;
    margin-bottom: 60px;
    width: 100%;
}

/* -----------------------------------------
   帯（タイトル）のデザイン
   ----------------------------------------- */
/* 画像のデザイン（ベージュ背景・上下線・茶色文字）を再現 */
.ttl-large.beige-style {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    
    background-color: #f9f8f4; /* 薄いベージュ */
    color: #a69666;            /* 落ち着いたゴールド系ブラウン */
    padding: 12px 15px;
    margin-bottom: 20px;
    
    /* 黒いラインを消し、デザインに合わせた色に変更 */
    border: none !important;
    /* 上下に線が必要な場合は以下を有効化してください（画像には線がないようですが念のため） */
    /* border-top: 1px solid #e0ddd5 !important; */
    /* border-bottom: 1px solid #e0ddd5 !important; */
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.05em;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

/* サブタイトル (- 新着商品 - など) */
.ttl-large .sub-ttl {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
    color: #a69666; /* メインタイトルと同じ色 */
}
@media (max-width: 768px) {
    .ttl-large .sub-ttl {
        display: none;
    }
}

/* 「一覧を見る >」リンク */
.header-view-all-text {
    font-size: 12px;
    color: #a69666; /* 文字色を統一 */
    text-decoration: none;
    margin-left: auto;
    font-weight: normal;
    transition: opacity 0.3s;
}
.header-view-all-text:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* -----------------------------------------
   商品グリッド (4列: 商品3つ + リンク1つ)
   ----------------------------------------- */
.c-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    width: 100%;
    /* カードの高さを揃える */
    align-items: stretch;
}

/* スマホ対応：2列 */
@media (max-width: 768px) {
    .c-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* 商品カード */
.c-product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    transition: transform 0.3s ease;
    text-align: center;
    height: 100%; /* グリッドの高さいっぱいに */
}
.c-product-card:hover {
    transform: translateY(-5px);
    z-index: 2;
}

/* 画像エリア（700x525 = 4:3比率） */
.c-product-card__img {
    position: relative;
    width: 100%;
    /* 525 ÷ 700 = 0.75 -> 75% の比率で高さを確保 */
    padding-top: 75%; 
    overflow: hidden;
    background: #f9f9f9;
}
.c-product-card__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに表示 */
    transition: transform 0.5s ease;
}
/* ホバー時の画像ズーム */
.c-product-card:hover .c-product-card__img img {
    transform: scale(1.05);
}

/* No Image 表示 */
.no-image-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 11px;
    background: #f0f0f0;
}

/* 商品情報（テキスト） */
.c-product-card__info {
    padding: 10px 5px;
    flex-grow: 1; /* 下部の余白を埋める */
}
.c-product-card__name {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    /* 3行まで表示して溢れたら...にする */
    height: 4.5em; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* -----------------------------------------
   「続きを見る」カード（グリッド内に配置）
   ----------------------------------------- */
.view-more-card {
    display: flex;           /* Flexboxを使用 */
    align-items: center;     /* 上下中央 */
    justify-content: center; /* 左右中央 */
    text-decoration: none;
    font-size: 13px;
    color: #333;
    width: 100%;
    height: 100%;            /* グリッドセルの高さ一杯に広げる */
    min-height: 150px;       /* 最低限の高さを確保 */
    transition: opacity 0.3s;
    background-color: transparent; 
}
.view-more-card:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* 商品がない時のメッセージ */
.no-item-msg {
    grid-column: 1 / -1; /* 横幅いっぱいに */
    text-align: left;
    padding: 20px 0;
    color: #333;
    font-size: 14px;
}



/* =========================================
   タブ切り替え＆リスト形式レイアウト CSS
   (assets/top.css) - 幅制限・連結カプセルタブ版
   ========================================= */

/* ▼▼▼ 全体の幅を画像のように狭く制限 ▼▼▼ */
.center-product-tab-section {
    margin-top: 40px !important;
    margin-bottom: 60px !important;
    width: 100% !important;
    max-width: 500px !important; /* ★幅を500pxに制限してコンパクトに */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -----------------------------------------
   タブメニューのデザイン（連結カプセル型）
   ----------------------------------------- */
.tab-menu {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    width: 100% !important;
    
    /* 連結させるため、外枠をここで設定 */
    border: 1px solid #a69666 !important;
    border-radius: 30px !important;
    overflow: hidden !important; /* 角丸からはみ出さないように */
    background: #fff !important;
}

.tab-item {
    flex: 1 !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    
    /* 初期状態（未選択） */
    color: #a69666 !important;
    background-color: #fff !important;
    border: none !important; /* 個別の枠線はなし */
    border-right: 1px solid #a69666 !important; /* 仕切り線 */
    
    margin: 0 !important;
    transition: all 0.3s !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
}

/* 右端のタブの仕切り線は不要 */
.tab-item:last-child {
    border-right: none !important;
}

.tab-item:hover {
    opacity: 0.8 !important;
    background-color: #fafafa !important;
}

/* 選択中のタブ（茶色に反転） */
.tab-item.active {
    color: #fff !important;
    background-color: #a69666 !important;
}

/* -----------------------------------------
   タブコンテンツ
   ----------------------------------------- */
.tab-content {
    display: none !important;
    padding: 10px 0 !important;
    animation: fadeIn 0.5s ease !important;
}

.tab-content.active {
    display: block !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* -----------------------------------------
   リストコンテナ
   ----------------------------------------- */
.c-product-list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

/* -----------------------------------------
   リストアイテム（カード型デザイン）
   ----------------------------------------- */
.c-product-item-list {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    background: #fff !important;
    padding: 10px !important;
    border-radius: 4px !important;
    transition: opacity 0.3s !important;
    
    /* 枠線と影 */
    border: 1px solid #eee !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    margin-bottom: 0 !important;
}

.c-product-item-list:hover {
    opacity: 0.9 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
}

/* 画像エリア */
.item-list-img {
    width: 90px !important; /* 画像幅 */
    min-width: 90px !important;
    margin-right: 15px !important;
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 画像（4:3比率） */
.item-list-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important; /* 4:3比率固定 */
    display: block !important;
}

/* 画像なしの場合 */
.item-list-img .no-image-box {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background: #f0f0f0 !important;
    color: #ccc !important;
    font-size: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 情報エリア */
.item-list-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

/* 商品名（下線付き） */
.item-list-name {
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: left !important;
}

/* カテゴリラベル（非表示） */
.item-list-label {
    display: none !important;
}

/* -----------------------------------------
   「一覧を見る」リンク（右寄せ）
   ----------------------------------------- */
.list-view-more {
    text-align: right !important;
    margin-top: 15px !important;
    border: none !important;
}
.list-view-more a {
    font-size: 12px !important;
    color: #a69666 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
.list-view-more a:hover {
    text-decoration: underline !important;
}

/* 商品がない時のメッセージ */
.no-item-msg {
    padding: 20px !important;
    color: #666 !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* スマホ対応（文字サイズ調整） */
@media (max-width: 768px) {
    .tab-item {
        padding: 10px 0 !important;
        font-size: 12px !important;
    }
}


/* =========================================
   今月のピックアップ（左右2カラム）専用CSS
   (assets/top.css の末尾に追加してください)
   ========================================= */

/* セクション全体の余白 */
.center-pickup-monthly {
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%;
}

/* 左右2カラムの枠組み */
.pickup-monthly-wrapper {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: flex-start;        /* 上端揃え */
    gap: 30px;                      /* 左右カラムの間の隙間 */
    width: 100%;
}

/* 各カラム（左・右） */
.pickup-column {
    width: 48%; /* 2列にするため幅を調整（隙間分を引く） */
    display: flex;
    flex-direction: column;
}

/* バナー画像 */
.pickup-banner-link {
    display: block;
    margin-bottom: 20px; /* バナーと商品の間隔 */
    transition: opacity 0.3s;
}
.pickup-banner-link:hover {
    opacity: 0.8;
}
.pickup-banner-link img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像に枠線などをつけたい場合はここで指定できます */
}

/* ピックアップエリア内の商品リスト調整 */
.center-pickup-monthly .c-product-list-view {
    gap: 15px; /* 商品ごとの間隔 */
}

/* 「一覧を見る」リンク（右寄せ） */
.pickup-view-more {
    text-align: right;
    margin-top: 15px;
}
.pickup-view-more a {
    font-size: 12px;
    color: #a69666;
    text-decoration: none;
    font-weight: bold;
}
.pickup-view-more a:hover {
    text-decoration: underline;
}

/* --- スマホ対応（画面が狭いときは縦並びにする） --- */
@media (max-width: 768px) {
    .pickup-monthly-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .pickup-column {
        width: 100%;
    }
}



/* ▼▼▼ お知らせティッカー用CSS（修正版） ▼▼▼ */

/* 1. 横幅の制限を解除して広げる設定 */
.header__info__in.gem-ticker-flex {
  display: flex !important;
  align-items: center;
  overflow: hidden;
  /* Ecforceの幅制限を強制的に解除 */
  width: 100% !important; 
  max-width: 100% !important;
  padding: 0 20px; /* 左右に少し余白を持たせる */
  box-sizing: border-box;
}

/* 2. 「お知らせ」タイトルの白つぶれ修正 */
.header__info__ttl {
  flex-shrink: 0;
  margin-right: 20px;
  z-index: 2;
  position: relative;
  
  /* 白い背景を削除し、ヘッダーと同じような紺色にするか透明にする */
  /* ここでは一旦「透明」にして文字色を「白」にします */
  background-color: transparent; 
  color: #fff !important; /* 文字色を白に強制 */
  
  /* もし流れる文字がタイトルの裏に透けるのが気になる場合は、
     以下の行のコメントアウト(//)を外し、サイトのヘッダー色(#0b1e42など)に合わせてください */
  /* background-color: #0b1e42; */
}

/* 3. 流れるエリアの窓枠 */
.gem-ticker-window {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  /* 枠の右端で文字がスパッと消えないよう少し余白 */
  mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
}

/* 4. 動く部分（レール） */
.gem-ticker-track {
  display: flex;
  white-space: nowrap;
  animation: gem-ticker-slide 40s linear infinite;
}

/* マウスを乗せたら止まる */
.gem-ticker-track:hover {
  animation-play-state: paused;
}

/* 5. 個々のお知らせアイテム */
.gem-ticker-item {
  display: inline-flex;
  align-items: center;
  margin-right: 50px;
}

.gem-ticker-date {
  font-size: 0.9em;
  color: #ccc; /* 日付は少しグレーに */
  margin-right: 8px;
}

.gem-ticker-item a {
  text-decoration: none;
  color: #fff; /* リンク文字色も白に */
}

.gem-ticker-item a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* アニメーション定義 */
@keyframes gem-ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
  .header__info__ttl {
    font-size: 12px;
    margin-right: 10px;
  }
  .gem-ticker-item {
    font-size: 12px;
    margin-right: 30px;
  }
}

/* カテゴリタグ（Goldwinの.news_category相当） */
.gem-ticker-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  background: #fff;
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 8px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* ▲▲▲ お知らせティッカー用CSS（修正版） ▲▲▲ */

/* =========================================
   汎用カテゴリスライダー（sv-slider系）
   SV925・K18など複数ブロックで共通使用
   ========================================= */

.sv-slider-section {
  margin: 40px 0 60px;
  width: 100%;
}

.sv-seg-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  list-style: none !important;
  padding: 0 !important;
}
.sv-seg-btn {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #a9894b !important;
  background: #fff !important;
  color: #a9894b !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.sv-seg-btn:hover {
  background: #f7f3ec !important;
}
.sv-seg-btn.is-active {
  background: #a9894b !important;
  color: #fff !important;
}

.sv-slider-outer {
  position: relative;
  overflow: hidden;
}
.sv-slider-track {
  display: flex;
  gap: 12px;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.sv-prod-card {
  flex: 0 0 calc(25% - 9px);
  max-width: calc(25% - 9px);
  background: #fff;
  border: 1px solid #e8e4dc;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, transform 0.2s;
}
.sv-prod-card:hover {
  border-color: #a9894b;
  transform: translateY(-3px);
}

.sv-prod-card__img {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  background: #f5f3ef;
}
.sv-prod-card__img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sv-prod-card:hover .sv-prod-card__img img {
  transform: scale(1.05);
}
.sv-prod-card__img .sv-no-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ccc;
  background: #f0f0f0;
}

.sv-prod-card__name {
  padding: 8px 10px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  margin: 0;
  box-sizing: content-box;
  height: calc(1.5em * 2);
}

.sv-more-card {
  flex: 0 0 calc(25% - 9px);
  max-width: calc(25% - 9px);
  border: 1px dashed #a9894b;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #a9894b;
  font-size: 12px;
  font-weight: bold;
  min-height: 160px;
  transition: background 0.2s;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.sv-more-card:hover {
  background: #f7f3ec;
}
.sv-more-card__icon {
  font-size: 22px;
  line-height: 1;
  color: #a9894b;
}
.sv-more-card__label {
  font-size: 11px;
  color: #a9894b;
  line-height: 1.6;
}

.sv-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.sv-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4cfc4;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.sv-dot.is-active {
  background: #a9894b;
  width: 18px;
  border-radius: 3px;
}
.sv-arr-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d4cfc4;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  flex-shrink: 0;
}
.sv-arr-btn:hover {
  border-color: #a9894b;
}
.sv-arr-btn svg {
  width: 12px;
  height: 12px;
  stroke: #888;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-arr-btn:hover svg {
  stroke: #a9894b;
}

.sv-empty-msg {
  padding: 30px 0;
  text-align: center;
  color: #999;
  font-size: 13px;
  width: 100%;
}

@media (max-width: 768px) {
  .sv-prod-card,
  .sv-more-card {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }
  .sv-seg-btn {
    font-size: 11px;
    padding: 5px 11px;
  }
}