@charset "UTF-8";


html {
  scroll-padding-top: calc(130 / 375 * 100vw);
}

.pc_only {
  display: none;
}


.header {
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2001;

  .first-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: calc(57 / 375 * 100vw);
    padding-inline: calc(23 / 375 * 100vw);
    margin: 0 auto;
    background-color: #fff;
    border-bottom: 1px solid var(--color-gray);

    .logo {
      display: block;
      width: calc(213 / 375 * 100vw);
      height: auto
    }
  }
}

.hamburger {
  all: unset;
  display: block;
  width: calc(29 / 375 * 100vw);
  height: auto;
  cursor: pointer;

  .btn_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: calc(8 / 375 * 100vw);
    width: 100%;
    height: calc(22 / 375 * 100vw);
    position: relative;
    transition: rotate .4s;

    .bar {
      display: block;
      width: 100%;
      height: calc(2 / 375 * 100vw);
      background-color: #272336;
      transition: .1s linear;
      transform-origin: center;
    }
    .bar:nth-child(1) {
      translate: 0 0;

      .open & {
        rotate: 45deg;
        translate: 0 calc(10 / 375 * 100vw);
      }
    }
    .bar:nth-child(2) {
      opacity: 1;

      .open & {
        opacity: 0;
      }
    }
    .bar:nth-child(3) {
      translate: 0 0;

      .open & {
        rotate: -45deg;
        translate: 0 calc(-10 / 375 * 100vw);
      }
    }
  }
}
.second-header {
  display: block;
  width: 100%;
  padding-inline: calc(22.5 / 375 * 100vw);
  background-color: #fff;

  nav {
    display: block;
    width: 100%;
    height: auto;
  }
  .nav-inner {
    display: grid;
    grid-template-rows: minmax(0 , 0fr);
    transition: grid-template-rows .3s ease;
    overflow: hidden;

    ul {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: reeat(auto-fill, calc(92/ 750 * 100vw));

      li {
        display: block;
        width: 100%;
        height: calc(92 / 375 * 100vw);
        position: relative;
        border-bottom: 1px solid #fff;

        &::after {
          content: '';
          display: block;
          width: calc(11 / 375 * 100vw);
          height: calc(11 / 375 * 100vw);
          border: 1px solid transparent;
          border-top-color: #fff;
          border-right-color: #fff;
          position: absolute;
          right: calc(20 / 375 * 100vw);
          top: 50%;
          transform: translateY(-50%);
          rotate: 45deg;
        }

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          font-weight: 500;
          font-size: calc(21 / 375 * 100vw);
          color: #fff;
        }
      }
    }
  }
  .banners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(65 / 375 * 100vw);

    .bnnr,
    .bttn {
      display: block;
      width: calc(157 / 375 * 100vw);
      height: calc(41 / 375 * 100vw);

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        font-weight: 700;
        font-size: calc(12.4 / 375 * 100vw);

        .bnnr & {
          background-color: var(--color-orange);
          color: var(--color-blue)
        }
        .bttn & {
          background-color: var(--color-red);
          color: #fff;
        }
      }
    }
  }
}
.open .second-header {
  height: 100dvh;
  overflow-y: scroll;
  background-color: var(--color-blue);
  padding-bottom: calc(100 / 375 * 100vw);

  .nav-inner {
    grid-template-rows: minmax(0, 1fr);
  }
  .banners {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    row-gap: calc(15 / 375 * 100vw);
    height: auto;
    padding-block: calc(45 / 375 * 100vw) 0;

    .bnnr,
    .bttn {
      display: block;
      width: 100%;
      height: calc(68 / 375 * 100vw);

      a {
        font-size: calc(20/ 375 * 100vw);
      }
    }
  }
}

main {
  padding-top: calc(117 / 375 * 100vw);
}

.mv-area {
  display: block;
  width: 100%;
  position: relative;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center top;
    object-fit: contain;
  }

  .bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .mv-inner {
    padding-top: calc(221 / 375 * 100vw);

    .titles {
      padding-block: calc(110 / 375 * 100vw) calc(27 / 375 * 100vw);
      padding-left: calc(22/ 375 * 100vw);
      background-color: var(--color-blue);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 20%);

      hgroup {
        font-size: calc(14 / 375 * 100vw);
      }

      h1 {
        margin-block: 0;
        font-size: calc(14 / 375 * 100vw);

        .ttl-1 {
          display: inline-block;
          margin-bottom: calc(15 / 375 * 100vw);
          font-weight: 700;
          color: var(--color-orange);
        }
        .ttl-2 {
          display: inline-block;
          font-weight: 700;
          font-size: calc(27 / 375 * 100vw);
          line-height: 1.5740740740740742;
          color: #fff;
          margin-bottom: calc(23 / 375 * 100vw);
  
          .mark {
            display: inline-block;
            font-weight: 700;
            color: var(--color-blue);
            position: relative;
            margin-right: .5em;
            z-index: 0;
  
            &::before {
              content: '';
              display: inline-block;
              line-height: 1;
              position: absolute;
              left: -.25em;
              top: 50%;
              translate: 0 -46%;
              width: calc(100% + .5em);
              height: 90%;
              background-color: #fff;
              z-index: -1;
            }
          }
        }
      }
      .lead {
        display: block;
        font-weight: 500;
        font-size: calc(14 / 375 * 100vw);
        line-height: 2;
        color: #fff;
        margin-bottom: calc(23 / 375 * 100vw);
        padding-right: calc(22 / 375 * 100vw);
  
        em {
          color: var(--color-orange);
        }
      }
      .bttn {
        display: block;
        width: calc(199 / 375 * 100vw);
        height: calc(55 / 375 * 100vw);
        
        a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: var(--color-orange);
          color: var(--color-blue);
          border-radius: 200px;
          font-weight: 700;
          font-size: calc(15 / 375 * 100vw);
          position: relative;
  
          &::after {
            content: '';
            display: inline-block;
            width: calc(8 / 375 * 100vw);
            height: calc(8 / 375 * 100vw);
            border: 1px solid transparent;
            border-top-color: currentColor;
            border-right-color: currentColor;
            rotate: 45deg;
            position: absolute;
            right: calc(17 / 375 * 100vw);
            top: 50%;
            translate: 0 -50%;
          }
        }
      }
    }
    .medal-list {
      display: flex;
      justify-content: space-between;
      padding-inline: calc(22 / 375 * 100vw);
      position: absolute;
      top: calc(192 / 375 * 100vw);
      left: 0;
      width: 100%;
  
      li {
        display: block;
        width: calc(105 / 375 * 100vw);
        height: calc(105 / 375 * 100vw);
      }
    }
  }
  .printer {
    display: block;
    width: calc(127 / 375 * 100vw);
    height: calc(94 / 375 * 100vw);
    position: absolute;
    right: calc(17 / 375 * 100vw);
    bottom: calc(19 / 375 * 100vw);
  }
}


.section-inner {
  padding-inline: calc(22.5 / 375 * 100vw);
}

.section-ttl-set {
  display: flex;
  flex-direction: column;

  .lead {
    font-feature-settings: "palt";
    font-weight: 500;
    font-size: calc(16 / 375 * 100vw);
    line-height: 1.875;
    margin-top: calc(10 / 375 * 100vw);
  }
}
.sec-ttl {
  display: flex;
  flex-direction: column;
  font-feature-settings: "palt";

  .en {
    font-weight: 700;
    font-size: calc(12 / 375 * 100vw);
  }
  .jp {
    font-weight: 700;
    font-size: calc(30 / 375 * 100vw);
    line-height: 1.7575333333333334;
  }
  mark {
    background-color: transparent;
    background-size: calc(10 / 375 * 100vw) calc(3 / 375 * 100vw);
    background-repeat: repeat-x;
    background-position: left bottom;
  }
}

.sec.points {
  padding-top: calc(45 / 375 * 100vw);
  padding-bottom: calc(90 / 375 * 100vw);
  width: 100%;
  background-color: var(--color-blue-light);

  .section-ttl-set {
    margin-bottom: calc(50 / 375 * 100vw);
  }
  .sec-ttl {
    .en {
      color: var(--color-blue);
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-blue);
      background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
      margin-left: .25em;
    }
  }
  .point-list {
    display: flex;
    flex-direction: column;
    row-gap: calc(50 / 375 * 100vw);

    .list-item {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: minmax(auto, calc(110 / 375 * 100vw)) minmax(auto, calc(126 / 375 * 100vw)) auto;
      background-color: #fff;
      border-radius: 0 0 calc(13 / 375 * 100vw) calc(13 / 375 * 100vw);

      .list-ttl-set {
        display: block;
        width: 100%;
        padding-block: 1em;
        background-color: var(--color-blue);
        border-radius: calc(13 / 375 * 100vw) calc(13 / 375 * 100vw) 0 0;
        font-weight: 700;
        text-align: center;
        position: relative;
        z-index: +1;

        &::before {
          content: '';
          display: block;
          width: calc(52  / 375 * 100vw);
          height: calc(52  / 375 * 100vw);
          border-radius: 50%;
          background-color: var(--color-blue);
          position: absolute;
          left: 50%;
          top: calc(-25 / 375 * 100vw);
          translate: -50% 0;
          z-index: -1;
        }
        &::after {
          display: block;
          width: calc(17 / 375 * 100vw);
          height: calc(17 / 375 * 100vw);
          position: absolute;
          top: calc(-17 / 375 * 100vw);
          left: 50%;
          translate: -50% 0;
        }
        .ttl {
          display: inline-block;
          font-size: calc(18/ 375 * 100vw);
          color: var(--color-orange);
          margin-bottom: .25em;
        }
        .lead {
          font-size: calc(16 / 375 * 100vw);
          line-height: 1.5;
          color: #fff;
        }
      }
      &:nth-child(1) .list-ttl-set::after {
        content: url(../images/r-num-1.svg);
      }
      &:nth-child(2) .list-ttl-set::after {
        content: url(../images/r-num-2.svg);
      }
      &:nth-child(3) .list-ttl-set::after {
        content: url(../images/r-num-3.svg);
      }
      &:nth-child(4) .list-ttl-set::after {
        content: url(../images/r-num-4.svg);
      }
      &:nth-child(5) .list-ttl-set::after {
        content: url(../images/r-num-5.svg);
      }
      &:nth-child(6) .list-ttl-set::after {
        content: url(../images/r-num-6.svg);
      }
      .prob {
        display: block;
        padding: 1em 1em 0;
        font-weight: 500;
        font-size: calc(16 / 375 * 100vw);
        letter-spacing: -.02em;
        line-height: 1.625;
        color: var(--color-blue);
      }
      .des-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffe3c4;
        margin: 0 calc(9 / 375 * 100vw) calc(9 / 375 * 100vw);
        border-radius: calc(9 / 375 * 100vw);

        .des-ttl {
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(138 / 375 * 100vw);
          height: calc(38 / 375 * 100vw);
          background-color: var(--color-orange);
          font-weight: 700;
          font-size: calc(16 / 375 * 100vw);
          color: var(--color-blue);
          border-radius: 100px;
          margin-top:calc(-19 / 375 * 100vw);
        }
        .des {
          display: block;
          width: 100%;
          height: auto;
          padding-block: .5em 2em;
          padding-inline: calc(12 / 375 * 100vw);
          font-weight: 500;
          font-size: calc(16 / 375 * 100vw);
          line-height: 1.875;
          text-align: justify;

          small,
          sup {
            font-feature-settings: "palt";
            font-size: calc(11 / 375 * 100vw);
          }
          em {
            font-feature-settings: "palt";
            font-weight: 700;
            font-size: calc(18 / 375 * 100vw);
            color: var(--color-blue);
          }
        }
      }
    }
  }
}

.sec.lineup {
  margin-top: calc(-53 / 375 * 100vw);
  background-color: var(--color-blue);
  clip-path: polygon(0% 0%, 50% calc(53 / 375 * 100vw), 100% 0%, 100% 100%, 0% 100%);
  padding-block: calc(95 / 375 * 100vw) calc(30 / 375 * 100vw);

  .section-inner {
    padding-inline: calc(22.5 / 375 * 100vw) 0;
  }

  .note {
    font-feature-settings: "palt";
    font-size: calc(14 / 375 * 100vw);
    color: #fff;
    margin-top: 1em;
    margin-top: 4em;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.4;

    li + li {
      margin-top: .5em;
    }
    a {
      text-decoration-line: underline;
      text-decoration-color: currentColor;
      color: #aaffff;
    }
  }
  .section-ttl-set {
    margin-bottom: calc(25 / 375 * 100vw);

    .lead {
      color: #fff;
    }
  }
  .sec-ttl {
    .en {
      color: #fff;
    }
    .jp {
      color: var(--color-orange);
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-orange);
      background-image: linear-gradient(to right, var(--color-orange) 50%, transparent 0);
    }
  }

  .specs {
    display: block;
    width: 100%;

    .lineup-list {
      width: calc(330 / 375 * 100vw);
    }

    .list-item {
      border-radius: calc(12 / 375 * 100vw);
      padding-inline: calc(20 / 375 * 100vw);
      padding-block: calc(26 / 375 * 100vw);
      background-color: #fff;

      & + & {
        margin-top: calc(30 / 375 * 100vw);
      }
    }
  }
  .item-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(258 / 375 * 100vw);
    height: calc(52 / 375 * 100vw);
    margin-inline: auto;
    border-radius: 100px;
    background-color: var(--color-orange);
    color: #fff;

    h3 {
      font-weight: 700;
      font-size: calc(18 / 375 * 100vw);
      line-height: 1;
    }
    p {
      font-weight: 700;
      font-size: calc(12 / 375 * 100vw);
      line-height: 1.7
    }
  }
  .two-cols {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    row-gap: calc(18 / 375 * 100vw);
    margin-block: calc(17 / 375 * 100vw);

    .item-1 & .img-box {
      width: calc(201 / 375 * 100vw);
    }
    .item-2 & .img-box {
      width: calc(188 / 375 * 100vw);
    }
    .des-ttl {
      font-feature-settings: "palt";
      font-weight: 700;
      font-size: calc(16 / 375 * 100vw);
      color: var(--color-blue);
      margin-bottom: calc(22 / 375 * 100vw);
      text-align: center;
    }
    .des {
      font-feature-settings: "palt";
      font-weight: 500;
      font-size: calc(16 / 375 * 100vw);
      line-height: 1.625;

      em {
        font-weight: 700;
        font-size: calc(16 / 375 * 100vw);
        color: var(--color-blue);
      }
    }
  }
  .double-table {
    display: flex;
    flex-direction: column;
    row-gap: calc(8 / 375 * 100vw);

    .table-box {
      border: 1px solid var(--color-blue);
      border-radius: calc(4 / 375 * 100vw);
      overflow: hidden;

      .outline-table {
        width: 100%;
        height: 100%;

        .col {
          width: 50%;
        }
        th {
          font-feature-settings: "palt";
          font-weight: 700;
          font-size: calc(15 / 375 * 100vw);
          color: #fff;
          background-color: var(--color-blue);
          text-align: center;
          padding: 0 .2em;
          height: calc(37 / 375 * 100vw);
  
          &:nth-child(even) {
            background-color: #4c70bd;
          }
        }
        td {
          font-weight: 700;
          font-size: calc(15 / 375 * 100vw);
          line-height: 1.4666666666666666;
          text-align: center;
          white-space: nowrap;
          padding-inline: .25em;
          padding-block: .25em;
          color: var(--color-blue);
  
          & + & {
            border-left: 1px solid var(--color-blue);
          }
  
          small {
            font-size: calc(11 / 375 * 100vw);
            color: #000;
          }
          .inch {
            font-feature-settings: "palt";
            font-size: calc(22 / 375 * 100vw);
            color: var(--color-orange);
          }
          .unit {
            font-size: calc(16 / 375 * 100vw);
          }
        }
      }
    }
  }
  .spec-table-area {
    display: block;
    width: 100%;
    margin-top: calc(30 / 375 * 100vw);
    padding-block: calc(20 / 375 * 100vw);
    padding-inline: calc(20 / 375 * 100vw) 0;
    background-color: #fff;
    border-radius: calc(12 / 375 * 100vw) 0 0 calc(12 / 375 * 100vw);
    position: relative;

    &::after {
      content: '横にスワイプで詳細表示';
      display: inline-block;
      font-weight: 700;
      font-size: 18px;
      color: #fff;
      position: absolute;
      top: 100%;
      left: 0;
      padding-top: .5em;
    }

    .caption {
      display: block;
      padding-right: calc(20 / 375 * 100vw);
      font-weight: 700;
      font-size: calc(18 / 375 * 100vw);
      text-align: center;
      margin-bottom: calc(20 / 375 * 100vw);
    }
  }
  .table-container {
    display: block;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    scrollbar-color: red #c8c8c8;

    .caption {
      font-weight: 700;
      font-size: calc(18 / 375 * 100vw);
      text-align: center;
      margin-bottom: calc(20 / 375 * 100vw);
    }
  }
  .spec-table {
    width: calc(964 / 375 * 100vw);
    height: auto;
    font-feature-settings: "palt";
    margin-right: calc(20 / 375 * 100vw);

    .center {
      text-align: center;
    }
    .col1 {
      width: calc(120 / 375 * 100vw);
    }
    .col2 {
      width: calc(146 / 375 * 100vw);
      background-color: #fdf3e9;
    }
    .col3 {
      width: calc(346 / 375 * 100vw);
    }
    th {
      text-align: center;
    }
    td:first-of-type {
      font-weight: 500;
      font-size: calc(14 / 375 * 100vw);
      line-height: 1.4285714285714286;
      text-align: center;
    }
    thead th {
      height: calc(37 / 375 * 100vw);
      background-color: var(--color-blue);
      color: #fff;

      & + & {
        border-left: 2px solid #fff;
        font-weight: 700;
        font-size: calc(14 / 375 * 100vw);
      }
      &:first-of-type {
        background-color: #000;
      }
      &:nth-of-type(2) {
        background-color: var(--color-orange);
      }
    }
    tbody th {
      font-weight: 500;
      font-size: calc(14 / 375 * 100vw);
      line-height: 1.2857142857142858;
      border-bottom: dashed 1px #aeaeae;
      padding-block: .75em;

      small,
      sup {
        font-size: calc(11 / 375 * 100vw);
      }
      sup {
        font-weight: 700;
      }
    }
    tbody td {
      padding-block: .5em;
      font-weight: 500;
      font-size: calc(20 / 375 * 100vw);
      border-bottom: dashed 1px #aeaeae;
      vertical-align: middle;
    }
    .multifunction {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: calc(4 / 375 * 100vw);

      li {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: calc(25 / 375 * 100vw);
        background-color: #e4e4e4;
        font-size: calc(14 / 375 * 100vw );
        padding-inline: 1em;
        border-radius: calc(4 / 375 * 100vw);
      }
    }
    .spec-cols {
      display: grid;
      grid-template-columns: repeat(2, 50%);
      align-items: center;

      small {
        font-size: calc(11 / 375 * 100vw);
        margin-left: .5em;
      }

      .colour {
        padding-left: calc(42 / 375 * 100vw);
        display: inline-flex;
        align-items: center;

        .spectrum {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: calc(132 / 375 * 100vw);
          height: calc(24 / 375 * 100vw);
          background: linear-gradient(90deg, rgba(242, 27, 37, 1) 0%, rgba(248, 155, 28, 1) 17.18%, rgba(243, 208, 16, 1) 31.8%, rgba(56, 183, 67, 1) 45.52%, rgba(0, 179, 215, 1) 62.11%, rgba(21, 94, 170, 1) 80.81%, rgba(68, 43, 127, 1) 100%);
          border-radius: calc(12 / 375 * 100vw);
          font-size: calc(14 / 375 * 100vw);
          color: #fff;
          margin-right: .75em;
        }
      }
      .monochrome {
        display: inline-flex;
        align-items: center;
        padding-left: calc(20 / 375 * 100vw);


        .mono {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: calc(132 / 375 * 100vw);
          height: calc(24 / 375 * 100vw);
          background-color: #000;
          font-size: calc(14 / 375 * 100vw);
          color: #fff;
          border-radius: calc(12 / 375 * 100vw);
          margin-right: .75em;
        }
      }
    }
  }
}

.is-hidden {
  display: none;
}

.sec.case {
  padding-block: calc(30 / 375 * 100vw);

  .section-ttl-set {
    margin-bottom: 50px;
  }
  .sec-ttl {
    .en {
      color: var(--color-blue);
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-blue);
      background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
    }
  }
  .tab-menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: calc(14 / 375 * 100vw);
    row-gap: calc(11 / 375 * 100vw);
    margin-bottom: calc(37/ 375 * 100vw);

    li {
      display: block;
    }
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(158 / 375 * 100vw);
      height: calc(55 / 375 * 100vw);
      background-color: #fff;
      border: 1px solid var(--color-blue);
      border-radius: 40px;
      font-feature-settings: "palt";
      font-weight: 700;
      font-size: calc(14 / 375 * 100vw);
      line-height: 1.55;
      color: var(--color-blue);
      text-align: center;
      position: relative;

      &.active {
        background-color: var(--color-blue);
        color: #fff;
      }
    }
  }
  .tab-content-wrapper {
    width: 100%;
    overflow: hidden;

    .tab-content {
      width: 100%;
      padding: calc(20 / 375 * 100vw);
      background-color: var(--color-blue);
      border-radius: calc(11 / 375 * 100vw);
    }
    .tab-ttl {
      margin-block: calc(20 / 375 * 100vw) calc(40 / 375 * 100vw);
      font-feature-settings: "palt";
      font-weight: 700;
      font-size: calc(28 / 375 * 100vw);
      letter-spacing: .08em;
      line-height: 1.3;
      color: #fff;
      text-align: center;
    }
    .overview-list {
      margin-bottom: calc(25 / 375 * 100vw);
      font-feature-settings: "palt";
      font-weight: 600;
      font-size: calc(18 / 375 * 100vw);
      line-height: 1.8888888888888888;
      color: #fff;
      text-align: justify;

      li {
        padding-block: .5em;
        border-bottom: 1px solid #fff;

        &:first-child, &:nth-child(3) {
          border-top: 1px solid #fff;
        }
        em {
          font-weight: 600;
          color: var(--color-orange);
        }
      }
    }
    .output-list {

      li {
        padding-inline: calc(15 / 375 * 100vw);
        background-color: #fff;
        border-radius: calc(9 / 375 * 100vw);

        & + & {
          margin-top: calc(15 / 375 * 100vw);
        }

        small, sup {
          font-size: calc(11 / 375 * 100vw);
        }
        em {
          font-weight: 700;
          color: var(--color-blue);
        }

        .ttl {
          font-feature-settings: "palt";
          font-weight: 700;
          font-size: calc(18 / 375 * 100vw);
          line-height: 1.6666666666666667;
          color: var(--color-blue);
          text-align: center;
          padding-block: .8em;
          background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
          background-color: transparent;
          background-size: calc(10 / 375 * 100vw) 1px;
          background-repeat: repeat-x;
          background-position: left bottom;
        }
        .des {
          font-feature-settings: "palt";
          font-weight: 500;
          font-size: calc(16 / 375 * 100vw);
          line-height: 1.875;
          padding-block: .75em 2em;
          text-align: justify;
        }
      }
    }
  }
}

/*cost
==============================*/
.sec.cost {
  height: auto;
  padding-block: calc(44 / 375 * 100vw);
  background-image: url("../images/bg-comparison_sp.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  scroll-padding-top: 0;

  .section-ttl-set {
    margin-bottom: calc(32 / 375 * 100vw);
    color: #fff;
  }
  .sec-ttl {
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-orange);
      background-image: linear-gradient(to right, var(--color-orange) 50%, transparent 0);
    }
  }
  .note {
    font-feature-settings: "palt";
    font-size: calc(12 / 375 * 100vw);
    color: #fff;
    margin-top: 1em;
    margin-top: 4em;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.4;

    li + li {
      margin-top: .5em;
    }
  }
}

.cost_table {
  width: 100vw;
  margin: 0 calc(50% - 50vw) calc(100 / 375 * 100vw);
  position: relative;
}
.cost_table::before {
  content: "";
  width: 100%;
  height: calc(30 / 375 * 100vw);
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: calc(-29 / 375 * 100vw);
}
.cost_table th {
  width: calc(121 / 375 * 100vw);
  height: calc(47 / 375 * 100vw);
  text-align: center;
  vertical-align: middle;
  font-size: calc(11 / 375 * 100vw);
  font-weight: 700;
  position: relative;
}
.cost_table th small {
  font-size: calc(10 / 375 * 100vw);
  font-weight: 500;
}
.cost_table th.brother {
  width: calc(132 / 375 * 100vw);
  font-size: calc(15 / 375 * 100vw);
  color: #fff;
  background-color: #ff8700;
}
.cost_table th.th01 span,
.cost_table th.th03 span {
  width: calc(108 / 375 * 100vw);
  height: calc(47 / 375 * 100vw);
  border-radius: calc(11 / 375 * 100vw) calc(11 / 375 * 100vw) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: -0.03em;
  justify-content: center;
  gap: calc(5 / 375 * 100vw);
  position: absolute;
  bottom: 0;
}
.cost_table th.th01 span {
  background-color: #0c2ea0;
  color: #fff;
  right: 0;
}
.cost_table th.th03 span {
  background-color: #afc8e3;
  color: #000;
  left: 0;
}

.cost_table th.brother span {
  width: 100%;
  height: calc(57 / 375 * 100vw);
  background-color: #ff8700;
  border-radius: calc(13 / 375 * 100vw) calc(13 / 375 * 100vw) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.cost_table td {
  font-size: calc(13 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.3;
  font-feature-settings: "palt";
  letter-spacing: -0.05em;
  text-align: center;
  background-color: #fff;
  vertical-align: bottom;
  position: relative;
  white-space: nowrap;
}
.cost_table td small {
  font-size: calc(13 / 375 * 100vw);
}
.cost_table td.td01 {
  padding-left: calc(20 / 375 * 100vw);
}
.cost_table td.td03 {
  padding-right: calc(20 / 375 * 100vw);
}
.cost_table td.brother {
  font-size: calc(13 / 375 * 100vw);
  font-weight: 500;
  color: #ff8700;
}
.cost_table td span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: linear-gradient(to right, #aeaeae 5px, transparent 5px);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding: calc(5 / 375 * 100vw) 0;
}
.cost_table td.h3em span {
  height: 5.5em;
}
.cost_table td.h4em span {
  height: 6.5em;
}
.cost_table td.h2em span {
  height: 4.5em;
}

.cost_txt {
  text-align: center;
  font-size: calc(22 / 375 * 100vw);
  font-weight: 700;
  line-height: 2;
  color: #fff;
  position: relative;
}
.cost_txt::before,
.cost_txt::after {
  content: "";
  width: calc(22 / 375 * 100vw);
  height: calc(22 / 375 * 100vw);
  border-bottom: calc(2 / 375 * 100vw) solid #ff8700;
  border-right: calc(2 / 375 * 100vw) solid #ff8700;
  transform: rotate(45deg) translateX(-50%);
  position: absolute;
  top: calc(-40 / 375 * 100vw);
  left: 50%;
}
.cost_txt::after {
  top: calc(-52 / 375 * 100vw);
}
.cost_txt span {
  display: inline;
  background-color: #ff8700;
  padding: calc(3 / 375 * 100vw);
  font-size: 103%;
}
.cost_txt span em {
  display: inline-block;
  padding: 0 calc(3 / 375 * 100vw) 0 calc(7 / 375 * 100vw);
}


/*inter_section
================================*/

.intersec {
  background-color: #f5f6fa;
  padding: calc(45 / 375 * 100vw) 0 calc(58 / 375 * 100vw);
}

.intersec h2 {
  text-align: center;
  font-size: calc(26 / 375 * 100vw);
  line-height: 1.62;
  font-weight: 700;
  color: #008011;
  margin-bottom: calc(27 / 375 * 100vw);
}
.intersec h2 span {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.intersec h2 span::before,
.intersec h2 span::after {
  content: "";
  width: calc(26 / 375 * 100vw);
  height: calc(66 / 375 * 100vw);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: calc(15 / 375 * 100vw);
  background-image: url("../images/ornament-1.svg");
}
.intersec h2 span::before {
  left: calc(-45 / 375 * 100vw);
}
.intersec h2 span::after {
  right: calc(-45 / 375 * 100vw);
  transform: rotateY(180deg);
}

.intersec_box {
  width: calc(330 / 375 * 100vw);
  height: calc(1076 / 375 * 100vw);
  border-radius: calc(20 / 375 * 100vw);
  background-image: url("../images/bg-multifuntional_sp.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.intersec hgroup {
  position: absolute;
  top: calc(27 / 375 * 100vw);
  left: 0;
}

.intersec hgroup .lead {
  clip-path: polygon(0% 0%, 100% 0%, 93% 100%, 0% 100%);
  background-color: #f7931e;
  width: calc(254 / 375 * 100vw);
  height: calc(50 / 375 * 100vw);
  font-size: calc(20 / 375 * 100vw);
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(12 / 375 * 100vw);
}
.intersec hgroup h3 {
  color: #fff;
  font-size: calc(26 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.62;
  margin-left: calc(18 / 375 * 100vw);
  margin-bottom: calc(8 / 375 * 100vw);
}
.intersec hgroup .model {
  color: #fff;
  font-size: calc(12 / 375 * 100vw);
  line-height: 1.5;
  font-weight: 700;
  margin-left: calc(18 / 375 * 100vw);
}
.intersec hgroup .model small {
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: -0.03em;
}


.intersec .feature_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  top: calc(239 / 375 * 100vw);
  left: 0;
  width: 100%;
}
.intersec .feature_list li {
  width: calc(146 / 375 * 100vw);
  height: calc(148 / 375 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(19 / 375 * 100vw) 0;
}
.intersec .feature_list li:last-child {
  margin-top: calc(-32 / 375 * 100vw);
}
.intersec .feature_list .num {
  width: calc(82 / 375 * 100vw);
  height: calc(23 / 375 * 100vw);
  border-radius: calc(23 / 375 * 100vw);
  background-color: #f7931e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(12 / 375 * 100vw);
  font-weight: 700;
  line-height: calc(23 / 375 * 100vw);
  color: #fff;
}
.intersec .feature_list .num span {
  display: inline-block;
  margin-left: 0.2em;
}
.intersec .feature_list .txt {
  height: calc(90 / 375 * 100vw);
  display: flex;
  align-items: center;
  text-align: center;
  font-size: calc(13 / 375 * 100vw);
  font-weight: 700;
  color: #f7931e;
  line-height: 1.6;
  letter-spacing: -.005em;
}

.intersec .figcaption {
  width: 100%;
  font-size: calc(12 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 0;
  top: calc(653 / 375 * 100vw);
}

.intersec .box_white {
  width: calc(290 / 375 * 100vw);
  height: calc(209 / 375 * 100vw);
  border-radius: calc(9 / 375 * 100vw);
  display: flex;
  align-items: center;
  padding: calc(10 / 375 * 100vw) calc(18 / 375 * 100vw);
  background-color: #fff;
  font-size: calc(14 / 375 * 100vw);
  font-weight: 500;
  color: #006c11;
  line-height: 1.714;
  letter-spacing: -0.04em;
  text-align: justify;
  position: absolute;
  left: calc(20 / 375 * 100vw);
  bottom: calc(160 / 375 * 100vw);
}

.intersec .box_green {
  width: 100%;
  height: calc(142 / 375 * 100vw);
  display: flex;
  align-items: center;
  padding: calc(20 / 375 * 100vw);
  font-size: calc(12 / 375 * 100vw);
  line-height: 1.57;
  font-weight: 500;
  color: #fff;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) 0 0;
  background-color: #006c11;
  text-align: justify;
}


/*voice
=================================*/

.voice {
  padding: calc(50 / 375 * 100vw) 0 calc(60 / 375 * 100vw);

  .section-ttl-set {
    margin-bottom: calc(25 / 375 * 100vw);
  }
  .sec-ttl {
    .en {
      color: var(--color-blue);
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-blue);
      background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
    }
  }
}
.voice_list {
  width: 100%;
  display: flex;
  justify-content: center;
}
.voice_list li {
  width: calc(330 / 375 * 100vw);
}
.voice_list li a {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(12 / 375 * 100vw);
  border: calc(2 / 375 * 100vw) solid var(--color-blue);
  overflow: hidden;
  position: relative;

  .button {
    display: none;
  }
}
.voice_list .img {
  position: relative;
  z-index: -1;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.voice_list li p {
  padding: calc(15 / 375 * 100vw) calc(3 / 375 * 100vw);
  font-size: calc(15 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.73;
  font-feature-settings: "palt";
  color: var(--color-blue);
}
.voice_list li p.sub-ttl {
  font-size: calc(20 / 375 * 100vw);
  line-height: 1.7;
  padding-bottom: 0;
}





/*purchase
============================*/
.sec.purchase {
  background-color: #F3F5F9;
  padding-block: calc(40 / 375 * 100vw);

  .section-ttl-set {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .sec-ttl {
    text-align: center;

    .extra {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #006ebf;
      margin-bottom: 20px;
      font-weight: 700;
      font-size: calc(26 / 375 * 100vw);
      line-height: 1.6153846153846154;
      position: relative;

      em {
        font-weight: 700;
        font-size: calc(26 / 375 * 100vw);
      }

      &::before,
      &::after {
        position: absolute;
        top: .45em;
        display: block;
        content: url(../images/ornament-2_sp.svg);
        width: calc(27 / 375 * 100vw);
        height: calc(66 / 375 * 100vw);
      }
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
        rotate: y 180deg;
      }
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      font-size: calc(40 / 375 * 100vw);
      color: var(--color-blue);
      background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
    }
}
}
.step_list01 {
  margin: calc(20 / 375 * 100vw) auto calc(30 / 375 * 100vw);
  width: calc(330 / 375 * 100vw);
  height: calc(107 / 375 * 100vw);
}
.purchase_list_wrapper {
  width: calc(330 / 375 * 100vw);
  margin: 0 auto calc(40 / 375 * 100vw);
}
.purchase_list {
  width: calc(295 / 375 * 100vw);
  margin: 0 auto calc(25 / 375 * 100vw);
  display: block;
}
.purchase_list .list_item + .list_item {
  margin-top: calc(73 / 375 * 100vw);
}
.purchase_list .list_item:last-child {
  margin-top: calc(62 / 375 * 100vw);
}
.purchase_list .list_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.purchase_list h3 {
  font-size: calc(22 / 375 * 100vw);
  font-weight: 700;
  margin-bottom: calc(10 / 375 * 100vw);
}
.purchase_list figure img {
  width: calc(250 / 375 * 100vw);
  height: auto;
}
.purchase_list .bttn_area {
  width: 100%;
  margin-top: calc(7 / 375 * 100vw);
}
.purchase_list .list_item:last-child figure {
  margin-top: calc(-22 / 375 * 100vw);
}

.purchase_list .amazon {
  padding-bottom: calc(20 / 375 * 100vw);
}
.purchase_list .rakuten {
  padding-top: calc(18 / 375 * 100vw);
  border-top: calc(2 / 375 * 100vw) dashed #000;
}
.purchase_list .list_item:last-child .rakuten {
  margin-top: calc(-10 / 375 * 100vw);
}
.amazon_bttn, .rakuten_bttn {
  width: 100%;
  height: calc(44 / 375 * 100vw);
  border-radius: calc(44 / 375 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18 / 375 * 100vw);
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(14 / 375 * 100vw);
  position: relative;
}
.amazon_bttn::after, .rakuten_bttn::after {
  content: "";
  width: calc(27 / 375 * 100vw);
  height: calc(44 / 375 * 100vw);
  position: absolute;
  right: calc(17 / 375 * 100vw);
  top: 0;
  background-image: url("../images/ico-cart.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.amazon_bttn {
  background: linear-gradient(0deg, rgba(255, 125, 0, 1) 0%, rgba(248, 108, 0, 1) 100%);
  border-color: rgba(248, 108, 0, 1);
  box-shadow: 0px 5px 0px var(--color-orange-dark);

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}
.rakuten_bttn {
  background: linear-gradient(0deg, rgba(215, 0, 0, 1) 0.03%, rgba(191, 0, 12, 1) 99.97%);
  border-color: rgba(191, 0, 12, 1);
  box-shadow: 0px 5px 0px var(--color-red-dark);

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}
.coupon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.coupon .box {
  background: #fff;
  border-style: Dashed;
  border-width: calc(1 / 375 * 100vw);
  border-radius: calc(4 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.amazon .coupon .box {
  border-color: #FF7D00;
  width: calc(192 / 375 * 100vw);
  flex-direction: column;
  font-size: calc(10 / 375 * 100vw);
  font-weight: 700;
  margin-left: calc(2 / 375 * 100vw);
}
.rakuten .coupon .box {
  border-color: #d70000;
  width: 100%;
  position: relative;
  margin-left: calc(2 / 375 * 100vw);
  margin-right: calc(2 / 375 * 100vw);
  padding-right: calc(10 / 375 * 100vw);
}
.rakuten .coupon .box::after {
  content: "";
  width: calc(29 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  background-image: url("../images/ico-coupon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  right: calc(10 / 375 * 100vw);
  top: 0;
}
.amazon .coupon .coupon-text {
  font-size: calc(19 / 375 * 100vw);
  color: #ff7d00;
}
.rakuten .coupon .box a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: calc(16 / 375 * 100vw);
  font-weight: 700;
  color: #d70000;
}
.copy-bttn {
  width: calc(88 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  border-radius: calc(4 / 375 * 100vw);
  border: 1px solid #000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10 / 375 * 100vw);
  font-weight: 700;
  line-height: calc(40 / 375 * 100vw);
  color: #000;
  margin-right: calc(2 / 375 * 100vw);
}
.copy-bttn .copy-txt {
  display: inline-block;
  padding-left: calc(22 / 375 * 100vw);
  position: relative;
}
.copy-bttn .copy-txt::after {
  content: "";
  width: calc(17 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  background-image: url("../images/ico-copy.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
}
.coupon small {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: calc(4 / 375 * 100vw);
  font-size: calc(12 / 375 * 100vw);
}


/* 吹き出しを表示する親要素の基準設定 */
.coupon, .copy-bttn {
  position: relative;
}
/* 吹き出しの基本スタイル */
.copy-tooltip {
  position: absolute;
  bottom: 125%;
  /* ボタンの上側に配置 */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: #333;
  color: #fff;
  padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw);
  border-radius: calc(4 / 375 * 100vw);
  font-size: calc(12 / 375 * 100vw);
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10;
}
/* 吹き出しの突起（矢印） */
.copy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: calc(6 / 375 * 100vw);
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
/* 表示されたときのスタイル */
.copy-tooltip.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


.purchase_list + p {
  text-align: left;
  font-size: calc(14 / 375 * 100vw);
  line-height: 1.71;
  font-weight: 500;
  letter-spacing: 0;
}
.purchase_list + p span {
  color: #D70000;
}



/*service*/
.service {
  width: calc(330 / 375 * 100vw);
  border-radius: calc(12 / 375 * 100vw);
  background-color: #fff;
  margin: 0 auto;
  overflow: visible;
}
.service_kv {
  width: calc(375 / 375 * 100vw);
  height: calc(365 / 375 * 100vw);
  position: relative;
  margin: 0 calc(50% - 50vw);
}
.service01 {
  position: absolute;
  top: calc(-10 / 375 * 100vw);
  left: 0;
}
.service02 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.flat12_outline {
  width: calc(290 / 375 * 100vw);
  margin: 0 auto calc(44 / 375 * 100vw);
  padding: 0;
  text-align: center;
}
.flat12_outline .bal01,
.flat12_outline .bal02 {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16 / 375 * 100vw);
  line-height: 1.5;
  font-weight: 700;
  color: #006ebf;
  font-feature-settings: "palt";
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.flat12_outline .bal01 {
  background-image: url("../images/bal-1_sp.svg");
  margin-bottom: calc(10 / 375 * 100vw);
  height: calc(47 / 375 * 100vw);
}
.flat12_outline .bal02 {
  background-image: url("../images/bal-2_sp.svg");
  margin-bottom: calc(23 / 375 * 100vw);
  height: calc(69 / 375 * 100vw);
}
.flat12_ttl {
  color: #006ebf;
  font-size: calc(18 / 375 * 100vw);
  font-weight: 700;
  width: calc(290 / 375 * 100vw);
  margin: 0 auto;
}
.flat12_ttl a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(20 / 375 * 100vw);
  line-height: 1.3;
  background-color: #006ebf;
  width: 100%;
  height: calc(77 / 375 * 100vw);
  border-radius: calc(6 / 375 * 100vw);
  margin-top: calc(10 / 375 * 100vw);
}



.flat12_step {
  background-color: #FFE800;
  padding: calc(40 / 375 * 100vw) calc(20 / 375 * 100vw) calc(35 / 375 * 100vw);
  border-radius: 0 0 calc(12 / 375 * 100vw) calc(12 / 375 * 100vw);
}
.flat12_step_ttl {
  text-align: center;
  margin-bottom: calc(35 / 375 * 100vw);
  font-size: calc(20 / 375 * 100vw);
  font-weight: 700;
}
.step_list02 {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: calc(11 / 375 * 100vw);
}
.step_list02 li {
  clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
  background-color: #fff;
  text-align: center;
  width: 100%;
  padding: calc(15 / 375 * 100vw) calc(10 / 375 * 100vw) calc(28 / 375 * 100vw);
  display: flex;
  flex-direction: column;
}
.step_list02 .num {
  font-size: calc(14 / 375 * 100vw);
  font-weight: 500;
  color: #006ebf;
  margin-bottom: calc(10 / 375 * 100vw);
  order: 1;
}
.step_list02 p {
  font-size: calc(15 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.47;
  text-align: center;
  order: 3;
}
.step_list02 .step_icon {
  margin: 0 auto calc(10 / 375 * 100vw);
  order: 2;
}
.step_list02 .step_icon img {
  width: calc(53 / 375 * 100vw);
  height: auto;
}
.step_list02 li:last-child {
  color: #fff;
  background-color: #006ebf;
}
.step_list02 li:last-child .num {
  color: #fff;
}
.bttn_wrapper {
  font-feature-settings: "palt";
  position: relative;
  padding-top: calc(40 / 375 * 100vw);
}
.bttn_wrapper .staff {
  position: static;
  display: flex;
  margin-bottom: calc(15 / 375 * 100vw);
}
.bttn_wrapper .staff .img {
  width: calc(93 / 375 * 100vw);
  margin-right: calc(10 / 375 * 100vw);
}
.bttn_wrapper .staff .txt {
  font-size: calc(15 / 375 * 100vw);
  line-height: 1.65;
  font-weight: 700;
  color: #006ebf;
  display: inline-block;
  transform: rotate(-3.806deg);
  position: relative;
}
.bttn_wrapper .staff .txt::before,
.bttn_wrapper .staff .txt::after {
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  width: calc(36 / 375 * 100vw);
  height: calc(20 / 375 * 100vw);
}
.bttn_wrapper .staff .txt::before {
  background-image: url("../images/ornament-3a.svg");
  top: calc(-20 / 375 * 100vw);
}
.bttn_wrapper .staff .txt::after {
  background-image: url("../images/ornament-3b.svg");
  bottom: calc(15 / 375 * 100vw);
}
.bttn_wrapper .bttn_lead {
  text-align: center;
  font-size: calc(17 / 375 * 100vw);
  line-height: 1.7;
  font-weight: 700;
  margin-bottom: calc(40 / 375 * 100vw);
}
.bttn_wrapper .bttn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(296 / 375 * 100vw);
  height: calc(99.2 / 375 * 100vw);
  border-radius: calc(50 / 375 * 100vw);
  color: #fff;
  font-size: calc(15 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  background-color: #ff8700;
  position: relative;
}
.bttn_wrapper .bttn a::after {
  content: "";
  width: calc(10 / 375 * 100vw);
  height: calc(10 / 375 * 100vw);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  right: calc(12 / 375 * 100vw);
  top: 50%;
}







.footer-area {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto calc(60 / 375 * 100vw);
  padding-bottom: calc(76 / 375 * 100vw);

  .footer-inner {
    padding-block: calc(36 / 375 * 100vw);
    padding-inline: calc(22.5 / 375 * 100vw);
    font-weight: 500;
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.7142857142857142;
    background-color: var(--color-gray);
  }
  .nobr {
    white-space: nowrap;
  }
  .copyright {
    background-color: var(--color-blue);

    p {
      display: flex;
      width: 100%;
      height: 100%;
      padding-inline: calc(22.5 / 375 * 100vw);
      align-items: center;
      justify-content: center;
      color: #fff;
      font-feature-settings: "palt";
      font-size: calc(12 / 375 * 100vw);
      line-height: 1.8333333333333333;
      text-align: center;
    }
  }
}
.footer_banner {
  display: block;
  width: 100%;
  height: calc(76 / 375 * 100vw);
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2000;
  opacity: 0;
  animation: simple-fi 1s ease 1s both;

  a {
    display: block;
    width: 100%;
    height: 100%;
    padding-inline: calc(22.5 / 375 * 100vw);
    background: linear-gradient(90deg, rgba(249, 0, 19, 1) 0%, rgba(255, 135, 0, 1) 100%);


    .inner-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;

      .bnnr {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100 / 375 * 100vw);
        height: calc(49 / 375 * 100vw);
        background-color: #fff;
        border-radius: calc(4 / 375 * 100vw);
        font-weight: 700;
        font-size: calc(14 / 375 * 100vw);
        line-height: 1.3499999999999999;
        text-align: center;
      }
      .knock {
        font-size: calc(14 / 375 * 100vw);
        color: transparent;
        background-image: linear-gradient(90deg, rgba(249, 0, 19, 1) 0%, rgba(255, 135, 0, 1) 100%);
        background-clip: text;
      }
      .buynow {
        font-weight: 700;
        font-size: calc(24 / 375 * 100vw);
        color: #fff;
        letter-spacing: -.005em;
        white-space: nowrap;
      }
    }
  }
}