@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap');
body, * {
  outline: none !important;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #fff;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #333;
  margin: 0;
  position: relative;
  width: 100%;
  font: 1.6rem/1.6 "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button {
  border: none;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:active, a:focus {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none !important;
}

.hoverable a:hover {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none !important;
  cursor: pointer;
}

legend {
  color: #000;
}

ol, ul {
  list-style: none;
}

* {
  text-decoration: none;
}

caption, th {
  text-align: left;
}

sup {
  vertical-align: text-top;
}

img {
  border: none !important;
}

sub {
  vertical-align: text-bottom;
}

input, textarea, select {
  *font-size: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all ease .3s;
}

textarea {
  outline: none;
  resize: none;
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

figure img {
  width: 100%;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

address, caption, cite, code, dfn, th, var {
  font-style: normal;
  font-weight: normal;
}

q:before, q:after {
  content: '';
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, a, blockquote, figure {
  margin: 0;
  padding: 0;
}

.sponly{ }
.pconly{ }
@media screen and (min-width: 769px) { .sponly{ display:none!important;}}
@media screen and (max-width: 768px) { .pconly{ display:none!important;}}

#main-wrap {
  padding-top: 80px;
  @media screen and (max-width: 768px) {
    padding-top: 0;
  }
}
#header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  border-bottom: 1px solid #fabe00;
  @media screen and (max-width: 768px) {
    position: relative;
  }
  .header-content {
    max-width: 960px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    height: 80px;
  }
  .logo {
    margin-right: 24px;
    img {
      vertical-align: bottom;
    }
    &:hover {
      opacity:.75;
    }
  }
  .lp-heading {
    font-size: 13px;
    letter-spacing: -.02em;
    font-weight: 700;
  }
  @media screen and (max-width: 768px) {
    .header-content {
      display: block;
      text-align: center;
      padding: 15px;
      height: 84px;
    }
    .logo{
      img {
        width: 150px;
        height: auto;
      }
    }
    .lp-heading {
      margin: 5px 0 0;
    }
  }
  #mainNav {
    display: flex;
    gap: 10px;
    margin-left: auto;
    a {
      display: block;
      background: #ec6a3e;
      color: #fff;
      font-size: 17px;
      padding: 8px 28px 8px 12px;
      font-weight: 700;
      line-height: 1.4;
      position: relative;
      &:after {
        content: "";
        display: block;
        position: absolute;
        background-color: #fff;
        width: 6px;
        height: 9px;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        right: 10px;
        top: calc(50% - 4.5px);
      }
      &:hover {
        filter: brightness(1.1);
      }
    }
    @media screen and (max-width: 768px) {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      gap: 1px;
      background: #fff;
      height: 62px;
      padding-top: 1px;
      li {
        flex: 1;
      }
      a {
        font-size: 15px;
        padding: 8px 8px 8px 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &:after {
          right: 8px;
        }
      }
    }
  }
}

#footer {
  text-align: center;
  font-size: 1.6rem;
  @media screen and (max-width: 768px) {
    padding-bottom: 62px;
  }
  .footer-content {
    & dl.about {
      border-top: 2px solid #fabe00;
      padding: 40px 5% 20px;
      @media screen and (max-width: 768px) {
        padding: 30px 5% 0;

      }

      dt {
        display: inline-block;
        vertical-align: middle;
        max-width: 250px;
        padding-bottom: 20px;
        img {
          width: 100%;
        }
        .ninka{
          font-size: 12px;
          display: inline-block;
          padding-left: 48px;
          margin-top: 4px;
        }
      }

      dd{
        display: inline-block;
        vertical-align: middle;
        padding-left: 30px;
        font-size: 1.4rem;
        text-align: left;
        padding-bottom: 20px;
        @media screen and (max-width: 768px) {
          text-align: center;
          padding-left: 0;
          p.sponly + p.sponly {
            margin-top: 10px;
          }
        }
      }

      & .footer-logo {
        width: 100%;
      }
    }

    & p.copy {
      clear: both;
      color: #fff;
      background: #fabe00;
      font-size: 1.3rem;
      line-height: 40px;
      @media screen and (max-width: 768px) {
        padding: 20px;
      }
    }
     
  }

}

.wrapper {
  width: calc(335/375 * 100%);
  max-width: 960px;
  margin: auto;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.fv {
  position: relative;

  .fv-content {
    position: relative;
  }
  .wrapper {
    position: relative;
    height: calc(69/128 * 100vw);
    min-height: 680px;
    max-height: calc(100svh - 80px);
    text-align: center;
    z-index: 1;
  }
  .fv-copy {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    right: 0;
    top: 30px;
    left: auto;
    .marker {
      font-size: 23px;
      display: inline-block;
      background: linear-gradient(transparent 80%, #fff 80%, #fff 95%,transparent 95%);
      margin-bottom: 30px;
      margin-top: 10px;
    }
    .marker1 {
      b {
        position: relative;
        &:before {
          content: "・・・";
          position: absolute;
          top: -.85em;
        }
      }
    }
    .text-right {
      display: block;
      text-align: right;
    }
    .bow {
      font-size: 32px;
      display: block;
      color: #fff;
      margin-bottom: 10px;
      span {
        background: #000;
        display: inline-block;
        padding:2px 2px 2px 12px;
      }
    }
  }

  .fv-copy_250905 {
    font-weight: 700;
    position: absolute;
    color: #000;
    right: 0;
    bottom: 32px;
    .bow {
      font-family: "Zen Kaku Gothic New", sans-serif;
      display: block;
      background:#f1b20f;
      font-size: 25px;
      padding: 10px 20px;
      font-feature-settings: "palt";
      letter-spacing: -.015em;
      margin-bottom: 15px;
      small {
        font-size: .9em;
      }
    }
    .catch {
      display: block;
      font-size: 51px;
      line-height: 1.2;
      display: block;
      text-shadow: -1px 1px 24px rgba(255,255,255,.6),1px -1px 24px rgba(255,255,255,.6),1px 1px 24px rgba(255,255,255,.6), -1px -1px 24px rgba(255,255,255,.6);
      font-feature-settings: "palt";
      letter-spacing: .05em;
      right: -.15em;
      position: relative;
      &:last-child {
        text-indent: .25em;
      }
      big {
        font-size: 67px;
      }
      small {
        font-size: .9em;
      }
    }
  }
  .fv-copy_250922 {
    max-width: 653px;
    margin-left: auto;
    text-align: center;
    /* padding-top: 40px; */
    padding-top: 72px;
    position: relative;
    .bow {
      font-family: "Zen Kaku Gothic New", sans-serif;
      display: block;
      background:#f1b20f;
      font-size: 29px;
      padding: 10px 10px;
      font-feature-settings: "palt";
      letter-spacing: -.015em;
      margin-bottom: 20px;
      text-align: center;
      font-weight: 700;
      small {
        font-size: .9em;
      }
    }
    .catch {
      margin: 0 -10px;
    }
  }
  .fv-copy_251007 {
    font-weight: 700;
    position: absolute;
    color: #000;
    right: 0;
    bottom: 32px;
    .bow {
      font-family: "Zen Kaku Gothic New", sans-serif;
      display: block;
      background:#00baff;
      font-size: 25px;
      padding: 10px 20px;
      font-feature-settings: "palt";
      letter-spacing: -.015em;
      margin-bottom: 15px;
      small {
        font-size: .9em;
      }
    }
    .catch {
      display: block;
      @media screen and (max-width: 768px) {
        width: 80%;
        margin-left: auto;
        padding: 10px 20px;
        img {
          width: 100%;
        }
      }
    }
  }
  .fv-copy_251120b {
    font-weight: 700;
    position: relative;
    color: #fff;
    right: 0;
    bottom: 32px;
    .bow {
      font-family: "Zen Kaku Gothic New", sans-serif;
      display: block;
      max-width: 864px;
      background:#000;
      font-size: 31px;
      padding: 2px 10px;
      font-feature-settings: "palt";
      letter-spacing: -.04em;
      text-align: center;
      margin: 0 auto -8px;
      small {
        font-size: .9em;
      }
      .wrap-bow {
        display: inline-block;
        padding: 0 4px;
        position: relative;
        &::before, &::after {
          content: "";
          width: 72px;
          background: #fff;
          height: 2px;
          display: block;
          position: absolute;
          top: calc(50% - 1px);
          @media screen and (max-width: 768px) {
            display: none;
          }
        }
        &::before {
          left: -78px;
        }
        &::after {
          right: -78px;
        }
      }
    }
    .catch {
      display: block;
      @media screen and (max-width: 768px) {
        background: rgba(255,255,255,.9);
        margin-left: auto;
        padding: 10px;
        img {
          width: 100%;
          vertical-align: bottom;
        }
      }
    }
  }

  .badge {
    position: absolute;
    bottom: -12px;
    right: 0;
  }
  .badge_250905 {
    position: absolute;
    bottom: -12px;
    left: 0;
  }
  .badge_250922 {
    position: absolute;
    bottom: -12px;
    right: 0;
  }
  .badge_251007 {
    position: absolute;
    bottom: 18px;
    right: 0;
  }
  .badge_251022 {
    position: absolute;
    bottom: 40px;
    right: 0;
  }
  .picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top 82%;
    position: absolute;
    z-index: -1;
    top: 0;
    @media screen and (max-width: 768px) {
      object-position: left 82%;
      object-fit: auto 100%;
    }
  }
  .picture-img2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    position: absolute;
    z-index: -1;
    top: 0;
    @media screen and (max-width: 768px) {
    }
  }
  @media screen and (max-width: 768px) {
    /* padding-top: 67px; */
    padding-top: 34px;
    .wrapper {
      height: calc(353/375 * 100vw);
      min-height: auto;
      max-height: none;
    }
    .fv-copy {
      position: relative;
      top: -67px;
      .marker {
        font-size: 15px;
        background: inherit;
      }
      .text-right {
        padding-right: 20px;
        .marker {
          text-align: left;
          margin-top: 8px;
          line-height: 1.4;
        }
      }
      .marker1 {
        display: block;
        background: #fff;
        text-align: center;
        margin: 0;
        padding:6px 0 2px;
        b {
          &:before {
            top: -.8em;
          }
        }
      }
      .marker2 {
        background: linear-gradient(transparent 85%, #fff 85%, #fff 93%,transparent 93%);
        display: inline-block;
        letter-spacing: -.05em;
      }
      .bow {
        font-size: 16px;
        letter-spacing: -.05em;
        text-align: center;
        margin-bottom: 2px;
        span {
          display: block;
        }
      }
    }
    .fv-copy_250922 {
      position: relative;
      top: -34px;
      padding-top: 0;
      .bow {
        font-size: 15px;
        margin-bottom:5px;
        height: 34px;
        padding: 0 20px;
        text-align: center;
        line-height: 34px;
      }
      .catch {
        right: 6%;
        position: absolute;
        .copy-img {
          width: 135px;
        }
      }
    }
    .fv-copy_251007 {
      position: relative;
      top: -34px;
      padding-top: 0;
      max-width:none;
      .bow {
        font-size: 15px;
        margin-bottom:5px;
        height: 34px;
        padding: 0 20px;
        text-align: center;
        line-height: 34px;
      }
    }
    .fv-copy_251120b {
      position: relative;
      top: -34px;
      padding-top: 0;
      max-width:none;
      .bow {
        font-size: 15px;
        margin-bottom:0;
        height: 34px;
        padding: 0;
        text-align: center;
        line-height: 34px;
        letter-spacing: .025em;
      }
    }
    .badge {
      width: 97px;
      height: auto;
      right: 20px;
      bottom: -44px;
    }
    .badge_250922 {
      width: 136px;
      height: auto;
      right: 20px;
      left: auto;
      bottom: -20px;
    }
    .badge_251007 {
      width: 110px;
      height: auto;
      right: 20px;
      left: auto;
      bottom: -30px;
    }
    .badge_251022 {
      width: 132px;
      height: auto;
      right: auto;
      left: 20px;
      bottom: -16px;
 
    }
  }
}

#lead {
  .wrapper {
    padding: 60px 0;
    text-align: center;
  }
  .heading-lead {
    margin-bottom: 28px;
    position: relative;
    &:before {
      background: url(../images/icon-3ten.png) no-repeat center;
      background-size: contain;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      width: 41px;
      height: 29px;
      left: calc(50% + 165px);
    }
    @media screen and (max-width: 768px) {
      img {
        width: 272px;
        height: auto;
      }
      &:before {
        width: 33px;
        height: 23px;
        left: calc(50% + 120px);
      }
    }
  }

  .text-lead {
    font-size: 19px;
    line-height: calc(33/19);
    font-weight: 500;
    @media screen and (max-width: 768px) {
      font-size: 16px;
    }
  }
}

.blk-cta {
  background: #fff5d5;
  .wrapper {
    padding:60px 0;
    text-align: center;
    @media screen and (max-width: 768px) {
      padding: 40px 20px;
    }
  }
  .heading-cta {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: calc(25px * 1.45);
    font-weight: 900;
    margin-bottom: 12px;
    font-feature-settings: "palt";
    letter-spacing: -.015em;
    position: relative;
    display: inline-block;
    .small {
      font-size: 25px;
      letter-spacing: 0;
      margin: 0 -.2em;
    }
    &::before {
      content: "";
      display: block;
      width: 130px;
      height: 130px;
      background: url(../images/free.png) no-repeat;
      background-size: contain;
      position: absolute;
      left:-160px;
      top: -40px;
      z-index: 1;
    }

    &::after {
      content: "";
      display: block;
      width: 141px;
      height: 175px;
      background: url(../images/qabook.png) no-repeat;
      background-size: contain;
      position: absolute;
      right:-140px;
      top: -50px;
    }

    @media screen and (max-width: 768px) {
      font-size: calc(31px * 1.5);
      line-height: 1.1;
      margin-bottom: 256px;
      .small {
        font-size: 31px;
        margin: 0 -.25em 0 -.15em
      }
      &::before {
        left: auto;
        right: 50%;
        top: 148px;
        z-index: 1;
      }
      &::after {
        right: auto;
        left: 40%;
        top: 120px;
        width: 180px;
        height: 232px;
      }
    }
  }
  .fukidashi-cta1 {
    font-size: 23px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    line-height: 1;

    .fukidashi {
      display: inline-block;
      padding:0 18px;
      position: relative;
      font-feature-settings: "palt";
      letter-spacing: 0.015em;
      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        width: 1.3px;
        height: 24px;
        background: #333;
        top: 4px;
      }
      &:before {
        left: 0;
        transform: rotate(-20deg);
      }
      &:after {
        right: 0;
        transform: rotate(20deg);
      }
      .orange {
        color: #ec6a3e;
        font-weight: 900;
        letter-spacing: .025em;
      }
      .small {
        font-size: 90%;
      }
      .big {
        font-size: 115%;
      }
      b {
        position: relative;
        &:before {
          content: "・・";
           color: #ec6a3e;
           font-weight: 400;
           position: absolute;
           top: -12px;
           left: 0;
        }
        &:nth-of-type(2) {
          &:before {
            letter-spacing: -.25em;
            left: -.25em;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      font-size:20px;
      margin-bottom: 5px;
      .fukidashi {
        padding: 0 12px;
      }
    }
  }
  .fukidashi-cta {
    font-size: 19px;
    margin-bottom: 20px;
    b {
      display: inline-block;
      padding:0 16px;
      position: relative;
      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        width: 1.6px;
        height: 20px;
        background: #333;
        top: 5px;
      }
      &:before {
        left: 0;
        transform: rotate(-30deg);
      }
      &:after {
        right: 0;
        transform: rotate(30deg);
      }
    }
    @media screen and (max-width: 768px) {
      font-size: 17px;
      margin-bottom: 16px;
    }
  }
  .btns-list {
    .qabook {
      position: relative;
    }
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
  .cta-btn {
    background: #ec6a3e;
    color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 25px;
    height: 95px;
    font-weight: 700;
    position: relative;
    padding: 0 40px;
    max-width: 510px;
    margin: 0 auto;
    span {
      display: block;
      font-size: .65em;
      line-height: 1.2;
      small {
        font-size: .85em;
      }
    }
    &:before {
      content: "";
      display: block;
      position: absolute;
      width: 23px;
      height: 23px;
      background: #fff;
      border-radius: 100%;
      right: 10px;
      top: calc(50% - 12px);
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      background-color: #ec6a3e;
      width: 8px;
      height: 10px;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      right: 16px;
      top: calc(50% - 5px);
    }
    &:hover {
      filter: brightness(1.1);
    }
    @media screen and (max-width: 768px) {
      line-height: 1.2;
      height: 118px;
      font-size: 23px;
      span {
        margin-bottom: 3px;
      }
      .qabook {
        &::before {
          width: 80px;
          height: 110px;
          top: -20px;
          left: -54px;
        }
      }
    }
  }

}

.heading-cmn {
  background: #00baff;
  color: #fff;
  padding: 40px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  > span {
    display: inline-block;
    position: relative;
    &:before {
      background: url(../images/icon-3ten-w.png) no-repeat center;
      background-size: contain;
      content: "";
      display: block;
      position: absolute;
      top: -20px;
      width: 40px;
      height: 28px;
      right: -24px;
    }
  }
  @media screen and (max-width: 768px) {
    font-size: 30px;
    padding: 30px 20px;
    line-height: 1.2;
    > span {
      &:before {
        width: 33px;
        height: 23px;
        right: -20px;
        top: -17px;
      }
    }
  }
}


#about {
  .heading-cmn {
    span {
      text-align: left;
      line-height: 1.4;
      &:before {
        top: auto;
        bottom: 1.1em;
      }
      small {
        font-size: 24px;
        letter-spacing: .05em;
        position: relative;
        &:before {
          content: "・・・・・";
          display: block;
          line-height: 1;
          margin-top: -.5em;
          margin-bottom: -.85em;
        }
      }
    }
    @media screen and (max-width: 768px) {
      span {
        letter-spacing: -.1em;
        small {
          font-size: 20px;
        }
      }
    }
  }
  .wrapper {
    padding: 60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 0;
    }
  
  }
  .about-sec {
    + .about-sec {
      margin-top: 52px;
    }
  }
  .about-blk {
    display: flex;
    gap: 40px;
    .heading-about {
      display: inline-block;
      font-size: 30px;
      font-weight: 700;
      line-height: calc(40/30);
      margin-bottom: 24px;
      letter-spacing: -.02em;
      position: relative;
      &:before {
        background: url(../images/icon-3ten.png) no-repeat center;
        background-size: contain;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        width: 41px;
        height: 29px;
        right: -28px;
      }
    }
    .heading-about-3,
    .heading-about-4 {
      padding-top: 24px;
    }
    .text-about {
      font-size: 17px;
      line-height: calc(26/17);
      b {
        font-weight: 700;
        color: #00baff;
      }
    }
    @media screen and (max-width: 768px) {
      display: block;
      .heading-about {
        font-size: 24px;
        letter-spacing: -.05em;
        &:before {
          width: 33px;
          height: 23px;
          right: -16px;
          top: .2em;
        }
      }
      .heading-about-3,
      .heading-about-4 {
        padding-top: 0;
        &:before {
          top: -.85em;
        }
      }
      .heading-about-4 {
        letter-spacing: -.08em;
      }
      .text-about {
        font-size: 16px;
        line-height: 1.4;
      }
    }
  }
  .about-blk.reverse {
    flex-direction: row-reverse;
  }
  .text-content {
    flex: 1;
    @media screen and (max-width: 768px) {
      padding: 0 20px;
      .img-about {
        margin-top: 0;
        margin-bottom: 18px;
      }
    }
  }
  .img-about {
    flex: 1;
    display: block;
    img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
    }
    @media screen and (max-width: 768px) {
      margin-top: 30px;
    }
  }

  .graduation-requirements {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 48px;
    .requirement-heading {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 40px;
      .marker {
        background: linear-gradient(transparent 85%, #55cafd 85%, #55cafd 95%,transparent 95%);
      }
    }
    .requirements-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    .requirement-item {
      padding-top: 72px;
      background: url(../images/icon_checkbox.png) no-repeat top center;
    }
    .requirement-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 15px;
      line-height: 1.3;
      b {
        font-weight: 700;
        color: #00baff;
      }
    }
    .requirement-note {
      font-size: 12px;
      line-height: 1.2;
      &:before {
        content: "※";
      }
    }
    @media screen and (max-width: 768px) {
      padding: 0 20px;
      margin-top: 40px;
      margin-bottom: 40px;
      text-align: left;
      .requirement-heading {
        font-size: 19px;
        text-align: center;
        margin-bottom: 24px;
        .marker {
          background: linear-gradient(transparent 80%, #55cafd 80%, #55cafd 95%,transparent 95%);
        }
      }
      .requirements-list {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .requirement-item {
        padding-top: 0;
        padding-left: 32px;
        background-position: left top;
        background-size: 28px auto;
      }
      .requirement-title {
        font-size: 21px;
        margin-bottom: 0;
        br {
          display: none;
        }
      }
      .requirement-note {
        br {
          display: none;
        }
      }
    }
  }

  .current-status {
    text-align: center;
    border: 2px solid #00baff;
    border-radius: 8px;
    padding:0 32px 40px;
    .status-heading {
      font-size: 24px;
      font-weight: 700;
      background: #fff;
      display: inline-block;
      position: relative;
      top: -18px;
      padding: 0 12px;
      .marker {
        background: linear-gradient(transparent 85%, #55cafd 85%, #55cafd 95%,transparent 95%);
      }
    }
    .status-image-list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 56px;
      margin-top: 20px;
      .status-image-item {
        max-width: 264px;
      }
    }
    .status-description {
      font-size: 21px;
      line-height: 1.6;
      display: inline-block;
      position: relative;
      padding: 0 40px;
      b {
        color: #00baff;
      }
      &:before,
      &:after {
        font-size: 81px;
        position: absolute;
        line-height: 1;
        color:#00baff;
      }
      &:before {
        content: "“";
        top: -.2em;
        left: .2em;
      }
      &:after {
        content: "”";
        bottom: -.65em;
        right: 0;
      }
    }
    @media screen and (max-width: 768px) {
      border-radius: 4px;
      padding:0 20px 40px;
      margin: 0 20px;
      .status-heading {
        font-size: 19px;
        margin-bottom: 0;
        .marker {
          background: linear-gradient(transparent 80%, #55cafd 80%, #55cafd 95%,transparent 95%);
        }
      }
      .status-image-list {
        flex-direction: column;
        gap: 40px;
        margin-top: 0;
        margin-bottom: 40px;
        .status-image-item {
          max-width: none;
        }
      }
      .status-description {
        font-size: 17px;
        line-height: 1.6;
        padding: 0;
        &:before {
          left: 0;
        }
        &:after {
          right: 0;
        }
      }
    }
  }
}


#strongPoint {
  background: #effaff;
  .wrapper {
    padding: 60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 20px;
    }
  }
  .section-feature {
    .container {
      max-width: 680px;
      margin: 0 auto;
    }
    + .section-feature {
      margin-top: 40px;
    }
    .feature-number {
      width: 51px;
      height: 51px;
      line-height: 50px;
      border-radius: 100%;
      background: #00baff;
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      margin: 0 auto 12px;
      @media screen and (max-width: 768px) {
        font-size: 20px;
        width: 34px;
        height: 34px;
        line-height: 33px;
        margin: 0 auto 8px;
      }
    }
   .feature-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    @media screen and (max-width: 768px) {
      font-size: 23px;
      margin-bottom: 20px;
      line-height: 1.25;
      letter-spacing: -.05em;
    }
   }
   .feature-image {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
    img {
      vertical-align: bottom;
    }
    .feature-photo {
      max-width: 520px;
    }
    .badge {
      position: absolute;
      bottom:-10px;
      left:calc(50% + 134px);
      @media screen and (max-width: 768px) {
        left: auto;
        right: -4px;
        width: 110px;
        height: auto;
      }
    }
    figcaption {
      display: block;
      background: #fabe00;
      font-size: 19px;
      font-weight: 700;
      position: absolute;
      bottom: 10px;
      left: 0;
      padding: 16px 20px;
      @media screen and (max-width: 768px) {
        font-size: 17px;
        padding: 8px 10px;
        line-height: 1.2;
        left: -10px;
      }
    }
   }
   .feature-text {
    font-size: 17px;
    line-height: 1.6;
    b {
      color: #00baff;
      font-weight: 700;
    }
    @media screen and (max-width: 768px) {
      font-size: 16px;
      line-height: 1.4;
    }
   }

   .teachers-blk {
    margin-top: 40px;
    .teachers-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 32px;
      .marker {
        background: linear-gradient(transparent 82%, #ffd44c 82%, #ffd44c 95%,transparent 95%);
      }
      @media screen and (max-width: 768px) {
        font-size: 19px;
      }
    }
    .teachers-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 30px;
      text-align: center;
      margin-bottom: 40px;
      .fukidashi {
        background: #fff9e4;
        border: 2px solid #ffd44c;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        padding:12px 16px;
        line-height: 1.4;
        position: relative;
        margin-bottom: 16px;
        &:before, &:after {
          content: "";
          display: block;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          position: absolute;
        }
        &:before {
          background: #fff9e4;
          width: 10px;
          height: 10px;
          bottom: -10px;
          left: calc(50% - 5px);
          z-index: 1;

        }
        &:after {
          background:#ffd44c;
          bottom: -15px;
          width: 14px;
          height: 14px;
          left: calc(50% - 7px);
        }
        @media screen and (max-width: 768px) {
          font-size: 18px;
        }
  
      }
      .name {
        font-weight: 400;
        font-size: 13px;
        display: block;
        @media screen and (max-width: 768px) {
          font-size: 14px;
        }
      }
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }
    .teacher-message {
      font-size: 17px;
      line-height: 1.6;
      b {
        color: #00baff;
      }
      @media screen and (max-width: 768px) {
        font-size: 16px;
      }
    }
   }
  }
}


#manabi {
  .heading-cmn {
    span {
      &:before {
        top: auto;
        bottom: 1.5em;
        @media screen and (max-width: 768px) {
          top: 4px;
          bottom: auto;
        }
      }
    }
  }
  .wrapper {
    padding: 60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 20px;
    }

  }
  .list-manabi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    li {
      border: 1px solid #f4bb0b;
      padding: 40px;
    }
    .heading {
      text-align: center;
      font-size: 30px;
      line-height: calc(38/30);
      margin-bottom: 30px;
      background: #fff5d5;
      border-top: 4px solid #fabe00;
      font-weight: 700;
      padding:16px 10px;
      letter-spacing: -.02em;
    }
    .text {
      font-size: 17px;
      line-height: calc(26/17);
      b {
        font-weight: 700;
      }
    }
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 20px;
      li {
        padding: 20px;
        .heading {
          font-size: 23px;
          margin-bottom: 20px;
        }
        .text {
          font-size: 16px;
        }
      }
    }

  }
}

#voice {
  .wrapper {
    padding: 60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 20px;
    }
  }
  .list-voice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    li {
      background: #def5ff;
      padding: 40px;
      position: relative;
      text-align: center;
      &:before {
        content: "";
        display: block;
        position: absolute;
        width: 27px;
        height: 32px;
        background: url(../images/icon-clip.png) no-repeat center;
        background-size: contain;
        left: calc(50% - 13px);
        top: -10px;
      }
    }
    .name {
      display: block;
      text-align: center;
      font-weight: 400;
      font-size: 15px;
      margin-top: 8px;
      margin-bottom: 16px;
    }
    .fukidashi {
      text-align: center;
      font-size: 24px;
      line-height: calc(31/24);
      background: #fff;
      color: #00baff;
      font-weight: 700;
      padding:16px 10px;
      letter-spacing: -.02em;
      border: 2px solid #00baff;
      position: relative;
      margin-bottom: 24px;
      &:before, &:after {
        content: "";
        display: block;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
      }
      &:before {
        background: #fff;
        width: 14px;
        height: 14px;
        bottom: -14px;
        left: calc(50% - 7px);
        z-index: 1;

      }
      &:after {
        background:#00baff;
        bottom: -19px;
        width: 18px;
        height: 18px;
        left: calc(50% - 9px);
      }
    }
    .text {
      font-size: 17px;
      line-height: calc(26/17);
      text-align: left;
      b {
        font-weight: 700;
      }
    }
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      li {
        padding: 42px 20px 20px;
      }
      .fukidashi {
        font-size: 23px;
      }
      .text {
        font-size: 16px;
        line-height: 1.4;
      }
    }
  }
}

#qa {
  .heading-cmn {
    span {
      &:before {
        @media screen and (max-width: 768px) {
          right: -20px;
        }
      }
    }
  }
  .wrapper {
    padding:60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 0 ;
    }
  }
  .list-qa {
    .text {
      font-size: 18px;
      line-height: calc(32/18);
      padding-left: 40px;
    }
    .question {
      background: #fabe00;
      padding:30px 40px 30px 140px;
      position: relative;
      .text {
        font-weight: 500;
        border-left: 2px solid #333;
        min-height: 40px; 
        display: flex;
        align-items: center;
      }
      &:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/q.png) no-repeat center;
        background-size: contain;
        width: 42px;
        height: 41px;
        left: 50px;
      }
    }

    .answer {
      border: 2px solid #fabe00;
      padding:30px 40px 30px 140px;
      position: relative;
      .text {
        border-left: 2px solid #fabe00;
      }
      &:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/a.png) no-repeat center;
        background-size: contain;
        width: 42px;
        height: 37px;
        left: 50px;
      }
    }

    .answer + .question {
      margin-top: 40px;
    }

    @media screen and (max-width: 768px) {
      .text {
        font-size: 17px;
        line-height: 1.4;
        padding-left: 15px;
      }
      .question {
        padding:20px 20px 20px 56px;
        .text {
          border-left: 1px solid #333;
          min-height: 20px;
        }
        &:before {
          width: 20px;
          height: 20px;
          left: 20px;
        }
      }
      .answer {
        border: none;
        padding:20px 20px 20px 56px;
        .text {
          border-left: 1px solid #fabe00;
        }
        &:before {
          width: 20px;
          height: 20px;
          left: 20px;
        }
      }
      .answer + .question {
        margin-top: 10px;
      }
    }
  }
}

#flow {
  .wrapper {
    padding: 60px 0;
    @media screen and (max-width: 768px) {
      padding: 30px 0 50px;
    }
  }
  .flow-qualified {
    background: #fff5d5;
    max-width: 470px;
    margin: 0 auto 30px;
    padding: 30px;
    dl {
      display: grid;
      grid-template-columns: 94px auto;
      font-size: 18px;
      dt {
        font-weight: 700;
      }
      dd {
        font-weight: 500;
      }
    }
    .note {
      margin-top: 8px;
      li {
        font-size: 13px;
        letter-spacing: -.035em;
        text-indent: -1em;
        padding-left: 1em;
        &:before {
          content: "※";
          margin-right: .15rem;
        }
      }
    }
    @media screen and (max-width: 768px) {
      padding: 20px;
      dl {
        font-size: 16px;
        grid-template-columns: 80px auto;
        dd {
          letter-spacing: -.025em;
        }
      }
      .note {
        line-height: 1.3;
      }
    }

  }
  .flow-list {
    max-width: 720px;
    margin: 0 auto;
    > li {
      text-align: center;
      position: relative;
      &:after {
        content: "";
        display: block;
        background: #f4bb0b;
        width: 100%;
        height: 25px;
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
      }
      &:last-of-type {
        .text {
          display: inline-block;
          text-align: left;  
          line-height: 1.6;
        }
        &:after {
          content: none;
        }
      }
      + li {
        margin-top: 40px;
      }
      .flow-number {
        width: 24px;
        height: 24px;
        line-height: 23px;
        border-radius: 100%;
        background: #333;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        margin: 0 auto 8px;
      }
      .flow-title {
        text-align: center;
        font-weight: 700;
        font-size: 20px;
        background: #fff;
        position: relative;
        display: inline-block;
        padding:0 16px;
      }
      .flow-box {
        border: 2px solid #f4bb0b;
        padding: 20px;
        text-align: left;
        margin-top: -10px;
      }
      .todo-list {
        max-width: 450px;
        margin: 0 auto;
        > li {
          font-weight: 700;
          font-size: 16px;
          line-height: 1.8;
          text-indent: -1em;
          padding-left: 1em;
          &:before {
            content: "■ ";
            color: #f4bb0b;
          }
          a {
            color: #001aff;
          }
          ul li {
            text-indent: -1em;
            padding-left: 1em;  
            &:before {
              content: "・";
              color: #f4bb0b;
            }
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      padding: 0 20px;
      > li {
        .todo-list {
          > li {
            line-height: 1.3;
            + li {
              margin-top: 8px;
            }
          }
        }       
      }
    }
  }
}

#form-request {
  .heading-sub {
    text-align: center;
    font-weight: bold;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 26px;
    margin-top: 60px;
    letter-spacing: -.025em;

  }
  @media screen and (max-width: 768px) {
    .heading-cmn {
      padding: 30px 0;
      margin-bottom: 224px;
    }
    .heading-sub {
      font-size: 20px;
    }
  }
  .blk-cta {
    background: none;
    .wrapper {
      padding-top: 10px;
      padding-bottom: 10px;
      @media screen and (max-width: 768px) {
        padding:20px 0 0;
      }
    }
    .fukidashi-cta1 {
      font-size: 27px;
      margin-bottom: 10px;
      .fukidashi {
        padding: 0 8px 0 12px;
        &:before, &:after {
          background: #fff;
          top: 8px;
        }
      }
      .big {
        font-size: 1.15em;
        margin: 0 -.25em;
      }
      @media screen and (max-width: 768px) {
        font-size:17px;
        margin-bottom: 5px;
        .fukidashi {
          &:before, &:after {
            top: 0;
          }
        }
      }
    }
    .heading-cta {
      font-size:32px;
      display: block;
      line-height: 1;
      padding-right: 24px;
      margin-bottom: 0;
      &::before {
        left: auto;
        right: 98px;
        top: auto;
        bottom: 12px;
        width: 110px;
        height: 110px;
      }
      &::after {
        top: -114px;
        right: -10px;
      }
      @media screen and (max-width: 768px) {
        font-size: 20px;
        line-height: 1.1;
        padding-right: 0;
        margin-top: .4em;
        &::before {
          left: auto;
          right: 53%;
          top: 100px;
          z-index: 1;
          width: 91px;
          height: 91px;
        }
        &::after {
          right: auto;
          left: 40%;
          top: 70px;
          width: 142px;
          height: 180px;
        }
      }
    }
  }
}