@charset "utf-8";


/* ブレイクポイント参考 ******************************/
@media screen and (min-width: 640px){}
@media screen and (min-width: 768px){}
@media screen and (min-width: 1024px){}
@media screen and (min-width: 1280px){}


/*インポート　******************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');


/*slick1枚目縦並び*/
/* .movie_list li:not(:first-child){
  display: none;
} */

/*slick矢印リセット*/
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev {
  left: -25px;
}

.slick-next {
  right: -25px;
}

.slick-prev:before, .slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev:before {
  content: '←';
}

.slick-next:before {
  content: '→';
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .25;
}

/* 共通-css
---------------------------------------------------------------------------------------------------------------------*/
.main.page{
  padding-top:50px;
}

.kv-fade li img, .top-about-wrapper .img img, .top-pagelink li .img img ,.about-concept-wrapper .img img,
.column-list li .img img, .news-list li .img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.contents-ttl{
  text-align: center;
  font-family: var(--en);
  letter-spacing: 3px;
  font-size:1.5rem;
  margin:0 auto 8%;
}






@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/

.main.page{
    padding-top:100px;
  }

  .contents-ttl{
    font-size:1.6rem;
    margin:0 auto 4%;
  }
  
}

/* index
---------------------------------------------------------------------------------------------------------------------*/

.kv-wrapper{
  position: relative;
  z-index:100;
  height:70vh;
}

.kv-wrapper::before{
  display: block;
  content:"";
  width:100%;
  height:70vh;
  position: absolute;
  background:rgba(117, 117, 117, 0.6);
  mix-blend-mode:multiply;
  z-index:1000;
}

.kv-entxt{
  position: absolute;
  display: flex;
  align-items: center;
  top:0;
  bottom:0;
  left:4%;
  margin: auto ;
  width:90%;
  z-index:2000;
}

.kv-logo{
  max-width:160px;
  margin-bottom:5%;
}

.kv-txt{
  font-size:10px;
  transform:scale(0.9);
  font-family: var(--en-m);
  color:#fff;
  letter-spacing: 2px;
  line-height:1.4;
  margin-left:-10px;
}



/*スクロールアニメーション　***/
.scl-box{
  position: absolute;
  bottom:1%;
  right:1%;
  z-index:1000;
}

.scrolldown{
  color:#fff;
  font-family: var(--en);
  font-weight: bold;
  font-size:11.5px !important;
  letter-spacing: 3px;
  position: relative;
  padding: 10px 10px 60px;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;

}
.scrolldown::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  background: #fff;
}

.scrolldown::after {
  animation: sdl 1.5s 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%;
  }
}

.kv-fade{
  height:70vh;
}

.kv-fade .slick-list, .kv-fade .slick-track , .kv-fade .slick-slide{
  height:70vh;
}

.top-about-wrapper{
position: relative;
height:calc(80vw + 25vw);
/* height:calc(360px + 60px); */
}

.top-about-wrapper .concept-ttl{
  text-align: center;
  height:50px;
  background:url(https://gigaplus.makeshop.jp/johnsblend/assets/img/brandsite/common/concept-copy.svg) no-repeat top center/contain;
  margin:30px auto 0;
}

.top-about-wrapper .img{
  position: absolute;
  width: 80vw;
  height:80vw;
  right:0;
  top:calc(60px + 60px);
}

.concept-txt{
  width:80%;
  margin-top:-4vw;
  font-size:1.2rem;
  letter-spacing: 1px;
  border:1px solid var(--c-bk);
  /* border-bottom:1px solid var(--c-bk);
  border-right:1px solid var(--c-bk); */
  padding:15vw 4% 8% 4%;
  line-height: 1.6;
}

.top-more-link{
  display: flex;
  justify-content: flex-end;
  margin:0;
  padding:8% 4% 8% 0 ; 
}

.top-more-link.top{
  padding:8% 0 8%; 
}

.top-more-link p{
  display: block;
  /* padding:10px 20px; */
  border:1px solid var(--c-bk);
  position: relative;
}

.top-more-link p::before{
  display: block;
  content:'';
  width:80%;
  height:1px;
  background:var(--c-bk);
  position: absolute;
  top:0;
  bottom:0;
  margin:auto;
  /* right:calc(9rem + 35px); */
  right:calc(10rem + 40px);
}

.top-more-link p a{
  font-family: var(--en);
  padding:10px 20px;
  font-size:1.4rem;
  letter-spacing: 3px;
  font-weight: bold;
}


/*フレグランス部分******************************/
.top-fragrance-list{
display: flex;
display: -webkit-box;
overflow-x: auto!important;
/* overflow-x: scroll ; */
}

.top-fragrance-list li{
  margin-right:4%;
  margin-bottom:4%;
  width:70%;
  /* margin-bottom:20px; */
}


.top-fragrance-list::-webkit-scrollbar {
  margin-top:20px;
  height: 7px; /* スクロールバーの高さ */
}

.top-fragrance-list::-webkit-scrollbar-track {
  background:var(--c-lgy);
}

.top-fragrance-list::-webkit-scrollbar-thumb {
  background: var(--c-t-gy);
  border-radius:20px;
}


/*ページリンク部分******************************/
.top-pagelink{
  width:100%;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  margin:0 auto;
}



.top-pagelink li {
  width: 43vw;
  height: 43vw;
 margin-bottom:4%;
}

.top-pagelink li .img{
  position: relative;
  height: 43vw;
}

.top-pagelink li span{
  position: absolute;
  top:15px;
  left:15px;
  color:#fff;
  font-family: var(--en);
  letter-spacing: 3px;
  font-weight: bold;
}

@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
 
  .kv-wrapper{
    height:100vh;
  }

  .kv-wrapper::before{
    height:100vh;
  }

  .kv-entxt{
    top:0;
    bottom:0;
    left:8%;
    margin: 80px auto 0;
    width:45%;
  }
  
  .kv-logo{
    max-width:240px;
    margin-bottom:5%;
  }
  
  .kv-txt{
    font-size:12px;
    transform:inherit;
    line-height:2.2;
    padding-left:1%;
    margin-left:0;
  }
  
  /*スクロールアニメーション　***/
  .scrolldown{
    font-size:13px !important;
    padding: 10px 10px 70px;
  
  }
  .scrolldown::after {
    height: 60px;
  }
 
  .kv-fade{
    height:100vh;
  }

  .kv-fade .slick-list, .kv-fade .slick-track , .kv-fade .slick-slide{
    height:100vh;
    }


  .top-about-wrapper{
    display: flex;
    align-items: center;
    position: static;
    height:inherit;
    padding-right:0;
    max-width:var(--mw);
    margin:0 auto;
    }

    .top-about-wrapper .concept-ttl{
      width:50%;
      height:60px;
      margin:0 auto;
    }
    
    .top-about-wrapper .img{
      position: static;
      width: 50%;
      height:60vh;
      min-height: 600px;
      right:0;
      top:0;
      /* padding-right:4%; */
    }

    .top-concept{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    }

.concept-txt{
  width:60%;
  margin-top:-4%;
  font-size:1.4rem;
  letter-spacing: 2px;
  padding:6% 6% 5% 6%;
  line-height: 2.3;
  z-index: -1;
  
}

.top-more-link{
  display: flex;
  justify-content: flex-end;
  margin:0;
  padding:0 8% 4% 0 ; 
}

.top-more-link.top{
  padding:8% 4% 8% 4%; 
}

.top-pagelink li a{
  transition: .2s;
  } 

.top-pagelink li a:hover{
opacity: 0.8;
}

.top-more-link p{
  cursor: pointer;
  transition: .2s;
  /* padding:10px 35px; */

}

.top-more-link p::before{
  right:calc(10rem + 75px);
  /* right:calc(9rem + 70px); */
  transition: .1s;
}

.top-more-link p a{
  font-size:1.5rem;
  padding:10px 35px;
} 

.top-more-link p:hover{
  background:var(--c-gy);
}

.top-more-link p:hover::before{
  right:calc(9rem + 65px);
}

/*フレグランス部分******************************/

.top-fragrance-list{
  display: inherit;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  }
  
  .top-fragrance-list li{
    margin-right:2%;
    width:calc(90% / 5 );
    margin-bottom:25px;
  }

  .top-fragrance-list li:nth-child(5),.top-fragrance-list li:nth-child(10) {
    margin-right:0;
  }

/*ページリンク部分******************************/
.top-pagelink{
  max-width:var(--mw);
  
}

.top-pagelink li {
 width:48%;
 height: inherit;
 margin-bottom:4%;
}

.top-pagelink li .img{
  height:200px;
}

.top-pagelink li span{
  position: absolute;
  top:20px;
  left:20px;
  font-size:1.6rem;
}

     
  }

  @media screen and (min-width: 1280px){/*大型PC-------------------*/

    .contents.concept{
      max-width:90%;
      max-width:var(--mw); 
      margin:4% auto 0;
    }

    .top-about-wrapper .img{
      /* padding-right: 2%; */
    }
    .concept-txt{
      /* width:60%;
      max-width:var(--mw);
      margin-top:-6%;
      font-size:1.5rem;
      padding:6% 6% 5% 6%; */
    }

    .top-pagelink li .img{
      height:240px;
    }

    .concept-txt{
      border-left:1px solid var(--c-bk);
    }

    .topfragrance .inner{
      max-width:var(--mw);
    }

  }


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


.filter-nav-wrapper{
  /* border-top:3px solid var(--c-bk);
  border-bottom:1px solid var(--c-bk); */
  background:var(--c-lgy);
  padding:4% 4% 2%;
}

/*フィルタリング******************************/
#filterBtnList{
  display: flex;
  flex-wrap:wrap;
  width:100%;
}
#filterBtnList li{
  width:50%;
  cursor: pointer;
  color:var(--c-t-gy);
  font-family: var(--en);
  letter-spacing: 3px;
  font-weight:700 ;
  margin-bottom:10px;
  transition: .2s;
}
#filterBtnList li:hover{
  color:var(--c-bk);
}
#filterBtnList li.is_active{
  color:var(--c-bk);
}



.product-list{
display: flex;
flex-wrap: wrap;
}


.product-list .filter{
  width:33.333%;
  padding:1%;
}

.product-list .filter .name{
  text-align: center;
  font-family: var(--en);
  letter-spacing: 1px;
  font-size:1.2rem;
}

/*モーダル（ポップアップ）******************************/

.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(41, 37, 37, 0.7);
  transition: all 1s ease-in-out;
}


.product-inner {
    background: #FFF;
    /* overflow-x:hidden; */
    overflow-y: auto;
    padding: 50px 25px;
    width: 90%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 85vh; 
    animation: show 0.6s linear 0s;
    filter: drop-shadow(0px 2px 6px #777);
}

.modal-close {
  position: absolute;
  width: 40px;
  height: 40px;
  top:0;
  right:0;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index:9999;
}

.modal-close span {
display: inline-block;
position: relative;
width:30px;
height:30px;

}

.modal-close span::before{
    display: block;
    position: absolute;
    top:20px;
    content:"";
    width:100%;
    height:1px;
    background:var(--c-bk);
    transform: rotate(45deg);
}

.modal-close span::after{
    display: block;
    position: absolute;
    top:20px;
    content:"";
    width:100%;
    height:1px;
    background:var(--c-bk);
    transform: rotate(-45deg);
}

.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}



@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


.product-list .modal-toggle{
  cursor: pointer;
  transition: .2s;
}

.product-list .modal-toggle:hover{
  opacity: .9;
}

.product-list .item-name{
font-family: var(--en);
text-align: center;
}

.product-list .item-name span{
  display: block;
  width:12em;
  text-align: center;
  margin:0 auto;
  background:var(--c-bk);
  color:#fff;
  font-size:1.3rem;
  padding:2px 10px;
}



.product-list .filter .item-name{
  font-size:1.7rem;
  font-family: var(--en-m);
  letter-spacing: 2px;
  font-weight: inherit;
  text-align: center;
}


.product-list .filter h3{
  text-align: center;
  font-weight: normal;
  font-size:1.2rem;
}

.product-list .filter .img{
  width:80%;
  margin:0 auto;
}

.product-list .filter .des{
font-size:1.3rem;
}

.product-list .filter .price{
  text-align:right;
  letter-spacing: 1px;
  font-family: var(--en);
  margin:2% 0;
}

.product-list .filter .price span{
  display: inline-block;
  font-size:1.2rem;
  padding-left:2%;
}

.product-list .filter h4{
 font-family: var(--en);
 letter-spacing: 2px;
 display: flex;
 align-items: center;
 margin-top:8%;
}

.product-list .filter h4 span{
  display: inline-block;
  margin-left:10px;
  width:100%;
  height:1px;
  background:var(--c-bk);
}

.fragrance-list-limited{
  width:80%;
  max-width:250px;
  margin:0 auto;
  text-align: center;
}

.fragrance-list{
  display:flex;
  flex-wrap:wrap;
  margin:4% 0 0;
}

.fragrance-list li{
  width:25%;
  padding:0 1%;
}
.spec-list{
  font-size:1.2rem;
  margin:4% 0 0;
}

.spec-list li{
 margin-bottom:2%;
}

.spec-list li:last-child{
  margin-bottom:0;
}

.buy-link{
  border:1px solid var(--c-bk);
  text-align: center;
  width:80%;
  max-width:320px;
  margin:8% auto 0;
}

.buy-link a{
  padding:4% 0;
  font-weight: bold;
  letter-spacing: 3px;
  font-family: var(--en);
  transition: .2s;
}

.buy-link a:hover{
  background:var(--c-gy);
}

.product-inner::-webkit-scrollbar {
  width: 6px;
}

.product-inner::-webkit-scrollbar-track {
  background:var(--c-lgy);
}

.product-inner::-webkit-scrollbar-thumb {
  background: var(--c-t-gy);
  border-radius:20px;
}


/* ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #ffe6ea;
} */
  
@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
  
  .filter-nav-wrapper{
    /* padding:4% 4% 2%; */
  }

  #filterBtnList{
    width:60%;
  }

  #filterBtnList li{
    width:30%;
  }

    .product-list .filter{
      width:20%;
    }

    .product-list .filter .name{
      font-size:1.4rem;
 }

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

.about-concept-wrapper .concept-ttl{
    text-align: center;
    height:60px;
    background:url(https://gigaplus.makeshop.jp/johnsblend/assets/img/brandsite/common/concept-copy.svg) no-repeat top center/contain;
    margin:0 auto 8%;
}

  .about-concept-wrapper .concept-box{
    margin:0 0 8%;
  }

  .about-concept-wrapper .img{
    width:300px;
    height:300px;
    margin:0 auto;
  }

  .about-concept-wrapper .txt{
    font-size:1.3rem;
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom:2%;
  }

  .about-concept-wrapper .txt-en{
    color:var(--c-t-gy);
    font-family: var(--en-m);
    letter-spacing: 1px;
    font-size:1.1rem;
    line-height: 1.4;
  }

  .john-box{
    border:1px solid var(--c-bk);
    margin-top:calc( 8% + 14px);
    position: relative;
    padding:12% 8% 8% 8%;
    font-size:1.3rem;
  }

  .john-box .ttl{
    text-align: center;
    position: absolute;
    top:-14px;
    right:0;
    left:0;
    margin: auto;
  }

  .john-box .ttl p{
    display: inline-block;
    padding:7px 10px;
    text-align: center;
    background:var(--c-bk);
    color:#fff;
    font-family: var(--en);
    letter-spacing: 3px;
    font-weight: bold;
  }

.john-box .ojisan{
  width:30%;
  max-width:100px;
  margin:0 auto;
}

.john-box .who{
 font-weight: bold;
 margin:2% 0;
}


/*ヒストリースライダー******************************/
.history-list{
  margin-top:80px;
  padding-top:10px;
}
.history-list li .history-txtwrapper{
margin:4% 0 0;
}

.history-list li .ttl{
  font-weight: bold;
  margin-bottom:2%;
}
.history-list li .txt{
  font-size:1.3rem;
}

.history-list .slick-dots{
  display: flex;
  max-width:400px;
  top:-50px;
  height:50px;
  left:0;
  right:0;
  left:0;
  margin:0 auto;
}

.history-list.slick-dotted{
  margin-bottom:0;
}

.history-list .slick-dots:before{
  display: block;
  content:'';
  width:82%;
  margin:0 auto;
  height:2px;
  background:var(--c-gy);
  position: absolute;
  top:35px;
  right:0;
  left:2%;
}

.history-list .slick-dots li {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
  height: auto; 
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}

.slick-dots li button{
  color:inherit;
  border:none;
  background:inherit;
}

.history-list .slick-dots li button::before{
	content:''!important;
  font-size:1.3rem !important;
  font-weight: bold;
  letter-spacing: 2px;
  color:inherit;
  font-family: var(--en);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  border: none;
  margin: inherit;
  padding: 10px;
  border-radius:inherit;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  color:var(--c-t-gy);
opacity: 1;
  -webkit-font-smoothing: antialiased;
}


.history-list .slick-dots li button::after{
  display: block;
  content:'';
  width: 10px !important;
  height: 10px !important;
  border-radius: 12px;
  background:var(--c-t-gy);
  position: absolute;
  top: 25px;
  left:24px;
/* .history-list .slick-dots li.slick-active button:before{
  background-color: inherit;
  color: var(--c-bk);
  opacity: 1; */
}

.history-list .slick-dots li.slick-active button::before{
  background:inherit;
  color:var(--c-bk);
}

.history-list .slick-dots li.slick-active button:after{
  /* background-color: inherit; */
  background: var(--c-bk);
  opacity: 1;

}


.history-list .slick-dots li:nth-of-type(1) button:before{
  display: block;
  content:'2016' !important;
}
 .slick-dots li:nth-of-type(2) button:before{
  content:'2017' !important;
}
.slick-dots li:nth-of-type(3) button:before{
  content:'2018' !important;
}
.slick-dots li:nth-of-type(4) button:before{
  content:'2019' !important;
}

.slick-dots li:nth-of-type(5) button:before{
  content:'2020' !important;
}
.slick-dots li:nth-of-type(6) button:before{
  content:'2021' !important;
}

/*使用シーン******************************/
.scene-txtwrapper .scene-copy{
  font-size:1.7rem;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
}

.scene-txtwrapper .scene-txt{
  margin:4% 0 8%;
  font-size:1.3rem;
  line-height: 1.6;
}

.scene-list-wrapper{
  margin:8% 0;
}


.scene-list{
  font-family: var(--en);
  letter-spacing: 1px;
 
}

.scene-list .scene-list-ttl{
  border-bottom:1px dotted var(--c-bk);
  padding-bottom:5px;
  font-weight: bold;
 } 
 
 .scene-list .scene-list-ttl span{
   display: inline-block;
   background:var(--c-bk);
   color:#fff;
   width:20px;
   height:20px;
   text-align: center;
   line-height: 20px;
   margin-right:10px;
   font-size:1.3rem;
 }
 
 .scene-list .scene-list-txt{
   margin-bottom:15px;
   font-size:1.2rem;
   padding-top:5px;
  } 


@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
.about-concept-wrapper .concept-box{
  margin:4% 0;
  display: flex;
  align-items: center;
  background:var(--bg-lgy);

}

.about-concept-wrapper .concept-ttl{
  height:60px;
  margin:0;
}

.concept-box div{
  width:60%;
  height:100%;

}

.about-concept-wrapper .img{
  width:40%;
  height:550px;
}

.about-concept-wrapper .txt{
  text-align: center;
  font-size:1.4rem ;
  letter-spacing: 2px;
  line-height: 2.2;
  margin-bottom:1%;
}

.about-concept-wrapper .txt-en{
  letter-spacing: 1px;
  font-size:1.3rem;
  line-height: 1.6;
  text-align: center;
}
.john-box{
  max-width:60%;
  margin:0 auto;
  margin-top:calc( 6% + 14px);
  padding:5% 1% 2% 4%;
  font-size:1.3rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

.john-box .ojisan{
  width:20%;
  max-width:120px;
  margin:0 auto;
}

.john-box .ojisan-txtwrapper{
  width:70%;
}

.john-box .ttl p{
  padding:10px 12px;
}

.john-box .who{
  font-size:1.4rem;
  margin:2% 0;
 }

/*ヒストリースライダー******************************/
.history-list{
  max-width:900px;
  margin:0 auto ;
  margin-top: 80px  !important;
  padding-top:20px;
}

.history-list li{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.history-list li .img{
  width:45%;
}

.history-list li .history-txtwrapper{
width:50%;
margin:4% 0 0;
}

.history-list li .ttl{
  margin-bottom:2%;
  font-size:1.8rem;
}


.history-list li .txt{
  font-size:1.4rem;
  line-height: 1.7;
}
.history-list .slick-dots li button::before{
  font-size:1.4rem !important;
}

.history-list .slick-dots li button::after{

  width: 12px !important;
  height: 12px !important;
  border-radius: 12px;
}



/*使用シーン******************************/
.scene-txtwrapper .scene-copy{
  font-size:1.7rem;
  letter-spacing: 2px;
}

.scene-txtwrapper .scene-txt{
  margin:1% 0 8%;
  text-align: center;
  font-size:1.4rem;
  line-height: 1.7;
}

.contents-ttl.scene{
  margin:0 auto 2%;
}

.scene-img{
  width:90%;
  margin:0 auto;
}

.scene-list-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin:4% 0;
}

.scene-list-wrapper .img{
  display: block;
  height:350px;
  width:35%;
  background:url(https://john.itembox.design/item/brandsite/about/about-item-image.png) no-repeat center bottom/contain;
}

.scene-list{
  width:65%;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  margin:0;
}

.scene-list li{
width:48%;
}

.scene-list .scene-list-ttl{
  padding-bottom:5px;
 } 
 
 .scene-list .scene-list-txt{
   margin-bottom:30px;
   font-size:1.2rem;
   padding-top:5px;
  } 

  .scene-list li:last-child .scene-list-txt{
    margin-bottom:0;
  }

}


/* MEDIA/NEWSページ：　コラム
---------------------------------------------------------------------------------------------------------------------*/

.column-wrapper{
  position: relative;
}

.news-ttl-wrapper{
  width:85%;
  height:150px;
  border-top:1px solid var(--c-bk);
  border-bottom:1px solid var(--c-bk);
  border-right:1px solid var(--c-bk);
  position: relative;
  z-index: -1;
}

.column-wrapper::before{
  position: absolute;
  display: block;
  content:'';
  width:60%;
  height:300px;
  background:var(--c-lgy);
  right:0;
  top:100px;
  z-index: -1;
  
}

.contents-ttl.column{
position: absolute;
top:-10px;
left:4%;
}

.contents-ttl.column span{
  display: inline-block;
  padding:0 5px;
  background:#fff;
}

.column-list{
  padding-left:4%;
  margin-top:-120px;
}

.column-list li{
  width:calc(200px + 1.4rem);
}

.column-list li .img{
  width:200px;
  height:200px;
}

.column-list li .update{
  font-family: var(--en);
  letter-spacing: 2px;
  font-weight: bold;
  writing-mode: vertical-rl;
}

.column-list li .column-flex{
display: flex;
}

.column-list li .column-flex span{
  display: inline-block;
  background:var(--c-lgy);
}

.column-list li .ttl{
  font-size:1.2rem;
  line-height:1.4;
  padding-right:1.4rem;
  letter-spacing: 1px;
  font-weight: bold;
  margin-top:1.5%;
}

.column-list li:nth-child(2){
  margin:4% 0 0 22.5%;
}

@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
  
  .column-wrapper{
    /* max-width:var(--mw); */
    margin:0 auto;
  }
  
  .news-ttl-wrapper{
    width:60%;
    height:250px;
  }
  
  .column-wrapper::before{
    width:80%;
    height:300px;
    top:100px;
  }

  .column-list{
    display: flex;
    padding-left:4%;
    margin-top:-200px;
  }

  .column-list li{
    width:calc(320px + 1.5rem);
    cursor: pointer;
    transition: .2s;
  }

  .column-list li:hover{
    transform:scale(1.02,1.02);
  }
  
  .column-list li .img{
    width:320px;
    height:320px;
  }

  .column-list li .update{
    font-size:1.5rem;
  }

  .column-list li .ttl{
    font-size:1.4rem;
    padding-right:1.5rem;
  }

  .column-list li:nth-child(2){
    margin:100px 0 4% 8%;
  }

}

@media screen and (min-width:768px) and ( max-width:1279px) {
  
  .column-list li{
    width:calc(300px + 1.5rem);
  }
  
  .column-list li .img{
    width:300px;
    height:300px;
  }

}

@media screen and (min-width: 1280px){/*大型PC-------------------*/
  

  .column-list{
    display: flex;
    padding-left:10%;
    margin-top:-200px;
  }

  .contents-ttl.column{
    left:14%;
    }

  .news-ttl-wrapper{
    width:60%;
  }
  
  .column-wrapper::before{
    width:70%;
    height:350px;
    top:100px;
  }
  
  .column-list li{
    width:calc(350px + 1.5rem);
  }
  .column-list li:nth-child(2){
    margin:100px 0 4% 4%;
  }
  
  .column-list li .img{
    width:350px;
    height:350px;
  }

  .top-more-link.column{
    position: absolute;
    right:0;
    bottom:20%;
  }
}

@media screen and (min-width: 1920px){/*超大型PC-------------------*/
 
  .column-wrapper::before{
    height:380px;
  }

  .column-list{
    padding-left:200px;
  }

  .contents-ttl.column{
    left:200px;
    }

  .column-list li{
    width:calc(380px + 1.5rem);
  }
  .column-list li:nth-child(2){
    margin:100px 0 4% 8%;
  }
  
  .column-list li .img{
    width:380px;
    height:380px;
  }
}

/* MEDIA/NEWSページ：　ニュースリリース
---------------------------------------------------------------------------------------------------------------------*/



.media-list-wrapper{
  width:93%;
  margin:0 auto;
  padding:15px 20px 10px;
  border:1px solid var(--c-bk);
  font-family: var(--en);
}

.media-list-wrapper h3{
  text-align: center;
  padding:4% 0;
  letter-spacing: 2px;
  border-bottom:1px solid var(--c-bk);
}

.media-list .img{
  margin:2% 0;
  padding: 0 6%;
}

.media-list-wrapper .txt{
  letter-spacing: 1px;
}


.media-list .slick-next:before, .slick-prev:before{
  content:'';
}

.media-list .slick-prev, .media-list .slick-next{
  top: 47%;
}

.media-list .slick-prev{
  left:-30px;
  width:35px;
  height:35px;
  /* left: calc((100vw - 60%) / 2); */
  border:1px solid var(--c-bk);
  background:var(--c-lgy);
}



.media-list .slick-next{
  right:-30px;
  width:35px;
  height:35px;
  border:1px solid var(--c-bk);
  background:var(--c-lgy);
}

.media-list .slick-prev span, .media-list .slick-next span{
  display: block;
  width:60%;
  height:10px;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
}

.media-list .slick-prev span{
background:url(https://john.itembox.design/item/brandsite/common/img/slider-pre.svg) no-repeat center center/contain;
}

.media-list .slick-next span{
  background:url(https://john.itembox.design/item/brandsite/common/img/slider-next.svg) no-repeat center center/contain;
 }

.news-list{
  width:94%;
  margin: 4% auto 0;
}

 .news-list li a{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin:8% 0;
 }

 .news-list li .img{
  width:36%;
  height: 110px;
 }

 .news-list li .news-txt-wrapper{
   width:59%;
   font-size:1.2rem;
 }

 .news-list li .date, .news-list li .link{
   font-family: var(--en);
   letter-spacing: 1px;
   font-weight: bold;
   font-size:1.2rem;
 }

 .news-list li .date span{
   display: inline-block;
   border:1px solid var(--c-bk);
   padding:3px 6px;
   margin-right:10px;
 }

 .news-list li .txt{
   margin:8px 0 15px;
   line-height: 1.4;
   font-size:1.1rem;
 }

 .news-list li .link{
   font-size:1.2rem;
 }

 .news-list li .link span{
   display: inline-block;
   border-bottom:1px solid var(--c-bk);
 }

 .movie-wrapper{
  position: relative;
}


.news-ttl-wrapper.movie{
  width:75%;
  height:150px;
  border-top:1px solid var(--c-bk);
  border-bottom:1px solid var(--c-bk);
  border-right:0;
  border-left:1px solid var(--c-bk);
  position: absolute;
  right:0;
  z-index: -10;
}

@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
  .news-wrapper{
    max-width:900px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
  }

  .media-list-wrapper{
    width:35%;
  }

  .media-list-wrapper h3{
    padding:0 0 4%;
  }

  .news-list{
    width:50%;
    margin: 0;
  }

  .news-list li{
  height:calc(100% / 3);
  }


  .news-list li a{
    margin:2% 0;
    transition: .2s;
  }

  .news-list li:first-child a{
    margin:0 0 2%;
  }

  .news-list li:last-child a{
    margin:2% 0 0;
  }


  .news-list li a:hover{
    opacity: 0.8;
  }

  .news-list li .img{
    min-height:120px;
    height: inherit;
  }

  .news-list li .txt{
    margin:3% 0 5%; 
    line-height: 1.5;
  }
}


/* MEDIA/NEWSページ：　ムービー
---------------------------------------------------------------------------------------------------------------------*/

.contents-ttl.movie{
  position: absolute;
  top:-10px;
  right:4%;
  }

.contents-ttl.movie span{
    display: inline-block;
    padding:0 5px;
    background:#fff;
  }

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


 /*ムービー部分******************************/

.media-movie-list li .ttl{
  font-family: var(--en);
  font-weight: bold;
  letter-spacing: 2px;
  margin:4% 0;
}

.media-movie-list{
  display: flex;
  display: -webkit-box;
  overflow-x: auto!important;
  height:inherit;
  padding-top:30px;
  }
  
  .media-movie-list li{
    margin-right:4%;
    margin-bottom:4%;
    width:70%;
  }
  
  
  .media-movie-list::-webkit-scrollbar {
    margin-top:20px;
    height: 7px; 
  }
  
  .media-movie-list::-webkit-scrollbar-track {
    background:var(--c-lgy);
  }
  
  .media-movie-list::-webkit-scrollbar-thumb {
    background: var(--c-t-gy);
    border-radius:20px;
  }
   


 /*モーダル（ポップアップ）******************************/
 .movie-inner {
  background:transparent;
  overflow-y: auto;
  padding: 40px 20px;
  width: 98%;
  max-width: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: auto; 
  animation: show 0.6s linear 0s;
  filter: drop-shadow(0px 2px 6px #777);
}

.movie-inner video{
  width:100%;
  height:100%;
}

.movie-inner .modal-close span::before{
    background:#fff;
}

.movie-inner .modal-close span::after{
    background:#fff;
}




 @media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
 
  .news-ttl-wrapper.movie{
    width:60%;
    height:250px;
    top:120px;
  }

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

  .media-movie-list{
    display: inherit;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    padding-top:calc(120px + 50px);
    padding-left:1.2%;
    }
    
    .media-movie-list li{
      margin-right:3%;
      width:calc(90% / 4 );
      margin-bottom:25px;
      cursor: pointer;
      transition: .2s;
    }
  
    .media-movie-list li:nth-child(4),.media-movie-list li:nth-child(8) {
      margin-right:0;
    }
 

    .media-movie-list li:hover{
      opacity: 1;
      transform:scale(1.02,1.02);
    }



  /* .movie_list .slick-prev{
    position:absolute;
    top:110%;
    width:30px;
    height:30px;
    left: calc((100vw - 60%) / 2);
    border:1px solid var(--c-bk);
    display: block !important;
    z-index: 100;
    transition: .2s;
  }
  
  .movie_list .slick-next{
    position:absolute;
    top:110%;
    right: calc((100vw - 60%) / 2);
    width:30px;
    height:30px;
    border:1px solid var(--c-bk);
    display: block !important;
    z-index: 100;
    transition: .2s;
  }
  
  .movie_list .slick-prev span, .movie_list .slick-next span{
    display: block;
    width:60%;
    height:10px;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;

  }

  .movie_list .slick-next:before{
    content:'';
  }

  .movie_list .slick-prev:hover ,.movie_list .slick-next:hover{
    background:var(--c-gy);
  }
   */

/*フレグランススライダー****************************
.movie_list{
  height:inherit;
  padding-top:calc(120px + 50px);
}

.movie_list li{
  padding:0 1.5% 0 0;
  cursor: pointer;
  transition: .2s;
}

.movie_list li:hover{
  opacity: 1;
  transform:scale(1.02,1.02);
}

.moviecontents {
  padding: 0 0 100px;
}

.moviecontents .inner {
  margin: 0 auto;
  width: 90%;
  padding-left: 0;
  padding-right: 3rem;
}

.moviecontents .lineup {
  position: relative;
}
.moviecontents .lineup-carousel li {
  text-align: center;
  margin-right: 24px;
}
.moviecontents .lineup-carousel img {
  display: block;
  margin-bottom: 16px;
  width: 100%;
}
.moviecontents .slick-list {
  overflow: visible;
}

.movie_list .slick-prev{
  left: inherit;
  right:0;
}

.movie_list .slick-next{
  right:inherit;
  right:-40px;
}
**/


}


/* MEDIA/NEWSページ：ムック本
---------------------------------------------------------------------------------------------------------------------*/
.contents.book{
  padding-top:0;
}
.about-concept-wrapper.book .concept-box{
  margin:0;
}

.about-concept-wrapper.book .book-txt{
  text-align: center;
  letter-spacing: 2px;
  line-height:1.7;
  padding: 4% 0;
  font-weight: bold;
}

.book-link{
  width:9em;
  font-family: var(--en);
  letter-spacing: 3px;
  font-weight: bold;
  text-align: center;
  margin:8% auto 0;
}

.book-link a{
  padding:5% 0;
}

.book-link span{
  display:inline-block;
  border-bottom:1px solid var(--c-bk);
  padding:0 5px 2%;
}

.book-link.pc{
  display: none;
}

@media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
  .book-link.sp{
    display: none;
  }

  .book-link.pc{
    font-size:1.5rem;
    display: block;
    margin:4% auto 0;
  }

  .about-concept-wrapper.book .book-txt{
    letter-spacing: 3px;
    line-height:2;
  }

  .about-concept-wrapper.book .concept-box{
    /* background:inherit; */
  }

}