@charset "UTF-8";

.sp-only { display: none; }
br.pc { display: block; }
br.sp { display: none; }
a[href^="tel:"] { pointer-events: none; cursor: default; }

/* /////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 767px) {

html > * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { overflow-y: visible; }
body { min-width: 100%; overflow-x: hidden; }
body.fixed { position: fixed; width: 100%; height: 100%; }

.sp-only { display: block; }
.pc-only { display: none; }
br.pc { display: none; }
br.sp { display: block; }
a[href^="tel:"] { pointer-events: auto; cursor: pointer; }

.wrap { margin: 0 auto; }
.inner { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }

.flex:not(.alw) { flex-flow: column nowrap; }
.flex.istart:not(.alw),
.flex.iend:not(.alw),
.flex.icenter:not(.alw) { align-items: stretch; }
.flex.half:not(.alw) > * { width: 100%; }
.flex.half50:not(.alw) > * { width: 100%; }
.flex.third:not(.alw) > * { width: 100%; }
.flex.quarter:not(.alw) > * { width: 100%; }
.flex.reverse:not(.alw) { flex-flow: column nowrap; }
/*
.flex:not(.alw) > * { margin-bottom: 20px; }
.flex:not(.alw) > *:last-child { margin-bottom: 0; }
*/
.flex.sp-half > * { width: 48%; }
.flex.sp-half50 > * { width: 50%; }
.flex.sp-fwrap { flex-wrap: wrap; }

.sp-flex { display: flex; align-items: center; }

.pc-center { text-align: left; }
.sp-center { text-align: center; }

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

html { font-size: calc(100vw / 320 * 10); }
body { font-size: 1.4rem; }

/* ---------------------------------------------------------------------------
//  header
--------------------------------------------------------------------------- */
header .logo {
  width: 14.2rem;
  height: 2.9rem;
  
  span {
    width: 11rem;
  }
}


/* ---------------------------------------------------------------------------
//  common
--------------------------------------------------------------------------- */
h2.base {
  font-size: 2.6rem;
  
  span {
    font-size: 1.6rem;
  }
}

.sec-base {
  padding: 6rem 0;
}

/* ---------------------------------------------------------------------------
//  mv
--------------------------------------------------------------------------- */
.mv {
  padding-bottom: 3rem;
  
 .mv-container {
    h1 {
      width: 23.4rem;
      top: 13rem;
    }
    
    .cards {
      width: 125rem;
      height: 40rem;
      position: relative;
      
      .photo01 {
        width: 12.4rem;
        top: 3rem;
        left: 1.7 rem;
      }
      .photo02 {
        width: 17.8rem;
        top: 0;
        left: 32.6rem;
      }
      .photo03 {
        width: 16.4rem;
        top: .6rem;
        left: 56.2rem;
      }
      .photo04 {
        width: 11.6rem;
        top: 4.2rem;
        left: 73.6rem;
      }
      .photo05 {
        width: 17rem;
        top: 0;
        left: 86.8rem;
       }
      .photo06 {
        width: 18rem;
        top: 19.4rem;
        left: 0;
      }
      .photo07 {
        width: 12.8rem;
        top: 31.4rem;
        left: 14.1rem;
      }
      .photo08 {
        width: 12.6rem;
        top: 31.7rem;
        left: 38.9rem;
      }
      .photo09 {
        width: 18.6rem;
        top: 21.4rem;
        left: 48.2rem;
       }
      .photo10 {
        width: 14rem;
        top: 20.3rem;
        left: 82.9rem;
      }
      .blur01 {
        width: 18.2rem;
        top: 3.4em;
        left: 12.2rem;
      }
      .blur02 {
        width: 19.8rem;
        top: .8em;
        left: 101.2rem;
      }
      .blur03 {
        width: 16.5rem;
        top: 28.3rem;
        left: 5.4rem;
      }
      .blur04 {
        width: 19rem;
        top: 18.1rem;
        left: 60.7rem;
      }
      .blur05 {
        width: 16.8rem;
        top: 28.1rem;
        left: 94.8rem;
      }
      .card01 {
        width: 20rem;
        top: 19.9rem;
        left: 24.4rem;
      }
      .card02 {
        width: 20rem;
        top: 25.4rem;
        left: 68.5rem;
      }
      .card03 {
        width: 20rem;
        top: 17.9rem;
        left: 101.9rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// sec01
--------------------------------------------------------------------------- */
.sec01 {
  .text {
    p {
      font-size: 1.4rem;
    }
    .campaign {
      font-size: 1.1rem;
      
      span {
        padding-right: 0;
        display: block;
      }
    }
  }
  
  .step {
    width: 100%;
    margin: 5rem auto;
    padding: 4rem;
    
    &::before {
      background: url(../img/frame-top.svg) center center / contain no-repeat;
      width: 8rem;
      height: 2rem;
      top: 0;
      left: auto;
      right: 0;
    }
    
    &::after {
      background: url(../img/frame-bottom.svg) center center / contain no-repeat;
      width: 8rem;
      height: 2rem;
      bottom: 0;
      right: auto;
      left: 0;
    }
    
    h3 {
      font-size: 1.6rem;
      margin: 0 auto 1.5rem;
    }
    .item {
      h4 {
        font-size: 1.8rem;
      }
      .icon {
        width: 5rem;
        margin: 0;
      }
      p {
        width: calc(100% - 5rem);
        font-size: 1.6rem;
        font-weight: 500;
        height: auto;
        display: block;
        text-align: left;
        padding-left: 1rem;
      }
    }
    .arrow {
      width: 2rem;
      margin: 1rem auto;
      
      &::after {
        background: url(../img/step-down.svg) center center / contain no-repeat;
        width: 2rem;
        height: 2.4rem;
      }
    }
  }
  
  .card {
    h3 {
      font-size: 1.3rem;
      margin-bottom: 2rem;
    }
     
    .card2 {
      padding: 1.5rem;
      width: 26.6rem;
      
      .image {
        width: 5.8rem;
      }
      p {
        font-size: 1.4rem;
      }
      .icon {
        width: 2rem;
      }
    }
  }
  .brand {
    margin-top: 6rem;
    
    > .flex {
      justify-content: flex-start;
      gap: 4rem;
    }
    .flex_visa{
      width: 100%;
      gap: 0;

      .item_visa{
        h5{
          margin-top: 0;
        }
      }
    }
    
    h3 {
      font-size: 1.6rem;
      margin-bottom: 3rem;
    }
    .cp{
      font-size: 1.6rem;
      margin: -2rem auto 3rem;
    }
    .no-cp{
      margin: -2rem auto 3rem;
    }
    .item {
      padding-top: 2rem;
      width: 100%;
      
      .logo {
        width: 10.5rem;
        margin: 0 auto 1rem;
      }
      .logos {
        > div {
          width: 10.5rem;
        }
      }
      h4 {
        font-size: 2rem;
        height: auto;
      }
      h5 {
        font-size: 1.6rem;
        margin: 2rem auto 1rem;
      }
      .mile {
        .red {
          font-size: 4.6rem;
        }
      }
      .special {
        font-size: 1.4rem;
      }
      .small {
        font-size: 1.2rem;
      }
      .plus {
        width: 2.1rem;
        margin: 1.2rem auto;
      }
      .text {
        font-size: 1.2rem;
        .red {
          font-size: 2rem;
          &.big {
            font-size: 3.2rem;
          }
        }
      }
      .mile + .pay {
        margin-top: 2rem;
      }
      .pay {
        p {
          font-size: 1.2rem;
        }
        .apple {
          width: 4.5rem;
        }
        .google {
          width: 4.5rem;
        }
      }
      .thin {
        font-size: 1.2rem;
        width: 22rem;
      }
      .btn {
        font-size: 1.4rem;
        padding: 1.5rem 2rem;
      }
      .banner {
        width: 22.6rem;
      }
    }






  }
  .bnr{
    h3.talent{
      font-size: 1.4rem;
      margin: 4rem 0 2rem;
    }
    .talent-bnr {
      width: 100%;
      margin: 0 auto 3rem;
    }
  }



}

/* ---------------------------------------------------------------------------
// sec02
--------------------------------------------------------------------------- */
.sec02 {
  padding-top: 0;
  .movie {
    width: 28.8rem;
    height: 36.8rem;
    padding: 0;
  }
}


/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */
footer {
  padding: 3.2rem 0;
  
  .copyright {
    font-size: 1.2rem;
  }
}



}/* @ */

/* /////////////////////////////////////////////////////////////////////////// */