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

/* benefits
----------------------------------- */
.p-benefits {
  margin: 172px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &__box {
    width: calc(50% - 18px);
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: #000 0 0 3px;
    @include f.mq(pc) {
      &:nth-of-type(n+3) {
        margin-top: 100px;
      }
    }
  }
  &__ttl {
    position: relative;
    top: -1.3em;
    margin: 0 auto;
    padding: 0.4em 1em 0.6em;
    display: table;
    font-weight: bold;
    font-size: 2.2em;
    text-align: center;
    background-color: #EBEBEB;
    border-radius: 50px;
    .num {
      margin-left: 0.1em;
      display: inline-block;
      font-size: 1.35em;
      color: #59A1C2;
    }
  }
  &__logo {
    .logo {
      margin: 0 auto;
      display: block;
      &__copyright {
        display: block;
        text-align: center;
        font-size: 10px;
        font-weight: normal;
      }
    }
    .ttl {
      position: relative;
      margin: 20px 0 0;
      min-height: 80px;
      font-weight: bold;
      font-size: 2.18em;
      text-align: center;
      color: #010101;
      &--middle {
        font-size: 1.68em;
      }
      &--small {
        font-size: 1.48em;
      }
      small {
        font-size: 0.8em;
      }
    }
    &--rakuten, &--amazon {
      display: flex;
      justify-content: center;
      align-items: center;
      .logo {
        margin: 0 2em 0 0;
        //max-width: 40%;
        max-width: 20vw;
      }
    }
    &--itunes {
      .ttl {
        margin-top: 7px;
      }
    }
  }
  &__present {
    margin: 35px 15px 15px;
    padding: 0.3em 0.2em 0.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size: 1.875em;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
    background-color: #FBF6DC;
    &--small {
      font-size: 1.4em;
      p {
        position: relative;
        top: 0.2em;
      }
      mark {
        position: relative;
        top: -0.2em;
      }
    }
    .num {
      font-size: 1.5em;
      color: #FD5F00;
    }
    mark {
      background:linear-gradient(transparent 75%, #ffd07d 75%);
    }
  }
  &__annotation {
    padding: 20px 15px;
    p {
      margin: 0 0 5px;
      display: inline-block;
      font-size: 14px;
    }
  }
  &__notes {
    margin: 2em 0 0;
    p {
      @include f.justify;
      &:nth-of-type(n+2) {
        margin-top: 0.4em;
      }
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 1240px) {
    font-size: 1.25vw;
  }
  
  @include f.mq(sp) {
    margin: 50px auto 0;
    width: calc(100% - 20px);
    &__box {
      margin: 0;
      width: 100%;
      font-size: 3vw;
      &:nth-of-type(n+2) {
        margin-top: 15vw;
      }
    }
    &__ttl {
      top: -1.3em;
      padding: 0.4em 1em 0.6em;
      white-space: nowrap;
      font-size: 1.8em;
    }
    &__logo {
      margin-top: -4vw;
      .logo {
        &__copyright {
          font-size: 8px;
        }
      }
      .ttl {
        margin: 3vw 0 0;
        font-size: 2.2em;
        &--middle {
          font-size: 1.68em;
        }
        &--small {
          font-size: 1.26em;
        }
        small {
          font-size: 0.8em;
        }
      }
      &--rakuten {
        .logo {
          width: 20vw;
        }
      }
      &--amazon {
        .logo {
          width: 38vw;
          max-width: 38vw;
        }
      }
      &--itunes {
        .ttl {
          margin-top: 3vw;
        }
      }
    }
    &__present {
      margin: 4vw 1vw 2vw;
      font-size: 1.65em;
      &--small {
        font-size: 1.2em;
        p {
          position: relative;
          top: 0.2em;
        }
        mark {
          position: relative;
          top: -0.2em;
        }
      }
    }
    &__notes {
      margin: 10px auto 0;
      width: calc(100% - 20px);
      line-height: 1.6;
      font-size: 12px;
    }
  }
}