@charset "utf-8";

/* 全体のスタイル調整 */
* {
   box-sizing: border-box;

}

/* bodyの初期スタイル調整 */
body {
   font-size: 16px;
   line-height: 1.5;
   color: #000;
   font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

   background-color: #fff;
   font-feature-settings: "palt";
letter-spacing: .5px;

}


/* 初期スタイル調整 */

h1{
      margin-top: 80px;
      text-align: center;
      font-size: 16px;
      font-weight: 400;

}

@media screen and (min-width:768px) {
h1{
      margin-top: 160px;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      font-family: "Hiragino Kaku Gothic Pro"

}
}

h2 {
   margin: 0 0 60px 0;
   font-size: 26px;
   font-weight: 600;
   color: #00b3b3;
   text-decoration:underline;
}


@media screen and (min-width:768px) {
  h2 {
   margin: 0 0 60px 0;
   font-size: 28px;
   font-weight: 600;
   color: #00b3b3;
   text-decoration:underline;
  }
}


h3,

p {
  margin-top: 0;
  margin-bottom: 0;

}

a {	
   text-decoration: none;
   color: #fff;
}
a:hover,
a:focus,

nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

li {
   margin: 0 0 0 5px;
   font-size: 14px;

}

img {
  max-width:100%;
  height: auto;
}

section {
  padding: 30px 0 0 0;
}

#item {
   margin-top:-200px;
  padding-top:200px;
}

#more {
   margin-top:-160px;
  padding-top:160px;
}

#labo {
   margin-top:-120px;
  padding-top:120px;
}

#contacts {
   margin-top:-120px;
  padding-top:120px;
}


#combo {
   margin-top:-160px;
  padding-top:160px;
}



/* 初期スタイル調整 ここまで */

/* 共通スタイル調整 ここから */

.wrap {
     overflow: hidden;
 }

.txt-center {
  text-align: center;
}

.font-small {
  font-size: 0.5em;

}

.font-weight {
  font-weight: 800;
}

.font-weight600 {
  font-weight600: 600;
}

.font-big {
  font-size: 3em;
}

.font-green {
  color: #23ac38;
}

.font-red {
  color: #E60021;
}

.font-blue {
  color: #43a0ae;
}

.font-orange {
  color: #b95148;
}

.font-lightblue {
  color: #00b3b3;
}

.mftxt-center {
  text-align: center;
  margin: 10px 0;
}


.btn-border {
  display: inline-block;
  max-width: 280px;
  text-align: left;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 85px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.btn-border:hover {
  background-color: #23ac38;
  border-color: #cbe585;
  color: #FFF;
}


.btn-border-new {
  display: inline-block;
  width: 260px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 0;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.btn-border-new:hover {
  background-color: #23ac38;
  border-color: #cbe585;
  color: #FFF;
}

@media screen and (min-width: 768px){  
  .sp_br{
    display: none;
  }
}

/* 共通スタイル調整 ここまで */


/* ヘッダーブロック ここから */

/* ヘッダーの初期スタイル調整 */
.header {
   position: fixed;
   top: 0;
   padding: 0px 10px 10px 10px;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.7);
   align-items: center;
}

.header-logo-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*ロゴ*/

.logo {
  width: 120px;
  margin: 0;
  text-align: left;
}

@media screen and (min-width:768px) {
  .logo {
    width: 300px;
  }
}



  
  /*SPナビ*/
.sp-nav {
   display: none;
}



  
   /*PCメニュー*/
   
.pc-nav ul {
    overflow: hidden;
}
 
.pc-nav li {
    float: left;
    width: 100px;
    max-width: 300px;
    height: 100%;
    list-style-type: none;
    

}
 
.pc-nav  a {
    display: block;
    display: table-cell;
    vertical-align: middle;
    padding: 30px 0;
    height: 105px;
    width: 100px;
    text-align: center;
    text-decoration: none;
    background-color: #00b3b3;
    color: #fff;
    letter-spacing: 0.1em
    transform: scale(0.5, 1);
}
 
.pc-nav a:hover {
    background-color: #009898;
}


#buy a {
	background-color: #23ac38;
    color: #fff;
    }

#buy a:hover {
    background-color: #009800;
}


@media screen and (max-width: 640px) {
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .8);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 20px 20px 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #000;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #000;
   }
   
   
   
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
      font-size: 24px;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( -45deg );
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }

   h2 {
      line-height: 1.6;
      text-align: center;
   }
}

/*-------------------------------------------
　メインビジュアル
-------------------------------------------*/
.mv-area{

}

@media screen and (min-width:768px) {
.mv-area{
      text-align: center;
}
}

.mv-toptext {
      margin-top: 170px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
}



.mv-text {
      margin-top: 40px;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      font-family: 'Noto Serif JP', serif;
}

.mv-saptext {
      margin-top: 0px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
}

@media screen and (min-width:768px) {
.mv-text {
      margin-top: 60px;
      text-align: center;
      font-size: 24px;
      font-weight: 400;
      font-family: 'Noto Serif JP', serif;

}
.mv-saptext {
      margin-top: 0px;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
}

}

.mv-area img {
      width: 100vw;
      height: 100vx;
      margin-top: 30px;
      
}

.pc_img {display: none;/*PC画像は非表示する*/
}
.sp_img {display:inline-block;/*スマホ画像を表示する*/
}

@media screen and (min-width:768px) {
.mv-area img {
margin-top: 30px;
width: 800px;
height: 650px;
      }
      .pc_img {display:inline-block;/*PC画像を表示する*/}
.sp_img {display:none;/*スマホ画像は非表示にする*/}


}

  

.mv-moneytext {
      margin-top: 10px;
      text-align: center;
      font-size: 40px;
      font-weight: 600;


}

@media screen and (min-width:768px) {
.mv-moneytext {
      margin-top: 10px;
      text-align: center;
      font-size: 58px;
      font-weight: 600;
      }
}


.mv-text-pc {
      display: none;
}

.mv-text-sp {
      display: none;
}

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


/*-------------------------------------------
　新メインビジュアル
-------------------------------------------*/
.item-area{

}

.item-cbd{
      text-align: center;
    margin: 30px auto 0;
    padding: 10px 0 10px 0;
    background: #ffffff;
    border: 12px solid #b7dfdd;
    line-height: 1.8;
}

.item-balrm{
      text-align: center;
    margin: 10px auto;
    padding: 10px 0 10px 0;
    background: #ffffff;
    border: 12px solid #cae4bc;
    line-height: 1.8;
}

.item-ter{
      text-align: center;
    margin: 10px auto;
    padding: 10px 0 10px 0;
    background: #ffffff;
    border: 12px solid #c9c9ca;
    line-height: 1.8;
}

@media screen and (min-width:768px) {
.item-cbd{
      text-align: center;
      width: 840px;
    margin: 50px auto 0px;
    padding: 20px 0 10px 0;
    background: #ffffff;
    border: 20px solid #b7dfdd;
    line-height: 1.8;
}

.item-balrm{
      text-align: center;
      width: 840px;
    margin: 40px auto 0px;
    padding: 20px 0 10px 0;
    background: #ffffff;
    border: 20px solid #cae4bc;
    line-height: 1.8;
}

.item-ter{
      text-align: center;
      width: 840px;
    margin: 20px auto 0px;
    padding: 20px 0 10px 0;
    background: #ffffff;
    border: 20px solid #c9c9ca;
    line-height: 1.8;
}
}



.item-area-text {
      margin: 5px 20px;
      font-size: 15px;
      font-weight: 400;
      text-align: left;
      font-family: "Hiragino Kaku Gothic Pro";
}


@media screen and (min-width:768px) {
.item-area-text {
      margin: 5px 40px;
      font-size: 15px;
      font-weight: 400;
      text-align: left;
      font-family: "Hiragino Kaku Gothic Pro";
}
}


.pc_img {display: none;/*PC画像は非表示する*/
}
.sp_img {display:inline-block;/*スマホ画像を表示する*/
}

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

.pc_img {display:inline-block;/*PC画像を表示する*/}
.sp_img {display:none;/*スマホ画像は非表示にする*/}


}

  

.item-area-moneytext {
      margin-top: 10px;
      text-align: center;
      font-size: 40px;
      font-weight: 600;


}

@media screen and (min-width:768px) {
.item-area-moneytext {
      margin-top: -20px;
      text-align: center;
      font-size: 58px;
      font-weight: 600;
      }
}


.mv-text-pc {
      display: none;
}

.mv-text-sp {
      display: none;
}

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

.item-area-cbd-content {
  display: flex;
  flex-wrap: wrap;

}


.item-area-cbd-item {
  flex: 50%;
  text-align: center;
  margin: 0 0 10px 0;
}



@media screen and (min-width:768px) {
  .item-area-cbd-content {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 30px;
  }

  .item-area-cbd-item {
    flex: 1;
    text-align: center;
  margin: 0 0 10px 0;
  }

}

.cbditem-btn-border {
  display: inline-block;
  width: 280px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 20px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

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

.cbditem-btn-border {
  display: inline-block;
  width: 235px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 10px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}

.cbditem-btn-border:hover {
  background-color: #23ac38;
  border-color: #cbe585;
  color: #FFF;
}

.item-btn-border {
  display: inline-block;
  width: 280px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 20px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

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

.item-btn-border {
  display: inline-block;
  width: 360px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 20px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}

.item-btn-border:hover {
  background-color: #23ac38;
  border-color: #cbe585;
  color: #FFF;
}

.comboitem-btn-border {
  display: inline-block;
  width: 260px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 20px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

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

.comboitem-btn-border {
  display: inline-block;
  width: 730px;
  font-size: 18px;
  background-color: #00b3b3;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 3px 20px;
  transition: .4s;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
}

.comboitem-btn-border:hover {
  background-color: #23ac38;
  border-color: #cbe585;
  color: #FFF;
}


.cbd-item-new {
  flex: 50%;
  text-align: center;
  padding: 10px 10px 0;
  margin: 5px 0;
}

.cbd-item-new img {
  width: 340px;
  margin: 0 auto;
}



@media screen and (min-width:768px) {
 
  .cbd-item-new {
    flex: 1;
  }
}


.cbd-buy-new {
  padding: 5px 0;
}


/*-------------------------------------------
　証明書
-------------------------------------------*/

.popup-content {
  display: flex;
  flex-wrap: wrap;

}


.popup-item {
  flex: 1;
  text-align: center;
  padding: 10px 0 0;
  margin: 5px;
}

.popup-item img {
  width: 160px;
  margin: 0 auto;
}


@media screen and (min-width:768px) {
  .popup-content {
    flex-wrap: nowrap;
    max-width: 880px;
    margin: 0 auto;
  }

  .popup-item {
    flex: 1;
  padding: 50px 10px 0;
  margin: 5px;
  }

.popup-item img {
  width: 300px;
  margin: 0 auto;
}

.popup-text {
      margin-top: 0px;
      text-align: center;
      font-size: 16px;
      font-weight: 400;

}

}



/*-------------------------------------------
　もっと詳しくCBD
-------------------------------------------*/
.morecbd-area{
      text-align: center;
}

.morecbd-area img {
      width: 100vw;
      height: 100vx;
      margin-top: -20px;
      
}

@media screen and (min-width:768px) {
.morecbd-area img {
margin-top: -20px;
width: 800px;
      }
}


.morecbd-text {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
}

@media screen and (min-width:768px) {
.morecbd-text {
      margin-top: 20px;
      font-size: 34px;
      font-weight: 600;
      text-align: center;
}
}


/*-------------------------------------------
　WhOのついて
-------------------------------------------*/

.who-content {
  display: flex;
  flex-wrap: wrap;
  font-family: 'Noto Serif JP', serif;

}



.who-item {
  flex: 50%;
  padding: 20px 0;
  margin: 5px;
}

.who-l img {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}


@media screen and (min-width:768px) {
  .who-content {
    flex-wrap: nowrap;
    max-width: 870px;
    margin: 30px auto;
  }

  .who-l {
    width: 250px;
    padding: 30px 0;
  }

  .who-item {
    flex: 1;
  }
  
  .who-l img {
  width: 220px;
  margin: 0 auto;
}

}


.who-title {
      margin-top: 10px;
      font-size: 30px;
      font-weight: 600;
      color:#009FD8;

}

.who-text {
      margin-top: 10px;
      font-size: 20px;
      font-weight: 600;
      line-height: 35px;
      

}


.who-attention {
      margin-top: 10px;
      font-size: 18px;
      font-weight: 600;
      line-height: 35px;

}


/*-------------------------------------------
　特徴理由
-------------------------------------------*/

.riyuu {
      margin-top: 60px;
}

@media screen and (min-width:768px) {
.riyuu {
      margin-top: 60px;
      text-align: center;

}
}

.riyuu-text {
      margin-top: 40px;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
}

@media screen and (min-width:768px) {
.riyuu-text {
      margin-top: 40px;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
}
}

.riyuu-hosoku {

      font-size: 14px;
      font-weight: 600;
      text-align: center;
}


/*-------------------------------------------
　販売商品
-------------------------------------------*/

.cbd-content {
  display: flex;
  flex-wrap: wrap;

}

.cbd-content-end {
  display: flex;
  flex-wrap: wrap;

}


.cbd-item {
  flex: 50%;
  text-align: center;
  padding: 20px 20px 0;
  margin: 5px;
}

.cbd-item img {
  width: 400px;
  margin: 0 auto;
}


@media screen and (min-width:768px) {
  .cbd-content {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto;
  }

  .cbd-content-end {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto 90px;
  }
  
  .cbd-item {
    flex: 1;
  }

}


.cbd-text {
      margin-top: 5px;
      text-align: center;
      font-size: 20px;
      font-weight: 400;

}

.cbd-moneytext {
      text-align: center;
      font-size: 34px;
      font-weight: 400;
}






/*-------------------------------------------
　注意事項
-------------------------------------------*/

.attention-content {

}


.attention-item {
  flex: 50%;
  text-align: center;
}



@media screen and (min-width:768px) {
  .attention-content {
    flex-wrap: nowrap;
    max-width: 800px;
    margin: 0 auto;
    
  }

  .attention-item {
    flex: 1;
  }

}


.attention-text {
      background-color: #23ac38;
      color: #FFF;
      margin-top: 10px;
      text-align: center;
      font-size: 28px;
      font-weight: 600;
      padding: 25px;
}

@media screen and (min-width:768px) {
.attention-text {
      background-color: #23ac38;
      color: #FFF;
      margin-top: 10px;
      text-align: center;
      font-size: 36px;
      font-weight: 600;
      padding: 40px;
}
}


.attention-hemp-item {
  flex: 50%;
  text-align: center;
  margin: 5px;
}




@media screen and (min-width:768px) {
  .attention-hemp-content {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto;
  }

  .attention-hemp-item {
    flex: 1;
    padding: 10px;
  }

}


.attention-hemp-text {
      background-color: #fff;
      color: #23ac38;
      margin-top: 10px;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      padding: 10px;
      line-height: 35px;
}

.attention-hemp-title {
      background-color: #fff;
      color: #23ac38;
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      padding: 10px;
      line-height: 35px;
}

@media screen and (min-width:768px) {
.attention-hemp-text {
      background-color: #fff;
      color: #23ac38;
      margin-top: 10px;
      text-align: left;
      font-size: 22px;
      font-weight: 400;
      padding: 0 20px 20px;
      line-height: 35px;
}

.attention-hemp-title {
      background-color: #fff;
      color: #23ac38;
      margin-top: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      padding: 20px 20px 0;
      line-height: 35px;
}
}


/*-------------------------------------------
　CBD ECS
-------------------------------------------*/
.cbdecs-area{
      text-align: center;
}

.cbdecs-area img {
      width: 100vw;
      height: 100vx;
      
}

@media screen and (min-width:768px) {
.cbdecs-area img {
margin-top: 30px;
width: 800px;
      }
}



/*-------------------------------------------
　ONLINE
-------------------------------------------*/
.online-area{
      text-align: center;
}

.online img {
      width: 100vw;
      height: 100vx;
      margin-top: -20px;
      text-align: center;
      
}


.online-area img {
margin-top: 70px;
text-align: center;
      }


@media screen and (min-width:768px) {
.online-area img {
margin-top: 170px;
width: 800px;
text-align: center;
      }
}


.online-text {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
}

@media screen and (min-width:768px) {
.online-text {
      margin-top: 20px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
}
}



/*フッター*/
footer {
      text-align: center;
      font-size: 14px;
  }
  
  
.footer-content {
  display: flex;
  flex-wrap: wrap;

}


.footer-item {
  flex: 50%;
  text-align: center;
  padding: 20px;
  margin: 5px;
}

.footer-item img {
      margin-top: 30px;
      
}

@media screen and (min-width:768px) {
.footer-item img {
      margin-top: 30px;
      max-width: 70%;
      
}
}


@media screen and (min-width:768px) {
  .footer-content {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto;
  }

  .footer-item {
    flex: 1;
  }

}


.footer-text {
      color: #000;
      text-align: center;
      font-size: 16px;
      padding: 20px;
}



.footer-map-item {
  flex: 50%;
  text-align: center;
  padding: 5px;
  margin: 10px;
}




@media screen and (min-width:768px) {
  .footer-map-content {
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto;
  }

  .footer-map-item {
    flex: 1;
      text-align: center;
  padding: 40px;
  margin: 10px;
    
  }

}


.footer-map-text {
      background-color: #fff;
      color: #23ac38;
      margin-top: 10px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      padding: 20px;
      line-height: 45px;
}