@charset "utf-8";

/*-----------------------------

TOP MOVIE

----------------------------*/

/* video */
.top_movie .video {
  width: 100%;
  height: auto;
}

/*-----------------------------

TOP BANNER

----------------------------*/

.top_banner {
  margin: 10px auto;
}

.top_banner #top-slider {
  width: 100%;
}

.top_banner li img {
  width: 100%;
}

/*-----------------------------

INFO MOVIE

----------------------------*/

.info_movie {
  width: 94%;
  margin: 10px auto;
}

/* video */
.info_movie .video {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 769px) {
  .info_movie {
    max-width: 780px;
  }
}

/*-----------------------------

MIDDLE BANNER、BOTTOM BANNER

----------------------------*/

.middle_banner,
.bottom_banner {
  width: 100%;
  margin: 10px auto;
}

.middle_banner ul,
.bottom_banner ul {
  display: flex;
  flex-direction: column;
}

.middle_banner li,
.bottom_banner li {
  margin-bottom: 20px;
}

.middle_banner li img,
.bottom_banner li img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .middle_banner,
  .bottom_banner {
    max-width: 960px;
  }
}

/*-----------------------------

TOP SCHEDULE

----------------------------*/

.top_schedule {
  margin: 10px auto;
}

/*-----------------------------

TOP FIXBANNER

----------------------------*/

.top_fixbanner .inner {
  width: 100%;
  padding: 0;
  margin: 0 auto 20px auto;
}

.top_fixbanner .inner img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .top_fixbanner .inner {
    max-width: 780px;
  }
}

/*-----------------------------

TOP INFORMATION

----------------------------*/

.top_information {
  width: 100%;
  margin: 0 auto;
  padding: 0 1%;
}

.top_information_inner {
  width: 100%;
  margin: 0 auto;
}

.top_information h2.title_bg {
  width: 100%;
  margin: 0 auto !important;
}

.top_information .top_information_box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow-y: scroll;
  background: #fff;
  border-left: 2px #000 solid;
  border-right: 2px #000 solid;
  border-bottom: 2px #000 solid;
  box-sizing: border-box;
  padding: 15px;
}

.top_information_list li {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.5rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.information_mark {
  width: 40px;
}

.information_mark span {
  color: #f80000;
  font-size: 0.75rem;
  font-weight: bold;
  font-style: italic;
}

.information_body {
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.information_body a {
  text-decoration: underline;
}

.information_description {
  font-size: 0.75rem;
  font-weight: bold;
  font-style: italic;
  overflow-wrap: break-word;
}

.information_description::before {
  content: "・";
}

.information_date {
  font-size: 0.5rem;
  font-style: italic;
}

@media screen and (min-width: 769px) {
  .top_information_inner {
    max-width: 1200px;
  }

  .top_information .top_information_box {
    aspect-ratio: 4 / 1;
    padding: 20px;
  }

  .information_mark {
    width: 70px;
  }

  .information_mark span {
    font-size: 1.5rem;
  }

  .information_body {
    width: calc(100% - 70px);
  }

  .information_description {
    font-size: 1.5rem;
  }

  .information_date {
    font-size: 1rem;
  }
}

/*-----------------------------

TOP TRAINING

----------------------------*/

.top_training {
  margin: 10px auto;
}

.training_info img {
  width: 100%;
  margin: 40px auto;
}

/*-----------------------------

TOP NEWFACE

----------------------------*/

.top_newface {
  margin: 10px auto;
}

.newface_info img {
  width: 100%;
  margin: 40px auto;
}

/*-----------------------------

PHILOSOPHY

----------------------------*/

.top_newface {
  margin: 10px auto;
}

.philosophy p {
  font-size: 0.8rem;
  margin-bottom: 1lh;
}

@media screen and (min-width: 769px) {
  .philosophy p {
    font-size: 1.5rem;
  }
}
/*-----------------------------

GROUP BANNER

----------------------------*/

.group_banner {
  margin: 10px auto;
}

.group_banner ul {
  width: 80%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

.group_banner li img {
  width: 100%;
}

/*-----------------------------

INFOMOVIE

----------------------------*/

.infomovie {
  width: 100%;
  margin: 0 auto;
  padding: 0 3%;
}

.infomovie .video {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 769px) {
  .infomovie {
    max-width: 780px;
  }
}