/* 
カスタマイズ用CSS
Globalで読み込まれます
*/

/* CSS Variables */
:root {
  --primary-black: #1a1a1a;
  --primary-blue: #002978;
  --primary-red: #cf0800;
  --border-gray: #cbcbcb;
  --primary-white: #fff;
  --placeholder: #cbcbcb;
  --background-gray: #f5f5f5;
}

body {
  color: var(--primary-black);
  font-family: "Noto Sans JP", sans-serif;
}

.ec-layoutRole .ec-layoutRole__mainWithColumn {
  width: 100% !important;
}

@media (min-width: 1024px) {
  .ec-layoutRole .ec-layoutRole__mainWithColumn {
    min-width: 900px;
  }
}

@media (min-width: 1024px) {
  .ec-layoutRole__contents {
    display: flex !important;
    gap: 38px;
  }
}

/** Layout */
.container {
  max-width: 1280px;
}

.wrap {
  padding-left: 20px;
  padding-right: 20px;
}

/** Spacing */
@media (min-width: 1024px) {
  .mt-md-md {
    margin-top: 60px;
  }
  .mt-md-lg {
    margin-top: 80px;
  }
}

/** Slideshowの下から */
.ec-layoutRole__contents {
  margin-top: 38px;
}

/** PC Sidebar **/
.ec-categoryNaviRole {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .ec-categoryNaviRole {
    width: 252px;
  }
}

/** Carousel */
.carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* スムーズスクロールを有効にする */
}

.carousel::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .carousel-only-xs {
    flex-wrap: wrap;
  }
}

/** recommend_list */
.recommend-item-root {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1024px) {
  .recommend-item-root {
    padding-left: 0;
    padding-right: 0;
  }
}

.recommend-item-container {
  width: auto;
  margin-left: -9px;
}

@media (min-width: 1024px) {
  .recommend-item-container {
    width: auto;
    margin-left: -9px;
  }
}

.recommend-item {
  flex: 0 0 calc(100% / 2.6);
  width: calc(100% / 2.6);
  margin-right: 8px;
  margin-left: 8px;
}

@media (min-width: 1024px) {
  .recommend-item {
    flex: 0 0 calc(100% / 4.6);
    width: calc(100% / 4.6);
    margin-right: 9px;
    margin-left: 9px;
  }
}

.recommend-item__image {
  width: 100%;
  height: 118px;
  object-fit: cover;
}

.recommend-item__title {
  color: #000;
  text-align: justify;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  text-decoration-line: underline;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  margin-top: 4px;
  height: 76px;
}

@media (min-width: 1024px) {
  .recommend-item__title {
    font-size: 16px;
    margin-top: 8px;
    height: 86px;
  }
}

.recommend-item__price {
  color: var(--primary-red, #cf0800);
  text-align: justify;
  font-size: 20px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .recommend-item__price {
    color: var(--primary-red, #cf0800);
    font-size: 24px;
  }
}

.recommend-item__yen {
  color: var(--primary-red, #cf0800);
  text-align: justify;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

@media (min-width: 1024px) {
  .recommend-item__yen {
    font-size: 16px;
  }
}