@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

/* ---------------------------------------------------------------------------
//  base
--------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before,
*::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
img, iframe { border: 0; vertical-align: bottom; }
ul, ol { list-style-type: none; }
a { text-decoration: none; }
mark { font-weight: bold; color: inherit; background-color: transparent; }
em { font-style: normal; }
address { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: baseline; }

.cf::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

:root {
  --gold: #C39000;
  --red: #CD130B;
  --brown: #735624;
  --club: #B6AF59;
  --reg: #686767;
}

/* ---------------------------------------------------------------------------
//  all
--------------------------------------------------------------------------- */
html { font-size: 62.5%; }
@media screen and (max-width: 1120px) {
  html { font-size: calc(100vw / 1120 * 10); }
} /*@*/

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: #000;
  line-height: 1.4;
  background: #FFF;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.4; }

a { transition: .3s; color: inherit; }
@media screen and (min-width: 768px) {
  a:hover { opacity: .7; }
}
.preload a { transition: none !important; }

.wrap { margin: 0 auto; }
.inner { max-width: 84.6rem; height: 100%; margin: 0 auto; position: relative; }
ul.indent li { text-indent: -1em; padding-left: 1em; }
ul.dot li::before { content: "・"; }
ul.asterisk li::before { content: "※"; }
ol.num { counter-reset: li; }
ol.num > li { text-indent: -1.2em; padding-left: 1.2em; }
ol.num > li:before { content: counter(li) "."; counter-increment: li; padding-right: 5px; }
ol.brackets { counter-reset: li; }
ol.brackets > li { text-indent: -1.55em; padding-left: 1.55em; }
ol.brackets > li:nth-child(n+10) { text-indent: -2.1em; padding-left: 2.1em; }
ol.brackets > li:before { content: "(" counter(li) ")"; counter-increment: li; padding-right: 5px; }
hr { display: block; height: 1px; border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 1em 0; }
img { width: 100%; height: auto; }
img.cover { width: 100%; height: 100%; object-fit: cover; }
img.contain { width: 100%; height: 100%; object-fit: contain; }
.text-overflow { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sml { font-size: 80%; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.pc-center { text-align: center; }
.bold { font-weight: 700; }

.flex { display: flex; justify-content: space-between; }
.flex.jstart { justify-content: flex-start; }
.flex.jend { justify-content: flex-end; }
.flex.jcenter { justify-content: center; }
.flex.fwrap { flex-wrap: wrap; }
.flex.fwrap.bottom > * { margin-bottom: 20px; }
.flex.istart { align-items: flex-start; }
.flex.iend { align-items: flex-end; }
.flex.icenter { align-items: center; }
.flex.half > * { width: 48%; }
.flex.half50 > * { width: 50%; }
.flex.third > * { width: 32%; }
.flex.quarter > * { width: 23%; }
.flex.reverse { flex-flow: row-reverse; }
.flex.third.fwrap::after { content: ""; width: 32%; display: block; }
.flex.quarter.fwrap::before { content: ""; width: 23%; display: block; order: 1; }
.flex.quarter.fwrap::after { content: ""; width: 23%; display: block; }

a.scale { overflow: hidden; }
a.scale img { transition: .3s; }
@media screen and (min-width: 768px) {
  a.scale:hover img { transform: scale(1.05); }
}

section {
  position: relative;
}

/* ---------------------------------------------------------------------------
//  header
--------------------------------------------------------------------------- */
header .logo {
  display: block;
  width: 24rem;
  height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  
  span {
    width: 16.8rem;
  }
}

/* ---------------------------------------------------------------------------
//  common
--------------------------------------------------------------------------- */
h2.base {
  font-size: 3.8rem;
  text-align: center;
  
  span {
    font-size: 2.4rem;
    font-weight: 500;
    display: table;
    border-bottom: .1rem solid #C0B968;
    padding-bottom: .2rem;
    margin: 0 auto 1rem;
  }
}

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

.btn {
  display: table;
  margin: 3rem auto 0;
  border: .1rem solid var(--red);
  background: #FDF7F5;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--red);
  padding: 1.8rem 4rem;
  border-radius: 10rem;
  
  @media screen and (min-width: 768px) {
    &:hover {
      background: var(--red);
      color: #fff;
      opacity: 1;
    }
  }
  
  &.down::after {
    content: "";
    display: inline-block;
    background: url(../img/icon-down-red.svg) center center / contain no-repeat;
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 1rem;
    vertical-align: -.6rem;
    transition: .3s;
  }
    
  @media screen and (min-width: 768px) {
    &.down:hover::after {
      background: url(../img/icon-down-white.svg) center center / contain no-repeat;
    }
  }

  &.card::after {
    content: "";
    display: inline-block;
    background: url(../img/icon-card-red.svg) center center / contain no-repeat;
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 1rem;
    vertical-align: -.6rem;
    transition: .3s;
  }
    
  @media screen and (min-width: 768px) {
    &.card:hover::after {
      background: url(../img/icon-card-white.svg) center center / contain no-repeat;
    }
  }

  &.window::after {
    content: "";
    display: inline-block;
    background: url(../img/icon-window-red.svg) center center / contain no-repeat;
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 1rem;
    vertical-align: -.6rem;
    transition: .3s;
  }
  
  @media screen and (min-width: 768px) {
    &.window:hover::after {
      background: url(../img/icon-window-white.svg) center center / contain no-repeat;
    }
  }
}

table.base {
  width: 100%;
  margin: 1.5rem 0;
  
  th, td {
    padding: 1rem;
    border: .1rem solid #BFC0C0;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
  }
  th {
    color: #fff;
  }
  td {
    background: #fff;
  }
}


/* ---------------------------------------------------------------------------
//  mv
--------------------------------------------------------------------------- */
.mv {
  background: linear-gradient(to left, #EAE3CA 0%, #fff 80%);
  padding-bottom: 9rem;
  
  .mv-container {
    position: relative;
    
    h1 {
      width: 39.8rem;
      position: absolute;
      top: 19rem;
      left: 50%;
      z-index: 6;
      transform: translateX(-50%);
    }
    
    .cards {
      width: 173.9rem;
      height: 60rem;
      position: relative;
      
      .photo01 {
        width: 17.3rem;
        position: absolute;
        top: 4.3rem;
        left: 4.2rem;
        z-index: 3;
      }
      .photo02 {
        width: 24.9rem;
        position: absolute;
        top: 0;
        left: 47.6rem;
        z-index: 3;
      }
      .photo03 {
        width: 22.9rem;
        position: absolute;
        top: .9rem;
        left: 80.6rem;
        z-index: 3;
      }
      .photo04 {
        width: 16.2rem;
        position: absolute;
        top: 5.9rem;
        left: 104.9rem;
        z-index: 3;
      }
      .photo05 {
        width: 23.7rem;
        position: absolute;
        top: 0;
        left: 123.4rem;
        z-index: 3;
      }
      .photo06 {
        width: 25.3rem;
        position: absolute;
        top: 27.2rem;
        left: 2rem;
        z-index: 3;
      }
      .photo07 {
        width: 17.9rem;
        position: absolute;
        top: 44rem;
        left: 21.7rem;
        z-index: 3;
      }
      .photo08 {
        width: 17.6rem;
        position: absolute;
        top: 44.4rem;
        left: 56.4rem;
        z-index: 2;
      }
      .photo09 {
        width: 26rem;
        position: absolute;
        top: 30rem;
        left: 69.4rem;
        z-index: 3;
      }
      .photo10 {
        width: 19.5rem;
        position: absolute;
        top: 28.4rem;
        left: 118rem;
        z-index: 3;
      }
      .blur01 {
        width: 24.4rem;
        position: absolute;
        top: 4.6em;
        left: 18.8rem;
        z-index: 1;
      }
      .blur02 {
        width: 26.6rem;
        position: absolute;
        top: .9em;
        left: 143.1rem;
        z-index: 1;
      }
      .blur03 {
        width: 21.6rem;
        position: absolute;
        top: 40.2rem;
        left: 8.9rem;
        z-index: 1;
      }
      .blur04 {
        width: 25.1rem;
        position: absolute;
        top: 25.2rem;
        left: 86.3rem;
        z-index: 1;
      }
      .blur05 {
        width: 22rem;
        position: absolute;
        top: 38.8rem;
        left: 134.5rem;
        z-index: 1;
      }
      .card01 {
        width: 27.7rem;
        position: absolute;
        top: 28rem;
        left: 36.2rem;
        z-index: 4;
      }
      .card02 {
        width: 27.7rem;
        position: absolute;
        top: 35.7rem;
        left: 97.8rem;
        z-index: 4;
      }
      .card03 {
        width: 27.7rem;
        position: absolute;
        top: 25.2rem;
        left: 144.7rem;
        z-index: 4;
      }
    }
  }
  .campaign {
    border-top: .1rem solid var(--gold);
    border-bottom: .1rem solid var(--gold);
    padding: 4rem 0;
    margin-top: 6rem;
    
    .title {
      margin-bottom: 3rem;
      
      .logo {
        width: 9.3rem;
        
        img {
          vertical-align: text-bottom;
        }
      }
      h2 {
        font-size: 2.4rem;
        line-height: 1;
        margin-left: 3rem;
        padding-left: 2rem;
        border-left: .2rem solid var(--red);
        
        span {
          font-size: 2.2rem;
          color: var(--red);
          font-weight: 500;
          margin-right: 1rem;
        }
      }
    }
    .head {
      width: 37.5rem;
      
      h3 {
      	display: inline;
      	box-decoration-break: clone;
      	-webkit-box-decoration-break: clone;
        font-size: 2.6rem;
        font-weight: 500;
        color: var(--brown);
        padding: .2rem 1rem;
        line-height: 1.8;
        background: linear-gradient(to right, #EAE3CA 0%, rgba(255,255,255,0) 80%);
      }
      .mile {
        margin-top: 1rem;
        display: flex;
        align-items: flex-end;
        gap: .5rem;
        font-weight: 700;
        
        .txt {
          font-size: 2.2rem;
          line-height: 1.3;
        }
        .red {
          font-size: 7.2rem;
          color: var(--red);
          line-height: 1;
        }
      }
    }
    .body {
      width: 36rem;
      margin-left: 3rem;
      
      h4 {
        font-size: 1.6rem;
        font-weight: 500;
        margin-bottom: 1rem;
      }
      p {
        font-size: 1.4rem;
        
        a {
          font-weight: 700;
          text-decoration: underline;
        }
      }
      .id {
        text-align: right;
        margin-top: 1rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// sec01
--------------------------------------------------------------------------- */
.sec01 {
  .base {
    margin-bottom: 6rem;
  }
  .cards {
    width: 40rem;
    height: 40rem;
    position: relative;
    
    .main {
      width: 23.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
    }
    .left {
      width: 23.2rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      transition: transform .5s ease .5s, opacity 0.5s ease .5s;
      transform: translate(36.5%, 87%);
      opacity: 0;
    }
    &.is-active .left {
      transform: none;
      opacity: 1;
    }
    .right {
      width: 23.2rem;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
      transition: transform .5s ease .5s, opacity 0.5s ease .5s;
      transform: translate(-36.5%, -87%);
      opacity: 0;
    }
    &.is-active .right {
      transform: none;
      opacity: 1;
    }
    p {
    	display: inline;
    	box-decoration-break: clone;
    	-webkit-box-decoration-break: clone;
      font-size: 2rem;
      font-weight: 500;
      color: #fff;
      padding: .1rem .5rem;
      line-height: 1.8;
      background: #000;
    }
    .top {
      position: absolute;
      top: 1rem;
      right: 0;
      z-index: 2;
      transition: opacity .8s ease .5s;
      opacity: 0;
    }
    &.is-active .top {
      opacity: 1;
    }
    .bottom {
      position: absolute;
      bottom: 3rem;
      left: 0;
      z-index: 2;
      transition: opacity .8s ease .5s;
      opacity: 0;
    }
    &.is-active .bottom {
      opacity: 1;
    }
  }
  .text {
    width: 38rem;
    font-size: 2rem;
    line-height: 1.8;
  }
  h3 {
    font-size: 2.4rem;
    font-weight: 500;
    text-align: center;
    margin: 10rem 0 3rem;
  }
  .card-nav {
    gap: 3rem;
    
    a {
      display: flex;
      align-items: center;
      border-top: .1rem solid #BFC0C0;
      border-bottom: .1rem solid #BFC0C0;
      padding: 1.5rem;
      width: 37.6rem;
      
      @media screen and (min-width: 768px) {
        &:hover {
          background: #f0efde;
          color: var(--red) !important;
          opacity: 1;
        }
      }
      
      .image {
        width: 10rem;
        margin-right: 1.5rem;
      }
      p {
        font-weight: 500;
        line-height: 1.2;
      }
      .icon {
        width: 3rem;
        margin-left: auto;
      }
      &.card1 {
        color: #653A09;
      }
      &.card2 {
        color: #002761;
      }
    }
  }
}

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

.tab-select {
  position: sticky;
  left: calc(50% - 34.6rem);
  top: 1rem;
  z-index: 10;
  width: 69.2rem;
  gap: 1rem;
  
  a {
    border-radius: .5rem;
    background: #fff;
    padding: 2rem;
    width: 22.4rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
  }
  #tab-btn1 {
    border: .1rem solid var(--gold);
    color: var(--gold);
    
    @media screen and (min-width: 768px) {
      &:hover {
        background: #E7E1D1;
        opacity: 1;
      }
    }
    &.tab-active {
      color: #fff;
      background: var(--gold);
    }
  }
  #tab-btn2 {
    border: .1rem solid var(--club);
    color: var(--club);
    
    @media screen and (min-width: 768px) {
      &:hover {
        background: #EDECE0;
        opacity: 1;
      }
    }
    &.tab-active {
      color: #fff;
      background: var(--club);
    }
  }
  #tab-btn3 {
    border: .1rem solid var(--reg);
    color: var(--reg);
    
    @media screen and (min-width: 768px) {
      &:hover {
        background: #D8D8D8;
        opacity: 1;
      }
    }
    &.tab-active {
      color: #fff;
      background: var(--reg);
    }
  }
}

/* ---------------------------------------------------------------------------
// tabs color
--------------------------------------------------------------------------- */
#cnt1 {
  .sec02 {
    background: linear-gradient(to bottom, #F7F3DD 0%, #fff 100%);
    .nav {
      &::after {
        background: url(../img/icon-card-gold.svg) center center / contain no-repeat;
      }
      &.plus {
        &::after {
          background: url(../img/icon-plus-gold.svg) center center / contain no-repeat;
        }
      }
    }
    .accordion {
      dd {
        table {
          th {
            background: var(--gold);
          }
          tbody {
            th {
              width: 31%;
            }
            td {
              width: 23%;
            }
          }
        }
      }
    }
  }
  .sec03 {
    background: #F7F3DD; 
  }
}

#cnt2 {
  .sec02 {
    background: linear-gradient(to bottom, #F5FBDF 0%, #fff 100%);
    .nav {
      &::after {
        background: url(../img/icon-card-club.svg) center center / contain no-repeat;
      }
      &.plus {
        &::after {
          background: url(../img/icon-plus-club.svg) center center / contain no-repeat;
        }
      }
    }
    .accordion {
      dd {
        table {
          th {
            background: var(--club);
          }
          tbody {
            th {
              width: 31%;
            }
            td {
              width: 34.5%;
            }
          }
        }
      }
    }
  }
  .sec03 {
    background: #F5FBDF;
  }
}

#cnt3 {
  .sec02 {
    background: linear-gradient(to bottom, #EDEDEF 0%, #fff 100%);
    .nav {
      &::after {
        background: url(../img/icon-card-gray.svg) center center / contain no-repeat;
      }
      &.plus {
        &::after {
          background: url(../img/icon-plus-gray.svg) center center / contain no-repeat;
        }
      }
    }
    .about {
      .flex {
        width: 28rem;
        margin: 0 auto;
      }
    }
    .accordion {
      dd {
        table {
          th {
            background: var(--reg);
          }
          tbody {
            th {
              width: 31%;
            }
            td {
              width: 34.5%;
            }
          }
        }
      }
    }
  }
  .sec03 {
    background: #EDEDEF;
  }
}

/* ---------------------------------------------------------------------------
//  sec02
--------------------------------------------------------------------------- */
.sec02 {
  margin-top: -24rem;
  
  h2 {
    margin-bottom: 4rem;
  }
  .title {
    margin: 14rem 0 4rem;
    font-size: 2.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    
    span {
      color: var(--red);
      padding: 0 2rem;
      margin-right: 1rem;
      border-left: .2rem solid var(--red);
      border-right: .2rem solid var(--red);
    }
  }
  .about {
    gap: 4rem;
    
    .image {
      width: 36rem;
    }
    .text {
      width: 44.4rem;
      font-weight: 500;
      
      .icon {
        width: 9rem;
        margin: 0 auto 1rem;
      }
      p {
        text-align: center;
        span{
          font-size: 1.2rem;
        }
      }
    }
  }
  .title2 {
    margin-top: 6rem;
    
    h3 {
      font-size: 2.6rem;
    }
    .mile {
      padding-left: 2rem;
      margin-left: 2rem;
      border-left: .1rem solid #000;
      display: flex;
      align-items: flex-end;
      gap: .5rem;
      font-weight: 700;
      
      .txt {
        font-size: 2.2rem;
        line-height: 1.3;
      }
      .red {
        font-size: 7.2rem;
        color: var(--red);
        line-height: 1;
      }
    }
  }
  .attention{
    color: var(--red);
  }
  .price {
    margin-top: 7rem;
    text-align: center;
    font-weight: 500;
    
    span {
      font-size: 2.8rem;
      font-weight: 700;
    }
  }
  .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: 3rem auto 0;
    
    @media screen and (min-width: 768px) {
      &:hover {
        background: rgba(205,19,11,0.1);
        color: var(--red);
        opacity: 1;
      }
    }
    
    &::after {
      content: "";
      display: inline-block;
      width: 3rem;
      height: 3rem;
      margin-left: 1rem;
      vertical-align: -.9rem;
      transition: .3s;
    }
    @media screen and (min-width: 768px) {
      &:hover::after {
        background: url(../img/icon-card-red.svg) center center / contain no-repeat !important;
      }
    }
    &.plus {
      font-size: 1.6rem;
      
      &::after {
        width: 2.4rem;
        height: 2.4rem;
        vertical-align: -.6rem;
      }
      @media screen and (min-width: 768px) {
        &:hover::after {
          background: url(../img/icon-plus-red.svg) center center / contain no-repeat !important;
        }
      }
    }
  }
  .accordion {
    dt {
      display: table;
      margin: 0 auto;
      
      &.active {
        display: none;
      }
    }
    dd {
      display: none;
      width: 64rem;
      margin: 0 auto;
      padding-top: 4rem;
      
      h4 {
        font-size: 1.8rem;
        font-weight: 500;
        text-align: center;
      }
      
      table {
        sup {
          font-size: 1rem;
        }
        tbody {
          th {
            font-size: 1.6rem;
          }
          td {
            font-size: 1.8rem;
            font-weight: 700;
            
            span {
              font-size: 2.4rem;
            }
          }
          tr:last-of-type th,
          tr:last-of-type td {
            border-top: .4rem solid #BFC0C0;
          }
          tr:last-of-type td {
            span {
              font-size: 2.8rem;
              color: var(--red);
            }
          }
        }
      }
      li {
        font-size: 1.4rem;
        
        a {
          font-weight: 500;
          text-decoration: underline;
          
          &::after {
            content: "";
            background: url(../img/icon-window-b.svg) center center / contain no-repeat;
            display: inline-block;
            width: 1.8rem;
            height: 1.8rem;
            margin-left: .5rem;
            vertical-align: -.4rem;
          }
        }
      }
    }
  }
  .btn {
    margin-top: 1rem;
  }
}

/* ---------------------------------------------------------------------------
//  sec03
--------------------------------------------------------------------------- */
.sec03 {
  padding-top: 17rem;
  
  &::before {
    content: "";
    background: url(../img/sec03-top.svg) center center / contain no-repeat;
    display: block;
    width: 52rem;
    height: 8rem;
    position: absolute;
    top: -.1rem;
    left: calc(50% - 26rem);
  }
  .head {
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    margin-top: 4rem;
    
    span {
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--red);
    }
  }
  .image {
    width: 72rem;
    margin: 1rem auto;
  }
  .cap {
    font-size: 1.8rem;
    
    p:last-child {
      margin-left: 1rem;
      padding-left: 1rem;
      border-left: .1rem solid #000;
    }
  }
  .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: 6rem auto 0;
    transition: .3s;
    
    @media screen and (min-width: 768px) {
      &:hover {
        background: rgba(205,19,11,0.1);
        color: var(--red);
        opacity: 1;
      }
    }
    
    &::after {
      content: "";
      background: url(../img/icon-card-gray.svg) center center / contain no-repeat;
      display: inline-block;
      width: 3rem;
      height: 3rem;
      margin-left: 1rem;
      vertical-align: -.9rem;
    }
    @media screen and (min-width: 768px) {
      &:hover::after {
        background: url(../img/icon-card-red.svg) center center / contain no-repeat;
      }
    }
  }
  .bnr {
    display: table;
    margin: 4rem auto 0;
    
    p {
      font-size: 1.8rem;
      text-align: center;
    }
    a {
      display: block;
      width: 42.6rem;
      margin: 1rem auto 0;
    }
  }
  h3.campaign {
    font-size: 2.8rem;
    text-align: center;
    margin: 6rem 0 3rem;
    
    span {
      display: block;
      font-size: 2rem;
      font-weight: 500;
    }
  }
  h3.talent {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin: 8rem 0 3rem;
  }
  .talent-bnr {
    display: block;
    width: 42rem;
    margin: 0 auto 5rem;
  }
  .accordion {
    width: 69rem;
    margin: 0 auto;
    
    &:last-of-type {
      border-bottom: .1rem solid #BFC0C0;
    }
    
    dt {
      border-top: .1rem solid #BFC0C0;
      padding: 2rem 7rem 2rem 2rem;
      font-weight: 500;
      position: relative;
      cursor: pointer;
      transition: .3s;
      
      &.active {
        background: rgba(191,192,192,0.2);
      }
      &::after {
        content: "";
        display: block;
        background: url(../img/icon-plus.svg) center center / contain no-repeat;
        width: 2.4rem;
        height: 2.4rem;
        position: absolute;
        top: 50%;
        right: 2rem;
        transform: translateY(-50%);
      }
      &.active::after{
        background: url(../img/icon-minus.svg) center center / contain no-repeat;
      }
      @media screen and (min-width: 768px) {
        &:hover {
          opacity: .7;
        }
      }
      
      span {
        font-weight: 700;
        color: var(--red);
      }
      span.num {
        font-size: 2.6rem;
      }
      span.text {
        font-size: 2.2rem;
      }
    }
    dd {
      display: none;
      padding: 2rem 7rem 4rem;
      line-height: 1.6;
      .gray {
        color: var(--reg);
        margin-bottom: 1.4rem;
      }
      .image{
        width: 55%;
        margin: 0 0 1.4rem;
      }
      h4 {
        font-size: 1.6rem;
        font-weight: 500;
        margin-bottom: 1.4rem;
      }
      .kome {
        font-size: 1.4rem;
        margin-top: 1rem;
      }
      .detail {
        display: table;
        margin: 2rem auto 1rem;
        padding: 1rem 4rem .5rem 2rem;
        border-bottom: .1rem solid var(--reg);
        font-weight: 500;
        position: relative;

        &:first-of-type {
          margin-top: 3rem;
        }
        
        @media screen and (min-width: 768px) {
          &:hover {
            background: rgba(191,192,192,0.2);
            opacity: 1;
          }
        }
        
        &::after {
          content: "";
          background: url(../img/icon-window.svg) center center / contain no-repeat;
          display: block;
          width: 1.8rem;
          height: 1.8rem;
          position: absolute;
          top: calc(50% - .5rem);
          right: 1rem;
        }
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec04
--------------------------------------------------------------------------- */
.sec04 {
  .head {
    font-size: 2rem;
    text-align: center;
    margin: 6rem 0 3rem;
    
    span {
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--red);
    }
    .icon {
      width: 6rem;
      margin-right: 1.5rem;
    }
    h3 {
      font-size: 2.6rem;
      margin-top: 1rem;
    }
    .asterisk li{
      font-size: 1.4rem;
      padding: 1rem 0 0;
    }
  }
  .item1 {
    width: 33.4rem;
    
    .item1-1 {
      width: 12rem;
      text-align: center;
      
      h4 {
        display: table;
        margin: 0 auto;
        font-size: 1.6rem;
        font-weight: 500;
        border-left: .1rem solid #000;
        border-right: .1rem solid #000;
        padding: 0 1rem;
      }
      .image {
        width: 5.6rem;
        margin: 2rem auto;
      }
    }
    .item1-2 {
      width: 16rem;
      text-align: center;
      
      h4 {
        display: table;
        margin: 0 auto;
        font-size: 2.2rem;
        font-weight: 700;
        border-left: .1rem solid var(--red);
        border-right: .1rem solid var(--red);
        color: var(--red);
        padding: 0 1rem;
      }
      .image {
        width: 10.1rem;
        margin: 2rem auto;
      }
      .red {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--red);
        margin-bottom: .5rem;
      }
    }
    .right {
      width: 1.4rem;
    }
    .note {
      margin-top: 1.5rem;
      font-size: 1.2rem;
    }
  }
  .item2 {
    width: 39.4rem;
    background: #fef7f5;
    border-radius: .8rem;
    padding: 2.6rem;
    margin-left: 4.5rem;
    
    .title {
      background: #fff;
      padding: 1.2rem 2rem;
      border-radius: .6rem;
      margin-bottom: 2rem;
      
      .point {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--red);
      }
      .automatic {
        font-size: 1.6rem;
        font-weight: 500;
        padding-left: 1rem;
        margin-left: 1rem;
        border-left: .1rem solid #000;
        
        h4 {
          font-size: 2rem;
          font-weight: 700;
          color: var(--red);
        }
      }
    }
    > p {
      font-size: 1.4rem;
      font-weight: 500;
      text-align: center;
      margin-bottom: 2rem;
    }
    .cards {
      text-align: center;
      
      .price {
        font-size: 2rem;
        font-weight: 700;
        margin-top: 1rem;
        
        span {
          font-size: 1.2rem;
        }
      }
      .cards1 {
        width: 55%;
        h5 {
          font-size: 1.4rem;
          font-weight: 500;
          color: var(--gold);
        }
      }
      .cards2 {
        width: 45%;
        border-left: .1rem dotted #000;
        
        h5 {
          font-size: 1.4rem;
          font-weight: 500;
          color: var(--club);
        }
        .normal {
          font-size: 1.4rem;
          font-weight: 500;
          color: var(--reg);
        }
      }
    }
  }
  .bonus {
    width: 89rem;
    margin: 0 -2.2rem 6rem;
    gap: 4.8rem;
    
    > div {
      flex: 1;
    }
    
    h4 {
      font-size: 2rem;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1rem;
    
      span {
        width: 5.8rem;
        margin-right: .5rem;
      }
    }
    .text {
      text-align: center;
      font-weight: 500;
      height: 8rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .gold {
      color: var(--gold);
    }
    .club {
      color: var(--club);
      margin-top: .5rem;
    }
    .reg {
      color: var(--reg);
    }
    .cards > div {
      height: 14rem;
      display: flex;
      flex-flow: column nowrap;
    }
    .cards > div:nth-child(2) {
      border-left: .1rem dotted #000;
    }
    .mile {
      margin-top: auto;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      
      span {
        font-size: 2.8rem;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec05
--------------------------------------------------------------------------- */
.sec05 {
  background: #F5F7F8;
  
  .step {
    margin-top: 6rem;
    position: relative;
    
    .head {
      font-size: 2.4rem;
      font-weight: 700;
      margin-bottom: 1rem;
      
      .red {
        color: var(--red);
        margin-right: 3rem;
      }
      h3 {
        width: 22rem;
        font-size: 2.4rem;
        text-align: center;
      }
    }
    .body {
      width: 61rem;
      margin: 0 auto;
      
      .icon {
        width: 8rem;
        margin-right: 2rem;
      }
      p {
        width: calc(100% - 10rem);
        font-size: 1.8rem;
      }
    }
    .note {
      width: 47.3rem;
      background: #E6EDF0;
      border-radius: 1rem;
      margin: 2rem auto 0;
      padding: 1.4rem 2.4rem;
      font-size: 1.4rem;
      
      .title {
        font-weight: 500;
      }
    }
    
    + .step {
      margin-top: 9rem;
      
      &::before {
        content: "";
        display: block;
        background: url(../img/step-down.svg) center center / contain no-repeat;
        width: 2.3rem;
        height: 2.8rem;
        position: absolute;
        top: -5.5rem;
        left: calc(50% - 1.15rem);
      }
    }
  }

  .step5{
    .head{
      h3{
        width: 35rem;
      }
    }
    .body{
      width: 75rem;
      margin: 4rem auto 5rem;
    }
    .image{
      width: 51%;
    }
    .text{
      width: 44%;
      p{
        width: auto;
        font-size: 1.6rem;
        line-height: 1.8;
      }
      .icon{
        padding: 2rem 0;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        .app1{
          width: 20%;
        }
        .app2{
          width: 37%;
        }
      }
    }
  }




  .campaign {
    margin-top: 6rem;
    border: .1rem solid #B2BCC0;
    background: #fff;
    border-radius: .6rem;
    padding: 4.5rem;
    
    h3 {
      font-size: 2.4rem;
      font-weight: 500;
      text-align: center;
      margin-bottom: 4rem;
    }
    
    .image {
      width: 51%;
    }
    .text {
      width: 44%;
      line-height: 1.8;
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec06
--------------------------------------------------------------------------- */
.sec06 {
  .faq {
    width: 69rem;
    margin: 6rem auto;
    border-bottom: .1rem solid #BFC0C0;
    
    dt {
      border-top: .1rem solid #BFC0C0;
      padding: 2rem 7rem 2rem 2rem;
      font-weight: 500;
      position: relative;
      cursor: pointer;
      transition: .3s;
      &.active {
        background: rgba(191,192,192,0.2);
      }
      
      &::after {
        content: "";
        display: block;
        background: url(../img/icon-plus.svg) center center / contain no-repeat;
        width: 2.4rem;
        height: 2.4rem;
        position: absolute;
        top: 50%;
        right: 2rem;
        transform: translateY(-50%);
      }
      &.active::after{
        background: url(../img/icon-minus.svg) center center / contain no-repeat;
      }
      @media screen and (min-width: 768px) {
        &:hover {
          opacity: .7;
        }
      }
    }
    dd {
      display: none;
      padding: 2rem 7rem 4rem;
      line-height: 1.6;
      
      p + p {
        margin-top: 1.4rem;
      }
      .detail {
        display: table;
        margin: 3rem auto 0;
        padding: 1rem 4rem .5rem 2rem;
        border-bottom: .1rem solid var(--reg);
        font-weight: 500;
        position: relative;
        
        @media screen and (min-width: 768px) {
          &:hover {
            background: rgba(191,192,192,0.2);
            opacity: 1;
          }
        }
        
        &::after {
          content: "";
          background: url(../img/icon-window.svg) center center / contain no-repeat;
          display: block;
          width: 1.8rem;
          height: 1.8rem;
          position: absolute;
          top: calc(50% - .9rem);
          right: 1rem;
        }
      }
      li a {
        text-decoration: underline;
      }
      a.bold {
        text-decoration: underline;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
//  sec07
--------------------------------------------------------------------------- */
.sec07 {
  #notice {
    margin: 6rem auto 0;
    width: 60rem;
    
    .notice-btns {
      margin-bottom: 3rem;
      
      a {
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--reg);
        text-align: center;
        padding: 1.4rem 0;
        border-bottom: .1rem solid var(--reg);
        
        &.tab-active {
          color: var(--red);
          border-bottom: .1rem solid var(--red);
        }
      }
    }
    .notice-body {
      font-size: 1.4rem;
      
      h3 {
        margin-top: 2rem;
        font-size: 1.4rem;
      }
      
      a {
        font-weight: 500;
        text-decoration: underline;
        
        &::after {
          content: "";
          background: url(../img/icon-window-b.svg) center center / contain no-repeat;
          display: inline-block;
          width: 1.8rem;
          height: 1.8rem;
          margin-left: .5rem;
          vertical-align: -.4rem;
        }
      }
      .red {
        color: var(--red);
        
        a::after {
          background: url(../img/icon-window-r.svg) center center / contain no-repeat;
        }
      }
      .small {
        font-size: 1.2rem;
      }
    }
    .notice-table {
      th, td {
        width: calc(100% / 3);
      }
      th {
        background: var(--reg);
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// modalwindow
--------------------------------------------------------------------------- */
#jal-card-est {
  .contents {
    border: .6rem solid #653A09;
    border-radius: 1.2rem;
    
    .head {
      gap: 4rem;
      text-align: center;
      
      p {
        font-size: 2rem;
        font-weight: 500;
      }
      h3 {
        font-size: 3rem;
        font-weight: 700;
      }
      .image {
        width: 26rem;
      }
    }
    h4 {
      font-size: 2.2rem;
      text-align: center;
      margin: 4rem 0 3rem;
    }
    .item {
      width: 15%;
      
      .icon {
        width: 8rem;
        margin: 0 auto 1rem;
      }
      p {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center;
      }
    }
    .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;
      
      @media screen and (min-width: 768px) {
        &:hover {
          background: rgba(205,19,11,0.1);
          color: var(--red);
          opacity: 1;
        }
      }
      
      &::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;
      }
      @media screen and (min-width: 768px) {
        &:hover::after {
          background: url(../img/icon-window-red.svg) center center / contain no-repeat !important;
        }
      }
    }
  }
}

#benefits {
  .contents {
    border: .6rem solid var(--reg);
    border-radius: 1.2rem;
    
    h3 {
       font-size: 2.4rem;
       text-align: center;
       margin-bottom: 2rem;
    }
    .item {
      width: 39rem;
    }
    .main {
      height: 17rem;
      
      .image {
        width: 12.4rem;
        margin: 0 auto;
      }
      p {
        font-weight: 500;
        text-align: center;
        margin-top: 1rem;
      }
    }
    .comment {
      margin-top: 2rem;
      font-size: 1.4rem;
    }
  }
}

#service-gold {
  .contents {
    border: .6rem solid var(--gold);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #F7F3DD 0%, #fff 100%);
  }
}
#service-club {
  .contents {
    border: .6rem solid var(--club);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #F5FBDF 0%, #fff 100%);
  }
}
#service-reg {
  .contents {
    border: .6rem solid var(--reg);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #EDEDEF 0%, #fff 100%);
    
    .item3 {
      .note {
        margin-top: 6rem;
        padding-top: 0;
        border-top: none;
      }
    }
  }
}

.modal-service {
  h3 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  .item1 {
    .flex + .flex {
      margin-top: 1rem;
    }
    .icon {
      width: 8.8rem;
    }
    .note2{
      font-size: 1.4rem;
      text-align: center;
      margin: -1em 0 0.5em;
    }
  }
  .item2 {
    .icon {
      width: 10rem;
      margin: 0 auto 2rem;
      padding-top: 2rem;
    }
    .red {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--red);
      text-align: center;
    }
    .kome {
      font-size: 1.2rem;
      font-weight: 500;
      padding: 0 4rem;
      margin-top: 1rem;
    }
  }
  .item3 {
    .icon {
      width: 8rem;
      margin: 0 auto 1rem;
    }
    .text {
      font-size: 1.4rem;
      font-weight: 500;
      text-align: center;
    }
    .note {
      margin-top: 2rem;
      padding-top: 3rem;
      border-top: 1px dotted #BFC0C0;
      text-align: center;
    }
  }
  .note {
    font-weight: 700;
    line-height: 1.2;
    
    .red {
      color: var(--red);
    }
    .big {
      font-size: 3.6rem;
      line-height: 1;
    }
  }
}


#card-gold {
  .contents {
    border: .6rem solid var(--gold);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #F7F3DD 0%, #fff 100%);
  }
}
#card-club {
  .contents {
    border: .6rem solid var(--club);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #F5FBDF 0%, #fff 100%);
  }
}
#card-reg {
  .contents {
    border: .6rem solid var(--reg);
    border-radius: 1.2rem;
    background: linear-gradient(to bottom, #EDEDEF 0%, #fff 100%);
  }
}

.modal-card {
  h3 {
    font-size: 2.4rem;
    text-align: center;
    height: 4.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
  .card {
    width: 21.8rem;
    margin: 0 auto 4rem;
    position: relative;
    
    &::after {
      content: "";
      display: block;
      background: url(../img/logo-pay.svg) center center / contain no-repeat;
      width: 5.4rem;
      height: 3.5rem;
      position: absolute;
      top: 0;
      right: -7rem;
    }
  }
}


/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */
footer {
  background: #000;
  padding: 6rem 0;
  
  .copyright {
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    color: #fff;
  }
}