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

/**************************************
regular banner
**************************************/
#regularBanner.regularBanner {
  position: relative;
  padding-bottom: 3.5rem;
  overflow: hidden;
}

#regularBanner.regularBanner .regularBanner__horizontal{
  display: flex;
  flex-direction: column;
}

#regularBanner.regularBanner .regularBanner__horizontal.regularBanner__horizontal--switch{
  flex-direction: column-reverse;
}

#regularBanner.regularBanner .regularBanner__horizontal.regularBanner__horizontal--switch-sp{
  flex-direction: column-reverse;
}

#regularBanner.regularBanner .regularBanner__horizontal picture{
  width: 100%;
}

#regularBanner.regularBanner .regularBanner__horizontal > *{
  width: 100%;
}

#regularBanner.regularBanner .regularBanner__horizontal:nth-child(n + 2){
  margin-top: 3rem;
}

#regularBanner.regularBanner img{
  width: 100%;
  height: auto;
}

#regularBanner.regularBanner .control{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 7rem;
  position: absolute;
  right: var(--contentsPadding);
  bottom: 0;
}

#regularBanner.regularBanner .control > .next,
#regularBanner.regularBanner .control > .prev{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 3rem;
	height: 3rem;
  border: 2px solid #EDEDED;
  border-radius: 50%;
  background: #FFFFFF;
	cursor: pointer;
  transition: opacity 0.3s ease,background 0.3s ease;
}

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




/**************************************
mainVisual
**************************************/
#mainVisual{
	display: block;
	width: 100%;
  padding: 0 0;
  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%;
  padding: 0 var(--contentsPadding);
  overflow: hidden;
	position: relative;
}


#mvSlider > .sliderWrapper > .slider::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.7);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  transition: opacity 0.3s ease;
}
#mvSlider > .sliderWrapper > .slider.swiper-slide-active::before{
  opacity: 0;
  pointer-events: none;
}


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


#mvSlider > .sliderWrapper > .slider picture,
#mvSlider > .sliderWrapper > .slider img{
	display: block;
	width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}


#mainVisual .control{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 7rem;
  position: absolute;
  right: var(--contentsPadding);
  bottom: 1.5rem;
}

#mainVisual .control > .next,
#mainVisual .control > .prev{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 3rem;
	height: 3rem;
  border: 2px solid #EDEDED;
  border-radius: 50%;
  background: #FFFFFF;
	cursor: pointer;
  transition: opacity 0.3s ease,background 0.3s ease;
}

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



/*
#mainVisual .control > .next.swiper-button-disabled,
#mainVisual .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;
  width: 100%;
  padding: 2rem 11rem 2rem;
  margin: 0 auto;
}

#mainVisual ul.sliderPager > li{
  display: block;
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  cursor: pointer;
}


#mainVisual ul.sliderPager > li::before{
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #F2F3EF;
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
}


#mainVisual ul.sliderPager > li.swiper-pagination-bullet svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(-1, 1) rotate(-90deg);
}

#mainVisual ul.sliderPager > li.swiper-pagination-bullet circle {
  opacity: 1;
  fill: transparent;
  stroke: rgb(124,124,124);
  stroke-width: 2;
  stroke-dasharray: 0 43.96;
}

/*待機時間*/
:root {
  --delayTiem: 5s;
}

#mainVisual ul.sliderPager > li.swiper-pagination-bullet-active::before{background: #7C7C7C;}

#mainVisual ul.sliderPager > li.swiper-pagination-bullet-active circle {
  opacity: 1;
  animation: pagerCircle var(--delayTiem) linear forwards;
}

@keyframes pagerCircle {
  0%{ stroke-dasharray: 0 43.96;}
  100%{ stroke-dasharray: 43.96 43.96;}
}


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

#homeContents .homeProdcutList .leftCategoryNav{
  display: block;
  width: 100%;
  margin-top: 6rem;
}

#homeContents .homeProdcutList .leftCategoryNav .btnNext{
  display: block;
  max-width: 28rem;
  margin: 2rem auto 0;
}

#homeContents .homeProdcutList .list{
  width: 100%;
}


#homeContents .homeProdcutList .homePickUpItems .sectionTTL > span:nth-child(1){
  background: #DB2320;
}

#homeContents .homeProdcutList .homePickUpItems + .homeRankingItems{padding-top: 6rem;}

#homeContents .homeProdcutList .homeRankingItems .sectionTTL > span:nth-child(1){
  background: #7C4E20;
}

/**/
#homeContents .homeProdcutList .homePickUpItems .itemList > ul > li:nth-of-type(n + 5),
#homeContents .homeProdcutList .homeRankingItems .itemList > ul > li:nth-of-type(n + 4){ display: none;}


#homeContents .homeProdcutList .moreItem{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 28rem;
  height: 5rem;
  margin: 2rem auto 0;
  background: var(--btnColor);
  border-radius: 10px;
  padding: 0 4.4rem 0 4.4rem;
  font-family: var(--contentsOtherFont);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
}

.bid-care #homeContents .homeProdcutList .moreItem {
  background: #68C191;
}

#homeContents .homeProdcutList .moreItem > span{
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  right: 2rem;
  top: calc(50% - 0.7rem);
}

#homeContents .homeProdcutList .moreItem > span::before,
#homeContents .homeProdcutList .moreItem > span::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
}

#homeContents .homeProdcutList .moreItem > span::after{
  transform: rotate(90deg);
  transition: transform 0.3s ease,opacity 0.3s ease;
}


/**************************************
homeRgularSeries
**************************************/
#homeContents .homeRgularSeries{
  display: block;
  width: 100%;
  padding: 3.4rem var(--contentsPadding) 4rem;
  margin: 6rem auto 0;
  border-radius: 50px 50px 0 0;
  background: #F2EEEA;
}

#homeContents .homeRgularSeries .sectionTTL{max-width: var(--contentsMaxWidth); margin: 0 auto 3rem;}
#homeContents .homeRgularSeries .sectionTTL > span:nth-child(1){ background: #E89111;}

#homeContents .homeRgularSeries .rgularSeriesList{
  margin: 0 auto;
}


#homeContents .homeRgularSeries .btnMoreOpen{
  display: block;
  width: 28rem;
  padding-top: 2rem;
  margin: 0 auto;
}

#homeContents .homeRgularSeries .btnMoreOpen > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 28rem;
  height: 5rem;
  margin: 2rem auto 0;
  background: var(--btnColor);
  border-radius: 10px;
  padding: 0 4.4rem 0 4.4rem;
  font-family: var(--contentsOtherFont);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}

.bid-care #homeContents .homeRgularSeries .btnMoreOpen > span {
  background: #68C191;
}

#homeContents .homeRgularSeries .btnMoreOpen > span::before{content: 'もっと見る';}
#homeContents .homeRgularSeries .btnMoreOpen > span > em{
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  right: 2rem;
  top: calc(50% - 0.7rem);
}

#homeContents .homeRgularSeries .btnMoreOpen > span > em::before,
#homeContents .homeRgularSeries .btnMoreOpen > span > em::after{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  transition: opacity 0.3s ease,transform 0.3s ease;
}

#homeContents .homeRgularSeries .rgularSeriesList > ul.all + .btnMoreOpen{display: none;}
#homeContents .homeRgularSeries .btnMoreOpen > span > em::after{transform: rotate(90deg);}
#homeContents .homeRgularSeries .rgularSeriesList > ul.all + .btnMoreOpen > span::before{content: '閉じる';}
#homeContents .homeRgularSeries .rgularSeriesList > ul.all + .btnMoreOpen > span > em::after{transform: rotate(-90deg); opacity: 0;}




#homeContents .homeRgularSeries .rgularSeriesList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#homeContents .homeRgularSeries .rgularSeriesList > ul > li{
  display: block;
  width: calc(50% - 0.25rem);
  margin-right: 0.5rem;
}

/*
#homeContents .homeRgularSeries .rgularSeriesList > ul:not(.all) > li:nth-of-type(n + 7){display: none;}
*/
#homeContents .homeRgularSeries .rgularSeriesList > ul > li:nth-of-type(n + 7){display: none;}


#homeContents .homeRgularSeries .rgularSeriesList > ul > li:nth-of-type(2n){margin-right: 0;}
#homeContents .homeRgularSeries .rgularSeriesList > ul > li:nth-of-type(n + 3){margin-top: 1rem;}

#homeContents .homeRgularSeries .rgularSeriesList > ul > li > a{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 1rem;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
}

.bid-main #homeContents .homeRgularSeries .rgularSeriesList > ul > li > a > figure{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 0;
  width: 100%;
}

.bid-main #homeContents .homeRgularSeries .rgularSeriesList > ul > li > a > figure > img:nth-of-type(1){
  display: block;
  width: 50%;
  height: auto;
}

.bid-main #homeContents .homeRgularSeries .rgularSeriesList > ul > li > a > figure > img:nth-of-type(2){
  display: block;
  width: 50%;
  height: auto;
}

.bid-care #homeContents .homeRgularSeries .rgularSeriesList > ul > li > a > figure > img {
  width: 100%;
}

#homeContents .homeRgularSeries .rgularSeriesList > ul > li > a > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 9.6rem);
  padding: 0.6rem 2rem 0.6rem;
  background: #D0C6BD;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}


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

#homeContents .homeFeature .sectionTTL > span:nth-child(1){ background: #1DABCF;}


/*upper(BodyFeaturePageList)**/
#homeContents	.homeFeature .feature-page-parts-list .feature-page-parts-items {
	display: flex;
	justify-content: center;
  flex-wrap: wrap;
	gap: calc(5 * (100vw / 375));
  row-gap: calc(35 * (100vw / 375));
}

#homeContents	.homeFeature .feature-page-parts-list .feature-page-parts-item {
	width: calc((100% - calc(5 * (100vw / 375))) / 2);
}

#homeContents	.homeFeature .feature-page-parts-list .feature-page-parts-item:nth-of-type(1) {
  width: calc(260 * (100vw / 375));
}

#homeContents	.homeFeature .feature-page-parts-list ul .feature-page-parts-thumb a {
	display: block;
}

#homeContents	.homeFeature .feature-page-parts-list ul .feature-page-parts-thumb img {
	width: 100%;
}

#homeContents	.homeFeature .feature-page-parts-list ul .feature-page-parts-title {
	margin-top: calc(10 * (100vw / 375));
}

#homeContents	.homeFeature .feature-page-parts-list ul .feature-page-parts-title p {
	font-size: calc(13 * (100vw / 375));
	line-height: 1.7;
  letter-spacing: .1em;
}

#homeContents	.homeFeature .feature-page-parts-list .feature-page-parts-viewmore.btnNext {
	max-width: 28rem;
  padding-top: calc(20 * (100vw / 375));
  margin: 0 auto;
}


/*lower**/
#homeContents .featureList_lower{
  display: block;
  width: 100%;
  max-width: var(--contentsMiddleWidth);
  margin: calc(60 * (100vw / 375)) auto 0;
}

#homeContents .featureList_lower > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#homeContents .featureList_lower > ul > li{
  display: block;
  width: calc(50% - 0.25rem);
  margin-right: 0.5rem;
}

#homeContents .featureList_lower > ul > li:nth-of-type(1){
  width: 100%;
  margin-right: 0;
}

#homeContents .featureList_lower > ul > li:nth-of-type(2n + 1){margin-right: 0;}
#homeContents .featureList_lower > ul > li:nth-of-type(n + 2){margin-top: 3rem;}

#homeContents .featureList_lower > ul > li:nth-of-type(1) > a{
  display: block;
  width: calc(50% - 0.25rem);
  margin: 0 auto;
}

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

#homeContents .featureList_lower > ul > li > a > figure{
  display: block;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}

#homeContents .featureList_lower > ul > li > a > figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}

#homeContents .featureList_lower > ul > li > a > span{
  display: block;
  margin-top: 1rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: left;
}



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

#homeContents .homeNewsSection .sectionTTL > span:nth-child(1){ background: #D0DD8A;}


#homeContents .homeNewsSection .newsList{
  display: block;
  max-width: var(--contentsMiddleWidth);
  margin: 0 auto;
}

#homeContents .homeNewsSection .newsList > ul{display: block;}
#homeContents .homeNewsSection .newsList > ul > li{
  display: block;
  padding: 2rem 2rem;
  background: #F2F3EF;
  border-radius: 10px;
  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;
  width: 100%;
  padding: 0;
  margin-bottom: 1rem;
  text-align: left;
  font-family: var(--contentsOtherFont);
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #2C2C2C;
}

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

#homeContents .homeNewsSection .newsList > ul > li > dl.detail > dt{
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: left;
}

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

#homeContents .homeNewsSection .newsList > .btnNext{
  max-width: 28rem;
  padding-top: 3rem;
  margin: 0 auto;
}

#homeContents .homeNewsSection .newsList:nth-of-type(n + 2){
  margin-top: 4rem;
}

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


#homeContents .homeGuideBanner > ul:not(.column4){
  display: block;
  margin: 5rem auto 0;
}

#homeContents .homeGuideBanner > ul:not(.column4) > li{
  display: block;
  width: 100%;
}
#homeContents .homeGuideBanner > ul:not(.column4) > li + li{margin-top: 1rem;}

#homeContents .homeGuideBanner > ul:not(.column4) > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

#homeContents .homeGuideBanner > ul:not(.column4) > li.faq > a{
  background: #CDC66B;
}
#homeContents .homeGuideBanner > ul:not(.column4) > li.handling > a{
  background: #4A8FAD;
}


#homeContents .homeGuideBanner > ul:not(.column4) > li > a > figure{
  display: block;
  width: 45.79710144927536%;
  height: 100%;
  min-height: 11.5rem;
  overflow: hidden;
  position: relative;
}
#homeContents .homeGuideBanner > ul:not(.column4) > li > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}

#homeContents .homeGuideBanner > ul:not(.column4) > li > a > .text{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.4rem;
  width: 54.20289855072464%;
  font-family: var(--contentsTitleFont);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #FFFFFF;
}

#homeContents .homeGuideBanner > ul:not(.column4) > li > a > .text > span{
  display: block;
  font-family: var(--contentsOtherFont);
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}


#homeContents .homeGuideBanner > ul.column4{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0 auto;
}

#homeContents .homeGuideBanner > ul.column4 > li{
  display: block;
  width: calc(50% - 0.25rem);
  margin-right: 0.5rem;
}
#homeContents .homeGuideBanner > ul.column4 > li:nth-of-type(2n){margin-right: 0;}
#homeContents .homeGuideBanner > ul.column4 > li:nth-of-type(n + 3){margin-top: 0.5rem;}

#homeContents .homeGuideBanner > ul.column4 > li > a{display: block;}
#homeContents .homeGuideBanner > ul.column4 > li > a > img{display: block; width: 100%; height: auto;}



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

#homeContents .homeAboutMOGU > .inner{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  border-radius: 50px;
  background: #EAECF2;
  overflow: hidden;
}


#homeContents .homeAboutMOGU > .inner > .text{
  order: 2;
  display: block;
  width: 100%;
  padding: 4rem 3rem;
}

#homeContents .homeAboutMOGU > .inner > .text > h2{
  display: block;
  margin-bottom: 1.5rem;
}
#homeContents .homeAboutMOGU > .inner > .text > h2 > img{
  display: block;
  width: 17rem;
  margin: 0 auto;
}
#homeContents .homeAboutMOGU > .inner > .text > h2 > span{
  display: block;
  padding-top: 2rem;
  font-family: var(--contentsTitleFont);
  font-size: 1.7rem;
  font-weight: 700;
  color: #7A8EC2;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.7;  
}

#homeContents .homeAboutMOGU > .inner > .text > p{
  display: block;
  width: 100%;
  max-width: 49rem;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 2;
}

#homeContents .homeAboutMOGU > .inner > .text > .btnNext{
  max-width: 28rem;
  margin: 2rem auto 0;
}
#homeContents .homeAboutMOGU > .inner > .text > .btnNext > a{
  background: #FFFFFF;
  color: #2C2C2C;
  font-size: 1.4rem;
}

#homeContents .homeAboutMOGU > .inner > .text > .btnNext > a::after{
  background: #2C2C2C;
}


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

#homeContents .homeAboutMOGU > .inner > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**************************************
homeBottomImage
**************************************/
#homeContents #homeBottomImage{
  display: block;
  width: 100%;
  margin-top: 4rem;
  overflow: hidden;
}
#homeContents #homeBottomImage > ul.sliderWrapper{transition-timing-function: linear;}
#homeContents #homeBottomImage > ul > li.slider{width: auto;}

#homeContents #homeBottomImage > ul > li > img{display: block; height: 6rem;}