body {
  font-family: "fot-tsukuardgothic-std", sans-serif;
}

@media (min-width: 991.98px) {
  .container-lesson {
    position: relative;
    padding: 180px 0 20vw 0;
    height: auto;
    width: 100%;

    overflow-x: hidden;
    background-image: url("../images-2/back_lesson_about.png");
    background-size: 100%;
    background-position: 0 8vw;
    background-repeat: no-repeat;
  }

  .container-lesson .img-title {
    display: block;
    margin: auto;
    height: 36px;
  }

  .container-lesson .subtitle {
    display: block;
    margin: auto;
    margin-top: 30px;
    width: 80%;
    text-align: center;
    font-size: 1.4vw;
  }

  .container-lesson .text-policy {
    margin-left: auto;
    width: 70%;
    font-size: 30px;
    color: #336876;
    font-family: "ten-mincho", serif;
    font-style: italic;
  }

  .container-lesson .text-explain {
    margin-left: auto;
    width: 70%;
  }

  .container-lesson .img-person {
    display: block;
    padding-top: 0px;
    margin-left: 20%;
    width: 60%;
    height: auto;
  }

  .container-lesson .detail {
    padding-top: 60px;
  }
}

@media (max-width: 991.98px) {
  .container-lesson {
    position: relative;
    padding: 180px 0 8vw 0;
    height: auto;
    width: 100%;
    margin-bottom: 10vw;

    /* 背景画像設定 */
    overflow-x: hidden;
    background-image: url("../images-2/back_lesson_about.png");
    background-size: 140% auto;
    background-position: -30vw 300px;
    /* 追加 */
    background-repeat: no-repeat;
  }

  .container-lesson .img-title {
    display: block;
    margin: auto;
    height: 30px;
  }

  .container-lesson .subtitle {
    display: block;
    margin: 25px auto;
    width: 90%;
    min-width: 200px;
    font-size: clamp(14px, 3vw, 20px);
    text-align: center;
  }

  .container-lesson .text-policy {
    margin: 0 10vw;
    width: 70%;
    font-size: 30px;
    color: #336876;
    font-family: "ten-mincho", serif;
    font-style: italic;
  }

  .container-lesson .text-explain {
    margin: 0 auto;
    width: 80%;
  }

  .container-lesson .img-person {
    display: block;
    padding-top: 40px;
    margin-right: 5vw;
    width: 40%;
  }

  .container-lesson .detail {
    padding-top: 40px;
  }
}

.number {
  display: flex;
  align-items: center;
}

.number .text-number {
  font-size: 30px;
  color: #336876;
  font-family: "ten-mincho", serif;
  font-style: italic;
}

.container-image {
  margin-top: 2vw;
  margin-bottom: 8vw;
}

.container-image .text-title {
  font-size: 24px;
  color: #336876;
}

.container-image .text-explain {
  font-size: 16px;
}

.image-1 {
  position: relative;
  width: 60%;
  margin-left: 15%;
}

.image-2 {
  position: relative;
  width: 60%;
  margin-left: auto;
  margin-right: 15%;
}

.container-system {
  position: relative;
  padding: 120px 0 5vw 0;
  height: auto;
  width: 100%;
}

.container-system .img-title {
  display: block;
  margin: 0 auto;
  border-radius: 0.4em;
  width: 18%;
  padding: 20px;
  color: #fff;
}

.container-system .subtitle {
  display: block;
  margin: 0 auto;
  margin-top: 25px;
  font-size: clamp(14px, 1.4vw, 20px);
  text-align: center;
}

.block-system {
  width: 70%;
}

.lesson-title {
  text-align: center;
  color: #336876;
  margin-bottom: 20px;
  font-family: "ten-mincho", serif;
  font-size: 1.6vw;
  font-weight: 200;
  font-style: normal;
}

.taimen {
  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.online {
  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.container-system .system {
  width: 80%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.text-price {
  margin-left: auto;
  margin-right: 20px;
  color: #336876;
  text-align: center;
  font-family: "ten-mincho", serif;
}

.text-hour {
  margin-right: auto;
  margin-left: 3px;
  color: #336876;
  padding: 6px;
  background-color: #d9d9d9;
  text-align: center;
  font-family: "ten-mincho", serif;
  font-weight: 800;
  font-size: 1.2vw;
}

@media (max-width: 991.98px) {
  .container-system .img-title {
    display: block;
    padding: 0;
    margin: auto;
    width: 30%;
    min-width: 150px;
  }

  .container-system .subtitle {
    display: block;
    margin: 0 auto;
    margin-top: 25px;
    width: 90%;
    font-size: clamp(14px, 1.4vw, 20px);
    text-align: center;
  }

  .block-system {
    width: 100%;
  }

  .lesson-title {
    text-align: center;
    color: #336876;
    margin-bottom: 10px;
    font-family: "ten-mincho", serif;
    font-size: 5vw;
    font-weight: 200;
    font-style: normal;
  }

  .container-image .text-title {
    font-size: 4vw;
    color: #336876;
    margin-bottom: 5vw;
  }

  .container-image .text-explain {
    font-size: 3.2vw;
  }

  .image-1 {
    position: relative;
    width: 80%;
    margin: 20vw auto;
  }

  .image-2 {
    position: relative;
    width: 80%;
    margin: 20vw auto;
  }

  .taimen {
    padding: 20px 0 50px 0;
    width: 80%;
    display: flex;
    justify-content: center;
  }

  .online {
    padding: 20px 0 50px 0;
    width: 80%;
    display: flex;
    justify-content: center;
  }

  .container-system .system {
    width: 100%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .text-price {
    margin-left: auto;
    margin-right: 3vw;
    color: #336876;
    text-align: center;
    font-family: "ten-mincho", serif;
  }

  .text-hour {
    margin-right: auto;
    margin-left: 3px;
    color: #336876;
    padding: 6px;
    background-color: #d9d9d9;
    text-align: center;
    font-family: "ten-mincho", serif;
    font-weight: 800;
    font-size: 4vw;
  }
}

.container-system .explain {
  margin: auto;
  padding: 10px 0 30px 0;
  width: 80%;
  color: #000000;
}

.container-detail img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

@media (max-width: 991.98px) {
  .container-detail img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}

@media (min-width: 991.98px) {
  .container-detail .text-title {
    text-align: center;
    color: #336876;
    padding-top: 2vw;
    font-size: 2vw;
  }

  .container-detail .text-explain {
    text-align: center;
    margin: auto;
    width: 65%;
    padding-top: 1vw;
    font-size: 1.4vw;
  }
}

@media (max-width: 991.98px) {
  .container-detail .text-title {
    text-align: center;
    color: #336876;
    padding-top: 2vw;
    font-size: 4vw;
  }

  .container-detail .text-explain {
    text-align: center;
    margin: auto;
    width: 75%;
    padding-top: 1vw;
    font-size: 3.8vw;
  }
}

.container-detail .text-online {
  text-align: center;
}

.container-rental {
  margin-top: 10vw;
  position: relative;
  height: auto;
}

@media (min-width: 768px) {
  .container-rental {
    width: 100%;
    height: 62vw;
  }

  .container-rental .detail {
    position: absolute;
    width: 90%;
    height: 64vw;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    /* 背景画像設定 */
    overflow-x: hidden;
    background-image: url("../images-2/rental.png");
    background-size: 80% auto;
    background-position: center 0;
    /* 追加 */
    background-repeat: no-repeat;
  }

  .container-rental .detail .text-explain {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    text-align: center;
    font-size: 1.3vw;
    z-index: 1;
  }

  .block-violin {
    position: absolute;
    top: 17%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0%);
    text-align: center;
    z-index: 1;
  }

  .container-rental .img-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    width: 80%;
  }

  .container-rental .violin {
    background-color: #ededed;
    text-align: center;
    margin: 2vw 0;
    margin-right: 2vw;
    padding: 1.2vw 0.8vw;
  }

  .violin-title {
    padding-left: 10px;
    font-size: 1.1vw;
    text-align: start;
    color: #336876;
    font-weight: 100;
  }

  .violin-explain {
    padding-top: 1vw;
    padding-left: 10px;
    font-size: 1.1vw;
    text-align: start;
  }

  .bottom {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 80%;
    height: 50px;
    transform: translate(-50%, 0%);
    text-align: center;
    font-size: 1.3vw;
    z-index: 1;
  }

  .bottom-title {
    margin-top: 8vw;
    color: #336876;
    font-size: 1.6vw;
  }

  .bottom-text {
    margin: 0 auto;
    margin-top: 2vw;
    width: 80%;
    font-size: 1.1vw;
  }
}

@media (max-width: 768px) {
  .container-rental {
    position: relative;
    width: 100%;
    height: 220vw;
  }

  .container-rental .detail {
    position: absolute;
    width: 90%;
    height: 100%;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    /* 背景画像設定 */
    overflow-x: hidden;
    background-image: url("../images-2/rental_smartphone.png");
    background-size: 100% auto;
    background-position: center 0;
    /* 追加 */
    background-repeat: no-repeat;
  }

  .container-rental .detail .text-explain {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 80%;
    text-align: center;
    font-size: 2.8vw;
    z-index: 1;
  }

  .container-rental .violin {
    background-color: #ededed;
    text-align: center;
    margin: 2vw 0;
    margin-right: 2vw;
    padding: 1.2vw 0.8vw;
  }

  .block-violin-1 {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
  }

  .block-violin-2 {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
  }

  .container-rental .img-image {
    margin: auto;
    width: 80%;
  }

  .violin-title {
    font-size: 3vw;
  }

  .violin-explain {
    font-size: 2.8vw;
  }

  .bottom {
    position: absolute;
    top: 78%;
    left: 50%;
    width: 80%;
    height: 50px;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
  }

  .bottom-title {
    margin-top: 3vw;
    color: #336876;
    font-size: 4vw;
  }

  .bottom-text {
    margin: 0 auto;
    margin-top: 2vw;
    font-size: 2.8vw;
    width: 100%;
  }
}

.bg-color {
  width: 100%;
  margin: 70px auto;
  height: auto;
  background-color: rgba(192, 223, 216, 0.4);
  box-shadow: 0 0 20px 10px rgba(192, 223, 216, 0.4);
  overflow: hidden;
}

.container-start {
  position: relative;
  padding: 0 0 0 0;
  height: auto;
  margin: 50px auto;
  width: 85%;
}

.container-start .img-title {
  display: block;
  margin: 0 auto;
  border-radius: 0.4em;
  width: 30%;
  min-width: 250px;
  padding: 20px;
}

.container-start .flowchart {
  display: block;
  border-radius: 0.4em;
  margin-top: 20px;
  width: 80%;
  height: auto;
  padding: 20px;
}

.container-start .text-explain {
  text-align: center;
  margin-top: 25px;
}

.block-contact {
  width: 40vw;
  margin: auto;
}

.btn-contacts {
  position: relative;
  margin: 5vw auto;
  width: 40vw;
  height: 5vw;
  border: 1px solid #33687678;
  background-color: #9bd9ea14;
  border-radius: 50px;
}

.btn-contacts .text {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-size: 1.4vw;
  text-align: center;
  color: #336876;
  font-family: "fot-tsukuardgothic-std", sans-serif;
}

.notice {
  margin-left: 30%;
  text-align: start;
  font-size: 1vw;
}

@media (max-width: 991.98px) {
  .container-start .flowchart {
    display: block;
    border-radius: 0.4em;
    margin-top: 20px;
    width: 100%;
    height: auto;
  }

  .startright {
    margin: 5vw 0;
    width: 20px;
    transform: rotate(90deg);
  }

  .block-contact {
    width: 80vw;
    margin: auto;
  }

  .btn-contacts {
    position: relative;
    margin: 5vw auto;
    width: 80vw;
    height: 12vw;
    border: 1px solid #33687678;
    background-color: #9bd9ea14;
    border-radius: 50px;
  }

  .btn-contacts .text {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 4vw;
    text-align: center;
    color: #336876;
    font-family: "fot-tsukuardgothic-std", sans-serif;
  }

  .notice {
    margin: 10vw auto;
    text-align: start;
    font-size: 3vw;
  }
}

/* フォント読み込み状態のスタイル */
.font-load {
  visibility: hidden;
}

/* アニメーション用のスタイル */
.animate-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.animate-element.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* フェードインのみのアニメーション用スタイル */
.animate-fade {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

.animate-fade.animate-in {
  opacity: 1;
}