@charset "UTF-8";
/* 共通設定 */
article{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
}

.must-buy-items section a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.must-buy-items section a:visited { color: #fff;}
.must-buy-items section a:hover { color: #fff; text-decoration: underline;}
.must-buy-items section a:focus,
.must-buy-items section a:active { color: #fff;}


.must-buy-items .wrap{ overflow: inherit !important;}

.must-buy-items .pc-br{ display: inline-block;}
.must-buy-items .sp-br{ display: none;}

@media screen and (max-width: 640px) {

.must-buy-items .pc-br{ display: none;}
.must-buy-items .sp-br{ display: inline-block;}

}/* max 640 */

.nowrap{ white-space:nowrap;}

.go-to-menu{
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  bottom: 1rem;
  margin:0;
  padding: 0 1rem 0;
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  z-index: 500;
  contain: paint;
}

.go-to-menu a{
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  pointer-events: all;
}


@media screen and (max-width: 640px) {

.go-to-menu{ height: 6rem;}
.go-to-menu a{ width: 6rem; height: 6rem;}

}/* max 640 */


.must-buy-items .bg-red{ background-color: #A22127;}
.must-buy-items .bg-blue{ background-color: #294158;}
.must-buy-items .bg-green{ background-color: #104D40;}
.must-buy-items .bg-yellow{ background-color: #917907;}

.must-buy-items .color-red{ color: #A22127;}
.must-buy-items .color-blue{ color: #294158;}
.must-buy-items .color-green{ color: #104D40;}
.must-buy-items .color-yellow{ color: #917907;}




/* intro */

.must-buy-items .intro{
  position: relative;
  margin: 0;
  padding: 7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: #222;
  overflow: hidden;
}

.must-buy-items .intro-slider{
  position: absolute;
  right: 5%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  column-gap: 2rem;
  overflow: hidden;
  background-color: #222;
}

.must-buy-items .main-title{
  position: relative;
  width: 90%;
  max-width: 39.5rem;
  aspect-ratio: 395 / 451;
  z-index: 100;
}

.must-buy-items .main-copy{
  padding: 7% 0 0;
  display: flex;
  flex-direction: column;
  width: 85%;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 5rem;
}

.must-buy-items .main-copy p{
  display: block;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: left;
  transform: translateY(10vh);
  opacity: 0;

  transition: opacity 0.8s 0.6s ease, transform 0.8s 0.6s ease;
  will-change: transform, opacity;
}

.must-buy-items .main-copy .main-txt{
  font-size: 4rem;
  line-height: 1.5;
  border-bottom: 0.3rem solid #FFFF72;
}


.must-buy-items .start .main-copy p{ transform: translateY(0); opacity: 1;}

.must-buy-items .main-copy strong{ color: #ffff72; white-space: nowrap;}

/*
.start {
  transition: all 0.6s ease-in-out;
  opacity: 0;
  perspective: 1000;
  backface-visibility: hidden;
}
*/

@media screen and (max-width: 640px)  {
.must-buy-items .intro{ padding: 6%;}

.must-buy-items .intro-slider{
  right: 4%;
  column-gap: 1rem;
}

.must-buy-items .main-title{
  width: 90%;
  max-width: 19.7rem;
}

.must-buy-items .main-copy p{ font-size: 1.6rem;}

.must-buy-items .main-copy .main-txt{
  font-size: 2rem;
  border-bottom: 0.2rem solid #FFFF72;
}

}

@media screen and (max-width: 480px) {
.must-buy-items .main-title{ width: 100%;}
}/* max 480 */

.must-buy-items .copy-br{ display: none;}

@media screen and (min-width: 768px) and (max-width: 960px) {

.must-buy-items .copy-br{ display: inline-block;}

}/* 768-930 */

@media screen and (min-width: 641px) and (max-width: 730px) {

.must-buy-items .copy-br{ display: inline-block;}

}/* 641-700 */


/* must-buy-menu */

.must-buy-menu{
  position: relative;
  padding: 0 0 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.must-buy-menu ul{
  position: relative;
  width: 94%;
  max-width: 75rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
}

.must-buy-menu ul a{
  position: relative;
  padding: 4.5rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}

.must-buy-menu ul a::before{
  position: absolute;
  top: 0;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  background-color: #213445;
  border-radius: 2em;
  content: "";
}

.must-buy-menu ul a::after{
  position: absolute;
  top: 1.2rem;
  right: 0;
  left: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  display: block;
  background: url(/store/img/must_buy_items/arrow.svg) no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  content: "";
}

.must-buy-menu ul span{
  width: 7.2rem;
  height: 7.2rem;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.must-buy-menu ul span img{
  height: 100%;
  display: block;
  object-fit: cover;
}

.must-buy-menu ul strong{
  display: block;
  writing-mode: vertical-rl;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 750px) {

.must-buy-menu ul{
  justify-content: center;
  column-gap: 1rem;
}

.must-buy-menu ul span{
  width: 5rem;
  height: 5rem;
}

.must-buy-menu ul strong{ font-size: 2rem;}

}/* max 750 */

@media screen and (max-width: 480px) {

.must-buy-menu ul{
  justify-content: space-between;
  column-gap: 0;
}

.must-buy-menu ul span{
  width: 3.6rem;
  height: 3.6rem;
}

.must-buy-menu ul strong{ font-size: 1.8rem;}

}/* max 480 */

@media (hover: hover) {

.must-buy-menu ul li a{ transform: scale(1, 1); opacity: 1;}
.must-buy-menu ul li a:hover{ transform: scale(1.1, 1.1); opacity: 1; text-decoration: none; color: #fff !important;}
.must-buy-menu ul:hover li a{ opacity: 1; color: #6d7883;}

}/* End hover */



/* section */
.must-buy-section{
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}


.must-buy-section::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  display: block;
  background: url(/store/img/must_buy_items/bg.webp) #666;
  mix-blend-mode: overlay;
  content: "";
}


.must-buy-section .section-bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  display: block;
  object-fit: cover;
  mix-blend-mode: overlay;
  z-index: 1;
}

.must-buy-section .section-bg-txt{
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0;
  width: 14rem;
  display: block;
  z-index: 2;
}

#HOT_ITEM.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 66;}
#MUSTBUYMENU.must-buy-section .section-bg-txt{ bottom: 0; aspect-ratio: 14 / 40;}
#ITEM01.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 46;}
#ITEM02.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 176;}
#ITEM03.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 150;}
#ITEM04.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 152;}
#ITEM05.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 110;}
#ITEM06.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 144;}
#ITEM07.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 78;}
#ITEM08.must-buy-section .section-bg-txt{ top: 15%; aspect-ratio: 14 / 42;}

.must-buy-items .section-title{
  position: relative;
  margin: 0;
  padding: 5em 0 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 10;
}

.must-buy-items .section-title strong{
  position: relative;
  margin: 0;
  padding: 0;
  height: 4rem;
  display: block;
}

.must-buy-items .section-title strong img{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


.must-buy-items #HOT_ITEM .section-title strong{ aspect-ratio: 66 / 14;}
.must-buy-items #MUSTBUYMENU .section-title strong{ aspect-ratio: 40 / 14;}

.must-buy-items #ITEM01 .section-title strong{ aspect-ratio: 46 / 14;}
.must-buy-items #ITEM02 .section-title strong{ aspect-ratio: 176 / 14;}
.must-buy-items #ITEM03 .section-title strong{ aspect-ratio: 150 / 14;}
.must-buy-items #ITEM04 .section-title strong{ aspect-ratio: 152 / 14;}
.must-buy-items #ITEM05 .section-title strong{ aspect-ratio: 110 / 14;}
.must-buy-items #ITEM06 .section-title strong{ aspect-ratio: 144 / 14;}
.must-buy-items #ITEM07 .section-title strong{ aspect-ratio: 78 / 14;}
.must-buy-items #ITEM08 .section-title strong{ aspect-ratio: 42 / 14;}






@media screen and (max-width: 640px) {

.must-buy-items #HOT_ITEM .section-title strong,
.must-buy-items #MUSTBUYMENU .section-title strong,
.must-buy-items #ITEM01 .section-title strong,
.must-buy-items #ITEM05 .section-title strong,
.must-buy-items #ITEM07 .section-title strong,
.must-buy-items #ITEM08 .section-title strong{ height: 4rem;}

.must-buy-items #ITEM02 .section-title strong,
.must-buy-items #ITEM03 .section-title strong,
.must-buy-items #ITEM04 .section-title strong,
.must-buy-items #ITEM06 .section-title strong{ height: 9.4rem;}


.must-buy-items #HOT_ITEM .section-title strong{ aspect-ratio: 66 / 14;}
.must-buy-items #MUSTBUYMENU .section-title strong{ aspect-ratio: 40 / 14;}

.must-buy-items #ITEM01 .section-title strong{ aspect-ratio: 46 / 14;}
.must-buy-items #ITEM02 .section-title strong{ aspect-ratio: 86 / 34;}
.must-buy-items #ITEM03 .section-title strong{ aspect-ratio: 86 / 34;}
.must-buy-items #ITEM04 .section-title strong{ aspect-ratio: 100 / 34;}
.must-buy-items #ITEM05 .section-title strong{ aspect-ratio: 110 / 14;}
.must-buy-items #ITEM06 .section-title strong{ aspect-ratio: 75 / 34;}
.must-buy-items #ITEM07 .section-title strong{ aspect-ratio: 78 / 14;}
.must-buy-items #ITEM08 .section-title strong{ aspect-ratio: 42 / 14;}


.must-buy-items #ITEM02 .section-title strong img,
.must-buy-items #ITEM03 .section-title strong img,
.must-buy-items #ITEM04 .section-title strong img,
.must-buy-items #ITEM06 .section-title strong img{ height: 9.4rem;}




}/* max 640 */

@media screen and (max-width: 480px) {

.must-buy-items .section-title strong{ height: 3rem;}
/**/
.must-buy-items #ITEM02 .section-title strong,
.must-buy-items #ITEM03 .section-title strong,
.must-buy-items #ITEM04 .section-title strong,
.must-buy-items #ITEM06 .section-title strong{ height: 7.4rem;}

}/* max 480 */

.must-buy-items .section-title em{
  margin: 0;
  padding: 1rem 0 0;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.must-buy-items .inner{
  position: relative;
  margin: 0;
  width: 100%;
  display: block;
  z-index: 10;
}


/* hot-item-slider */

.hot-item-slider .slide-inner{
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hot-item-slider .item-slider-photo{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  z-index: 100;
}

.hot-item-slider .item-slider-photo img{
  position: relative;
  margin: 0;
  width: 100%;
  display: block;
  object-fit: cover;
  border: 0.2rem solid #fff;
  outline: 0.2rem solid #fff;
  outline-offset: -0.7rem;
}

.hot-item-slider .name{
  margin: 0;
  padding: 0.5rem 0 0;
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.hot-item-slider .pop-up-copy{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  height: 5rem;
  font-weight: 600;
  text-align: center;
  z-index: 50;
}

@media screen and (max-width: 480px) {

.hot-item-slider .pop-up-copy{ height: 4.5rem;}

}/* max 480 */

.hot-item-slider .pop-up-copy.copy-01{ aspect-ratio: 324 / 54;}
.hot-item-slider .pop-up-copy.copy-02{ aspect-ratio: 350 / 54;}
.hot-item-slider .pop-up-copy.copy-03{ aspect-ratio: 330 / 54;}
.hot-item-slider .pop-up-copy.copy-04{ aspect-ratio: 288 / 54;}
.hot-item-slider .pop-up-copy.copy-05{ aspect-ratio: 300 / 54;}
.hot-item-slider .pop-up-copy.copy-06{ aspect-ratio: 410 / 54;}
.hot-item-slider .pop-up-copy.copy-07{ aspect-ratio: 394 / 54;}

.hot-item-slider .pop-up-copy img{
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  object-fit: cover;
}

.hot-item-slider .splide__slide{
  position: relative;
  padding: 5em 0 1em;
  overflow: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
}

.hot-item-slider .splide__pagination { bottom: -2rem; column-gap: 0.5rem;}
.hot-item-slider .splide__pagination__page { opacity: 1; background-color: #7e191d;}
.hot-item-slider .splide__pagination__page.is-active { background: #fff; opacity: 1; transform: scale(1);}

.splide .button { background-color: transparent;}

.hot-item-slider .splide__slide.is-active{ z-index: 100;}

.hot-item-slider .splide__slide .slide-inner{ display: block; transition: 0.3s ease-in-out; transform: scale(0.8, 0.8); padding: 0;}
.hot-item-slider .splide__slide .slide-inner .name,
.hot-item-slider .splide__slide .slide-inner .pop-up-copy{ opacity: 0;}

.hot-item-slider .splide__slide.is-active .slide-inner{ transform: scale(1, 1);}
.hot-item-slider .splide__slide.is-active .slide-inner .name{ animation: name-on 3s ease; opacity: 0;}
.hot-item-slider .splide__slide.is-active .slide-inner .pop-up-copy{ animation: copy-on 3s 0.2s ease; opacity: 0;}


@keyframes name-on {
  0% { opacity: 0;}
  20% { opacity: 1;}
  90% { opacity: 1;}
  100% { opacity: 0;}
}

@keyframes copy-on {
  0% { opacity: 0; transform: scale(0) translate(-100%,2em);}
  25% { opacity: 1; transform: scale(1) translate(-50%,-4.5em);}
  80% { opacity: 1; transform: scale(1) translate(-50%,-4.5em);}
  95% { opacity: 0; transform: scale(1) translate(-50%,-1em);}
  100% { opacity: 0; transform: scale(0) translate(-100%,2em);}
}


@media (hover: hover) {

.hot-item-slider .splide__slide .slide-inner .name {
  background-image: linear-gradient( #fff, #fff );
  background-size: 0 0.1rem;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all .3s;
}

.hot-item-slider .splide__slide .slide-inner:hover .name { background-size: 100% 0.1rem;}

}/* End hover */





/* MODAL WINDOW */

.modal-body.must-buy-modal{
  position: relative;
  width: 90%;
  max-width: 96rem;
  max-height: 90vh;
  padding: clamp(4rem, 5vw, 10rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}

.must-buy-modal .must-buy-close{
  position: absolute;
  top: 1em;
  right: 1em;
  margin: 0;
  padding: 3rem 0 0;
  width: 3rem;
  height: 0;
  overflow: hidden;
  z-index: 100;
  border-radius: 3rem;
  background-color: #fff;
  cursor: pointer;
}

.must-buy-modal .must-buy-close::before,
.must-buy-modal .must-buy-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 2rem;
  content: "";
}

.must-buy-modal.bg-red .must-buy-close::before,
.must-buy-modal.bg-red .must-buy-close::after{ background-color: #A22127;}
.must-buy-modal.bg-blue .must-buy-close::before,
.must-buy-modal.bg-blue .must-buy-close::after{ background-color: #294158;}
.must-buy-modal.bg-green .must-buy-close::before,
.must-buy-modal.bg-green .must-buy-close::after{ background-color: #104D40;}
.must-buy-modal.bg-yellow .must-buy-close::before,
.must-buy-modal.bg-yellow .must-buy-close::after{ background-color: #917907;}

.must-buy-modal .must-buy-close::before { transform: translate(-50%,-50%) rotate(45deg);}
.must-buy-modal .must-buy-close::after { transform: translate(-50%,-50%) rotate(-45deg);}


.must-buy-inner-wrap {
  position: relative;
  width: 100%;
  max-width: 50rem;
  max-height: calc(90vh - clamp(4rem, 5vw, 10rem) * 2);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.must-buy-modal .must-buy-inner{
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  z-index: 100;
  background-color: #fff;
}

.must-buy-inner-box{ padding: 6% 6% 0;}

.must-buy-modal .badge{
  position: absolute;
  top: -4rem;
  left: -4rem;
  width: 25%;
  min-width: 8rem;
  display: block;
  aspect-ratio: 56 / 74;
  pointer-events: none;
  z-index: 150;
}

.modal-item-photo{
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 40rem;
  max-height: 30rem;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  z-index: 100;
}

.modal-item-photo img{
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 80%;
}

.must-buy-modal .modal-link-button a{
  position: relative;
  top: 0;
  margin: auto;
  padding: 1em 0.8em;
  width: 100%;
  max-width: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2em;
  font-size: 1.6rem;
  line-height: 1.1;
  white-space: nowrap;
  transition: .2s ease;
}

.must-buy-modal .modal-link-button a::before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  background: url(/store/img/must_buy_items/arrow.svg) no-repeat; background-size: contain;
  content: "";
}

.must-buy-modal.bg-red .modal-link-button a{ background-color: #7f1a1e; box-shadow: 0 0.3rem #561114;}
.must-buy-modal.bg-blue .modal-link-button a{ background-color: #203344; box-shadow: 0 0.3rem #14222d;}
.must-buy-modal.bg-green .modal-link-button a{ background-color: #0d3c32; box-shadow: 0 0.3rem #092822;}
.must-buy-modal.bg-yellow .modal-link-button a{ background-color: #907907; box-shadow: 0 0.3rem #745401;}

@media (hover: hover) {
.must-buy-modal .modal-link-button a{ opacity: 1;}
.must-buy-modal.bg-red .modal-link-button a:hover{ opacity: 1; top: 0.3rem; box-shadow: 0 0 #561114;}
.must-buy-modal.bg-blue .modal-link-button a:hover{ opacity: 1; top: 0.3rem; box-shadow: 0 0 #14222d;}
.must-buy-modal.bg-green .modal-link-button a:hover{ opacity: 1; top: 0.3rem; box-shadow: 0 0 #092822;}
.must-buy-modal.bg-yellow .modal-link-button a:hover{ opacity: 1; top: 0.3rem; box-shadow: 0 0 #745401;}
}/* End hover */


.modal-dl{
  position: relative;
  width: 100%;
  padding: 0.8rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-dl .name,
.modal-dl .caption{
  width: 100%;
  padding: 0 0 1.6rem;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.modal-dl .name em{
  display: block;
  color: #666;
  font-size: 1.4rem;
  padding-bottom: 0.8rem;
}

.modal-dl .name strong{
  display: block;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 600;
  padding-bottom: 1.6rem;
  border-bottom: 0.1rem solid #CCC;
}

.modal-agreement{
  padding: 2.4rem 0;
  background: #F0F0F0;
  margin-top: 3rem;
}

.modal-agreement .agreement{
  padding: 0.5em 0 0.5em;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
}

.modal-agreement .agreement-caption{
  padding: 0 0 1em;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-align: center;
}


@media screen and (max-width: 640px) {

.must-buy-modal .must-buy-close{
  top: -1rem;
  right: -1rem;
}

.modal-body.must-buy-modal{ padding:4rem 1.6rem;}
.must-buy-inner-box{ padding: 2.4rem 2.4rem 0;}

.modal-dl{ padding: 1rem 0;}

.modal-dl .name,
.modal-dl .caption{ padding-bottom: 0.8rem;}

.modal-dl .name em{ padding-bottom: 0; font-size: 1.2rem;}

.modal-dl .name strong{ padding-bottom: 0.8rem;}

.must-buy-inner-wrap { max-height: calc(90vh - 4rem * 2);}

.must-buy-modal .badge {
  top: -2rem;
  left: -0.7rem;
}

.modal-agreement{ padding: 1.6rem 0;}
.modal-agreement .agreement{ font-size: 1.4rem;}
.modal-agreement .agreement-caption{ font-size: 1rem;}
}/* End 640 */


.must-buy-items .bg-photo{
  margin: 0;
  width: 100%;
  height: 20rem;
  display: block;
}

.must-buy-items .bg-photo img{
  margin: 0;
  height: 100%;
  display: block;
  object-fit: cover;
}



/* foot-slide */

.foot-slide-inner{
  position: relative;
  width: 27rem;
  padding: 0 0 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foot-slide-inner .must-buy-txt{
  width: 19.6rem;
  height: 2.4rem;
  display: block;
  aspect-ratio: 196 / 24;
}

.foot-slide-inner .must-buy-mini-item{
  width: 4.8rem;
  height: 4.8rem;
  display: block;
  aspect-ratio: 1 / 1;
}





/* line-up */

.line-up{
  position: relative;
  margin: auto;
  padding: 0 0 5em;
  width: 94%;
  max-width: 75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3em 2.55%;
}

.line-up li{
  position: relative;
  padding: 1rem 1rem 4rem;
  width: 22.45%;
  display: flex;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  text-align: center;
  outline: 0.2rem solid #104D40;
  outline-offset: -0.4rem;
}

.bg-yellow .line-up li{outline-color: #917907;}
.bg-red .line-up li{outline-color: #A22127;}
.bg-blue .line-up li{outline-color: #294158;}


.line-up .badge{
  position: absolute;
  top: -1.2rem;
  left: -1.2rem;
  width: 5.6rem;
  display: block;
  aspect-ratio: 56 / 74;
  pointer-events: none;
  z-index: 10;
}


@media screen and (min-width: 768px) and (max-width: 840px) {

.line-up{
  justify-content: flex-start;
  gap: 3em 2.55%;
}

.line-up li{
  width: calc(100% / 3 - 1.7%);
}

}/* End 768-840 */


@media screen and (max-width: 640px) {

.line-up{
  justify-content: center;
  gap: 3em 2.55%;
}

.line-up li{
  width: calc(100% / 3 - 1rem);
}

}/* End 640 */


@media screen and (max-width: 480px) {

.line-up{
  justify-content: center;
  gap: 2em 1em;
}

.line-up li{ width: calc(50% - 1.7rem);}

}/* End 480 */





.line-up-inner .photo{
  margin-bottom: 0.8rem;
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: 156 / 120;
}

.line-up-inner .photo img{
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 80%;
}




@media (hover: hover) {

.line-up-inner{ cursor: pointer;}

.line-up-inner strong {
  background-size: 0 0.1rem;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all .3s;
}

.line-up-inner strong.color-red { background-image: linear-gradient( #A22127, #A22127);}
.line-up-inner strong.color-blue { background-image: linear-gradient( #294158, #294158);}
.line-up-inner strong.color-green { background-image: linear-gradient( #104D40, #104D40);}
.line-up-inner strong.color-yellow { background-image: linear-gradient( #917907, #917907);}

.line-up-inner:hover strong { background-size: 100% 0.1rem;}

}/* End hover */