@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

#sku{
  overflow:hidden;
  font-family:'Jost','Noto Sans JP',sans-serif;
}

#sku .container{
  text-align:center;
}

#sku br.sp{
  display:none;
}

#sku br.pc{
  display:none;
}
@media only screen and (min-width: 1000px){
  #sku br.pc{
    display:block;
  }
}
@media only screen and (max-width: 768px){
  #sku br.sp{
    display:block;
  }
}

#sku h2{
  font-weight:500;
  color:#4c4a4a;
  letter-spacing:0.3em;
  font-size:clamp(1em, 2vw, 1.6em);
  padding:3vw 0;
  font-family:'Jost','Noto Sans JP',sans-serif;
  line-height:.8;
  
}

@media only screen and (min-width: 1000px){
  #sku h2{
    padding:80px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1000px){
  #sku h2{
    padding:3vw 0;
  }
}

#sku h2 span{
  position:relative;
  display:inline-block;
}

#sku h2 span::after{
  content:'';
  border-bottom:1px solid #4c4a4a;
  width:100%;
  margin:0 auto;
  padding:0 0.5rem 0 0.5rem;
  display:inline-block;
}

#sku .atten{
  text-align:center;
  font-size:clamp(0.6rem, 0.9vw, 1rem);
  line-height:1.6;
  color:#4c4a4a;
}

#sku sup{
  font-size:0.5em;
  font-weight:normal;
  top:-1em;
}

#sku .linksec{
  display:flex;
  justify-content: center;
  align-items: center;
  padding:25px 0;
}

#sku .product-bx .linksec{
  max-width:750px;
  margin:0 auto;
}

#sku .linksec > div{
  padding:0 1%;
  width:30%;
}

#sku .linksec .lk-of {
  line-height:1.2;
}

#sku .linksec .lk-of button{
  background:#969697;
  color:#FFFFFF;
  border:none;
}

#sku .linksec .lk-raku button{
  background:#bf0000;
  border:none;
}

#sku .linksec .lk-am a{
  background:#000000;
}

#sku .linksec .lk-of span{
  font-size:70%;
}

#sku .linksec .lk-raku img{
  width:50%;
  height:auto;
}


#sku .linksec .lk-am img{
  width:90%;
  height:auto;
  margin:0 auto;
}

#sku .linksec button, #sku .linksec a{
  border-radius:10rem;
  width:100%;
  height:50px;
  display:block;
}

#sku .linksec img{
  vertical-align:middle;
}

#sku .linksec .lk-am a{
  display:flex;
  align-items: center;
}

@media only screen and (max-width: 768px){
  #sku .linksec{
    flex-wrap: wrap;
    padding:5vw 0;
  }

  #sku .linksec > div{
    padding:2%;
    width:48%;
  }
  #sku .linksec button, #sku .linksec a{
    border-radius:3rem;
    width:100%;
    height:13vw;
    display:block;
  }
  #sku .linksec .lk-of {
    line-height:1.1;
  }
}

#sku .kv{
  width:100%;
  position:relative;
  background: radial-gradient(circle,rgba(234, 239, 243, 1) 11%, rgba(208, 219, 231, 1) 84%);
  background-size:cover;
  position:relative;
  padding-top:8%;
}

#sku .kv .lg{
  position:absolute;
  top:22%;
  left:18%;
  width:28%;
  animation: fadeInLeft 1s;
  animation-delay: .5s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInLeft 1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: backwards;
}

#sku .kv .mainimg{
  padding-left:50%;
  padding-right:8%;
  animation: fadeInBottom 1s;
  animation-delay: .5s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom 1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-fill-mode: backwards;
}

#sku .kv .hatten{
  position:absolute;
  bottom:0;
  right:5%;
  font-size:clamp(.7rem, 1vw, 1rem);
}

#sku img{
  width:100%;
  height:auto;
}

@media only screen and (min-width: 1000px){
  #sku .kv{
    padding-top:50px;
  }
}

@media only screen and (max-width: 768px){
  #sku .kv{
    width:100%;
    position:relative;
    background: radial-gradient(circle,rgba(234, 239, 243, 1) 11%, rgba(208, 219, 231, 1) 84%);
    background-size:cover;
    position:relative;
    padding-top:23%;
  }

  #sku .kv .lg{
    position:absolute;
    top:40%;
    left:10%;
    width:35%;
  }

  #sku .kv .mainimg{
    padding-left:40%;
    padding-right:0;
    margin-right:-10%;
  }

  #sku .kv p{
    margin:0 0 1vw;
  }
}

/*-------------------
animation
-------------------*/
@keyframes fluffy {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(25px);
    }
}

@keyframes fluffy2 {
    0%, 100% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(27px);
    }
}

@keyframes fluffy3 {
    0%, 100% {
        transform: translateY(25px);
    }
    50% {
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
  0% {
        opacity:0;
        -webkit-transform:translate3d(0,3vw,0);
        transform:translate3d(0,3vw,0);
      }
  100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
      }
}


.fluffy{
  animation:fluffy 2.5s ease-in-out infinite alternate;
}

.fluffy2{
   animation:fluffy2 2.5s ease-in-out infinite alternate;
}

.fluffy3{
   animation:fluffy3 3.5s ease-in-out infinite alternate;
}

@-webkit-keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*-------------------
about
-------------------*/

#sku .about{
  background-image: url('./pc/about_bg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size:cover;
  position:relative;
  padding:5vw 0 20vw 0
}

#sku .about .pnav{
  display:flex;
  justify-content: center;
  animation: fadeInBottom 1s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  -webkit-animation: fadeInBottom 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  
}

#sku .about .pnav a{
  background:#969696;
  border-radius:10rem;
  color:#FFFFFF;
  font-size:clamp(1.1rem, 3vw, 2rem);
  letter-spacing:.5rem;
  padding:1rem 3rem;
  display:block;
  margin:0 1.5rem;
  width:200px;
  text-decoration:none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#sku .about .pnav a:hover{
  background:#89acc7;
}

#sku .about .container{
  position:relative;
}

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


#sku .about h2{
  padding:10vw 2vw 5vw 0;
  width:30%;
  margin:0 auto;
}

#sku .about .lead{
  padding:0;
  position:relative;
  font-size:clamp(.9rem, 2vw, 2rem);
  color:#4c4a4a;
  letter-spacing:.5rem;
  line-height:2;
}



@media only screen and (min-width: 1000px){
  #sku .about{
    padding:100px 0 200px 0
  }

  #sku .about h2{
    padding:150px 2vw 100px 0;
  }
}

@media only screen and (max-width: 768px){
  #sku .about{
    background-image: url('./mobile/about_bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
    padding:5vw 0 10vw 0
  }

  #sku .about .pnav a{
    width:40vw;
    padding:1rem 3vw;
    margin:0 2vw;
  }

  #sku .about h2{
    padding:10vw 2vw 5vw 0;
    width:60%;
  }

  #sku .about .lead{
    letter-spacing:.2rem;
  }
}

/*-------------------
mainpr
-------------------*/

#sku .mainpr{
  background:url('./pc/mainpr_bg.jpg') repeat-y center top;
  background-size:100% auto;
}

@media only screen and (max-width: 768px){
  #sku .mainpr{
    background:url('./mobile/mainpr_bg.jpg') repeat-y center top;
    background-size:100% auto;
  }
}

/*-------------------
products
-------------------*/

#sku .products{
  
}


#sku .products .container{
  position:relative;
}


#sku .products .product-bx{
  background:#FFFFFF;
  width:95%;
  margin:0 auto 10vw auto;
  padding:5vw 5vw 2vw 5vw;
  position:relative;
}


#sku .products .product-bx .pic{
  width:20%;
  position:absolute;
  top:-2vw;
  left:-2vw;
}

#sku .products .product-bx .prinfo{
  width:70%;
  max-width:600px;
  margin:0 auto;
  display:flex;
  justify-content: center;
  align-items: center;
}

#sku .products .product-bx .prinfo .prinfo-img{
  width:35%;
  margin:0 0 0 auto;
}

#sku .products .product-bx .prinfo .pr{
  width:65%;
  margin:0 auto;
}

#sku .products .product-bx .prinfo .pr h3{
  font-size:clamp(1.6rem, 3vw, 4.2rem);
  font-weight:600;
  line-height:1.8;
  letter-spacing:.5rem;
}

#sku .products .product-bx.pr01 .prinfo .pr h3{
  color:#89acc7;
}

#sku .products .product-bx.pr02 .prinfo .pr h3{
  color:#9684b7;
}

#sku .products .product-bx .prinfo .pr .prinfo-lg{
  width:70%;
  margin:0 auto;
  padding:3vw 0 2vw 0;
}

#sku .products .product-bx .prinfo .pr .prinfo-prc{
  color:#4c4a4a;
  font-size:clamp(.7rem, 1vw, 1.4rem);
  letter-spacing:.1rem;
  line-height:1.8;
}

#sku .products .product-bx .pr-intro{
  width:100%;
  margin:5vw auto;
  display:flex;
}

#sku .products .product-bx .pr-intro .pr-intro-img{
  width:50%;
  margin-right:3vw;
}

#sku .products .product-bx .pr-intro .pr-intro-right{
  width:50%;
}

#sku .products .product-bx .pr-intro .pr-intro-right h4{
  color:#4c4a4a;
  font-size:clamp(1.2rem, 3vw, 4rem);
  letter-spacing:.5rem;
  line-height:1.8;
}

#sku .products .product-bx .pr-intro .pr-intro-right .lead{
  color:#4c4a4a;
  font-size:clamp(.9rem, 2vw, 1.6rem);
  letter-spacing:.5rem;
  line-height:1.8;
  font-weight:500;
  padding:2vw 0 3vw 0;
}



#sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dt{
  background:#acc5d8;
  color:#FFFFFF;
  font-size:clamp(1rem, 2.5vw, 2.5rem);
  letter-spacing:.5rem;
  font-weight:500;
  padding:.3rem 0;
}

#sku .products .product-bx.pr01 .pr-intro .pr-intro-right .pr-intro-ny dt{
  background:#acc5d8;
}

#sku .products .product-bx.pr02 .pr-intro .pr-intro-right .pr-intro-ny dt{
  background:#b5a9cd;
}

#sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd{
  padding:2vw 0 3vw 0
}

#sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd .pr-intro-icn{
  display:flex;
}

#sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd .pr-intro-icn li{
  padding:0 1%;
}

#sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd .pr-intro-icn li.hf{
  padding:0 5%;
}

#sku .products .product-bx .pr-spec{
  width:100%;
  margin:0 auto 2vw auto;
}

#sku .products .product-bx.pr01 .pr-spec{
  background:url('./pc/product_pr01_spc_bg.png?=v2') no-repeat center center;
  background-size:100% auto;
  padding:2vw;
}

#sku .products .product-bx.pr02 .pr-spec{
  background:url('./pc/product_pr02_spc_bg.png?=v2') no-repeat center center;
  background-size:100% auto;
  padding:2vw;
}

#sku .products .pr-spec .cp{
  color:#FFFFFF;
  font-size:clamp(1.2rem, 2.5vw, 3.5rem);
  font-weight:500;
  letter-spacing:.5rem;
  padding-bottom:2vw;
}

#sku .products .pr-spec .cp span{
  font-weight:400;
  font-size:80%;
}

#sku .products .product-bx .pr-spec .pr-spec-in{
  width:50%;
  margin:0 0 0 auto;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#sku .products .product-bx .pr-spec .pr-spec-in .pr-spec-in-img-lg{
  width:100%;
  padding-bottom:1vw;
}

#sku .products .product-bx .pr-spec .pr-spec-in .pr-spec-in-img-st{
  width:49%;
}

#sku .products .product-bx .atten{

}

@media only screen and (min-width: 1000px){
  #sku .products .product-bx{
    margin:0 auto 100px auto;
    padding:50px 50px 30px 50px;
  }

  #sku .products .product-bx .pic{
    top:-3em;
    left:-2em;
  }

  #sku .products .product-bx .prinfo .pr .prinfo-lg{
    width:70%;
    margin:0 auto;
    padding:30px 0 10px 0;
  }

  #sku .products .product-bx .pr-intro{
    margin:50px auto;
  }

  #sku .products .product-bx .pr-intro .pr-intro-img{
    margin-right:30px;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .lead{
    padding:20px 0 30px 0;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd{
    padding:20px 0 30px 0;
  }

   #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd img{
    line-height:1;
  }

  #sku .products .product-bx .pr-spec{
    margin:0 auto 30px auto;
  }

  #sku .products .product-bx.pr01 .pr-spec{
    padding:20px;
  }

  #sku .products .product-bx.pr02 .pr-spec{
    padding:20px;
  }

  #sku .products .pr-spec .cp{
    padding-bottom:20px;
  }

  #sku .products .product-bx .pr-spec .pr-spec-in .pr-spec-in-img-lg{
    padding-bottom:20px;
  }
}

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

}

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

  #sku .products .product-bx{
    width:95%;
    margin:0 auto 15vw auto;
    padding:12vw 5vw 2vw 5vw;
  }

  #sku .products .product-bx.pr02{
    margin:0 auto 5vw auto;
  }
  #sku .products .product-bx.pr01 .pr-spec{
    background:url('./mobile/product_pr01_spc_bg.png') no-repeat center center;
    background-size:100% auto;
    padding:2vw;
  }

  #sku .products .product-bx.pr02 .pr-spec{
    background:url('./mobile/product_pr02_spc_bg.png') no-repeat center center;
    background-size:100% auto;
    padding:2vw;
  }

  #sku .products .product-bx .pic{
    width:25%;
    top:-9vw;
    left:-6vw;
  }

  #sku .products .product-bx .prinfo{
    width:90%;
  }

  #sku .products .product-bx .prinfo .prinfo-img{
    width:30%;
  }

  #sku .products .product-bx .prinfo .pr{
    width:70%;
    margin:0 auto;
  }

  #sku .products .product-bx .prinfo .pr h3{
    margin-top:0;
    line-height:1.6;
    letter-spacing:.2rem;
  }

  #sku .products .product-bx .prinfo .pr .prinfo-lg{
    padding:2vw 0 2vw 0;
  }

  #sku .products .product-bx .prinfo .pr .prinfo-prc{
    letter-spacing:.1rem;
  }

  #sku .products .product-bx .pr-intro{
    margin:5vw auto 0 auto;
  }

  #sku .products .product-bx .pr-intro .pr-intro-img{
    width:45%;
    margin-right:3vw;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right{
    width:55%;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right h4{
    letter-spacing:.2rem;
    line-height:1.8;
    margin-top:0;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .lead{
    letter-spacing:.1rem;
    padding:1vw 0 3vw 0;
    margin-bottom:0;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny{
    margin-bottom:0;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dt{
    letter-spacing:.2rem;
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd{
    padding:2vw 0 2vw 0
  }

  #sku .products .product-bx .pr-intro .pr-intro-right .pr-intro-ny dd .pr-intro-icn{
    margin-bottom:0;
  }

  #sku .products .product-bx .pr-spec{
    width:100%;
    margin:0 auto 2vw auto;
  }


  #sku .products .pr-spec .cp{
    letter-spacing:.3rem;
    padding-bottom:2vw;
  }

  #sku .products .pr-spec .cp span{
    font-weight:400;
    font-size:80%;
  }

  #sku .products .product-bx .pr-spec .pr-spec-in{
    width:50%;
    margin:0 0 0 auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #sku .products .product-bx .pr-spec .pr-spec-in .pr-spec-in-img-lg{
    width:100%;
    padding-bottom:1vw;
  }

  #sku .products .product-bx .pr-spec .pr-spec-in .pr-spec-in-img-st{
    width:49%;
  }
}


/*-------------------
mode
-------------------*/

#sku .mode{
  padding-bottom:10vw;
}

#sku .mode h3{
  color:#4c4a4a;
  font-size:clamp(1.6rem, 3vw, 3.5rem);
  letter-spacing:1rem;
  line-height:1.8;
  font-weight:600;
}

#sku .mode .lead{
  color:#4c4a4a;
  font-size:clamp(.8rem, 2vw, 1.6rem);
  letter-spacing:.5rem;
  line-height:1.8;
  font-weight:400;
}

#sku .mode .tbw{
  width:100%;
  max-width:800px;
  margin:0 auto;
  padding-top:3vw;
}


#sku .mode .tbw table th{
  color:#FFFFFF;
  text-align:center;
  font-size:clamp(1.1rem, 2vw, 2rem);
  font-weight:500;
  letter-spacing:.5rem;
}

#sku .mode .tbw table th span{
  min-height:75px;
  display:flex;
  align-items: center;
  justify-content: center;
}


#sku .mode .tbw table th.md{
  width:35%;
  padding-right:.5vw;
  padding-bottom:1vw;
}

#sku .mode .tbw table th.md span{
  background:#969697;
  
}

#sku .mode .tbw table th.lift{
  width:32.5%;
  padding-left:.5vw;
  padding-right:.5vw;
  padding-bottom:1vw;
}

#sku .mode .tbw table th.lift span{
  background:#acc5d8;

}

#sku .mode .tbw table th.boost{
  width:32.5%;
  padding-left:.5vw;
  padding-bottom:1vw;
}

#sku .mode .tbw table th.boost span{
  background:#b5a9cd;
}

#sku .mode .tbw table td{
  text-align:center;
  background:#FFFFFF;
  padding:1vw;
  border-right:1px solid #999999;
  font-size:clamp(1.1rem, 2vw, 2rem);
  letter-spacing:.5rem;
  font-weight:600;
}

#sku .mode .tbw table td span{
  font-size:70%;
  font-weight:normal;
}

#sku .mode .tbw table td:last-child{
  border-right:0;
}

#sku .mode .tbw table tr:nth-child(odd) td{
  background:#f5f5f5;
}

#sku .mode .tbw table td img{
  width:55%;
  margin:0 auto;
}

#sku .mode .atten{
  padding:1vw 0 0 0;
}

@media only screen and (min-width: 1000px){
  #sku .mode{
    padding-bottom:100px;
  }

  #sku .mode .tbw{
    padding-top:30px;
  }

  #sku .mode .tbw table th.md{
    padding-right:5px;
    padding-bottom:10px;
  }

  #sku .mode .tbw table th.lift{
    padding-left:5px;
    padding-right:5px;
    padding-bottom:10px;
  }

  #sku .mode .tbw table th.boost{
    padding-left:5px;
    padding-bottom:10px;
  }
  #sku .mode .atten{
    padding:1rem 0 0 0;
  }
}

@media only screen and (max-width: 768px){
  #sku .mode .container{
    padding:0;
  }
  #sku .mode h3{
    letter-spacing:.3rem;
    margin-top:0;
  }

  #sku .mode .lead{
    letter-spacing:.1rem;
  }

  #sku .mode .tbw table th{
    letter-spacing:.2rem;
  }

  #sku .mode .tbw table td{
    letter-spacing:.2rem;
  }

  #sku .mode .tbw table th span{
    min-height:55px;
  }
}


/*-------------------
howtouse
-------------------*/

#sku .howtouse{
  
}

#sku .howtouse .howto-recom{
  display:flex;
  width:80%;
  max-width:600px;
  margin:0 auto;
}

#sku .howtouse .howto-recom .htr{
  width:40%;
  margin:0 auto;
}

#sku .howtouse .howto-recom .htr dt{
  background:#FFFFFF;
  font-weight:400;
  font-size:clamp(1.1rem, 2vw, 2rem);
  letter-spacing:.5rem;
  width:95%;
  margin:0 auto;
}

#sku .howtouse .howto-recom .htr dd{
  padding:1vw 0;
}

#sku .howtouse .howto-recom .htr dd .htr-icn{
  display:flex;
  justify-content: space-between;
}

#sku .howtouse .howto-recom .htr dd .htr-icn li{
  width:46%;
}

#sku .howtouse .htr-flow{
  max-width:900px;
  margin:0 auto;
}

#sku .howtouse .htr-flow li.htr-flow-eh{
  background:#FFFFFF;
  position:relative;
  margin:13vw 0;
  z-index:1;
  padding:0 10%;
}

#sku .howtouse .htr-flow li.htr-flow-eh:nth-child(1){
  padding-top:3vw;
  margin-top:5vw;
}

#sku .howtouse .htr-flow li.htr-flow-eh:nth-child(3){
  padding-bottom:3vw;
}

#sku .howtouse .htr-flow li.htr-flow-eh::before{
  content:'';
  background:url('./pc/htr-flow_bg_b.png') no-repeat center top;
  background-size:100% auto;
  height:11.5vw;
  width:100%;
  position:absolute;
  top:-10.7vw;
  left:0;
  right:0;
}

#sku .howtouse .htr-flow li.htr-flow-eh::after{
  content:'';
  background:url('./pc/htr-flow_bg_t.png') no-repeat center top;
  background-size:100% auto;
  height:12vw;
  width:100%;
  position:absolute;
  bottom:-12vw;
  left:0;
  right:0;
}

#sku .howtouse .htr-flow li.htr-flow-eh:nth-child(1)::before{
  content:none;
}

#sku .howtouse .htr-flow li.htr-flow-eh:nth-child(3)::after{
  content:none;
}

#sku .howtouse .htr-flow .flow-ld{
  position:relative;
  z-index:2;
  display:flex;
  align-items: center;
  width:90%;
  margin:0 auto;
}

#sku .howtouse .htr-flow .flow-ld .flow-img{
  width:30%;
  padding-right:3%;
}

#sku .howtouse .htr-flow .flow-ld .flow-rt{
  width:60%;
  
}

#sku .howtouse .htr-flow .flow-ld .flow-rt dt{
  font-size:clamp(1.3rem, 2vw, 2.5rem);
  letter-spacing:.5rem;
  font-weight:600;
  text-align:left;
  line-height:1.7;
  padding-top:1rem;
}

#sku .howtouse .htr-flow .flow-ld .flow-rt dd{
  font-size:clamp(.9rem, 1.5vw, 1.5rem);
  letter-spacing:.3rem;
  text-align:left;
  line-height:2;
  padding-top:1rem;
}

#sku .howtouse .htr-flow .flow-ld .cream{
  position:absolute;
  top:0;
  right:-10%;
  width:30%;
}

#sku .howtouse .htr-flow .flow-lv{
  list-style:none;
  display:flex;
  justify-content: center;
  padding:3vw 0 0 0;
  margin:0;
}

#sku .howtouse .htr-flow .flow-lv li{
  padding:0;
  margin:0;
  width:33.33%;
  border:1px solid #4c4a4a;
  font-size:clamp(1rem, 2vw, 1.8rem);
  padding:1rem 0;
  margin-right:-1px;
}

#sku .howtouse .htr-flow .atten{
  text-align:right;
}

#sku .howtouse .htr-flow .flow-md{
  display:flex;
  justify-content: space-between;
  padding:1vw 0 0 0;
}

#sku .howtouse .htr-flow .flow-md .flow-md-img{
  width:48%;
}

#sku .howtouse .htr-flow .flow-point{
  width:90%;
  border:1px solid #4c4a4a;
  margin:2vw auto 1vw auto;
  position:relative;
  padding:1vw 2vw;
  font-size:clamp(.9rem, 1.8vw, 1.7rem);
  letter-spacing:.3rem;
  line-height:2;
}

#sku .howtouse .htr-flow .flow-point::after{
  content:'';
  background:url('./pc/htu-flow-point-tl.png') no-repeat center center;
  background-size:90% auto;
  background-color:#FFFFFF;
  width:5em;
  height:2em;
  position:absolute;
  top:-1.5vw;
  left:3vw;
}

#sku .howtouse .htr-flow li.htr-flow-eh:nth-child(3) .atten{
  text-align:center;
}

@media only screen and (min-width: 1000px){
  #sku .howtouse .htr-flow li.htr-flow-eh{
    margin:9em 0;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh:nth-child(1){
    margin-top:3em;
  }
  #sku .howtouse .htr-flow li.htr-flow-eh::before{
    height:7.5em;
    top:-7.5em;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh::after{
    height:7.5em;
    bottom:-7.5em;
  }
  #sku .howtouse .htr-flow li.htr-flow-eh:nth-child(1){
    padding-top:30px;
    margin-top:3rem;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh:nth-child(3){
    padding-bottom:30px;
    margin-bottom:3em;
  }
}

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

  #sku .howtouse .container{
    padding:0;
  }
  #sku .howtouse .howto-recom{
    width:100%;
  }

  #sku .howtouse .howto-recom .htr dt{
    letter-spacing:.2rem;
  }

  #sku .howtouse .howto-recom .htr dd{
    padding:2vw 0;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh{
    margin:15vw 0;
    padding:0 5%;
  }
  #sku .howtouse .htr-flow li.htr-flow-eh:nth-child(1){
    margin:3vw 0 15vw 0;
  }
  #sku .howtouse .htr-flow li.htr-flow-eh:nth-child(3){
    margin:15vw 0 0 0;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh::before{
    height:12vw;
    top:-11.5vw;
  }

  #sku .howtouse .htr-flow li.htr-flow-eh::after{
    height:12vw;
    bottom:-12vw;
  }

  #sku .howtouse .htr-flow .flow-ld{
    width:100%;
  }

  #sku .howtouse .htr-flow .flow-lv li{
    padding:1vw 0;
  }

  #sku .howtouse .htr-flow .flow-ld .flow-rt dt{
    letter-spacing:.2rem;
  }

  #sku .howtouse .htr-flow .flow-ld .flow-rt dd{
    letter-spacing:.1rem;
  }

  #sku .howtouse .htr-flow .flow-ld .cream{
    right:-3vw;
    top:5vw;
    width:25%;
  }

  #sku .howtouse .htr-flow .flow-point{
    letter-spacing:0;
    padding:2vw 1vw;
  }

  #sku .howtouse .htr-flow .flow-point::after{
    top:-3.2vw;
  }
}

/*-------------------
example
-------------------*/

#sku .example{
  
}

#sku .example .exam-mv-bx{
  position:relative;
  padding:1vw 5% 5vw 5%;
}

#sku .example .exam-mv-bx.lift{
  background:url('./pc/exam_lift_bg.png') no-repeat center top;
  background-size:cover;
}

#sku .example .exam-mv-bx.boost{
  background:url('./pc/exam_boost_bg.png') no-repeat center top;
  background-size:cover;
}

#sku .example .exam-mv-bx .exam_pr{
  position:absolute;
  bottom:-3vw;
  left:5%;
  width:20%;
}

#sku .example .exam-mv-bx .exam_tl{
  width:50%;
  margin:0 auto;
  padding:3vw 0;
}

#sku .example .exam-mv-bx .exam_mv{
  width:70%;
  margin:0 0 0 auto;
}

#sku .example .exam-mv-bx .exam_lead{
  font-size:clamp(.8rem, 1.5vw, 1.4rem);
  position:absolute;
  bottom:1rem;
  left:0;
  right:0;
  
}

#sku .example .exam-desc-bx{
  display:flex;
  justify-content: center;
  padding:5vw 0;
}

#sku .example .exam-desc-bx .exam_desk{
  width:40%;
  padding-right:5%;
}

#sku .example .exam-desc-bx .exam_desk_rt{
  width:48%;
}

#sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step{
  list-style:none;
  text-align:left;
  padding:1vw 0 0 0;
}

#sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li{
  padding-bottom:1rem;
}

#sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li .step{
  color:#FFFFFF;
  font-size:clamp(1.4rem, 2vw, 2.5rem);
  display:inline-block;
  font-weight:500;
  letter-spacing:.2rem;
  padding:.5rem 1rem;
  line-height:1;
}

#sku .example .exam-desc-bx.lift .exam_desk_rt .exam_desk_step li .step{
  background:#acc5d8;
}

#sku .example .exam-desc-bx.boost .exam_desk_rt .exam_desk_step li .step{
  background:#b5a9cd;
}

#sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li .lead{
  font-size:clamp(1rem, 1.5vw, 1.5rem);
  font-weight:400;
  letter-spacing:.3rem;
  line-height:1.8;
  border-left:1px solid #4c4a4a;
  padding:0 0 0 1.5rem;
  margin:1vw 0;
}

#sku .example .exam-desc-bx .atten{
  text-align:left;
  padding-top:0;
  padding-bottom:1rem;
}

#sku .example .exam-desc-bx .atten li{
  font-size:clamp(.7rem, 1.2vw, 1.2rem);
}

#sku .example .pcv{
  display:block;
}

#sku .example .spv{
  display:none;
}

@media only screen and (min-width: 1000px){
  #sku .example .exam-mv-bx{
    padding:20px 5% 50px 5%;
  }

  #sku .example .exam-mv-bx .exam_pr{
    bottom:-3em;
  }

  #sku .example .exam-mv-bx .exam_tl{
    padding:50px 0;
  }

  #sku .example .exam-desc-bx{
    padding:80px 0;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step{
    padding:1rem 0 0 0;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li .lead{
    margin:2rem 0;
  }
}
@media only screen and (max-width: 768px){
  #sku .example .container{
    padding:0;
  }

  #sku .example .exam-mv-bx{
    padding:1vw 5% 8vw 5%;
  }

  #sku .example .exam-mv-bx .exam_pr{
    position:absolute;
    bottom:-3vw;
    left:2vw;
    width:21%;
  }

  #sku .example .exam-mv-bx .exam_lead{
    position:absolute;
    bottom:3vw;
    left:23%;
  }

  #sku .example .exam-desc-bx{
    display:flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding:10vw 5% 10vw 5%;
  }

  #sku .example .exam-desc-bx .exam_desk{
    width:60%;
    margin:0 auto 0 7%;
    padding-right:0;
  }

  #sku .example .exam-desc-bx .exam_desk_rt{
    width:100%;
    padding-top:5vw;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step{
    list-style:none;
    text-align:left;
    padding:1vw 0 0 0;
    margin-bottom:0;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li{
    padding-bottom:1rem;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li .step{

    padding:.2rem 1rem;
  }

  #sku .example .exam-desc-bx .exam_desk_rt .exam_desk_step li .lead{
    letter-spacing:.1rem;
    padding:0 0 0 2vw;
    margin:1vw 0;
  }

  #sku .example .exam-desc-bx .atten{
    padding-top:2vw;
  }

  #sku .example .pcv{
    display:none;
  }

  #sku .example .spv{
    display:block;
  }
}

/*-------------------
anoproduct
-------------------*/

#sku .anproduct{
  background: linear-gradient(-45deg,rgba(255, 255, 255, 1) 0%, rgba(233, 229, 234, 1) 36%, rgba(255, 255, 255, 1) 66%, rgba(233, 229, 234, 1) 100%);
  padding-bottom:10vw;
}

#sku .anproduct .anopr-mainimg{
  width:95%;
  margin:0 auto;
}

#sku .anproduct .product-bx{
  background:#FFFFFF;
  width:95%;
  margin:0 auto;
  padding:5vw 5vw 2vw 5vw;
  position:relative;
}

#sku .anproduct .product-bx .pic{
  width:20%;
  position:absolute;
  top:2vw;
  left:-2vw;
}

#sku .anproduct .product-bx .prinfo{
  width:80%;
  max-width:700px;
  margin:0 auto;
  display:flex;
  justify-content: center;
  align-items: center;
}

#sku .anproduct .product-bx .prinfo .prinfo-img{
  width:42%;
  margin:0 0 0 auto;
}

#sku .anproduct .product-bx .prinfo .pr{
  width:58%;
  margin:0 auto;
}

#sku .anproduct .product-bx .prinfo .pr h3{
  font-size:clamp(1.6rem, 3vw, 3.5rem);
  font-weight:600;
  line-height:1.8;
  letter-spacing:.5rem;
  font-family:'Noto Serif', serif;
  margin:0 auto;
  color:#000000;
}

#sku .anproduct .product-bx .prinfo .pr h3 .sml{
  font-weight:500;
  font-size:65%;
  letter-spacing:.2rem;
  line-height:1.4;
  display:block;
}

#sku .anproduct .product-bx.pr01 .prinfo .pr h3{
  color:#89acc7;
}

#sku .anproduct .product-bx.pr02 .prinfo .pr h3{
  color:#9684b7;
}

#sku .anproduct .product-bx .prinfo .pr .prinfo-lg{
  width:70%;
  margin:0 auto;
  padding:3vw 0 2vw 0;
}

#sku .anproduct .product-bx .prinfo .pr .prinfo-prc{
  color:#4c4a4a;
  font-size:clamp(.7rem, 1vw, 1.4rem);
  letter-spacing:.1rem;
  line-height:1.8;
}

#sku .anproduct .anopr-point{
  list-style:none;
  padding-left:0;

}

#sku .anproduct .anopr-point .pointlist{
  padding:5vw 0;
}

#sku .anproduct .anopr-point .pointlist .point-pic{
  font-size:clamp(1rem, 2vw, 1.8rem);
  font-weight:600;
  color:#4c4a4a;
  letter-spacing:.5rem;
  border-bottom:1px solid #4c4a4a;
  padding:0 .5rem;
  display:inline-block;
}

#sku .anproduct .anopr-point .pointlist .point1-wp{
  position:relative;
}

#sku .anproduct .anopr-point .pointlist .point1-wp .point1-img{
  width:100%;
  position:absolute;
  margin:0 auto;
  top:2.5vw;
  left:0;
  right:0;
  padding-right:65vw;
  padding-left:15vw;
}

#sku .anproduct .anopr-point .pointlist .point-header{
  padding:3vw 0;
}

#sku .anproduct .anopr-point .pointlist.point01 .point1-wp .point-header{
  padding-left:10%;
}

#sku .anproduct .anopr-point h4{
  background:#FFFFFF;
  font-family:'Noto Serif', serif;
  font-size:clamp(1.4rem, 3vw, 3rem);
  display:inline-block;
  color:#000000;
  font-weight:600;
  letter-spacing:.5rem;
  margin:1vw auto 3vw auto;
}

#sku .anproduct .anopr-point .pointlist.point01 h4{
  margin:1vw auto;
}

#sku .anproduct .anopr-point .point-header .lead{
  font-size:clamp(.9rem, 2vw, 1.4rem);
  letter-spacing:.5rem;
  color:#000000;
  font-weight:400;
  line-height:1.8;
}

#sku .anproduct .anopr-point .pointlist .point-wp{
  width:80%;
  max-width:800px;
  margin:0 auto;
}

#sku .anproduct .anopr-point .pointlist.point03 .point-wp{
  width:80%;
  max-width:800px;
  margin:0 auto;
}

#sku .anproduct .anopr-point .pointlist .point-wp .point01-lead{
  margin:0 auto 3rem auto; /* 外側余白 */
  padding: .5rem; /* 内側余白 */
  position: relative; /* 配置基準 */
  color: #000000; /* 文字色（＝装飾色の基準） */
  font-size:clamp(1.1rem, 2vw, 2rem);
  letter-spacing:.5rem;
  line-height:1.8;
  font-weight:500;
}

#sku .anproduct .anopr-point .pointlist .point-wp .point01-lead::before,
#sku .anproduct .anopr-point .pointlist .point-wp .point01-lead::after {
  content: '';
  height: 100%; /* ボックス高 */
  width: 0.75em; /* カッコ幅 */
  position: absolute; /* 位置指定 */
  bottom: 0; /* 下端揃え */
  border-top: 1px solid currentColor; /* 上線 */
  border-bottom: 1px solid currentColor; /* 下線 */
}

#sku .anproduct .anopr-point .pointlist .point-wp .point01-lead::before {
  left: 0; /* 左配置 */
  border-left: 1px solid currentColor; /* 左カッコ */
}

#sku .anproduct .anopr-point .pointlist .point-wp .point01-lead::after {
  right: 0; /* 右配置 */
  border-right: 1px solid currentColor; /* 右カッコ */
}

#sku .anproduct .anopr-point .pointlist .point-wp .point-txt{
  font-size:clamp(.9rem, 2vw, 1.4rem);
  letter-spacing:.5rem;
  color:#000000;
  font-weight:400;
  line-height:1.8;
}

#sku .anproduct .anopr-point .pointlist .point-wp .point03-img{
  display:flex;
}

#sku .anproduct .anopr-point .pointlist .point-wp .point03-img li{
  padding:0 1%;
}

@media only screen and (min-width: 1000px){
  #sku .anproduct{
    padding:8em;
  }

  #sku .anproduct .product-bx{
    padding:30px 30px 10px 30px;
  }

  #sku .anproduct .product-bx .pic{
    top:2rem;
  }

  #sku .anproduct .product-bx .prinfo .pr .prinfo-lg{
    padding:30px 0 20px 0;
  }

  #sku .anproduct .anopr-point h4{
    margin:2rem auto 3rem auto;
  }

  #sku .anproduct .anopr-point .pointlist{
    padding:50px 0;
  }

  #sku .anproduct .anopr-point .pointlist .point1-wp .point1-img{
    width:700px;
    top:3rem;
    padding-right:55rem;
    padding-left:0;
  }

  #sku .anproduct .anopr-point .pointlist .point-header{
    padding:50px 0;
  }

  #sku .anproduct .anopr-point .pointlist.point02 .point-header,
  #sku .anproduct .anopr-point .pointlist.point03 .point-header{
    padding:50px 0 20px 0;
  }
}

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

  #sku .anproduct .product-bx{
    padding:8vw 5vw 2vw 5vw;
  }
  #sku .anproduct .product-bx .pic{
    width:25%;
    top:-10vw;
    left:-5vw;
  }

  #sku .anproduct .product-bx .prinfo{
    width:95%;
    margin:0 0 0 auto;
  }

  #sku .anproduct .product-bx .prinfo .prinfo-img{
    width:40%;
    margin:0 0 0 auto;
  }

  #sku .anproduct .product-bx .prinfo .pr{
    width:60%;
    margin:0 auto 0 -2vw;
  }

  #sku .anproduct .product-bx .prinfo .pr h3{
    letter-spacing:.2rem;
  }

  #sku .anproduct .product-bx .prinfo .pr h3 .sml{
    letter-spacing:0;
  }

  #sku .anproduct .product-bx .prinfo .pr .prinfo-prc{
    letter-spacing:0;
  }

  #sku .anproduct .anopr-point{
    padding:0;
    margin:0;
  }

  #sku .anproduct .anopr-point .pointlist .point-pic{
    letter-spacing:.2rem;
  }

  #sku .anproduct .anopr-point .pointlist .point1-wp .point1-img{
    width:100%;
    position:absolute;
    margin:0 auto;
    top:1vw;
    left:0;
    right:0;
    padding-right:70vw;
    padding-left:5vw;
  }

  #sku .anproduct .anopr-point .pointlist .point-header{
    padding:3vw 0;
  }

  #sku .anproduct .anopr-point .pointlist.point01 .point1-wp .point-header{
    padding-left:10%;
  }

  #sku .anproduct .anopr-point h4{
    letter-spacing:.2rem;
    margin:1vw auto 3vw auto;
  }

  #sku .anproduct .anopr-point .pointlist.point01 h4{
    margin:1vw auto;
  }

  #sku .anproduct .anopr-point .point-header .lead{
    letter-spacing:.1rem;
  }

  #sku .anproduct .anopr-point .pointlist .point-wp{
    width:90%;
  }

  #sku .anproduct .anopr-point .pointlist.point03 .point-wp{
    width:80%;

  }

  #sku .anproduct .anopr-point .pointlist .point-wp .point01-lead{
    letter-spacing:.2rem;
    width:90%;
  }

  #sku .anproduct .anopr-point .pointlist .point-wp .point-txt{
    letter-spacing:.1rem;
  }


  #sku .anproduct .anopr-point .pointlist .point-wp .point03-img{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #sku .anproduct .anopr-point .pointlist .point-wp .point03-img li{
    width:30%;
    padding:0 1%;
  }

}

