@charset "UTF-8";
/*///////////////////////////////////////////////////
N響×ポケモン（2026/03）
///////////////////////////////////////////////////*/
* { margin: 0; padding: 0; box-sizing: border-box;}
html, body { height:100%;}
html { line-height: 1; font-family: "Noto Serif JP", serif; -webkit-text-size-adjust: 100%;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display: block;}
audio,canvas,progress,video { display: inline-block;}
img { border: none;}
hr { display: none;}
a { background-color: transparent;}
iframe { border: 0;}

/* common
///////////////////////////////////////////////////*/
:root {
  --c-blue: #003c83;
  --c-blue-dark: #04336b;
  --c-blue-lighter: #f2f6f9;
  --c-red: #e8380d;

  --bg-cream: #fdf5ec;
  --bg-blue-gray: #e2e9f0;

  --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 768px) {
  :root {
    /* fluid: 768-1240 */
    --fs-12: clamp(11px, calc(11px + (12 - 11) * ((100vw - 768px) / 472)), 12px);
    --fs-14: clamp(12px, calc(12px + (14 - 12) * ((100vw - 768px) / 472)), 14px);
    --fs-15: clamp(13px, calc(13px + (15 - 13) * ((100vw - 768px) / 472)), 15px);
    --fs-16: clamp(14px, calc(14px + (16 - 14) * ((100vw - 768px) / 472)), 16px);
    --fs-17: clamp(15px, calc(15px + (17 - 15) * ((100vw - 768px) / 472)), 17px);
    --fs-18: clamp(16px, calc(16px + (18 - 16) * ((100vw - 768px) / 472)), 18px);
    --fs-20: clamp(17px, calc(17px + (20 - 17) * ((100vw - 768px) / 472)), 20px);
    --fs-21: clamp(18px, calc(18px + (21 - 18) * ((100vw - 768px) / 472)), 21px);
    --fs-22: clamp(19px, calc(19px + (22 - 19) * ((100vw - 768px) / 472)), 22px);
    --fs-24: clamp(20px, calc(20px + (24 - 20) * ((100vw - 768px) / 472)), 24px);
    --fs-25: clamp(21px, calc(21px + (25 - 21) * ((100vw - 768px) / 472)), 25px);
    --fs-27: clamp(23px, calc(23px + (27 - 23) * ((100vw - 768px) / 472)), 27px);
    --fs-32: clamp(26px, calc(26px + (32 - 26) * ((100vw - 768px) / 472)), 32px);
    --fs-34: clamp(28px, calc(28px + (34 - 28) * ((100vw - 768px) / 472)), 34px);
    --fs-50: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / 472)), 50px);
    --fs-70: clamp(45px, calc(45px + (70 - 45) * ((100vw - 768px) / 472)), 70px);

    --letter-spacing-primary: 0.16em;
  }
}

@media (max-width: 767.98px) {
  :root {
    --fs-10: 2.564vw;
    --fs-11: 2.821vw;
    --fs-12: 3.077vw;
    --fs-13: 3.333vw;
    --fs-14: 3.590vw;
    --fs-15: 3.846vw;
    --fs-16: 4.103vw;
    --fs-17: 4.359vw;
    --fs-18: 4.615vw;
    --fs-20: 5.128vw;
    --fs-21: 5.385vw;
    --fs-22: 5.641vw;
    --fs-23: 5.897vw;
    --fs-24: 6.154vw;
    --fs-25: 6.410vw;
    --fs-28: 7.179vw;
    --fs-30: 7.692vw;

    --letter-spacing-primary: 0.1em;
  }
}

::before,
::after {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--c-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.scroll-hidden {
  overflow: hidden;
}

a {
  color: var(--c-blue);
  text-decoration: none;
  transition: all 0.2s;
}

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

input,
button,
textarea,
select {
  border: none;
  outline: none;
  background: none;
  vertical-align: baseline;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

:where(a, button):focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 0;
  border-radius: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ib {
  display: inline-block;
}

.red {
  color: var(--c-red);
}

@media (min-width: 768px) {
  .is-sp {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .is-pc {
    display: none;
  }
}

#contents {
  overflow: hidden;
  position: relative;
}

/* footer
///////////////////////////////////////////////////*/
.footer {
  text-align: center;
  padding: 43px 40px 45px;
  overflow: hidden;
}
.footer-organizer {
  font-size: var(--fs-16);
  font-weight: 600;
  color: #000;
  line-height: 1.75;
  letter-spacing: 0.1em;
  padding: 100px 0 70px;
}
.footer-copyright {
  font-size: var(--fs-12);
  font-weight: 600;
  color: #000;
  letter-spacing: 0.1em;
}
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 60px;
}
.footer-logo img {
  width: 170px;
}
@media (max-width: 767.98px) {
  .footer {
    padding: 7.179vw 7% 15.385vw;
  }
  .footer-organizer {
    font-size: var(--fs-14);
    padding: 17.949vw 0 11.538vw;
  }
  .footer-copyright {
    font-size: var(--fs-11);
    letter-spacing: 0.02em;
  }
  .footer-logo {
    gap: 7.692vw;
    margin-bottom: 14.103vw;
  }
  .footer-logo img {
    width: 30vw;
  }
  .footer .decorations.static .deco[class*="pokemon-"] {
    margin-top: -1.282vw;
  }
}

/* loading
///////////////////////////////////////////////////*/
#loading {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #003c83;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  animation: fadeIn 0.35s ease both;
}

.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 270px;
  height: 160px;
  background: url(../img/pokemon/pikachu.png) no-repeat bottom center;
  background-size: 160px auto;
  position: relative;
  transition: height 0.65s ease;
}
.loading-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 270px;
  background: url(../img/logo-combined.svg) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.65s var(--easeOutQuint);
}
.loading-logo.is-active::before {
  opacity: 1;
}
@media screen and (max-width: 767.98px) {
  .loading-logo {
    width: 47.436vw;
    height: 30.769vw;
    background-size: 30.769vw auto;
  }
  .loading-logo::before {
    height: 47.436vw;
  }
}

/* header
///////////////////////////////////////////////////*/
.key-visual {
  --kv-maxw: 1040px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #93aacc 0%, #0068b7 50%, #003c83 100%);
  padding: 16px;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .key-visual {
    gap: 2.051vw;
    padding-bottom: 5.128vw;
  }
}

/* ------------------------------
  main
------------------------------ */
.kv-main {
  width: 100%;
  max-width: var(--kv-maxw);
  overflow: hidden;
  position: relative;
}
.kv-svg,
.kv-frame {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media (min-width: 768px){
  .kv-main{ aspect-ratio: 1030 / 710;}
  .is-pc{ display: block;}
  .is-sp{ display: none;}
}
@media (max-width: 767.98px) {
  .kv-main{ aspect-ratio: 700 / 1000;}
  .is-pc{ display: none;}
  .is-sp{ display: block;}
}

/* logo */
.kv-logo {
  display: grid;
  place-items: center;
  max-width: var(--kv-maxw);
  background: transparent no-repeat;
  background-size: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  position: relative;
}
.kv-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: transparent no-repeat;
  background-size: contain;
  position: absolute;
  inset: 0;
}
.kv-inner picture,
.kv-inner img {
  display: block;
  width: 100%;
  object-fit: contain;
}
@media (min-width: 768px){
  .kv-logo::before {
    background-image: url(../img/logo-horizontal-1.png);
  }
}
@media (max-width: 767.98px) {
  .kv-logo {
    width: 88%;
  }
  .kv-logo::before {
    background-image: url(../img/logo-vertical-1.png);
  }
  .kv-logo img {
    width: 100%;
  }
}

/* ------------------------------
  mask
------------------------------ */
.hole {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.65s cubic-bezier(.22,.8,.2,1),
    transform 0.65s cubic-bezier(.22,.8,.2,1);
  will-change: opacity, transform;
}

.hole.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* Intro
///////////////////////////////////////////////////*/
.intro {
  background: var(--bg-cream);
  overflow: hidden;
  position: relative;
}
.intro::before {
  content: "";
  display: block;
  width: 65%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.intro-inner {
  display: grid;
  --intro-logo: min(240px, 19.355vw);
  grid-template-columns: var(--intro-logo) 1fr var(--intro-logo);
  align-items: center;
  width: min(1200px, 96%);
  padding: min(85px, 8.065vw) 0 min(80px, 7.661vw);
  margin: 0 auto;
  position: relative;
}
.intro-content {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}
.intro-logos {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--intro-logo) 1fr var(--intro-logo);
  align-items: center;
  position: relative;
  z-index: 1;
}
.intro-logo {
  display: grid;
  place-items: center;
}
.intro-logo img {
  width: min(240px, 20.968vw);
}
.intro-logo.nhkso {
  grid-column: 1;
  justify-self: flex-end;
  margin-right: -20px;
}
.intro-logo.pokemon30 {
  grid-column: 3;
  justify-self: flex-start;
  margin-left: -20px;
}
@media (max-width: 1100px) {
  .intro::before {
    width: auto;
    height: 120%;
  }
  .intro-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .intro-content {
    grid-column: auto;
    grid-row: auto;
  }
  .intro-logos {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    justify-items: center;
    margin-top: min(30px, 3.636vw);
  }
  .intro-logo.nhkso,
  .intro-logo.pokemon30 {
    grid-column: auto;
    margin: 0;
  }
}
@media (max-width: 767.98px) {
  .intro::before {
    height: 103%;
  }
  .intro-inner {
    gap: 5.128vw;
    padding: 14.103vw 0 17.949vw;
  }
  .intro-logos {

    gap: 6.410vw;
    margin-top: 5.128vw;
  }
  .intro-logo img {
    width: 30vw;
  }
}

/* content */
.intro-title {
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.2em;
  margin-bottom: 0.85em;
}
.intro-title span {
  display: inline-block;
}
.intro-title .marker {
  background: linear-gradient(transparent 0%, var(--bg-cream) 0%);
  line-height: 1;
  padding: 0.25em 0 0.25em 0.3em;
  margin-right: -0.22em;
}
.intro-text {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 2.375;
  letter-spacing: var(--letter-spacing-primary);
  padding: 0 7%;
  margin-bottom: 2em;
}
.intro-note {
  font-size: var(--fs-12);
  font-weight: 500;
}
.intro-text .pc-add {
  display: none;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .intro-text .pc-add {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .intro-title {
    font-size: var(--fs-20);
    line-height: 2;
  }
  .intro-text {
    font-size: var(--fs-15);
    line-height: 1.75;
    text-align: left;
  }
  .intro-text span {
    display: inline-block;
  }
}

/* Event
///////////////////////////////////////////////////*/
.event {
  color: #fff;
  background: var(--c-blue);
}
.event-section {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.event-inner {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .event {
    padding: 0 40px;
  }
}

.event-header-en {
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-primary);
}
.event-header-title {
  font-size: var(--fs-50);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-primary);
  line-height: 1;
  padding-top: 3px;
}
@media (max-width: 767.98px) {
  .event-header {
    text-align: center;
    margin-bottom: 6.410vw;
  }
  .event-header-en {
    font-size: var(--fs-11);
  }
  .event-header-title {
    font-size: var(--fs-30);
  }
}

/* ------------------------------
  Schedule
------------------------------ */
.event-schedule-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(70px, 6.452vw) min(40px, 3.629vw);
  width: min(820px, 75vw);
  padding: min(90px, 8.871vw) 0  min(120px, 10.484vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .event-schedule-item {
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  .event-schedule-list {
    gap: 7.692vw 3.846vw;
    width: 90vw;
    padding: 23.077vw 0 43.590vw;
  }
}

/* date */
.event-date {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: var(--fs-70);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.event-weekday {
  font-size: var(--fs-25);
  margin-left: -0.5em;
}
.event-area {
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-left: -0.15em;
}
.tokyo .event-area { color: #c0e3f1;}
.kyoto .event-area { color: #f9eab3;}
.osaka .event-area { color: #f7af64;}
.fukuoka .event-area { color: #b8d9a0;}
@media (max-width: 767.98px) {
  .event-date {
    font-size: var(--fs-28);
  }
  .event-weekday {
    font-size: var(--fs-14);
  }
}

/* venue */
.event-venue {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-16);
  font-weight: 600;
  text-align: center;
  letter-spacing: normal;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 6px;
}
@media (max-width: 767.98px) {
  .event-venue {
    font-size: var(--fs-12);
    line-height: 1.25;
    padding: 1.538vw;
  }
  .osaka .event-venue,
  .fukuoka .event-venue {
    height: calc(1em * 1.25 * 3);
  }
}

/* time */
.event-time {
  font-size: var(--fs-15);
  font-weight: 600;
  text-align: center;
  letter-spacing: var(--letter-spacing-primary);
  margin-top: 7px;
}
@media (max-width: 767.98px) {
  .event-time {
    font-size: var(--fs-11);
    margin-top: 1.795vw;
  }
}

/* ------------------------------
  Program
------------------------------ */
.event-program {
  padding-bottom: 90px;
}
@media (min-width: 768px) {
  .event-program .event-inner {
    display: grid;
    grid-template-columns: min(135px, 13.710vw) 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 15px min(50px, 5.645vw);
    grid-template-areas:
      "program-g1 program-g2"
      "program-g1 program-g3";
    max-width: 1000px;
    padding-right: 90px;
  }
  .event-program .event-header {
    grid-area: program-g1;
    border-right: 1px solid #fff;
  }
  .event-program .event-header-en {
    padding-left: 0.5em;
  }
  .program-part-1 {
    grid-area: program-g2;
  }
  .program-part-2 {
    grid-area: program-g3;
  }
}
@media (max-width: 767.98px) {
  .event-program {
    padding-bottom: 38.974vw;
  }
  .event-program .event-inner {
    padding: 0 5%;
  }
}

.program-header {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-24);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-primary);
  border-bottom: 1px solid #fff;
  padding: 0 0 0.2em 0.2em;
  margin-bottom: 0.75em;
}
.program-header span {
  font-size: 1.33em;
  position: relative;
  top: 1px;
}
@media (max-width: 767.98px) {
  .program-header {
    font-size: var(--fs-18);
    justify-content: center;
    padding-bottom: 0.3em;
  }
}

.program-inner {
  padding-top: 10px;
}
.program-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
.program-title span {
  display: inline-block;
}
.program-title::before {
  content: "";
  display: block;
  width: 30px;
  aspect-ratio: 1 / 1;
  background: url(../img/icons/type-mb.svg) no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.program-text {
  font-size: var(--fs-16);
  letter-spacing: var(--letter-spacing-primary);
  padding: 0 0.95em 0 0.3em;
  margin-bottom: 1em;
}
.program-text.border {
  border-bottom: 1px dashed #fff;
  padding-bottom: 1.2em;
  margin-bottom: 1.35em;
}
@media (max-width: 767.98px) {
  .program-inner {
    padding-top: 1.282vw;
  }
  .program-title {
    gap: 1.795vw;
    font-size: var(--fs-16);
    padding: 0 2%;
  }
  .program-title::before {
    width: 6.410vw;
  }
  .program-text {
    font-size: var(--fs-15);
    padding: 0 2%;
  }
}

.program-list {
  display: grid;
  gap: 10px;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.65em;
}
.program-list-item {
  display: flex;
  gap: 7px;
  list-style: none;
}
.program-list-item::before {
  content: "";
  display: block;
  width: 30px;
  aspect-ratio: 1 / 1;
  background: url(../img/icons/type-mb.svg) no-repeat;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}
.program-list-item.type-grass::before {
  background-image: url(../img/icons/type-grass.svg);
}
.program-list-item.type-water::before {
  background-image: url(../img/icons/type-water.svg);
}
.program-list-item.type-fire::before {
  background-image: url(../img/icons/type-fire.svg);
}
@media (max-width: 767.98px) {
  .program-list {
    gap: 2.564vw;
    font-size: var(--fs-16);
    padding: 1.282vw 2% 0;
  }
  .program-list-item {
    gap: 1.795vw;
  }
  .program-list-item::before {
    width: 6.410vw;
  }
}

@media (max-width: 767.98px) {
  .program-part-1 {
    margin-bottom: 7.692vw;
  }
  .program-part-1 .program-title {
    padding-bottom: 2.051vw;
  }
}

/* ------------------------------
  Artists
------------------------------ */
.event-artists {
  max-width: 1000px;
  border-top: 1px solid #fff;
  padding-top: 30px;
  margin: 0 auto;
}
.event-artists .event-header {
  text-align: right;
}
.event-artists .event-header-title {
  margin-right: -0.16em;
}
@media (max-width: 767.98px) {
  .event-artists {
    width: 90%;
    padding-top: 12.821vw;
  }
  .event-artists .event-inner {
    width: 110%;
    margin-left: -5%;
  }
  .event-artists .event-header {
    text-align: center;
  }
  .event-artists .event-header-title {
    margin-right: 0;
  }
}

.event-artists-list {
  display: grid;
  grid-template-columns: 53% 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 85px 28px;
  grid-template-areas:
    "artists-g1 artists-g2"
    "artists-g3 artists-g3";
  width: min(1000px, 75vw);
  margin: 0 auto;
}
.profile-item {
  position: relative;
}
.artist-1 {
  grid-area: artists-g1;
  align-self: flex-end;
  justify-self: flex-end;
}
.artist-2 {
  grid-area: artists-g2;
  align-self: flex-end;
}
.artist-3 {
  grid-area: artists-g3;
}
.artist-3::before {
  content: "";
  display: block;
  width: 100vw;
  height: calc(100% - 110px);
  background: var(--bg-blue-gray);
  position: absolute;
  top: 110px;
  left: calc(50% - 50vw);
  z-index: 0;
}
@media (max-width: 767.98px) {
  .event-artists-list {
    grid-template-columns: 56% 1fr;
    gap: 15.385vw 2.564vw;
    width: 90%;
    padding-top: 2.051vw;
  }
  .artist-3 {
    padding-bottom: 30.769vw;
  }
}

.profile-pic,
.profile-detail,
.profile-text {
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .artist-3 .profile-pic {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}

.profile-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 260px;
  font-weight: 600;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: var(--letter-spacing-primary);
  text-align: center;
  white-space: nowrap;
  background: #fff;
  padding: 27px 30px 15px;
  position: absolute;
}
.artist-1 .profile-detail {
  bottom: -18px;
  left: -95px;
}
.artist-2 .profile-detail {
  bottom: -18px;
  left: min(140px, 16.667vw);
}
.artist-3 .profile-detail {
  top: -20px;
  inset-inline: 0;
  margin-inline: auto;
}
@media (min-width: 768px) and (max-width: 960px) {
  .profile-detail {
    min-width: 0;
  }
  .artist-1 .profile-detail {
    left: -75px;
  }
}
@media (max-width: 767.98px) {
  .profile-detail {
    gap: 1.282vw;
    min-width: 0;
    letter-spacing: 0.05em;
    padding: 3.846vw 4.615vw 1.795vw;
  }
  .artist-1 .profile-detail {
    bottom: 4.359vw;
    left: -2.564vw;
  }
  .artist-2 .profile-detail {
    bottom: 4.359vw;
    left: 8.718vw;
  }
  .artist-3 .profile-detail {
    top: -8.974vw;
  }
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 38px;
  font-size: var(--fs-22);
  color: #fff;
  background: var(--c-blue);
  padding: 0.3em 0.5em 0.4em 0.65em;
  position: absolute;
  top: -20px;
  inset-inline: 0;
  margin-inline: auto;
}
.profile-name {
  font-size: var(--fs-34);
  font-weight: 600;
}
.profile-name-en {
  font-size: var(--fs-17);
}
@media (max-width: 767.98px) {
  .profile-badge {
    min-height: 5.641vw;
    font-size: var(--fs-13);
    padding: 0.3em 0.5em 0.4em 0.65em;
    top: -3.077vw;
  }
  .profile-name {
    font-size: var(--fs-18);
    margin-bottom: 0;
    /* margin-bottom: -0.256vw; */
  }
  .profile-name-en {
    font-size: var(--fs-10);
  }
}

.profile-text {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--c-blue);
  line-height: 2.375;
  text-align: justify;
  letter-spacing: var(--letter-spacing-primary);
  padding: min(45px, 4.032vw) 12% 0;
}
@media (max-width: 767.98px) {
  .profile-text {
    font-size: var(--fs-14);
    line-height: 1.75;
    text-align: justify;
    padding: 6.410vw 4% 0;
  }
}

/* Section
///////////////////////////////////////////////////*/
.section-header {
  display: grid;
  justify-items: center;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  margin: 0 auto 50px;
  position: relative;
}
.section-header-inner::before {
  content: "";
  display: inline-block;
  width: 50px;
  aspect-ratio: 1 / 1;
  -webkit-mask-image: url(../img/icons/mb.svg);
  mask-image: url(../img/icons/mb.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--c-blue);
  margin-bottom: 4px;
}
.section-header-en {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-primary);
}
.section-header-title {
  font-size: var(--fs-50);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--letter-spacing-primary);
  padding-top: 4px;
}
@media (max-width: 767.98px) {
  .section-header {
    display: block;
    margin-bottom: 7.692vw;
  }
  .section-header-inner::before {
    width: 8.974vw;
    margin-bottom: 1.026vw;
  }
  .section-header-en {
    font-size: var(--fs-12);
  }
  .section-header-title {
    font-size: var(--fs-30);
    padding-top: 1.026vw;
  }
}

/* Ticket
///////////////////////////////////////////////////*/
.ticket {
  background: #e2e9f0;
  padding: 110px 40px;
  position: relative;
  z-index: 1;
}
.ticket-inner {
  width: min(610px, 75%);
  color: var(--c-blue-dark);
  margin: 0 auto;
  position: relative;
}
.ticket-lead {
  font-size: var(--fs-16);
  font-weight: 500;
  text-align: center;
  letter-spacing: var(--letter-spacing-primary);
  margin-bottom: 50px;
}
.ticket-lead-note {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 500;
  margin-top: 10px;
}
@media (max-width: 767.98px) {
  .ticket {
    padding: 7.692vw 5% 0;
  }
  .ticket-inner {
    width: 94%;
    padding-bottom: 41.026vw;
  }
  .ticket-lead {
    font-size: var(--fs-14);
    margin-bottom: 6.410vw;
  }
  .ticket-lead-note {
    font-size: var(--fs-10);
    margin-top: 2.564vw;
  }
}

/* button */
.ticket-link {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}
.ticket-link-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  width: 100%;
  min-height: 115px;
  font-size: var(--fs-27);
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: var(--letter-spacing-primary);
  background: var(--c-blue-dark);
  position: relative;
}
.ticket-link-button .small {
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
}
.ticket-link-button::after {
  content: "";
  display: block;
  width: 20px;
  aspect-ratio: 1 / 1;
  background: url(../img/icons/external.svg) no-repeat;
  background-size: contain;
  position: absolute;
  right: 22px;
}
@media (max-width: 767.98px) {
  .ticket-link {
    gap: 3.846vw;
    margin-bottom: 6.410vw;
  }
  .ticket-link-button {
    min-height: 24.359vw;
    font-size: var(--fs-20);
  }
  .ticket-link-button .small {
    font-size: var(--fs-13);
  }
  .ticket-link-button::after {
    width: 3.846vw;
    right: 3.846vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  .ticket-link-button:hover {
    background: var(--c-blue);
  }
}

/* notes */
.ticket-notes {
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.75;
  padding: 0 3%;
}
.ticket-notes li {
  list-style: none;
  text-indent: -1em;
  padding-left: 1em;
}
.ticket-notes li:not(:last-child) {
  margin-bottom: 0.5em;
}

/* FAQ
///////////////////////////////////////////////////*/
.faq {
  background: #fff;
  padding: 90px 40px 60px;
}
.faq-list {
  display: grid;
  max-width: 1000px;
  padding-top: 20px;
  margin: 0 auto 100px;
}
.faq-item {
  border-bottom: 1px solid var(--c-blue);
}
.faq-item.is-open {
  padding-bottom: 20px;
}
@media (max-width: 767.98px) {
  .faq {
    padding: 20.513vw 5% 7.692vw;
  }
  .faq-list {
    padding-top: 2.564vw;
    margin-bottom: 12.308vw;
  }
  .faq-item.is-open {
    padding-bottom: 5.128vw;
  }
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 70px;
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--c-blue-dark);
  line-height: 1.35;
  letter-spacing: var(--letter-spacing-primary);
  background: #fff;
  padding: 0 min(25px, 1.5vw) 0 10px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s var(--easeOutCubic),
    padding 0.15s var(--easeOutCubic);
}
.faq-title {
  flex: 1;
  text-align: left;
  padding: 0.85em 20px 0.85em min(30px, 2.419vw);
}
@media (min-width: 768px) {
  .faq-title span {
    display: inline-block;
    transform-origin: left center;
    transform: scale(1);
    transition: transform 0.25s var(--easeOutCubic);
  }
  .faq-item.is-open .faq-title span {
    transform: scale(clamp(1.15, calc(1.15 + (1.32 - 1.15) * ((100vw - 768px) / 472px)), 1.32));
  }
}
@media (max-width: 767.98px) {
  .faq-question {
    min-height: 17.949vw;
    font-size: var(--fs-15);
    padding: 0 2.564vw 0 0;
  }
  .faq-title {
    padding: 2.564vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  .faq-question:hover {
    background: var(--c-blue-lighter);
  }
}

.faq-answer {
  display: flex;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--c-blue-dark);
  line-height: 2;
  padding: 10px 25px 15px 10px;
}
.faq-text {
  padding: 0 20px 0 30px;
}
.faq-answer p:not(:last-child),
.faq-answer ul:not(:last-child),
.faq-answer ol:not(:last-child) {
  margin-bottom: 1.2em;
}
.faq-answer ul,
.faq-answer ol {
  margin-left: 20px;
}
.faq-answer ul li {
  list-style: disc;
}
.faq-answer ol{
  padding-left: 3px;
}
.faq-answer ol li {
  list-style: decimal;
}
.faq-answer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 767.98px) {
  .faq-answer {
    font-size: var(--fs-15);
    line-height: 1.75;
    padding: 2.564vw 0 3.846vw;
  }
  .faq-text {
    padding: 0 5.128vw 0 1.282vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  .faq-answer a:hover {
    text-decoration: none;
  }
}

/* label */
.faq-label-q,
.faq-label-a {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  font-size: var(--fs-34);
  font-weight: 600;
  line-height: 1;
  margin-top: -6px;
}
@media (max-width: 767.98px) {
  .faq-label-q,
  .faq-label-a {
    font-size: var(--fs-24);
    margin-top: -1.538vw;
  }
}

/* icon */
.faq-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  aspect-ratio: 1 / 1;
  background: url(../img/icons/arrow-down.svg) no-repeat center;
  background-size: contain;
  position: relative;
  transition: transform 0.3s var(--easeOutQuart);
}
.faq-item.is-open .faq-icon {
  transform: rotate(-180deg);
}
@media (max-width: 767.98px) {
  .faq-icon {
    width: 4.615vw;
  }
}

/* Video
///////////////////////////////////////////////////*/
.video {
  color: #fff;
  background: var(--c-blue);
  padding: 75px 0 110px;
  position: relative;
}
.video .section-header {
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
}
.video .section-header-inner {
  padding: 0 20px;
}
.video .section-header-inner::before {
  background: #fff;
}
.video-summary {
  text-align: center;
  padding: 10px 0 40px;
}
.video-summary-title {
  font-size: var(--fs-22);
  font-weight: 400;
  margin-bottom: 0.5em;
}
.video-summary-title span {
  display: inline-block;
}
.video-summary-text {
  font-size: var(--fs-16);
}
@media (max-width: 767.98px) {
  .video {
    padding: 16.667vw 0 25.641vw;
  }
  .video .section-header {
    gap: 0;
  }
  .video .section-header-inner {
    padding: 0 3.846vw;
  }
  .video-summary {
    padding: 2.564vw 5% 7.69vw;
  }
  .video-summary-title {
    font-size: var(--fs-16);
  }
  .video-summary-text {
    font-size: var(--fs-12);
  }
}

/* deco */
@media (min-width: 768px) {
  .header-deco-left,
  .header-deco-right {
    display: flex;
    align-items: flex-end;
    width: 100%;
  }
  .header-deco-left {
    justify-content: flex-end;
    padding-right: 20px;
  }
  .header-deco-right {
    justify-content: flex-start;
  }
  .video .deco[class*="note-"] {
    height: min(56px, 4.839vw);
    position: relative;
  }
  .section-header .deco.note-h1 {
    --note-rot: 0deg; margin-right: min(50px, 4.435vw);
  }
  .section-header .deco.note-h2 {
    --note-rot: 20deg; margin: 0 min(20px, 2.016vw) min(20px, 2.016vw) 0;
  }
  .section-header .deco.note-h3 {
    --note-rot: -20deg; margin-bottom: max(-25px, -2.419vw);
  }
  .section-header .deco.note-h4 {
    --note-rot: -20deg; margin:0 0 max(-10px, -1.210vw) max(-10px, -1.210vw);
  }
  .section-header .deco.note-h5 {
    --note-rot: 20deg; margin-left: min(40px, 3.629vw);
  }
  .section-header .deco.note-h6 {
    --note-rot: 0deg; height: min(90px, 7.661vw);
    margin:0 0 max(-20px, -2.016vw) min(40px, 3.629vw);
  }
}
@media (max-width: 767.98px) {
  .header-deco-left,
  .header-deco-right {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .video .deco[class*="note-"] {
    height: 7.692vw;
    left: initial;
  }
  .section-header .deco.note-h2 { --note-rot: 20deg; top: 12.821vw; left: -21.795vw;}
  .section-header .deco.note-h3 { --note-rot: -20deg; top: 17.949vw; left: -8.205vw;}
  .section-header .deco.note-h4 { --note-rot: -20deg; top: 16.667vw; right: -12.821vw;}
  .section-header .deco.note-h5 { --note-rot: 20deg; top: 15.385vw; right: -23.077vw;}
  .section-header .deco.note-h1,
  .section-header .deco.note-h6 {
    display: none;
  }
}

/* slide */
.video-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.video-item iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
}

/* Decoration
///////////////////////////////////////////////////*/
.decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.decorations.static {
  position: static;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .decorations.static {
    flex-wrap: wrap;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}

/* ------------------------------
  ポケモン
------------------------------ */
.deco[class*="pokemon-"] {
  width: clamp(118px, 15.323vw, 190px);
  aspect-ratio: 1 / 1;
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.deco[class*="pokemon-"] img {
  width: 100%;
  object-fit: contain;
}
.deco.pokemon-8 { aspect-ratio: 190 / 202;}
.deco.pokemon-10 { aspect-ratio: 210 / 190;}
.deco.pokemon-13 { aspect-ratio: 200 / 190;}

.decorations.static .deco[class*="pokemon-"] {
  position: static;
  margin: 0 -1px;
}

@media (min-width: 768px) {
  .deco.pokemon-1 { top: clamp(-40px, -3.226vw, -25px); left: clamp(-115px, -9.274vw, -71px);}
  .deco.pokemon-2 { top: clamp(6px, 0.806vw, 10px); right: clamp(-95px, -7.661vw, -59px);}
  .deco.pokemon-3 { top: clamp(210px, 27.419vw, 340px); left: clamp(-120px, -9.677vw, -74px);}
  .deco.pokemon-4 { top: clamp(204px, 26.613vw, 330px); right: clamp(-110px, -8.871vw, -68px);}

  .deco.pokemon-5 { top: clamp(189px, 24.597vw, 305px); left: clamp(-70px, -5.645vw, -43px);}
  .deco.pokemon-6 { top: clamp(80px, 10.484vw, 130px); right: clamp(-80px, -6.452vw, -50px);}

  .deco.pokemon-7 { top: clamp(74px, 9.677vw, 120px); left: clamp(-60px, -4.839vw, -37px);}
  .deco.pokemon-8 { top: clamp(149px, 19.355vw, 240px); right: clamp(-80px, -6.452vw, -50px);}

  .deco.pokemon-9 { top: clamp(186px, 24.194vw, 300px); left: clamp(-125px, -10.081vw, -77px); z-index: 2;}
  .deco.pokemon-10 {
    top: clamp(180px, 23.387vw, 290px);
    right: clamp(-170px, -13.710vw, -105px);
    z-index: 2;
    width: clamp(130px, 16.935vw, 210px);
  }

  .deco.pokemon-11 { top: clamp(-110px, -8.871vw, -68px); right: clamp(-190px, -15.323vw, -118px);}
  .deco.pokemon-12 { top: clamp(87px, 11.290vw, 140px); left: clamp(-230px, -18.548vw, -142px);}
  .deco.pokemon-13 {
    top: clamp(254px, 33.065vw, 410px);
    right: clamp(-230px, -18.548vw, -142px);
    width: clamp(124px, 16.129vw, 200px);
  }
  .deco.pokemon-14 { top: clamp(424px, 55.242vw, 685px); left: clamp(-190px, -15.323vw, -118px);}
}

@media (max-width: 767.98px) {
  .deco[class*="pokemon-"] {
    width: 25vw;
  }
  .deco.pokemon-1 { top: -5.128vw; left: 14.103vw;}
  .deco.pokemon-2 { top: -3.846vw; right: 15.385vw;}
  .deco.pokemon-3 { bottom: 12.821vw; left: 14.103vw;}
  .deco.pokemon-4 { bottom: 12.821vw; right: 15.385vw;}

  .deco.pokemon-5 { bottom: 7.692vw; left: 17.949vw;}
  .deco.pokemon-6 { bottom: 7.692vw; right: 15.385vw;}

  .deco.pokemon-7 { top: 7.692vw; left: 0;}
  .deco.pokemon-8 { top: 7.692vw; right: 0;}

  .deco.pokemon-9 { bottom: 0; left: 10.256vw;}
  .deco.pokemon-10 { bottom: 0; right: 7.692vw; width: 27vw;}

  .deco.pokemon-11 { bottom: 10.256vw; left: 29.487vw;}
  .deco.pokemon-12 { bottom: -14.103vw; left: 0;}
  .deco.pokemon-13 { bottom: -14.103vw; right: -2.564vw;}
  .deco.pokemon-14 { bottom: -14.103vw; left: 30.769vw;}
}

/* ------------------------------
  音符
------------------------------ */
.deco[class*="note-"] {
  --note-h: 56px;
  --note-x: 0px;
  --note-y: 0px;
  --note-rot: 0deg;
  --note-k: 1; /* サイズ倍率 */

  width: auto;
  height: clamp(calc(35px * var(--note-k)), calc(4.516vw * var(--note-k)), calc(56px * var(--note-k)));
  transform-origin: center;
  pointer-events: none;
  position: absolute;
  top: var(--note-y);
  transform: rotate(var(--note-rot));
}
.deco[class*="note-"] img {
  display: block;
  width: auto;
  height: 100%;
}

@media (min-width: 768px) {
  .deco-left { left: var(--note-x);}
  .deco-right { right: var(--note-x);}

  /* Left */
  .deco.note-1 { --note-k: 1; --note-x: clamp(-130px, -10.484vw, -80px); --note-y: clamp(37px, 4.839vw, 60px); --note-rot: 24deg;}
  .deco.note-2 { --note-k: 1; --note-x: clamp(-120px, -9.677vw, -74px); --note-y: clamp(186px, 24.194vw, 300px); --note-rot: 10deg;}
  .deco.note-3 { --note-k: 1; --note-x: clamp(-10px, -0.806vw, -6px); --note-y: clamp(167px, 21.774vw, 270px); --note-rot: -20deg;}
  .deco.note-4 { --note-k: 1.3; --note-x: 0; --note-y: clamp(297px, 38.710vw, 480px); --note-rot: 0deg;}
  /* Right */
  .deco.note-5 { --note-k: 1; --note-x: clamp(43px, 5.645vw, 70px); --note-y: clamp(-10px, -0.806vw, -6px); --note-rot: 0deg;}
  .deco.note-6 { --note-k: 1.20; --note-x: clamp(-135px, -10.887vw, -84px); --note-y: clamp(56px, 7.258vw, 90px); --note-rot: 20deg;}
  .deco.note-7 { --note-k: 0.7; --note-x: clamp(22px, 2.823vw, 35px); --note-y: clamp(189px, 24.597vw, 305px);--note-rot: -20deg;}
  .deco.note-8 { --note-k: 0.7; --note-x: clamp(-130px, -10.484vw, -80px); --note-y: clamp(195px, 25.403vw, 315px); --note-rot: 20deg;}
  .deco.note-9 { --note-k: 1; --note-x: clamp(-140px, -11.290vw, -87px); --note-y: clamp(303px, 39.516vw, 490px); --note-rot: -10deg;}
  /* Left */
  .deco.note-10 { --note-k: 1; --note-x: clamp(-110px, -8.871vw, -68px); --note-y: clamp(19px, 2.419vw, 30px); --note-rot: 0deg;}
  .deco.note-11 { --note-k: 1; --note-x: clamp(-130px, -10.484vw, -80px); --note-y: clamp(118px, 15.323vw, 190px); --note-rot: 20deg;}
  .deco.note-12 { --note-k: 1; --note-x: clamp(-5px, -0.403vw, -3px); --note-y: clamp(124px, 16.129vw, 200px); --note-rot: 25deg;}
  .deco.note-13 { --note-k: 1; --note-x: clamp(-40px, -3.226vw, -25px); --note-y: clamp(155px, 20.161vw, 250px); --note-rot: 20deg;}
  /* Right */
  .deco.note-14 { --note-k: 1; --note-x: clamp(-10px, -0.806vw, -6px); --note-y: clamp(-10px, -0.806vw, -6px); --note-rot: -20deg;}
  .deco.note-15 { --note-k: 1.60; --note-x: clamp(-140px, -11.290vw, -87px); --note-y: clamp(12px, 1.613vw, 20px); --note-rot: 0deg;}
  .deco.note-16 { --note-k: 1; --note-x: clamp(-30px, -2.419vw, -19px); --note-y: clamp(53px, 6.855vw, 85px); --note-rot: 20deg;}
  .deco.note-17 { --note-k: 1.35; --note-x: clamp(-160px, -12.903vw, -99px); --note-y: clamp(176px, 22.984vw, 285px); --note-rot: -15deg;}
  .deco.note-18 { --note-k: 1; --note-x: clamp(-45px, -3.629vw, -28px); --note-y: clamp(217px, 28.226vw, 350px); --note-rot: -10deg;}
  .deco.note-19 { --note-k: 1; --note-x: clamp(-20px, -1.613vw, -12px); --note-y: clamp(291px, 37.903vw, 470px); --note-rot: -30deg;}
}

@media (max-width: 767.98px) {
  .deco[class*="note-"] {
    --note-h: 7.692vw;
    height: calc(var(--note-h) * var(--note-k));
    left: var(--note-x);
  }
  .deco.note-1 { --note-k: 1; --note-x: 11.538vw; --note-y: 7.692vw; --note-rot: 24deg;}
  .deco.note-3 { --note-k: 1; --note-x: 55.128vw; --note-y: 2.051vw; --note-rot: 0deg;}
  .deco.note-4 { --note-k: 1.2; --note-x: 82.564vw; --note-y: 6.410vw; --note-rot: 24deg;}

  .deco.note-5 { --note-k: 1; --note-x: 11.538vw; --note-y: 107.692vw; --note-rot: -10deg;}
  .deco.note-6 { --note-k: 1.2; --note-x: 32.051vw; --note-y: 106.410vw; --note-rot: 0deg;}
  .deco.note-7 { --note-k: 1; --note-x: 8.974vw; --note-y: 92.308vw; --note-rot: 10deg;}
  .deco.note-8 { --note-k: 0.7; --note-x: 81.538vw; --note-y: 91.026vw; --note-rot: 15deg;}
  .deco.note-9 { --note-k: 1; --note-x: 83.333vw; --note-y: 107.692vw; --note-rot: -10deg;}
  .deco.note-2 { --note-k: 0.7; --note-x: 56.410vw; --note-y: 103.846vw; --note-rot: -10deg;}

  .deco.note-11 { --note-k: 1; --note-x: 5.128vw; --note-y: 291.205vw; --note-rot: 20deg;}
  .deco.note-12 { --note-k: 1; --note-x: 41.026vw; --note-y: 283.077vw; --note-rot: 20deg;}
  .deco.note-13 { --note-k: 1; --note-x: 15.385vw; --note-y: 302.462vw; --note-rot: 20deg;}

  .deco.note-17 { --note-k: 1.25; --note-x: 51.282vw; --note-y: 303.462vw; --note-rot: -20deg;}
  .deco.note-18 { --note-k: 1; --note-x: 78.205vw; --note-y: 283.231vw; --note-rot: -15deg;}
  .deco.note-19 { --note-k: 1; --note-x: 84.615vw; --note-y: 301.026vw; --note-rot: -30deg;}

  .deco.note-10,
  .deco.note-14,
  .deco.note-15,
  .deco.note-16 {
    display: none;
  }
}

/* ------------------------------
  背景まる
------------------------------ */
.circle-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.circle {
  --circle-base: clamp(240px, 28vw, 420px); /* 基準サイズ（最小=240 / 最大=420） */
  --circle-k: 1; /* サイズ倍率 */
  --circle-s: calc(var(--circle-base) * var(--circle-k));  /* 実サイズ */
  --circle-x: 0%;
  --circle-y: 0%;

  position: absolute;
  left: var(--circle-x);
  top: var(--circle-y);
  width: var(--circle-s);
  height: var(--circle-s);

  border-radius: 50%;
  background: #8ab9ff;
  filter: blur(20px);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.circle.light {
  mix-blend-mode: screen;
}
.circle.dark {
  background: #0073c3;
  opacity: 0.25;
}
.circle-1  { --circle-k: 0.8333; --circle-y: -4%; --circle-x: 38%;}
.circle-2  { --circle-k: 0.9048; --circle-y: 26%; --circle-x: 70%;}
.circle-3  { --circle-k: 0.9048; --circle-y: 28%; --circle-x: 0%;}
.circle-4  { --circle-k: 0.6667; --circle-y: 0%; --circle-x: -15%;}

.circle-5  { --circle-k: 0.4048; --circle-y: 6%; --circle-x: 57%;}
.circle-6  { --circle-k: 0.6667; --circle-y: 9%; --circle-x: 62%;}
.circle-7  { --circle-k: 1; --circle-y: 5%; --circle-x: -10%;}
.circle-8  { --circle-k: 0.4048; --circle-y: 40%; --circle-x: 25%;}
.circle-9  { --circle-k: 0.4048; --circle-y: 55%; --circle-x: 68%;}
.circle-10 { --circle-k: 1; --circle-y: 65%; --circle-x: 80%;}

.circle-11  { --circle-k: 1; --circle-y: -4%; --circle-x: 65%;}
.circle-12  { --circle-k: 1; --circle-y: 46%; --circle-x: 10%;}
.circle-13  { --circle-k: 0.6667; --circle-y: 88%; --circle-x: 58%;}

@media (max-width: 767.98px) {
  .circle-4  { --circle-y: 15%; --circle-x: -10%;}
  .circle-7  { --circle-k: 0.6667; --circle-y: 35%; --circle-x: -15%;}
  .circle-10 { --circle-k: 0.6667; --circle-y: 75%; --circle-x: 60%;}
}


/* Splide
/////////////////////////////////////////////////////////////////////*/
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}

/* splide-extension-video.min */
.splide__slide--has-video{cursor:pointer}.splide__slide--has-video:hover .splide__video__play{opacity:1}.splide__slide__container--has-video{cursor:pointer;position:relative}.splide__slide__container--has-video:hover .splide__video__play{opacity:1}.splide__video{height:100%;left:0;position:absolute;top:0;width:100%}.splide__video__wrapper{background:#000;height:inherit;width:inherit}.splide__video__wrapper div,.splide__video__wrapper iframe,.splide__video__wrapper video{height:100%;width:100%}.splide__video__play{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;left:50%;opacity:.7;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .1s linear;width:40px}.splide__video__play:after{border-color:transparent transparent transparent #000;border-style:solid;border-width:9px 0 9px 17px;content:"";display:inline-block;margin-left:4px}


/* Video用 */
.splide {
  margin: 0 auto;
}
.splide__slide {
  width: min(600px, 100%);
}
.splide__track {
  padding: 0 20%;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.splide__pagination {
  bottom: -60px;
}
.splide__pagination__page {
  width: 18px;
  height: 18px;
  background: #fff;
  margin: 7px;
  opacity: 1;
  transition: transform .2s linear;
}
.splide__pagination__page.is-active {
  background: #0099ff;
  transform: scale(1);
}
@media (max-width: 767.98px) {
  .splide__pagination {
    bottom: -11.538vw;
  }
  .splide__pagination__page {
    width: min(18px, 3.590vw);
    height: min(18px, 3.590vw);
    margin: min(7px, 1.795vw);
  }
}


/* Animation
/////////////////////////////////////////////////////////////////////*/
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -40px, 0);
		transform: translate3d(0, -40px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 40px, 0);
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes bob {
  0%,
  100% { transform: translate(0, 0);}
  50% { transform: translate(0, -20px);}
}

@keyframes zoomIn {
	0% { transform: scale(0.9); opacity: 0;}
	100% { transform: scale(1); opacity: 1;}
}


/* pokemon */
.deco[class*="pokemon-"] img {
  animation: bob 4s ease-in-out infinite alternate;
}
.deco.pokemon-2 img,
.deco.pokemon-3 img,
.deco.pokemon-6 img,
.deco.pokemon-7 img,
.deco.pokemon-10 img,
.deco.pokemon-13 img,
.decorations.static .deco[class*="pokemon-"]:nth-child(odd) img {
  animation-duration: 5s;
  animation-delay: 0.5s;
}
@media (min-width: 768px) {
  .deco.pokemon-12 img {
    animation-duration: 5s;
    animation-delay: 0.5s;
  }
}
@media (max-width: 767.98px) {
  .deco.pokemon-12 img {
    animation-duration: 4.5s;
    animation-delay: 1s;
  }
  .deco.pokemon-14 img {
    animation-duration: 5s;
    animation-delay: 0.5s;
  }
}

/* GSAP */
.js-fade,
.deco {
  opacity: 0;
}

/* logo */
.kv-frame,
.kv-logo::before,
.kv-logo img {
  opacity: 0;
}

.kv-frame.is-in {
  animation: fadeIn 1s var(--easeOutQuint) 0.4s both;
}
.kv-logo.is-in::before,
.kv-logo.is-in img {
	animation: fadeInUp 1.2s var(--easeOutQuint) 0.4s both;
}
.kv-logo.is-in img {
  animation-delay: 0.6s;
}

/* intro */
.intro::before {
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(.22,.8,.2,1),
    transform 1.2s cubic-bezier(.22,.8,.2,1);
}
.is-inview.intro::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}