@charset "EUC-JP";

/******************************/
/* SLIDER */
/******************************/
.l-header {
  position: relative;
  z-index: 10;
}

#slider img {
  max-width: initial;
  width: 100%;
}

@media screen and (min-width: 1031px) {
  #slider {
    margin-top: -140px;
    z-index: 0;
  }

  #slider .slick-track img:last-of-type {
    display: none;
  }
}

@media screen and (max-width: 1030px) {
  #slider .slick-track img {
    max-width: initial;
    width: 100%;
  }

  #slider .slick-track img:first-of-type {
    display: none;
  }
}


/******************************/
/* RECOMMEND */
/******************************/
#recommend {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
}

#imgL img {
  transition: opacity .5s;
  opacity: 1;
}

#imgL img.fade-out {
  opacity: 0;
}

#recommend-slider img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: contain;
  /* object-fit: cover; */
}

#recommend-slider .reco-count {
  padding: 8px 0 10px;
  text-align: right;
  letter-spacing: .1em;
}

#recommend-slider .slick-prev:before,
#recommend-slider .slick-next:before {
  width: 14px;
  height: 14px;
}

#recommend-slider .slick-prev {
  left: -40px
}

#recommend-slider .slick-next {
  right: -25px
}

#recommend-slider .slick-prev,
#recommend-slider .slick-next {
  top: 177px;
}

#recommend .btn-arrow {
  margin-top: 43px;
}

@media screen and (min-width: 768px) {
  .recommend-wrap {
    display: flex;
    align-items: center;
  }

  #imgL {
    width: 50%;
  }

  #recommend-slider {
    width: 300px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  #imgL img {
    max-width: initial;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 75 / 56;
  }

  #recommend-slider {
    width: 316px;
    margin: 20px auto;
  }

  #recommend-slider .slick-slide {
    padding: 0 30px;
  }

  #recommend-slider .c-item-list__ttl,
  #recommend-slider .c-item-list__price,
  #recommend-slider .c-item-list__expl {
    margin-left: -30px;
    margin-right: -30px;
  }

  #recommend-slider .slick-prev {
    top: 160px;
    left: -20px
  }

  #recommend-slider .slick-next {
    top: 160px;
    right: -15px
  }

  #recommend-slider .reco-count {
    padding: 3px 0 0;
  }

  #recommend-slider .c-item-list__ttl {
    margin-top: 8px;
  }

  #recommend .btn-arrow {
    margin-top: 5px;
  }
}


/******************************/
/* BEST SELLER */
/******************************/
#seller {
  margin: 0 auto;
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  box-sizing: border-box;
}

.catTab {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 30px;
}

.catTab li {
  position: relative;
  padding-bottom: 15px;
  width: 150px;
  text-align: center;
  transition: .5s;
  cursor: pointer;
}

.catTab li:after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 6px;
  content: '';
  transform: rotate(45deg);
  background: transparent;
  z-index: 10;
  transition: .5s;
}

.catTab .active:after,
.catTab li:hover:after {
  background: #000A48;
}

.catTab li:before {
  position: absolute;
  left: 0;
  bottom: 3px;
  content: '';
  width: 100%;
  height: 1px;
  background: #C3C3C3;
}

.catTab li span {
  transition: .5s;
}

.catTab li span,
.catTab li:hover svg,
.catTab .active svg {
  opacity: 0;
  display: none;
}

.catTab li:hover span,
.catTab .active span {
  color: #000A48;
  font-size: 16px;
  font-weight: 500;
  opacity: 1;
  display: block;
  animation: show 1s linear 0s;
}

.catPanel a img {
  aspect-ratio: 65 / 74;
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.catPanel {
  display: none;
  margin: 0 auto;
  width: 100%;
}

.catPanel.active {
  display: block;
}

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

  .catPanel .c-item-list__ttl,
  .catPanel .c-item-list__price,
  .catPanel .c-item-list__expl {
    margin-left: 20px;
    margin-right: 20px;
  }

  .catPanel .slick-slide {
    padding: 0 8px;
  }

  .catPanel .slick-list {
    margin: 0 -8px;
  }

  .catPanel .slick-prev:before,
  .catPanel .slick-next:before {
    width: 28px;
    height: 28px;
  }

  .catPanel .slick-prev {
    width: 40px;
    height: 40px;
    left: -58px;
  }

  .catPanel .slick-next {
    width: 40px;
    height: 40px;
    right: -43px;
  }

  .catPanel .slick-prev,
  .catPanel .slick-next {
    top: 217px;
  }
}

@media screen and (max-width: 767px) {
  #seller {
    padding-top: 28px;
  }

  .catTab li {
    width: auto;
    padding: 0 8px 8px;
    margin-bottom: 15px;
  }

  .catTab li svg {
    width: auto;
    height: 12px;
  }

  .catPanel {
    width: 317px;
    margin: -7px auto 0;
  }

  .catPanel .slick-slide {
    padding: 0 30px;
  }

  .catPanel .c-item-list__ttl,
  .catPanel .c-item-list__price,
  .catPanel .c-item-list__expl {
    margin-left: -30px;
    margin-right: -30px;
  }

  .catPanel .slick-prev {
    top: 160px;
    left: -20px
  }

  .catPanel .slick-next {
    top: 160px;
    right: -15px
  }

  .catPanel a img {
    aspect-ratio: 5 / 6;
  }
}


/******************************/
/* TOP RANKING */
/******************************/
#ranking .rank {
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  #ranking {
    margin: 0 auto;
    max-width: 1240px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  #ranking-wrap {
    display: flex;
    gap: 16px
  }

  #ranking-wrap>div {
    flex-basis: calc((100% - 64px) / 5);
  }

  #ranking .rank {
    padding-bottom: 16px;
    font-size: 20px;
  }

  #ranking-wrap a img {
    aspect-ratio: 29 / 34;
  }

  #ranking .is-1 {
    width: 50%;
    max-width: 500px;
    margin-right: 60px;
  }

  #ranking .ranking-other {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;
  }

  #ranking .ranking-other>div {
    width: 45.3125%;
  }

  #ranking .ranking-other>div:first-of-type,
  #ranking .ranking-other>div:nth-of-type(2) {
    padding-bottom: 60px;
  }

  #ranking .c-item-list__ttl,
  #ranking .c-item-list__price {
    padding: 0 20px;
  }
}

@media screen and (max-width: 767px) {
  #ranking {
    padding-top: 28px;
  }

  #ranking-wrap {
    margin-top: -10px;
    padding: 0 0 0 20px;
    display: block !important;
  }

  #ranking .rank {
    padding-bottom: 3px;
  }

  #ranking-wrap a img {
    aspect-ratio: 13 / 16;
  }

  #ranking-wrap .slick-slide {
    padding: 0 5px;
    width: 200px;
  }

  #ranking-wrap .slick-prev {
    top: 140px;
    left: 10px;
  }

  #ranking-wrap .slick-next {
    top: 140px;
    right: 10px;
  }

  #ranking-wrap .c-item-list__ttl,
  #ranking-wrap .c-item-list__price,
  #new-item .c-item-list__ttl,
  #new-item .c-item-list__price,
  #new-item .new {
    font-size: 14px;
  }
}

.p-ranking-list__btn {
  display: block;
  position: absolute;
  right: 0px;
  bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d8d8d8;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media screen and (min-width: 768px) {
  .is-1 .p-ranking-list__btn {
    bottom: auto;
  }
}

.p-ranking-list__btn.is-added {
  color: #B50000;
}

.p-ranking-list__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/******************************/
/* NEW ITEM */
/******************************/
#new-item .new {
  padding-right: 10px;
  color: #C3C3C3;
  font-family: 'Avenir', sans-serif;
}

#new-item-slider a img {
  aspect-ratio: 13 / 16;
}

@media screen and (min-width: 1031px) {
  #new-item-slider {
    margin-left: calc((100% - 1200px) / 2);
  }

  #new-item-slider .slick-slide {
    width: 260px;
    padding: 0 8px;
  }

  #new-item-slider .slick-prev,
  #new-item-slider .slick-next,
  #blog-slider .slick-prev,
  #blog-slider .slick-next {
    width: 28px;
    height: 50px;
  }

  #new-item-slider .slick-list {
    margin: 0 0 0 -8px;
  }

  #new-item-slider .slick-prev:before,
  #new-item-slider .slick-next:before {
    width: 28px;
    height: 28px;
    left: 0;
  }

  #new-item-slider .slick-next:before,
  #blog-slider .slick-next:before {
    left: -15px;
  }

  #new-item-slider .slick-prev {
    left: 1140px;
    top: -70px;
  }

  #new-item-slider .slick-next {
    top: -70px;
    left: 1180px;
  }
}

@media screen and (max-width: 1030px) {
  #new-item-slider {
    padding: 0 0 0 20px;
  }

  #new-item-slider .slick-slide {
    padding: 0 5px;
    width: 200px;
  }

  #new-item-slider .slick-prev {
    top: 120px;
    left: 10px;
  }

  #new-item-slider .slick-next {
    top: 120px;
    right: 10px;
  }
}


/******************************/
/* VIDEO */
/******************************/
#video {
  padding: 120px 0 220px;
}

.video-wrap {
  position: relative;
  overflow: hidden;
  /* aspect-ratio: 7 / 3; */
  aspect-ratio: 1920 / 1080;
}

#video .video,
#video img {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* #video img {
  width: 100%;
  aspect-ratio: 7 / 3;
  object-fit: cover;
} */

@media screen and (max-width: 767px) {
  #video {
    padding: 100px 0 170px;
  }

/*   .video-wrap,
  #video img {
    aspect-ratio: 1.63 / 1;
  } */
}


/******************************/
/* FOR GIFT */
/******************************/
#gift-wrap {
  margin: 0 auto;
  max-width: 1000px;
  background: #F8F8F8;
}

.gift-slider-wrap {
  position: relative;
  z-index: 10;
}

#gift-slider .slick-prev {
  top: 50%;
  left: -52px;
}

#gift-slider .slick-next {
  top: 50%;
  right: -47px;
}

#gift-txt {
  line-height: 200%;
}

#gift-txt h3 {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .1em;
}

#gift-txt>.text-center {
  padding: 26px 0;
}

.gift-count {
  margin: -57px 0 50px;
  letter-spacing: .1em;
  text-align: right;
}

@media screen and (min-width: 768px) {
  #gift-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px;
  }

  #gift-slider {
    width: 100%;
    max-width: 460px;
    top: -70px;
  }

  #gift-txt {
    width: 400px;
    font-size: 16px;
    text-align: center;
    z-index: 0;
  }

  #gift-txt .br-sp {
    display: none;
  }
}

@media screen and (max-width: 1340px) and (min-width: 768px) {
  .gift-slider-wrap {
    width: 40%;
  }

  #gift-txt {
    flex: 1;
    width: auto;
    padding: 50px 0;
  }

  #gift-txt .br-sp {
    display: block;
  }
}

@media screen and (max-width: 840px) and (min-width: 768px) {
  #gift-wrap {
    padding: 0 2%;
  }
}

@media screen and (max-width: 767px) {
  #gift-slider {
    width: 68.5%;
    top: -70px;
    margin: 0 auto;
  }

  .gift-count {
    margin: -67px auto 20px;
    width: 71%;
  }

  #gift-slider .slick-slide {
    padding: 0;
  }

  #gift-txt {
    text-align: center;
    padding-bottom: 80px;
  }

  #gift-txt img {
    width: 147px;
    height: 54px;
  }

  #gift-txt h3 {
    margin: 15px 0;
    font-size: 20px;
  }

  #gift-txt>.text-center {
    padding-bottom: 0;
  }
}


/******************************/
/* COMMITMENT */
/******************************/
.commit-wrap .box1,
.commit-wrap .box {
  margin-bottom: 20px;
}

.commit-wrap p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 200%;
  color: #323232;
}

.commit-wrap .box1 {
  background: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-1.jpg) no-repeat 50% 50% / 100% auto;
}

.commit-wrap .box {
  background: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-2.jpg) no-repeat 100% 0 / 400px auto;
}

.commit-wrap .box2 {
  background: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-2.jpg) no-repeat 100% 0 / 400px auto;
}

.commit-wrap .box3 {
  background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-3.jpg)
}

.commit-wrap .box4 {
  background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-4.jpg)
}

.commit-wrap .box5 {
  background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-5-3.jpg)
}

.commit-wrap .box6 {
  background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-6-2.jpg)
  /* background-image: url(https://file003.shop-pro.jp/PA01506/390/img/item_temp/reason06-01.jpg); */
}

.commit-wrap h3 {
  margin: 0 0 25px;
  display: inline-block;
  padding-bottom: 25px;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: .1em;
  color: #000A48;
  border-bottom: 1px solid #000A48;
}

.commit-wrap h3 span {
  display: inline-block;
  padding: 0 10px;
  font-size: 18px;
  color: #fff;
  background: #000A48;
}

.commit-other {
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.commit-other h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: 8px;
  margin-top: 0;
}

.commit-other p {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.7;
}

.commit-wrap {
  display: flex;
  flex-direction: column;
}

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

  .commit-wrap,
  .commit-other {
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .commit-wrap {

    flex-wrap: wrap;
    gap: 20px 20px;
    max-height: 1570px;
  }

  .commit-wrap>div {
    width: 49.2%;
    max-width: 590px;
  }

  .commit-wrap .box1 {
    aspect-ratio: 1 / 1;
  }

  .commit-wrap .box1>div {
    padding: 0 0 30px 0;
    width: 530px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
  }

  .commit-wrap .box {
    display: flex;
    align-items: center;
    aspect-ratio: 59 / 40;
  }

  .commit-wrap .box>div {
    width: 300px;
  }

  .commit-wrap .box2>div {
    width: 425px;
  }

  .commit-wrap .box4,
  .commit-wrap .box5,
  .commit-wrap .box6 {
    justify-content: flex-end;
    background-position: 0 0;
  }

  .commit-other>div {
    width: calc(100% / 3);
    padding: 0 30px;
    border-left: 1px solid #D9D9D9;
    box-sizing: border-box;
  }

  .commit-other>div:first-of-type {
    border-left: 0;
  }

  .commit-other>div img {
    margin-bottom: 12px;
  }
}

@media screen and (max-width: 1200px) {
  .commit-wrap .box1 {
    display: flex;
    align-items: center;
  }

  .commit-wrap .box1>div {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .commit-wrap .box1 {
    display: block;
    margin-bottom: 40px;
    background-size: 100% auto;
    background-position: 0 0;
  }

  .commit-wrap .box1>div {
    padding: 72% 20px 10px;
  }

  .commit-wrap .box {
    margin-bottom: 40px;
    min-height: 240px;
    background-size: 100% auto;
  }

  .commit-wrap .box>div {
    padding: 72% 20px 0;
  }

  .commit-wrap .box2,
  .commit-wrap .box4,
  .commit-wrap .box6 {
    justify-content: flex-end;
    background-position: 0 0;
  }

  /* .commit-wrap .box2 > div,
  .commit-wrap .box4 > div,
  .commit-wrap .box6 > div{
    padding-left: 50px;
  } */
  .commit-wrap .box1 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-1-sp.jpg);
    order: 1;
  }

  .commit-wrap .box2 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-2-sp.jpg);
    order: 3;
  }

  .commit-wrap .box3 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-3-sp.jpg);
    order: 5;
  }

  .commit-wrap .box4 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-4-sp.jpg);
    order: 2;
  }

  .commit-wrap .box5 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commit-5-sp-2.jpg);
    order: 4;
  }

  .commit-wrap .box6 {
    background-image: url(https://file003.shop-pro.jp/PA01506/390/img/top/commitment_06.jpg);
    order: 5;
  }

  .commit-wrap h3 {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: none;
    position: relative;

  }

  .commit-wrap h3:after {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    background-color: #000000;
    left: 0;
    bottom: 0;
  }
  .commit-wrap p .br-pc{
    display: none;
  }
  .commit-other {
    padding: 50px 0 10px;
    margin-inline: 20px;
  }

  .commit-other>div {
    width: 100%;
    padding: 16px 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #D9D9D9;
    text-align: left;
    display: grid;
    grid-template-areas:
      "icon text1"
      "icon text2";
    grid-template-columns: auto 1fr;
  }

  .commit-other>div:first-child {
    border-top: 1px solid #D9D9D9;
  }

  .commit-other>div img {
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    margin-right: 20px;
    grid-area: icon;
  }

  .commit-other h3 {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    grid-area: text1;

  }

  .commit-other p {
    margin-top: 3px;
    font-size: 14px;
    grid-area: text2;
  }
}


/******************************/
/* INSTA */
/******************************/
#ig {
  padding-bottom: 125px;
}

#ig-wrap {
  margin: 0 auto;
  padding-bottom: 65px;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
}

#ig-wrap img {
  width: 33.33%;
}

@media screen and (max-width: 767px) {
  #ig {
    padding-bottom: 80px;
  }

  #ig-wrap {
    padding-bottom: 25px;
  }

  #ig-wrap img {
    width: 50%;
  }
}


/******************************/
/* CONCEPT */
/******************************/
#concept {
  padding-top: 190px;
}

#concept h2.c-ttl {
  padding-top: 20px;
}

#concept-wrap {
  margin: 0 auto;
  max-width: 1000px;
  background: #F8F8F8;
}

#concept-txt h3 {
  margin: 8px 0 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: .1em;
}

#concept-txt p {
  margin-bottom: 32px;
  line-height: 200%;
}

@media screen and (min-width: 1031px) {
  #concept-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    padding: 0 100px 50px;
  }

  #concept-img {
    position: relative;
    width: 460px;
    top: -70px;
  }

  #concept-txt {
    font-size: 16px;
    text-align: center;
  }

  #concept-txt .br-sp {
    display: none;
  }
}

@media screen and (max-width: 1030px) {
  #concept-wrap {
    margin-top: 230px;
  }

  #concept-img {
    position: relative;
    width: 265px;
    top: -300px;
    margin: 0 auto -280px;
  }

  #concept-txt {
    padding: 0 20px 70px;
    text-align: center;
  }

  #concept-txt h3 {
    margin: -30px 0 10px;
    font-size: 20px;
  }
}


.btn-arrow {
  width: 300px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#recommend .btn-arrow,
#gift .btn-arrow {
  padding-right: 20px;
}