@charset "UTF-8";
/* Scss Document
*****************************************************************/
/* mixin
*********************************************************************/
/* カラー */
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* フルワイド */
/* font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,500;1,700&display=swap");
/* font-size */
/* main visual
*****************************************************************/
.mainvisual {
  position: relative;
  height: 100vh;
  min-height: 750px;
  background-image: url(../images/main_img.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media all and (max-width: 896px) {
  .mainvisual {
    min-height: 500px;
  }
}
@media all and (max-width: 480px) {
  .mainvisual {
    background-image: url(../images/main_img_sp.jpg);
    background-position: right bottom;
  }
}

.mainvisual_logo {
  position: absolute;
  top: 40px;
  left: 0;
  width: 196px;
}
@media all and (max-width: 896px) {
  .mainvisual_logo {
    top: 0;
  }
}

.btn_line_sp {
  position: fixed;
  z-index: 50;
  top: 65px;
  right: 5px;
  font-size: 10px; /*IE9以下で反映されるよう記述*/
  font-size: 0.625rem;
  font-weight: 500;
  text-align: center;
}
.btn_line_sp a {
  display: block;
  box-sizing: border-box;
  padding: 20px 3px 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fdfd2d;
  border: 2px solid #006938;
  color: #006938;
}
.btn_line_sp a::after {
  content: "\f138";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  margin-left: 0.1em;
}

.sub_copy {
  position: absolute;
  left: 20px;
  bottom: 430px;
  transform: rotate(-5deg);
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .sub_copy {
    left: 10px;
    bottom: 246px;
  }
}
.sub_copy .bgLR__extend::before {
  background: #774a0b;
}

.sub_copy__inner {
  color: #fff;
  font-weight: bold;
  font-size: 32px; /*IE9以下で反映されるよう記述*/
  font-size: 2rem;
  padding: 0.4em 0.8em;
}
@media all and (max-width: 896px) {
  .sub_copy__inner {
    font-size: 14px; /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
}

.main_copy {
  position: absolute;
  left: 0;
  overflow: hidden;
}

.main_copy__first {
  bottom: 300px;
}
@media all and (max-width: 896px) {
  .main_copy__first {
    bottom: 188px;
  }
}

.main_copy__second {
  bottom: 160px;
}
.main_copy__second .bgLR__extend::before {
  background: #fff;
}
@media all and (max-width: 896px) {
  .main_copy__second {
    bottom: 132px;
  }
}

.main_copy__second_sp .bgLR__extend::before {
  background: #fff;
}
@media all and (max-width: 896px) {
  .main_copy__second_sp {
    bottom: 84px;
  }
}

.main_copy__third {
  bottom: 60px;
}
@media all and (max-width: 896px) {
  .main_copy__third {
    bottom: 40px;
  }
}

.main_copy__inner {
  color: #fff;
  font-weight: bold;
  font-size: 46px; /*IE9以下で反映されるよう記述*/
  font-size: 2.875rem;
  padding: 0.2em 0.4em 0.2em 0.5em;
}
@media all and (max-width: 896px) {
  .main_copy__inner {
    font-size: 20px; /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
  }
}

.main_copy__second__inner {
  color: #006938;
  padding-bottom: 0.3em;
}
@media all and (max-width: 896px) {
  .main_copy__second__inner {
    padding-bottom: 0.4em;
  }
}

.copy_bb {
  border-bottom: 8px solid #fdfd2d;
}
@media all and (max-width: 896px) {
  .copy_bb {
    border-bottom: 4px solid #fdfd2d;
  }
}

.copy_large {
  font-size: 1.5em;
  line-height: 1.2;
}

/* concept
*****************************************************************/
.concept__inner {
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
  background: url("../images/flag_right.svg") no-repeat right -5px top -5px/400px auto, url("../images/flag_left.svg") no-repeat left -5px top -5px/400px auto, url("../images/curtain_left.svg") no-repeat left top/contain, url("../images/curtain_right.svg") no-repeat right top/contain, #fdfde3;
}
@media all and (max-width: 896px) {
  .concept__inner {
    padding: 50px 0;
    background: url("../images/flag_right.svg") no-repeat right -5px top -5px/132px auto, url("../images/flag_left.svg") no-repeat left -5px top -5px/132px auto, url("../images/curtain_left_sp.svg") no-repeat left top/90px 128px, url("../images/curtain_right_sp.svg") no-repeat right top/90px 128px, #fdfde3;
  }
}

.box_concept {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 40px;
  background: #fff;
  border: 3px solid #006938;
}
@media all and (max-width: 896px) {
  .box_concept {
    padding: 15px;
    margin-bottom: 20px;
  }
}

.bb_orange {
  padding-bottom: 6px;
  border-bottom: 4px solid #f46d34;
}

/* reason
*****************************************************************/
.reason {
  padding: 100px 0;
  background: url("../images/circle01.svg") no-repeat right 15vw top 40px/98px 98px, url("../images/circle02.svg") no-repeat right 3vw top 140px/196px 196px, url("../images/circle03.svg") no-repeat left -110px bottom 270px/220px 220px, url("../images/circle04.svg") no-repeat left 5vw bottom 130px/124px 124px;
}
@media all and (max-width: 896px) {
  .reason {
    padding: 50px 0;
    background: none, none;
  }
}

.reason_ttl__inner {
  color: #fff;
  font-weight: 500;
  font-size: 32px; /*IE9以下で反映されるよう記述*/
  font-size: 2rem;
  padding: 0.1em 2em;
}
@media all and (max-width: 896px) {
  .reason_ttl__inner {
    text-align: center;
    font-size: 18px; /*IE9以下で反映されるよう記述*/
    font-size: 1.125rem;
    padding: 0.6em 0.8em;
    line-height: 1.3;
  }
}

.reason_txt_large {
  font-size: 2.4em;
}

.list_reason {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_reason > li {
  width: 32%;
  border: 2px solid #006938;
  background: #f8fff2;
}
@media all and (max-width: 896px) {
  .list_reason > li {
    width: 100%;
    margin-bottom: 20px;
  }
  .list_reason > li:last-of-type {
    margin-bottom: 0;
  }
}

.box_reason > dt {
  position: relative;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #006938;
  overflow: hidden;
  background: #fff;
}
@media all and (max-width: 896px) {
  .box_reason > dt {
    height: 170px;
  }
}
.box_reason > dt::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background: #006938;
  border-radius: 50%;
  position: absolute;
  top: -80px;
  left: -80px;
}
@media all and (max-width: 896px) {
  .box_reason > dt::before {
    width: 140px;
    height: 140px;
    top: -70px;
    left: -70px;
  }
}
.box_reason > dd {
  padding: 15px;
}

.reason_number {
  font-family: "Kanit", sans-serif;
  font-style: italic;
  font-size: 56px; /*IE9以下で反映されるよう記述*/
  font-size: 3.5rem;
  font-weight: 500;
  color: #fff;
  position: absolute;
  top: -0.18em;
  left: 0.32em;
}
@media all and (max-width: 896px) {
  .reason_number {
    font-size: 48px; /*IE9以下で反映されるよう記述*/
    font-size: 3rem;
  }
}

.reason01_img {
  max-width: 142px;
}
@media all and (max-width: 896px) {
  .reason01_img {
    max-width: 110px;
  }
}

.reason02_img {
  max-width: 154px;
}
@media all and (max-width: 896px) {
  .reason02_img {
    max-width: 116px;
  }
}

.reason03_img {
  max-width: 258px;
}
@media all and (max-width: 896px) {
  .reason03_img {
    max-width: 194px;
  }
}

.box_reason_ttl {
  position: relative;
  text-align: center;
  color: #006938;
  font-weight: 500;
  font-size: 18px; /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
  padding-bottom: 18px;
  margin-bottom: 16px;
}
@media all and (max-width: 896px) {
  .box_reason_ttl {
    font-size: 16px; /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}
.box_reason_ttl::after {
  content: "";
  width: 60px;
  height: 4px;
  background: #006938;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.block_mat {
  box-sizing: border-box;
  padding: 20px;
  background: #006938;
  color: #fff;
  margin-top: 20px;
  position: relative;
}
.block_mat::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #fdfd2d transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.block_mat::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #fdfd2d transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}
.block_mat .box_mat {
  display: flex;
  gap: 15px 10px;
}
@media all and (max-width: 480px) {
  .block_mat .box_mat {
    flex-direction: column;
    align-items: center;
  }
}
.block_mat .box_mat .txt_mat {
  flex-grow: 1;
  font-size: 14px; /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
}
@media all and (max-width: 896px) {
  .block_mat .box_mat .txt_mat {
    font-size: 13px; /*IE9以下で反映されるよう記述*/
    font-size: 0.8125rem;
  }
}
.block_mat .box_mat .img_mat {
  width: 40%;
  flex-shrink: 0;
}
@media all and (max-width: 896px) {
  .block_mat .box_mat .img_mat {
    max-width: 120px;
  }
}
@media all and (max-width: 480px) {
  .block_mat .box_mat .img_mat {
    width: 100%;
  }
}
.block_mat .txt_example {
  font-size: 13px; /*IE9以下で反映されるよう記述*/
  font-size: 0.8125rem;
  margin-top: 5px;
  padding-left: 1.1em;
  text-indent: -1.1em;
}
@media all and (max-width: 896px) {
  .block_mat .txt_example {
    font-size: 12px; /*IE9以下で反映されるよう記述*/
    font-size: 0.75rem;
    margin-top: 10px;
  }
}
.block_mat .txt_example + .txt_example {
  margin-top: 0;
}
.block_mat .txt_example::before {
  content: "\f118";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-right: 0.1em;
}

.block_conclusion {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media all and (max-width: 896px) {
  .block_conclusion {
    flex-wrap: wrap;
  }
}

.txt_conclusion {
  position: relative;
  width: 340px;
  margin: 40px 60px 0 20px;
}
@media all and (max-width: 896px) {
  .txt_conclusion {
    width: 97%;
    margin: 15px 0 20px 15px;
  }
}
.txt_conclusion::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -20px;
  left: -20px;
  background: #fdfd2d;
}
@media all and (max-width: 896px) {
  .txt_conclusion::before {
    top: -15px;
    left: -15px;
  }
}

.txt_conclusion__inner {
  position: relative;
  z-index: 20;
  border: 3px solid #006938;
  padding: 30px;
  width: 100%;
  height: 100%;
}
@media all and (max-width: 896px) {
  .txt_conclusion__inner {
    padding: 20px;
  }
}

.img_conclusion {
  max-width: 480px;
}
@media all and (max-width: 896px) {
  .img_conclusion {
    max-width: 262px;
  }
}

/* voice
*****************************************************************/
.voice {
  padding: 100px 0;
  background: url("../images/circle05.svg") no-repeat left 13vw top 72px/175px 175px, url("../images/circle06.svg") no-repeat right 26vw top 106px/70px 70px, url("../images/circle07.svg") no-repeat right 15vw top 180px/142px 142px, #f4fcff;
}
@media all and (max-width: 896px) {
  .voice {
    padding: 50px 0;
    background: url("../images/circle05.svg") no-repeat left 4vw top 20px/70px 70px, url("../images/circle06.svg") no-repeat right 19vw top 64px/26px 26px, url("../images/circle07.svg") no-repeat right 4vw top 90px/56.8px 56.8px, #f4fcff;
  }
}

.list_voice {
  max-width: 1100px;
  margin: 0 auto;
}
.list_voice > li {
  margin-bottom: 60px;
}
@media all and (max-width: 896px) {
  .list_voice > li {
    margin-bottom: 30px;
  }
  .list_voice > li:last-of-type {
    margin-bottom: 0;
  }
}

.box_voice {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 896px) {
  .box_voice {
    flex-direction: column-reverse;
    align-items: center;
  }
}
.box_voice dt {
  width: 200px;
  flex-shrink: 0;
}
@media all and (max-width: 896px) {
  .box_voice dt {
    width: 120px;
  }
}
.box_voice dd {
  position: relative;
  width: 100%;
  max-width: 880px;
}
@media all and (max-width: 896px) {
  .box_voice dd {
    margin-bottom: 24px;
  }
}

.box_voice_reverse {
  flex-direction: row-reverse;
}
@media all and (max-width: 896px) {
  .box_voice_reverse {
    flex-direction: column-reverse;
  }
}

.box_voice_end {
  align-items: flex-end;
}
@media all and (max-width: 896px) {
  .box_voice_end {
    align-items: center;
  }
}
.box_voice_end .fukidashi_right::before {
  top: 186px;
}
@media all and (max-width: 896px) {
  .box_voice_end .fukidashi_right::before {
    top: auto;
  }
}
.box_voice_end .fukidashi_right::after {
  top: 190px;
}
@media all and (max-width: 896px) {
  .box_voice_end .fukidashi_right::after {
    top: auto;
  }
}

.box_fukidashi {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  background: #fdfde3;
  border: 4px solid #006938;
  padding: 40px;
}
@media all and (max-width: 896px) {
  .box_fukidashi {
    padding: 15px;
  }
}
.box_fukidashi .txt_medium {
  line-height: 1.5;
}

.fukidashi_left::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19px 53px 19px 0;
  border-color: transparent #006938 transparent transparent;
  position: absolute;
  top: 86px;
  left: -47px;
}
@media all and (max-width: 896px) {
  .fukidashi_left::before {
    top: auto;
    left: 50%;
    bottom: -17px;
    border-width: 23px 29px 0 29px;
    border-color: #006938 transparent transparent transparent;
    transform: translate(-50%, 0);
  }
}
.fukidashi_left::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 45px 15px 0;
  border-color: transparent #fdfde3 transparent transparent;
  position: absolute;
  top: 90px;
  left: -35px;
  z-index: 20;
}
@media all and (max-width: 896px) {
  .fukidashi_left::after {
    top: auto;
    left: 50%;
    bottom: -12px;
    border-width: 18px 22px 0 22px;
    border-color: #fdfde3 transparent transparent transparent;
    transform: translate(-50%, 0);
  }
}

.fukidashi_right::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19px 0 19px 53px;
  border-color: transparent transparent transparent #006938;
  position: absolute;
  top: 86px;
  right: -47px;
}
@media all and (max-width: 896px) {
  .fukidashi_right::before {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -17px;
    border-width: 23px 29px 0 29px;
    border-color: #006938 transparent transparent transparent;
    transform: translate(-50%, 0);
  }
}
.fukidashi_right::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 45px;
  border-color: transparent transparent transparent #fdfde3;
  position: absolute;
  top: 90px;
  right: -35px;
  z-index: 20;
}
@media all and (max-width: 896px) {
  .fukidashi_right::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -12px;
    border-width: 18px 22px 0 22px;
    border-color: #fdfde3 transparent transparent transparent;
    transform: translate(-50%, 0);
  }
}

/* flow
*****************************************************************/
.flow {
  position: relative;
}
.flow::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 64px 148px 0 148px;
  border-color: #006938 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -55px;
  transform: translate(-50%, 0);
}
@media all and (max-width: 896px) {
  .flow::before {
    bottom: -34px;
    border-width: 38px 88px 0 88px;
  }
}
.flow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 140px 0 140px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translate(-50%, 0);
  z-index: 20;
}
@media all and (max-width: 896px) {
  .flow::after {
    bottom: -29px;
    border-width: 36px 84px 0 84px;
  }
}

.flow__inner {
  position: relative;
  z-index: 10;
  background: #fff;
  padding: 100px 0 80px;
  border-bottom: 4px solid #006938;
}
@media all and (max-width: 896px) {
  .flow__inner {
    padding: 50px 0;
  }
}

.img_flow {
  max-width: 1005px;
  margin: 0 auto 20px;
}

.img_flow_sp {
  max-width: 360px;
  margin: 0 auto 20px;
}

.list_flow {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.list_flow > li {
  width: 24.5%;
  max-width: 276px;
}
.list_flow > li.osusume {
  position: relative;
}
.list_flow > li.osusume::before {
  display: inline-block;
  content: "おすすめ";
  box-sizing: border-box;
  padding: 3px 10px;
  background: #f46d34;
  color: #fff;
  font-weight: 500;
  font-size: 14px; /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -50%);
  z-index: 30;
}
.list_flow > li > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 30px 20px 10px;
  background: #fdfd2d;
  border: 3px solid #006938;
  color: #006938;
  position: relative;
  font-size: 18px; /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
}
.list_flow > li > a::after {
  content: "\f138";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

.block_btn__entry {
  background-image: url(../images/bg_circle.png);
  background-repeat: repeat;
  background-size: auto;
  background-position: center center;
  padding: 125px 0 100px;
}
@media all and (max-width: 896px) {
  .block_btn__entry {
    padding: 60px 0 50px;
  }
}

.box_btn__entry {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.box_btn__entry > a {
  display: block;
  box-sizing: border-box;
  padding: 30px;
  background: #006938;
  color: #fff;
  font-weight: bold;
  font-size: 32px; /*IE9以下で反映されるよう記述*/
  font-size: 2rem;
  position: relative;
}
@media all and (max-width: 896px) {
  .box_btn__entry > a {
    padding: 15px;
    font-size: 20px; /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
  }
}
.box_btn__entry > a::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  border: 4px solid #006938;
  width: 0%;
  height: 100%;
  background: #fdfd2d;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.box_btn__entry > a:hover {
  opacity: 1;
  color: #006938;
}
.box_btn__entry > a:hover::before {
  animation-name: btn_hover__anime;
  animation-duration: 0.6s;
  animation-fill-mode: forwords;
  width: 100%;
}
.box_btn__entry > a > span {
  position: relative;
  z-index: 20;
  display: inline-block;
  width: 100%;
}
.box_btn__entry > a > span::after {
  content: "\f138";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  margin-left: 20px;
}
@media all and (max-width: 896px) {
  .box_btn__entry > a > span::after {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
  }
}

@keyframes btn_hover__anime {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.list_flow_sp {
  max-width: 360px;
  margin: 0 auto;
}
.list_flow_sp > li {
  margin-bottom: 20px;
}
.list_flow_sp > li:last-of-type {
  margin-bottom: 0;
}
.list_flow_sp > li > a {
  display: flex;
  align-items: center;
  font-size: 16px; /*IE9以下で反映されるよう記述*/
  font-size: 1rem;
  color: #006938;
  font-weight: 500;
  position: relative;
  padding-right: 30px;
}
.list_flow_sp > li > a::after {
  content: "\f138";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
}

.txt_alphabet {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 20px;
  background: #fdfd2d;
  font-size: 22px; /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
  color: #006938;
  font-weight: 500;
  border: 3px solid #006938;
  margin-right: 10px;
}

.txt_osusume {
  display: inline-block;
  font-size: 12px; /*IE9以下で反映されるよう記述*/
  font-size: 0.75rem;
  color: #fff;
  box-sizing: border-box;
  padding: 3px 10px 3px 10px;
  background: #f46d34;
}

/* course
*****************************************************************/
.course {
  padding: 100px 0;
  background: url("../images/circle08.svg") no-repeat left 15vw top 100px/110px 110px, url("../images/circle09.svg") no-repeat left 5.4vw top 226px/178px 178px, url("../images/circle10.svg") no-repeat right 3.8vw bottom 594px/98px 98px, url("../images/circle11.svg") no-repeat right 7.4vw bottom 332px/178px 178px, #f8fff2;
}
@media all and (max-width: 896px) {
  .course {
    padding: 50px 0;
    background: url("../images/circle08.svg") no-repeat left 4vw top 30px/44px 44px, url("../images/circle09.svg") no-repeat right 4vw top 80px/71px 71px, none, none, #f8fff2;
  }
}

.course_ttl {
  box-sizing: border-box;
  padding: 15px;
  text-align: center;
  background: #fdfde3;
  border: 4px solid #006938;
  color: #006938;
  font-weight: 500;
  font-size: 22px; /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
}
@media all and (max-width: 896px) {
  .course_ttl {
    padding: 10px;
    font-size: 18px; /*IE9以下で反映されるよう記述*/
    font-size: 1.125rem;
  }
}

.course_subttl {
  font-size: 22px; /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
  font-weight: 500;
  color: #006938;
}
@media all and (max-width: 896px) {
  .course_subttl {
    font-size: 18px; /*IE9以下で反映されるよう記述*/
    font-size: 1.125rem;
  }
}
.course_subttl span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.2em 0.9em 0.25em;
  background: #fdfd2d;
}

.block_course {
  background: #006938;
  padding: 40px 60px;
  max-width: 1030px;
  overflow: hidden;
  position: relative;
}
@media all and (max-width: 896px) {
  .block_course {
    padding: 30px 15px;
  }
}
.block_course::before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background: #f46d34;
  border-radius: 50%;
  position: absolute;
  top: -28px;
  left: -28px;
}
.block_course::after {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background: #f46d34;
  border-radius: 50%;
  position: absolute;
  bottom: -28px;
  right: -28px;
}

.block_course_right {
  margin-right: auto;
}

.block_course_left {
  margin-left: auto;
}

.box_course {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media all and (max-width: 896px) {
  .box_course {
    flex-direction: column-reverse;
  }
}
.box_course > dt {
  width: 280px;
  height: 100%;
}
@media all and (max-width: 896px) {
  .box_course > dt {
    width: 220px;
  }
}
.box_course > dd {
  box-sizing: border-box;
  width: calc(100% - 310px);
  background: #fff;
  padding: 15px;
}
@media all and (max-width: 896px) {
  .box_course > dd {
    width: 100%;
    margin-bottom: 15px;
  }
}
@media all and (max-width: 896px) {
  .box_course .class_ttl {
    text-align: center;
  }
}

.box_course_mb {
  margin-bottom: 30px;
}

.class_ttl {
  margin-bottom: 15px;
}
.class_ttl span {
  padding-bottom: 0.2em;
  border-bottom: 3px solid #fdfd2d;
}

/* price
*****************************************************************/
.price {
  padding: 100px 0;
  background: url("../images/circle12.svg") no-repeat left 10vw top 86px/175px 175px, url("../images/circle13.svg") no-repeat left 30vw top 168px/95px 95px, url("../images/circle14.svg") no-repeat right 15vw top 360px/156px 156px, url("../images/circle15.svg") no-repeat right 16vw bottom 340px/90px 90px, url("../images/circle16.svg") no-repeat right 7vw bottom 178px/147px 147px;
}
@media all and (max-width: 896px) {
  .price {
    padding: 50px 0;
    background: url("../images/circle12.svg") no-repeat left 4vw top 30px/70px 70px, url("../images/circle13.svg") no-repeat left 21vw top 90px/38px 38px, url("../images/circle14.svg") no-repeat right 4vw top 100px/62.4px 62.4px, none, none;
  }
}

.table_price {
  box-sizing: border-box;
  border-top: 1px solid #b2b2b2;
  border-left: 1px solid #b2b2b2;
}
.table_price th {
  box-sizing: border-box;
  padding: 10px 20px;
  background: #006938;
  color: #fff;
  text-align: center;
  font-weight: 500;
  border-right: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2;
}
.table_price th.table_schedule {
  width: 440px;
}
.table_price td {
  box-sizing: border-box;
  padding: 10px 20px;
  border-right: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2;
}
.table_price td.table_class {
  background: #f8fff2;
  font-weight: 500;
}

@media all and (max-width: 896px) {
  .block_price {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 35px 15px;
    border: 2px solid #006938;
    margin-bottom: 20px;
  }
  .block_price::before {
    content: "";
    display: inline-block;
    width: 56px;
    height: 56px;
    background: #006938;
    border-radius: 50%;
    position: absolute;
    top: -28px;
    left: -28px;
  }
  .block_price::after {
    content: "";
    display: inline-block;
    width: 56px;
    height: 56px;
    background: #006938;
    border-radius: 50%;
    position: absolute;
    bottom: -28px;
    right: -28px;
  }
}
@media all and (max-width: 896px) {
  .block_price .course_subttl {
    text-align: center;
  }
}
@media all and (max-width: 896px) {
  .block_price .class_ttl {
    text-align: center;
  }
}

.block_price_mb {
  margin-bottom: 40px;
}

@media all and (max-width: 896px) {
  .list_price > li {
    padding: 15px;
    background: #f8fff2;
    margin-bottom: 20px;
    border: 2px solid #006938;
  }
  .list_price > li:last-of-type {
    margin-bottom: 0;
  }
}

/* staff
*****************************************************************/
.staff {
  padding: 100px 0;
  background: url("../images/circle17.svg") no-repeat right 10vw top 30px/213px 213px, url("../images/circle18.svg") no-repeat right 23.5vw top 242px/96px 96px, url("../images/circle19.svg") no-repeat left 10vw bottom 580px/104px 104px, url("../images/circle20.svg") no-repeat left 3vw bottom 340px/178px 178px, #fff9f2;
}
@media all and (max-width: 896px) {
  .staff {
    padding: 50px 0;
    background: url("../images/circle17.svg") no-repeat right 4vw top 20px/85.2px 85.2px, url("../images/circle18.svg") no-repeat left 4vw top 120px/38.4px 38.4px, none, url("../images/circle20.svg") no-repeat right 4vw bottom 30px/71.2px 71.2px, #fff9f2;
  }
}

.block_staff {
  display: flex;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  .block_staff {
    flex-direction: column;
    align-items: center;
  }
}

.block_staff_reverse {
  flex-direction: row-reverse;
}
@media all and (max-width: 896px) {
  .block_staff_reverse {
    flex-direction: column;
  }
}

.img_staff {
  width: 420px;
  height: 100%;
}
@media all and (max-width: 896px) {
  .img_staff {
    width: 200px;
    margin-bottom: 20px;
  }
}

.txt_staff {
  width: calc(100% - 450px);
}
@media all and (max-width: 896px) {
  .txt_staff {
    width: 100%;
  }
}

.txt_post {
  font-size: 24px; /*IE9以下で反映されるよう記述*/
  font-size: 1.5rem;
  color: #006938;
  font-weight: 500;
}
@media all and (max-width: 896px) {
  .txt_post {
    font-size: 18px; /*IE9以下で反映されるよう記述*/
    font-size: 1.125rem;
  }
}

.txt_name {
  font-size: 28px; /*IE9以下で反映されるよう記述*/
  font-size: 1.75rem;
  font-weight: 500;
}
@media all and (max-width: 896px) {
  .txt_name {
    text-align: center;
    font-size: 22px; /*IE9以下で反映されるよう記述*/
    font-size: 1.375rem;
    line-height: 1.3;
  }
}
.txt_name span {
  font-size: 0.7em;
}

.list_work > li {
  padding-left: 1em;
  position: relative;
}
.list_work > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

/* qanda
*****************************************************************/
.qanda {
  padding: 100px 0;
  background: url("../images/circle21.svg") no-repeat right -150px top 80px/300px 300px, url("../images/circle22.svg") no-repeat right 5.2vw top 380px/147px 147px, url("../images/circle23.svg") no-repeat left -75px bottom 537px/150px 150px, url("../images/circle24.svg") no-repeat left 4.2vw bottom 377px/110px 110px, #fff;
}
@media all and (max-width: 896px) {
  .qanda {
    padding: 50px 0;
    background: url("../images/circle21.svg") no-repeat right -60px top 10px/120px 120px, url("../images/circle22.svg") no-repeat left -35px top 95px/70px 70px, none, none, #fff;
  }
}
.qanda .block_qanda {
  margin-bottom: -30px;
}
@media all and (max-width: 896px) {
  .qanda .block_qanda {
    margin-bottom: -20px;
  }
}
.qanda .box_qanda {
  margin-bottom: 30px;
}
@media all and (max-width: 896px) {
  .qanda .box_qanda {
    margin-bottom: 20px;
  }
}
.qanda .box_qanda > dt {
  box-sizing: border-box;
  padding: 20px 20px 20px 80px;
  color: #fff;
  background: #006938;
  font-size: 20px; /*IE9以下で反映されるよう記述*/
  font-size: 1.25rem;
  line-height: 1.5;
  position: relative;
}
@media all and (max-width: 896px) {
  .qanda .box_qanda > dt {
    padding: 14px 14px 14px 45px;
    font-size: 14px; /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
}
.qanda .box_qanda > dt::before {
  content: "Q";
  font-family: "Kanit", sans-serif;
  font-style: italic;
  font-size: 50px; /*IE9以下で反映されるよう記述*/
  font-size: 3.125rem;
  color: #fdfd2d;
  position: absolute;
  top: -8px;
  left: 20px;
}
@media all and (max-width: 896px) {
  .qanda .box_qanda > dt::before {
    font-size: 35px; /*IE9以下で反映されるよう記述*/
    font-size: 2.1875rem;
    top: -5px;
    left: 10px;
  }
}
.qanda .box_qanda > dd {
  box-sizing: border-box;
  padding: 20px 20px 20px 80px;
  background: #f8fff2;
  font-size: 18px; /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
  line-height: 1.5;
  position: relative;
}
@media all and (max-width: 896px) {
  .qanda .box_qanda > dd {
    padding: 14px 14px 14px 45px;
    font-size: 14px; /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
}
.qanda .box_qanda > dd::before {
  content: "A";
  font-family: "Kanit", sans-serif;
  font-style: italic;
  font-size: 50px; /*IE9以下で反映されるよう記述*/
  font-size: 3.125rem;
  color: #006938;
  position: absolute;
  top: -8px;
  left: 20px;
}
@media all and (max-width: 896px) {
  .qanda .box_qanda > dd::before {
    font-size: 35px; /*IE9以下で反映されるよう記述*/
    font-size: 2.1875rem;
    top: -5px;
    left: 10px;
  }
}

/* access
*****************************************************************/
.access {
  padding: 120px 0 100px;
  background: #f4fcff;
}
@media all and (max-width: 896px) {
  .access {
    padding: 60px 0 50px;
  }
}

.access__inner {
  position: relative;
}

.arrow {
  position: absolute;
}

.arrow01 {
  width: 123px;
  top: 140px;
  left: 1.3vw;
}
@media all and (max-width: 896px) {
  .arrow01 {
    width: 54px;
    top: 76px;
    left: 15px;
  }
}

.arrow02 {
  width: 233px;
  top: 14px;
  left: 9vw;
}
@media all and (max-width: 896px) {
  .arrow02 {
    width: 93.2px;
    top: -30px;
    left: 15px;
  }
}

.arrow03 {
  width: 233px;
  top: 50px;
  right: 10vw;
}
@media all and (max-width: 896px) {
  .arrow03 {
    width: 93.2px;
    top: 50px;
    right: 15px;
  }
}

.arrow04 {
  width: 123px;
  top: 0;
  right: 1.3vw;
}
@media all and (max-width: 896px) {
  .arrow04 {
    width: 54px;
    top: -10px;
    right: 15px;
  }
}

.block_map {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.box_googlemap {
  width: 59.16%;
  border: 2px solid #006938;
}
@media all and (max-width: 896px) {
  .box_googlemap {
    width: 100%;
    margin-bottom: 30px;
  }
}

.googlemap__outer {
  position: relative;
  padding-top: 50.7%;
}
@media all and (max-width: 896px) {
  .googlemap__outer {
    padding-top: 86.9%;
  }
}
.googlemap__outer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box_sketchmap {
  width: 38%;
  border: 2px solid #006938;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media all and (max-width: 896px) {
  .box_sketchmap {
    width: 100%;
    padding: 15px;
  }
}
.box_sketchmap img {
  width: 90%;
}

.access_tel {
  color: #231815;
  pointer-events: none;
}
@media all and (max-width: 480px) {
  .access_tel {
    pointer-events: auto;
  }
}

/* entry
*****************************************************************/
.entry {
  padding: 100px 0;
  background-image: url("../images/bg_circle.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: center center;
}
@media all and (max-width: 896px) {
  .entry {
    padding: 50px 0;
  }
}

.txt_entry {
  font-size: 18px; /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  line-height: 2;
}
@media all and (max-width: 896px) {
  .txt_entry {
    font-size: 16px; /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}
.txt_entry .txt_em {
  line-height: 1.4;
}

.txt_benefits {
  text-align: center;
  color: #006938;
  font-size: 20px; /*IE9以下で反映されるよう記述*/
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2;
}
@media all and (max-width: 896px) {
  .txt_benefits {
    font-size: 16px; /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

.box_present {
  text-align: center;
  font-size: 20px; /*IE9以下で反映されるよう記述*/
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 50px;
  line-height: 1.6;
}
@media all and (max-width: 896px) {
  .box_present {
    font-size: 16px; /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
    margin-bottom: 30px;
  }
}

.txt_present {
  box-sizing: border-box;
  padding: 1em 3em;
  display: inline-block;
  background: #f46d34;
  color: #fff;
  position: relative;
}
@media all and (max-width: 896px) {
  .txt_present {
    padding: 1.4em;
  }
}
.txt_present::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 35px 0 35px;
  border-color: #f46d34 transparent transparent transparent;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translate(-50%, 0);
}
@media all and (max-width: 896px) {
  .txt_present::after {
    border-width: 23px 29px 0 29px;
    bottom: -17px;
  }
}