@charset "UTF-8";
@font-face {
  font-family: "ロゴたいぷゴシック-コンデンスド";
  src: url("https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff2") format("woff2");
}
@media print, screen and (min-width: 361px) {
  .spOnly360 {
    display: none;
  }
}

.aboutNav01 li {
  max-width: 320px;
  width: 32%;
}
@media screen and (max-width: 767px) {
  .aboutNav01 li {
    max-width: 490px;
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .aboutNav01 li:not(:last-child) {
    margin-bottom: 15px;
  }
}
.aboutNav01 a {
  width: 100%;
  padding: 0;
}
@media print, screen and (min-width: 1001px) {
  .aboutNav01 a {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  .aboutNav01 a {
    padding: 0 15px;
  }
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
  .aboutNav01 a {
    padding-right: 35px;
  }
}

.subTitleArea {
  background: url("../../common/images/line_common01.svg") repeat-x bottom, url("../images/bg_course01.jpg") no-repeat 100% 50%/cover;
}
@media screen and (max-width: 767px) {
  .subTitleArea {
    background: url("../../common/images/line_common01.svg") repeat-x bottom, url("../images/bg_course01_sp.jpg") no-repeat center center/cover;
  }
}
.subTitleArea.about {
  background: url("../../common/images/line_common01.svg") repeat-x bottom, url("../images/bg_about01.jpg") no-repeat 0 0/cover;
}
@media screen and (max-width: 767px) {
  .subTitleArea.about {
    background-position: 50% 0;
  }
}
@media screen and (max-width: 767px) {
  .subTitleArea.about .subTitleInner {
    text-shadow: 0 0 30px #fff;
  }
}
.subTitleArea.teacher {
  background: url("../../common/images/line_common01.svg") repeat-x bottom, url("../images/bg_index01.jpg") no-repeat 0 0/cover;
}

.aboutArea01,
.teacherArea01,
.courseArea01 {
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .aboutArea01,
.teacherArea01,
.courseArea01 {
    padding-top: 40px;
  }
}

.aboutArea01,
.teacherArea01 {
  padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .aboutArea01,
.teacherArea01 {
    padding-bottom: 60px;
  }
}

.red {
  color: #de0031;
}

.aboutList01 {
  background: #fff;
  border: 4px solid #b19e7b;
}
.aboutList01 .aboutListContent01,
.aboutList01 .aboutDetailArea01 {
  border-width: 2px;
  border-style: solid;
}
.aboutList01 .aboutListContent01 {
  border-color: #fff;
}
.aboutList01 .aboutDetailArea01 {
  padding: 30px 40px;
  background-image: url("../../common/images/bg_symbol01_01.svg"), url("../../common/images/bg_symbol01_02.svg"), url("../../common/images/bg_symbol01_03.svg"), url("../../common/images/bg_symbol01_04.svg");
  background-repeat: no-repeat;
  background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-size: 60px 60px;
  border-color: #b19e7b;
}
@media screen and (max-width: 1000px) {
  .aboutList01 .aboutDetailArea01 {
    padding: 30px;
  }
}
@media screen and (max-width: 767px) {
  .aboutList01 .aboutDetailArea01 {
    padding: 15px 15px 25px;
    background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
    background-size: 30px 30px;
  }
}
@media print, screen and (min-width: 1001px) {
  .aboutList01 .order1 {
    order: 1;
  }
}
@media print, screen and (min-width: 1001px) {
  .aboutList01 .order2 {
    order: 2;
  }
}
.aboutList01 .aboutDetail01 {
  width: calc(100% - 480px);
}
@media screen and (max-width: 1000px) {
  .aboutList01 .aboutDetail01 {
    width: 100%;
    margin-top: 15px;
  }
}
.aboutList01 h3 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #633e0d;
  margin-bottom: 20px;
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
  .aboutList01 h3 {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .aboutList01 h3 {
    font-size: 2rem;
    margin-bottom: 15px;
  }
}
.aboutList01 .aboutDetail02 {
  line-height: 1.75;
}
@media print, screen and (min-width: 768px) {
  .aboutList01 .aboutDetail02 {
    font-size: 1.6rem;
  }
}
.aboutList01 .aboutDetail02 .mb25:not(:last-child) {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .aboutList01 .aboutDetail02 .mb25:not(:last-child) {
    margin-bottom: 15px;
  }
}
.aboutList01 .aboutImg01 {
  padding: 10px 0 26px;
  background: url("../images/bg_about04_01.png") no-repeat 0 0/466px;
}
@media print, screen and (min-width: 768px) {
  .aboutList01 .aboutImg01 {
    width: 432px;
  }
}
@media screen and (max-width: 1000px) {
  .aboutList01 .aboutImg01 {
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .aboutList01 .aboutImg01 {
    max-width: 400px;
    background-size: 430px;
  }
}
@media screen and (max-width: 500px) {
  .aboutList01 .aboutImg01 {
    max-width: 306px;
    padding: 10px 0;
    background-size: 334px;
  }
}
@media screen and (max-width: 360px) {
  .aboutList01 .aboutImg01 {
    max-width: 250px;
    background-size: 276px;
  }
}
.aboutList01 .aboutImg01 img {
  border: 5px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.aboutList01:nth-child(even) .aboutImg01 {
  background-image: url("../images/bg_about04_02.png");
}
.aboutList01:not(:last-child) {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .aboutList01:not(:last-child) {
    margin-bottom: 40px;
  }
}

.aboutCharmArea01 {
  margin: 105px 0 115px;
  padding: 80px 0 75px;
  background: url("../images/bg_about02_01.jpg") no-repeat 0 0/cover;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 {
    margin: 45px 0 50px;
    padding: 40px 0 35px;
    background-position: 30% 0;
  }
}
.aboutCharmArea01 h3 {
  margin-bottom: 15px;
  padding-top: 40px;
  background: url("../images/bg_title01.png") no-repeat 50% 0;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 h3 {
    margin-bottom: 5px;
    padding-top: 25px;
    background-size: 100px auto;
  }
}
.aboutCharmArea01 h3 span:not(.fr) {
  font-size: 3.6rem;
}
@media screen and (max-width: 1000px) {
  .aboutCharmArea01 h3 span:not(.fr) {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 h3 span:not(.fr) {
    font-size: 1.8rem;
  }
}
.aboutCharmArea01 h3 .fr {
  color: #cea600;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 h3 .fr {
    font-size: 1.2rem;
  }
}
.aboutCharmArea01 li {
  font-size: 1.8rem;
  width: 49%;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2ede6;
  border-radius: 3px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 li {
    font-size: 1.6rem;
    width: 100%;
    margin-top: 15px;
    padding: 15px 10px;
  }
}
@media screen and (max-width: 360px) {
  .aboutCharmArea01 li {
    font-size: 1.4rem;
  }
}
.aboutCharmArea01 .aboutNum01 {
  font-size: 1.3rem;
  color: #fff;
  width: 110px;
  height: 110px;
  padding-top: 15px;
  background: url("../images/bg_about02_02.png") no-repeat 0 0;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 .aboutNum01 {
    font-size: 1rem;
    width: 65px;
    height: 65px;
    padding-top: 10px;
    background-size: 100%;
  }
}
.aboutCharmArea01 .aboutNum01 span {
  font-size: 5.2rem;
  width: 100%;
  margin-top: -25px;
  display: block;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 .aboutNum01 span {
    font-size: 3.6rem;
    margin-top: -10px;
  }
}
.aboutCharmArea01 .aboutTxt01 {
  width: calc(100% - 130px);
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 .aboutTxt01 {
    width: calc(100% - 70px);
  }
}
.aboutCharmArea01 .red {
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .aboutCharmArea01 .red {
    font-size: 2rem;
  }
}
@media screen and (max-width: 360px) {
  .aboutCharmArea01 .red {
    font-size: 1.8rem;
  }
}

.aboutMovieArea01 {
  padding: 20px 0 70px;
  background: url("../images/bg_about03_01.png") no-repeat 100% 0;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 {
    padding-bottom: 55px;
    background-size: 720px;
    background-position: 100% 0;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 .container {
    max-width: 320px;
  }
}
.aboutMovieArea01 li {
  width: 32%;
}
@media print, screen and (min-width: 768px) {
  .aboutMovieArea01 li {
    max-width: 320px;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 li {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 li:not(:last-child) {
    margin-bottom: 70px;
  }
}
.aboutMovieArea01 .aboutMovieTxt01 {
  max-width: 278px;
  margin: 0 auto 40px;
  background: url("../images/bg_title02_01.svg") no-repeat 0 0/31px 51px, url("../images/bg_title02_02.svg") no-repeat 100% 0/31px 51px;
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 .aboutMovieTxt01 {
    max-width: 240px;
    background-size: 28px 48px;
  }
}
.aboutMovieArea01 .aboutMovieTxt01 img {
  height: 54px;
}
@media screen and (max-width: 1000px) {
  .aboutMovieArea01 .aboutMovieTxt01 img {
    height: 42px;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 .aboutMovieTxt01 img {
    height: 46px;
  }
}
.aboutMovieArea01 .aboutContent01 {
  background: #f9f7ef;
  border: 4px solid #b19e7b;
  position: relative;
}
.aboutMovieArea01 .aboutContent01:after {
  content: "";
  width: 155px;
  height: 40px;
  margin: 0 auto;
  background: url("../images/bg_about03_02.png") no-repeat 0 0/155px 41px;
  position: absolute;
  top: -36px;
  right: 0;
  left: 0;
}
.aboutMovieArea01 .aboutDetailArea01,
.aboutMovieArea01 .aboutDetail01 {
  border-width: 2px;
  border-style: solid;
}
.aboutMovieArea01 .aboutDetailArea01 {
  border-color: #fff;
}
.aboutMovieArea01 .aboutDetail01 {
  padding: 20px 10px 10px;
  border-color: #b19e7b;
}
.aboutMovieArea01 h3 {
  font-size: 2rem;
  color: #003d87;
  line-height: 1.1;
}
@media screen and (max-width: 1000px) {
  .aboutMovieArea01 h3 {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 h3 {
    font-size: 1.6rem;
    line-height: 1.2;
  }
}
.aboutMovieArea01 h3 .red {
  font-size: 4.2rem;
}
@media screen and (max-width: 1000px) {
  .aboutMovieArea01 h3 .red {
    font-size: 3.2rem !important;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 h3 .red {
    font-size: 2.8rem !important;
  }
}
.aboutMovieArea01 .aboutImg01 {
  margin: 15px 0;
  padding-bottom: 15px;
  background: url("../images/bg_about03_03.png") no-repeat 50% 100%/100%;
}
.aboutMovieArea01 h4 {
  font-size: 1.8rem;
  color: #633e0d;
  margin-bottom: 10px;
  line-height: 1.75;
}
@media screen and (max-width: 1020px) {
  .aboutMovieArea01 h4 {
    min-height: 93px;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 h4 {
    min-height: auto;
  }
}
@media screen and (max-width: 1020px) {
  .aboutMovieArea01 h4 + p {
    min-height: 170px;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 h4 + p {
    min-height: auto;
  }
}
.aboutMovieArea01 h4 + p br {
  display: none;
}
@media screen and (max-width: 800px) {
  .aboutMovieArea01 h4 + p br {
    display: inline;
  }
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 h4 + p br {
    display: none;
  }
}
.aboutMovieArea01 .generalBtn {
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .aboutMovieArea01 .generalBtn {
    margin-top: 20px;
  }
}
.aboutMovieArea01 .generalBtn a {
  width: 100%;
  padding: 0;
  padding-right: 10px;
}
@media print, screen and (min-width: 768px) {
  .aboutMovieArea01 .generalBtn a {
    height: 48px;
  }
}

.aboutTrialArea01 h3 {
  font-size: 3.5rem;
  font-weight: 700;
  color: #004da0;
  max-width: 620px;
  margin: 0 auto 25px;
  padding-right: 10px;
  background: url("../../trial/images/bg_trial03_01.png") no-repeat 40px 100%/50px 80px, url("../../trial/images/bg_trial03_02.png") no-repeat 93% 100%/50px 80px;
  line-height: 1.2;
}
@media screen and (max-width: 1000px) {
  .aboutTrialArea01 h3 {
    font-size: 3rem;
    max-width: 570px;
  }
}
@media screen and (max-width: 767px) {
  .aboutTrialArea01 h3 {
    font-size: 1.8rem;
    max-width: 300px;
    margin-bottom: 20px;
    padding-right: 2px;
    background: url("../../trial/images/bg_trial03_01.png") no-repeat 0% 100%/50px 80px, url("../../trial/images/bg_trial03_02.png") no-repeat 100% 100%/50px 80px;
  }
}
.aboutTrialArea01 h3 .red {
  font-size: 5.6rem;
}
@media screen and (max-width: 1000px) {
  .aboutTrialArea01 h3 .red {
    font-size: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .aboutTrialArea01 h3 .red {
    font-size: 2.5rem;
  }
}

.teacherArea01 .teacherList01 {
  padding: 55px 40px 40px;
  background: url("../images/bg_teacher01.png"), linear-gradient(135deg, rgba(231, 210, 164, 0.1) 0%, rgba(237, 234, 206, 0.1) 50%, rgba(232, 223, 188, 0.2) 100%);
  border-radius: 3px;
}
@media print, screen and (min-width: 768px) {
  .teacherArea01 .teacherList01 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherList01 {
    padding: 25px 20px 20px;
  }
}
.teacherArea01 .teacherList01:not(:last-child) {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherList01:not(:last-child) {
    margin-bottom: 50px;
  }
}
.teacherArea01 h3 {
  color: #633e0d;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 h3 {
    margin-bottom: 20px;
  }
}
.teacherArea01 h3 .serif {
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  .teacherArea01 h3 .serif {
    font-size: 2.4rem;
  }
}
.teacherArea01 h3 .fr {
  font-family: "Pinyon Script", cursive;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .teacherArea01 h3 .fr {
    font-size: 1.4rem;
  }
}
.teacherArea01 .teacherDetailArea01 {
  padding: 40px 0;
  background: url("../images/bg_teacher02.png") no-repeat 50% 0/auto 15px, url("../images/bg_teacher02.png") no-repeat 50% 100%/auto 15px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherDetailArea01 {
    padding: 35px 0 20px;
  }
}
.teacherArea01 .teacherDetail01 {
  width: calc(100% - 240px);
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherDetail01 {
    width: 100%;
  }
}
.teacherArea01 .teacherImg01 {
  width: 210px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherImg01 {
    margin: 0 auto 15px;
  }
}
.teacherArea01 .teacherImg01 img {
  border: 5px solid #fff;
}
.teacherArea01 h4,
.teacherArea01 th {
  font-weight: 700;
  color: #633e0d;
}
.teacherArea01 h4 {
  font-size: 3.2rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 h4 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 15px;
  }
}
.teacherArea01 .teacherTable01 {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .teacherArea01 th,
.teacherArea01 td {
    padding: 8px 0;
  }
}
@media screen and (max-width: 767px) {
  .teacherArea01 th,
.teacherArea01 td {
    width: 100%;
    display: block;
  }
}
.teacherArea01 th {
  text-align: left;
}
@media print, screen and (min-width: 768px) {
  .teacherArea01 th {
    width: 85px;
  }
}
@media screen and (max-width: 767px) {
  .teacherArea01 td {
    padding: 2px 0 15px;
  }
}
.teacherArea01 .teacherTxtArea01 {
  margin-top: 25px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherTxtArea01 {
    margin-top: 15px;
    padding: 10px 15px;
  }
}
.teacherArea01 .teacherTxtArea01 p:not(:last-child) {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .teacherArea01 .teacherTxtArea01 p:not(:last-child) {
    margin-bottom: 15px;
  }
}

.courseAboutArea01 {
  padding: 40px 0 60px;
  background: url("../images/bg_course02.png") no-repeat 100% 0;
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 {
    padding-bottom: 40px;
    background-size: 320px;
  }
}
.courseAboutArea01 h3 {
  font-size: 3.8rem;
  color: #004da0;
  max-width: 750px;
  margin: 0 auto 30px;
  padding-left: 20px;
  background: url("../../trial/images/bg_trial03_01.png") no-repeat 0 100%/50px 80px, url("../../trial/images/bg_trial03_02.png") no-repeat 100% 100%/50px 80px;
  line-height: 1.4;
}
@media screen and (max-width: 1000px) {
  .courseAboutArea01 h3 {
    font-size: 4rem;
    max-width: 710px;
  }
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 h3 {
    font-size: 1.8rem;
    max-width: 245px;
    margin-bottom: 20px;
    padding-left: 6px;
    background-size: 20px 32px;
  }
}
.courseAboutArea01 .courseTxt01 {
  margin-bottom: 40px;
}
@media print, screen and (min-width: 768px) {
  .courseAboutArea01 .courseTxt01 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 .courseTxt01 {
    margin-bottom: 25px;
  }
}
.courseAboutArea01 .courseTxt01 span {
  font-size: 2.6rem;
  font-weight: 700;
  color: #de0031;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .courseAboutArea01 .courseTxt01 span {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 .courseTxt01 span {
    font-size: 1.6rem;
  }
}
.courseAboutArea01 .courseTxt01 span:after {
  content: "";
  width: 100%;
  height: 15px;
  background: #fff061;
  z-index: -1;
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
}
.courseAboutArea01 .movieArea01 {
  width: 360px;
}
@media print, screen and (min-width: 768px) {
  .courseAboutArea01 .movieArea01 {
    height: 270px;
  }
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 .movieArea01 {
    width: 100%;
    padding-top: 75%;
    position: relative;
  }
}
.courseAboutArea01 .movieArea01 img {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .courseAboutArea01 .movieArea01 img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
}
@media print, screen and (min-width: 768px) {
  .courseAboutArea01 .aboutDetail01 {
    max-width: inherit;
    width: calc(100% - 400px);
  }
}

.courseRecommendedArea01 {
  font-family: "ロゴたいぷゴシック-コンデンスド";
  font-size: 1.8rem;
  font-weight: 700;
  padding: 60px 0 100px;
  background: #f9f9f9;
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 {
    font-size: 1.6rem;
    padding: 30px 0 60px;
  }
}
.courseRecommendedArea01 h3 {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 h3 {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 h3 img {
    height: 58px;
  }
}
.courseRecommendedArea01 .container {
  max-width: 1155px;
}
.courseRecommendedArea01 li {
  width: 49%;
  margin-top: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b19e7b;
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 li {
    width: 100%;
    margin-top: 10px;
  }
}
.courseRecommendedArea01 li span:not(.blue) {
  padding-left: 50px;
  background: url("../../mail2/images/ico_useful01.svg") no-repeat 0 50%/30px 30px;
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 li span:not(.blue) {
    padding-left: 30px;
    background-size: 20px 20px;
  }
}
.courseRecommendedArea01 li .blue {
  font-size: 3rem;
  color: #004da0;
}
@media screen and (max-width: 767px) {
  .courseRecommendedArea01 li .blue {
    font-size: 2rem;
  }
}

.courseContent {
  padding: 60px 0 100px;
  border-top: 4px solid #b19e7b;
}
@media screen and (max-width: 767px) {
  .courseContent {
    padding: 50px 0;
  }
}
.courseContent h3 {
  margin-bottom: 25px;
  padding-top: 40px;
  background: url("../images/bg_title01.png") no-repeat 50% 0;
}
@media screen and (max-width: 767px) {
  .courseContent h3 {
    margin-bottom: 20px;
    padding-top: 25px;
    background-size: 100px auto;
  }
}
.courseContent h3 span:not(.fr) {
  font-size: 4rem;
}
@media screen and (max-width: 1000px) {
  .courseContent h3 span:not(.fr) {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .courseContent h3 span:not(.fr) {
    font-size: 1.8rem;
  }
}
.courseContent h3 .fr {
  color: #cea600;
}
@media screen and (max-width: 767px) {
  .courseContent h3 .fr {
    font-size: 1.2rem;
  }
}

.courseOverviewArea01 {
  background: url("../images/bg_course03.png") no-repeat 100% 60px;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 {
    background-position: 100% 0;
    background-size: 360px;
  }
}
.courseOverviewArea01 .courseOverviewList01:not(:last-child) {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .courseOverviewList01:not(:last-child) {
    margin-bottom: 25px;
  }
}
.courseOverviewArea01 h4 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 h4 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
}
.courseOverviewArea01 .priceTitle01 {
  max-width: 635px;
  margin: 0 auto 20px;
  padding-left: 5px;
  background: url("../images/bg_course04_01.png") no-repeat 0 100%/50px 80px, url("../images/bg_course04_02.png") no-repeat 100% 100%/50px 80px;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .priceTitle01 {
    max-width: 265px;
    margin-bottom: 15px;
    padding-left: 2px;
    background-size: 20px 32px;
  }
}
.courseOverviewArea01 .priceTitle01 .font32 {
  font-size: 3.2rem;
}
@media screen and (max-width: 1000px) {
  .courseOverviewArea01 .priceTitle01 .font32 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .priceTitle01 .font32 {
    font-size: 1.6rem;
  }
}
.courseOverviewArea01 .priceTitle01 .font40 {
  font-size: 4rem;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .priceTitle01 .font40 {
    font-size: 1.8rem;
  }
}
.courseOverviewArea01 .priceTitle01 .font68 {
  font-size: 6.8rem;
}
@media screen and (max-width: 1000px) {
  .courseOverviewArea01 .priceTitle01 .font68 {
    font-size: 6rem;
  }
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .priceTitle01 .font68 {
    font-size: 2.4rem;
  }
}
.courseOverviewArea01 .priceTitle01 .mr30 {
  margin-right: 30px;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .priceTitle01 .mr30 {
    margin-right: 15px;
  }
}
.courseOverviewArea01 .priceTxt01 {
  padding: 15px;
  border: 1px solid #000;
}
.courseOverviewArea01 .courseTxt01 {
  font-size: 2.2rem;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .courseTxt01 {
    font-size: 1.8rem;
  }
}
.courseOverviewArea01 .courseTxt01 span {
  color: #de0031;
  position: relative;
}
.courseOverviewArea01 .courseTxt01 span:after {
  content: "";
  width: 100%;
  height: 15px;
  background: #fff061;
  z-index: -1;
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
}
.courseOverviewArea01 .overviewDetail01 {
  padding: 30px 40px;
  background-image: url("../../common/images/bg_symbol02_01.svg"), url("../../common/images/bg_symbol02_02.svg"), url("../../common/images/bg_symbol02_03.svg"), url("../../common/images/bg_symbol02_04.svg");
  background-repeat: no-repeat;
  background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
  background-size: 90px 90px;
  background-color: #f9f9f9;
  border: 1px solid #e2ede6;
  border-radius: 3px;
}
@media screen and (max-width: 1000px) {
  .courseOverviewArea01 .overviewDetail01 {
    padding: 30px;
  }
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .overviewDetail01 {
    text-align: left;
    padding: 25px 15px;
    background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
    background-size: 50px 50px;
  }
}
.courseOverviewArea01 .movieImg01 {
  max-width: 400px;
  margin: 15px auto 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .movieImg01 {
    margin-bottom: 5px;
  }
}
.courseOverviewArea01 .movieImg01:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.courseOverviewArea01 .movieImg01:after {
  width: 73px;
  height: 73px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2073.14%2073.1%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23de0031%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22%E3%83%A1%E3%82%A4%E3%83%B3%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36.57%2C0A36.55%2C36.55%2C0%2C1%2C0%2C73.14%2C36.55%2C36.56%2C36.56%2C0%2C0%2C0%2C36.57%2C0Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.66%2C37.77%2C29.13%2C50.2A1.42%2C1.42%2C0%2C0%2C1%2C27%2C49V24.13a1.41%2C1.41%2C0%2C0%2C1%2C2.12-1.22L50.66%2C35.33A1.41%2C1.41%2C0%2C0%2C1%2C50.66%2C37.77Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0/73px 73px;
}
@media screen and (max-width: 1000px) {
  .courseOverviewArea01 .movieImg01:after {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
  }
}
.courseOverviewArea01 .movieImg01 img {
  border: 2px solid #cea600;
  border-radius: 3px;
}
.courseOverviewArea01 .modalContent01 {
  width: 640px;
  height: 475px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .modalContent01 {
    width: 280px;
    height: 210px;
  }
}
.courseOverviewArea01 iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.courseOverviewArea01 .materialsList01 {
  width: 32.601%;
  margin-top: 40px;
  padding: 30px 8px 25px;
  background: #f9f9f9;
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
}
@media screen and (max-width: 767px) {
  .courseOverviewArea01 .materialsList01 {
    max-width: 326px;
    width: 100%;
    margin: 20px auto 0;
  }
}
.courseOverviewArea01 .materialsList01.blue {
  border-color: #004da0;
}
.courseOverviewArea01 .materialsList01.green {
  border-color: #7ead21;
}
.courseOverviewArea01 .materialsList01.yellow {
  border-color: #e0c500;
}
.courseOverviewArea01 .courseIco01 {
  color: #fff;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  padding-top: 10px;
  border-radius: 50%;
}
.courseOverviewArea01 .courseIco01 img {
  width: 68px;
  height: 60px;
}
.courseOverviewArea01 .courseIco01 .courseIcoTxt01 {
  width: 100%;
  margin-top: 10px;
  display: block;
}
.courseOverviewArea01 .courseIco01.blue {
  background: #004da0;
}
.courseOverviewArea01 .courseIco01.green {
  background: #7ead21;
}
.courseOverviewArea01 .courseIco01.yellow {
  background: #e0c500;
}
.courseOverviewArea01 h5 {
  font-size: 1.6rem;
  margin: 20px 0 10px;
}
.courseOverviewArea01 h5.blue {
  color: #004da0;
}
.courseOverviewArea01 h5.green {
  color: #7ead21;
}
.courseOverviewArea01 h5.yellow {
  color: #e0c500;
}

.courseMessageArea01 {
  border: 4px solid #b19e7b;
}
.courseMessageArea01 .messageContentArea01,
.courseMessageArea01 .messageContent01 {
  border-width: 2px;
  border-style: solid;
}
.courseMessageArea01 .messageContentArea01 {
  border-color: #fff;
}
.courseMessageArea01 .messageContent01 {
  padding: 40px 45px;
  padding-right: 10px;
  border-color: #b19e7b;
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageContent01 {
    padding: 20px 15px;
  }
}
.courseMessageArea01 h4 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #633e0d;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 h4 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
}
.courseMessageArea01 h4 span {
  padding-bottom: 2px;
  border-bottom: 1px solid #633e0d;
}
.courseMessageArea01 .messageImg01 {
  padding: 10px 0 26px;
  background: url("../../mail2/images/bg_about02.png") no-repeat 10px 8px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .courseMessageArea01 .messageImg01 {
    width: 300px;
    order: 2;
  }
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageImg01 {
    width: 150px;
    margin: 0 auto 10px;
    padding-bottom: 10px;
    background-position: 0 10px;
    background-size: 170px;
  }
}
.courseMessageArea01 .messageImg01:after {
  content: "";
  width: 272px;
  height: 340px;
  margin: 0 auto;
  background: url("../../mail2/images/bg_border01.png") no-repeat 0 0/contain;
  position: absolute;
  top: 4px;
  left: 0;
}
@media print, screen and (min-width: 768px) {
  .courseMessageArea01 .messageImg01:after {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageImg01:after {
    width: 160px;
    height: 200px;
    left: -5px;
  }
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageImg01 img {
    width: 150px;
  }
}
.courseMessageArea01 .messageDetail02 {
  width: calc(100% - 334px);
  line-height: 1.75;
}
@media print, screen and (min-width: 768px) {
  .courseMessageArea01 .messageDetail02 {
    font-size: 1.6rem;
    padding-top: 10px;
    order: 1;
  }
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageDetail02 {
    width: 100%;
  }
}
.courseMessageArea01 .messageDetail02 p:not(:last-child) {
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .courseMessageArea01 .messageDetail02 p:not(:last-child) {
    margin-bottom: 15px;
  }
}
.courseMessageArea01 .blue {
  color: #335b99;
  border-bottom: 1px solid #335b99;
}

.aboutMovieArea01 h3 .red {
  font-size: 4.2rem;
  color: #de0031;
}

.registerBtn01 {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}