@charset "UTF-8";
/*
Theme Name: サワムラガク足立 インストラクター
Author: あそびラボ
*/

/*=======================================================
メイン背景色
=======================================================*/
main {
  background: #f4f1df;
}
/*=======================================================
h1
=======================================================*/
.h1_wrapper {
  background-color: #f4f1df;
}
.h1_wrapper h1 {
  padding: 0 0 0 80px;
}
.h1_wrapper h1::before {
  content: "";
  background: url(../images/common/instructor_hagumi.svg) no-repeat;
  background-size: contain;
  width: 68px;
  height: 107px;
  display: block;
  position: absolute;
  left: 309px;
  top: -20px;
}
@media screen and (max-width: 750px) {
  .h1_wrapper h1::before {
    left: 142px;
    top: -13px;
  }
}
/*=======================================================
インストラクター紹介
=======================================================*/
main h2 {
  background:
    url(../images/top/tree3.png) bottom left 228px / 55px 66px no-repeat,
    url(../images/top/tree3.png) bottom right 228px / 55px 66px no-repeat;
  height: 68px;
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 1020px;
  margin: 0 auto;
}
main ul:last-of-type {
  margin-bottom: 30px;
}
main ul::after {
  content: "";
  width: 33%;
}
main ul li {
  width: 298px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 50px;
}
main ul li .img {
  order: 1;
  width: 298px;
  height: 247px;
  position: relative;
  margin: 0 0 18px;
  background: #f5f8f9;
  display: flex;
  justify-content: center;
  align-items: center;
}
main ul li .img span {
  content: "";
  background: url(../images/instructor/frame.png) no-repeat;
  background-size: contain;
  width: 298px;
  height: 247px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
main ul li .img img {
  width: 298px;
  height: 245px;
}
main ul li h3 {
  order: 2;
  background: #33b666;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  border-radius: 10px;
  height: 49px;
  width: 100%;
  padding-top: 12px;
  margin: 0 0 18px;
}
main ul li h4 {
  order: 3;
  font-size: 20px;
  color: #33cc66;
  font-weight: bold;
  width: 100%;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 10px;
}
main ul li p {
  order: 5;
  font-size: 17px;
  line-height: 1.53;
}
main .consultant {
  display: flex;
  align-items: flex-start;
  padding: 0 0 150px;
}
main .consultant .img {
  width: 298px;
  height: 247px;
  position: relative;
  margin: 0 40px 18px 0;
  flex-shrink: 0;
}
main .consultant .img img {
  width: 298px;
  height: 245px;
}
main .consultant .img span {
  content: "";
  background: url(../images/instructor/frame.png) no-repeat;
  background-size: contain;
  width: 298px;
  height: 247px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
main .consultant h3 {
  background: #33b666;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  border-radius: 10px;
  height: 49px;
  width: 295px;
  padding-top: 12px;
  margin: 0 0 18px;
}
main .consultant h4 {
  font-size: 24px;
  color: #33cc66;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 10px;
}
main .consultant p {
  font-size: 17px;
  line-height: 1.53;
}
@media screen and (max-width: 750px) {
  main h2 {
    font-size: 42px;
    margin: 0 0 30px;
    background:
      url(../images/sp/top/tree3.png) center left / 66px 88px no-repeat,
      url(../images/sp/top/tree3.png) center right / 66px 88px no-repeat;
    height: 97px;
  }
  main ul {
    display: block;
    width: initial;
  }
  main ul li {
    width: initial;
    margin: 0 0 70px;
  }
  main ul li h3 {
    font-size: 38px;
    height: 70px;
    width: 447px;
    padding-top: 17px;
    margin: 0 auto 30px;
  }
  main ul li h4 {
    font-size: 34px;
    margin: 0 0 18px;
  }
  main ul li p {
    font-size: 28px;
    line-height: 1.42;
  }
  main ul li .img {
    width: 446px;
    height: 370px;
    margin: 0 auto 34px;
  }
  main ul li .img img {
    width: initial;
    height: initial;
  }
  main ul li .img span {
    width: 446px;
    height: 370px;
  }
  main .consultant {
    display: block;
    padding: 0 0 80px;
  }
  main .consultant .img {
    width: 446px;
    height: 370px;
    margin: 0 auto 34px;
  }
  main .consultant .img span {
    background: url(../images/instructor/frame.png) no-repeat;
    background-size: contain;
    width: 446px;
    height: 370px;
  }
  main .consultant .img img {
    width: initial;
    height: initial;
  }
  main .consultant h3 {
    font-size: 38px;
    height: 70px;
    width: 447px;
    padding-top: 20px;
    margin: 0 auto 30px;
  }
  main .consultant h4 {
    font-size: 34px;
    margin: 0 0 18px;
    text-align: center;
  }
  main .consultant p {
    font-size: 28px;
    line-height: 1.42;
  }
}