@charset "UTF-8";
/*
  dimension definition
*/
/*
  corp color guide
*/
/* Main Colors */
@font-face {
  font-family: "Aclonica";
  src: url("../fonts/Aclonica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP";
  src: url("../fonts/NotoSansJP-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP";
  src: url("../fonts/NotoSansJP-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
body {
  font-family: "NotoSansJP", sans-serif;
  background: url(/assets/img/lp/common/img-bg-body.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 992px) {
  body {
    background: #ffffff;
  }
  body::before {
    content: "";
    height: 1580px;
    width: 100%;
    position: absolute;;
    background: url(/assets/img/lp/common/img-bg-body.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
  }
  body.pricing-body-page::before, body.lesson-body-page::before {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

img {
  max-width: 100%;
  width: 100%;
  display: block;
}

a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.btn:focus,
.form-control:focus {
  border-color: #b6cee2;
  outline: 0;
}

.sp-hidden {
  display: none !important;
}
@media (min-width: 992px) {
  .sp-hidden {
    display: block !important;
  }
}

.lg-hidden {
  display: block !important;
}
@media (min-width: 992px) {
  .lg-hidden {
    display: none !important;
  }
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.container {
  width: 1320px;
  max-width: 1320px;
  padding: 0;
}
@media (min-width: 1368px) {
  .container {
    width: 1320px;
    max-width: 1320px;
  }
}
@media (min-width: 480px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}


/* お問い合わせ窓口 */
#interactive-navi-modal .modal-dialog {
  position: fixed;
  width: 80vw;
  right: 10px;
  bottom: 10px;
}

#interactive-navi-modal .modal-header {
  border-bottom: none;
}

#interactive-navi-modal .modal-body {
  padding: 0 0 15px;
}

#interactive-navi {
  height: 50vh;
  overflow-y: scroll;
  padding: 10px 15px;
}

.interactive-navi-navigation {
  float: left;
  width: 90%;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 3px;
}

.interactive-navi-action {
  float: right;
  width: 60%;
  background: #0D46B7;
  color: #ffffff;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.interactive-navi-feed-action-btn-list {
  margin-top: 20px;
}

.interactive-navi-feed-action-btn {
  display: block;
  text-align: left;
  width: 100%;
  white-space: normal;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  background: #0D46B7;
  margin-top: 10px;
  padding: 8px 10px;
}

.interactive-navi-feed-action-btn:hover {
  color: #ffffff;
}

@media (min-width: 992px) {
  /* お問い合わせ窓口 */
  #interactive-navi-modal .modal-dialog {
    position: fixed;
    width: 400px;
    right: 20px;
    bottom: 20px;
  }
  #interactive-navi-modal .modal-header {
    border-bottom: none;
  }
  #interactive-navi-modal .modal-body {
    padding: 0 0 15px;
  }
  #interactive-navi {
    height: 350px;
    overflow-y: scroll;
    padding: 10px 15px;
  }
  .interactive-navi-feed-item .tel-number {
    font-weight: bold;
    font-size: 16px;
  }
  .interactive-navi-navigation {
    float: left;
    width: 90%;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 3px;
  }
  .interactive-navi-action {
    float: right;
    width: 60%;
    background: #0D46B7;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
  }
  .interactive-navi-feed-description {
    margin-bottom: 20px;
  }
  .interactive-navi-feed-action-btn {
    display: block;
    width: 100%;
    white-space: normal;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
    background: #0D46B7;
    margin-top: 10px;
  }
  .interactive-navi-feed-action-btn:hover {
    color: #ffffff;
  }
  .v-enter-active {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .v-leave-active {
    -webkit-transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
    transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .v-enter, .v-leave-to {
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
    opacity: 0;
  }
}

.header-section {
  position: relative;
}
.header-section .logo-icon {
  width: 24px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 992px) {
  .header-section .logo-icon {
    width: 45px;
  }
}
.header-section .title {
  font-weight: bold;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  color: #2b2b2b;
}
@media (min-width: 992px) {
  .header-section .title {
    font-size: 30px;
    line-height: 1.6;
  }
}
@media (min-width: 1368px) {
  .header-section .title {
    font-size: 34px;
    line-height: 1.6;
  }
}
.header-section .title span {
  display: inline-block;
}
.header-section .desc {
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  color: #2b2b2b;
  margin-top: 20px;
}
.header-section .desc strong {
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  text-align: center;
  display: block;
  margin: 35px auto 15px;
}
@media (min-width: 992px) {
  .header-section .desc {
    font-size: 18px;
    line-height: 1.7;
  }
}
@media (min-width: 1368px) {
  .header-section .desc {
    font-size: 22px;
    line-height: 38px;
    margin-top: 32px;
  }
}
.header-section .desc span {
  display: inline-block;
}
.header-section .desc.red-text {
  color: #ff0000;
}

.main-content {
  color: #2b2b2b;
  margin-top: 30px;
}
@media (min-width: 992px) {
  .main-content {
    padding: 0;
  }
}

.view-more-box {
  min-height: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.view-more-box .box-image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  font-size: 18.7383px;
  line-height: 26px;
  text-align: center;
  color: #000000;
  border: 1.17114px solid #ffffff;
  position: relative;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
@media (min-width: 992px) {
  .view-more-box .box-image {
    font-size: 32px;
    line-height: 44px;
  }
}
.view-more-box .box-image img {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-filter: contrast(0.8);
          filter: contrast(0.8);
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .view-more-box .box-image img {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
}
.view-more-box .button {
  width: 30px;
  background: #ef5da8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 992px) {
  .view-more-box .button {
    width: 50px;
  }
  .view-more-box .button svg {
    height: 20px;
    width: 50px;
  }
}

.btn-member {
  display: block;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 20px;
  text-align: center;

  background-color: #EF5DA8;
  border: 4px solid #EF5DA8;
  border-radius: 40px;

  width: 350px;
  height: 56px;
  margin: 0 auto;
  padding: 8px 0;

  box-shadow: 0 5px 0 #8C4067;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.btn-member::after {
  display: inline-block;
  content: "";
  margin: auto;
  position: relative;
  top: 4px;
  left: 15px; /* 要素の左からの距離 */
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #fff;
}
.btn-member:hover {
  background-color: #fff;
  color: #EF5DA8;
  box-shadow: none;
}
.btn-member:hover::after {
  border-left: 20px solid #EF5DA8;
}
@media (min-width: 992px) {
  .btn-member {
    width: 450px;
    height: 73px;
    font-size: 26px;
    padding: 14px 0;
  }
  .btn-member::after {
    top: 2px; 
  }
}

.btn-normal {
  display: block;
  text-align: center;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  background-color: #0D47B6;
  border-radius: 10px;

  width: 350px;
  height: 41px;
  margin: 0 auto;
  padding: 5px 0;

  box-shadow: 0 5px 0 #000;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.btn-normal:hover {
  color: #ffffff;
  opacity: 0.8;
}
.btn-normal::after {
  display: inline-block;
  content: "";
  margin: auto;
  position: relative;
  top: 2px;
  left: 20px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
}
@media (min-width: 992px) {
  .btn-normal {
    width: 450px;
    height: 53px;
    font-size: 22px;
    padding: 10px 0;
  }
}

.lnk-normal {
  color: #EF5DA8;
  text-decoration: underline;
  display: inline-block;
}

.btn-pink-rabbit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 358px;
  height: 64px;
  background: url(/assets/img/lp/common/btn-pink-rabbit-bg.svg);
  background-size: 100%;
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  text-align: center;
  color: #FFFFFF;
}
@media (min-width: 992px) {
  .btn-pink-rabbit {
    width: 476px;
    max-width: 100%;
    height: 87px;
    font-size: 32px;
    line-height: 44px;
  }
  .btn-pink-rabbit.pc-font-25 {
    font-size: 25px;
  }
}
.btn-pink-rabbit:hover {
  color: #ffffff;
  opacity: 0.8;
}

.pricing-table .list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}
@media (min-width: 992px) {
  .pricing-table .list-box {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    border-radius: 44px;
    padding: 24px 0;
  }
}
.pricing-table .list-box__item {
  background: #ffffff;
  border-radius: 24px;
  text-align: center;
  padding: 24px 16px 13px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 24px;
}
.pricing-table .list-box__item:last-child {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item {
    background: transparent;
    border-radius: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
    max-width: 33.33%;
    border-right: 1px solid #FB408E;
    padding: 20px 15px 0;
    margin-bottom: 0;
  }
  .pricing-table .list-box__item:last-child {
    border: 0;
  }
}
.pricing-table .list-box__item .label {
  background: #fcddec;
  border-radius: 7px;
  font-size: 16px;
  line-height: 17px;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 5px 20px;
  min-width: 197px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1368px) {
  .pricing-table .list-box__item .label {
    font-size: 16px;
    line-height: 19px;
    padding: 8px 10px;
  }
}
.pricing-table .list-box__item .label::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  left: 51%;
  bottom: -9px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 25px solid #fcddec;
  z-index: -1;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .label::after {
    bottom: -22px;
  }
}
.pricing-table .list-box__item .title {
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  margin-top: 20px;
}
@media (min-width: 1368px) {
  .pricing-table .list-box__item .title {
    font-size: 32px;
    line-height: 39px;
    margin-top: 18px;
  }
}
.pricing-table .list-box__item .title::after {
  content: "";
  display: block;
  border-top: 2px solid #ef5da8;
  margin: 16px auto;
  width: 72px;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .title::after {
    border-top-width: 4px;
    margin: 9px auto 28px;
  }
}
.pricing-table .list-box__item .count {
  font-size: 18px;
  line-height: 17px;
  color: #717171;
  margin-bottom: 5px;
}
@media (min-width: 1368px) {
  .pricing-table .list-box__item .count {
    font-size: 24px;
    line-height: 29px;
  }
}
.pricing-table .list-box__item .other-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px 67px;
  margin: 15px;
  position: relative;
  top: -5px;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .other-option {
    row-gap: 18px;
  }
}
.pricing-table .list-box__item .option-item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .option-item {
    width: 100%;
  }
  .pricing-table .list-box__item .option-item:nth-child(4), .pricing-table .list-box__item .option-item:nth-child(5) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.pricing-table .list-box__item .fee {
  font-size: 18px;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .fee {
    font-size: 25px;
    line-height: 36px;
  }
}
.pricing-table .list-box__item .highlight {
  width: 100%;
}
@media (min-width: 992px) {
  .pricing-table .list-box__item .highlight {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.pricing-table .list-box__item .highlight .fee {
  font-weight: 700;
  font-size: 26px;
}
@media (min-width: 1368px) {
  .pricing-table .list-box__item .highlight .fee {
    font-size: 30px;
    line-height: 36px;
  }
}

.masthead-banner {
  height: 80px;
  width: calc(100% - 32px);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 15px;
}
.masthead-banner h1 {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  background: #ffffff;
  padding: 10px;
  -webkit-box-shadow: 5px 5px 0 0px #ef5da8;
  box-shadow: 5px 5px 0 0px #ef5da8;
  margin-left: 10px;
}
@media (min-width: 992px) {
  .masthead-banner {
    max-width: 1200px;
    height: 100px;
    border-radius: 15px;
  }
  .masthead-banner h1 {
    margin-left: 40px;
    font-size: 24px;
    line-height: 56px;
    padding: 0 18px;
    -webkit-box-shadow: 6px 6px 0 0px #ef5da8;
    box-shadow: 6px 6px 0 0px #ef5da8;
  }
}
.masthead-banner.lesson-page {
  background: url(/assets/img/lp/lesson/lesson-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.pricing-page {
  background: url(/assets/img/lp/pricing/pricing-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.get_start-page {
  background-image: url(/assets/img/lp/get_start/get_start-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.voice-index-page {
  background-image: url(/assets/img/lp/voice/voice-index-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.introduction-page {
  background-image: url(/assets/img/lp/introduction/introduction-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.curriculum-page {
  background-image: url(/assets/img/lp/curriculum/curriculum-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
.masthead-banner.faq-page {
  background: url(/assets/img/lp/lesson/lesson-top-banner-sp.png);
  background-position: center;
  background-size: cover;
}
@media (min-width: 992px) {
  .masthead-banner.lesson-page {
    background: url(/assets/img/lp/lesson/lesson-top-banner-pc.png);
    background-position: center;
    background-size: cover;
  }
  .masthead-banner.pricing-page {
    background: url(/assets/img/lp/pricing/pricing-top-banner-pc.png);
    background-position: center;
    background-size: cover;
  }
  .masthead-banner.get_start-page {
    background-image: url(/assets/img/lp/get_start/get_start-top-banner-pc.png);
  }
  .masthead-banner.voice-index-page {
    background-image: url(/assets/img/lp/voice/voice-index-top-banner-pc.png);
  }
  .masthead-banner.introduction-page {
    background-image: url(/assets/img/lp/introduction/introduction-banner-pc.png);
  }
  .masthead-banner.curriculum-page {
    background-image: url(/assets/img/lp/curriculum/curriculum-top-banner-pc.png);
  }
  .masthead-banner.faq-page {
    background: url(/assets/img/lp/lesson/lesson-top-banner-pc.png);
    background-position: center;
    background-size: cover;
  }
}

.sp-pd-16 {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1368px) {
  .sp-pd-16 {
    padding-left: 0;
    padding-right: 0;
  }
}

.header-line-decor {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.header-line-decor::before {
  content: "";
  display: block;
  width: 1px;
  height: 25px;
  position: absolute;
  left: -11px;
  top: -2px;
  background: #000000;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}
.header-line-decor::after {
  content: "";
  display: block;
  width: 1px;
  height: 25px;
  position: absolute;
  right: -11px;
  top: -2px;
  background: #000000;
  -webkit-transform: rotateZ(30deg);
          transform: rotateZ(30deg);
}
.header-line-decor.pink-line {
  margin-bottom: 24px;
}
.header-line-decor.pink-line::before {
  content: "";
  height: 45px;
  left: -19px;
  top: -10px;
  background: #EF5DA8;
  -webkit-transform: rotateZ(-19deg);
          transform: rotateZ(-19deg);
}
.header-line-decor.pink-line::after {
  content: "";
  height: 45px;
  right: -19px;
  top: -10px;
  background: #EF5DA8;
  -webkit-transform: rotateZ(19deg);
          transform: rotateZ(19deg);
}
@media (min-width: 992px) {
  .header-line-decor.pink-line {
    font-size: 28px;
    line-height: 34px;
  }
  .header-line-decor.pink-line::before {
    content: "";
    width: 2px;
    height: 50px;
    left: -28px;
    top: -10px;
    background: #EF5DA8;
    -webkit-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
  }
  .header-line-decor.pink-line::after {
    content: "";
    width: 2px;
    height: 50px;
    right: -28px;
    top: -10px;
    background: #EF5DA8;
    -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
  }
}
@media (min-width: 992px) {
  .header-line-decor::before {
    content: "";
    display: block;
    width: 1px;
    height: 44px;
    position: absolute;
    left: -20px;
    top: 2px;
    background: #000000;
    -webkit-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
  }
  .header-line-decor::after {
    content: "";
    display: block;
    width: 1px;
    height: 44px;
    position: absolute;
    right: -20px;
    top: 2px;
    background: #000000;
    -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
  }
}

.lsp-sm {
  letter-spacing: -0.5px;
}

@media (min-width: 480px) {
  .main-content {
    max-width: 480px;
  }
}
@media (min-width: 768px) {
  .main-content {
    max-width: 480px;
  }
}
@media (min-width: 992px) {
  .main-content {
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  section[class*=section-] {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  section[class*=section-]::before {
    font-size: 80px;
    line-height: 1.1319444444;
  }
}
@media (min-width: 1368px) {
  section[class*=section-]::before {
    font-size: 120px;
  }
}

.banner .logo-sp img {
  width: 361px;
  margin: 0 auto;
  max-width: 98%;
}


.section-intro-lesson-wrapper {
  position: relative;
}
@media (min-width: 992px) {
  .section-intro-lesson-wrapper {
    padding-top: 86px;
  }
}

.section-intro-lesson {
  position: relative;
  padding-top: 75px;
}
.section-intro-lesson .header-section .desc {
  margin-top: 20px;
}
.section-intro-lesson-wrapper::before {
  content: "OnlineLesson";
  position: absolute;
  font-family: "Aclonica";
  font-style: normal;
  font-weight: 400;
  font-size: 84px;
  line-height: 61px;
  color: rgba(0, 0, 0, 0.03);
  top: 60px;
  right: 12px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
@media (min-width: 1368px) {
  .section-intro-lesson-wrapper::before {
    right: 10%;
    top: 5%;
  }
}
@media (min-width: 992px) {
  .section-intro-lesson {
    padding-top: 0px;
  }
  .section-intro-lesson .header-section .desc {
    margin-top: 32px;
  }
}
.section-intro-lesson.no-text-decor {
  padding-top: 20px;
  margin-top: 20px;
}
.section-intro-lesson.no-text-decor::before {
  display: none;
}
@media (min-width: 992px) {
  .section-intro-lesson.no-text-decor {
    margin-top: 50px;
    background: url(/assets/img/lp/common/lesson-flow-bg-pc.png) no-repeat;
    background-size: 1440px;
    background-position: bottom;
    padding-bottom: 108px;
  }
}
.section-intro-lesson__list-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.section-intro-lesson__box-item {
  max-width: 170px;
  border: 2px solid #ef5da8;
  text-align: center;
  position: relative;
  background: #fff;
}
@media (min-width: 992px) {
  .section-intro-lesson__box-item {
    max-width: 220px;
    width: 100%;
    height: auto;
  }
  .section-intro-lesson__box-item:not(:last-child) {
    margin-bottom: 0;
  }
}
.section-intro-lesson__box-item .content {
  padding: 5px 8px 10px;
}
@media (min-width: 1368px) {
  .section-intro-lesson__box-item .content {
    padding: 16px 8px;
  }
}
.section-intro-lesson__box-item .avatar {
  aspect-ratio: 358/138;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 992px) {
  .section-intro-lesson__box-item .avatar {
    aspect-ratio: 240/138;
  }
}
.section-intro-lesson__box-item .title-1 {
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
}
@media (min-width: 1368px) {
  .section-intro-lesson__box-item .title-1 {
    font-size: 28px;
    line-height: 1;
  }
}
.section-intro-lesson__box-item .title-2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  margin: 4px 0 16px;
}
@media (min-width: 1368px) {
  .section-intro-lesson__box-item .title-2 {
    font-size: 13px;
    line-height: 15px;
    letter-spacing: -0.02em;
    margin: 16px 0;
  }
}
.section-intro-lesson__box-item .desc {
  font-size: 14px;
  line-height: 23px;
  text-align: left;
}
@media (min-width: 1368px) {
  .section-intro-lesson__box-item .desc {
    font-size: 18px;
    line-height: 160%;
  }
}

.section-lesson-middle-text {
  color: #000000;
  padding-left: 16px;
  padding-right: 16px;
}
.section-lesson-middle-text .title {
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}
.section-lesson-middle-text .section-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.section-lesson-middle-text .section-text .title {
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}
@media (min-width: 992px) {
  .section-lesson-middle-text .section-text .title {
    text-align: left;
    font-size: 24px;
    line-height: 44px;
    margin-bottom: 12px;
  }
}
.section-lesson-middle-text .section-text .context {
  line-height: 23px;
}
@media (min-width: 992px) {
  .section-lesson-middle-text .section-text .context {
    font-size: 16px;
    line-height: 29px;
  }
}
@media (min-width: 992px) {
  .section-lesson-middle-text .section-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-left: 25px;
  }
}
.section-lesson-middle-text .desc {
  font-size: 16px;
  line-height: 23px;
}
.section-lesson-middle-text .section-ai img {
  width: 340px;
  margin: 10px auto 7px;
}
@media (min-width: 992px) {
  .section-lesson-middle-text .section-ai img {
    width: auto;
    margin: 0;
  }
  .section-lesson-middle-text .section-ai {
    max-width: 1120px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .section-lesson-middle-text .section-ai .video-frame {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 472px;
            flex: 0 0 472px;
    width: 472px;
    height: 264px;
    margin: 0;
  }
  .section-lesson-middle-text .section-ai .video-frame iframe {
    width: 100%;
    height: 100%;
  }
}

.section-support {
  position: relative;
}
.section-support::before {
  content: "Support";
  position: absolute;
  font-family: "Aclonica";
  font-style: normal;
  font-weight: 400;
  font-size: 54px;
  line-height: 61px;
  color: rgba(0, 0, 0, 0.03);
  top: 20px;
  right: 12px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
@media (min-width: 992px) {
  .section-support-list {
    width: 70%;
    margin: auto;
  }
}
.section-support-list div {
  display: flex;
  font-size: 26px;
  color: #595959;
  text-align: center;
}
.section-support-list div img {
  width: 30%;
  height: 30%;
  margin-right: 25px;
  margin-top: 45px;
}
.section-support-list div p {
  width: 70%;
  font-size: 14px;
  margin-top: 10px;
  text-align: left;
}
.section-support-list div p span {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 5px;
}
@media (min-width: 992px) {
  .section-support-list div img {
    width: 20%;
    height: 20%;
    margin-top: 0;
  }
  .section-support-list div p {
    width: 80%;
    font-size: 16px;
  }
  .section-support-list div p span {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .section-support-list {
    gap: 2%;
  }
  .section-support-list p {
    font-size: 18px;
  }
}
.section-motto-letter {
  background-image: url(/assets/img/lp/common/img-motto-awards-bg.png);
  background-repeat: no-repeat;
  background-position: right 20px top 10px;
  background-size: 20%;
  margin: 0 20px;
  padding: 20px;
  border: 2px solid #F2B83F;
  border-radius: 8px;
}
.section-motto-letter h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.section-motto-letter p {
  font-size: 14px;
  margin: 10px 0;
}
.section-motto-letter p span {
  display: inline-block;
}
.section-motto-letter-photos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2%;
}
.section-motto-letter-photos img{
  width: 30%;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  .section-motto-letter {
    background-size: 160px;
  }
  .section-motto-letter h3 {
    font-size: 24px;
  }
  .section-motto-letter p {
    font-size: 18px;
  }
  .section-motto-letter-photos {
    gap: 1%;
  }
  .section-motto-letter-photos img{
    width: 15%;
    margin-bottom: 0;
  }
}

.section-lesson-middle-text .section-book {
  margin-top: 48px;
}
@media (min-width: 992px) {
  .section-lesson-middle-text .section-book {
    margin: 20px auto 40px;
    max-width: 980px;
  }
}
.section-lesson-middle-text .section-book .c-image-section {
  background: url(/assets/img/lp/common/img_phonics_textbook.png) no-repeat;
  height: 380px;
  position: relative;
  width: 100%;
}
.section-lesson-middle-text .section-book .c-image-section .c-text-image {
  position: absolute;
  right: 13%;
  top: 32%;
  max-width: 56%;
}
.section-lesson-middle-text .section-book .c-image-section .c-text-image h3 {
  font-size: 20px;
  font-weight: bold;
}
.section-lesson-middle-text .section-book .c-image-section .c-text-image h3 span {
  font-size: 24px;
}
.section-lesson-middle-text .section-book .c-image-section .c-text-image p {
  font-size: 18px;
  line-height: 31px;
  margin-top: 12px;
}
@media (min-width: 992px) {
  .section-lesson-middle-text {
    padding-left: 0;
    padding-right: 0;
  }
}

.free-trial-btn {
  font-size: 1.2em;
  font-weight: bold;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: block;
  text-align: center;
  z-index: 9;
}
.free-trial-btn:hover {
  background: #fff;
  color: #f72b7e;
}

#float-navi {
  position: fixed;
  bottom: 12%;
  right: 5px;
  z-index: 4;
}
.sp-content-wrapper #float-navi {
  bottom: 0;
}

#float-navi > .clearfix::before {
  display: table;
  content: " ";
}

#float-navi .btn {
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  float: left;
  font-size: 16px;
  background-color: transparent;
  color: #FFFFFF;
  padding: 0;
  font-weight: normal;
  margin-left: 15px;
  text-align: center;
}

#float-navi .btn i {
  font-size: 34px;
  margin-top: 4px;
}

.mgt15 {
  margin-top: 15px !important;
}

#float-navi .btn-interactive-navi-modal-open {
  width: 100px;
}

.c-fixed {
  position: sticky;
  width: 100%;
  max-width: 100%;
  top: 0;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  z-index: 10;
}

.section-interest .desc {
  padding: 0 16px;
}
@media (min-width: 992px) {
  .section-interest .desc {
    padding: 0;
    max-width: 1120px;
    margin: 42px auto 0;
  }
}

@media (min-width: 992px) {
  .section-intro-lesson__list-box {
    max-width: 1122px;
    margin: 0 auto;
  }
}

.section-recommend .recommend-bnr-wrapper {
  margin: 10px auto;
}
.recommend-bnr {
  background-image: url(/assets/img/lp/sp/common/img_lesson_recommend.png);
  background-repeat:  no-repeat;            
  background-position:center center;
  background-size:contain;
  width:100%;
  height:580px;
}
@media (min-width: 992px) {
  .recommend-bnr {
    background-image: url(/assets/img/lp/common/img_lesson_recommend.png);
    height:640px;
  }
}

.section-qa .desc {
  padding: 0 16px;
}
@media (min-width: 992px) {
  .section-qa .desc {
    padding: 0;
    margin-top: 45px;
  }
}
@media (min-width: 992px) {
  .section-qa .header-section {
    max-width: 1120px;
    margin: 0 auto;
  }
  .section-qa .header-section h3 br {
    display: none;
  }
}

.other-question {
  background: #f5f5f5;
  position: relative;
  margin-left: -16px;
  margin-right: -16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 14px 16px 4px;
}
.other-question::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/assets/img/lp/common/other-question-top-bg.svg);
  background-size: cover;
  height: 20px;
  width: 100%;
  top: -20px;
}
.other-question::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/assets/img/lp/common/other-question-bottom-bg.svg);
  background-size: cover;
  height: 20px;
  width: 100%;
  bottom: -20px;
}
.other-question .question-list {
  background: #ffffff;
  padding: 16px;
  margin-top: 10px;
}
.other-question .question-list ul li {
  color: #2B2B2B;
  margin-bottom: 16px;
}
.other-question .question-list ul li .question {
  display: block;
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  margin-bottom: 16px;
}
.other-question .question-list ul li .question .c-quest {
  color: #EF5DA8;
}
@media (min-width: 992px) {
  .other-question .question-list ul li .question {
    font-size: 24px;
    line-height: 34px;
  }
}
.other-question .question-list ul li p {
  font-size: 16px;
  line-height: 23px;
}
@media (min-width: 992px) {
  .other-question .question-list ul li p {
    font-size: 20px;
    line-height: 29px;
  }
}
.other-question .question-list ul li:last-child {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .other-question .question-list {
    max-width: 1116px;
    padding: 32px;
    margin: 23px auto;
  }
}
@media (min-width: 992px) {
  .other-question {
    margin-left: 0;
    margin-right: 0;
    padding: 35px 0 25px;
  }
  .other-question::before {
    content: "";
    display: block;
    position: absolute;
    background: url(/assets/img/lp/common/other-question-top-bg-pc.svg);
    background-size: cover;
    height: 20px;
    width: 100%;
    top: -20px;
  }
  .other-question::after {
    content: "";
    display: block;
    position: absolute;
    background: url(/assets/img/lp/common/other-question-bottom-bg-pc.svg);
    background-size: cover;
    height: 20px;
    width: 100%;
    bottom: -20px;
  }
}

.btn-pink {
  display: inline-block;
  background: #EF5DA8;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  border-radius: 30px;
  padding: 9px 44px 12px;
  color: #ffffff;
  margin-top: 17px;
}
@media (min-width: 992px) {
  .btn-pink {
    font-size: 20px;
    line-height: 23px;
    padding: 7px 30px;
  }
}

.c-voice-image p {
  display: inline-block;
}
#float-navi .btn-interactive-navi-modal-open img {
  width: auto !important;
}
.section-contents p {
  display: inline-block;
}

.breadcrumbs {
  display: flex;
}

.breadcrumbs a {
  color: #337ab7;
}

.breadcrumbs > li:not(:first-child)::before{
  content: ">";
  padding-left: 5px;
  padding-right: 5px;
}

@media (hover: hover) {
  .breadcrumbs a:hover {
    text-decoration: none;
  }
}

.floating-navi {
  z-index: 900;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
.floating-navi i {
  font-size: 48px;
}
.floating-navi .floating-navi-page-top-btn {
  background-color: #337ab7;
  line-height: 0;
}
.floating-navi a {
  float: left;
  width: 70px;
  height: 70px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
  border-radius: 6px;
  color: #FFFFFF;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

.company-table__bg {
  clip-path: polygon(0 10px, 100% 0%, calc(100% - 15px) 100%, 12px calc(100% - 12px));
}

/* get_start */
.get_start-method-bg {
  clip-path: polygon(0 0, 98% 2%, 100% 96%, 12px 100%);
}

.bg-line-frame {
  background-image: url(../../img/lp/get_start/bg-line-frame--top.svg), url(../../img/lp/get_start/bg-line-frame--bottom.svg);
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}
.get_start-introduction .message {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  background-color: #ffffff;   
}
.get_start-introduction .message span {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ffff8f 70%);
}
@media (min-width: 992px) {
  .get_start-introduction .message {
    font-size: 22px;
    line-height: 1.8;
  }
}

.get_start_interview {
  background-image: url(../../img/lp/get_start/get_start-decoration_1.png), url(../../img/lp/get_start/get_start-decoration_2.png);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 8%;
}
@media (min-width: 992px) {
  .bg-line-frame {
    background-image: url(../../img/lp/get_start/bg-line-frame__pc--top.svg), url(../../img/lp/get_start/bg-line-frame__pc--bottom.svg);
  }
  .get_start_interview {
    background-size: contain;
  }
}

/*  index, price */
.price-infomation {
  background-color: #fff;
  border: 2px solid red;
  margin: 10px auto;
  padding: 10px;
}
.price-infomation span {
    font-weight: bold;
}
.price-infomation a {
  text-decoration: underline;
}
@media (min-width: 992px) {
  .price-infomation {
    font-size: 20px;
    margin: 35px auto;
    padding: 20px 30px;
    max-width: 1107px;
  }
}

/* voice */
.voice_interview {
  background-image: url(../../img/lp/get_start/get_start-decoration_1.png), url(../../img/lp/get_start/get_start-decoration_2.png);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 8%;
}

.voice-others { 
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22358%22%20height%3D%221253%22%20viewBox%3D%220%200%20358%201253%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M26.6814%201250.22L339.593%201224.31C349.987%201223.45%20357.975%201214.75%20357.943%201204.32L354.376%2047.5634C354.344%2037.1781%20346.369%2028.5453%20336.019%2027.6925L21.7314%201.79637C10.045%200.833488%200.0412002%2010.0848%200.0891436%2021.8107L5.03134%201230.37C5.07904%201242.03%2015.0571%201251.18%2026.6814%201250.22Z%22%20fill%3D%22%23FFF1F8%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .voice-body-bg {
    content: "";
    background: url(/assets/img/lp/voice/pc-voice-body-bg.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .voice-others {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221240%22%20height%3D%22858%22%20viewBox%3D%220%200%201240%20858%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M58.2477%20857.791L1200.54%20824.105C1222.42%20823.46%201239.71%20805.352%201239.35%20783.468L1227.74%2073.2007C1227.4%2051.8225%201210.3%2034.4989%201188.92%2033.8717L42.0407%200.214338C19.1713%20-0.456802%200.399341%2018.1561%200.875905%2041.0303L17.0773%20818.642C17.5403%20840.864%2036.0308%20858.446%2058.2477%20857.791Z%22%20fill%3D%22%23FFF1F8%22%2F%3E%3C%2Fsvg%3E');
  }
}

/* introduction */
.message-from-teacher-1 {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22463%22%20height%3D%22882%22%20viewBox%3D%220%200%20463%20882%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M27.165%20881.354L443.521%20868.218C454.36%20867.876%20462.951%20858.959%20462.89%20848.115L458.299%2033.6415C458.239%2022.8838%20449.679%2014.1013%20438.927%2013.7641L20.784%200.651711C9.43855%200.295938%200.0716401%209.44291%200.157731%2020.7936L6.53491%20861.516C6.62012%20872.749%2015.9373%20881.708%2027.165%20881.354Z%22%20fill%3D%22%23FFF1F8%22%2F%3E%3C%2Fsvg%3E');
  background-size: cover;
  background-repeat: no-repeat;
  height: 0;
  padding-top: 174svw;
}
.message-from-teacher-2 {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22463%22%20height%3D%22882%22%20viewBox%3D%220%200%20463%20882%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M27.165%20881.354L443.521%20868.218C454.36%20867.876%20462.951%20858.959%20462.89%20848.115L458.299%2033.6415C458.239%2022.8838%20449.679%2014.1013%20438.927%2013.7641L20.784%200.651711C9.43855%200.295938%200.0716401%209.44291%200.157731%2020.7936L6.53491%20861.516C6.62012%20872.749%2015.9373%20881.708%2027.165%20881.354Z%22%20fill%3D%22%23FFFCEE%22%2F%3E%3C%2Fsvg%3E');
  background-size: cover;
  background-repeat: no-repeat;
  height: 0;
  padding-top: 174svw;
}
@media (min-width: 768px) {
  .message-from-teacher-1 {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221122%22%20height%3D%22398%22%20viewBox%3D%220%200%201122%20398%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M54.2209%20397.413L1082.32%20381.934C1104.67%20381.597%201122.41%20363.003%201121.7%20340.658L1112.55%2054.8098C1111.86%2033.4598%201094.52%2016.4143%201073.17%2016.0943L41.2905%200.63364C18.3254%200.289556%20-0.211947%2019.3116%200.724456%2042.2601L13.6521%20359.049C14.5365%20380.721%2032.5328%20397.74%2054.2209%20397.413Z%22%20fill%3D%22%23FFF1F8%22%2F%3E%3C%2Fsvg%3E');
    padding-top: 35%;
  }
  .message-from-teacher-2 {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221122%22%20height%3D%22398%22%20viewBox%3D%220%200%201122%20398%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M54.2209%20397.413L1082.32%20381.934C1104.67%20381.597%201122.41%20363.003%201121.7%20340.658L1112.55%2054.8098C1111.86%2033.4598%201094.52%2016.4143%201073.17%2016.0943L41.2905%200.63364C18.3254%200.289556%20-0.211947%2019.3116%200.724456%2042.2601L13.6521%20359.049C14.5365%20380.721%2032.5328%20397.74%2054.2209%20397.413Z%22%20fill%3D%22%23FFFCEE%22%2F%3E%3C%2Fsvg%3E');
    padding-top: 35%;
  }
  .bg-introduction-bottom {
    background-image: url(../../img/lp/introduction/bg-introduction-bottom.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}