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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

address {
  font-style: normal;
}

html {
  font-size: 16px;
}
@media not all and (min-width: 768px) {
  html {
    font-size: 4.0712468193vw;
  }
}
@media (min-width: 768px) and (max-width: 1239.98px) {
  html {
    font-size: 1.2903225806vw;
  }
}

body {
  background-color: #c8161e;
  color: #231815;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}

section[id] {
  scroll-margin-top: calc(min(100vw, 31.25rem) * 0.2709 + 0.75rem);
}
@media screen and (min-width: 768px) {
  section[id] {
    scroll-margin-top: calc(25vw * 0.375);
  }
}

:focus-visible {
  outline: 0.1875rem solid #c9a063;
  outline-offset: 0.1875rem;
}

.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .u-sp {
    display: none;
  }
}

.u-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-pc {
    display: inline;
  }
}

.is-fixed {
  overflow: hidden;
}

@keyframes hang-drop {
  0% {
    translate: 0 calc(var(--hang-fall) * -35%);
  }
  70% {
    translate: 0 calc(var(--hang-fall) * 1.8%);
  }
  86% {
    translate: 0 calc(var(--hang-fall) * -0.7%);
  }
  100% {
    translate: 0 0;
  }
}
@keyframes hang-slack {
  0% {
    scale: 1 0.65;
  }
  70% {
    scale: 1 1.018;
  }
  86% {
    scale: 1 0.993;
  }
  100% {
    scale: 1 1;
  }
}
@keyframes hang-rope-top {
  0% {
    transform: skewX(8deg);
  }
  4% {
    transform: skewX(5.2deg);
  }
  7.5% {
    transform: skewX(2deg);
  }
  10.5% {
    transform: skewX(0deg);
  }
  29.2% {
    transform: skewX(1.2deg);
  }
  44.8% {
    transform: skewX(-0.8deg);
  }
  60.5% {
    transform: skewX(0.5deg);
  }
  75.3% {
    transform: skewX(-0.275deg);
  }
  88.5% {
    transform: skewX(0.125deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
@keyframes hang-rope-lower {
  0% {
    transform: skewX(-8deg);
  }
  4% {
    transform: skewX(-5.2deg);
  }
  7.5% {
    transform: skewX(-2deg);
  }
  10.5% {
    transform: skewX(0deg);
  }
  29.2% {
    transform: skewX(1.2deg);
  }
  44.8% {
    transform: skewX(-0.8deg);
  }
  60.5% {
    transform: skewX(0.5deg);
  }
  75.3% {
    transform: skewX(-0.275deg);
  }
  88.5% {
    transform: skewX(0.125deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
@keyframes hang-rope-straight {
  0%, 10.5% {
    transform: skewX(0deg);
  }
  29.2% {
    transform: skewX(2.4deg);
  }
  44.8% {
    transform: skewX(-1.6deg);
  }
  60.5% {
    transform: skewX(1deg);
  }
  75.3% {
    transform: skewX(-0.55deg);
  }
  88.5% {
    transform: skewX(0.25deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
@keyframes hang-sway-body {
  0% {
    transform: translateX(0);
  }
  14% {
    transform: translateX(calc(var(--hang-rope) * 4.19%));
  }
  33% {
    transform: translateX(calc(var(--hang-rope) * -2.79%));
  }
  52% {
    transform: translateX(calc(var(--hang-rope) * 1.75%));
  }
  70% {
    transform: translateX(calc(var(--hang-rope) * -0.96%));
  }
  86% {
    transform: translateX(calc(var(--hang-rope) * 0.44%));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fade-down {
  0% {
    opacity: 0;
    translate: 0 -10%;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes walk-arc {
  0%, 4% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1 1;
  }
  15% {
    translate: -9cqw -13%;
    rotate: -2deg;
    scale: 1 1;
  }
  25% {
    translate: -18cqw -21%;
    rotate: -5deg;
    scale: 1 1;
  }
  36% {
    translate: -27cqw -25%;
    rotate: -7deg;
    scale: 1 1;
  }
  46% {
    translate: -36cqw -26%;
    rotate: -9deg;
    scale: 1 1;
  }
  54% {
    translate: -36cqw -26%;
    rotate: 9deg;
    scale: -1 1;
  }
  64% {
    translate: -27cqw -25%;
    rotate: 7deg;
    scale: -1 1;
  }
  75% {
    translate: -18cqw -21%;
    rotate: 5deg;
    scale: -1 1;
  }
  85% {
    translate: -9cqw -13%;
    rotate: 2deg;
    scale: -1 1;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: -1 1;
  }
}
@keyframes walk-arc-pc {
  0%, 4% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1 1;
  }
  15% {
    translate: -7cqw -2.92cqw;
    rotate: -6deg;
    scale: 1 1;
  }
  25% {
    translate: -14cqw -4.29cqw;
    rotate: -2deg;
    scale: 1 1;
  }
  36% {
    translate: -21cqw -4.28cqw;
    rotate: 3deg;
    scale: 1 1;
  }
  46% {
    translate: -28cqw -2.89cqw;
    rotate: 6deg;
    scale: 1 1;
  }
  54% {
    translate: -28cqw -2.89cqw;
    rotate: -6deg;
    scale: -1 1;
  }
  64% {
    translate: -21cqw -4.28cqw;
    rotate: -3deg;
    scale: -1 1;
  }
  75% {
    translate: -14cqw -4.29cqw;
    rotate: 2deg;
    scale: -1 1;
  }
  85% {
    translate: -7cqw -2.92cqw;
    rotate: 6deg;
    scale: -1 1;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: -1 1;
  }
}
@keyframes hop {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14%);
  }
}
@keyframes pop-out {
  0% {
    translate: 0 100%;
  }
  65% {
    translate: 0 -8%;
  }
  85% {
    translate: 0 3%;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes bag-step-1 {
  0%, 43.9% {
    opacity: 1;
  }
  44%, 100% {
    opacity: 0;
  }
}
@keyframes bag-step-2 {
  0%, 43.9% {
    opacity: 0;
  }
  44%, 67.9% {
    opacity: 1;
  }
  68%, 100% {
    opacity: 0;
  }
}
@keyframes bag-step-3 {
  0%, 67.9% {
    opacity: 0;
  }
  68%, 100% {
    opacity: 1;
  }
}
@keyframes sway {
  0%, 100% {
    rotate: -3.5deg;
  }
  50% {
    rotate: 3.5deg;
  }
}
@keyframes sway-load {
  0%, 100% {
    rotate: -2deg;
  }
  50% {
    rotate: 2deg;
  }
}
@keyframes sway-lg {
  0%, 100% {
    rotate: -9deg;
  }
  50% {
    rotate: 9deg;
  }
}
@keyframes swing {
  0%, 100% {
    rotate: -2.2deg;
  }
  50% {
    rotate: 2.2deg;
  }
}
@keyframes lid-open {
  0% {
    clip-path: inset(48% 0 0 0);
    scale: 1 0.92;
  }
  55% {
    clip-path: inset(0 0 0 0);
    scale: 1 1.06;
  }
  75% {
    scale: 1 0.98;
  }
  100% {
    clip-path: inset(0 0 0 0);
    scale: 1 1;
  }
}
@keyframes fall {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    translate: 0.875rem var(--fall, 110vh);
    opacity: 1;
  }
}
.page {
  position: relative;
  margin: auto;
  max-width: 31.25rem;
  width: 100%;
  overflow-x: clip;
  background-color: #c8161e;
}
@media screen and (min-width: 768px) {
  .page {
    max-width: none;
  }
}

.inner {
  margin: auto;
  padding: 0 1.8125rem;
  max-width: 31.25rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .inner {
    padding: 0 1.5625rem;
    max-width: 78.125rem;
  }
}

.gallery-inner {
  position: relative;
  margin: auto;
  padding: 0;
  max-width: 31.25rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .gallery-inner {
    max-width: none;
  }
}

.layout-header {
  position: fixed;
  z-index: 800;
  top: 0;
  left: 50%;
  translate: -50% 0;
  max-width: 31.25rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .layout-header {
    max-width: none;
  }
}

.header {
  height: 3.1875rem;
  background-color: #c8161e;
}
@media screen and (min-width: 768px) {
  .header {
    height: 0;
    background-color: transparent;
  }
}

.header__curtain {
  position: absolute;
  top: -0.1375rem;
  left: -0.16%;
  width: 100.32%;
  aspect-ratio: 1182.77/533.38;
  background: url("../img/vec/fv/curtain.svg?v=20260812") no-repeat center top/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .header__curtain {
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920/480;
    height: auto;
    background: url("../img/vec/fv/curtain-pc.webp?v=20260812") no-repeat center top/100% auto;
  }
}

.header__inner {
  position: relative;
  height: 100%;
}

.header__logo {
  position: absolute;
  top: 1.125rem;
  left: 50%;
  translate: -50% 0;
  width: 6.5rem;
}
@media screen and (min-width: 768px) {
  .header__logo {
    z-index: 950;
    top: min(3.6875rem, 3.0729166667vw);
    width: min(11.375rem, 9.4791666667vw);
  }
}

.header__logo img {
  width: 100%;
  height: auto;
}

.header__hamburger {
  position: absolute;
  z-index: 950;
  top: 1.25rem;
  left: 2.625rem;
  display: grid;
  gap: 0.2875rem;
  width: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .header__hamburger {
    top: 3.9375rem;
    left: 5.5208333333%;
    gap: 0.625rem;
    width: 1.75rem;
  }
}

.header__hamburger span {
  display: block;
  height: 0.0625rem;
  background-color: #fff;
  transition: translate 0.3s, rotate 0.3s, background-color 0.3s;
}
@media screen and (min-width: 768px) {
  .header__hamburger span {
    height: 0.1875rem;
  }
}

.header__hamburger.is-open span:nth-of-type(1) {
  translate: 0 0.35rem;
  rotate: 45deg;
}
@media screen and (min-width: 768px) {
  .header__hamburger.is-open span:nth-of-type(1) {
    translate: 0 0.8125rem;
  }
}

.header__hamburger.is-open span:nth-of-type(2) {
  background-color: transparent;
}

.header__hamburger.is-open span:nth-of-type(3) {
  translate: 0 -0.35rem;
  rotate: -45deg;
}
@media screen and (min-width: 768px) {
  .header__hamburger.is-open span:nth-of-type(3) {
    translate: 0 -0.8125rem;
  }
}

.header__drawer {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: none;
  padding: 4.84375rem 2.4375rem 2.5rem;
  max-width: 31.25rem;
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scrollbar-width: none;
  background-color: #c8161e;
}
@media screen and (min-width: 768px) {
  .header__drawer {
    padding: 13.5rem 1.875rem 3.75rem;
    max-width: none;
    height: 100dvh;
  }
}

.header__drawer::-webkit-scrollbar {
  display: none;
}

.header__drawer-list {
  display: grid;
  gap: 1.25rem;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .header__drawer-list {
    justify-content: center;
    align-content: start;
    gap: 0;
    grid-template-columns: 21rem auto;
    grid-auto-rows: 5.625rem;
    column-gap: 5.9375rem;
  }
}

.header__drawer-item--indent {
  padding-left: 2.23125rem;
  margin-top: -0.45rem;
}
@media screen and (min-width: 768px) {
  .header__drawer-item--indent {
    padding-left: 0;
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(1) {
    grid-area: 1/1;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(2) {
    grid-area: 2/1;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(3) {
    grid-area: 3/1;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(4) {
    grid-area: 1/2;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(5) {
    grid-area: 2/2;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(6) {
    grid-area: 3/2;
  }
}

@media screen and (min-width: 768px) {
  .header__drawer-item:nth-of-type(7) {
    grid-area: 4/2;
  }
}

.header__drawer-item .drawer-en {
  display: block;
  font-family: "Chiron GoRound TC", "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 1.325rem;
  font-weight: 900;
  letter-spacing: 0.23em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .header__drawer-item .drawer-en {
    font-size: 1.875rem;
    letter-spacing: 0.1em;
  }
}

.header__drawer-item .drawer-ja {
  display: block;
  margin-top: 0.0375rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .header__drawer-item .drawer-ja {
    margin-top: 0.375rem;
    font-size: 1rem;
  }
}

.fv {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: #fff;
}

.fv__stage {
  position: absolute;
  --fv-lift: 6cqw;
  top: max(0px, clamp(0px, 50svh - 65.205cqw, 50cqw) - var(--fv-lift));
  left: 50%;
  width: 100%;
  aspect-ratio: 1179/1702;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .fv__stage {
    top: 0;
    aspect-ratio: 1920/800;
    width: clamp(100%, 240svh, 235%);
    transform: translateX(-50%) translateY(clamp(0px, 100svh - 100%, 80.23%));
  }
}

.fv__photo {
  position: absolute;
  top: -35.22%;
  left: 55.98%;
  width: 214.46%;
  width: max(214.46%, 86.898svh + 44.182%);
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .fv__photo {
    top: -80.23%;
    left: 50%;
    width: 131.02%;
    width: max(131.02%, 120.4373svh);
    height: auto;
  }
}

.fv__photo picture {
  display: block;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .fv__photo picture {
    height: auto;
  }
}

.fv__photo img {
  width: 100%;
  height: auto;
  max-width: none;
}

.fv__copy {
  position: absolute;
  height: auto;
}

.fv__copy--we-are {
  top: 33.63%;
  left: 28.4690415606%;
  width: 42.8117048346%;
}
@media screen and (min-width: 768px) {
  .fv__copy--we-are {
    top: 33.875%;
    left: 42.292%;
    width: 14.219%;
  }
}

.fv__copy--name {
  top: 41.86%;
  left: 23.3638676845%;
  width: 56.6581849025%;
}
@media screen and (min-width: 768px) {
  .fv__copy--name {
    top: 43.125%;
    left: 40.573%;
    width: 18.854%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fv__copy {
    opacity: 0;
  }
  .fv__copy.is-shown {
    animation: fade-down 1s ease 0.4s both;
  }
  .fv__copy--name.is-shown {
    animation-delay: calc(0.18s + 0.4s);
  }
}
.about {
  position: relative;
  padding-bottom: 9.25rem;
  background-color: #c8161e;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .about {
    padding-top: 5.375rem;
    padding-bottom: 13.25rem;
  }
}

.about__title {
  margin: auto;
  width: 85.1272264631%;
}
@media screen and (min-width: 768px) {
  .about__title {
    width: 34.625rem;
  }
}

.about__title .hang {
  --hang-rope: 0.354;
  --hang-fall: 0.872;
}
@media screen and (min-width: 768px) {
  .about__title .hang {
    --hang-fall: 1.73;
  }
}

@media screen and (min-width: 768px) {
  .about__title .hang__rope {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .about__title .hang::before,
  .about__title .hang::after {
    content: "";
    position: absolute;
    top: -5.375rem;
    left: 1.5275rem;
    width: 0.195rem;
    height: 11.125rem;
    background: url("../img/vec/about/thread-l-pc.svg?v=20260821") center/100% 100% no-repeat;
  }
}

@media screen and (min-width: 768px) {
  .about__title .hang::after {
    left: 33.786875rem;
    width: 0.17625rem;
    height: 9.875rem;
    background-image: url("../img/vec/about/thread-r-pc.svg?v=20260821");
  }
}

.about__faces {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0.75rem auto 0;
  width: 56.6887192536%;
}
@media screen and (min-width: 768px) {
  .about__faces {
    margin-top: 1.375rem;
    width: 33.75rem;
  }
}

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

.about__faces-item:nth-of-type(1) {
  width: 21.5018852116%;
}

.about__faces-item:nth-of-type(2) {
  width: 18.7518702496%;
}

.about__faces-item:nth-of-type(3) {
  width: 15.0263331139%;
}

.about__faces-item:nth-of-type(4) {
  width: 13.8637859836%;
}

.about__faces-item:nth-of-type(5) {
  width: 14.6792147944%;
}

.about__text {
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .about__text {
    margin-top: 1.5rem;
  }
}

@media screen and (min-width: 768px) {
  .about__title + .about__text {
    margin-top: 3.4375rem;
  }
}

.about__text + .about__text {
  margin-top: 0rem;
}
@media screen and (min-width: 768px) {
  .about__text + .about__text {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .about__faces-item.is-shown {
    animation: sway-lg 2.6s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .about__faces-item:nth-of-type(2).is-shown {
    animation-delay: 0.2s;
  }
  .about__faces-item:nth-of-type(3).is-shown {
    animation-delay: 0.4s;
  }
  .about__faces-item:nth-of-type(4).is-shown {
    animation-delay: 0.6s;
  }
  .about__faces-item:nth-of-type(5).is-shown {
    animation-delay: 0.8s;
  }
}
.story {
  container-type: inline-size;
  position: relative;
  z-index: 0;
  padding-bottom: 6.5625rem;
  background-image: linear-gradient(to bottom, #c8161e 0 4px, #fff 4px);
  color: #c8161e;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .story {
    padding-bottom: calc(min(29.5625rem, 24.6354166667cqw) + var(--arch-h) - 72.9167cqw);
    --arch-h: max(72.9167cqw, calc(644px + (100cqw - 768px) * 0.57124));
  }
}

.story::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1179/178.5;
  background-color: #c8161e;
}
@media screen and (min-width: 768px) {
  .story::after {
    aspect-ratio: auto;
    height: calc(var(--arch-h) * 0.177815);
  }
}

.story::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 180.24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: inherit;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .story::before {
    left: 50.4166666667%;
    width: 72.9166666667%;
    aspect-ratio: auto;
    height: var(--arch-h);
  }
}

.story__arch {
  display: none;
}
@media screen and (min-width: 768px) {
  .story__arch {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .story__arch span {
    position: absolute;
    z-index: -1;
    top: 0;
    left: -5.34375%;
    translate: -50% 0;
    width: 72.9166666667%;
    aspect-ratio: auto;
    height: var(--arch-h);
    border-radius: 50%;
    background-color: #fff;
  }
}

@media screen and (min-width: 768px) {
  .story__arch span:nth-of-type(2) {
    left: 105.34375%;
  }
}

.story__deco-bucho {
  position: absolute;
  top: -4.125rem;
  left: 72.1306191688%;
  z-index: 1;
  width: 21.5436810857%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__deco-bucho {
    top: max(-7.6875rem, -6.40625cqw);
    left: 62.7604166667%;
    width: min(12.25rem, 10.2083333333cqw);
  }
}

.story__deco-band {
  position: absolute;
  top: -1.1875rem;
  left: 15.5012722646%;
  z-index: 1;
  width: 17.0127226463%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__deco-band {
    top: min(2.5rem, 2.0833333333cqw);
    left: 26.1458333333%;
    width: min(9.25rem, 7.7083333333cqw);
  }
}

.story__title {
  margin: auto;
  padding-top: 2.3125rem;
  width: 21.106870229%;
}
@media screen and (min-width: 768px) {
  .story__title {
    padding-top: min(5rem, 4.1666666667cqw);
    width: min(8.5625rem, 7.1354166667cqw);
  }
}

.story__title img {
  width: 100%;
  height: auto;
}

.story__photo {
  position: relative;
  margin-top: 1.94375rem;
  margin-left: 9.3078880407%;
  width: 90.6921119593%;
  aspect-ratio: 1069.26/512.5;
  overflow: hidden;
  border-radius: 0.375rem 0 0 0.375rem;
  filter: drop-shadow(0 0.1875rem 0.0375rem rgba(43, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .story__photo {
    margin-top: min(5.25rem, 4.375cqw);
    margin-left: 29.09375%;
    width: auto;
    aspect-ratio: auto;
    height: min(29.625rem, 24.6875cqw);
    border-radius: min(0.625rem, 0.5208333333cqw) 0 0 min(0.625rem, 0.5208333333cqw);
    filter: drop-shadow(0 0.375rem 0.075rem rgba(43, 0, 0, 0.13));
  }
}

.story__photo img {
  position: absolute;
  top: -36.4%;
  left: -4.1%;
  width: 132%;
  max-width: none;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__photo img {
    top: -59.7%;
    left: -3.36%;
    width: 130.1%;
  }
}

.story__text {
  margin-top: 2.125rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .story__text {
    margin-top: min(3.625rem, 3.0208333333cqw);
    padding-right: max(0px, 16.3125rem - (1920px - 100cqw) * 0.544);
  }
}

@media screen and (min-width: 768px) {
  .story__text.text {
    font-size: min(1.125rem, 1.25cqw);
    line-height: min(50px, 2.604cqw);
  }
}

.story__text + .story__text {
  margin-top: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .story__text + .story__text {
    margin-top: min(3.125rem, 2.6041666667cqw);
  }
}

.story__dome {
  position: relative;
  z-index: 3;
  margin-top: 1.9375rem;
  margin-left: -0.3138252757%;
  width: 65.4283290925%;
  aspect-ratio: 771.4/663.6;
}
@media screen and (min-width: 768px) {
  .story__dome {
    position: absolute;
    top: calc(0.975714 * var(--arch-h) - min(25.8125rem, 21.5104166667cqw));
    left: 13.234375%;
    margin: 0;
    width: min(30.1875rem, 25.15625cqw);
    aspect-ratio: 483/413;
  }
}

.story__dome-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50vw 50vw 0 0;
  filter: drop-shadow(0 0.21875rem 0.0375rem rgba(43, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .story__dome-frame {
    filter: drop-shadow(0 0.40625rem 0.075rem rgba(43, 0, 0, 0.13));
  }
}

.story__dome-frame img {
  position: absolute;
  top: -11.14%;
  left: -27.21%;
  width: 163.34%;
  max-width: none;
  height: auto;
}

.story__keekee {
  position: absolute;
  z-index: 0;
  right: -18.9%;
  bottom: 1.45%;
  width: 24.92%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__keekee {
    right: -27.67%;
    bottom: 0;
    width: 30.21%;
  }
}

.story__hoppe {
  position: absolute;
  z-index: 3;
  bottom: 0.0625rem;
  left: 76.7387616624%;
  width: 19.0695504665%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__hoppe {
    bottom: min(1.3125rem, 1.09375cqw);
    left: 72.7604166667%;
    width: min(10.5625rem, 8.8020833333cqw);
  }
}

.story__drift {
  position: absolute;
  z-index: 2;
  bottom: -0.2625rem;
  left: -0.0958439355%;
  width: 100.1628498728%;
  max-width: none;
  height: auto;
}
@media screen and (min-width: 768px) {
  .story__drift {
    bottom: max(-1.875rem, -1.5625cqw);
    left: -0.1197916667%;
    width: 100.2083333333%;
  }
}

.story__band {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12.8125rem;
  overflow: hidden;
  background-image: linear-gradient(to bottom, transparent 0 1px, #c8161e 1px);
}
@media screen and (min-width: 768px) {
  .story__band {
    z-index: -2;
    top: min(72.45625rem, 60.3802083333cqw);
    height: auto;
    background-color: #c8161e;
    background-image: none;
  }
}

.story__band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -91.6%;
  width: 180.24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .story__band::before {
    content: none;
  }
}

.story__band .snow {
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .story__photo,
  .story__dome {
    opacity: 0;
  }
  .story__photo.is-shown,
  .story__dome.is-shown {
    animation: fade-down 1s ease 0.4s both;
  }
  .story__keekee {
    opacity: 0;
    translate: -1.25rem 1.375rem;
    scale: 0.85;
  }
  .story__keekee.is-shown {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: opacity 0.25s ease, translate 0.65s cubic-bezier(0.2, 1.7, 0.4, 1), scale 0.65s cubic-bezier(0.2, 1.7, 0.4, 1);
    transition-delay: calc(0.3s + 0.4s);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .story__keekee.is-shown {
    transition-delay: calc(0.6s + 0.4s);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .story__hoppe.is-shown {
    animation: sway 2.9s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .story__deco-band.is-shown {
    animation: sway 2.8s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .story__deco-bucho.is-shown {
    animation: walk-arc 10s linear infinite, hop 0.5s ease-in-out infinite;
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .story__deco-bucho.is-shown {
    animation: walk-arc-pc 10s linear infinite, hop 0.5s ease-in-out infinite;
  }
}
.character {
  position: relative;
  padding-top: 0.9375rem;
  background-color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .character {
    padding-top: 14.5rem;
    padding-bottom: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .character::before {
    content: "";
    position: absolute;
    top: 1.1375rem;
    left: 0;
    width: 100%;
    height: 0.3125rem;
    background-color: #fff;
    filter: drop-shadow(0 0.3125rem 0.05625rem rgba(0, 0, 0, 0.13));
    pointer-events: none;
  }
}

.character__title {
  position: absolute;
  top: 0.90625rem;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  width: 49.5148430874%;
}
@media screen and (min-width: 768px) {
  .character__title {
    top: 6.39375rem;
    width: 20.1875rem;
  }
}

.character__title .hang {
  --hang-rope: 0.337;
  --hang-fall: 0.843;
}
@media screen and (min-width: 768px) {
  .character__title .hang {
    --hang-fall: 1.446;
  }
}

@media screen and (min-width: 768px) {
  .character__title .hang__rope {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .character__title .hang::before,
  .character__title .hang::after {
    content: "";
    position: absolute;
    top: -4.9375rem;
    left: 0.65125rem;
    width: 0.16375rem;
    height: 6.1875rem;
    background: url("../img/vec/chara/thread-pc-l.svg?v=20260821") center/100% 100% no-repeat;
  }
}

@media screen and (min-width: 768px) {
  .character__title .hang::after {
    left: 19.073125rem;
    height: 6.75rem;
    background-image: url("../img/vec/chara/thread-pc-r.svg?v=20260821");
  }
}

.character__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1179/1740;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .character__stage {
    margin-left: calc(50% - 33.625rem);
    width: 35rem;
    aspect-ratio: 560/600;
    border-radius: 1.25rem;
  }
}

.character__pan {
  position: absolute;
  top: -10.847%;
  left: 0;
  width: 192.7%;
  aspect-ratio: 1800/1560;
  --pan-shift: -0.263281;
  translate: calc((var(--pan, 0.385) + var(--pan-shift)) * -100%) 0;
  transition: translate 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@media screen and (min-width: 768px) {
  .character__pan {
    --pan-shift: -0.206293;
    top: -22.93%;
    width: 242.374%;
  }
}

.character__pan.is-instant {
  transition: none;
}

.character__pan img {
  position: absolute;
  top: 4%;
  left: 0;
  width: calc(100% + 1px);
  max-width: none;
  height: auto;
}
@media screen and (min-width: 768px) {
  .character__pan img {
    top: 0;
  }
}

.character__pan img:first-child {
  left: -100%;
}

.character__pan img:last-child {
  left: 100%;
}

.character__slider {
  position: absolute;
  bottom: 1.323125rem;
  left: 0;
  z-index: 10;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .character__slider {
    top: 27.9375rem;
    bottom: auto;
    left: calc(50% + 3rem);
    width: 30.625rem;
  }
}

.character__swiper {
  margin: auto;
  width: 74.6395250212%;
}
@media screen and (min-width: 768px) {
  .character__swiper {
    width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.25rem;
  }
}

.character__swiper .swiper-slide {
  height: auto;
}

.character__card {
  display: grid;
  align-content: center;
  height: 100%;
  padding: 0.6875rem 0.5625rem 0.875rem;
  border: 0.125rem solid #c8161e;
  border-radius: 0.5625rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .character__card {
    position: relative;
    padding: 1.5rem 1.25rem;
    min-height: 18.25rem;
    border: none;
    border-radius: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .character__card::before {
    content: "";
    position: absolute;
    inset: -0.225rem;
    background: url("../img/vec/chara/card-frame-pc.webp?v=20260812") center/100% 100% no-repeat;
    pointer-events: none;
  }
}

.character__name-ja {
  display: block;
  color: #c8161e;
  font-size: 0.925rem;
  font-weight: 900;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .character__name-ja {
    font-size: 1.875rem;
  }
}

.character__name-en {
  display: block;
  color: #c8161e;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .character__name-en {
    font-size: 1.25rem;
    margin-top: 0.625rem;
  }
}

.character__desc {
  margin-top: 0.375rem;
}
@media screen and (min-width: 768px) {
  .character__desc {
    margin-top: 0.75rem;
  }
}

.character__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  width: 3.9440203562%;
}
@media screen and (min-width: 768px) {
  .character__arrow {
    width: 2.25rem;
  }
}

.character__arrow img {
  width: 100%;
  height: auto;
}

.character__arrow--prev {
  left: 5.8524173028%;
}
@media screen and (min-width: 768px) {
  .character__arrow--prev {
    left: -40.375rem;
  }
}

.character__arrow--next {
  left: 90.203562341%;
}
@media screen and (min-width: 768px) {
  .character__arrow--next {
    left: 32.1875rem;
  }
}

.goods {
  position: relative;
  z-index: 0;
  padding-top: 0.3125rem;
  padding-bottom: 19.1178965225%;
  background-color: #015541;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .goods {
    padding-top: 5.1375rem;
    padding-bottom: 5.3125rem;
  }
}

.goods::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1179/178.5;
  background-color: #c8161e;
  aspect-ratio: 1179/476.26;
}
@media screen and (min-width: 768px) {
  .goods::after {
    z-index: 0;
    aspect-ratio: 3840/1215;
    background-color: transparent;
    background-image: url("../img/vec/goods/arch-red-pc.webp?v=20260812");
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.goods__arc {
  display: none;
}
@media screen and (min-width: 768px) {
  .goods__arc {
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920/560;
    background-image: radial-gradient(ellipse 28.409% 97.408% at 49.984% 22.264%, #015541 99.771%, #014a39 99.771% 100.229%, #015541 100.229%);
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 23%, #000 31%);
    mask-image: linear-gradient(to bottom, transparent 0 23%, #000 31%);
    pointer-events: none;
  }
}

.goods::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 180.24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: inherit;
  width: 102.2400339271%;
}
@media screen and (min-width: 768px) {
  .goods::before {
    content: none;
  }
}

.goods__title {
  margin-top: -0.396875rem;
  margin-inline: 31.1052631579% auto;
  width: 36.1896722939%;
}
@media screen and (min-width: 768px) {
  .goods__title {
    position: relative;
    z-index: 1;
    margin-top: 0;
    margin-inline: auto;
    width: 12.6875rem;
  }
}

.goods__title .hang {
  --hang-rope: 0.657;
  --hang-fall: 0.845;
}
@media screen and (min-width: 768px) {
  .goods__title .hang {
    --hang-fall: 2.961;
  }
}

@media screen and (min-width: 768px) {
  .goods__title .hang__rope {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .goods__title .hang::before,
  .goods__title .hang::after {
    content: "";
    position: absolute;
    top: -5.1375rem;
    left: 0.925625rem;
    width: 0.205625rem;
    height: 5.825rem;
    background: url("../img/vec/goods/thread-pc-l.svg?v=20260821") center/100% 100% no-repeat;
  }
}

@media screen and (min-width: 768px) {
  .goods__title .hang::after {
    left: 11.64125rem;
    width: 0.234375rem;
    height: 6.575rem;
    background-image: url("../img/vec/goods/thread-pc-r.svg?v=20260821");
  }
}

.goods__lead {
  margin-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .goods__lead {
    margin-top: 2.25rem;
  }
}

.goods__visual {
  position: relative;
  z-index: 1;
  rotate: -2.74deg;
  transform-origin: 16.81% 93.11%;
  margin-top: 1.58875rem;
  margin-left: 17.3843098312%;
  width: 60.8838133069%;
  aspect-ratio: 613.1/445.72;
}
@media screen and (min-width: 768px) {
  .goods__visual {
    rotate: none;
    z-index: auto;
    margin-top: 3.73125rem;
    margin-left: 16.375rem;
    width: 16.6875rem;
    aspect-ratio: 613.1/445.72;
  }
}

.goods__visual img {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .goods__visual img {
    top: 4.8%;
  }
}

.goods__visual-handle {
  z-index: 0;
}

.goods__visual-elf {
  z-index: 1;
}

.goods__visual-cart {
  z-index: 1;
}

.goods__visual-item {
  z-index: 1;
}

.goods__buttons {
  position: relative;
  margin-top: -0.64875rem;
}
@media screen and (min-width: 768px) {
  .goods__buttons {
    display: grid;
    grid-template-columns: 22.8125rem 22.8125rem;
    column-gap: 2.6875rem;
    justify-content: center;
    margin-top: 0.08125rem;
    width: 48.3125rem;
    margin-inline: auto;
  }
}

.goods__bag,
.goods__elf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.goods__present {
  position: absolute;
  z-index: 2;
  top: 5.535625rem;
  left: 67.53%;
  width: 25.22%;
  height: auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .goods__present {
    top: -7.9875rem;
    left: 32.59375rem;
    width: 8.625rem;
  }
}

.goods__bag {
  top: 4.239375rem;
  left: 65.1%;
  width: 26.9%;
  aspect-ratio: 814/1077;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .goods__bag {
    top: -10.64375rem;
    left: 32.3625rem;
    width: 10.4375rem;
    aspect-ratio: 168.3/210.23;
    overflow: visible;
  }
}

.goods__bag-back,
.goods__bag-elf,
.goods__bag-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .goods__bag-back,
  .goods__bag-elf,
  .goods__bag-body {
    display: none;
  }
}

.goods__bag-back {
  z-index: 0;
}

.goods__bag-elf {
  z-index: 1;
}

.goods__bag-body {
  z-index: 2;
}

.goods__bag-step {
  display: none;
}
@media screen and (min-width: 768px) {
  .goods__bag-step {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

@media screen and (min-width: 768px) {
  .goods__bag-step--1 {
    height: 84.36%;
    background-image: url("../img/vec/goods/bag-step1-pc.webp?v=20260812");
  }
}

@media screen and (min-width: 768px) {
  .goods__bag-step--2 {
    height: 94.29%;
    background-image: url("../img/vec/goods/bag-step2-pc.webp?v=20260812");
  }
}

@media screen and (min-width: 768px) {
  .goods__bag-step--3 {
    height: 100%;
    background-image: url("../img/vec/goods/bag-step3-pc.webp?v=20260812");
  }
}

.goods__elf--info {
  top: 13.75rem;
  left: 13.4%;
  width: 20.19%;
}
@media screen and (min-width: 768px) {
  .goods__elf--info {
    top: 6.83125rem;
    left: 0.625rem;
    width: 6.0625rem;
  }
}

.goods__elf--line {
  top: 13.3125rem;
  left: 62.6%;
  width: 30%;
}
@media screen and (min-width: 768px) {
  .goods__elf--line {
    top: 7.05625rem;
    left: 24.78125rem;
    width: 7.6875rem;
  }
}

.goods__buttons-row {
  display: grid;
  column-gap: 3.9721946375%;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  margin: 7.5rem 0 0;
  width: 100%;
  max-width: none;
}
@media screen and (min-width: 768px) {
  .goods__buttons-row {
    grid-column: 1/-1;
    grid-template-columns: 20.1875rem 16.75rem;
    justify-items: stretch;
    column-gap: 5.625rem;
    justify-content: start;
    margin-top: 4.6875rem;
    margin-left: 0;
    padding-left: 2.625rem;
    width: auto;
    max-width: none;
  }
}

.goods__buttons-row .btn {
  padding-left: 0.625rem;
  margin-inline: auto;
  width: 100%;
}

.goods__bag {
  visibility: hidden;
}

.goods__bag.is-shown {
  visibility: visible;
}

.goods__bag.is-shown ~ .goods__present {
  visibility: hidden;
}

.goods__bag-step--1,
.goods__bag-step--2 {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .goods__bag-elf {
    translate: 0 100%;
  }
  .goods__bag.is-shown .goods__bag-elf {
    animation: pop-out 0.9s cubic-bezier(0.3, 0.9, 0.4, 1) 0.4s both;
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .goods__bag.is-shown .goods__bag-step {
    animation-duration: 0.5s;
    animation-delay: 0.4s;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  .goods__bag.is-shown .goods__bag-step--1 {
    animation-name: bag-step-1;
  }
  .goods__bag.is-shown .goods__bag-step--2 {
    animation-name: bag-step-2;
  }
  .goods__bag.is-shown .goods__bag-step--3 {
    animation-name: bag-step-3;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .goods__elf.is-shown {
    animation: sway 3.2s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .goods__elf--line.is-shown {
    animation-delay: 0.4s;
  }
  .goods__visual.is-shown .goods__visual-item {
    animation: sway-load 3s ease-in-out infinite;
    transform-origin: 31.8% 84.6%;
  }
}
.goods[data-soon~=lg] .goods__visual,
.goods[data-soon~=sm] .goods__elf--info {
  visibility: hidden;
}

.goods[data-soon~=md] .goods__bag.is-shown {
  visibility: hidden;
}

.goods[data-soon~=md] .goods__bag.is-shown ~ .goods__present {
  visibility: visible;
}

.goods[data-soon~=md] .goods__present {
  left: 64.35%;
}
@media screen and (min-width: 768px) {
  .goods[data-soon~=md] .goods__present {
    top: 0.3rem;
    left: 31.21875rem;
    width: 11.375rem;
    translate: 0 -100%;
  }
}

.goods[data-soon~=lg] .goods__buttons::before,
.goods[data-soon~=sm] .goods__buttons::after {
  content: "";
  position: absolute;
  z-index: 2;
  aspect-ratio: 762/771;
  background-image: url("../img/vec/goods/bag-present.webp?v=20260812");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  translate: 0 -100%;
}

.goods[data-soon~=lg] .goods__buttons::before {
  top: 0.2375rem;
  left: 30.65%;
  width: 38.7%;
}
@media screen and (min-width: 768px) {
  .goods[data-soon~=lg] .goods__buttons::before {
    top: 0.3rem;
    left: 5.71875rem;
    width: 11.375rem;
  }
}

.goods[data-soon~=sm] .goods__buttons::after {
  top: 16.03125rem;
  left: 2.79%;
  width: 15.5%;
  translate: 0 -100%;
}
@media screen and (min-width: 768px) {
  .goods[data-soon~=sm] .goods__buttons::after {
    top: 13.59375rem;
    left: 2rem;
    width: 5.75rem;
    translate: 0 -100%;
  }
}

.gallery {
  position: relative;
  margin-top: -1px;
  padding-bottom: 16.7938931298%;
  background-color: #015541;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .gallery {
    padding-bottom: 11.7708333333%;
  }
}

.gallery::before,
.gallery::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1179/252.5;
  translate: 0 13.51%;
  filter: drop-shadow(0 0.21875rem 0.05625rem rgba(0, 0, 0, 0.13));
  pointer-events: none;
}

.gallery::before {
  background-image: radial-gradient(ellipse 54.69% 255.37% at 9.48% -173.58%, #015541 99.5%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 54.69% 255.37% at 88.8% -173.58%, #015541 99.5%, rgba(1, 85, 65, 0) 100%);
}
@media screen and (min-width: 768px) {
  .gallery::before {
    bottom: auto;
    top: 0;
    aspect-ratio: 1920/136;
    translate: 0 -14.7059%;
    background-image: radial-gradient(ellipse 28.411% 401.1% at 49.984% -305.37%, #015541 99.54%, #014a39 99.54% 100.46%, rgba(1, 85, 65, 0) 100.46%), radial-gradient(ellipse 28.458% 401.76% at 85.656% -311.18%, #015541 99.54%, #014a39 99.54% 100.46%, rgba(1, 85, 65, 0) 100.46%), radial-gradient(ellipse 28.464% 401.84% at 14.156% -306.1%, #015541 99.54%, #014a39 99.54% 100.46%, rgba(1, 85, 65, 0) 100.46%);
    filter: none;
  }
}

.gallery::after {
  background-image: radial-gradient(ellipse 68.74% 320.95% at 49.26% -222.93%, #015541 99.5%, rgba(1, 85, 65, 0) 100%);
}
@media screen and (min-width: 768px) {
  .gallery::after {
    content: none;
  }
}

.gallery__arc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1179/815;
  background-image: radial-gradient(ellipse 69.15244% 100.03664% at 51.07% 0%, #015541 98.90656%, #014a39 98.90656%, #014a39 99.9006%, #015541 99.9006%);
  background-repeat: no-repeat;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .gallery__arc {
    aspect-ratio: 1920/545;
    background-image: radial-gradient(ellipse 28.42324% 100.13896% at 50% 0.26%, #015541 99.30279%, #014a39 99.30279%, #014a39 99.9004%, #015541 99.9004%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 7%, #000 12%);
    mask-image: linear-gradient(to bottom, transparent 0 7%, #000 12%);
  }
}

.gallery__title {
  position: relative;
  z-index: 0;
  margin: auto;
  width: 37.5962680237%;
}
@media screen and (min-width: 768px) {
  .gallery__title {
    padding-top: calc(5.193vw + 5.25rem);
    width: 15.375rem;
    box-sizing: content-box;
  }
}

.gallery__title .hang {
  --hang-rope: 0.602;
  --hang-fall: 0.835;
}
@media screen and (min-width: 768px) {
  .gallery__title .hang {
    --hang-fall: 2.504;
  }
}

@media screen and (min-width: 768px) {
  .gallery__title .hang__rope {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .gallery__title .hang::before,
  .gallery__title .hang::after {
    content: "";
    position: absolute;
    top: -6rem;
    left: 1.059375rem;
    width: 0.19375rem;
    height: 6.75rem;
    background: url("../img/vec/gallery/thread-pc-l.svg?v=20260821") center/100% 100% no-repeat;
  }
}

@media screen and (min-width: 768px) {
  .gallery__title .hang::after {
    top: -6.125rem;
    left: 14.871875rem;
    width: 0.175625rem;
    height: 7.875rem;
    background-image: url("../img/vec/gallery/thread-pc-r.svg?v=20260821");
  }
}

.gallery__lead {
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .gallery__lead {
    margin-top: 1.3125rem;
  }
}

.gallery__body {
  container-type: inline-size;
  position: relative;
  margin-top: 0.3375rem;
}
@media screen and (min-width: 768px) {
  .gallery__body {
    height: 34.19375rem;
  }
}

.gallery__deco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .gallery__deco {
    position: static;
    width: auto;
    height: auto;
  }
}

.gallery__rope {
  position: absolute;
  top: 0;
  left: -0.9669211196%;
  width: 101.4342663274%;
  max-width: none;
}
@media screen and (min-width: 768px) {
  .gallery__rope {
    top: -6.50625rem;
    left: 50%;
    translate: -50% 0;
    width: max(100%, 120rem);
    height: 12.5rem;
  }
}

.gallery__rope--2 {
  display: none;
}
@media screen and (min-width: 768px) {
  .gallery__rope--2 {
    display: block;
    top: 12.9375rem;
  }
}

.gallery__hang {
  position: absolute;
  display: block;
}

.gallery__hang--star-l {
  top: 0;
  margin-top: 1.1017811705%;
  left: 2.427480916%;
  width: 6.2264631043%;
  transform-origin: 48.07% 0;
}
@media screen and (min-width: 768px) {
  .gallery__hang--star-l {
    top: 2.91875rem;
    margin-top: 0;
    left: min(24.1145833333%, 50% - 31.0625rem);
    width: 3.5rem;
    height: 14.81875rem;
    background: url("../img/vec/gallery/deco-star-l-body.svg?v=20260821") bottom/100% auto no-repeat;
  }
}

.gallery__hang--star-l .hang {
  --hang-rope: 3.4452;
  --hang-fall: 0.7883;
}

@media screen and (min-width: 768px) {
  .gallery__hang--star-l .hang,
  .gallery__hang--bell .hang,
  .gallery__hang--star-r .hang,
  .gallery__hang--present .hang {
    display: none;
  }
}

.gallery__hang--bell {
  top: 0;
  margin-top: 7.3452078032%;
  left: 64.411365564%;
  width: 3.4978795589%;
  transform-origin: 36.4% 0;
}
@media screen and (min-width: 768px) {
  .gallery__hang--bell {
    top: 4.8rem;
    margin-top: 0;
    left: max(56.1979166667%, 50% + 7.4375rem);
    width: 2.125rem;
    height: 9.6875rem;
    background: url("../img/vec/gallery/deco-bell-body.svg?v=20260821") bottom/100% auto no-repeat;
  }
}

.gallery__hang--bell .hang {
  --hang-rope: 3.8977;
  --hang-fall: 0.793;
}

.gallery__hang--star-r {
  top: 0;
  margin-top: 35.3189143342%;
  left: 90.5530110263%;
  width: 8.1289228159%;
  transform-origin: 42.46% 0;
}
@media screen and (min-width: 768px) {
  .gallery__hang--star-r {
    top: 22.61875rem;
    margin-top: 0;
    left: max(69.84375%, 50% + 23.8125rem);
    width: 4.5rem;
    height: 10.24375rem;
    background: url("../img/vec/gallery/deco-star-r-body.svg?v=20260821") bottom/100% auto no-repeat;
  }
}

.gallery__hang--star-r .hang {
  --hang-rope: 1.2854;
  --hang-fall: 0.5719;
}

.gallery__hang--present {
  top: 0;
  margin-top: 38.2001696353%;
  left: 29.9491094148%;
  width: 5.4741306192%;
  transform-origin: 51.2% 0;
}
@media screen and (min-width: 768px) {
  .gallery__hang--present {
    top: 23.93125rem;
    margin-top: 0;
    left: min(40.9375%, 50% - 10.875rem);
    width: 3.125rem;
    height: 11.86875rem;
    background: url("../img/vec/gallery/deco-present-body.svg?v=20260821") bottom/100% auto no-repeat;
  }
}

.gallery__hang--present .hang {
  --hang-rope: 3.1004;
  --hang-fall: 0.7892;
}

.gallery__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.3418150975cqw 5.6658184902cqw;
  grid-template-columns: repeat(3, 1fr);
  padding: 5.2586938083cqw 7.8117048346cqw 0;
}
@media screen and (min-width: 768px) {
  .gallery__list {
    gap: 5.4rem 4.4375rem;
    grid-template-columns: repeat(3, 12.5625rem);
    justify-content: center;
    padding: 4.79375rem 0 0;
  }
}

.gallery__list-item {
  position: relative;
  margin-top: var(--sag, 0);
  translate: var(--dx, 0) 0;
}

.gallery__list-item:nth-of-type(1) {
  --dx: 2.7311280746cqw;
  --pin-x: 53.7%;
  --pin-w: 12.47%;
  --pin-y: -2.7455470738cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(1) {
    --dx: 0.825rem;
    --pin-w: 12.94%;
    --pin-y: -1.43125rem;
  }
}

.gallery__list-item:nth-of-type(2) {
  --dx: 0.7124681934cqw;
  --sag: 2.9431721798cqw;
  --pin-x: 45.1%;
  --pin-w: 8.53%;
  --pin-y: -3.0593723494cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(2) {
    --dx: -1.2125rem;
    --sag: 0.88125rem;
    --pin-w: 9.45%;
    --pin-y: -1.625rem;
  }
}

.gallery__list-item:nth-of-type(3) {
  --dx: 0.9329940628cqw;
  --sag: 1.187446989cqw;
  --pin-x: 34.7%;
  --pin-w: 11.77%;
  --pin-y: -2.6522476675cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(3) {
    --dx: 1.01875rem;
    --sag: 0.15rem;
    --pin-w: 12.44%;
    --pin-y: -1.39375rem;
  }
}

.gallery__list-item:nth-of-type(4) {
  --dx: -3.8337574215cqw;
  --pin-x: 57.8%;
  --pin-w: 12.61%;
  --pin-y: -2.7201017812cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(4) {
    --dx: -1.575rem;
    --sag: 0.025rem;
    --pin-w: 12.94%;
    --pin-y: -1.39375rem;
  }
}

.gallery__list-item:nth-of-type(5) {
  --dx: -0.6870229008cqw;
  --sag: 4.2578456319cqw;
  --pin-x: 48.2%;
  --pin-w: 8.29%;
  --pin-y: -3.0339270568cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(5) {
    --dx: 0.38125rem;
    --sag: 0.925rem;
    --pin-w: 8.96%;
    --pin-y: -1.60625rem;
  }
}

.gallery__list-item:nth-of-type(6) {
  --dx: -2.0356234097cqw;
  --sag: 2.705682782cqw;
  --pin-x: 35.4%;
  --pin-w: 10.87%;
  --pin-y: -2.6183206107cqw;
}
@media screen and (min-width: 768px) {
  .gallery__list-item:nth-of-type(6) {
    --dx: -1.76875rem;
    --sag: 0;
    --pin-w: 11.44%;
    --pin-y: -1.36875rem;
  }
}

.gallery__pin {
  position: absolute;
  z-index: 2;
  top: var(--pin-y);
  left: var(--pin-x);
  width: var(--pin-w);
  height: auto;
}

.gallery__card {
  display: grid;
  align-content: start;
  gap: 1.22985581cqw;
  padding: 2.8159457167cqw 2.3324851569cqw 0;
  width: 100%;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0.25rem 0.0625rem rgba(0, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .gallery__card {
    gap: 0.6375rem;
    padding: 1.45625rem 1.20625rem 0;
    filter: drop-shadow(0 0.5rem 0.125rem rgba(0, 0, 0, 0.13));
  }
}

.gallery__list-item:nth-of-type(1) .gallery__card {
  background-image: url("../img/vec/gallery/card-2021.svg?v=20260812");
}

.gallery__list-item:nth-of-type(2) .gallery__card {
  background-image: url("../img/vec/gallery/card-2022.svg?v=20260812");
}

.gallery__list-item:nth-of-type(3) .gallery__card {
  background-image: url("../img/vec/gallery/card-2023.svg?v=20260812");
}

.gallery__list-item:nth-of-type(4) .gallery__card {
  background-image: url("../img/vec/gallery/card-2024.svg?v=20260812");
}

.gallery__list-item:nth-of-type(5) .gallery__card {
  background-image: url("../img/vec/gallery/card-2025.svg?v=20260812");
}

.gallery__list-item:nth-of-type(6) .gallery__card {
  background-image: url("../img/vec/gallery/card-2026.svg?v=20260812");
}

.gallery__year {
  color: #c9a063;
  font-family: "Besley", serif;
  font-size: 2.8085165394cqw;
  font-weight: 900;
  letter-spacing: 0.064em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .gallery__year {
    font-size: 1.4486679375rem;
  }
}

.gallery__img {
  width: 100%;
  height: auto;
}

.gallery__soon {
  margin-top: 5.1738761662cqw;
  color: #c9a063;
  font-family: "Besley", serif;
  font-size: 1.7002910941cqw;
  font-weight: 900;
  letter-spacing: 0.082em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .gallery__soon {
    margin-top: 2.66875rem;
    font-size: 0.8781500625rem;
  }
}

.gallery__list-item:nth-of-type(1) .gallery__card {
  rotate: 9.5deg;
}

.gallery__list-item:nth-of-type(2) .gallery__card {
  rotate: 0.1deg;
}

.gallery__list-item:nth-of-type(3) .gallery__card {
  rotate: -8.4deg;
}

.gallery__list-item:nth-of-type(4) .gallery__card {
  rotate: 12.2deg;
}

.gallery__list-item:nth-of-type(5) .gallery__card {
  rotate: 1.8deg;
}

.gallery__list-item:nth-of-type(6) .gallery__card {
  rotate: -8.4deg;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery__hang {
    animation: swing 3.2s ease-in-out infinite;
  }
  .gallery__hang--bell {
    animation-delay: 0.12s;
  }
  .gallery__hang--star-r {
    animation-delay: 0.24s;
  }
  .gallery__hang--present {
    animation-delay: 0.36s;
  }
}
.report {
  position: relative;
  padding-top: 2.36875rem;
  padding-bottom: 5.3125rem;
  background-color: #c8161e;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .report {
    padding-top: 5.0625rem;
    padding-bottom: 7rem;
  }
}

.report .badge {
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .report .badge {
    --rope-len: 5.875rem;
  }
}

.report::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1179/58;
  background-color: #c8161e;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .report::after {
    aspect-ratio: 1920/124.8;
    translate: 0 1px;
  }
}

.report::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1179/58;
  background-image: radial-gradient(ellipse 54.69% 1111.43% at 11.87% -1071.59%, #015541 99.6%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 68.74% 1396.87% at 51.07% -1296.87%, #015541 99.6%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 54.69% 1111.43% at 91.19% -1071.59%, #015541 99.6%, rgba(1, 85, 65, 0) 100%);
  filter: drop-shadow(0 0.21875rem 0.05625rem rgba(0, 0, 0, 0.13));
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .report::before {
    bottom: 100%;
    translate: 0 6.0241%;
    aspect-ratio: 1920/132.8;
    background-image: radial-gradient(ellipse 28.31% 409.41% at 14.17% -315.44%, #015541 99.5%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 28.31% 409.41% at 50% -315.44%, #015541 99.5%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 28.31% 409.41% at 85.67% -320.71%, #015541 99.5%, rgba(1, 85, 65, 0) 100%), radial-gradient(ellipse 28.31% 409.41% at 14.17% -315.44%, rgba(200, 22, 30, 0) 99.9%, #ae131a 100% 100.7%, rgba(200, 22, 30, 0) 100.8%), radial-gradient(ellipse 28.31% 409.41% at 50% -315.44%, rgba(200, 22, 30, 0) 99.9%, #ae131a 100% 100.7%, rgba(200, 22, 30, 0) 100.8%), radial-gradient(ellipse 28.31% 409.41% at 85.67% -320.71%, rgba(200, 22, 30, 0) 99.9%, #ae131a 100% 100.7%, rgba(200, 22, 30, 0) 100.8%);
    filter: none;
  }
}

.report__lead {
  margin-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .report__lead {
    margin-top: 2.4375rem;
  }
}

.report__windows {
  position: relative;
  z-index: 1;
  margin: 1.25rem auto 0;
  width: 87.6464746773%;
  aspect-ratio: 882/287.6;
}
@media screen and (min-width: 768px) {
  .report__windows {
    margin: 4.375rem auto 0;
    width: 39.25rem;
    aspect-ratio: 628/220;
  }
}

.report__windows-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.report__windows-img--open {
  left: -9.19%;
  width: 118.51%;
  max-width: none;
}

@media screen and (min-width: 768px) {
  .report__windows-img--open-l {
    inset: auto;
    top: 0.1375rem;
    left: -6.5875rem;
    width: 52.375rem;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  .report__windows-img--open-r {
    display: none;
  }
}

.report__doors {
  position: absolute;
  inset: 0;
}

.report__door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .report__door--1 {
    inset: auto;
    top: 0;
    left: 0;
    width: 13.75rem;
    height: 13.75rem;
  }
}

@media screen and (min-width: 768px) {
  .report__door--2 {
    inset: auto;
    top: 0;
    left: 25.5rem;
    width: 13.75rem;
    height: 13.75rem;
  }
}

.report__windows-img--open {
  opacity: 0;
}

.report__windows-img--open-l {
  clip-path: inset(0 50% 0 0);
}
@media screen and (min-width: 768px) {
  .report__windows-img--open-l {
    clip-path: none;
  }
}

.report__windows-img--open-r {
  clip-path: inset(0 0 0 50%);
}
@media screen and (min-width: 768px) {
  .report__windows-img--open-r {
    clip-path: none;
  }
}

.report__windows.is-shown .report__windows-img--open {
  opacity: 1;
  transition: opacity 0s 0.4s;
}

.report__windows.is-shown .report__door {
  opacity: 0;
  transition: opacity 0s 0.4s;
}

.report__windows.is-shown .report__windows-img--open-r,
.report__windows.is-shown .report__door--2 {
  transition: opacity 0s calc(0.35s + 0.4s);
}

.report__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5124131082%;
  grid-template-columns: repeat(2, 48.1628599801%);
  justify-content: center;
  margin-top: -0.0625rem;
}
@media screen and (min-width: 768px) {
  .report__list {
    gap: 6.6875rem;
    grid-template-columns: repeat(2, 18.8125rem);
    justify-content: center;
    margin-top: 0.575rem;
  }
}

.report__list-item {
  filter: drop-shadow(0 0.25rem 0.01875rem rgba(43, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .report__list-item {
    filter: drop-shadow(0 0.4375rem 0.046875rem rgba(43, 0, 0, 0.13));
  }
}

.report__btn {
  display: block;
  padding: 0.34375rem 0;
  white-space: nowrap;
  background: url("../img/vec/report/btn.svg?v=20260812") center/100% 100% no-repeat;
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768px) {
  .report__btn {
    padding: 0.875rem 0.125rem;
    font-size: 1.125rem;
  }
}

.info {
  container-type: inline-size;
  position: relative;
  padding-top: 2.4875rem;
  padding-bottom: 16.875rem;
  background-color: #c8161e;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .info {
    padding-top: 5.25rem;
    padding-bottom: 23.8125rem;
  }
}

.info[data-bubble=soon] {
  padding-bottom: 14.1875rem;
}
@media screen and (min-width: 768px) {
  .info[data-bubble=soon] {
    padding-bottom: 23.8125rem;
  }
}

.info .inner {
  position: relative;
  z-index: 1;
}

.info > .snow {
  z-index: 0;
}

.info::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1179/263.1;
  background-image: radial-gradient(ellipse 68.74% 308.02% at 49.31% -208.02%, #c8161e 99.5%, rgba(200, 22, 30, 0) 100%);
  filter: drop-shadow(0 0.21875rem 0.05625rem rgba(0, 0, 0, 0.13));
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .info::before {
    aspect-ratio: 1920/296.7;
    background-image: radial-gradient(ellipse 93.75% 606.67% at 51.56% -505.6%, #c8161e 99.5%, rgba(200, 22, 30, 0) 100%);
    filter: drop-shadow(0 0.25rem 0.0625rem rgba(0, 0, 0, 0.13));
  }
}

.info__drift {
  position: absolute;
  bottom: -5px;
  left: -0.4953350297%;
  width: 101.1399491094%;
  max-width: none;
  height: auto;
}
@media screen and (min-width: 768px) {
  .info__drift {
    left: 0;
    width: 100%;
  }
}

.info::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.625rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .info::after {
    height: 1.5rem;
  }
}

.info__lead {
  margin-top: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .info__lead {
    margin-top: 2.5625rem;
  }
}

@media screen and (min-width: 768px) {
  .info__lead.text.text--sm {
    font-size: 1.25rem;
  }
}

.info__list {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 1.25rem auto 0;
  width: 87.7855014896%;
}
@media screen and (min-width: 768px) {
  .info__list {
    margin-top: 2.75rem;
    width: 38.8125rem;
  }
}

.info__list-item {
  position: relative;
}

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

.info__list-item .info__bubble {
  position: absolute;
  top: 108%;
  left: 50%;
  width: 197%;
  max-width: none;
  translate: -50% -0.125rem;
}
@media screen and (min-width: 768px) {
  .info__list-item .info__bubble {
    display: none;
  }
}

.info__bubble-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .info__bubble-pc {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: grid;
    place-content: center;
    padding-bottom: 0.75rem;
    width: 100%;
    height: 5.4375rem;
    background: url("../img/vec/info/bubble-anime-pc.webp?v=20260824") left top/100% auto no-repeat;
    color: #c8161e;
    font-size: 0.898125rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.196;
    text-align: center;
    text-indent: 0.625rem;
  }
}

.info__list-item:nth-of-type(1) {
  width: 33.8235294118%;
}
@media screen and (min-width: 768px) {
  .info__list-item:nth-of-type(1) {
    width: 13.125rem;
  }
}

.info__list-item:nth-of-type(2) {
  width: 31.1085972851%;
}
@media screen and (min-width: 768px) {
  .info__list-item:nth-of-type(2) {
    width: 14.375rem;
  }
}

.info__list-item:nth-of-type(3) {
  width: 24.5938914027%;
}
@media screen and (min-width: 768px) {
  .info__list-item:nth-of-type(3) {
    width: 9.625rem;
  }
}

.info__box {
  position: absolute;
  z-index: 1;
  bottom: 1.9125rem;
  left: 62.1882951654%;
  width: 19.6183206107%;
  aspect-ratio: 694/1025;
}
@media screen and (min-width: 768px) {
  .info__box {
    bottom: calc(12.135cqw - 1.8125rem);
    left: auto;
    right: max(1.5625rem, 50% - 37.5rem);
    width: 10.51875rem;
    aspect-ratio: 505/748;
  }
}

.info__box-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.info__box-img--open {
  opacity: 0;
}

.info__box.is-shown .info__box-img {
  opacity: 0;
}

.info__box.is-shown .info__box-img--open {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .info__box.is-shown .info__box-img {
    transition: opacity 0.2s ease 0.4s;
  }
  .info__box.is-shown .info__box-img--open {
    transform-origin: 50% 100%;
    animation: lid-open 0.75s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.05s + 0.4s) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .info__box-img {
    opacity: 0;
  }
  .info__box-img--open {
    opacity: 1;
  }
}
.badge {
  --rope-len: 2.7375rem;
  --rope-x: 21.72%;
  --hang-fall: 1.156;
  position: relative;
  margin: auto;
  padding: 1.05em 1.55em;
  width: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #231815;
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.3;
  filter: drop-shadow(0 0.25rem 0.021875rem rgba(43, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .badge {
    --rope-len: 6.125rem;
    --rope-x: 23%;
    --hang-fall: 1.26;
    padding: 1.5625rem 2.875rem;
    font-size: 1.375rem;
    filter: drop-shadow(0 0.3125rem 0 rgba(43, 0, 0, 0.13));
  }
}

.report .badge {
  --rope-x: 21.72%;
  background-image: url("../img/vec/report/badge.svg?v=20260824");
}

.info .badge {
  --rope-x: 29.93%;
  background-image: url("../img/vec/info/badge.svg?v=20260824");
}
@media screen and (min-width: 768px) {
  .info .badge {
    --rope-len: 5.625rem;
  }
}

.badge::before,
.badge::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 0.1875rem);
  left: calc(50% - var(--rope-x));
  width: 0.09375rem;
  height: calc(var(--rope-len) + 0.1875rem);
  background-color: #fff;
  transform-origin: 50% 100%;
}
@media screen and (min-width: 768px) {
  .badge::before,
  .badge::after {
    width: 0.125rem;
  }
}

.badge::after {
  left: calc(50% + var(--rope-x));
}

@media (prefers-reduced-motion: no-preference) {
  .badge {
    translate: 0 calc(var(--hang-fall) * -35%);
  }
  .badge::before,
  .badge::after {
    scale: 1 0.65;
  }
  .badge.is-shown {
    animation: hang-drop 0.62s cubic-bezier(0.5, 0, 0.35, 1) 0.4s both;
  }
  .badge.is-shown::before,
  .badge.is-shown::after {
    animation: hang-slack 0.62s cubic-bezier(0.5, 0, 0.35, 1) 0.4s both;
  }
}
.hang {
  --hang-rope: 0.5;
  --hang-fall: 0.85;
  position: relative;
  display: block;
}

.hang__rope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 50% 0;
}

.hang__rope-bend {
  display: block;
  transform-origin: 50% 0;
}

.hang__rope-seg {
  display: block;
  width: 100%;
  height: auto;
}

.hang__body {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.25rem 0.01875rem rgba(0, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .hang__body {
    filter: drop-shadow(0 0.5rem 0.04375rem rgba(0, 0, 0, 0.13));
  }
}

.about__title .hang__body,
.character__title .hang__body {
  filter: drop-shadow(0 0.25rem 0.01875rem rgba(43, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .about__title .hang__body,
  .character__title .hang__body {
    filter: drop-shadow(0 0.5rem 0.04375rem rgba(43, 0, 0, 0.13));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hang__body {
    translate: 0 calc(var(--hang-fall) * -35%);
  }
  .hang__rope {
    scale: 1 0.65;
    transform: skewX(8deg);
  }
  .hang__rope-bend {
    transform: skewX(-8deg);
  }
  .is-shown .hang__rope {
    animation: hang-slack 0.62s cubic-bezier(0.5, 0, 0.35, 1) 0.4s both, hang-rope-top 2.55s cubic-bezier(0.37, 0, 0.63, 1) 0.4s both;
  }
  .is-shown .hang__rope-bend {
    animation: hang-rope-lower 2.55s cubic-bezier(0.37, 0, 0.63, 1) 0.4s both;
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .hang::before,
  .hang::after {
    transform-origin: 50% 0;
    scale: 1 0.65;
  }
  .is-shown .hang::before,
  .is-shown .hang::after {
    animation: hang-slack 0.62s cubic-bezier(0.5, 0, 0.35, 1) 0.4s both, hang-rope-straight 2.55s cubic-bezier(0.37, 0, 0.63, 1) 0.4s both;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .is-shown .hang__body {
    animation: hang-drop 0.62s cubic-bezier(0.5, 0, 0.35, 1) 0.4s both, hang-sway-body 2.1s calc(0.45s + 0.4s) cubic-bezier(0.37, 0, 0.63, 1) both;
  }
}
.text {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .text {
    font-size: 1.125rem;
    line-height: 2.78;
  }
}

.text.text--bold {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .text.text--bold {
    font-size: 1.125rem;
    line-height: 2.11;
  }
}

.text.text--sm {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .text.text--sm {
    font-size: 1.125rem;
    line-height: 2.11;
  }
}

.text.text--xs {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
@media screen and (min-width: 768px) {
  .text.text--xs {
    font-size: 1rem;
    line-height: 1.88;
  }
}

.btn {
  display: grid;
  place-content: center;
  margin-inline: auto;
  padding: 0.3125rem 0.625rem 0.3125rem;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #c8161e;
  filter: drop-shadow(0 0.25rem 0.03125rem rgba(0, 0, 0, 0.13));
}
@media screen and (min-width: 768px) {
  .btn {
    filter: drop-shadow(0 0.4375rem 0.04375rem rgba(0, 0, 0, 0.13));
  }
}
.btn {
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-align: center;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .btn:hover {
    color: #eab9ba;
  }
}
.btn.btn--lg {
  background-image: url("../img/vec/goods/btn-lg.svg?v=20260812");
  max-width: 82.4428997021%;
  min-height: 3.891875rem;
  font-size: 1.1125rem;
}
@media screen and (min-width: 768px) {
  .btn.btn--lg {
    max-width: none;
    min-height: 5.0625rem;
    font-size: 1.5rem;
  }
}

.btn.btn--md {
  background-image: url("../img/vec/goods/btn-md.svg?v=20260812");
  margin-inline: 8.7884806356% auto;
  max-width: 63.0188679245%;
  min-height: 3.891875rem;
  font-size: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .btn.btn--md {
    background-image: url("../img/vec/goods/btn-lg.svg?v=20260812");
    margin-inline: 0;
    max-width: none;
    min-height: 5.0625rem;
    font-size: 1.5rem;
  }
}

.btn.btn--sm {
  background-image: url("../img/vec/goods/btn-sm-sp.svg?v=20260824");
  min-height: 2.775rem;
  font-size: 0.796875rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 768px) {
  .btn.btn--sm {
    min-height: 3.75rem;
    font-size: 1.125rem;
    background-image: url("../img/vec/goods/btn-sm.svg?v=20260812"), url("../img/vec/goods/btn-sm.svg?v=20260812");
    background-position: left center, right center;
    background-size: auto 100%;
  }
}

.btn--lg + .btn {
  margin-top: 3.010625rem;
}
@media screen and (min-width: 768px) {
  .btn--lg + .btn {
    margin-top: 0;
  }
}

.goods__buttons-row .btn--sm:last-child {
  background-image: url("../img/vec/goods/btn-sm2-sp.svg?v=20260824");
}
@media screen and (min-width: 768px) {
  .goods__buttons-row .btn--sm:last-child {
    background-image: url("../img/vec/goods/btn-sm2.svg?v=20260812"), url("../img/vec/goods/btn-sm2.svg?v=20260812");
  }
}

.btn[aria-disabled=true] {
  pointer-events: none;
}

.btn__soon {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.btn--sm .btn__soon {
  letter-spacing: 0.11em;
  text-indent: 0.11em;
}

.header__logo a,
.header__drawer-item a,
.header__hamburger,
.character__arrow,
.gallery__card,
.report__btn,
.info__list-item a,
.lightbox__btn,
.lightbox__arrow,
.lightbox__close,
.modal__link,
.modal__close {
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .header__logo a:hover,
  .header__drawer-item a:hover,
  .header__hamburger:hover,
  .character__arrow:hover,
  .gallery__card:hover,
  .report__btn:hover,
  .info__list-item a:hover,
  .lightbox__btn:hover,
  .lightbox__arrow:hover,
  .lightbox__close:hover,
  .modal__link:hover,
  .modal__close:hover {
    opacity: 0.7;
  }
}
.lightbox {
  position: fixed;
  z-index: 850;
  inset: 0;
  display: none;
  place-items: center;
  padding: 0.875rem;
}

.lightbox.is-shown {
  display: grid;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
}

.lightbox__card {
  container-type: inline-size;
  position: relative;
  max-width: 18.875rem;
  width: 100%;
  aspect-ratio: 1;
}
@media screen and (min-width: 768px) {
  .lightbox__card {
    max-width: 37.90625rem;
  }
}

.lightbox__frame {
  position: absolute;
  inset: -0.7825%;
  width: 101.565%;
  height: 101.565%;
}

.lightbox__year {
  position: absolute;
  top: 12%;
  left: 0;
  width: 100%;
  color: #c9a063;
  font-family: "Besley", serif;
  font-size: 11.28059265cqw;
  font-weight: 900;
  letter-spacing: 0.058em;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .lightbox__year {
    top: 10.83%;
    font-size: 10.40445618cqw;
  }
}

.lightbox__photo {
  position: absolute;
  top: 27.5%;
  left: 12.9%;
  width: 74.1%;
  aspect-ratio: 671/477;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .lightbox__photo {
    top: 23.9%;
    left: 13.3%;
    width: 73.5%;
  }
}

.lightbox__btn {
  position: absolute;
  top: 84.2%;
  left: 32%;
  display: grid;
  place-content: center;
  width: 34.7%;
  height: 8.7%;
  border-radius: 0.1875rem;
  background-color: #c8161e;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .lightbox__btn {
    top: 78.8%;
    left: 50%;
    translate: -50% 0;
    width: 40%;
    height: 9.8%;
    border-radius: 0.375rem;
    font-size: 1.125rem;
  }
}

.lightbox__arrow {
  position: absolute;
  top: 50.7%;
  width: 5.1%;
}

.lightbox__arrow img {
  width: 100%;
  height: auto;
}

.lightbox__arrow--prev {
  left: 5.4%;
}

.lightbox__arrow--next {
  left: 89.6%;
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 0.9375rem;
  height: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .lightbox__close {
    top: 2rem;
    right: 2.5rem;
    width: 1.75rem;
    height: 1.75rem;
  }
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: #c8161e;
  border-radius: 0.125rem;
}
@media screen and (min-width: 768px) {
  .lightbox__close::before,
  .lightbox__close::after {
    height: 0.21875rem;
  }
}

.lightbox__close::before {
  rotate: 45deg;
}

.lightbox__close::after {
  rotate: -45deg;
}

.gallery__card.js-gallery-open {
  cursor: pointer;
}

.modal {
  position: fixed;
  z-index: 850;
  inset: 0;
  display: none;
  place-items: center;
  padding: 1.25rem;
}

.modal.is-shown {
  display: grid;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
}

.modal__panel {
  position: relative;
  padding: 2.03625rem 1.5rem 1.46875rem;
  min-height: 12.1875rem;
  max-width: 17.8375rem;
  width: 100%;
  background: url("../img/vec/goods/modal-panel.svg?v=20260824") center/100% 100% no-repeat;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .modal__panel {
    padding: 4.3125rem 2.375rem 3.125rem;
    min-height: 23.6875rem;
    max-width: 40rem;
  }
}

.modal__close {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
}
@media screen and (min-width: 768px) {
  .modal__close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.623125rem;
  height: 0.081875rem;
  border-radius: 0.04125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .modal__close::before,
  .modal__close::after {
    width: 2.4375rem;
    height: 0.28125rem;
    border-radius: 0.14375rem;
  }
}

.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__title {
  margin: 0 auto;
  width: 10.33rem;
}
@media screen and (min-width: 768px) {
  .modal__title {
    width: 16.46875rem;
  }
}

.modal__title img {
  display: block;
  width: 100%;
  height: auto;
}

.modal__list {
  display: flex;
  justify-content: center;
  gap: 2.1125rem;
  margin-top: 0.46875rem;
}
@media screen and (min-width: 768px) {
  .modal__list {
    gap: 6.59375rem;
    margin-top: 1.09375rem;
  }
}

.modal__list-item {
  width: 4.85625rem;
}
@media screen and (min-width: 768px) {
  .modal__list-item {
    width: 8.78125rem;
  }
}

.modal__link img {
  width: 100%;
  height: auto;
}

.modal__note {
  position: absolute;
  top: 8.66rem;
  left: 5.42875rem;
  translate: -50% 0;
  margin: 0;
  padding: 0.341875rem 0.45625rem 0;
  width: 8.515625rem;
  height: 2.0275rem;
  display: grid;
  place-content: center;
  background: url("../img/vec/goods/modal-bubble.svg?v=20260824") center/100% 100% no-repeat;
  color: #c8161e;
  font-size: 0.41375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.196;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .modal__note {
    top: 15.8rem;
    left: 12.3125rem;
    padding: 0.8125rem 0.96875rem 0;
    width: 22.125rem;
    height: 5.26875rem;
    font-size: 1.0625rem;
    line-height: 1.196;
  }
}

.snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.snow__flake {
  position: absolute;
  top: -5%;
  left: var(--x);
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: #fff;
  scale: var(--size);
  animation: fall var(--dur) linear var(--delay) infinite;
}