@charset "UTF-8";
@import url(https://cdn.jsdelivr.net/npm/destyle.css@2.0.2/destyle.min.css);
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese);


html{
  font-size : 62.5%;
}
/* ie11 */
_:-ms-lang(x)::-ms-backdrop, html {
  font-size  : 58.6%;
}
@media screen and (max-width:1125px){
  html{
    font-size : 0.888vw;
  }
}

/* ie11 */
_:-ms-lang(x)::-ms-backdrop,img[src$=".svg"] {
  width: 100%;
  height: auto;
}

body{
  color: #000;
  font-size: 1.6rem;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, 'Noto Sans JP', sans-serif;
  font-feature-settings: 'palt';
  letter-spacing: 0.12em;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
  -webkit-text-size-adjust: 100%;
}

/* ie11 */
_:-ms-lang(x)::-ms-backdrop, body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

img{
  display : block;
  width : 100%;
}

a{
  color:#000;
  display: block;
  text-decoration: none;
  transition: .2s;
}

a:hover,button:hover{
  filter: brightness(1.1);
}

/* ie11 */
_:-ms-lang(x)::-ms-backdrop, a:hover,
_:-ms-lang(x)::-ms-backdrop, button:hover{
  opacity:0.8;
}

/*
// common style
*/

.text--marker{
  background: linear-gradient(180deg,transparent 50%,#e2d3bc 50%);
  padding: 0 0.1em 0.15em;
}

.text--pink{
  color: #c14c6c;
}

.text--bold{
  font-weight: bold;
}

/*
// main
*/

.main{
  margin: auto;
  max-width: 1125px;
  min-width: 320px;
}


/*
// header
*/

.header{
  margin: auto;
  max-width: 1125px;
  width: 100%;
}



/*
// mv
*/

.mv{}
.mv__image{}

.mv__copy{
  font-size: 4rem;
  letter-spacing: 0.2em;
  padding: 3rem 0;
  text-align: center;
}

.mv__copy__text_large{
  display: inline-block;
  font-size: 4.5rem;
  font-weight: bold;
  margin: 0.5em 0 0;
}


/*
// offer
*/
.offer--wrapper{
  background: #e2d3bc;
  padding: 0 7.5rem 4.5rem;
}

.offer--teiki{
  margin: 0 auto 4.5rem;
  position: relative;
}

.offer--tanpin{
  position: relative;
}

.offer__btn{
  left:50%;
  position: absolute;
  transform: translate(-50%,0);
}

.offer__btn--teiki{
  animation: btnAnim 2s infinite;
  bottom: 16.6rem;
  transform-origin: left;
  width: 81.1rem;
}

@keyframes btnAnim {
  0% {
    transform: scale(1, 1) translate(-50%,0)
  }
  50% {
    transform: scale(1.1, 1.1) translate(-50%,0)
  }
  100% {
    transform: scale(1, 1) translate(-50%,0)
  }
}

.offer__btn--tanpin{
  bottom: 4rem;
  width: 78rem;
}


/*
// media
*/
.media{
  padding: 6rem 0; 
}

.media__heading{
  font-size: 5.5rem;
  font-weight: bold;
  margin: 0 0 3.5rem;
  text-align: center;
}

.media__headingIcon{
  margin: 0 auto 2.5rem;
  width: 19.91523rem;
}

.media__image{
  margin: auto;
  width: 97.1rem;
}



/*
// instagram
*/

.instagram{
  background: #e2d3bc;
  padding: 4.5rem 0 3.5rem; 
}

.instagram__headingIcon{
  margin: 0 auto 4.5rem;
  width: 35.04546rem;
}

.instagram__imageList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 96.8rem;
}

.instagram__imageList li{
  margin: 0 0 2.2rem;
  width:30.8rem;
}
    
    
/*
// popup
*/ 

.popup{
  padding: 5.5rem 0 12.5rem;
}

.popup__heading{
  font-size: 5.4rem;
  font-weight: bold;
  margin: 0 auto 3rem;
  text-align: center;
}

.popup__description{
  font-size: 4.0rem;
  margin: 0 auto 9rem;
  text-align: center;
}

.popup__description--text_bold{
  font-weight: bold;
}

.popup__image--wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  width: 92rem;
}

.popup__image--wrapper img:nth-child(1){
  margin: 0 0 3.8rem; 
  width:100%;
}

.popup__image--wrapper img:nth-child(2){
  width: 32.6rem;
}

.popup__image--wrapper img:nth-child(3){
  width: 55.6rem;
}

.popup__footnote{
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
}



/*
// ngCare
*/

.ngCare{}



/*
// productFeatures
*/

.productFeatures{
  padding: 10rem 0;
}

.productFeatures__heading{
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: 0.3em;
  margin: 0 0 11rem;
  text-align: center;
}

.productFeatures__headingIcon{
  margin: 0 auto 11rem;
  text-align: center;
  width: 37.25591rem;
}

.productFeatures__list--wrapper{
  margin: 0 auto;
  width: 97.4rem;
}

.productFeatures__list{
  align-items: center;
  display: flex;
  letter-spacing: 0.35em;
  margin: 0 auto 7.5rem;
  width: 100%;
}

.productFeatures__list:last-child{
  margin: auto;
}

.productFeatures__list__image{
  margin: 0 3.5rem 0 0;
  width: 30.9rem;
}

.productFeatures__list__text--wrapper{
  width: 63rem;
}

.productFeatures__list__textTitle{
  font-size: 4.4rem;
  font-weight: bold;
  margin: 0 0 4.5rem;
}

.productFeatures__list__textTitle sup{
  font-size: 0.5em;
}

.productFeatures__list__text{
  font-size: 3.2rem;
}

.productFeatures__list__text__footnote{
  font-size: 1.6rem;
  vertical-align: middle;
}
    


/*
// causing
*/
    
.causing{
  
}
    


/*
// howto
*/

.howto{
  background: #e2d3bc;
  padding: 24.2rem 0 8.5rem;
  position: relative;
}

.howto__heading{
  position:absolute;
  top: -3.7rem;
  width: 100%;
}

.howto__description{
  font-size: 4.0rem;
  font-weight: bold;
  margin: 0 0 6.5rem;
  text-align: center;
}

.howto__description__footnote{
  font-size: 3.6rem;
  font-weight: normal;
}

.howto__movie{
  display: block;
  margin: auto;
  width: 72rem;
}
    
 

/*
// commitment
*/

.commitment{
  padding: 6.5rem 0;
}
.commitment__headingIcon{
  margin: 0 auto 10.5rem;
  width: 31.1rem;
}

.commitment__heading{
  margin: 0 auto 8.7rem;
  width: 100%;
}

.commitment__list{}

.commitment__list--01{
  margin: 0 auto 13.5rem;
}

.commitment__list__title{
  margin: 0 auto 12.8rem;
  width: 86.3rem;
}

.commitment__list__content{
}

.commitment__list--01__content__image{
  margin: 0 auto 6.8rem;
  width: 91.9rem;
}

.commitment__list--01__content__text{
  font-size: 3.67573rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
}
.commitment__list--01__content__text--large{
  font-size: 5.97307rem;
}

.commitment__list--02{
  margin: 0 auto 14.4rem;
}

.commitment__list--02__content__text{
  font-size: 5.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0 0 5.5rem;
  text-align: center;
}

.commitment__list--02__content__list{
  margin: 0 auto 4.5rem;
  width: 71.4rem;
}

.commitment__list--02__content__list li{
  align-items: center;
  border:0.1rem solid #000;
  display: flex;
  font-size: 5.5rem;
  height: 13.8rem;
  justify-content: center;
  letter-spacing: 0.2em;
  margin: 0 0 4.5rem;
  width: 100%;
}

.commitment__list--02__content__list li:last-child{
  margin: 0;
}

.commitment__list--03{
  
}

.commitment__list--03__content__text01{
  font-size: 5.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0 0 5.5rem;
  text-align: center;
}

.commitment__list--03__content__image01{
  margin: 0 auto 5.5rem;
  width: 96.1rem;
}

.commitment__list--03__content__text02{
  font-size: 4.0rem;
  letter-spacing: 0.2em;
  margin: 0 0 18rem;
  text-align: center;
}

.commitment__list--03__content__text02--text_bold{
  font-size: 4.5rem;
  font-weight: bold;
}

.commitment__list--03__content__text03{
  font-size: 4.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0 0 4rem;
  text-align: center;
}

.commitment__list--03__content__image02{
  margin: 0 auto;
  width: 96.6rem;
}
  


/*
// userVoice
*/

.userVoice{
  padding: 6rem 0 14rem;
}

.userVoice__headingIcon{
  margin: 0 auto 8.5rem;
  width: 26.7rem;
}

.userVoice__heading{
  margin: 0 auto 6.5rem;
  width: 95.9rem;
}

.userVoice__list{
  border: 1rem solid #efede6;
  margin: 0 auto 14.2rem;
  padding: 2.8rem 0 4.8rem;
  width: 101rem;
}

.userVoice__list:last-child{
  margin: 0 auto;
}

.userVoice__list--01{}

.userVoice__list__title{
  align-items: center;
  display: flex;
  font-size:3.8rem;
  font-weight: bold;
  margin: 0 0 6rem;
}

.userVoice__list__title img{
  border-right: 0.2rem solid #e2d3bc;
  margin: 0 3.5rem 0 6.5rem;
  padding: 0 6.5rem 0 0;
  width: 18rem;
}

.userVoice__list__content{
  margin: 0 auto;
  position: relative;
  width: 96rem;
}

.userVoice__list__content__btn{
  bottom: -4rem;
  position: absolute;
  right: -1rem;
  width: 31.4rem;
}



/*
// faq
*/

.faq{
  background: #dcdad3;
  padding: 11rem 0 9.5rem;
}

.faq__heading{
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0 0 7rem;
  text-align: center;
}

.faq__list--wrapper{
  margin: auto;
  width: 92.2rem;
}

.faq__list{
  background: #fff;
  border-radius: 2.5rem;
  font-size:3.5rem;
  margin: 0 0 7.5rem;
  padding: 0 4rem;
}

.faq__list:last-child{
  margin: 0;
}

.faq__list dt{
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: 4rem 0;
  position: relative;
}

.faq__list dt:hover{
  cursor: pointer;
}

.faq__list dt:after{
  background: url("../images/faq__list--arrow.png") no-repeat center center/100% auto;
  content:'';
  height: 2.4rem; 
  position: absolute;
  right: -0.5rem;
  top:50%;
  transform: translate(0,-50%);
  transition: .2s;
  width: 5.1rem;
}

.faq__list dt.active:after{
  transform: translate(0,-50%) rotate(180deg);
}

.faq__list dd{
  display: none;
  padding: 0rem 0 3rem;
}



/*
// productDetail
*/

.productDetail{
  padding: 6rem 0 2.3rem;
}

.productDetail__list{
  margin: 0 auto 5.2rem;
  width: 97.6rem;
}

.productDetail__heading{
  border-top:0.1rem solid #000;
  border-bottom:0.1rem solid #000;
  font-size:3.0rem;
  font-weight: bold;
  margin: 0 auto 5.2rem;
  padding: 2.5rem 0;
}

.productDetail__heading:hover{
  cursor: pointer;
}

.productDetail__list dd{
  display: none;
  font-size: 2.6rem;
  margin: 4rem 0 6rem;
}



/*
// imageMovie
*/

.imageMovie video{
  display: block;
  margin: 0 auto 10rem;
  width: 97.6rem;
}


/*
// modal
*/

.modal{
  align-items: center;
  background: rgba(0,0,0,0.8);
  display: /*flex*/none;
  height: 100vh;
  justify-content: center;
  left: 0;
  padding: 8rem 6rem;
  position: fixed;
  top:0;
  width: 100vw;
}

.userVoiceModal{
  
}

@media screen and (max-width:768px) {
  .userVoiceModal{
    align-items: center;
    display: flex;
  }
}

.userVoiceModal img{
  display:none;
  max-height: 96vh;
  max-width: 520px;
}




/*
// footer
*/

.footer{
  background: #eae8e0;
  padding: 4.5rem 0 2.5rem;
  width: 100%;
}

.footer__copyright{
  display: block;
  font-size: 1.0rem;
  line-height: 1;
  text-align: center;
}





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

  /*
  // footer
  */

  .footer{
    padding: 4.0rem 0 2.8rem;
  }
  
  .footer--withFloatBanner{
    padding: 4.0rem 0 24rem;
  }

  .footer__copyright{
    font-size: 2.0rem;
  }
}


.footer__link{
  align-items: center;
  display: flex;
  justify-content: center;
  margin:0 0 1em;
}

.footer__link li{
  align-items: center;
  display: flex;
  justify-content: center;
  font-size:1.2rem;
  line-height: 1;
}

.footer__link li:first-child:after{
  content:'|';
  font-size:1.2em;
  margin: 0 1em;
}

.footer__link li a{
  text-decoration: underline;
}


.floatBanner{
  animation: btnFloatBanner 2s infinite;
  bottom:2rem;
  position: fixed;
  right: 3rem;
  transform-origin: center;
  width: 42rem;
  z-index: 10;
}

@media screen and (max-width:768px) {
  .floatBanner{
    left: 7.25rem;
    width: 98rem;
  }
}

@keyframes btnFloatBanner {
  0% {
    transform: scale(1, 1)
  }
  50% {
    transform: scale(1.1, 1.1)
  }
  100% {
    transform: scale(1, 1)
  }
}