@charset "UTF-8";

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

  2026 LIMITED EDITION STARWARS | Celvoke Website

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

html {
  font-size: calc(10 * (100vw/466));
  overflow-anchor: none;
}

@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: 0;
}

@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: 46.6rem;

  /* 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: 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;
  letter-spacing: .07em;
  font-weight: 400;
  text-align: center;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_baes);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color-lp_font);
}

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

.lp_contents .pc_only {
  display: none;
}

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

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

.lp_contents_inner {
  position: relative;
  overflow: hidden;
  /* background: url(../../img/260520/bg_sp.png) repeat-y center top;
  background-size: 100% auto; */
  background: none;
  z-index: 0;
}

.lp_contents_inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../img/260520/bg_sp.png) center top / 100% auto repeat-y;
  pointer-events: none;
  z-index: -1;
  transform: translateZ(0);
  /* Safari向け */
}

.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用 */
}

/* ========================================================
                      * PC *
========================================================= */

@media (min-width: 769px) {
  .lp_contents .grid_area {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .lp_contents .pc_only {
    display: block;
  }
}

/* 固定背景 */
.bgSetting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

.bgSetting .for_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../img/260520/bg_pc.png) repeat-y center / 100%;
}

/* ========================================================
                      * SP *
========================================================= */

@media (max-width: 768px) {
  .lp_contents_inner {
    width: var(--pcMainContentWidth);
  }
}


/* ========================================================
                      * block_mv  *
========================================================= */

.block_mv {}

.block_mv .ttl_main {
  /* width: calc(750 * (var(--rate))); */
  width: 100%;
  margin-top: -1px;
}

/* ========================================================
                      * block_release  *
========================================================= */

.block_release {
  padding-top: calc(200 * (var(--rate)));
  padding-bottom: calc(170 * (var(--rate)));
  position: relative;
  z-index: 0;
}

.block_release::before {
  content: "";
  width: calc(690 * (var(--rate)));
  height: 100%;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0) 100%) center / 100% no-repeat;
  z-index: -1;
  opacity: .7;
  margin: 0 auto;
}

.block_release .block_release_lead {
  font-size: calc(44 * (var(--rate)));
  margin-bottom: calc(57 * (var(--rate)));
}

.block_release .block_release_inner {}

.block_release dl {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block_release dl:not(:first-of-type) {
  margin-top: calc(22 * (var(--rate)));
}

.block_release dl::before,
.block_release dl::after {
  content: "";
  width: 1px;
  height: calc(28 * (var(--rate)));
  background: var(--color-lp_white);
  display: block;
}

.block_release dt,
.block_release dd {
  font-size: calc(34 * (var(--rate)));
  line-height: calc(90/34);
}

.block_release dt {
  width: calc(247 * (var(--rate)));
  position: relative;
}

.block_release dt::after {
  content: "";
  width: 1px;
  height: calc(28 * (var(--rate)));
  background: var(--color-lp_white);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.block_release dd {
  width: calc(350 * (var(--rate)));
  padding-left: calc(10 * (var(--rate)));
}

.block_release .note {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(90/20);
  margin-top: calc(-33 * (var(--rate)));
}

/* ========================================================
                      * block_item  *
========================================================= */

.block_item {
  padding-top: calc(120 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
  position: relative;
  z-index: 0;
}

.block_item::before {
  content: "";
  width: calc(690 * (var(--rate)));
  margin: 0 auto;
  height: 100%;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg,
      rgba(136, 136, 136, 1) 0%,
      rgba(0, 0, 0, 1) 11%,
      rgba(214, 215, 215, 1) 31%,
      rgba(0, 0, 0, 1) 43%,
      rgba(136, 136, 136, 1) 60%,
      rgba(0, 0, 0, 1) 87%,
      rgba(136, 136, 136, 1) 100%) center / 100% no-repeat;
  z-index: -1;
  opacity: .7;
}

.block_item .block_item_inner {
  padding-inline: calc(79 * (var(--rate)));
}

.block_item .each_block {}

.block_item .each_block:not(:first-of-type) {
  margin-top: calc(121 * (var(--rate)));
}

.block_item .each_block:last-of-type {
  margin-top: calc(124 * (var(--rate)));
}

.block_item .each_block.reverse {}

.block_item .item_name a {
  font-size: calc(34 * (var(--rate)));
  text-align: left;
}

.block_item .item_price {
  font-size: calc(28 * (var(--rate)));
  text-align: left;
  margin-top: calc(26 * (var(--rate)));
}

.block_item .item_btn {
  width: fit-content;
  margin-inline: 0 auto;
  margin-top: calc(40 * (var(--rate)));
}

.block_item .item_btn a {
  font-size: calc(28 * (var(--rate)));
  padding-right: calc(44 * (var(--rate)));
  position: relative;
}

.block_item .item_btn a::before,
.block_item .item_btn a::after {
  content: "";
  position: absolute;
  background: var(--color-lp_white);
  height: 1px;
}

.block_item .item_btn a::after {
  width: calc(11 * (var(--rate)));
  transform: rotate(-136deg);
  bottom: calc(11 * (var(--rate)));
  right: calc(4 * (var(--rate)));
}

.block_item .item_btn a::before {
  width: calc(26 * (var(--rate)));
  bottom: calc(7 * (var(--rate)));
  right: calc(5 * (var(--rate)));
}

.block_item .item_txt {
  font-size: calc(24 * (var(--rate)));
  text-align: left;
  line-height: calc(38.4/24);
  margin-top: calc(34 * (var(--rate)));
}

.block_item .item_txt {}

.block_item .item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: calc(45 * (var(--rate)));
}

.block_item .block_2 .item_wrap {
  margin-top: calc(47 * (var(--rate)));
}

.block_item .block_3 .item_wrap {
  margin-top: calc(51 * (var(--rate)));
}

.block_item .block_4 .item_wrap {
  justify-content: flex-start;
  margin-top: calc(129 * (var(--rate)));
}

.block_item .reverse .item_name a,
.block_item .reverse .item_price,
.block_item .reverse .item_txt {
  text-align: right;
}

.block_item .reverse .item_btn {
  margin-inline: auto 0;
}

.block_item .item_wrap_inner {}

.block_item .block_4 .item_wrap_inner {
  margin-bottom: calc(-5 * (var(--rate)));
  margin-left: calc(21 * (var(--rate)));
  width: calc(296 * (var(--rate)));
}

.block_item .item_name_en {
  font-size: calc(60 * (var(--rate)));
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
  opacity: .4;
}

.block_item .item_name_en a {
  text-align: right;
  line-height: calc(66/60);
}

.block_item .block_1 .item_name_en {
  margin-right: calc(-13 * (var(--rate)));
}

.block_item .block_2 .item_name_en {
  margin-left: calc(-8 * (var(--rate)));
}

.block_item .block_3 .item_name_en {
  margin-right: calc(-14 * (var(--rate)));
  margin-bottom: calc(-8 * (var(--rate)));
}

.block_item .block_4 .item_name_en {
  margin-left: calc(-7 * (var(--rate)));
}

.block_item .item_img {}

.block_item .block_1 .item_img {
  width: calc(408 * (var(--rate)));
}

.block_item .block_2 .item_img {
  width: calc(430 * (var(--rate)));
  margin-right: calc(-16 * (var(--rate)));
}

.block_item .block_3 .item_img {
  width: calc(388 * (var(--rate)));
}

.block_item .block_4 .item_img {
  width: calc(186 * (var(--rate)));
  margin-left: auto;
  margin-right: calc(-19 * (var(--rate)));
  flex-shrink: 0;
  position: relative;
}

.block_item .btn_all {
  font-size: calc(34 * (var(--rate)));
  width: fit-content;
  margin: calc(110 * (var(--rate))) auto 0;
}

.block_item .btn_all a {
  padding-right: calc(278 * (var(--rate)));
  position: relative;
  white-space: nowrap;
}

.block_item .btn_all a::after {
  content: "";
  position: absolute;
  background: url(../../img/260520/arrow.svg) no-repeat center / 100%;
  height: 7px;
  width: calc(237 * (var(--rate)));
  bottom: calc(14 * (var(--rate)));
  right: calc(1 * (var(--rate)));
}

/* ========================================================
                      * block_novelty  *
========================================================= */

.block_novelty {
  padding-top: calc(190 * (var(--rate)));
  padding-bottom: calc(193 * (var(--rate)));
  position: relative;
  z-index: 0;
}

.block_novelty::before {
  content: "";
  width: calc(750 * (var(--rate)));
  height: 100%;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0) 100%) center / 100% no-repeat;
  z-index: -1;
}


.block_novelty .novelty_ttl {
  font-size: calc(52 * (var(--rate)));
}

.block_novelty .novelty_ttl span {
  font-size: calc(28 * (var(--rate)));
  display: block;
  margin-top: calc(36 * (var(--rate)));
}

.block_novelty .novelty_img {
  width: calc(450 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

.block_novelty .novelty_txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(44.8/28);
  margin-top: calc(51 * (var(--rate)));
}

.block_novelty .novelty_note {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(32/20);
  margin-top: calc(26 * (var(--rate)));
}

/* ========================================================
                      * block_end  *
========================================================= */

.block_end {
  padding-bottom: calc(200 * (var(--rate)));
}

.block_end .end_img {
  width: calc(750 * (var(--rate)));
}

.block_end .end_logo {
  width: calc(490 * (var(--rate)));
  margin: calc(200 * (var(--rate))) auto 0;
}

.block_end .ttl_end {
  font-size: calc(34 * (var(--rate)));
  margin-top: calc(27 * (var(--rate)));
  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;
}

.block_end .ttl_end span {
  display: block;
  font-size: calc(52 * (var(--rate)));
  margin-top: calc(36 * (var(--rate)));
}

.block_end .lead_end {
  font-size: calc(44 * (var(--rate)));
  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;
  margin-top: calc(176 * (var(--rate)));
  position: relative;
}

.block_end .lead_end::before {
  content: "";
  width: 1px;
  height: calc(60 * (var(--rate)));
  position: absolute;
  top: calc(-118 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(136, 136, 136, 1) 10%,
      rgba(214, 215, 215, 1) 50%,
      rgba(136, 136, 136, 1) 90%,
      rgba(0, 0, 0, 1) 100%) center / 100% no-repeat;
}

.block_end .txt_end {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(44.8/28);
  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;
  margin-top: calc(54 * (var(--rate)));
}

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

.lp_contents .js-fade-blur {
  opacity: 0;
  transition: all .8s ease-out;
}

.lp_contents .js-fade-blur.is-active {
  opacity: 1;
}

.lp_contents .js-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all .8s ease-out;
}

.lp_contents .js-fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}