@charset "utf-8";

.comingsoon h4 {
  font-size: 3rem;
  color: lightgray;
  white-space: nowrap;
}
#sp_exh .comingsoon h4 {
  line-height: normal !important;
  margin-bottom: 26px;
}
.comingsoon_text {
  margin-top: 1em;
  font-size: 1rem;
}
#presentation_stage .comingsoon {
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit !important;
  padding: 0 !important;
}
.comingsoon + .btn_cont {
  text-align: left;
}
.comingsoon_block:not(.col2) .comingsoon + .btn_cont {
  text-align: center;
  width: 100%;
}
.comingsoon_block:not(.col2) .btn_cont .lec_arrow_cont_list_btn {
  margin-left: auto;
  margin-right: auto;
}

.comingsoon_block.col2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 80px;
}

.comingsoon_block.col2_l {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 2カラム comingsoon */
.comingsoon_block.col2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 60px;
}
.comingsoon_block .col2_l {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 1カラム comingsoon */
.comingsoon_block:not(.col2) {
  text-align: center;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.comingsoon_block:not(.col2) .comingsoon_text {
  margin-bottom: 20px;
}

/* howtoページのみcomingsoonテキスト非表示 */
.howto_page .comingsoon_text {
  display: none;
}

.sec_ttl:has(~ .comingsoon_block:not(.col2)) {
  margin-bottom: 0;
}

@media screen and (max-width: 1025px) {
  #sp_exh .comingsoon_block.col2 .col2_l {
    align-items: center;
    text-align: center;
  }
  #sp_exh .comingsoon_block.col2 .btn_cont .lec_arrow_cont_list_btn {
    margin-left: auto;
    margin-right: auto;
  }
  #sp_exh .comingsoon_block.col2 .col2_r {
    margin-top: 40px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .comingsoon h4 {
    font-size: 2rem;
  }
  .comingsoon,
  .comingsoon + .btn_cont {
    text-align: center;
  }
  .comingsoon_block.col2 {
    flex-wrap: wrap;
    gap: 20px;
  }

  .comingsoon_block:not(.col2) {
    text-align: center;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .comingsoon_block.col2 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .comingsoon_block.col2 .col2_r {
    margin-top: 40px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .comingsoon_block .btn_cont .lec_arrow_cont_list_btn {
    width: 32%;
    margin-left: auto;
    margin-right: auto;
    width: max-content !important;
  }
}