@charset "UTF-8";
:root {
  --primary: #0004ff;
  --primaryd: color-mix(in oklch, var(--primary), black 40%);
  --secondary: #ff0040;
  --secondaryd: color-mix(in oklch, var(--secondary), black 40%);
  --monline: #ff7700;
  --mreal: #aa00ff;
  --mbg: #009fe8;
  --stroke: #005d9b;
  --minfo: var(--stroke);
}

@font-face {
  font-family: "LINE Seed JP";
  src: url("../assets/fonts/LINESeedJP_OTF_Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../assets/fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../assets/fonts/LINESeedJP_OTF_Eb.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "mirafes";
  src: url("../assets/fonts/mirafes.woff") format("woff"), url("../assets/fonts/mirafes.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.mi {
  font-family: "mirafes" !important;
  font-weight: normal !important;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: "LINE Seed JP", sans-serif;
  font-feature-settings: "palt";
  text-spacing-trim: trim-start;
}

body {
  background-repeat: repeat, repeat;
  background-size: 360px, cover;
  background-position: top center, top center;
  background-attachment: scroll, fixed;
  background-image: url(../assets/effectbg.webp), url(../assets/footerbg.webp);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: auto-phrase;
}

main {
  position: relative;
}

section {
  padding-top: 144px;
  padding-bottom: 144px;
}
@media screen and (max-width: 1199px) {
  section {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 959px) {
  section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
@media screen and (max-width: 639px) {
  section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

.hiddentext {
  color: rgba(0, 0, 0, 0) !important;
  text-align: center;
  overflow: hidden;
}
.hiddentext::selection {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(247, 104, 168, 0.2);
}

#hero {
  display: block;
  position: relative;
  height: auto;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0;
  background-image: url(../img/movie.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

#herocover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../assets/top_hero_cover.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 0;
}

#herovideo {
  position: absolute;
  height: auto;
  width: 100%;
  aspect-ratio: 16/9;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
  object-fit: cover;
}

#videodot {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-image: url(../assets/videocover.png);
  background-repeat: repeat;
  background-size: auto;
  background-position: top center;
  overflow: hidden;
}

#titlelogowrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 85%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

#titlelogo {
  width: 100%;
  background-image: url(../assets/mirafes_logo.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  flex: 0 0 60%;
  transform-origin: 50% 100%;
  animation: punipuni 3.2s ease-in-out infinite;
  view-transition-name: mirafes-logo;
}

@keyframes punipuni {
  0% {
    transform: scale(1, 1);
  }
  7% {
    transform: scale(1.08, 0.9);
  }
  14% {
    transform: scale(0.94, 1.1);
  }
  21% {
    transform: scale(1.04, 0.96);
  }
  27% {
    transform: scale(0.98, 1.03);
  }
  32% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#titlepwrapper {
  background-image: url(../assets/top_subtitle.webp);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  margin-top: 1dvw;
  flex: 0 0 18%;
  width: 100dvw;
  z-index: 2;
  margin-bottom: -2dvw;
}

#titledwrapper {
  background-image: url(../assets/top_date.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  flex: 0 0 25%;
  width: 80vw;
  z-index: 2;
  margin-top: -2dvw;
  pointer-events: none;
}

.top_infos {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #a4003e;
  will-change: auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 1dvw;
  border-radius: 50%;
  corner-shape: superellipse(1.5);
}
.top_infos#top_count {
  width: clamp(19dvw, 19dvw, 690px);
  top: 1%;
  right: 2%;
  rotate: 5deg;
  animation: fuwatop 4s ease-in-out 0s infinite alternate;
}
.top_infos#top_avenue {
  width: clamp(15dvw, 15dvw, 690px);
  top: 3%;
  left: 2%;
  rotate: -5deg;
  animation: fuwatop 5s ease-in-out -5s infinite alternate;
}
.top_infos p {
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.top_infos p.pre {
  font-size: 1.5dvw;
  font-weight: 900;
}
.top_infos div.count {
  position: relative;
}
.top_infos div.count p {
  display: inline-block;
  line-height: 1;
  font-size: 7.5dvw;
  font-weight: 700;
}
.top_infos div.count::before {
  position: absolute;
  content: "※";
  font-size: 1dvw;
  font-weight: 600;
  bottom: 0;
  left: -0.5em;
}
.top_infos div.count::after {
  position: absolute;
  content: "の";
  font-size: 1.6dvw;
  vertical-align: -0.5dvw;
  font-weight: 700;
  bottom: 0;
  right: -1em;
}
.top_infos p.suf {
  font-size: 2dvw;
  font-weight: 700;
}
.top_infos p.ave {
  line-height: 1.05;
  font-size: 3dvw;
  font-weight: 700;
}

#titlemirabbit {
  position: absolute;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  box-sizing: content-box;
  height: auto;
  width: 40dvw;
  aspect-ratio: 60/86;
  background-image: url(../assets/main_mirabbit.webp);
  bottom: -18dvw;
  left: -12dvw;
  scale: -1 1;
  animation: rotating 7s ease-in-out -3s infinite alternate;
}

#titlepetabbit {
  position: absolute;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  box-sizing: content-box;
  height: auto;
  width: 32dvw;
  aspect-ratio: 60/86;
  background-image: url(../assets/main_petabbit.webp);
  bottom: -5dvw;
  right: -10dvw;
  animation: rotating 5.5s ease-in-out -8s infinite alternate;
}

#titlemirobot {
  position: absolute;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  box-sizing: content-box;
  height: auto;
  width: 21dvw;
  aspect-ratio: 40/36;
  background-image: url(../assets/main_mirobot.webp);
  bottom: 2vw;
  right: 5dvw;
  will-change: auto;
  animation: rotating 3.6s ease-in-out 0s infinite alternate;
}

.overfront {
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  width: 100%;
  height: auto;
  aspect-ratio: 1920/260;
  background-image: url(../assets/top_hero_front.webp);
  z-index: 20;
}

.over_note {
  position: absolute;
  bottom: clamp(3px, 1dvw, 8px);
  right: clamp(3px, 1dvw, 8px);
  z-index: 21;
}
.over_note p {
  line-height: 1;
  font-size: clamp(12px, 1dvw + 4px, 16px);
  color: #bd0080;
  margin: 0;
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke;
}

@keyframes fuwatop {
  0% {
    margin-top: 2vw;
  }
  100% {
    margin-top: 0vw;
  }
}
@keyframes rotating {
  0% {
    transform: rotate(-2deg);
    margin-bottom: 0vw;
  }
  100% {
    transform: rotate(2deg);
    margin-bottom: 2vw;
  }
}
section.maintexts {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-image: url(../assets/top_hero_front_next.webp);
}
section.maintexts h2 {
  color: rgba(0, 0, 0, 0);
  background-image: url(../assets/mirafes_copytext.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  text-align: center;
  height: auto;
  width: 100%;
  max-height: 180px;
  aspect-ratio: 1200/240;
  pointer-events: none;
  margin-bottom: 1.5em;
}
section.maintexts h3 {
  font-size: calc(1.2em + 1.2vw);
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.7em;
  -webkit-text-stroke: 0.4em var(--stroke);
  paint-order: stroke;
}
section.maintexts h3 + p {
  font-size: calc(0.8em + 1vw);
  color: #fff;
  text-align: center;
  -webkit-text-stroke: 0.4em var(--stroke);
  paint-order: stroke;
}

#mainblock {
  padding-top: 64px;
  display: block;
  position: relative;
}
@media screen and (max-width: 1199px) {
  #mainblock {
    padding-top: 60px;
  }
}
@media screen and (max-width: 959px) {
  #mainblock {
    padding-top: 48px;
  }
}
@media screen and (max-width: 639px) {
  #mainblock {
    padding-top: 36px;
  }
}
#mainblock > div {
  position: relative;
}

h1#pagetitle .ptmain .wavechar, nav ul li a .wavechar, #gotoolvn .wavechar, a.topmainabutton p .wavechar {
  display: inline-block;
  position: relative;
}
h1#pagetitle .ptmain .wavechar::before, nav ul li a .wavechar::before, #gotoolvn .wavechar::before, a.topmainabutton p .wavechar::before, h1#pagetitle .ptmain .wavechar::after, nav ul li a .wavechar::after, #gotoolvn .wavechar::after, a.topmainabutton p .wavechar::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0.24em var(--stroke);
  paint-order: stroke;
}
h1#pagetitle .ptmain .wavechar::before, nav ul li a .wavechar::before, #gotoolvn .wavechar::before, a.topmainabutton p .wavechar::before {
  z-index: -1;
  color: transparent;
}
h1#pagetitle .ptmain .wavechar::after, nav ul li a .wavechar::after, #gotoolvn .wavechar::after, a.topmainabutton p .wavechar::after {
  z-index: -2;
  color: #006faa;
  translate: 0.11em 0.15em;
}

a.topmainabutton {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  container-type: inline-size;
  color: #fff;
  background-image: url(../assets/topmainbutton.webp), linear-gradient(90deg, var(--primaryd) 0%, var(--mbg) 100%);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  height: auto;
  width: 100%;
  aspect-ratio: 5/1;
  margin-bottom: calc(1.5vw + 1.5vh);
  border-radius: 5% 5% 5% 5%/25% 25% 25% 25%;
  overflow: hidden;
  transition: scale 0.4s, box-shadow 0.4s;
}
a.topmainabutton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/topmainbutton_hover.webp) center/cover;
  opacity: 0;
  transition: opacity 0.25s;
}
a.topmainabutton.noeve {
  pointer-events: none;
}
a.topmainabutton {
  --bend: 0;
}
a.topmainabutton:focus, a.topmainabutton:hover {
  --bend: 1;
  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2);
  scale: 1.03;
  transition: scale 0.1s, box-shadow 0.1s;
}
a.topmainabutton:focus::before, a.topmainabutton:hover::before {
  opacity: 1;
  transition-duration: 0.1s;
}
a.topmainabutton .cl {
  position: absolute;
  left: 0;
  top: var(--y);
  width: calc(var(--s, 1) * var(--bw));
  translate: calc(-110% - 8cqw) 0;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z, 0);
}
a.topmainabutton .cl1 {
  --bw: 55.2cqw;
  aspect-ratio: 552/295;
  background: url(../assets/cloud01.svg) no-repeat center/contain;
}
a.topmainabutton .cl2 {
  --bw: 78.6cqw;
  aspect-ratio: 786/257;
  background: url(../assets/cloud02.svg) no-repeat center/contain;
}
a.topmainabutton .cl3 {
  --bw: 25.1cqw;
  aspect-ratio: 251/112;
  background: url(../assets/cloud03.svg) no-repeat center/contain;
}
a.topmainabutton .cl4 {
  --bw: 12.4cqw;
  aspect-ratio: 124/50;
  background: url(../assets/cloud04.svg) no-repeat center/contain;
}
a.topmainabutton .btnrun {
  position: absolute;
  left: 3%;
  bottom: -25%;
  height: 30cqw;
  aspect-ratio: 740/860;
  background: url(../assets/main_mirabbit_anim.webp) no-repeat center/contain;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
a.topmainabutton p {
  position: relative;
  isolation: isolate;
  z-index: 2;
  user-select: none;
  margin: 0;
  font-size: 6.5cqw;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
a.topmainabutton p.subtitle {
  margin-top: 0.35em;
  font-size: 2.6cqw;
  font-weight: 700;
  top: calc(var(--bend) * -0.3em);
  transition: top 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
a.topmainabutton p.subtitle .arcchar {
  display: inline-block;
  position: relative;
  top: calc(var(--bend) * var(--dy));
  transition: top 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
a.topmainabutton p.subtitle .arcchar::before {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 0.44em var(--stroke);
  paint-order: stroke;
  rotate: calc(var(--bend) * var(--rot));
  transition: rotate 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
a.topmainabutton p.subtitle .arcchar i {
  display: inline-block;
  font-style: normal;
  rotate: calc(var(--bend) * var(--rot));
  transition: rotate 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
a.topmainabutton:hover .wavechar, a.topmainabutton:focus-visible .wavechar {
  color: transparent;
  background-color: #ffe900;
  -webkit-background-clip: text;
  background-clip: text;
  animation: charwave 0.3s ease-in-out calc(0.1s + var(--i) * 0.03s);
}
a.topmainabutton .sp {
  width: calc(2.4cqw * var(--s));
  animation: none;
}
a.topmainabutton:hover .sp, a.topmainabutton:focus-visible .sp {
  animation: sparklepop 0.9s ease-in-out var(--d) infinite;
}
a.topmainabutton:hover .btnrun, a.topmainabutton:focus-visible .btnrun {
  animation: runin 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards, btnfloat 2.6s ease-in-out 0.7s infinite alternate;
}
a.topmainabutton:hover .cl, a.topmainabutton:focus-visible .cl {
  animation: cloudscroll var(--dur) linear var(--d) infinite;
}

#boothlist.close {
  opacity: 0.55;
  pointer-events: none;
}

@view-transition {
  navigation: auto;
}
a.topmainabutton#whatismirafes > p:not(.subtitle) {
  view-transition-name: pt-main-abouts;
}
a.topmainabutton#whatismirafes > p.subtitle {
  view-transition-name: pt-sub-abouts;
}
a.topmainabutton#whatismirafes .btnrun {
  view-transition-name: pt-rabbit-abouts;
}

a.topmainabutton#venueinfo > p:not(.subtitle) {
  view-transition-name: pt-main-venue;
}
a.topmainabutton#venueinfo > p.subtitle {
  view-transition-name: pt-sub-venue;
}
a.topmainabutton#venueinfo .btnrun {
  view-transition-name: pt-rabbit-venue;
}

a.topmainabutton#boothlist > p:not(.subtitle) {
  view-transition-name: pt-main-booths;
}
a.topmainabutton#boothlist > p.subtitle {
  view-transition-name: pt-sub-booths;
}
a.topmainabutton#boothlist .btnrun {
  view-transition-name: pt-rabbit-booths;
}

body[data-pagename=abouts] h1#pagetitle .ptmain {
  view-transition-name: pt-main-abouts;
}
body[data-pagename=abouts] h1#pagetitle .ptsub {
  view-transition-name: pt-sub-abouts;
}
body[data-pagename=abouts] h1#pagetitle .ptrabbit {
  view-transition-name: pt-rabbit-abouts;
}

body[data-pagename=venue] h1#pagetitle .ptmain {
  view-transition-name: pt-main-venue;
}
body[data-pagename=venue] h1#pagetitle .ptsub {
  view-transition-name: pt-sub-venue;
}
body[data-pagename=venue] h1#pagetitle .ptrabbit {
  view-transition-name: pt-rabbit-venue;
}

body[data-pagename=booths] h1#pagetitle .ptmain {
  view-transition-name: pt-main-booths;
}
body[data-pagename=booths] h1#pagetitle .ptsub {
  view-transition-name: pt-sub-booths;
}
body[data-pagename=booths] h1#pagetitle .ptrabbit {
  view-transition-name: pt-rabbit-booths;
}

body[data-pagename=singlepost] {
  view-transition-name: boothcard;
}

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.4, 1.4, 0.4, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.55s;
}

.sp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--spsize, 1em) * var(--s));
  aspect-ratio: 1;
  translate: -50% -50%;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 0.3em #fff);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  animation: sparklepop 0.9s ease-in-out var(--d) infinite;
}

@keyframes sparklepop {
  0%, 100% {
    opacity: 0;
    scale: 0.2;
    rotate: 0deg;
  }
  50% {
    opacity: 1;
    scale: 1;
    rotate: 45deg;
  }
}
@keyframes runin {
  0% {
    opacity: 0;
    translate: 110cqw 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes cloudscroll {
  0% {
    opacity: 0;
    translate: calc(-110% - 8cqw) 0;
  }
  6% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: calc(112cqw + 10%) 0;
  }
}
@keyframes btnfloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.2cqw);
  }
}
@keyframes charwave {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -0.4em;
  }
}
@keyframes btnudge {
  0%, 100% {
    left: 0;
  }
  45% {
    left: -0.25em;
  }
}
@keyframes ptwave {
  0%, 13.5%, 100% {
    top: 0;
  }
  6.75% {
    top: -0.4em;
  }
}
@keyframes ptfloat {
  from {
    transform: translateY(0) rotate(-1.5deg);
  }
  to {
    transform: translateY(-1.4cqw) rotate(2deg);
  }
}
@keyframes ptdashleft {
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: -45cqw 0;
  }
}
body.navhover h1#pagetitle .ptrabbit {
  animation: ptdashleft 0.32s cubic-bezier(0.7, 0, 1, 0.4) forwards;
}

body.navhover h1#pagetitle .ptrobot {
  animation: ptrobotgo 1s cubic-bezier(0.3, 0.8, 0.3, 1) 0.15s both, ptfloat 4.1s ease-in-out -1.3s infinite alternate;
}

@keyframes ptrobotgo {
  to {
    translate: -84cqw -6cqw;
    scale: -1 1;
  }
}
@keyframes ptrobothome {
  0% {
    translate: -84cqw -6cqw;
    scale: -1 1;
    opacity: 1;
  }
  18% {
    translate: -115cqw -6cqw;
    scale: -1 1;
    opacity: 0;
  }
  20% {
    translate: 110cqw 0;
    scale: 1 1;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    translate: 0 0;
    scale: 1 1;
    opacity: 1;
  }
}
body.navreturn h1#pagetitle .ptrabbit {
  animation: runin 0.8s cubic-bezier(0.16, 1, 0.3, 1), ptfloat 3.4s ease-in-out 0.8s infinite alternate;
}

body.navreturn h1#pagetitle .ptrobot {
  animation: ptrobothome 0.7s cubic-bezier(0.3, 0.6, 0.3, 1) forwards, ptfloat 4.1s ease-in-out -1.3s infinite alternate;
}

#notification {
  position: relative;
  background: url(../assets/mirafesbg01.webp), linear-gradient(0deg, rgb(0, 145, 219) 0%, rgb(115, 191, 235) 100%);
  background-position: center center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, local;
  padding-top: calc(2vw + 4vh);
  padding-bottom: calc(3vw + 5vh);
  z-index: 0;
  min-height: 20vh;
}

#notifih3,
#yuuchishitteru h3,
#yuuchishitteru h4,
.subcaption h3,
#the_content h3.wp-block-heading {
  position: relative;
  isolation: isolate;
  margin: 0 0 calc(1vw + 1vh);
  text-align: center;
  font-weight: 800;
  font-size: calc(1.2em + 2.2vw);
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 0;
}
#notifih3::before, #notifih3::after,
#yuuchishitteru h3::before,
#yuuchishitteru h3::after,
#yuuchishitteru h4::before,
#yuuchishitteru h4::after,
.subcaption h3::before,
.subcaption h3::after,
#the_content h3.wp-block-heading::before,
#the_content h3.wp-block-heading::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0.24em var(--stroke);
  paint-order: stroke;
}
#notifih3::before,
#yuuchishitteru h3::before,
#yuuchishitteru h4::before,
.subcaption h3::before,
#the_content h3.wp-block-heading::before {
  z-index: -1;
  color: transparent;
}
#notifih3::after,
#yuuchishitteru h3::after,
#yuuchishitteru h4::after,
.subcaption h3::after,
#the_content h3.wp-block-heading::after {
  z-index: -2;
  color: #006faa;
  translate: 0.11em 0.15em;
}

#yuuchishitteru h3,
.subcaption h3,
#the_content h3.wp-block-heading {
  font-size: calc(1em + 1.4vw);
  color: #ffee00;
}

#the_content h3.wp-block-heading {
  margin: 4rem 0 2rem;
}

#yuuchishitteru h4 {
  font-size: calc(0.9em + 1vw);
  margin-top: calc(1.5vw + 1vh);
}

#yuuchishitteru {
  gap: calc(0.5em + 0.8vw);
}

#articleswrapper article > a {
  display: block;
  position: relative;
  background-color: #fff;
  padding: calc(1vw + 1vh);
  border-radius: calc(12px + 1.2vw);
  text-decoration: none;
  will-change: transform;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
  transition: 0.3s cubic-bezier(0.65, 2, 0, 0.5);
  height: 100%;
}
#articleswrapper article > a:hover, #articleswrapper article > a:focus {
  box-shadow: 0px 15px 30px -5px rgba(0, 0, 0, 0.2666666667);
  transition: 0.1s;
  transform: scale(1.05);
}
#articleswrapper article > a time {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #999;
}
#articleswrapper article > a h4 {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-top: calc(0.6vw + 0.6vh);
  margin-bottom: calc(0.8vw + 0.8vh);
  color: var(--secondaryd);
}
#articleswrapper article > a p {
  color: #333;
  font-size: calc(7pt + 0.4vw + 0.4vh);
  text-align: justify;
  margin-bottom: 0;
}
#articleswrapper article > a p.more {
  text-align: center;
  font-size: calc(6pt + 0.3vw + 0.3vh);
  color: var(--primaryd);
}

.mirafes-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  padding: 15px;
  align-items: flex-start;
  justify-content: center;
}
.mirafes-modal.is-open {
  display: flex;
}

.mirafes-modal-dialog {
  position: relative;
  background-color: #fff;
  padding: calc(1vw + 1vh);
  padding-left: 4vw;
  padding-right: 4vw;
  border-radius: calc(12px + 1.2vw);
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
  margin-block: auto;
  min-height: 50vh;
  box-sizing: border-box;
}
.mirafes-modal-dialog time {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #999;
}
.mirafes-modal-dialog h4 {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: calc(0.6vw + 0.6vh);
  margin-bottom: calc(0.8vw + 0.8vh);
  color: var(--secondaryd);
}
.mirafes-modal-dialog p {
  color: #333;
  font-size: calc(7pt + 0.4vw + 0.4vh);
  text-align: justify;
}

.mirafes-modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--primaryd);
  cursor: pointer;
  z-index: 1;
}
.mirafes-modal-close::before, .mirafes-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
}
.mirafes-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mirafes-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.mirafes-modal-open {
  overflow: hidden;
}

footer {
  display: block;
  position: relative;
  background-repeat: no-repeat, repeat;
  background-position: center center, top left;
  background-attachment: scroll, fixed;
  background-image: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%), url(../assets/footer_pattern.webp);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10;
}

#footer-logo {
  padding: 3vw 0 2vw;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#footer-logo a.flogo {
  display: block;
  view-transition-name: mirafes-logo;
  transition: scale 0.3s cubic-bezier(0.33, 3, 0.3, 1);
}
#footer-logo a.flogo:hover {
  scale: 1.06;
}
#footer-logo img {
  display: block;
  height: auto;
}

.footer_list {
  color: var(--primaryd);
  width: 100%;
  font-size: calc(7pt + 0.4vw + 0.4vh);
}
.footer_list thead th {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
  padding: 1rem 0;
}
.footer_list thead th .mi {
  margin-right: 0.4em;
}
.footer_list tr {
  display: flex;
  border-bottom: 1px solid var(--primaryd);
}
.footer_list td {
  display: inline-block;
  width: 100%;
  padding: 0.8rem;
}
.footer_list td:not([colspan="2"]) {
  width: 80%;
}
.footer_list td p {
  padding: 0;
  margin: 0;
}
.footer_list td:first-child:not([colspan="2"]) {
  width: 20%;
  font-weight: 700;
}
.footer_list td:first-child:not([colspan="2"]) p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.footer_list td:first-child:not([colspan="2"]) .mi {
  margin-right: 0.4em;
}

.organizer {
  color: var(--primaryd);
  font-size: calc(7pt + 0.4vw + 0.4vh);
  margin: 3rem 0;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.organizer table th::after {
  content: "：";
}
.organizer .mi {
  margin-right: 0.3em;
}

.contact {
  color: var(--primaryd);
  font-size: calc(7pt + 0.4vw + 0.4vh);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
}
.contact p {
  font-weight: 700;
  margin: 0;
  margin-bottom: 0.5rem;
}
.contact ul {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding-left: 1rem;
}
.contact ul > li {
  padding-right: 1rem;
}
.contact .mi {
  margin-right: 0.25em;
}

#copyright {
  display: block;
  color: #fff;
  background-color: var(--primaryd);
  text-align: center;
  padding: 1rem;
  margin-top: calc(3vmax + 2vmin);
  margin-bottom: 0;
}

body[data-pagename=abouts] .aboutsest,
body[data-pagename=venue] .venueest,
body[data-pagename=booths] .boothsest {
  display: none;
}

header {
  display: block;
}

#gototop {
  display: block;
  position: fixed;
  height: auto;
  width: 14vw;
  aspect-ratio: 562/270;
  top: 1vw;
  left: 1.6vw;
  background-position: center;
  background-size: cover;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.33, 3, 0.3, 1);
  background-image: url(../assets/button_backtotop.png);
}
#gototop:hover {
  background-image: url(../assets/button_backtotop_hover.png);
  transform: scale(1.15);
}

#gotoolvn {
  display: flex;
  position: fixed;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  gap: 0.3vw;
  top: 1vw;
  left: 1.6vw;
  padding: 0.55vw 0.9vw 0.9vw;
  border: 0.25vw solid #fff;
  border-radius: 1vw;
  overflow: hidden;
  background-image: linear-gradient(180deg, #000ea0 0%, #0050bb 55%, #007ec5 100%);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  z-index: 100;
  transition: scale 0.15s ease-out, border-color 0.15s;
}
#gotoolvn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0eccfa 0%, #53a6ff 55%, #b467fc 100%);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: -1;
}
#gotoolvn .btpre {
  font-size: calc(8px + 0.7vw);
  letter-spacing: 0.03em;
}
#gotoolvn .btmain {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: calc(18px + 2.2vw);
  transition: translate 0.3s cubic-bezier(0.33, 3, 0.3, 1);
}
#gotoolvn .btarrow {
  margin-right: 0.1em;
}
#gotoolvn .nl {
  position: relative;
  isolation: isolate;
}
#gotoolvn:hover {
  scale: 1.05;
  border-color: #ffe900;
  transition: scale 0.3s cubic-bezier(0.33, 3, 0.3, 1);
}
#gotoolvn:hover::before {
  opacity: 1;
  transition-duration: 0.1s;
}
#gotoolvn:hover .btmain {
  translate: -0.12em 0;
}
#gotoolvn:hover .wavechar {
  color: transparent;
  background-color: #ffe900;
  -webkit-background-clip: text;
  background-clip: text;
}
#gotoolvn:hover .btpre .wavechar {
  animation: charwave 0.3s ease-in-out calc(0.1s + var(--i) * 0.03s);
}
#gotoolvn:hover .btarrow {
  animation: btnudge 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}

.headercover {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 15;
  transition: all 0.3s ease;
}

#gototop:hover ~ .headercover,
nav:hover ~ .headercover {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

nav {
  display: none;
  position: fixed;
  justify-content: flex-end;
  top: 0;
  right: 0;
  z-index: 100;
}
@media screen and (min-width: 960px) {
  nav {
    display: flex;
  }
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 1vw 0.5vw 0 0;
  padding-left: 0;
}

nav ul li {
  transition: all 0.15s ease-out;
  margin: 0 0.5vw;
  border-radius: 2vw;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}
nav ul li:hover {
  transition: all 0.3s cubic-bezier(0.33, 3, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

nav ul li a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 4vw;
  container-type: inline-size;
  overflow: hidden;
  color: #fff;
  font-size: 1.4vw;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 5%/25%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../assets/topmainbutton.webp), linear-gradient(90deg, var(--primaryd) 0%, var(--mbg) 100%);
  will-change: transform;
  transition: scale 0.15s ease-out;
}
nav ul li a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/topmainbutton_hover.webp) center/cover;
  opacity: 0;
  transition: opacity 0.25s;
}
nav ul li a .nl {
  position: relative;
  isolation: isolate;
  z-index: 2;
}
nav ul li a .btnrun {
  position: absolute;
  left: 3%;
  bottom: -25%;
  height: 6vw;
  aspect-ratio: 740/860;
  background: url(../assets/main_mirabbit_anim.webp) no-repeat center/contain;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
nav ul li a .sp {
  width: calc(0.48vw * var(--s));
  animation: none;
}
nav ul li a:hover {
  color: #fff;
  text-decoration: none;
  scale: 1.05;
  transition: scale 0.3s cubic-bezier(0.33, 3, 0.3, 1);
}
nav ul li a:hover::before {
  opacity: 1;
  transition-duration: 0.1s;
}
nav ul li a:hover .wavechar {
  color: transparent;
  background-color: #ffe900;
  -webkit-background-clip: text;
  background-clip: text;
  animation: charwave 0.3s ease-in-out calc(0.1s + var(--i) * 0.03s);
}
nav ul li a:hover .btnrun {
  animation: runin 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards, btnfloat 2.6s ease-in-out 0.7s infinite alternate;
}
nav ul li a:hover .sp {
  animation: sparklepop 0.9s ease-in-out var(--d) infinite;
}

nav ul li.home a {
  width: 9vw;
  border: 0.25vw solid #fff;
  border-radius: 1vw;
  background-image: linear-gradient(180deg, #000ea0 0%, #0050bb 55%, #007ec5 100%);
  box-shadow: inset 0 -0.3vw 0.5vw rgba(0, 0, 60, 0.25);
  transition: scale 0.15s ease-out, border-color 0.15s;
}
nav ul li.home a::before {
  background: linear-gradient(180deg, #0eccfa 0%, #53a6ff 55%, #b467fc 100%);
}
nav ul li.home a:hover {
  border-color: #ffe900;
}

.mirabottom a {
  display: block;
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: #333;
  text-align: center;
  background-color: #fff;
  padding: 0.8rem;
  border-radius: 2rem;
  margin-top: calc(3vmax + 2vmin);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.65, 2, 0, 0.5);
  text-shadow: 0 0 0 #000;
  background-image: url(../img/modalbottomtransecircles.png);
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
}
.mirabottom a:hover {
  transform: scale(1.05);
  color: #fff;
  background-color: #333;
  text-decoration: none;
  transition: 0.1s;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 10px #000;
  background-image: url(../img/modalbottomrainbowcircles.png);
}

h1#pagetitle {
  position: relative;
  isolation: isolate;
  height: auto;
  width: 100%;
  aspect-ratio: 20/5;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  container-type: inline-size;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(180deg, #004caa 0%, #00ddff 55%, #b467fc 100%);
}
h1#pagetitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1920/240;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-image: url(../assets/top_hero_front.webp);
  pointer-events: none;
}
h1#pagetitle .cl {
  position: absolute;
  left: 0;
  top: var(--y);
  width: calc(var(--s, 1) * var(--bw));
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: cloudscroll var(--dur) linear var(--d) infinite;
}
h1#pagetitle .cl1 {
  --bw: 55.2cqw;
  aspect-ratio: 552/295;
  background: url(../assets/cloud01.svg) no-repeat center/contain;
}
h1#pagetitle .cl2 {
  --bw: 78.6cqw;
  aspect-ratio: 786/257;
  background: url(../assets/cloud02.svg) no-repeat center/contain;
}
h1#pagetitle .cl3 {
  --bw: 25.1cqw;
  aspect-ratio: 251/112;
  background: url(../assets/cloud03.svg) no-repeat center/contain;
}
h1#pagetitle .cl4 {
  --bw: 12.4cqw;
  aspect-ratio: 124/50;
  background: url(../assets/cloud04.svg) no-repeat center/contain;
}
h1#pagetitle .ptrabbit {
  position: absolute;
  left: -3%;
  bottom: -15%;
  height: 32cqw;
  aspect-ratio: 740/860;
  background: url(../assets/main_mirabbit.webp) no-repeat center/contain;
  pointer-events: none;
  z-index: 1;
  animation: ptfloat 3.4s ease-in-out infinite alternate;
}
h1#pagetitle .ptrobot {
  position: absolute;
  right: 3%;
  bottom: 5%;
  height: 18cqw;
  aspect-ratio: 360/400;
  background: url(../assets/main_mirobot.webp) no-repeat center/contain;
  pointer-events: none;
  z-index: 1;
  animation: ptfloat 4.1s ease-in-out -1.3s infinite alternate;
}
h1#pagetitle .ptmain,
h1#pagetitle .ptsub {
  position: relative;
  isolation: isolate;
  z-index: 3;
  display: block;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  color: #fff;
}
h1#pagetitle .ptsub::before, h1#pagetitle .ptsub::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0.44em var(--stroke);
  paint-order: stroke;
}
h1#pagetitle .ptsub::before {
  z-index: -1;
  color: transparent;
}
h1#pagetitle .ptsub::after {
  z-index: -2;
  color: #006faa;
  translate: 0.11em 0.15em;
}
h1#pagetitle .ptmain {
  font-size: 7cqw;
  font-weight: 800;
}
h1#pagetitle .ptmain .wavechar {
  color: transparent;
  background-color: #ffe900;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ptwave 2.6s ease-in-out calc(var(--i) * 0.05s) infinite;
}
h1#pagetitle .ptsub {
  font-size: 2.6cqw;
  font-weight: 700;
  margin-top: 0.5em;
}

h1#pagetitle ~ main {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-image: url(../assets/top_hero_front_next.webp);
}

body:not([data-pagename=top]) .subcaption {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: calc(3vmax + 2vmin) 0;
  font-weight: 700;
  font-size: calc(13px + 0.9vw);
  color: #fff;
  paint-order: stroke;
  -webkit-text-stroke: 0.3em var(--primaryd);
}

body:not([data-pagename=top]) .subcaption.plus {
  margin-top: calc(9vmax + 9vmin);
}

#the_content {
  padding: 0 1rem;
  text-align: center;
  color: #1b4367;
  margin-bottom: 3rem;
  font-weight: 500;
  line-height: calc(16px + 1.2vw);
}

#the_content h2 {
  font-weight: 700;
  font-size: calc(16px + 1.2vw);
  margin: 6rem 0 3rem;
}

#the_content h3,
#the_content h4,
#the_content h5 {
  font-weight: 700;
  font-size: calc(14px + 1vw);
  margin: 4rem 0 2rem;
}

#the_content h2 + h3,
#the_content h2 + h4,
#the_content h2 + h5 {
  margin: 0 0 3rem;
}

#the_content p {
  font-size: calc(12px + 0.8vw);
  margin-bottom: 1.5em;
}

#the_content p.wp-block-paragraph {
  font-weight: 700;
  font-size: calc(13px + 0.9vw);
  color: #fff;
  paint-order: stroke;
  -webkit-text-stroke: 0.3em var(--primaryd);
}

#the_content .wp-block-column p {
  text-align: left;
}

#the_content > ul,
#the_content div ul {
  padding: 0;
}

#the_content ul li {
  list-style: none;
  font-size: calc(12px + 0.8vw);
  margin-bottom: 0.5rem;
}

#the_content .jgblock {
  font-weight: bold;
  font-size: calc(16px + 1.2vw);
  margin: 3rem 0 1rem;
}

#the_content .wp-block-file {
  margin-bottom: 1rem;
}

#the_content .wp-block-file > a {
  color: #fff;
  background-color: var(--primaryd);
  display: inline-block;
  font-size: 1.2rem;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.65, 2, 0, 0.5);
}
#the_content .wp-block-file > a:hover {
  background-color: var(--primary);
  scale: 1.1;
}

#the_content .wp-block-file .wp-block-file__button {
  display: none;
}

.runrabbit {
  display: block;
  position: fixed;
  bottom: 8vh;
  left: 0;
  height: min(450px, 50vw);
  aspect-ratio: 740/860;
  background-image: url(../assets/main_mirabbit_anim.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
  transform: translate(110vw, 10vh);
  animation: runrabbitAnimation 20s linear infinite;
}

@keyframes runrabbitAnimation {
  0% {
    transform: translate(110vw, 10vh);
  }
  12% {
    transform: translate(-450px, -18vh);
  }
  100% {
    transform: translate(-450px, -18vh);
  }
}
.runrabbit2 {
  bottom: 34vh;
  height: min(250px, 45vw);
  filter: blur(5px);
  transform: translate(-450px, 10vh) scaleX(-1);
  animation-name: runrabbit2Animation;
  animation-delay: -10s;
}

@keyframes runrabbit2Animation {
  0% {
    transform: translate(-450px, 10vh) scaleX(-1);
  }
  15% {
    transform: translate(110vw, -18vh) scaleX(-1);
  }
  100% {
    transform: translate(110vw, -18vh) scaleX(-1);
  }
}
.runrabbit3 {
  bottom: 4vh;
  height: min(225px, 30vw);
  aspect-ratio: 360/400;
  background-image: url(../assets/main_mirobot.webp);
  transform: translate(110vw, 10vh);
  animation: runrabbitAnimation 20s linear 0.7s infinite, rabbitbob 0.9s ease-in-out infinite alternate;
}

.runrabbit4 {
  bottom: 28vh;
  height: min(125px, 25vw);
  aspect-ratio: 360/400;
  background-image: url(../assets/main_mirobot.webp);
  filter: blur(3.5px);
  transform: translate(-450px, 10vh) scaleX(-1);
  animation: runrabbit2Animation 20s linear -9.5s infinite, rabbitbob 0.9s ease-in-out -0.3s infinite alternate;
}

.runrabbit5 {
  bottom: 18vh;
  height: min(450px, 50vw);
  background-image: url(../assets/main_petabbit_anim.webp);
  transform-origin: 50% calc(50% - 34vh);
  transform: translate(110vw, 10vh);
  animation: petrabbitAnimation 20s linear -15s infinite;
}

.runrabbit6 {
  bottom: 22vh;
  height: min(250px, 45vw);
  background-image: url(../assets/main_petabbit_anim.webp);
  filter: blur(5px);
  transform: translate(-450px, 10vh) scaleX(-1);
  animation: petrabbit2Animation 20s linear -5s infinite;
}

@keyframes petrabbitAnimation {
  0% {
    transform: translate(110vw, 10vh) rotate(0deg);
  }
  2% {
    transform: translate(52vw, 26vh) rotate(0deg);
  }
  6% {
    transform: translate(52vw, 26vh) rotate(360deg);
  }
  7.2% {
    transform: translate(18vw, 8vh) rotate(360deg);
  }
  9.5% {
    transform: translate(-450px, -12vh) rotate(360deg);
  }
  100% {
    transform: translate(-450px, -12vh) rotate(360deg);
  }
}
@keyframes petrabbit2Animation {
  0% {
    transform: translate(-450px, 10vh) scaleX(-1) rotate(0deg);
  }
  0.75% {
    transform: translate(-8vw, 14.5vh) scaleX(-1) rotate(-6deg);
  }
  1.5% {
    transform: translate(9vw, 3vh) scaleX(-1) rotate(0deg);
  }
  2.25% {
    transform: translate(26vw, -8.5vh) scaleX(-1) rotate(6deg);
  }
  3% {
    transform: translate(43vw, -4vh) scaleX(-1) rotate(0deg);
  }
  3.75% {
    transform: translate(59vw, 0.5vh) scaleX(-1) rotate(-6deg);
  }
  4.5% {
    transform: translate(76vw, -11vh) scaleX(-1) rotate(0deg);
  }
  5.25% {
    transform: translate(93vw, -22.5vh) scaleX(-1) rotate(6deg);
  }
  6% {
    transform: translate(110vw, -18vh) scaleX(-1) rotate(0deg);
  }
  100% {
    transform: translate(110vw, -18vh) scaleX(-1) rotate(0deg);
  }
}
@keyframes rabbitbob {
  0% {
    rotate: -6deg;
    translate: 0 0;
  }
  100% {
    rotate: 6deg;
    translate: 0 -14px;
  }
}
body.pagetitle-inview .runrabbit {
  visibility: hidden;
  animation-play-state: paused;
}

.runrabbit.mirahide {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .runrabbit {
    display: none;
  }
  h1#pagetitle .cl {
    display: none;
  }
  h1#pagetitle .ptrabbit,
  h1#pagetitle .ptrobot,
  body.navhover h1#pagetitle .ptrabbit,
  body.navhover h1#pagetitle .ptrobot,
  body.navreturn h1#pagetitle .ptrabbit,
  body.navreturn h1#pagetitle .ptrobot {
    animation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01s;
  }
}
#boothswrapper {
  margin-bottom: calc(3vh + 3vw);
}
#boothswrapper .kome {
  font-size: calc(14px + 0.4vw);
  color: var(--primaryd);
  -webkit-text-stroke: 0.2em #fff;
}
#boothswrapper .yuuchikokuchi {
  margin-top: calc(1vw + 1vh);
}
#boothswrapper .yuuchikokuchi p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#boothswrapper .yuuchikokuchi p::before {
  content: "";
  width: clamp(65px, 1vh + 1vw, 160px);
  aspect-ratio: 1/1;
  flex-shrink: 0;
  background-image: url(../assets/booth_yuchibadge.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#boothswrapper a.whatsyuuchi {
  display: inline-block;
  text-align: center;
  color: #fff;
  background-color: var(--primaryd);
  padding: 0.5em 1em;
  margin: 1em 0 2em;
  border-radius: 0.5em;
  transition: scale 0.3s cubic-bezier(0.65, 2, 0, 0.5);
}
#boothswrapper a.whatsyuuchi:hover {
  text-decoration: none;
  background-color: var(--primary);
  scale: 1.1;
}
#boothswrapper .boothgrid {
  list-style: none;
  margin: 0;
  padding: 0;
}
#boothswrapper .boothgrid > li {
  position: relative;
}
@media screen and (min-width: 640px) {
  #boothswrapper .boothgrid > li {
    max-width: 440px;
  }
}
#boothswrapper .boothgrid > li.yuchi::after {
  content: "";
  position: absolute;
  top: -3%;
  right: -3%;
  width: clamp(80px, 3vh + 3vw, 160px);
  height: auto;
  aspect-ratio: 1/1;
  background-image: url(../assets/booth_yuchibadge.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  rotate: 10deg;
}
#boothswrapper .boothgrid > li > a {
  display: flex;
  box-sizing: border-box;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: 100%;
  background-color: #fff;
  text-decoration: none;
  transition: 0.3s cubic-bezier(0.65, 2, 0, 0.5);
  border-radius: calc(12px + 1.2vw);
  overflow: hidden;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
}
#boothswrapper .boothgrid > li > a:hover, #boothswrapper .boothgrid > li > a:focus {
  box-shadow: 0px 15px 30px -5px rgba(0, 0, 0, 0.2666666667);
  transition: 0.1s;
  transform: scale(1.05);
}
#boothswrapper .boothgrid > li > a:hover .boimg, #boothswrapper .boothgrid > li > a:focus .boimg {
  opacity: 0.75;
}
#boothswrapper .boothgrid > li > a[data-achive=yes]::after {
  content: "";
  position: absolute;
  height: auto;
  width: 30%;
  aspect-ratio: 1/1;
  background-image: url(../assets/star.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: -1vw;
  right: -1vw;
  transition: all 0.3s cubic-bezier(0.65, 2, 0, 0.5);
  transform-origin: center center;
  pointer-events: none;
  transform: rotate(3deg);
}
#boothswrapper .boothgrid > li > a[data-achive=yes]:hover::after {
  transform: scale(1.2) rotate(5deg);
  transition: all 0.1s;
}
#boothswrapper .boothgrid > li > a .articletext {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  will-change: transform;
}
#boothswrapper .boothgrid > li > a .shichoson {
  box-sizing: border-box;
  width: 100%;
  color: #c60080;
  font-weight: 700;
  font-size: 1em;
  background-color: #fff;
  text-align: center;
  padding: 0.25rem 0 0.4rem;
  margin: 0;
  margin-top: -1px;
}
#boothswrapper .boothgrid > li > a .boimg {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 8/5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  transition: 0.3s;
}
#boothswrapper .boothgrid > li > a .boinf {
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  padding-bottom: 0;
}
#boothswrapper .boothgrid > li > a .boinf .gyoshu {
  color: #1b4367;
  text-align: center;
  border-top: 1px solid #1b4367;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
#boothswrapper .boothgrid > li > a h4 {
  color: #1b4367;
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  margin: 0;
}
#boothswrapper .boothgrid > li > a .shutten {
  flex: 1 0 auto;
  color: #fff;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  align-self: stretch;
  padding: 15px 0;
}
#boothswrapper .boothgrid > li > a .shutten > * {
  font-size: 1.125em;
  line-height: 1;
  width: 80%;
  font-weight: 600;
  border-radius: 1.25em;
  height: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}
#boothswrapper .boothgrid > li > a .shutten > * .mi {
  scale: 1.2;
  margin-right: 0.3em;
}
#boothswrapper .boothgrid > li > a .shutten .real {
  color: #fff;
  background-color: var(--mreal);
  margin: 0;
}
#boothswrapper .boothgrid > li > a .shutten .online {
  color: #fff;
  background-color: var(--monline);
  margin: 0;
}

body[data-pagename=singlepost] {
  position: relative;
}
body[data-pagename=singlepost] #mainblock {
  background: transparent;
  padding: 5vw 0;
  animation: none;
  z-index: 0;
}

#boothtitlewrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#boothtitle {
  background-color: #fff;
  font-size: calc(1.6vw + 1.6vh);
  line-height: calc(1.6vw + 1.6vh);
  font-weight: bold;
  text-align: center;
  padding: calc(1.2vw + 1.2vh) calc(1.6vw + 1.6vh);
  margin: 0;
}
#boothtitle p {
  color: #1b4367;
  margin: 0;
  font-weight: 700;
}
#boothtitle p.gyoshu {
  color: #1b4367;
  font-size: calc(6px + 1vw);
  line-height: calc(6px + 1vw);
  font-weight: bold;
  text-align: center;
  padding: calc(3px + 0.5vw) 0 0;
  border-top: 1px solid #1b4367;
  margin: calc(6px + 1vw) 0 calc(-3px - 0.5vw);
}

#bootharticle {
  position: relative;
  margin-top: 1vw;
  overflow: hidden;
}

#boothlogowrapper {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  background-color: #fff;
  border-top-left-radius: calc(1.6vw + 1.6vh);
  border-top-right-radius: calc(1.6vw + 1.6vh);
  padding: 4vw 0 2vw;
}

#boothlogo {
  height: 14vw;
  max-height: 200px;
  width: 35vw;
  max-width: 960px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#boothinfowrapper {
  position: relative;
  background-color: #fff;
  border-bottom-left-radius: calc(1.6vw + 1.6vh);
  border-bottom-right-radius: calc(1.6vw + 1.6vh);
  padding: 0vw 6vw 4vw;
  z-index: 0;
  margin-bottom: calc(1vw + 1vh);
}
#boothinfowrapper > div {
  z-index: 2;
}
#boothinfowrapper p {
  color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

#boothcopy p {
  font-weight: 600;
  font-size: calc(10px + 1.4vw);
  line-height: calc(10px + 2.6vw);
  text-align: center;
}

#boothoutline p,
#onlineboothabout p {
  font-size: clamp(14px, 8px + 1vw, 24px);
}

#boothcopy p span,
#boothoutline p span,
#onlineboothabout p span {
  display: inline-block;
}

.boothsectiontitle {
  position: relative;
  isolation: isolate;
  margin: 0 0 3vw;
  font-weight: 800;
  font-size: calc(16px + 3vw);
  line-height: 1;
  text-align: center;
  color: #fff;
}
.boothsectiontitle::before, .boothsectiontitle::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0.24em var(--secstroke, var(--stroke));
  paint-order: stroke;
}
.boothsectiontitle::before {
  z-index: -1;
  color: transparent;
}
.boothsectiontitle::after {
  z-index: -2;
  color: var(--secback, #006faa);
  translate: 0.11em 0.15em;
}

#realboothinfowrapper .boothsectiontitle {
  --secstroke: color-mix(in oklch, var(--mreal), black 35%);
  --secback: color-mix(in oklch, var(--mreal), black 15%);
}

#onlineboothwrapper .boothsectiontitle {
  --secstroke: color-mix(in oklch, var(--monline), black 35%);
  --secback: color-mix(in oklch, var(--monline), black 15%);
}

body[data-pagename=singlepost] .boothinfo .boothsectiontitle {
  --secstroke: var(--stroke);
  --secback: #006faa;
  color: color-mix(in oklch, var(--mbg), white 75%);
}

#realboothinfowrapper,
#onlineboothwrapper {
  position: relative;
  color: rgba(0, 0, 0, 0.6666666667);
  background-color: color-mix(in srgb, var(--seccolor) 12%, white 88%);
  background-image: url(../assets/circle_pattern.webp);
  background-repeat: repeat;
  background-attachment: fixed;
  padding: 4vw 8vw;
  margin-bottom: calc(1.6vw + 1.6vh);
  border: calc(8px + 0.5vw) solid var(--seccolor);
  border-radius: calc(1.6vw + 1.6vh);
  box-shadow: inset 0px 0px 8dvw color-mix(in srgb, var(--seccolor) 27%, transparent);
}

#realboothinfowrapper {
  --seccolor: var(--mreal);
}

#realboothinfowrapper h3,
#onlineboothwrapper h3 {
  color: color-mix(in oklch, var(--seccolor), black 15%);
  font-weight: 700;
  font-size: calc(16px + 1.4vw);
  line-height: calc(16px + 1.4vw);
  margin: calc(8px + 0.6vw) 0;
  -webkit-text-stroke: 0.25em #fff;
  paint-order: stroke;
}

#boothotherjobtitle {
  text-align: center;
}

#realboothexinfo p,
#onlinebooth p:not(.jobname) {
  font-weight: normal;
  font-size: clamp(14px, 8px + 1vw, 24px);
  color: #333;
  -webkit-text-stroke: 0.25em rgba(255, 255, 255, 0.6);
  paint-order: stroke;
}

#realboothex {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#realboothex p {
  position: relative;
  --spsize: .8em;
  font-size: calc(12px + 1.2vw);
  line-height: 1.6rem;
  color: #fff;
  padding: calc(6px + 1.2vw + 0.06em) calc(10px + 2vw) calc(6px + 1.2vw - 0.06em);
  border-radius: calc(2px + 0.5vw);
  background-color: var(--mreal);
  margin: 0;
  -webkit-text-stroke: 0.2em rgba(0, 0, 0, 0.2);
  paint-order: stroke;
}

#realboothexinfo .realboothexcontent p,
#realboothexinfo .realboothexmessage p {
  text-align: justify;
  margin-top: 0;
}

#onlineboothwrapper {
  --seccolor: var(--monline);
}
#onlineboothwrapper > .flex {
  margin-top: calc(15px + 1vw);
}

#onlinebooth {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#onlinebooth p:not(.jobname) {
  margin: 0 0 calc(4px + 0.3vw);
}
#onlinebooth .jobname {
  margin-bottom: calc(12px + 0.8vw);
}

#boothmoviewrapper > .boothmovie-card {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
  container-type: inline-size;
  --spsize: 4.5cqw;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: calc(1vw + 1vh);
  text-decoration: none;
}
#boothmoviewrapper > .boothmovie-card::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
#boothmoviewrapper > .boothmovie-card div {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: calc(1vw + 1vh);
  z-index: 1;
}
#boothmoviewrapper > .boothmovie-card div::after {
  content: "";
  background-image: url(../assets/movie_play.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: calc(1vw + 1vh);
}

#boothmoviewrapper > div.boothmovie-card div::after {
  background-image: url(../assets/movie_commingsoon.webp);
}

#boothmoviewrapper > a.boothmovie-card:hover div::after {
  background-image: url(../assets/movie_play_hover.webp);
}

#otherjobwrapper {
  margin: 3vw 3vw 0;
}

.jobname {
  color: #fff;
  font-weight: 600;
  font-size: calc(12px + 1.2vw);
  line-height: calc(12px + 1.2vw);
  padding: calc(4px + 0.6vw + 0.05em) calc(10px + 2vw) calc(4px + 0.6vw - 0.05em);
  border-radius: calc(2px + 0.5vw);
  background-color: var(--seccolor, var(--monline));
  margin: 0;
  -webkit-text-stroke: 0.3em rgba(0, 0, 0, 0.4);
  paint-order: stroke;
}

#onlineboothinfotitle {
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: calc(14px + 1.2vw);
}

body[data-pagename=singlepost] div.boothinfo {
  position: relative;
  background-color: #fff;
  background-image: url(../assets/footerbg_transparent.webp);
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  box-sizing: border-box;
  padding: 4vw 8vw 4vw 8vw;
  border-radius: calc(1.6vw + 1.6vh);
}

.boothinfo_list {
  color: var(--minfo);
  width: 100%;
  font-size: calc(7pt + 0.3vw + 0.3vh);
}
.boothinfo_list th,
.boothinfo_list td {
  padding: 0.8rem;
}
.boothinfo_list th {
  width: 24%;
  color: var(--minfo);
  font-weight: 700;
  white-space: nowrap;
  text-align: left;
}
.boothinfo_list th .mi {
  margin-right: 0.4em;
}
.boothinfo_list tr {
  display: flex;
  border-bottom: 1px dotted var(--minfo);
}
.boothinfo_list tr:last-child {
  border-bottom: none;
}
.boothinfo_list td {
  width: 76%;
}
.boothinfo_list a {
  color: #fff;
  background-color: var(--minfo);
  line-height: 1.2rem;
  padding: 0.2rem 1rem;
  border-radius: 1rem;
  word-break: break-all;
}
.boothinfo_list a:hover {
  text-decoration: none;
  background-color: var(--primary);
}

.notfound {
  padding: 60px 40px;
  background-color: rgba(255, 42, 166, 0.6);
  background-blend-mode: multiply;
}
@media screen and (max-width: 639px) {
  .notfound {
    padding: 30px 20px;
  }
}
.notfound p.title {
  color: #fff;
  font-weight: 700;
  font-size: calc(18px + 0.6vw);
  -webkit-text-stroke: 0.3em rgba(255, 42, 166, 0.5333333333);
  paint-order: stroke;
  text-align: center;
  padding: 0;
  line-height: 1;
}
.notfound p.p {
  font-weight: 700;
  color: #fff;
  font-size: calc(14px + 0.5vw);
  -webkit-text-stroke: 0.3em rgba(255, 42, 166, 0.5333333333);
  paint-order: stroke;
  text-align: center;
  padding: 0;
  margin: 0;
}

.mirafes-video-dialog {
  width: min(94vw, 149.3333333333vh);
  min-height: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
}

.mirafes-video-frame {
  aspect-ratio: 16/9;
}
.mirafes-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-pagename=top] .mirafes-modal-dialog:not(.mirafes-video-dialog),
body[data-pagename=notifications] .mirafes-modal-dialog:not(.mirafes-video-dialog),
body[data-pagename=singlepost] .mirafes-modal-dialog:not(.mirafes-video-dialog),
#loginmodal .mirafes-modal-dialog:not(.mirafes-video-dialog) {
  min-height: 50vh;
  padding-left: 4vw;
  padding-right: 4vw;
}