/*! Writen  by SCSS */
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Shippori+Mincho&display=swap");
.mainvisual {
  position: relative; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 480 / 500;
      overflow: hidden; } }
  .mainvisual .main_image_wrap {
    position: relative;
    overflow: hidden; }
    .mainvisual .main_image_wrap .main_image {
      position: relative;
      opacity: 0;
      transition: filter 1.2s ease;
      filter: grayscale(100%);
      transition: all 3.5s ease-in-out 0.5s; }
      @media screen and (max-width: 480px) {
        .mainvisual .main_image_wrap .main_image {
          width: 100%;
          height: 100%; } }
      @media screen and (max-width: 480px) {
        .mainvisual .main_image_wrap .main_image img {
          width: 100%;
          height: 100%;
          object-fit: cover; } }
    .mainvisual .main_image_wrap .main_txt_wrap {
      background: black;
      transition: 2s all ease-in-out 0.5s;
      position: absolute;
      inset: 0;
      margin: auto; }
      .mainvisual .main_image_wrap .main_txt_wrap .main_txt {
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        color: #fff;
        z-index: 1;
        opacity: 0;
        transition: all 2s ease-in-out 0.3s;
        width: calc(826%/16);
        margin: 0 auto; }
        @media screen and (max-width: 480px) {
          .mainvisual .main_image_wrap .main_txt_wrap .main_txt {
            width: calc(550%/16);
            top: 40%;
            width: 70%; } }
        .mainvisual .main_image_wrap .main_txt_wrap .main_txt figure {
          transition: 2s all ease-in-out 0.3s; }
          .mainvisual .main_image_wrap .main_txt_wrap .main_txt figure.txt_bk {
            position: absolute;
            inset: 0;
            margin: auto;
            opacity: 0; }
    .mainvisual .main_image_wrap .hikari {
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 1;
      transition: all 3s ease-in-out 0.4s;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      clip-path: inset(100% 0 0 0); }
    .mainvisual .main_image_wrap .plot {
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 3;
      transition: all 3s ease-in-out 0.4s;
      clip-path: inset(100% 0 0 0); }
    .mainvisual .main_image_wrap .hikari_kirakira {
      overflow: hidden;
      position: absolute;
      inset: 0;
      margin: auto;
      mix-blend-mode: screen;
      z-index: 1;
      opacity: 0;
      transition: all 3.5s ease-in-out 0.5s; }
      .mainvisual .main_image_wrap .hikari_kirakira p {
        padding-top: calc(25%/8.99);
        position: relative;
        overflow: hidden;
        height: 100%;
        width: 100%; }
      .mainvisual .main_image_wrap .hikari_kirakira img {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition-delay: 1s; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira {
          animation: hikari 10s linear 0s infinite both; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira01 {
          animation-delay: -2.5s !important;
          animation-duration: 4.5s !important; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira02 {
          animation-delay: -3s !important;
          animation-duration: 6.5s !important; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira03 {
          animation-delay: -3.5s !important;
          animation-duration: 8.5s !important; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira04 {
          animation-delay: -4s !important;
          animation-duration: 10.5s !important; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira05 {
          animation-delay: -4.5s !important;
          animation-duration: 12.5s !important; }
        .mainvisual .main_image_wrap .hikari_kirakira img.kira06 {
          animation-delay: -5s !important;
          animation-duration: 14.5s !important; }
    .mainvisual .main_image_wrap .main_image_wrap_cap {
      opacity: 0;
      transition: all 3.5s ease-in-out 0.5s; }
    .mainvisual .main_image_wrap .main_wappen {
      position: absolute;
      top: 10%;
      right: 20px;
      width: 20%;
      z-index: 20;
      opacity: 0;
      transition: all 0.6s ease-in-out 0.3s;
      filter: drop-shadow(2px 2px 5px #000); }
      @media screen and (max-width: 480px) {
        .mainvisual .main_image_wrap .main_wappen {
          top: auto;
          right: 0;
          bottom: 0;
          width: 40%; } }
    .mainvisual .main_image_wrap.s1 .main_image {
      opacity: 1; }
    .mainvisual .main_image_wrap.s1 .main_txt_wrap .main_txt {
      opacity: 1; }
    .mainvisual .main_image_wrap.s2 .main_txt_wrap {
      background: rgba(0, 0, 0, 0); }
    .mainvisual .main_image_wrap.s2 .main_image_wrap_cap {
      opacity: 1; }
    .mainvisual .main_image_wrap.s3 .main_image {
      filter: grayscale(0%); }
    .mainvisual .main_image_wrap.s3 .main_txt_wrap .main_txt {
      top: 12%;
      top: 5%; }
      @media screen and (max-width: 480px) {
        .mainvisual .main_image_wrap.s3 .main_txt_wrap .main_txt {
          top: 15%; } }
      .mainvisual .main_image_wrap.s3 .main_txt_wrap .main_txt figure.txt_w {
        opacity: 0; }
      .mainvisual .main_image_wrap.s3 .main_txt_wrap .main_txt figure.txt_bk {
        opacity: 1; }
    .mainvisual .main_image_wrap.s4 .plot,
    .mainvisual .main_image_wrap.s4 .hikari {
      clip-path: inset(0 0 0 0); }
    .mainvisual .main_image_wrap.s5 .hikari_kirakira img {
      animation: hikari 10s linear 0s infinite both; }
    .mainvisual .main_image_wrap.s6 .hikari_kirakira {
      opacity: 1; }
    .mainvisual .main_image_wrap.s7 .main_txt_wrap .main_txt {
      transition: all 3.5s ease-in-out; }
    .mainvisual .main_image_wrap.s8 .main_wappen {
      opacity: 1; }
@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-50%); } }
  .mainvisual .main_ttl_wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .mainvisual .main_ttl_wrap .main_ttl1 {
      font-size: clamp(16px, 1.834vw, 22px);
      letter-spacing: 0.2em;
      color: #FFF;
      line-height: 1;
      margin-bottom: 2.2em; }
    .mainvisual .main_ttl_wrap .main_ttl2 {
      font-size: clamp(30px, 3.834vw, 46px);
      letter-spacing: 0.2em;
      color: #FFF;
      line-height: 1;
      margin-bottom: 0.8em; }
      @media screen and (max-width: 480px) {
        .mainvisual .main_ttl_wrap .main_ttl2 {
          font-size: calc(28vw/4.8); } }

.lead {
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.7;
  letter-spacing: 0.2em; }
  @media screen and (max-width: 480px) {
    .lead {
      font-size: calc(17vw / 3.9);
      letter-spacing: 0.1em; } }

.read {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.666;
  letter-spacing: 0.12em; }
  @media screen and (max-width: 480px) {
    .read {
      font-size: calc(13vw / 3.9);
      letter-spacing: 0.05em; } }

.sec {
  position: relative;
  color: #fff; }
  .sec .sec_bg_img {
    overflow-x: hidden;
    mix-blend-mode: soft-light;
    width: calc(800%/16); }

.sec_obi {
  padding-block: 3%;
  background: #000; }
  @media screen and (max-width: 480px) {
    .sec_obi {
      padding-block: 7%; } }
  .sec_obi .inner {
    max-width: 1400px; }
  .sec_obi .mrt_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    color: #fff;
    line-height: 1;
    gap: 0 50px; }
    @media screen and (max-width: 1000px) {
      .sec_obi .mrt_box {
        gap: 0 20px; } }
    @media screen and (max-width: 768px) {
      .sec_obi .mrt_box {
        gap: 0;
        width: 100%; } }
    .sec_obi .mrt_box .mrt {
      color: #fff;
      text-align: center;
      letter-spacing: .25rem;
      font-size: clamp(10px, 1.924vw, 25px);
      line-height: 1; }
      @media screen and (max-width: 768px) {
        .sec_obi .mrt_box .mrt {
          line-height: 1.5;
          letter-spacing: .05rem;
          font-size: clamp(10px, 4.167vw, 25px); } }
      .sec_obi .mrt_box .mrt .place {
        font-size: clamp(10px, 2.693vw, 35px); }
        @media screen and (max-width: 768px) {
          .sec_obi .mrt_box .mrt .place {
            font-size: clamp(10px, 4.167vw, 25px);
            margin-right: 3%; } }
      .sec_obi .mrt_box .mrt .min {
        font-size: clamp(10px, 3.539vw, 46px);
        color: #deed8e;
        line-height: 0.8; }
        @media screen and (max-width: 768px) {
          .sec_obi .mrt_box .mrt .min {
            font-size: clamp(10px, 7.667vw, 46px); } }
      .sec_obi .mrt_box .mrt .distance {
        font-size: clamp(10px, 0.924vw, 12px);
        letter-spacing: .05rem; }
        @media screen and (max-width: 768px) {
          .sec_obi .mrt_box .mrt .distance {
            font-size: clamp(10px, 2vw, 12px);
            letter-spacing: .05rem; } }
      .sec_obi .mrt_box .mrt:first-child {
        width: 100%;
        margin-bottom: 3%;
        font-size: clamp(10px, 2.693vw, 35px); }
        @media screen and (max-width: 768px) {
          .sec_obi .mrt_box .mrt:first-child {
            margin-bottom: 5%;
            font-size: clamp(10px, 5vw, 35px); } }
        .sec_obi .mrt_box .mrt:first-child span {
          font-size: clamp(10px, 1.924vw, 25px);
          margin-left: 1%; }
          @media screen and (max-width: 768px) {
            .sec_obi .mrt_box .mrt:first-child span {
              font-size: clamp(10px, 4.167vw, 25px);
              margin-left: 0%; } }
      @media screen and (max-width: 768px) {
        .sec_obi .mrt_box .mrt:nth-child(2) {
          width: 100%; } }
      @media screen and (max-width: 768px) {
        .sec_obi .mrt_box .mrt:last-child {
          margin-top: 5%;
          width: 100%; } }
  .sec_obi .entry_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 370px;
    width: calc(100% - 20px);
    margin: 1.5em auto 0;
    aspect-ratio: 370 / 60;
    text-align: center;
    background: linear-gradient(137deg, #950606 0%, #b92d2d 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 5;
    transition: opacity 0.3s; }
    @media screen and (max-width: 480px) {
      .sec_obi .entry_btn {
        max-width: 220px; } }
    @media (hover: hover) {
      .sec_obi .entry_btn:hover {
        opacity: 0.7; } }
    .sec_obi .entry_btn .arrow {
      position: absolute;
      inset: 0;
      left: auto;
      right: 18px;
      margin: auto;
      line-height: 1;
      transform: scaleX(0.5);
      height: 1em; }

.bg_wrap {
  background: #131313;
  position: relative; }
  .bg_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background-image: url("../images/top/bg.png");
    background-position: top left;
    background-size: 100% auto;
    background-repeat: repeat-y;
    display: block;
    pointer-events: none;
    mix-blend-mode: overlay; }

/*# sourceMappingURL=top.css.map */