@charset "UTF-8";

ul, ol, li {
  list-style: none;
}

.recommend-top .wrapper_ {
  max-width: none;
}

/* ----- structure ----- */
.block-recommend-unit {
  padding-inline: 24px;
  margin-bottom: 64px;
  position: relative;
}

.block-recommend-unit--inner {
  max-width: 1600px;
  margin: auto;
}

/* もっと見る */
.js-more-recommend {
  position: relative;
  max-height: 600px;
  overflow: hidden;
}

.js-more-recommend::after {
  display: block;
  content: "";
  width: 100%;
  height: 50%;
  background: linear-gradient(rgba(95, 95, 95, 0) 0, #f5f5f5 90%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.block-recommend-unit--action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  padding-inline: 24px;
}

.block-recommend-unit--item {
  width: 100%;
  max-width: 504px;
}

.block-recommend-unit--button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 13px 23px 13px 13px;
  width: 100%;
  border-radius: 50vh;
  border: 0;
  cursor: pointer;
}

.block-recommend-unit--button::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/icon_recommend_more.svg) no-repeat 0 0;
  background-size: 100% auto;
}

/* 開閉時 */
.js-more-recommend.is-expanded {
  height: auto !important;
  max-height: none;
  overflow: visible;
}

.js-more-recommend.is-expanded::after {
  display: none;
}

.block-recommend-unit.is-expanded .block-recommend-unit--action {
  margin-top: 60px;
  position: static;
  transform: translateX(0);
}

.block-recommend-unit.is-expanded .block-recommend-unit--button::before {
  rotate: 180deg;
}

/* 高さ固定しない */
.js-more-recommend.is-visible {
  max-height: none;
  height: auto !important;
  overflow: visible;
}

.js-more-recommend.is-visible::after {
  display: none;
}

.js-more-recommend.is-visible .block-recommend-unit--action {
  display: none;
}

@media (min-width: 769px) {
  .block-recommend-unit {
    padding-inline: 0;
    margin-bottom: 100px;
  }

  .block-recommend-unit--action {
    padding-inline: 0;
  }

  .block-recommend-unit--button {
    transition: var(--transition-opacity);
  }

  .block-recommend-unit--button:is(:hover, :focus) {
    opacity: .8;
  }
}

/* ----- 見出し・導入リード ----- */
.block-recommend-top {
  max-width: 1600px;
  margin: 0 auto 30px;
}

h1.block-recommend-title {
  margin-bottom: 24px;
  padding-inline: 24px;
  font-size: 26px;
}

.block-recommend-lead {
  font-size: 14px;
  margin-bottom: 24px;
  padding-inline: 24px;
  font-weight: 500;
}

.block-recommend-nav {
  padding-left: 24px;
}

.block-recommend-nav--list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-block: 2px;
}

.block-recommend-nav--list > li {
  width: auto;
  flex-shrink: 0;
}

.block-recommend-nav--link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 100%;
  background-color: #fff;
  border-radius: 50vh;
  box-shadow: 0px 1px 6px #0000001A;
  font-size: 14px;
  padding: 12px 16px 12px 26px;
  transition: var(--transition-all);
}

.block-recommend-nav--link::after {
  display: block;
  content: "";
  width: 13px;
  height: 8px;
  background: url(../img/icon_recommend_nav_arrow.svg) no-repeat 0 0;
  background-size: 100% auto;
  transition: var(--transition-all);
}

.block-recommend-mainvisual {
  margin-bottom: 30px;
}

@media (min-width: 769px) {
  .block-recommend-top {
    margin-bottom: 40px;
    padding-inline: 0;
  }

  h1.block-recommend-title {
    margin-bottom: 40px;
    font-size: 36px;
    padding-inline: 0;
  }

  .block-recommend-lead {
    font-size: 16px;
    margin-bottom: 30px;
    padding-inline: 0;
  }

  .block-recommend-nav {
    padding-left: 0;
  }

  .block-recommend-nav--list {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
  }

  .block-recommend-nav--list > li {
    flex-shrink: 1;
  }

  .block-recommend-nav--link {
    font-size: 16px;
    padding: 18px 24px 18px 34px;
    transition: var(--transition-all);
  }

  .block-recommend-nav--link:is(:hover, :focus) {
    background-color: #9a9a9a;
    color: #fff;
    text-decoration: none;
  }

  .block-recommend-nav--link:is(:hover, :focus)::after {
    background-image: url(../img/icon_recommend_nav_arrow_hover.svg);
  }

  .block-recommend-mainvisual {
    margin-bottom: 40px;
  }
}

/* ----- MVスライダー（サイトトップから移植） ----- */
.block-top-mv.swiper {
  position: relative;
  padding-bottom: 30px;
}

.block-top-mv.swiper .block-top-mv--item {
  width: 100%;
}

.block-top-mv.swiper .block-top-mv--item img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.block-top-mv .block-top-mv--pagenation.swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

.block-top-mv .block-top-mv--pagenation.swiper-pagination .swiper-pagination-bullet {
  background-color: #cecece;
  width: 8px;
  height: 8px;
  border-radius: 50vh;
  margin: 0;
}

.block-top-mv .block-top-mv--pagenation.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #333;
}

.block-top-mv .block-top-mv--button {
  top: auto;
  bottom: 12px;
}

.block-top-mv .block-top-mv--button.swiper-button-next,
.block-top-mv .block-top-mv--button.swiper-button-prev {
  background-color: #fff;
  border-radius: 50vh;
}

.block-top-mv .block-top-mv--button.swiper-button-next::after,
.block-top-mv .block-top-mv--button.swiper-button-prev::after {
  display: block;
  content: "";
  width: 8px;
  height: 20px;
  position: absolute;
}

.block-top-mv .block-top-mv--button.swiper-button-next .swiper-navigation-icon,
.block-top-mv .block-top-mv--button.swiper-button-prev .swiper-navigation-icon,
.block-top-sp-mv .block-top-mv--button.swiper-button-next .swiper-navigation-icon,
.block-top-sp-mv .block-top-mv--button.swiper-button-prev .swiper-navigation-icon {
  display: none;
}

.block-top-mv .block-top-mv--button.swiper-button-next::after,
.block-top-sp-mv .block-top-mv--button.swiper-button-next::after {
  background: url(/cms/top/img/icon_top_mv_next_arrow.svg) no-repeat 0 0;
  background-size: 100% auto;
}

.block-top-mv .block-top-mv--button.swiper-button-prev::after,
.block-top-sp-mv .block-top-mv--button.swiper-button-prev::after {
  background: url(/cms/top/img/icon_top_mv_prev_arrow.svg) no-repeat 0 0;
  background-size: 100% auto;
}

.swiper-button-next svg,
.swiper-button-pre svg {
  display: none !important;
}

@media (max-width: 768px) {
  .block-top-sp-mv.swiper {
    position: relative;
    padding-bottom: 30px;
  }

  .block-top-sp-mv.swiper .block-top-sp-mv--item {
    width: 100%;
  }

  .block-top-sp-mv.swiper .block-top-sp-mv--item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  .block-top-sp-mv .block-top-mv--pagenation.swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
  }

  .block-top-sp-mv .block-top-mv--pagenation.swiper-pagination .swiper-pagination-bullet {
    background-color: #cecece;
    width: 8px;
    height: 8px;
    border-radius: 50vh;
    margin: 0;
  }

  .block-top-sp-mv .block-top-mv--pagenation.swiper-pagination .swiper-pagination-bullet-active {
    background-color: #333;
  }

  .block-top-sp-mv .block-top-mv--button {
    top: auto;
    bottom: 12px;
  }

  .block-top-sp-mv .block-top-mv--button.swiper-button-next,
  .block-top-sp-mv .block-top-mv--button.swiper-button-prev {
    width: 44px;
    height: 44px;
  }

  .block-top-sp-mv .block-top-mv--button.swiper-button-next::after,
  .block-top-sp-mv .block-top-mv--button.swiper-button-prev::after {
    display: block;
    content: "";
    width: 8px;
    height: 20px;
    position: absolute;
  }

  .block-top-sp-mv .swiper-button-next svg,
  .block-top-sp-mv .swiper-button-pre svg {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .block-top-mv.swiper {
    --mv-width: min(44.791666vw, 860px);
    --space: 20px;
    --arrow-size: 48px;
  }

  .block-top-mv.swiper .block-top-mv--item {
    width: var(--mv-width);
  }

  .block-top-mv .block-top-mv--pagenation.swiper-pagination {
    margin-top: 24px;
  }

  .block-top-mv .block-top-mv--pagenation.swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
  }

  .block-top-mv .block-top-mv--button {
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 1px 6px #0000000d;
  }

  .rt-recommend--inner.swiper.swiper-initialized.swiper-horizontal{
    max-width: 1600px;
    margin: 0 auto;
  }
  .block-top-mv .block-top-mv--button.block-top-mv--next,
  .block-top-mv .block-top-mv--button.block-top-mv--prev {
    width: 48px;
    height: 48px;
  }

  .block-top-mv .block-top-mv--button.block-top-mv--next {
    left: calc(50% + var(--mv-width) / 2 + var(--space) / 2 - var(--arrow-size) / 20);
  }

  .block-top-mv .block-top-mv--button.block-top-mv--prev {
    left: calc(50% - var(--mv-width) / 2 - var(--space) / 2 - var(--arrow-size));
  }

  .block-top-mv .block-top-mv--button.swiper-button-next::after,
  .block-top-mv .block-top-mv--button.swiper-button-prev::after {
    left: 50%;
    transform: translateX(-50%);
    transition: var(--transition-all);
  }

  .block-top-mv .block-top-mv--button.swiper-button-next:is(:hover, :focus)::after {
    left: calc(50% + 4px);
  }

  .block-top-mv .block-top-mv--button.swiper-button-prev:is(:hover, :focus)::after {
    left: calc(50% - 4px);
  }
}

/* ----- Rtoaster関連 ----- */
.block-recommend-unit--title {
  margin-bottom: 25px;
}

.rt-recommend--list {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.rt-recommend--list.-column03 .rt-recommend--item {
  width: calc((100% / 3) - 30px);
}

.rt-recommend--list.-column04 .rt-recommend--item {
  width: calc((100% / 4) - 33px);
}

.rt-recommend--item:empty {
  display: none;
}

.rt-recommend .rt-pickup--item-link {
  background-color: #fff;
  border-radius: 8px;
  padding: 26px;
}

.rt-recommend .rt-pickup--item-top {
  margin-bottom: 16px;
}

.rt-recommend .rt-pickup--item-thumb {}

.rt-recommend .rt-pickup--item-name,
.rt-recommend .rt-pickup--item-text {
  font-size: 20px;
  font-weight: bold;
}

.rt-recommend .rt-pickup--item-top > :last-child {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .rt-pickup--item-link {
    transition: var(--transition-opacity);
  }

  .rt-pickup--item-link:is(:hover, :focus) {
    opacity: .8;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  .rt-recommend .rt-pickup--item-text {
    font-size: 15px;
    margin: 0;
  }

  .rt-pickup--item-thumb img {
    border-radius: 8px;
  }

  .rt-recommend--list.-column03 {
    flex-direction: column;
    gap: 36px;
  }

  .rt-recommend--list.-column04 {
    gap: 8px;
  }

  .rt-recommend--list.-column03 .rt-recommend--item {
    width: 100%;
  }

  .rt-recommend--list.-column04 .rt-recommend--item {
    width: calc((100% / 2) - 4px);
  }

  .rt-recommend .rt-recommend--list.-column03 .rt-pickup--item-link {
    padding: 24px;
  }

  .rt-recommend .rt-recommend--list.-column04 li {
    border-radius: 8px;
    overflow: hidden;
  }

  .rt-recommend .rt-recommend--list.-column04 .rt-pickup--item-text {
    padding-inline: 16px;
  }

  .rt-recommend .rt-recommend--list.-column04 .rt-pickup--item-link {
    padding: 0 0 16px;
  }

  .rt-recommend .rt-recommend--list.-column04 .rt-pickup--item-thumb img {
    border-radius: 0;
  }
}


/* ----- アウトレットセール ----- */
.block-recommend-outlet {
  padding: 32px 24px;
  margin-bottom: 64px;
  background-color: #e4e1dc;
}

.block-recommend-outlet--inner {
  max-width: 1600px;
  margin: auto;
}

.block-recommend-outlet--head {
  margin-bottom: 30px;
}

.block-recommend-outlet--title {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  padding-left: 0;
}

.block-recommend-outlet--title::before {
  display: block;
  content: "";
  width: 32px;
  height: 35px;
  background: url(../img/icon_recommend_title_outletsale.svg) no-repeat 0 0;
  background-size: 100% auto;
}

.block-recommend-outlet--list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.block-recommend-outlet--item {
  width: calc((100% / 2) - 4px);
}

.block-recommend-outlet--link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  border-radius: 50vh;
  box-shadow: 0px 1px 6px #0000001A;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 18px 12px 28px;
  transition: var(--transition-all);
}

.block-recommend-outlet--link::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/icon_recommend_outletsale_arrow.svg) no-repeat 0 0;
  background-size: 100% auto;
  transition: var(--transition-all);
}

@media (max-width: 390px) {
  .block-recommend-outlet--link {
    font-size: 12px;
    padding-block: 8px;
  }
}

@media (min-width: 769px) {
  .block-recommend-outlet {
    padding: 30px 0 44px;
    margin-bottom: 100px;
  }

  .block-recommend-outlet--title {
    font-size: 24px;
  }

  .block-recommend-outlet--title::before {
    width: 45px;
    height: 48px;
  }

  .block-recommend-outlet--list {
    gap: 20px 44px;
  }

  .block-recommend-outlet--item {
    width: calc((100% / 6) - 37px);
  }

  .block-recommend-outlet--link:is(:hover, :focus) {
    background-color: #9a9a9a;
    color: #fff;
    text-decoration: none;
  }

  .block-recommend-outlet--link:is(:hover, :focus)::after {
    background-image: url(../img/icon_recommend_outletsale_arrow_hover.svg);
  }
}

/* ----- 最近見た商品 ----- */
.block-recommend-top-history {
  max-width: 1600px;
  margin: auto;
}


@media screen and (min-width: 769px) and (max-width: 1750px) {
  .wrapper .pane-contents,
  .wrapper_ {
    padding-inline: 0;
  }
  
  .recommend-top .block-topic-path,
  .block-recommend-top,
  .block-recommend-unit,
  .block-recommend-outlet,
  .block-recommend-top-history {
    padding-right: clamp(45px, calc(50vw - 795px), 70px) !important;
    padding-left: clamp(45px, calc(50vw - 795px), 70px) !important;
  }

}