@use "../../foundation/import" as f;

/* price
----------------------------------- */
.p-price {
  margin: 120px 0 0;
  &__ttl {
    text-align: center;
    .sub {
      display: block;
      font-size: 1.9em;
    }
    .main {
      margin: 0.55em 0 0;
      display: block;
      font-size: 2.75em;
      em {
        font-size: 1.43em;
      }
      mark {
        color: #fd5f00;
      }
    }
  }
  &__box {
    margin: 37px 0 0;
    padding: 50px 40px 36px;
    font-weight: bold;
    font-size: 16px;
    border: #EBEBEB 12px solid;
    border-radius: 30px;
  }
  &__cap {
    text-align: center;
    font-size: 2.5em;
    color: #fd5f00;
  }
  &__items {
    margin: 40px 0 0;
    display: flex;
    justify-content: center;
  }
  &__item {
    width: 33.33%;
    padding: 27px 0 30px;
    &--yl {
      background-color: #FBF6DC;
    }
    &--bl {
      background-color: #e9f4f9;
    }
    &--og {
      background-color: #fff3e8;
    }
    &-ttl {
      padding: 0 0.6em;
      text-align: center;
      font-size: 2.14em;
      font-weight: bold;
      line-height: 1.2;
      mark {
        color: #FD5F00;
      }
      small {
        font-size: 0.72em;
        font-weight: 500;
      }
    }
    &-img {
      img {
        margin: 21px auto 5px;
        display: block;
        max-width: 100%;
      }
      .cap {
        margin: 0 auto;
        width: calc(100% - 20px);
        padding: 0.6em;
        text-align: center;
        font-size: 1.6em;
        color: #fd5f00;
        border: #EBEBEB 12px solid;
        border-radius: 100px;
        background-color: #FFF;
        mark {
          font-size: 1.3em;
        }
      }
    }
    &-dtl {
      margin: 20px auto 0;
      width: calc(100% - 54px);
      text-align: center;
      font-size: 1.1em;
      border-top: 1px solid #000;
      p {
        padding: 0.5em 0.2em 0.4em;
        line-height: 1.3;
        border-bottom: 1px solid #000;
      }
      mark {
        display: inline-block;
        padding: 0 0.12em;
        font-size: 1.6em;
      }
      .plus {
        font-size: 1.4em;
      }
    }
  }
  &__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5em 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
  }
  &__note {
    &:first-of-type {
      margin: 0 2em 1em 0;
    }
    p, li {
      margin: 0;
    }
    li {
      @include f.justify;
    }
  }
  .c-cv {
    margin-top: 120px;
  }
  
  @media screen and (min-width:768px) and ( max-width:1260px) {
    &__ttl {
      font-size: 1.6vw;
    }
    &__box {
      font-size: 1.4vw;
    }
    &__item {
      &-img {
        .cap {
          border-width: 1.0vw;
        }
      }
    }
  }
  
  @include f.mq(sp) {
    margin-top: 60px;
    .c-wrap {
      width: calc(100% - 20px);
    }
    &__ttl {
      font-size: 2.4vw;
      .main {
        margin-top: 0.3em;
      }
    }
    &__box {
      margin-top: 4vw;
      padding: 6vw 4vw 6vw;
      font-size: 2.6vw;
      border-width: 4px;
      border-radius: 15px;
    }
    &__cap {
      margin: 10px 0 30px;
      font-size: 28px;
    }
    &__items {
      margin-top: 5vw;
      width: 750px;
      justify-content: flex-start;
    }
    &__item {
      width: 280px;
      padding-top: 2vw;
      &-ttl {
        padding: 20px 0 0;
        font-size: 24px;
        small {
          display: inline-block;
        }
      }
      &-img {
        padding: 0 4vw;
        img {
          margin: 21px auto 5px;
        }
        .cap {
          border-width: 4px;
          border-radius: 20px;
        }
      }
      &-dtl {
        font-size: 1.5em;
      }
    }
    &__notes {
      display: block;
      font-size: 10px;
    }
    &__note {
      &:first-of-type {
        margin-right: 0;
      }
      p, li {
        margin: 0;
      }
      li {
        @include f.justify;
      }
    }
    .c-cv {
      margin-top: 60px;
    }
  }
}