/**************************************
homeContents
**************************************/
#homeContents{
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}

#homeContents .sectionTTL:first-letter{
  font-size: 3rem;
  color: #AA4E32;
}

/**************************************
mainVisual
**************************************/
#mainVisual{
	display: block;
	width: 100%;
  padding: 0 0 1.8rem;
  overflow: hidden;
  position: relative;
}

.mvSlider{
	width: 100%;
  margin: 0 auto;
}

.mvSlider > .sliderWrapper{
  height: 100%;
	width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.mvSlider > .sliderWrapper > .slider{
	display: block;
	width: 100%;
	position: relative;
  transition: opacity .4s;
  opacity: .4;
}


.mvSlider > .sliderWrapper > .slider:nth-of-type(1),
.mvSlider > .sliderWrapper > .slider.swiper-slide-active{opacity: 1;}

.mvSlider > .sliderWrapper > .slider > .outer{
  display: block;
  overflow: hidden;
  position: relative;
}
.mvSlider > .sliderWrapper > .slider > a{
  display: block;
  text-decoration: none;
}


.mvSlider > .sliderWrapper > .slider picture{
	display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mvSlider > .sliderWrapper > .slider img{
	display: block;
	width: 100%;
  height: 100%;
  object-fit: cover;
}


#mainVisual .control{display: none;}

#mainVisual .control > .next,
#mainVisual .control > .prev{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 5rem;
	height: 5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
	position: absolute;
	top: calc(50% - 2.5rem - 2.5rem);
	z-index: 3;
	cursor: pointer;
  transition: opacity 0.3s ease,background 0.3s ease;
}
#mainVisual .control > .next{right: calc(50% - 24.5rem - 5rem); padding-left: 0.2rem;}
#mainVisual .control > .prev{left: calc(50% - 24.5rem - 5rem); padding-right: 0.2rem;} 

#mainVisual .control > .next > img,
#mainVisual .control > .prev > img{display: block; width: 0.9rem; height: auto;}


/*
#mainVisualPC .control > .next.swiper-button-disabled,
#mainVisualPC .control > .prev.swiper-button-disabled{background: var(--disableColor); opacity: .8; cursor: inherit;}
*/


#mainVisual ul.sliderPager{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

#mainVisual ul.sliderPager > li{
  display: block;
  width: 3rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: rgba(149,125,76,.2);
  transition: width 0.3s ease,background 0.3s ease;
  cursor: pointer;
}

#mainVisual ul.sliderPager > li.swiper-pagination-bullet-active{
  width: 6rem;
  background: rgba(149,125,76,1);
  pointer-events: none;
}

/**************************************
newsPickUp
**************************************/
.newsPickUp{
  display: block;
  width: 100%;
  margin: 2.5rem auto 0; 
  padding: 0 var(--contentsPadding);
}

.newsPickUp > a,
.newsPickUp > span{
  display: block;
  padding: 1.5rem 0 1.5rem;
  background: #AA4E32;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/**************************************
homeItemSection
**************************************/
.homeItemSection{
  display: block;
  width: 100%;
  padding: 5rem 0 0;
  margin: 0 auto;
  position: relative;
}

.newsPickUp + .homeItemSection{padding-top: 3.5rem;}

.homeItemSection .homeItemsTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 1.5rem;
  padding: 0 var(--contentsPadding);
  margin-bottom: 2rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.homeItemSection .homeItemsTTL > figure{
  display: block;
  width: 6rem;
}

.homeItemSection .homeItemsTTL > figure > img{
  display: block;
  width: 100%;
  height: auto;
}

/*homeItemList ***/
.homeItemList{
  display: block;
  width: 100%;
  padding-bottom: 4rem;
  background: url("../img/common/bg_loading_sp.jpg") center bottom repeat;
  background-size: 100% auto;
  position: relative;
  z-index: 1;
}
.homeItemList::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(34.5rem / 2);
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.homeItemList + .homeItemList,
.btnMore + .homeItemList{padding-top: 5rem;}

.homeItemList + .homeItemList::after,
.btnMore + .homeItemList::after{height: calc(34.5rem / 2 + 5rem);}


.homeItemList > .btnMore{
  display: block;
  width: 28rem;
  margin: 3.5rem auto 0;
}


.homeItemList > .btnMore > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 5rem;
  background-color: #FFFFFF;
  border: 1px solid var(--btnColor);
  border-radius: 25px;
  padding: 0.2em 2rem 0 2rem;
	font-family:  var(--contentsOtherFont);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--btnColor);
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}



.homeItemList .pickUp{
  display: block;
  width: 100%;
  padding: 0 var(--contentsPadding);
  margin-bottom: 3rem;
}

.homeItemList .pickUp > a{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
}

.homeItemList .pickUp > a::after{
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
  opacity: .3;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.homeItemList .pickUp > a > figure{
  display: block;
  width: 100%;
  height: 100%;
}

.homeItemList .pickUp > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.homeItemList .pickUp > a:hover > figure > img{ transform: scale(1.1);}

.homeItemList .pickUp > a > .text{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2rem;
  position: absolute;
  bottom: 2rem;
  left: 0;
  z-index: 2;
}

.homeItemList .pickUp > a > .text > p{
  display: block;
  width: calc(100% - 3.8rem);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}
/*fuku_h add*/
@media (max-width : 380px) {
  .homeItemList .pickUp > a > .text > p{
    font-size: 2.4rem;
  }
}
.homeItemList .pickUp > a > .text > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  transition: opacity 0.3s ease,background 0.3s ease;
}


.homeItemList .pickUp > a > .text > span > img{display: block; width: 0.7rem; height: auto;}

/*itemList**/
.homeItemList > .itemListBox{
  display: block;
  width: 100%;
  padding: 0 0.75rem 2.3rem;
  position: relative;
  overflow: hidden;
}

.homeItemList > .itemListBox > .ttl{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0.75rem 0;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
  font-weight: 700;
}

.homeItemList > .itemListBox > .ttl > em{
  font-size: 3rem;
  color: #AA4E32;
  margin-bottom: -0.1rem;
}

.homeItemList > .itemListBox > .ttl > span{
  display: block;
  padding-bottom: 0.1rem;
  padding-left: 1rem;
  font-size: 1.3rem;
  color: #C9C9C9;
}

.homeItemList > .itemListBox  > .itemList{
  display: block;
  width: 100%;
}


.homeItemList > .itemListBox  > .itemList > .sliderWrapper{
  flex-wrap: nowrap;
  height: auto;
}

.homeItemList > .itemListBox  > .itemList .slider{
  width: 50%;
  padding: 0 0.75rem;
  margin-right: 0;
}

.homeItemList.mentai > .itemListBox  > .itemList .slider .rank{
  display: none;
}

.homeItemList > .itemListBox  > .itemList > ul > li:nth-of-type(n + 3){margin-top: 0;}


.homeItemList > .itemListBox  > .itemList > ul.control{
  display: none;
}

.homeItemList > .itemListBox  > .itemList > ul.sliderPager{
  display: none;
}


.homeItemList > .itemListBox  > .itemList > .sliderScrollbar{
  width: 25rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background: rgba(149,125,76,.2);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.homeItemList > .itemListBox  > .itemList > .sliderScrollbar .swiper-scrollbar-drag{
  background: rgba(149,125,76,1);
  cursor: pointer;
}



/**************************************
homeCategoryList
**************************************/
#homeContents .homeCategoryList{
  display: block;
  width: 100%;
  margin: 5rem auto 0;
  padding: 5rem var(--contentsPadding) 4.6rem;
  background: #FAFAFA;
}


#homeContents .homeCategoryList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2rem 1.5rem;
  width: 100%;
  margin: 0 auto;
}

#homeContents .homeCategoryList > ul > li{
  display: block;
  width: calc((100% - 3rem) / 3);
}

#homeContents .homeCategoryList > ul > li:nth-of-type(1),
#homeContents .homeCategoryList > ul > li:nth-of-type(2){display: none;}

#homeContents .homeCategoryList > ul > li > a{
  display: block;
  height: 100%;
}

#homeContents .homeCategoryList > ul > li > a > figure{
  display: block;
  width: 100%;
  border: 1px solid #E3E3E3;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto 1.5rem;
}
#homeContents .homeCategoryList > ul > li > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#homeContents .homeCategoryList > ul > li > a > span{
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}


/**************************************
homeRecommendItems
**************************************/
#homeContents .homeRecommendItems{
  display: block;
  width: 100%;
  padding: 6rem 0.75rem 6rem;
  overflow: hidden;
}

#homeContents .homeRecommendItems .sectionTTL,
#homeContents .homeRecommendItems .itemList{
  margin-left: auto;
  margin-right: auto;
}

#homeContents .homeRecommendItems .itemList > ul > li .rank{display: none;}

/**************************************
homeReviewBox
**************************************/
#homeContents #homeReviewBox{
  display: block;
  width: 100%;
  padding: 5rem var(--contentsPadding) 5rem;
  background: #F6F4F0;
}

#homeContents #homeReviewBox > .inner{
  margin: 0 auto;
}


/**************************************
homeFeatureList
**************************************/
#homeContents .homeFeatureList{
  display: block;
  width: 100%;
  padding: 6rem var(--contentsPadding) 6rem;
  margin: 0 auto;
}

#homeContents .homeFeatureList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3rem 1.5rem;
  width: 100%;
  margin: 0 auto;
}

#homeContents .homeFeatureList > ul > li{
  display: block;
  width: calc((100% - 1.5rem) / 2);
}

#homeContents .homeFeatureList > ul > li > a{
  display: block;
}

#homeContents .homeFeatureList > ul > li > a > figure{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto 0.8rem;
}

#homeContents .homeFeatureList > ul > li > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#homeContents .homeFeatureList > ul > li > a > time{
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--fontEN);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  font-weight: 500;
}

#homeContents .homeFeatureList > ul > li > a > span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 1.3rem;
  line-height: 1.5;
  overflow: hidden;
}

/**************************************
homeNewsSection
**************************************/
#homeContents .homeNewsSection{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 5rem var(--contentsPadding) 5rem;
  background: #F6F4F0;
}

#homeContents #homeReviewBox + .homeNewsSection{margin-top: 0.1rem;}


#homeContents .homeNewsSection > .inner{
  display: block;
  width: 100%;
}

#homeContents .homeNewsSection > .inner .sectionTTL{
  display: block;
}

#homeContents .homeNewsSection > .inner .newsList{
  display: block;
  width: 100%;
}

#homeContents .homeNewsSection .newsList > ul{
  display: block;
  width: 100%;
}


#homeContents .homeNewsSection .newsList > ul > li{
  display: block;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background: #FFFFFF;
  transition: opacity .3s ease;
}

#homeContents .homeNewsSection .newsList > ul > li.link{
  cursor: pointer;
}

#homeContents .homeNewsSection .newsList > ul > li + li{margin-top: 1rem;}

#homeContents .homeNewsSection .newsList > ul > li:nth-of-type(n + 4){display: none;}

#homeContents .homeNewsSection .newsList > ul > li .update{
  display: block;
  margin-bottom: 0.65rem;
  font-family: var(--fontEN);
  text-align: left;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3125;
  letter-spacing: 0.05em;
}

#homeContents .homeNewsSection .newsList > ul > li dl.detail{
  display: block;
}

#homeContents .homeNewsSection .newsList > ul > li dl.detail > dt{
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  /*
  white-space: nowrap;
  text-overflow: ellipsis;
  */
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0;
}

#homeContents .homeNewsSection .newsList > ul > li dl.detail > dd{display: none;}


#homeContents .homeNewsSection .newsList > ul > li > a,
#homeContents .homeNewsSection .newsList > ul > li > span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.4rem;
  line-height: 1.5;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
}

#homeContents .homeNewsSection .btnBorder{
  display: block;
  width: 28rem;
  margin: 2.6rem auto 0;
}

/**************************************
homeBrandList
**************************************/
#homeContents .homeBrandList{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 8rem var(--contentsPadding) 8rem;
  background: #E8F0F5;
}


#homeContents .homeBrandList .sectionTTL{
  max-width: var(--contentsMiddleWidth);
  margin-left: auto;
  margin-right: auto;
}


#homeContents .homeBrandList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1.8rem 1.5rem;
  width: 100%;
  max-width: var(--contentsMiddleWidth);
  margin: 0 auto;
}

#homeContents .homeBrandList > ul > li{
  display: block;
  width: calc((100% - 1.5rem * 6) / 7);
}

#homeContents .homeBrandList > ul > li > a{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0 2rem;
  background: #FFFFFF;
  border-radius: 15px;
}

#homeContents .homeBrandList > ul > li > a > figure{
  display: block;
  width: 100%;
  height: 8rem;
  margin: 0 auto;
  overflow: hidden;
}
#homeContents .homeBrandList > ul > li > a > figure > img{display: block; width: auto; height: 100%;  margin: 0 auto;}


#homeContents .homeBrandList > ul > li:not(.brandMore) > a > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: calc(100% - 8rem);
  padding: 0 1.5rem 0;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.625;
  text-align: center;
  color: #838D98;
}


#homeContents .homeBrandList > ul > li.brandMore{
  padding: 0;
}

#homeContents .homeBrandList > ul > li.brandMore > a,
#homeContents .homeBrandList > ul > li.brandMore > .outer{
  background: #5C8FB9;
  color: #FFFFFF;
  padding: 0;
}

#homeContents .homeBrandList > ul > li.brandMore > a > em,
#homeContents .homeBrandList > ul > li.brandMore > .outer > em{
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 1.4rem;
  position: relative;
}

#homeContents .homeBrandList > ul > li.brandMore > a > em::before,
#homeContents .homeBrandList > ul > li.brandMore > .outer > em::before,
#homeContents .homeBrandList > ul > li.brandMore > a > em::after,
#homeContents .homeBrandList > ul > li.brandMore > .outer > em::after{
  content: '';
  display: block;
  height: 2px;
  width: 2rem;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
}

#homeContents .homeBrandList > ul > li.brandMore > a > em::after,
#homeContents .homeBrandList > ul > li.brandMore > .outer > em::after{
  transform: rotate(90deg);
}


#homeContents .homeBrandList > ul > li.brandMore > a > span,
#homeContents .homeBrandList > ul > li.brandMore > .outer > span{
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.392857142857143;
  font-weight: 600;
  color: #FFFFFF;
}


/**************************************
firstLoading
**************************************/
#firstLoading{
  display: block;
  width: 100vw;
  height: 100vh;
  filter: blur(0);
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

#firstLoading.in{
  background: url("../img/common/bg_loading_sp.jpg") center center repeat;
}


#firstLoading.hide{
  opacity: 0;
  filter: blur(40px);
  transition: opacity 2s ease, filter 2s ease;
  pointer-events: none;
}

#firstLoading.none{
  display: none;
  opacity: 0;
  pointer-events: none;
}


#firstLoading > .inner{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#firstLoading.in > .inner{
  opacity: 1;
}

#firstLoading > .inner > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 6rem;
}

#firstLoading > .inner > ul > li{
  display: block;
  width: 10rem;
}

#firstLoading > .inner > ul > li img{display: block; width: 100%; height: auto;}

/**************************************
submv
**************************************/
.sub_mv_area {
    margin: 3rem auto;
    padding: 0 1rem;
}

.sub_mv_box {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.sub_mv_box figure {
    width: calc(50% - 1rem);
}

.sub_mv_box figure img {
    max-width: 100%;
}