/* =============================================================

    Module

============================================================= */

/**

 * #m-homeMainVisual

 */

.m-homeMainVisual {

  display: block;

  width: 100%;

  position: relative;

}

.m-homeMainVisual__container {

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

  position: relative;

}

.m-homeMainVisual--single .m-homeMainVisual-slideController,

.m-homeMainVisual--single .m-homeMainVisual-slidePagination {

  display: none;

}



.m-homeMainVisual-slider__item-picture > img {

  width: 100%;

}



.m-homeMainVisual-slideController {

  display: block;

}

.m-homeMainVisual-slideController__prev, .m-homeMainVisual-slideController__next {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  position: absolute;

  z-index: 1;

  top: calc(50% - 3.9rem);

  width: 5rem;

  height: 5rem;

  background: rgba(255, 255, 255, 0.4);

  border-radius: 50%;

  opacity: 1;

  transition: opacity 0.3s ease;

  outline: none;

}

.m-homeMainVisual-slideController__prev > img, .m-homeMainVisual-slideController__next > img {

  width: 1.2rem;

}

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

  .m-homeMainVisual-slideController__prev, .m-homeMainVisual-slideController__next {

    top: calc(50% - 4rem);

  }

  .m-homeMainVisual-slideController__prev:hover, .m-homeMainVisual-slideController__next:hover {

    opacity: var(--hover-opacity);

  }

}

.m-homeMainVisual-slideController__prev {

  left: 1rem;

  padding-right: 0.3rem;

}

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

  .m-homeMainVisual-slideController__prev {

    left: 3rem;

  }

}

.m-homeMainVisual-slideController__next {

  right: 1rem;

  padding-left: 0.3rem;

}

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

  .m-homeMainVisual-slideController__next {

    right: 3rem;

  }

}

.m-homeMainVisual-slideController__prev.swiper-button-disabled, .m-homeMainVisual-slideController__next.swiper-button-disabled {

  opacity: 0;

  pointer-events: none;

}



.m-homeMainVisual-slidePagination {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  gap: 1rem 2rem;

  width: 100%;

  margin-top: 1.6rem;

}

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

  .m-homeMainVisual-slidePagination {

    margin-top: 2rem;

  }

}

.m-homeMainVisual-slidePagination__item {

  display: block;

  width: 1.2rem;

  height: 1.2rem;

  border-radius: 50%;

  border: 1px solid var(--color-black);

  background: var(--color-white);

  opacity: 1;

  cursor: pointer;

}

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

  .m-homeMainVisual-slidePagination__item {

    transition: opacity 0.3s ease;

  }

  .m-homeMainVisual-slidePagination__item:hover {

    opacity: var(--hover-opacity);

  }

}

.m-homeMainVisual-slidePagination__item.swiper-pagination-bullet-active {

  cursor: default;

  background: var(--color-black);

}



/**

 * #m-homeFeatureSlide

 */

.m-homeFeatureSlide {

  display: block;

  width: 100%;

  position: relative;

}

.m-homeFeatureSlide-container {

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

  position: relative;

}

.m-homeFeatureSlide-slider {

  display: flex;

  flex-wrap: nowrap;

  align-items: stretch;

  justify-content: flex-start;

  transition-property: transform;

  box-sizing: content-box;

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

}

.m-homeFeatureSlide-slider__item {

  display: block;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

  background: #FFFFFF;

  transition-property: transform;

}

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

  .m-homeFeatureSlide-slider__item {

    width: 36.7rem;

  }

}

.m-homeFeatureSlide-slider__picture {

  display: block;

  width: 100%;

}

.m-homeFeatureSlide-slider__picture img {

  display: block;

  width: 100%;

  height: auto;

}

.m-homeFeatureSlide-slider__link {

  display: block;

}

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

  .m-homeFeatureSlide-slider__link {

    transition: opacity 0.3s ease;

  }

  .m-homeFeatureSlide-slider__link:hover {

    opacity: var(--hover-opacity);

  }

}

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

  .m-homeFeatureSlide--mdNoSlide .m-homeFeatureSlide-container {

    display: block;

    max-width: calc(1140px + 4rem);

    padding-left: 2rem;

    padding-right: 2rem;

    margin: 0 auto;

    position: relative;

    overflow: visible;

  }

  .m-homeFeatureSlide--mdNoSlide .m-homeFeatureSlide-slider {

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: flex-start;

    transition-property: none;

    box-sizing: border-box;

    gap: 2.5rem 2rem;

    height: auto;

  }

  .m-homeFeatureSlide--mdNoSlide .m-homeFeatureSlide-slider__item {

    display: block;

    width: calc(33.3333% - 1.3333333333rem);

    height: auto;

    overflow: visible;

    background: #FFFFFF;

    transition-property: none;

  }

}

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

  .m-homeFeatureSlide--md2Slide {

    max-width: calc(1140px + 10rem);

    margin: 0 auto;

    padding: 0 5rem;

  }

  .m-homeFeatureSlide--md2Slide .m-homeFeatureSlide-container {

    margin: 0 auto;

    width: 100%;

    overflow: hidden;

  }

}

.m-homeFeatureSlide-slideController {

  display: block;

}

.m-homeFeatureSlide-slideController__prev, .m-homeFeatureSlide-slideController__next {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  position: absolute;

  z-index: 1;

  top: calc(50% - 4.9rem);

  width: 5rem;

  height: 5rem;

  background: rgba(255, 255, 255, 0.4);

  border-radius: 50%;

  opacity: 1;

  transition: opacity 0.3s ease;

  outline: none;

}

.m-homeFeatureSlide-slideController__prev > img, .m-homeFeatureSlide-slideController__next > img {

  width: 1.2rem;

}

.m-homeFeatureSlide-slideController__prev {

  left: 1rem;

  padding-right: 0.3rem;

}

.m-homeFeatureSlide-slideController__next {

  right: 1rem;

  padding-left: 0.3rem;

}

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

  .m-homeFeatureSlide-slideController {

    display: none;

  }

  .m-homeFeatureSlide-slideController--md2Slide {

    display: block;

  }

  .m-homeFeatureSlide-slideController__prev, .m-homeFeatureSlide-slideController__next {

    top: calc(50% - 2.5rem);

  }

  .m-homeFeatureSlide-slideController__prev:hover, .m-homeFeatureSlide-slideController__next:hover {

    opacity: var(--hover-opacity);

  }

  .m-homeFeatureSlide-slideController__prev {

    left: 3rem;

  }

  .m-homeFeatureSlide-slideController__prev--md2Slide {

    left: 0;

  }

  .m-homeFeatureSlide-slideController__next {

    right: 3rem;

  }

  .m-homeFeatureSlide-slideController__next--md2Slide {

    right: 0;

  }

}

.m-homeFeatureSlide-slideController__prev.swiper-button-disabled, .m-homeFeatureSlide-slideController__next.swiper-button-disabled {

  opacity: 0;

  pointer-events: none;

}

.m-homeFeatureSlide-slidePagination {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  gap: 1rem 2rem;

  width: 100%;

  margin-top: 2rem;

  margin-bottom: 0.5rem;

}

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

  .m-homeFeatureSlide-slidePagination {

    margin-top: 2rem;

  }

}

.m-homeFeatureSlide-slidePagination__item {

  display: block;

  width: 1.2rem;

  height: 1.2rem;

  border-radius: 50%;

  border: 1px solid var(--color-black);

  background: var(--color-white);

  opacity: 1;

  cursor: pointer;

}

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

  .m-homeFeatureSlide-slidePagination__item {

    transition: opacity 0.3s ease;

  }

  .m-homeFeatureSlide-slidePagination__item:hover {

    opacity: var(--hover-opacity);

  }

}

.m-homeFeatureSlide-slidePagination__item.swiper-pagination-bullet-active {

  cursor: default;

  background: var(--color-black);

}



/**

 * #m-homeCategoryList

 */

.m-homeCategoryList {

  display: flex;

  flex-wrap: wrap;

  align-items: stretch;

  justify-content: flex-start;

  gap: 1.6rem 1.5rem;

}

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

  .m-homeCategoryList {

    gap: 1.5rem 2rem;

  }

}

.m-homeCategoryList__item {

  display: block;

  width: calc((100% - 4.5rem) / 3);

  text-align: center;

  font-size: 1.2rem;

}

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

  .m-homeCategoryList__item {

    width: 12.5rem;

    font-size: 1.6rem;

  }

}

.m-homeCategoryList__link {

  display: block;

}

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

  .m-homeCategoryList__link {

    transition: opacity 0.3s ease;

  }

  .m-homeCategoryList__link:hover {

    opacity: var(--hover-opacity);

  }

}

.m-homeCategoryList__picture {

  display: block;

  width: 100%;

  margin-bottom: 1rem;

}

.m-homeCategoryList__picture img {

  display: block;

  width: 100%;

  height: auto;

}



/**

 * #m-productLine-col2-md3

 */

.m-productLine-col2-md3 {

  display: flex;

  flex-wrap: wrap;

  gap: 1.6rem 1.5rem;

}

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

  .m-productLine-col2-md3 {

    gap: 2.5rem 2rem;

  }

}

.m-productLine-col2-md3__item {

  width: calc(50% - 0.75rem);

}

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

  .m-productLine-col2-md3__item {

    width: calc(33.3333% - 1.3333333333rem);

  }

}



/* =============================================================

    Page

============================================================= */

.p-page-home {

  padding-bottom: 5.5rem;

}

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

  .p-page-home {

    padding-bottom: 10.5rem;

  }

}



/**

 * #p-homeSection

 */

.p-homeSection {

  display: block;

  padding-top: 5rem;

}

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

  .p-homeSection {

    padding-top: 9rem;

  }

}

.p-homeSection--bgOrange {

  margin-top: 5rem;

  padding-top: 3rem;

  padding-bottom: 4rem;

  background: #f5e3b5;

}

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

  .p-homeSection--bgOrange {

    margin-top: 9rem;

    padding-top: 5rem;

    padding-bottom: 5rem;

  }

}

.p-homeSection__title {

  display: block;

  margin-bottom: 2rem;

  font-family: var(--font-en);

  font-size: 2rem;

  text-align: center;

}

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

  .p-homeSection__title {

    font-size: 3rem;

  }

}



/**

 * #p-homeContentsUnderBtn

 */

.p-homeContentsUnderBtn {

  display: block;

  margin-top: 2.5rem;

  text-align: center;

}

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

  .p-homeContentsUnderBtn {

    margin-top: 4.5rem;

  }

}



.p-homeViewMoreBtn {

  display: inline-block;

  padding: 0 1.45rem 0.6rem;

  border-bottom: 1px solid #575757;

  font-size: 1.4rem;

}

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

  .p-homeViewMoreBtn {

    transition: opacity 0.3s ease;

  }

  .p-homeViewMoreBtn:hover {

    opacity: var(--hover-opacity);

  }

}



/**

 * #p-homeNewsList

 */

.p-homeNewsList {

  display: block;

  width: 100%;

  border-top: 1px solid var(--color-gray);

}

.p-homeNewsList__item {

  display: block;

}

.p-homeNewsList-body {

  display: block;

  padding: 2.4rem 0 1.9rem;

  border-bottom: 1px solid var(--color-gray);

}

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

  .p-homeNewsList-body {

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    padding: 3rem 2rem 2.45rem;

  }

}

.p-homeNewsList-body__time {

  display: block;

  margin-bottom: 1rem;

  font-size: 1.4rem;

  font-weight: 600;

}

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

  .p-homeNewsList-body__time {

    width: 17rem;

    margin-bottom: 0;

    white-space: nowrap;

  }

}

.p-homeNewsList-body__title {

  display: block;

  font-size: 1.4rem;

}

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

  .p-homeNewsList-body__title {

    max-width: calc(100% - 17rem);

  }

}

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

  .p-homeNewsList-body--link {

    transition: opacity 0.3s ease;

  }

  .p-homeNewsList-body--link:hover {

    opacity: var(--hover-opacity);

  }

}

/* --- 商品ランキング：レスポンシブ対応 --- */



/* 【1】スマホ時（768px未満）：1列2個にする */

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

  .m-productLineHome-col2-md3 {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 1.6rem 1.5rem !important; /* スマホ用の標準的な隙間 */

  }



  .m-productLineHome-col2-md3__item {

    width: calc(50% - 0.75rem) !important; /* 2列にする計算式 */

    flex: 0 0 calc(50% - 0.75rem) !important;

  }

}



/* 【2】PC・タブレット時（768px以上）：1列3個 ＆ 80%サイズ */

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

  .m-productLineHome-col2-md3 {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 2.5rem 2rem !important;

    justify-content: center !important; /* 中央寄せ */

  }



  .m-productLineHome-col2-md3__item {

    /* 3列(33.3%)の80%サイズ */

    width: calc((33.3333% - 1.3333333333rem) * 0.8) !important;

    flex: 0 0 calc((33.3333% - 1.3333333333rem) * 0.8) !important;

    margin-bottom: 30px !important;

  }

}
/* ===================================
   PC表示のみ：商品ラインナップ 画像・余白調整
   =================================== */
@media (min-width: 1024px) {

  /* カード間の縦余白のみ調整（横はそのまま） */
  .m-productLineHome-col2-md3 {
    gap: 16px 24px;
  }

  /* 商品カード自体に左右の内側余白 */
  .m-productLineHome-col2-md3__item .c-product {
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* 画像エリア下の余白を詰める */
  .m-productLineHome-col2-md3__item .c-product-head {
    padding: 0;
    margin-bottom: 8px;
  }

}
.m-productLineHome-col2-md3__item .c-product-head__picture {
  width: 70% !important;
  margin: 0 auto !important;
  display: block !important;
}