@charset "UTF-8";
/* CSS Document */

/* MV */
html {scroll-behavior: smooth;}

h1 {
  width: 230px;
}

@media (max-width: 1024px) {
  h1 {
    width: 175px;
  }
}

@media (max-width: 768px) {
  h1 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

@media (max-width: 500px) {
  h1 {
    margin-top: 70px;
    margin-bottom: 70px;
    width: 140px;
  }
}


.mv-logo {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .mv-logo {
    width: 100%;
  }
}


h1 img {
  width: 100%;
}
.mv {
  background-color: #fcfcfc;
}

.mv-cont {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  margin-bottom: 200px;
  position: relative;
}
@media (max-width: 1024px) {
  .mv-cont {
    margin-bottom: 100px;
    height: auto;
  }
}
@media (max-width: 768px) {
  .mv-cont {
    flex-direction: column-reverse;
    margin-bottom: 200px;
    height: auto;
    width: 92%;
  }
}


.mv-image {
  width: 50%;
}

@media (max-width: 768px) {
  .mv-image {
    width: 100%;
  }
}

.mv-image img {
  height: 100vh;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .mv-image img {
    height: auto;
    object-fit: fill;
  }
}
@media (max-width: 768px) {
  .mv-image img {
    height: auto;
  }
}

/* About */

.cont-about {
  max-width: 1440px;
  margin: 0 auto;
}

.cont-titlle {
  margin-bottom: 160px;
}
@media (max-width: 1024px) {
  .cont-titlle {
    margin-bottom: 100px;
  }
}
@media (max-width: 768px) {
  .cont-titlle {
    margin-bottom: 110px;
  }
}
@media (max-width: 480px) {
  .cont-titlle {
    margin-bottom: 80px;
  }
}

.cont-wrapper {
  width: 79%;
}

.about-main {
  display: flex;
  justify-content: space-between;
}

.about-informaition {
  min-width: 700px;
  margin-left: auto;
  width: 95%;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .about-informaition {
    min-width: 228px;
  }
}
@media (max-width: 768px) {
  .about-informaition {
    flex-direction: column-reverse;
  }
}

.about-informaition-tex {
  width: 40%;
  margin-top: 70px;
  line-height: 3.6rem;
  margin-left: 50px;
}
@media (max-width: 1024px) {
  .about-informaition-tex {
    width: 52%;
    margin-left: 30px;
  }
}
@media (max-width: 768px) {
  .about-informaition-tex {
    width: 90%;
    margin-left: 0px;
    margin: 0 auto;
    margin-top: 0px;
  }
}
@media (max-width: 480px) {
  .about-informaition-tex {
    font-size: 1.4rem;
    width: 100%;
    line-height: 3.2rem;
  }
}

.more-button {
  text-align: end;
  margin-top: 30px;
  max-width: 1200px;
}
@media (max-width: 480px) {
  .more-button {
    margin-top: 10px;
    line-height: 2.2rem;
  }
}

.more-button {
  border-bottom: 1px solid #b1b1b1;
  display: table;
  margin-left: auto;
  padding-right: 20px;
}

.more-button::after {
  content: "";
    border-bottom: 1px solid #4f823e;
    height: 1px;
    width: 0;
    display: table;
    margin-left: auto;
    position: absolute;
    animation: widthAnimation-about 2s ease-in-out infinite;
}


@keyframes widthAnimation-about {
  0% {
    width: 0%;
    /* 幅を0%に設定 */
  }

  100% {
    width: 89.75px;
    /* 幅を100%に設定 */
  }
}
@media (max-width: 768px) {
  .more-button a {
    font-size: 1.4rem;
  }

  @keyframes widthAnimation-about {
    0% {
      width: 0%;
      /* 幅を0%に設定 */
    }

    100% {
      width: 81.03px;
      /* 幅を100%に設定 */
    }
  }
}

@media (max-width: 480px) {
  .more-button a {
    font-size: 1.2rem;
    padding-bottom: 4px;
  }

  @keyframes widthAnimation-about {
    0% {
      width: 0%;
      /* 幅を0%に設定 */
    }

    100% {
      width: 72.31px;
      /* 幅を100%に設定 */
    }
  }
}
.about-image {
  width: 33%;
}

@media (max-width: 768px) {
  .about-image {
    width: 70%;
    margin: 0 auto;
  }
}

.about-image img {
  width: 100%;
}



/* Youtube */

.cont-movie {
  max-width: 1440px;
  margin: 0 auto;
  margin-bottom: 200px;
}
@media (max-width: 1024px) {
  .cont-movie {
    margin-bottom: 100px;
  }
}
@media (max-width: 480px) {
  .cont-movie {
    margin-bottom: 80px;
  }
}

.cont-wrapper.video {
  text-align: center;
  width: 100%;
}

iframe {
  width: 60%;
  aspect-ratio: 16/9;
}

@media (max-width: 1024px) {
  iframe {
    width: 70%;
  }
}

@media (max-width: 768px) {
  iframe {
    width: 80%;
  }
}

@media (max-width: 640px) {
  iframe {
    width: 90%;
  }
}

@media (max-width: 375px) {
  iframe {
    width: 95%;
  }
}
.more-button-youtube {
  text-align: end;
  margin-top: 30px;
  max-width: 80%;
  margin-left: 73%;
  display: table;
  border-bottom: 1px solid #b1b1b1;
  padding-right: 20px;
  line-height: 3.6rem;
}

@media (max-width: 1024px) {
  .more-button-youtube {
    margin-left: 75%;
  }
}

@media (max-width: 640px) {
  .more-button-youtube {
    max-width: 94%;
  }
}

@media (max-width: 480px) {
  .more-button-youtube {
    line-height: 3.2rem;
  }
}

.more-button-youtube::after {
  content: "";
  border-bottom: 1px solid #4f823e;
  height: 1px;
  width: 0;
  display: table;
  margin-left: auto;
  position: absolute;
  animation: widthAnimation-youtube 2s ease-in-out infinite;
}


@keyframes widthAnimation-youtube {
  0% {
    width: 0%;
    /* 幅を0%に設定 */
  }

  100% {
    width: 76.13px;
    /* 幅を100%に設定 */
  }
}


@media (max-width: 768px) {
  .more-button-youtube {
    font-size: 1.4rem;
    margin-left: 79%;
  }

  @keyframes widthAnimation-youtube {
    0% {
      width: 0%;
      /* 幅を0%に設定 */
    }

    100% {
      width: 69.12px;
      /* 幅を100%に設定 */
    }
  }
}

@media (max-width: 480px) {
  .more-button-youtube {
    font-size: 1.2rem;
    margin-left: 76%;
    line-height: 2.2rem;
  }

  @keyframes widthAnimation-youtube {
    0% {
      width: 0%;
      /* 幅を0%に設定 */
    }

    100% {
      width: 62.1px;
      /* 幅を100%に設定 */
    }
  }
}



@media (max-width: 768px) {
  .more-button-youtube a {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .more-button-youtube a {
    font-size: 1.2rem;
    padding-bottom: 4px;
  }
}


/* Works */

.cont-works {
  margin-bottom: 200px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .about-image {
    max-width: 1440px;
    margin: 0 auto;
    margin-bottom: 60px;
  }
}

@media (max-width: 480px) {
  .about-image {
    width: 82%;
    margin-bottom: 50px;
  }
}

.cont-wrapper.works {
  width: 100%;
  padding: 0 30px;
}

@media (max-width: 768px) {
  .cont-wrapper.works {
    width: 100%;
    padding: 0px;
  }
}

.works-bg {
  background-color: #f4f6f2;
  padding-bottom: 160px;
  padding-top: 55px;
}

@media (max-width: 480px) {
  .works-bg {
    padding-bottom: 140px;
    padding-top: 30px;
  }
}

.works-inner {
  width: 82%;
  margin: 0 auto;
}

.works-inner_text {
  width: 86%;
  min-width: 600px;
  margin: 0 auto;
  margin-top: 50px;
  line-height: 3.6rem;
}

@media (max-width: 768px) {
  .works-inner_text {
    width: 100%;
    min-width: 0px;
    margin: 0 auto;
    margin-top: 0px;
    line-height: 3.6rem;
  }
}

@media (max-width: 480px) {
  .works-inner_text {
    font-size: 1.4rem;
    line-height: 3.2rem;
  }
}

.works-list {
  margin-top: -64px;
}

@media (max-width: 1024px) {
  .works-list {
    margin-top: -40px;
  }
}

@media (max-width: 768px) {
  .works-list {
    margin-top: -34px;
  }
}

@media (max-width: 640px) {
  .works-list {
    margin-top: -20px;
  }
}

.works-cd {
  display: flex;
  width: 68%;
  margin: -128.5px auto 0;
  justify-content: space-between;
  margin-bottom: 200px;
}

@media (max-width: 1024px) {
  .works-cd {
    width: 75%;
    margin-bottom: 100px;
  }
}

@media (max-width: 768px) {
  .works-cd {
    flex-direction: column-reverse;
    display: block;
    width: 68%;
    margin: -128.5px auto 0;
    justify-content: space-between;
  }
}

.works-cd li {
  width: 40%;
  line-height: 3.6rem;
}

@media (max-width: 768px) {
  .works-cd li {
    width: 100%;
    line-height: 3.6rem;
    margin-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .works-cd li:last-child {
    margin-bottom: 0px;
  }
}

@media (max-width: 480px) {
  .works-cd li {
    line-height: 3.2rem;
  }
}

.works-cd li p {
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .works-cd li p {
    font-size: 1.4rem;
    margin-bottom: 0px;
  }
}

.works-cd li a {
  color: #4f823e;
  border-bottom: 1px solid #4f823e;
  padding-bottom: 5px;
  font-size: 1.2rem;
}

@media (max-width: 480px) {
  .works-cd li a {
    font-size: 1.1rem;
  }
}

.works-cd h3 {
  display: inline-block;
  background-color: #e0eee5;
  padding: 0 10px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .works-cd h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
}

.works-line-bg img {
  width: 100%;
}

.works-cd_img {
  width: 56%;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .works-cd_img {
    margin: 0 auto 40px;
  }
}

@media (max-width: 480px) {
  .works-cd_img {
    margin-top: 30px;
  }
}

@media (max-width: 375px) {
  .works-cd_img {
    margin-top: 43px;
  }
}


.works-cd_img img {
  width: 100%;
}

@media (max-width: 768px) {
  .works-cd {
    display: block;
    width: 68%;
    margin: -128.5px auto 0;
    justify-content: space-between;
    margin-bottom: 100px;
  }
}

@media (max-width: 480px) {
  .works-cd {
    width: 80%;
    margin-bottom: 80px;
  }
}


/* Lesson */

.lesson-description {
  display: flex;
  justify-content: space-around;
  margin-bottom: 150px;
}
@media (max-width: 1024px) {
  .lesson-description {
    margin-bottom: 80px;
  }
}
@media (max-width: 900px) {
  .lesson-description {
    display: block;
  }
}
@media (max-width: 760px) {
  .lesson-description {
    margin-bottom: 60px;
  }
}
@media (max-width: 480px) {
  .lesson-description {
    margin-bottom: 50px;
  }
}

.lesson-description p {
  font-size: 1.8rem;
  text-align: left;
  line-height: 3.6rem;
}

@media (max-width: 900px) {
  .lesson-description p {
    font-size: 1.6rem;
    line-height: 3.4rem;
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .lesson-description p {
    font-size: 1.4rem;
    line-height: 3.2rem;
  }
}


.lesson-description h3 {
  color: #4f823e;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 35px;
  line-height: 3.6rem;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .lesson-description h3 {
    font-size: 2.2rem;
  }
}

@media (max-width: 900px) {
  .lesson-description h3 {
    font-size: 2.0rem;
  }
}

@media (max-width: 480px) {
  .lesson-description h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    line-height: 3.2rem;
  }
}

.lesson-description_text {
  width: 54%;
}

@media (max-width: 1280px) {
  .lesson-description_text {
    width: 65%;
  }
}

@media (max-width: 900px) {
  .lesson-description_text {
    width: 100%;
  }
}


.lesson-details {
  display: inline-block;
  background-color: #f8fcf5;
}

.lesson-details_list {
  padding: 30px 50px;
}

@media (max-width: 1024px) {
  .lesson-details_list {
    padding: 30px 40px;
  }
}

@media (max-width: 768px) {
  .lesson-details_list {
    padding: 30px 117px;
  }
}

@media (max-width: 700px) {
  .lesson-details_list {
    padding: 30px 100px;
  }
}

@media (max-width: 600px) {
  .lesson-details_list {
    padding: 30px 85px;
  }
}

@media (max-width: 480px) {
  .lesson-details_list {
    padding: 40px 43px;
  }
}


.cont-tittle.lesson {
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .cont-lesson .cont-wrapper {
    width: 100%;
  }

}

.cont-lesson {
  max-width: 1440px;
  margin: 0 auto;
}

.lesson-details_list h3 {
  color: #4f823e;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0px;
}

@media (max-width: 480px) {
  .lesson-details_list h3 {
    font-size: 1.6rem;
  }
}

.lesson-details_list h3::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: #4f823e;
  margin-top: 2px;
}

.lesson-details_list p {
  font-size: 1.6rem;
}

@media (max-width: 480px) {
  .lesson-details_list p {
    font-size: 1.4rem;
  }
}

.lesson-details_list span {
  font-size: 1.8rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .lesson-details_list span {
    font-size: 1.4rem;
  }
}

.lesson-details_list li {
  margin-bottom: 28px;
}

.lesson-content_img {
  width: 39.6%;
}

.lesson-content_img.sp {
  display: none;
}

@media (max-width: 1024px) {
  .lesson-content_img {
    width: 35%;
  }
}

@media (max-width: 900px) {
  .lesson-content_img {
    width: 50%;
    margin: 0 auto;
  }

  .lesson-content_img.sp {
    display: block;
    margin-bottom: -40px;
    position: relative;
  }

  .lesson-content_img.pc {
    display: none;
  }
}

@media (max-width: 480px) {
  .lesson-content_img.sp {
    width: 75%;
    position: relative;
  }
}

.lesseon-line_bg {
  position: absolute;
  bottom: -10%;
}

.lesson-description_text_inner {
  margin-bottom: 40px;
  margin-left: 50px;
}

@media (max-width: 768px) {
  .lesson-description_text_inner {
    margin-left: 0px;
    width: 70%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .lesson-description_text_inner {
    width: 83%;
  }
}




/* Contact */

.cont-contact {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
  margin-bottom: 150px;
}

@media (max-width: 768px) {
  .cont-contact {
    margin-bottom: 100px;
  }
}

@media (max-width: 480px) {
  .cont-contact {
    margin-bottom: 80px;
  }
}

.contact-tex {
  text-align: left;
  display: inline-block;
  width: 74%;
}

@media (max-width: 900px) {
  .contact-tex {
    width: 100%;
  }

}
@media (max-width: 768px) {
  .contact-tex {
    width: 100%;
  }

}

.contact-description p {
  margin-top: 50px;
}

@media (max-width: 480px) {
  .contact-description p {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}

@media (max-width: 480px) {
  .contact-description br {
    display: none;
  }
}

.form {
  border: 1px solid #4f823e;
  margin-top: 75px;
  display: inline-block;
  position: relative;
}

@media (max-width: 480px) {
  .form {
    margin-top: 40px;
  }
}

.cont-contact a {
  display: block;
  padding: 33px 85px;
}

@media (max-width: 1024px) {
  .cont-contact a {
    padding: 25px 70px;
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  .cont-contact a {
    padding: 20px 65px;
  }
}

@media (max-width: 480px) {
  .cont-contact a {
    padding: 10px 45px;
    font-size: 1.2rem;
  }
}


.contact-parts {
  width: 59px;
}

@media (max-width: 768px) {
  .contact-parts {
    width: 50px;
  }
}

@media (max-width: 480px) {
  .contact-parts {
    width: 40px;
  }
}

.contact-parts {
  position: absolute;
  right: -15px;
  bottom: -15px;
  transition: 0.3s;
}

@media (max-width: 1024px) {
  .contact-parts {
    right: -13px;
    bottom: -13px;
  }
}

@media (max-width: 768px) {
  .contact-parts {
    right: -12px;
    bottom: -12px;
  }
}

@media (max-width: 480px) {
  .contact-parts {
    right: -10px;
    bottom: -10px;
  }
}


.cont-contact a:hover+.contact-parts {
  right: 0;
  bottom: 0;
}




/* Slider */

.slider img {
  width: 100%;
  /*スライダー内の画像を横幅100%に*/
  height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin: 0 7px;
  /*スライド左右の余白調整*/
}

.cont-slider {
  background-color: #f4f6f2;
  padding: 73px 0;
  margin-bottom: 250px;
}

@media (max-width: 768px) {
  .cont-slider {
    margin-bottom: 130px;
  }
}
@media (max-width: 480px) {
  .cont-slider {
    margin-bottom: 100px;
  }
}















/*スクロールダウン全体の場所*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 0;
  left: 55%;
  animation-delay: 1s;
}

@media (max-width: 768px) {
  .scrolldown2 {
    bottom: -144px;
    left: 50%;
  }
}



/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 9px;
  bottom: 0;
  transform: translateY(-75%);

  /*テキストの形状*/
  color: #333;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

@media (max-width: 1024px) {
  .scrolldown2 span {
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  .scrolldown2 span {
    font-size: 1.0rem;
  }
}


/* スクロールダウンの丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -3.5px;
  z-index: 1;
  /*丸の形状*/
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f823e;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@media (max-width: 768px) {
  .scrolldown2:before {
    width: 10px;
    height: 10px;
    left: -4.5px;
  }
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: 125px;
  }

  100% {
    bottom: -5px;
  }
}

@media (max-width: 1024px) {
  @keyframes circlemove {
    0% {
      bottom: 100px;
    }

    100% {
      bottom: -5px;
    }
  }
}

@media (max-width: 768px) {
  @keyframes circlemove {
    0% {
      bottom: 80px;
    }

    100% {
      bottom: -5px;
    }
  }
}



/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1;
  }

  80% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 1px;
  height: 125px;
  background: #C8C8C8;
}

@media (max-width: 1024px) {
  .scrolldown2:after {
    height: 100px;
  }
}

@media (max-width: 768px) {
  .scrolldown2:after {
    height: 82px;
  }
}

/* スクロールダウンの出現アニメーション */
.scroll-down_fadeUp {
  animation-name: scroll-down_fadeUp;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes scroll-down_fadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Loadingここから　*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #F4F6F2;
  color: #fff;
}
/* Loading画像中央配置　*/
#loading-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 144px;
}
@media (max-width: 768px) {
  #loading-image {
    width: 100px;
  
  }
}
/* Loading アイコンの大きさ設定　*/
#loading-image img {
  width: 100%;
}
/* fadeUpをするアイコンの動き */
.loading-action {
  animation: shake 2s infinite;
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
#splash p {
  font-size: 2rem;
  color: #4F823E;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 210%);
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #splash p {
   font-size: 1.4rem;
   transform: translate(-50%, 130%);
  }
}