/*---------- mainvisual ----------*/
#mainvisual{
  background-color:#000;
  text-align:right;
  position: relative;
  top:0;
  left:0;
}
#mainvisual img{
  position: relative;
  top:0;
  right:0;
  z-index: 0;
}
#mainvisual > .title{
  font-size:80px;
  line-height:1.2;
  text-align:left;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 5px;
  position: absolute;
  top:20%;
  left:150px;
  z-index: 1;
}

/*---------- contents ----------*/
#contents{
  width:1000px;
  overflow: hidden;
  clear: both;
}
.contents_wrapper{
  width:1000px;
  margin:50px 0;
  text-align: left;
  overflow: hidden;
  clear: both;
}
.contents_wrapper > .wrapper_l{width:430px;margin-right:70px;float: left;}
.contents_wrapper > .wrapper_r{width:500px;float: right;}
img.line{border:1px solid #ddd;width:99.6%;}

/*---- title & midashi ----*/
.contents_title{
  margin: 50px 0;
  font-size:35px;
  line-height:1.5;
  text-align: center;
  color:#000;
  letter-spacing: 2px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  top:0;
}
.contents_title:after{
  content: '';
  background-color:#00936b;
  width:10%;
  height:7px;
  position: absolute;
  bottom:-10px;
  left:45%;
}
.midashi{
  background-color:#00936b;
  width:94%;
  margin-top:30px;
  padding:10px 3%;
  font-size:18px;
  text-align: left;
  color:#fff;
  letter-spacing: 1px;
}
.submidashi{
  margin:30px 0 15px;
  font-size:21px;
  line-height: 1.5;
  text-align: left;
  color:#00936b;
}

/*---- btn ----*/
.backbtn{
  background-color:#00936b;
  margin:100px 0 50px;
  padding:0;
  width:25%;
  height:auto;
  font-size:14px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
}
.backbtn a{color:#fff;padding:15px 0;display: block;}


/*------------------------
products
------------------------*/
ul.productslist{font-size:0;text-align: left;}
ul.productslist li{
  width:30%;
  margin:0 5% 30px 0;
  display:inline-block;
}
.productsname{
  margin-top:15px;
  font-size:17px;
  line-height:1.2;
  text-align: center;
  letter-spacing: 1px;
  color:#000;
}
.products_midashi{
  margin:30px 0 15px;
  font-size:50px;
  line-height: 1.5;
  letter-spacing: 5px;
}
.products_submidashi{
  border-top:1px solid #ddd;
  margin:50px 0 15px;
  padding-top:50px;
  font-size:23px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: 1px;
}
.products_attention{
  margin-top:50px;
  font-size:17px;
  line-height: 1.5;
  font-weight: bold;
  color:#00936b;
}

/*---- btn ----*/
.morebtn{
  border:3px solid #000;
  margin:30px 0 0;
  padding:12px 2%;
  width:22%;
  height:auto;
  font-size:14px;
  text-align: left;
  letter-spacing: 1px;
  font-weight: bold;
  position: relative;
  top:0;
  left:0;
}
.morebtn a{color:#000;display: block;}
.morebtn:after{
  content:'';
  position: absolute;
  top:17px;
  right:17px;
  width:12px;
  height:12px;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  border-radius: 2px;
  transform: rotate(45deg);
}


/*------------------------
about
------------------------*/
ul.about_wrapper,
ul.about_flow_wrapper,
ul.about_matcha_wrapper{
  width:1000px;
  font-size:0;
  text-align: left;
  overflow: hidden;
  clear: both;
}
ul.about_wrapper li,
ul.about_flow_wrapper li,
ul.about_matcha_wrapper li{
  display: inline-block;
  vertical-align: top;
  width:298px;
  margin-right: 50px;
  position: relative;
  top:0;
}
ul.about_flow_wrapper li,
ul.about_matcha_wrapper li{width:28%;margin:0 5% 30px 0;}
ul.about_matcha_wrapper li:nth-child(2){width:62%;width:0 0 30px 0;}
ul.about_wrapper li:last-child:after,
ul.about_flow_wrapper li:last-child:after,
ul.about_matcha_wrapper li:last-child:after{display:none;}
ul.about_wrapper li img,
ul.about_flow_wrapper li img,
ul.about_matcha_wrapper li img{border:1px solid #ddd;}
.about_listtitle{
  margin:15px 0 5px;
  font-size:15px;
  font-weight: bold;
  text-align: center;
}
ul.about_wrapper li p{text-align: center;line-height: 1.5;}

/*---- history ----*/
.contents_history_wrapper{
  width:1000px;
  text-align: left;
  overflow: hidden;
  clear: both;
}
.contents_history_wrapper > .wrapper_l{width:500px;margin-right:50px;float: left;}
.contents_history_wrapper > .wrapper_r{width:450px;float: right;}

/*---- health ----*/
ul.about_health_wrapper{font-size:0;text-align: left;}
.about_health_wrapper li{
  display:inline-block;
  vertical-align: top;
  width:475px;
  margin-right:50px;
}
.about_health_wrapper li:nth-child(2n){margin-right: 0;}


/*---- btn ----*/
ul.about_btn{margin:30px 0 100px;font-size:0;}
.about_btn li{
  display: inline-block;
  background-color:#484848;
  margin-right:5%;
  padding:0;
  width:30%;
  height:auto;
  font-size:14px;
  text-align: left;
  letter-spacing: 1px;
  font-weight: normal;
  position: relative;
  top:0;
}
.about_btn li:last-child{margin-right: 0;}
.about_btn li a{color:#fff;padding:15px 5%;display: block;}
.about_btn li:after{
  content:'';
  position: absolute;
  top:19px;
  right:17px;
  width:12px;
  height:12px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}


/*------------------------
how to
------------------------*/
ol.howto_list{
  margin-top:30px;
  list-style: none;
  counter-reset: cnt;
  padding-left: 0;
}
ol.howto_list li{
  counter-increment: mycount;
  font-size:15px;
  line-height: 2.0;
  text-align: left;
  font-weight: bold;
}
ol.howto_list li:before{
  content: counter(mycount, upper-roman)" .";
	margin-right: 10px;
  color:#00936b;
}
ol.howto_list li a{color:#00936b;}
table.howto_guide{
  border:1px solid #484848;
  width:1000px;
  display: inline-table;
  border-collapse:collapse;
  font-size:15px;
  line-height: 1.5;
}
.howto_guide td{
  border-right:1px solid #484848;
  border-bottom:1px solid #484848;
  padding:10px;
}
.howto_guide td.list{
  text-align: center;
  background-color:#eee;
}

/*---- make ----*/
.howto_midashi{
  margin:0 0 15px;
  font-size:21px;
  line-height: 1.5;
  text-align: left;
  color:#00936b;
}

/*------------------------
contact us
------------------------*/
table.contact{
  width:1000px;
  display: inline-table;
  border-collapse:collapse;
}
.contact td{
  border-top:1px solid #484848;
  border-bottom:1px solid #484848;
  padding:15px 0;
}
.contact td.list{
  position: relative;
  padding-left:15px;
  top:0;
  width:24%;
}
.contact td.list:before{
  content:'';
  width:5px;
  height:20px;
  background-color:#00936b;
  position:absolute;
  top:15px;
  left:0;
}
.contact_title{
  font-size:35px;
  line-height:1.5;
  font-weight: normal;
  color:#00936b;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.copy{font-size:18px;line-height:1.5;}


/*------------------------
privacy policy
------------------------*/
ol.num{
  text-align: left;
}
ol.num li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
  padding-left:30px;
  position: relative;
  left:0;
}
ol.num li:before{
  display: marker;
  content: counter(cnt)" )";
  position: absolute;
  left:0;
}


/*------------------------
sitemap
------------------------*/
.sitemap_home{
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding-bottom:30px;
  font-size:21px;
  line-height:1.2;
  text-align: left;
  color:#00936b;
  letter-spacing: 1px;
  font-family: 'Open Sans', sans-serif;
}
ul.sitemap{font-size:0;}
.sitemap li{
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding-bottom:30px;
  font-size:17px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 1px;
}
.sitemap li a{color:#00936b;}
.sitemap li ul li{
  border-bottom:0;
  margin-bottom: 15px;
  padding-bottom:0;
  display: inline-block;
  width:20%;
  font-size:15px;
  line-height:1.5;
  font-weight: normal;
  padding-left: 30px;
  position: relative;
  top:0;
}
.sitemap li ul li a{color:#484848;}
.sitemap li ul li:before{
  content:'';
  position: absolute;
  width:10px;
  height:10px;
  border:3px solid #484848;
  top:2px;
  left:0;
}


/*------------------------------
PC
------------------------------*/
@media screen and (min-width: 769px){
  .pc_none{display:none;}
  #inbox{
    transform: translate(300px);
    transition: all 0.8s;
  }
  #inbox.open{transform: translate(0); }
  #mainvisual{width:100%;}
  #mainvisual img{width:100%;height:500px;box-sizing: border-box;}
  
  /*---- products ----*/
  ul.productslist li:nth-child(3n),
  ul.about_wrapper li:nth-child(3n){margin-right:0;}
  
  /*---- about ----*/
  ul.about_wrapper li:after,
  ul.about_flow_wrapper li:after,
  ul.about_matcha_wrapper li:after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #484848;
    position: absolute;
    top:150px;
    right:-40px;
  }
}


/*------------------------------
 Tablet 
------------------------------*/
@media (max-width: 1019px) and (min-width: 768px) {
  .sp_none{display:none;}
  /*---- mainvisual ----*/
  #mainvisual{padding-top:0;}
  #mainvisual img{width:100%;}
  #mainvisual > .title{font-size:280%;top:55%;left:20%;}
  #mainvisual > .title br{display:none;}
  
  /*---- contents ----*/
  #contents{width:90%;padding:0 5%;}
  .contents_wrapper,
  .contents_history_wrapper{width:100%;margin:30px 0;}
  .contents_wrapper > .wrapper_l,
  .contents_wrapper > .wrapper_r,
  .contents_history_wrapper > .wrapper_l,
  .contents_history_wrapper > .wrapper_r{width:100%;margin-right:0;clear:both;}
  .contents_wrapper > .wrapper_r,
  .contents_history_wrapper > .wrapper_r{margin-top:30px;}
  
  /*---- title & midashi ----*/
  .contents_title:after{width:20%;left:40%;}
  .tag{margin-top:-60px;padding-top:60px;}
  
  /*---- products ----*/
  ul.productslist li{width:48%;margin:0 4% 30px 0;}
  ul.productslist li:nth-child(2n){margin-right:0;}
  
  /*---- about ----*/
  ul.about_wrapper li:after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #484848;
    position: absolute;
    top:150px;
    right:-40px;
  }
  ul.about_flow_wrapper li:after,
  ul.about_matcha_wrapper li:after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 13.0px;
    border-color: transparent transparent transparent #484848;
    position: absolute;
    top:75px;
    right:-26px;
  }
  ul.about_wrapper li:nth-child(2n):after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #484848;
    position: absolute;
    top:150px;
    right:-40px;
  }
  ul.about_flow_wrapper,
  ul.about_matcha_wrapper{width:100%;}
  ul.about_health_wrapper li{width:100%;margin-right: 0;}
  
  /*---- btn ----*/
  .backbtn{margin:50px 20% 30px;width:60%;}
  .morebtn{margin:50px 20%;padding:12px 4%;width:52%;}
  .about_btn li{width:100%;margin-bottom:5px;}
  
  /*---- Contact us ----*/
  table.contact{width:100%;}
  
}



/*------------------------------
 Smartphone
------------------------------*/
@media only screen and (max-width:767px){
  .sp_none{display:none;}
  
  /*---- mainvisual ----*/
  #mainvisual{padding-top:0;}
  #mainvisual img{width:100%;}
  #mainvisual > .title{
    font-size:164%;
    line-height:1.2;
    text-align:center;
    color:#fff;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 5px;
    position: absolute;
    top:44%;
    left:7%;
    z-index: 1;
  }
  #mainvisual > .title br{display:none;}
  
  /*---- contents ----*/
  #contents{width:90%;padding:0 5%;}
  .contents_wrapper,.contents_history_wrapper{width:100%;margin:30px 0;}
  .contents_wrapper > .wrapper_l,
  .contents_wrapper > .wrapper_r,
  .contents_history_wrapper > .wrapper_l,
  .contents_history_wrapper > .wrapper_r{width:100%;margin-right:0;clear:both;}
  .contents_wrapper > .wrapper_r,
  .contents_history_wrapper > .wrapper_r{margin-top:30px;}
  
  /*---- title & midashi ----*/
  .contents_title:after{width:20%;left:40%;}
  .tag{margin-top:-60px;padding-top:60px;}
  
  /*---- products ----*/
  ul.productslist li{width:48%;margin:0 4% 30px 0;}
  ul.productslist li:nth-child(2n){margin-right:0;}
  
  /*---- about ----*/
  ul.about_wrapper,
  ul.about_flow_wrapper,
  ul.about_health_wrapper,
  ul.about_matcha_wrapper{width:100%;font-size:0;text-align:center;}
  ul.about_wrapper li,
  ul.about_flow_wrapper li,
  ul.about_health_wrapper li,
  ul.about_matcha_wrapper li,
  ul.about_matcha_wrapper li:nth-child(2){width:98%;margin:0 0 60px 0;}
  ul.about_health_wrapper li{margin-bottom:0;}
  ul.about_wrapper li:after,
  ul.about_flow_wrapper li:after,
  ul.about_matcha_wrapper li:after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #484848 transparent transparent transparent;;
    position: absolute;
    bottom:-40px;
    right:44%;
  }
  .about_listtitle{
    margin:15px 0 5px;
    font-size:15px;
    font-weight: bold;
    text-align: center;
  }
  ul.about_wrapper li p{font-size:14px;text-align: center;line-height: 1.3;}
  
  /*---- howto ----*/
  table.howto_guide{width:98%;}
  .howto_guide td{font-size:12px;padding:10px 5px;}
  
  /*---- btn ----*/
  .backbtn{margin:50px 0 30px;width:100%;}
  .morebtn{padding:12px 4%;width:90%;}
  .about_btn li{width:100%;margin-bottom:5px;}
  
  /*---- contact us ----*/
  table.contact{width:100%;}
  .contact td.list{width:34%;}
  
  /*---- sitemap ----*/
  .sitemap li ul li{width:40%;}
 
  
  
  
}