@charset "utf-8";

:root{
--color-bk:#302010;
--bgColor-lgy:#F1EFEF;
--border-dgy:1px solid #707070;
--border-bk:1px solid #302010;
--font-min:"ヒラギノ明朝 ProN","Hiragino Mincho Pro", serif;
--font-size-copy:clamp(1.4rem, 0.911rem + 2.45vw, 3rem);
--font-size-subCopy:clamp(1.3rem, 0.963rem + 1.68vw, 2.4rem);
--font-size-desc:clamp(1.2rem, 1.08rem + 0.49vw, 1.5rem);
--sec-pdt:80px;
--sec-pdb:104px;
--cont-mgXS:16px;
--cont-mgS:24px;
--cont-mgM:32px;
--cont-mgL:48px;
--cont-mgXL:64px;
--border-pdb:4px;

}

@media screen and (min-width: 1280px) {
  :root{
    --sec-pdt:120px;
    --sec-pdb:160px;
    --cont-mgXS:32px;
    --cont-mgS:40px;
    --cont-mgM:48px;
    --cont-mgL:80px;
    --cont-mgXL:120px;
  
    }
  }

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

.main{padding-top:0; letter-spacing: 0.05em; font-weight: 500;} 
#head_wrap{top:-60px;transition: .5s;
}
#head_wrap.fixed{top:0;}
.h-inner{z-index:99999!important;}
.kv-wrapper{z-index:-1; }


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


.lp-contents{
  background:var(--bgColor-lgy);
  padding:0 0 var( --sec-pdb) 0;
}

.lp-contents-inner{
  padding:0 5%;
}

.pc{
  display: none;
}

.c-desc-wrapper{
  display: flex;
  flex-direction: column;
  gap:var(--cont-mgXS);
}
.c-desc{
  font-size:var(--font-size-desc);
  line-height: 1.7;
}

.lp-contents-flex{
  display: flex;
}


.lp-contents-flex-inner{
  width:90%;
}

.lp-contents-ttl{
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.1em;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
width:10%;
display: flex;
align-items: center;
position: relative;
padding-top:32px;
font-size:clamp(1.6rem, 1.12rem + 1.97vw, 2.8rem);
}

.lp-contents-ttl::before{
  content:"";
  display: block;
  width:2px;
  height:12px;
  background:var(--color-bk);
  position: absolute;
  top:0;
  right:0;
  left:0;
  margin: auto;
}

.lp-contents-img-wrapper{
  position: relative;
}

.lp-contents-img{
  width:100%;
  height:65vw;
  overflow: hidden;
  position: relative;
}

.lp-contents.fragrance .parallax-image{
  object-position: right center;
  }

.contents-copy{
  font-size:var(--font-size-copy);
  font-family: var(--font-min);
  line-height: 1.5;
}

.js-image{
  overflow: hidden;
  position: relative;
}

.parallax-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
}

.js-copy-wrapper {
  display: flex;
  flex-direction: column;
}

.js-copy{
  overflow: hidden;
}

.js-copy span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

.js-fadeIn{
  opacity: 0;
}

.lp-link{
  margin-top:var(--cont-mgM);
}

.lp-link.hacare{
  padding:0 5%;
}

.lp-link a,.buy-link{
  display: block;
  height:40px;
  text-align: center;
  font-size:1.6rem;
  line-height: 40px;
  border: var(--border-bk) !important;
  margin: 0 auto;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.lp-link a{
  max-width:440px;
}

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

  .lp-contents-img{
    height:46vw;
  }

  .lp-link a,.buy-link{
    height:48px;
    line-height: 48px;
  }


  .product-box a, .lp-link a{
    transition: 0.2s;
  }
  
  .lp-link a:hover{
    background:var(--color-bk);
    color:#fff;
  }

  .product-box a:hover{
  opacity: 0.8;
  }

}

@media screen and (min-width: 1280px) {
.sp{display: none;}
.pc{display: block;
}

}



/* 固定ナビ -------------*/
.mv-contents{
  width:100%;
  height:100vh;
  position:relative;
}


/* メインビジュアル -------------*/
.main-visual-wrapper{
  width:100%;
  height:100vh;
  overflow: hidden;
}

.main-visual-wrapper img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1);
}

.lp-brand-logo{
  height:25px;
  width:50%;
  position:absolute;
  top:15px;
  left:15px;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/lp-logo.svg) no-repeat left center/contain;
  z-index:100;
}

.mv-txt-block-wrapper{
  width:100%;
  position: absolute;
  top:30vw;
}

.mv-txt-block{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mv-copy-wrapper{
width:80%;
margin-bottom:16px;
overflow: hidden;
}

.mv-copy-wrapper img{
  transform: translateY(100%);
  opacity: 0;
}

.mv-ttl-wrapper{
  width:80%;
}


.mv-right-block{
  display: block;
  width:100%;
  padding:0 5%;
  position: absolute;
  bottom:var(--cont-mgM);
}

.lp-brand-logo, .mv-ttl-wrapper, .mv-right-block {
  opacity: 0;
}

.parallax-image {
  display: block;
  width: 100%;
}

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

    
  .lp-brand-logo{
    height:48px;
    top:30px;
    left:30px;
  }

  .mv-txt-block-wrapper{
    width: calc((100% - 4vw) / 2);
    top:0;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .mv-copy-wrapper{
    width:35.72vw;
    margin-bottom:2.92vw;
    }

    .mv-ttl-wrapper{
      width:100%;
    }
    
    .mv-right-block{
      width:4vw;
      height:100%;
      padding:0;
      border-left:1px solid #fff;
      position: absolute;
      right:0;
      top:0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mv-right-block img{
      width:1.3vw;
      max-height:100%;
    }

  }

    

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

      .mv-txt-block-wrapper{
        width: calc((100% - 4vw) / 2 + 5%);
      }
    
    }



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

.lp-contents.about{
  padding-top:var(--sec-pdt);
  overflow: hidden;
  position: relative;
}

.lp-contents.about::before{
  display: block;
  content:"";
  width:80%;
  height:100%;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/about_bg.png) no-repeat top right/contain;
  position: absolute;
  top:0;
  right:0;
  z-index:1;
}

.lp-contents.about .lp-contents-inner{
  position: relative;
  z-index:2;
}

.about-contents{
  padding:0 5%;
}

.about-copy-wrapper {
  margin-bottom:var(--cont-mgL);
  gap:16px;
  padding-left:5%;
}

.about-copy {
  font-family:var(--font-min);
  font-size:clamp(2rem, 1.121rem + 3.61vw, 4.2rem);
  letter-spacing: 0.1em;
}


.about-ttl{
  width:fit-content;
  font-weight: normal;
  font-family:var(--font-min);
  border-bottom:var(--border-dgy);
  font-size:var(--font-size-subCopy);
  padding:0 1px var(--border-pdb) 1px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.about-txt-block{
  margin-top:var(--cont-mgM);
}

.about-img-wrapper{
  display: flex;
  justify-content: space-between;
}


.about-img.left{
  width:36%;
  height:30vw;
  margin-top:40px;

}

.about-img.right{
  width:57%;
  height:60vw;
}


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

  .about-contents{
    display: flex;
    position: relative;
  }

  .about-copy-wrapper {
    gap:40px; 
  }

  .about-txt-wrapper{
    width:50%;
  }

  .about-ttl{
    line-height: 1.6;
  }

  .about-txt-block{
    padding-right:2.5%;
  }

  .about-img-wrapper{
    width:50%;
    align-items: flex-end;
  }

  
  .about-img.left{
    height:10.76vw;
    margin-top:40px;
  
  }
  
  .about-img.right{
    height:31.33vw;
  }

}

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

  .about-ttl{
    position: absolute;
    line-height: 1.6;
  }

  .about-txt-block{
    margin-top:calc(4.2rem + var(--cont-mgM));
    padding-right:2.5%;
  }
  
}


/* fragrance -------------*/

.fragrance-name{
font-family: "athelas", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
font-size:clamp(2.4rem, 1.681rem + 2.95vw, 4.2rem);
margin:var(--cont-mgS) 0 var(--cont-mgXS);
}

.fragrance-copy,.fragrance-subCopy{
  text-align: center;
}

.fragrance-note-wrapper{
  margin:var(--cont-mgL) 0;
  padding-right:10%;
}

.contents-copy.fragrance-copy{
  margin-bottom:16px;
  gap:4px;
}


.fragrance-txt-wrapper{
  width:100%;
  padding:var(--cont-mgL) 0;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/fragrance-bg-image.jpg) no-repeat center bottom/cover;
  position: relative;
}

.fragrance-txt-wrapper::before{
  content:"";
  display: block;
  width:100%;
  height:100%;
  background:#2E251B;
  position: absolute;
  top:0;
  left:0;
  mix-blend-mode: multiply;
  opacity: 0.5;
  z-index:1;
}

.fragrance-txt{
  color:#fff;
  position: relative;
  z-index:2;
}

.fragrance-txt{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:0 10%;
}

.contents-copy.fragrance-subCopy{
  width:fit-content;
  border-bottom:1px solid #fff;
  padding-bottom:var(--border-pdb);
  position: relative;
  margin-bottom:var(--cont-mgM);
  letter-spacing: 0.1em;

}

.contents-copy.fragrance-subCopy span{
  font-size:clamp(2.8rem, 2.32rem + 1.97vw, 4rem);  vertical-align: baseline;

}

.contents-copy.fragrance-subCopy::after{
  content:"※";
  font-size:1.0rem;
  transform: scale(0.9);
  color:#fff;
  position: absolute;
  top:4px;
  right:-5px;
}

.fragrance-txt-hosoku ,.product-txt-hosoku{
  font-size:1.0rem;
  line-height: 1.3;
  text-align: center;
  padding:0 5%;
  margin-top:4px;
}

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



  .fragrance-txt-block{
    width:45%;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    display: grid;
    place-items: center;
  }

  .fragrance-name{
    margin:0 0 var(--cont-mgXS);
    }

  .fragrance-note-wrapper{
    display: flex;
    align-items: center;
  }

  .contents-copy.fragrance-copy{
    margin-bottom:0;
    gap:8px;
    width:50%;
  }

  .fragrance-note{
    width:50%;
    padding-right:10%;
  }

  .fragrance-txt-wrapper{
    width:80%;
    height:27.23vw;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .fragrance-txt-wrapper::before{
    content:"";
    display: block;
    width:100%;
    height:100%;
    background:#2E251B;
    position: absolute;
    top:0;
    left:0;
    mix-blend-mode: multiply;
    opacity: 0.5;
    z-index:1;
  }
  
  .fragrance-txt{
    color:#fff;
    position: relative;
    z-index:2;
  }
  
  .fragrance-txt{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:0 10%;
  }

  
  .contents-copy.fragrance-subCopy span{
    font-size:var();
    vertical-align: baseline;
  }
  
  .contents-copy.fragrance-subCopy::after{
    top:8px;
  }
  
  .fragrance-txt-hosoku{
    padding:0 10%;
    text-align: right;
  }

}

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

.lp-contents.product{
  position: relative;
}

.lp-contents.product::after{
  display:block;
  content:"";
  width:95px;
  height:85px;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/moist-suiteki-bottom.png) no-repeat center center/contain;
  position: absolute;
  left:-10px;
  bottom:20px;
}

.product-contents{
  padding-left:10%;
}

.product-name{
  margin:var(--cont-mgL) 0 var(--cont-mgM);
  font-size:var(--font-size-subCopy);
  letter-spacing: 0.1em;
}

.product-name span{
display: inline-block;
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size:var(--font-size-copy);
margin-right:4px;
}

.product-copy,.initiative-copy{
  width:fit-content;
  font-family:var(--font-min);
  border-bottom:var(--border-dgy);
  font-size:var(--font-size-copy);
  padding:0 1px var(--border-pdb) 1px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.product-subCopy{
  margin:var(--cont-mgM) 0;
  display: flex;
  flex-direction: column;
  gap:8px;
}

.product-subCopy p{
  font-size:var(--font-size-subCopy);
  letter-spacing: 0.1em;
}

.product-subCopy p .big-txt{
  font-size:var(--font-size-copy);
  font-family:var(--font-min);
  vertical-align:baseline;
}

.product-subCopy .hosoku{
  display: inline-block;
font-size:1.0rem;
transform: scale(0.8);
vertical-align: top;
}

.product-img-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  margin-top:var(--cont-mgM) ;
}

.product-img-wrapper::before{
  content:"";
  display: block;
  width:75px;
  height:70px;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/moist-suiteki-top.png) no-repeat center center/contain;
  position: absolute;
  top:-20px;
  left:calc(50% - 75px);
}

.product-img{
  width:50%;
}

.product-chart{
  width:45%;
  padding-left:2%;
}

.product-spec-wrapper{
  margin-top:var(--cont-mgM)
}

.product-txt-hosoku{
  text-align: left;
  /* font-size:2vw; */
  display: flex;
  padding:0;
  line-height: 1.4;
  margin-top:var(--cont-mgXS);
}

.product-txt-hosoku dt{
  width:1em;
}

.product-txt-hosoku dd{
  width:calc(100% - 1em);
}


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

  .lp-contents.product::after{
    width:190px;
    height:170px;
    transform: scale(1.1);
  }


.product-contents-inner{
  display: flex;
}

.product-txt-wrapper{
  width:41%;
}

.product-copy,.initiative-copy{
  line-height: 1.8;
}

.product-subCopy{
  gap:16px;
}

.product-img-wrapper{
  width:59%;
}

.product-img-wrapper::before{

  width:150px;
  height:140px;
  top:-80px;
  left:calc(50% - 160px);
}

.product-spec-wrapper{
  padding:0 15%;
}

}


/* initiative -------------*/

section.lp-contents.initiative{
  background:#fff;
  position: relative;

}

.initiative-bg-wrapper{
  width:100%;
  height:100vw;
  background:url(https://john.itembox.design/item/lp/shancon2024/img/initiative-bg.jpg) no-repeat left top/cover;
  position: relative;
}

.initiative-bg-wrapper::before{
    content:"";
    display: block;
    width:100%;
    height:100%;
    background:#2E251B;
    position: absolute;
    top:0;
    left:0;
    mix-blend-mode: multiply;
    opacity: 0.5;
    z-index:1;
  }


section.lp-contents.initiative .lp-contents-flex{
  margin-top:calc(-100vw + var(--sec-pdt));
  position: relative;
  z-index: 2;
}

section.lp-contents.initiative .lp-contents-ttl{
  color:#fff;
}

section.lp-contents.initiative .lp-contents-ttl::before{
  background:#fff;
}

section.lp-contents.initiative .lp-contents-flex-inner{
  background:var(--bgColor-lgy);
  padding:var(--cont-mgXL) 7%;
}


.initiative-ttl{
  max-width:240px;
  overflow: hidden;
}

.initiative-ttl img {
  transform: translateY(100%);
  opacity: 0;
}

.initiative-copy{
  margin:var(--cont-mgL) 0 var(--cont-mgS);
}


.initiative-subTtl{
  font-weight: 600;
  font-size:1.4rem;
  margin-bottom:var(--cont-mgXS);
}

.initiative-txt{
  display: flex;
  flex-direction: column;
  gap:var(--cont-mgXS);
}

.bt-logo{
  max-width:160px;
  margin:var(--cont-mgXS) auto 0;
}

.initiative-txt-wrapper{
  margin-bottom:var(--cont-mgS);

}

.initiative-howto{
  background:rgb(255, 255, 255, 0.6);
  padding:var(--cont-mgS) 5%;
}

.initiative-howto-img{
  margin-bottom:16px;
}

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

  .initiative-bg-wrapper{
    height:40vw;
  }
  
  section.lp-contents.initiative .lp-contents-flex{
    padding-right:10%;
    margin-top:calc(-40vw + var(--sec-pdt));
  }

    section.lp-contents.initiative .lp-contents-flex-inner{
    background:var(--bgColor-lgy);
    padding:var(--cont-mgXL) 7%;
  }

  .initiative-ttl{
    max-width:320px;
  }

  
  .initiative-subTtl{
    font-size:2rem;
  }

  .initiative-txt-wrapper{
    display: flex;
    align-items: center;
  
  }

  .initiative-txt{
    width:50%;
  }

  .bt-logo{
    width:50%;
    max-width:250px;
    margin:0 auto;
  }

  .initiative-howto{
    display: flex;
    align-items: center;
    padding:var(--cont-mgS) 5%;
  }

.initiative-howto-img{
  width:65%;
  margin-bottom:0;
}

  .initiative-howto .c-desc{
    width:30%;
    padding-left:5%;
  }

}


/* product-list -------------*/

section.lp-contents.product-list{
  background:#fff;
  position: relative;
}

.product-list-contents{
  padding:0 5%;
}

.product-list-copy, .product-list-subCopy{
  font-family: var(--font-min);
  text-align: center;
  font-size: var(--font-size-subCopy);
  letter-spacing: 0.1em;
  line-height: 1.8;
}


.product-list-copy mark{
  background:transparent;
  font-size:var(--font-size-copy);
}

.product-box-wrapper{
  margin-top:var(--cont-mgS);
}

.product-box-wrapper .product-box:last-of-type{
  margin-top:var(--cont-mgS);
}


.product-box .item-name, .item-tanpin-name{
  font-size:clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  font-weight: bold;
  padding:0 2%;
  margin:16px 0;
}

.product-box .item-name{
  line-height:1.5;
}

.product-box .price, .item-tanpin-price{
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size:clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  padding:0 2%;
  font-weight: 500;
}

.product-box .price span, .item-tanpin-price span{
  display: inline-block;
  color:#868686;
  font-size:1.0rem;
  transform: scale(0.95);
  margin-left:4px;
  font-weight: normal;
  }

  .product-box .buy-link{
    text-align: center;
    color:#fff;
    background:var(--color-bk);
    letter-spacing: 0.2em;
    margin:var(--mg-s3) 0;
    margin:16px 0;
  }


  .product-tanpin-space{
    display: block;
    width:100%;
    height:1px;
    background:var(--color-bk);
    margin:8px 0;
  }

  .product-tanpin-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:var(--bgColor-lgy);
  }

  .product-list-subCopy-wrapper{
    margin-top:var(--cont-mgL);
  }

  .product-list-subCopy-wrapper.tester{
    width:100%;
    position: relative;
  }

  .product-list-subCopy-wrapper.tester::before{
    display: block;
    content:"";
    width:100%;
    height:1px;
    background:var(--color-bk);
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 1;
  }

  .product-list-subCopy-wrapper .product-list-subCopy{
    width:fit-content;
    margin:0 auto;
    background:#fff;
    padding:0 2%;
    position: relative;
    z-index: 2;
  }

  .product-box-space{
    display: block;
    width:100%;
    height:1px;
    margin:var(--cont-mgL) 0;
    background:var(--color-bk);
  }
  .product-box-set-link{
    margin-top:var(--cont-mgS);
  }



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

    .product-box-wrapper{
      display: flex;
      justify-content: center;
      gap:10%;
    }

    .product-box{
      width:45%;
    }
    
    .product-box-wrapper .product-box:last-of-type{
      margin-top:0;
    }

    .product-box-set-link:hover{
      opacity: 0.8;
    }

    .product-box-set-link{
      transition: 0.2s;
    }

  }


  /*footer -------------*/

  .lp-footer-wrapper{
    width:100%;
    padding:var(--cont-mgXL) 0;
    background:url(https://john.itembox.design/item/lp/shancon2024/img/lp-footer-image.jpg) no-repeat center bottom/cover;
    position: relative;
  }
  
  .lp-footer-wrapper::before{
    content:"";
    display: block;
    width:100%;
    height:100%;
    background:#2E251B;
    position: absolute;
    top:0;
    left:0;
    mix-blend-mode: multiply;
    opacity: 0.5;
    z-index:1;
  }
  
  .lp-footer-txt{
    color:#fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--cont-mgM);
    padding:0 10%;
    z-index:2;
  }

  .lp-footer-wrapper .c-desc{
    max-width:500px;
    font-family: "athelas", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1sem;
  }

  .online-link{
    border-bottom:1px solid #fff !important;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.1em;
    padding-bottom:8px;
    font-size:1.6rem;
  }

  .online-link:visited {
    color: #fff;
}

.online-link:hover{
  color:#fff;
  border-bottom:1px solid #fff !important;
}
  

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

  .lp-footer-wrapper{
    display: grid;
    place-items: center;
  }

}