@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: 97.2rem; height: 100%; margin: 0 auto; position: relative; }
ul.indent li { text-indent: -1em; padding-left: 1em; }
ul.dot 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;
  margin-bottom: 7rem;
  position: relative;
  
  span {
    font-size: 2.4rem;
    font-weight: 500;
    display: block;
  }
  
  &::after {
    content: "";
    display: block;
    width: 6rem;
    height: .4rem;
    border-bottom: .4rem solid #C0B968;
    position: absolute;
    bottom: -2rem;
    left: calc(50% - 3rem);
  }
}

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


/* ---------------------------------------------------------------------------
//  mv
--------------------------------------------------------------------------- */
.mv {
  background: linear-gradient(to left, #EAE3CA 0%, #fff 80%);
  
  .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;
      }
    }
  }
}

/* ---------------------------------------------------------------------------
// sec01
--------------------------------------------------------------------------- */
.sec01 {
  
  .text {
    text-align: center;
    line-height: 1.8;
    
    p {
      font-size: 1.8rem;
    }
    .campaign {
      font-size: 1.6rem;
      font-weight: 500;
      margin-top: 1rem;
      
      span {
        padding-right: 1em;
      }
    }
  }
  
  .step {
    width: 82.1rem;
    margin: 6rem auto;
    position: relative;
    padding: 2rem 7rem 3.5rem;
    
    &::before {
      content: "";
      display: block;
      background: url(../img/frame-left.svg) center center / contain no-repeat;
      width: 3rem;
      height: 4.5rem;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    &::after {
      content: "";
      display: block;
      background: url(../img/frame-right.svg) center center / contain no-repeat;
      width: 3rem;
      height: 8rem;
      position: absolute;
      bottom: 0;
      right: 0;
    }
    
    h3 {
      display: table;
      font-size: 2.4rem;
      font-weight: 500;
      color: var(--brown);
      padding: .5rem 1rem;
      background: linear-gradient(to right, #EAE3CA 0%, rgba(255,255,255,0) 100%);
      margin: 0 auto 3.5rem;
    }
    .item {
      text-align: center;
      
      h4 {
        font-size: 2.4rem;
        color: var(--red);
      }
      .icon {
        width: 7rem;
        margin: 1rem auto;
      }
      p {
        font-size: 1.8rem;
        font-weight: 500;
        height: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .arrow {
      position: relative;
      width: 2.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      
      &::after {
        content: "";
        display: block;
        background: url(../img/step-right.svg) center center / contain no-repeat;
        width: 2.4rem;
        height: 2rem;
      }
    }
  }
  
  .card {
    h3 {
      font-size: 2.4rem;
      font-weight: 500;
      text-align: center;
      margin-bottom: 3rem;
    }
     
    .card2 {
      margin: 0 auto;
      display: flex;
      align-items: center;
      border-top: .1rem solid #BFC0C0;
      border-bottom: .1rem solid #BFC0C0;
      padding: 1.5rem;
      width: 37.6rem;
      color: #002761;
      
      @media screen and (min-width: 768px) {
        &:hover {
          background: #f0efde;
          color: var(--red) !important;
          opacity: 1;
        }
      }
      
      .image {
        width: 10rem;
        margin-right: 1.5rem;
      }
      p {
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.2;
      }
      .icon {
        width: 3rem;
        margin-left: auto;
      }
    }
  }
  .brand {
    margin-top: 8rem;

    > .flex {
      justify-content: flex-start;
      gap: 3.6rem;
    }
    .visa_wrap{
      padding-bottom: 7rem;
    }
    .flex_visa{
      justify-content: space-between;
      align-items: center;
      border-top: .1rem solid #BFC0C0;
      width: 60%;
      margin: 0 auto;
    }
    .term{
      font-size: 1.6rem;
      font-weight: 500;
      text-align: center;
      padding-top: 2rem;
    }
    
    h3 {
      font-size: 2.8rem;
      text-align: center;
      margin-bottom: 5rem;
    }
    .cp{
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #EAE3CA 50%, rgba(255, 255, 255, 0) 100%);
      font-size: 2.4rem;
      color: var(--brown);
      padding: .5rem 1rem;
      display: table;
      margin: -2rem auto 5rem;
      font-weight: bold;
    }
    .no-cp{
      margin: -4rem 0 5rem;
    }
    .item {
      border-top: .1rem solid #BFC0C0;
      padding-top: 3rem;
      line-height: 1.6;
      width: 30rem;
      
      .logo {
        width: 12rem;
        margin: 0 auto 1rem;
      }
      .logos {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 1rem;
        
        > div {
          width: 12rem;
        }
      }
      h4 {
        font-size: 2.2rem;
        text-align: center;
        height: 6.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h5 {
        display: table;
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--brown);
        padding: .5rem 1rem;
        background: linear-gradient(to right, rgba(255,255,255,0) 0, #EAE3CA 50%, rgba(255,255,255,0) 100%);
        margin: 2rem auto 1rem;
      }
      .mile {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: .5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        
        .txt {
          font-size: 1.4rem;
          line-height: 1.3;
        }
        .red {
          font-size: 4.8rem;
          color: var(--red);
          line-height: 1;
        }
      }
      .special {
        font-size: 1.6rem;
        font-weight: 500;
        text-align: center;
      }
      .small {
        font-size: 1.4rem;
        font-weight: 500;
        text-align: center;
      }
      .plus {
        width: 2.6rem;
        margin: 1.6rem auto;
      }
      .text {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        
        .red {
          font-size: 2.4rem;
          color: var(--red);
          padding: 0 .5rem;
          
          &.big {
            font-size: 3.6rem;
            line-height: 1;
          }
        }
      }
      .mile + .pay {
        margin-top: 2rem;
      }
      .pay {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        gap: 1.5rem;
        
        p {
          font-size: 1.4rem;
          font-weight: 500;
          line-height: 1.4;
          border-left: .1rem solid #000;
          padding-left: .8rem;
        }
        .apple {
          width: 5.7rem;
        }
        .google {
          width: 5.7rem;
        }
      }
      .thin {
        font-size: 1.4rem;
        margin: 2rem auto 0;
        width: 26.4rem;
      }
      .banner {
        display: block;
        width: 26.4rem;
        margin: 2rem auto 0;
      }
    }
    .item_visa {
      border-top: none;
    }
    .btn {
        display: table;
        margin: 2rem auto 0;
        border: .1rem solid var(--red);
        background: #FDF7F5;
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--red);
        padding: 1.8rem 3rem;
        border-radius: 10rem;
        
        @media screen and (min-width: 768px) {
          &:hover {
            background: var(--red);
            color: #fff;
            opacity: 1;
          }
        }
        
        &::after {
          content: "";
          display: inline-block;
          background: url(../img/icon-right-g.svg) center center / contain no-repeat;
          width: 2rem;
          height: 2rem;
          margin-left: 1rem;
          vertical-align: -.4rem;
          transition: .3s;
        }
          
        @media screen and (min-width: 768px) {
          &:hover::after {
            background: url(../img/icon-right-w.svg) center center / contain no-repeat;
          }
        }
      }






  }

  .bnr {
    h3.talent{
      font-size: 2rem;
      font-weight: 400;
      text-align: center;
      margin: 8rem 0 3rem;
    }
    .talent-bnr {
      display: block;
      width: 42rem;
      margin: 0 auto;
    }
  }
}


/* ---------------------------------------------------------------------------
// sec02
--------------------------------------------------------------------------- */
.sec02 {
  padding-top: 6rem;
  
  .movie {
    width: 77.4rem;
    height: 48.3rem;
    padding: 0 19.8rem;
    margin: 0 auto;
    /*background: #000;*/
    
    #mil-embed-wrapper {
      width: 100%;
      height: 100%;
         
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .end-cp{
    text-align: center;
    padding-top: 5rem;
    a {
      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;
      }
    }
  }
}



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