body{
    font-family: 'Noto Serif JP', serif;
}
a {
    text-decoration: none;
    color: #333333;
}
a:hover{
    color: #49618A;
}
/* ---ボタン--- */
.contact__button{
    background-color: #909757;
    color: #ffffff;
}
.contact__button:hover{
    opacity: 0.7;
    color: #ffffff;
}
.buy__button{
    background-color: #49618A;
    color: #ffffff;
}
.buy__button:hover{
  opacity: 0.7;
  color: #ffffff;
}
.howto__button{
    background-color: #ffffff;
    border: #49618A 1px solid;
}
.howto__button:hover{
    background-color: #49618A;
    color: #ffffff;
}
/* ---メインビジュアル--- */
.pc__img{
    display: none;
}
.sp__img{
    display: block;
}
.main__visual-box{
    position: relative;
}
.main__visual{
    object-fit: cover;
    width: 100%;
}
.main__title-box{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    width: 100%;
    height: 100%;
}
.fadein{
    animation-name:fadeInAnime;
    animation-duration:8s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
    from {
      opacity: 0;
    } 
    to {
      opacity: 1;
    }
  }
  /* ---line-UP--- */
  .lineup__img{
      max-height: 200px;
      margin: 0 auto;
  }
  /* ---concept--- */
  .ta__img{
    box-shadow: 10px 10px 0 #B5B5B6;
    width: 100%;
    object-fit: contain;
  }
  /* ---product--- */
  .item01_img_box{
    width: 70%;
    margin: 0 auto;
  }
  .item02_img_box{
    width: 70%;
    margin: 0 auto;
  }
.flavor__img{
    height: 170px;
    width: auto;
    object-fit: contain;
}
.icon__text{
    font-size: 0.6rem;
}
/* ---FAQ--- */
.FAQ__box{
    max-width: 700px;
}
.readmore{
    color: #333333;
    display: inline-flex;
    align-items: center;
}
.readmore:hover{
    color: #49618A;
}

/* ---footer--- */
  .footer__area{
      background-color: #B5B5B6;
  }
  .logo__box{
      width: 200px;
  }
  .company{
      color: #ffffff;
  }
  .company:hover{
      color: #49618A;
      text-decoration: underline;
  }
  .sns__icon{
      width: 42px;
  }
  .sns__box:hover{
      opacity: 0.5;
  }
  .card-text{
      font-size: 0.8rem;
  }
  .caution__text{
      font-size: 0.6rem;
  }
/* ---tb以下--- */
  @media screen and (min-width: 576px) {
      .pc__img{
          display: block;
      }
      .sp__img{
          display: none;
      }
      .main__text-box{
          position: absolute;
          top: 30%;
          left: 50%;
          text-align: center;
      }
  }