@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:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');

/* CSS変数
---------------------------------------------------------------------------------------------------------------------*/
:root{

/*コンテンツ幅*/
/* --mw:1400px; */

/*カラー*/
--c-bk:#2F2725;/*:ベース→黒*/
--c-lgy:#EFEFEF;/*ベース→ライトグレー*/
--c-gy:#D5D5D5;/*ベース→グレー*/
--c-t-gy:#ACACAC;/*文字グレー*/
--c-t-dgy:#868686;/*文字ダークグレー*/
--bg-lgy:#f7f7f7;/*背景用ライトグレー*/

--c-led:#a44c5b;/*ポイント→赤*/
--c-led:#a2aec8;/*ポイント→ライトブルー*/



--c-led:#a44c5b;/*ポイント→赤*/
--c-led:#a2aec8;/*ポイント→ライトブルー*/

/*英字フォント*/
--en: 'Roboto Condensed', sans-serif;
--en-m: 'Lora', serif;

/*フォントサイズ*/
/*--f-en1:1.8rem;英字フォント*/
/*--f-en2:1.4rem;英字フォント*/

/*マージン*/
--s-mg-pc:150px;/*セクション マージン PC*/
--s-mg-sp:0;/*セクション マージン SP*/
}




/* reset-css
---------------------------------------------------------------------------------------------------------------------*/
html, head, body, h1, h2, h3, h4, h5, h6, ul, ol, li, a, p, dl, dd, dt, div, span, img, hr, strong, em, table, tbody, caption, tr, th, td, address {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
	word-break:normal;
}

body{
  overflow-x: hidden;
}
a{text-decoration: none; color:inherit; display: block;}
ul{list-style-type: none;}
*,*::before,*::after {box-sizing: border-box;}
img {max-width: 100%;vertical-align: bottom;}
html{font-size:62.5%;  }

/* 共通-css
---------------------------------------------------------------------------------------------------------------------*/

body{
	font-family:"游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color:var(--c-bk);
    font-size:1.4rem;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

#loading {
  width: 100vw;
  /* height: 100vh; */
  position: absolute;
  transition: all 1s;
  /* background-color:var(--c-lgy);  */
  z-index:999999;
}

.loader {
  width: 100%;
  height: 4.8px;
  display: inline-block;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  width: 0;
  height: 4.8px;
  background:var(--c-bk);
  position: absolute;
  top: 0;
  left: 0;
  animation: animFw 10s linear infinite;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

@keyframes animFw {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}

#g-nav li, #g-nav-pagetop li, .footer-nav li{
    font-family: var(--en);
    letter-spacing: 3px;
    font-weight:600;
}
.contents-inner{
    padding:0 5%;
    max-width:var(--mw);
    margin:0 auto;
}
.main{
  padding-top:50px;
}

.contents{
  padding:12% 0;
}

.contents.bg-gy{
  background:var(--c-lgy);
}

.br-pc{
  display: none;
}

@media screen and (min-width: 768px){/*タブレット - 小型PC(1399px)-------------------*/
  .main{
    padding-top:60px;
    }

  .contents-inner{
      padding:0 6%;
  }

.contents{
  padding:6% 0;
 }

.contents{
  padding:6% 0;
 }

  .contents.first{
padding:0 0 6%;
  }

    .br-pc{
      display: block;
    }
}



/* header
---------------------------------------------------------------------------------------------------------------------*/
#head_wrap {
    /* top: -100px; */
    position: relative;
    width: 100%;
    /* margin: 100px auto 0; */
    /* line-height: 1; */
    z-index: 999;
    }
  
  .h-inner{
    width:100%;
    /* position: relative; */
    position:fixed;
  }
  
 #head-wrap-pagetop{position: relative;}
 
  
  /**グローバルナビゲーション*/
   #g-nav{
    width:70%;
    height: 100vh;
    background:var(--c-lgy);
    position:absolute;
    top:0;
    right:0;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-in-out;
    padding:8%;
    }


#g-nav-pagetop{
  width:70%;
  height: 100vh;
  background:var(--c-lgy);
  position:absolute;
  top:0;
  right:0;
  opacity: 0;
  pointer-events: none;
  transition: .5s ease-in-out;
  padding:8%;
  z-index: 100;
} 
  

#g-nav.open, 
#g-nav-pagetop.open{ opacity: 1; pointer-events:auto;}




#g-nav ul, #g-nav-pagetop ul{
    padding-top:20vw;
  }

  #g-nav li, #g-nav-pagetop li{
      font-family: var(--en);
      font-size:1.8rem;
      letter-spacing: 3px;
      margin-bottom:4%;
  }

  #g-nav li a, #g-nav-pagetop li a{
    padding:3% 0;
    display: block;
  }
  
  .sp-head, .sp-head2{
    width:100%;
    height:50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background:rgb(255, 255, 255,0.9);
  }

  .sp-head2{
    justify-content: flex-end;
    position: absolute;
    background:inherit;
  }
  
  #hum-nav, #hum-nav2{
    width:50px;
    height:50px;
    display: flex;
    align-items: center;
    padding:0 10px;
    cursor: pointer;
  }
  
  #hum-nav div, #hum-nav2 div{
    display: block;
    width:100%;
    height:26px;
    position: relative;
  }
  
  #hum-nav div span, #hum-nav2 div span{
    display: block;
    width:100%;
    height:2px;
    background:var(--c-bk);
    position: absolute;
    transition: .35s ease-in-out;
    z-index: 100;
  }

#hum-nav2 div span{background:#fff;}

#hum-nav2.active div span{
  background:var(--c-bk);
}
  
  #hum-nav div span:nth-child(1),  #hum-nav2 div span:nth-child(1){top:0;}
  #hum-nav div span:nth-child(2), #hum-nav2 div span:nth-child(2){top:10px;}
  #hum-nav div span:nth-child(3),  #hum-nav2 div span:nth-child(3){top:20px;}
  
  #hum-nav.active div span:nth-child(1), #hum-nav2.active div span:nth-child(1){
    transform: rotate(315deg);
    top:40%;
  }
  #hum-nav.active div span:nth-child(2), #hum-nav2.active div span:nth-child(2){width:0;}
  #hum-nav.active div span:nth-child(3), #hum-nav2.active div span:nth-child(3){
    transform: rotate(-315deg);
    top:40%;
  }


  .logo{
      width:30%;
      height:30px;
      background:url(https://gigaplus.makeshop.jp/johnsblend/assets/img/brandsite/common/johnsblend_logo.svg) no-repeat left center/contain;
      margin-left:10px;
  }

.logo a{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width:100%;
    height:100%;
}
  

  
  @media screen and (min-width: 768px){/*タブレット - 小型PC-------------------*/
  
    .sp-head{
      position:static;
      height:60px;
      background:inherit;
    }

    .sp-head2{display: none;}
  
    #head_wrap{
      position: fixed;
      height: 60px;
      background:rgb(255, 255, 255,0.9);
      transition: top 0.65s ease-in;
    }

  
  #hum-nav, #hum-nav2{
      display: none;
    }
  
  #g-nav,  #g-nav-pagetop{
    width:100%;
    height: inherit;
    position:static;
    background:inherit;
    padding:0;
    opacity: 1;
    pointer-events: auto;
  }

  #g-nav-pagetop{
    position:absolute;
  }
  


  .h-inner{
    display: flex;
    padding:0 1%;
    align-items: center;
  }

  .logo{
    height:35px;
    margin-left:0;
}
  
  #g-nav ul,  #g-nav-pagetop ul{
    display: flex;
    justify-content: flex-end;
    padding-top:0;
  }

#g-nav-pagetop {width:50%;padding-right:1%;}

 #g-nav ul li,  #g-nav-pagetop ul li{
     margin:0 2%;
     font-size:1.4rem;
     margin-bottom:0;
 }

 #g-nav li a,  #g-nav-pagetop li a{
  display: block;
  padding:20px 0;
  transition: .2s;
}

#g-nav-pagetop li a{
  color:#fff;
}

#g-nav li a:hover , #g-nav-pagetop li a:hover{
  opacity: .7;
}

 }

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

.footer{
    width:100%;
    background:var(--c-gy);
}

.sns-nav-ttl{
  font-family: var(--en);
  letter-spacing: 3px;
  font-weight: 700;
  text-align: center;
  padding:8% 0 3%;
}

.sns-nav{
    max-width:60%;
    margin:0 auto;
    display: flex;
    justify-content: center;
}

.sns-nav li{
  width:35px;
  margin:0 1%;
}

.footer-bar{
    display: block;
    width:100%;
    height:1px;
    background:var(--c-bk);
    margin:6% 0;
}

.footer-navinner{
    display: flex;
    justify-content: center;

}

.footer-nav{
    width:49%;
}

.footer-nav li a{
  padding:2% 0;
  font-size:1.3rem;
}

.footer-logo{
    width:40%;
    height:30px;
    background:url(../img/johnsblend_logo.svg) no-repeat left center/contain;
    margin:6% 0;
}


.copy{
    background:var(--c-bk);
    color:#fff;
    text-align: center;
    font-size:1.2rem;
    padding:2% 0;
}

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

    .footer-inner{
        padding:4% 5% 0;
    }
    
    .sns-nav-ttl{
      padding:4% 0 1%;
    }

    .sns-nav li{
      margin:0 5px;
      transition: .2s;
    }

    .sns-nav li a{
      transition: .2s;
    }
    
    .sns-nav li a:hover{
opacity: 0.8;
    }

    .footer-bar{
        margin:3% 0;
    }
    
    .footer-navwrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:3%;
    }

    .footer-navinner{
        width:35%;
    }
    
    .footer-nav{
        width:100%;
    }
    
    .footer-nav li a{
      padding:2% 0;
      font-size:1.4rem;
    }
    
    .footer-logo{
        max-width:400px;
        height:40px;
        background:url(../img/johnsblend_logo.svg) no-repeat right center/contain;
        margin:0;
    }
    
    .copy{
        padding:1% 0;
    }
}
  
/* news share */

.urlCopy {
  text-align: center;
}

.articleFooter {
  width: 95%;
  max-width: 700px;
  display: grid;
  grid-template-columns: 20% 50% 30%;
  grid-template-rows: 100px;
  margin: 0 auto;
  height: auto;
  align-items: center;
}

.shareBtn {
  display: grid;
  grid-template-columns: 40% 20% 20% 20%;
  width: 100%;
  align-items: center;
}

.shareBtn img {
  height: auto;
  padding-left: 20px;
}

.lineBtn {
  display: block;
  width: 95%;
  max-width: 700px;
  letter-spacing: 1px;
  font-weight: bold;
  margin: 0 auto;
  border: 1px solid #333;
  font-weight: 14px;
  padding: 2%;
  white-space: nowrap;
  margin-bottom: 20px;
  text-align: center;
}

.lineBtn img {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

@media screen and (max-width: 768px) {
  .articleFooter {
      grid-template-columns: 1fr;
      grid-auto-flow: column;
      white-space: nowrap;
      text-align: center;
      justify-content: center;
  }

  .shareBtn {
      width: 60%;
      margin: 0 auto;
      margin-top: 5px;
      margin-bottom: 5px;
  }

}