@charset "UTF-8";
/* #####################################
/* 　リセットCSS
/* ##################################### */
* {
  box-sizing: border-box;
}
html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}
article,
header,
footer,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  letter-spacing: 0;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol,
ul {
  list-style: none;
  list-style-type: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
/*--- [ボタン系] ブラウザごとの差異をリセット ---*/
input[type="text"],
input[type="tel"],
input[type="email"] {
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}
select {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}
select::-ms-expand {
  display: none;
}
textarea {
  appearance: none;
  resize: none;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
}
button,
input[type="submit"] {
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
}
/* #####################################
/* 　共通設定
/* ##################################### */
/*#######  カラーパレット  #######*/
/*#######  フォルダパス  #######*/
/*#######  フォント  #######*/
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v12/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OWaA.ttf) format('truetype');
}
/*#######  基本クラス  #######*/
html {
  font-size: 62.5%;
}
body {
  background-color: white;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}
.bigContainer {
  width: 100%;
  max-width: 160rem;
  margin: auto;
}
.container {
  width: 75%;
  max-width: 120rem;
  margin: auto;
}
@media (max-width: 768px) {
  .container {
    width: 92%;
  }
}
/*--- 改行系 ---*/
.autoReturn {
  display: inline-block;
}
/*--- PC/SP 切り替え ---*/
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}
/*--- 太字 ---*/
.bold {
  font-weight: bold !important;
}
/* #####################################
/* 　共通クラス
/* ##################################### */
.keyvisual img {
  width: 100%;
}
.secTtl {
  position: absolute;
  top: 1.3rem;
  left: -4.5rem;
  width: auto;
  height: 13rem;
}
@media (max-width: 768px) {
  .secTtl {
    position: static;
    display: block;
    width: auto;
    height: 5.8rem;
    margin: 0 auto 3rem 0;
  }
  .secTtl img {
    height: 100%;
    width: auto;
  }
}
/*---- CV ----*/
.CV {
  padding: 12rem 0 31rem;
  background: url("../img/lesson/lesson_conversion_bg.jpg") no-repeat bottom center / cover;
}
@media (max-width: 768px) {
  .CV {
    padding: 2.9rem 0 28.5rem;
    background: url("../img/lesson/sp_lesson_conversion_bg.jpg") no-repeat bottom center / cover;
  }
}
.CV .flowLink {
  margin: 0 auto 17rem;
  width: 75rem;
  height: 12.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #222222;
  background-color: white;
  color: #222222;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.05;
  position: relative;
}
.CV .flowLink::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 1rem;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
.CV .flowLink:hover {
  background-color: #eee;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .CV .flowLink {
    margin: -13.5rem auto 7.5rem;
    width: 100%;
    height: 6rem;
    font-size: 1.2rem;
  }
  .CV .flowLink::after {
    width: 1rem;
    height: 0.5rem;
    right: 1.5rem;
  }
}
.CV .applicationLink {
  width: 100%;
  height: 18rem;
  border-radius: 1rem;
  padding: 0 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f01b52;
  color: white;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  position: relative;
}
.CV .applicationLink::after {
  position: absolute;
  content: "";
  width: 4.5rem;
  height: 2rem;
  top: 50%;
  right: 4.5rem;
  transform: translateY(-50%);
  background: url("../img/icon_whiteArrow.png") no-repeat center / contain;
}
.CV .applicationLink:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  .CV .applicationLink {
    height: 9rem;
    padding: 0 4.5rem;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .CV .applicationLink::after {
    width: 2.2rem;
    height: 1rem;
    right: 1.5rem;
  }
}
/*---- サポート ----*/
.support {
  /* padtop 15.5rem ? */
  padding: 11rem 0 66rem;
  background: url("../img/lesson/lesson_support_bg.jpg") no-repeat bottom center / contain;
}
@media (max-width: 768px) {
  .support {
    background: #eff0f0 url("../img/lesson/sp_lesson_support_bg.jpg") no-repeat bottom center / contain;
    padding: 3.5rem 0 33rem;
  }
}
.support .support_ttl {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 3rem;
  line-height: 4rem;
  letter-spacing: 0.05em;
  margin-bottom: 10rem;
  position: relative;
}
.support .support_ttl::after {
  position: absolute;
  content: "";
  width: 12rem;
  height: 0.3rem;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f01b52;
}
@media (max-width: 768px) {
  .support .support_ttl {
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-bottom: 5.6rem;
  }
  .support .support_ttl::after {
    width: 6rem;
    bottom: -1.8rem;
  }
}
.support .support_patterns {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .support .support_patterns {
    flex-direction: column;
  }
}
.support .support_patterns .support_patterns_box {
  width: 47.5%;
  padding: 6.5rem 1rem;
  border: 1px solid #222222;
  background-color: white;
  text-align: center;
}
@media (max-width: 768px) {
  .support .support_patterns .support_patterns_box {
    width: 100%;
    padding: 3.1rem 1rem;
  }
  .support .support_patterns .support_patterns_box:first-of-type {
    margin-bottom: 2.3rem;
  }
}
.support .support_patterns .support_patterns_small {
  color: #222222;
  font-weight: 200;
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.support .support_patterns .support_patterns_big {
  color: #222222;
  font-weight: 600;
  font-size: 2.8rem;
}
@media (max-width: 768px) {
  .support .support_patterns .support_patterns_small {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
  .support .support_patterns .support_patterns_big {
    font-size: 1.8rem;
  }
}
#header {
  background-color: white;
  margin-bottom: 3rem;
  /*------------------------------*/
  /*            1列目             */
  /*------------------------------*/
  /*-- 右上に浮かぶレッスンアイコン --*/
  /*-- ハンバーガー --*/
  /*------------------------------*/
  /*            2列目             */
  /*------------------------------*/
}
@media (max-width: 768px) {
  #header {
    margin-bottom: 2rem;
  }
}
#header .headerFirstRow {
  display: flex;
  padding: 2.8rem 0;
  position: relative;
}
@media (max-width: 768px) {
  #header .headerFirstRow {
    padding: 0;
    margin-right: -4%;
    margin-bottom: 2.2rem;
  }
}
#header .headerLeft {
  width: auto;
}
#header .headerLeft img {
  width: auto;
  height: 6rem;
}
#header .headerLeft img:hover {
  background-color: #eee;
  opacity: 0.9;
}
@media (max-width: 768px) {
  #header .headerLeft a img {
    margin-top: 1.3rem;
    height: 3.7rem;
  }
}
#header .headerRight {
  width: auto;
  margin-left: auto;
  display: flex;
}
#header .headerRight a {
  display: block;
  width: auto;
  height: 3rem;
  margin: auto 0 0 2rem;
}
#header .headerRight a img {
  height: 100%;
  width: auto;
}
#header .headerRight .login:hover {
  opacity: 0.7;
}
#header .headerRight .contact:hover {
  background-color: #eee;
  opacity: 0.9;
}
@media (max-width: 768px) {
  #header .headerRight .login {
    height: 5rem;
    margin: 0;
  }
  #header .headerRight .contact {
    display: none;
  }
}
#header .lessonIcon {
  position: absolute;
  top: 0;
  right: -15%;
  width: 16.5rem;
  height: auto;
}
@media (max-width: 768px) {
  #header .lessonIcon {
    display: none;
  }
}
#header .humberger {
  display: none;
}
#header .closeIcon {
  display: none;
}
@media (max-width: 768px) {
  #header .humberger {
    cursor: pointer;
    display: block;
    width: auto;
    height: 5rem;
  }
  #header .humberger .humbergerIcon {
    height: 100%;
  }
  #header .humberger .closeIcon {
    height: 100%;
    /* headerMenuModal よりも手前に表示 */
    position: relative;
    z-index: 5;
  }
}
#header .headerSecondRow {
  width: 100%;
}
@media (max-width: 768px) {
  #header .headerSecondRow {
    opacity: 1;
  }
}
/*----- PC版グロナビ -----*/
.headerMenuNormal,
.footer_sitemap {
  height: 6rem;
  display: flex;
}
@media (max-width: 768px) {
  .headerMenuNormal,
  .footer_sitemap {
    display: none;
  }
}
.headerMenuNormal .home,
.footer_sitemap .home {
  width: 14.6%;
}
.headerMenuNormal .about,
.footer_sitemap .about {
  width: 15%;
}
.headerMenuNormal .lesson,
.footer_sitemap .lesson {
  width: 23%;
}
.headerMenuNormal .flow,
.footer_sitemap .flow {
  width: 18.3%;
}
.headerMenuNormal .teacher,
.footer_sitemap .teacher {
  width: 16.7%;
}
.headerMenuNormal .faq,
.footer_sitemap .faq {
  width: 12.4%;
}
.headerMenuNormal a,
.footer_sitemap a {
  display: block;
  height: 100%;
  position: relative;
  text-align: center;
  color: #222222;
  font-weight: 300;
  font-size: 1.2rem;
  text-decoration: none;
  border-right: 1px solid #e6e6e6;
}
.headerMenuNormal a:first-of-type,
.footer_sitemap a:first-of-type {
  border-left: 1px solid #e6e6e6;
}
.headerMenuNormal a img,
.footer_sitemap a img {
  display: block;
  height: 1.5rem;
  margin: 0 auto 1.5rem;
}
.headerMenuNormal a:hover,
.footer_sitemap a:hover {
  background-color: #eee;
}
.headerMenuNormal a:hover::after,
.footer_sitemap a:hover::after {
  position: absolute;
  content: "";
  height: 0.3rem;
  width: 57%;
  bottom: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f01b52;
  z-index: 2;
}
#header {
  /*----- SP版グロナビ（フルスクリーン） -----*/
}
#header .headerMenuModal {
  z-index: 3;
  position: absolute;
  background-color: #f01b52;
  top: 5rem;
  left: 0;
  height: auto;
  width: 100%;
  padding: 0 8% 4.4rem;
  flex-direction: column;
  display: flex;
}
#header .headerMenuModal .modal_contact {
  display: block;
  margin: 3rem auto;
  max-width: 32rem;
  width: 100%;
}
#header .headerMenuModal .modal_contact img {
  width: 100%;
}
#header .headerMenuModal .modal_contact:hover {
  opacity: 0.7;
}
#header .headerMenuModal a:not(.modal_contact) {
  width: 100%;
  padding: 1.5rem 1.5rem 2rem;
  color: white;
  font-size: 1.8rem;
  border-top: 1px solid white;
}
#header .headerMenuModal a:not(.modal_contact):last-of-type {
  border-bottom: 1px solid white;
}
#header .headerMenuModal .home {
  display: none;
}
#footer {
  margin-top: 12rem;
  /*--- 1列目 ---*/
  /*--- 2列目 ---*/
  /*-- 2-1 --*/
  /*-- 2-2 --*/
  /*--- 3列目 ---*/
}
@media (max-width: 768px) {
  #footer {
    margin-top: 0;
  }
}
#footer .footer_sitemap {
  display: flex;
  margin-bottom: 4.5rem;
}
@media (max-width: 768px) {
  #footer .footer_sitemap {
    display: none;
  }
}
#footer .footer_black {
  background-color: #222222;
  padding: 7.5rem 0 3rem;
}
@media (max-width: 768px) {
  #footer .footer_black {
    padding: 5rem 0 2rem;
  }
}
#footer .footer_black_1 {
  display: flex;
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  #footer .footer_black_1 {
    flex-direction: column;
    margin-bottom: 4.7rem;
  }
}
#footer .footer_black_1 .footer_black_left {
  width: 15rem;
  height: auto;
  margin-right: auto;
}
#footer .footer_black_1 .footer_black_left img {
  width: 100%;
}
#footer .footer_black_1 .footer_black_left:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  #footer .footer_black_1 .footer_black_left {
    width: 9.7rem;
    margin: 0 auto 4.5rem;
  }
}
#footer .footer_black_1 .footer_black_right {
  width: auto;
  margin-left: auto;
  display: flex;
}
#footer .footer_black_1 .footer_black_right a {
  display: inline-block;
  width: 4.5rem;
  margin: auto 0 0 1.5rem;
}
#footer .footer_black_1 .footer_black_right a img {
  width: 100%;
}
#footer .footer_black_1 .footer_black_right a:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  #footer .footer_black_1 .footer_black_right {
    margin: auto;
  }
  #footer .footer_black_1 .footer_black_right a {
    width: 3.8rem;
    margin: 0 0.75rem;
  }
}
#footer .footer_black_2 {
  display: flex;
}
#footer .footer_black_2 .footer_black_left {
  width: auto;
  margin-right: auto;
  display: flex;
}
#footer .footer_black_2 .footer_black_left a {
  display: inline-block;
  color: white;
  font-weight: 200;
  font-size: 1.2rem;
}
#footer .footer_black_2 .footer_black_left a:not(:last-of-type) {
  padding-right: 1.2rem;
  border-right: 1px solid white;
  margin-right: 1.2rem;
}
@media (max-width: 768px) {
  #footer .footer_black_2 .footer_black_left {
    margin: auto;
  }
  #footer .footer_black_2 .footer_black_left a {
    font-size: 1rem;
  }
}
#footer .footer_black_2 .footer_black_right {
  color: white;
  font-weight: 200;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  #footer .footer_black_2 .footer_black_right {
    display: none;
  }
}
#footer .footer_copyright {
  padding: 1.5rem 0;
  text-align: center;
  background-color: white;
  color: #222222;
  font-weight: 200;
  font-size: 0.8rem;
}
#front-page {
  /*--- 共通 ---*/
  /*--- セクション:　KVsection ---*/
  /*--- セクション: topInfo ---*/
  /*--- セクション:　newsAndTopics ---*/
  /*--- セクション:　feature ---*/
  /*--- セクション:　begin ---*/
  /*--- セクション:　movie ---*/
  /*--- セクション:　voice ---*/
}
#front-page .section_bdTtl {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 3.5rem;
}
@media (max-width: 768px) {
  #front-page .section_bdTtl {
    font-size: 2rem;
    margin-bottom: 3.3rem;
  }
}
#front-page .section_centerDesc {
  text-align: center;
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05em;
  margin-bottom: 7rem;
}
@media (max-width: 768px) {
  #front-page .section_centerDesc {
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.8rem;
    margin-bottom: 4.2rem;
  }
}
#front-page .KVsection {
  position: relative;
}
#front-page .KVsection .KV {
  margin-bottom: 6rem;
  /*-- PC版リンクの位置 --*/
  /*-- SP版リンクの位置 --*/
  /*-- ページ送り表示 --*/
}
#front-page .KVsection .KV img {
  width: 100%;
}
#front-page .KVsection .KV .KV_1,
#front-page .KVsection .KV .KV_3,
#front-page .KVsection .KV .KV_4 {
  position: relative;
}
#front-page .KVsection .KV .KV_1 a,
#front-page .KVsection .KV .KV_3 a,
#front-page .KVsection .KV .KV_4 a {
  position: absolute;
  width: 25%;
  height: 13.8%;
  left: 6.2%;
  bottom: 10.8%;
}
#front-page .KVsection .KV .KV_1 a:hover,
#front-page .KVsection .KV .KV_3 a:hover,
#front-page .KVsection .KV .KV_4 a:hover {
  opacity: 0.7;
}
#front-page .KVsection .KV .KV_2 {
  position: relative;
}
#front-page .KVsection .KV .KV_2 a {
  position: absolute;
  width: 25%;
  height: 13.8%;
  left: 37.5%;
  bottom: 10.8%;
}
#front-page .KVsection .KV .KV_2 a:hover {
  opacity: 0.7;
}
#front-page .KVsection .KV .sp_KV_1 {
  position: relative;
}
#front-page .KVsection .KV .sp_KV_1 a {
  position: absolute;
  width: 52%;
  height: 13.9%;
  left: 6.5%;
  bottom: 8.3%;
}
#front-page .KVsection .KV .sp_KV_1 a:hover {
  opacity: 0.7;
}
#front-page .KVsection .KV .sp_KV_2,
#front-page .KVsection .KV .sp_KV_3,
#front-page .KVsection .KV .sp_KV_4 {
  position: relative;
}
#front-page .KVsection .KV .sp_KV_2 a,
#front-page .KVsection .KV .sp_KV_3 a,
#front-page .KVsection .KV .sp_KV_4 a {
  position: absolute;
  width: 50%;
  height: 13.9%;
  left: 23%;
  bottom: 8.3%;
}
#front-page .KVsection .KV .sp_KV_2 a:hover,
#front-page .KVsection .KV .sp_KV_3 a:hover,
#front-page .KVsection .KV .sp_KV_4 a:hover {
  opacity: 0.7;
}
#front-page .KVsection .KV .slick-dots {
  text-align: right;
  bottom: -4.5rem;
}
#front-page .KVsection .KV .slick-dots li {
  width: 3rem;
  margin: 0 0.8rem;
}
#front-page .KVsection .KV .slick-dots li button:before {
  content: "";
  width: 3rem;
  height: 0.5rem;
  background-color: #e8e8e8;
  opacity: 1;
}
#front-page .KVsection .KV .slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: #f01b52;
}
@media (max-width: 768px) {
  #front-page .KVsection .KV .slick-dots {
    text-align: center;
    bottom: -3.5rem;
  }
}
#front-page .KVsection .sp_lessonBtn {
  position: absolute;
  width: 7rem;
  bottom: -4.8rem;
  right: -1.5rem;
}
#front-page .topInfo {
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  #front-page .topInfo {
    margin-bottom: 4.5rem;
  }
}
#front-page .topInfo .info_flex {
  width: 100%;
  display: flex;
}
@media (max-width: 768px) {
  #front-page .topInfo .info_flex {
    flex-direction: column;
  }
}
#front-page .topInfo .info_logo {
  width: 12rem;
  height: 12rem;
}
#front-page .topInfo .info_logo img {
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  #front-page .topInfo .info_logo {
    width: 100%;
    height: auto;
    padding-bottom: 0.6rem;
  }
  #front-page .topInfo .info_logo img {
    width: 11.5rem;
    margin-right: auto;
  }
}
#front-page .topInfo .info_list {
  flex: 1;
  padding: 3.7rem 0 3.7rem 4rem;
  background-color: #fef3f6;
}
#front-page .topInfo .info_list .info_article {
  display: flex;
}
#front-page .topInfo .info_list .info_article:first-of-type {
  margin-bottom: 1.3rem;
}
#front-page .topInfo .info_list .info_article_date {
  font-family: "Roboto Slab", serif;
  color: #f01b52;
  font-size: 1.3rem;
  margin-right: 2.5rem;
}
#front-page .topInfo .info_list .info_article_ttl {
  flex: 1;
  color: #f01b52;
  font-weight: 200;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #front-page .topInfo .info_list {
    flex: none;
    width: 100%;
    padding: 2.1rem 1.5rem 1.9rem;
  }
  #front-page .topInfo .info_list .info_article:first-of-type {
    margin-bottom: 2rem;
  }
  #front-page .topInfo .info_list .info_article_date {
    font-size: 1rem;
    margin-right: 1rem;
  }
  #front-page .topInfo .info_list .info_article_ttl {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
}
#front-page .newsAndTopics {
  display: flex;
  margin-bottom: 9rem;
  /*--- 横幅・余白 ---*/
  /*--- news ---*/
  /* news head */
  /* news list */
  /*--- topics ---*/
  /* topics head */
  /* topis list */
}
@media (max-width: 768px) {
  #front-page .newsAndTopics {
    flex-direction: column;
    margin-bottom: 0;
  }
}
#front-page .newsAndTopics .news {
  width: 42.5%;
  padding: 2.7rem 0 4.3rem;
  margin: 0 3.75%;
}
#front-page .newsAndTopics .topics {
  flex: 1;
  padding: 2.7rem 4.5rem 4.3rem;
  background-color: #fafafa;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news {
    flex: none;
    width: 100%;
    padding: 0;
    margin: 0 0 6rem;
  }
  #front-page .newsAndTopics .topics {
    flex: none;
    width: 100%;
    padding: 0;
    background-color: transparent;
  }
}
#front-page .newsAndTopics .news_head {
  display: flex;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_head {
    padding-bottom: 2.1rem;
    border-bottom: 1px solid #222222;
    margin-bottom: 0.9rem;
  }
}
#front-page .newsAndTopics .news_head_ttl {
  width: auto;
  margin-right: auto;
  color: #222222;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.025em;
}
#front-page .newsAndTopics .news_head_ttl .eng {
  font-family: "Roboto Slab", serif;
  font-size: 5rem;
  letter-spacing: 0.025em;
}
#front-page .newsAndTopics .news_listlink {
  margin: auto 0 0 auto;
  border: 1px solid #222222;
  width: 12rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222222;
  font-weight: 300;
  font-size: 1.3rem;
  position: relative;
}
#front-page .newsAndTopics .news_listlink::after {
  position: absolute;
  content: "";
  width: 1.6rem;
  height: 0.6rem;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_head_ttl {
    font-size: 1.2rem;
  }
  #front-page .newsAndTopics .news_head_ttl .eng {
    font-size: 3rem;
  }
  #front-page .newsAndTopics .news_listlink {
    display: none;
  }
}
#front-page .newsAndTopics .sp_news_listlink,
#front-page .newsAndTopics .sp_topics_listlink {
  display: none;
  max-width: 31.5rem;
  height: 4.5rem;
  margin: 0.7rem auto 0;
  justify-content: center;
  align-items: center;
  border: 1px solid #222222;
  background-color: white;
  color: #222222;
  font-weight: 300;
  font-size: 1.2rem;
  position: relative;
}
#front-page .newsAndTopics .sp_news_listlink::after,
#front-page .newsAndTopics .sp_topics_listlink::after {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 0.7rem;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
#front-page .newsAndTopics .sp_news_listlink {
  width: 91%;
}
#front-page .newsAndTopics .sp_topics_listlink {
  width: 100%;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .sp_news_listlink,
  #front-page .newsAndTopics .sp_topics_listlink {
    display: flex;
  }
}
#front-page .newsAndTopics .news_article {
  display: flex;
  margin-bottom: 3.2rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_article {
    width: 91%;
    flex-wrap: wrap;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    margin: 0 auto;
  }
}
#front-page .newsAndTopics .news_link {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#front-page .newsAndTopics .news_cat {
  width: 7.5rem;
  height: 1.8rem;
  margin-right: 6%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f01b52;
  border-radius: 0.2rem;
  font-family: "Roboto Slab", serif;
  color: #f01b52;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_cat {
    order: 2;
    width: auto;
    padding: 0 0.7rem;
    height: 1.4rem;
    margin-right: auto;
  }
}
#front-page .newsAndTopics .news_date {
  width: 7.5rem;
  margin-right: 2.7%;
  font-family: "Roboto Slab", serif;
  color: #222222;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_date {
    order: 1;
    width: auto;
    margin-right: 0.7rem;
  }
}
#front-page .newsAndTopics .news_ttl {
  flex: 1;
  margin-top: -0.5rem;
  font-size: 1.3rem;
  line-height: 2.3rem;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .news_ttl {
    order: 3;
    flex: none;
    width: 100%;
    margin-top: 0.6rem;
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
}
#front-page .newsAndTopics .topics_head {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_head {
    display: block;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #222222;
    margin-bottom: 0;
  }
}
#front-page .newsAndTopics .topics_head_ttl {
  width: auto;
  margin-right: auto;
  color: #222222;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.025em;
}
#front-page .newsAndTopics .topics_head_ttl .eng {
  font-family: "Roboto Slab", serif;
  font-size: 5rem;
  letter-spacing: 0.025em;
}
#front-page .newsAndTopics .topics_listlink {
  margin: auto 0 0 auto;
  border: 1px solid #222222;
  width: 12rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222222;
  font-weight: 300;
  font-size: 1.3rem;
  position: relative;
}
#front-page .newsAndTopics .topics_listlink::after {
  position: absolute;
  content: "";
  width: 1.6rem;
  height: 0.6rem;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_head_ttl {
    font-size: 1.2rem;
  }
  #front-page .newsAndTopics .topics_head_ttl .eng {
    font-size: 3rem;
  }
  #front-page .newsAndTopics .topics_listlink {
    display: none;
  }
}
#front-page .newsAndTopics .topics_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_list {
    background-color: #fafafa;
    padding: 1.5rem 1.5rem 3rem;
  }
}
#front-page .newsAndTopics .topics_link {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#front-page .newsAndTopics .topics_box {
  width: 47%;
  border-radius: 0.4rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_box {
    margin-bottom: 1.4rem;
  }
}
#front-page .newsAndTopics .topics_thumbnail {
  width: 100%;
  height: 12rem;
}
#front-page .newsAndTopics .topics_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_thumbnail {
    height: 7.5rem;
  }
}
#front-page .newsAndTopics .topics_ttl {
  height: 9rem;
  padding: 2.4rem 12.5% 0;
  background-color: white;
  color: #222222;
  font-size: 1.4rem;
  line-height: 2rem;
}
@media (max-width: 768px) {
  #front-page .newsAndTopics .topics_ttl {
    height: 7rem;
    padding: 1.4rem 10% 0;
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
}
#front-page .feature {
  background: url("../img/top/feature_bg.jpg") no-repeat top center / contain;
}
#front-page .feature > .container {
  padding: 14rem 4.5rem 13rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .feature {
    background: none;
  }
  #front-page .feature > .container {
    padding: 6.2rem 1.5rem 2.4rem;
    position: relative;
  }
  #front-page .feature .secTtl {
    margin-left: -1.5rem;
  }
}
#front-page .feature .feature_big {
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 4.6rem;
  margin-bottom: 3.7rem;
  letter-spacing: 0.05em;
}
#front-page .feature .feature_desc {
  width: 64%;
  margin-right: auto;
  color: #222222;
  font-weight: 200;
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 10rem;
}
@media (max-width: 768px) {
  #front-page .feature .feature_big {
    text-align: center;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 2.7rem;
  }
  #front-page .feature .feature_desc {
    width: 100%;
    font-size: 1.4rem;
    line-height: 2.8rem;
    margin-bottom: 0;
  }
}
#front-page .feature .feature_flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  #front-page .feature .feature_flex {
    background: url("../img/top/sp_feature_bg.jpg") no-repeat top center / contain;
    padding-top: 23rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    position: relative;
  }
}
#front-page .feature .feature_box {
  border-radius: 1rem;
  box-shadow: 5px 0 10px 3px #eee;
  background-color: white;
  width: 23%;
  padding: 3rem 1.5% 4.5rem;
  position: relative;
}
#front-page .feature .feature_box::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
  top: 70%;
  right: -10%;
  background: url("../img/top/top_plus.png") no-repeat center / contain;
}
#front-page .feature .feature_box:last-of-type::after {
  visibility: hidden;
}
@media (max-width: 768px) {
  #front-page .feature .feature_box {
    border-radius: 0.3rem;
    width: 45%;
    margin-bottom: 2.8rem;
    padding: 1.7rem 1rem 2rem;
  }
  #front-page .feature .feature_box::after {
    width: 2.6vw !important;
    height: 2.6vw !important;
  }
  #front-page .feature .feature_box:nth-of-type(1)::after {
    top: 50%;
    right: -7vw;
    transform: translate(-50%, 0);
  }
  #front-page .feature .feature_box:nth-of-type(2)::after {
    top: calc(100% + 1.4rem);
    right: 50%;
    transform: translate(50%, -50%);
  }
  #front-page .feature .feature_box:nth-of-type(3)::after {
    top: -1.4rem;
    right: 50%;
    transform: translate(50%, -50%);
  }
  #front-page .feature .feature_box:nth-of-type(4)::after {
    visibility: visible;
    top: 50%;
    right: calc(100% + 3vw);
    transform: translate(0%, -50%);
  }
}
#front-page .feature .feature_box_img {
  width: 100%;
  margin-bottom: 3rem;
}
#front-page .feature .feature_box_img img {
  width: 100%;
}
#front-page .feature .feature_box_txt {
  text-align: center;
  color: #222222;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.4rem;
}
@media (max-width: 768px) {
  #front-page .feature .feature_box_img {
    max-width: 13rem;
    margin: 0 auto 1.5rem;
  }
  #front-page .feature .feature_box_txt {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}
#front-page .feature .feature_btn {
  width: 42rem;
  height: 7.5rem;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #222222;
  color: #222222;
  font-weight: 600;
  font-size: 1.4rem;
  position: relative;
}
#front-page .feature .feature_btn::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 1rem;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
#front-page .feature .feature_btn:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  #front-page .feature .feature_btn {
    width: 100%;
    max-width: 31.5rem;
    height: 4.5rem;
    font-size: 1rem;
  }
  #front-page .feature .feature_btn::after {
    width: 0.9rem;
    height: 0.5rem;
    right: 1.5rem;
  }
}
#front-page .begin {
  background: url("../img/top/begin_bg.png") no-repeat center / cover;
}
#front-page .begin > .container {
  padding: 13rem 0 9rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .begin {
    background: url("../img/top/sp_begin_bg.png") no-repeat center / cover;
  }
  #front-page .begin > .container {
    padding: 3.6rem 1.5rem 3.7rem;
    position: relative;
  }
  #front-page .begin .secTtl {
    margin-left: -1.5rem;
    width: 21rem;
  }
}
#front-page .begin .flow_flex {
  padding: 0;
}
@media (max-width: 768px) {
  #front-page .begin .flow_flex {
    padding: 0;
  }
}
#front-page .begin .begin_linkBtn {
  margin: 6.5rem auto 0;
  width: 42rem;
  height: 7.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #222222;
  background-color: white;
  color: #222222;
  font-weight: 600;
  font-size: 1.4rem;
  position: relative;
}
#front-page .begin .begin_linkBtn::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 1rem;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  background: url("../img/icon_blackArrow.png") no-repeat center / contain;
}
#front-page .begin .begin_linkBtn:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  #front-page .begin .begin_linkBtn {
    margin: 0 auto;
    width: 100%;
    max-width: 31.5rem;
    height: 4.5rem;
    font-size: 1rem;
  }
  #front-page .begin .begin_linkBtn::after {
    width: 0.9rem;
    height: 0.5rem;
    right: 1.5rem;
  }
}
#front-page .movie {
  margin-top: 7.5rem;
}
#front-page .movie > .container {
  padding: 13rem 0 12rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .movie {
    margin-top: 6rem;
  }
  #front-page .movie > .container {
    padding: 0 1.5rem 3rem;
  }
  #front-page .movie .secTtl {
    margin-left: -1.5rem;
  }
}
#front-page .movie .movie_flex {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  #front-page .movie .movie_flex {
    flex-direction: column;
  }
}
#front-page .movie .movie_box {
  width: 47.6%;
  padding: 1.5rem 1.5rem 3rem;
  box-shadow: 5px 0 10px 3px #eee;
}
@media (max-width: 768px) {
  #front-page .movie .movie_box {
    width: calc(100% + 1.5rem);
    margin: 0 -0.75rem 3rem;
    padding: 1rem 0.75rem 2.8rem;
  }
}
#front-page .movie .iframe_outer {
  width: 100%;
  height: 0;
  padding-top: 55.5%;
  margin-bottom: 3rem;
  position: relative;
}
#front-page .movie .iframe_outer iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  #front-page .movie .iframe_outer {
    margin-bottom: 1.4rem;
  }
}
#front-page .movie .movie_box_txt {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #front-page .movie .movie_box_txt {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}
#front-page .voice {
  background-color: #fafafa;
  /*-- スライダー --*/
}
#front-page .voice > .container {
  padding-top: 6.5rem;
}
#front-page .voice .voiceInner {
  padding: 14rem 0 7.7rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .voice > .container {
    padding: 3.3rem 1.5rem 3.8rem;
  }
  #front-page .voice .voiceInner {
    padding: 0;
  }
  #front-page .voice .secTtl {
    margin-left: -1.5rem;
  }
}
#front-page .voice .voice_slider {
  padding: 0 4.5rem;
}
@media (max-width: 768px) {
  #front-page .voice .voice_slider {
    padding: 0;
  }
}
#front-page .voice .voice_slider_box {
  width: 2.4%;
  height: 45rem;
  margin: 0 1.5rem;
  position: relative;
}
@media (max-width: 768px) {
  #front-page .voice .voice_slider_box {
    width: 16.5rem;
    height: 24.7rem;
  }
}
#front-page .voice .slide-arrow {
  z-index: 2;
  position: absolute;
  width: 1.5rem;
  height: 3rem;
  top: 50%;
  transform: translate(0, -50%);
  background: url("../img/top/voice_slideArrow.png") no-repeat center / contain;
}
#front-page .voice .slide-arrow.prev-arrow {
  left: 0;
  transform: translate(0, -50%);
}
#front-page .voice .slide-arrow.next-arrow {
  right: 0;
  transform: translate(0, -50%) rotate(180deg);
}
@media (max-width: 768px) {
  #front-page .voice .slide-arrow {
    width: 0.8rem;
    height: 1.4rem;
  }
  #front-page .voice .slide-arrow.prev-arrow {
    left: -1.5rem !important;
  }
  #front-page .voice .slide-arrow.next-arrow {
    right: -1.5rem !important;
  }
}
#front-page .voice .voice_slider_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 89%;
  height: 28.5rem;
  z-index: 0;
}
#front-page .voice .voice_slider_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  #front-page .voice .voice_slider_img {
    width: 15rem;
    height: 14.3rem;
  }
}
#front-page .voice .voice_slider_txt {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 89%;
  height: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 2.6rem 12.5%;
}
#front-page .voice .voice_slider_txt .voice_slider_txt_1 {
  color: #222222;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.6rem;
  letter-spacing: 0.05em;
}
#front-page .voice .voice_slider_txt .voice_slider_txt_2 {
  margin-top: auto;
  text-align: right;
  color: #222222;
  font-weight: 200;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #front-page .voice .voice_slider_txt {
    width: 15rem;
    height: 12rem;
    padding: 1.3rem 1.5rem 2rem;
  }
  #front-page .voice .voice_slider_txt .voice_slider_txt_1,
  #front-page .voice .voice_slider_txt .voice_slider_txt_2 {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}
#flow {
  /*--- セクション: Fee ---*/
  /*--- セクション: Flow ---*/
}
#flow .fee {
  /*--- fee_head ---*/
  /*--- fee_detail ---*/
  /*--- fee_lesson ---*/
  /*--- fee_material ---*/
  /*--- fee_payment ---*/
}
#flow .fee .fee_head {
  background: url("../img/flow/flow_fee_bg1.jpg") no-repeat center / cover;
}
#flow .fee .fee_head > .container {
  padding: 14.5rem 0 4rem;
  position: relative;
}
@media (max-width: 768px) {
  #flow .fee .fee_head {
    background: url("../img/flow/sp_flow_fee_bg1.jpg") no-repeat center / cover;
  }
  #flow .fee .fee_head > .container {
    padding: 2.3rem 0 8rem;
  }
}
#flow .fee .fee_head_bigTtl {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 3.5rem;
}
#flow .fee .fee_head_smallTtl {
  text-align: center;
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #flow .fee .fee_head_bigTtl {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  #flow .fee .fee_head_smallTtl {
    padding: 0 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}
#flow .fee .fee_detail {
  background: url("../img/flow/flow_fee_bg2.png") no-repeat center / cover;
  /* 【左】入会金 */
  /* 【左】教材費 */
  /* 【右】レッスン料 */
}
@media (max-width: 768px) {
  #flow .fee .fee_detail {
    background: url("../img/flow/sp_flow_fee_bg2.png") no-repeat center / cover;
  }
}
#flow .fee .fee_detail .detailFlex {
  padding: 7.5rem 4.5rem 10rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#flow .fee .fee_detail .detailFlex::after {
  position: absolute;
  content: "";
  width: 6rem;
  height: 6rem;
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/flow/flow_fee_plus.png") no-repeat center / cover;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .detailFlex {
    padding: 3.5rem 1.5rem 5rem;
    flex-direction: column;
  }
  #flow .fee .fee_detail .detailFlex::after {
    width: 3rem;
    height: 3rem;
    top: 27rem;
  }
}
#flow .fee .fee_detail .detailFlex_left {
  width: 46%;
}
#flow .fee .fee_detail .detailFlex_right {
  width: 46%;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .detailFlex_left {
    flex: none;
    width: 100%;
    margin-bottom: 4rem;
  }
  #flow .fee .fee_detail .detailFlex_right {
    flex: none;
    width: 100%;
  }
}
#flow .fee .fee_detail .detailFlex_ttl {
  color: white;
  font-weight: 100;
  font-size: 6rem;
  letter-spacing: 0.025em;
  text-align: center;
  margin-bottom: 3.5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .detailFlex_ttl {
    font-size: 3rem;
    text-align: left;
    margin-bottom: 1.6rem;
  }
}
#flow .fee .fee_detail .admissionBox {
  width: 100%;
  padding: 4.5rem 1rem 3rem;
  border: 1rem solid white;
  border-radius: 3rem;
  color: white;
  text-align: center;
  margin-bottom: 3rem;
}
#flow .fee .fee_detail .admissionBox_1 {
  font-weight: 600;
  font-size: 4rem;
  margin-bottom: 2.7rem;
}
#flow .fee .fee_detail .admissionBox_2 {
  font-weight: 600;
  font-size: 6rem;
  letter-spacing: 0.025em;
  margin-bottom: 2rem;
}
#flow .fee .fee_detail .admissionBox_3 {
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 0.025em;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .admissionBox {
    border-width: 0.5rem;
    border-radius: 1.7rem;
    padding: 1.8rem 1rem 1.6rem;
    margin-bottom: 0.8rem;
  }
  #flow .fee .fee_detail .admissionBox_sp12 {
    font-size: 2.5rem;
    margin-bottom: 0.9rem;
  }
  #flow .fee .fee_detail .admissionBox_3 {
    font-size: 1rem;
  }
}
#flow .fee .fee_detail .materialBox {
  width: 100%;
  padding: 4.2rem 1rem 3rem;
  border: 1rem solid #ef5f84;
  border-radius: 3rem;
  text-align: center;
  color: white;
}
#flow .fee .fee_detail .materialBox_1 {
  font-weight: 300;
  font-size: 4rem;
  letter-spacing: 0.025em;
  margin-bottom: 2rem;
}
#flow .fee .fee_detail .materialBox_1 .bold {
  font-weight: 600;
}
#flow .fee .fee_detail .materialBox_2 {
  font-size: 2rem;
  letter-spacing: 0.025em;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .materialBox {
    border-width: 0.5rem;
    border-radius: 1.7rem;
    padding: 2rem 1rem 1.5rem;
  }
  #flow .fee .fee_detail .materialBox_1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  #flow .fee .fee_detail .materialBox_2 {
    font-size: 1rem;
  }
}
#flow .fee .fee_detail .lessonBox {
  width: 100%;
  height: calc(100% - 9.5rem);
  padding: 4.5rem 1rem 3rem;
  border: 1rem solid white;
  border-radius: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .lessonBox {
    height: auto;
    padding: 2.7rem 1rem 3rem;
    border-width: 0.5rem;
    border-radius: 1.7rem;
  }
}
#flow .fee .fee_detail .lessonBox_ttl {
  color: white;
  font-weight: 600;
  font-size: 4rem;
  letter-spacing: 0.025em;
  margin-bottom: 2.5rem;
}
#flow .fee .fee_detail .lessonBox_ttl sup {
  font-weight: 300;
  font-size: 2rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .lessonBox_ttl {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }
  #flow .fee .fee_detail .lessonBox_ttl sup {
    font-size: 1rem;
  }
}
#flow .fee .fee_detail .lessonBox_price {
  color: #faff7b;
  font-weight: 600;
  font-size: 6rem;
  letter-spacing: 0.025em;
}
#flow .fee .fee_detail .lessonBox_dash {
  color: white;
  font-weight: 300;
  font-size: 6rem;
  margin: 1rem auto;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .lessonBox_sp_price {
    color: #faff7b;
    font-weight: 600;
    font-size: 2.5rem;
    letter-spacing: 0.025em;
    margin-bottom: 1.1rem;
  }
}
#flow .fee .fee_detail .lessonBox_anotation {
  margin-top: auto;
  color: white;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
@media (max-width: 768px) {
  #flow .fee .fee_detail .lessonBox_anotation {
    margin-top: 0;
    font-size: 1rem;
  }
}
#flow .fee .fee_lesson {
  padding: 11.5rem 0 9rem;
  /*---- BOX1~3 (private ~ trial) ----*/
  /*-- 3つのBOXごとの色・幅 --*/
  /*-- 3つのBOX 中身の共通設定 --*/
  /*-- 3つのBOX 中身の個別設定 --*/
  /* trial 専用クラス */
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson {
    padding: 5rem 0 0;
  }
}
#flow .fee .fee_lesson .fee_lesson_ttl {
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  text-align: center;
  margin-bottom: 4rem;
}
#flow .fee .fee_lesson .fee_lesson_desc {
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lesson_ttl {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  #flow .fee .fee_lesson .fee_lesson_desc {
    font-size: 1.4rem;
    line-height: 2.8rem;
    margin-bottom: 4.3rem;
    text-align: left;
    padding: 0 1.5rem;
  }
}
#flow .fee .fee_lesson .fee_lesson_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 4.5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lesson_flex {
    padding: 0 1.5rem;
  }
}
#flow .fee .fee_lesson .privateBox,
#flow .fee .fee_lesson .semiprivateBox,
#flow .fee .fee_lesson .trialBox {
  border-width: 1rem;
  border-style: solid;
  border-radius: 2.5rem;
  padding: 0 4.5rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .privateBox,
  #flow .fee .fee_lesson .semiprivateBox,
  #flow .fee .fee_lesson .trialBox {
    border-width: 0.6rem;
    border-radius: 1.3rem;
    padding: 0 2.4rem;
  }
}
#flow .fee .fee_lesson .privateBox,
#flow .fee .fee_lesson .semiprivateBox {
  width: 46.5%;
}
#flow .fee .fee_lesson .trialBox {
  padding-top: 7.5rem;
  padding-bottom: 9.8rem;
  width: 92.5%;
  background: url("../img/flow/fee_lesson_box3bg.jpg") no-repeat right / cover;
}
#flow .fee .fee_lesson .privateBox,
#flow .fee .fee_lesson .trialBox {
  border-color: #f01b52;
}
#flow .fee .fee_lesson .semiprivateBox {
  border-color: #f01b6b;
}
#flow .fee .fee_lesson .trialBox {
  margin-top: 5.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .privateBox,
  #flow .fee .fee_lesson .semiprivateBox,
  #flow .fee .fee_lesson .trialBox {
    width: 100%;
    padding: 0 2.1rem;
    margin: 0 0 6rem;
  }
  #flow .fee .fee_lesson .trialBox {
    background: url("../img/flow/sp_fee_lesson_box3bg.jpg") no-repeat center / cover;
  }
}
#flow .fee .fee_lesson .privateBox,
#flow .fee .fee_lesson .semiprivateBox,
#flow .fee .fee_lesson .trialBox {
  position: relative;
}
#flow .fee .fee_lesson .privateBox::before,
#flow .fee .fee_lesson .semiprivateBox::before,
#flow .fee .fee_lesson .trialBox::before {
  position: absolute;
  content: "";
  width: 7.5rem;
  height: 7.5rem;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .privateBox::before,
  #flow .fee .fee_lesson .semiprivateBox::before,
  #flow .fee .fee_lesson .trialBox::before {
    width: 4.5rem;
    height: 4.5rem;
  }
}
#flow .fee .fee_lesson .privateBox::before {
  background: url("../img/flow/flow_lesson_num1.png") no-repeat center / contain;
}
#flow .fee .fee_lesson .semiprivateBox::before {
  background: url("../img/flow/flow_lesson_num2.png") no-repeat center / contain;
}
#flow .fee .fee_lesson .trialBox::before {
  background: url("../img/flow/flow_lesson_num3.png") no-repeat center / contain;
}
#flow .fee .fee_lesson .fee_lessonBox_engTtl {
  font-family: "Roboto Slab", serif;
  font-weight: bold;
  font-size: 5rem;
  line-height: 5.4rem;
  letter-spacing: 0.025em;
  text-align: center;
  margin-bottom: 3.6rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_engTtl {
    font-size: 3rem;
    line-height: 2.7rem;
    margin-bottom: 1.4rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_japTtl {
  color: #222222;
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_japTtl {
    font-size: 1.5rem;
    margin-bottom: 1.9rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_badge {
  width: fit-content;
  height: 3rem;
  border-radius: 1.3rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 300;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_badge {
    height: 2.3rem;
    border-radius: 0.8rem;
    font-size: 1.2rem;
    margin-bottom: 1.4rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_big {
  color: #222222;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 4rem;
  letter-spacing: 0.05em;
  margin-bottom: 2.6rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_big {
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin-bottom: 1.4rem;
  }
  #flow .fee .fee_lesson .fee_lessonBox_big span {
    font-size: 1.5rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_bold {
  color: #222222;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.6rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_bold {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_small {
  color: #222222;
  font-weight: 200;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_small {
    font-size: 1rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_pink {
  margin-top: 6.5rem;
  padding: 0 2.5rem 0 1rem;
  color: #f01b6b;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_pink {
    margin: 4rem auto 2rem;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.4rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_bg {
  width: calc(100% + 9rem);
  margin: auto -4.5rem 0;
}
#flow .fee .fee_lesson .fee_lessonBox_bg img {
  display: block;
  width: 100%;
  position: relative;
  z-index: -1;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_bg {
    width: calc(100% + 4.8rem);
    margin: auto -2.4rem 0;
  }
}
#flow .fee .fee_lesson .privateBox .fee_lessonBox_engTtl {
  margin-top: 10rem;
  color: #f01b52;
}
#flow .fee .fee_lesson .semiprivateBox .fee_lessonBox_engTtl {
  margin-top: 4.6rem;
  color: #f01b6b;
}
#flow .fee .fee_lesson .trialBox .fee_lessonBox_engTtl {
  color: #f01b52;
}
#flow .fee .fee_lesson .trialBox .fee_lessonBox_japTtl {
  margin-bottom: 4.5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .privateBox .fee_lessonBox_engTtl {
    margin-top: 4.9rem;
  }
  #flow .fee .fee_lesson .trialBox .fee_lessonBox_engTtl {
    margin-top: 3.6rem;
  }
  #flow .fee .fee_lesson .trialBox .fee_lessonBox_japTtl {
    margin-bottom: 2.3rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_badge.privateStatic {
  padding: 0 2rem;
  background-color: #f01b52;
}
#flow .fee .fee_lesson .fee_lessonBox_badge.privateNoStatic {
  margin-top: 5.5rem;
  padding: 0 1.5rem;
  background-color: #9c052c;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_badge.privateNoStatic {
    margin-top: 2.5rem;
    padding: 0 1.2rem;
  }
}
#flow .fee .fee_lesson .fee_lessonBox_badge.semiprivateStatic {
  background-color: #f01b6b;
}
#flow .fee .fee_lesson .fee_lessonBox_freeone1 {
  text-align: center;
  color: #f01b52;
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
#flow .fee .fee_lesson .fee_lessonBox_freeone2 {
  text-align: center;
  color: #222222;
  font-weight: 300;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .fee_lessonBox_freeone1 {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
  }
  #flow .fee .fee_lesson .fee_lessonBox_freeone2 {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
#flow .fee .fee_lesson .applicationLink {
  width: 87%;
  height: 12rem;
  border-radius: 1rem;
  padding: 0 9rem;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f01b52;
  color: white;
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  position: relative;
}
#flow .fee .fee_lesson .applicationLink::after {
  position: absolute;
  content: "";
  width: 4.5rem;
  height: 2rem;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  background: url("../img/icon_whiteArrow.png") no-repeat center / contain;
}
#flow .fee .fee_lesson .applicationLink:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  #flow .fee .fee_lesson .applicationLink {
    margin: 20rem 0 1.8rem;
    height: 6rem;
    width: 100%;
    border-radius: 0.8rem;
    padding: 0;
    font-size: 1.2rem;
  }
  #flow .fee .fee_lesson .applicationLink::after {
    width: 2.2rem;
    height: 1rem;
    right: 1.4rem;
  }
}
#flow .fee .fee_material {
  background: url("../img/flow/flow_material_bg.jpg") no-repeat center / cover;
}
#flow .fee .fee_material > .container {
  padding: 7.6rem 0 22rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_material {
    background: url("../img/flow/sp_flow_material_bg.jpg") no-repeat center / cover;
  }
  #flow .fee .fee_material > .container {
    padding: 9.5rem 0 10.5rem;
  }
}
#flow .fee .fee_material .fee_material_ttl {
  margin: 0 auto 4rem;
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
}
#flow .fee .fee_material .fee_material_desc {
  text-align: center;
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  #flow .fee .fee_material .fee_material_ttl {
    margin: 0 auto 1.7rem;
    font-size: 2rem;
  }
  #flow .fee .fee_material .fee_material_desc {
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}
#flow .fee .fee_payment .fee_payment_ttl {
  margin: 11rem auto 5.5rem;
  text-align: center;
  columns: #222222;
  font-weight: 600;
  font-size: 3.6rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_payment .fee_payment_ttl {
    margin: 6rem auto 2.9rem;
    font-size: 2rem;
  }
}
#flow .fee .fee_payment .fee_payment_flex {
  display: flex;
  justify-content: space-between;
  width: 73rem;
  margin: 0 auto 4.3rem;
}
#flow .fee .fee_payment .fee_payment_flex > div {
  margin: 0 3.3rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_payment .fee_payment_flex {
    width: 100%;
    margin: 0 auto 3.3rem;
  }
  #flow .fee .fee_payment .fee_payment_flex > div {
    width: 30%;
    margin: 0;
  }
}
#flow .fee .fee_payment .fee_payment_footer {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 15.5rem;
}
@media (max-width: 768px) {
  #flow .fee .fee_payment .fee_payment_footer {
    width: 80%;
    margin: auto;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 9rem;
  }
}
#flow .flow {
  background: url("../img/flow/flow_flow_bg.jpg") no-repeat center / cover;
}
#flow .flow > .container {
  padding: 14rem 0 22.5rem;
  position: relative;
}
@media (max-width: 768px) {
  #flow .flow {
    background: url("../img/flow/sp_flow_flow_bg.jpg") no-repeat center / cover;
  }
  #flow .flow > .container {
    padding: 0 0 3.2rem;
  }
}
#flow .flow .flow_head_big {
  text-align: center;
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  #flow .flow .flow_head_big {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}
#flow .flow .flow_head_small {
  text-align: center;
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05em;
  margin-bottom: 5.5rem;
}
@media (max-width: 768px) {
  #flow .flow .flow_head_small {
    padding: 0 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.8rem;
    margin-bottom: 4.5rem;
  }
}
/*---- flow_flex (front-page でも使用) ---*/
.flow_flex {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .flow_flex {
    flex-direction: column;
    padding: 0 1.5rem;
  }
}
.flow_flex_box {
  width: 22.5%;
  padding: 1.5rem 1.5rem 2rem;
  border-radius: 1rem;
  background-color: white;
  position: relative;
}
.flow_flex_box::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 3rem;
  width: 6rem;
  height: 6rem;
}
.flow_flex_box.step1::before {
  background: url("../img/flow/flow_step1_icon.png") no-repeat center / contain;
}
.flow_flex_box.step2::before {
  background: url("../img/flow/flow_step2_icon.png") no-repeat center / contain;
}
.flow_flex_box.step3::before {
  background: url("../img/flow/flow_step3_icon.png") no-repeat center / contain;
}
.flow_flex_box.step4::before {
  background: url("../img/flow/flow_step4_icon.png") no-repeat center / contain;
}
.flow_flex_box:not(:last-of-type)::after {
  position: absolute;
  content: "";
  width: 10rem;
  height: 2.2rem;
  top: 22.5rem;
  right: -7rem;
  background: url("../img/flow/flow_redArrow.png") no-repeat center / contain;
  z-index: 1;
}
@media (max-width: 768px) {
  .flow_flex_box {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 3.8rem;
    border-radius: 0.4rem;
    display: flex;
    flex-direction: row-reverse;
  }
  .flow_flex_box::before {
    top: -0.7rem;
    left: 1.5rem;
    width: 3rem;
    height: 3rem;
  }
  .flow_flex_box:not(:last-of-type)::after {
    position: absolute;
    content: "";
    width: 1.1rem;
    height: 2.3rem;
    top: calc(100% + 0.9rem);
    right: 50%;
    transform: translateX(50%);
    background: url("../img/flow/sp_flow_redArrow.png") no-repeat center / contain;
  }
}
.flow_flex_img {
  width: 100%;
  margin-bottom: 3.6rem;
}
.flow_flex_img img {
  width: 100%;
}
@media (max-width: 768px) {
  .flow_flex_img {
    min-height: 12rem;
    width: 45%;
    margin-bottom: 0;
  }
  .flow_flex_img img {
    object-fit: cover;
    height: 100%;
  }
}
.flow_flex_txt {
  flex: none;
}
@media (max-width: 768px) {
  .flow_flex_txt {
    flex: 1;
    padding-left: 0.8rem;
  }
}
.flow_flex_ttl {
  text-align: center;
  height: 4.8rem;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.4rem;
  letter-spacing: 0.05em;
  margin-bottom: 2.2rem;
}
@media (max-width: 768px) {
  .flow_flex_ttl {
    text-align: left;
    height: auto;
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 3.1rem auto 1.4rem 0;
  }
}
.flow_flex_desc {
  text-align: center;
  color: #222222;
  font-weight: 200;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .flow_flex_desc {
    text-align: left;
    font-size: 1rem;
    line-height: 1.4rem;
  }
}
#lesson {
  /*---- イントロ部分 ----*/
  /*---- Lesson ----*/
  /*---- Course ----*/
  /*--- セクション: CV ---*/
}
#lesson .lessonIntro .lessonIntroFlex {
  margin: 13rem 0 9.5rem;
  display: flex;
  position: relative;
}
@media (max-width: 768px) {
  #lesson .lessonIntro .lessonIntroFlex {
    margin: 5rem 0 2.5rem;
    flex-direction: column;
  }
}
#lesson .lessonIntro .lessonIntroFlex::after {
  position: absolute;
  content: "";
  width: 6.3rem;
  height: 6.3rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/lesson/lesson_plus.png") no-repeat center / contain;
}
@media (max-width: 768px) {
  #lesson .lessonIntro .lessonIntroFlex::after {
    width: 2.8rem;
    height: 2.8rem;
    top: 10.5rem;
  }
}
#lesson .lessonIntro .lessonIntroFlex .lessonIntroBox {
  width: 50%;
  text-align: center;
  color: #222222;
  font-weight: 600;
}
#lesson .lessonIntro .lessonIntroFlex .lessonIntroBox:nth-of-type(1) {
  padding-right: 6.5rem;
}
#lesson .lessonIntro .lessonIntroFlex .lessonIntroBox:nth-of-type(2) {
  padding-left: 6.5rem;
}
@media (max-width: 768px) {
  #lesson .lessonIntro .lessonIntroFlex .lessonIntroBox {
    flex: none;
    width: 100%;
    padding: 0 !important;
  }
  #lesson .lessonIntro .lessonIntroFlex .lessonIntroBox:nth-of-type(1) {
    margin-bottom: 6.5rem;
  }
}
#lesson .lessonIntro .lessonIntroFlex .lessonIntroBig {
  font-size: 4rem;
  margin-bottom: 3.2rem;
}
#lesson .lessonIntro .lessonIntroFlex .lessonIntroSmall {
  font-size: 1.8rem;
  line-height: 3rem;
}
@media (max-width: 768px) {
  #lesson .lessonIntro .lessonIntroFlex .lessonIntroBig {
    font-size: 2.5rem;
    margin-bottom: 1.8rem;
  }
  #lesson .lessonIntro .lessonIntroFlex .lessonIntroSmall {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
  #lesson .lessonIntro .lessonIntroFlex .lessonIntroSmall .spPink {
    color: #f01b52;
  }
}
#lesson .lessonIntro .lesson_intro_woman {
  max-width: none;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
#lesson .lesson {
  /*--- 1 ---*/
  /*--- 2 ---*/
}
#lesson .lesson .lessonPatternsOuter {
  background: url("../img/lesson/lesson_lesson_bg.jpg") no-repeat top center / cover;
}
@media (max-width: 768px) {
  #lesson .lesson .lessonPatternsOuter {
    background: url("../img/lesson/sp_lesson_lesson_bg.jpg") no-repeat bottom center / contain;
  }
}
#lesson .lesson .lessonPatterns {
  padding: 15rem 0;
  position: relative;
}
@media (max-width: 768px) {
  #lesson .lesson .lessonPatterns {
    padding: 2.2rem 0 4.5rem;
  }
}
#lesson .lesson .lessonPatterns_ttl {
  margin: 0 auto 4rem;
  text-align: center;
  color: #222222;
  letter-spacing: 0.05em;
}
#lesson .lesson .lessonPatterns_ttl_big {
  font-weight: 600;
  font-size: 3.6rem;
  margin-bottom: 3.8rem;
}
#lesson .lesson .lessonPatterns_ttl_small {
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
}
@media (max-width: 768px) {
  #lesson .lesson .lessonPatterns_ttl {
    margin: 0 auto 25rem;
  }
  #lesson .lesson .lessonPatterns_ttl_big {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  #lesson .lesson .lessonPatterns_ttl_small {
    padding-left: 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}
#lesson .lesson .lessonPatterns_figures {
  display: block;
  width: 82.5%;
  max-width: 99rem;
  margin: auto;
}
@media (max-width: 768px) {
  #lesson .lesson .lessonPatterns_figures {
    max-width: 100%;
    width: 35rem;
  }
}
#lesson .lesson .patternBox {
  position: relative;
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  #lesson .lesson .patternBox {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.8rem;
  }
}
#lesson .lesson .patternTtl {
  padding-top: 7.5rem;
  margin-bottom: 3rem;
}
#lesson .lesson .patternTtl .patternTtl_logo {
  display: block;
  width: 12rem;
  margin: 0 auto 2.3rem 0;
}
#lesson .lesson .patternTtl .patternTtl_big {
  text-shadow: 2px 2px 2px white;
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  margin: 0 auto 1.2rem 4.5rem;
}
#lesson .lesson .patternTtl .patternTtl_desc {
  width: 74rem;
  background-color: white;
  opacity: 0.8;
  color: #222222;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 3.6rem;
  margin: 0 auto 0 4.5rem;
  padding: 2.5rem 0;
}
@media (max-width: 768px) {
  #lesson .lesson .patternTtl {
    padding-top: 2.8rem;
    margin-bottom: 2.5rem;
  }
  #lesson .lesson .patternTtl .patternTtl_logo {
    width: 6rem;
    margin: 0 auto 1.4rem 0;
  }
  #lesson .lesson .patternTtl .patternTtl_big {
    font-size: 2rem;
    margin: 0 auto 3rem 1.5rem;
  }
  #lesson .lesson .patternTtl .patternTtl_desc {
    width: 100%;
    font-size: 1.2rem;
    line-height: 2rem;
    margin: 0 auto 0 1.5rem;
    padding: 0;
  }
}
#lesson .lesson .patternBg {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}
#lesson .lesson .patternBg img {
  width: 100%;
}
@media (max-width: 768px) {
  #lesson .lesson .patternBg {
    position: static;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
#lesson .lesson .pattternDescription {
  margin: 0 auto 0 4.5rem;
  padding: 4rem 4.2rem;
  width: 69rem;
  border-radius: 20px;
  background-color: white;
  box-shadow: 5px 0 10px 3px #eee;
  display: flex;
}
@media (max-width: 768px) {
  #lesson .lesson .pattternDescription {
    margin: -3rem auto 0;
    padding: 2.1rem 1.5rem;
    max-width: 35rem;
    width: 100%;
  }
}
#lesson .lesson .pattternDescription .pattternDescription_img {
  display: block;
  width: 6.5rem;
  margin-right: 6.5rem;
}
#lesson .lesson .pattternDescription .pattternDescription_img img {
  width: 100%;
}
@media (max-width: 768px) {
  #lesson .lesson .pattternDescription .pattternDescription_img {
    width: 3.7rem;
    margin-right: 3rem;
  }
}
#lesson .lesson .pattternDescription .pattternDescription_txt .suitable {
  color: #f01b52;
  font-weight: 600;
  font-size: 2.8rem;
  margin-bottom: 3.3rem;
}
#lesson .lesson .pattternDescription .pattternDescription_txt .points {
  color: #222222;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 4rem;
}
#lesson .lesson .pattternDescription .pattternDescription_txt .points .pink {
  color: #f01b52;
}
@media (max-width: 768px) {
  #lesson .lesson .pattternDescription .pattternDescription_txt .suitable {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
  }
  #lesson .lesson .pattternDescription .pattternDescription_txt .points {
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
}
#lesson .course {
  margin-top: 10rem;
}
#lesson .course .courseIntro > .container {
  position: relative;
  padding-top: 13rem;
}
@media (max-width: 768px) {
  #lesson .course .courseIntro > .container {
    padding: 0;
  }
  #lesson .course .courseIntro .secTtl {
    margin-bottom: 2.2rem !important;
  }
}
#lesson .course .courseHeader {
  margin: 0 auto 7.3rem;
  text-align: center;
}
#lesson .course .courseHeader .courseHeader_big {
  color: #222222;
  font-weight: 600;
  font-size: 4rem;
  margin-bottom: 1.6rem;
}
#lesson .course .courseHeader .courseHeader_small {
  color: #222222;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 3rem;
}
@media (max-width: 768px) {
  #lesson .course .courseHeader {
    margin: 0 auto 3.3rem;
  }
  #lesson .course .courseHeader .courseHeader_big {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 3.5rem;
  }
  #lesson .course .courseHeader .courseHeader_small {
    padding: 0 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}
#lesson .course .course_figure {
  width: 100%;
  margin-bottom: 16rem;
}
#lesson .course .course_figure img {
  width: 100%;
}
@media (max-width: 768px) {
  #lesson .course .course_figure {
    max-width: 33rem;
    margin: 0 auto 5.9rem;
  }
}
#lesson .course .courseFlex {
  margin-bottom: 3rem;
  display: flex;
}
@media (max-width: 768px) {
  #lesson .course .courseFlex {
    margin: 1.4rem 0 5.9rem;
    flex-direction: column !important;
  }
}
#lesson .course .courseFlex .courseFlex_txt {
  width: 58%;
}
#lesson .course .courseFlex .courseFlex_logo {
  display: block;
  width: 12rem;
  margin: 0 auto 5.5rem 0;
}
#lesson .course .courseFlex .courseFlex_txtbox {
  padding: 3rem 4.3rem 4.3rem;
  position: relative;
}
#lesson .course .courseFlex .courseFlex_txtbox::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 0.8;
  z-index: 0;
}
#lesson .course .courseFlex .courseFlex_ttl {
  color: #222222;
  font-weight: 600;
  font-size: 3.6rem;
  margin: 0 auto 4rem 0;
  position: relative;
  z-index: 1;
}
#lesson .course .courseFlex .courseFlex_description {
  color: #222222;
  font-weight: 200;
  font-size: 1.8rem;
  line-height: 3.6rem;
  margin: 0 auto 0 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  #lesson .course .courseFlex .courseFlex_txt {
    width: 100%;
    margin: 0 0 2.7rem !important;
  }
  #lesson .course .courseFlex .courseFlex_logo {
    width: 6rem;
    margin: 0 auto 1.2rem 0;
  }
  #lesson .course .courseFlex .courseFlex_txtbox {
    padding: 0;
  }
  #lesson .course .courseFlex .courseFlex_txtbox::after {
    display: none;
  }
  #lesson .course .courseFlex .courseFlex_ttl {
    font-size: 2rem;
    margin: 0 auto 2.2rem 1.5rem;
  }
  #lesson .course .courseFlex .courseFlex_description {
    font-size: 1.2rem;
    line-height: 2.2rem;
    margin: 0 1.5rem;
  }
}
#lesson .course .courseFlex .courseFlex_img {
  position: relative;
  z-index: -1;
  margin-top: 3rem;
  width: 50%;
}
@media (max-width: 768px) {
  #lesson .course .courseFlex .courseFlex_img {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  #lesson .course .courseFlex .courseFlex_img img {
    display: block;
    width: 100%;
    max-width: 37.5rem;
    margin: auto;
  }
}
#lesson .course .courseFlex:not(.reverse) {
  flex-direction: row;
}
#lesson .course .courseFlex:not(.reverse) .courseFlex_txt {
  margin-right: -8%;
}
#lesson .course .courseFlex.reverse {
  flex-direction: row-reverse;
}
#lesson .course .courseFlex.reverse .courseFlex_txt {
  margin-left: -8%;
}
@media (max-width: 768px) {
  #lesson .CV {
    margin-top: 15rem;
  }
}
footer.footer-container,
div#admin-panel,
ul.mobile-footer-menu-buttons,
div.go-to-top,
div.copy-info {
  display: none;
}