@layer pages {
  :root {
    --color-base: #333;
    --color-white: #fff;
    --blue: #004098;
  }
}

@layer pages {
  :root {
    --font-family-base: "Zen Old Mincho", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer pages {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1136px;
    --max-width-l: 944px;
    --max-width-m: 752px;
  }
}

@layer pages {

  .top-hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 897px) {

    .top-hero {
      padding-bottom: 65px;
    }
  }

  .hero-top-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }

  @media (max-width: 896px) {

    .hero-top-slider .splide__slider {
      width: 87%;
      margin: 0 auto;
    }
  }

  @media (max-width: 896px) {

    .hero-top-slider .splide__track {
      overflow: inherit;
    }
  }

  .hero-top-slider .splide__pagination {
    bottom: -30px;
    display: flex;
    max-width: 1040px;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
    gap: 15px;
  }

  @media (max-width: 896px) {

    .hero-top-slider .splide__pagination {
      bottom: -22px;
      width: 80vw;
      max-width: 100%;
    }
  }

  .hero-top-slider .splide__pagination__page {
    width: 12px;
    height: 12px;
    border: 1px solid rgb(134 140 142 / 60%);
    border-radius: 15px;
    margin: 0;
    background-color: #fff;
    opacity: 1;
    transform: none;
    transition-property: all;
  }

  .hero-top-slider .splide__pagination__page.is-active {
    border-color: #004098;
    border-color: var(--blue);
    background-color: #004098;
    background-color: var(--blue);
  }

  .hero-image>img {
    display: block;
    width: 100%;
    max-width: 1126px;
    height: calc(100dvh - 128px);
    margin: 0 auto;
    -o-object-fit: cover;
    object-fit: cover;
  }

  @media (max-width: 896px) {
    .hero-image>img {
      max-width: 100%;
      height: 56.53333vw;
    }
  }

  @media screen and (max-width:500px) {

    .top-full-height {
      display: flex;
      height: 100dvh;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .top-scroll {
    height: 66px;
    padding: 8px 10px 0;
    text-align: center;
  }

  @media (max-width: 896px) {

    .top-scroll {
      height: 72px;
      padding-block: 0;
    }
  }

  .top-scroll>.text {
    position: relative;
    color: #004098;
    color: var(--blue);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
  }

  .top-scroll>.text::after {
    position: absolute;
    bottom: -16px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-width: 13px 5px 0;
    border-style: solid;
    border-color: #004098 transparent transparent transparent;
    border-color: var(--blue) transparent transparent transparent;
    animation: scroll-bounce 1.5s ease-in-out infinite;
    content: "";
    transform: translateX(-50%);
  }

  .image-person {
    position: fixed;
    z-index: 3;
    right: 30px;
    bottom: 0;
    width: 25.34722vw;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  @media (max-width: 896px) {

    .image-person {
      right: -24px;
      width: 192px;
    }
  }

  .image-person[data-visible="true"] {
    opacity: 1;
  }

  .image-person[data-visible="false"] {
    opacity: 0;
  }

  .top-message {
    position: relative;
    padding-inline: 40px;
  }

  @media (max-width: 896px) {

    .top-message {
      flex: 1;
      padding: 0 32px 50px;
    }
  }

  .top-message>.inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-block: 76px 11.73611vw;
  }

  @media (max-width: 896px) {

    .top-message>.inner {
      max-width: 100%;
      padding-block: 46px 31px;
    }
  }

  .top-message>.inner>.box {
    width: 670px;
    margin: 0 auto;
  }

  @media (max-width: 896px) {

    .top-message>.inner>.box {
      width: 100%;
    }
  }

  .top-message>.inner>.box>.text {
    width: 350px;
    margin: 35px auto 0;
  }

  @media (max-width: 896px) {

    .top-message>.inner>.box>.text {
      width: 245px;
      margin-top: 19px;
    }
  }

  .top-message>.inner>.box>.logo-top {
    display: block;
    width: 347px;
    margin: 0 auto;
  }

  @media (max-width: 896px) {

    .top-message>.inner>.box>.logo-top {
      width: 130px;
    }
  }

  .top-message>.inner>.box>.logo {
    display: block;
    width: 245px;
    margin: 50px auto 0;
  }

  @media (max-width: 896px) {

    .top-message>.inner>.box>.logo {
      width: 120px;
      margin-top: 22px;
    }
  }

  @media (max-width: 896px) {

    .top-message .image-person {
      opacity: 0;
    }
  }

  @media (max-width: 896px) {

    [data-visible="true"]:is(.top-message .image-person) {
      opacity: 1;
    }
  }

  .top-movie {
    position: relative;
    padding-inline: 40px;
  }

  @media (max-width: 896px) {

    .top-movie {
      padding-inline: 24px;
    }
  }

  .top-movie>.inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-block: 89px 200px;
  }

  @media (max-width: 896px) {

    .top-movie>.inner {
      max-width: 100%;
      padding-block: 90px 130px;
    }
  }

  .top-movie-box {
    width: 810px;
    margin: 0 auto;
    color: #004098;
    color: var(--blue);
  }

  @media (max-width: 896px) {

    .top-movie-box {
      width: 100%;
    }
  }

  .top-movie-box>.title {
    position: relative;
    width: 364px;
    padding-left: 97px;
    margin: 0 auto 37px;
  }

  @media (max-width: 896px) {

    .top-movie-box>.title {
      width: 172px;
      padding-left: 46px;
      margin-bottom: 25px;
    }
  }

  .top-movie-box>.title::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 72px;
    height: 72px;
    background: url("/assets/images/top/icon-cube-01.png") left center no-repeat;
    background-size: contain;
    content: "";
    transform: translateY(-50%);
  }

  @media (max-width: 896px) {

    .top-movie-box>.title::before {
      width: 36px;
      height: 36px;
    }
  }

  .top-movie-box>.description {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 2;
    text-align: center;
  }

  @media (max-width: 896px) {

    .top-movie-box>.description {
      font-size: 0.9375rem;
      letter-spacing: -0.01em;
      line-height: 2;
      text-align: left;
    }
  }

  .top-movie-box>.box-video {
    position: relative;
    width: 100%;
    max-width: 594px;
    margin: 28px auto 0;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-video {
      margin-top: 20px;
    }
  }

  .top-movie-box .link-video {
    margin-top: 29px;
    text-align: center;
  }

  @media (max-width: 896px) {

    .top-movie-box .link-video {
      margin-top: 11px;
    }
  }

  :is(.top-movie-box .link-video)>.text {
    color: #004098;
    color: var(--blue);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 2.5;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (min-width: 897px) {

    :is(.top-movie-box .link-video)>.text:hover {
      text-decoration: none;
    }
  }

  :is(.top-movie-box .link-video)>.text>span {
    position: relative;
    padding-right: 18px;
  }

  :is(.top-movie-box .link-video)>.text>span::after {
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    display: block;
    width: 0;
    height: 0;
    border-width: 5.5px 0 5.5px 13px;
    border-style: solid;
    border-color: transparent transparent transparent #004098;
    border-color: transparent transparent transparent var(--blue);
    content: "";
    transform: translateY(-50%);
  }

  .top-movie-box>.box-video::after {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% + 9px);
    display: block;
    width: 0;
    height: 0;
    border-width: 18px 0 18px 45px;
    border-style: solid;
    border-color: transparent transparent transparent #004098;
    border-color: transparent transparent transparent var(--blue);
    content: "";
    transform: translate(-50%, -50%);
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-video::after {
      top: 50%;
      left: 50%;
      border-width: 10px 0 10px 25px;
    }
  }

  .top-movie-box>.box-video::before {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% + 4px);
    display: block;
    width: 114px;
    height: 114px;
    border: 3px solid #004098;
    border: 3px solid var(--blue);
    border-radius: 100%;
    background-color: rgb(255 255 255 / 80%);
    content: "";
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-out;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-video::before {
      top: 50%;
      left: calc(50% - 2px);
      width: 63px;
      height: 63px;
      border-width: 2px;
    }
  }

  @media (min-width: 897px) {

    .top-movie-box>.box-video:hover::before {
      width: 96px;
      height: 96px;
    }
  }

  .top-movie-box>.box-profile {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 109px auto 0;
    padding-block: 54px 67px;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-profile {
      max-width: 100%;
      margin-top: 50px;
      padding-block: 6.66667vw 8.8vw;
    }
  }

  :is(.top-movie-box > .box-profile)::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 54px;
    background: url("/assets/images/top/box-top-pc.png") top center no-repeat;
    background-size: 100%;
    content: "";
  }

  @media (max-width: 896px) {

    :is(.top-movie-box > .box-profile)::before {
      height: 6.66667vw;
      background-image: url("/assets/images/top/box-top-sp.png");
    }
  }

  :is(.top-movie-box > .box-profile)::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 67px;
    background: url("/assets/images/top/box-bottom-pc.png") bottom center no-repeat;
    background-size: 100%;
    content: "";
  }

  @media (max-width: 896px) {

    :is(.top-movie-box > .box-profile)::after {
      height: 8.8vw;
      background-image: url("/assets/images/top/box-bottom-sp.png");
    }
  }

  .top-movie-box>.box-profile>.inner {
    background: url("/assets/images/top/box-middle-pc.png") center repeat-y;
    background-size: 100%;
    padding-inline: 40px 43px;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-profile>.inner {
      background-image: url("/assets/images/top/box-middle-sp.png");
      padding-inline: 33px 35px;
    }
  }

  .top-movie-box>.box-profile>.inner>.text {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-profile>.inner>.text {
      margin-top: 8px;
      font-size: 0.75rem;
      line-height: 1.75;
    }
  }

  .top-movie-box>.box-making {
    width: 100%;
    max-width: 594px;
    margin: 74px auto 0;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making {
      margin-top: 66px;
    }
  }

  .top-movie-box>.box-making>.title {
    position: relative;
    width: 164px;
    margin: 0 auto 36px;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.title {
      width: 156px;
      margin-bottom: 31px;
    }
  }

  .top-movie-box>.box-making>.box {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.box {
      flex-direction: column;
      gap: 42px;
    }
  }

  .top-movie-box>.box-making>.box>.video {
    position: relative;
    width: 246px;
    flex: 1 0 auto;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.box>.video {
      width: 100%;
    }
  }

  .top-movie-box>.box-making>.box>.video::after {
    position: absolute;
    top: calc(50% + 1px);
    left: calc(50% + 4px);
    display: block;
    width: 0;
    height: 0;
    border-width: 10px 0 10px 25px;
    border-style: solid;
    border-color: transparent transparent transparent #004098;
    border-color: transparent transparent transparent var(--blue);
    content: "";
    transform: translate(-50%, -50%);
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.box>.video::after {
      top: 50%;
      left: 50%;
    }
  }

  .top-movie-box>.box-making>.box>.video::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 64px;
    height: 64px;
    border: 2px solid #004098;
    border: 2px solid var(--blue);
    border-radius: 100%;
    background-color: rgb(255 255 255 / 80%);
    content: "";
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-out;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.box>.video::before {
      top: 50%;
      left: calc(50% - 2px);
      width: 63px;
      height: 63px;
      border-width: 2px;
    }
  }

  @media (min-width: 897px) {

    .top-movie-box>.box-making>.box>.video:hover::before {
      width: 55px;
      height: 55px;
    }
  }

  .top-movie-box>.box-making>.box>.text {
    width: 100%;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.7;
  }

  @media (max-width: 896px) {

    .top-movie-box>.box-making>.box>.text {
      font-size: 0.9375rem;
      letter-spacing: -0.01em;
      line-height: 2;
      padding-inline: 3px;
    }
  }

  .box-profile-info {
    display: flex;
    gap: 20px;
  }

  @media (max-width: 896px) {

    .box-profile-info {
      align-items: center;
      gap: 13px;
    }
  }

  .box-profile-info>figure {
    position: relative;
    z-index: 3;
    width: 104px;
    flex: 1 0 auto;
  }

  @media (max-width: 896px) {

    .box-profile-info>figure {
      width: 70px;
      margin-top: 4px;
    }
  }

  .box-profile-info>.box {
    position: relative;
    z-index: 3;
    width: 100%;
  }

  @media (max-width: 896px) {

    .box-profile-info>.box {
      padding-top: 0;
    }
  }

  .box-profile-info>.box>.name {
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
  }

  @media (max-width: 896px) {

    .box-profile-info>.box>.name {
      padding-top: 3px;
      margin-bottom: 0;
      font-size: 1rem;
      line-height: 1.5;
    }
  }

  .box-profile-info>.box>.name>span {
    font-size: 0.875rem;
  }

  @media (max-width: 896px) {

    .box-profile-info>.box>.name>span {
      display: block;
      font-size: 0.75rem;
    }
  }

  .box-profile-info>.box>.text {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.7;
  }

  @media (max-width: 896px) {

    .box-profile-info>.box>.text {
      font-size: 0.75rem;
      line-height: 1.75;
    }
  }

  .top-whats {
    position: relative;
    padding-inline: 40px;
  }

  @media (max-width: 896px) {

    .top-whats {
      padding-inline: 25px;
    }
  }

  .top-whats>.inner {
    width: 100%;
    max-width: 1165px;
    padding-top: 50px;
    margin: 0 auto;
  }

  @media (max-width: 896px) {

    .top-whats>.inner {
      max-width: 100%;
      padding-top: 10px;
    }
  }

  .top-whats>.inner>h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 80px;
  }

  @media (max-width: 896px) {

    .top-whats>.inner>h2 {
      flex-direction: column;
      margin-bottom: 32px;
    }
  }

  .top-whats>.inner>h2>.title {
    width: 840px;
  }

  @media (max-width: 896px) {

    .top-whats>.inner>h2>.title {
      width: 255px;
    }
  }

  .top-whats>.inner>.image {
    width: 25.34722vw;
    margin: 40px auto 0;
  }

  @media (max-width: 896px) {

    .top-whats>.inner>.image {
      width: 192px;
    }
  }

  /* ---------------------------------------------
  .box-whats-slide
------------------------------------------------ */
  .box-whats-slide>.item {
    display: flex;
    width: calc(33.33333% - 56.66667px);
    flex-direction: column;
  }

  @media (max-width: 896px) {
    .box-whats-slide>.item {
      width: 100%;
    }
  }

  :is(.box-whats-slide > .item)>* {
    flex: 1;
  }

  /* ---------------------------------------------
  .box-whats-slide-wrap
------------------------------------------------ */
  @media (max-width: 896px) {
    .box-whats-slide-wrap {
      padding-bottom: 40px;
    }
  }

  @media (min-width: 897px) {
    .box-whats-slide-wrap {
      visibility: visible;
      visibility: initial;
    }
  }

  @media (min-width: 897px) {

    .box-whats-slide-wrap .splide__track {
      overflow: visible;
    }
  }

  @media (min-width: 897px) {

    .box-whats-slide-wrap .box-whats-slide {
      gap: min(85px, 6.85484vw);
    }
  }

  .box-whats-slide-wrap .splide__pagination {
    bottom: 0;
    padding: 0;
    gap: 15px;
  }

  .box-whats-slide-wrap .splide__pagination__page {
    width: 12px;
    height: 12px;
    border: 1px solid rgb(134 140 142 / 60%);
    border-radius: 15px;
    margin: 0;
    background-color: #fff;
    opacity: 1;
    transform: none;
    transition-property: all;
  }

  .box-whats-slide-wrap .splide__pagination__page.is-active {
    border-color: #004098;
    border-color: var(--blue);
    background-color: #004098;
    background-color: var(--blue);
  }

  @keyframes scroll-bounce {

    0%,
    100% {
      bottom: -16px;
    }

    50% {
      bottom: -26px;
    }
  }

  @keyframes logo-fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .splash-screen {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    width: 100dvw;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    opacity: 1;
    transition: opacity 0.6s ease-out;
  }

  .splash-screen .inner {
    padding: 50px;
  }

  .splash-screen .logo {
    animation: logo-fade-in 1.5s ease-out forwards;
  }

  .splash-screen .logo img {
    max-width: 100%;
    height: auto;
  }

  .main-content {
    position: relative;
  }
}