@charset "UTF-8";
.l-menu_top {
  top: 4rem;
}

.p-top {
  display: block;
  position: relative;
  overflow: hidden;
}
.p-top__header {
  display: block;
  position: relative;
  z-index: 0;
}
.p-top__inner {
  display: block;
  position: relative;
  z-index: 0;
}

.p-top_hero {
  display: block;
  position: relative;
}
.p-top_hero__container {
  display: block;
  position: relative;
}
.p-top_hero__header {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
  background: url("../img/top/bg_headnews.webp") repeat 0 0/2.4rem auto;
}
@media screen and (max-width: 960px) {
  .p-top_hero__header {
    background-size: 1.2rem auto;
  }
}
.p-top_hero__header::before {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color-violet);
}

.p-top_hero_headline {
  --ratio: 1;
  display: block;
  position: relative;
  overflow: hidden;
}
.p-top_hero_headline__content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.is-marquee .p-top_hero_headline__content {
  justify-content: flex-start;
}
.is-marquee .p-top_hero_headline__content {
  animation: headline_anim calc(30s * var(--ratio)) linear -5s infinite;
}
@media screen and (max-width: 960px) {
  .is-marquee .p-top_hero_headline__content {
    animation-duration: calc(15s * var(--ratio));
  }
}
@keyframes headline_anim {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}
.p-top_hero_headline__list {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.p-top_hero_headline__list:nth-child(2) {
  display: none;
}
.is-marquee .p-top_hero_headline__list:nth-child(2) {
  display: flex;
}
.p-top_hero_headline__list-item {
  flex-shrink: 0;
  display: block;
  position: relative;
}

.p-top_hero_headline_article {
  width: 100%;
  display: block;
  position: relative;
}
.p-top_hero_headline_article__title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 5.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 2rem 1rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_headline_article__title {
    height: 3.4rem;
    padding: 1rem 1rem;
  }
}
.p-top_hero_headline_article__title-text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  margin: 0 auto;
  color: var(--color-white);
  font-weight: 500;
  letter-spacing: 0.1rem;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .p-top_hero_headline_article__title-text {
    font-size: 1.1rem;
  }
}
.p-top_hero_headline_article[href] .p-top_hero_headline_article__title-text {
  padding-right: 2.8rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_headline_article[href] .p-top_hero_headline_article__title-text {
    padding-right: 1.8rem;
  }
}
@supports ((-webkit-text-decoration-color: transparent) or (text-decoration-color: transparent)) {
  @media (hover: hover) and (pointer: fine) {
    .p-top_hero_headline_article__title-text {
      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-top_hero_headline_article[href]:hover .p-top_hero_headline_article__title-text {
      -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-top_hero_headline_article[href]:hover .p-top_hero_headline_article__title-text {
      text-decoration: underline;
    }
  }
}
.p-top_hero_headline_article__title-text::after {
  width: 2rem;
  height: 2rem;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
  background: url("../img/top/icon_arrow-headnews.svg") no-repeat center/contain;
}
@media screen and (max-width: 960px) {
  .p-top_hero_headline_article__title-text::after {
    width: 1.4rem;
    height: 1.4rem;
  }
}
.p-top_hero_headline_article[href] .p-top_hero_headline_article__title-text::after {
  content: "";
}

.p-top_hero_mv {
  display: block;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.p-top_hero_mv img {
  width: 100%;
}
.p-top_hero_mv__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.p-top_hero_mv__bg-item {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s linear 0.8s;
}
.p-top_hero_mv__bg-item.is-current {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.8s var(--ease_inout);
}
.p-top_hero_mv__bg-item source,
.p-top_hero_mv__bg-item img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}
.p-top_hero_mv__container {
  width: 100%;
  height: 100%;
  max-width: min(100vw, 2800px);
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-top_hero_mv__kv {
  display: block;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 961px) {
  .p-top_hero_mv__kv {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__kv {
    display: block;
    position: relative;
    margin-bottom: -38%;
  }
}
.p-top_hero_mv__kv-item {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s linear 0.8s;
}
@media screen and (min-width: 961px) {
  .p-top_hero_mv__kv-item {
    height: 100%;
  }
}
.p-top_hero_mv__kv-item.is-current {
  opacity: 1;
  z-index: 1;
  transition: opacity 0s linear;
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__kv-item.is-current {
    position: relative;
  }
}
.p-top_hero_mv__header {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_hero_mv__header {
    width: min(48.7142857143vw, 1364px);
    padding-top: min(1.7857142857vw, 50px);
  }
}
.p-top_hero_mv__tab {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_hero_mv__tab {
    position: absolute;
    bottom: 5.7rem;
    right: 2rem;
  }
}
.p-top_hero_mv__inner {
  min-width: 0;
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_hero_mv__inner {
    width: min(48.7142857143vw, 1364px);
    padding: 2rem 0 8rem;
  }
}
.p-top_hero_mv__title {
  width: 100%;
  max-width: min(42.4285714286vw, 1188px);
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__title {
    width: 90%;
    max-width: 32.8rem;
  }
}
.p-top_hero_mv__content {
  width: 90%;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__content {
    width: 100%;
    padding-bottom: 5rem;
  }
}
.p-top_hero_mv__onair {
  width: 100%;
  max-width: min(44.1428571429vw, 1236px);
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__onair {
    max-width: 61.8rem;
    margin-top: 0.8rem;
  }
}
.p-top_hero_mv__bnr {
  width: 100%;
  max-width: min(29.1428571429vw, 816px);
  display: block;
  position: relative;
  margin: 0.8rem auto 0;
}
@media screen and (max-width: 960px) {
  .p-top_hero_mv__bnr {
    width: 90%;
    max-width: 31rem;
    margin-top: 0.6rem;
  }
}

@media screen and (min-width: 961px) {
  .p-top_hero_kv {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media screen and (max-width: 960px) {
  .p-top_hero_kv {
    display: block;
    position: relative;
  }
}
.p-top_hero_kv__visual {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_hero_kv__visual {
    position: absolute;
    top: 52%;
    transform: translate(0, -50%);
  }
  .--kv1 .p-top_hero_kv__visual {
    width: min(56.4285714286vw, 1580px);
    right: min(2vw, 56px);
    bottom: auto;
  }
  .--kv2 .p-top_hero_kv__visual {
    width: min(87.8571428571vw, 2460px);
    position: absolute;
    left: 64%;
    transform: translate(-50%, -50%);
  }
}
.p-top_hero_kv__img {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center;
  transition: opacity 0.8s var(--ease_out), transform 0s linear 0.8s;
}
.is-current .p-top_hero_kv__img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s var(--ease_inout), transform 2s var(--ease_out);
}
.p-top_hero_kv__catch {
  opacity: 0;
  transition: opacity 0.8s var(--ease_out);
}
@media screen and (min-width: 961px) {
  .p-top_hero_kv__catch {
    width: min(8.3571428571vw, 234px);
    display: block;
    position: absolute;
    top: 38.2%;
    left: 10%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 960px) {
  .p-top_hero_kv__catch {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.is-current .p-top_hero_kv__catch {
  opacity: 1;
  transition: opacity 1s var(--ease_inout);
}

.p-top_hero_bnr {
  display: block;
  position: relative;
}
.p-top_hero_bnr__list {
  display: block;
  position: relative;
}
.p-top_hero_bnr__list-item {
  display: block;
  position: relative;
}
.p-top_hero_bnr__list-item + .p-top_hero_bnr__list-item {
  margin-top: 1rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr__list-item + .p-top_hero_bnr__list-item {
    margin-top: 0.6rem;
  }
}
.p-top_hero_bnr__link {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 0;
  border-radius: 2rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr__link {
    border-radius: 1rem;
  }
}
.p-top_hero_bnr__link::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.5rem solid var(--color-bnr-line);
  border-radius: 2rem;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr__link::after {
    border-radius: 1rem;
  }
}
.p-top_hero_bnr__link-img {
  width: 100%;
  display: block;
  position: relative;
  background: var(--color-pink-bright);
}
.p-top_hero_bnr__link-img::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-purple-bg);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_hero_bnr__link-img::after {
    transition: opacity 0.5s var(--ease_out);
  }
  .p-top_hero_bnr__link:hover .p-top_hero_bnr__link-img::after {
    opacity: 0.4;
  }
}
.p-top_hero_bnr__slide {
  display: block;
  position: relative;
  margin-top: 1rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr__slide {
    margin-top: 0.6rem;
  }
}
.p-top_hero_bnr__slide:first-child {
  margin-top: 0;
}

.p-top_hero_bnr_slide__content {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr_slide__content {
    border-radius: 1rem;
  }
}
.p-top_hero_bnr_slide__content::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.5rem solid var(--color-bnr-line);
  border-radius: 2rem;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr_slide__content::after {
    border-radius: 1rem;
  }
}
.p-top_hero_bnr_slide__list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.p-top_hero_bnr_slide__list-item {
  width: 100%;
  flex-shrink: 0;
  display: block;
  position: relative;
}
.p-top_hero_bnr_slide__link {
  display: block;
  position: relative;
  z-index: 0;
}
.p-top_hero_bnr_slide__link-img {
  width: 100%;
  padding-top: 56.25%;
  display: block;
  position: relative;
  background: var(--color-pink-bright);
}
.p-top_hero_bnr_slide__link-img::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-purple-bg);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_hero_bnr_slide__link-img::after {
    transition: opacity 0.5s var(--ease_out);
  }
  .p-top_hero_bnr_slide__link:hover .p-top_hero_bnr_slide__link-img::after {
    opacity: 0.4;
  }
}
.p-top_hero_bnr_slide__link-img img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: contain;
  object-fit: contain;
}
.p-top_hero_bnr_slide__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(0.8571428571vw, 24px);
  position: relative;
  margin-top: 1.2rem;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr_slide__pagination {
    margin-top: 1.2rem;
    gap: 1rem;
  }
}
.p-top_hero_bnr_slide__pagination-item {
  width: min(0.7142857143vw, 20px);
  height: min(0.7142857143vw, 20px);
  display: block;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-purple-bg);
  transition: background-color 0.4s var(--ease_out);
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr_slide__pagination-item {
    width: 0.7rem;
    height: 0.7rem;
  }
}
.p-top_hero_bnr_slide__pagination-item.is-current {
  background-color: var(--color-violet);
}
.p-top_hero_bnr_slide__pagination-item::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-sizing: content-box;
}
@media screen and (max-width: 960px) {
  .p-top_hero_bnr_slide__pagination-item::after {
    border-width: 1px;
  }
}

.p-top_hero_tab {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: min(1.0714285714vw, 30px);
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab {
    max-width: 90%;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem auto 0;
  }
}
.p-top_hero_tab__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: min(0.8571428571vw, 24px);
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab__list {
    gap: 1rem 1.2rem;
    justify-content: center;
  }
}
.p-top_hero_tab__list-item {
  display: block;
  position: relative;
}
.p-top_hero_tab__btn {
  width: min(4.4285714286vw, 124px);
  height: min(4.4285714286vw, 124px);
  display: block;
  position: relative;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 1s var(--ease_out);
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab__btn {
    width: 6.2rem;
    height: 6.2rem;
  }
}
.is-current .p-top_hero_tab__btn {
  opacity: 1;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_hero_tab__btn:hover {
    opacity: 1;
  }
}
.p-top_hero_tab__btn::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.5rem solid var(--color-top-tab);
  border-radius: 50%;
  box-sizing: content-box;
  box-shadow: 0 0 1.4rem 0 var(--color-top-tab-shadow);
  opacity: 0;
  transition: opacity 1s var(--ease_out);
}
.is-autoplay .p-top_hero_tab__btn::before {
  border: 0.2rem solid var(--color-white);
}
.is-current .p-top_hero_tab__btn::before {
  opacity: 1;
}
.p-top_hero_tab__btn-circle {
  width: min(100% + 1.7142857143vw, 100% + 48px);
  height: min(100% + 1.7142857143vw, 100% + 48px);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1, -1);
  border-radius: 50%;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s var(--ease_out);
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab__btn-circle {
    width: calc(100% + 2.4rem);
    height: calc(100% + 2.4rem);
  }
}
.is-current .p-top_hero_tab__btn-circle {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.is-current .p-top_hero_tab__btn-circle {
  opacity: 1;
}
.is-autoplay .p-top_hero_tab__btn-circle {
  visibility: visible;
}
.p-top_hero_tab__btn-path {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  fill: none;
  stroke: var(--color-top-tab);
  stroke-width: 0.5rem;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 1s var(--ease_inout);
  stroke-dashoffset: calc(211 * var(--ratio_vw));
  stroke-dasharray: calc(211 * var(--ratio_vw));
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab__btn-path {
    stroke-dashoffset: calc(213 * var(--ratio_fz));
    stroke-dasharray: calc(213 * var(--ratio_fz));
  }
}
.is-load .is-autoplay .is-current .p-top_hero_tab__btn-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 10s linear;
}
.p-top_hero_tab__btn-img {
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(1.0001);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_hero_tab__btn-img {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_hero_tab__btn:hover .p-top_hero_tab__btn-img {
    transform: scale(1.1) rotate(10deg);
    transition: transform 0.7s var(--ease_bounce);
  }
}
.p-top_hero_tab__switch {
  width: min(4.4285714286vw, 124px);
  flex-shrink: 0;
  display: block;
  position: relative;
  transform-origin: 50% 60%;
}
@media screen and (max-width: 960px) {
  .p-top_hero_tab__switch {
    width: 6.2rem;
    margin-top: -0.8rem;
  }
}
.p-top_hero_tab__switch-base {
  display: block;
  position: relative;
  transform-origin: 50% 60%;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_hero_tab__switch:hover .p-top_hero_tab__switch-base {
    animation: switch_hov 0.3s linear 2;
  }
}
@keyframes switch_hov {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
.p-top_hero_tab__switch-icon {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s var(--ease_out);
}
.p-top_hero_tab__switch-icon.--on {
  opacity: 1;
}
.is-autoplay .p-top_hero_tab__switch-icon.--on {
  opacity: 0;
}
.p-top_hero_tab__switch-icon.--off {
  opacity: 0;
}
.is-autoplay .p-top_hero_tab__switch-icon.--off {
  opacity: 1;
}

.p-top_movie {
  display: block;
  position: relative;
  background: var(--color-movie-bg);
}
.p-top_movie::before {
  content: "";
  width: 100%;
  height: 8rem;
  display: block;
  position: absolute;
  top: 2.4rem;
  left: 0;
  background: url("../img/top/deco_race_top.webp") repeat-x 0 100%/6.2rem auto;
  transform: translate(0, -100%);
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_movie::before {
    height: 4rem;
    top: 1.2rem;
    background-size: 3.1rem auto;
  }
}
.p-top_movie::after {
  content: "";
  width: 100%;
  height: 8rem;
  display: block;
  position: absolute;
  bottom: 1px;
  left: 0;
  background: url("../img/top/deco_race_bottom.webp") repeat-x 0 0/6.2rem auto;
  transform: translate(0, 100%);
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_movie::after {
    height: 4rem;
    background-size: 3.1rem auto;
  }
}
.p-top_movie__container {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 4.3rem 0 6.3rem;
  overflow: hidden;
  z-index: 0;
}
@media screen and (max-width: 960px) {
  .p-top_movie__container {
    padding: 2.5rem 0 3.6rem;
  }
}
.p-top_movie__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  filter: blur(0.4rem);
  transform: scale(1.1);
  z-index: -1;
}
.p-top_movie__bg-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  transform: scale(1.1);
  transition: opacity 0s linear 0.8s, transform 0s linear 0.8s;
}
.p-top_movie__bg-img.is-current {
  opacity: 1;
  z-index: 1;
  transform: scale(1);
  transition: opacity 0.8s var(--ease_out), transform 4s var(--ease_out);
}
.p-top_movie__bg-img source,
.p-top_movie__bg-img img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}
.p-top_movie__header {
  display: block;
  position: relative;
  margin-bottom: 2.9rem;
}
@media screen and (max-width: 960px) {
  .p-top_movie__header {
    margin-bottom: 1.2rem;
  }
}
.p-top_movie__title {
  width: 75rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_movie__title {
    width: 36rem;
  }
}
.p-top_movie__inner {
  display: block;
  position: relative;
}
.p-top_movie__slide {
  display: block;
  position: relative;
}
.p-top_movie__list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin: 0 auto;
}
.p-top_movie__list-item {
  flex-shrink: 0;
  display: block;
  position: relative;
}
.p-top_movie__controller {
  width: 100%;
  max-width: 71.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: relative;
  margin: 2.5rem auto 0;
}
@media screen and (max-width: 960px) {
  .p-top_movie__controller {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.8rem;
    gap: 1.6rem;
    box-sizing: content-box;
  }
}
.p-top_movie__nav {
  width: 11.6rem;
  display: block;
  position: relative;
  transform: scale(1.0001);
}
@media screen and (max-width: 960px) {
  .p-top_movie__nav {
    width: 5.6rem;
  }
}
.p-top_movie__nav.is-slide-disable {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie__nav {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_movie__nav:hover {
    transform: scale(1.1);
    transition: transform 0.7s var(--ease_bounce);
  }
}
.p-top_movie__pagination {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_movie__pagination {
    min-width: 15rem;
    gap: 1.2rem;
  }
}
.p-top_movie__pagination-item {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.4s var(--ease_out);
  cursor: pointer;
}
@media screen and (max-width: 960px) {
  .p-top_movie__pagination-item {
    width: 0.7rem;
    height: 0.7rem;
  }
}
.p-top_movie__pagination-item.is-current {
  background-color: var(--color-violet);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie__pagination-item:hover {
    background-color: var(--color-purple-bg);
  }
}
.p-top_movie__pagination-item::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-sizing: content-box;
}
@media screen and (max-width: 960px) {
  .p-top_movie__pagination-item::after {
    border-width: 1px;
  }
}
.p-top_movie__footer {
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_movie__footer {
    margin-top: 1.2rem;
  }
}
.p-top_movie__btn {
  width: 44rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_movie__btn {
    width: 28.4rem;
  }
}
.p-top_movie__btn-img {
  display: block;
  position: relative;
  transform: scale(1.0001);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie__btn-img {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_movie__btn:hover .p-top_movie__btn-img {
    transform: scale(1.05);
    transition: transform 0.7s var(--ease_bounce);
  }
}

.p-top_movie_article {
  width: 100%;
  display: block;
  position: relative;
  background: var(--color-movie-frame);
  padding: 1rem;
  border-radius: 2rem;
  box-shadow: 0 0.8rem 0 0 var(--color-movie-shadow);
  z-index: 0;
  transform: scale(1.0001);
}
@media screen and (max-width: 960px) {
  .p-top_movie_article {
    padding: 0.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 0.4rem 0 0 var(--color-movie-shadow);
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie_article {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_movie_article:hover {
    transform: scale(1.02);
    transition: transform 0.7s var(--ease_bounce);
  }
}
.p-top_movie_article::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2rem;
  border: 2px solid var(--color-movie-line);
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_movie_article::after {
    border-width: 1px;
    border-radius: 1.5rem;
  }
}
.p-top_movie_article__content {
  display: block;
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-top_movie_article__content {
    border-radius: 1rem;
  }
}
.p-top_movie_article__content::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 1.5rem;
  border: 2px solid var(--color-movie-line);
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_movie_article__content::after {
    border-width: 1px;
    border-radius: 1rem;
  }
}
.p-top_movie_article__thumb {
  width: 100%;
  padding-top: 56.25%;
  display: block;
  position: relative;
  z-index: 0;
}
.p-top_movie_article__thumb::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-movie-filter);
  z-index: 1;
  transition: opacity 0.6s var(--ease_out);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie_article:hover .p-top_movie_article__thumb::before {
    opacity: 0.5;
  }
}
.is-slide-current .p-top_movie_article__thumb::before {
  opacity: 0;
}
.p-top_movie_article__thumb-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-top_movie_article__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-top_movie_article__thumb-icon {
  width: 11rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.0001);
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_movie_article__thumb-icon {
    width: 6rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie_article__thumb-icon {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_movie_article:hover .p-top_movie_article__thumb-icon {
    transform: translate(-50%, -50%) scale(1.1);
    transition: transform 0.7s var(--ease_bounce);
  }
}
.p-top_movie_article__title {
  width: 100%;
  height: 5.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--color-white);
  background: var(--color-purple-bg);
  transition: opacity 0.6s var(--ease_out), background-color 0.3s var(--ease_out);
}
@media screen and (min-width: 961px) {
  .p-top_movie_article__title {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
  .is-slide-current .p-top_movie_article__title {
    opacity: 1;
  }
}
@media screen and (max-width: 960px) {
  .p-top_movie_article__title {
    height: 3.2rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top_movie_article:hover .p-top_movie_article__title {
    background-color: var(--color-purple-text);
  }
}
.p-top_movie_article__title-text {
  width: 90%;
  display: block;
  position: relative;
  font-size: 2.2rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 960px) {
  .p-top_movie_article__title-text {
    font-size: 1.4rem;
  }
}

.p-top_news {
  display: block;
  position: relative;
  background: url("../img/top/topics/bg_topics.jpg") no-repeat center top/cover;
}
.p-top_news__container {
  width: 90%;
  max-width: 110rem;
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 9.5rem 0 7.2rem;
}
@media screen and (max-width: 960px) {
  .p-top_news__container {
    width: 100%;
    padding: 5.3rem 0 11.4rem;
  }
}
.p-top_news__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-top_news__chara {
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
}
.p-top_news__chara.--chara1 {
  width: 18rem;
  top: calc(100% - 11rem);
  left: calc(100% - 2rem);
}
@media screen and (max-width: 960px) {
  .p-top_news__chara.--chara1 {
    width: 11.5rem;
    top: calc(100% - 6rem);
    left: calc(100% - 6.2rem);
  }
}
.p-top_news__chara.--chara2 {
  width: 14.8rem;
  top: 18rem;
  left: 7.3rem;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_news__chara.--chara2 {
    width: 9rem;
    top: 3.5rem;
    left: 4.6rem;
  }
}
.p-top_news__chara-img {
  display: block;
  position: relative;
}
.--chara1 .p-top_news__chara-img {
  animation: topic_chara_1 15s var(--ease_inout) infinite alternate;
}
.--chara2 .p-top_news__chara-img {
  animation: topic_chara_2 15s var(--ease_inout) infinite alternate-reverse;
}
@keyframes topic_chara_1 {
  0% {
    transform: translate(-2%, -5%);
  }
  100% {
    transform: translate(2%, 5%);
  }
}
@keyframes topic_chara_2 {
  0% {
    transform: translate(2%, -6%);
  }
  100% {
    transform: translate(-2%, 6%);
  }
}
.p-top_news__header {
  display: block;
  position: relative;
  margin-bottom: 2.8rem;
}
@media screen and (max-width: 960px) {
  .p-top_news__header {
    margin-bottom: 1.65rem;
  }
}
.p-top_news__title {
  width: 77.2rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_news__title {
    width: 37.5rem;
  }
}
.p-top_news__inner {
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_news__inner {
    width: 92%;
    margin: 0 auto;
  }
}
.p-top_news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_news__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0.6rem;
  }
}
.p-top_news__list-item {
  display: block;
  position: relative;
}
.p-top_news__footer {
  width: 100%;
  display: block;
  position: relative;
  margin: 1.8rem auto 0;
}
@media screen and (max-width: 960px) {
  .p-top_news__footer {
    width: 92%;
  }
}
.p-top_news__btn {
  width: 44rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_news__btn {
    width: 28.5rem;
  }
}
.p-top_news__btn-img {
  display: block;
  position: relative;
  transform: scale(1.0001);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_news__btn-img {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_news__btn:hover .p-top_news__btn-img {
    transform: scale(1.05);
    transition: transform 0.7s var(--ease_bounce);
  }
}

.p-top_news_article {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0.5rem 1rem 1rem;
  background-color: var(--color-news-bg);
  border-radius: 0.5rem;
  transform-origin: 50% 80%;
  transform: scale(1.0001);
}
@media screen and (max-width: 960px) {
  .p-top_news_article {
    padding: 0.5rem 0.5rem 0.5rem;
    border-radius: 0.25rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top_news_article {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_news_article:hover {
    transform: scale(1.02);
    transition: transform 0.7s var(--ease_bounce);
  }
}
.p-top_news_article::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--color-news-line);
  border-radius: 0.5rem;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_news_article::before {
    border-radius: 0.25rem;
  }
}
.p-top_news_article::after {
  content: "";
  width: 28rem;
  max-width: 100%;
  height: 3.4rem;
  display: block;
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/common/memo/bg_memo-top.webp") repeat-x 0 0/3rem auto;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_news_article::after {
    width: 14rem;
    height: 1.7rem;
    top: 0.2rem;
    background-size: 1.5rem auto;
  }
}
.p-top_news_article__container {
  height: 100%;
  display: block;
  position: relative;
  padding: 2.5rem 0 3.6rem;
  border-radius: 0.5rem;
  z-index: 0;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__container {
    padding: 1.2rem 0 1.8rem;
    border-radius: 0.25rem;
  }
}
.p-top_news_article__container::before {
  content: "";
  width: 100%;
  height: calc(100% - 0.5rem);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  border-left: 1px solid var(--color-news-line);
  border-right: 1px solid var(--color-news-line);
  border-bottom: 1px solid var(--color-news-line);
  border-radius: 0.5rem;
  z-index: -1;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__container::before {
    height: calc(100% - 0.3rem);
    border-radius: 0.25rem;
  }
}
.p-top_news_article__container::after {
  content: "";
  width: 100%;
  height: calc(100% - 1rem);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  border-left: 1px solid var(--color-news-line);
  border-right: 1px solid var(--color-news-line);
  border-bottom: 1px solid var(--color-news-line);
  border-radius: 0.5rem;
  z-index: -1;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__container::after {
    height: calc(100% - 0.6rem);
    border-radius: 0.25rem;
  }
}
.p-top_news_article__bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  z-index: -2;
  border-radius: 0.5rem;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__bg {
    border-radius: 0.25rem;
  }
}
.p-top_news_article__bg::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--color-news-line);
  border-radius: 0.5rem;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__bg::before {
    border-radius: 0.25rem;
  }
}
.p-top_news_article__thumb {
  width: calc(100% - 2px);
  display: block;
  position: relative;
  margin: 0 auto 1.8rem;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__thumb {
    margin-bottom: 1.2rem;
  }
}
.p-top_news_article__thumb-img {
  width: 100%;
  padding-top: 55.3097345133%;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-top_news_article__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-top_news_article__header {
  width: calc(100% - 4.5rem);
  display: block;
  position: relative;
  margin: 0 auto 0.8rem;
}
@media screen and (min-width: 961px) {
  .p-top_news_article__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.9rem;
  }
}
@media screen and (max-width: 960px) {
  .p-top_news_article__header {
    width: calc(100% - 2rem);
    margin-bottom: 0.4rem;
  }
}
.p-top_news_article__date {
  display: block;
  position: relative;
  font-size: 1.6rem;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: 0.08rem;
  color: var(--color-news-purple-text);
}
@media screen and (max-width: 960px) {
  .p-top_news_article__date {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }
}
.p-top_news_article__category {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 10.5rem;
  min-height: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -0.3rem;
  padding: 0.2rem 1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-news-purple-bg);
  border-radius: 20rem;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__category {
    min-width: 6.6rem;
    min-height: 1.4rem;
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
  }
}
.p-top_news_article__inner {
  width: calc(100% - 4.5rem);
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__inner {
    width: calc(100% - 2rem);
  }
}
.p-top_news_article__title {
  display: block;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05rem;
  color: var(--color-news-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-top_news_article__title {
    font-size: 1.15rem;
    line-height: 1.55;
    -webkit-line-clamp: 4;
  }
}

.p-top_chara {
  display: block;
  position: relative;
  background: url("../img/common/bg_block/bg_block.jpg") repeat 0 0/38.6rem auto;
  padding: 8rem 0 0;
}
@media screen and (max-width: 960px) {
  .p-top_chara {
    padding: 4rem 0 0;
    background-size: 19.3rem auto;
  }
}
.p-top_chara__plant {
  width: 14rem;
  display: block;
  position: absolute;
  top: -1.2rem;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 960px) {
  .p-top_chara__plant {
    width: 7.2rem;
    top: -0.8rem;
    right: -1rem;
  }
}
.p-top_chara__bg {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.p-top_chara__bg::before {
  content: "";
  width: 100%;
  height: 8rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg_block/line_block.webp") repeat-x center top/140rem auto, url("../img/common/bg_block/line_block.webp") repeat-x center bottom/140rem auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-top_chara__bg::before {
    height: 4rem;
    background-size: 75rem auto, 75rem auto;
  }
}
.p-top_chara__bg::after {
  content: "";
  width: 100%;
  height: 8rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg_block/bg_block-star.webp") repeat center top/43.5rem auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-top_chara__bg::after {
    height: 4rem;
    background-size: 32.625rem auto;
  }
}
.p-top_chara__content {
  display: block;
  position: relative;
  background: url("../img/common/bg_contents/bg_main-yellow.jpg") repeat center top/140rem auto;
}
@media screen and (max-width: 960px) {
  .p-top_chara__content {
    background-size: 75rem auto;
  }
}
.p-top_chara__container {
  width: 100%;
  max-width: 140rem;
  display: block;
  position: relative;
  margin: 0 auto;
  padding-bottom: 5rem;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .p-top_chara__container {
    padding-bottom: 3.4rem;
  }
}
.p-top_chara__base {
  width: 100%;
  min-width: 277.2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 0;
}
@media screen and (max-width: 960px) {
  .p-top_chara__base {
    min-width: 37.5rem;
  }
}
.p-top_chara__base::before {
  content: "";
  width: 100%;
  height: 20rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg_contents/bg_deco-line-yellow.webp") repeat 0 0/1rem auto;
}
.p-top_chara__base::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/top/chara/bg_deco-chara_pc.webp") no-repeat center/100% 100%;
}
@media screen and (max-width: 960px) {
  .p-top_chara__base::after {
    background: url("../img/top/chara/bg_deco-chara_sp.webp") no-repeat center top/100% auto;
  }
}
.p-top_chara__header {
  display: block;
  position: relative;
  margin-bottom: -3.5rem;
}
@media screen and (max-width: 960px) {
  .p-top_chara__header {
    margin-bottom: 0.8rem;
  }
}
.p-top_chara__title {
  width: 75rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_chara__title {
    width: 37.5rem;
  }
}
.p-top_chara__inner {
  width: 90%;
  max-width: 110rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_chara__inner {
    width: 100%;
    margin: 0 auto;
  }
}
.p-top_chara__list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 0;
}
.p-top_chara__list-item {
  width: 100%;
  flex-shrink: 0;
  display: block;
  position: relative;
}
.p-top_chara__list-item.is-slide-current {
  z-index: 1;
}
.p-top_chara__controller {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_chara__controller {
    width: 50rem;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
@media screen and (max-width: 960px) {
  .p-top_chara__controller {
    margin-top: 1.4rem;
  }
}
.p-top_chara__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_chara__pager {
    width: 66rem;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media screen and (max-width: 960px) {
  .p-top_chara__pager {
    gap: 0.8rem;
  }
}
.p-top_chara__pager-item {
  min-width: 0;
  display: block;
  position: relative;
}

.p-top_chara_data {
  display: block;
  position: relative;
  opacity: 0;
  transition: opacity 0s linear 0.8s;
}
@media screen and (min-width: 961px) {
  .p-top_chara_data {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rem;
  }
}
.is-slide-current .p-top_chara_data {
  opacity: 1;
  transition: opacity 0s linear;
}
.p-top_chara_data__header {
  width: 48rem;
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_chara_data__header {
    width: 23.8rem;
    margin: 0 auto 7.8rem;
  }
}
.p-top_chara_data__visual {
  display: block;
  position: relative;
}
.p-top_chara_data__visual-bg {
  width: 99.2%;
  display: block;
  position: relative;
  margin-left: auto;
  opacity: 0;
  transform-origin: 80% 50%;
  transition: opacity 0.5s var(--ease_out), transform 0s linear 0.5s;
}
@media screen and (max-width: 960px) {
  .p-top_chara_data__visual-bg {
    width: 100%;
  }
}
.is-slide-current .p-top_chara_data__visual-bg {
  opacity: 1;
  transition: opacity 0.5s var(--ease_inout), transform 1s var(--ease_out);
}
.p-top_chara_data__visual-img {
  width: 101rem;
  display: block;
  position: absolute;
  top: 55.5%;
  left: 69.8%;
  transform-origin: 20% 30%;
  opacity: 0;
  transform: translate(calc(-50% - 1rem), -50%) scale(0.95);
  transition: opacity 0.5s var(--ease_out), transform 0s linear 0.5s;
}
@media screen and (max-width: 960px) {
  .p-top_chara_data__visual-img {
    width: 51rem;
    top: 62%;
    left: 54%;
  }
}
.--chara2 .p-top_chara_data__visual-img {
  left: 65.8%;
}
@media screen and (max-width: 960px) {
  .--chara2 .p-top_chara_data__visual-img {
    left: 50%;
  }
}
.--chara3 .p-top_chara_data__visual-img {
  left: 55%;
}
@media screen and (max-width: 960px) {
  .--chara3 .p-top_chara_data__visual-img {
    left: 45%;
  }
}
.is-slide-current .p-top_chara_data__visual-img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.5s var(--ease_inout) 0.1s, transform 1s var(--ease_out) 0.1s;
}
.p-top_chara_data__inner {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-top_chara_data__inner {
    flex: 1 1 0;
    min-width: 0;
    padding-bottom: 6.5rem;
  }
}
.p-top_chara_data__description {
  width: 70rem;
  display: block;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.8s var(--ease_inout);
}
@media screen and (min-width: 961px) {
  .p-top_chara_data__description {
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media screen and (max-width: 960px) {
  .p-top_chara_data__description {
    width: 37.5rem;
    margin: 0 auto;
  }
}
.is-slide-current .p-top_chara_data__description {
  opacity: 1;
  transition: opacity 1.2s var(--ease_inout);
}
.p-top_chara_data__btn {
  width: 35.2rem;
  display: block;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.8s var(--ease_inout), transform 0.3s var(--ease_out);
  transform: scale(1.0001);
}
@media screen and (max-width: 960px) {
  .p-top_chara_data__btn {
    width: 22rem;
  }
}
.is-slide-current .p-top_chara_data__btn {
  opacity: 1;
  transition: opacity 1.2s var(--ease_inout), transform 0.3s var(--ease_out);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_chara_data__btn:hover {
    transform: scale(1.05);
    transition: transform 0.7s var(--ease_bounce);
  }
}

.p-top_chara_nav {
  --btn_accent: var(--color-violet);
  width: 10rem;
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  padding: 0.5rem;
  background: var(--color-white);
  opacity: 0.6;
  transition: opacity 0.7s var(--ease_out);
}
@media screen and (max-width: 960px) {
  .p-top_chara_nav {
    width: 6.5rem;
  }
}
.is-current .p-top_chara_nav {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .p-top_chara_nav:hover {
    opacity: 1;
  }
}
.p-top_chara_nav::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--btn_accent);
  border-radius: 50%;
}
.p-top_chara_nav__img {
  display: block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.p-top_chara_nav__img img {
  transform: scale(1.0001);
}
@media (hover: hover) and (pointer: fine) {
  .p-top_chara_nav__img img {
    transition: transform 0.3s var(--ease_out);
  }
  .p-top_chara_nav:hover .p-top_chara_nav__img img {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.7s var(--ease_bounce);
  }
}

.p-top_sns {
  display: block;
  position: relative;
  background: url("../img/common/bg_block/bg_block.jpg") repeat 0 0/38.6rem auto;
  padding: 5.5rem 0 6.7rem;
}
@media screen and (max-width: 960px) {
  .p-top_sns {
    padding: 2.8rem 0 3.4rem;
    background-size: 19.3rem auto;
  }
}
.p-top_sns__plant {
  width: 14rem;
  display: block;
  position: absolute;
  top: -1.2rem;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 960px) {
  .p-top_sns__plant {
    width: 7.2rem;
    left: -0.8rem;
  }
}
.p-top_sns__bg {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.p-top_sns__bg::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg_block/line_block.webp") repeat-x center top/140rem auto, url("../img/common/bg_block/line_block.webp") repeat-x center bottom/140rem auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-top_sns__bg::before {
    background-size: 75rem auto, 75rem auto;
  }
}
.p-top_sns__bg::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/bg_block/bg_block-star.webp") repeat center top/43.5rem auto;
  pointer-events: none;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .p-top_sns__bg::after {
    background-size: 32.625rem auto;
  }
}
.p-top_sns__header {
  display: block;
  position: relative;
  margin-bottom: 1.9rem;
}
@media screen and (max-width: 960px) {
  .p-top_sns__header {
    margin-bottom: 1rem;
  }
}
.p-top_sns__title {
  width: 90%;
  max-width: 27.2rem;
  display: block;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .p-top_sns__title {
    max-width: 13.5rem;
  }
}
.p-top_sns__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.8rem;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top_sns__list {
    gap: 1rem;
  }
}
.p-top_sns__list-item {
  display: block;
  position: relative;
}
.p-top_sns__link {
  width: 11rem;
  display: block;
  position: relative;
  border-radius: 50%;
}
@media screen and (max-width: 960px) {
  .p-top_sns__link {
    width: 5.4rem;
  }
}
.p-top_sns__link-icon {
  display: block;
  position: relative;
  border-radius: 50%;
  transform: scale(1.0001);
  box-shadow: 0 0 1.5rem 0.2rem var(--color-sns-brawn-shadow);
}
@media screen and (max-width: 960px) {
  .p-top_sns__link-icon {
    box-shadow: 0 0 1rem 0.2rem var(--color-sns-brawn-shadow);
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-top_sns__link-icon {
    transition: transform 0.3s var(--ease_out), box-shadow 1s var(--ease_out);
  }
  .p-top_sns__link:hover .p-top_sns__link-icon {
    transform: scale(1.05) rotate(15deg);
    transition: transform 0.7s var(--ease_bounce);
    box-shadow: 0 0 1.5rem 0.5rem var(--color-sns-brawn-shadow);
  }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 960px) {
  .p-top_sns__link:hover .p-top_sns__link-icon {
    box-shadow: 0 0 1rem 0.5rem var(--color-sns-brawn-shadow);
  }
}