@charset "UTF-8";

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

  2026 LIMITED EDITION STARWARS | Celvoke Website

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

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

@media (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw/1400));
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 62.5%;
  }
}


/* ========================================================
             * CV限定 header footer　設定 *
========================================================= */

#FooterWrap {
  position: relative;
  background-color: #fbfbfb;
  z-index: 1;
}

@media (min-width: 769px) {

  .header_inner {
    width: 100vw;
    max-width: 110rem;
  }

  #HeaderWrap {
    overflow-x: clip;
  }

  .nav-global,
  .header_utiliry {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    width: 71%;
  }

  #header_img_slider {
    margin: 0;
  }

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

  .wrapTop,
  .wrapBottom {
    width: 100%;
  }

  #footer {
    background-color: #fbfbfb;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  header {
    width: 100%;
    min-width: 100%;
  }

  .header_inner {
    margin: 0;
    padding-left: 2rem;
    max-width: 100vw;
  }

  #header_img_slider li img {
    width: 100%;
  }

  footer {
    min-width: 100%;
  }

  .footer_inner {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 100vw;

  /* PCデザインの横幅 */
  --pcWidth: 1400;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color-lp_font: #fff;
  --color-lp_white: #fff;
  --font_baes: "articulat-cf", "Noto Sans JP", sans-serif;
}

@media (min-width: 769px) {
  :root {
    /* --rate: calc(var(--pcMainContentWidth) / var(--pcWidth)); */
  }
}

#Wrap {
  width: 100%;
}

#share {
  z-index: 111 !important;
  transition: all 0.6s 0.3s;
}

@media screen and (max-width: 768px) {
  #share.move {
    translate: 0 calc(-186 * (var(--rate)));
  }
}


/* ========================================================
                      * lp_contents *
========================================================= */
.lp_contents * {
  box-sizing: border-box;
  /* font-feature-settings: "palt"; */
  line-height: 1.4;
  letter-spacing: .07em;
  font-weight: 500;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_baes);
  overflow-x: clip;
  color: var(--color-lp_font);
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 1399px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents img,
.lp_contents figure {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents a:hover {
  opacity: 1;
}

.lp_contents_inner {
  position: relative;
  padding-top: calc(665 * (var(--rate)));
}

@media (min-width: 769px) {
  .lp_contents_inner {
    padding-top: 40rem;
  }
}

.lp_contents .bg_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_pc.jpg) repeat-y center / 100%;
  margin-top: var(--header-height);
}

@media (max-width: 1399px) {
  .lp_contents .bg_fixed {
    background: url(../img/bg_sp.jpg) repeat-y center top / 100%;
    margin-top: var(--header-height);
  }
}

.lp_contents a,
.lp_contents .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

/* ========================================================
                      * lp_contents *
========================================================= */


.lp_contents .ttl_main {
  width: calc(750* (var(--rate)));
  margin: 0 auto;
  position: sticky;
  top: 50svh;
  transform: translateY(-50%);
}

.lp_contents .lp_copyright_wrap {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 96svh;
  right: auto;
  left: auto;
  z-index: 1;
}

.lp_contents .lp_copyright {
  width: calc(160* (var(--rate)));
  margin-right: calc(30* (var(--rate)));
}

.lp_contents .scroll_down {
  position: sticky;
  top: 80svh;
  width: calc(47 * (var(--rate)));
  height: calc(198 * (var(--rate)));
  margin-inline: auto;
  left: auto;
  z-index: 1;
  animation: arrowmove 2s ease-in-out infinite;
  margin-top: calc(465 * (var(--rate)));
}

.lp_contents .scroll_down span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(24* (var(--rate)));
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(to bottom,
      rgba(136, 136, 136, 1) 0%,
      rgba(214, 215, 215, 1) 38.7778%,
      rgba(136, 136, 136, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-left: calc(-20 * (var(--rate)));
}

.lp_contents .scroll_down:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(13 * (var(--rate)));
  height: calc(198 * (var(--rate)));
  background: url(../img/scroll.png) no-repeat center top / auto 100%;
  z-index: 1;

  margin-left: calc(4 * (var(--rate)));
}

@keyframes arrowmove {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(10px);
  }

  60% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@media (min-width: 769px) {

  .lp_contents .ttl_main {
    width: 73rem;
    margin-bottom: 0;
  }

  .lp_contents .lp_copyright {
    width: 8.2rem;
    margin-right: 5rem;
  }

  .lp_contents .scroll_down {
    width: 2.8rem;
    height: 11.8rem;
    margin-top: 23rem;
  }

  .lp_contents .scroll_down span {
    font-size: 1.4rem;
    margin-left: -1.2rem;
  }

  .lp_contents .scroll_down:after {
    margin-left: .3rem;
    width: 0.75rem;
    height: 11.9rem;
  }

}

/* ========================================================
                      * sec_intro *
========================================================= */

.sec_intro {
  margin-top: calc(800 * (var(--rate)));
  padding-top: calc(400* (var(--rate)));
  padding-bottom: calc(400* (var(--rate)));
  position: relative;
  z-index: 2;
  width: 100%;

  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 26%,
      rgba(0, 0, 0, 1) 94%,
      rgba(0, 0, 0, 0) 100%) center / 100% no-repeat,

    url("../img/bg_sp.jpg") center 300px / 100% no-repeat;
}

.sec_intro .ttl {
  width: calc(250* (var(--rate)));
  margin: 0 auto;
}

.sec_intro .lead_wrap {
  margin-top: calc(50* (var(--rate)));
}

.sec_intro .txt {
  font-size: calc(32* (var(--rate)));
}

.sec_intro .txt .lg {
  font-size: calc(50* (var(--rate)));
}

.sec_intro .txt .md {
  font-size: calc(40* (var(--rate)));
}

.sec_intro .ttl_sub {
  margin-bottom: calc(86* (var(--rate)));
}

.sec_intro .gradient_text {
  background: linear-gradient(to right,
      rgba(136, 136, 136, 1) 0%,
      rgba(214, 215, 215, 1) 38.7778%,
      rgba(136, 136, 136, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec_intro .comison {
  position: relative;
  padding: calc(52 * (var(--rate))) 0;
}

.sec_intro .comison::before,
.sec_intro .comison::after {
  content: "";
  width: calc(570 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(136, 136, 136, 1) 10%,
      rgba(214, 215, 215, 1) 50%,
      rgba(136, 136, 136, 1) 90%,
      rgba(0, 0, 0, 0) 100%);
}

.sec_intro .comison::before {
  top: 0;
}

.sec_intro .comison::after {
  bottom: 0;
}



@media (min-width: 769px) {

  .sec_intro {
    margin-top: 54rem;
    padding-top: 27rem;
    padding-bottom: 25rem;
    background:
      linear-gradient(to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 26%,
        rgba(0, 0, 0, 1) 94%,
        rgba(0, 0, 0, 0) 100%) center / 100% no-repeat,

      url("../img/bg_pc.jpg") center 300px / 100% no-repeat;
  }

  .sec_intro .ttl {
    width: 15rem;
  }

  .sec_intro .lead_wrap {
    margin-top: 2.7rem;
  }

  .sec_intro .txt {
    font-size: 1.9rem;
  }

  .sec_intro .txt .lg {
    font-size: 3rem;
  }

  .sec_intro .txt .md {
    font-size: 2.4rem;
  }

  .sec_intro .ttl_sub {
    margin-bottom: 5rem;
  }

  .sec_intro .comison {
    padding: 2.8rem 0 2.1rem;
    line-height: 1.1;
  }

  .sec_intro .comison::before,
  .sec_intro .comison::after {
    width: 34rem;
    height: 1px;
  }

}

/* ========================================================
                      * Animation *
========================================================= */

.lp_contents .js-fade-blur {
  opacity: 0.4;
  filter: blur(10px);
  will-change: opacity, filter;
}

.lp_contents .js-fade-blur.is-active {
  animation: fade-blur .8s ease-out forwards;
}

/* -- keyframes -- */
@keyframes fade-blur {
  0% {
    opacity: 0.4;
    filter: blur(10px);
  }

  /* 25% {
    opacity: 1;
    filter: blur(10px);
  } */
  100% {
    opacity: 1;
    filter: blur(0);
  }
}