@charset "utf-8";
/* CSS Document */
@import "default.css";
/*******************
LP style
********************/
/* base*/
html {
  font-size: 16px;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#101010;
  line-height:1.5em;
  min-width: 1200px;
  margin: 0 auto;
}
#wrap a{
  color: #101010;
  text-decoration: none;
}
#wrap a:hover{
  text-decoration: underline;
}
label[for="lp_form_user_policy_check"] a {
    color:#337ab7!important;
}
label[for="lp_form_user_policy_check"] a:hover,label[for="lp_form_user_policy_check"] a:focus {
    color:#23527c!important;
}
/*------------------------------------*/
#wrap .hover{
  -webkit-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  display: inline-block;
}
#wrap .hover:hover{
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
#wrap img {
  vertical-align: bottom;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
#wrap img.img-t {
  vertical-align: top;
}
/*
ovf-** 横幅の大きい画像を設定した最小幅でトリミング
デフォルトの設定は最小1200px、画像幅1500pxなので適宜調整してください
*/
#wrap .ovf-area{
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 1200px;
}
#wrap .ovf-box {
  display: block;
  margin: auto;
  text-align: center;
  width: 100%;
}
#wrap .ovf-item {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1700px;
  margin-left: -850px; /* widthの半分 */
}
/*-- fv -------------------------------------*/
#wrap #fv {
  height: 900px;/* fv画像のheight */
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 1200px;
  z-index: 1;
  background: #f8f3ea url(../img/fv_bg.jpg) repeat-x top center;
}
#wrap #fv div {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1700px;
  margin-left: -850px;
}
#wrap .fv-btn {
  text-align: center;
}
#wrap .fv-btn a {
  display: inline-block;
}
/*--------------------------------------------*/
#wrap .media {
  background: url(../img/media_bg.jpg) repeat-x top center;
}
#wrap .repeat {
  background: url(../img/repeat_bg.jpg) repeat-x bottom center;
}
#wrap .sns_voice {
  background: url(../img/sns_voice_001.png) repeat top center;
}
#wrap .sns_voice2 {
  background: url(../img/sns_voice_bg2.jpg) repeat bottom center;
}
#wrap .sale {
  background: url(../img/sale_bg.jpg) repeat-x top center;
  position: relative;
}
#wrap .sale div p:nth-of-type(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#wrap .age-sign {
  background: url(../img/age_sign_bg1.jpg) repeat-x bottom center;
}
#wrap .age-sign2 {
  background: url(../img/age_sign_bg.jpg) repeat-x top center;
}
#wrap .black-bean {
  background: #010101;
}
#wrap .nutrients {
  background: #efeadd;
}
#wrap .fermenting {
  background: url(../img/fermenting_bg.jpg) repeat-x top center;
}
#wrap .fermenting div {
  position: relative;
}
#wrap .fermenting div p:nth-of-type(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#wrap .featured-extract {
  background: #150909 url(../img/featured_extract_bg.jpg) repeat-x top center;
}
#wrap .btn-box {
  text-align: center;
}
#wrap .impressed1 {
  background: url(../img/impressed_voice_bg.png) repeat-x top center;
}
#wrap .impressed2 {
  background: url(../img/impressed_bg.jpg) repeat top center;
}
#wrap .power-of {
  background: url(../img/power_of_black_beans_bg.jpg) repeat top center;
}
#wrap .material {
  background: url(../img/material_bg.png) repeat top center;
}
#wrap .miracle {
  background: #16100e;
}
#wrap .completed {
  background: #665343;
}
#wrap .voice1 {
  background: url(../img/voice_bg.jpg) repeat-x bottom center;
}
#wrap .voice2 {
  background: url(../img/impressed_bg.jpg) repeat bottom center;
}
#wrap .question {
  background: url(../img/impressed_bg.jpg) repeat bottom center;
}
#wrap .forever {
  background: url(../img/forever_beautiful_bg.png) repeat-x top center;
}
#wrap .metabolism {
  background: #0c0a0f;
}
#wrap .cv-btn01,
#wrap .cv-btn02 {
  position: relative;
}
#wrap .cv-btn01 p:last-child {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 200px;
}
#wrap .cv-btn02 p:last-child {
  position: absolute;
  bottom: 20px;
  right: 0;
  left: 435px;
}
#wrap .foam-box {
  margin: 30px 0;
}
#wrap .expand{
  -webkit-animation-name: expand;
  -moz-animation-name: expand;
  -o-animation-name: expand;
  animation-name: expand;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes expand{
  0%{transform:scale(1) translateY(-1%);left: 50px;}
  65%{transform:scale(1.05) translateY(0);}
  100%{transform:scale(1) translateY(-1%);left: 50px;}
}
/*-------------------------------------------
footer
-----------------------------------------------*/
#wrap .footer-link {

  text-align: center;
  padding-top: 3em;
  padding-bottom: 1.5em;
  width: 100%;
}
#wrap .footer-link li {
  color: #290602;
  display: inline-block;
  padding-left: .8em;
}
#wrap .footer-link li a {
  color: #290602;
}
#wrap .footer-link li:after {
  content: "";
  border-right: 1px solid;
  display: inline-block;
  padding-left: .8em;
  height: 1.2em;
  vertical-align: middle;
}
#wrap .footer-link li:last-child:after {
  content: "";
  padding-left: 0;
  border:none;
}
#wrap #copy {
  background: url(../img/footer_bg.png) repeat-x top center;
  text-align: center;
  width: 100%;
  color: #fff;
  height: 78px;

  padding-top:3em;
  font-size: .875rem;
}