@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; }

.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: 2rem;

  span {
    font-size: 1.6rem;
  }
}

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

.btn {
  margin: 3rem auto 0;
  font-size: 1.4rem;
  padding: 1.5rem 2rem;

  &.down::after {
    width: 2rem;
    height: 2rem;
    margin-left: .5rem;
    vertical-align: -.5rem;
  }
  &.card::after {
    width: 2rem;
    height: 2rem;
    margin-left: .5rem;
    vertical-align: -.5rem;
  }
  &.window::after {
    width: 2rem;
    height: 2rem;
    margin-left: .5rem;
    vertical-align: -.5rem;
  }
}

table.base {
  th, td {
    font-size: 1.2rem;
  }
  .sticky {
    position: sticky;
    top: 0;
    left: 0;
    border: none;
    background: none;
  }
  .sticky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: .1rem solid #BFC0C0;
    z-index: -1;
    box-sizing: content-box;
  }
}


/* ---------------------------------------------------------------------------
//  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;
      }
    }
  }
  .campaign {
    padding: 2rem 0;
    margin-top: 3rem;

    .title {
      margin-bottom: 1rem;

      .logo {
        width: 6.5rem;
      }
      h2 {
        font-size: 1.4rem;
        margin-left: 1rem;
        padding-left: 1rem;
        line-height: 1.2;
        display: flex;
        align-items: center;

        span {
          font-size: 1.2rem;
          margin-right: 1rem;
        }
      }
    }
    .head {
      width: 100%;

      .h3-container {
        display: table;
        margin: 0 auto;
      }

      h3 {
        font-size: 1.6rem;
        line-height: 2;
      }
      .mile {
        margin: 0 0 1rem;
        justify-content: center;

        .txt {
          font-size: 1.6rem;
          line-height: 1;
        }
        .red {
          font-size: 4rem;
        }
      }
    }
    .body {
      width: 100%;
      margin-left: 0;

      h4 {
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: 1rem;
      }
      p {
        font-size: 1rem;
        line-height: 1.6;
      }
      p:not(.id) {
        display: table;
        margin: 0 auto;
      }
      .id {
        text-align: right;
        margin-top: 1rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// sec01
--------------------------------------------------------------------------- */
.sec01 {
  padding: 5rem 0 9rem;

  .base {
    margin-bottom: 3rem;
  }
  .cards {
    width: 27.6rem;
    height: 27.6rem;
    margin: 0 auto;

    .main {
      width: 16rem;
    }
    .left {
      width: 16rem;
    }
    .right {
      width: 16rem;
    }
    p {
      font-size: 1.4rem;
    }
    .bottom {
      bottom: 2rem;
    }
  }
  .text {
    width: 23rem;
    font-size: 1.4rem;
    margin: 2rem auto 0;
  }
  h3 {
    font-size: 1.4rem;
    margin: 4rem 0 2rem;
  }
  .card-nav {
    gap: 0;

    a {
      width: 100%;

      .image {
        width: 5.8rem;
        margin-right: 1rem;
      }
      .icon {
        width: 2rem;
      }
      + a {
        border-top: none;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// tabs
--------------------------------------------------------------------------- */
#tabs {
  position: relative;
  padding-top: 10rem;
}

.tab-select {
  left: 3%;
  width: 94%;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    padding: .8rem;
    width: calc((100% - 1rem * 2) / 4);
    height: 4.4rem;
line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
// tabs color
--------------------------------------------------------------------------- */
#cnt4 {
  .sec02 {
    .accordion {
      dd {
        table {
          width: 51.5rem;

          .sticky::before {
            background: var(--platinum);
          }
        }
      }
    }
  }
}

#cnt1 {
  .sec02 {
    .accordion {
      dd {
        table {
          width: 51.5rem;

          .sticky::before {
            background: var(--gold);
          }
        }
      }
    }
  }
}

#cnt2 {
  .sec02 {
    .title {
      line-height: 1.157;
    }
    .accordion {
      dd {
        table {
          width: 48.8rem;

          .sticky::before {
            background: var(--club);
          }
        }
      }
    }
  }
}


#cnt3 {
  .sec02 {
    .title {
      line-height: 1.157;
    }
    .about {
      .flex {
        width: 18rem;
      }
    }
    .accordion {
      dd {
        table {
          width: 48.8rem;

          .sticky::before {
            background: var(--reg);
          }
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec02
--------------------------------------------------------------------------- */
.sec02 {
  margin-top: -15.5rem;

  h2 {
    margin-bottom: 4rem;
  }
  .title {
    margin: 11rem 0 2rem;
    font-size: 1.6rem;

    span {
      display: table;
      margin: 0 auto .5rem;
    }
  }
  .about {
    gap: 1rem;

    .image {
      width: 19.7rem;
      margin: 0 auto;
    }
    .text {
      width: 100%;
      font-weight: 500;

      .icon {
        width: 7.2rem;
        margin: 0 auto;
      }
      p {
        font-size: 1.1rem;
      }
    }
  }
  .title2 {
    margin-top: 3rem;

    h3 {
      font-size: 1.4rem;
      text-align: center;
    }
    .mile {
      padding-left: 0;
      margin-left: 0;
      border-left: none;
      justify-content: center;

      .txt {
        font-size: 1.6rem;
      }
      .red {
        font-size: 4.4rem;
      }
    }
  }
  .price {
    margin-top: 3rem;
    font-size: 1.2rem;

    span {
      font-size: 2rem;
    }
  }
  .nav {
    font-size: 1.4rem;
    padding: 1.2rem 1.5rem;
    margin: 2rem auto 0;

    &::after {
      width: 2rem;
      height: 2rem;
      vertical-align: -.5rem;
    }
    &.plus {
      font-size: 1.6rem;

      &::after {
        width: 2rem;
        height: 2rem;
        vertical-align: -.5rem;
      }
    }
  }
  .accordion {
    dd {
      width: 100%;
      margin: 0 auto;
      padding-top: 3rem;

      h4 {
        font-size: 1.4rem;
      }

      table {
        sup {
          font-size: .8rem;
        }
        tbody {
          th {
            font-size: 1.2rem;
          }
          td {
            font-size: 1.6rem;

            span {
              font-size: 2.2rem;
            }
          }
          tr:last-of-type td {
            span {
              font-size: 2.6rem;
            }
          }
        }
      }
      li {
        font-size: 1.2rem;

        a {
          &::after {
            width: 1.4rem;
            height: 1.4rem;
            margin-left: .3rem;
            vertical-align: -.3rem;
          }
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec03
--------------------------------------------------------------------------- */
.sec03 {
  padding-top: 10rem;

  &::before {
    width: 32rem;
    height: 5.6rem;
    top: -.5rem;
    left: calc(50% - 16rem);
  }

  .head {
    font-size: 1.6rem;
    margin-top: 3rem;

    span {
      font-size: 1.8rem;
      display: block;
    }
  }
  .image {
    width: 100%;
  }
  .cap {
    font-size: 1.2rem;
  }
  .nav {
    font-size: 1.4rem;
    padding: 1.2rem 1.5rem;
    margin: 3rem auto 0;

    &::after {
      width: 2rem;
      height: 2rem;
      vertical-align: -.5rem;
    }
  }
  .bnr {
    margin: 3rem auto 0;

    p {
      font-size: 1.4rem;
    }
    a {
      width: 100%;
    }
  }
  h3.campaign {
    font-size: 1.8rem;
    margin: 3rem 0 2rem;

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

    dt {
      padding: 1.5rem 4rem 1.5rem 1.5rem;
      font-size: 1.3rem;

      &::after {
        width: 2rem;
        height: 2rem;
        right: 1rem;
      }

      span {
        font-size: 2rem;
      }
    }
    dd {
      padding: 1rem 1rem 2rem;

      .gray {
        margin-bottom: 1.2rem;
      }
      h4 {
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
      }
      .kome {
        font-size: 1.2rem;
      }
      .detail {
        margin: 1rem auto 0;
        padding: 1rem 3rem .5rem 1rem;

        &::after {
          width: 1.4rem;
          height: 1.4rem;
          top: calc(50% - .3rem);
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec04
--------------------------------------------------------------------------- */
.sec04 {
  .head {
    font-size: 1.2rem;
    margin: 3rem 0 2rem;

    span {
      font-size: 1.6rem;
    }
    .icon {
      width: 4.4rem;
      margin-right: 1rem;
    }
    h3 {
      font-size: 1.8rem;
      margin-top: 1rem;
    }
  }
  .item1 {
    width: 100%;

    .flex {
      align-items: flex-start;
      justify-content: center;
    }

    .item1-1 {
      width: 10.2rem;
      text-align: center;

      h4 {
        font-size: 1.2rem;
      }
      .image {
        width: 4.8rem;
        margin: 2rem auto;
      }
    }
    .item1-2 {
      width: 11.8rem;

      h4 {
        font-size: 1.4rem;
      }
      .image {
        width: 9rem;
      }
      .red {
        font-size: 1.6rem;

        + p {
          font-size: 1rem;
        }
      }
    }
    .right {
      width: 1.2rem;
      margin: 5rem 1rem 0;
    }
  }
  .item2 {
    width: 100%;
    padding: 1rem;
    margin: 3rem 0 0;

    .title {
      background: #fff;
      padding: 1.5rem;
      border-radius: .6rem;
      margin-bottom: 1rem;

      .point {
        font-size: 1.4rem;
      }
      .automatic {
        font-size: 1.2rem;

        h4 {
          font-size: 1.6rem;
        }
      }
    }
    > p {
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }
    .cards {
      .cards1 {
        width: 51%;
      }
      .cards2 {
        width: 49%;
      }
    }
  }
  .bonus {
    margin: -3rem 0 4rem;
    width: 100%;

    h4 {
      margin-top: 3rem;
      font-size: 1.8rem;

      span {
        width: 4.2rem;
      }
    }
    .text {
      height: 8rem;
    }
    .cards > div {
      height: auto;
    }
    .mile {
      margin-top: 1rem;

      span {
        font-size: 2.2rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec05
--------------------------------------------------------------------------- */
.sec05 {
  .step {
    margin-top: 4rem;

    .head {
      font-size: 1.8rem;
      text-align: center;

      .red {
        display: block;
        margin: 0 0 1rem;
      }
      h3 {
        width: auto;
        font-size: 1.8rem;
      }
    }
    .body {
      width: 100%;
      justify-content: center;

      .icon {
        width: 5rem;
        margin-right: 1rem;
      }
      p {
        width: 17rem;
        font-size: 1.2rem;
      }
    }
    .note {
      width: 23.4rem;
      margin: 1rem auto 0;
      padding: 1.4rem 1.4rem;
      font-size: 1rem;

      .title {
        text-align: center;
        margin-bottom: .5rem;
      }
    }

    + .step {
      margin-top: 6rem;

      &::before {
        width: 1.8rem;
        height: 2.3rem;
        top: -4.5rem;
        left: calc(50% - .9rem);
      }
    }
  }
  .nav {
    display: table;
    font-size: 1.4rem;
    font-weight: 500;
    border-top: .1rem solid #686767;
    border-bottom: .1rem solid #686767;
    padding: 1.2rem 1.5rem;
    margin: 3rem auto 0;

    &.active {
      display: none;
    }

    &::after {
      content: "";
      background: url(../img/icon-plus-gray.svg) center center / contain no-repeat !important;
      display: inline-block;
      width: 2rem;
      height: 2rem;
      margin-left: 1rem;
      vertical-align: -.5rem;
      transition: .3s;
    }
  }
  .sp-close {
    display: none;
  }
  .campaign {
    margin-top: 3rem;
    padding: 2rem;

    h3 {
      font-size: 1.4rem;
      margin-bottom: 2rem;
    }

    .image {
      width: 100%;
    }
    .text {
      width: 100%;
      margin-top: 1rem;
      font-size: 1.2rem;
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec06
--------------------------------------------------------------------------- */
.sec06 {
  .faq {
    width: 100%;
    margin: 3rem auto;

    dt {
      padding: 1.5rem 4rem 1.5rem 1.5rem;
      font-size: 1.3rem;

      &::after {
        width: 2rem;
        height: 2rem;
        right: 1rem;
      }
    }
    dd {
      padding: 1rem 1rem 2rem;

      p + p {
        margin-top: 1.4rem;
      }
      .detail {
        margin: 1rem auto 0;
        padding: 1rem 3rem .5rem 1rem;

        &::after {
          width: 1.4rem;
          height: 1.4rem;
          top: calc(50% - .3rem);
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec07
--------------------------------------------------------------------------- */
.sec07 {
  #notice {
    margin: 3rem auto 0;
    width: 100%;

    .notice-btns {
      margin-bottom: 2rem;

      a {
        font-size: 1.1rem;
        height: 5rem;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .notice-body {
      font-size: 1.2rem;

      h3 {
        margin-top: 2rem;
        font-size: 1.2rem;
      }

      a {
        &::after {
          width: 1.4rem;
          height: 1.4rem;
          margin-left: .3rem;
          vertical-align: -.3rem;
        }
      }
      .small {
        font-size: 1rem;
      }
    }
    .notice-table {
      th {
        font-size: 1rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// modalwindow
--------------------------------------------------------------------------- */
#jal-card-est {
  .body::after {
    content: "";
    display: block;
    background: url(../img/text-scroll.svg) center center / contain no-repeat;
    width: 1.2rem;
    height: 5.5rem;
    position: absolute;
    bottom: 0;
    left: -1.5rem;
  }
  .contents {
    border: .4rem solid #653A09;
    border-top: none;
    border-bottom: none;
    padding: 3rem 1rem;
    border-radius: 0;

    .head {
      gap: 4rem;

      p {
        font-size: 1.4rem;
      }
      h3 {
        font-size: 1.8rem;
      }
      .image {
        width: 16rem;
        margin: 0 auto;
      }
    }
    h4 {
      font-size: 2.2rem;
      text-align: center;
      margin: 4rem 0 3rem;
    }
    .item {
      width: 48%;

      .icon {
        width: 7.2rem;
      }
      p {
        font-size: 1.2rem;
      }
    }
    .nav {
      display: table;
      font-size: 1.8rem;
      font-weight: 500;
      border-top: .1rem solid #686767;
      border-bottom: .1rem solid #686767;
      padding: 1.4rem 2rem;
      margin: 4rem auto 0;

      &::after {
        content: "";
        background: url(../img/icon-window-est.svg) center center / contain no-repeat;
        display: inline-block;
        width: 3rem;
        height: 3rem;
        margin-left: 1rem;
        vertical-align: -.9rem;
      }
    }
  }
}

#benefits {
  .body::after {
    content: "";
    display: block;
    background: url(../img/text-scroll.svg) center center / contain no-repeat;
    width: 1.2rem;
    height: 5.5rem;
    position: absolute;
    bottom: 0;
    left: -1.5rem;
  }
  .contents {
    border: .4rem solid var(--reg);
    border-top: none;
    border-bottom: none;
    border-radius: 0;

    h3 {
       font-size: 1.8rem;
    }
    .item {
      width: 100%;
    }
    .main {
      height: auto;
      gap: 2rem;

      .image {
        width: 10rem;
      }
      p {
        font-weight: 500;
        text-align: center;
        margin-top: 1rem;
      }
    }
    .item:nth-child(2) {
      margin-top: 3rem;
      .image {
        width: 11.5rem;
      }
    }
  }
}

#service-gold {
  .contents {
    border: .4rem solid var(--gold);
    border-top: none;
    border-bottom: none;
    border-radius: 0;
  }
}
#service-club {
  .contents {
    border: .4rem solid var(--club);
    border-top: none;
    border-bottom: none;
    border-radius: 0;
  }
}
#service-reg {
  .contents {
    border: .4rem solid var(--reg);
    border-top: none;
    border-bottom: none;
    border-radius: 0;

    .item3 {
      .note {
        margin-top: 2rem;
      }
    }
  }
}

.modal-service {
  &.body::after {
    content: "";
    display: block;
    background: url(../img/text-scroll.svg) center center / contain no-repeat;
    width: 1.2rem;
    height: 5.5rem;
    position: absolute;
    bottom: 0;
    left: -1.5rem;
  }
  h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
  .item1 {
    .flex {
      justify-content: center;
    }
    .flex + .flex {
      margin-top: 2rem;
    }
    .icon {
      width: 5.6rem;
      margin-right: 1rem;
    }
  }
  .item2 {
    margin-top: 4rem;

    .sp-flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon {
      width: 6.6rem;
      margin: 0 1rem 0 0;
      padding-top: 0;
    }
    .text {
      width: 11.8rem;
    }
    .red {
      font-size: 1.6rem;
      text-align: left;
    }
    .kome {
      font-size: 1rem;
      padding: 0;
    }
  }
  .item3 {
    margin-top: 4rem;

    .icon {
      width: 7.2rem;
    }
    .text {
      font-size: 1.2rem;
    }
    .note {
      margin-top: 2rem;
    }
  }
  .note {
    .big {
      font-size: 3rem;
    }
  }
}


#card-gold {
  .contents {
    border: .4rem solid var(--gold);
  }
}
#card-club {
  .contents {
    border: .4rem solid var(--club);
  }
}
#card-reg {
  .contents {
    border: .4rem solid var(--reg);
  }
}

.modal-card {
  .contents {
    padding: 2rem !important;
  }
  h3 {
    font-size: 1.6rem;
    height: auto;
    margin-bottom: 1rem;
  }
  .card {
    width: 10.3rem;
    margin: 0 auto;

    &::after {
      width: 3.3rem;
      height: 2.3rem;
      right: -4rem;
    }
  }
  .btn {
    margin-top: 1.6rem;
  }
  .item:last-child {
    margin-top: 2rem;
  }
}

/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */
footer {
  padding: 3.2rem 0;

  .copyright {
    font-size: 1.2rem;
  }
}



}/* @ */

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