@charset "UTF-8";

:root {
  --rate: 60rem / 750;
  --font-lp_base: "helvetica-neue-lt-pro","hiragino-kaku-gothic-pron","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --color-lp_bg: #fcfcfc;
  --color-lp_font: #727171;
}

/*--------------------------------
            CSS Animation
 --------------------------------*/
/* Fade In
==================================*/
@keyframes opa {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}
#lp_contents .Gradualfade {
  opacity: 0;
  animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  transform: translateZ(0);
  transition: -webkit-mask-position 2s linear;
  transition: mask-position 2s linear;
  transition: mask-position 2s linear, -webkit-mask-position 2s linear;
}

#lp_contents .Gradualfade.is-show{
  -webkit-mask-position: center 0;
  mask-position: center 0;
}

#lp_contents.fadeIn,
#lp_contents .fadeIn {
  opacity: 0;
  transition: 2s;
}

#lp_contents.fadeIn.is-show,
#lp_contents .fadeIn.is-show {
  opacity: 1;
}

#lp_contents .delay{
  transition-delay: 0.25s;
}


/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}

#FooterWrap{
  position: relative;
  z-index: 100;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}

#lp_contents *{
  box-sizing: border-box;
}

#lp_contents{
  font-family: var(--font-lp_base);
  font-feature-settings: "palt";
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.15em;
  line-height: 2;
  text-align: center;

  display: flex;
  justify-content: center;

  color: var(--color-lp_font);
  background-color: var(--color-lp_bg);
  position: relative;
  /*overflow: hidden;*/
}
#lp_contents .sp_only{display: none;}
#lp_contents img{width: 100%;display: block;height: auto; image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;}
#lp_contents a{display: block;width: 100%;cursor: pointer;transition: all 0.5s;color: inherit;}
#lp_contents a:hover{opacity: .8}
#lp_contents ul li,#lp_contents ol li{list-style: none;}
#lp_contents section{
  position: relative;
}
#lp_contents .lp_inner{
  position: relative;
  z-index: 3;
  width: 60rem;
  background-image: url(../img/bg.jpg);
  background-position: top center;
  background-size: cover;
  order: 2;
  padding-top: calc(200 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
}

/*------------ Text ------------*/
#lp_contents h1,#lp_contents h2,#lp_contents h3{padding: 0;float: none;font-weight: normal;}
#lp_contents p {
  display: block;
  margin: 0;
  font-size: calc(24 * (var(--rate)));
  line-height: 2;
}


/* sec_ttl
==================================*/
#lp_contents .sec_ttl{
  display: grid;
  gap: calc(90 * (var(--rate)));
  color: #fff;
  filter: drop-shadow(0 0 calc(10 * (var(--rate))) rgba(0, 0, 0, 0.3));
}

#lp_contents .logo{
  width: calc(320 * (var(--rate)));
  margin: 0 auto calc(55 * (var(--rate)));
}

#lp_contents .main_ttl{
  font-size: calc(56 * (var(--rate)));
  line-height: 1;
  letter-spacing: 0.15em;
}

#lp_contents .main_ttl span{
  display: block;
  font-size: calc(46 * (var(--rate)));
  margin-bottom: calc(20 * (var(--rate)));
}

#lp_contents .lead{
  font-size: calc(32 * (var(--rate)));
  line-height: 1;
}

#lp_contents .lineup{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(216 * (var(--rate)));
  height: calc(73 * (var(--rate)));
  border: calc(2 * (var(--rate))) solid #fff;
  border-radius: 100%;
  margin: calc(60 * (var(--rate))) auto 0;
  font-size: calc(28 * (var(--rate)));
  line-height: 1;
}


/* sec_release
==================================*/
#lp_contents .sec_release{
  width: calc(660 * (var(--rate)));
  margin: calc(120 * (var(--rate))) auto 0;
  padding: calc(100 * (var(--rate))) 0 calc(90 * (var(--rate)));
  background-color: rgba(255, 255, 255, .7);
  border-radius: calc(20 * (var(--rate)));
}

#lp_contents .sec_release .release_ttl{
  margin-bottom: calc(60 * (var(--rate)));
  font-size: calc(44 * (var(--rate)));
  line-height: 1;
  letter-spacing: 0.15em;
}

#lp_contents .sec_release .release_day{
  margin-bottom: calc(44 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  line-height: 1;
}

#lp_contents .sec_release .release_day span{
  font-size: calc(26 * (var(--rate)));
}

#lp_contents .sec_release dl{
  display: grid;
  gap: calc(10 * (var(--rate)));
}

#lp_contents .sec_release dl + dl{
  margin-top: calc(35 * (var(--rate)));
}

#lp_contents .sec_release dt{
  margin-bottom: calc(8 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  line-height: 1;
}

#lp_contents .sec_release dd{
  font-size: calc(22 * (var(--rate)));
}

#lp_contents .sec_release dd span{
  font-size: calc(20 * (var(--rate)));
}


/*--------------------------------
            Layout  PC
 --------------------------------*/
@media screen and (min-width: 768px){
  #lp_contents .full_area{
    position: fixed;
    bottom: 0;
    margin: auto;

    width: calc(calc(100% - 60rem) / 2);
    height: calc(100vh - 15.48rem);

    padding: 3rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .left_area{
    left: 0;
    order: 1;
  }

  #lp_contents .left_area .logo{
    width: 17.6rem;
    margin: 0 auto 4rem;
  }

  #lp_contents .left_area .main_ttl{
    font-size: 3rem;
  }

  #lp_contents .left_area .main_ttl span{
    font-size: 2.5rem;
    margin-bottom: 1rem
  }

  #lp_contents .right_area{
    right: 0;
    order: 3;
  }

  #lp_contents .right_area .lead{
    font-size: 2.2rem;
  }

  #lp_contents .right_area .lineup{
    width: 14.2rem;
    height: 4.8rem;
    border: 1px solid var(--color-lp_font);
    margin: 3rem auto 0;
    font-size: 1.8rem;
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    #lp_contents .right_area .lineup{
      padding-top: 0.2rem;
    }
  }
}


/*--------------------------------
            Responsive
 --------------------------------*/

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


/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

  html {
    font-size: calc(10 * (100vw / 600));
  }

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
  }

  #FooterWrap {
    margin-top: -3.5rem;
  }

  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}

  #lp_contents a:hover{opacity: 1}

}