.main {
  .lower-section {
    padding: 6.5rem 2.5rem 0;
  }

  .sub-headline {
    color: #000;
    text-align: left;
    margin-bottom: 16px;
  }


  .price-summary {
    text-align: left;

    .wa-inner {
      .text {
        color: #333;
      }

      .price-image {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 32px;
        margin-bottom: 24px;
        gap: 24px;
      }

      .notes {
        display: flex;
        flex-direction: column;
        gap: 4px;
        .note {
          font-size: 0.8125rem;/*13px*/;

          &::before {
            content: "窶ｻ";
          }
        }
      }

    }
  }

  .price-example {
    .wa-inner {
      .headline {
        font-size: var(--wa-font-size-m);
        color: #000;
        line-height: 150%;
        text-align: left;
        margin-bottom: 56px;
      }

      .notes .note::before {
        content: "窶ｻ";
      }

      .example-lists {
        display: flex;
        justify-content: space-between;
        gap: 48px;
        margin-top: 40px;
        margin-bottom: 24px;

        .example-list {
          flex: 1 1 50%;
          list-style: none;

          .sub-headline {
            color: #1a1a1a;
            font-size: 1.25rem; /* 20px */
            font-weight: 500;
            line-height: 150%;
            letter-spacing: 0;
            text-align: left;
          }

          .example-summary {
            margin: 16px 0 24px 0;
          }

          li {
            color: #333;
            font-size: var(--wa-font-size-base);
            font-style: normal;
            font-weight: 400;
            line-height: 160%;
          }

          .price-example-image {
            border-radius: 4px;
            text-align: center;
            background: #f5f7ff;

          }
        }
      }
    }
  }

  .price-free-card {
    padding: 6.5rem 2.5rem 0;

    .free-card-inner {
      padding: 72px 120px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--wa-pc-sub-bg-color);
      background-size: inherit;
      background-repeat: no-repeat;
      background-position: top;
      border-radius: 8px;
      gap: 24px;

      .summary {
        display: flex;
        flex-direction: column;


        .headline {
          color: #fff;
          font-size: var(--wa-font-size-m);
          line-height: 150%;
          text-align: left;
          margin-bottom: 16px;
        }

        .text {
          margin-bottom: 24px;
          color: #fff;
        }

        ul {
          li {
            color: #fff;
            font-size: var(--wa-font-size-base);
            font-style: normal;
            font-weight: 400;
            line-height: 160%;
            margin-bottom: 16px;
            display: flex;

            &::before {
              content: "繝ｻ";
            }
          }
        }

        .link-btn {
          width: 256px;
          padding: 16px 40px;
          border: 1px solid #343b8b;
          font-size: var(--wa-font-size-base);
          font-weight: 500;

          &:hover {
            border-color: #2E1F44;
            background: #EAE2F9;
            color: #343b8b;
          }

          &::after {
            display: block;
            width: 16px;
            height: 16px;
            background-image: url(../images/common/arrow-btn.svg);
            background-repeat: no-repeat, no-repeat;
            background-position: center;
            color: #fff;
          }
        }
      }

      .price-free-card-image {
        flex: 0 0 auto;
      }
    }
  }

  .price-structure {

    .wa-inner {

      .headline {
        font-size: var(--wa-font-size-m);
        color: #000;
        line-height: 150%;
        text-align: left;
        margin-bottom: 16px;
      }

      .text {
        color: #333;
      }

      .structure-comparison {
        margin-top: 32px;

        .structure-comparison-table {
          table-layout: fixed;
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;

          & th, td {
            padding: 1rem;
            color: #333;
            font-size: var(--wa-font-size-base);
            font-style: normal;
            line-height: 160%;
            font-weight: 400;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            vertical-align: middle;
          }

          th:first-child {
            border: 0;
            width: 240px;
          }

          th:nth-child(2) {
            border: 0;
          }

          th:nth-child(3),
          th:nth-child(4) {
            width: 200px;
          }
          thead {
            text-align: center;
            vertical-align: middle;

            .wa-logo {
              background: #4A57AD;
              padding: 4px;
              img {
                height: 61px;
                width: auto;
              }
            }
          }

          tbody {
            .items {
              border: 1px solid #ccc;
              background:#f2f2f2;
              width: 240px;
              text-align: center;
              vertical-align: middle;
            }

            .details {
              border: 1px solid #ccc;
              background:#fff;
              width: 240px;
              text-align: left;
              width: 491px;

              dl {
                margin-top: 8px;
              }

              ul {
                li {
                  a {
                    color: #0055ad;
                    text-decoration: underline;
                  }
                  :hover {
                    text-decoration: none;
                  }
                  &:first-child {
                    font-weight: 500;
                  }
                }
              }
            }

            .wa-item {
              color: #fff;
              text-align: center;
              vertical-align: middle;
              background: #4A57AD;
              width: 200px;
            }

            .non-wa-item {
              text-align: center;
              vertical-align: middle;
              border: 1px solid #ccc;
              background: #fff;
              width: 200px;
            }
          }
        }
      }
    }
  }

  #simulation {
    scroll-margin-top: 120px;
  }

  .simulation {
    .cta-btn {
      display: flex;
      justify-content: center;
      width: 262px;
      padding: 12px 40px;
      border: 1px solid #343b8b;
      font-size: var(--wa-font-size-base);
      font-weight: 500;
      margin: 40px auto 0;

      &::after {
        width: 16px;
        height: 16px;
      }
    }
  }

  .payment {
    margin-bottom: 160px;

    .wa-inner {

      .headline {
        font-size: var(--wa-font-size-m);
        color: #000;
        line-height: 150%;
        text-align: left;
        margin-bottom: 32px;
      }

      .text {
        color: #333;
        margin-bottom: 16px;
        display: flex;

        &::before {
          content: "繝ｻ";
        }
      }

      .payment-card {
        padding-left: 12px;
        color: #333;
        font-size: var(--wa-font-size-base);
        font-style: normal;
        font-weight: 500;
        line-height: 160%;

        .payment-card-lists {
          padding-left: 12px;
          display: flex;
          gap: 24px;
          margin-bottom: 16px;

          .payment-card-logo {
            width: 75px;
            height: 46px;
          }
        }

        .notes {
          padding-left: 12px;
          margin-bottom: 16px;

          .note {
            font-size: 0.8125rem;
            &::before {
              content: "窶ｻ";
            }
          }
        }
      }
    }
  }
}

@media (width < 768px) {

  .main .lower-section {
    padding: 4.5rem 0;

    .sub-headline {
      color: #1a1a1a;
      font-size: 1.375rem; /* 22px */
      font-weight: 500;
      line-height: 160%;
      letter-spacing: 0;
    }
  }

  .main .price-summary {

    .wa-inner {

      .text {
        line-height: 180%;
      }

      .price-image {
        margin-top: 40px;
        margin-bottom: 24px;
        text-align: center;
      }

      .notes {
        gap: 16px;
      }
    }
  }

  .main .price-example {

    .wa-inner {

      .headline {
        color: #1a1a1a;
        font-size: 1.375rem; /* 22px */
        font-weight: 500;
        line-height: 160%;
        letter-spacing: 0;
      }

      .example-lists {
        flex-direction: column;
        gap: 56px;

        .example-list {

          .sub-headline {
            font-weight: 500;
            line-height: 160%;
            letter-spacing: -1px;
          }

          .example-summary {
            margin: 24px 0 32px 0;
          }
        }
      }
    }
  }

  .main .price-free-card {
    background: var(--wa-sp-sub-bg-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: inherit;
    border-radius: 0;
    padding: 4.5rem 1rem;

    .free-card-inner {
      background: none;
      padding: 0;

      .summary {

        .headline {
          font-size: 1.375rem /* 22px */;
          text-align: center;
          font-weight: 500;
          line-height: 160%;
          margin-bottom: 40px;
        }

        ul {
          margin-bottom: 40px;
        }

        .link-btn {
          margin: 0 auto;
          width: 262px;
        }
      }

      .price-free-card-image {
        display: none;
      }
    }
  }

  .main .price-structure {

    .wa-inner {

      .headline {
        color: #1a1a1a;
        font-size: 1.375rem; /* 22px */
        font-weight: 500;
        line-height: 160%;
        letter-spacing: 0;
        margin-bottom: 16px;
      }

      .text {
        color: #333;
        line-height: 180%;
        margin-bottom: 0px;
      }

      .sp-structure-comparison {
        margin-top: 40px;

        .sp-structure-comparison-table {
          table-layout: fixed;
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          border: 1px solid #ccc;

          & th, td {
            color: #333;
            font-size: var(--wa-font-size-xs);
            font-style: normal;
            line-height: 180%;
            font-weight: 400;
            padding: 8px;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
          }

          .category {
            text-align: center;
            background: #f2f2f2;
            line-height: 160%;
            border: 1px solid #ccc;

          }

          tbody {
            .details {
              ul {
                li {
                  &:first-child {
                    font-weight: 500;
                  }
                }
              }
            }

            .wa-items {
              text-align: center;
              background: #4A57AD;
              border: 1px solid #cccccc;
              padding: 2px 8px;
              img {
                height: 61px;
                width: auto;
              }
            }

            .non-wa-items {
              text-align: center;
              background: #f2f2f2;
              vertical-align: middle;
            }

            .wa-item {
              text-align: center;
              border: 1px solid #cccccc;
            }

            .non-wa-item {
              text-align: center;
            }

            .false {
              background: #4A57AD;
              color: #fff;
            }
          }
        }

        .table02 {
          margin-top: 32px;
        }
      }
    }
  }

  .main .dl-cdn-cta  {
    margin-top: 0;
  }

  .main .simulation {

    & .headline {
      font-size: 1.375rem;
    }

    .cta-btn {
      margin: 48px auto 0;
    }
  }

  .main .payment {
    margin-bottom: 0;
    .wa-inner {

      .headline {
        color: #1a1a1a;
        font-size: 1.375rem /* 22px */;
        text-align: center;
        font-weight: 500;
        line-height: 160%;
        margin-bottom: 32px;
        text-align: left;
      }

      .text {
        margin-bottom: 24px;
        text-indent: -16px;
        display: block;
      }

      .payment-card {
        .payment-card-lists {
          flex-wrap: wrap;
        }
      }
    }
  }
}

/* 譁咎≡繧ｷ繝溘Η繝ｬ繝ｼ繧ｷ繝ｧ繝ｳ */
.simulation-tab {
  display: flex;
  align-items: flex-start;
}
.simulation-tab-button {
  display: inline-flex;
  padding: 0.875rem 2.5rem;
  justify-content: center;
  align-items: center;
  background: #F5F7FF;
  border-top: solid 4px transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  color: #343B8B;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.6;
  &[aria-selected="true"] {
    font-weight: 500;
    border-top-color: #6470B9;
    border-right: 1px solid #6470B9;
    border-left: 1px solid #6470B9;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #F5F7FF;
      position: absolute;
      bottom: -1px;
      left: 0;
    }
  }
}
.simulation-inner {
  max-width: 75rem;
  margin: 0 auto;
}
.simulation-content {
  padding: 3rem 0;
  background: #F5F7FF;
  border: solid 1px #6470B9;
  border-radius: 0 .25rem .25rem;

  &.-known {
    & .simulation-input-area {
      & dl {
        & dt {
          width: auto;
        }
      }
    }
  }

  & .notes {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    & .note {
      font-feature-settings: 'palt';
      letter-spacing: 0;
      gap: .25rem;
      &::before {
        content: "窶ｻ";
      }
    }
  }
}

.simulation-content-inner {
  max-width: 30rem;
  margin: 0 auto;
}

.simulation-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.simulation-input-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  & dl {
    display: flex;
    align-items: center;
    gap: 1rem;
    & dt {
      text-align: right;
      width: 7rem;
    }
    & dd {
      display: flex;
      align-items: center;
      flex: 1;
    }
  }

  .input-text {
    width: 10.5rem;
    height: 2.5rem;
    border: 1px solid #CCC;
    background: #FFF;
    padding: .31rem;
    text-align: right;
  }

  .submit-button {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    padding: 0.365rem 2rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    background: #343B8B;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 3px;
    transition: 0.3s;
  }

  .submit-button:hover {
    border: 1px solid #343b8b;
    color : #343b8b;
    background-color: #fff;
  }
}

.simulation-input-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;

  & .multiply {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
}

.simulation-result {
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
  border-top: solid 1px #ccc;
  text-align: center;
  & dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8.75rem 0 4.25rem;;
    & dt {
      color: #666;
    }
    & dd {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      color: #666;
    }
  }
}

.simulation-result-price {
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
}

@media (width < 768px) {
  .simulation-tab {
    & li {
      flex: 1;
    }
  }
  .simulation-tab-button {
    width: 100%;
    padding: 0.625rem 0;
    font-size: 0.75rem;
  }

  .simulation-content {
    padding: 2.5rem 1.5rem;
    border-radius: 0 0 .25rem .25rem;

    & .notes {
      & .note {
        font-size: .75rem;
      }
    }
  }

  .simulation-input-area {
    gap: 1.5rem;
    & dl {
      align-items: flex-start;
      justify-content: flex-end;
      gap: .5rem;
      & dt {
        width: 6.125rem;
        flex-shrink: 0;
        font-size: 0.875rem;
        padding: .5rem 0 0;
      }
      & dd {
        font-size: 0.875rem;
        flex-wrap: wrap;
      }
    }

    .input-text {
      width: 9.5rem;
    }

    .submit-button {
      margin: 0 2.19rem 0 auto;
      position: static;
    }
  }

  .simulation-input-wrap {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .simulation-result {
    & dl {
      padding: 0 .81rem 0 2.69rem;
      & dt {
        font-size: 0.875rem;
      }
    }
  }
}