@charset "UTF-8";


html {
  scroll-padding-top: 40px;
}

.sp_only {
  display: none;
}

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

  .first-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 78px;
    max-width: 1440px;
    padding-inline: 50px;
    margin: 0 auto;
    background-color: #fff;

    .logo {
      display: block;
      width: 308px;
      height: auto
    }
  }
  .second-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 51px;
    background-color: #fff;
    border-top: 1px solid var(--color-gray);

    nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-width: 1024px;
      max-width: 1440px;
      height: 100%;
      padding-inline: 50px;
      position: relative;
    }

    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 36px;
      width: 100%;
      height: 100%;

      li {
        display: inline-block;
        font-weight: 500;
        font-size: 15px;
        vertical-align: middle;

        a {
          position: relative;

          &::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border: 1px solid transparent;
            border-left-color: currentColor;
            border-bottom-color: currentColor;
            transform: translate(0, -.25em) rotate(-45deg);
            margin-left: .5em;
          }
          &::before {
            position: absolute;
            bottom: -.35em;
            left: 0;
            content: '';
            display: inline-block;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            transform-origin: left top;
            scale: 0 1;
          }
          @media (hover: hover) {
            &::before {
              transition: scale .2s ease;
            }
            &:hover::before {
              scale: 1 1;
            }
            &::after {
              transition: transform .2s ease;
            }
            &:hover::after {
              transform: translate(0, -.05em) rotate(-45deg);
            }
          }
        }
      }
    }
    .banners {
      position: absolute;
      top: -78px;
      right: 50px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .bnnr {
        height: 78px;
        display: flex;
        align-items: center;

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 201px;
          height: 40px;
          border-radius: 100px;
          background-color: var(--color-orange);
          font-weight: 700;
          font-size: 15px;
          color: var(--color-blue);

          span {
            transform: translateY(-.1em);
          }

          @media (hover: hover) {
            transition: .3s ease;

            &:hover {
              background-color: var(--color-blue);
              color: var(--color-orange);
            }
          }
        }
      }
      .bttn {
        display: flex;
        align-items: center;
        height: 51px;

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 101px;
          height: 34px;
          background-color: var(--color-red);
          border-radius: 100px;
          border: 1px solid var(--color-red);
          font-weight: 700;
          font-size: 14px;
          font-feature-settings: "palt";
          color: #fff;

          span {
            transform: translateY(-.1em);
          }

          @media (hover: hover) {
            transition: .3s ease;

            &:hover {
              background-color: #fff;
              color: var(--color-red);
            }
          }
        }
      }
    }
  }
}
.mv-area {
  display: block;
  width: 100%;
  height: calc(518 / 1440 * 100vw);
  position: relative;

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

  .bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .mv-inner {
    display: grid;
    grid-template-columns: 57.43055555555555% 42.56944444444445%;
    grid-template-rows: 100%;
    height: 100%;
  }
  .titles {
    display: block;
    padding-left: calc(100 / 1440 * 100vw);
    background-color: var(--color-blue);
    clip-path: polygon(0% 0%, 72% 0%, 100% 100%, 0% 100%);
    padding-block: calc(30 / 1440 * 100vw);

    hgroup {
      font-size: calc(22 / 1440 * 100vw);
    }

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

      .ttl-1 {
        display: inline-block;
        margin-bottom: calc(27 / 1440 * 100vw);
        font-weight: 700;
        color: var(--color-orange);
      }
      .ttl-2 {
        display: inline-block;
        font-weight: 700;
        font-size: calc(44 / 1440 * 100vw);
        line-height: 1.5681818181818181;
        color: #fff;
        margin-bottom: calc(37 / 1440 * 100vw);

        .mark {
          display: inline-block;
          font-weight: 700;
          color: var(--color-blue);
          position: relative;
          margin-right: .5em;

          &::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(18 / 1440 * 100vw);
      line-height: 1.8888888888888888;
      color: #fff;
      margin-bottom: calc(40 / 1440 * 100vw);

      em {
        color: var(--color-orange);
      }
    }
    .bttn {
      display: block;
      width: calc(229 / 1440 * 100vw);
      height: calc(62 / 1440 * 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(18 / 1440 * 100vw);
        position: relative;

        span {
          transform: translateY(-.025em);
        }
        &::after {
          content: '';
          display: inline-block;
          width: calc(9.2719 / 1440 * 100vw);
          height: calc(9.2719 / 1440 * 100vw);
          border: 1px solid transparent;
          border-top-color: currentColor;
          border-right-color: currentColor;
          rotate: 45deg;
          position: absolute;
          right: calc(17 / 1440 * 100vw);
          top: 50%;
          translate: 0 -50%;
        }

        @media (hover: hover) {
          transition: background-color .3s ease;

          &:hover {
            background-color: #fff;
          }
        }
      }
    }
  }
  .medal-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-block: calc(35 / 1440 * 100vw);
    padding-right: calc(90 / 1440 * 100vw);

    li {
      display: block;
      width: calc(128 / 1440 * 100vw);
      height: calc(128 / 1440 * 100vw);

      & + & {
        margin-top: calc(19 / 1440 * 100vw);
      }
    }
  }
  .printer {
    display: block;
    width: calc(316 / 1440 * 100vw);
    height: calc(234 / 1440 * 100vw);
    position: absolute;
    left: calc(50% - 6.944444444444445vw);
    bottom: calc(-46 / 1440 * 100vw);
  }
}

.section-ttl-set {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;

  .lead {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.875;
    margin-top: 20px;
  }
}
.sec-ttl {
  display: flex;
  flex-direction: column;

  .en {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .jp {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.619047619047619;
  }
  mark {
    background-color: transparent;
    background-size: 10px 3px;
    background-repeat: repeat-x;
    background-position: left bottom;
  }
}


.section-inner {
  width: 1000px;
  margin-inline: auto;
}

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

  .section-ttl-set {
    margin-bottom: 70px;
  }
  .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: grid;
    grid-template-columns: repeat(auto-fill, 320px);
    column-gap: 20px;
    row-gap: 58px;

    .list-item {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: minmax(auto, 110px) minmax(auto, 126px) auto;
      background-color: #fff;
      border-radius: 0 0 12px 12px;

      .list-ttl-set {
        display: block;
        width: 100%;
        padding-block: 1em;
        background-color: var(--color-blue);
        border-radius: 12px 12px 0 0;
        font-weight: 700;
        text-align: center;
        position: relative;
        z-index: +1;
  
        &::before {
          content: '';
          display: block;
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background-color: var(--color-blue);
          position: absolute;
          left: 50%;
          top: -25px;
          translate: -50% 0;
          z-index: -1;
        }
        &::after {
          display: block;
          width: 17px;
          height: 17px;
          position: absolute;
          top: -17px;
          left: 50%;
          translate: -50% 0;
        }
        .ttl {
          display: inline-block;
          font-size: 18px;
          color: var(--color-orange);
          margin-bottom: .25em;
        }
        .lead {
          font-size: 16px;
          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: 16px;
        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 9px 9px;
        border-radius: 9px;

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

          small,
          sup {
            font-feature-settings: "palt";
            font-size: 11px;
          }
          em {
            font-feature-settings: "palt";
            font-weight: 700;
            font-size: 18px;
            color: var(--color-blue);
          }
        }
      }
    }
  }
}

.sec.lineup {
  margin-top: -110px;
  background-color: var(--color-blue);
  clip-path: polygon(0% 0%, 50% 110px, 100% 0%, 100% 100%, 0% 100%);
  padding-block: 150px 100px;

  .note {
    font-size: 14px;
    color: #fff;
    margin-top: 1em;

    li + li {
      margin-top: .5em;
    }
    a {
      text-decoration-line: underline;
      text-decoration-color: currentColor;
      color: #aaffff;

      @media (hover: hover) {
        transition: text-decoration-color .2s ease;

        &:hover {
          text-decoration-color: transparent;
        }
      }
    }
  }

  .section-ttl-set {
    margin-bottom: 82px;

    .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%;
    border-radius: 7px;
    padding-inline: 18px;
    background-color: #fff;

    .lineup-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 50px;
      margin-bottom: 50px;

      .list-item {
        position: relative;
      }
    }
  }
  .item-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 257px;
    height: 51px;
    border-radius: 100px;
    background-color: var(--color-orange);
    color: #fff;
    position: absolute;
    left: 50%;
    translate: -50% -50%;

    h3 {
      font-weight: 700;
      font-size: 18px;
      line-height: 1;
    }
    p {
      font-weight: 700;
      font-size: 12px;
      line-height: 1.7
    }
  }
  .two-cols {
    display: grid;
    grid-template-columns: 160px auto;
    column-gap: 10px;
    margin-top: 53px;
    margin-bottom: 30px;
    align-items: center;

    .img-box {
      display: block;
      width: 160px;
      height: auto;
      grid-area: 1 / 1 / 2 / 2;
    }
    .des-ttl {
      font-feature-settings: "palt";
      font-weight: 700;
      font-size: 16px;
      color: var(--color-blue);
      margin-bottom: 22px;
    }
    .des {
      font-feature-settings: "palt";
      font-weight: 500;
      font-size: 16px;
      line-height: 1.625;

      em {
        font-weight: 700;
        font-size: 16px;
        color: var(--color-blue);
      }
    }
  }
  .double-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-blue);
    border-radius: 3px;
    overflow: hidden;
  }
  .table-box {

    &:last-child {
      border-left: 1px solid var(--color-blue);
    }

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

      th {
        font-feature-settings: "palt";
        font-weight: 700;
        font-size: 15px;
        color: #fff;
        background-color: var(--color-blue);
        text-align: center;
        padding: 0 .2em;
        height: 37px;

        &:nth-child(even) {
          background-color: #4c70bd;
        }
      }
      td {
        font-weight: 700;
        font-size: 15px;
        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: 11px;
          color: #000;
        }
        .inch {
          font-feature-settings: "palt";
          font-size: 22px;
          color: var(--color-orange);
        }
        .unit {
          font-size: 16px;
        }
      }
    }
  }
  .caption {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }

  .spec-table {
    width: 100%;
    font-feature-settings: "palt";

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

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

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

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

      small {
        font-size: 11px;
        margin-left: .5em;
      }

      .colour {
        padding-left: 42px;
        display: inline-flex;
        align-items: center;

        .spectrum {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 132px;
          height: 24px;
          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: 12px;
          font-size: 14px;
          color: #fff;
          margin-right: .75em;
        }
      }
      .monochrome {
        display: inline-flex;
        align-items: center;
        padding-left: 20px;


        .mono {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 132px;
          height: 24px;
          background-color: #000;
          font-size: 14px;
          color: #fff;
          border-radius: 12px;
          margin-right: .75em;
        }
      }
    }
  }
}
.is-hidden {
  display: none;
}

.sec.case {
  padding-block: 105px;

  .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: center;
    column-gap: 20px;
    margin-bottom: 35px;

    li {
      display: block;
    }
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 218px;
      height: 65px;
      background-color: #fff;
      border: 1px solid var(--color-blue);
      border-radius: 40px;
      font-feature-settings: "palt";
      font-weight: 700;
      font-size: 15px;
      color: var(--color-blue);
      position: relative;

      @media (hover: hover) {
        transition: color .3s ease, background-color .3s ease;

        &:hover {
          background-color: var(--color-blue);
          color: #fff;
        }
      }
      &.active {
        background-color: var(--color-blue);
        color: #fff;

        &::after {
          content: '';
          display: block;
          width: 20px;
          height: 17px;
          background-color: var(--color-blue);
          position: absolute;
          left: 50%;
          bottom: 0;
          translate: -50% 100%;
          clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        }
      }
    }
  }
  .tab-content-wrapper {
    width: 100%;
    min-height: 683px;
    overflow: hidden;

    .tab-content {
      width: 100%;
      padding: 25px;
      background-color: var(--color-blue);
      border-radius: 11px;
    }
    .tab-ttl {
      margin-block: 40px;
      font-weight: 700;
      font-size: 28px;
      color: #fff;
      text-align: center;
    }
    .overview-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto auto;
      grid-auto-flow: column;
      column-gap: 3%;
      margin-bottom: 35px;
      font-weight: 600;
      font-size: 20px;
      line-height: 1.7;
      color: #fff;
      text-align: center;

      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 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      column-gap: 22px;

      li {
        grid-row: span 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: subgrid;
        padding-inline: 12px;
        background-color: #fff;
        border-radius: 9px;

        small, sup {
          font-size: 11px;
        }
        em {
          font-weight: 700;
          color: var(--color-blue);
        }

        .ttl {
          font-feature-settings: "palt";
          font-weight: 700;
          font-size: 18px;
          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: 10px 1px;
          background-repeat: repeat-x;
          background-position: left bottom;
        }
        .des {
          font-weight: 500;
          font-size: 16px;
          line-height: 1.875;
          padding-block: .75em 2em;
        }
      }
    }
  }
}


.sec.cost {
  display: flex;
  align-items: center;
  height: 810px;
  background-image: url("../images/bg-comparison_pc.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  scroll-padding-top: 0;

  .section-ttl-set {
    margin-bottom: 50px;
    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-size: 12px;
    color: #fff;
    margin-top: 1em;
    line-height: 1.4;
    margin-bottom: 2em;

    li + li {
      margin-top: .5em;
    }
  }
}
.cost hgroup {
  height: 183px;
}

.cost_table {
  width: 1000px;
  border-radius: 27px 27px 0 0;
  margin: 0 auto 120px;
  position: relative;
}
.cost_table::before {
  content: "";
  width: 100%;
  height: 30px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: -29px;
}
.cost_table th {
  width: 318px;
  height: 75px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 700;
  position: relative;
}
.cost_table th small {
  font-size: 12px;
}
.cost_table th.brother {
  width: 364px;
  font-size: 26px;
  color: #fff;
  background-color: #ff8700;
}
.cost_table th.th01 span,
.cost_table th.th03 span {
  width: 100%;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.cost_table th.th01 span {
  border-radius: 17px 0 0 0;
  background-color: #0c2ea0;
  color: #fff;
}
.cost_table th.th03 span {
  border-radius: 0 17px 0 0;
  background-color: #afc8e3;
  color: #000;
}

.cost_table th.brother span {
  width: 100%;
  height: 116px;
  background-color: #ff8700;
  border-radius: 27px 27px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.cost_table td {
  font-size: 15px;
  font-weight: 500;
  font-feature-settings: "palt";
  text-align: center;
  vertical-align: baseline;
  background-color: #fff;
  padding: 2px 15px 2px;
}
.cost_table td small {
  font-size: 11px;
}
.cost_table td.brother {
  font-size: 18px;
  font-weight: 700;
  color: #ff8700;
  padding: 0px 30px 0px;
}
.cost_table td span {
  padding: 15px 0 23px;
  margin-bottom: 0px;
  display: block;
  background-image: linear-gradient(to right, #aeaeae 5px, transparent 5px);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.cost_table td span.first {
  padding-top: 25px;
}

.cost_txt {
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 51px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 40px;
}
.cost_txt::before,
.cost_txt::after {
  content: "";
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #ff8700;
  border-right: 2px solid #ff8700;
  transform: rotate(45deg) translateX(-50%);
  position: absolute;
  top: -48px;
  left: 50%;
}
.cost_txt::after {
  top: -60px;
}
.cost_txt span {
  display: inline-block;
  padding: 5px;
  font-size: 35px;
  background-color: #ff8700;
  border-radius: 2px;
  margin-right: 5px;
}


.intersec {
  background-color: #f5f6fa;
  padding: 80px 0;
}

.intersec h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #008011;
  margin-bottom: 30px;
}
.intersec h2 span {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.intersec h2 span::before,
.intersec h2 span::after {
  content: "";
  width: 16px;
  height: 37px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0px;
  background-image: url("../images/ornament-1.svg");
}
.intersec h2 span::before {
  left: -30px;
}
.intersec h2 span::after {
  right: -35px;
  transform: rotateY(180deg);
}

.intersec_box {
  width: 922px;
  height: 518px;
  border-radius: 20px;
  background-image: url("../images/bg-multifuntional_pc.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  position: relative;
}

.intersec hgroup {
  position: absolute;
  top: 40px;
  left: 0;
}

.intersec hgroup .lead {
  clip-path: polygon(0% 0%, 100% 0%, 93% 100%, 0% 100%);
  background-color: #f7931e;
  width: 254px;
  height: 50px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.intersec hgroup h3 {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.62;
  margin-left: 43px;
  margin-bottom: 18px;
  text-indent: -0.5em;
}
.intersec hgroup .model {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-left: 43px;
}
.intersec hgroup .model small {
  font-size: 14px;
  letter-spacing: -0.03em;
}


.intersec .feature_list {
  display: flex;
  position: absolute;
  top: 41px;
  right: -22px;
}
.intersec .feature_list li {
  width: 179px;
  height: 183px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 5px;
}
.intersec .feature_list .num {
  width: 101px;
  height: 28px;
  border-radius: 28px;
  background-color: #f7931e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  color: #fff;
}
.intersec .feature_list .num span {
  display: inline-block;
  margin-left: 0.2em;
}
.intersec .feature_list .txt {
  height: 100px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #f7931e;
  line-height: 1.6;
}

.intersec .figcaption {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  width: 460px;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 95px;
}
.intersec .figcaption br {
  display: none;
}

.intersec .box_white {
  width: 410px;
  height: 137px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  padding: 10px 18px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #006c11;
  line-height: 1.714;
  letter-spacing: -0.05em;
  text-align: justify;
  position: absolute;
  left: 44px;
  bottom: 96px;
}

.intersec .box_green {
  width: 100%;
  height: 71px;
  display: flex;
  align-items: center;
  padding: 0 13px 0 30px;
  font-size: 14px;
  line-height: 1.57;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.001em;
  position: absolute;
  left: 0;
  bottom: 0;
}
.intersec .box_green p {
  text-indent: -1em;
}



.voice {
  padding: 90px 0 80px;

  .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);
    }
  }
}
.voice_list {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.voice_list li {
  width: 604px;
}
.voice_list li a {
  display: block;
  width: 600px;
  height: 403px;
  border-radius: 16px;
  border: 2px solid var(--color-blue);
  overflow: hidden;
  position: relative;

  .img {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: -1;
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background-color: var(--color-blue);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;

    &::after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 2px solid transparent;
      border-top-color: #fff;
      border-right-color: #fff;
      rotate: 45deg;
    }
  }
  @media (hover: hover) {
    .img img {
      scale: 1;
      transition: scale .3s ease;
    }
    .button {
      transition: background-color .3s ease;
    }
    .button::after {
      transition: all .3s ease;
    }
    &:hover {
      .img img {
        scale: 1.07;
      }
      .button {
        background-color: #fff;
      }
      .button::after {
        border-top-color: var(--color-blue);
        border-right-color: var(--color-blue);
      }
    }
  }
}
.voice_list li p {
  padding: 15px 3px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.73;
  font-feature-settings: "palt";
  color: var(--color-blue);
}
.voice_list li p.sub-ttl {
  font-feature-settings: normal;
  font-size: 20px;
  line-height: 1.7;
  padding-bottom: 0;
}


/*purchase
============================*/
.sec.purchase {
  background-color: #F3F5F9;
  padding: 85px 0 104px;

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

    .extra {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: #006ebf;
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 16px;

      em {
        font-weight: 700;
        font-size: 20px;
      }

      &::before,
      &::after {
        display: inline-block;
        content: url(../images/ornament-2.svg);
        width: 18px;
        height: 29px;
      }
      &::before {
        margin-right: .7em;
      }
      &::after {
        margin-left: .7em;
        rotate: y 180deg;
      }
    }
    mark {
      display: inline-block;
      font-feature-settings: "palt";
      color: var(--color-blue);
      background-image: linear-gradient(to right, var(--color-blue) 50%, transparent 0);
    }
  }
}
.step_list01 {
  margin: 0 auto 45px;
  width: 356px;
}
.purchase_list_wrapper {
  width: 1000px;
  margin: 0 auto 104px;
}
.purchase_list {
  width: 100%;
  margin-bottom: 44px;
  display: flex;
  column-gap: 59px;
}
.purchase_list .list_item {
  width: 294px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.purchase_list h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.purchase_list figure img {
  width: 250px;
  height: auto;
}
.purchase_list .bttn_area {
  width: 100%;
  margin-top: 6px;
}
.purchase_list .amazon {
  min-height: 135px;
  padding-bottom: 20px;
}
.purchase_list .rakuten {
  padding-top: 18px;
  border-top: 2px dashed #000;
}
.amazon_bttn, .rakuten_bttn {
  width: 100%;
  height: 44px;
  border-radius: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  transition: .3s;
  position: relative;
}
.amazon_bttn::after, .rakuten_bttn::after {
  content: "";
  width: 27px;
  height: 23px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/ico-cart.svg");
  background-repeat: no-repeat;
  background-size: 27px auto;
}
.amazon_bttn:hover, .rakuten_bttn:hover {
  box-shadow: unset;
  transform: translateY(4px);
}
.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: 1px;
  border-radius: 4px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amazon .coupon .box {
  border-color: #FF7D00;
  width: 192px;
  flex-direction: column;
  font-size: 10px;
  font-weight: 700;
}
.rakuten .coupon .box {
  border-color: #d70000;
  width: 100%;
  position: relative;
  transition: all 0.3s ease;
}
.rakuten .coupon .box::after {
  content: "";
  width: 29px;
  height: 40px;
  background-image: url("../images/ico-coupon.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: filter 0.3s ease;
}
.rakuten .coupon .box:hover::after {
  filter: brightness(0) invert(1);
}
.amazon .coupon .coupon-text {
  font-size: 19px;
  color: #ff7d00;
}
.rakuten .coupon .box a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  color: #d70000;
  transition: color 0.3s ease;
}
.rakuten .coupon .box:hover {
  background-color: #d70000;
}
.rakuten .coupon .box:hover a {
  color: #fff;
}
.copy-bttn {
  width: 89px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 40px;
  color: #000;
  transition: color 0.3s ease;
}
.copy-bttn .copy-txt {
  display: inline-block;
  padding-left: 22px;
  position: relative;
}
.copy-bttn .copy-txt::after {
  content: "";
  width: 17px;
  height: 40px;
  background-image: url("../images/ico-copy.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: filter 0.3s ease;
}
.copy-bttn:hover {
  background-color: #000;
  color: #fff;
}
.copy-bttn:hover .copy-txt::after {
  filter: brightness(0) invert(1);
}
.coupon small {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 6px;
  font-size: 12px;
}


/* 吹き出しを表示する親要素の基準設定 */
.coupon, .copy-bttn {
  position: relative;
}
/* 吹き出しの基本スタイル */
.copy-tooltip {
  position: absolute;
  bottom: 125%;
  /* ボタンの上側に配置 */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  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: 6px;
  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: center;
  font-size: 14px;
  line-height: 1.71;
  font-weight: 500;
  letter-spacing: 0;
}
.purchase_list + p span {
  color: #D70000;
}



/*service*/
.service {
  width: 730px;
  border-radius: 12px;
  background-color: #fff;
  padding-top: 32px;
  margin: 0 auto;
  overflow: hidden;
}
.service_kv {
  width: 570px;
  margin: 0 auto;
  position: relative;
}
.service_kv img {
  width: 100%;
  height: auto;
}
.service02 {
  position: absolute;
  top: 0;
  left: 0;
}
.flat12_outline {
  width: 478px;
  margin: 0 auto;
  padding: 23px 0 82px;
  text-align: center;
}
.flat12_outline .bal01,
.flat12_outline .bal02 {
  width: 478px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17.5px;
  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_pc.svg");
  margin-bottom: 11px;
}
.flat12_outline .bal02 {
  background-image: url("../images/bal-2_pc.svg");
  margin-bottom: 35px;
}
.flat12_ttl {
  color: #006ebf;
  font-size: 17.5px;
  font-weight: 700;
}
.flat12_ttl a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background-color: #006ebf;
  border: 1px solid #006ebf;
  width: 100%;
  height: 50px;
  border-radius: 6px;
  margin-top: 10px;

  @media (hover: hover) {
    transition: background-color .3s ease, color .3s ease;

    &:hover {
      background-color: #fff;
      color: #006ebf;
    }
  }
}



.flat12_step {
  background-color: #FFE800;
  padding: 24px 32px 49px;
}
.flat12_step_ttl {
  text-align: center;
  margin-bottom: 25px;
  font-size: 17.5px;
  font-weight: 700;
}
.step_list02 {
  width: 687px;
  display: flex;
  column-gap: 8px;
}
.step_list02 li {
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  background-color: #fff;
  text-align: center;
  width: 131px;
  height: 140px;
  padding: 13px 10px 13px 0;
  display: flex;
  flex-direction: column;
}
.step_list02 .num {
  font-size: 12px;
  font-weight: 500;
  color: #006ebf;
  margin-bottom: 6px;
}
.step_list02 p {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.47;
  min-height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step_list02 .step_icon {
  margin-top: auto;
  margin-bottom: 0;
}
.step_list02 .step_icon img {
  width: 30px;
  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: 85px;
}
.bttn_wrapper .staff {
  position: absolute;
  left: 0;
  top: 22px;
  display: flex;
}
.bttn_wrapper .staff .img {
  width: 80px;
  margin-right: 10px;
}
.bttn_wrapper .staff .txt {
  font-size: 13px;
  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: 31px;
  height: 17px;
}
.bttn_wrapper .staff .txt::before {
  background-image: url("../images/ornament-3a.svg");
  top: -15px;
}
.bttn_wrapper .staff .txt::after {
  background-image: url("../images/ornament-3b.svg");
  bottom: 15px;
}
.bttn_wrapper .bttn_lead {
  text-align: center;
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 20px;
}
.bttn_wrapper .bttn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 670px;
  height: 67px;
  border-radius: 67px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background-color: #ff8700;
  position: relative;
  transition: all 0.3s;
}
.bttn_wrapper .bttn a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  right: 18px;
  top: 29px;
  transition: all 0.3s;
}
.bttn_wrapper .bttn a:hover {
  color: #ff8700;
  background-color: #fff;
}
.bttn_wrapper .bttn a:hover::after {
  border-right: 1px solid #ff8700;
  border-bottom: 1px solid #ff8700;
}





.footer-area {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 35px;

  .footer-inner {
    text-align: center;
    padding-block: 70px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7142857142857142;
    background-color: var(--color-gray);
  }
  .copyright {
    background-color: var(--color-blue);

    p {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
    }
  }
}
.footer_banner {
  display: block;
  width: 238px;
  height: 112px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2000;
  opacity: 0;
  animation: simple-fi 1s ease 1s both;
  background-color: #fff;
  border-radius: 19px 0 0 0;
  overflow: hidden;

  a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(249, 0, 19, 1) 0%, rgba(255, 135, 0, 1) 100%);
    border-radius: 19px 0 0 0;
    padding: 9px 0 0 9px;

    @media (hover: hover) {
      opacity: 1;
      transition: opacity .3s ease;

      &:hover {
        opacity: .6
      }
    }

    .inner-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 12px 0 0 0;
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;

      .bnnr {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 148px;
        height: 28px;
        background-color: #fff;
        border-radius: 100px;
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 20px;
      }
      .knock {
        font-size: 14px;
        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: 20px;
        color: #fff;
      }
    }
  }
}