@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
/*mv
--------------------------------------------------------------------------------------------------------------------------*/
.mv_area img {
      width: 100%;
}
/*main_bg
--------------------------------------------------------------------------------------------------------------------------*/
.main_bg {
      position: relative;
}
.main_bg:before {
      content: "";
      background: url("../images/top/bg_pc.webp") no-repeat;
      background-size: cover;
      background-position: top;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      mix-blend-mode: multiply;
      z-index: -2;
}
@media screen and (max-width: 680px) {
      .main_bg:before {
            background: url("../images/top/bg_sp.webp") no-repeat;
            background-size: cover;
      }
}
/*about_area
--------------------------------------------------------------------------------------------------------------------------*/
.bg_ora {
      position: relative;
}
.bg_ora:before {
      content: "";
      position: absolute;
      background: url("../images/top/bg_gra_pc.webp") no-repeat;
      background-size: cover;
      background-position: top;
      width: 100%;
      height: 100%;
      z-index: -10;
}
.title_img {
      text-align: center;
      margin: auto;
}
.title_img img {
      width: 100%;
}
.title_about h2 {
      text-align: center;
      margin: auto;
      width: 39em;
}
.r_titrle span {
      display: inline-block;
      background: #fff;
      color: var(--col_main);
      font-weight: bold;
      padding: 0.2em 1.5em;
      border-radius: 10em;
      font-size: 1.75em;
}
.lead p + p {
      margin-top: 1em;
}
.about_lead {
      letter-spacing: 1px;
      font-size: 1.5em;
}
.about_lead_l {
      font-size: 1.8em;
}
.logo_about {
      width: 12em;
      margin: auto;
}
.logo_about img {
      width: 100%;
}
@media screen and (max-width: 680px) {
      .title_about h2 {
            width: 60%;
      }
      .r_titrle span {
            font-size: 1.4em;
      }
      .about_lead {
            font-size: 1.2em;
      }
      .about_lead_l {
            font-size: 1.5em;
      }
}
/*music_video_area
--------------------------------------------------------------------------------------------------------------------------*/
.music_video_area {
      padding: 2em 0 0 0;
}
.round_fream {
      display: block;
      z-index: -3;
      position: relative;
}
.round_fream img {
      width: 100%;
      aspect-ratio: 1920/138;
}
.round_fream_top_bottom {
      position: absolute;
      width: 100%;
      transform: translateY(-6em);
}
@media screen and (max-width: 680px) {
      .music_video_area {
            padding: 2em 0 3em 0;
      }
      .round_fream_top_bottom {
            transform: translateY(-2em);
      }
}
/*スライド
-------------------------------------------------*/
.slideshow_loop_list > li {
      overflow: hidden;
      border-radius: 1.5em;
      margin: 0 1em;
      width: 20%;
}
.slideshow_loop_list > li img {
      width: 100%;
}
/*title_music_video
-------------------------------------------------*/
.title_music_video {
      width: 52em;
}
.music_video_dance_logo {
      width: 56em;
      margin: auto;
}
.music_video_dance_logo img {
      width: 100%;
}
@media screen and (max-width: 680px) {
      .title_music_video {
            width: 90%;
      }
      .music_video_dance_logo {
            margin-top: 1em;
            width: 90%;
      }
}
/*title_music
-------------------------------------------------*/
.title_music {
      width: 16em;
}
@media screen and (max-width: 680px) {
      .title_music {
            width: 40%;
      }
}
/*music_video_logo
-------------------------------------------------*/
.music_video_logo {
      width: 43em;
      margin: auto;
      text-align: center;
}
.music_video_logo img {
      width: 100%;
}
@media screen and (max-width: 680px) {
      .music_video_logo {
            width: 90%;
      }
}
/*lyric_pdf
-------------------------------------------------*/
.lyric_pdf {
      text-align: center;
      margin: auto;
}
.lyric_pdf a {
      color: var(--col_sub);
      display: inline-block;
      text-align: center;
      font-weight: bold;
      position: relative;
      padding-bottom: 0.2em;
}
.lyric_pdf a:before, .lyric_pdf a:after {
      content: "";
      position: absolute;
}
.lyric_pdf a:before {
      background: var(--col_sub);
      width: 100%;
      height: 1px;
      left: 0;
      bottom: 0;
}
.lyric_pdf a:after {
      background: url("../images/top/ico_pdf.svg") no-repeat;
      background-size: contain;
      aspect-ratio: 32/40;
      width: 1.8em;
      right: -2.5em;
      top: -0.2em;
}
.message_movie {
      max-width: 515px;
      margin: auto;
      padding: 4em 0 0 0;
}
@media screen and (max-width: 680px) {
      .message_movie {
            padding: 2em 0 0 0;
      }
}
/*starling_area
--------------------------------------------------------------------------------------------------------------------------*/
.starling_area {}
.starling_inner {
      padding: 5em 0 15em 0;
}
@media screen and (max-width: 680px) {
      .starling_inner {
            padding: 2em 0 6em 0;
      }
}
/*title_star*/
.title_star {
      width: 44em;
}
@media screen and (max-width: 680px) {
      .title_star {
            width: 70%;
            ;
      }
}
/*starling_list*/
@media screen and (min-width: 681px), print {
      .starling_list > li + li {
            margin-top: 4em;
      }
      .starling_list_inner {
            font-size: 1.8rem;
            background: #fff;
            padding: 2em 6em 2em 2em;
            display: flex;
            justify-content: space-between;
            gap: 0 3em;
            border-radius: 10em;
      }
      .starling_list_inner .img {
            overflow: hidden;
            width: 22em;
            border-radius: 20em 0 0 20em;
      }
      .starling_list_inner .img img {
            width: 100%;
      }
      .starling_list_inner .text_box {
            width: calc(100% - 22em);
      }
}
@media screen and (max-width: 680px) {
      .starling_list > li + li {
            margin-top: 2em;
      }
      .starling_list_inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /*grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;*/
      }
      .starling_list_inner .img {
            grid-area: 1 / 1 / 2 / 2;
      }
      .starling_list_title {
            grid-area: 1 / 2 / 2 / 3;
      }
      .starling_list_lead {
            grid-area: 2 / 1 / 3 / 3;
      }
      .starling_list_inner {
            font-size: 1.8rem;
            background: #fff;
            padding: 1.5em 1.5em 1.5em 1.5em;
            border-radius: 3em;
      }
      .starling_list_inner .text_box {
            display: contents;
      }
      .starling_list_inner .img {
            overflow: hidden;
            border-radius: 2.6em 0 0 0;
      }
      .starling_list_inner .img img {
            width: 100%;
      }
}
/*starling_list_title*/
.starling_list_title {
      /*	font-weight: bold;*/
      font-size: 2.3em;
}
.starling_list_title span {
      font-size: 0.5em;
}
.starling_list_lead {
      font-size: 1.1em;
      line-height: 1.8;
}
@media screen and (max-width: 680px) {
      .starling_list_title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            flex-direction: column;
            margin-bottom: auto;
            font-size: 1.8em;
      }
      .starling_list_title span {
            display: block;
            font-size: 0.4em;
      }
      .starling_list_lead {
            margin-top: 1em;
      }
      .starling_list_lead {
            font-size: 0.8em;
            letter-spacing: 2px;
      }
}
/*movies_area
--------------------------------------------------------------------------------------------------------------------------*/
.movies_area {
      padding: 0 0 8em 0;
}
.title_movies {
      width: 26.25em;
}
.movie_flex {
      display: flex;
      justify-content: center;
      gap: 0 2em;
}
.movie_flex > .movie_flex_box {
      width: calc(100% / 2);
}
.movie_flex_title {
      width: 30em;
      margin-bottom: 2em;
}
.movie_flex > .movie_flex_box .img img {
      width: 100%;
}
@media screen and (max-width: 680px) {
      .movies_area {
            padding: 3em 0 2em 0;
      }
      .title_movies {
            width: 50%;
      }
      .movie_flex {
            display: block;
            width: 90%;
            margin: auto;
      }
      .movie_flex > .movie_flex_box {
            width: calc(100% / 2);
      }
      .movie_flex > .movie_flex_box + .movie_flex_box {
            margin-top: 4em;
      }
      .movie_flex > .movie_flex_box {
            width: auto;
      }
      .movie_flex_title {
            width: 80%;
            margin: auto auto 1em auto;
      }
}
/*モーダル
--------------------------------------------------------------------------------------------------------------------------*/
.modal-box {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(000, 000, 000, 0.75);
      z-index: 1000;
      justify-content: center;
      align-items: center;
}
.modal-box.active {
      display: flex;
}
.modal-content {
      width: 960px;
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
@media screen and (max-width: 1000px) {
      .modal-content {
            width: 90%;
            height: 90vh;
            height: auto;
      }
}
@media screen and (max-width: 680px) {
      .modal-content {
            height: 94vh;
      }
}
/*open colse*/
body.modal-open {
      overflow: hidden;
}
.close {
      position: absolute;
      top: -10px;
      right: -10px;
      cursor: pointer;
      width: 3.25em;
      aspect-ratio: 1;
}
.close img {
      width: 100%;
}
/*モーダル中身*/
.modal_content_inner {
      color: #fff;
}
/*point_list*/
.point_list {
      display: flex;
      flex-wrap: wrap;
      border-top: 1px #fff solid;
}
.point_list > li {
      padding: 1em;
      border-bottom: 1px #fff solid;
      width: calc(100% / 2);
      border-left: 1px #fff solid;
      box-sizing: border-box;
}
.point_list > li:first-child, .point_list > li:nth-child(odd) {
      border-left: none;
}
.point_list_title {
      font-size: 1.2em;
}
.point_list .text_box {
      font-size: 1.1em;
}
@media screen and (max-width: 680px) {
      .modal_content_inner {
            overflow-y: scroll;
            height: 95vh;
      }
      .point_list {
            display: block;
      }
      .point_list > li {
            padding: 1em 0;
            width: 100%;
            border-left: none;
      }
      .point_list_title {
            font-size: 1.1em;
      }
      .point_list .text_box {
            font-size: 0.9em;
      }
      .point_list .text_box .fz_m {
            font-size: 0.8em;
      }
}
/*movie*/
.youtube-player-container {
      display: none;
}
.html5-player-container {
      display: none;
}
#video-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 9999;
}
#video-popup .popup_w {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 1000px;
      background-color: #000;
      border-radius: 5px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#close-popup {
      position: absolute;
      top: -35px;
      right: -35px;
      width: 30px;
      height: 30px;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      z-index: 10000;
}
#youtube-player-container, #html5-player-container {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 アスペクト比 */
}
#youtube-player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}
#html5-player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
}