@charset "UTF-8";
@media screen and (min-width: 961px) {
  .l-header {
    display: none;
  }
}

@media screen and (min-width: 961px) {
  .l-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s var(--ease_out);
  }
  .is-scroll .l-menu {
    opacity: 1;
    pointer-events: auto;
  }
  .is-menu-open .l-menu {
    opacity: 1;
    pointer-events: auto;
  }
}

.p-op {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  opacity: 1;
}
.is-op .p-op {
  opacity: 0;
  transition: opacity 2s var(--ease_inout) 2.6s;
}
.is-load .p-op {
  pointer-events: none;
}
.p-op__logo {
  width: 50rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 960px) {
  .p-op__logo {
    width: 25rem;
  }
}
.p-op__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 100%) no-repeat 200% 50%/300% 100%;
  mask: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 100%) no-repeat 200% 50%/300% 100%;
}
.is-op .p-op__logo-img {
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
  transition: -webkit-mask-position 4s var(--ease_out);
  transition: mask-position 4s var(--ease_out);
  transition: mask-position 4s var(--ease_out), -webkit-mask-position 4s var(--ease_out);
}
.is-op .p-op__logo-img.--logo2 {
  transition: -webkit-mask-position 5s var(--ease_out) 0.7s;
  transition: mask-position 5s var(--ease_out) 0.7s;
  transition: mask-position 5s var(--ease_out) 0.7s, -webkit-mask-position 5s var(--ease_out) 0.7s;
}
.p-op__logo-img:first-child {
  position: relative;
}
.p-op__logo-line {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.p-op__logo-line svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
  stroke: red;
  stroke-width: 1px;
}
.p-op__logo-particle {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}
.is-op .p-op__logo-particle {
  opacity: 0;
  transition: opacity 1s var(--ease_out) 2s;
}
.p-op__logo-particle canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.is-op .p-op__logo-particle canvas {
  opacity: 1;
  transition: opacity 2s var(--ease_inout) 0.6s;
}

.p-hero {
  display: block;
  position: relative;
  z-index: 0;
  padding-bottom: 10rem;
}
@media screen and (max-width: 960px) {
  .p-hero {
    padding-bottom: 15rem;
  }
}
@keyframes kv_marquee {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 221rem;
  }
}
.p-hero::before {
  content: "";
  width: 100%;
  height: 11rem;
  display: block;
  position: absolute;
  bottom: 26rem;
  left: 0;
  background: url("../img/bg_txt_blk.png") repeat-x 0 50%/221rem auto;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-hero::before {
    bottom: 6rem;
    height: 6rem;
    background-size: 110.5rem auto;
  }
}
.is-load .p-hero::before {
  animation: kv_marquee 60s linear infinite reverse;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content-visibility: auto;
}
@media screen and (max-width: 960px) {
  .is-load .p-hero::before {
    animation-duration: 120s;
  }
}
.p-hero::after {
  content: "";
  width: 100%;
  height: 11rem;
  display: block;
  position: absolute;
  bottom: 14rem;
  left: 0;
  background: url("../img/bg_txt_red.png") repeat-x 0 50%/221rem auto;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-hero::after {
    bottom: 0;
    height: 6rem;
    background-size: 110.5rem auto;
  }
}
.is-load .p-hero::after {
  animation: kv_marquee 60s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content-visibility: auto;
}
@media screen and (max-width: 960px) {
  .is-load .p-hero::after {
    animation-duration: 120s;
  }
}
.p-hero__container {
  width: 100%;
  max-width: 140rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 961px) {
  .p-hero__container {
    display: grid;
    grid-template-columns: 1fr 80rem;
  }
}
.p-hero__header {
  min-width: 0;
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-hero__header {
    display: none;
  }
}
.p-hero__kv {
  display: block;
  position: relative;
  overflow: hidden;
}
.p-hero__kv-img {
  display: block;
  position: relative;
  opacity: 0;
  transform: scale(1.1);
}
.is-load .p-hero__kv-img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s var(--ease_inout), transform 2s var(--ease_out);
}
.p-hero__inner {
  min-width: 0;
  display: block;
  position: relative;
}
.p-hero__content {
  width: 90%;
  max-width: 46rem;
  display: block;
  position: relative;
  padding: 11rem 0;
  margin: 0 auto;
  z-index: 0;
}
.p-hero__brand {
  width: 44rem;
  display: block;
  position: relative;
  margin: 0 0 6.6rem;
}
.p-hero__brand-img {
  display: block;
  position: relative;
}
.p-hero__nav {
  width: 80%;
  max-width: 34rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-hero__official {
  width: 80%;
  max-width: 34rem;
  display: block;
  position: relative;
  margin: 5.8rem auto 0;
}
.p-hero__scroll {
  width: 3.2rem;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.p-hero_nav {
  display: block;
  position: relative;
}
.p-hero_nav__list {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.p-hero_nav__list-item {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(1rem);
}
.is-load .p-hero_nav__list-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease_out), transform 1.5s var(--ease_out);
}
.is-load .p-hero_nav__list-item:nth-child(1) {
  transition-delay: 0.2s;
}
.is-load .p-hero_nav__list-item:nth-child(2) {
  transition-delay: 0.25s;
}
.is-load .p-hero_nav__list-item:nth-child(3) {
  transition-delay: 0.3s;
}
.is-load .p-hero_nav__list-item:nth-child(4) {
  transition-delay: 0.35s;
}
.is-load .p-hero_nav__list-item:nth-child(5) {
  transition-delay: 0.4s;
}
.is-load .p-hero_nav__list-item:nth-child(6) {
  transition-delay: 0.45s;
}
.is-load .p-hero_nav__list-item:nth-child(7) {
  transition-delay: 0.5s;
}
.is-load .p-hero_nav__list-item:nth-child(8) {
  transition-delay: 0.55s;
}
.is-load .p-hero_nav__list-item:nth-child(9) {
  transition-delay: 0.6s;
}
.is-load .p-hero_nav__list-item:nth-child(10) {
  transition-delay: 0.65s;
}
.p-hero_nav__link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  font-size: 4.6rem;
  line-height: 1.1;
  letter-spacing: -0.1rem;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-weight: 800;
  overflow: hidden;
}
.p-hero_nav__link::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  color: var(--color-white);
  -webkit-text-stroke: 0.5px var(--color-text);
}
.p-hero_nav__list-item:nth-child(even) .p-hero_nav__link::after {
  -webkit-text-stroke: 0.5px var(--color-red);
}
@media (hover: hover) and (pointer: fine) {
  .p-hero_nav__link::after {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-hero_nav__link:hover::after {
    transform: translateY(0);
    transition-delay: 0.05s;
  }
}
.p-hero_nav__link-text {
  display: block;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .p-hero_nav__link-text {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-hero_nav__link:hover .p-hero_nav__link-text {
    transform: translateY(100%);
    transition-delay: 0.05s;
  }
}

.p-hero_official {
  display: block;
  position: relative;
}
.p-hero_official__list {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.p-hero_official__list-item {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(1rem);
}
.is-load .p-hero_official__list-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease_out), transform 1.5s var(--ease_out);
}
.is-load .p-hero_official__list-item:nth-child(1) {
  transition-delay: 0.6s;
}
.is-load .p-hero_official__list-item:nth-child(2) {
  transition-delay: 0.65s;
}
.is-load .p-hero_official__list-item:nth-child(3) {
  transition-delay: 0.7s;
}
.is-load .p-hero_official__list-item:nth-child(4) {
  transition-delay: 0.75s;
}
.is-load .p-hero_official__list-item:nth-child(5) {
  transition-delay: 0.8s;
}
.is-load .p-hero_official__list-item:nth-child(6) {
  transition-delay: 0.85s;
}
.is-load .p-hero_official__list-item:nth-child(7) {
  transition-delay: 0.9s;
}
.is-load .p-hero_official__list-item:nth-child(8) {
  transition-delay: 0.95s;
}
.is-load .p-hero_official__list-item:nth-child(9) {
  transition-delay: 1s;
}
.is-load .p-hero_official__list-item:nth-child(10) {
  transition-delay: 1.05s;
}
.p-hero_official__link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: 0;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-weight: 800;
  overflow: hidden;
}
.p-hero_official__link::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  color: var(--color-white);
  -webkit-text-stroke: 0.5px var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
  .p-hero_official__link::after {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-hero_official__link:hover::after {
    transform: translateY(0);
    transition-delay: 0.05s;
  }
}
.p-hero_official__link-text {
  display: block;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .p-hero_official__link-text {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-hero_official__link:hover .p-hero_official__link-text {
    transform: translateY(100%);
    transition-delay: 0.05s;
  }
}

.p-hero_scroll {
  height: var(--svh);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}
.p-hero_scroll__text {
  display: block;
  position: relative;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  writing-mode: vertical-lr;
  margin-left: auto;
}
.p-hero_scroll__bar {
  width: 1px;
  height: 4rem;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: 0.5rem;
  transform: translate(-50%, 0);
  z-index: 1;
  background: var(--color-gray);
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-hero_scroll__bar {
    height: 6rem;
  }
}
.p-hero_scroll__bar-line {
  width: 100%;
  height: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-black);
}
.is-load .p-hero_scroll__bar-line {
  animation: scroll_bar 4s var(--ease_inout) infinite;
}
@keyframes scroll_bar {
  0% {
    top: 0;
    height: 0;
  }
  50% {
    top: 0;
    height: 100%;
  }
  51% {
    top: 0;
    height: 100%;
  }
  100% {
    top: 100%;
    height: 100%;
  }
}

.p-bnr {
  display: block;
  position: relative;
  background-color: var(--color-pink-light);
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-bnr {
    margin-top: 3rem;
  }
}
@keyframes bnr_marquee {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 102.35rem;
  }
}
.p-bnr::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/bnr_bg_repeat.png") repeat-x 50% 50%/102.35rem auto;
  animation: bnr_marquee 100s linear infinite;
}
@media screen and (max-width: 960px) {
  .p-bnr::before {
    background-size: 51.175rem auto;
    animation-duration: 200s;
  }
}
.p-bnr__container {
  width: 86.5%;
  max-width: 102.5rem;
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 4.5rem 0;
}
@media screen and (max-width: 960px) {
  .p-bnr__container {
    padding: 4.2rem 0 4rem;
  }
}
.p-bnr__inner {
  display: block;
  position: relative;
}
.p-bnr__list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin: 0 auto;
}
.p-bnr__list-item {
  flex-shrink: 0;
  display: block;
  position: relative;
}
.p-bnr__link {
  display: block;
  position: relative;
  overflow: hidden;
}
.p-bnr__link::before {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-red);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .p-bnr__link::before {
    content: "";
    transition: opacity 0.7s var(--ease_out);
  }
  .p-bnr__link:hover::before {
    opacity: 0.2;
  }
}

.p-movie {
  display: block;
  position: relative;
  margin-top: 10.1rem;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 960px) {
  .p-movie {
    margin-top: 3.4rem;
  }
}
.p-movie__container {
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-movie__inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 15rem 0 7rem;
}
@media screen and (max-width: 960px) {
  .p-movie__inner {
    padding: 8.5rem 0 8.2rem;
  }
}
.p-movie__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content-visibility: auto;
}
@media screen and (min-width: 961px) {
  .p-movie__bg {
    -webkit-mask: url("../img/heart_b.svg") no-repeat 50% 25%/0% auto;
    mask: url("../img/heart_b.svg") no-repeat 50% 25%/0% auto;
    will-change: mask-size;
  }
}
.p-movie__bg::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.p-movie__player {
  width: 100%;
  min-width: 177.77vh;
  height: 100%;
  min-height: 56.25vw;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-movie__player iframe {
  width: 100%;
  height: 200%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-movie__cover {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: opacity 0.8s var(--ease_out);
}
.is-play .p-movie__cover {
  opacity: 0;
}
.p-movie__cover-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0s linear 0.8s;
  z-index: 0;
  transform: scale(1.1);
  filter: blur(1rem);
}
.p-movie__cover-img.is-current {
  opacity: 1;
  transition: opacity 0.8s var(--ease_out);
  z-index: 1;
}
.p-movie__cover-img img, .p-movie__cover-img source {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.p-movie__slide {
  width: 100%;
  max-width: 140rem;
  display: block;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(5%);
}
.p-movie__slide.is-scroll-active {
  opacity: 1;
  transform: translateX(0%);
  transition: opacity 0.5s var(--ease_out), transform 0.8s var(--ease_out);
}
.p-movie__list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin: 0 auto;
}
.p-movie__list-item {
  flex-shrink: 0;
  width: 100%;
  display: block;
  position: relative;
}
.p-movie__thumb {
  width: 100%;
  display: block;
  position: relative;
}
.p-movie__thumb-img {
  width: 100%;
  padding-top: 56.25%;
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 0;
}
.p-movie__thumb-img::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .p-movie__thumb-img::before {
    transition: opacity 0.6s var(--ease_out);
  }
  .p-movie__thumb:hover .p-movie__thumb-img::before {
    opacity: 0;
  }
}
.p-movie__thumb-img img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.p-movie__thumb-icon {
  width: 12rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-movie__thumb-icon {
    width: 7.5rem;
  }
}
.p-movie__pager {
  width: 60%;
  max-width: 71rem;
  min-height: 6.8rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  position: relative;
  margin: 2.2rem auto 0;
}
@media screen and (max-width: 960px) {
  .p-movie__pager {
    display: none;
  }
}
.p-movie__pager-nav {
  width: 6rem;
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.p-movie__pager-nav::before {
  width: 200%;
  height: 200%;
  display: block;
  position: absolute;
  top: 55%;
  left: 50%;
  background: url("../img/heart_r.svg") no-repeat center/contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}
@media (hover: hover) and (pointer: fine) {
  .p-movie__pager-nav::before {
    content: "";
    transition: opacity 0.3s var(--ease_inout), transform 0s linear 0.3s;
  }
  .p-movie__pager-nav:hover::before {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.2s var(--ease_inout), transform 0.6s var(--ease_out);
  }
}

.p-headline {
  display: block;
  position: relative;
  padding: 10rem 0;
}
@media screen and (max-width: 960px) {
  .p-headline {
    padding: 9.5rem 0 8.2rem;
  }
}
.p-headline__container {
  width: 86.5%;
  max-width: 100rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-headline__header {
  display: block;
  position: relative;
  margin-bottom: 4.2rem;
}
@media screen and (max-width: 960px) {
  .p-headline__header {
    margin-bottom: 1.4rem;
  }
}
.p-headline__title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  opacity: 0;
}
.is-active .p-headline__title {
  opacity: 1;
  transition: opacity 0.6s var(--ease_inout);
}
.p-headline__title-text {
  --delay: 0s;
  display: block;
  position: relative;
  font-size: 8rem;
  line-height: 0.9;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-headline__title-text {
    font-size: 4.4rem;
  }
}
.p-headline__title-text:nth-child(1) {
  --delay: 0.1s;
}
.p-headline__title-text:nth-child(2) {
  --delay: 0.15s;
}
.p-headline__title-text:nth-child(3) {
  --delay: 0.2s;
}
.p-headline__title-text:nth-child(4) {
  --delay: 0.25s;
}
.p-headline__title-text:nth-child(5) {
  --delay: 0.3s;
}
.p-headline__title-text:nth-child(6) {
  --delay: 0.35s;
}
.p-headline__title-text:nth-child(7) {
  --delay: 0.4s;
}
.p-headline__title-text:nth-child(8) {
  --delay: 0.45s;
}
.p-headline__title-text:nth-child(9) {
  --delay: 0.5s;
}
.p-headline__title-text:nth-child(10) {
  --delay: 0.55s;
}
.p-headline__title-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
}
.is-active .p-headline__title-text::after {
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-headline__title-word {
  display: block;
  position: relative;
  transform: translateY(100%);
}
.is-active .p-headline__title-word {
  transform: translateY(0);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-headline__inner {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(1rem);
}
.is-active .p-headline__inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease_out) 0.5s, transform 0.8s var(--ease_out) 0.5s;
}
.p-headline__list {
  display: block;
  position: relative;
}
.p-headline__list-item {
  display: block;
  position: relative;
}
.p-headline__list-item::before {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, var(--color-gray), var(--color-gray) 0.2rem, transparent 0.2rem, transparent 0.3rem);
  background-size: 0.5rem 2px;
  background-repeat: repeat-x;
}
.p-headline__more {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  margin-top: 2rem;
  margin-left: auto;
  padding: 1rem 5rem 1rem 1rem;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-headline__more {
    margin-top: 0.6rem;
    padding: 1rem 4.8rem;
  }
}
.p-headline__more::before {
  width: 4rem;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-4rem, 0);
  background: url("../img/arrow.png") no-repeat center/contain;
}
@media (hover: hover) and (pointer: fine) {
  .p-headline__more::before {
    content: "";
    transition: transform 0.6s var(--ease_inout);
  }
  .p-headline__more:hover:before {
    transform: translate(0, 0);
  }
}
.p-headline__more-text {
  display: block;
  position: relative;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .p-headline__more-text {
    letter-spacing: 0.05rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-headline__more-text {
    transition: transform 0.6s var(--ease_inout);
  }
  .p-headline__more:hover .p-headline__more-text {
    transform: translate(4rem, 0);
  }
}
.p-headline__more-icon {
  width: 4rem;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .p-headline__more-icon {
    transition: transform 0.6s var(--ease_inout);
  }
  .p-headline__more:hover .p-headline__more-icon {
    transform: translate(4rem, -50%);
  }
}

.p-headline_article {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5rem;
  position: relative;
  padding: 1.3rem 0;
}
@media screen and (max-width: 960px) {
  .p-headline_article {
    padding: 1.6rem 0;
    gap: 3rem;
  }
}
.p-headline_article__date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-headline_article__date {
    gap: 1rem;
  }
}
.p-headline_article__date-year {
  display: block;
  position: relative;
  top: 0.15em;
  font-size: 1.8rem;
  line-height: 0.6;
  letter-spacing: 0;
  font-weight: 800;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 960px) {
  .p-headline_article__date-year {
    font-size: 1.15rem;
    letter-spacing: -0.01rem;
  }
}
.p-headline_article__date-day {
  display: block;
  position: relative;
  font-size: 5.4rem;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.2rem;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
@media screen and (max-width: 960px) {
  .p-headline_article__date-day {
    font-size: 3.3rem;
  }
}
.p-headline_article__date::after {
  content: "";
  width: 2rem;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: -1.5rem;
  background: url("../img/heart_r.svg") no-repeat center/contain;
  transform: translate(100%, 1.5rem);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .p-headline_article__date::after {
    transition: opacity 0.2s var(--ease_out), transform 0s var(--ease_out) 0.2s;
  }
  .p-headline_article:hover .p-headline_article__date::after {
    transform: translate(100%, 0);
    opacity: 1;
    transition: opacity 0.2s var(--ease_out), transform 0.8s var(--ease_bounce);
  }
}
.p-headline_article__title {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 961px) {
  .p-headline_article__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 960px) {
  .p-headline_article__title {
    font-size: 1.2rem;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
@supports ((-webkit-text-decoration-color: transparent) or (text-decoration-color: transparent)) {
  @media (hover: hover) and (pointer: fine) {
    .p-headline_article__title {
      text-decoration: underline;
      -webkit-text-decoration-color: transparent;
      text-decoration-color: transparent;
      transition: -webkit-text-decoration-color 0.3s var(--ease_out);
      transition: text-decoration-color 0.3s var(--ease_out);
      transition: text-decoration-color 0.3s var(--ease_out), -webkit-text-decoration-color 0.3s var(--ease_out);
    }
    .p-headline_article:hover .p-headline_article__title {
      -webkit-text-decoration-color: currentColor;
      text-decoration-color: currentColor;
    }
  }
}
@supports not ((-webkit-text-decoration-color: transparent) or (text-decoration-color: transparent)) {
  @media (hover: hover) and (pointer: fine) {
    .p-headline_article:hover .p-headline_article__title {
      text-decoration: underline;
    }
  }
}

.p-intro {
  display: block;
  position: relative;
  padding: 13.9rem 0 17.6rem;
  margin-top: 2.6rem;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-intro {
    padding: 9.5rem 0 9.8rem;
    margin-top: 0;
  }
}
.p-intro::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(to top, #fff6f7 0%, #fff6f7 50%, rgba(255, 246, 247, 0) 100%) no-repeat 50% -100%/100% 300%;
}
.p-intro.is-active::before {
  background-position-y: 100%;
  transition: background-position-y 1.8s var(--ease_out);
}

.p-intro__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.p-intro__bg::before {
  content: "";
  width: 100%;
  height: 11rem;
  display: block;
  position: absolute;
  bottom: calc(50% + 3rem);
  left: 0;
  transform: translate(0, 50%);
  background: url("../img/bg_txt_blk.png") repeat-x 0 50%/221rem auto;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-intro__bg::before {
    bottom: calc(50% - 1.5rem);
    height: 17.5rem;
    background-size: 110.5rem auto;
  }
}
.is-active .p-intro__bg::before {
  opacity: 0.2;
  transition: opacity 1s var(--ease_inout) 0.8s;
  animation: kv_marquee 60s linear infinite reverse;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content-visibility: auto;
}
@media screen and (max-width: 960px) {
  .is-active .p-intro__bg::before {
    animation-duration: 120s;
  }
}
.p-intro__bg::after {
  content: "";
  width: 100%;
  height: 11rem;
  display: block;
  position: absolute;
  top: calc(50% + 9rem);
  left: 0;
  transform: translate(0, -50%);
  background: url("../img/bg_txt_red.png") repeat-x 0 50%/221rem auto;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-intro__bg::after {
    top: calc(50% + 7.3rem);
    height: 17.5rem;
    background-size: 110.5rem auto;
  }
}
.is-active .p-intro__bg::after {
  opacity: 0.2;
  transition: opacity 1s var(--ease_inout) 0.8s;
  animation: kv_marquee 60s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content-visibility: auto;
}
@media screen and (max-width: 960px) {
  .is-active .p-intro__bg::after {
    animation-duration: 120s;
  }
}
.p-intro__bg-deco {
  width: 60rem;
  display: block;
  position: absolute;
  top: calc(50% + 4rem);
  left: 50%;
  opacity: 0;
  transition: all 0s linear 0.8s;
  transform: translate(-50%, -50%) scale(2);
}
@media screen and (max-width: 960px) {
  .p-intro__bg-deco {
    width: 33rem;
  }
}
.is-active .p-intro__bg-deco {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.8s var(--ease_inout) 0.2s, transform 2.2s var(--ease_out);
}
.p-intro__container {
  width: 90%;
  max-width: 100rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-intro__header {
  display: block;
  position: relative;
  margin-bottom: 8.2rem;
}
@media screen and (max-width: 960px) {
  .p-intro__header {
    margin-bottom: 2.4rem;
  }
}
.p-intro__title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  opacity: 0;
}
.is-active .p-intro__title {
  opacity: 1;
  transition: opacity 0.6s var(--ease_inout);
}
.p-intro__title-text {
  --delay: 0s;
  display: block;
  position: relative;
  font-size: 8rem;
  line-height: 0.9;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-intro__title-text {
    font-size: 4.4rem;
  }
}
.p-intro__title-text:nth-child(1) {
  --delay: 0.1s;
}
.p-intro__title-text:nth-child(2) {
  --delay: 0.15s;
}
.p-intro__title-text:nth-child(3) {
  --delay: 0.2s;
}
.p-intro__title-text:nth-child(4) {
  --delay: 0.25s;
}
.p-intro__title-text:nth-child(5) {
  --delay: 0.3s;
}
.p-intro__title-text:nth-child(6) {
  --delay: 0.35s;
}
.p-intro__title-text:nth-child(7) {
  --delay: 0.4s;
}
.p-intro__title-text:nth-child(8) {
  --delay: 0.45s;
}
.p-intro__title-text:nth-child(9) {
  --delay: 0.5s;
}
.p-intro__title-text:nth-child(10) {
  --delay: 0.55s;
}
.p-intro__title-text:nth-child(11) {
  --delay: 0.6s;
}
.p-intro__title-text:nth-child(12) {
  --delay: 0.65s;
}
.p-intro__title-text:nth-child(13) {
  --delay: 0.7s;
}
.p-intro__title-text:nth-child(14) {
  --delay: 0.75s;
}
.p-intro__title-text:nth-child(15) {
  --delay: 0.8s;
}
.p-intro__title-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
}
.is-active .p-intro__title-text::after {
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-intro__title-word {
  display: block;
  position: relative;
  transform: translateY(100%);
}
.is-active .p-intro__title-word {
  transform: translateY(0);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-intro__inner {
  display: block;
  position: relative;
}
.p-intro__lead {
  display: block;
  position: relative;
  margin-bottom: 3.8rem;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .p-intro__lead {
    margin-bottom: 2.6rem;
  }
}
.p-intro__lead-text {
  display: block;
  position: relative;
}
.p-intro__lead-word {
  display: inline;
  font-size: 3.8rem;
  font-family: "shippori-mincho", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
  opacity: 0;
}
@media screen and (max-width: 960px) {
  .p-intro__lead-word {
    font-size: 2rem;
    line-height: 1.8;
  }
}
.is-active .p-intro__lead-word {
  opacity: 1;
  transition: opacity 1.2s var(--ease_inout);
}
.is-active .p-intro__lead-word:nth-child(1) {
  transition-delay: 0.2s;
}
.is-active .p-intro__lead-word:nth-child(2) {
  transition-delay: 0.23s;
}
.is-active .p-intro__lead-word:nth-child(3) {
  transition-delay: 0.26s;
}
.is-active .p-intro__lead-word:nth-child(4) {
  transition-delay: 0.29s;
}
.is-active .p-intro__lead-word:nth-child(5) {
  transition-delay: 0.32s;
}
.is-active .p-intro__lead-word:nth-child(6) {
  transition-delay: 0.35s;
}
.is-active .p-intro__lead-word:nth-child(7) {
  transition-delay: 0.38s;
}
.is-active .p-intro__lead-word:nth-child(8) {
  transition-delay: 0.41s;
}
.is-active .p-intro__lead-word:nth-child(9) {
  transition-delay: 0.44s;
}
.is-active .p-intro__lead-word:nth-child(10) {
  transition-delay: 0.47s;
}
.is-active .p-intro__lead-word:nth-child(11) {
  transition-delay: 0.5s;
}
.is-active .p-intro__lead-word:nth-child(12) {
  transition-delay: 0.53s;
}
.is-active .p-intro__lead-word:nth-child(13) {
  transition-delay: 0.56s;
}
.is-active .p-intro__lead-word:nth-child(14) {
  transition-delay: 0.59s;
}
.is-active .p-intro__lead-word:nth-child(15) {
  transition-delay: 0.62s;
}
.is-active .p-intro__lead-word:nth-child(16) {
  transition-delay: 0.65s;
}
.is-active .p-intro__lead-word:nth-child(17) {
  transition-delay: 0.68s;
}
.is-active .p-intro__lead-word:nth-child(18) {
  transition-delay: 0.71s;
}
.is-active .p-intro__lead-word:nth-child(19) {
  transition-delay: 0.74s;
}
.is-active .p-intro__lead-word:nth-child(20) {
  transition-delay: 0.77s;
}
.is-active .p-intro__lead-word:nth-child(21) {
  transition-delay: 0.8s;
}
.is-active .p-intro__lead-word:nth-child(22) {
  transition-delay: 0.83s;
}
.is-active .p-intro__lead-word:nth-child(23) {
  transition-delay: 0.86s;
}
.is-active .p-intro__lead-word:nth-child(24) {
  transition-delay: 0.89s;
}
.is-active .p-intro__lead-word:nth-child(25) {
  transition-delay: 0.92s;
}
.is-active .p-intro__lead-word:nth-child(26) {
  transition-delay: 0.95s;
}
.is-active .p-intro__lead-word:nth-child(27) {
  transition-delay: 0.98s;
}
.is-active .p-intro__lead-word:nth-child(28) {
  transition-delay: 1.01s;
}
.is-active .p-intro__lead-word:nth-child(29) {
  transition-delay: 1.04s;
}
.is-active .p-intro__lead-word:nth-child(30) {
  transition-delay: 1.07s;
}
.is-active .p-intro__lead-word:nth-child(31) {
  transition-delay: 1.1s;
}
.is-active .p-intro__lead-word:nth-child(32) {
  transition-delay: 1.13s;
}
.is-active .p-intro__lead-word:nth-child(33) {
  transition-delay: 1.16s;
}
.is-active .p-intro__lead-word:nth-child(34) {
  transition-delay: 1.19s;
}
.is-active .p-intro__lead-word:nth-child(35) {
  transition-delay: 1.22s;
}
.is-active .p-intro__lead-word:nth-child(36) {
  transition-delay: 1.25s;
}
.is-active .p-intro__lead-word:nth-child(37) {
  transition-delay: 1.28s;
}
.is-active .p-intro__lead-word:nth-child(38) {
  transition-delay: 1.31s;
}
.is-active .p-intro__lead-word:nth-child(39) {
  transition-delay: 1.34s;
}
.is-active .p-intro__lead-word:nth-child(40) {
  transition-delay: 1.37s;
}
.is-active .p-intro__lead-word:nth-child(41) {
  transition-delay: 1.4s;
}
.is-active .p-intro__lead-word:nth-child(42) {
  transition-delay: 1.43s;
}
.is-active .p-intro__lead-word:nth-child(43) {
  transition-delay: 1.46s;
}
.is-active .p-intro__lead-word:nth-child(44) {
  transition-delay: 1.49s;
}
.is-active .p-intro__lead-word:nth-child(45) {
  transition-delay: 1.52s;
}
.is-active .p-intro__lead-word:nth-child(46) {
  transition-delay: 1.55s;
}
.is-active .p-intro__lead-word:nth-child(47) {
  transition-delay: 1.58s;
}
.is-active .p-intro__lead-word:nth-child(48) {
  transition-delay: 1.61s;
}
.is-active .p-intro__lead-word:nth-child(49) {
  transition-delay: 1.64s;
}
.is-active .p-intro__lead-word:nth-child(50) {
  transition-delay: 1.67s;
}
.is-active .p-intro__lead-word:nth-child(51) {
  transition-delay: 1.7s;
}
.is-active .p-intro__lead-word:nth-child(52) {
  transition-delay: 1.73s;
}
.is-active .p-intro__lead-word:nth-child(53) {
  transition-delay: 1.76s;
}
.is-active .p-intro__lead-word:nth-child(54) {
  transition-delay: 1.79s;
}
.is-active .p-intro__lead-word:nth-child(55) {
  transition-delay: 1.82s;
}
.is-active .p-intro__lead-word:nth-child(56) {
  transition-delay: 1.85s;
}
.is-active .p-intro__lead-word:nth-child(57) {
  transition-delay: 1.88s;
}
.is-active .p-intro__lead-word:nth-child(58) {
  transition-delay: 1.91s;
}
.is-active .p-intro__lead-word:nth-child(59) {
  transition-delay: 1.94s;
}
.is-active .p-intro__lead-word:nth-child(60) {
  transition-delay: 1.97s;
}
.is-active .p-intro__lead-word:nth-child(61) {
  transition-delay: 2s;
}
.is-active .p-intro__lead-word:nth-child(62) {
  transition-delay: 2.03s;
}
.is-active .p-intro__lead-word:nth-child(63) {
  transition-delay: 2.06s;
}
.is-active .p-intro__lead-word:nth-child(64) {
  transition-delay: 2.09s;
}
.is-active .p-intro__lead-word:nth-child(65) {
  transition-delay: 2.12s;
}
.is-active .p-intro__lead-word:nth-child(66) {
  transition-delay: 2.15s;
}
.is-active .p-intro__lead-word:nth-child(67) {
  transition-delay: 2.18s;
}
.is-active .p-intro__lead-word:nth-child(68) {
  transition-delay: 2.21s;
}
.is-active .p-intro__lead-word:nth-child(69) {
  transition-delay: 2.24s;
}
.is-active .p-intro__lead-word:nth-child(70) {
  transition-delay: 2.27s;
}
.is-active .p-intro__lead-word:nth-child(71) {
  transition-delay: 2.3s;
}
.is-active .p-intro__lead-word:nth-child(72) {
  transition-delay: 2.33s;
}
.is-active .p-intro__lead-word:nth-child(73) {
  transition-delay: 2.36s;
}
.is-active .p-intro__lead-word:nth-child(74) {
  transition-delay: 2.39s;
}
.is-active .p-intro__lead-word:nth-child(75) {
  transition-delay: 2.42s;
}
.is-active .p-intro__lead-word:nth-child(76) {
  transition-delay: 2.45s;
}
.is-active .p-intro__lead-word:nth-child(77) {
  transition-delay: 2.48s;
}
.is-active .p-intro__lead-word:nth-child(78) {
  transition-delay: 2.51s;
}
.is-active .p-intro__lead-word:nth-child(79) {
  transition-delay: 2.54s;
}
.is-active .p-intro__lead-word:nth-child(80) {
  transition-delay: 2.57s;
}
.is-active .p-intro__lead-word:nth-child(81) {
  transition-delay: 2.6s;
}
.is-active .p-intro__lead-word:nth-child(82) {
  transition-delay: 2.63s;
}
.is-active .p-intro__lead-word:nth-child(83) {
  transition-delay: 2.66s;
}
.is-active .p-intro__lead-word:nth-child(84) {
  transition-delay: 2.69s;
}
.is-active .p-intro__lead-word:nth-child(85) {
  transition-delay: 2.72s;
}
.is-active .p-intro__lead-word:nth-child(86) {
  transition-delay: 2.75s;
}
.is-active .p-intro__lead-word:nth-child(87) {
  transition-delay: 2.78s;
}
.is-active .p-intro__lead-word:nth-child(88) {
  transition-delay: 2.81s;
}
.is-active .p-intro__lead-word:nth-child(89) {
  transition-delay: 2.84s;
}
.is-active .p-intro__lead-word:nth-child(90) {
  transition-delay: 2.87s;
}
.is-active .p-intro__lead-word:nth-child(91) {
  transition-delay: 2.9s;
}
.is-active .p-intro__lead-word:nth-child(92) {
  transition-delay: 2.93s;
}
.is-active .p-intro__lead-word:nth-child(93) {
  transition-delay: 2.96s;
}
.is-active .p-intro__lead-word:nth-child(94) {
  transition-delay: 2.99s;
}
.is-active .p-intro__lead-word:nth-child(95) {
  transition-delay: 3.02s;
}
.is-active .p-intro__lead-word:nth-child(96) {
  transition-delay: 3.05s;
}
.is-active .p-intro__lead-word:nth-child(97) {
  transition-delay: 3.08s;
}
.is-active .p-intro__lead-word:nth-child(98) {
  transition-delay: 3.11s;
}
.is-active .p-intro__lead-word:nth-child(99) {
  transition-delay: 3.14s;
}
.is-active .p-intro__lead-word:nth-child(100) {
  transition-delay: 3.17s;
}
.p-intro__text {
  display: block;
  position: relative;
}
.p-intro__text-par {
  display: block;
  position: relative;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  opacity: 0;
  transform: translateY(0.5rem);
}
@media screen and (max-width: 960px) {
  .p-intro__text-par {
    font-size: 1.4rem;
    line-height: 1.78;
    letter-spacing: 0;
  }
}
.is-active .p-intro__text-par {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease_out) 1s, transform 0.8s var(--ease_out) 1s;
}
.is-active .p-intro__text-par:nth-child(1) {
  transition-delay: 1s;
}
.is-active .p-intro__text-par:nth-child(2) {
  transition-delay: 1.1s;
}
.is-active .p-intro__text-par:nth-child(3) {
  transition-delay: 1.2s;
}
.is-active .p-intro__text-par:nth-child(4) {
  transition-delay: 1.3s;
}
.is-active .p-intro__text-par:nth-child(5) {
  transition-delay: 1.4s;
}
.p-intro__text-par + .p-intro__text-par {
  margin-top: 1.7em;
}
@media screen and (max-width: 960px) {
  .p-intro__text-par + .p-intro__text-par {
    margin-top: 1.8em;
  }
}

.p-staffcast {
  display: block;
  position: relative;
  padding: 13.5rem 0 18.5rem;
  color: var(--color-white);
  background-color: var(--color-pink-pearl);
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-staffcast {
    padding: 8.8rem 0 10.3rem;
  }
}
.p-staffcast__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-black);
  z-index: -1;
  opacity: 0;
  transform: translateY(1.5rem);
}
.p-staffcast__bg.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.8s var(--ease_out), transform 1.8s var(--ease_out);
}
.p-staffcast__bg::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to top, black 0%, black 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, black 100%);
}
.p-staffcast__bg-cover {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-staffcast__bg-cover::before {
  content: "";
  width: 100%;
  height: 3.15rem;
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  background: url("../img/line_heart_repeat.png") repeat-x 0 100%/auto 100%;
  transform: translate(0, -100%);
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-staffcast__bg-cover::before {
    height: 2rem;
  }
}
.p-staffcast__bg-cover::after {
  content: "";
  width: 100%;
  height: 3.15rem;
  display: block;
  position: absolute;
  bottom: 1px;
  left: 0;
  background: url("../img/line_heart_repeat.png") repeat-x 0 100%/auto 100%;
  transform: translate(0, 100%) scale(1, -1);
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-staffcast__bg-cover::after {
    height: 2rem;
  }
}
.p-staffcast__bg-canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.p-staffcast__bg-canvas.is-bg-active {
  opacity: 1;
  transition: opacity 1.5s var(--ease_inout) 0.5s;
}
.p-staffcast__bg-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-staffcast__container {
  display: block;
  position: relative;
  z-index: 0;
}
.p-staffcast__inner {
  width: 82%;
  max-width: 95rem;
  display: block;
  position: relative;
  margin: 0 auto;
}

.p-staffcast_content {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-staffcast_content {
    display: grid;
    grid-template-columns: 32.5rem 1fr;
    gap: 5rem;
  }
}
.p-staffcast_content + .p-staffcast_content {
  margin-top: 7.6rem;
}
.p-staffcast_content__header {
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__header {
    margin-bottom: 2.2rem;
  }
}
.p-staffcast_content__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  opacity: 0;
}
.is-active .p-staffcast_content__title {
  opacity: 1;
  transition: opacity 0.6s var(--ease_inout);
}
.p-staffcast_content__title-text {
  --delay: 0s;
  display: block;
  position: relative;
  font-size: 6rem;
  letter-spacing: 0;
  line-height: 0.9;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__title-text {
    font-size: 4rem;
  }
}
.p-staffcast_content__title-text:nth-child(1) {
  --delay: 0.1s;
}
.p-staffcast_content__title-text:nth-child(2) {
  --delay: 0.15s;
}
.p-staffcast_content__title-text:nth-child(3) {
  --delay: 0.2s;
}
.p-staffcast_content__title-text:nth-child(4) {
  --delay: 0.25s;
}
.p-staffcast_content__title-text:nth-child(5) {
  --delay: 0.3s;
}
.p-staffcast_content__title-text:nth-child(6) {
  --delay: 0.35s;
}
.p-staffcast_content__title-text:nth-child(7) {
  --delay: 0.4s;
}
.p-staffcast_content__title-text:nth-child(8) {
  --delay: 0.45s;
}
.p-staffcast_content__title-text:nth-child(9) {
  --delay: 0.5s;
}
.p-staffcast_content__title-text:nth-child(10) {
  --delay: 0.55s;
}
.p-staffcast_content__title-text:nth-child(11) {
  --delay: 0.6s;
}
.p-staffcast_content__title-text:nth-child(12) {
  --delay: 0.65s;
}
.p-staffcast_content__title-text:nth-child(13) {
  --delay: 0.7s;
}
.p-staffcast_content__title-text:nth-child(14) {
  --delay: 0.75s;
}
.p-staffcast_content__title-text:nth-child(15) {
  --delay: 0.8s;
}
.p-staffcast_content__title-text:not([data-text]) {
  margin-right: 1.8em;
}
.p-staffcast_content__title-text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-white);
}
.is-active .p-staffcast_content__title-text::after {
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-staffcast_content__title-word {
  display: block;
  position: relative;
  transform: translateY(100%);
}
.is-active .p-staffcast_content__title-word {
  transform: translateY(0);
  transition: transform 0.8s var(--ease_inout) var(--delay);
}
.p-staffcast_content__inner {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(1rem);
}
.is-active .p-staffcast_content__inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease_out) 0.5s, transform 0.8s var(--ease_out) 0.5s;
}
.p-staffcast_content__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 13rem;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__list {
    gap: 2rem 2rem;
  }
}
@media screen and (max-width: 960px) {
  #staff .p-staffcast_content__list {
    grid-template-columns: 1fr 0.7fr;
  }
}
#song .p-staffcast_content__list {
  grid-template-columns: 1fr;
}
.p-staffcast_content__list-item {
  min-width: 0;
  display: block;
  position: relative;
}
.p-staffcast_content__data {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 961px) {
  .p-staffcast_content__data {
    min-height: 6.2rem;
  }
}
.p-staffcast_content__data-sub {
  display: block;
  position: relative;
  font-size: 1.3rem;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-red);
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__data-sub {
    margin-bottom: 0.2rem;
    letter-spacing: 0.1rem;
  }
}
.p-staffcast_content__data-main {
  display: block;
  position: relative;
  font-size: 2rem;
  line-height: 1.05;
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__data-main {
    font-size: 1.6rem;
    letter-spacing: 0.05rem;
  }
}
.p-staffcast_content__data-main small {
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 960px) {
  .p-staffcast_content__data-main small {
    font-size: 1rem;
  }
}