@charset "UTF-8";

.l-container-wrap__head{order: 1;}
.l-container-wrap__body{padding-top: 0;}

/**************************************
customizeFeaturePage
**************************************/
#customizeFeaturePage{
  padding-bottom: 9rem;
  position: relative;
  z-index: 1;
}

#customizeFeaturePage::after{
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: url("../../img/common/bg_sp.png") left top no-repeat;
  background-size: 100% 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

#conceptSection{
  position: relative;
  z-index: 1;
}
#conceptSection::after{
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: url("../../img/common/bg_sp.png") left top no-repeat;
  background-size: 100% 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

#customizeFeaturePage #conceptSection::after{display: none;}

#footer{position: relative; z-index: 1;}

.backFeatureListBtn{
  display: block;
  width: 100%;
  margin-top: 5rem;
  text-align: center;
}

.backFeatureListBtn > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.29rem;
  padding: 0 0.45rem 0.25rem;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: #6C5E51;
  transition: opacity .3s ease;
  position: relative;
}

.backFeatureListBtn > a::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #6C5E51;
  opacity: 1;
  position: absolute;
  right: 0;
  bottom: 0;
}


.backFeatureListBtn > a::before{
  content: '';
  display: block;
  width: 2.058rem;
  height: 0.62rem;
  background: url("../../img/features/icon_back.svg") center center no-repeat;
  background-size: 100% auto;
}

/**************************************
featureProductList
**************************************/
#customizeFeaturePage .featureProducts{
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

#customizeFeaturePage .m-featureProductList{
  width: 100%;
  padding: 4.6rem 1.8rem 5rem 1.7rem;
  background: #FFFFFF;
  border-radius: 30px;
  margin: 0 auto;
}

#customizeFeaturePage .featureProductListTTL{
  display: block;
  margin-bottom: 3rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.125em;
  color: #A5A5A5;
  text-align: center;
  line-height: 1;
}
#customizeFeaturePage .featureProductListTTL > span{
  display: block;
  margin-bottom: 1.4rem;
  font-size: 3rem;
  font-weight: 500;
  color: #626262;
}

#customizeFeaturePage .customFeatureProductList{
  width: 100%;
  margin: 0 auto;
}


/**************************************
mvSlider
**************************************/
#conceptMV{
	display: block;
	width: 100%;
  padding-bottom: 2.4rem;
  overflow: hidden;
  position: relative;
}

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

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

#conceptMV .mvSlider > .sliderWrapper > .slider{
	display: block;
	width: 100%;
  padding: 0;
	position: relative;
  opacity: 1;
  transition: opacity .3s ease;
}

#conceptMV .mvSlider > .sliderWrapper > .slider.swiper-slide-active{opacity: 1;}

#conceptMV .mvSlider > .sliderWrapper > .slider > .outer{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
#conceptMV .mvSlider > .sliderWrapper > .slider a{
  display: block;
  text-decoration: none;
  transition: opacity .3s ease;
}


#conceptMV .mvSlider > .sliderWrapper > .slider picture{
	display: block;
  width: 100%;
  aspect-ratio: 375 / 237;
  overflow: hidden;
}
#conceptMV .mvSlider > .sliderWrapper > .slider img{
	display: block;
	width: 100%;
  height: 100%;
  object-fit: cover;
}


#conceptMV .control{display: block;}

#conceptMV .control > .next,
#conceptMV .control > .prev{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 5rem;
	height: 18.7rem;
	position: absolute;
	top: 12rem;
	z-index: 3;
	cursor: pointer;
  transition: opacity 0.3s ease;
}
#conceptMV .control > .next{right: calc(50% - 28rem - 5rem); padding-right: 0.8rem;}
#conceptMV .control > .prev{left: calc(50% - 28rem - 5rem); padding-left: 0.8rem;}

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



#conceptMV ul.sliderPager{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 0.2rem;
  width: 100%;
  padding-right: 2rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

#conceptMV ul.sliderPager > li{
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: inherit;
  border: 1px solid #6C5E51;
  transition: background .2s ease;
  opacity: 1;
}

#conceptMV ul.sliderPager > li.swiper-pagination-bullet-active{
  background: #6C5E51;
  pointer-events: none;
}



/**************************************
conceptSection
**************************************/
#conceptSection{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 9rem;
}

#conceptSection .conceptTTLblcok{
  width: 100%;
}


#conceptSection .conceptTTLblcok > .inner{
  width: 100%;
  margin: 0 auto;
}


/*ttl*/
#conceptSection .conceptMainTTL{
  display: block;
  width: 100%;
  margin: 0 auto 3rem;
  padding: 0 1.8rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.125em;
  line-height: 1.875;
  color: #6C5E51;
  position: relative;
  z-index: 2;
}

#conceptSection .conceptMainTTL > span{
  display: block;
  margin-bottom: 0.5rem;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.095em;
}

/*MV**/
#conceptSection .conceptTTLblcok #conceptMV{
  display: block;
  width: 100%;
}


/*conceptLede**/
#conceptSection .conceptLede{
  display: block;
  width: 26.5rem;
  margin: -4.6rem auto 0 0;
  padding: 5.3rem 3.1rem;
  background: #D0BFB0;
  position: relative;
  z-index: 2;
}


#conceptSection .conceptLede > .inner{
  margin: 0;
  position: relative;
}

#conceptSection .conceptLede .conceptSubTTL{
  display: block;
  margin-bottom: 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.125em;
  line-height: 1.5;
  color: #FFFFFF;
}

#conceptSection .conceptLede .lede{
  font-size: 1.3rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.175em;
  line-height: 2.5;
  color: #FFFFFF;
}

/*textBlock**/
#conceptSection .textBlock{
  display: block;
  max-width: 34rem;
  margin: 0 auto;
}


#conceptSection .textBlock .conceptTTL{
  display: block;
  margin-bottom: 2.2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.666666666666667;
  text-align: left;
  letter-spacing: 0.125em;
  color: #6C5E51;
}

#conceptSection .textBlock .conceptTTL.borderTTL{
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #6C5E51;
}

#conceptSection .textBlock > p{
  font-size: 1.2rem;
  letter-spacing: 0.125rem;
  line-height: 2.5;
  font-weight: 500;
  color: #6C5E51;
}

#conceptSection > .textBlock > p{line-height: 1.75;}

#conceptSection .conceptTTLblcok + .textBlock{
  padding-top: 7rem;
}

#conceptSection .conceptLargeBox + .textBlock,
#conceptSection .conceptMiddleBox + .textBlock,
#conceptSection .conceptCenterBox + .textBlock{
  padding-top: 7rem;
}



/*figImgBox**/
#conceptSection .figImgBox{
  display: block;
  max-width: 35.7rem;
  margin: 0 auto 0 0;
}

#conceptSection .figImgBox + .figImgBox{padding-top: 7rem;}

#conceptSection .figImgBox > .fig{ display: block; width: 100%; margin-bottom: 3.4rem;}
#conceptSection .figImgBox > .fig > img{display: block; width: 100%; height: auto;}

#conceptSection .figImgBox.figR{margin: 0 0 0 auto;}


/*conceptLede**/
#conceptSection .conceptLargeBox{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 7rem;
  position: relative;
  overflow: hidden;
}
#conceptSection .conceptLargeBox .figImgBox .textBlock{
  margin:0;
  max-width: 30.7rem;
  box-sizing: content-box;
}
#conceptSection .conceptLargeBox .figImgBox .textBlock > p {
  font-size: 1.3rem;
  line-height: 3;
}
#conceptSection .conceptLargeBox .figImgBox:not(.figR) .textBlock{padding-left: 5rem; padding-right: 0.9rem;}
#conceptSection .conceptLargeBox .figImgBox.figR .textBlock{padding-left: 0.9rem;}


/*conceptLede**/
#conceptSection .conceptMiddleBox{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 7rem;
  position: relative;
}
#conceptSection .conceptMiddleBox .figImgBox{
  width: 100%;
  max-width: 100%;
}

#conceptSection .conceptMiddleBox .figImgBox .textBlock{max-width: 32.6rem;}

#conceptSection .conceptMiddleBox .figImgBox .fig{
  max-width: 35.7rem;
  margin: 0 auto 3.4rem 0;
}

#conceptSection .conceptMiddleBox .figImgBox.figR .fig{
  margin: 0 0 3.4rem auto;
}


#conceptSection .conceptMiddleBox .figImgBox.textBlock{max-width: 32.6rem; margin: 0 auto;}



/*conceptLede**/
#conceptSection .conceptCenterBox{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 7rem 1.8rem 0;;
  position: relative;
}

#conceptSection .conceptCenterBox .figImgBox{margin: 0 auto;}

#conceptSection .conceptCenterBox .textBlock .conceptTTL{font-size: 1.8rem; margin-bottom: 1.8rem;}



/**************************************
feutureColumnSection
**************************************/
#feutureColumnSection{
  display: block;
}


#feutureColumnSection .ttlArea{
  display: block;
  padding: 0 1.8rem;
  margin-bottom: 6rem;
}

#feutureColumnSection .feutureColumnTTL{
  display: block;
  margin-bottom: 1.9rem;
  font-size: 2.6rem;
  letter-spacing: 0.125em;
  line-height: 1.5;
  text-align: center;
  color: #6C5E51;
  font-weight: 700;
}

#feutureColumnSection .lede{
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.125em;
  line-height: 1.75;
  color: #6C5E51;
}

/* point ***/
#feutureColumnSection .feutureItemPoint{
  display: block;
  padding: 0 1.8rem;
  margin-bottom: 6rem;
}

#feutureColumnSection .feutureItemPoint > ul{
  display: block;
  width: 100%;
}

#feutureColumnSection .feutureItemPoint > ul > li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.1rem;
  width: 100%;
}
#feutureColumnSection .feutureItemPoint > ul > li + li{margin-top: 2.2rem;}

#feutureColumnSection .feutureItemPoint > ul > li > figure{
  display: block;
  width: 13rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

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

#feutureColumnSection .feutureItemPoint > ul > li > dl{
  display: block;
  width: calc(100% - 13rem - 1.1rem);
  text-align: center;
}

#feutureColumnSection .feutureItemPoint > ul > li > dl > dt{
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.075em;
  line-height: 1.25;
  color: #6C5E51;
}

#feutureColumnSection .feutureItemPoint > ul > li > dl > dd{
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-align: center;
  line-height: 1.875;
  color: #6C5E51;
}

#feutureColumnSection .feutureItemPoint > ul > li > dl > dd > strong {
  padding: 0 0.5em;
  font-weight: 700;
  background: linear-gradient(transparent calc(100% - 1.0rem), #EFEBE7 calc(100% - 1.0rem));
}

/**feutureItemOutline **/
#feutureColumnSection .feutureItemOutline{
  display: block;
  width: 100%;
  margin-bottom: 6rem;
}


#feutureColumnSection .feutureItemOutline > figure{
  display: block;
  width: 100%;
}

#feutureColumnSection .feutureItemOutline > figure > img{
  display: block;
  width: 100%;
  height: auto;
}

#feutureColumnSection .feutureItemOutline > .text{
  display: block;
  width: 100%;
  padding: 4rem 1.8rem 5.5rem;
  background: #EAE5D9;
}

#feutureColumnSection .feutureItemOutline > .text > .inner{
  display: block;
  width: 100%;
}

#feutureColumnSection .feutureItemOutline > .text .catch{
  display: block;
  margin-bottom: 2rem;
  font-size: 2.2rem;
  letter-spacing: 0.125em;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: #6C5E51;
}

#feutureColumnSection .feutureItemOutline > .text .outlineImg{
  display: block;
  width: 100%;
  margin: 0 auto 2.4rem;
}


#feutureColumnSection .feutureItemOutline .outlinePoint{
  display: block;
  margin-bottom: 2.4rem;
}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl{
  display: flex;
  align-items: center;
  justify-content: center;
}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dt{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.2rem;
  height: 12.2rem;
  border-radius: 50%;
  padding: 0.6rem 0 0 0.4rem;
  margin-right: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.470588235294118;
  text-align: center;
  font-weight: 300;
  color: #000000;
  letter-spacing: 0.125em;
  background: rgba(255,255,255,.5);
  border: 1px solid #FFFFFF;
  position: relative;
  z-index: 1;
}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dt::after{
  content: '';
  display: block;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: -1;
}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dd{display: block;}
#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dd:not(:nth-last-of-type(1)){display: block; margin-right: 0.4rem;}
#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dd:nth-of-type(1){margin-right: 0.8rem;}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dd .calc{
  font-size: 1.9rem;
  letter-spacing: 0.125em;
  text-align: center;
  font-weight: 500;
  color: #000000;
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
}

#feutureColumnSection .feutureItemOutline .outlinePoint > dl > dd .circle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.4rem;
  height: 7.4rem;
  border-radius: 50%;
  padding: 0.4rem 0 0 0.4rem;
  font-size: 1.5rem;
  line-height: 1.470588235294118;
  text-align: center;
  font-weight: 300;
  color: #000000;
  letter-spacing: 0.125em;
  background: #FFF9DD;
  border: 2px solid #EFEAD5;
}



#feutureColumnSection .feutureItemOutline > .text p{
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.125em;
  color: #6C5E51;
  font-weight: 500;
  line-height: 2;
}

/**otherContents **/
#feutureColumnSection .otherContents{
  display: block;
  width: 100%;
  margin-bottom: 5.7rem;
  padding: 0 1.8rem;
}

#feutureColumnSection .otherContents > ul{
  display: block;
  width: 100%;
}

#feutureColumnSection .otherContents > ul > li + li{
  margin-top: 3.5rem;
}

#feutureColumnSection .otherContents > ul > li > .outer,
#feutureColumnSection .otherContents > ul > li > a.outer{
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.125em;
  line-height: 1.1;
  text-align: center;
  color: #6C5E51;
}

#feutureColumnSection .otherContents > ul > li figure{
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  aspect-ratio: 1/1;
  overflow: hidden;
}
#feutureColumnSection .otherContents > ul > li figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}