/* ============================================================================================================
* 以下：スマートフォン用（SP）
* ============================================================================================================ */

@media screen and (max-width: 767px) {
  /* sp only */
  /* ==================
  * ベーシックパーツ
  * ================== */
  body {
    font-size: 14px;

    .image {
      width: 100%;
    }
  }



  /* ==================
  * 複数個所で使用するパーツ
  * ================== */
  .sp-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .container {
    // width: calc(100% - 30px);
    width: 100%; // containerはsp版では細かく幅が異なるので、一旦リセット
  }

  .button-block {
    &__button {
      font-size: 1.2em;
      background-size: 20px auto;
      padding: 0.8em 2.3em;
    }
  }

  .bold-border {
    border: #EBEBEB 4px solid;
    border-radius: 15px;
  }

  .section-title {
    margin: 0 0 1.2em;
    font-size: 8vw;
    
    &:after {
      height: 3px;
      width: 116px;
    }

    &__text {
      padding: 0 0 1em;
    }
  }

  .sp-d-ib {
    display: inline-block;
  }




  /* ==================
  * g-header
  * ================== */
  .g-header {
    &__inner {
      padding: 10px;
      
      &__logo {
        width: 209px;
        max-width: 50%;
      }
    }
  }

  /* ==================
  * section_fv
  * ================== */
  .section_fv {
    margin-top: -3%;
    
    &__title {
      max-width: 100%;

      .image {
        width: 100%;
      }
    }

    &__image {
      max-width: 100%;
      width: 100%;
      margin-top: -6.2%;
    }
  }






  /* ==================
  * anchor-nav
  * ================== */
  .anchor-nav {
    flex-wrap: wrap;
    width: calc(100% - 20px);
    
    &__item {
      width: calc(50% - 5px);
      margin: 8vw 0 0;
      
      &:nth-of-type(-n+2) {
        margin-top: 0;
      }

      &:after {
        height: 8vw;
        background-size: 5vw auto;
      }

      &__text {
        font-size: 4.5vw;
        padding: 5% 2% 25%;
      }
    }
  }

  .anchor-nav--fv {
    margin-top: -18%;
  }




  /* ==================
  * common-cv-area
  * ================== */
  .common-cv-area {
    padding: 10vw 10px;
    
    &__title {
      font-size: 4.6vw;
      line-height: 1.6;
      margin-bottom: 0.4em;
    }

    &__inner {
      display: block;

      .button {
        width: 100%;
        max-width: 100%;
        margin: 4vw 0 0;
        font-size: 4vw;
      }
    }

    &--fv {
      background-color: #FFF;
      padding: 0;
      // margin-top: 10vw;
    }
  }

  .common-cv-area--fv {
    padding: 0 10px;
  }

  .common-cv-area--02 {
    margin-top: 60px;
  }



  /* ==================
  * section01
  * ================== */
  .section01 {
    margin-top: 60px;
    
    .container {
      width: calc(100% - 20px);
    }

    &__title {
      font-size: 2.4vw;

      .main {
        margin-top: 0.3em;
      }
    }
  }


  /* ==================
  * discount-block
  * ================== */
  .discount-block {
    margin-top: 4vw;
    padding: 6vw 4vw 6vw;
    font-size: 2.6vw;
    
    &__title {
      font-size: 6vw;
    }

    &__items {
      display: block;
      margin-top: 5vw;
    }

    .discount-item {
      width: 100%;
      margin-top: 6vw;
      padding-top: 2vw;
      
      &:nth-of-type(1) {
        margin-top: 0;
      }

      .sp-flex-box {
        padding: 0 4vw;
      }

      &__title {
        padding: 0;
        
        .accent {
        }
      }

      &__illust {
        margin-top: 0;
      }

      &__main-discount {
        border-width: 4px;
        -webkit-border-radius: 20px;
                border-radius: 20px;
      }

      &__details {
        font-size: 1.5em;
        
        .detail {

        }
      }
    }

    &__note-block {
      font-size: 10px;
    }
  }

  /* ==================
  * section02
  * ================== */
  .section02 {
    margin: 60px 0 0;
    padding-bottom: 40px;

    &__contents {
      padding: 40px 10px; // 仮
    }
    
    .container {
      width: calc(100% - 20px);
    }
    .section-title {
      margin-bottom: 3em;

      &:after {
        bottom: -1.4em;
      }
    }

    &__title {
      font-size: 3.5vw;
      width: 100%;
      
      .sub {
        font-size: 1em;
      }
      .main {
        font-size: 2em;
        left: -21%;
        bottom: 4%;
      }
    }

    &__contents {
    }
  }


  /* ==================
  * section03
  * ================== */
  .section03 {
    margin-top: 60px;
    
    &__charm {
      margin-top: 40px;
      
      &__title {
        padding: 0 5px;

        .icon {
          width: 16vw;
        }
        .text {
          font-size: 5.2vw;

          &:after {
            background-image: linear-gradient(to right,#000,#000 1px,transparent 1px,transparent 5px);
            background-size: 5px 1px;
          }
        }
      }

      .graph-image {
        width: calc(100% - 20px);
        margin: 3vw auto 0;

        &__note-block {
          font-size: 1.0em;
          margin: 3vw 0 0 3vw;
        }
      }

      .discount-block {
        width: calc(100% - 20px);
        margin: 40px auto 0;
      }

      &__flex-contents {
        display: block;
        width: calc(100% - 20px);
        margin: 5vw auto 0;

        .icon {
          display: block;
          margin: 0 auto;
        }
        .text-block {
          width: calc(100% - 20px);
          max-width: max-content;
          margin: 3vw auto 0;
          font-size: 4.3vw;
        }
      }

      &__border-note-text {
        margin: 5vw 0 0;
        font-size: 3vw;
      }

      &--02 {
        padding: 20px 0 0;
      }

      &--03 {
        margin-top: 40px;
      }

      &--04 {
        padding: 20px 0 0;
      }

      &__note-block {
        width: calc(100% - 20px);
        margin: 10px auto 0;
        line-height: 1.6;
        font-size: 12px;
      }

      &__border-block {
        margin: 10vw 0 0;
        padding: 8vw 2vw;
        font-size: 2.6vw;

        &__title {
          text-align: center;
        }

        .note-block {
          margin-top: 3vw;
          font-size: 1.4em;
          line-height: 1.4;
        }
      }
    }  // charm

    .button-block {
      margin-top: 5vw;
    }

    &__other {
      padding: 0;
      margin-top: 60px;
      width: calc(100% - 15px);
      margin-left: auto;
      margin-right: auto;
    }
  }

  .step-flex-box {
    display: block;
    margin-top: 8vw;

    &__item {
      width: 100%;
      margin: 10vw 0 0;
      
      &:nth-of-type(1) {
        margin-top: 0;
      }
      
      .title {
        font-size: 2em;
        
        .num {
          font-size: 1.6em;
        }
      }
    }
  }


  /* ==================
  * benefits-items
  * ================== */
  .benefits-items {
    margin: 50px auto 0;
    width: calc(100% - 20px);

    &__item {
      width: calc(50% - 5px);
      margin: 15vw 0 0;
      font-size: 3vw;

      &__title {
        top: -1.3em;
        padding: 0.4em 1em 0.6em;
        white-space: nowrap;
        font-size: 1.8em;

        .num {
          color: #59A1C2;
          display: inline-block;
          margin-left: 0.1em;
        }
      }

      .copyright {
        display: block;
        position: relative;
        left: auto;
        right: auto;
        top: -10px;
        width: 100%;
        text-align: center;
        font-size: 8px;
      }

      &__logo-title {
        margin-top: -4vw;
        
        .logo {
          &__rakuten {
            width: 20vw;
          }
        }

        .title {
          font-size: 2.2em;
          margin: 3vw 0 0;

          &--small {
            font-size: 1.26em;
          }

          &--middle {
            font-size: 1.68em;
          }

          .small {
            font-size: 0.8em;
          }
        }
      }

      &__benefits {
        margin: 4vw 1vw 2vw;
        font-size: 1.65em;

        .inner {
        }

        .num {
          font-size: 1.5em;
          color: #FD5F00;
        }



        &--small {
          font-size: 1.2em;
        }
      }

      &:nth-of-type(-n+2) {
        width: 100%;
        margin: 0 auto;
        
        .benefits-items {
          &__item {
            &__benefits {
              padding: 4vw;
            }
          }
        }
      }

      &:nth-of-type(2) {
        margin-top: 15vw;
      }
    }
  }

  /* ==================
  * voice-item
  * ================== */
  .voice-items {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  .voice-item {
    padding: 5vw;
    border: #EBEBEB 4px solid;
    border-radius: 20px;
    
    &__inner {
      display: block;
      padding: 10vw 0 0;
      
      .image-block {
        width: 100%;
        padding: 0;

        &__image {
          width: 40%;
          left: auto;
          position: relative;
          
          &--01 {
            left: 4%;
          }

          &--02 {
            left: 2%;
          }

          &--03 {
            left: 1%;
          }
        }
      }

      .text-block {
        width: 100%;
        padding: 4vw;
        margin-top: 16vw;

        &:before {
          background: url(../images/section04_deco_fukidashi_sp.png) rgba(255,255,255,0) no-repeat top 50% left 50%/100% 100%;
          width: 100%;
          height: 10vw;
          left: 0;
          top: -10vw;
        }

        .title {
          font-size: 5.4vw;
        }

        .sentence {
          margin-top: 4vw;
        }
      }
    }
  }


  /* ==================
  * .section04
  * ================== */
  .section04 {
    margin-top: 60px;
    padding-bottom: 40px;
  }


  /* ==================
  * section05
  * ================== */
  .section05 {
    margin-top: 60px;
    
    &__inner {
      background-size: 136% auto;
    }
    .section-title {
      font-size: 8vw;
      margin-bottom: 6vw;
    }

    &__read-text {
      font-size: 4vw;
      width: calc(100% - 20px);
      margin: 0 auto;
    }

    &__image {
      width: calc(100% - 30px);
      max-width: 100%;
    }
  }


  /* ==================
  * faq（公式サイト流用）
  * ================== */
  .l-contents__faq {
    padding-bottom: 20px;
    margin-top: 60px;
    
    .c-faq-item {
      &__head {
        &:before {
          font-size: 1.4em;
          min-width: 42px;
          width: 42px;
        }
        .c-faq__txt {
          font-size: 1em;
          padding: 12px 40px 11px 20px;
        }
      }

      &__foot {
        &:before {
          font-size: 1.4em;
          margin-top: 18px;
        }

        .c-faq__txt {
          padding: 15px 15px 15px 0;
        }
      }

      .c-faq__contents {
        width: calc(100vw - 44px);
      }
    }
  }


  /* ==================
  * section_contact
  * ================== */
  .section_contact {
    padding: 40px 0 30px;

    &__title {
      font-size: 8vw;
    }

    &__banner-block {
      display: block;
      width: calc(100% - 20px);
      margin: 10vw auto 0;
    }

    .one-banner {
      width: 100%;
      margin: 4vw auto 0;
      padding: 5vw;

      .title {
        font-size: 1.4em;
        
        .icon {
          width: 14vw;
        }
      }

      .button-block {
        margin-top: 20px;
      }

      &__button {
        margin-top: 5vw;
      }

      &__tel {
        font-size: 2.4em;
      }
    }
  }


  /* ==================
  * l-footer
  * ================== */
  .l-footer {
    .utility {
      ul {
        margin-top: 0;
        
        li {
          padding: 0 !important;
          margin: 7px !important;
          display: inline-block !important;
          width: auto !important;

          &:not(:last-child) {
            border: none !important;
            padding: 0;
          }
        }
      }
    }
  }


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


  /* ==================
  * 〇〇〇
  * ================== */
  


} /* sp only */