@charset "utf-8";

:root{
--color-lbl:#F5F5F8;
--color-lgy:#DBDBDD;
--color-gy:#686868;
--color-bl:#9898A5;
--border-bk:1px solid var(--c-bk);
--border-bl:3px solid var(--color-lbl);
/* --font-min:YuMincho,'Yu Mincho', serif; */
--font-min:"ヒラギノ明朝 ProN","Hiragino Mincho Pro", serif;
/* --font-size-big:clamp(20px, 4vw, 40px); */
--mg-s1:23.076vw;/*10% 100px*/
--mg-s2:11.53vw;/* 8% 60px*/
--mg-s3:5.12vw;/* 6% 40px*/
--mg-s4:3.58vw;/* 4% 20px*/

--mg-p1:8.78vw;/*120px 10% 100px*/
--mg-p2:5.85vw;/* 80px8% 60px*/
--mg-p3:2vw;/*2.92vw 40px 6% 40px*/
--mg-p4:1.46vw;/*1.46vw 20px4% 20px*/
}

body{
  line-height: 1.0;
  -webkit-overflow-scrolling: touch;
}

/*LP用ヘッダー個別CSS*/
.main{padding-top:0;} 
#head_wrap{
  top:-60px;
  transition: .5s;
}
#head_wrap.fixed{top:0;}
.h-inner{z-index:99999!important;}
.kv-wrapper{z-index:-1; }


.scl-anime {
  /* display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; */
  transition: 0.7s ease-out;
  overflow: hidden;
}


/*見出しアニメーション*/
.txt-heading.scl-anime .wrap,
.txt-heading.scl-anime .inner{
  display: block;
}

.txt-heading.scl-anime .wrap{
  overflow: hidden;
  opacity: 0;
}

.txt-heading.scl-anime .inner {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.txt-heading.scl-anime.show .wrap {
  opacity: 1;
}

.txt-heading.scl-anime.show .wrap .inner {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/*ぼかし→ふわっと縮小して表示*/
.blur-anime.scl-anime{
  display: block;
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 0;
  transform: scale(1.1);
  transition: 0.5s ease-out 0.05s;
}

.blur-anime.scl-anime.show {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/*ぼかし→表示*/
.blur-anime-2.scl-anime{
  display: block;
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 0;
  transition: 1s ease-out 0.05s;
}

.blur-anime-2.scl-anime.show {
  filter: blur(0);
  opacity: 1;
}

.blur-anime-2.scl-anime:first-of-type{
  transition-delay: 0.5s;
}

/*テキストアニメ*/

.txt-anime.scl-anime{
  display: block;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s ease-out 0.05s;
  transition-delay: 0.3s;
}

.txt-anime.scl-anime.show {
  transform: translateX(0);
  opacity: 1;
}


/* 共通
-------------------------------------------------------------------------*/
.buy-pagelink{
position: fixed;
bottom:5px;
right:0;
z-index:9999;
transform:translateZ(1px); /*safari z-index バグ用*/
} 

.buy-pagelink p{
  width:29vw;
  max-width:150px;
}

section.lbl{
  background:var(--color-lbl);
}

section.lp-contents{
  padding:var(--mg-s1) 0;
}


.section-inner{
  padding:0 6vw;
}

.content-ttl-en{
  font-family: var(--en);
  font-weight: bold;
  letter-spacing: 0.16em;
}
.content-ttl-en .number{
font-size:140%;
display: inline-block;
margin:0 4px;
}

.txt-heading{
  font-family: var(--font-min);
  /* font-size:clamp(1.4rem, 1.12rem + 1.4vw, 2.8rem); */
  letter-spacing: 0.1em;
  font-weight: normal;
}

.txt-heading.summary,
.txt-heading.features{
/* font-size:clamp(1.5rem, 1.24rem + 1.3vw, 2.8rem); */
/* font-size:clamp(1.3rem, 1rem + 1.5vw, 2.8rem); */
/* font-size:clamp(1.7rem, 1.06rem + 1.2vw, 2.5rem); */
font-size:clamp(1.7rem, 1.496rem + 0.84vw, 2.5rem);
line-height: 1.6;
}

.desc{
  /* font-size:clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem); */
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.desc-note{
  color:var(--color-gy);
  font-size:1.0rem;
  letter-spacing: 0.05em;
}

.contents-bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--c-bk);
  margin:var(--mg-s2) 0;
}


/*タブレット〜*/
  @media screen and (min-width: 600px) {
    .buy-pagelink{
      bottom:40px;
      } 

    .buy-pagelink a{
      display: block;
      transition: .2s;
    }

    .buy-pagelink a:hover{
      opacity: 0.8;
    }


    section.lp-contents{
      padding:var(--mg-p1) 0;
    }
    
    .section-inner{
      padding:0 8vw;
    }

    /* .content-ttl-en{
      font-family: var(--en);
      font-weight: bold;
      letter-spacing: 0.16em;
    } */

    /* .content-ttl-en .number{
      font-size:140%;
      display: inline-block;
      margin:0 4px;
      } */

      /* .txt-heading{
        font-family: var(--font-min);
        font-weight: normal;
        letter-spacing: 0.1em;
      } */

      /* .txt-heading.summary,
      .txt-heading.features{
      font-size:clamp(1.3rem, 1.06rem + 1.2vw, 2.5rem);
      line-height: 1.6;
      } */

      .desc{
        line-height: 1.6;
      }

      /* .desc-note{
        font-size:1.0rem;
      } */

      .contents-bar{
        margin:var(--mg-p2) 0;
      }

      .br-sp{
        display:none;
      }

  }

  /*PC〜*/
  @media screen and (min-width: 1025px) {
    .section-inner{
      padding:0 14.84375vw; /*10%*/
      /* max-width:1400px; */
      margin:0 auto;
    }

    .desc{
      line-height: 1.8;
    }

  }

/* メインビジュアル
-------------------------------------------------------------------------*/
.mv-contents{
 position: relative;
}

.main-visual-wrapper{
  height:85vh;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/main-visual-sp.jpg) no-repeat center center/cover;
  z-index:1;
  padding-top:50px;
}

.lp-brand-logo{
  height:25px;
  width:50%;
  position:absolute;
  top:15px;
  left:15px;
  background:url(https://gigaplus.makeshop.jp/johnsblend/assets/img/brandsite/common/johnsblend_logo.svg) no-repeat left center/contain;
}

.kv-release-icon{
  width:75px;
  position:absolute;
  top:15px;
  right:15px;
}

.kv-txt-wrapper{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  padding:70px 0 70px;
}


.kv-txt{
  font-family: var(--font-min);
  text-align: center;
}

.kv-txt.catch-copy{
  letter-spacing: 0.15em;
}

.kv-txt.catch-copy.copy-sub{
  font-size:clamp(1.8rem, 1.46rem + 1.7vw, 3.5rem);
  margin-bottom:15px;
}
.kv-txt.catch-copy.copy-main{
  font-size:clamp(2.2rem, 1.68rem + 2.6vw, 4.8rem);
}

.kv-txt.product-name{
  letter-spacing: 0.05em;
  font-size:clamp(1.6rem, 1.36rem + 1.2vw, 2.8rem);
  line-height:2.0;
}

.kv-store-txt{
  max-width:65%;
  margin:10px auto 0;
}

/*キャッチコピーアニメーション*/
.catch-copy span {
  color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
  animation-name: catch-copy-anime;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

.catch-copy span:nth-child(1) {animation-delay: 0.15s;}
.catch-copy span:nth-child(2) {animation-delay: 0.3s;}
.catch-copy span:nth-child(3) {animation-delay: 0.45s;}
.catch-copy span:nth-child(4) {animation-delay: 0.6s;}
.catch-copy span:nth-child(5) {animation-delay: 0.75s;}
.catch-copy span:nth-child(6) {animation-delay: 0.9s;}
.catch-copy span:nth-child(7) {animation-delay: 1.05s;}
.catch-copy span:nth-child(8) {animation-delay: 1.2s;}
.catch-copy span:nth-child(9) {animation-delay: 1.35s;}

@keyframes catch-copy-anime {
  0% {
    text-shadow: 0 0 100px var(--c-bk);
    opacity: 0;
  }
  5% {
    text-shadow: 0 0 90px var(--c-bk);
  }
  15% {
    opacity: 1;
  }
  20% {
    text-shadow: 0 0 0px var(--c-bk);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0px  var(--c-bk);
  }
}

.kv-txt-box.txt-anime{
  display: block;
  animation-name: kv-txt-anime;
  animation-duration: 1.2s;
  /* transition: 0.5s ease-out 1.8s; */
  animation-fill-mode: forwards;
  animation-timing-function:ease;
  animation-delay:2s;
  opacity: 0;
}

@keyframes kv-txt-anime {
  0% {
    -ms-filter: blur(10px);
    filter: blur(10px);
    transform: translateY(10px);

  }
  100% {
    filter: blur(0);
    transform: translateY(0px);
    opacity: 1;
  }
}

/* .kv-txt-box.scl-anime{
  display: block;
  -ms-filter: blur(10px);
  filter: blur(10px);
  transform: translateY(10px);
  opacity: 0;
  transition: 0.5s ease-out 1.8s;
} */



/*スクロールアニメーション　**/
.scl-box{
  position: absolute;
  bottom:-50px;
  right:0;
  left:0;
  display: flex;
  justify-content: center;
  z-index:100;
}

.scl-down{
  width: 100px;
  height:100px;
  position: relative;
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


.scl-box::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 1px;
  height: 100px;
  background:var(--c-bk);
}

.scl-box::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

  /*タブレット〜*/
  @media screen and (min-width: 600px) {

    .main-visual-wrapper{
      height:70vh;
      background:url(https://john.itembox.design/item/lp/plus-airy/img/main-visual-pc.jpg) no-repeat center bottom/cover;
      flex-direction: column;
      justify-content: space-between;
      padding-top:50px;
    }

.kv-txt-wrapper{
      max-width:750px;
      justify-content: center;
      align-items: flex-start;
      /* padding:70px 0 70px 4vw; */
      padding:70px 0 70px 6vw;
    } 

    .lp-brand-logo{
      height:35px;
      top:30px;
      left:30px;
    
    }
    
    
    .kv-release-icon{
      width:100px;
      top:30px;
      right:30px;
    } 
    
    
    .kv-txt{
      text-align: left;
    }

    .kv-catch-copy-box{
      margin-bottom:var(--mg-p2);
    }
    
    .kv-txt.catch-copy.copy-sub{
      margin-bottom:20px;
    }
  
    .kv-txt.product-name{
      line-height:1.7;
    }
    
    .kv-store-txt{
      max-width:100%;
      margin:15px auto 0;
    }

    
  }

  /*PC〜*/
  @media screen and (min-width: 1025px) {

    .main-visual-wrapper{
      height:100vh;
    }

    .kv-release-icon{
      width:120px;
      top:50px;
      right:50px;
    } 

  }



/* コンセプト
-------------------------------------------------------------------------*/

.concept-content-wrapper{
  display: flex;
  flex-wrap: wrap;
  padding-left:6vw;
  margin-top:var(--mg-s2);
}

.txt-heading.concept,.desc.concept{
  width:100%;
}

.txt-heading.concept{
  margin-bottom:var(--mg-s3);
}

.txt-heading.concept p{
  font-size:clamp(1.3rem, 1.08rem + 1.1vw, 2.4rem);
  line-height:2 ;
}
.desc.concept p{
line-height: 2.4;
/* font-size:clamp(1.1rem, 1.02rem + 0.4vw, 1.5rem); */
font-size:clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
}

.desc.concept p:first-of-type{
  margin-bottom:var(--mg-s4);
}

.concept-image-wrapper{
  /* border:1px solid #000; */
  margin-top:-120px;
  position: static;
  z-index:-1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.concept-image{
  width:40%;
}

.concept-txt-block{
  width:100%;
  margin-top:-50px;
  position: relative;
  z-index:-2;
  display:flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.concept-image-bg{
  display:block;
  width:85%;
  height:150px;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/concept-bg.jpg) no-repeat left center/cover;
}

.concept-txt-en{
  position: relative;
  z-index: 100;
  width:85%;
  margin:-50px auto 0 ;
  transform:translateZ(1px); /*safari z-index バグ用*/
  /* border:1px solid #b02626; */
}

.concept-txt-en.pc{
  display:none;
}


/*タブレット〜*/
@media screen and (min-width: 600px) {
  .concept-content-wrapper{
    padding-left:8vw;
    margin-top:var(--mg-p2);
  }

  .concept-image-wrapper{
    margin-top:-250px;
    position: relative;
  }

  .txt-heading.concept{
    margin-bottom:var(--mg-p3);
  }

  /* .txt-heading.concept p{
    font-size:clamp(1.3rem, 1.08rem + 1.1vw, 2.4rem);
    line-height:2 ;
  }
  .desc.concept p{
  line-height: 2.4;
  font-size:clamp(1.1rem, 1.02rem + 0.4vw, 1.5rem);
  }
   */

  .desc.concept p:first-of-type{
    margin-bottom:var(--mg-p4);
  }

  
  .concept-image{
    width:33%;
    margin-right:8vw;
  }

  .concept-txt-block{
    width:100%;
    margin-top:-60px;
    position: static;
    z-index:-2;
  }

  .concept-image-bg{
    width:55%;
    height:180px;
  }

  .concept-txt-en.sp{
    display:none;
  }

  .concept-txt-en.pc{
    display:block;
    width:50%;
    position: absolute;
    bottom:30px;
    right:25%;

  }

}

/*PC〜*/
@media screen and (min-width: 1025px) {

  .concept-content-wrapper{
    /* max-width:1400px; */
    margin:0 auto;
    padding: 0 0 0 14.84375vw;
  }

  .concept-image-bg{
    height:220px;
  }

  .concept-image-wrapper{
    margin-top:-350px;
    width: 100%;
  }

  .concept-image{
    margin-right:14.84375vw;
  }

}


/* プラスエアリー概要 
-------------------------------------------------------------------------*/


section.puls-airy-summary{
  background:#fff;
  position: relative;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/bg-bubble-sp.jpg) no-repeat top left/cover;
  z-index:100;
}

section.puls-airy-summary::after{
  content:"";
  display: block;
  width:100%;
  height:120px;
  background: rgb(245,245,248);
  background: linear-gradient(180deg, rgba(245,245,248,0) 0%, rgba(245,245,248,1) 50%, rgba(245,245,248,1) 100%);
  bottom:0;
}

.puls-airy-summary-wrapper{
  padding:25.64vw 0 0;/*120px*/
}

.puls-airy-ttl{
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  top:-5.69vw;
  left:6vw;
  width:calc(100% - 6vw);
  height:20.51vw;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/plusairy-txt.svg) no-repeat left top/contain;
}


.txt-heading.summary{
  text-align: center;
  line-height:1.7;
  margin-bottom:var(--mg-s3);
}

.puls-airy-summary-type p{
  margin-bottom:var(--mg-s2);
}

.border-features{
  display: block;
  width:1px;
  height:100px;
  background:var(--c-bk);
  position: absolute;
  right:0;
  left:0;
  margin: var(--mg-s2) auto;
}

  /*タブレット〜*/
  @media screen and (min-width: 600px) {

    .puls-airy-summary-wrapper{
      padding:11.71vw 0 0;
    }

    .puls-airy-ttl{
      top:-3vw;
      /* left:8vw;
      width:calc(100% - 8vw); */
      height:9.76vw;
    }

    .txt-heading.summary{
      /* line-height:1.7; */
      margin-bottom:var(--mg-p3);
    }

    .puls-airy-summary-type{
      display: flex;
      align-items: center;
    }

    .puls-airy-summary-type p{
      margin-bottom:var(--mg-p2);
    }

    .puls-airy-summary-type p:last-child{
      padding:0 4%;
    }

    .point-image-wrapper{
      max-width:80%;
      margin:0 auto;
    }

    .border-features{
      margin: var(--mg-p2) auto;
    }
  }

  /*PC〜*/
@media screen and (min-width: 1025px) {
  .puls-airy-summary-wrapper{
    padding:11.71vw 0 0;
  }
  
  .puls-airy-summary-type{
    padding:0 4%;
  }

  .puls-airy-ttl{
    height:8.78vw;
  }

}


/* 特徴
-------------------------------------------------------------------------*/

section.contents.features{
  /* z-index:200;
  background:#ccc;
  top:0; */
}

.features-wrapper{
  position: relative;
  width:100%;
  height:100%;
  z-index: 100;
  transform:translateZ(1px) !important;
}

.prism-bg1{
  display: block;
  width:100%;
  height:400px;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/prism_bg1.png) no-repeat top left/contain;
  position: absolute;
  top:0;
  left:0;
  z-index: -1 !important;
}

.prism-bg2{
  display: block;
  /* border:1px solid #000; */
  width:100%;
  height:787px;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/prism_bg2.png) no-repeat top right/contain;
  position: absolute;
  top:10%;
  right:0;
  z-index: -1;
}

.prism-bg3{
  display: block;
  /* border:1px solid #000; */
  width:100%;
  height:440px;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/prism_bg3.png) no-repeat top left/contain;
  position: absolute;
  bottom:-400px;
  left:0;
  z-index: -1;
  /* overflow: hidden; */
}


.feature-block{
  margin-bottom:var(--mg-s2) ;
  
}

.content-ttl-en.featur-ttl{
  text-align: center;
  font-size:clamp(1.7rem, 1.58rem + 0.6vw, 2.3rem);
  margin-bottom:var(--mg-s2);
  
}

.feature-caption{
  font-family: var(--font-min);
  letter-spacing: 0.05em;
  color:var(--color-lgy);
  font-size:clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  margin-bottom:8px;
}


.feature-image{
  width:100%;
  margin:0 auto;
  box-shadow: 10px 10px 15px rgb(215, 215, 221,0.8) ;
}

.feature-image.seibun{
  box-shadow: inherit;
}

.feature4-image2{
  margin:var(--mg-s4) 0;
}


.feature-txt-block .content-ttl-en{
  font-size:clamp(1rem, 0.94rem + 0.3vw, 1.3rem);
  display: flex;
  align-items: center;
  margin:var(--mg-s3) 0 var(--mg-s4);
}

.feature-txt-block .content-ttl-en::before{
  content:"";
  display: inline-block;
  width:20px;
  height:1px;
  background:var(--c-bk);
  margin:0 8px 2px 0;
}

.feature-txt-block .content-ttl-en .number{
  font-size:200%;
  margin:0 4px 4px;
  }

.feature-txt-block .desc.features{
  font-size:clamp(1.3rem, 1.24rem + 0.3vw, 1.6rem);
  margin:var(--mg-s3) 0;
}

.feature-txt-block .desc.features .desc-note{
  display: inline-block;
  transform: scale(0.85);
  vertical-align: text-top;
  margin-top:-5px;
}

.desc-note.features{
  line-height: 1.3;
}

.feature-block.feature4 .feature-image-block .feature-image p,
.feature-block.feature5 .feature-image-block .feature-image p{
 width:60%;
}

.feature-block.feature4 .feature-image-block .feature-image,
.feature-block.feature5 .feature-image-block .feature-image{
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-end;
}


.feature-block.feature4 .feature-image,
.feature-block.feature5 .feature-image{box-shadow: inherit; }

.feature-block.feature4 .feature-image p,
.feature-block.feature5 .feature-image p{
  box-shadow: -10px 10px 15px rgb(215, 215, 221,0.4) ;
  margin-bottom:25px;
}

.feature-block.feature4 .feature-image-block .feature-caption,
.feature-block.feature5 .feature-image-block .feature-caption{
  margin-bottom: 0; 
  margin-top:-8px;
  text-align: right;
}

.feature-block.feature5{
  margin-bottom:0;
}


  /*タブレット〜*/
  @media screen and (min-width: 600px) {

    /* .prism-bg1{
      height:400px;
    }
    
    .prism-bg2{
      height:787px;
      top:10%;
    }
    
    .prism-bg3{
      height:440px;
      position: absolute;
      bottom:-400px;
    } */

  .feature-block{
    display: flex;
    align-items: center;
    margin-bottom:var(--mg-p2) ;
  }

  .feature-block:nth-of-type(even){
    flex-direction: row-reverse;
  }

  .content-ttl-en.featur-ttl{
    margin-bottom:var(--mg-p2);
  }

  /* .feature-caption{
    font-family: var(--font-min);
    letter-spacing: 0.05em;
    color:var(--color-lgy);
    font-size:clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
    margin-bottom:8px;
  } */
  

  .feature-image-block{
    width:50%;
    padding-right:5%;
  }

  .feature-block:nth-of-type(even) .feature-image-block{
    padding-right:0;
    padding-left:5%;
  }

  .feature-image{
    box-shadow: 15px 15px 15px rgb(215, 215, 221,0.4) ;
  }

  .feature4-image2{
    margin:var(--mg-p4) 0;
  }

  .feature-block.feature4 .feature-image-block .feature-image p,
  .feature-block.feature5 .feature-image-block .feature-image p{
  width:80%;
  }

  .feature-block.feature4 .feature-image p{
    box-shadow: -15px 15px 15px rgb(215, 215, 221,0.4) ;
    margin-bottom:25px;
  }

  .feature-block.feature5 .feature-image p{
    box-shadow: 15px 15px 15px rgb(215, 215, 221,0.4) ;
    margin-bottom:25px;
  }

  .feature-block.feature5 .feature-image-block .feature-image{
    justify-content: flex-start;
  }

  .feature-block.feature5 .feature-image-block .feature-image p{ 
  margin-left:5%;
  }

  .feature-block.feature5 .feature-image-block .feature-caption{
    text-align: left;
    padding-left:5%;
  }

  .feature-txt-block{
    width:50%;
    padding-left:5%;
  }

  .feature-txt-block .content-ttl-en{
    margin:var(--mg-p3) 0 var(--mg-p4);
  }

  /* .feature-txt-block .content-ttl-en::before{
    content:"";
    display: inline-block;
    width:20px;
    height:1px;
    background:var(--c-bk);
    margin:0 8px 2px 0;
  } */

  /* .feature-txt-block .content-ttl-en .number{
    font-size:200%;
    margin:0 4px 4px;
    } */

  .feature-txt-block .desc.features{
    margin:var(--mg-p3) 0;
  }

  /* .feature-txt-block .desc.features .desc-note{
    display: inline-block;
    transform: scale(0.85);
    vertical-align: text-top;
    margin-top:-5px;
  } */

  .desc-note.features{
    line-height: 1.4;
  }

  }


/* 商品紹介
-------------------------------------------------------------------------*/
.product-box{
  margin-bottom:var(--mg-s2);
}

.product-box a{
  display: block;
}

.product-box .item-name{
  font-size:clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  font-weight: bold;
  line-height:1.4;
  margin:var(--mg-s4) 0;
  padding:0 1%;
}

.product-box .price{
  font-family: 'Lato', sans-serif;
  font-size:1.8rem;
  letter-spacing: 0.05em;
  padding:0 1%;
  font-weight:bold;
}

.product-box .price span{
display: inline-block;
 color:#868686;
 font-size:1.2rem;
 margin-left:4px;
 font-weight: normal;
}

.product-box .buy-link{
  text-align: center;
  color:#fff;
  background:var(--c-bk);
  font-size:1.5rem;
  letter-spacing: 0.2em;
  padding:15px 0;
  margin:var(--mg-s3) 0;
}

.product-tanpin li{
  border-top:1px solid var(--c-bk);
}

.product-tanpin li a{
  display: flex;
  align-items: center;
  padding:0 1%;
}
.product-tanpin li:last-child{
  border-bottom:1px solid var(--c-bk);
}

.product-tanpin li .item-name{
  flex:5;
}

.product-tanpin li .price{
  font-size:1.5rem;
  font-weight:bold;
  flex:2.2;
}

.product-tanpin li .price span{
  font-size:1.0rem;
}

.product-tanpin li .arrow{
  display:block;
  width:30px;
  height:8px;
  background:url(https://john.itembox.design/item/brandsite/common/img/slider-next.svg) no-repeat center center/contain;
  flex:.5;
}

.series-link{
  padding:15px 0;
  letter-spacing: 0.2em;
  font-size:1.5rem;
  text-align: center;
  border:1px solid var(--c-bk);
  font-weight: bold;
  max-width:400px;
  margin:0 auto;
}

.content-ttl-en.moist-ttl{
  text-align: center;
  font-size:clamp(1.7rem, 1.58rem + 0.6vw, 2.3rem);
  margin-bottom:var(--mg-s3);
  line-height: 1.5;
}

.txt-heading.series{
  margin-top:var(--mg-s2);
}



  /*タブレット〜*/
  @media screen and (min-width: 600px) {
    .product-box-wrapper{
      display:flex;
      justify-content: space-between;
    }

    .product-box{
      width:45%;
      margin-bottom:var(--mg-p2);
    }

    .product-box .item-name{
      /* line-height:1.4; */
      margin:var(--mg-p4) 0;
      /* padding:0 1%; */
    }

    .product-box .price{
      /* font-size:1.8rem;
      padding:0 1%; */
    }

    .product-box .price span{
      font-size:1.2rem;
       /* margin-left:4px; */
      }

    .product-box .buy-link{
      /* font-size:1.5rem; */
      padding:20px 0;
      margin:var(--mg-p3) 0;
    }

    .product-tanpin li a{
      /* padding:0 1%; */
    }


    .series-link{
      padding:20px 0;
      /* font-size:1.5rem; */
    }

    .content-ttl-en.moist-ttl{
      margin-bottom:var(--mg-p3);
      /* line-height: 1.5; */
    }

    .txt-heading.series{
      margin-top:var(--mg-p2);
    }

    .product-box-set-link{
      display: block;
      transition: .2s;
    }
    
    .product-tanpin li{
      cursor: pointer;
      transition: .2s;
    }
    
    .product-box-set-link:hover,
    .product-tanpin li:hover{
      opacity: 0.8;
    }

    .series-link{
      transition: .2s;
    }

    .series-link:hover{
    color:#fff;
    border:1px solid var(--c-bk);
    background:var(--c-bk);
    }
    
    

  }

  /*PC〜*/
@media screen and (min-width: 1025px) {

  .product-box-wrapper{
    /* max-width:1400px;
    margin:0 auto; */
  }

  }



/* SNSキャンペーン
-------------------------------------------------------------------------*/
section.sns-campaign{
  position: relative;
  z-index:100;
  margin-top:20px;
}

.sns-campaign-ttl{
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  top:-20px;
  width:100%;
  height:40px;
  background:url(https://john.itembox.design/item/lp/plus-airy/img/campaign-txt.svg) no-repeat center center/contain;
}

.sns-campaign-txt-wrapper{
  padding:0 1%;
}

.sns-campaign-heading{
  font-size:clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin:var(--mg-s4) 0;
  font-weight: bold;
}

.sns-campaign-txt{
  font-size:1.3rem;
  line-height: 1.4;
}

.campaign-period{
  font-size:1.3rem;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.campaign-period .ttl{
  display:block;
  width:7em;
  color:#fff;
  text-align: center;
  padding:5px 0;
  background:#9898A5;
  margin:var(--mg-s3) 0 8px;
}

.campaign-period p{
  text-indent: 1em;
}

.campaign-period span{
  font-size:120%;
}

.content-ttl-en.moist-ttl.campaign{
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-ttl-en.moist-ttl.campaign span{
display:inline-block;
width:10px;
height:40px;
border-top:1px solid var(--c-bk);
border-bottom:1px solid var(--c-bk);
}

.content-ttl-en.moist-ttl.campaign .right{
  border-right:1px solid var(--c-bk);
  margin-left:10px;
}

.content-ttl-en.moist-ttl.campaign .left{
  border-left:1px solid var(--c-bk);
  margin-right:10px;
}

.present-box{
  margin-bottom:var(--mg-s2);
}

.feature-txt-block.campaign{
  padding:0 1%;
}

.feature-txt-block .content-ttl-en.campaign{
  margin: 4.10vw 0 ;
}

.feature-txt-block .content-ttl-en.campaign .icon{
display: block;
width:90px;
height:25px;
background:url(https://john.itembox.design/item/lp/plus-airy/img/present30.svg) no-repeat left center/contain;
margin-left:8px;
}

.feature-txt-block .content-ttl-en.campaign .icon.pre2{
  background:url(https://john.itembox.design/item/lp/plus-airy/img/present100.svg) no-repeat left center/contain;
  }

.desc.features.campaign{
  /* margin: var(--mg-s4) 0; */
  margin:2.05vw 0;
}

.desc.features.campaign.ttl{
  font-weight: bold;
}

.campaign-step li{
  margin-bottom:var(--mg-s3);
}

.contents-bar.bl{
  background:#9898A5;
}

.contents-bar.lbl{
  background:rgb(152, 152, 165,0.3);
  height:1px;
}

.desc.features.campaign.ttl.center{
  text-align: center;
  font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem);
    letter-spacing: 0.1em;
}

.agreement-wrapper{
  background:#fff;
  padding:var(--mg-s3) 6%;
}
.agreement-txt{
  font-size:1.3rem;
  line-height: 1.4;
}

.agreement-txt-innner{
  background:#FAFAFB;
  padding:var(--mg-s3) 6%;
  margin:var(--mg-s3) 0;
  font-size:1.1rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  height:200px;
  overflow-y:scroll;
}

.agreement-txt-innner dt{
  font-weight: bold;
  font-size:1.3rem;
  margin-bottom:4px;
}

.agreement-txt-innner dd{
  margin-bottom:var(--mg-s4);
}

.agreement-txt-innner::-webkit-scrollbar{
  width: 8px;
}
.agreement-txt-innner::-webkit-scrollbar-track{
  background-color: #EAEAED;
}
.agreement-txt-innner::-webkit-scrollbar-thumb{
  background-color: #9898A5;
  border-radius: 10px;
}

  /*タブレット〜*/
  @media screen and (min-width: 600px) {
    
    /* .sns-campaign-txt-wrapper{
      padding:0 1%;
    } */

    .campaign-summary{
      display:flex;
      align-items: center;
    }

    .campaign-summary-image{
      width:50%;
    }

    .campaign-summary-image picture{
      display: block;
      width:80%;
    }

    .sns-campaign-heading{
      line-height: 1.6;
      margin:0 0 var(--mg-p4);
    }

    .sns-campaign-txt{
      font-size:1.4rem;
      line-height: 1.6;
    }
    

    .campaign-period{
      font-size:1.4rem;
    }

    .campaign-period .ttl{
      /* width:7em;
      padding:5px 0; */
      margin:var(--mg-p3) 0 8px;
    }
/* 
    .campaign-period p{
      text-indent: 1em;
    }
    
    .campaign-period span{
      font-size:120%;
    } */

    /* .content-ttl-en.moist-ttl.campaign span{
      display:inline-block;
      width:10px;
      height:40px;
      border-top:1px solid var(--c-bk);
      border-bottom:1px solid var(--c-bk);
      }
      
      .content-ttl-en.moist-ttl.campaign .right{
        border-right:1px solid var(--c-bk);
        margin-left:10px;
      }
      
      .content-ttl-en.moist-ttl.campaign .left{
        border-left:1px solid var(--c-bk);
        margin-right:10px;
      } */
    
      .present-box{
        margin-bottom:var(--mg-p2);
      }

      /* .feature-txt-block.campaign{
        padding:0 1%;
      } */

    .sns-campaign-txt-wrapper{
      /* padding:0 1%; */
      width:50%;
      padding:0 0 0 5%;
    }
    

    .present-box{
      display:flex;
      flex-direction: row-reverse;
      align-items: center;
      margin-bottom:var(--mg-p2);
    }

    .present-box .present-image{
      width:50%;
      padding-left:5%;
    }
    .feature-txt-block.campaign{
      padding:0 0 0 5%;
      width:50%;
    }
    
    .feature-txt-block .content-ttl-en.campaign{
      margin:0 ;
    }

    .feature-txt-block .content-ttl-en.campaign .icon{
      width:120px;
      height:30px;
      margin-left:12px;
      }

    .desc.features.campaign{
      margin:1.5vw 0;
    }

    .campaign-step{
      display: flex;
      justify-content: space-between;
    }
  
    .campaign-step li{
      margin-bottom:0;
      width:45%;
    }

    .agreement-wrapper{
      padding:var(--mg-p3) 6%;
    }

    /* .agreement-txt{
      font-size:1.3rem;
      line-height: 1.4;
    } */

    .agreement-txt-innner{
      padding:var(--mg-p3) 4%;
      margin:var(--mg-p3) 0;
      font-size:1.2rem;
      line-height: 1.5;
      height:300px;
    }

    /* .agreement-txt-innner dt{
      font-size:1.3rem;
      margin-bottom:4px;
    } */
    
    .agreement-txt-innner dd{
      margin-bottom:var(--mg-p4);
    }

    /* .agreement-txt-innner::-webkit-scrollbar{
      width: 8px;
    } */
    

  }

  /*PC〜*/
  @media screen and (min-width: 1025px) {

    section.sns-campaign{
      margin-top:35px;
    }

    .sns-campaign-ttl{
      top:-35px;
      height:70px;
    }
  
    }