/****************************
トップスライド 
****************************/
html {
  scroll-behavior: smooth;
}

.bmb1 {
  margin-top: 1em;
}

.bmb2 {
  margin-top: 2em;
}

.bmb3 {
  margin-top: 3em;
}

.bmb4 {
  margin-top: 4em;
}

.bmb5 {
  margin-top: 5em;
}

.bmb8 {
  margin-top: 8em;
}

.mb1 {
  margin-bottom: 1em;
}

.mb2 {
  margin-bottom: 2em;
}

.mb3 {
  margin-bottom: 3em;
}

.mb4 {
  margin-bottom: 4em;
}

.contens_txt {
  max-width: 1000px;
  margin: 0 auto;
}

.contens_tp {
  max-width: 1400px;
  margin: 0 auto;
}

.txt_wt {
  color: #fff;
}

.imgcenter {
  margin: 0 auto;
  display: block;
}

.txtcenter {
  text-align: center;
}

.txtleft {
  text-align: left;
}

.txtrgt {
  text-align: right;
}

.txt_wh {
  color: #fff;
}

.bg_wht_all {
  background: #d7cba8;
  padding: 0 0;
}

.bg_beige_all {
  background: #d7cba8;
  padding: 140px 0;
  position: relative;
}

.bg_beige_all::before {
  content: "";
  clear: both;
  overflow: hidden;
  background: url(../images/lineup_title.png);
  background-repeat: no-repeat;
  position: absolute;
  height: 584px;
  width: 111px;
  top: 76px;
  right: 30px;
}
.bg_beige_all::after {
  content: "";
  /* clear: both; */
  overflow: hidden;
  background: url(../images/calorie.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  height: 131px;
  width: 262px;
  bottom:300px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}


@media screen and (max-width: 767px) {

  .bg_beige_all::after {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

.bg_beige_all {
  padding-top: 140px;
  padding-bottom: 40px;
}

.bg_beige_all::before {
  background: url(../images/lineup_title_sp.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 347px;
  height: 68px;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
}


.contens_txt {
  max-width: 850px;
  margin: 0 auto;
}

.contens_txt02 {
  max-width: 1200px;
  margin: 0 auto;
}


/*--メニュー調整用  --*/
.menu_textsize {
  font-size: 10px;
}


/*-- PC版表示CSS  --*/
.pc_area {
  display: block;
}

.phone_area {
  display: none;
}

.phone_area_bnr{
    display: none;
  }



/*-- タブレット版表示CSS  --*/
@media screen and (max-width: 601px) {
  .pc_area {
    display: block;
  }

  .phone_area {
    display: none;
    padding: 0 20px;
  }
  .phone_area_bnr{
    display: none;
  }

}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 767px) {
  .pc_area {
    display: none;
  }

  .phone_area {
    display: block;
    padding: 0 20px;
  }
  .phone_area_bnr{
    display: block;
  }

}

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

  .img20 {
    width: 20%;
    margin: 0 auto;
  }

  .img30 {
    width: 30%;
    margin: 0 auto;
  }

  .img40 {
    width: 40%;
    margin: 0 auto;
  }

  .img50 {
    width: 50%;
    margin: 0 auto;
  }

  .img60 {
    width: 60%;
    margin: 0 auto;
  }

  .img70 {
    width: 70%;
    margin: 0 auto;
  }

  .img80 {
    width: 80%;
    margin: 0 auto;
  }

  .tategakitxt-wrapper {
    /* 文字を左右中央に寄せる */
    position: absolute;
    left: 20% !important;
    transform: translate(-50%);
  }

  .tategakitxt {
    position: relative;
    width: 100%;
    height: 18em;
    writing-mode: vertical-rl;
    /* ここで縦書きに */
    color: #6A5D21;
    text-align: left;
  }

}

.main_imgBox {
  height: 100vh;
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .main_imgBox {
    /* height: 500px; */
    overflow: hidden;
    position: relative;
  }
}

.main_logo {
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
}

.main_img {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 680px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 40s 0s infinite;
  animation: anime 40s 0s infinite;
}

.main_img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s; 
}

.main_img:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  animation-delay: 8s; 
}

.main_img:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s; 
}

.main_img:nth-of-type(5) {
  -webkit-animation-delay: 16s;
  animation-delay: 16s; 
}

.main_img:nth-of-type(6) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s; 
}
.main_img:nth-of-type(7) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s; 
}
.main_img:nth-of-type(8) {
  -webkit-animation-delay: 28s;
  animation-delay: 28s; 
}
.main_img:nth-of-type(9) {
  -webkit-animation-delay: 32s;
  animation-delay: 32s; 
}
.main_img:nth-of-type(10) {
  -webkit-animation-delay: 36s;
  animation-delay: 36s; 
}

.main_imgM {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 40s 0s infinite;
  animation: anime 40s 0s infinite;
}

.main_imgM:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s; 
}

.main_imgM:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  animation-delay: 8s; 
}

.main_imgM:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s; 
}

.main_imgM:nth-of-type(5) {
  -webkit-animation-delay: 16s;
  animation-delay: 16s; 
}

.main_imgM:nth-of-type(6) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s; 
}

.main_imgM:nth-of-type(7) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s; 
}

.main_imgM:nth-of-type(8) {
  -webkit-animation-delay: 28s;
  animation-delay: 28s; 
}

.main_imgM:nth-of-type(9) {
  -webkit-animation-delay: 32s;
  animation-delay: 32s; 
}
.main_imgM:nth-of-type(10) {
  -webkit-animation-delay: 36s;
  animation-delay: 36s; 
}

@keyframes anime {
  0% {
    transform: scale(1.14) ;
    opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
      }
      25% {
        opacity: 0;        
      }
      50% {
        transform: scale(1.0) ;
        opacity: 0;        

      }

      100% { opacity: 0 ;
        }
      
}


.parallax-bg {
  height: 20em;
}

.parallax-bg::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url("../images/p_bg.jpg");
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .parallax-bg {
    height: 15em;
  }

  .parallax-bg::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url("../images/p_bg_sp.jpg");
    background-size: cover;
  }
}

.bg_bl {
  background-color: #f9f8ee;
  padding: 5em;

}

@media screen and (max-width: 767px) {
  .bg_bl {
    background-color: #f9f8ee;
    padding: 3em 1.5em;
  }
}


.semei_tl {
  font-family: acumin-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #4F6068;
  font-size: 2.5em;
  padding-bottom: 1em;
  text-align: center;
}

.img_graph {
  max-width: 80%;
  margin: 80px 0 0;
}

@media screen and (max-width: 767px) {
  .img_graph {
    max-width: 100%;
    margin: 10px 0 0;
  }
}


div.graph img{
  position: absolute;
  bottom: 40px;;
}

@media screen and (max-width: 767px) {
  div.graph img{
  position: inherit;
  }

}

footer {
  background-color: #fff;
}