@charset "utf-8";
html, body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
.block-goods-comment5 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

@property --color-stop1 {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@property --color-stop2 {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@property --color-stop3 {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@media (max-width: 768px) {
  html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /* font-size: 62.5% !important; */
    vertical-align:baseline;
    background:transparent;
  }
}
@media (max-width: 768px) {
  .event-links-wrapper p a{
    font-size: 14px;
  }
}

#livimex_w_wrap {

  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;

  /* ↓ 追加 ↓ */
  h1, h2, h3, h4, h5, h6 {
    font-size: 2rem;
  }

p, li, dd, dt, td, th, label, a {
  font-size: 16px;
}

@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 2rem ;
  }

  p, li, dd, dt, td, th, label, a {
    font-size: 16px ;
  }
}
/* ↑ 追加 ↑ */

  img {
    width: 100%;
    height: auto;
  }



  /* ↓↓↓ common ↓↓↓ */
  .sectitle {
    font-size: 56px;
    font-weight: 500;
    letter-spacing: .15em;
    text-align: center;
    color: var(--text-color);
    position: relative;
    z-index: 1;
    background-color: #ffffff00;
    width: 100%;
  }

  @media (max-width: 768px) {
    .sectitle {
      font-size: 32px !important;
    }
  }

  .sectitle .line {
    display: inline-block;
    position: relative;
    font-weight: 500;

    .small {
      font-size: 0.714286em;

      @media (max-width: 768px) {
        font-size: 2.4rem;
      }
    }
  }
  @media (max-width: 768px) {
    .sectitle .line {
      font-size: 32px !important;
    }
  }

  .sectitle .line::after {
    content: '';
    position: absolute;
    top: 35%;
    left: -8px;
    width: calc(100% + 15px);
    height: 35px;
    background-color: rgba(255, 255, 255, .7);
    z-index: -1;
  }

  @media (max-width: 768px) {
    .sectitle .line::after {
      top: 31%;
      height: 20px;
    }
  }

  .subeng {
    margin-top: 10px;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: .1em;
    color: #fff;
    text-align: center;
    line-height: 1;
    font-family: var(--robo-font);
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .subeng {
      margin-top: 15px;
      font-size: 20px;
    }
  }

  /* ↑↑↑ common ↑↑↑ */

  /* ↓↓↓ fv ↓↓↓ */
  .fv {
    position: relative;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/fv-bg_pc.png)no-repeat;
    background-size: contain;
  }

  @media (max-width: 768px) {
    .fv {
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/fv-bg_sp.png)no-repeat;
      background-size: contain;
    }
  }

  .fv .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  .fv .inner .fv-main {
    display: block;
    position: relative;
    z-index: 1;

    img {
      aspect-ratio: 1280/720;
      width: 100%;    /* ← 追加 */
      height: auto;   /* ← 追加 */


      @media (max-width: 768px) {
        aspect-ratio: 375/363;
      }
    }
  }

  .fv .fv-image {
    display: none;
  }

  @media (max-width: 768px) {
    .fv .fv-image {
      display: block;
      position: relative;
      z-index: 1;
      width: 88.53333333333333vw;
      margin: 50px auto 0;

      &::before {
        content: '';
        position: absolute;
        top: -26px;
        left: 50%;
        translate: -50% 0;
        width: 88.53333333333333vw;
        height: 4px;
        background-color: #fff;
      }
    }
  }

  .fv .linkbtn {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 26.5625vw;
    height: 100px;
    aspect-ratio: 340/100;
    padding-left: 20px;
    z-index: 1;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;

    @media (max-width: 768px) {
      position: relative;
      bottom: unset;
      width: 88.53333333333333vw;
      aspect-ratio: 332/64;
      margin: 6.4vw auto 0;
      padding-left: 0;
      justify-content: center;
    }

    img {
      position: relative;
      display: block;
      width: 18.046875vw;
      aspect-ratio: 231/27;
      z-index: 1;

      @media (max-width: 768px) {
        width: 57.599999999999994vw;
        aspect-ratio: 216/25;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip-path: polygon(0% 0%, 85% 0, 100% 100%, 0% 100%);
      background-image: linear-gradient(90deg,
          var(--color-stop1) 0%,
          var(--color-stop2) 44%,
          var(--color-stop3) 100%);
      transition:
        --color-stop1 300ms 0s ease,
        --color-stop2 300ms 0s ease,
        --color-stop3 300ms 0s ease;

      @media (max-width: 768px) {
        clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
      }
    }

    @media (min-width: 769px) {
      &:hover&::before {
        --color-stop1: rgba(230, 244, 234, 1);
        --color-stop2: rgba(224, 242, 239, 1);
        --color-stop3: rgba(212, 239, 250, 1);
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 3.515625vw;
      width: 1.015625vw;
      aspect-ratio: 13/8;
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/linkbtn-arrow.svg) no-repeat;
      background-size: contain;
      translate: 0 0;
      transition: translate 300ms 0s ease;

      @media (max-width: 768px) {
        right: 14px;
        width: 13px;
      }
    }

    &:hover&::after {
      translate: 0 0.390625vw;
    }
  }

  /* ↑↑↑ fv ↑↑↑ */

  /* ↓↓↓ new-box ↓↓↓ */
  .new-box {
    width: 100%;
    margin-top: 103px;
    padding: 95px 25px 120px;
    position: relative;
    background: linear-gradient(90deg, rgba(236, 201, 116, 1) 0%, rgba(251, 234, 181, 1) 30%, rgba(245, 208, 99, 1) 70%, rgba(255, 236, 176, 1) 100%);
    container-type: inline-size;

    @media (max-width: 768px) {
      margin-top: 80px;
      padding: 25px 15px 60px;
    }
  }

  .new-box .bg {
    position: absolute;
    top: 32.03125cqw;
    right: 0;
    width: 100%;
    aspect-ratio: 1280/655;

    @media (max-width: 768px) {
      /* top: 90.66666666666666cqw; */
      top: 28%;
      aspect-ratio: 375/258;
    }

    picture {
      display: block;
    }
  }

  .new-box .inner {
    max-width: 842px;
    margin: 0 auto;
    position: relative;
  }

  .new-box-title {
    width: 620px;
    margin: 0 auto;

    @media (max-width: 768px) {
      width: 320px;
    }
  }

  .new-box .read-text {
    width: 100%;
    margin: 48px auto 0;

    @media (max-width: 768px) {
      margin-top: 30px;
    }

    .txt1 {
      width: fit-content;
      margin-inline: auto;
      font-weight: 500;
      letter-spacing: 0.075em;
      line-height: 1;
      text-align: center;
      font-size: 2rem !important;

      @media (max-width: 768px) {
        font-size: 20px!important;
        line-height: 1.4;
      }

      b {
        font-size: 2.8rem;
        font-weight: 900;
        position: relative;
        line-height: 1;
        display: inline-block;
        z-index: 0;

        @media (max-width: 768px) {
          font-size: 27.78px !important;
        }

        &::before {
          content: '';
          position: absolute;
          bottom: -5%;
          left: -2%;
          width: 102%;
          height: 8px;
          background-color: #2bb15f;
          z-index: -1;
        }
      }
    }

    .txt2 {
      width: fit-content;
      margin-top: 0.3em;
      margin-inline: auto;
      padding-left: 0.95em;
      font-size: 2.8rem;
      font-weight: 900;
      letter-spacing: 0.075em;
      line-height: 0.9;
      text-align: center;
      position: relative;

      @media (max-width: 768px) {
        margin-top: 50px;
        padding-left: 0;
        font-size: 24.78px !important;
      }

      &::before {
        content: '';
        position: absolute;
        top: 18px;
        left: 0;
        width: 38px;
        aspect-ratio: 1/1;
        background: url(https://hc.kowa.co.jp/livimex/assets/img/top/read-text-plus-icon.svg)no-repeat;
        background-size: contain;

        @media (max-width: 768px) {
          width: 32px;
          top: -40px;
          left: calc(50% - 16px);
        }
      }

      b {
        font-size: 1.333333em;
        line-height: 1;
        translate: 0 4px;
        display: inline-block;

        @media (max-width: 768px) {
          font-size: 30.975px !important;
          translate: 0 3px;
        }
      }

      .small {
        font-size: 0.666667em;

        @media (max-width: 768px) {
          font-size: 15.4875px;
        }
      }
    }
  }

  .new-box .ingredient-list {
    width: 100%;
    margin-top: 50px;
    display: flex;
    gap: 15px;
    container-type: inline-size;

    @media (max-width: 768px) {
      width: 345px;
      margin-top: 30px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 0px 0px;
      grid-template-areas:
        "item01 ."
        "item02 item03";
      gap: 0;
    }
  }

  .new-box .ingredient-list .item {
    width: 100%;
    aspect-ratio: 270/312;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/ingredient-list-item-bg.png)no-repeat;
    background-size: contain;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));

    @media (max-width: 768px) {
      width: 167px;
    }

    .head {
      width: 100%;
      aspect-ratio: 270/90;
      margin-top: 65px;
      /* font-size: 3.2rem; */
      font-size: 3.800475059382423cqw;
      line-height: 1.35;
      font-weight: 500;
      text-align: center;
      display: grid;
      place-content: center;

      @media (max-width: 768px) {
        margin-top: 45px;
        font-size: 15.4875px!important;
        font-weight: 600;
      }

      &.-green {
        color: #2bb15f;
      }

      &.-blue {
        color: #005ae7;
      }

      &.-skyblue {
        color: #59c4ff;
      }
    }

    .text {
      width: 100%;
      aspect-ratio: 270/80;
      font-size: 16px !important;
      font-size: 2.375296912114014cqw;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0;
      color: #595757;
      display: grid;
      place-content: center;

      @media (max-width: 768px) {

        margin-top: -7px;
        font-size: 12px !important;
        line-height: 1.3;
        padding: 0 14px;
      }

      .small {
        font-size: 16px !important;
        line-height: 1.3;
        position: relative;
        @media (max-width: 768px) {
          font-size: 12px !important;
        }

        &::before {
          content: '(';
          position: absolute;
          top: -20px;
          left: -20px;
          font-size: 60px;
          font-weight: 100;

          @media (max-width: 768px) {
            font-size: 30px;
            top: -7px;
            left: -13px;
          }
        }

        &::after {
          content: ')';
          position: absolute;
          top: -20px;
          right: -20px;
          font-size: 60px;
          font-weight: 100;

          @media (max-width: 768px) {
            font-size: 30px;
            top: -7px;
            right: -13px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    .new-box .ingredient-list .item:nth-of-type(1) {
      grid-area: item01;
      margin-left: 51%;
    }

    .new-box .ingredient-list .item:nth-of-type(2) {
      grid-area: item02;
      margin-inline: auto;
      margin-top: -40px;
    }

    .new-box .ingredient-list .item:nth-of-type(3) {
      grid-area: item03;
      margin-left: auto;
      margin-top: -40px;
    }
  }

  .new-box-image01 {
    display: block;
    margin: 45px auto 0;

    @media (max-width: 768px) {
      max-width: 500px;
    }
  }

  .new-box-image02 {
    display: block;
    max-width: 720px;
    margin: 60px auto 0;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));

    @media (max-width: 768px) {
      width: 95.4%;
      max-width: 500px;
    }
  }

  /* ↑↑↑ new-box ↑↑↑ */


  /* ↓↓↓ box1 ↓↓↓ */
  .box1 {
    width: 100%;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box1 {
      margin-top: 60px;
    }
  }

  .box1 .bg1 {
    position: absolute;
    top: -12%;
    right: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box1 .bg1 {
      top: -6%;
    }
  }

  .box1 .bg2 {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box1 .bg2 {
      top: 21%;
    }
  }

  .box1 .bg3 {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box1 .bg3 {
      bottom: -1%;
    }
  }

  .box1 .caption {
    width: 580px;
    height: 72px;
    margin: 0 auto 15px;
    border-radius: 36px;
    background-color: #fff;
    font-size: 1.5rem;
    letter-spacing: .17em;
    font-weight: 500;
    color: var(--text-color);
    display: grid;
    place-content: center;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box1 .caption {
      width: 260px;
      height: 86px;
      font-size: 18px!important;
      text-align: center;
      border-radius: 43px;
    }
  }

  .box1 .caption::before {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
  }

  .box1 .subtitle {
    margin-top: 30px;
    font-size: 2rem;
    letter-spacing: .12em;
    font-weight: 500;
    text-align: center;
    color: var(--text-color);
    line-height: 1;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box1 .subtitle {
      margin-top: 35px;
      font-size: 20px !important;
      line-height: 1;
    }
  }

  .box1 .sectitle {
    margin-top: 15px;
    font-weight: 400;
  }

  .box1 .figcap {
    width: fit-content;
    margin: 90px auto 0;
    padding-left: 45px;
    font-size: 3.8rem;
    letter-spacing: .15em;
    line-height: 1;
    text-align: center;
    color: var(--text-color);
    position: relative;
    z-index: 1;
    font-size: 2.6rem;
  }

  @media (max-width: 768px) {
    .box1 .figcap {
      margin-top: 60px;
      padding-left: 35px;
      font-size: 20px !important;
    }
  }

  .box1 .figcap::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 32px;
    height: 31px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/icon-figcap.svg)no-repeat;
  }

  @media (max-width: 768px) {
    .box1 .figcap::before {
      top: 2px;
      width: 27px;
      height: 27px;
      background-size: contain;
    }
  }

  .box1 .figimage {
    max-width: 768px;
    margin: 30px auto 0;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box1 .figimage {
      max-width: 500px;
      margin-top: 20px;
    }
  }

  .box1 .linkbtn {
    width: 200px;
    height: 230px;
    margin: 55px auto 0;
    /* font-size: 2.4rem; */
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.4;
    color: var(--text-color);
    display: grid;
    place-content: center;
    text-align: center;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/linkbtn-bg.svg)no-repeat;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box1 .linkbtn {
      width: 145px;
      height: 168px;
      margin-top: 40px;
      font-size: 1.8rem;
      background-size: contain;
    }
  }

  .box1 .linkbtn::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/linkbtn-bg_filter.svg)no-repeat;
    opacity: 0;
    transition: opacity 300ms 0s ease;
  }

  @media (min-width: 769px) {
    .box1 .linkbtn:hover::before {
      opacity: 1;
    }
  }

  .box1 .linkbtn::after {
    content: '';
    position: absolute;
    bottom: 43px;
    left: calc(50% - 6px);
    width: 13px;
    height: 8px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/linkbtn-arrow.svg)no-repeat;
    transition: transform 300ms 0s ease;
  }

  @media (min-width: 769px) {
    .box1 .linkbtn:hover::after {
      transform: translateY(5px);
    }
  }

  @media (max-width: 768px) {
    .box1 .linkbtn::after {
      bottom: 31px;
    }
  }
  
  .box1 .linkbtn span {
    position: relative;
    z-index: 1;
    font-size: 24px;
  }
  @media (max-width: 768px) {
    .box1 .linkbtn span {
      font-size: 18px;
    }
  }

  /* ↑↑↑ box1 ↑↑↑ */

  /* ↓↓↓ box2 ↓↓↓ */
  .box2 {
    width: 100%;
    margin-top: 130px;
    padding: 0 15px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box2 {
      margin-top: 60px;
      overflow: hidden;
    }

    .box2 .sectitle {
      font-size: 3.0rem;
      letter-spacing: .07em;
      line-height: 1.3;
    }
  }

  .box2 .bg1 {
    position: absolute;
    top: -6.7%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box2 .bg1 {
      top: 14%;
    }
  }

  .box2 .bg2 {
    position: absolute;
    top: 16.5%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box2 .bg2 {
      top: 39%;
    }
  }

  .box2 .bg3 {
    position: absolute;
    top: 66%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box2 .bg3 {
      top: 45%;
    }
  }

  .box2 .bg4 {
    display: none;
  }

  @media (max-width: 768px) {
    .box2 .bg4 {
      display: block;
      position: absolute;
      bottom: 33%;
      left: 0;
      width: 100%;
    }
  }

  .box2 .wrap3 .group .caption,
  .box2 .wrap2 .group .caption,
  .box2 .wrap1 .group .caption {
    display: block;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: .15em;
    color: var(--text-color);
    text-align: center;
    position: relative;
  }

  @media (max-width: 768px) {

    .box2 .wrap3 .group .caption,
    .box2 .wrap2 .group .caption,
    .box2 .wrap1 .group .caption {
      font-size: 24px !important;
    }

    .box2 .wrap2 .group .caption {
      letter-spacing: 0.070em;
      background-color: #ffffff00;
    }
  }

  @media (max-width: 360px) {
    .box2 .wrap2 .group .caption {
      letter-spacing: .1em;
    }
  }

  .box2 .wrap3 .group .caption .line,
  .box2 .wrap1 .group .caption .line {
    display: inline-block;
    position: relative;
    font-size: 4rem;
  }

  .box2 .wrap3 .group .caption .dot,
  .box2 .wrap1 .group .caption .dot {
    position: relative;
    font-size: 3.2rem !important;
  }

  .box2 .wrap3 .group .caption .dot::before,
  .box2 .wrap1 .group .caption .dot::before {
    content: '';
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-blue);
  }

  @media (max-width: 768px) {

    .box2 .wrap3 .group .caption .dot::before,
    .box2 .wrap1 .group .caption .dot::before {
      width: 6px;
      height: 6px;
      border-radius: 3px;
    }
  }

  .box2 .wrap3 .group .caption .line::after,
  .box2 .wrap1 .group .caption .line::after {
    content: '';
    position: absolute;
    top: 32%;
    left: -8px;
    width: calc(100% + 8px);
    height: 25px;
    background-color: #fff;
    z-index: -1;
  }

  @media (max-width: 768px) {

    .box2 .wrap3 .group .caption .line::after,
    .box2 .wrap1 .group .caption .line::after {
      top: 34%;
      left: -4px;
      width: calc(100% + 4px);
      height: 18px;
    }
  }

  .box2 .wrap1 .group .caption .small {
    font-size: 0.6em;
    vertical-align: super;
  }

  .box2 .wrap1 .group .notes {
    margin-top: 15px;
    font-size: 1.2rem;
    letter-spacing: .075em;
    line-height: 1;
    text-align: center;
    color: var(--text-color);
  }

  @media (max-width: 768px) {
    .box2 .wrap1 .group .notes {
      margin-top: 10px;
    }
  }

  .box2 .wrap1 .group .text {
    margin-top: 35px;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    line-height: 2;
  }

  @media (max-width: 768px) {
    .box2 .wrap1 .group .text {
      margin-top: 30px;
      text-align: justify;
    }
  }

  .box2 .wrap2 {
    max-width: 1076px;
    margin: 0 auto;
    margin-top: 165px;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box2 .wrap2 {
      margin-top: 40px;
    }
  }

  .box2 .wrap2 .group .subcaption {
    display: block;
    margin-bottom: 15px;
    font-size: 2rem;
    letter-spacing: .15em;
    color: var(--text-color);
    line-height: 1;
    text-align: center;
  }

  @media (max-width: 768px) {
    .box2 .wrap2 .group .subcaption {
      margin-bottom: 5px;
      font-size: 4rem !important;
      letter-spacing: 4.64625px;
    }
  }
  
  .box2 .wrap2 .group .subcaption .line {
    display: inline-block;
    position: relative;
    font-weight: 500;
    font-size: 28px;
  }
  @media (max-width: 768px) {
    .box2 .wrap2 .group .subcaption .line {
      font-size: 20px;
    }
  }

  .box2 .wrap2 .group .subcaption .line::after {
    content: '';
    position: absolute;
    top: 32%;
    left: -4px;
    width: calc(100% + 8px);
    height: 18px;
    background-color: rgba(255, 255, 255, .7);
    z-index: -1;
  }

  @media (max-width: 768px) {
    .box2 .wrap2 .group .subcaption .line::after {
      top: 23%;
      height: 15px;
    }
  }

  .box2 .wrap2 .waku {
    max-width: 700px;
    margin: 70px auto 0;
    padding: 45px 25px 30px 25px;
    background-color: #fff;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    line-height: 2;
    border: 6px solid var(--color-green);
    position: relative;
  }

  @media (max-width: 768px) {
    .box2 .wrap2 .waku {
      margin-top: 55px;
      text-align: justify;
      font-size: 16px;
    }
  }

  .box2 .wrap2 .waku .speech {
    position: absolute;
    top: -23px;
    left: calc(50% - 108px);
    width: 216px;
    height: 46px;
    font-size: 18px !important;
    font-weight: bold;
    color: #fff;
    background-color: #2bb15f;
    border-radius: 23px;
    display: grid;
    place-content: center;
  }

  .box2 .wrap2 .waku-txt {
    max-width: 700px;
    margin: 25px auto 0;
    font-weight: 500;
    color: var(--text-color);
    text-align: justify;
    line-height: 2;
  }

  .box2 .wrap2 .waku-txt.v2 {
    margin-top: 40px;
    text-align: center;

    @media (max-width: 768px) {
      margin-top: 20px;
      text-align: left;
      font-size: 16px;
    }
  }

  .box2 .wrap2 .image {
    display: block;
    margin: 60px auto;
  }

  @media (max-width: 768px) {
    .box2 .wrap2 .image {
      max-width: 500px;
      margin-top: 25px;
      margin-bottom: 0;
    }
  }

  .box2 .wrap3 {
    max-width: 1076px;
    margin: 0 auto;
    padding-top: 190px;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box2 .wrap3 {
      max-width: 370px;
      padding-top: 60px;
    }

    .box2 .wrap3 .group .caption {
      line-height: 2;
    }
  }

  .box2 .wrap3 .group .caption .dot::before {
    background-color: var(--color-lightblue);
  }

  .box2 .wrap3 .group .text {
    width: 100%;
    margin-top: 35px;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    line-height: 2;
  }

  @media (max-width: 768px) {
    .box2 .wrap3 .group .text {
      text-align: justify;
      font-size: 16px;
    }
  }

  .box2 .wrap3 .typelist-title {
    width: 560px;
    margin: 40px auto 0;

    @media (max-width: 768px) {
      width: 320px;
      margin: 50px auto 0;
    }
  }

  .box2 .wrap3 .typelist {
    max-width: 1076px;
    margin: 60px auto 0;
    container-type: inline-size;

    @media (max-width: 768px) {
      max-width: 500px;
      margin: 30px auto 0;
    }
  }

  .box2 .wrap3 .typelist ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4.4609665427509295cqw;

    @media (max-width: 768px) {
      gap: 30px;
    }
  }

  @media (max-width: 768px) {
    .box2 .wrap3 .typelist ul {
      flex-direction: column;
      justify-content: flex-start;
    }
  }

  .box2 .wrap3 .typelist ul .item {
    width: calc((100% - 4.4609665427509295cqw)/2);

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .box2 .wrap3 .typelist ul .item .ribbon {
    width: 100%;
    aspect-ratio: 514/48;
    border-radius: 28px;
    font-size: 2.2304832713754648cqw;
    font-weight: bold;
    letter-spacing: .15em;
    line-height: 1.4;
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;

    @media (max-width: 768px) {
      aspect-ratio: unset;
      height: 40px;
      font-size: 18px;
    }
  }

  .box2 .wrap3 .typelist ul .item:nth-of-type(1) .ribbon {
    background-color: #2bb15f;
  }

  .box2 .wrap3 .typelist ul .item:nth-of-type(2) .ribbon {
    background-color: var(--color-blue);
  }

  .box2 .wrap3 .typelist ul .item .image {
    width: 100%;
    margin: 15px auto 0;
    position: relative;

    @media (max-width: 768px) {
      margin: 10px auto 0;
    }
  }


  .box2 .wrap3 .typelist ul .item .text {
    width: 100%;
    aspect-ratio: 514/170;
    margin-top: 25px;
    padding: 2.7881040892193307cqw 6.828996282527882cqw;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3940520446096654cqw;
    

    @media (max-width: 768px) {
      aspect-ratio: unset;
      height: auto;
      padding: 30px 10px 30px 8%;
      gap: 15px;

      &.-ajt {
        padding-left: 11%;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 50%;
      translate: -50% 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 18px 20px 18px;
      border-color: transparent transparent #FFFFFF transparent;
    }
  }

  .box2 .wrap3 .typelist ul .item .text p {
    padding-left: 2.137546468401487cqw;
    font-size: 1.6728624535315983cqw;
    font-weight: 500;
    line-height: 1;
    color: #595757;
    position: relative;

    @media (max-width: 768px) {
      padding-left: 20px;
      font-size: 16px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0.2788104089219331cqw;
      left: 0;
      width: 1.20817843866171cqw;
      aspect-ratio: 13/15;

      @media (max-width: 768px) {
        top: 2px;
        width: 13px;
      }
    }
  }

  .box2 .wrap3 .typelist ul .item .text.green p::before {
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/icon-typelist-green.svg)no-repeat;
    background-size: contain;
  }

  .box2 .wrap3 .typelist ul .item .text.blue p::before {
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/icon-typelist-blue.svg)no-repeat;
    background-size: contain;
  }

  .box2 .wrap3 .typelist ul .item .text p.note {
    padding-left: 0;
    font-size: 1.3011152416356877cqw;
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;

    @media (max-width: 768px) {
      font-size: 12px;
    }

    &::before {
      display: none;
    }
  }

  .box2 .wrap3 .typelist-title2 {
    width: 500px;
    margin: 120px auto 0;

    @media (max-width: 768px) {
      width: 280px;
      margin: 60px auto 0;
    }
  }

  .box2 .wrap3 .typelist2 {
    max-width: 856px;
    margin: 60px auto 0;
    container-type: inline-size;

    @media (max-width: 768px) {
      max-width: 500px;
      margin: 30px auto 0;
    }
  }

  .box2 .wrap3 .typelist2 .item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    @media (max-width: 768px) {
      flex-direction: column;
    }
  }

  .box2 .wrap3 .typelist2 .item .ribbon {
    width: 100%;
    aspect-ratio: 856 / 48;
    border-radius: 28px;
    font-size: 2.803738317757009cqw;
    font-weight: bold;
    letter-spacing: .15em;
    line-height: 1.4;
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;
    background-color: var(--color-lightblue);

    @media (max-width: 768px) {
      aspect-ratio: unset;
      height: 40px;
      font-size: 18px;
    }
  }

  .box2 .wrap3 .typelist2 .item .image {
    width: 51.4018691588785cqw;
    margin: 15px auto 0;
    position: relative;

    @media (max-width: 768px) {
      width: 83%;
    }
  }

  .box2 .wrap3 .typelist2 .item .text {
    flex: 1;
    height: 197px;
    margin-left: 5.14018691588785cqw;
    margin-top: 24px;
    padding: 14.841121cqw 3.672897196261682cqw;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    position: relative;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    @media (max-width: 768px) {
      width: 100%;
      height: auto;
      margin-left: 0;
      margin-top: 35px;
      padding: 30px 20px 30px 13%;
    }

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -20px;
      translate: 0 -50%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 18px 20px 18px 0;
      border-color: transparent #FFFFFF transparent transparent;

      @media (max-width: 768px) {
        top: -20px;
        left: 50%;
        translate: -50% 0;
        border-width: 0 18px 20px 18px;
        border-color: transparent transparent #FFFFFF transparent;
      }
    }

    p {
      padding-left: 2.6869158878504673cqw;
      font-size: 2.102803738317757cqw;
      font-weight: 500;
      line-height: 1;
      color: #595757;
      position: relative;

      @media (max-width: 768px) {
        padding-left: 20px;
        font-size: 16px;
      }


      &::before {
        content: '';
        position: absolute;
        top: 0.35046728971962615cqw;
        left: 0;
        width: 1.5186915887850467cqw;
        aspect-ratio: 13 / 15;
        background: url(https://hc.kowa.co.jp/livimex/assets/img/top/icon-typelist-light_blue.svg)no-repeat;
        background-size: contain;

        @media (max-width: 768px) {
          top: 2px;
          width: 13px;
        }
      }
    }
  }

  /* ↑↑↑ box2 ↑↑↑ */

  /* ↓↓↓ box3 ↓↓↓ */
  .box3 {
    width: 100%;
    margin-top: 120px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box3 {
      margin-top: 80px;
      padding: 0;
    }
  }

  .box3 .bg1 {
    position: absolute;
    top: -220px;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box3 .bg1 {
      top: -130px;
    }
  }


  .box3 .inner {
    max-width: 1130px;
    margin: 0 auto;
    position: relative;
  }

  .box3 .title {
    max-width: 780px;
    height: 72px;
    margin: 0 auto;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/box3-title-bg_pc.png)no-repeat;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: .15em;
    line-height: 1;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  @media (max-width: 768px) {
    .box3 .title {
      max-width: 338px;
      height: 47px;
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/box3-title-bg_sp.png)no-repeat;
      font-size: 20px !important;
    }
  }

  .box3 .contens {
    width: 100%;
    padding: 55px 65px 45px 65px;
    background-color: #fff;
  }

  @media (max-width: 768px) {
    .box3 .contens {
      padding: 25px 15px 25px 15px;
    }
    main p{
      font-size:16px;
    }
  }

  .box3 .contens .switch {
    width: 103px;
    height: 20px;
    margin: 0 auto;
    position: relative;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-green);
    overflow: hidden;
    cursor: pointer;
  }

  .box3 .contens .switch::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 0;
    width: 13px;
    height: 8px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/common/switch-arrow.svg)no-repeat;
    transform-origin: center;
    transition: transform 300ms 0s ease;
  }

  .box3 .contens .switch.is-open::after {
    transform: rotate(180deg);
  }

  .box3 .contens .switch .text {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .box3 .contens .switch .text::before,
  .box3 .contens .switch .text::after {
    position: absolute;
    line-height: 1;
    transition: top 300ms 0s ease;
  }

  .box3 .contens .switch .text::before {
    content: 'OPEN';
    top: 0;
    left: 22%;
  }

  .box3 .contens .switch.is-open .text::before {
    top: 100%;
  }

  .box3 .contens .switch .text::after {
    content: 'CLOSE';
    top: 100%;
    left: 17%;
  }

  .box3 .contens .switch.is-open .text::after {
    top: 0%;
  }

  .box3 .contens .wrap {
    /* display: none; */
    width: 100%;
  }

  @media (max-width: 768px) {
    .box3 .contens .wrap {
      margin-top: 15px;
    }
  }

  .box3 .contens .group {
    margin-bottom: 25px;
    padding: 50px 0;
  }

  .box3 .contens .group:nth-of-type(4) {
    padding: 75px 0 50px;
  }

  @media (max-width: 768px) {
    .box3 .contens .group {
      margin-bottom: 10px;
      padding: 30px 0 40px;
    }

    .box3 .contens .group:nth-of-type(4) {
      padding: 40px 0;
    }
  }

  .box3 .contens .group:nth-of-type(3),
  .box3 .contens .group:nth-of-type(1) {
    background-color: #e6f6ff;
  }

  .box3 .contens .group:nth-of-type(4),
  .box3 .contens .group:nth-of-type(2) {
    background-color: #dff3e7;
  }

  /* .box3 .contens .group:last-of-type {
  margin-bottom: 50px;
} */

  @media (max-width: 768px) {
    .box3 .contens .group:last-of-type {
      /* margin-bottom: 25px; */
      padding-bottom: 0;
    }
  }

  .box3 .contens .group .cap {
    width: 300px;
    height: 50px;
    margin: 0 auto;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #fff;
    display: grid;
    place-content: center;
  }

  @media (max-width: 768px) {
  .box3 .contens .group .cap {
    font-size: 20px;
  }
  }

  .box3 .contens .group:nth-of-type(3) .cap,
  .box3 .contens .group:nth-of-type(1) .cap {
    color: var(--color-blue);
  }

  .box3 .contens .group:nth-of-type(2) .cap {
    color: var(--color-green);
  }

  .box3 .contens .group .text {
    max-width: 75%;
    margin: 25px auto 0;
    font-weight: 500;
    color: var(--text-color);
    text-align: justify;
    line-height: 2;
  }

  @media (max-width: 768px) {
    .box3 .contens .group .text {
      max-width: calc(100% - 50px);
    }
  }

  .box3 .contens .group .text+.text {
    margin-top: 20px;
  }

  .box3 .contens .group .text.-center {
    text-align: center;
  }

  @media (max-width: 768px) {
    .box3 .contens .group .text.-center {
      text-align: justify;
    }
  }

  .box3 .contens .image1 {
    margin: 20px auto 0;
    display: block;
  }

  @media (max-width: 768px) {
    .box3 .contens .image1 {
      margin-top: 35px;
    }
  }

  /* ↑↑↑ box3 ↑↑↑ */

  /* ↓↓↓ box4 ↓↓↓ */
  .box4 {
    width: 100%;
    margin-top: 120px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box4 {
      margin-top: 80px;
      padding: 0;
    }
  }

  .box4 .bg1 {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    display: none;
  }

  @media (max-width: 768px) {
    .box4 .bg1 {
      top: 0px;
      display: block;
    }
  }

  @media (max-width: 768px) {
    .box4 .subeng {
      margin-top: 5px;
    }
  }

  .box4 .group {
    max-width: 633px;
    margin: 85px auto 0;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;

    @media (max-width: 768px) {
      align-items: flex-start;
      gap: 15px;
    }
  }

  @media (max-width: 768px) {
    .box4 .group {
      margin-top: 35px;
      padding: 0 25px;
    }
  }

  .box4 .group .child {
    width: 116px;
    aspect-ratio: 1/1;

    @media (max-width: 768px) {
      width: 80px;
      margin-top: 10px;
    }
  }

  .box4 .group .text {
    flex: 1;
    font-weight: 500;
    color: var(--text-color);
    text-align: justify;
    word-break: break-all;
    line-height: 2;
  }

  @media (max-width: 768px) {
    .box4 .group .text {
      text-align: justify;
    }
  }

  .box4 .product-list {
    max-width: 888px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    container-type: inline-size;
  }

  @media (max-width: 768px) {
    .box4 .product-list {
      max-width: 500px;
      padding: 0 15px;
      flex-direction: column;
    }
  }

  .box4 .product-list .list {
    width: 31.532%;
    padding-bottom: 40px;
    background-color: #fff;
    position: relative;
  }

  @media (max-width: 768px) {
    .box4 .product-list .list {
      width: 100%;
      margin-bottom: 15px;
    }

    .box4 .product-list .list:last-of-type {
      margin-bottom: 0;
    }
  }

  .box4 .product-list .list:nth-of-type(1)::before,
  .box4 .product-list .list:nth-of-type(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(236, 201, 116, 1) 0%, rgba(251, 234, 181, 1) 30%, rgba(245, 208, 99, 1) 70%, rgba(255, 236, 176, 1) 100%);
  }

  .box4 .product-list .list:nth-of-type(1)::after,
  .box4 .product-list .list:nth-of-type(2)::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-color: #fff;
  }

  .box4 .product-list .list img {
    position: relative;
    z-index: 1;
  }

  .box4 .product-list .list .name {
    margin-top: 5px;
    font-size: 2.2522522522522523cqw;
    font-weight: bold;
    color: var(--text-color);
    letter-spacing: .15em;
    line-height: 1.4;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box4 .product-list .list .name {
      margin-top: 0px;
      font-size: 20px;
    }
  }

  .box4 .product-list .list .class {
    width: 156px;
    height: 26px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--text-color);
    display: grid;
    place-content: center;
    border: 1px solid var(--text-color);
    position: relative;
    z-index: 1;
  }

  .box4 .product-list .list .text {
    margin-top: 15px;
    padding: 0 5px;
    font-size: 2.027027027027027cqw;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      font-size: 16px;
    }
  }

  /* ↑↑↑ box4 ↑↑↑ */

  /* ↓↓↓ box5 ↓↓↓ */
  .box5 {
    width: 100%;
    margin-top: 80px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box5 {
      margin-top: 75px;
      padding: 0 15px;
    }
  }

  .box5 .bg1 {
    position: absolute;
    top: 31%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box5 .bg1 {
      top: -75px;
      display: block;
    }
  }

  .box5 .inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .box5 .tab-group {
    width: 100%;
    height: 100px;
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  @media (max-width: 768px) {
    .box5 .tab-group {
      height: 80px;
      margin-top: 40px;
    }
  }

  .box5 .tab-group .tab {
    width: 32%;
    height: 86%;
    padding-top: 0.9%;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: .15em;
    text-align: center;
    line-height: 1;
    color: var(--text-color);
    display: grid;
    place-content: center;
    background-color: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: all 300ms 0s ease;
    position: relative;

    .subtxt {
      margin-bottom: 0.5em;
      font-size: 0.8em;
      line-height: 1;

      @media (max-width: 768px) {
        padding-top: 5px;
        font-size: 1.2rem;
        letter-spacing: 0.05em;
        line-height: 1.2;
      }
    }
  }

  @media (max-width: 768px) {
    .box5 .tab-group .tab {
      width: 27.25%;
      font-size: 1.4rem;
      padding-top: 5px;

      &:last-of-type {
        padding-top: 0;

        &.subtxt {
          padding-top: 3px;
        }
      }
    }
  }

  @media (min-width: 769px) {
    .box5 .tab-group .tab:hover {
      background-color: rgba(255, 255, 255, .8);
    }
  }

  .box5 .tab-group .tab.active {
    height: 100%;
    padding-top: 1.2%;
    font-size: 3.0rem;
    font-weight: 500;
    text-align: center;
    color: #fff;

    .subtxt {
      margin-bottom: 0.3em;
      font-size: 0.666667em;

      @media (max-width: 768px) {
        font-size: 1.2rem;
        margin-bottom: 5px;
        letter-spacing: 0.2em;
      }
    }
  }

  @media (max-width: 768px) {
    .box5 .tab-group .tab.active {
      width: 40.58%;
      font-size: 2.0rem;
    }
  }

  .box5 .tab-group .tab.active:nth-of-type(1) {
    background-color: var(--color-green);
  }

  .box5 .tab-group .tab.active:nth-of-type(2) {
    background-color: var(--color-blue);
  }

  .box5 .tab-group .tab.active:nth-of-type(3) {
    background-color: var(--color-lightblue);
  }

  .box5 .tab-group .tab .icon {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -50%;
    width: 100px;
    height: 32px;
    background-color: #fff;
    border-radius: 32px;
    display: grid;
    place-content: center;

    @media (max-width: 768px) {
      width: 64px;
      height: 24px;

      img {
        width: 31px;
      }
    }
  }

  .box5 .tab-contens {
    width: 100%;
    position: relative;
  }

  .box5 .tab-contens .contens {
    width: 100%;
    padding: 75px 70px 85px;
    background-color: #fff;
    position: relative;
    display: none;
  }

  @media (max-width: 768px) {
    .box5 .tab-contens .contens {
      padding: 45px 10px 40px;
    }
  }

  .box5 .tab-contens .contens.active {
    display: block;
  }

  .box5 .contens .title-group .name {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: .15em;
    line-height: 1;
    color: var(--text-color);
    text-align: center;
  }

  @media (max-width: 768px) {
    .box5 .contens .title-group .name {
      font-size: 2.0rem;
      letter-spacing: .075em;
    }
  }

  .box5 .contens .image02,
  .box5 .contens .image01 {
    width: 640px;
    margin: 30px auto 0;
    display: block;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .box5 .contens .image03 {
    width: 220px;
    margin: 30px auto 0;
    display: block;

    @media (max-width: 768px) {
      width: 37%;
    }
  }


  .box5 .contens .title-group .class {
    width: 160px;
    height: 28px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
    display: grid;
    place-content: center;
    border: 1px solid var(--text-color);
    position: relative;
  }

  .box5 .contens .title-group .image02+.class::after,
  .box5 .contens .title-group .image02+.class::before,
  .box5 .contens .title-group .image01+.class::before,
  .box5 .contens .title-group .image01+.class::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 213px;
    height: 1px;
    background-color: #595757;

    @media (max-width: 768px) {
      width: 18vw;
    }
  }

  .box5 .contens .title-group .image02+.class::before,
  .box5 .contens .title-group .image01+.class::before {
    right: 100%;
  }

  .box5 .contens .title-group .image02+.class::after,
  .box5 .contens .title-group .image01+.class::after {
    left: 100%;
  }




  .box5 .contens .detail-group {
    width: 100%;
    margin: 60px auto 0 auto;
    display: flex;
  }

  @media (max-width: 768px) {
    .box5 .contens .detail-group {
      margin-top: 30px;
      padding: 0 10px;
      flex-direction: column;
    }
  }

  .box5 .contens .detail-group .detail {
    width: 50%;
  }

  @media (max-width: 768px) {
    .box5 .contens .detail-group .detail {
      width: 100%;
    }
  }

  .box5 .contens .detail-group .detail:not(:last-of-type) {
    margin-right: 70px;
  }

  @media (max-width: 768px) {
    .box5 .contens .detail-group .detail:not(:last-of-type) {
      margin-right: 0;
      margin-bottom: 25px;
    }
  }

  .box5 .contens .detail-group .detail .cap {
    display: block;
    margin-bottom: 20px;
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--text-color);
    letter-spacing: .15em;
    line-height: 1;
  }

  @media (max-width: 768px) {
    .box5 .contens .detail-group .detail .cap {
      margin-bottom: 10px;
      font-size: 1.8rem;
    }
  }

  .box5 .contens .detail-group .detail .text {
    display: block;
    color: var(--text-color);
    text-align: justify;
  }

  .box5 .contens .component {
    width: 100%;
    margin: 30px auto 0 auto;
  }

  .box5 .contens .component .cap {
    display: block;
    margin-bottom: 25px;
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--text-color);
    letter-spacing: .15em;
    line-height: 1;
  }

  @media (max-width: 768px) {
    .box5 .contens .component .cap {
      margin-bottom: 15px;
      padding-left: 10px;
      font-size: 1.8rem;
    }
  }

  .box5 .contens .component .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
  }

  .box5 .contens .component .table thead th,
  .box5 .contens .component .table tbody th,
  .box5 .contens .component .table tbody td {
    padding: 8px 15px;
    color: var(--text-color);
    text-align: center;
  }

  @media (max-width: 768px) {

    .box5 .contens .component .table thead th,
    .box5 .contens .component .table tbody th,
    .box5 .contens .component .table tbody td {
      padding: 8px 10px;
    }
  }

  .box5 .contens .component .table thead th {
    font-weight: 500;
  }

  .box5 .contens:nth-of-type(1) .component .table thead th {
    background-color: #bfe8cf;
  }

  .box5 .contens:nth-of-type(2) .component .table thead th {
    background-color: #b2cdf8;
  }

  .box5 .contens:nth-of-type(3) .component .table thead th {
    background-color: #cdedff;
  }

  .box5 .contens .component .table thead th:first-of-type {
    width: 32.548%;
    color: #fff;
  }

  .box5 .contens:nth-of-type(1) .component .table thead th:first-of-type {
    background-color: var(--color-green);
  }

  .box5 .contens:nth-of-type(2) .component .table thead th:first-of-type {
    background-color: var(--color-blue);
  }

  .box5 .contens:nth-of-type(3) .component .table thead th:first-of-type {
    background-color: var(--color-lightblue);
  }

  @media (max-width: 768px) {
    .box5 .contens .component .table thead th:first-of-type {
      width: 100%;
    }
  }

  .box5 .contens .component .table thead th:nth-of-type(2) {
    width: 21.585%;
  }

  .box5 .contens .component .table thead th:nth-of-type(3) {
    width: 46%;
  }

  .box5 .contens .component .table tbody th {
    font-size: 1.8rem;
    font-weight: 500;
  }

  .box5 .contens:nth-of-type(1) .component .table tbody th {
    background-color: #dff3e7;
  }

  .box5 .contens:nth-of-type(2) .component .table tbody th {
    background-color: #d9e6fb;
  }

  .box5 .contens:nth-of-type(3) .component .table tbody th {
    background-color: #e6f6ff;
  }

  @media (max-width: 768px) {
    .box5 .contens .component .table tbody th {
      margin-bottom: 2px;
      font-size: 1.6rem;
    }
  }

  .box5 .contens:nth-of-type(1) .component .table tbody td {
    background-color: #f4fbf7;
  }

  .box5 .contens:nth-of-type(2) .component .table tbody td {
    background-color: #f2f7fe;
  }

  .box5 .contens:nth-of-type(3) .component .table tbody td {
    background-color: #eef9ff;
  }

  .box5 .contens .component .table tbody td:last-of-type {
    text-align: justify;
  }

  @media (max-width: 768px) {
    .box5 .contens .component .table tr {
      display: flex;
      flex-direction: column;
    }

    .box5 .contens .component .table thead th:not(:first-of-type) {
      display: none;
    }

    .box5 .contens .component .table tbody td {
      margin-bottom: 2px;
      padding-left: 92px;
      position: relative;
    }

    .box5 .contens .component .table tbody td::before {
      content: attr(aria-label);
      position: absolute;
      top: 0%;
      left: 0%;
      width: 80px;
      height: 100%;
      color: var(--text-color);
      font-size: 1.6rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .1em;
      white-space: pre;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .box5 .contens:nth-of-type(1) .component .table tbody td::before {
      background-color: #bfe8cf;
    }

    .box5 .contens:nth-of-type(2) .component .table tbody td::before {
      background-color: #b2cdf8;
    }

    .box5 .contens:nth-of-type(3) .component .table tbody td::before {
      background-color: #cdedff;
    }
  }

  .box5 .contens .additive {
    width: 100%;
    margin: 25px auto 0;
    color: var(--text-color);
  }

  @media (max-width: 768px) {
    .box5 .contens .additive {
      margin-top: 10px;
    }
  }

  .box5 .contens .additive .name {
    padding: 8px 15px;
    font-weight: 500;
    letter-spacing: .15em;
    text-align: center;
  }

  .box5 .contens:nth-of-type(1) .additive .name {
    background-color: #bfe8cf;
  }

  .box5 .contens:nth-of-type(2) .additive .name {
    background-color: #b2cdf8;
  }

  .box5 .contens:nth-of-type(3) .additive .name {
    background-color: #cdedff;
  }

  .box5 .contens .additive .text {
    margin-top: 2px;
    padding: 12px 15px;
  }

  .box5 .contens:nth-of-type(1) .additive .text {
    background-color: #f4fbf7;
  }

  .box5 .contens:nth-of-type(2) .additive .text {
    background-color: #f2f7fe;
  }

  .box5 .contens:nth-of-type(3) .additive .text {
    background-color: #eef9ff;
  }

  @media (max-width: 768px) {
    .box5 .contens .additive .text {
      padding: 12px 20px;
    }
  }

  .box5 .contens .notes {
    margin-top: 20px;
    font-size: 1.4rem;
    text-align: center;
    color: var(--text-color);
  }

  @media (max-width: 768px) {
    .box5 .contens .notes {
      margin-top: 15px;
      padding: 0 10px;
      text-align: justify;
    }
  }

  .box5 .contens .btn-pdf {
    width: 360px;
    height: 64px;
    margin: 60px auto 0 auto;
    background-color: #fff;
    border: 1px solid;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: .15em;
    line-height: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 300ms 0s ease;
  }

  @media (max-width: 768px) {
    .box5 .contens .btn-pdf {
      width: 300px;
      margin-top: 25px;
      font-size: 1.6rem;
      text-align: center;
      line-height: 1.4;
    }
  }

  .box5 .contens:nth-of-type(1) .btn-pdf {
    border-color: var(--color-green);
  }

  .box5 .contens:nth-of-type(2) .btn-pdf {
    border-color: var(--color-blue);
  }

  .box5 .contens:nth-of-type(3) .btn-pdf {
    border-color: var(--color-lightblue);
  }

  @media (min-width: 769px) {
    .box5 .contens .btn-pdf:hover {
      color: #fff;
    }
  }

  .box5 .contens .btn-pdf::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    transition: background 300ms 0s ease;
  }

  .box5 .contens:nth-of-type(1) .btn-pdf::after {
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-green.svg) no-repeat;
    background-size: contain;
  }

  .box5 .contens:nth-of-type(2) .btn-pdf::after {
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-blue.svg) no-repeat;
    background-size: contain;
  }

  .box5 .contens:nth-of-type(3) .btn-pdf::after {
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-lightblue.svg) no-repeat;
    background-size: contain;
  }

  @media (min-width: 769px) {
    .box5 .contens .btn-pdf:hover::after {
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-white.svg)no-repeat;
      background-size: contain;
    }

    .box5 .contens:nth-of-type(1) .btn-pdf:hover {
      background-color: var(--color-green);
    }

    .box5 .contens:nth-of-type(2) .btn-pdf:hover {
      background-color: var(--color-blue);
    }

    .box5 .contens:nth-of-type(3) .btn-pdf:hover {
      background-color: var(--color-lightblue);
    }
  }

  .box5 .contens .btn-link-other {
    max-width: 740px;
    height: 100px;
    margin: 65px auto 0;
    font-size: 2.4rem;
    color: #fff;
    letter-spacing: .08em;
    border: 1px solid transparent;
    display: grid;
    place-content: center;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 300ms 0s ease;
  }

  @media (max-width: 768px) {
    .box5 .contens .btn-link-other {
      width: 300px;
      height: 72px;
      margin-top: 20px;
      font-size: 1.8rem;
      letter-spacing: .15em;
    }
  }

  .box5 .contens:nth-of-type(1) .btn-link-other {
    background-color: var(--color-green);
  }

  .box5 .contens:nth-of-type(2) .btn-link-other {
    background-color: var(--color-blue);
  }

  .box5 .contens:nth-of-type(3) .btn-link-other {
    background-color: var(--color-lightblue);
  }

  @media (min-width: 769px) {
    .box5 .contens .btn-link-other:hover {
      color: var(--text-color);
      background-color: #fff;
    }

    .box5 .contens:nth-of-type(1) .btn-link-other:hover {
      border-color: var(--color-green);
    }

    .box5 .contens:nth-of-type(2) .btn-link-other:hover {
      border-color: var(--color-blue);
    }

    .box5 .contens:nth-of-type(3) .btn-link-other:hover {
      border-color: var(--color-lightblue);
    }
  }

  .box5 .contens .btn-link-other::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-white.svg)no-repeat;
    transition: background 300ms 0s ease;
  }

  @media (min-width: 769px) {
    .box5 .contens:nth-of-type(1) .btn-link-other:hover::after {
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-green.svg)no-repeat;
    }

    .box5 .contens:nth-of-type(2) .btn-link-other:hover::after {
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-blue.svg)no-repeat;
    }

    .box5 .contens:nth-of-type(3) .btn-link-other:hover::after {
      background: url(https://hc.kowa.co.jp/livimex/assets/img/top/otherbtn-icon-lightblue.svg)no-repeat;
    }
  }

  @media (max-width: 768px) {
    .box5 .contens .btn-link-other::after {
      right: 20px;
    }
  }

  .box5 .contens .ribbon {
    position: absolute;
    top: 40px;
    right: 4%;
    width: 14%;
    aspect-ratio: 1/1;
    border-radius: 70px;
    font-size: 1.8rem;
    font-size: clamp(1.6rem, 18/1280*100vw, 1.8rem);
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;
  }

  @media (max-width: 768px) {
    .box5 .contens .ribbon {
      position: relative;
      top: 0;
      right: 0;
      width: 200px;
      height: 40px;
      margin: 30px auto 0;
      border-radius: 20px;
      aspect-ratio: auto;
      font-size: 1.6rem;
    }
  }

  .box5 .contens:nth-of-type(1) .ribbon {
    background-color: var(--color-green);
  }

  .box5 .contens:nth-of-type(2) .ribbon {
    background-color: var(--color-blue);
  }

  .box5 .contens:nth-of-type(3) .ribbon {
    background-color: var(--color-lightblue);
  }

  /* ↑↑↑ box5 ↑↑↑ */

  /* ↓↓↓ box6 ↓↓↓ */
  .box6 {
    width: 100%;
    margin-top: 100px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box6 {
      margin-top: 75px;
    }

    .box6 .subeng {
      margin-top: 5px;
    }
  }

  .box6 .bg1 {
    position: absolute;
    top: 3.5%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box6 .bg1 {
      top: 3%;
    }
  }

  .box6 .bg2 {
    position: absolute;
    top: 53%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box6 .bg2 {
      top: 52%;
    }
  }

  .box6 .howtouse-title1 {
    width: 560px;
    margin: 100px auto 0;

    @media (max-width: 768px) {
      width: 276px;
      margin: 50px auto 0;
    }
  }

  .box6 .howtouse-title2 {
    width: 500px;
    margin: 100px auto 0;

    @media (max-width: 768px) {
      width: 276px;
      margin: 50px auto 0;
    }
  }

  .box6 .howtouse-image1 {
    width: 630px;
    margin: 45px auto 40px;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));

    @media (max-width: 768px) {
      width: 100%;
      margin: 25px auto 30px;
    }
  }

  .box6 .howtouse-image2 {
    width: 200px;
    margin: 50px auto 40px;
    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.1));

    @media (max-width: 768px) {
      width: 120px;
      margin: 25px auto 30px;
    }
  }

  .box6 .houtouse {
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
  }

  .box6 .houtouse+.houtouse {
    margin-top: 80px;
  }

  @media (max-width: 768px) {
    .box6 .houtouse+.houtouse {
      margin-top: 95px;
    }
  }

  .box6 .houtouse:nth-of-type(2) {
    margin-top: 100px;
  }

  .box6 .houtouse:nth-of-type(3) {
    margin-top: 80px;
  }

  @media (max-width: 768px) {
    .box6 .houtouse:nth-of-type(2) {
      margin-top: 50px;
    }

    .box6 .houtouse:nth-of-type(3) {
      margin-top: 100px;
    }
  }

  .box6 .houtouse .ttl {
    width: fit-content;
    height: 64px;
    padding: 0 60px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    border-radius: 32px;
    letter-spacing: .15em;
    font-weight: bold;
    color: var(--text-color);
    display: grid;
    place-content: center;
    font-size: 22px;
  }
  
  @media (max-width: 768px) {
    .box6 .houtouse .ttl {
      height: 45px;
      padding: 0 20px;
      font-size: 18px !important;
      letter-spacing: 2.2px;
    }
    .box6 .houtouse .ttl span {
      font-size: 18px!important;
    }

    .box6 .houtouse .ttl.-type2 {
      padding: 0 40px;
    }
  }

  .box6 .houtouse .ttl.-type2 {
    color: var(--color-lightblue);
  }

  .box6 .houtouse .ttl span {
    display: contents;
  }

  .box6 .houtouse .-green {
    color: var(--color-green);
  }

  .box6 .houtouse .-blue {
    color: var(--color-blue);
  }

  .box6 .houtouse .-lightblue {
    color: var(--color-lightblue);
  }

  .box6 .houtouse .list {
    margin: 55px auto 0;
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 768px) {
    .box6 .houtouse .list {
      margin-top: 40px;
      flex-direction: column;
    }
  }

  .box6 .houtouse .list .item {
    width: 21.4286%;
    position: relative;
  }

  @media (max-width: 768px) {
    .box6 .houtouse .list .item {
      width: 100%;
      margin-bottom: 40px;
      background-color: #fff;
    }

    .box6 .houtouse .list .item:not(:last-of-type)::after {
      content: '';
      position: absolute;
      top: 103.5%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 11px 0 11px;
    }

    .box6 .houtouse .list.-color1 .item:not(:last-of-type)::after {
      border-color: var(--color-blue) transparent transparent transparent;
    }

    .box6 .houtouse .list.-color2 .item::after {
      border-color: var(--color-lightblue) transparent transparent transparent;
    }

    .box6 .houtouse .list .item:last-of-type {
      margin-bottom: 0;
    }
  }

  .box6 .houtouse .list .item .image {
    display: block;
    position: relative;
  }

  .box6 .houtouse .list .item:not(:last-of-type) .image::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -16%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
  }

  @media (max-width: 768px) {
    .box6 .houtouse .list .item:not(:last-of-type) .image::after {
      display: none;
    }
  }

  .box6 .houtouse .list.-color1 .item:not(:last-of-type) .image::after {
    border-color: transparent transparent transparent var(--color-blue);
  }

  .box6 .houtouse .list.-color2 .item:not(:last-of-type) .image::after {
    border-color: transparent transparent transparent var(--color-lightblue);
  }

  .box6 .houtouse .list .item .text {
    margin-top: 20px;
    font-weight: 500;
    color: var(--text-color);
    text-align: justify;
  }

  @media (max-width: 768px) {
    .box6 .houtouse .list .item .text {
      padding: 0 25px 25px;
    }

    .box6 .houtouse .list .item .text.-center {
      text-align: center;
    }
  }

  /* ↑↑↑ box6 ↑↑↑ */

  /* ↓↓↓ box7 ↓↓↓ */
  .box7 {
    width: 100%;
    margin-top: 120px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box7 {
      margin-top: 50px;
      padding: 0 10px;
    }
  }

  .box7 .bg1 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box7 .bg1 {
      top: -80px;
    }
  }

  .box7 .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 8.131% 75px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/box7-bg.jpg)repeat;
    background-position: top left;
    position: relative;
  }

  @media (max-width: 768px) {
    .box7 .inner {
      padding: 35px 15px 55px;
    }
  }

  .box7 .icon {
    width: 50px;
    margin: 0 auto;
    display: block;
  }

  @media (max-width: 768px) {
    .box7 .icon {
      width: 32px;
    }
  }

  .box7 .read {
    margin-top: 25px;
    margin-bottom: 40px;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-align: center;
    color: var(--text-color);
  }

  .box7 .read .small {
    display: block;
    margin-top: 5px;
    font-size: 1.6rem;
    letter-spacing: .075em;
  }

  @media (max-width: 768px) {
    .box7 .read {
      margin-top: 10px;
      margin-bottom: 30px;
      font-size: 2.4rem;
      line-height: 1.4;
    }

    .box7 .read .small {
      margin-top: 15px;
      text-align: left;
      line-height: 1.8;
    }
  }

  .box9 .explanation,
  .box7 .explanation {
    margin-bottom: 25px;
  }

  @media (max-width: 768px) {

    .box9 .explanation,
    .box7 .explanation {
      margin-bottom: 20px;
    }
  }

  .box9 .explanation:last-of-type {
    margin-bottom: 0;
  }

  .box9 .explanation .caption,
  .box7 .explanation .caption {
    width: 100%;
    padding: 13px 55px 12px 25px;
    border: 1px solid #bdbcbc;
    background-color: #fff;
    position: relative;
    cursor: pointer;
  }

  @media (max-width: 768px) {

    .box9 .explanation .caption,
    .box7 .explanation .caption {
      padding: 11px 48px 10px 10px;
    }
  }

  .box9 .explanation .caption p,
  .box7 .explanation .caption .text {
    padding-right: 1em;
    font-size: 1.8rem !important;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-green);
    padding-left: 1em;
    text-indent: -.8em;
  }

  .box7 .explanation .caption .text {
    padding-left: 0;
    text-indent: 0;
    display: flex;
  }

  .box9 .explanation .caption .mark,
  .box7 .explanation .caption .mark {
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 100%;
    background-color: var(--color-green);
  }

  @media (max-width: 768px) {

    .box9 .explanation .caption .mark,
    .box7 .explanation .caption .mark {
      width: 48px;
    }
  }

  .box9 .explanation .caption .mark::before,
  .box7 .explanation .caption .mark::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 8px);
    width: 16px;
    height: 2px;
    background-color: #fff;
    transition: transform 300ms 0s ease;
  }

  .box9 .explanation.is-open .caption .mark::before,
  .box7 .explanation.is-open .caption .mark::before {
    transform: rotate(360deg);
  }

  .box9 .explanation .caption .mark::after,
  .box7 .explanation .caption .mark::after {
    content: '';
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 1px);
    width: 2px;
    height: 16px;
    background-color: #fff;
    transition: transform 300ms 0s ease;
  }

  .box9 .explanation.is-open .caption .mark::after,
  .box7 .explanation.is-open .caption .mark::after {
    transform: rotate(270deg);
  }

  .box9 .explanation .wrap,
  .box7 .explanation .wrap {
    padding: 25px 25px 10px;
    display: none;
  }

  @media (max-width: 768px) {

    .box9 .explanation .wrap,
    .box7 .explanation .wrap {
      padding: 20px 0;
    }

    .box7 .explanation:last-of-type .wrap {
      padding-bottom: 0;
    }
  }

  .box9 .explanation .wrap .text,
  .box7 .explanation .wrap .text {
    font-weight: 500;
    line-height: 2;
    text-align: justify;
    color: var(--text-color);
    text-indent: -1em;
    padding-left: 1em;
  }

  .box7 .explanation .wrap .text.note {
    font-size: 1.4rem;
  }

  .box7 .explanation .image-group1 {
    margin: 15px auto;
    display: flex;
    align-items: center;
  }

  @media (max-width: 768px) {
    .box7 .explanation .image-group1 {
      margin: 25px auto;
      flex-direction: column;
    }
  }

  .box7 .explanation .image-group1 .image {
    width: 220px;
    margin-right: 30px;
  }

  @media (max-width: 768px) {
    .box7 .explanation .image-group1 .image {
      margin-top: 20px;
      margin-right: 0;
      order: 2;
    }
  }

  .box7 .explanation .image-group1 .group {
    flex: 1;
    font-weight: 500;
    color: var(--text-color);
  }

  @media (max-width: 768px) {
    .box7 .explanation .image-group1 .group {
      order: 1;
    }
  }

  .box7 .explanation .image-group1 .group .cap {
    font-size: 2.0rem;
  }

  @media (max-width: 768px) {
    .box7 .explanation .image-group1 .group .cap {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  .box7 .explanation .image-group1 .group .cap b {
    font-weight: bold;
    color: var(--color-green);
  }

  .box7 .explanation .image-group1 .group .txt {
    margin-top: 15px;
    line-height: 2;
    text-align: justify;
  }

  @media (max-width: 768px) {
    .box7 .explanation .image-group1 .group .txt {
      margin-top: 5px;
    }
  }

  .box7 .explanation .wrap .list {
    padding: 0 1em;
    font-weight: 500;
    line-height: 2;
    text-align: justify;
    color: var(--text-color);
  }

  .box7 .explanation .wrap .list li {
    padding-left: 1em;
    text-indent: -1em;
  }

  /* ↑↑↑ box7 ↑↑↑ */

  /* ↓↓↓ box8 ↓↓↓ */
  .box8 {
    width: 100%;
    margin-top: 140px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box8 {
      margin-top: 80px;
      padding: 0 10px;
    }
  }

  .box8 .group {
    margin-top: 85px;
  }

  @media (max-width: 768px) {
    .box8 .group {
      margin-top: 40px;
    }
  }

  .box8 .group .text {
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    line-height: 2;
  }

  @media (max-width: 768px) {
    .box8 .group .text {
      padding: 0 15px;
      text-align: justify;
    }
  }

  .box8 .caption {
    display: block;
    width: fit-content;
    margin: 50px auto 0;
    padding: 0 80px;
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    position: relative;
  }

  @media (max-width: 768px) {
    .box8 .caption {
      margin-top: 30px;
      padding: 0 45px;
    }
  }

  .box8 .caption::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 7%;
    transform-origin: bottom center;
    transform: rotate(-30deg);
    width: 2px;
    height: 50px;
    background-color: var(--color-green);
  }

  .box8 .caption::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 7%;
    transform-origin: bottom center;
    transform: rotate(30deg);
    width: 2px;
    height: 50px;
    background-color: var(--color-green);
  }

  .box8 .movie {
    max-width: 990px;
    margin: 20px auto 0;
  }

  .box8 .movie iframe {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    aspect-ratio: 16/9;
    display: block;
  }

  /* ↑↑↑ box8 ↑↑↑ */

  /* ↓↓↓ box9 ↓↓↓ */
  .box9 {
    width: 100%;
    margin-top: 140px;
    padding: 60px 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box9 {
      margin-top: 10px;
      padding: 50px 10px;
    }

    .box9 .subeng {
      margin-top: 5px;
    }
  }

  .box9 .bg1 {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box9 .bg1 {
      top: -60px;
    }
  }

  .box9 .bg2 {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box9 .bg2 {
      bottom: 100px;
    }
  }

  .box9 .inner {
    max-width: 900px;
    margin: 100px auto 0;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box9 .inner {
      margin-top: 35px;
    }
  }

  .box9 .explanation .caption {
    border: none;
  }

  .box9 .explanation .caption p {
    font-weight: 400;
    color: var(--text-color);
    position: relative;
    padding-left: 2em;
    text-indent: -2em;
  }

  @media (max-width: 768px) {
    .box9 .explanation .caption p {
      padding-right: .5em;
      padding-left: 1.7em;
      text-indent: -1.7em;
      text-align: justify;
    }
  }

  .box9 .explanation .caption p::before {
    content: 'Q.';
    padding-right: .5em;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-lightblue);
  }

  @media (max-width: 768px) {
    .box9 .explanation .caption p::before {
      padding-right: .2em;
    }
  }

  .box9 .explanation .wrap {
    padding: 25px 30px 10px 60px;
  }

  @media (max-width: 768px) {
    .box9 .explanation .wrap {
      padding: 15px 20px 10px 20px;
    }
  }

  .box9 .explanation .wrap .text {
    text-indent: 0;
    padding-left: 0;
  }

  .box9 .explanation .wrap .text+.text {
    margin-top: 1em;
  }

  .box7 .explanation .wrap .text sup,
  .box9 .explanation .wrap .text sup {
    font-size: 0.6em;
  }

  .box9 .explanation .wrap .text.note {
    font-size: 1.4rem;
  }

  .box9 .explanation .wrap figure {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
  }

  @media (max-width: 768px) {
    .box9 .explanation .wrap .image1 {
      width: 260px;
      margin-top: 15px;
    }

    .box9 .explanation .wrap .image2 {
      width: calc(100% + 15px);
      margin-top: 15px;
      transform: translateX(-7px);
    }

    .box9 .explanation .wrap .image3 {
      width: 100%;
      max-width: 300px;
      margin-top: 15px;
    }
  }

  .box9 .explanation .wrap .list {
    margin: 1em auto;
    font-weight: 500;
    line-height: 2;
    text-align: justify;
    color: var(--text-color);
    text-indent: -.5em;
    padding-left: .5em;
  }

  /* ↑↑↑ box9 ↑↑↑ */

  /* ↓↓↓ box10 ↓↓↓ */
  .box10 {
    width: 100%;
    margin-top: 120px;
    padding: 0 25px;
    position: relative;
  }

  @media (max-width: 768px) {
    .box10 {
      margin-top: 80px;
    }

    .box10 .subeng {
      margin-top: 5px;
    }
  }

  .box10 .bg1 {
    position: absolute;
    top: -17%;
    left: 0;
    width: 100%;
  }

  @media (max-width: 768px) {
    .box10 .bg1 {
      top: -9%;
    }
  }

  .box10 .inner {
    max-width: 912px;
    margin: 95px auto 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .box10 .inner {
      margin-top: 40px;
      flex-direction: column;
    }
  }

  .box10 .pagelink {
    width: 47.37%;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 768px) {
    .box10 .pagelink {
      width: 100%;
    }

    .box10 .pagelink:not(:last-of-type) {
      margin-bottom: 15px;
    }
  }

  .box10 .pagelink .image {
    width: 100%;
  }

  .box10 .pagelink .group {
    flex: 1;
    padding: 20px 10.42% 40px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 768px) {
    .box10 .pagelink .group {
      padding: 20px 20px 40px;
    }
  }

  .box10 .pagelink .group .date {
    display: block;
    font-weight: 500;
    line-height: 1;
    color: var(--color-green);
  }

  .box10 .pagelink .group .title {
    margin-top: 12px;
    margin-bottom: 45px;
    font-size: clamp(2rem, 28/1280*100vw, 2.8rem);
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: .1em;
    text-align: justify;
  }

  @media (max-width: 768px) {
    .box10 .pagelink .group .title {
      margin-bottom: 30px;
      font-size: 2.2rem;
    }
  }

  .box10 .pagelink .group .btn {
    width: 250px;
    height: 64px;
    margin: auto auto 0;
    font-weight: 500;
    color: var(--text-color);
    display: grid;
    place-content: center;
    background: linear-gradient(90deg, rgba(214, 236, 219, 1) 0%, rgba(182, 229, 247, 1) 100%);
    border: 1px solid #fff;
    position: relative;
  }

  .box10 .pagelink .group .btn span {
    position: relative;
  }

  .box10 .pagelink .group .btn::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 300ms 0s ease;
  }

  @media (min-width: 769px) {
    .box10 .pagelink:hover .group .btn::before {
      background-color: rgba(255, 255, 255, 1);
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .box10 .pagelink .group .btn::after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 8%;
    width: 10px;
    height: 13px;
    background: url(https://hc.kowa.co.jp/livimex/assets/img/top/pagelink-arrow.svg)no-repeat;
    transition: transform 300ms 0s ease;
  }

  @media (min-width: 769px) {
    .box10 .pagelink:hover .group .btn::after {
      transform: translateX(5px);
    }
  }

  /* ↑↑↑ box10 ↑↑↑ */

  /* ↓↓↓ other-links ↓↓↓ */
  .other-links {
    width: 100%;
    margin-top: 80px;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      margin-top: 40px;
    }
  }

  .other-links .inner {
    max-width: 1119px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: flex-start;
    gap: min(35px, 3.1277926720285967vw);
    container-type: inline-size;

    @media (max-width: 768px) {
      grid-template-columns: repeat(1, auto);
      gap: 20px;
    }
  }

  .other-links .inner .link {
    width: 31.27792672028597cqw;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-items: flex-start;
    background-color: #fff;
    gap: 0;

    @media (max-width: 768px) {
      width: 100%;
    }

    .date {
      padding: 2.1447721179624666cqw 2.1447721179624666cqw 0 2.1447721179624666cqw;
      font-size: 1.4298480786416443cqw;
      font-weight: 500;
      line-height: 1;
      color: var(--color-green);

      @media (max-width: 768px) {
        padding: 24px 24px 0 24px;
        font-size: 1.6rem;
      }
    }

    .title {
      padding: 1.4298480786416443cqw 2.1447721179624666cqw 0 2.1447721179624666cqw;
      font-size: 1.7873100983020553cqw;
      font-weight: 500;
      line-height: 1.6;
      text-align: justify;
      word-break: break-all;
      /* letter-spacing: 0.04em; */
      color: #595757;

      @media (max-width: 768px) {
        padding: 16px 24px 0 24px;
        font-size: 1.8rem;
      }
    }

    .btn {
      width: 22.34137622877569cqw;
      aspect-ratio: 250/64;
      margin: 4.289544235924933cqw auto 1.4298480786416443cqw;
      font-size: 1.4298480786416443cqw;
      font-weight: 500;
      color: var(--text-color);
      background: linear-gradient(90deg, rgba(214, 236, 219, 1) 0%, rgba(182, 229, 247, 1) 100%);
      border: 1px solid #fff;
      display: grid;
      place-content: center;
      position: relative;

      @media (max-width: 768px) {
        width: 250px;
        margin: 30px auto 16px;
        font-size: 1.6rem;
      }

      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background-color: rgba(255, 255, 255, 0);
        transition: background-color 300ms 0s ease;
      }

      &::after {
        content: '';
        position: absolute;
        top: calc(50% - 6px);
        right: 8%;
        width: 0.8936550491510277cqw;
        aspect-ratio: 10/13;
        background: url(https://hc.kowa.co.jp/livimex/assets/img/top/pagelink-arrow.svg) no-repeat;
        transition: transform 300ms 0s ease;

        @media (max-width: 768px) {
          width: 10px;
        }
      }

      span {
        position: relative;
      }
    }
  }

  @media (min-width: 769px) {
    .other-links .inner .link:hover {
      .btn {
        &::before {
          background-color: rgba(255, 255, 255, 1);
        }

        &::after {
          transform: translateX(5px);
        }
      }
    }
  }

  /* ↑↑↑ other-links ↑↑↑ */


  .box9 .explanation.is-open .wrap,
  .box7 .explanation.is-open .wrap {
    display: block;
  }
}
@media (max-width: 768px) {
  .modal-header span{
    font-size: 14px;
  }
  .modal-body p{
    font-size: 14px;
  }
  .btn.btn-primary, .btn.btn-secondary{
    font-size: 14px;
  }
  .page-goods .slick-counter, .page-goods .slick-counter span{
    font-size: 14px;
  }
  .page-goods a.block-contact-about-goods--btn{
    font-size: 14px;
  }
}