@charset "UTF-8";

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

  Biople FES 2025 TOKYO | Biople(ビープル)WEB STORE 

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

/* ========================================================
                      * Layout style *
========================================================= */

/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

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

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

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

}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

#FooterWrap {
  position: relative;
  background: #fff;
  z-index: 3;
}

/* ========================================================
                      * root *
========================================================= */
:root {
  /* font-size: calc(21 * 60rem / 430); */

  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

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

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

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

  --color-lp_font: #000;
  --color-lp_bg: #3F4E19;
  --color-lp_white: #fff;
  --color-lp_red: #A31C23;
  --color-lp_beige: #F1EDE4;
  --font_mix: "futura-pt", "dnp-shuei-gothic-kin-std", sans-serif;
  --font_ja: "dnp-shuei-gothic-kin-std", sans-serif;
  --font_en: "futura-pt", sans-serif;
}

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

#Wrap {
  width: 100%;
}

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

.lp_contents * {
  box-sizing: border-box;
  /* font-feature-settings: "palt"; */
  line-height: 1;
  letter-spacing: .025em;
  font-weight: 400;
  text-align: center;
}

.lp_contents {
  width: 100%;
  max-width: var(--pcMainContentWidth);
  height: 100%;
  font-family: var(--font_ja);
  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 .pcOnly {
  display: none;
}

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

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

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 300;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--color-lp_bg);
}

.lp_contents a,
.lp_contents button {
  -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 .fixed_area {
    position: relative;
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background: url(../img/bg_pc.png);
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - var(--pcMainContentWidth)) / 2);
    height: 100vh;
    padding-top: var(--header-height);
  }

  .fixed_left_inner .logo {
    margin-top: 5.4rem;
    text-align: center;
    color: var(--color-lp_bg);
  }

  .fixed_left_inner .logo .ttl_main {
    font-family: var(--font_en);
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 1.18;
  }

  .fixed_left_inner .logo .ttl_main span {
    display: block;
    font-weight: 600;
    font-size: 1.6rem;
    font-family: var(--font_ja);
    margin-top: 1.3rem;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }

}


/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_right .menu_list {
  margin-top: 3.7rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 2.2rem;
}

.fixed_right .menu_list li {
  font-size: 4.8rem;
  font-weight: 600;
  font-family: var(--font_en);
  color: var(--color-lp_bg);
}

.fixed_right .menu_list li a {
  font-weight: 500;
  font-size: 2.6rem;
}

/* ========================================================
                      * 共通設定  *
========================================================= */

.lp_contents .sp_only {
  display: none;
}

@media (max-width: 768px) {
  .lp_contents .sp_only {
    display: block;
  }
}

.lp_contents .txt_en {
  font-family: var(--font_en);
}

.lp_contents .txt_ja {
  font-family: var(--font_ja);
}

/* ========================================================
                      * sec_teaser  *
========================================================= */
.sec_teaser {}

.sec_teaser .bg_beige {
  background: url(../img/bg_main.png) no-repeat center / 100% 100%;
  padding-bottom: calc(49 * (var(--rate)));
}

.sec_teaser .kv {}

.sec_teaser .ttl_main {
  font-family: var(--font_en);
  font-size: calc(40 * (var(--rate)));
  font-weight: 600;
  color: var(--color-lp_red);
  margin-top: calc(52 * (var(--rate)));
  line-height: 1.2;
}

.sec_teaser .ttl_main span {
  display: block;
  font-size: calc(15 * (var(--rate)));
  font-family: var(--font_ja);
  font-weight: 600;
  margin-top: calc(8 * (var(--rate)));

}

.lp_contents .countdown_wrap {
  color: var(--color-lp_bg);
}

.lp_contents .countdown_ttl {
  font-size: calc(18 * (var(--rate)));
  font-weight: 600;
  margin-top: calc(41 * (var(--rate)));
}

.lp_contents .countdown_set {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(13 * (var(--rate)));
  gap: calc(10 * (var(--rate)));
}

.lp_contents .countdown_set p {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(74 * (var(--rate)));
}

.lp_contents .countdown_set .move_time {
  font-family: var(--font_en);
  font-size: calc(65 * (var(--rate)));
  font-weight: 600;
}

.lp_contents .countdown_set .units {
  font-family: var(--font_en);
  font-size: calc(16 * (var(--rate)));
  font-weight: 600;
  opacity: .6;
  margin-top: calc(12 * (var(--rate)));
}

.sec_teaser .lead {
  font-weight: 600;
  font-size: calc(18 * (var(--rate)));
  color: var(--color-lp_beige);
  background: var(--color-lp_bg);
  margin-top: calc(45 * (var(--rate)));
  padding: calc(24 * (var(--rate))) 0;
}

.sec_teaser .lead_wrap {
  margin-top: calc(40 * (var(--rate)));
}

.sec_teaser .lead_wrap>span {
  font-size: calc(15 * (var(--rate)));
  font-weight: 600;

}

.sec_teaser .lead_wrap p {
  font-size: calc(21 * (var(--rate)));
  font-weight: 600;
  margin-top: calc(10 * (var(--rate)));
}

.sec_teaser .lead_wrap p>span {
  font-size: calc(15 * (var(--rate)));
}

.sec_teaser .lead_wrap .red {
  color: var(--color-lp_red);
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(12 * (var(--rate)));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sec_teaser .lead_wrap .red .sm {
  font-weight: 600;
  font-size: calc(22 * (var(--rate)));
  margin-bottom: calc(12 * (var(--rate)));
  margin-left: calc(3 * (var(--rate)));
}

.sec_teaser .lead_wrap .red .lg {
  font-size: calc(58 * (var(--rate)));
  font-family: var(--font_en);
  font-weight: 600;
  margin-left: calc(4 * (var(--rate)));
}

.sec_teaser .rounded_box {
  border-radius: calc(5 * (var(--rate)));
  width: calc(267 * (var(--rate)));
  margin: 0 auto
}

.sec_teaser .scroll_indicator {
  position: relative;
  height: calc(65 * (var(--rate)));
  overflow: hidden;
  margin-top: calc(41 * (var(--rate)));
}

.sec_teaser .scroll_indicator::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(2 * (var(--rate)));
  height: calc(65 * (var(--rate)));
  left: 50%;
  background: var(--color-lp_bg);
  animation: scroll 2s infinite ease-in-out;
  transform: translateY(0);
}

@keyframes scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(100%);
    opacity: 0.5;
  }

  50.1% {
    transform: translateY(0);
    opacity: 0;
  }

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

.sec_teaser .info_wrap {
  margin-top: calc(40 * (var(--rate)));

}

.sec_teaser .info_wrap.local {}

.sec_teaser .info_wrap.web {}

.sec_teaser .info_wrap .head {
  font-size: calc(20 * (var(--rate)));
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-lp_beige);
  background: var(--color-lp_bg);
  padding: calc(10 * (var(--rate))) 0;
}

.sec_teaser .info_wrap.local .head {
  padding: calc(10 * (var(--rate))) 0 calc(8 * (var(--rate)));
}

.sec_teaser .info_wrap.web .head {
  padding: calc(8 * (var(--rate))) 0;
}

.sec_teaser .info_wrap dl {}

.sec_teaser .info_wrap.local dl:nth-of-type(2) dt {
  margin-top: calc(30 * (var(--rate)));
}

.sec_teaser .info_wrap dt {
  font-weight: 600;
  font-size: calc(20 * (var(--rate)));
  letter-spacing: .1em;
  color: var(--color-lp_red);
  position: relative;
  margin-top: calc(30 * (var(--rate)));
}

.sec_teaser .info_wrap.web dt {
  margin-top: calc(31 * (var(--rate)));
}

.sec_teaser .info_wrap.web dl:nth-of-type(2) dt {
  margin-top: calc(27 * (var(--rate)));
}

.sec_teaser .info_wrap dt::before {
  content: "";
  background: var(--color-lp_red);
  width: calc(96 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  position: absolute;
  position: absolute;
  bottom: calc(-6 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.sec_teaser .info_wrap dd {
  font-size: calc(16 * (var(--rate)));
  margin-top: calc(21 * (var(--rate)));
}

.sec_teaser .info_wrap dd p {
  font-weight: 600;
}

.sec_teaser .info_wrap dd .date {
  line-height: 1.5;
}

.sec_teaser .info_wrap dd .time {
  font-weight: 600;
  margin-top: calc(16 * (var(--rate)));

}

.sec_teaser .info_wrap dd .place {
  line-height: 1.5;
}

.sec_teaser .info_wrap dd .note {
  font-size: calc(12 * (var(--rate)));
  font-weight: 500;
  margin-top: calc(16 * (var(--rate)));
  display: block;
}

.sec_teaser .info_wrap dd p.note {
  margin-top: calc(10 * (var(--rate)));
}

.sec_teaser .info_wrap.local dl:nth-of-type(2) dd .note {
  margin-top: calc(12 * (var(--rate)));
}

.sec_teaser .upcoming_wrap {
  padding-top: calc(57 * (var(--rate)));
  padding-bottom: calc(50 * (var(--rate)));
}

.sec_teaser .upcoming_wrap .ttl {
  font-family: var(--font_en);
  font-weight: 600;
  font-size: calc(48 * (var(--rate)));
  letter-spacing: .025em;
  color: var(--color-lp_beige);
}

.sec_teaser .upcoming_wrap .txt {
  font-size: calc(16 * (var(--rate)));
  color: var(--color-lp_beige);
  margin-top: calc(16 * (var(--rate)));
}

.sec_teaser .upcoming_wrap .rounded_box {
  background: var(--color-lp_beige);
  margin-top: calc(50 * (var(--rate)));
  padding: calc(10 * (var(--rate))) 0;
}

.sec_teaser .upcoming_wrap .rounded_box a {
  font-size: calc(15 * (var(--rate)));
  font-weight: 600;
  color: var(--color-lp_bg);
}