@charset "UTF-8";
html.video {
  border: none;
}

body {
  max-width: none;
  min-width: 0;
}

@media print, screen and (min-width: 768px) {
  .pjax-area {
    padding-top: 81px;
  }
}
@media print, screen and (max-width: 767px) {
  .pjax-area {
    padding-top: 46px;
  }
}
.pjax-area {
  font-size: 1.4rem;
}

.contents-wrapper[data-layout="1"] {
  max-width: initial;
  padding: 0;
}
.contents-wrapper[data-layout="1"] > div > div > div > div {
  padding: 0;
}
.contents-wrapper[data-layout="1"] main {
  padding: 0;
}

.footer-pagetop {
  display: none;
}

#lp-container {
  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */
  /* HTML5 display-role reset for older browsers */
  /**
   * メディアクエリ
   * @param {string} $mode - max または min
   * @param {number} $width - 設定値
   */
  /**
   * メディアクエリ PC
   * @param {number} [$width:$breakpoin] - 設定値
   */
  /**
   * メディアクエリ SP
   * @param {number} [$width:$breakpoin] - 設定値
   */
  /**
   * メディアクエリによるIE11ハック
   */
  /**
   * VW計算
   * @param {string} $property  - プロパティ
   * @param {number} $value - 基準となる値
   * @param {number} $basewidth - 基準となるウィンドウ幅
   * @param {number} [$maxwidth:0] - 拡大を停止するウィンドウ幅
   * @param {number} [$minwidth:0] - 縮小を停止するウィンドウ幅
   */
  /**
   * メディアクエリ
   * @param {string} $mode - max または min
   * @param {number} $width - 設定値
   */
  /**
   * メディアクエリ PC
   * @param {number} [$width:$breakpoin] - 設定値
   */
  /**
   * メディアクエリ SP
   * @param {number} [$width:$breakpoin] - 設定値
   */
  /**
   * メディアクエリによるIE11ハック
   */
  /**
   * VW計算
   * @param {string} $property  - プロパティ
   * @param {number} $value - 基準となる値
   * @param {number} $basewidth - 基準となるウィンドウ幅
   * @param {number} [$maxwidth:0] - 拡大を停止するウィンドウ幅
   * @param {number} [$minwidth:0] - 縮小を停止するウィンドウ幅
   */
  overflow: hidden;
  position: relative;
  background: #000;
}
#lp-container html, #lp-container body, #lp-container div, #lp-container span, #lp-container applet, #lp-container object, #lp-container iframe,
#lp-container h1, #lp-container h2, #lp-container h3, #lp-container h4, #lp-container h5, #lp-container h6, #lp-container p, #lp-container blockquote, #lp-container pre,
#lp-container a, #lp-container abbr, #lp-container acronym, #lp-container address, #lp-container big, #lp-container cite, #lp-container code,
#lp-container del, #lp-container dfn, #lp-container em, #lp-container img, #lp-container ins, #lp-container kbd, #lp-container q, #lp-container s, #lp-container samp,
#lp-container small, #lp-container strike, #lp-container strong, #lp-container sub, #lp-container sup, #lp-container tt, #lp-container var,
#lp-container b, #lp-container u, #lp-container i, #lp-container center,
#lp-container dl, #lp-container dt, #lp-container dd, #lp-container ol, #lp-container ul, #lp-container li,
#lp-container fieldset, #lp-container form, #lp-container label, #lp-container legend,
#lp-container table, #lp-container caption, #lp-container tbody, #lp-container tfoot, #lp-container thead, #lp-container tr, #lp-container th, #lp-container td,
#lp-container article, #lp-container aside, #lp-container canvas, #lp-container details, #lp-container embed,
#lp-container figure, #lp-container figcaption, #lp-container footer, #lp-container header, #lp-container hgroup,
#lp-container menu, #lp-container nav, #lp-container output, #lp-container ruby, #lp-container section, #lp-container summary,
#lp-container time, #lp-container mark, #lp-container audio, #lp-container video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
#lp-container article, #lp-container aside, #lp-container details, #lp-container figcaption, #lp-container figure,
#lp-container footer, #lp-container header, #lp-container hgroup, #lp-container menu, #lp-container nav, #lp-container section {
  display: block;
}
#lp-container body {
  line-height: 1;
}
#lp-container ol, #lp-container ul {
  list-style: none;
}
#lp-container blockquote, #lp-container q {
  quotes: none;
}
#lp-container blockquote:before, #lp-container blockquote:after,
#lp-container q:before, #lp-container q:after {
  content: "";
  content: none;
}
#lp-container table {
  border-collapse: collapse;
  border-spacing: 0;
}
#lp-container input, #lp-container button, #lp-container textarea, #lp-container select, #lp-container option {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}
#lp-container input::-ms-clear {
  display: none;
}
#lp-container input::-ms-reveal {
  display: none;
}
#lp-container body {
  min-width: 320px;
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#lp-container a {
  color: inherit;
  text-decoration: none;
}
#lp-container img {
  display: block;
  max-width: 100%;
}
#lp-container picture {
  display: block;
}
@media screen and (max-width: 767px) {
  #lp-container .pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .sp {
    display: none !important;
  }
}
#lp-container * {
  font: inherit;
  font-feature-settings: "palt" !important;
}
#lp-container sup {
  font-size: 70%;
}
@media screen and (min-width: 768px) {
  #lp-container .base__column {
    margin-inline: auto;
    width: 100vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .base__column {
    width: 1240px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .anchor__area {
    margin-top: 0.8064516129vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .anchor__area {
    margin-top: 10px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .anchor__area {
    margin-top: 1.5625vw;
  }
}
#lp-container .anchor__area .anchor__list {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #lp-container .anchor__area .anchor__list {
    gap: 6.0483870968vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .anchor__area .anchor__list {
    gap: 75px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .anchor__area .anchor__list {
    gap: 6.25vw;
  }
}
#lp-container .anchor__area .anchor__link {
  color: #fff;
}
@media screen and (min-width: 768px) {
  #lp-container .anchor__area .anchor__link {
    font-size: 2.0967741935vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .anchor__area .anchor__link {
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .anchor__area .anchor__link {
    font-size: 3.75vw;
  }
}
#lp-container .intro {
  background: #fff;
}
@media screen and (min-width: 768px) {
  #lp-container .intro {
    margin-top: 2.4193548387vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .intro {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .intro {
    margin-top: 4.6875vw;
  }
}
#lp-container .intro .intro__image {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .intro .intro__image {
    width: 78.3064516129vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .intro .intro__image {
    width: 971px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .intro .intro__image {
    margin-top: 6.25vw;
    width: 88.90625vw;
  }
}
#lp-container .intro .intro__heading--sub {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .intro .intro__heading--sub {
    width: 64.7580645161vw;
    margin-top: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .intro .intro__heading--sub {
    width: 803px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .intro .intro__heading--sub {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .intro .intro__heading--sub {
    margin-top: 9.375vw;
    width: 63.125vw;
  }
}
#lp-container .size {
  background: #ffedb6;
}
@media screen and (min-width: 768px) {
  #lp-container .size {
    padding-top: 2.4193548387vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .size {
    padding-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .size {
    padding-top: 5.46875vw;
    padding-bottom: 3.125vw;
  }
}
#lp-container .size .size__heading {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .size .size__heading {
    width: 52.0161290323vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .size .size__heading {
    width: 645px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .size .size__heading {
    width: 57.1875vw;
  }
}
#lp-container .graph {
  background: #fff;
}
@media screen and (min-width: 768px) {
  #lp-container .graph {
    padding-top: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .graph {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .graph {
    padding-top: 5.46875vw;
    padding-bottom: 5.46875vw;
  }
}
#lp-container .graph .graph__heading {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .graph .graph__heading {
    width: 53.064516129vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .graph .graph__heading {
    width: 658px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .graph .graph__heading {
    width: 65.3125vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .graph .graph__image {
    margin-top: 4.0322580645vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .graph .graph__image {
    margin-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .graph .graph__image {
    margin-top: 5.46875vw;
  }
}
#lp-container .explain {
  background: #ffedb6;
}
@media screen and (min-width: 768px) {
  #lp-container .explain {
    padding-top: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain {
    padding-top: 6.25vw;
  }
}
#lp-container .explain .explain__heading {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__heading {
    width: 57.5806451613vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__heading {
    width: 714px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__heading {
    width: 63.90625vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__list {
    display: flex;
    justify-content: center;
    margin-top: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__list {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__list {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item {
    position: relative;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--sp {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--sp {
    position: absolute;
    right: 3.125vw;
    top: 35.9375vw;
    width: 21.40625vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--title {
    margin-inline: auto;
    width: 26.2096774194vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--title {
    width: 325px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--title {
    width: 75.46875vw;
  }
}
#lp-container .explain .explain__item--text {
  color: #6c3e00;
  line-height: 1.7777777778;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--text {
    margin-top: 1.6129032258vw;
    margin-bottom: 0.8064516129vw;
    font-size: 1.4516129032vw;
    width: 26.2903225806vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--text {
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--text {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--text {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--text {
    width: 326px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--text {
    padding-left: 3.125vw;
    width: 65.625vw;
    font-size: 3.75vw;
  }
}
#lp-container .explain .explain__item--note {
  color: #6c3e00;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--note {
    font-size: 1.2096774194vw;
    margin-bottom: 0.8064516129vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--note {
    font-size: 15px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--note {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--note {
    font-size: 2.34375vw;
    position: absolute;
    right: 3.125vw;
    bottom: 1.5625vw;
  }
}
#lp-container .explain .explain__item--wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--wrapper {
    margin-top: auto;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--wrapper {
    padding-top: 4.6875vw;
    padding-bottom: 7.8125vw;
  }
}
#lp-container .explain .explain__item--button {
  position: relative;
  display: block;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--button {
    width: 22.2580645161vw;
    transition: opacity 0.3s ease;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__item--button {
    width: 276px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--button:hover .explain__item--buttonHover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--button {
    width: 50vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__item--buttonHover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__item--buttonHover {
    display: none;
  }
}
#lp-container .explain .explain__button--wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__button--wrapper {
    margin-top: 2.8225806452vw;
    height: 8.5483870968vw;
    background: url(../img/explain__button--wrapper.jpg) no-repeat center/cover;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__button--wrapper {
    margin-top: 35px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__button--wrapper {
    height: 106px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__button--wrapper {
    padding-top: 3.90625vw;
    padding-bottom: 3.90625vw;
    background: url(../img/explain__button--wrapper.sp.jpg) no-repeat center/cover;
  }
}
#lp-container .explain .explain__button--wrapper .explain__button {
  display: block;
  position: relative;
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__button--wrapper .explain__button {
    width: 67.7419354839vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .explain .explain__button--wrapper .explain__button {
    width: 840px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__button--wrapper .explain__button:hover .explain__button--hover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__button--wrapper .explain__button {
    width: 93.4375vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .explain .explain__button--wrapper .explain__button--hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.3s ease;
    opacity: 0;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .explain .explain__button--wrapper .explain__button--hover {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .soy {
    margin-top: 5.6451612903vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .soy {
    margin-top: 70px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .soy {
    margin-top: 11.71875vw;
  }
}
#lp-container .soy .soy__inner {
  position: relative;
}
#lp-container .soy .soy__image {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .soy .soy__image {
    width: 54.5967741935vw;
    bottom: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .soy .soy__image {
    width: 677px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .soy .soy__image {
    bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .soy .soy__image {
    width: 58.125vw;
    bottom: 3.90625vw;
  }
}
#lp-container .soymilk {
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  #lp-container .soymilk {
    padding-top: 1.6129032258vw;
    padding-bottom: 1.6129032258vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .soymilk {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .soymilk {
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .soymilk {
    padding-top: 3.125vw;
    padding-bottom: 3.125vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe {
    padding-top: 1.6129032258vw;
    padding-bottom: 3.2258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe {
    padding-top: 1.5625vw;
    padding-bottom: 7.03125vw;
  }
}
#lp-container .recipe .recipe__heading {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__list {
    display: flex;
    justify-content: center;
    margin-top: 0.8064516129vw;
    gap: 1.6129032258vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__list {
    margin-top: 10px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__list {
    gap: 20px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item {
    width: 32.2580645161vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item {
    width: 400px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item {
    display: flex;
  }
  #lp-container .recipe .recipe__item.reverse {
    flex-direction: row-reverse;
  }
  #lp-container .recipe .recipe__item:not(:first-of-type) {
    margin-top: 3.90625vw;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item--image {
    flex-shrink: 0;
    width: 51.875vw;
  }
  #lp-container .recipe .recipe__item--image img {
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 100%;
  }
}
#lp-container .recipe .recipe__item--contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item--contents {
    align-items: center;
    padding-top: 2.0161290323vw;
    padding-bottom: 2.0161290323vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item--contents {
    padding-top: 25px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item--contents {
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item--contents {
    width: 100%;
    padding-top: 3.90625vw;
    padding-bottom: 3.90625vw;
    padding-left: 4.6875vw;
  }
}
#lp-container .recipe .recipe__item--text {
  color: #fff;
  line-height: 1.4583333333;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item--text {
    text-align: center;
    font-size: 1.935483871vw;
    min-height: 2.9166666667em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item--text {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item--text {
    font-size: 3.75vw;
    margin-bottom: 3.125vw;
  }
}
#lp-container .recipe .recipe__item--button {
  position: relative;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item--button {
    width: 22.2580645161vw;
    margin-top: 1.6129032258vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item--button {
    width: 276px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__item--button {
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item--button:hover .recipe__item--imageHover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item--button {
    width: 36.25vw;
    margin-top: auto;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__item--imageHover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__item--imageHover {
    display: none;
  }
}
#lp-container .recipe .recipe__button--wrapper {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__button--wrapper {
    margin-top: 4.8387096774vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__button--wrapper {
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__button--wrapper {
    margin-top: 6.25vw;
  }
}
#lp-container .recipe .recipe__button {
  position: relative;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__button {
    width: 67.7419354839vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe .recipe__button {
    width: 840px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__button:hover .recipe__button--hover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__button {
    width: 84.375vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .recipe .recipe__button--hover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe .recipe__button--hover {
    display: none;
  }
}
#lp-container .recipe__soy {
  background: #ffeac0;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe__soy .recipe__soy--heading {
    width: 70.0806451613vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe__soy .recipe__soy--heading {
    width: 869px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe__soy .recipe__soy--heading {
    width: 87.5vw;
  }
}
#lp-container .recipe__soy .recipe__soy--contents {
  background: #c29a46;
}
#lp-container .recipe__kimchi {
  background: #eb4a29;
}
@media screen and (min-width: 768px) {
  #lp-container .recipe__kimchi .recipe__kimchi--heading {
    width: 62.9032258065vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .recipe__kimchi .recipe__kimchi--heading {
    width: 780px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .recipe__kimchi .recipe__kimchi--heading {
    width: 77.5vw;
  }
}
#lp-container .recipe__kimchi .recipe__kimchi--contents {
  background: #40210f;
}
@media screen and (min-width: 768px) {
  #lp-container .product {
    background: url(../img/product__bg.jpg) no-repeat center/cover;
    padding-top: 6.4516129032vw;
    padding-bottom: 4.8387096774vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product {
    padding-top: 80px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product {
    background: url(../img/product__bg.sp.jpg) no-repeat center/cover;
    padding-top: 7.8125vw;
    padding-bottom: 4.6875vw;
  }
}
#lp-container .product .product__list {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__list {
    gap: 10.0806451613vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__list {
    gap: 125px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__list {
    gap: 14.0625vw;
  }
}
#lp-container .product .product__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item {
    width: 22.2580645161vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__item {
    width: 276px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__item {
    width: 36.25vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item--image {
    width: 15.7258064516vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__item--image {
    width: 195px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__item--image {
    width: 27.34375vw;
  }
}
#lp-container .product .product__item--text {
  text-align: center;
  line-height: 1.1904761905;
  color: #6c3e00;
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item--text {
    font-size: 2.0161290323vw;
    margin-top: 1.6129032258vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__item--text {
    font-size: 25px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__item--text {
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__item--text {
    font-size: 3.90625vw;
    margin-top: 3.125vw;
  }
}
#lp-container .product .product__item--button {
  display: block;
  position: relative;
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item--button {
    margin-top: 1.2096774194vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .product .product__item--button {
    margin-top: 15px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item--button:hover .product__item--buttonHover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__item--button {
    margin-top: 3.125vw;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .product .product__item--buttonHover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .product .product__item--buttonHover {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .ec__banner {
    padding-top: 7.2580645161vw;
    padding-bottom: 7.2580645161vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner {
    padding-top: 90px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner {
    padding-bottom: 90px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .ec__banner {
    padding-top: 10.9375vw;
    padding-bottom: 12.5vw;
  }
}
#lp-container .ec__banner .ec__heading {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #lp-container .ec__banner .ec__heading {
    width: 25.8064516129vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner .ec__heading {
    width: 320px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .ec__banner .ec__heading {
    width: 43.4375vw;
  }
}
#lp-container .ec__banner .ec__list {
  display: flex;
}
@media screen and (min-width: 768px) {
  #lp-container .ec__banner .ec__list {
    justify-content: center;
    gap: 3.2258064516vw;
    margin-top: 5.6451612903vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner .ec__list {
    gap: 40px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner .ec__list {
    margin-top: 70px;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .ec__banner .ec__list {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7.8125vw;
    margin-top: 10.15625vw;
  }
}
#lp-container .ec__banner .ec__button {
  display: block;
}
@media screen and (min-width: 768px) {
  #lp-container .ec__banner .ec__button {
    width: 34.6774193548vw;
    transition: opacity 0.3s ease;
  }
}
@media screen and (min-width: 768px) and (min-width: 1240px) {
  #lp-container .ec__banner .ec__button {
    width: 430px;
  }
}
@media screen and (min-width: 768px) {
  #lp-container .ec__banner .ec__button:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px) {
  #lp-container .ec__banner .ec__button {
    width: 49.21875vw;
  }
}
#lp-container .is-anime {
  opacity: 0;
  transition: opacity 0.7s ease;
}
#lp-container .is-anime.is-active {
  opacity: 1;
}