@charset "UTF-8";

/* utilities */
.pc_only { display: block; }
.sp_only { display: none; }
  @media (max-width: 768px) {
    .pc_only { display: none; }
    .sp_only { display: block; }
  }

/* Gnav */
#siteHeader .wrap .inner nav ul li a, #siteHeader .wrap .inner nav ul li a:link, #siteHeader .wrap .inner nav ul li a:visited, #siteHeader .wrap .inner nav ul li a:hover, #siteHeader .wrap .inner nav ul li a:active {color: #fff;}
#siteHeader .wrap .inner nav ul li a:before { background: #fff; }

#siteHeader .wrap .inner nav ul li .pull-down a,#siteHeader .wrap .inner nav ul li .pull-down a:link, #siteHeader .wrap .inner nav ul li .pull-down a:visited, #siteHeader .wrap .inner nav ul li .pull-down a:hover, #siteHeader .wrap .inner nav ul li .pull-down a:active {color: #000;}

/* logo */
#siteHeader .wrap .logo {filter: invert(100%) grayscale(100%) contrast(100); }
  @media (max-width: 768px) {
    #siteHeader .wrap .logo {filter: none; }
  }

/* page-header */
.special .page-header {
  position: relative; 
  width: 100%;
  height: calc((900 / 1920) * 100vw);
  max-height: 900px;
  margin: 0 auto;
}
  .special .page-header .kv {
    position: relative; 
    height: 100%; 
    margin: 0 auto; 
    background: url("../images/xb2-5th_kv.jpg") no-repeat center center/100% auto; animation: fadeIn 5.2s ease 0s 1 forwards; 
  }
    @keyframes fadeIn {
      0% {  opacity: 0; transform: scale(1.1); }
      100% {  opacity: 1;  transform: scale(1);}
    } 

  @media (max-width: 768px) {
    .special .page-header {width: 100%;height: auto;margin: 0 auto;text-align: center;display: block; }.special .page-header .kv {width: 100%;height: 133.333vw;background: url(../images/xb2-5th_kv-sp.jpg) no-repeat center bottom/cover;display: flex;align-items: center;justify-content: center;}
    }

/* animation */
.animation-logo { 
  position: absolute; 
  top: 18%; 
  left: 48%; 
  z-index: 100;  
  width:calc((880 / 1920) * 100vw); animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; animation-delay: 2.5s;  
  max-width: 1000px;
  animation-fill-mode: forwards; 
  opacity: 0;
}
  @keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
.animation-5th { 
  position: absolute; 
  top: 55%;  
  left: 48%; 
  z-index: 100;  
  width:calc((880 / 1920) * 100vw); animation: slideIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; 
  max-width: 1000px;
  animation-delay: 3s; 
  opacity: 0;
}
  @keyframes slideIn {0% {transform: translateX(600px);opacity: 0;} 100% {transform: translateX(0);} 40%,100% {opacity: 1;}}
.kv h1.animation-present {
  position: absolute; 
  top: 70%; 
  left: 48%; 
  z-index: 100;  
  width:calc((880 / 1920) * 100vw); animation: slideIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; 
  max-width: 1000px;
  animation-delay: 3.5s; 
  opacity: 0;
}
  @keyframes slideIn {0% {transform: translateX(300px);opacity: 0;} 100% {transform: translateX(0);} 40%,100% {opacity: 1;}}

  .animation-logo img, .animation-5th img, .animation-present img { width: 100%; }


@media (max-width: 768px) {
.special .page-header, .special .page-header .kv { overflow: hidden; }
.animation-logo { top: 42%; left: 0; right: 0; margin: auto;z-index: 100;  width:calc((768 / 768) * 100vw); }
.animation-5th { top: 70%;  left: 0; right: 0; margin: auto;z-index: 100;  width:calc((768 / 768) * 100vw);}
.kv h1.animation-present { top:84%;  left: 0; right: 0; margin: auto;z-index: 100; width:calc((768 / 768) * 100vw); bottom: 0;height: 20%; } 
}

/* section */
.special section {
    width: 1280px;
    padding: 0 90px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
  .special section + section {
    margin: 60px auto 0;
  }

  @media (max-width: 768px) {
      .special section { width: 100%; padding: 8vw 6.836vw; } 
      .special section + section {margin: 0;}
  }

/* main */
.special main {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 60px 0;
  background: #01a69d url(../images/section_bg.png) no-repeat center top/100% auto;
}
  .special main .sec-lead {
    text-align: center;
  }
    .special main .sec-lead h2 {
      font-size: 18px;
      line-height: 1.8;
      font-weight: 400;
      color: #fff;
    }

  @media (max-width: 768px) {
    .special main {width: 100%;padding-top: 0; padding-bottom: 28.32vw;   background: #01a69d url(../images/section_bg.png) no-repeat left top/100% auto; }
    .special main .sec-lead h2 {font-size: 4.199vw;  line-height: 1.79; }
  }

/* download */
.special main .sec-download {
    padding: 0 90px;
    position: relative;
  }
  .special main .sec-download .wrap {
    background: #fff;
    padding: 50px;
    position: relative;
  }
      .special main .sec-download h3 {
        text-align: center;
      }
      .special main .sec-download .box-gift-smp, 
      .special main .sec-download .box-gift-pc {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 50px 0;
      }
      .special main .sec-download .box-gift-pc {
        padding-top: 50px;
        border-top: solid 1px #01a69d;
      }
      .special main .sec-download .item-pic {
        width:45%;
        margin-right: 10%;
        text-align: center;
      }
      .special main .sec-download .item-btn {
        width:45%;
        display: flex;
        flex-direction: column;
        padding-right: 20px;
        text-align: center;
      }
      .special main .sec-download .notes p {
        margin-top: 1em;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.04em;
        color: #666;
        text-align: center;
      }


  @media (max-width: 768px) {
    .special main .sec-download {padding: 0;position: relative;}
      .special main .sec-download .wrap {padding: 10.667vw 6.836vw;}
        .special main .sec-download h3 {line-height: 1.79; }
        .special main .sec-download .item-pic {width:100%;margin: 0;}
          .special main .sec-download .box-gift-smp, 
          .special main .sec-download .box-gift-pc { margin: 10.667vw 0;}
          .special main .sec-download .box-gift-smp img {width:50%;}
          .special main .sec-download .box-gift-pc  img {width:100%;}
        .special main .sec-download .item-btn {width:100%;margin-top: 10.667vw;padding: 0 3.711vw;}
        .special main .sec-download .notes p {line-height: 1.79; letter-spacing: -0.04em; }
  }


/* btn */
.special main .sec-download .item-btn .btn-base {
    width: 100%;
    height: 66px;
}
.special main .sec-download .item-btn .btn-base:hover { 
  	transition: .5s ;
    opacity: 0.6;
}
  .special main .sec-download .item-btn .btn-base + .btn-base {
    margin-top: 20px;
  }
  .special main .sec-download .item-btn .btn-base:before {
    background: #01a69d; 
  }
  .btn-base:after {
    background: #01a69d; 
    transform: none;
  }
    .special main .sec-download .item-btn .btn-base span {
      padding: 23px 0 0 33px;
    }
      .special main .sec-download .item-btn .btn-base span:before, .btn-base span:after {
        content: "";
        width: 43px;
        height: 1px;
        position: absolute;
        left: 0;
        top: 31px;
         background: #fff;
        transition: opacity 0.4s;
  }
      .btn-base i {
       font-family: sans-serif; font-weight: 500;
      }
.btn-base:hover span, .btn-base:hover i,
.special main .sec-download .item-btn a:link, 
.special main .sec-download .item-btn a:visited, 
.special main .sec-download .item-btn a:hover, a:active {
    color: #fff;
}

  @media (max-width: 768px) {
    .special main .sec-download .item-btn .btn-base { height: 21.333vw; ;}
    .special main .sec-download .item-btn .btn-base span { }
    .btn-base i { font-size:4.267vw; line-height: 1;letter-spacing: -0.01em; }
    .special main .sec-download .item-btn .btn-base + .btn-base {margin-top: 5.333vw;}
      .special main .sec-download .item-btn .btn-base span {padding: 8.267vw 0 0 6.4vw; }
       .special main .sec-download .item-btn .btn-base span:before, .btn-base span:after { width: 28px;  top: 10.667vw; }
}

/* copyright */
.special main .copyright {
    margin: 40px auto 120px;
}
  .special main .copyright p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.1em;
  }

  @media (max-width: 768px) {
    .special main .copyright {margin: 6.445vw auto 0; padding: 0;}
    .special main .copyright p {font-size: 1.953vw; font-weight: 500; line-height: 1;}
  }