@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;
  }
}

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

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

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

:root {
  --white: #ffffff;
  --black: #000;
}

body {
  font-family: "Koburina Gothic W3 JIS2004";
}
body .red {
  color: red;
  font-style: normal;
}

.footer {
  --footer-pad: 3.9375rem 1.25rem 3.1875rem;
  --footer-font-standard: 0.8125rem;
  --footer-font-small: 0.625rem;
  --color-white: #ffffff;
  --color-footer-bg: #000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 2.625rem;
  padding: var(--footer-pad);
  color: var(--color-white);
  background-color: var(--color-footer-bg);
}
.footer_share, .footer_hobo {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--footer-font-standard);
}
.footer_share svg, .footer_hobo svg {
  fill: currentColor;
}
.footer_share {
  display: grid;
  grid-template-columns: 2.73875rem auto;
  gap: 2.94875rem;
  width: 16.625rem;
  margin-block-end: 1.5rem;
}
.footer_share__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.14375rem;
  border-top: solid 1.42px var(--color-white);
  border-bottom: solid 1.42px var(--color-white);
}
.footer_share ul {
  justify-content: space-between;
}
.footer_hobo {
  letter-spacing: 1.3px;
}
.footer_hobo ul {
  gap: 1.5rem;
}
.footer_hobo a {
  display: flex;
  align-items: center;
  gap: 9.24px;
}
.footer ul {
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
.footer_store {
  margin: 3.125rem 0 1.625rem;
  font-family: "Koburina Gothic W3 JIS2004";
  font-size: var(--footer-font-small);
  letter-spacing: 1px;
}
.footer_store ul {
  justify-content: center;
  gap: 0.875rem 1.25rem;
  line-height: 1;
}
.footer_store, .footer_copy {
  width: 100%;
}
@media (min-width: 48rem) {
  .footer {
    --footer-pad: 62px 20px 51px;
  }
  .footer_share {
    margin-block-end: 0;
  }
  .footer_store {
    margin: 1.625rem 0 2.75rem;
  }
}

.header {
  height: 100vh;
}
.header h1 {
  position: relative;
  width: 71.6346153846vw;
  height: auto;
  aspect-ratio: 298/166;
  display: flex;
  justify-content: space-between;
}
.header h1 .ssa {
  align-self: flex-start;
  width: 68.8590604027%;
  height: auto;
}
.header h1 .o2 {
  align-self: flex-end;
  width: 27.7348993289%;
  height: auto;
}
@media (min-width: 48rem) {
  .header h1 {
    width: 22.3611111111vw;
    aspect-ratio: 322/236;
  }
  .header h1 .ssa {
    align-self: flex-start;
    width: 68.649068323%;
    height: auto;
  }
  .header h1 .o2 {
    align-self: flex-end;
    width: 29.3633540373%;
    height: auto;
  }
}

.wallpaper {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
.wallpaper picture,
.wallpaper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yodogawa {
  display: grid;
  align-items: center;
  padding: 10.3125rem 0;
}
.yodogawa-wrap {
  padding: 2rem;
  background-color: rgb(from var(--white) r g b/0.9);
}
.yodogawa-content {
  width: fit-content;
  margin: 0 auto;
}
.yodogawa p {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: 0.9rem;
  line-height: 201.389%;
  letter-spacing: 1.44px;
}
.yodogawa p:not(:last-of-type) {
  margin: 0 0 2em;
}
@media (min-width: 48rem) {
  .yodogawa {
    padding: 11.0625rem 0 6.0625rem;
  }
  .yodogawa-wrap {
    padding: 3.75rem 3rem;
  }
  .yodogawa p {
    white-space: pre-line;
    font-size: 0.9375rem;
    line-height: 193.333%;
    letter-spacing: 1.2px;
  }
}

.vol {
  position: relative;
  display: grid;
  gap: 3rem 0;
  background-color: var(--white);
}
.vol h2 {
  position: absolute;
  z-index: 1;
}
.vol .series {
  width: 100%;
}
.vol + .vol {
  margin-block-start: 3rem;
}

.vol1 h2 {
  left: 0;
  top: 0;
  width: min(51.4855769231vw, 13.38625rem);
  height: min(24.0384615385vw, 6.25rem);
}

.vol2 h2 {
  left: 0;
  top: 0;
  width: min(28.8461538462vw, 7.5rem);
  height: min(36.5384615385vw, 9.5rem);
}

.vol3 h2 {
  right: 0;
  top: 0;
  width: min(31.0096153846vw, 8.0625rem);
  height: min(36.5384615385vw, 9.5rem);
}

.vol4 h2 {
  left: 0;
  top: 0;
  width: min(31.25vw, 8.125rem);
  height: min(39.1826923077vw, 10.1875rem);
}

@media (min-width: 48rem) {
  .vol {
    gap: 5rem 0;
  }
  .vol + .vol {
    margin-block-start: 5rem;
  }
  .vol1 h2 {
    inset: unset;
    right: 0;
    top: 0;
    width: 20.9722222222vw;
    height: 9.7916666667vw;
  }
  .vol2 h2 {
    inset: unset;
    left: 0;
    top: 0;
    width: 11.4583333333vw;
    height: 1.3888888889vw;
  }
  .vol3 h2 {
    inset: unset;
    right: 0;
    top: 0;
    width: 12.2222222222vw;
    height: 14.4444444444vw;
  }
  .vol4 h2 {
    inset: unset;
    left: 0;
    top: 0;
    width: 11.4583333333vw;
    height: 14.5833333333vw;
  }
}
.poster {
  position: relative;
  width: 100%;
  height: 100vh;
  color: var(--black);
}
.poster.custom {
  height: fit-content;
  margin-inline: auto;
}
.poster .photo,
.poster .photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.poster .photo img {
  object-fit: cover;
}
.poster .brand,
.poster .name,
.poster .link {
  position: absolute;
}
.poster .name {
  font-family: "din-2014", sans-serif;
  font-size: min(2.8846153846vw, 0.75rem);
  line-height: 153.333%;
  letter-spacing: 0.72px;
}
.poster .link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 min(1.6826923077vw, 0.4375rem);
  width: min(24.0384615385vw, 6.25rem);
  height: min(6.0576923077vw, 1.575rem);
  font-size: min(2.4603365385vw, 0.6396875rem);
  letter-spacing: 0.614px;
  border: 0.744px solid currentColor;
  border-radius: 1rem;
}
.poster .link:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.13363 2.61455V3.20244L0.0927734 5.83247V5.19817L3.85157 3.24885C3.99725 3.1715 4.25949 3.06321 4.60915 2.92397C4.37604 2.8002 4.1138 2.69191 3.83699 2.56814L0.10734 0.6343V0L5.1482 2.61455H5.13363Z" /%3E%3C/svg%3E');
  mask-repeat: no-repeat;
}
@media (min-width: 48rem) {
  .poster .name {
    font-size: 0.875rem;
    line-height: 21.351px;
    letter-spacing: 0.84px;
  }
  .poster .link {
    gap: 0 5px;
    width: 6.875rem;
    height: 1.85625rem;
    font-size: 0.75275rem;
    letter-spacing: 0.723px;
    border-width: 0.876px;
  }
}
@media (min-width: 75rem) {
  .poster.flexible {
    height: fit-content;
    margin-inline: auto;
    aspect-ratio: unset;
  }
}
@media (width <= 73.75) and (orientation: landscape) {
  .poster {
    min-height: 170vh;
  }
  .poster.flexible, .poster.custom {
    aspect-ratio: 70/100;
  }
}
@media (width >= 48rem) and (orientation: portrait) {
  .poster {
    max-height: 80vh;
  }
  .poster.flexible, .poster.custom {
    aspect-ratio: 80/100;
  }
}

.o2-outer .brand {
  left: 12.0192307692%;
  top: 39.625%;
  width: min(41.8269230769vw, 10.875rem);
  height: auto;
}
.o2-outer .name {
  left: 11.2980769231%;
  bottom: 8.625%;
}
.o2-outer .link {
  left: 7.9326923077%;
  bottom: 4.47%;
}

.tee-rosy .brand {
  right: 0;
  top: 5.375%;
  width: min(54.0865384615vw, 14.0625rem);
  height: auto;
}
.tee-rosy .name {
  right: 15.625%;
  top: 19.625%;
}
.tee-rosy .link {
  right: 9.375%;
  top: 25.25%;
}

.frais-frais .brand {
  left: 8.8942307692%;
  top: 0;
  width: min(60.8173076923vw, 15.8125rem);
  height: auto;
}
.frais-frais .name {
  left: 7.9326923077%;
  bottom: 2.4125%;
}
.frais-frais .link {
  right: 7.2115384615%;
  bottom: 4.1325%;
}

.tee-rosy-vol2 .brand {
  right: 0;
  top: 15.5875%;
  width: min(53.6057692308vw, 13.9375rem);
  height: auto;
}
.tee-rosy-vol2 .name {
  left: 17.0673076923%;
  top: 29.4625%;
}
.tee-rosy-vol2 .link {
  right: 10.5769230769%;
  top: 38.4625%;
}

.nizyu-kano .brand {
  left: 0;
  top: 0;
  width: min(37.0192307692vw, 9.625rem);
  height: auto;
}
.nizyu-kano .name {
  left: 16.8269230769%;
  bottom: 6.9125%;
}
.nizyu-kano .link {
  right: 5.7692307692%;
  bottom: 2.7575%;
}

.mioasse .brand {
  left: 0;
  bottom: 0;
  width: min(43.2692307692vw, 11.25rem);
  height: auto;
}
.mioasse .name {
  left: 46.875%;
  bottom: 9.9125%;
}
.mioasse .link {
  left: 46.3942307692%;
  bottom: 6.2575%;
}

.frais-vol3-01 .brand {
  left: 6.7307692308%;
  top: 0;
  width: min(60.8173076923vw, 15.8125rem);
  height: auto;
}
.frais-vol3-01 .name {
  left: 6.7307692308%;
  bottom: 2.9125%;
}
.frais-vol3-01 .link {
  right: 12.0192307692%;
  bottom: 3.3825%;
}

.frais-vol3-02 .brand {
  right: 0;
  top: 8.0875%;
  width: min(60.8173076923vw, 15.8125rem);
  height: auto;
}
.frais-vol3-02 .name {
  left: 7.9326923077%;
  top: 20.2125%;
}
.frais-vol3-02 .link {
  left: 27.8846153846%;
  top: 26.7125%;
}

.frais-vol3-03 .brand {
  left: 6.0096153846%;
  bottom: 34.6625%;
  width: min(60.8173076923vw, 15.8125rem);
  height: auto;
}
.frais-vol3-03 .name {
  left: 9.6153846154%;
  bottom: 9.6625%;
}
.frais-vol3-03 .link {
  left: 20.9134615385%;
  bottom: 5.0075%;
}

.tsuki-s .brand {
  left: 13.4615384615%;
  bottom: 15.42%;
  width: min(48.5576923077vw, 12.625rem);
  height: auto;
}
.tsuki-s .name {
  right: 12.5%;
  bottom: 10.92%;
}
.tsuki-s .link {
  right: 12.5%;
  bottom: 6.76375%;
}

.firo .brand {
  right: 21.1538461538%;
  bottom: 26.605%;
  width: min(35.3365384615vw, 9.1875rem);
  height: auto;
}
.firo .name {
  right: 6.7307692308%;
  bottom: 9.075%;
}
.firo .link {
  right: 16.8269230769%;
  bottom: 3.92%;
}

.tee-rosy .name,
.tee-rosy-vol2 .name,
.frais-vol3-02 .name,
.nizyu-kano .name,
.firo .name {
  text-align: right;
}

.frais-frais,
.nizyu-kano,
.frais-vol3-02,
.frais-vol3-03,
.firo {
  color: var(--white);
}

.frais-frais {
  padding-top: 11.6105769231%;
}

.frais-vol3-01 {
  padding-top: 12.3317307692%;
}

@media (min-width: 48rem) {
  .o2-outer .brand,
  .o2-outer .name,
  .o2-outer .link {
    inset: unset;
  }
  .o2-outer .brand {
    left: 70.2777777778%;
    top: 30.5%;
    width: 12.6875rem;
    height: auto;
  }
  .o2-outer .name {
    right: 7.7777777778%;
    top: 43.41125%;
  }
  .o2-outer .link {
    left: 72.8472222222%;
    top: 47.625%;
  }
  .tee-rosy .brand,
  .tee-rosy .name,
  .tee-rosy .link {
    inset: unset;
  }
  .tee-rosy .brand {
    right: 0;
    top: 46.375%;
    width: 14.875rem;
    height: auto;
  }
  .tee-rosy .name {
    left: 4.0277777778%;
    bottom: 14.25%;
  }
  .tee-rosy .link {
    left: 5.4861111111%;
    bottom: 9.03625%;
  }
  .frais-frais .brand,
  .frais-frais .name,
  .frais-frais .link {
    inset: unset;
  }
  .frais-frais .brand {
    left: 8.75%;
    top: 0;
    width: 21.5rem;
    height: auto;
  }
  .frais-frais .name {
    left: 6.875%;
    top: 24.125%;
  }
  .frais-frais .link {
    left: 20.9722222222%;
    top: 28.25%;
  }
  .tee-rosy-vol2 .brand,
  .tee-rosy-vol2 .name,
  .tee-rosy-vol2 .link {
    inset: unset;
  }
  .tee-rosy-vol2 .brand {
    right: 0;
    top: 11.375%;
    width: 19.1875rem;
    height: auto;
  }
  .tee-rosy-vol2 .name {
    right: 12.5%;
    top: 29.5%;
  }
  .tee-rosy-vol2 .link {
    right: 2.9861111111%;
    top: 31.5%;
  }
  .nizyu-kano .brand,
  .nizyu-kano .name,
  .nizyu-kano .link {
    inset: unset;
  }
  .nizyu-kano .brand {
    right: 0;
    top: 0;
    width: 9.625rem;
    height: auto;
  }
  .nizyu-kano .name {
    right: 2.4479166667%;
    top: 15.51375%;
  }
  .nizyu-kano .link {
    right: 7.7777777778%;
    top: 32.63875%;
  }
  .mioasse .brand,
  .mioasse .name,
  .mioasse .link {
    inset: unset;
  }
  .mioasse .brand {
    left: 0;
    top: 18%;
    width: 11.25rem;
    height: auto;
  }
  .mioasse .name {
    left: 5.2083333333%;
    top: 30.92875%;
  }
  .mioasse .link {
    left: 7.5694444444%;
    top: 37.875%;
  }
  .frais-vol3-01 .brand,
  .frais-vol3-01 .name,
  .frais-vol3-01 .link {
    inset: unset;
  }
  .frais-vol3-01 .brand {
    right: 0;
    top: 0;
    width: 16.8125rem;
    height: auto;
  }
  .frais-vol3-01 .name {
    left: 17.7993055556%;
    bottom: 13.25%;
  }
  .frais-vol3-01 .link {
    left: 20.5770833333%;
    bottom: 8.28625%;
  }
  .frais-vol3-02 .brand,
  .frais-vol3-02 .name,
  .frais-vol3-02 .link {
    inset: unset;
  }
  .frais-vol3-02 .brand {
    right: 0;
    top: 5.875%;
    width: 18.375rem;
    height: auto;
  }
  .frais-vol3-02 .name {
    right: 6.9444444444%;
    top: 19%;
  }
  .frais-vol3-02 .link {
    right: 3.6805555556%;
    top: 25.375%;
  }
  .frais-vol3-03 .brand,
  .frais-vol3-03 .name,
  .frais-vol3-03 .link {
    inset: unset;
  }
  .frais-vol3-03 .brand {
    left: 11.8055555556%;
    bottom: 35.25%;
    width: 20.5rem;
    height: auto;
  }
  .frais-vol3-03 .name {
    right: 1.8055555556%;
    top: 2.875%;
  }
  .frais-vol3-03 .link {
    right: 12.2222222222%;
    top: 18.25%;
  }
  .tsuki-s .brand,
  .tsuki-s .name,
  .tsuki-s .link {
    inset: unset;
  }
  .tsuki-s .brand {
    left: 0;
    top: 0;
    width: 15.125rem;
    height: auto;
  }
  .tsuki-s .name {
    left: 15%;
    top: 20.555%;
  }
  .tsuki-s .link {
    left: 15.9722222222%;
    top: 25.16375%;
  }
  .firo .brand,
  .firo .name,
  .firo .link {
    inset: unset;
  }
  .firo .brand {
    right: 5.2777777778%;
    bottom: 34%;
    width: 11rem;
    height: auto;
  }
  .firo .name {
    right: 11.3194444444%;
    bottom: 15.5%;
  }
  .firo .link {
    right: 6.25%;
    bottom: 9.375%;
  }
  .tee-rosy .name,
  .tee-rosy-vol2 .name,
  .frais-vol3-02 .name {
    text-align: left;
  }
  .frais-frais,
  .frais-vol3-02,
  .frais-vol3-03 {
    color: var(--black);
  }
  .frais-frais {
    padding-top: 4.8611111111%;
  }
  .frais-vol3-03 .name {
    text-align: right;
  }
}
@media (min-width: 75rem) {
  .nizyu-kano {
    width: 96.5277777778%;
    aspect-ratio: 1390/772.222;
  }
  .frais-vol3-01 {
    width: 91.4305555556%;
    aspect-ratio: 1316.6/731.454;
    padding-top: 3.8541666667%;
  }
  .tsuki-s {
    width: 94.8611111111%;
    aspect-ratio: 1366/758.889;
  }
}
.block {
  padding-block-start: 3rem;
}
@media (min-width: 48rem) {
  .block {
    padding-block-start: 3.75rem;
  }
}

.square.solo picture {
  width: min(72.1153846154vw, 29.625rem);
}
.square.dance {
  display: grid;
  gap: 1.25rem 3.3359809373%;
}
.square.dance picture:last-of-type {
  width: 80.5288461538%;
  margin: 0 0 0 auto;
}
.square.trio {
  display: grid;
  gap: 1.75rem 3.5283993115%;
  width: 52.6442307692vw;
  margin-inline: auto;
}
.square.duo {
  display: grid;
  gap: 1rem 4.3399638336%;
  padding-block-end: 0.75rem;
}
.square.duo picture {
  width: min(58.8942307692vw, 33.0625rem);
}
.square.duo picture:first-of-type {
  margin: 0 0 0 5.7692307692vw;
}
.square.duo picture:last-of-type {
  margin: 0 8.8942307692vw 0 auto;
}
@media (min-width: 48rem) {
  .square.solo picture {
    margin: 0 15% 0 auto;
  }
  .square.dance {
    display: grid;
    grid-template-columns: 53.8522637014% 42.8117553614%;
    width: 87.4305555556%;
    margin-inline-start: auto;
  }
  .square.dance picture:last-of-type {
    width: 100%;
    margin: 28.0952380952% 0 0 0;
  }
  .square.trio {
    grid-template-columns: repeat(3, 1fr);
    width: 80.6944444444%;
  }
  .square.duo {
    grid-template-columns: repeat(2, 1fr);
    width: 76.8055555556%;
    margin-inline: auto;
  }
  .square.duo picture {
    width: 100%;
  }
  .square.duo picture:first-of-type {
    margin: 0;
  }
  .square.duo picture:last-of-type {
    margin: 31.0018903592% 0 0;
  }
}

.rectangle.trio {
  display: grid;
  grid-template-columns: repeat(2, 26.1580381471%) 32.4250681199%;
  gap: 0 7.6294277929%;
  width: 88.2211538462vw;
  margin-inline: auto;
}
.rectangle.trio picture:nth-of-type(2) {
  margin-top: 14.6634615385vw;
}
.rectangle.trio picture:nth-of-type(3) {
  margin-top: 40.1442307692vw;
}
.rectangle.solo {
  padding-block-end: 0.6875rem;
}
.rectangle.solo picture {
  width: 64.9038461538vw;
  margin-inline: auto 12.7403846154vw;
}
.rectangle.duo {
  display: grid;
  grid-template-columns: 53.9295392954% 42.8184281843%;
  justify-content: space-between;
  width: 88.7019230769vw;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .rectangle.trio {
    grid-template-columns: repeat(2, 27.2479564033%) auto;
    gap: 0 5.9945504087%;
    width: 50.9722222222%;
    margin-inline: 13.75% auto;
  }
  .rectangle.trio picture:nth-of-type(2), .rectangle.trio picture:nth-of-type(3) {
    margin-top: 0;
  }
  .rectangle.solo {
    padding-block-end: 1.875rem;
  }
  .rectangle.solo picture {
    width: 56.3888888889%;
    margin-inline: 5.1388888889% auto;
  }
  .rectangle.duo {
    grid-template-columns: repeat(2, 46.8911917098%);
    width: 53.6111111111%;
    padding-block-start: 6.625rem;
  }
}

.info {
  padding: 5rem 0;
  color: var(--black);
  font-size: 0.8125rem;
  line-height: 161.538%;
  letter-spacing: 0.78px;
  background-color: var(--white);
  interpolate-size: allow-keywords;
}
.info-item h3 {
  margin-bottom: 0.5rem;
}
.info-item h3 img {
  width: auto;
  height: 1.75rem;
}
.info-item h4 {
  margin-bottom: 0.5rem;
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: 0.875rem;
  line-height: 164.286%;
  letter-spacing: 0.84px;
}
.info-item ul + h4,
.info-item ul + ul {
  margin-top: 1.25rem;
}
.info-content {
  position: relative;
  display: grid;
  justify-content: center;
  gap: 1.25rem 0;
  width: 74.0384615385vw;
  height: 57.875rem;
  margin-inline: auto;
  overflow: hidden;
  transition: height 1s linear;
}
.info-content:after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  display: block;
  width: 100%;
  height: 7.6875rem;
  background-image: linear-gradient(rgb(from var(--white) r g b/0), var(--white) 60%);
  opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.info-content.show-full {
  height: max-content;
}
.info-content.show-full:after {
  opacity: 0;
  visibility: hidden;
}
.info .show-more {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 1.39375rem;
  background-color: var(--white);
  border: 0.676px solid var(--black);
}
.info .show-more[aria-expanded=true] {
  visibility: hidden;
  touch-action: none;
}
.info .show-more img {
  width: auto;
  height: 0.6525rem;
}
@media (min-width: 48rem) {
  .info {
    padding: 8.875rem 0 5rem;
    font-size: 0.875rem;
  }
  .info-content {
    width: max-content;
    gap: 3.4375rem 0;
  }
  .info-item h3 {
    margin-bottom: 1rem;
  }
  .info-item h3 img {
    height: 2.0625rem;
  }
  .info-item h4 {
    font-size: 0.9375rem;
  }
  .info ul + h4 {
    margin-top: 0.75rem;
  }
  .info ul + ul {
    margin-top: 1.5rem;
  }
}
.info .show-more {
  width: 7.625rem;
  height: 1.7rem;
}
.info .show-more img {
  height: 0.785625rem;
}

@keyframes fade-in {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.wallpaper,
.o2,
.ssa {
  opacity: 0;
}

.wallpaper {
  animation: fade-in 1s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.o2 {
  animation: fade-in 1s 1.1s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

.ssa {
  animation: fade-in 0.5s 0.6s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

[data-watch=vol-title-section] {
  position: absolute;
  width: 100%;
  height: 100vh;
}
[data-watch=vol-title-section] h2 {
  visibility: hidden;
  opacity: 0;
}
[data-watch=vol-title-section] + .series .brand,
[data-watch=vol-title-section] + .series .name,
[data-watch=vol-title-section] + .series .link {
  visibility: hidden;
  opacity: 0;
}
[data-watch=vol-title-section].in-view h2 {
  animation: fade-in 1s 0.65s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
[data-watch=vol-title-section].in-view + .series .brand,
[data-watch=vol-title-section].in-view + .series .name,
[data-watch=vol-title-section].in-view + .series .link {
  animation: fade-in 1s 1.32s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

[data-watch=poster] .brand,
[data-watch=poster] .name,
[data-watch=poster] .link {
  visibility: hidden;
  opacity: 0;
}
[data-watch=poster].in-view .brand {
  animation: fade-in 1s 0.65s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
[data-watch=poster].in-view .name,
[data-watch=poster].in-view .link {
  animation: fade-in 1s 1.2s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.main {
  background-color: var(--white);
}
.main img {
  width: 100%;
}