@charset "utf-8";
/* CSS Document */

/*******************

 LP style

********************/
html , body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
/* header/footer cstm */
div.lp_header .lp_container ,
#lpFooter {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* content
--------------------------------------------------*/
.lpbox , #lpfooter {
  font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Mayryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: clamp(12px,calc(24 / 750 * 100vw),24px);
  color:#683531;
  line-height:calc(44 / 24 * 1em);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.lpbox__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #F8EEEA;
  background: -webkit-linear-gradient(90deg, rgba(248, 238, 234, 1) 0%, rgba(247, 243, 242, 1) 50%, rgba(236, 244, 224, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(248, 238, 234, 1) 0%, rgba(247, 243, 242, 1) 50%, rgba(236, 244, 224, 1) 100%);
  background: linear-gradient(90deg, rgba(248, 238, 234, 1) 0%, rgba(247, 243, 242, 1) 50%, rgba(236, 244, 224, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F8EEEA", endColorstr="#ECF4E0", GradientType=1);
}
@media screen and (min-width:750px){
.lpbox , #lpfooter {
    font-size: clamp(12px,calc(16 / 120 * 100vw),16px);
    margin: 0 auto;
  }
  .lpbox {
    background: url(../images/bg.png) repeat top center;
  }
}
.lpbox a , #lpfooter a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.lpbox a:hover, #lpfooter a:hover{
  text-decoration: underline;
}
.lpbox span, #lpfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.lpbox img ,
#lpfooter img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.lpbox img.img-t ,
#lpfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.lpbox header ,
.lpbox h1 ,
.lpbox h2 ,
.lpbox h3 ,
.lpbox p ,
.lpbox dl ,
.lpbox dt ,
.lpbox dd ,
.lpbox div ,
.lpbox section ,
.lpbox span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter footer ,
#lpfooter div,
#lpfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter ul,
#lpfooter li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
/*----------------------------------------*/
.lpbox .box {
  position: relative;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width:750px){
}


/*----------------------------------------*/
.lpbox .fv__box {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.lpbox .fv__text {
  display: block;
  position: absolute;
  bottom: calc(260 / 1460 * 100%);
  width: calc(613 / 750 * 100%);
  left: calc(65 / 750 * 100%);
}

.lpbox .cta {
  display: block;
  width: calc(690 / 750 * 100%);
  margin: calc(60 / 750 * 100%) auto;
}

.lpbox .cta__btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(40 / 690 * 100%);
}

.lpbox .foryou__text {
  position: absolute;
  width: calc(656 / 750 * 100%);
  top: 0;
  left: calc(45 / 750 * 100%);  
}

.lpbox .plant__text {
  display: block;
  width: calc(300 / 750 * 100%);
  position: absolute;
  top: calc(497 / 1162 * 100%);
  right: calc(90 / 750 * 100%);
}

.lpbox .support__text {
  display: block;
  width: calc(553 / 750 * 100%);
  position: absolute;
  top: calc(160 / 1100 * 100%);
  left: calc(94 / 750 * 100%);
}
.lpbox .series__text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  padding: calc(20 / 750 * 100%);
}
.lpbox .series__text a {
  text-decoration: underline;
  text-underline-offset: 0.5em;
}
.lpbox .series__text span {
  background: url(../images/sp/arrow_ic_sp.png) no-repeat 0% 55%;
  -webkit-background-size: auto 0.9em;
  background-size: auto 0.9em;
  box-sizing: border-box;
  padding-left: 1em;
  display: inline-block;
}

.lpbox .qa__box {
  box-sizing: border-box;
  padding: 1px calc(20 / 750 * 100%);
  background-image: url(../images/sp/qa_sp_03.png),url(../images/sp/qa_sp_02.png);
  background-repeat: no-repeat , repeat;
  background-position: bottom left , top left;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
.lpbox .qa__item + .qa__item {
  margin-top: calc(40 / 710 * 100%);
}
.lpbox .qa__q {
  display: block;
  position: relative;
  cursor: pointer;
  margin: calc(10 / 710 * 100%) auto;
}

.lpbox .qa__q:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1em;
  background: url(../images/sp/qa_ar_sp.png) no-repeat 50% 50%;
  -webkit-background-size: .9em auto;
  background-size: .9em auto;
  transform: rotate(180deg);
  transition: all .5s ease;
}
.lpbox .qa__q--open:after {
  content: "";
  transform: rotate(0deg);
}


.lpbox .product__box {
  width: calc(670 / 750 * 100%);
  box-sizing: border-box;
  border-radius: clamp(20px,calc(50 / 750 * 100vw),50px);
  overflow: hidden;
  background: #fff;
  margin: calc(80 / 750 * 100%) auto calc(180 / 750 * 100%);
  padding: calc(20 / 750 * 100%) calc(40 / 750 * 100%);
}

.lpbox .product__box dl {
  margin: calc(20 / 670 * 100%) auto;
}
.lpbox .product__box dt {
  font-size: calc(26 / 24 * 1em);
  color: #009042;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: .3em;
}
.lpbox .product__box dt span {
  font-size: calc(24 / 26 * 1em);
}
.lpbox .product__box dd {
  text-align: justify;
  word-break: break-all;
  white-space: inherit;  
  letter-spacing: 0.04em;
}
.lpbox .product__box dd.text--center {
  text-align: center;
}
.lpbox .product__notice {
  font-size: calc(18 / 24 * 1em);
  line-height: calc(30 / 18 * 1em);
  letter-spacing: 0;
  text-align: justify;
}

/*----------------------------------------------------------*/

@media screen and (min-width:750px){
 .lpbox .fv__text {
  width: clamp(0px,calc(535 / 1200 * 100%),535px);
  bottom: calc(95 / 850 * 100%);
  left: calc(125 / 1200 * 100%);
  }

  .lpbox .cta {
    display: block;
    width: calc(900 / 1200 * 100%);
    max-width: 900px;
    margin: clamp(0px,calc(60 / 750 * 100%),70px) auto;
  }

  .lpbox .cta__btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(100 / 900 * 100%);
  }
  .lpbox .check ,
  .lpbox .series {
    display: block;
    width: calc(900 / 1200 * 100%);
    max-width: 900px;
    margin: 0 auto;    
  }
  
  .lpbox .foryou ,
  .lpbox .functional ,
  .lpbox .uservoice ,
  .lpbox .howto ,
  .lpbox .freezedry ,
  .lpbox .support ,
  .lpbox .plant {
    width: calc(1000 / 1200 * 100%);
    max-width: 1000px;
    margin: 0 auto;
  }
  .lpbox .foryou__text {
    position: absolute;
    width: calc(468 / 1000 * 100%);
    max-width: 468px;
    top: 0;
    left: calc(40 / 1000 * 100%);  
  }

  .lpbox .plant__text {
    display: block;
    width: calc(433 / 1000 * 100%);
    position: absolute;
    top: calc(362 / 886 * 100%);
    right: calc(190 / 1000 * 100%);
  }

  .lpbox .support__text {
    display: block;
    width: calc(450 / 1000 * 100%);
    position: absolute;
    top: calc(200 / 464 * 100%);
    left: calc(422 / 1000 * 100%);
  }
  .lpbox .series__text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    padding:0 0 calc(30 / 1000 * 100%);
    font-size: clamp(10px,calc(18 / 1200 * 100vw),18px);
  }
  .lpbox .series__text a {
    text-decoration: underline;
    text-underline-offset: 0.5em;
  }
  .lpbox .series__text span {
    background: url(../images/arrow_ic_pc.png) no-repeat 0% 55%;
    -webkit-background-size: auto 0.9em;
    background-size: auto 0.9em;
    box-sizing: border-box;
    padding-left: 1em;
    display: inline-block;
    
  }
  .lpbox .qa {
    display: block;
    width: calc(900 / 1200 * 100%);
    max-width: 900px;
    margin: clamp(40px,calc(80 / 1200 * 100%),80px) auto; 
  }

  .lpbox .qa__box {
    box-sizing: border-box;
    padding: 1px calc(70 / 900 * 100%);
    background-image: url(../images/qa_pc_02.png);
    background-repeat: repeat;
    background-position: top left;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  .lpbox .qa__item + .qa__item {
    margin-top: calc(30 / 900 * 100%);
  }
  .lpbox .qa__q {
    display: block;
    position: relative;
    cursor: pointer;
    margin: calc(10 / 900 * 100%) auto;
  }

  .lpbox .qa__q:after {
    content: "";
    display: block;
    width: 1.6em;
    height: 1.6em;
    position: absolute;
    top: calc(50% - 0.8em);
    right: 1.6em;
    background: url(../images/qa_ar_pc.png) no-repeat 50% 50%;
    -webkit-background-size: clamp(10px,90%,20px) auto;
    background-size: clamp(10px,90%,20px) auto;
    transform: rotate(180deg);
    transition: all .5s ease;
  }
  .lpbox .qa__q--open:after {
    content: "";
    transform: rotate(0deg);
  }

  .lpbox .product {
    width: calc(1000 / 1200 * 100%);
    max-width: 1000px;
    margin: 0 auto;    
  }

  .lpbox .product__box {
    width: calc(900 / 1000 * 100%);
    max-width: 900px;
    box-sizing: border-box;
    border-radius: clamp(20px,calc(50 / 750 * 100vw),50px);
    overflow: hidden;
    background: #fff;
    margin: clamp(30px,calc(70 / 1000 * 100%),70px) auto;
    padding: calc(20 / 900 * 100%) calc(50 / 900 * 100%) calc(40 / 900 * 100%);
  }

  .lpbox .product__box dl {
    margin: calc(20 / 900 * 100%) auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
  }
  .lpbox .product__box dt {
    font-size: calc(20 / 16 * 1em);
    color: #009042;
    letter-spacing: 0.04em;
    text-align: left;
    margin-bottom: .3em;
    width: calc(200 / 800 * 100%);
  }
  .lpbox .product__box dt span {
    font-size: calc(16 / 20 * 1em);
    display: block;
    line-height: 1.25em;
  }
  .lpbox .product__box dd {
    text-align: justify;
    word-break: break-all;
    white-space: inherit;  
    letter-spacing: 0.04em;
    width: calc(600 / 800 * 100%);
    line-height: calc(24 / 16 * 1em);
  }
  .lpbox .product__box dd.text--center {
    text-align: justify;
  }
  .lpbox .product__notice {
    font-size: calc(16 / 16 * 1em);
    line-height: calc(24 / 16 * 1em);
    letter-spacing: 0;
    text-align: justify;
  }  

}





/*---------------------------*/
.lpbox #fixbtn {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
}
.lpbox #fixbtn.fixbtn--visible {
  bottom: 0;
}
.lpbox #fixbtn .fixbtn__box {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
}
.lpbox #fixbtn .fixbtn__item {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
  width: clamp(0px,calc(690 / 750 * 100%),690px);
}



@media screen and (min-width:750px){
  .lpbox #fixbtn {
    display: none;
  }
}


/* animation */

.lpbox .fadein {
  display: block;
  opacity: 1;
  -webkit-transform:translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-filter: blur(0);
  -o-filter: blur(0);
  filter: blur(0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  --delaycount: 0;
  transition-delay: calc( var(--delaycount) * 0.1s);
}
.lpbox .animhide .fadein {
  display: block;
  opacity: 0;
  -webkit-transform:translate3d(0,3em,0);
  -ms-transform: translate3d(0,3em,0);
  -o-transform: translate3d(0,3em,0);
  transform: translate3d(0,3em,0);
  -webkit-filter: blur(0.5em);
  -o-filter: blur(0.5em);
  filter: blur(0.5em);
}
/* slidetext */
.lpbox .slidetext {
  display: block;
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.lpbox .animhide .slidetext {
  display: block;
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}



/* bounce */
.lpbox .bounce {
  display: block;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
        0%   {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
        10%  {
          -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
        30%  {
          -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
        50%  {
          -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
        57%  {
          -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
          -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
          -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
          transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
        64%  {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
        100% {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}
@keyframes bounce {
        0%   {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
        10%  {
          -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
          transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
        30%  {
          -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
          transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
        50%  {
          -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
          transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
        57%  {
          -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
          -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
          -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
          transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
        64%  {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
        100% {
          -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
          -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
          transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}