@charset "UTF-8";

.mv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.mv video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.mv .pc {
  display: none;
}

@media screen and (min-width: 520px) {
  .mv .pc {
    display: block;
  }

  .mv .sp {
    display: none;
  }
}

.key_title {
  height: 150vh;
}

.key_title .key_title_inner {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.key_title .key_title_inner img {
  width: 90%;
  max-width: 520px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

@media screen and (min-width: 520px) {
  .key_title .key_title_inner {
    justify-content: flex-end;
    transform: translateX(calc(var(--gutter-base) * -10));
  }
}

.concept_inner {
  margin-bottom: 25vh;
}

.concept .concept_text {
  color: var(--white-color);
  font-size: var(--size-lg);
  padding-left: var(--contents-side-gutter);
  padding-right: var(--contents-side-gutter);
}

.concept .concept_text p {
  margin-bottom: var(--size-lg);
}

.concept .concept_img {
  padding-left: var(--contents-side-gutter);
  padding-right: var(--contents-side-gutter);
  max-width: 500px;
}

@media screen and (min-width: 960px) {
  .concept .concept_inner {
    display: flex;
  }

  .concept .concept_img picture {
    position: sticky;
    top: calc(50vh - 175px);
  }
}

.menu {
  background-color: var(--white-color);
  padding: var(--section-gutter) 0;
}

.menu .menu_text {
  text-align: center;
  margin-bottom: var(--contents-gutter);
}

.menu .slider {
  margin-bottom: var(--contents-gutter);
}

.menu .slider li {
  padding: 0 calc(var(--gutter-base) * 2);
}

@media screen and (min-width: 960px) {
  .menu {
    padding: var(--section-gutter-pc) 0;
  }
}

.lesson {
  background-color: var(--white-color);
  padding: var(--section-gutter) 0;
}

.lesson .lesson_text {
  padding: 0 var(--contents-side-gutter);
  margin-bottom: var(--contents-gutter);
}

.lesson .lesson_img {
  display: block;
  padding: 0 var(--contents-side-gutter);
  margin-bottom: var(--contents-gutter);
}

@media screen and (min-width: 960px) {
  .lesson {
    padding: var(--section-gutter-pc) 0;
  }

  .lesson .lesson_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .lesson .lesson_img {
    grid-column: 2/3;
    grid-row: 1/4;
    margin-bottom: 0;
  }

  .lesson .btn {
    align-self: start;
  }
}

.bg_placeholder {
  height: 350px;
  opacity: 0;
}

@media screen and (min-width: 960px) {
  .bg_placeholder {
    height: 600px;
  }
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../../img/top_showcase.webp);
  background-size: cover;
  background-position: center center;
  z-index: -1;
  display: none;
}

.bg.on {
  display: block;
}

.news {
  background-color: var(--white-color);
  padding-top: var(--section-gutter);
  padding-bottom: var(--footer-gutter);
}

.news dl {
  padding: 0 var(--contents-side-gutter);
  margin-bottom: calc(var(--gutter-base) * 2);
}

.news dl:last-child {
  margin-bottom: 0;
}

.news dd {
  border-bottom: 2px dotted var(--main-color);
  padding-bottom: var(--gutter-base);
}

@media screen and (min-width: 520px) {
  .news dl {
    display: flex;
    border-bottom: 2px dotted var(--main-color);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .news dt {
    width: 30%;
  }

  .news dd {
    border-bottom: none;
    width: 70%;
  }
}

@media screen and (min-width: 960px) {
  .news {
    padding-bottom: var(--footer-gutter);
  }
}
.scroll_down {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: -1;
}

.scroll_down .arrow_down {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--white-color);
  border-right: 2px solid var(--white-color);
  transform: rotate(135deg);
}

.scroll_down::before {
  content: "";
  display: block;
  width: 2px;
  height: 90px;
  background-color: var(--white-color);
  position: relative;
  top: 8px;
  left: calc(50% - 1px);
  animation: arrow 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes arrow {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }

  50% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }

  51% {
    transform-origin: 0% 100%;
    transform: scaleY(1);
  }

  100% {
    transform-origin: 0% 100%;
    transform: scaleY(0);
  }
}