@charset "UTF-8";
/*//////////////////////////////////////////////////

Title : emmi

//////////////////////////////////////////////////*/

.l-emmi {
  --base-background-color: #e2e0d7;
  --color-brawn: #56391b;
  --color-green: #414822;
  --base-color: #3f3a3a;
  --base-font-size: 1.329rem;
  --lp-font-base: "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN,HiraKakuProN-W6, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

  font-family: var(--lp-font-base);
  color: var(--base-color);
  font-size: var(--base-font-size);
  font-weight: 600;
  line-height: calc(24.54 / 13.29);
  letter-spacing: .1em;

  h2, h3, h4, h5, p, ul, li {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  p, ul, li {
    line-height: calc(24.54 / 13.29);
  }

  background-color: var(--base-background-color);

  /* //////////////////// */
  /* // p-mainvisual      */
  /* //////////////////// */
  .p-mainvisual {
    display: flex;
    padding-block: 6.5rem 7.3rem;
  }
  .p-mainvisual__img {
    flex-shrink: 0;
    width: 41.1rem;
    & img {
      display: block;
      width: 100%;
    }
  }
  .p-mainvisual__content {
    padding-inline: 7.7rem 0;
    text-align: center;
  }
  .p-mainvisual__content-heading {
    width: 35.1rem;
    margin-top: 0.3rem;
    margin-inline: auto;
    margin-bottom: 2.78rem;
    & img {
      display: block;
      width: 100%;
    }
  }
  .p-mainvisual__content-body__text {
    & + & {
      margin-top: 1.85em;
    }
  }
  .p-mainvisual__content-body__icons {
    width: 31rem;
    margin-top: 4rem;
    margin-inline: auto;
    & img {
      display: block;
      width: 100%;
    }
  }

  /* //////////////////// */
  /* // c-box             */
  /* //////////////////// */
  .c-box__image {
    overflow: clip;
    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .c-box__content {
    background: var(--box-color, var(--base-background-color));
    text-align: center;
    &.--brown {
      --box-color: var(--color-brawn);
      color: #fff;
    }
    &.--green {
      --box-color: var(--color-green);
      color: #fff;
    }
    &:only-child {
      padding-block: 5.9rem;
    }
  }
  .c-box__label {
    font-size: 1.84rem;
    line-height: calc(32.72 / 18.4);
    letter-spacing: .1em;
    &:only-child {
      line-height: calc(42.94 / 18.4);
    }
    & sup {
      font-size: 1.022rem;
    }
  }
  .c-box__label-icon {
    width: 2.9rem;
    margin-block: 1.3rem 2.3rem;
    margin-inline: auto;
    translate: -.6rem 0;
    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .c-box__text {
    .c-box__label + & {
      margin-top: 1.5em;
    }
  }

  /* //////////////////// */
  /* // c-list            */
  /* //////////////////// */
  .c-list {
    * + & {
      margin-top: 1.8rem;
    }
  }
  .c-list__item {
    line-height: calc(30.67 / 13.29);
  }

  /* //////////////////// */
  /* // c-feature-list    */
  /* //////////////////// */
  .c-feature-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.7rem;
    * + & {
      margin-top: 5rem;
      margin-left: .5rem;
    }
  }
  .c-feature-list__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 12.3rem;
    height: 7.5rem;
    color: #fff;
    line-height: calc(19.43 / 13.29);
    text-align: center;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #3f3a3a;
      mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20viewBox%3D%220%200%20122.88%2074.57%22%3E%3Cellipse%20cx%3D%2261.44%22%20cy%3D%2237.28%22%20rx%3D%2262.46%22%20ry%3D%2235.52%22%20style%3D%22fill%3A%233f3a3a%22%20transform%3D%22rotate(-12.69%2061.405%2037.282)%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
      translate: -50% -50%;
    }
    > span {
      position: relative;
      z-index: 1;
      &.--2 {
        margin-left: 0.8rem;
        letter-spacing: .01em;
      }
      &.--3 {
        margin-left: 0.8rem;
      }
    }
  }
}

/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  /* utility */
  .u-d-md {
    display: none !important;
  }

  .l-emmi {
    /* //////////////////// */
    /* // p-mainvisual      */
    /* //////////////////// */
    .p-mainvisual__img {
      margin-left: 6.9rem;
    }
    .p-mainvisual__content-heading {
      translate: -.5rem 0;
    }
    .p-mainvisual__content-body__icons {
      translate: -.4rem 0;
    }

    /* //////////////////// */
    /* // l-grid            */
    /* //////////////////// */
    .l-grid__row {
      display: flex;
      &:nth-child(even) {
        flex-direction: row-reverse;
      }
    }
    .l-grid__box {
      width: 50%;
    }

    /* //////////////////// */
    /* // c-box             */
    /* //////////////////// */
    .c-box__image {
      flex-shrink: 0;
      aspect-ratio: 552 / 587.5;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .c-box__content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &.--brown-lg {
        --box-color: var(--color-brawn);
        color: #fff;
      }
      &.--1 {
        padding-top: 2.9rem;
        padding-right: 2rem;
      }
      &.--2 {
        padding-top: 1rem;
        padding-right: 1rem;
      }
      &.--3 {
        padding-top: 1.9rem;
        padding-right: 1.4rem;
        .c-box__text {
          margin-top: 0.75em;
        }
      }
      &.--4 {
        padding-top: .9rem;
        padding-right: 2.1rem;
        .c-box__text {
          margin-top: 0.75em;
        }
      }
      &.--5 {
        padding-top: 3.2rem;
        padding-right: .4rem;
        .c-box__text {
          margin-top: 0.75em;
        }
      }
      &.--6 {
        padding-top: 2.6rem;
        .c-box__text {
          margin-top: 0.75em;
        }
      }
      &.--7 {
        padding-top: 3.5rem;
        padding-right: 1rem;
      }
      &.--8 {
        padding-top: 5.2rem;
        padding-bottom: 5rem;
      }
    }

    /* //////////////////// */
    /* // p-flavor          */
    /* //////////////////// */
    .p-flavor {
      display: flex;
      justify-content: center;
      gap: 5.9rem;
      padding-block: 8rem 5.1rem;
      padding-left: 1.6rem;
    }
    .p-flavor__box {
      &.--1 {
        width: 45.1rem;
      }
      &.--2 {
        width: 42.9rem;
        margin-top: 14.6rem;
      }
      & img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
}

/*=======================================
                    SP
========================================*/
@media (width < 768px) {

  /* utility */
  .u-d-lg {
    display: none !important;
  }

  .l-emmi {
    --rem: calc(100vw / 750);
    --base-font-size: calc(20 * var(--rem));

    line-height: calc(39 / 20);

    p, ul, li {
      line-height: calc(39 / 20);
    }

    /* //////////////////// */
    /* // p-mainvisual      */
    /* //////////////////// */
    .p-mainvisual {
      flex-direction: column;
      padding-block: calc(78 * var(--rem)) calc(73 * var(--rem));
    }
    .p-mainvisual__img {
      width: 100%;
    }
    .p-mainvisual__content {
      order: -1;
      padding-inline: 0;
      padding-bottom: calc(100 * var(--rem));
      font-size: calc(21 * var(--rem));
      line-height: calc(41.62 / 21);
      letter-spacing: calc(0.53 * var(--rem));
    }
    .p-mainvisual__content-heading {
      width: calc(650 * var(--rem));
      margin-bottom: calc(39 * var(--rem));
    }
    .p-mainvisual__content-body__text {
      & + & {
        margin-top: 2.05em;
      }
    }
    .p-mainvisual__content-body__icons {
      width: calc(452.4 * var(--rem));
      margin-top: calc(67 * var(--rem));
    }

    /* //////////////////// */
    /* // c-box             */
    /* //////////////////// */
    .c-box__content {
      padding-block: calc(60 * var(--rem));
      &.--green-md {
        --box-color: var(--color-green);
        color: #fff;
      }
      &.--1 {
        padding-block: calc(74 * var(--rem));
        padding-right: calc(10 * var(--rem));
      }
      &.--2 {
        padding-top: calc(48 * var(--rem));
        padding-bottom: calc(56 * var(--rem));
        padding-left: calc(12 * var(--rem));
      }
      &.--3 {
        padding-top: calc(55 * var(--rem));
        padding-bottom: calc(69 * var(--rem));
        padding-right: calc(11 * var(--rem));
        .c-box__text {
          margin-top: 0.9em;
        }
      }
      &.--4 {
        padding-top: calc(68 * var(--rem));
        padding-bottom: calc(87 * var(--rem));
        padding-right: calc(8 * var(--rem));
      }
      &.--5 {
        padding-top: calc(113 * var(--rem));
        padding-bottom: calc(99 * var(--rem));
        padding-left: calc(1 * var(--rem));
        .c-box__text {
          margin-top: 1.19em;
        }
      }
      &.--6 {
        padding-top: calc(90 * var(--rem));
        padding-bottom: calc(96 * var(--rem));
        padding-left: calc(13 * var(--rem));
        .c-box__text {
          margin-top: .9em;
        }
      }
      &.--7 {
        padding-top: calc(95 * var(--rem));
        padding-bottom: calc(121 * var(--rem));
        padding-right: calc(20 * var(--rem));
      }
      &.--8 {
        padding-top: calc(54 * var(--rem));
        padding-bottom: calc(54 * var(--rem));
        padding-left: calc(11 * var(--rem));
        .c-box__text {
          line-height: calc(41 / 20);
        }
      }
    }
    .c-box__label {
      font-size: calc(28.35 * var(--rem));
      line-height: calc(48.19 / 28.35);
      letter-spacing: .05em;
      &:only-child {
        font-size: calc(25.51 * var(--rem));
        line-height: calc(56.69 / 25.51);
        letter-spacing: .025em;
      }
      & sup {
        font-size: calc(21 * var(--rem));
      }
    }
    .c-box__text {
      .c-box__label + & {
        margin-top: 1.17em;
      }
    }
    .c-box__label-icon {
      width: calc(46 * var(--rem));
      margin-block: calc(23 * var(--rem)) calc(24 * var(--rem));
      translate: calc(-14 * var(--rem));
    }

    /* //////////////////// */
    /* // c-list            */
    /* //////////////////// */
    .c-list {
      * + & {
        margin-top: calc(36 * var(--rem));
      }
    }
    .c-list__item {
      line-height: calc(41 / 20);
    }

    /* //////////////////// */
    /* // c-feature-list    */
    /* //////////////////// */
    .c-feature-list {
      gap: calc(21 * var(--rem));
      * + & {
        margin-top: calc(65 * var(--rem));
      }
    }
    .c-feature-list__item {
      width: calc(190 * var(--rem));
      height: calc(115 * var(--rem));
      line-height: calc(27 / 20);
    }

    /* //////////////////// */
    /* // p-flavor          */
    /* //////////////////// */
    .p-flavor {
      padding-bottom: calc(50 * var(--rem));
    }
    .p-flavor__box {
      &.--2 {
        margin-top: calc(8 * var(--rem));
      }
      & img {
        width: 100%;
        height: auto;
      }
    }
  }
}