main {
  background: #F6F3EA;
  overflow-x: clip;
}

#mv {
  background: #EBE4D0;
  padding-bottom: 4rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 50% 100%, 0 calc(100% - 4rem));
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 50% 100%, 0 calc(100% - 4rem));
}
@media print, screen and (min-width: 768px) {
  #mv {
    background: #EBE4D0 url("../images/mv_bg_pc.svg") repeat-x center top/140rem;
    padding-bottom: 11.5rem;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11.5rem), 50% 100%, 0 calc(100% - 11.5rem));
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11.5rem), 50% 100%, 0 calc(100% - 11.5rem));
  }
  #mv .container {
    max-width: 100rem;
  }
}
#mv h1 {
  margin-inline: -2rem;
}
@media print, screen and (min-width: 768px) {
  #mv h1 {
    margin-inline: 0;
  }
}
#mv .lead {
  font-size: 1.8rem;
  line-height: 1.5;
}
@media print, screen and (min-width: 768px) {
  #mv .lead {
    font-size: 2rem;
    line-height: 1.8;
    margin-inline: 10rem;
  }
}
#mv .about {
  background: #fff;
  padding: 2rem;
  border-radius: 2rem;
  margin: 2rem auto;
}
#mv .about h2 {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
@media print, screen and (min-width: 768px) {
  #mv .about {
    padding: 4rem;
  }
  #mv .about h2 {
    text-align: left;
  }
  #mv .about h2 br {
    display: none;
  }
}

#flow {
  background: url("../images/bg_line_sp.svg") no-repeat center top/100%;
}
@media print, screen and (min-width: 768px) {
  #flow {
    background: url("../images/bg_line_pc.svg") no-repeat center top/241rem;
  }
}
#flow .row h4 {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 0.5em;
}
#flow .row p {
  font-size: 1.8rem;
}
@media print, screen and (min-width: 768px) {
  #flow .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #flow .row p {
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: normal;
  }
  #flow .row .img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
  }
  #flow .row .text {
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
  #flow .row.block1 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #flow .row.block1 .img {
    width: 48.6rem;
  }
  #flow .row.block1 .text {
    padding-left: 10rem;
  }
  #flow .row.block2 .img {
    width: 53.2rem;
  }
  #flow .row.block3 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #flow .row.block3 .img {
    width: 50.1rem;
  }
  #flow .row.block3 .text {
    padding-left: 22rem;
  }
  #flow .row.block4 .img {
    width: 48.4rem;
  }
  #flow .row.block5 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #flow .row.block5 .img {
    width: 48.4rem;
  }
  #flow .row.block5 .text {
    padding-left: 18rem;
  }
  #flow .row.block6 .img {
    width: 54.6rem;
  }
  #flow .row.block7 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  #flow .row.block7 .img {
    width: 56rem;
  }
  #flow .row.block7 .text {
    padding-left: 10rem;
  }
  #flow .row.block8 .img {
    width: 56.9rem;
  }
}
#flow #start {
  padding-bottom: 4rem;
}
#flow #start .lead {
  text-align: center;
}
#flow #start .lead h3 {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 0.5em;
}
@media print, screen and (min-width: 768px) {
  #flow #start .lead h3 {
    font-size: 4rem;
  }
}
#flow #start .lead p {
  font-size: 1.8rem;
}
@media print, screen and (min-width: 768px) {
  #flow #start .lead p {
    font-size: 2.2rem;
  }
}
#flow #start .end {
  background: #EBE4D0;
  padding: 3rem;
  border-radius: 0.5rem;
  margin: 4rem 0;
}
#flow #start .end p {
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.8;
}
@media print, screen and (min-width: 768px) {
  #flow #start .end {
    padding: 4rem 6rem;
    width: 100rem;
    margin-inline: auto;
  }
  #flow #start .end p {
    font-size: 2.4rem;
  }
}

#message {
  background: #000;
  color: #fff;
  padding-bottom: 1.5em;
  margin-bottom: -8rem;
}
#message h3 {
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
#message .name {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}
#message .name span {
  font-weight: 400;
  display: block;
}
#message .border {
  margin: 0 -2rem;
}
#message .message-box p {
  margin: 1em 0;
}
@media print, screen and (min-width: 768px) {
  #message {
    padding: 5rem 0;
  }
  #message .container {
    max-width: 82rem;
  }
  #message .teacher-box {
    width: 100%;
    height: 28.4rem;
    position: relative;
  }
  #message .teacher-box h2 {
    width: 36.3rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #message .teacher-box .photo {
    width: 28.4rem;
    position: absolute;
    top: 0;
    right: 0;
  }
  #message .teacher-box .name {
    position: absolute;
    top: 14rem;
    left: 0;
    text-align: left;
    font-size: 2.5rem;
    line-height: 1.6;
  }
  #message .teacher-box .border {
    position: absolute;
    width: 50rem;
    left: 0;
    bottom: 4rem;
    margin: 0;
  }
}/*# sourceMappingURL=pbl.css.map */