@charset "UTF-8";
/* ページcss */
/* common Parts
============================================
============================================
============================================ */
.js-imgAspect.u-imgAspect,
.js-imgAspect > .u-imgAspect {
  -o-object-fit: cover;
  object-fit: cover;
  max-width: 100%;
}
/* Btn
============================================ */
.mc-designbtn {
  display: block;
  width: 100%;
  max-width: 470px;
  padding: 25px 16px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #C4321D;
  border: 2px solid #C4321D;
  border-radius: 6px;
  -webkit-transition: 0.175s;
  transition: 0.175s;
}

.mc-designbtn.-small {
  padding: 14px 16px;
  font-size: 16px;
}

.mc-designbtn.-wide {
  max-width: 588px;
}

.mc-designbtn.-reversal {
  color: #313131;
  background-color: #fff;
}

.mc-designbtn.-reversal span::after {
  border-color: #C4321D;
}

.mc-designbtn > span {
  position: relative;
  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;
  width: 100%;
  padding: 0 14px;
  line-height: 1.3em;
  text-align: center;
}

.mc-designbtn > span::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
/* Link
============================================ */
.mc-linkwrap {
  display: block;
  width: 100%;
}

.mc-linkdisabled {
  pointer-events: none;
}

/* Color
============================================ */
.mc-fc__main {
  color: #C4321D;
}

.mc-fc__sub {
  color: #FAD35C;
}

.mc-fc__black {
  color: #313131;
}

.mc-fc__white {
  color: #fff;
}

.mc-fc__gray {
  color: #626262;
}

/* Background Color
============================================ */
.mc-bgc__primary {
  background-color: #C4321D;
}

.mc-bgc__secondary {
  background-color: #FAD35C;
}

.mc-bgc__black {
  background-color: #313131;
}

.mc-bgc__white {
  background-color: #fff;
}

.mc-bgc__base {
  background-color: #FFF8E0;
}

.mc-bgc__sub {
  background-color: #FFDEC7;
}

.l-block:not(.mc-bgc__base) + .l-block.mc-bgc__base,
.l-block.mc-bgc__base + .l-block:not(.mc-bgc__base) {
  padding-top: 30px;
}

.l-block.u-bgc__base + .l-block.mc-bgc__base,
.l-block.mc-bgc__base + .l-block.u-bgc__base {
  padding-top: 0;
}

/*MOD
=============================================*/
/* おしらせ */
.l-block[data-value="MOD_JP_00053"]:not(:root){
  background-color: #FFF8E0;
}
/* ranking */
.l-block[data-value="MOD_JP_00078"]:not(:root){
  background-color: #FFDEC7;
  padding-top: 30px;
}
.p-ranking + .l-block[data-value="MOD_JP_00078"]{
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  .c-productslider--ranking{
    background-color:#fff;
  }
}
/* 注目トピックス */
.l-block[data-value="MOD_JP_00070"]:not(:root){
  background-color: #FFF8E0;
}
/* バイヤーズレコメンド */
.l-block[data-value="MOD_JP_00016"]:not(:root){
  background-color: #FFF8E0;
}
.l-block[data-value="MOD_JP_00016"] .c-productslider__arrow--next,
.l-block[data-value="MOD_JP_00016"] .c-productslider__arrow--prev{
  background-color: #FFF8E0;
}

/* 隠しテキスト
============================================ */
.mc-texthidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Page
============================================
============================================
============================================ */
/* メインビジュアルブロック
============================================ */
.p-mvblock {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 30px;
}

.p-mvblock__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.p-mvblock__titlebnr {
  width: 100%;
  padding-top: 31.8571428571%;
  overflow: hidden;
  line-height: 0;
  text-indent: 100%;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .c-nav__linkwrap{
    font-size: clamp(12px,2vw + 2px,16px);
    padding:15px 5px 28px;
  }
}

.p-nav__item span[data-icon="calendar"] {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.p-nav__linkwrap[data-arrow="rightdown"] {
  padding: 21px 10px;
}

.p-nav__linkwrap[data-arrow="rightdown"] span::after {
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translateX(-50%) rotate(135deg);
  transform: translateX(-50%) rotate(135deg);
  transform: translateX(-50%) rotate(135deg);
}

/* テキストリンク */
.p-textlink {
  background-color: #FAD35C;
  padding: 10px 0;
  text-align: right;
  margin: 0 0 0 auto;
  width: calc((100% - 24px * 3) / 4);
}
.p-textlink a{
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .p-textlink {
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }
}

/*注目ブランド
==============================================*/
.c-logoTextColumnn__item--logo {
  max-width: 180px;
  flex-basis:50% ;
  display: flex;
  align-items: center;
}

/* カテゴリブロック
============================================ */
.p-category__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 20px;
  background-color: #C4321D;
  border-radius: 6px;
}

.p-category__icon {
  width: 100%;
  max-width: 60px;
  max-height: 60px;
}

.p-category__btn span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(100% - 60px);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
}
.p-categoryOther__lists:not(:root) {
  margin-top: -60px;
}

.p-categoryOther__item:not(:root) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 60px;
}

.p-categoryOther__title {
  margin-top: 24px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;
}

.p-categoryOther__text {
  margin-top: 16px;
}

.p-categoryOther__btn {
  margin-top: auto;
}
/* カレンダーブロック
============================================ */
.p-calendar:not(:first-of-type) {
  margin-top: 60px;
}

.p-calendar__datetime {
  padding: 10px 10px 9px;
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  background-color: #C4321D;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.p-calendar__datetime .-label {
  padding: 6px 12px;
  margin-right: 8px;
  font-size: 18px;
  vertical-align: 3px;
}

.p-calendar__datetime .-new {
  color: #C4321D;
  background-color: #fff;
}

.p-calendar__datetime .-yokoku {
  color: #fff;
  background-color: #FAD35C;
}

.p-calendar__datetime .-big {
  font-size: 30px;
  vertical-align: -2px;
}

.p-calendar__categoryTitle {
  padding: 13px 10px;
  font-size: 22px;
  line-height: 1.3;
  color: #313131;
  text-align: center;
  background-color: #FAD35C;
}

.p-calendar__brand {
  padding: 28px 40px 15px;
  background-color: #fff;
}
.p-calendar__brand a p{
  cursor:pointer;
}
.p-calendar__btn {
  margin-top: 30px;
}

/* ========今後の発売日=======================*/
.p-announce__textblock {
  padding: 10px 15px;
  background-color: #fff;
}
.p-schedule{
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #313131;
  background-color: #fff;
  border-collapse: collapse;
  line-height: 1.6em;
}
.p-schedule__title{
  width:50%;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: #FAD35C;
  border: 1px solid #313131;
  border-collapse: collapse;
}
.p-schedule__title:nth-of-type(1){
  width: 58%;
}
.p-schedule__title:nth-of-type(2){
  width: 42%;
}
.p-schedule td{
  width:60%;
  padding: 5px 10px;
  font-size: clamp(12px , 3.9vw , 18px);
  text-align: right;
  border: 1px solid #313131;
  border-collapse: collapse;
}
.p-schedule td:nth-of-type(1){
  width: 55%;
}
.p-schedule td:nth-of-type(2){
  width: 45%;
}

/*=ブランド=*/
.p-calendar__category {
  border: 1px solid #C4321D;
}
.mc-designbtn.-radius0 {
  border-radius: 0px;
}

/* アコーディオン
============================================ */
.mc-bgc__main .c-accordion__icon::before,
.mc-bgc__main .c-accordion__icon::after {
  background-color: #fff;
}
@media screen and (min-width: 769px) {
  .p-nav__item[data-column~="1"] {
    width: 100%;
    margin-top: 24px;
    margin-left: 24px;
  }
}
@media screen and (max-width: 768px) {
  .mc-designbtn {
    padding: 14px 16px;
    font-size: 16px;
  }
  .p-mvblock {
    padding-bottom: 15px;
  }
  .p-category__lists:not(:root) {
    width: calc(100% + 10px);
    margin-top: -10px;
    margin-left: -10px;
  }

  .p-category__item:not(:root) {
    margin-top: 10px;
    margin-left: 10px;
  }

  .p-category__item[data-column~="md:2"] {
    width: calc((100% - 20px) / 2);
  }

  .p-category__btn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .p-category__btn span {
    width: 100%;
    font-size: 17px;
  }
  .p-categoryOther__title {
    font-size: 17px;
    text-align: center;
  }
  .p-calendar__datetime {
    padding: 9px 10px 7px;
    font-size: 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .p-calendar__datetime .-label {
    font-size: 15px;
  }

  .p-calendar__brand {
    padding: 16px 10px 10px;
  }
}
@media screen and (max-width: 640px) {
  .p-mvblock__titlebnr {
    padding-top: 69.7333333333%;
  }
}
@media (hover: hover) {
  .p-nav__linkwrap:hover {
    opacity: 0.5;
  }
}

/*過去ブランド
===================================*/
.p-morebtn {
  position: relative;
  display: block;
  width: 100%;
  font-size: 17px;
  font-weight: bold;
  text-align: left;
  -webkit-transition: 0.175s;
  transition: 0.175s;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  width: 100%;
  padding: 25px 16px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #C4321D;
  border: 2px solid #C4321D;
  -webkit-transition: 0.175s;
  transition: 0.175s;
  text-align: center;
}

.c-icon__more.p-icon__more:before,
.c-icon__more.p-icon__more:after {
  background-color: #fff;
}

.c-icon__more {
  position: absolute;
  top: 50%;
  right: 5%;
  display: block;
  cursor: pointer;
}

.c-icon__more:before,
.c-icon__more:after {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  -webkit-transition: 0.35s;
  transition: 0.35s;
}

.c-icon__more:after {
  transform: translate(50%, -50%) rotate(90deg);
}

.p-text--check {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
}

.p-text--check::before,
.p-text--check::after {
  width: 2px;
  height: 24px;
  content: "";
  background-color: #000;
}

.p-text--check::before {
  margin-right: 24px;
  -webkit-transform: rotate(-28deg);
  transform: rotate(-28deg);
}

.p-text--check::after {
  margin-left: 24px;
  -webkit-transform: rotate(28deg);
  transform: rotate(28deg);
}

.p-calendar:not(:first-of-type) {
  margin-top: 20px;
}

.p-calendar__img {
  width: 322px;
}


@media screen and (max-width: 768px) {
  .p-morebtn {
    margin: auto;
    width: calc(100% + 20px);
    margin-left: -10px;
  }
}

/* word Ranking
============================================ */
/* タイトル */
@media screen and (min-width: 769px) {
  .p-ranking#anchor_ranking {
    padding: 30px 5px;
  }
}
@media screen and (max-width: 768px) {
  .p-ranking#anchor_ranking {
    padding: 30px;
  }
}
@media screen and (max-width: 430px) {
  .p-ranking#anchor_ranking {
    padding: 30px 10px;
  }
}
.p-ranking__title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: fit-content;
}
.p-ranking__title::after,
.p-ranking__title::before{
  position: absolute;
  display: block;
  width: 50px;
  height: 100%;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.p-ranking__title::after{
  content: "";
  background-image: url(/include/shopping/common/image/word_ranking_a.svg);
  right: -75px;
}
.p-ranking__title::before{
  content: "";
  background-image: url(/include/shopping/common/image/word_ranking_b.svg);
  left: -60px;
}
@media screen and (max-width: 500px) {
  .p-ranking__title::after,
  .p-ranking__title::before{
    width: 30px;
  }
  .p-ranking__title::after{
    right: -40px;
  }
  .p-ranking__title::before{
    left: -40px;
  }
}
.p-ranking__title .-main {
  text-align: center;
  font-size: 28px;
  line-height: 1.3;
}
.p-ranking__title .-sub {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.3;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .p-ranking__title .-main {
    font-size: 18px;
  }
  .p-ranking__title .-sub {
    font-size: 12px;
  }
}
/*--- ランキング ---*/
.p-ranking__area {
  max-width: 785px;
  width: 100%;
  margin: 15px auto 0;
}
/* 共通 */
.p-ranking__item{
  width: fit-content;
  padding: 4px 16px;
  background-color: #ffffff;
  color: #313131;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}
.p-ranking__tag {
  font-size: 14px;
  line-height: 1.6;
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
/*--- TOP3 ---*/
.p-ranking__wrap.-top ul {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .p-ranking__wrap.-top ul {
    flex-direction: column;
    gap: 10px;
  }
}
.p-ranking__item.-top{
  width: calc((100% - 40px) / 3);
  position: relative;
  padding: 20px 16px;
}
@media screen and (max-width:768px) {
  .p-ranking__item.-top{
    width: 100%;
    padding: 15px;
    margin: 0 10vw;
    max-width: 465px;
  }
}
@media screen and (max-width: 450px) {
  .p-ranking__item.-top{
    max-width: 270px;
  }
}
@media screen and (max-width: 428px) {
  .p-ranking__item.-top{
    padding: 15px 0;
  }
}
.p-ranking__item.-top .p-ranking__tag{
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  margin-left: 40px;
}
.p-ranking__item.-top::before{
  content: "";
  position: absolute;
  top: 65%;
  left: 5px;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 40px;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .p-ranking__item.-top::before{
    top: 55%;
    left: 10px;
  }
  .p-ranking__item.-top .p-ranking__tag{
    margin-left: 55px;
  }
}
/* メダル */
.p-ranking__item.-no1::before{
  background-image: url(/include/shopping/common/image/word_ranking_no1.svg)
}
.p-ranking__item.-no2::before{
  background-image: url(/include/shopping/common/image/word_ranking_no2.svg)
}
.p-ranking__item.-no3::before{
  background-image: url(/include/shopping/common/image/word_ranking_no3.svg)
}
/*--- 4~15位 ---*/
.p-ranking__wrap.-bottom {
  width: 100%;
  margin: 20px auto 0;
}
.p-ranking__wrap.-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .p-ranking__wrap.-bottom ul {
    gap: 10px;
  }
}
/* aタグがないときにliを非表示 */
.p-ranking__item:not(:has(.p-ranking__tag)){
  display: none;
}