@charset "utf-8";

/* common */
/* body {
  background-color: #EAF6FF;
} */

main {
  background-color: #eaf6ff;
  padding-bottom: 40px;
}

.section {
  padding: 0;
  margin: 40px 20px 0;
}

.section-lesson, .section-teacher, .section-mypace, .section-cancel, .section-line {
  padding: 30px 10px;
  border-radius: 20px;
  border: 3px solid #3FA9F6;
  background-color: #FFF;
}

.section-tittle {
  color: #3867D6;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.picture {
  margin: 30px auto 0;
}

.text {
  font-size: 1.6rem;
}

.content-text {
  margin-top: 30px;
}

.pc-br {
  display: none;
}

.picture-sec {
  display: none;
}

@media screen and (min-width:768px) {
  main {
    padding: 0 10px 80px;
  }
  
  .picture {
    display: none;
  }

  .picture-sec {
    display: flex;
    margin: 0 auto;
  }

  .picture-sec img {
    margin-top: 0;
  }

  .section {
    max-width: 850px;
    margin: 80px auto 0;
    display: flex;
    align-items: flex-start;
  }

  .section-tittle {
    font-size: 30px;
    text-align: start;  
  }

  .text {
    max-width: 526px;
  }

  .pc-br {
    display: block;
  }
}

/* header */
.main-header {
  height: 522px;
  background-image: url(../images/reason-main-sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainheader-container {
  animation: fadein 3s ease-out forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}


.main-tittle {
  color: #FFF;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 80px;
}

@media screen and (min-width:768px) {
  .main-header {
    background-image: url(../images/reason-main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-tittle {
    font-size: 4rem;
    margin: 0;
  }

}

/* section lead */
.section-lead {
  padding: 40px 21px 0px;
}

.lead-text {
  font-size: 1.8rem;
}

.circles {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.circle-tittle {
  color: #FFF;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  background-color: #3FA9F6;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width:768px) {
  .section-lead {
    padding-top: 80px;
  }
  
  .lead-text-div {
    display: flex;
   justify-content: center;
  }
}

/* section lesson */
.picture-one {
  width: 200px;
}

@media screen and (min-width:768px) {
  .section-lesson {
    padding: 40px 50px 40px;
  }

  .picture-one {
    width: 200px;
    margin-top: 20px;
  }
}

/* section teacher */
.picture-two {
  width: 265px;
}

@media screen and (min-width:768px) {
  .section-teacher {
    padding:  40px 50px;
  }

  .picture-two {
    width: 280px;
    margin: 30px 0 0 30px;
  }
}

/* section mypace */
.picture-three {
  width: 140px;
}

@media screen and (min-width:768px) {
  .section-mypace {
    padding: 40px 60px 40px;
  }

  .picture-three {
    margin: 5px 0 0 50px;
  }
}

/* section cancel */
.picture-four {
  width: 200px;
}

@media screen and (min-width:768px) {
  .section-cancel {
    padding: 40px 0 40px 60px;
  }

  .picture-four {
    margin: 10px 0 0 20px;
  }
}


/* section-line */
.picture-five {
  width: 125px;
}

@media screen and (min-width:768px) {
  .section-line {
    padding: 40px 60px;
  }
  .picture-five {
    width: 127px;
    margin: 30px 0 0 50px;
  }

  .line-content .picture-and-text .text {
    max-width: 550px;
  }
}

/* footer  */