/*! Writen  by SCSS */
.main {
  position: relative;
  aspect-ratio: 16 / 9;
  transition: 0.5s all ease-in-out 0.2s; }
  .main .movie_btns {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 7;
    pointer-events: none;
    transition: 0.5s all ease-in-out 0s; }
    .main .movie_btns .main_ui {
      position: absolute;
      left: 20px;
      bottom: 20px;
      pointer-events: all; }
      @media screen and (max-width: 768px) {
        .main .movie_btns .main_ui {
          left: 10px;
          bottom: 10px; } }
      .main .movie_btns .main_ui .skip_replay p {
        float: left;
        line-height: 36px;
        width: 90px;
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0.05em;
        transition: all 0.5s ease-in-out 0s;
        cursor: pointer;
        border: 1px solid #FFF;
        background: rgba(0, 0, 0, 0.2); }
        @media screen and (max-width: 480px) {
          .main .movie_btns .main_ui .skip_replay p {
            font-size: 10px;
            line-height: 20px;
            width: 70px; } }
      .main .movie_btns .main_ui .replay {
        position: relative;
        z-index: 5; }
        body:not(.opening_end) .main .movie_btns .main_ui .replay {
          display: none; }
      .main .movie_btns .main_ui .skip {
        position: relative;
        z-index: 99999; }
        body.opening_end .main .movie_btns .main_ui .skip {
          display: none; }
    body.opening_end .main .movie_btns {
      z-index: 3; }
    body.btn_hide .main .movie_btns {
      opacity: 0;
      pointer-events: none; }
  .main .video_wrap {
    transition: opacity 3.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 5; }
    .main .video_wrap video {
      width: 100%; }
  .main.s1 .video_wrap {
    opacity: 0;
    pointer-events: none;
    transition: 0.8s opacity ease-in-out 0s; }
  .main .slide_main {
    opacity: 0;
    transition: 0.3s opacity ease-in-out 0s; }
    .main .slide_main .swiper-slide {
      position: relative; }
    .main .slide_main .fix_img img {
      width: 100%; }
    .main .slide_main .slide_prev,
    .main .slide_main .slide_next {
      color: #fff; }
  .main.s1 .slide_main {
    opacity: 1; }

.mainvisual {
  position: relative; }
  .mainvisual .main_ttl_wrap {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .mainvisual .main_ttl_wrap .main_ttl {
      font-size: clamp(30px, 3.334vw, 40px);
      color: #FFF;
      line-height: 1; }

.merit_area {
  background: #003a40;
  background: #000;
  padding: 20px 0; }
  @media screen and (max-width: 768px) {
    .merit_area {
      padding: 10px 0; } }
  @media screen and (max-width: 480px) {
    .merit_area {
      padding: 0px 20px; } }
  .merit_area .merit_in {
    max-width: 1400px;
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .merit_area .merit_in {
        flex-wrap: wrap;
        justify-content: space-between; } }
    @media screen and (max-width: 480px) {
      .merit_area .merit_in {
        width: 100%;
        flex-direction: column; } }
    .merit_area .merit_in .merit_img {
      position: relative;
      padding: 20px;
      width: calc(100% / 3); }
      @media screen and (max-width: 768px) {
        .merit_area .merit_in .merit_img {
          width: 50%;
          text-align: center;
          padding: 15px 20px; } }
      @media screen and (max-width: 480px) {
        .merit_area .merit_in .merit_img {
          width: 100%;
          padding: 20px 0; } }
      @media screen and (max-width: 480px) {
        .merit_area .merit_in .merit_img:not(:first-child) {
          border-top: 1px solid #FFF; } }
      .merit_area .merit_in .merit_img:nth-child(3n):after {
        content: none; }
      .merit_area .merit_in .merit_img:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background: #FFF;
        width: 1px;
        transform: rotate(15deg); }
        @media screen and (max-width: 768px) {
          .merit_area .merit_in .merit_img:after {
            content: none; } }

.information_area {
  padding-top: clamp(50px, 7.5vw, 90px);
  margin-bottom: clamp(60px, 10vw, 120px); }
  .information_area .infor_in {
    padding-bottom: clamp(50px, 7.5vw, 90px);
    border-bottom: 1px solid #666; }
    .information_area .infor_in .infor_ttl {
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 3px double #666; }
    .information_area .infor_in .infor {
      max-width: 500px;
      max-width: 700px;
      margin: 0 auto; }

.ilmited_area {
  margin-top: clamp(40px, 5vw, 60px);
  margin-bottom: clamp(50px, 8.334vw, 100px); }
  .ilmited_area .limited_bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../images/bg_limited.jpg");
    padding: 20px; }
    @media screen and (max-width: 480px) {
      .ilmited_area .limited_bg {
        padding: 15px; } }
    .ilmited_area .limited_bg .limited_in {
      background: rgba(255, 255, 255, 0.9);
      padding: 40px 20px clamp(50px, 5.933vw, 70px);
      text-align: center; }
      @media screen and (max-width: 480px) {
        .ilmited_area .limited_bg .limited_in {
          padding: 20px; } }
      .ilmited_area .limited_bg .limited_in .lim_ttl {
        font-size: clamp(17px, 1.751vw, 21px);
        margin-bottom: clamp(30px, 3.334vw, 40px);
        margin-bottom: clamp(10px, 1.667vw, 20px); }
        @media screen and (max-width: 480px) {
          .ilmited_area .limited_bg .limited_in .lim_ttl {
            font-size: 6vw;
            font-size: 5vw;
            line-height: 1.5;
            margin-bottom: 30px; } }
      .ilmited_area .limited_bg .limited_in .lim_pamph_wrap {
        max-width: 840px;
        max-width: 900px;
        margin: 0 auto;
        align-items: center; }
        @media screen and (max-width: 480px) {
          .ilmited_area .limited_bg .limited_in .lim_pamph_wrap {
            flex-direction: column;
            row-gap: 20px; } }
        .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_pamph {
          width: 36.79%;
          width: 41.78%; }
          @media screen and (max-width: 480px) {
            .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_pamph {
              width: 100%;
              text-align: center; } }
        .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn {
          width: 54.77%;
          width: 51.12%; }
          @media screen and (max-width: 480px) {
            .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn {
              width: 100%; } }
          .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .lim_read {
            text-align: left;
            font-size: clamp(12px, 1.417vw, 17px);
            margin-bottom: clamp(30px, 4.167vw, 50px);
            font-weight: 500; }
            @media screen and (max-width: 480px) {
              .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .lim_read {
                font-size: 3.4vw;
                margin-bottom: 20px; } }
          .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .cv_btn {
            max-width: 375px;
            margin: 0 auto; }
            @media screen and (max-width: 480px) {
              .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .cv_btn {
                flex-direction: column;
                row-gap: 15px; } }
            .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .cv_btn a {
              width: 100%; }
              @media screen and (max-width: 480px) {
                .ilmited_area .limited_bg .limited_in .lim_pamph_wrap .lim_txt_btn .cv_btn a {
                  width: 100%; } }

/*# sourceMappingURL=top.css.map */
