@charset "UTF-8";
/* =================================================================
 base
================================================================= */
*::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 320px;
}

#wholeWrapper,
#main,
#event-header {
  color: #222;
  background: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: 1.5;
  letter-spacing: 0.1em;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  word-break: break-word;
}
@media screen and (max-width: 1080px) {
  #wholeWrapper,
  #main,
  #event-header {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  #wholeWrapper,
  #main,
  #event-header {
    font-size: 14px;
  }
}

#wholeWrapper,
#main {
  overflow-x: hidden;
}

body.non-scroll {
  overflow: hidden;
}

/* 共通スタイル（タグ）
-------------------------------------------------------------*/
p {
  margin-top: 1.375em;
}

a {
  color: #1d9bff;
  text-decoration: none;
  transition: all 0.3s;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
a[href^="tel:"] {
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
a.txt-link {
  display: inline-block;
  margin-right: 0.75em;
  text-decoration: underline;
  text-underline-offset: 0.3125em;
  position: relative;
}
a.txt-link::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 6/12;
  width: 0.5em;
  height: auto;
  background-image: url(../media/images/common/icon_link_next.svg);
  position: absolute;
  top: calc(50% + 0.125em);
  right: -0.25em;
  transform: translate(100%, -50%);
}
a.mail {
  color: #222;
}

button,
input[type=submit] {
  transition: all 0.2s;
}
@media (hover: hover) {
  button:hover,
  input[type=submit]:hover {
    opacity: 0.8;
  }
}

em {
  font-style: normal;
  font-weight: 700;
}

/* 共通スタイル（id、class）
-------------------------------------------------------------*/
.anchor {
  scroll-padding-top: 70px;
}
@media screen and (max-width: 1080px) {
  .anchor {
    scroll-padding-top: 61px;
  }
}
@media screen and (max-width: 767px) {
  .anchor {
    scroll-padding-top: 61px;
  }
}

.pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

.show-inner {
  display: none;
}
@media screen and (max-width: 1080px) {
  .show-inner {
    display: block;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pc-br::before {
    content: "\a";
    white-space: pre;
  }
}

@media screen and (max-width: 767px) {
  .sp-br::before {
    content: "\a";
    white-space: pre;
  }
}

.hide {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .hide-pc {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-sp {
    display: none !important;
  }
}

.first {
  margin-top: 0 !important;
}

.last {
  margin-bottom: 0 !important;
}

.end {
  margin-bottom: 0 !important;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

.txt-center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .txt-left-sp {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .txt-right-sp {
    text-align: right;
  }
}

@media screen and (max-width: 767px) {
  .txt-center-sp {
    text-align: center;
  }
}

.bold {
  font-weight: 700;
}

.error {
  color: #c50018;
}

.attention {
  color: #c50018;
}

.indent {
  display: block;
  padding-left: 1em;
  width: -moz-fit-content;
  width: fit-content;
  text-indent: -1em;
  text-align: left;
}
.indent.en {
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.notice-l {
  font-size: 0.9375em;
}
@media screen and (max-width: 767px) {
  .notice-l {
    font-size: 0.85em;
  }
}

.notice {
  font-size: 0.75em;
}
@media screen and (max-width: 767px) {
  .notice {
    font-size: 0.72em;
  }
}

.notice-s {
  font-size: 0.625em;
}
@media screen and (max-width: 767px) {
  .notice-s {
    font-size: 0.72em;
  }
}

.not-copy {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ブロック
-------------------------------------------------------------*/
#wholeWrapper,
#main {
  margin: auto;
  padding-bottom: 7.5em;
  width: 100%;
  flex: 1;
  position: relative;
}
@media screen and (max-width: 767px) {
  #wholeWrapper,
  #main {
    padding-bottom: 4.2857142857em;
  }
}
#wholeWrapper.simple,
#main.simple {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 0;
}

.inner {
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
  max-width: 1080px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1080px) {
  .inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.inner .narrow {
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
  max-width: 1080px;
  max-width: 730px;
}
@media screen and (max-width: 1080px) {
  .inner .narrow {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .inner .narrow {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 767px) {
  .inner .narrow {
    max-width: 690px;
  }
}

/* パーツ
-------------------------------------------------------------*/
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
}

.full-img img {
  width: 100%;
  height: auto;
}

/* 動画
-------------------------------------------------------------*/
.movie-wrap {
  margin: 1.125em auto 0;
  background: #222;
}

.movie {
  margin: 0 auto;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}
.movie iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.movie img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

/* 見出し
-------------------------------------------------------------*/
.section-title {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: 0.15em;
  margin-top: 2.9em;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
@media screen and (max-width: 1080px) {
  .section-title {
    font-size: 36px;
  }
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 25px;
  }
}
@media screen and (max-width: 767px) {
  .section-title {
    margin-top: 2.32em;
  }
}
.section-title .en {
  font-size: 0.5em;
  color: #0e0d6a;
}

/* ボタン
-------------------------------------------------------------*/
.buttons {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.75em 0.625em;
  margin-top: 2.5em;
}
@media screen and (max-width: 767px) {
  .buttons {
    margin-top: 2.1428571429em;
  }
}

.button {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 0.5em 1em;
  border: solid 1px #0e0d6a;
  background: #0e0d6a;
  color: #FFF;
  line-height: 1.2;
  border-radius: 999px;
  position: relative;
}
.button.medium {
  padding: 0.5em 1.2em;
  width: 23.75em;
  min-height: 3.75em;
}
@media screen and (max-width: 767px) {
  .button.medium {
    width: 23.9285714286em;
  }
}
.button.external {
  padding: 0.5em 3.375em;
}
.button.external::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 1;
  width: 1em;
  height: auto;
  background-image: url(../media/images/common/icon_btn_external.svg);
  position: absolute;
  top: 50%;
  right: 1.625em;
  transform: translate(0, -50%);
}

/* =================================================================
 ヘッダー
================================================================= */
/* 公式ヘッダー（イベントサイト用調整）
-------------------------------------------------------------*/
:root {
  --header-height--pc: 80px;
  --header-height--sp: 64px;
  --content-side--pc: 58px;
}

body:has(.Header) {
  padding-top: var(--header-height--pc);
}
@media screen and (max-width: 767px) {
  body:has(.Header) {
    padding-top: var(--header-height--sp);
  }
}

header.Header {
  height: var(--header-height--pc);
}
@media screen and (max-width: 767px) {
  header.Header {
    height: var(--header-height--sp);
  }
}
header.Header .Header__inner {
  align-items: center;
  padding-top: 0;
}
header.Header .Header__head {
  padding-top: 0;
}
header.Header .header-links {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding-top: 0.125em;
  gap: 0.6em 1.2em;
}
@media screen and (max-width: 767px) {
  header.Header .header-links {
    padding-right: 18px;
  }
}
header.Header .header-links .header-link a {
  display: block;
  padding-right: 1em;
  color: #0e0d6a;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
@media screen and (max-width: 1080px) {
  header.Header .header-links .header-link a {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  header.Header .header-links .header-link a {
    font-size: 14px;
  }
}
header.Header .header-links .header-link a::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 6/12;
  width: 0.625em;
  height: auto;
  background-image: url(../media/images/common/icon_link_next_blu.svg);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

/* イベントヘッダー
-------------------------------------------------------------*/
#event-header {
  transition: all 0.5s;
  position: sticky;
  top: -1px;
  z-index: 102;
}
#event-header::before {
  content: "";
  display: block;
  width: 100%;
  height: 200%;
  background: #FFF;
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 0;
  transform: translate(0, -50%);
}
#event-header.up {
  top: var(--header-height--pc);
}
@media screen and (max-width: 767px) {
  #event-header.up {
    top: var(--header-height--sp);
  }
}
#event-header .header-inner {
  border-top: solid 1px #eee;
  border-bottom: solid 1px #eee;
  background: #FFF;
  position: relative;
  z-index: 1;
}
#event-header .header-inner .inner-box {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0.875em var(--content-side--pc) 0.875em;
  max-width: 1600px;
}
@media screen and (max-width: 1372px) {
  #event-header .header-inner .inner-box {
    padding-inline: 20px;
  }
}
@media screen and (max-width: 767px) {
  #event-header .header-inner .inner-box {
    padding-inline: 18px;
  }
}
#event-header .logo {
  margin-top: 0;
  aspect-ratio: 196/42;
  width: auto;
  height: 2.625em;
}
#event-header .logo img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  #event-header .menu-area {
    display: none;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translate(100%, -50%);
    transition: all 0.3s;
  }
}
@media screen and (max-width: 767px) {
  #event-header.show .menu-area {
    transform: translate(0, -50%);
  }
}
#event-header .menus {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1.25em;
}
@media screen and (max-width: 767px) {
  #event-header .menus {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 0;
    border: solid 1px #FFF;
    border-width: 1px 0 1px 1px;
    border-radius: 5px 0 0 5px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  #event-header .menus .menu:not(:first-child) {
    border-top: solid 1px #FFF;
  }
}
#event-header .menus .menu a {
  color: #0e0d6a;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  #event-header .menus .menu a {
    display: block;
    padding: 0.6153846154em 0.4615384615em;
    min-width: 1.9230769231em;
    border: 0;
    background: #0e0d6a;
    color: #FFF;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    border-radius: 0;
  }
}

/* =================================================================
 LP
================================================================= */
body.lp .lead {
  color: #222;
  font-size: 18px;
  line-height: 1.6;
}
@media screen and (max-width: 1080px) {
  body.lp .lead {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  body.lp .lead {
    font-size: 16px;
  }
}

.bg-area {
  margin-top: 7.5em;
  aspect-ratio: 1500/800;
  width: 100%;
  height: auto;
  max-height: 50em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bg-area {
    margin-top: 4.2857142857em;
    aspect-ratio: 750/440;
    background: url(../media/images/lp/bg_visual_sp.jpg) no-repeat center/cover;
  }
}
.bg-area .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  clip-path: inset(0);
}
.bg-area .bg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bg-area .bg img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .bg-area .bg img.pc {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .bg-area .bg img.sp {
    display: none;
  }
}
.bg-area .credit {
  margin: 0;
  color: #FFF;
  font-size: 12px;
  text-shadow: 0 0 0.6em rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 1.25em;
  right: 1.5em;
  z-index: 1;
}
@media screen and (max-width: 1080px) {
  .bg-area .credit {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  .bg-area .credit {
    font-size: 10px;
  }
}

/* introduction
-------------------------------------------------------------*/
#introduction {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: center;
  padding: clamp(60px, 6vw, 120px) 2.5em;
  position: relative;
}
@media screen and (max-width: 1080px) {
  #introduction {
    padding: clamp(48px, 6vw, 108px) 2.8571428571em;
  }
}
@media screen and (max-width: 767px) {
  #introduction {
    padding: 3.5714285714em 2.5714285714em 4.2857142857em;
  }
}
#introduction .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  clip-path: inset(0);
}
#introduction .bg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#introduction .bg img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  #introduction .bg img.pc {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  #introduction .bg img.sp {
    display: block;
  }
}
#introduction::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #002068;
  opacity: 0.6;
  z-index: 1;
}
#introduction .credit {
  margin: 0;
  color: #FFF;
  font-size: 12px;
  position: absolute;
  bottom: 1.25em;
  right: 1.5em;
  z-index: 2;
}
@media screen and (max-width: 1080px) {
  #introduction .credit {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  #introduction .credit {
    font-size: 10px;
  }
}
#introduction .introduction-inner {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#introduction .introduction-head {
  color: #FFF;
}
#introduction .introduction-head .event-title {
  margin: 0 auto;
  aspect-ratio: 531/113;
  width: clamp(464px, 38vw, 580px);
  height: auto;
}
@media screen and (max-width: 767px) {
  #introduction .introduction-head .event-title {
    width: min(100%, 280px);
  }
}
#introduction .introduction-head .event-title img {
  display: block;
  width: 100%;
  height: auto;
}
#introduction .introduction-head .event-message {
  margin: 0 auto;
  font-size: clamp(40px, 4.2vw, 62px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #introduction .introduction-head .event-message {
    font-size: 30px;
  }
}
#introduction .introduction-head .event-date {
  margin: 1.875em auto 0;
  aspect-ratio: 360/82;
  width: clamp(315px, 26vw, 394px);
  height: auto;
}
@media screen and (max-width: 767px) {
  #introduction .introduction-head .event-date {
    margin-top: 1.0714285714em;
    width: min(100%, 195px);
  }
}
#introduction .introduction-head .event-date img {
  display: block;
  width: 100%;
  height: auto;
}
#introduction .introduction-detail {
  margin-top: 2.875em;
}
#introduction .introduction-detail .lead {
  margin: 0 auto;
  color: #FFF;
  line-height: 2;
  letter-spacing: 0.14em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #introduction .introduction-detail .lead {
    max-width: 32.4em;
    font-size: 15px;
    text-align: left;
  }
}
#introduction .introduction-detail .entry-info {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 0.8333333333em;
  margin: 1.6666666667em auto 0;
  padding: 0.6666666667em 1.1111111111em 0.6666666667em 0.8333333333em;
  width: -moz-fit-content;
  width: fit-content;
  border: solid 2px #c50018;
  background: #FFF;
  color: #c50018;
  font-size: 18px;
  font-weight: 600;
}
@media screen and (max-width: 1080px) {
  #introduction .introduction-detail .entry-info {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  #introduction .introduction-detail .entry-info {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  #introduction .introduction-detail .entry-info {
    gap: 0.6666666667em;
    padding: 0.8666666667em 0.8em;
    border-width: 1px;
    font-size: 15px;
  }
}
#introduction .introduction-detail .entry-info::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 1;
  width: 1.5555555556em;
  min-width: 1.5555555556em;
  height: auto;
  background-image: url(../media/images/common/icon_information.svg);
}

/* information
-------------------------------------------------------------*/
#information dl.table {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 2.5em auto 0;
  max-width: 650px;
  border-top: solid 1px #eee;
}
@media screen and (max-width: 767px) {
  #information dl.table {
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin: 1.8571428571em auto 0;
  }
}
#information dl.table .title,
#information dl.table .data {
  padding: 1em 0 1.0625em;
  border-bottom: solid 1px #eee;
}
#information dl.table .title {
  padding-right: 0.5em;
  width: 8.75em;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #information dl.table .title {
    padding: 0.5714285714em 0 0;
    width: 100%;
    border-bottom: 0;
  }
}
#information dl.table .data {
  width: calc(100% - 8.75em);
}
@media screen and (max-width: 767px) {
  #information dl.table .data {
    padding: 0.2857142857em 0 0.5714285714em;
    width: 100%;
  }
}
#information dl.table .address {
  line-height: 1.6;
}
#information dl.table .suport-mail img {
  width: auto;
  height: 17px;
}
@media screen and (max-width: 1080px) {
  #information dl.table .suport-mail img {
    height: 16px;
  }
}
@media screen and (max-width: 767px) {
  #information dl.table .suport-mail img {
    height: 15px;
  }
}
#information dl.table .link-list {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1.25em;
  margin-top: 1.125em;
}

/* event-guide
-------------------------------------------------------------*/
#event-guide {
  padding: 3.75em 0;
  background: #e7ecf1;
  position: relative;
}
@media screen and (max-width: 767px) {
  #event-guide {
    padding: 1.7857142857em 0;
  }
}
#event-guide .inner-box {
  padding: 2.1875em 2.5em 2.5em;
  background: #FFF;
  text-align: center;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  #event-guide .inner-box {
    padding: 1.8571428571em 1.7857142857em 1.4285714286em;
    text-align: left;
  }
}
#event-guide .guide-title {
  margin: 0 auto;
  padding: 0 0.4444444444em 0.3333333333em;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: solid 2px #0e0d6a;
  color: #0e0d6a;
  font-size: 36px;
  font-weight: 700;
}
@media screen and (max-width: 1080px) {
  #event-guide .guide-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  #event-guide .guide-title {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  #event-guide .guide-title {
    padding: 0 0 0.3em;
    width: 100%;
  }
}
#event-guide .notice-l {
  line-height: 1.6;
}
#event-guide .notice-l .indent {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #event-guide .notice-l .indent {
    margin-right: 0;
    margin-left: 0;
  }
}

/* venue
-------------------------------------------------------------*/
#venue .lead {
  margin-top: 1.8888888889em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #venue .lead {
    margin-top: 1.125em;
    text-align: left;
  }
}
#venue .movie-title {
  margin-top: 2.0909090909em;
  color: #0e0d6a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
@media screen and (max-width: 1080px) {
  #venue .movie-title {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  #venue .movie-title {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  #venue .movie-title {
    margin-top: 1.125em;
  }
}
#venue .movie-wrap {
  max-width: 800px;
}/*# sourceMappingURL=lp.css.map */