@charset "UTF-8";
/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
@keyframes clipPathCircle {
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button,
pre {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.5;
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

@media (min-width: 600px) {
  .device-sp {
    display: none;
  }
}

.device-pc {
  display: none;
}
@media (min-width: 600px) {
  .device-pc {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}
body.scroll_rock {
  overflow: hidden;
}

:root {
  --orange: #F9C04B;
  --pink: #ED7B6B;
  --teal: #5DC1CF;
  --purple: #7690C8;
  --white: #ffffff;
  --black: #000000;
  --intro: var(--orange);
  --entry: var(--pink);
  --entry-button: #C21058;
  --info: var(--teal);
  --goods: var(--white);
  --contents: var(--purple);
  --header-z: 5;
}

body {
  color: var(--black);
  font-family: "A1 Gothic R";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "A1 Gothic B";
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.svg-symbol {
  display: none;
}

svg {
  display: block;
}

.section {
  --sec-pad-top: 7.4rem;
  --sec-pad-bottom: 0;
  --sec-pad-inline: 6.5753424658vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sec-pad-top) var(--sec-pad-inline) var(--sec-pad-bottom);
}
.section h2 {
  margin-bottom: 0.8214285714em;
  color: currentColor;
  font-size: 2.8rem;
  line-height: 128.5714285714%;
  text-align: center;
}
.section .lead {
  font-family: "A1 Gothic M";
  font-size: 1.4rem;
  line-height: 200%;
  text-align: center;
}
@media (min-width: 48rem) {
  .section {
    --sec-pad-top: 12rem;
  }
  .section h2 {
    margin-bottom: 1.03125em;
    font-size: 3.2rem;
    line-height: 112.5%;
  }
  .section .lead {
    font-size: 1.8rem;
    line-height: 177.778%;
  }
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--header-z);
  transform: translateY(-100%);
  transition: all 0.3s ease-out;
}
.header.show {
  transform: translateY(0);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4.8rem;
  padding-inline: 2.3rem;
  background-color: rgba(255, 255, 255, 0.9);
}
.header-logos {
  display: flex;
  gap: 0 1.9rem;
}
.header-logos a {
  display: block;
}
@media (min-width: 48rem) {
  .header-bar {
    height: 5rem;
  }
  .header .menu-button {
    display: none;
  }
  .header-logos .logo-hobonichi {
    width: 5.9rem;
    height: auto;
  }
  .header-logos .logo-mother {
    width: 17rem;
    height: auto;
  }
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6.4rem 1.6rem;
  color: var(--white);
  font-size: 1.2rem;
  background-color: var(--black);
}
.footer-group {
  display: grid;
  grid-template-areas: "footer-share" "footer-logo" "footer-hobo";
  gap: 3.2rem 0;
}
.footer-share {
  grid-area: footer-share;
  display: flex;
  align-items: center;
  gap: 0 2.5rem;
}
.footer-share h4 {
  font-size: 1.2rem;
}
.footer-share ul {
  display: flex;
  align-items: center;
  gap: 0 2rem;
}
.footer-logo {
  grid-area: footer-logo;
  display: flex;
  align-items: center;
  gap: 0 3.4rem;
}
.footer-logo .logo-hobonichi {
  fill: var(--white);
}
.footer-hobo {
  grid-area: footer-hobo;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  font-family: "A1 Gothic B";
}
.footer-store {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
  padding: 4.6666666667em 0 3.3333333333em;
  width: min(100%, 24rem);
}
.footer-store li {
  width: 100%;
}
.footer-store li:last-of-type, .footer-store li:nth-last-of-type(2) {
  width: fit-content;
}
.footer-copy {
  font-size: 1rem;
}
@media (min-width: 48rem) {
  .footer-group {
    grid-template-areas: "footer-share footer-hobo footer-logo";
    align-items: center;
  }
  .footer-logo .logo-hobonichi {
    width: 6.7rem;
    height: auto;
  }
  .footer-logo .logo-mother {
    width: 14.3rem;
    height: auto;
  }
  .footer-hobo {
    margin: 0 8em 0 4.3333333333em;
  }
  .footer-store {
    width: max-content;
    gap: 0;
  }
  .footer-store li {
    width: fit-content;
    height: fit-content;
    padding: 0 0.8333333333em 0 0.6666666667em;
    line-height: 1;
  }
  .footer-store li:not(:last-of-type) {
    border-right: 1px solid currentColor;
  }
  .footer-store a {
    text-decoration: underline;
  }
}

.intro {
  --sec-pad-top: 18.6301369863vw;
  --sec-pad-bottom: 3.7rem;
  --yodo-w: min(100%, 46.2rem);
  --yodo-push-left: min(11.2328767123vw, 4.1rem);
  color: var(--black);
  background-color: var(--intro);
}
.intro h2 {
  width: fit-content;
  margin-bottom: 1.9em;
  font-size: 5.4794520548vw;
  line-height: 150%;
  font-feature-settings: "halt" on;
  text-align: left;
}
.intro h2 span {
  margin-inline: 0.2em;
}
@media (min-width: 48rem) {
  .intro {
    --sec-pad-top: 8.3333333333vw;
    --sec-pad-bottom: 8.8rem;
    --sec-pad-inline: 0;
  }
  .intro h2 {
    width: var(--yodo-w);
    margin-bottom: 1.5em;
    font-size: 2.4rem;
    transform: translateX(var(--yodo-push-left));
  }
  .intro h2 .small-only {
    display: none;
  }
  .intro h2 br {
    display: block;
  }
}

.entry {
  --sec-pad-bottom: 61.095890411vw;
  color: var(--white);
  background-color: var(--entry);
}
.entry h2 + p {
  margin-bottom: 1em;
}
.entry-content {
  width: min(100%, 46.2rem);
}
.entry-content + .entry-content {
  margin-top: 4.6rem;
}
.entry h3,
.entry p {
  font-size: 1.4rem;
  line-height: 200%;
}
.entry small {
  font-size: 0.8571428571em;
}
.entry [lang=en] {
  display: block;
  padding-bottom: 0.5em;
  text-indent: 1em;
  line-height: 1;
}
.entry-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.5em;
  width: min(100%, 15.3333333333em);
  margin: 1.2777777778em auto 0;
  padding: 0.9729em 2em;
  font-size: 1.8rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-align: center;
  background-color: var(--entry-button);
  border-radius: 0.4444444444em;
  transition: all 0.35s linear;
}
.entry-button .hb-x {
  font-size: 1.3333333333em;
}
.entry-button:hover {
  opacity: 1;
  color: var(--entry-button);
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--entry-button) inset, 0 3px 0 0 var(--entry-button);
}
@media (min-width: 48rem) {
  .entry {
    --sec-pad-bottom: 8.3333333333vw;
  }
  .entry h3,
  .entry p {
    font-size: 1.6rem;
  }
  .entry small {
    font-size: 0.875em;
  }
  .entry-content + .entry-content {
    margin-top: 6.1rem;
  }
  .entry-button {
    width: min(100%, 18.1em);
    padding-block: 1.3em;
    font-size: 2rem;
  }
}

.info {
  --sec-pad-inline: 4.9315068493vw;
  --sec-pad-bottom: 38.6301369863vw;
  color: var(--white);
  background-color: var(--info);
}
.info-map {
  width: min(100%, 32.9rem);
  aspect-ratio: 329/217;
}
.info-map iframe {
  width: 100%;
  height: 100%;
}
@media (min-width: 48rem) {
  .info {
    --sec-pad-bottom: 8.3333333333vw;
  }
  .info-map {
    width: min(100%, 71.2rem);
    aspect-ratio: 712/280;
  }
}

.goods {
  --sec-pad-bottom: 7.5rem;
  color: var(--black);
  background-color: var(--goods);
}
.goods .banner {
  width: min(75.4794520548vw, 49.4rem);
}
.goods .banner a {
  display: block;
  width: fit-content;
  margin-inline: auto;
  transition: transform 0.35s ease-out;
}
.goods .banner a:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.goods .banner a:hover img {
  filter: drop-shadow(4px 4px 18px rgba(0, 0, 0, 0.26));
}
.goods .banner img {
  width: 100%;
  height: auto;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.1));
  transition: filter 0.35s ease-out;
}
@media (min-width: 48rem) {
  .goods {
    --sec-pad-bottom: 12rem;
  }
}

.contents {
  --sec-pad-bottom: 91.7808219178vw;
  color: var(--white);
  background-color: var(--contents);
}
@media (min-width: 48rem) {
  .contents {
    --sec-pad-bottom: 40.9027777778vw;
  }
}

.nav-button {
  z-index: calc(var(--header-z) + 2);
}

.burger {
  position: relative;
  display: block;
  width: 3rem;
  height: 2.3rem;
}
.burger:before, .burger:after {
  content: "";
}
.burger:before, .burger:after,
.burger span {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  height: 0.3rem;
  border-radius: 0.15rem;
  background-color: var(--black);
  transition: all 0.25s ease-out;
}
.burger:before {
  top: 0;
}
.burger span {
  top: calc(50% - 0.15rem);
}
.burger:after {
  bottom: 0;
}
[aria-haspopup=true] .burger:before {
  top: calc(50% - 0.15rem);
  transform: rotate(45deg);
}
[aria-haspopup=true] .burger span {
  left: 50%;
  width: 0;
}
[aria-haspopup=true] .burger:after {
  bottom: calc(50% - 0.15rem);
  transform: rotate(-45deg);
}

.nav-small {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: calc(var(--header-z) + 1);
  visibility: hidden;
  opacity: 0;
  padding: 9.1rem 1rem 5.7rem 4.4rem;
  background-color: var(--white);
  transition: all 0.35s ease;
}
.nav-small.show {
  visibility: visible;
  opacity: 1;
}
.nav-small .nav-page {
  display: grid;
  gap: 1.0833333333em 0;
  margin-bottom: 2.5em;
  font-family: "A1 Gothic B";
  font-size: 2.4rem;
  line-height: 1;
}

.nav-footer-share {
  display: flex;
  align-items: center;
  gap: 0 2.5rem;
}
.nav-footer-share h4 {
  font-size: 1.2rem;
}
.nav-footer-share ul {
  display: flex;
  align-items: center;
  gap: 0 2rem;
}
.nav-footer-share [data-platform=twitter] img {
  filter: invert(1);
}
.nav-footer-logo {
  display: flex;
  align-items: center;
  gap: 0 2.3rem;
  margin-block: 3rem 2.4rem;
}
.nav-footer-logo .logo-hobonichi {
  fill: var(--black);
}
.nav-footer-hobo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  font-family: "A1 Gothic B";
  font-size: 1.2rem;
}

.nav-large {
  display: none;
  font-family: "A1 Gothic B";
  font-size: 1.8rem;
  line-height: 1;
}
.nav-large ul {
  display: flex;
  gap: 0 4.9rem;
}
.nav-large li:nth-of-type(1) a:after {
  margin-top: 0.2rem;
  background-color: var(--intro);
}
.nav-large li:nth-of-type(2) a:after {
  margin-top: 0.2rem;
  background-color: var(--entry);
}
.nav-large li:nth-of-type(3) a:after {
  margin-top: 0.2rem;
  background-color: var(--info);
}
.nav-large li:nth-of-type(4) a:after {
  margin-top: 0.2rem;
  background-color: var(--orange);
}
.nav-large li:nth-of-type(5) a:after {
  margin-top: 0.2rem;
  background-color: var(--contents);
}
.nav-large a {
  position: relative;
  display: block;
}
.nav-large a:after {
  content: "";
  display: block;
  width: 0%;
  height: 0.25em;
  border-radius: 0.125em;
  transition: width 0.35s ease-out;
}
.nav-large a:hover {
  opacity: 1;
}
.nav-large a:hover:after {
  width: 100%;
}
.nav-large a.active:after {
  width: 100%;
}

@media (min-width: 65rem) {
  .nav-small,
  .nav-button {
    display: none;
  }
  .nav-large {
    display: block;
  }
}
.yodogawa {
  width: var(--yodo-w);
  margin-block: 2.3571428571em 3.2857142857em;
  font-size: 1.4rem;
  line-height: 200%;
}
.yodogawa p + p {
  margin-top: 1em;
}
.yodogawa br {
  display: none;
}
@media (min-width: 48rem) {
  .yodogawa {
    margin-block: 0 4.5625em;
    transform: translateX(var(--yodo-push-left));
  }
  .yodogawa p {
    font-size: 1.6rem;
  }
  .yodogawa br {
    display: block;
  }
}

.about-figures-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 21.1333333333em);
  height: 5.6666666667em;
  margin-bottom: 2.4666666667em;
  padding-inline: 4.1333333333em 1.3333333333em;
  font-family: "A1 Gothic B";
  font-size: 1.5rem;
  line-height: 133.333%;
  text-align: left;
  font-feature-settings: "halt" on;
  border: 2px solid var(--black);
  border-radius: 0.5333333333em;
  background-image: url("../img/intro/starman.webp");
  background-size: 5.9333333333em 5.6666666667em;
  background-position: left top;
  background-repeat: no-repeat;
  transition: all 0.35s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.about-figures-button svg {
  width: 0.7253333333em;
  height: auto;
  fill: var(--white);
  transition: transform 0.25s ease-out;
}
.about-figures-button .t-space {
  margin-left: 0.25em;
}
.about-figures-button:hover {
  color: var(--intro);
  background-color: var(--black);
}
.about-figures-button:hover svg {
  transform: rotate(90deg);
}
.about-figures-button[aria-expanded=true] svg {
  transform: rotate(90deg);
}
@media (min-width: 48rem) {
  .about-figures-button {
    width: 25.3em;
    height: 6.9em;
    padding-inline: 6.45em 1.4em;
    font-size: 2rem;
    line-height: 160%;
    background-size: 10.1em 9.65em;
  }
  .about-figures-button svg {
    width: 1.188em;
  }
}
.about-figures-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6428571429em 0;
  interpolate-size: allow-keywords;
  height: 0;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 171.429%;
  transition: height 1s linear;
}
.about-figures-panel small {
  display: block;
  margin-top: 1em;
  font-size: 1em;
}
.about-figures-panel.expanded {
  height: max-content;
}
@media (min-width: 48rem) {
  .about-figures-panel {
    gap: 3.375em 0;
    width: 46.2rem;
    font-size: 1.6rem;
    line-height: 200%;
  }
}

.accordion-close {
  display: flex;
  align-items: center;
  gap: 0 0.4285714286em;
  font-family: "A1 Gothic M";
}

.cover {
  --h1-w: 120.2693150685%;
  --h1-x: -9.8630136986%;
  --h1-y: -3.1609195402%;
  --p-w: 116.28%;
  --p-x: -7.9452054795%;
  --p-y: 3.0172413793%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 365/696;
  width: 100%;
}
.cover h1,
.cover p {
  position: absolute;
}
.cover h1 {
  top: var(--h1-y);
  left: var(--h1-x);
  width: var(--h1-w);
  opacity: 0;
  animation: fade-in 0.5s 0.5s ease-out forwards;
}
.cover p {
  bottom: var(--p-y);
  left: var(--p-x);
  width: var(--p-w);
  opacity: 0;
  animation: fade-in 0.5s 1s ease-out forwards;
}
.cover picture {
  width: 100%;
  height: 100%;
}
.cover picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 48rem) {
  .cover {
    --h1-w: 107.0138888889%;
    --h1-x: -2.9166666667%;
    --h1-y: -9.7926267281%;
    --p-w: 103.5416666667%;
    --p-x: -1.6666666667%;
    --p-y: 0.9216589862%;
    aspect-ratio: 1440/868;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 100%;
  }
}
.info-dl {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 1em 1.7857142857em;
  width: min(100%, 83.6rem);
  margin-bottom: 2.8571428571em;
  font-size: 1.4rem;
  line-height: 200%;
}
.info-dl > div {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
}
.info-dl dt {
  font-family: "A1 Gothic B";
  text-align: right;
}
.info-dl small {
  display: block;
  font-size: 0.8571428571em;
}
.info-dl .note {
  margin-top: 0.5em;
}
.info-dl a {
  padding: 0.5em 1.0833333333em;
  font-size: 1.2rem;
  font-family: "A1 Gothic M";
  line-height: 1;
  background-color: var(--black);
  border-radius: 1em;
  transition: all 0.35s ease-out;
}
.info-dl a:hover {
  opacity: 1;
  color: var(--info);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
}
@media (min-width: 48rem) {
  .info-dl {
    grid-template-columns: 38.5% auto;
    margin-bottom: 2.125em;
    font-size: 1.6rem;
  }
  .info-dl small {
    font-size: 0.875em;
  }
  .info-dl .small-only {
    display: none;
  }
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem 1.6rem;
  margin-block: 3.5rem 3.8rem;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
    gap: min(2.9166666667vw, 4.2rem) min(3.7037037037%, 4rem);
    max-width: 108rem;
    margin-block: 7.5rem 7rem;
  }
}

.card a {
  transition: color 0.35s linear;
}
.card a:hover {
  opacity: 1;
  color: var(--orange);
}
.card a:hover .board:before {
  box-shadow: 0 0 0 1px currentColor inset, 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}
.card a:hover picture img {
  filter: brightness(1.05);
}
.card:nth-of-type(3n + 2) a:hover {
  color: var(--pink);
}
.card:nth-of-type(3n + 3) a:hover {
  color: var(--teal);
}
.card .board {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 1.4rem;
  border-radius: 0.4rem;
}
.card .board:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0 0 0 1px #C2C2C2 inset;
  border-radius: 0.4rem;
  transition: box-shadow 0.35s linear;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
  transition: filter 0.35s linear;
}
.card .badge {
  position: absolute;
  z-index: 1;
  top: min(2.5641025641%, 0.6rem);
  left: min(2.5641025641%, 0.6rem);
  width: min(22.4358974359%, 5.5rem);
  height: min(22.4358974359%, 5.5rem);
}
.card .notice {
  position: absolute;
  left: 2.5641025641%;
  bottom: 2.5641025641%;
  width: fit-content;
  padding: 0.4em 0.5em 0.4em;
  color: var(--black);
  font-family: "A1 Gothic M";
  font-size: 1rem;
  line-height: 1;
  background-color: rgba(from var(--white) r g b/0.3);
  border: 1px solid var(--black);
}
.card h3 {
  font-family: "A1 Gothic R";
  font-size: 1.2rem;
  line-height: 133.333%;
  text-align: center;
  font-feature-settings: "palt" on;
}
.card h3 span {
  display: block;
}
.card[data-date] .board {
  font-size: 0;
  border-radius: 0.8rem;
  background-image: url(../img/goods/badge_cs.webp);
  background-size: 54.5833333333% 31.4102564103%;
  background-position: center;
  background-repeat: no-repeat;
}
.card[data-date] .board:before {
  display: none;
}
.card[data-date] h3 {
  height: 4em;
  font-family: "A1 Gothic B";
  font-size: 1.6rem;
  line-height: 131.25%;
}
.card[data-date] h3 .day {
  font-size: 0.875em;
}
.card[data-date] h3 .small-only {
  display: block;
}
.card[data-date] h3 time,
.card[data-date] h3 span {
  display: inline;
}
.card[data-date="0702"] .board {
  background-color: var(--orange);
}
.card[data-date="0702"] h3 {
  height: 3.6666666667em;
  color: var(--orange);
}
.card[data-date="0707"] .board {
  background-color: var(--pink);
}
.card[data-date="0707"] h3 {
  height: 3.6666666667em;
  color: var(--pink);
}
.card[data-date="0709"] .board {
  background-color: var(--teal);
}
.card[data-date="0709"] h3 {
  height: 3.6666666667em;
  color: var(--teal);
}
@media (min-width: 48rem) {
  .card h3 {
    font-size: 1.4rem;
    line-height: 157.143%;
  }
  .card[data-date] h3 {
    height: 3.6666666667em;
    font-size: 1.8rem;
    line-height: 155.556%;
  }
  .card[data-date] h3 .small-only {
    display: none;
  }
  .card[data-date] h3 .day {
    font-size: 0.7777777778em;
  }
  .card[data-date] h3 .tba {
    display: block;
    font-size: 0.8888888889em;
  }
}

[class*=character-] {
  position: absolute;
  height: auto;
}
[class*=character-] img {
  width: 100%;
  height: auto;
}

.ness-ninten-box {
  position: relative;
  left: 0;
  right: 0;
  width: calc(100% + var(--sec-pad-inline) * 2);
  height: 130.6849315068vw;
}
.ness-ninten-box .character-ness {
  left: 0;
  top: 0;
  width: 49.8630136986vw;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ness-ninten-box .character-ninten {
  right: 0;
  bottom: 0;
  width: 44.9315068493vw;
  transform: translateX(100%);
  transition: transform 0.35s 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ness-ninten-box.show .character-ness {
  transform: translateX(0%);
}
.ness-ninten-box.show .character-ninten {
  transform: translateX(0%);
}
@media (min-width: 48rem) {
  .ness-ninten-box {
    position: absolute;
    top: 4.0972222222vw;
    width: 100%;
    height: 82.2222222222vw;
    pointer-events: none;
  }
  .ness-ninten-box .character-ness {
    width: min(26.6666666667vw, 38.4rem);
  }
  .ness-ninten-box .character-ninten {
    width: min(22.2916666667vw, 32.1rem);
  }
}
@media (min-width: 62.5rem) {
  .ness-ninten-box .character-ness {
    width: 26.6666666667vw;
  }
  .ness-ninten-box .character-ninten {
    width: 22.2916666667vw;
  }
}

.anna-box {
  position: absolute;
  left: 11.2328767123vw;
  bottom: 0;
  width: 38.0821917808vw;
  height: 41.3698630137vw;
}
.anna-box .character-anna {
  position: relative;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.anna-box.show .character-anna {
  transform: translateY(0%);
}
@media (min-width: 48rem) {
  .anna-box {
    bottom: unset;
    top: 0;
    left: 2.0138888889vw;
    width: 21.3055555556vw;
    height: 23.0763888889vw;
  }
  .anna-box .character-anna {
    transform: translateY(-100%);
  }
}

.paula-box {
  position: absolute;
  right: 10.5205479452vw;
  bottom: 0;
  width: 37.8082191781vw;
  height: 49.0410958904vw;
}
.paula-box .character-paula {
  position: relative;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.5s 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.paula-box.show .character-paula {
  transform: translateY(0%);
}
@media (min-width: 48rem) {
  .paula-box {
    right: 2.8152777778vw;
    width: 21.0416666667vw;
    height: 27.4027777778vw;
  }
}

.lloyd-jeff-box {
  position: absolute;
  bottom: 0;
  left: 4.9315068493vw;
  width: 80.1287671233vw;
  height: 25.7534246575vw;
}

.character-lloyd {
  bottom: 0;
  left: 0;
  width: 51.5068493151vw;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.show .character-lloyd {
  transform: translateY(0%);
}

.character-jeff {
  bottom: 0;
  right: 0;
  width: 35.4794520548vw;
  transform: translateY(100%);
  transition: transform 0.35s 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.show .character-jeff {
  transform: translateY(0%);
}

@media (min-width: 48rem) {
  .lloyd-jeff-box {
    left: 0;
    bottom: unset;
    top: 7.4305555556vw;
    width: 16.4583333333vw;
    height: 51.1805555556vw;
  }
  .character-lloyd {
    bottom: unset;
    top: 0;
    left: 0;
    width: 16.25vw;
    transform: translate(-100%, 0%);
  }
  .show .character-lloyd {
    transform: translate(0%, 0%);
  }
  .character-jeff {
    bottom: 0;
    right: unset;
    left: 0;
    width: 15.4166666667vw;
    transform: translate(-100%, 0);
    transition: transform 0.35s 0.35s cubic-bezier(0.76, 0, 0.24, 1);
  }
  .show .character-jeff {
    transform: translate(0%, 0%);
  }
}
.character-geppu {
  right: 0;
  width: 47.1232876712vw;
  transform: translate(100%, 3.9rem);
  transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.show .character-geppu {
  transform: translate(0%, 3.9rem);
}
@media (min-width: 48rem) {
  .character-geppu {
    width: 27.2916666667vw;
    transform: translate(100%, -4.7rem);
  }
  .show .character-geppu {
    transform: translate(0%, -4.7rem);
  }
}

.character-pippi {
  left: 0;
  width: 47.9452054795vw;
  transform: translate(-100%, 5.5rem);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.show .character-pippi {
  transform: translate(0%, 5.5rem);
}
@media (min-width: 48rem) {
  .character-pippi {
    width: 25.625vw;
    transform: translate(-100%, 0.7rem);
  }
  .show .character-pippi {
    transform: translate(0%, 0.7rem);
  }
}

.character-doseisan {
  position: relative;
  width: 94.2307692308%;
  height: auto;
  margin-top: 20%;
}
@media (min-width: 48rem) {
  .character-doseisan {
    margin-top: 15%;
    width: 100%;
    transform: scale(1.0416666667);
  }
}

.poo-teddy-box {
  position: absolute;
  bottom: 0;
  left: 4.3835616438vw;
  width: 93.402739726vw;
  height: 57.8904109589vw;
}
.poo-teddy-box .character-poo,
.poo-teddy-box .character-teddy {
  visibility: hidden;
}
.poo-teddy-box .character-poo {
  bottom: 0;
  left: 0;
  width: 41.6438356164vw;
}
.poo-teddy-box.show .character-poo {
  animation: pop-from-bottom 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.poo-teddy-box .character-teddy {
  bottom: 0;
  right: 0;
  width: 53.9726027397vw;
}
.poo-teddy-box.show .character-teddy {
  animation: pop-from-bottom 0.75s 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@media (min-width: 48rem) {
  .poo-teddy-box {
    left: 25.4166666667vw;
    width: 54.1208333333vw;
    height: 32.2916666667vw;
  }
  .poo-teddy-box .character-poo {
    width: 23.2638888889vw;
  }
  .poo-teddy-box .character-teddy {
    width: 30.0694444444vw;
  }
}

@keyframes pop-from-bottom {
  0% {
    visibility: visible;
    transform: translateY(100%);
  }
  60% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(1%);
  }
  100% {
    visibility: visible;
    transform: translateY(0);
  }
}