@charset "UTF-8";
/* -------------------------------
inner
------------------------------- */
/* -------------------------------
余白
------------------------------- */
/* -------------------------------
フォント
------------------------------- */
/* -------------------------------
ベースフォントサイズ
------------------------------- */
/* -------------------------------
Color
------------------------------- */
/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/
/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
html {
  font-size: 10px;
}
@media (max-width: 1354px) {
  html {
    font-size: 0.7385524372vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 10px;
  }
}
@media (width <= 414px) {
  html {
    font-size: 2.4154589372vw;
  }
}

body {
  position: relative;
  overflow-x: clip;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}
body.no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
img {
  width: 100%;
  object-fit: contain;
}

button {
  padding: 0;
  margin: 0;
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* -------------------------------
l-header
------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

/* -------------------------------
l-inner
------------------------------- */
.l-inner {
  max-width: 1354px;
  margin: 0 auto;
  padding: 0 25px;
}
@media screen and (max-width: 767px) {
  .l-inner {
    padding: 0 20px;
  }
}

/* -------------------------------
c-fade-up
------------------------------- */
.c-fade-up {
  opacity: 0;
  transition: 0.5s ease-in-out;
  transform: translateY(-2rem);
}
@media screen and (max-width: 767px) {
  .c-fade-up {
    transform: translateY(-1.2rem);
  }
}

.c-fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------
c-loading
------------------------------- */
.c-loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100dvh;
  opacity: 1;
  transition: opacity 0.6s;
}

.is-loaded .c-loading {
  pointer-events: none;
  opacity: 0;
}

.c-loading__bg {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .c-loading__bg {
    position: absolute;
    top: calc(50% - 0rem);
    left: calc(50% + 2.7rem);
    width: 106.2rem;
    transform: translate(-50%, -50%);
  }
}

.c-loading__bg picture,
.c-loading__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1920/1080;
}
@media screen and (max-width: 767px) {
  .c-loading__bg picture,
  .c-loading__bg img {
    aspect-ratio: 1062/750;
  }
}

.c-loading__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9100;
  width: 78.4rem;
  opacity: 0.9;
  transform: translate(-50%, -50%);
  animation: loading-logo-opacity 3s linear infinite;
}
@media screen and (max-width: 767px) {
  .c-loading__logo {
    width: 90%;
    max-width: 43rem;
  }
}

.c-loading__logo img {
  object-fit: contain;
  aspect-ratio: 784/160;
}

@keyframes loading-logo-opacity {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.9;
  }
}
/* -------------------------------
c-mist-in
------------------------------- */
.c-mist-in {
  mask-image: radial-gradient(circle at 0% 0%, black 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 0% 0%;
  transition: mask-size 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media screen and (max-width: 767px) {
  .c-mist-in {
    transition: mask-size 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.c-mist-in.is-active {
  mask-size: 700% 700%;
}

/* -------------------------------
c-modal-movie
------------------------------- */
.c-modal-movie {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding-block: 2rem;
  overflow-y: scroll;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
  scrollbar-width: none;
}
.c-modal-movie::-webkit-scrollbar {
  display: none;
}
@media screen and (height <= 500px) {
  .c-modal-movie {
    align-items: flex-start;
  }
}

.c-modal-movie.is-open {
  visibility: visible;
  opacity: 1;
}

.c-modal-movie__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 10rem;
  height: 10rem;
  cursor: pointer;
  border-radius: 0 0 0 3.3rem;
  transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__close {
    top: 0;
    right: 0;
    width: 6.6rem;
    height: 6.6rem;
  }
}

.c-modal-movie__close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 0 0 3.3rem;
}

@media (any-hover: hover) {
  .c-modal-movie__close:hover {
    opacity: 0.8;
  }
}
.c-modal-movie__inner {
  position: relative;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__inner {
    padding-block: 7.3rem 0.2rem;
  }
}

.c-modal-movie__content {
  width: 80%;
  max-width: 130rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__content {
    width: 100%;
    max-width: 38.2rem;
  }
}

.c-modal-movie__content iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 16/9;
}

/* -------------------------------
c-parallax-deco
------------------------------- */
.c-parallax-deco {
  position: relative;
  z-index: 30;
  overflow: clip;
  --parallax-deco-before-y: 0px;
  --parallax-deco-after-y: 0px;
}

.c-parallax-deco::before {
  position: absolute;
  top: 68rem;
  right: -0.5rem;
  z-index: 40;
  width: 99.6354166667%;
  aspect-ratio: 1913/1389;
  pointer-events: none;
  content: "";
  background: url("../images/kazeshiro/intro/intro-bottom-deco.avif") center/contain no-repeat;
  transform: translateY(var(--parallax-deco-before-y));
}
@media screen and (max-width: 767px) {
  .c-parallax-deco::before {
    top: 50%;
    left: calc(50% + 1.1rem);
    width: 125.1207729469%;
    aspect-ratio: 518/690;
    background: url("../images/kazeshiro/intro/intro-bottom-deco_sp.avif") center/contain no-repeat;
    transform: translate(-50%, -50%) translateY(var(--parallax-deco-before-y));
  }
}

.c-parallax-deco::after {
  position: absolute;
  top: 46rem;
  right: -0.5rem;
  z-index: 34;
  width: 99.6354166667%;
  aspect-ratio: 1913/1389;
  pointer-events: none;
  content: "";
  background: url("../images/kazeshiro/intro/intro-snow-deco.avif") center/contain no-repeat;
  transform: translateY(var(--parallax-deco-after-y));
}
@media screen and (max-width: 767px) {
  .c-parallax-deco::after {
    display: none;
  }
}

/* -------------------------------
c-section-title
------------------------------- */
.c-section-title {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.c-section-title__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-section-title__en {
  position: relative;
  font-family: "El Messiri", sans-serif;
  font-size: 9.6rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: linear-gradient(84deg, #eccbd2 0%, #322e55 50%, #322e55 100%);
  background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 767px) {
  .c-section-title__en {
    font-size: 4.8rem;
    letter-spacing: 0.08em;
  }
}

.c-section-title__ja {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #322e55;
  letter-spacing: 0.4em;
}
@media screen and (max-width: 767px) {
  .c-section-title__ja {
    margin-top: 0.3rem;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
  }
}

.c-section-title__deco-left,
.c-section-title__deco-right {
  position: absolute;
  top: 41%;
  z-index: 10;
  width: 4.5rem;
  aspect-ratio: 45/52;
}
@media screen and (max-width: 767px) {
  .c-section-title__deco-left,
  .c-section-title__deco-right {
    display: none;
  }
}

.c-section-title__deco-left {
  left: -4.9rem;
  transform: translate(-100%, -50%);
}

.c-section-title__deco-right {
  right: -3.7rem;
  transform: translate(100%, -50%) rotate(180deg);
}

/* -------------------------------
PCアニメーション設定
------------------------------- */
.c-section-title__deco-blue {
  transform-origin: 35.6% 26.9%;
  animation: section-title-deco-blue 8s linear infinite;
}

.c-section-title__deco-pink {
  transform-origin: 80% 79.8%;
  animation: section-title-deco-pink 6s linear infinite;
}

@keyframes section-title-deco-blue {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.08) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}
@keyframes section-title-deco-pink {
  0% {
    transform: scale(1.08) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(-180deg);
  }
  100% {
    transform: scale(1.08) rotate(-360deg);
  }
}
/* -------------------------------
SP設定
------------------------------- */
@media screen and (max-width: 767px) {
  .c-section-title__en::before,
  .c-section-title__en::after {
    position: absolute;
    top: 41%;
    z-index: 10;
    width: 2.2rem;
    height: 1.9rem;
    content: "";
    mask-image: url("../images/kazeshiro/common/section-title-deco_sp.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .c-section-title__en::before {
    left: -0.8rem;
    background-color: #c3d2e6;
    transform: translate(-100%, -50%);
  }
}

@media screen and (max-width: 767px) {
  .c-section-title__en::after {
    right: -0.4rem;
    background-color: #dfc0c9;
    transform: translate(100%, -50%) rotate(0deg);
  }
}

@media screen and (max-width: 767px) {
  .c-section-title__en::before {
    animation: sectionSP-title-deco-before 12s linear infinite;
  }
}

@media screen and (max-width: 767px) {
  .c-section-title__en::after {
    animation: sectionSP-title-deco-after 12s linear infinite;
  }
}

@keyframes sectionSP-title-deco-before {
  0% {
    transform: translate(-100%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-100%, -50%) rotate(360deg);
  }
}
@keyframes sectionSP-title-deco-after {
  0% {
    transform: translate(100%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(100%, -50%) rotate(360deg);
  }
}
/* -------------------------------
p-character__title ユニーク設定
------------------------------- */
.p-character__title.c-section-title {
  margin-right: 29.7rem;
}
@media screen and (width <= 846px) {
  .p-character__title.c-section-title {
    margin-inline: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .p-character__title.c-section-title {
    margin-inline: auto;
  }
}

.p-character__title.c-section-title .c-section-title__text {
  flex-direction: row;
  gap: 2.7rem;
}
@media screen and (max-width: 767px) {
  .p-character__title.c-section-title .c-section-title__text {
    flex-direction: column;
    gap: 0rem;
  }
}

.p-character__title .c-section-title__en {
  font-size: 12.8rem;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-character__title .c-section-title__en {
    font-size: 4.8rem;
    letter-spacing: 0.08em;
  }
}

.p-character__title .c-section-title__ja {
  padding-bottom: 2.4rem;
  letter-spacing: 0.2em;
}

/* -------------------------------
p-bonuses
------------------------------- */
.p-bonuses {
  position: relative;
  padding-bottom: 17.4rem;
  margin-top: 15.1rem;
  overflow-x: clip;
  scroll-margin-top: 10rem;
  clip-path: inset(-100% 0 0 0);
}
@media screen and (max-width: 767px) {
  .p-bonuses {
    padding-bottom: 7.2rem;
    margin-top: 5.5rem;
    scroll-margin-top: 0;
  }
}

.p-bonuses::before,
.p-bonuses::after {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-bonuses::before,
  .p-bonuses::after {
    display: none;
  }
}

.p-bonuses::before {
  top: -35rem;
  left: -76.7rem;
}

.p-bonuses::after {
  right: -52.2rem;
  bottom: -34.7rem;
  transform: scaleX(-1);
}

@media screen and (max-width: 767px) {
  .p-bonuses__inner.l-inner {
    padding-inline: 23px;
  }
}

.p-bonuses__desc {
  position: relative;
  z-index: 50;
  margin-top: 6.4rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 2;
  color: #322e55;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-bonuses__desc {
    margin-top: 4rem;
    font-size: 1.4rem;
  }
}
.p-bonuses .p-info__release {
  margin-top: 4.8rem;
}
@media screen and (max-width: 767px) {
  .p-bonuses .p-info__release {
    margin-top: 3.2rem;
  }
}
.p-info__release + .p-bonuses__desc {
  margin-top: 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-info__release + .p-bonuses__desc {
    margin-top: 0.8rem;
  }
}

.p-bonuses__content {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 1232px;
  padding: 7.3rem 7.5rem;
  margin-inline: auto;
  margin-top: 6.4rem;
  outline: 2px solid #322e55;
  outline-offset: 0.8rem;
  background-color: #fffdf8;
  border: 1px solid #322e55;
}
@media screen and (max-width: 767px) {
  .p-bonuses__content {
    max-width: 40rem;
    padding: 2.8rem 2.3rem;
    margin-top: 4rem;
    outline-offset: 0.6rem;
  }
}

.p-bonuses__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7rem 8rem;
}
@media screen and (max-width: 767px) {
  .p-bonuses__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
    justify-items: center;
  }
}

.p-bonuses__item {
  width: 100%;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item {
    max-width: 31.7rem;
  }
}

.p-bonuses__item-title {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  color: #322e55;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-title {
    font-size: 2.4rem;
  }
}

.p-bonuses__item-title::before,
.p-bonuses__item-title::after {
  width: 1.8rem;
  height: 2rem;
  content: "";
  background: url("../images/kazeshiro/bonuses/bonuses-title-deco.svg") center/contain no-repeat;
}

.p-bonuses__item-body {
  position: relative;
  padding: 4.9rem 4.5rem;
  margin-top: 2.1rem;
  background: url("../images/kazeshiro/bonuses/bonuses-frame.avif") center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-body {
    padding: 3.3rem 3rem;
    margin-top: 1.5rem;
  }
}

.p-bonuses__item-image {
  width: 26.7rem;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-image {
    width: 18rem;
  }
}

.p-bonuses__item-character {
  position: absolute;
  right: 4.9rem;
  bottom: 4.5rem;
  width: 19.1rem;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-character {
    right: 3rem;
    bottom: 3.3rem;
    width: 12.8rem;
  }
}

.p-bonuses__item-character img {
  --blur: 2px;
  filter: drop-shadow(0 0 var(--blur) #fff) drop-shadow(0 0 var(--blur) #fff) drop-shadow(0 0 var(--blur) #fff) drop-shadow(0 0 var(--blur) #fff) drop-shadow(0 0 var(--blur) #fff) drop-shadow(0 0 var(--blur) #fff);
}

.p-bonuses__item-description {
  width: fit-content;
  margin-inline: auto;
  margin-top: 2rem;
  font-size: 2rem;
  color: #848196;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-description {
    margin-top: 1.2rem;
    font-size: 1.6rem;
  }
}

.p-bonuses__item-description span {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  width: fit-content;
}

.p-bonuses__item-description span::before {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.2rem;
  content: "";
  background: url("../images/kazeshiro/bonuses/bonuses-description-deco.svg") center/contain no-repeat;
}

.p-bonuses__item-description span + span {
  margin-top: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-bonuses__item-description span + span {
    margin-top: 0.8rem;
  }
}

/* -------------------------------
p-character
------------------------------- */
.p-character {
  position: relative;
  padding-block: 14.9rem 16.4rem;
  background-color: #fffdf8;
}
@media screen and (max-width: 767px) {
  .p-character {
    padding-block: 6rem 8.4rem;
  }
}

.p-character::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1920/1080;
  content: "";
  background: url("../images/kazeshiro/character/character-bg.avif") top center/contain no-repeat;
  transform: translateX(-50%);
}

.p-character__inner.l-inner {
  position: relative;
  z-index: 10;
  max-width: 1368px;
  padding-inline: 32px;
}
@media screen and (max-width: 767px) {
  .p-character__inner.l-inner {
    max-width: initial;
    max-width: 40rem;
    padding-inline: 24px;
  }
}

.p-character__content {
  position: relative;
  margin-top: 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-character__content {
    margin-top: 1.5rem;
  }
}

.p-character__left {
  position: absolute;
  top: 13.3rem;
  left: 0;
  z-index: 10;
  width: 68rem;
}
@media screen and (max-width: 767px) {
  .p-character__left {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }
}

.p-character__left-nav {
  position: absolute;
  top: 50%;
  left: -3.2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 6.4rem);
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .p-character__left-nav {
    left: 50%;
    width: calc(100% + 3rem);
    transform: translate(-50%, -50%);
  }
}

.p-character__left-prev,
.p-character__left-next {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-character__left-prev,
  .p-character__left-next {
    width: 4.8rem;
    height: 4.8rem;
  }
}

@media (any-hover: hover) {
  .p-character__left-prev:hover,
  .p-character__left-next:hover {
    opacity: 0.8;
  }
}
.p-character__left-next {
  transform: rotate(180deg);
}

.p-character__left-image-wrap {
  width: 68rem;
  height: 81.5rem;
  overflow: clip;
}
@media screen and (max-width: 767px) {
  .p-character__left-image-wrap {
    width: 100%;
    height: 43.9rem;
  }
}

.p-character__left-image {
  width: 100%;
}

.p-character__left-image img {
  width: 100%;
}

.p-character__left-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

.p-character__left-bg img {
  width: 100%;
  aspect-ratio: 680/680;
  object-fit: contain;
}

.p-character__left-bg::before {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid #efb2c3;
  border-radius: 50% 0 0;
}
@media screen and (max-width: 767px) {
  .p-character__left-bg::before {
    top: 0.4rem;
    left: 0.4rem;
  }
}

.p-character__left-catchcopy {
  position: absolute;
  right: 5.2rem;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .p-character__left-catchcopy {
    right: 3.5rem;
  }
}

.p-character__left-catchcopy img {
  width: 100%;
  object-fit: contain;
}

.p-character__body {
  position: relative;
  width: 76.5337423313%;
  max-width: 99.8rem;
  padding-block: 6.4rem 3.2rem;
  padding-inline: clamp(16px, -86.064px + 13.29vw, 130px);
  margin-left: auto;
  color: #322e55;
  background-color: #fff;
  border-radius: 3.2rem 3.2rem 0 0;
  filter: drop-shadow(0 4px 24px #f5e9e5);
}
@media screen and (max-width: 767px) {
  .p-character__body {
    width: 100%;
    padding-block: 1.6rem;
    padding-inline: 1.6rem;
    margin-top: 3.3rem;
  }
}

.p-character__body::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  content: "";
  background: url("../images/kazeshiro/character/character-body-deco.avif") center/cover no-repeat;
  transform: translateY(100%);
}
@media screen and (max-width: 767px) {
  .p-character__body::before {
    height: 3.6rem;
  }
}

.p-character__body-inner {
  width: 60.5691056911%;
  max-width: 44.7rem;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .p-character__body-inner {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
  }
}

.p-character__name-wrap {
  color: #322e55;
}

.p-character__name-en {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: #eccbd2;
  letter-spacing: 0.2em;
}

.p-character__name {
  margin-top: 1.2rem;
  font-size: 6.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
}
@media screen and (max-width: 767px) {
  .p-character__name {
    margin-top: 0.5rem;
    font-size: 4rem;
    letter-spacing: 0.33em;
  }
}

.p-character__cv {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .p-character__cv {
    margin-top: 0.7rem;
  }
}

.p-character__desc {
  margin-top: 4rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .p-character__desc {
    margin-top: 4rem;
    font-size: 1.4rem;
  }
}

.p-character__profile {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-character__profile {
    margin-top: 3.2rem;
  }
}

.p-character__profile-item {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .p-character__profile-item {
    font-size: 1.6rem;
  }
}

.p-character__profile-label {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem;
  color: #fff;
  background-color: #dfc0c9;
}
@media screen and (max-width: 767px) {
  .p-character__profile-label {
    padding: 0.4rem 0.8rem;
  }
}

.p-character__profile-label::after {
  width: 1.6rem;
  height: 1.6rem;
  content: "";
}

.-heart .p-character__profile-label::after {
  background: url("../images/kazeshiro/character/icon-heart.svg") center/contain no-repeat;
}

.-star .p-character__profile-label::after {
  background: url("../images/kazeshiro/character/icon-star.svg") center/contain no-repeat;
}

.-job .p-character__profile-label::after {
  background: url("../images/kazeshiro/character/icon-job.svg") center/contain no-repeat;
}

.p-character__face-list {
  display: flex;
  gap: 1.4rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-character__face-list {
    margin-top: 3.1rem;
  }
}

.p-character__face-item {
  width: 12rem;
  border-radius: 0 50%;
}

.p-character__face-item img {
  width: 100%;
  object-fit: cover;
  border-radius: 0 50%;
}

.p-character__tab-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  padding-block: 2rem 0.4rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-character__tab-list {
    justify-content: center;
  }
}

.p-character__tab-list::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: block;
  width: 100%;
  height: 0.3rem;
  content: "";
  background-image: radial-gradient(circle, #eccbd2 0.15rem, transparent 0.15rem);
  background-repeat: repeat-x;
  background-size: 1.2rem 0.3rem;
  transform: translateY(-50%);
}

.p-character__tab-item {
  width: 7.2rem;
  aspect-ratio: 1/1;
  cursor: pointer;
  border-radius: 50%;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.p-character__tab-item img {
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.p-character__tab-item.-active {
  position: relative;
  cursor: auto;
  outline: 1px solid #eccbd2;
  outline-offset: 4px;
  border: 1px solid #eccbd2;
  filter: grayscale(0%);
}

/* -------------------------------
p-character フェード対応
------------------------------- */
.p-character__left-image,
.p-character__left-bg,
.p-character__left-catchcopy,
.p-character__fade-group {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.p-character__left-image.is-fade,
.p-character__left-bg.is-fade,
.p-character__left-catchcopy.is-fade,
.p-character__fade-group.is-fade {
  opacity: 0;
}

/* -------------------------------
キャラクター個別設定
------------------------------- */
.p-character__content.-pooka .p-character__left-catchcopy {
  top: 7.1rem;
  width: 10.4rem;
}
.p-character__content.-pooka .p-character__left-catchcopy img {
  aspect-ratio: 104/554;
}
@media screen and (max-width: 767px) {
  .p-character__content.-pooka .p-character__left-catchcopy {
    top: 3.9rem;
    width: 5.6004rem;
  }
}

.p-character__content.-pooka .p-character__left-bg::before {
  border: 1px solid #efb2c3;
}

.p-character__content.-pooka .p-character__profile-item.-job {
  display: none;
}

.p-character__content.-minoru .p-character__left-catchcopy {
  top: 2.3rem;
  width: 16.4rem;
}
.p-character__content.-minoru .p-character__left-catchcopy img {
  aspect-ratio: 164/770;
}
@media screen and (max-width: 767px) {
  .p-character__content.-minoru .p-character__left-catchcopy {
    top: 3.9rem;
    width: 8.8314rem;
  }
}

.p-character__content.-minoru .p-character__left-bg::before {
  border: 1px solid #dc7171;
}

.p-character__content.-nora .p-character__left-catchcopy {
  top: 7.1rem;
  width: 4.4rem;
}
.p-character__content.-nora .p-character__left-catchcopy img {
  aspect-ratio: 44/446;
}
@media screen and (max-width: 767px) {
  .p-character__content.-nora .p-character__left-catchcopy {
    top: 3.9rem;
    width: 2.3694rem;
  }
}

.p-character__content.-nora .p-character__left-bg::before {
  border: 1px solid #8ab1fa;
}

.p-character__content.-haruka .p-character__left-catchcopy {
  top: 7.1rem;
  width: 10.4rem;
}
.p-character__content.-haruka .p-character__left-catchcopy img {
  aspect-ratio: 104/410;
}
@media screen and (max-width: 767px) {
  .p-character__content.-haruka .p-character__left-catchcopy {
    top: 3.9rem;
    width: 5.6004rem;
  }
}

.p-character__content.-haruka .p-character__left-bg::before {
  border: 1px solid #efb2c3;
}

.p-character__content.-akiho .p-character__left-catchcopy {
  top: 7.1rem;
  width: 10.4rem;
}
.p-character__content.-akiho .p-character__left-catchcopy img {
  aspect-ratio: 104/518;
}
@media screen and (max-width: 767px) {
  .p-character__content.-akiho .p-character__left-catchcopy {
    top: 3.9rem;
    width: 5.6004rem;
  }
}

.p-character__content.-akiho .p-character__left-bg::before {
  border: 1px solid #efb2c3;
}

.p-character__content.-eri .p-character__left-catchcopy {
  top: 7.1rem;
  width: 4.4rem;
}
.p-character__content.-eri .p-character__left-catchcopy img {
  aspect-ratio: 44/302;
}
@media screen and (max-width: 767px) {
  .p-character__content.-eri .p-character__left-catchcopy {
    top: 3.9rem;
    width: 2.3694rem;
  }
}

.p-character__content.-eri .p-character__left-bg::before {
  border: 1px solid #efb2c3;
}

.p-character__content.-miyo .p-character__left-catchcopy {
  top: 7.1rem;
  width: 16.4rem;
}
.p-character__content.-miyo .p-character__left-catchcopy img {
  aspect-ratio: 164/626;
}
@media screen and (max-width: 767px) {
  .p-character__content.-miyo .p-character__left-catchcopy {
    top: 3.9rem;
    width: 8.8314rem;
  }
}

.p-character__content.-miyo .p-character__left-bg::before {
  border: 1px solid #efb2c3;
}

/* -------------------------------
p-event
------------------------------- */
.p-event {
  position: relative;
  padding-top: 9.3rem;
  background: linear-gradient(180deg, #fffdf8 0%, transparent 100%);
}
@media screen and (max-width: 767px) {
  .p-event {
    padding-top: 7.5rem;
  }
}

@media screen and (max-width: 767px) {
  .p-event__inner.l-inner {
    padding-inline: 23px;
  }
}

.p-event::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: #fffdf8;
}

.p-event::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10.2rem;
  height: 3rem;
  content: "";
  background: url("../images/kazeshiro/event/event-top-deco.avif") center/contain no-repeat;
  transform: translateX(-50%);
}

.p-event__inner.l-inner {
  max-width: 1179px;
}

.p-event__content {
  margin-top: 6.3rem;
}
@media screen and (max-width: 767px) {
  .p-event__content {
    margin-top: 4.4rem;
  }
}

.p-event__main-slider {
  position: relative;
}

.p-event__slider-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 103.7rem;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-event__slider-nav {
    display: none;
  }
}

.p-event__slider-prev,
.p-event__slider-next {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .p-event__slider-prev:hover,
  .p-event__slider-next:hover {
    opacity: 0.8;
  }
}
.p-event__slider-next {
  transform: rotate(180deg);
}

.p-event__swiper {
  width: 100%;
  max-width: 81.3rem;
  margin-inline: auto;
}

.p-event__image img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 813/457;
}

.p-event__thumb-list {
  margin-top: 4.8rem;
}
@media screen and (max-width: 767px) {
  .p-event__thumb-list {
    margin-top: 2.4rem;
  }
}

.p-event__thumb-list .swiper-slide {
  cursor: pointer;
}

.p-event__thumb-list img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 355/200;
}

.p-event__note {
  margin-top: 4.5rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #322e55;
  text-align: center;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-event__note {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 2;
  }
}

/* -------------------------------
p-footer
------------------------------- */
.p-footer {
  position: relative;
  z-index: 10;
}

.p-footer__heading {
  position: relative;
  height: 17.4rem;
}
@media screen and (max-width: 767px) {
  .p-footer__heading {
    height: 13.4rem;
  }
}

.p-footer__heading::before {
  position: absolute;
  top: 54.4%;
  left: 50%;
  width: 10.2rem;
  height: 3rem;
  content: "";
  background: url("../images/kazeshiro/footer/footer-top-deco.avif") center/cover no-repeat;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-footer__heading::before {
    top: 59%;
  }
}

.p-footer__body {
  padding-block: 8rem 4rem;
  background: url("../images/kazeshiro/footer/footer-bg.avif") center/cover no-repeat;
}
@media screen and (max-width: 767px) {
  .p-footer__body {
    padding-block: 4.8rem 3rem;
  }
}

.p-footer__inner.l-inner {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-footer__inner.l-inner {
    gap: 2.9rem;
    padding-inline: 25px;
  }
}

.p-footer__logo-top {
  width: 27.7rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-footer__logo-top {
    width: 100%;
    max-width: 40rem;
  }
}

.p-footer__logo-top img {
  object-fit: contain;
  aspect-ratio: 277/82;
}

.p-footer__account-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: #322e55;
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0.08em;
}

.p-footer__account-list {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-footer__account-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 2.3rem;
  }
}

.p-footer__account-item a {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #322e55;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #322e55;
  border-radius: 5rem;
  transition: background-color 0.3s, color 0.3s;
}
@media screen and (max-width: 767px) {
  .p-footer__account-item a {
    width: 100%;
    padding: 1.2rem 2.4rem;
    font-size: 1.2rem;
    text-align: center;
  }
}

.p-footer__contact a {
  display: inline-block;
  padding: 1.2rem 8rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-color: #322e55;
  border: 1px solid #322e55;
  border-radius: 5rem;
  transition: background-color 0.3s, color 0.3s;
}

.p-footer__logo-bottom-img {
  object-fit: contain;
  aspect-ratio: 280/80;
}

.p-footer__copyright {
  display: block;
  margin-top: 3.4rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  color: #322e55;
  text-align: center;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .p-footer__copyright {
    margin-top: 2.5rem;
  }
}

@media (any-hover: hover) {
  .p-footer__account-item a:hover {
    color: #fff;
    background-color: #322e55;
    opacity: 1;
  }
  .p-footer__contact a:hover {
    color: #322e55;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
}
/* -------------------------------
p-fv
------------------------------- */
.p-fv {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.p-fv__content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: inherit;
  --fv-blur: 0px;
  filter: blur(var(--fv-blur));
}

.p-fv__bg,
.p-fv__pooka,
.p-fv__catchcopy,
.p-fv__logo,
.p-fv__deco {
  position: absolute;
}

.p-fv__bg {
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: inherit;
}
@media screen and (max-width: 767px) {
  .p-fv__bg {
    position: absolute;
    top: calc(50% - 0rem);
    left: calc(50% + 2.7rem);
    width: 106.2rem;
    transform: translate(-50%, -50%);
  }
}

.p-fv__bg picture,
.p-fv__bg img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1920/1080;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-fv__bg picture,
  .p-fv__bg img {
    aspect-ratio: 1062/750;
  }
}

.p-fv__pooka {
  top: 47%;
  left: 56%;
  width: 77.96875%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-fv__pooka {
    top: calc(50% - 3.6rem);
    left: calc(50% - 7.1rem);
    width: 77.8rem;
    transform: translate(-50%, -50%);
  }
}

.p-fv__pooka img {
  aspect-ratio: 1497/1186;
  object-fit: contain;
}

.p-fv__text-wrap {
  position: relative;
  z-index: 7;
  width: 100%;
  height: 100%;
}

.p-fv__catchcopy {
  top: max(380px, 35.6%);
  left: 32.6%;
  width: 44.4270833333%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-fv__catchcopy {
    top: max(184px, 50% - 19.2rem);
    left: calc(50% - 14.6rem);
    width: 40.3rem;
    transform: translate(-50%, -50%);
  }
}

.p-fv__catchcopy img {
  aspect-ratio: 853/853;
  object-fit: contain;
}

.p-fv__logo {
  top: 77.5%;
  left: 50%;
  width: 50.5729166667%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-fv__logo {
    top: calc(50% + 28.7rem);
    left: 50%;
    width: 45rem;
    transform: translate(-50%, -50%);
  }
}

.p-fv__logo img {
  aspect-ratio: 971/379;
  object-fit: contain;
}

.p-fv__deco {
  top: calc(50% - 0.3rem);
  left: calc(50% + 11.6rem);
  z-index: 10;
  width: 176.1rem;
  height: fit-content;
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-fv__deco {
    top: calc(50% + 3.1rem);
    left: calc(50% - 7.1rem);
    width: 91.6rem;
    transform: translate(-50%, -50%);
  }
}

.p-fv__deco img {
  display: block;
  aspect-ratio: 1761/1221;
  pointer-events: none;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-fv__deco img {
    aspect-ratio: 916/636;
    object-fit: contain;
  }
}

/* -------------------------------
fvアニメーション設定
------------------------------- */
.is-loaded .p-fv__pooka {
  animation: fade-in 0.8s 0.4s ease-out forwards, floating 3s 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@media screen and (max-width: 767px) {
  .is-loaded .p-fv__pooka {
    animation: fade-in 0.8s 0.4s ease-out forwards, floating-sp 5.5s 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
}

.is-loaded .p-fv__catchcopy {
  animation: fade-in 0.6s 0.8s ease-out forwards;
}

.is-loaded .p-fv__logo {
  animation: fade-in 0.6s 1.4s ease-out forwards;
}

.is-loaded .p-fv__deco {
  animation: fade-in 0.6s 0.4s ease-out forwards;
}

@keyframes floating {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% + 2rem));
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes floating-sp {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% + 1.6rem));
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* -------------------------------
p-header
------------------------------- */
.p-header__inner {
  padding-inline: 1.6rem;
  padding-top: 1.6rem;
}

.p-header__hamburger {
  position: relative;
  z-index: 910;
  display: block;
  height: inherit;
  padding: 0;
  margin: 0;
  margin-left: auto;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border: none;
  transition: 0.3s;
}

.p-header__hamburger-bg {
  width: 8.6rem;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger-bg {
    width: 6.6rem;
  }
}

.p-header__hamburger-bg img {
  aspect-ratio: 86/100;
  filter: drop-shadow(0 0 0.8rem rgba(255, 255, 255, 0.5));
}

.p-header__hamburger-body {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-header__hamburger-body {
    top: 52%;
  }
}

.p-header__hamburger-line {
  position: relative;
  width: 4rem;
  height: 1.4rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger-line {
    width: 3.4rem;
    height: 1rem;
  }
}

.p-header__hamburger-line span {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
  transition: 0.3s ease-in-out;
}

.p-header__hamburger-line span:nth-of-type(1) {
  top: 0;
}

.p-header__hamburger-line span:nth-of-type(2) {
  bottom: 0;
}

.p-header__hamburger.is-open .p-header__hamburger-line span:nth-of-type(1) {
  top: 0.6rem;
  transform: translateX(-50%) rotate(15deg);
}
@media screen and (max-width: 767px) {
  .p-header__hamburger.is-open .p-header__hamburger-line span:nth-of-type(1) {
    top: 0.4rem;
  }
}

.p-header__hamburger.is-open .p-header__hamburger-line span:nth-of-type(2) {
  bottom: 0.7rem;
  transform: translateX(-50%) rotate(-15deg);
}
@media screen and (max-width: 767px) {
  .p-header__hamburger.is-open .p-header__hamburger-line span:nth-of-type(2) {
    bottom: 0.4rem;
  }
}

.p-header__hamburger-body p {
  margin-top: 1.1rem;
  font-family: "El Messiri", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger-body p {
    margin-top: 0.9rem;
    font-size: 1.2rem;
  }
}

.p-header__drawer {
  position: absolute;
  top: 0;
  right: -49rem;
  z-index: 900;
  box-sizing: border-box;
  visibility: hidden;
  width: 100%;
  max-width: 48rem;
  height: 100dvh;
  padding-block: 12rem;
  overflow-y: scroll;
  scrollbar-width: none;
  background: linear-gradient(154deg, rgba(59, 112, 186, 0.9) 0%, rgba(55, 72, 133, 0.9) 100%);
  border: 1px solid #a8cff0;
  opacity: 0;
  transition: 0.4s ease-in-out;
}
@media screen and (max-width: 767px) {
  .p-header__drawer {
    padding-block: 6.4rem 10.6rem;
  }
}

.p-header__drawer.is-open {
  right: 0;
  visibility: visible;
  opacity: 1;
}

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

.p-header__drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .p-header__drawer-logo {
    max-width: 36.6rem;
  }
}

.p-header__drawer-logo img {
  aspect-ratio: 478/187;
}

.p-header__drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: fit-content;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-list {
    gap: 0;
  }
}

.p-header__drawer-item {
  position: relative;
  width: fit-content;
}
.p-header__drawer-item::before {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 3.2rem;
  height: 2.8rem;
  pointer-events: none;
  content: "";
  background: url("../images/kazeshiro/common/icon-snow.svg") center/contain no-repeat;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.3s ease-out;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-item::before {
    left: 1.6rem;
  }
}

.p-header__drawer-item a {
  display: block;
  padding: 2rem;
  transition: transform 0.3s ease-out;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-item a {
    padding: 1.6rem;
  }
}

@media (any-hover: hover) {
  .p-header__drawer-item a:hover {
    opacity: 1;
  }
}
.p-header__drawer-text-box {
  color: #fff;
  transition: 0.3s ease-out;
}

.p-header__drawer-text-box span {
  display: block;
}

.p-header__drawer-text.-en {
  font-family: "El Messiri", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.p-header__drawer-text.-ja {
  margin-top: 1.2rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

@media (any-hover: hover) {
  .p-header__drawer-item:hover::before {
    opacity: 1;
  }
  .p-header__drawer-item:hover a {
    transform: translateX(4.8rem);
  }
}
/* -------------------------------
p-info
------------------------------- */
.p-info {
  position: relative;
  background-color: #fffdf8;
}

.p-info__bg-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --clip-top: 100%;
  --clip-bottom: 0%;
  clip-path: inset(var(--clip-top) 0% var(--clip-bottom) 0%);
}
@media screen and (max-width: 767px) {
  .p-info__bg-wrap {
    position: absolute;
    clip-path: none;
  }
}

@keyframes info-clip-in {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.p-info__bg-wrap::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.4);
}

.p-info__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
}

.p-info__bg.is-active {
  opacity: 1;
}

.p-info__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-info__inner {
  position: relative;
  z-index: 10;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .p-info__inner {
    max-width: 40rem;
  }
}

.p-info__inner::before {
  position: absolute;
  top: calc(50% + 56.3rem);
  left: calc(50% - 52.2rem);
  z-index: 10;
  width: 74.5rem;
  height: 35.8rem;
  content: "";
  background: url("../images/kazeshiro/info/info-deco.avif") center/contain no-repeat;
  transform: translate(-50%, -50%);
}

.p-info__content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 8.7rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.p-info__logo {
  width: 72.9rem;
}
@media screen and (max-width: 767px) {
  .p-info__logo {
    width: 36.6rem;
  }
}

.p-info__logo img {
  aspect-ratio: 729/206;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-info__logo img {
    aspect-ratio: 366/104;
  }
}

.p-info__release {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-top: 1.8rem;
  margin-inline: auto;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-info__release {
    margin-top: 1.2rem;
  }
}

.p-info__release-date {
  width: fit-content;
  padding: 0.2rem 1.2rem 0.6rem;
  margin-inline: auto;
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(90deg, #9eb8de 0%, #e3b2c0 100%);
}
@media screen and (max-width: 767px) {
  .p-info__release-date {
    padding: 0 1.35rem 0.5rem;
  }
}

.p-info__release-unit {
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-info__release-unit {
    font-size: 2rem;
  }
}

.p-info__release-suffix {
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  .p-info__release-suffix {
    font-size: 2.4rem;
  }
}

.p-info__release-num {
  font-size: 3.6rem;
}

.p-info__release-place {
  padding: 1.4rem 4.8rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-info__release-place {
    padding: 0.8rem 2.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.p-info__spec-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem;
  margin-top: 3.3rem;
}
@media screen and (max-width: 767px) {
  .p-info__spec-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 2rem;
    margin-top: 1.8rem;
  }
}

.p-info__spec-item {
  width: 20rem;
  line-height: 1;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-info__spec-item {
    width: 100%;
    max-width: 14rem;
  }
}

.p-info__spec-item span {
  display: block;
}

.p-info__spec-label {
  padding: 0.4rem 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  background-color: #9eb8de;
}
@media screen and (max-width: 767px) {
  .p-info__spec-label {
    padding: 0.4rem 1rem;
    font-size: 1.2rem;
  }
}

.p-info__spec-value {
  margin-top: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-info__spec-value {
    margin-top: 0.8rem;
    font-size: 1.4rem;
  }
}

.p-info__credit {
  display: flex;
  gap: 6.4rem;
  justify-content: center;
  margin-top: 5.4rem;
}
@media screen and (max-width: 767px) {
  .p-info__credit {
    flex-direction: column;
    gap: 3.2rem;
    margin-top: 3.2rem;
  }
}

.p-info__credit-heading {
  width: fit-content;
  padding: 0.5rem 2.4rem;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: #322e55;
  background-color: #fffdf8;
}
@media screen and (max-width: 767px) {
  .p-info__credit-heading {
    font-size: 1.6rem;
  }
}

.p-info__staff-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-info__staff-list {
    gap: 1.2rem;
    margin-top: 1.6rem;
  }
}

.p-info__staff-item {
  display: flex;
  gap: 2.4rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-info__staff-item {
    gap: 1.2rem;
  }
}

.p-info__staff-role {
  width: fit-content;
  padding: 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background-color: #E3B2C0;
}
@media screen and (max-width: 767px) {
  .p-info__staff-role {
    padding: 0.3rem 0.4rem;
    font-size: 1.2rem;
  }
}

.p-info__staff-name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.24em;
}
@media screen and (max-width: 767px) {
  .p-info__staff-name {
    font-size: 1.4rem;
  }
}

.p-info__theme-title {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.24em;
}
@media screen and (max-width: 767px) {
  .p-info__theme-title {
    font-size: 2rem;
  }
}

.p-info__theme-produced {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-info__theme-produced {
    font-size: 1.2rem;
  }
}

/* -------------------------------
p-intro
------------------------------- */
.p-intro {
  position: relative;
  overflow: clip;
  --parallax-big-snow-y: 0px;
}

.p-intro__movie {
  position: relative;
  z-index: 39;
  padding-block: 16rem;
}
@media screen and (max-width: 767px) {
  .p-intro__movie {
    padding-block: 6.4rem;
    padding-inline: 1.2rem;
  }
}

.p-intro__movie::after {
  position: absolute;
  top: 0.2rem;
  right: 14.5rem;
  z-index: -1;
  width: 42.8rem;
  height: 49.5rem;
  content: "";
  background: url("../images/kazeshiro/intro/intro-top-deco2.avif") center/contain no-repeat;
  transform: translateY(var(--parallax-big-snow-y)) rotate(30deg);
}
@media screen and (max-width: 767px) {
  .p-intro__movie::after {
    top: 0.9rem;
    right: 1.8rem;
    width: 9.8rem;
    height: 11.3rem;
    transform: rotate(30deg);
  }
}

.p-intro__movie-thumbnail {
  position: relative;
  width: 100%;
  max-width: 81.875%;
  margin-inline: auto;
  overflow: hidden;
  cursor: pointer;
  border-radius: 70rem;
}
@media screen and (max-width: 767px) {
  .p-intro__movie-thumbnail {
    max-width: 100%;
  }
}

.p-intro__movie-thumbnail::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 21rem;
  height: 23rem;
  content: "";
  background: url("../images/kazeshiro/intro/movie-play-btn.avif") center/contain no-repeat;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out;
}
@media screen and (max-width: 767px) {
  .p-intro__movie-thumbnail::before {
    width: 8.7rem;
    height: 10.2rem;
    background: url("../images/kazeshiro/intro/movie-play-btn_sp.avif") center/contain no-repeat;
  }
}

@media (any-hover: hover) {
  .p-intro__movie-thumbnail:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.p-intro__content {
  position: relative;
  z-index: 35;
  padding-block: 48.4rem 24.5rem;
  margin-top: -50rem;
  pointer-events: none;
  background: url("../images/kazeshiro/intro/intro-bottom-bg.avif") center/cover no-repeat;
}
@media screen and (max-width: 767px) {
  .p-intro__content {
    padding-block: 20rem 4.4rem;
    margin-top: -21.6rem;
  }
}

.p-intro__content::before {
  position: absolute;
  top: -8.6rem;
  left: 5.9rem;
  width: 53.1rem;
  height: 61.2rem;
  pointer-events: none;
  content: "";
  background: url("../images/kazeshiro/intro/intro-top-deco1.avif") center/contain no-repeat;
  transform: translateY(var(--parallax-big-snow-y)) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .p-intro__content::before {
    top: 7.3rem;
    left: 0.1rem;
    width: 10.6rem;
    height: 12.2rem;
  }
}

.p-intro__inner.l-inner {
  position: relative;
  z-index: 10;
}

.p-intro__overview-text {
  width: fit-content;
  margin-inline: auto;
  color: #fff;
  text-align: center;
  filter: drop-shadow(0 0 2.4rem rgba(55, 72, 133, 0.5));
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text {
    position: relative;
    z-index: 40;
  }
}

.p-intro__overview-text span {
  display: inline-block;
}

.p-intro__overview-text-item1 {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.25em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item1 {
    font-size: 3.2rem;
    line-height: 1.5;
    letter-spacing: 0.26em;
  }
}

.p-intro__overview-text-item1 span {
  font-size: 3.2rem;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item1 span {
    font-weight: 700;
  }
}

.p-intro__overview-text-item2 {
  margin-top: 5.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item2 {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: -0.02em;
    text-wrap: nowrap;
  }
}

.p-intro__overview-text-item3,
.p-intro__overview-text-item4,
.p-intro__overview-text-item6 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item3,
  .p-intro__overview-text-item4,
  .p-intro__overview-text-item6 {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0;
  }
}

.p-intro__overview-text-item3 {
  margin-top: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item3 {
    margin-top: 0.7rem;
  }
}

.p-intro__overview-text-item3 span {
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item3 span {
    font-size: 1.6rem;
  }
}

.p-intro__overview-text-item4 {
  margin-top: 2.3rem;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item4 {
    margin-top: 1.2rem;
  }
}

.p-intro__overview-text-item5 {
  margin-top: 1.3rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item5 {
    margin-top: 0.8rem;
    font-size: 2rem;
  }
}

.p-intro__overview-text-item6 {
  margin-top: 2.9rem;
  line-height: 2rem;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item6 {
    margin-top: 1.6rem;
  }
}

.p-intro__overview-text-item6 span {
  position: relative;
  padding-bottom: 0.3rem;
  margin-inline: 0.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: -0.15em;
  color: #ffa2c9;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item6 span {
    margin-inline: 0.5rem;
    font-size: 2.4rem;
  }
}

.p-intro__overview-text-item6 span::before {
  position: absolute;
  top: calc(50% + 0.1rem);
  left: 50%;
  z-index: -1;
  width: calc(100% + 0.4rem);
  height: 100%;
  content: "";
  background-color: #fff;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item6 span::before {
    width: calc(100% + 0.4rem);
    height: calc(100% + 0.2rem);
  }
}

.p-intro__overview-text-item7 {
  margin-top: 3.8rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item7 {
    margin-top: 2.3rem;
    font-size: 1.4rem;
  }
}

.p-intro__overview-text-item7 span {
  width: 50.6rem;
  margin-right: -0.2rem;
  transform: translateY(5px);
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item7 span {
    width: 36.3rem;
    margin-right: 0;
  }
}

.p-intro__overview-text-item7 span img {
  aspect-ratio: 506/53;
}

.p-intro__overview-text-item8 {
  width: fit-content;
  margin-inline: auto;
  margin-top: 5.3rem;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 61%, rgb(255, 162, 201) 61%, rgb(255, 162, 201) 82%, rgba(255, 255, 255, 0) 82%);
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item8 {
    margin-top: 2.9rem;
    font-size: 3.2rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 61%, rgb(255, 162, 201) 61%, rgb(255, 162, 201) 92%, rgba(255, 255, 255, 0) 92%);
  }
}

.p-intro__overview-text-item8.-sp-2 {
  margin-top: 0;
  letter-spacing: 0.1em;
}

.p-intro__overview-text-item8 span {
  letter-spacing: 0.16em;
}

.p-intro__overview-text-item9 {
  margin-top: 1.3rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-intro__overview-text-item9 {
    margin-top: 1rem;
    font-size: 2rem;
    line-height: 1.8;
  }
}

/* -------------------------------
p-story
------------------------------- */
.p-story {
  position: relative;
  padding-block: 12.6rem 20.4rem;
  margin-top: -16.6rem;
  overflow: clip;
  background: url("../images/kazeshiro/story/story-bg.avif") center/cover no-repeat;
  --parallax-deco-after-y: 0px;
}
@media screen and (max-width: 767px) {
  .p-story {
    padding-block: 8.6rem 11rem;
    margin-top: -2rem;
    scroll-margin-top: 10rem;
    background-size: auto 100%;
  }
}

@media screen and (max-width: 767px) {
  .p-story::before {
    position: absolute;
    top: -0.2rem;
    left: calc(50% - 15.4rem);
    width: 12.9rem;
    height: 15rem;
    content: "";
    background: url("../images/kazeshiro/intro/intro-top-deco1.avif") center/contain no-repeat;
    filter: blur(0.1rem);
    transform: translateX(-50%) rotate(90deg);
  }
}

.p-story::after {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 10.2rem;
  height: 3rem;
  content: "";
  background: url("../images/kazeshiro/story/story-top-deco.avif") center/contain no-repeat;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-story::after {
    top: 2rem;
    width: 6.8rem;
    height: 2rem;
  }
}

.p-story__title {
  position: absolute;
  top: 3%;
  left: 28.8%;
  z-index: 10;
  width: 86.1rem;
  height: 22.8rem;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-story__title {
    top: 3%;
    left: 50%;
    width: 32.9rem;
    aspect-ratio: 329/92;
    transform: translateX(-50%);
  }
}

.p-story__synopsis {
  position: relative;
}

.p-story__synopsis::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 110rem;
  height: 134.5rem;
  content: "";
  background: url("../images/kazeshiro/story/story-bg-blur.avif") center/contain no-repeat;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-story__synopsis::before {
    top: 55%;
    width: 52.6rem;
    height: 71.4rem;
    background-image: url("../images/kazeshiro/story/story-bg-blur_sp.avif");
  }
}

@media screen and (max-width: 767px) {
  .p-story__synopsis::after {
    position: absolute;
    right: calc(50% - 23.1rem);
    bottom: -8.1rem;
    width: 20.5rem;
    height: 23.6rem;
    content: "";
    background: url("../images/kazeshiro/intro/intro-top-deco1.avif") center/contain no-repeat;
    filter: blur(0.3rem);
    transform: rotate(90deg);
  }
}

.p-story__inner.l-inner {
  position: relative;
  --parallax-big-snow-y: 0px;
}

.p-story__inner::before,
.p-story__inner::after {
  position: absolute;
  content: "";
  background: url("../images/kazeshiro/intro/intro-top-deco1.avif") center/contain no-repeat;
  transform: translate(-50%, calc(-50% + var(--parallax-big-snow-y))) rotate(90deg);
}

.p-story__inner::before {
  top: calc(50% - 14.3rem);
  left: calc(50% - 60rem);
  width: 26.1rem;
  height: 30.2rem;
  filter: blur(0.2rem);
}

.p-story__inner::after {
  top: calc(50% + 26.3rem);
  left: calc(50% + 60rem);
  width: 43rem;
  height: 49.6rem;
  filter: blur(0.6rem);
}

.p-story__synopsis-text {
  position: relative;
  z-index: 10;
  width: fit-content;
  margin-inline: auto;
  font-weight: 700;
  color: #322e55;
  text-align: center;
}

.p-story__synopsis-text ruby,
.p-story__synopsis-text span {
  color: #665db1;
}

.p-story__synopsis-text-item1,
.p-story__synopsis-text-item2,
.p-story__synopsis-text-item3,
.p-story__synopsis-text-item4,
.p-story__synopsis-text-item5,
.p-story__synopsis-text-item6,
.p-story__synopsis-text-item7 {
  font-size: 2rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item1,
  .p-story__synopsis-text-item2,
  .p-story__synopsis-text-item3,
  .p-story__synopsis-text-item4,
  .p-story__synopsis-text-item5,
  .p-story__synopsis-text-item6,
  .p-story__synopsis-text-item7 {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}

.p-story__synopsis-text-item1 ruby,
.p-story__synopsis-text-item2 span,
.p-story__synopsis-text-item4 span,
.p-story__synopsis-text-item6 span {
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item1 ruby,
  .p-story__synopsis-text-item2 span,
  .p-story__synopsis-text-item4 span,
  .p-story__synopsis-text-item6 span {
    font-size: 2rem;
  }
}

.p-story__synopsis-text-item1 rt {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item1 rt {
    font-size: 0.6rem;
  }
}

.p-story__synopsis-text-item2 {
  margin-top: 4.4rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item2 {
    margin-top: 1.8rem;
  }
}

.p-story__synopsis-text-item3 {
  margin-top: 4.1rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item3 {
    margin-top: 1.6rem;
  }
}

.p-story__synopsis-text-item4 {
  margin-top: 3.8rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item4 {
    margin-top: 1.5rem;
  }
}

.p-story__synopsis-text-item5 {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item5 {
    margin-top: 1.5rem;
  }
}

.p-story__synopsis-text-item6 {
  margin-top: 4.1rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item6 {
    margin-top: 1.8rem;
  }
}

.p-story__synopsis-text-item7 {
  margin-top: 4.2rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item7 {
    margin-top: 1.6rem;
  }
}

.p-story__synopsis-text-item8 {
  margin-top: 4.6rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  line-height: 2.1;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item8 {
    margin-top: 2.4rem;
    font-size: 2.4rem;
    line-height: 1.6;
  }
}

.p-story__synopsis-text-item8 span {
  font-size: 4rem;
}
@media screen and (max-width: 767px) {
  .p-story__synopsis-text-item8 span {
    font-size: 3.2rem;
  }
}

/* -------------------------------
u-pc
------------------------------- */
@media screen and (max-width: 767px) {
  .u-pc {
    display: none;
  }
}

/* -------------------------------
u-sp
------------------------------- */
.u-sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp {
    display: block !important;
  }
}

/* -------------------------------
u-white-bg
------------------------------- */
.u-white-bg {
  position: relative;
  z-index: 5;
}

.u-white-bg::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-color: rgba(255, 253, 248, 0.9);
  opacity: var(--white-bg-opacity, 1);
  mask-image: linear-gradient(to bottom, transparent 0, black 40rem);
}

.u-white-bg.-no-mask::before {
  mask-image: none;
}

.u-white-bg.-no-alpha {
  background-color: #fffdf8;
}

.u-white-bg.-no-alpha::before {
  background-color: #fffdf8;
}