@charset "utf-8";

/*___________スマホ用CSS_____________*/
@media print, screen and (max-width: 767px) {
  /*ウィンドウ幅が最大767pxまでの場合に適用*/
  body,
  html {
    overflow-x: hidden;
  }

  body {
    background-color: #fff;
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2em;
    color: #4b4242;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  img {
    vertical-align: bottom;
  }
  a img {
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
  }
  a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
  }

  #content_wrapper {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }
  #content_wrapper img {
    width: 100%;
    height: auto;
  }

  /*FV*/
  #fv {
    position: relative;
    width: 100%;
  }
  #fv .fv_logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 27%;
  }
  #fv .fv_tag {
    position: absolute;
    top: 47%;
    left: 0;
    width: 100%;
  }
  #fv .fv_btn {
    display: block;
    position: absolute;
    bottom: 1.9%;
    left: 0;
  }
  .fv_btn,
  .nutrition_btn,
  .value_btn {
    display: inline-block;
    animation: fuwafuwa 1.5s ease-in-out infinite;
    transition: transform 0.3s ease;
  }

  @keyframes fuwafuwa {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  /*POINT*/
  #point {
    position: relative;
    width: 100%;
  }
  #point .point_title {
    position: absolute;
    top: 4.7%;
    left: 0;
    width: 100%;
  }
  #point .point_copy1 {
    position: absolute;
    top: 11%;
    left: 0;
    width: 100%;
  }
  #point .point_content {
    position: absolute;
    top: 24%;
    left: 0;
    width: 100%;
  }
  #point .point_copy2 {
    position: absolute;
    top: 50%;
    right: 8%;
    width: 26.26%;
  }

  /*FEATURE*/
  #feature {
    position: relative;
    width: 100%;
  }
  #feature .feature_copy01 {
    position: absolute;
    top: 4.3%;
    left: 0;
    width: 100%;
  }
  #feature .feature_copy02 {
    position: absolute;
    top: 7%;
    left: 0;
    width: 100%;
  }
  #feature .feature_copy03 {
    position: absolute;
    top: 20.5%;
    left: 0;
    width: 100%;
  }
  #feature .feature_copy04 {
    position: absolute;
    top: 23.3%;
    left: 0;
    width: 100%;
  }

  #feature .feature_menu01 {
    position: absolute;
    top: 32.2%;
    left: 0;
    width: 100%;
  }
  #feature .feature_menu02 {
    position: absolute;
    top: 44.8%;
    left: 0;
    width: 100%;
  }
  #feature .feature_menu03 {
    position: absolute;
    top: 57.1%;
    left: 0;
    width: 100%;
  }
  #feature .feature_menu04 {
    position: absolute;
    top: 68.8%;
    left: 0;
    width: 100%;
  }

  /*NUTRITION*/
  #nutrition {
    position: relative;
    width: 100%;
  }
  #nutrition .nutrition_midashi {
    position: absolute;
    top: 5.8%;
    left: 0;
  }
  #nutrition .nutrition_lavel01 {
    position: absolute;
    top: 15.7%;
    left: 4.2%;
    width: 34.66%;
  }
  #nutrition .nutrition_lavel02 {
    position: absolute;
    top: 36.7%;
    left: 0;
  }
  #nutrition .nutrition_btn {
    display: block;
    position: absolute;
    bottom: 1.9%;
    left: 0;
  }

  /* 共通設定（任意） */
  * {
    box-sizing: border-box;
  }

  /* アコーディオン全体 */
  .accordion {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* チェックボックスは非表示 */
  .accordion input[type="checkbox"] {
    display: none;
  }

  /* アコーディオン開閉ボタン */
  .accordion-btn {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* 線アイコンの位置とサイズ */
  .accordion-btn .icon {
    position: absolute;
    top: 3.6vw;
    right: 6.4vw;
    width: 2.667vw;
    height: 2.667vw;
  }

  /* 線アイコン：＋ の構成 */
  .accordion-btn .icon::before,
  .accordion-btn .icon::after {
    content: "";
    position: absolute;
    background-color: #fff; /* 白線 */
    transition: all 0.3s ease;
  }

  /* 横棒 */
  .accordion-btn .icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.267vw;
    transform: translateY(-50%);
  }

  /* 縦棒 */
  .accordion-btn .icon::after {
    left: 50%;
    top: 0;
    width: 0.267vw;
    height: 100%;
    transform: translateX(-50%);
  }

  /* 開いているときは縦棒を非表示（−になる） */
  .accordion input[type="checkbox"]:checked + .accordion-btn .icon::after {
    transform: rotate(90deg);
  }

  /* アコーディオンの中身 */
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  /* 開いた時に表示 */
  .accordion input[type="checkbox"]:checked ~ .accordion-content {
    max-height: 133.333vw; /* 適宜調整 */
  }

  /*MENU*/
  #menu {
    position: relative;
    width: 100%;
  }
  #menu .menu_midashi {
    position: absolute;
    top: 4%;
    left: 0;
  }
  #menu .menu01 {
    position: absolute;
    top: 12.5%;
    left: 0;
  }
  #menu .menu_box {
    position: absolute;
    top: 36%;
    left: 3.3%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 93.4%;
  }
  #menu .menu_box img {
    width: 48.5%;
    margin-bottom: 9%;
  }

  /*VALUE*/
  #value {
    position: relative;
    width: 100%;
  }
  .value01,
  .value02,
  .value03,
  .value04,
  .value05,
  .value06 {
    position: relative;
    width: 100%;
  }

  #value .value01 .value_copy {
    position: absolute;
    top: 2%;
    right: 5%;
    width: 35.6%;
  }
  #value .value01 .value01_copy {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 22.93%;
  }
  #value .value01 .value01_txt {
    position: absolute;
    top: 90.7%;
    left: 0;
  }
  #value .value02 .value02_copy {
    position: absolute;
    top: 9.5%;
    left: 0;
  }
  #value .value02 .value02_txt {
    position: absolute;
    top: 83.5%;
    left: 0;
  }
  #value .value03 .value03_copy {
    position: absolute;
    top: 27.5%;
    left: 0;
  }
  #value .value03 .value03_txt {
    position: absolute;
    top: 64.5%;
    left: 0;
  }
  #value .value04 .value04_copy {
    position: absolute;
    top: 15.5%;
    left: 6.6%;
    width: 23%;
  }
  #value .value04 .value04_txt {
    position: absolute;
    top: 74.7%;
    left: 0;
  }
  #value .value05 .value05_copy {
    position: absolute;
    top: 12%;
    right: 9%;
    width: 10.13%;
  }
  #value .value05 .value05_txt {
    position: absolute;
    top: 80.7%;
    left: 0;
  }
  #value .value06 .value06_copy {
    position: absolute;
    top: 6.5%;
    left: 12%;
    width: 10.13%;
  }
  #value .value06 .value06_txt {
    position: absolute;
    top: 33.4%;
    left: 0;
  }
  #value .value_btn {
    display: block;
    position: absolute;
    bottom: 0.46%;
    left: 0;
  }
  /*VALUE*/
  #footer {
    position: relative;
    width: 100%;
  }
  #footer .link01 {
    position: absolute;
    top: 3.333vw;
    left: 11%;
    display: block;
    height: 5.333vw;
    width: 37%;
    background-color: #fff;
    opacity: 0;
  }
  #footer .link01:hover {
    opacity: 0.4;
  }
  #footer .link02 {
    position: absolute;
    top: 3.333vw;
    left: 48.5%;
    display: block;
    height: 5.333vw;
    width: 26%;
    background-color: #fff;
    opacity: 0;
  }
  #footer .link02:hover {
    opacity: 0.4;
  }
  #footer .link03 {
    position: absolute;
    top: 3.333vw;
    left: 75%;
    display: block;
    height: 5.333vw;
    width: 14%;
    background-color: #fff;
    opacity: 0;
  }
  #footer .link03:hover {
    opacity: 0.4;
  }
}