@charset "utf-8";

/* ==========================================================
  Pureal Lab+ 商品紹介ページ
  #sku  : 美顔器・クリーム（既存）
  #bsec : アイクリーム（追加）
  #kv-sku / #kv-bsec : メインKVスライダー内の各スライド
========================================================== */

@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');

/*-------------------
common
-------------------*/

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

#sku img, #bsec img, #kv-sku img, #kv-bsec img{
  width:100%;
  height:auto;
}

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

#sku br.sp, #bsec br.sp{
  display:none;
}

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

#sku h2, #bsec 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, #bsec h2{
    padding:80px 0;
  }
}

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

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

#sku h2 span::after, #bsec 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, #bsec .atten{
  text-align:center;
  font-size:clamp(0.6rem, 0.9vw, 1rem);
  line-height:1.6;
  color:#4c4a4a;
}

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

/*-------------------
linksec（購入ボタン）
-------------------*/

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

#bsec .linksec{
  padding:50px 0 25px 0;
}

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

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

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

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

/* 旧：HTMLのstyle="background:#bf0000;padding:5px;"をCSSへ移動 */
#sku .linksec .lk-raku button, #bsec .linksec .lk-raku button{
  background:#bf0000;
  border:none;
  padding:5px;
}

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

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

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

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

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

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

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

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

/*-------------------
main KV slider
-------------------*/

.main-kv-slider{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* 2枚のスライドの高さを揃える（1枚目の高さに合わせる）
   2枚目のメイン画像は上端（ヘッダー下）の位置はそのままに、
   スライド下端まで届くよう高さ基準で拡大（右端基準で左へ広がる） */
.main-kv-slider .swiper-slide{
  height:auto;
}

#kv-sku, #kv-bsec,
#kv-sku .kv, #kv-bsec .kv{
  height:100%;
}

/* ページネーション（●）
   テーマの swiper_layout.css が .swiper-pagination / -bullet を !important で
   タブ型デザイン・SPでは非表示にしているため、ここで上書き */
.main-kv-slider .swiper-pagination{
  display:block !important;
  position:absolute !important;
  top:auto !important;
  bottom:15px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  z-index:10;
  line-height:1;
}

.main-kv-slider .swiper-pagination .swiper-pagination-bullet{
  display:inline-block;
  width:12px !important;
  height:12px !important;
  padding:0 !important;
  margin:0 6px !important;
  border-radius:50% !important;
  background-color:rgba(76, 74, 74, .25) !important;
  opacity:1;
  font-size:0 !important;
  line-height:0 !important;
  vertical-align:middle;
  cursor:pointer;
  transition:background-color .3s;
}

.main-kv-slider .swiper-pagination .swiper-pagination-bullet::before{
  content:none;
}

.main-kv-slider .swiper-pagination .swiper-pagination-bullet:hover,
.main-kv-slider .swiper-pagination .swiper-pagination-bullet-active{
  background-color:#4c4a4a !important;
}

@media only screen and (max-width: 768px){
  .main-kv-slider .swiper-pagination{
    bottom:8px !important;
  }

  .main-kv-slider .swiper-pagination .swiper-pagination-bullet{
    width:9px !important;
    height:9px !important;
    margin:0 5px !important;
  }
}

/* KV：美顔器・クリーム */
#kv-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;
  padding-top:8%;
}

#kv-sku .kv .lg{
  position:absolute;
  top:22%;
  left:18%;
  width:28%;
}

#kv-sku .kv .mainimg{
  padding-left:50%;
  padding-right:8%;
}

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

/* KV：アイクリーム */
#kv-bsec .kv{
  width:100%;
  position:relative;
  background: radial-gradient(circle,rgba(242, 222, 232, 1) 11%, rgba(240, 198, 210, 1) 84%);
  background-size:cover;
  padding-top:70px;
}

#kv-bsec .kv .lg{
  position:absolute;
  z-index:2;
  top:22%;
  left:18%;
  width:23%;
}

#kv-bsec .kv .pr-img{
  position:absolute;
  bottom:-2vw;
  right:10vw;
  width:30%;
}

#kv-bsec .kv .pr-img .pr-img-bg{
  position:absolute;
  top:0;
  left:0;
  right:0;
  mix-blend-mode: screen;
  z-index:1;
}

#kv-bsec .kv .pr-img .pr-img-pr{
  position:relative;
  z-index:3;
}

#kv-bsec .kv .mainimg{
  position:absolute;
  top:70px;
  bottom:0;
  right:8%;
}

#kv-bsec .kv .mainimg picture{
  display:block;
  height:100%;
}

#kv-bsec .kv .mainimg img{
  display:block;
  width:auto;
  height:100%;
  max-width:none;
}


/* KV：ロゴ下のカタカナ商品名（ロゴ幅に合わせて文字サイズを可変） */
#kv-sku .kv .lg, #kv-bsec .kv .lg{
  container-type:inline-size;
  margin:0;
}

.kv .lg .lg-kana{
  display:block;
  margin-top:3cqw;
  color:#4c4a4a;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  white-space:nowrap;
}

.kv .lg .lg-kana > span + span{
  margin-left:1em;
}

#kv-bsec .kv .lg .lg-kana{
  font-size:3.5cqw;
}

#kv-sku .kv .lg .lg-kana{
  font-size:2.8cqw;
}

#kv-sku .kv .lg .lg-kana > span + span{
  margin-left:0;
}

#kv-sku .kv .lg .lg-kana > span:nth-child(2){
  margin-left:1em;
}

/* KVアニメーション：表示中のスライド（.swiper-slide-active）になるたびに再生 */
.main-kv-slider .swiper-slide-active #kv-sku .kv .lg,
.main-kv-slider .swiper-slide-active #kv-bsec .kv .lg{
  animation:fadeInLeft 1s .5s backwards;
}

.main-kv-slider .swiper-slide-active #kv-sku .kv .mainimg{
  animation:fadeInBottom 1s .5s backwards;
}

.main-kv-slider .swiper-slide-active #kv-bsec .kv .mainimg{
  animation:fadeInRight 1s .5s backwards;
}

.main-kv-slider .swiper-slide-active #kv-bsec .kv .pr-img .pr-img-pr{
  animation:fadeInBottom 2s .8s backwards;
}

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

@media only screen and (max-width: 768px){
  #kv-sku .kv{
    padding-top:23%;
  }

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

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

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

  #kv-bsec .kv .lg{
    top:35%;
    left:10%;
    width:30%;
  }

  /* SP：ロゴ幅が狭いため商品名を改行して表示 */
  .kv .lg .lg-kana > span{
    display:block;
  }

  .kv .lg .lg-kana > span + span,
  #kv-sku .kv .lg .lg-kana > span:nth-child(2){
    margin-left:0;
  }

  #kv-sku .kv .lg .lg-kana .sep{
    display:none;
  }

  #kv-bsec .kv .lg .lg-kana,
  #kv-sku .kv .lg .lg-kana{
    font-size:max(9px, 2.3vw);
    line-height:1.4;
  }

  #kv-bsec .kv .pr-img{
    bottom:-2vw;
    right:-5vw;
    width:55%;
  }

  /* SP：顔がロゴ文字と重ならないよう、画像を右へずらす（右端ははみ出して隠れる）
     必要な移動量は画面幅に比例しないため calc で調整（375px幅で約23px右へ） */
  #kv-bsec .kv .mainimg{
    right:calc(48px - 19%);
  }
}

/*-------------------
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);
  }
}

@-webkit-keyframes fadeInRight {
  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 fadeInRight {
  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);
  }
}


/* ##########################################################
  #sku : 美顔器・クリーム
########################################################## */

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

#sku .about{
  background-image: url('./pc/about_bg.webp');
  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 1.5rem;
  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.webp');
    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.webp') repeat-y center top;
  background-size:100% auto;
}

@media only screen and (max-width: 768px){
  #sku .mainpr{
    background:url('./mobile/mainpr_bg.webp') 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.webp') no-repeat center center;
  background-size:100% auto;
  padding:2vw;
}

#sku .products .product-bx.pr02 .pr-spec{
  background:url('./pc/product_pr02_spc_bg.webp') 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.webp') no-repeat center center;
    background-size:100% auto;
    padding:2vw;
  }

  #sku .products .product-bx.pr02 .pr-spec{
    background:url('./mobile/product_pr02_spc_bg.webp') 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.webp') 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.webp') 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.webp') 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.webp') no-repeat center top;
  background-size:cover;
}

#sku .example .exam-mv-bx.boost{
  background:url('./pc/exam_boost_bg.webp') 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%;
  }

}


/* ##########################################################
  #bsec : アイクリーム
########################################################## */

/*-------------------
base
旧HTMLでは #sku の閉じタグが無く #bsec が #sku 内に入っていたため、
#sku 用の以下の指定が #bsec にも効いていた。見た目を維持するため #bsec 用に明記。
-------------------*/
/* アイクリーム商品：画像を上、商品名・内容量・価格を下に配置 */
#bsec .products .product-bx .prinfo{
  max-width:600px;
  margin:0 auto;
  padding:0 2%;
}

#bsec .products .product-bx .prinfo .pr .prinfo-lg{
  padding:0 0 .5em 0;
}

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

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

#bsec .howtouse .htr-flow .flow-md{
  justify-content: space-between;
  padding:0 0 0 0;
}

@media only screen and (max-width: 768px){
  #bsec .howtouse .container{
    padding:0;
  }
}

/*-------------------
mbg
-------------------*/
#bsec #mbg{
  background-image: linear-gradient(rgba(236, 112, 151, .22), rgba(236, 112, 151, .22)), url('./pc/eye_mbg.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size:cover;
}

@media only screen and (max-width: 768px){
  #bsec #mbg{
    background-image: linear-gradient(rgba(236, 112, 151, .22), rgba(236, 112, 151, .22)), url('./mobile/eye_mbg.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
  }
}

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

#bsec .products{
  
}


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


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


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

#bsec .products .product-bx .pr-ld{
  font-size:clamp(1.1rem, 2.3vw, 2.2rem);
  font-weight:600;
  letter-spacing:.5rem;
  line-height:2.2;
}

#bsec .products .product-bx .pr-ld h3{
  padding:0;
  margin:0;
  font-size:clamp(1.6rem, 3.5vw, 4.2rem);
  font-weight:600;
}

#bsec .products .product-bx .pr-ld .udl{
  border-bottom:1px solid #4c4a4a;
}

#bsec .products .product-bx .pr-ld .txsm{
  font-size:80%;
}

#bsec .txpnk{
  color:#ec7097;
}

#bsec .products .product-bx .pr-ld .pr-ld-sm{
  font-size:clamp(.8rem, 1.5vw, 1.5rem);
  font-weight:500;
  letter-spacing:.1rem;
  padding-top:1em;
}


#bsec .products .product-bx .pr-wrapper{
  display:flex;
  width:80%;
  max-width:660px;
  margin:0 auto;
}

#bsec .products .product-bx .prinfo{
  width:50%;
}

#bsec .products .product-bx .prinfo .prinfo-img{
  padding:3vw 0 2vw 0;
  width:80%;
  margin:0 auto;
}

#bsec .products .product-bx .prinfo .pr{
  text-align:left;
  border-left:3px solid #ec7097;
  padding-left:1vw;
  color:#4c4a4a;
  font-size:clamp(.7rem, 1vw, 1.4rem);
  letter-spacing:.1rem;
  line-height:1.8;
}

#bsec .products .product-bx .prinfo .pr .prinfo-prc{
  display:flex;
  flex-wrap:wrap;
}

#bsec .products .product-bx .prinfo .pr .prinfo-prc dt{
  border:1px solid #4c4a4a;
  font-weight:500;
  width:30%;
  text-align:center;
  margin:.3vw 0;
}

#bsec .products .product-bx .prinfo .pr .prinfo-prc dd{
  width:70%;
  margin:.3vw 0;
  padding-left:.5vw;
}


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

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

  #bsec .products .product-bx .prinfo .prinfo-img{
    padding:1em 0 .5em 0;
  }

  #bsec .products .product-bx .prinfo .pr{
    padding-left:.5em;
  }

  #bsec .products .product-bx .prinfo .pr .prinfo-prc dt{
    margin:.3em 0;
  }

  #bsec .products .product-bx .prinfo .pr .prinfo-prc dd{
    margin:.3em 0;
    padding-left:.5em;
  }



}

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

}

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

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


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

  #bsec .products .product-bx .pr-wrapper{
    display:block;
    width:100%;
    padding-top:3vw;
  }

  #bsec .products .product-bx .prinfo{
    width:100%;
    margin:0 auto;
    padding:0;
  }

  #bsec .products .product-bx .prinfo .prinfo-img{
    width:40%;
  }

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

  #bsec .products .product-bx .prinfo .pr{
    padding-left:2vw;
    letter-spacing:0;
    line-height:1.6;
  }

  #bsec .products .product-bx .prinfo .pr .prinfo-prc{
    padding-top:1vw;
  }

  #bsec .products .product-bx .prinfo .pr .prinfo-prc dt{
    width:25%;
    margin:.5vw 0;
  }

  #bsec .products .product-bx .prinfo .pr .prinfo-prc dd{
    width:75%;
    margin:.5vw 0;
    padding-left:1vw;
  }

  
}


/*-------------------
product-fts
-------------------*/

#bsec .product-fts{
  padding-bottom:10vw;
}

#bsec .product-fts .pr-fts-bx{
  background:#FFFFFF;
  width:95%;
  margin:0 auto 3vw auto;
  padding:2vw 5vw 0 5vw;
  position:relative;
}

#bsec .product-fts .pr-fts-bx h3{
  color:#4c4a4a;
  font-size:clamp(1.6rem, 3.5vw, 4.2rem);
  letter-spacing:1rem;
  line-height:1.8;
  font-weight:600;
}

#bsec .product-fts .pr-fts-bx h3 .txnml{
  font-weight:400;
  font-size:80%;
}

#bsec .product-fts .sbld{
  font-size:clamp(.8rem, 1.5vw, 1.5rem);
  font-weight:500;
  letter-spacing:.1rem;
}

#bsec .product-fts .pr-fts-wrapper{
  display:flex;
  align-items: flex-end;
  padding-top:5vw;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode{
  width:78%;
  padding-bottom:3vw;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-bg{
  width:22%;
  margin:0 auto 0 auto;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list{
  width:95%;
  margin:0 auto 0 0;
  text-align:left;
  padding-bottom:3vw;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4{
  font-size:clamp(1.4rem, 2.5vw, 3rem);
  letter-spacing:.3rem;
  font-weight:600;
  position:relative;
  margin:0;
  padding:0 0 2vw 0;
  
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4::before{
  content:'';
  background-size:100% auto;
  border-radius:100rem;
  width:.9em;
  height:.9em;
  display:inline-block;
  margin-right:.2vw;
  margin-bottom:.2vw;
  vertical-align:bottom;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts01{
  color:#55b779;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts01::before{
  background:#55b779;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts02{
  color:#ed7950;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts02::before{
  background:#ed7950;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts03{
  color:#f9bd4d;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4.fts03::before{
  background:#ffe960;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-ld{
  padding-left:3vw;
  font-size:clamp(1.6rem, 3vw, 3.5rem);
  font-weight:600;
  letter-spacing:.3rem;
  color:#4c4a4a;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw{
  display:flex;
  padding:2vw 0 0 5vw;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-img{
  width:50%;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm{
  width:50%;
  padding-left:2vw;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm li{
  text-indent:-1em;
  padding-left:1em;
  font-size:clamp(.7rem, 1.5vw, 2.1rem);
  padding:.3vw 0;
}

#bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm li.atten{
  text-align:right;
  font-size:clamp(.6rem, 0.9vw, 1rem);
}

#bsec .product-fts .fts-design{
  width:70%;
  margin:0 auto;
  background:url(./pc/eye_fts-design_bg.webp) no-repeat left top;
  background-size:70% auto;
  padding:15vw 0 10vw 0;
}

#bsec .product-fts .fts-design .fts-design-in{
  margin:0 0 0 auto;
  width:40%;
}

#bsec .product-fts .fts-design .fts-design-in dt{
  background:#ec7097;
  color:#FFFFFF;
  font-size:clamp(1.4rem, 2.5vw, 3rem);
  letter-spacing:1rem;
  line-height:1;
  font-weight:600;
  padding:1.5vw 1vw;
}

#bsec .product-fts .fts-design .fts-design-in .fts-design-list{
  padding-top:2vw;
}

#bsec .product-fts .fts-design .fts-design-in .fts-design-list li{
  font-size:clamp(.9rem, 1.5vw, 1.8rem);
  letter-spacing:.3rem;
  text-align:left;
  padding:.5vw 0;
  position:relative;
}

#bsec .product-fts .fts-design .fts-design-in .fts-design-list li::before{
  content:'';
  background:url(./pc/eye_list_pic.webp) no-repeat center center;
  background-size:100% auto;
  width:1.2em;
  height:1em;
  display:inline-block;
  padding-right:.3vw;
}

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

  #bsec .product-fts .pr-fts-bx{
    margin:0 auto 50px auto;
    padding:50px 100px 0 100px;
  }

  #bsec .product-fts .pr-fts-wrapper{
    padding-top:3em;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode{
    padding-bottom:50px;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list{
    padding-bottom:1em;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4{
    padding:0 0 .5em 0;
    
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list h4::before{
    width:.9em;
    height:.9em;
    margin-right:.3em;
    margin-bottom:.2vw;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-ld{
    padding-left:.5em;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw{
    padding:.5em 0 0 2.5em;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm{
    padding-left:2em;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm li{
    padding:.3em 0;
  }

  #bsec .product-fts .fts-design{
    padding:180px 0 130px 0;
  }

  #bsec .product-fts .fts-design .fts-design-in dt{
    padding:.5em 1em;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list{
    padding-top:1em;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list li{
    padding:.3em 0;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list li::before{
    padding-right:.5em;
  }

}

@media only screen and (max-width: 768px){
  #bsec .product-fts{
    padding-bottom:3vw;
  }

  #bsec .product-fts .pr-fts-bx h3{
    letter-spacing:.5rem;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode{
    width:75%;
    padding-bottom:3vw;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-bg{
    width:25%;
    margin:0 auto 0 auto;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-ld{
    padding-left:1vw;
    letter-spacing:.1rem;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw{
    padding:2vw 0 0 3vw;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-img{
    width:40%;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm{
    width:60%;
    padding-left:3vw;
  }

  #bsec .product-fts .pr-fts-wrapper .pr-fts-mode .pr-fts-list .pr-fts-imgw .pr-fts-cm li{
    letter-spacing:.1rem;
    padding:.5vw 0;
  }

  #bsec .product-fts .fts-design{
    width:80%;
    margin:0 auto;
    background:url(./mobile/eye_fts-design_bg.webp) no-repeat left top;
    background-size:65% auto;
    padding:13vw 0 5vw 0;
  }

  #bsec .product-fts .fts-design .fts-design-in{
    width:45%;
  }

  #bsec .product-fts .fts-design .fts-design-in dt{
    letter-spacing:.3rem;
    padding:1.5vw 0;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list{
    padding-top:2vw;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list li{
    letter-spacing:.1rem;
    padding:1vw 0;
  }

  #bsec .product-fts .fts-design .fts-design-in .fts-design-list li::before{
    background:url(./mobile/eye_list_pic.webp) no-repeat center center;
    background-size:100% auto;
    padding-right:1vw;
  }
}


/*-------------------
component
-------------------*/

#bsec .component{
  padding-bottom:10vw;
}

#bsec .component .component-bx{
  background:#FFFFFF;
  width:95%;
  margin:0 auto;
  padding:5vw 5vw 5vw 5vw;
  position:relative;
}


#bsec .component .cpnt-list{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
  margin:0 auto;
}

#bsec .component .cpnt-list .cpnt-list01{
  width:100%;
  padding-bottom:3vw;
}

#bsec .component .cpnt-list .cpnt-list01 h3{
  color:#4c4a4a;
  font-size:clamp(1.6rem, 3.5vw, 4.2rem);
  letter-spacing:.3rem;
  line-height:1.2;
  font-weight:600;
}

#bsec .component .cpnt-list h3 .txsm{
  font-size:60%;
}

#bsec .component .cpnt-list h3 .txlny{
 background: linear-gradient(transparent 70%, #ffff00 30%);
}

#bsec .component .cpnt-list .cpnt-list02{
  width:50%;
}

#bsec .component .cpnt-list .cpnt-list03{
  width:50%;
}

#bsec .component .cpnt-list .cpnt-list02 h3, #bsec .component .cpnt-list .cpnt-list03 h3{
  color:#4c4a4a;
  font-size:clamp(1.4rem, 3vw, 4rem);
  letter-spacing:.3rem;
  line-height:1.6;
  font-weight:600;
}

#bsec .component .cpnt-list .cpnt-cm{
  font-size:clamp(.9rem, 1.5vw, 1.9rem);
  letter-spacing:.3rem;
  font-weight:600;
  line-height:1.6;
}

#bsec .component .cpnt-list .cpnt-img{
  width:50%;
  margin:0 auto;
}

#bsec .component .cpnt-list .cpnt-list01 .cpnt-img{
  width:40%;
  margin:0 auto;
}

#bsec .component .cpnt-ctg{
  display:flex;
  padding-top:5vw;
}

#bsec .component .cpnt-ctg dt{
  background:#ec7097;
  color:#FFFFFF;
  font-size:clamp(.8rem, 1.5vw, 1.8rem);
  letter-spacing:.3rem;
  padding:1vw 0;
}

#bsec .component .cpnt-ctg dt .txsm{
  font-size:80%;
}

#bsec .component .cpnt-ctg dl{
  padding:0 1vw;
  margin:0;
}

#bsec .component .cpnt-ctg .cpnt-ctg01{
  width:50%;
}

#bsec .component .cpnt-ctg .cpnt-ctg02{
  width:25%;
}

#bsec .component .cpnt-ctg .cpnt-ctg03{
  width:25%;
}

#bsec .component .cpnt-ctg .cpnt-ctg01 dd{
  display:flex;
  justify-content: center;
}

#bsec .component .cpnt-ctg dd .cpnt-ctg-img{
  padding:2vw;
}

#bsec .component .cpnt-ctg .cpnt-ctg01 dd .cpnt-ctg-img{
  width:48%;
}


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

  #bsec .component .component-bx{
    margin:0 auto;
    padding:50px;
  }

  #bsec .component .cpnt-list .cpnt-list01{
    padding-bottom:1em;
  }

  #bsec .component .cpnt-ctg{
    padding-top:3em;
  }

  #bsec .component .cpnt-ctg dt{
    padding:.5em 0;
  }

  #bsec .component .cpnt-ctg dl{
    padding:0 .5em;
  }
}

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

  #bsec .component .cpnt-list .cpnt-list01 h3{
    letter-spacing:.2rem;
  }

  #bsec .component .cpnt-list .cpnt-cm{
    letter-spacing:.2rem;
  }

  #bsec .component .cpnt-ctg dt{
    letter-spacing:.1rem;
    padding:1vw 0;
  }

  #bsec .component .cpnt-ctg dd .cpnt-ctg-img{
    padding:1vw .3vw;
  }

  #bsec .component .cpnt-ctg .cpnt-ctg01 dd .cpnt-ctg-img{
    width:48%;
  }

}


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

#bsec .howtouse{
  padding-bottom:10vw;
}

#bsec .howtouse .howtouse-bx{
  display:flex;
  justify-content: center;
  padding:5vw 0;
}

#bsec .howtouse .howtouse-bx .howtouse-img{
  width:40%;
  padding-right:5%;
}

#bsec .howtouse .howtouse-bx .howtouse_rt{
  width:48%;
}


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

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

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

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(2){
  padding:5vw 5%;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh::before{
  content:'';
  background:url('./pc/htr-flow_bg_b.webp') no-repeat center bottom;
  background-size:100% auto;
  height:6vw;
  width:100%;
  position:absolute;
  top:-6vw;
  left:0;
  right:0;
}

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

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

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(2)::after{
  content:none;
}

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

}

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

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-ld .flow-rt{
  width:60%;

}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(1) .flow-ld .flow-rt{
  width:100%;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-ld .flow-rt h3{
  font-size:clamp(1.3rem, 2vw, 2.5rem);
  font-weight:600;
  text-align:center;
  line-height:1.7;
  padding-top:1rem;
  padding:0;
  margin:0;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md-tx{
  font-size:clamp(.9rem, 1.5vw, 1.5rem);
  text-align:center;
  line-height:2;
  padding:1rem 0;
}



#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .atten{

}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md{
  display:flex;
  flex-wrap: wrap;
  background:#f8d1dc;
  margin-bottom:1vw;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt{
  width:40%;
  position:relative;
  font-weight:500;
  font-size:clamp(1.2rem, 1.8vw, 2rem);
  color:#4c4a4a;
  border-right:1px solid #FFFFFF;
  border-bottom:1px solid #FFFFFF;
  padding:1vw;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt::before{
  content:'';
  background-size:100% auto;
  border-radius:100rem;
  width:2vw;
  height:2vw;
  display:inline-block;
  margin-right:.3vw;
  margin-bottom:.3vw;
  vertical-align:bottom;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt.md01::before{
  background:#55b779;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt.md02::before{
  background:#ed7950;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt.md03::before{
  background:#ffe960;
}

#bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dd{
  width:60%;
  font-size:clamp(1.2rem, 1.8vw, 2rem);
  font-weight:500;
  color:#4c4a4a;
  border-bottom:1px solid #FFFFFF;
  padding:1vw;
}


#bsec .howtouse .howto-step-bx{
  width:90%;
  margin:0 auto;
}

#bsec .howtouse .howto-step-bx .howto-step{
  
}

#bsec .howtouse .howto-step-bx .howto-step li{
  display:flex;
  align-items: center;
  background:#FFFFFF;
  padding:.5vw 1vw;
  margin:1.5vw auto;
}

#bsec .howtouse .howto-step-bx .howto-step li .hts-img{
  width:50%;
}

#bsec .howtouse .howto-step-bx .howto-step li .hstep{
  width:50%;
  text-align:left;
  padding-left:2vw;
}

#bsec .howtouse .howto-step-bx .howto-step li .hstep dt{
  font-size:clamp(1.3rem, 2vw, 2.5rem);
  font-weight:600;
  line-height:1;
  letter-spacing:.3rem;
  background:#ec7097;
  color:#FFFFFF;
  display:inline-block;
  padding:.5vw 1vw;
}

#bsec .howtouse .howto-step-bx .howto-step li .hstep dd{
  font-size:clamp(.9rem, 1.5vw, 1.5rem);
  letter-spacing:.2rem;
  color:#4c4a4a;
  border-left:1px solid #4c4a4a;
  margin-top:1vw;
  padding:0 0 0 2vw;
}

#bsec .howtouse .ld{
  font-size:clamp(.9rem, 1.5vw, 1.5rem);
  letter-spacing:.2rem;
  color:#4c4a4a;
  padding-top:3vw;
}

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

  #bsec .howtouse .howtouse-bx{
    padding:0;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh{
    margin:7em 0;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(1){
    padding-top:3em;
    margin-top:0;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(2){
    padding:3em 5%;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md{
    margin-bottom:.5em;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt{
    padding:.5em;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dt::before{
    width:1.2em;
    height:1.2em;
    margin-right:.5em;
    margin-bottom:.1em;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow .flow-md dd{
    padding:.5em;
  }

  #bsec .howtouse .howto-step-bx .howto-step li{
    padding:.3em .5em;
    margin:1em auto;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep{
    padding-left:1em;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep dt{
    padding:.3em .5em;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep dd{
    margin-top:1em;
    padding:0 0 0 1.5em;
  }

  #bsec .howtouse .ld{
    padding-top:1.5em;
  }
}

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

  #bsec .howtouse .howtouse-bx{
    display:block;
    padding:5vw 0;
  }

  #bsec .howtouse .howtouse-bx .howtouse-img{
    width:53%;
    margin:0 auto;
    padding-right:13%;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt{
    width:100%;
    margin:0 auto;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh{
    margin:16vw 0;
  }

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

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh:nth-child(2){
    margin-bottom:0;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh::before{
    background:url('./mobile/htr-flow_bg_b.webp') no-repeat center bottom;
    background-size:100% auto;
    height:12vw;
    top:-12vw;
  }

  #bsec .howtouse .howtouse-bx .howtouse_rt .htr-flow li.htr-flow-eh::after{
    background:url('./mobile/htr-flow_bg_t.webp') no-repeat center top;
    background-size:100% auto;
    height:12vw;
    bottom:-12vw;
  }

  #bsec .howtouse .howto-step-bx{
    width:100%;
  }

  #bsec .howtouse .howto-step-bx .howto-step li{
    display:flex;
    align-items: center;
    background:#FFFFFF;
    padding:.5vw 1vw;
    margin:1.5vw auto;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hts-img{
    width:35%;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep{
    width:65%;
    text-align:left;
    padding-left:2vw;
    padding-top:2vw;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep dt{
    letter-spacing:.2rem;
  }

  #bsec .howtouse .howto-step-bx .howto-step li .hstep dd{
    letter-spacing:0;
    margin-top:1vw;
    padding:0 0 0 2vw;
  }

  #bsec .howtouse .ld{
    letter-spacing:0;
  }
}


/*-------------------
change
-------------------*/

#bsec .change{
  padding-bottom:10vw;
}

#bsec .change .change-step{
  width:90%;
  list-style:none;
  padding:0;
  margin:0 auto;
  display:flex;
}

#bsec .change .change-step li{
  position:relative;
  padding:0 3vw;
}

#bsec .change .change-step li::after{
  content:'';
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 2vw solid transparent;
  border-bottom: 2vw solid transparent;
  border-left: 2vw solid #ec7097;
  border-right: 0;
  position:absolute;
  top:30%;
  right:-1vw;
}

#bsec .change .change-step li:last-child::after{
  content:none;
}

#bsec .change .change-step .change-img{
  
}

#bsec .change .change-step .change-cm{
  font-size:clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing:.2rem;
  color:#4c4a4a;
  padding-top:1vw;
  line-height:1.8;
}

#bsec .change .change-step .change-cm .pcv{
  display:block;
}

#bsec .change .change-step .change-cm .atten{
  padding-top:.5vw;
  letter-spacing:0;
}

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

  #bsec .change .change-step li{
    padding:0 2em;
  }

  #bsec .change .change-step li::after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-left: 2em solid #ec7097;
    border-right: 0;
    position:absolute;
    top:30%;
    right:-1em;
  }

  #bsec .change .change-step .change-cm{
    padding-top:1em;
  }

  #bsec .change .change-step .change-cm .atten{
    padding-top:1em;
  }
}

@media only screen and (max-width: 768px){
  #bsec .change .change-step{
    width:90%;
    list-style:none;
    padding:0;
    margin:0 auto;
    display:block;
  }

  #bsec .change .change-step li{
    position:relative;
    padding:5vw 0;
  }

  #bsec .change .change-step li::after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 3vw solid #ec7097;
    border-bottom: 0;
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent;
    position:absolute;
    top:auto;
    bottom:-2vw;
    right:0;
    left:0;
    margin:0 auto;
  }
  #bsec .change .change-step .change-img{
    width:60%;
    margin:0 auto;
  }

  #bsec .change .change-step .change-cm{
    letter-spacing:.1rem;
  }

  #bsec .change .change-step .change-cm .pcv{
    display:none;
  }
}


/*-------------------
point01
-------------------*/

#bsec .point01{
  background:url(./pc/eye_point01_bg.webp) no-repeat center center;
  background-size:cover;
  padding-bottom:10vw;
}

#bsec .point01 .pointlist{
  padding:5vw 0;
}

#bsec .point01 .pointlist .point-header{
  padding:3vw 0;
}

#bsec .point01 h3{
  background:#FFFFFF;
  font-family:'Noto Serif', serif;
  font-size:clamp(1.4rem, 3vw, 3rem);
  display:inline-block;
  color:#ec7097;
  font-weight:600;
  letter-spacing:.5rem;
  margin:1vw auto 3vw auto;
}


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

#bsec .point01 .pointlist .point-wp{
  width:80%;
  max-width:800px;
  margin:0 auto;
}


#bsec .point01 .pointlist .point-wp .point-img{
  display:flex;
}

#bsec .point01 .pointlist .point-wp .point-img li{
  padding:0 1%;
}

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

  #bsec .point01{
    padding-bottom:50px;
  }

  #bsec .point01 .pointlist{
    padding:3em 0;
  }

  #bsec .point01 .pointlist .point-header{
    padding:1em 0;
  }

  #bsec .point01 h3{
    margin:.5em auto 1em auto;
  }
}

@media only screen and (max-width: 768px){
  #bsec .point01{
    background:url(./mobile/eye_point01_bg.webp) no-repeat center center;
    background-size:cover;
    padding-bottom:0;
  }

  #bsec .point01 .point-header .lead{
    letter-spacing:.2rem;
    margin:0;
  }

  #bsec .point01 .pointlist .point-wp .point-img{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #bsec .point01 .pointlist .point-wp .point-img li{
    padding:1%;
    width:30%;
  }
}


/*-------------------
point02
-------------------*/

#bsec .point02{
  background:#FFFFFF;
  padding:10vw 0;
}

#bsec .point02 .pointlist{
  width:80%;
  max-width:500px;
  margin:0 auto;
}

#bsec .point02 h3{
  font-size:clamp(1.3rem, 2.8vw, 2.8rem);
  font-weight:500;
  letter-spacing:.5rem;
  border-bottom:1px solid #000000;
  padding:0 .2vw .5vw .2vw;
}

#bsec .point02 h3 .txpnk{
  font-size:140%;
  font-weight:600;
  line-height:1;
}

#bsec .point02 h3 .txpnk ruby{
}

#bsec .point02 h3 .txpnk ruby > rt{
  font-size:30%;
  translate: 0 1em;
}

#bsec .point02 .point02-list{
  padding-top:3vw;
}

#bsec .point02 .point02-list li{
  font-size:clamp(1.3rem, 2vw, 2.3rem);
  font-weight:400;
  letter-spacing:.3rem;
  text-align:left;
  position:relative;
  padding:1vw 0;
}

#bsec .point02 .point02-list li::before{
  content:'';
  background:url(./pc/eye_list_pic.webp) no-repeat center center;
  background-size:100% auto;
  width:1.2em;
  height:1em;
  display:inline-block;
  padding-right:.3vw;
}

@media only screen and (min-width: 1000px){
  #bsec .point02{
    padding:50px 0;
  }

  #bsec .point02 h3{
    padding:0 .5em .3em .5em;
  }

  #bsec .point02 .point02-list{
    padding-top:1em;
  }

  #bsec .point02 .point02-list li{
    padding:.5em 0;
  }

  #bsec .point02 .point02-list li::before{
    padding-right:1em;
  }
}

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

  #bsec .point02{
    padding:3vw 0 5vw 0;
  }

  #bsec .point02 .point02-list li{
    letter-spacing:.1rem;
  }

  #bsec .point02 .point02-list li::before{
    background:url(./mobile/eye_list_pic.webp) no-repeat center center;
    background-size:100% auto;
    padding-right:1vw;
  }
}

/*-------------------
point03
-------------------*/

#bsec .point03{
  background-image:radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(234, 236, 241, 1) 40%);
  position:relative;
  overflow:hidden;
}

#bsec .point03 .container{
  background:url(./pc/eye_point03_bg.webp) no-repeat 10% center;
  background-size:auto 100%;
  padding:15vw 0;
}


#bsec .point03 .pointlist{
  padding-left:20%;
}

#bsec .point03 .ld{
  font-size:clamp(1.1rem, 2.3vw, 2.2rem);
  font-weight:400;
  letter-spacing:.5rem;
  line-height:2.2;
  border-bottom:1px solid #4c4a4a;
  display:inline-block;
  padding:0 1vw;
}

#bsec .point03 .ld .txsm{
  font-size:80%;
}

#bsec .point03 h3{
  padding:0;
  margin:0;
  color:#4c4a4a;
  font-size:clamp(1.4rem, 3vw, 3.5rem);
  letter-spacing:1rem;
  line-height:1.8;
  font-weight:600;
}


#bsec .point03 h3 .txl{
  font-size:clamp(1.6rem, 3.5vw, 4.2rem);
  font-weight:600;
}

#bsec .point03 h3 .txnml{
  font-weight:400;
  font-size:80%;
}


#bsec .point03 .point03-cm{
  font-size:clamp(.8rem, 1.5vw, 1.5rem);
  font-weight:400;
  letter-spacing:.1rem;
  padding-top:1em;
}

@media only screen and (min-width: 1000px){
  #bsec .point03 .container{
    padding:150px 0;
  }

  #bsec .point03 .ld{
    padding:0 .5em;
  }
}

@media only screen and (max-width: 768px){
  #bsec .point03 .container{
    background:url(./mobile/eye_point03_bg.webp) no-repeat left center;
    background-size:auto 100%;
  }

  #bsec .point03 .ld{
    letter-spacing:.2rem;
  }

  #bsec .point03 h3{
    letter-spacing:.3rem;
  }

  #bsec .point03 .point03-cm{
    letter-spacing:0rem;
  }
}