@charset "UTF-8";

:root {
  --font-size-10: .625em;
  --font-size-11: .6875em;
  --font-size-12: .75em;
  --font-size-13: .8125em;
  --font-size-14: .875em;
  --font-size-15: .9375em;
  --font-size-16: 1em;
  --font-size-17: 1.0625em;
  --font-size-18: 1.125em;
  --font-size-20: 1.25em;
  --font-size-22: 1.375em;
  --font-size-23: 1.4375em;
  --font-size-24: 1.5em;
  --font-size-26: 1.625em;
  --font-size-28: 1.75em;
  --font-size-30: 1.875em;
  --font-size-32: 2em;
  --font-size-36: 2.25em;
  --font-size-40: 2.5em;
  --padding-base-horizontal: min(30px, 8vw)
}

*, *:before, *:after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height)
}

body {
  margin: 0;
  background: #fff url(../images/bg-1.png) left top/16px repeat;
  color: #272727;
  font-family: Noto Sans JP, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt"
}

ul, ol {
  margin-block: 0;
  padding-inline-start: 0
}

.no-list-style {
  list-style: none
}

.no-list-style li {
  display: flex;
  flex-direction: column
}

.no-list-style li:before {
  content: "​";
  font-size: 0
}

h1, h2, h3, h4, h5, p {
  margin-block: 0
}

h1, h2, h3, h4, h5 {
  color: var(--color-black)
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none
}

a:focus-visible, button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit
}

picture {
  display: inline-block
}

figure {
  margin: 0
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top
}

img.fit {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

svg {
  display: block;
  width: 100%;
  height: auto
}

strong, em {
  font-weight: inherit;
  font-style: normal
}

small {
  font-size: 1em
}

summary {
  display: block;
  cursor: pointer
}

summary::-webkit-details-marker {
  display: none
}

.content {
  overflow: hidden
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0
}

.font-september {
  font-family: september-n, sans-serif;
  font-style: normal;
  font-weight: 500
}

.text-vertical {
  writing-mode: vertical-lr
}

.text-default {
  margin-right: -.07em;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: .07em
}

.text-gradient {
  padding-bottom: 1px;
  background-image: linear-gradient(to top, rgb(244, 216, 205) 0%, rgb(244, 216, 205) 10px, transparent 10px, transparent 100%);
  mix-blend-mode: multiply
}

main {
  position: relative
}

.fv-logo {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  width: 102px;
  height: 30px
}

.fv-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 375/893
}

.fv-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.fv-inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 55px;
  padding-bottom: 115px
}

.fv-pict {
  display: block;
  text-align: center
}

.fv-pict img {
  width: 186px
}

.fv-heading {
  font-size: 20px;
  text-align: center
}

.fv-heading em {
  display: inline-block;
  background-image: linear-gradient(to top, transparent 0%, transparent .1em, #fcee21 .1em, #fcee21 .4em, transparent .4em, transparent 100%);
  color: #e5002d;
  font-size: 1.5em
}

.fv-lead-text {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center
}

.fv-bg-gray-rounded {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
  padding: 10px 56px;
  border-radius: 100em;
  background-color: #717069;
  color: #fff;
  line-height: 1.51;
  font-weight: 700;
  text-align: center
}

.fv-bg-gray-rounded>span {
  position: relative;
  z-index: 1
}

.fv-bg-gray-rounded:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 2px;
  width: 100%;
  height: 100%;
  border-radius: 100em;
  border: 1px solid #717069;
  background-color: #fff
}

.fv-bg-red-rounded {
  position: relative;
  width: 89.33%;
  max-width: 400px;
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
  padding: 61px 0 127px;
  border-radius: 50vw;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center
}

.fv-bg-red-rounded>p {
  position: relative;
  z-index: 1
}

.fv-bg-red-rounded picture {
  position: absolute
}

.fv-bg-red-rounded picture img {
  display: block;
  width: 100%;
  height: auto
}

.fv-bg-red-rounded:before, .fv-bg-red-rounded:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(100% - 15px);
  border-radius: 100em
}

.fv-bg-red-rounded:before {
  top: 3px;
  left: 13px;
  height: calc(100% + 6px);
  border: 3px solid #e5002d;
  background-color: #fff
}

.fv-bg-red-rounded:after {
  top: 0;
  left: 0;
  height: 100%;
  background-color: #e5002d
}

.fv-bg-red-text-1 {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  white-space: nowrap
}

.fv-bg-red-text-2 {
  display: block;
  margin-top: 20px;
  font-size: 24px;
  line-height: 1.45
}

.fv-bg-red-text-3 {
  display: block;
  margin-top: 28px;
  color: #ff0;
  font-size: 40px
}

.fv-bg-red-text-3 strong {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px
}

.fv-bg-red-text-3 .smaller {
  font-size: .7em
}

.fv-bg-red-text-4 {
  display: block;
  margin-top: 24px;
  letter-spacing: .038em
}

.fv-bg-red-img-1 {
  top: -40px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 77px
}

.fv-bg-red-img-2 {
  top: 208px;
  left: 22px;
  width: 80px
}

.fv-bg-red-img-3 {
  top: 270px;
  right: 26px;
  width: 88px
}

.fv-bg-red-img-4 {
  bottom: -9px;
  left: -6px;
  width: 98px
}

.fv-bg-red-img-5 {
  bottom: -18px;
  right: -5px;
  width: 108px
}

.fv-img-bottom {
  position: absolute;
  bottom: -30px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  overflow: hidden
}

.things {
  position: relative;
  padding: 103px 5.33vw 125px;
  background: #fbe9e2 url(../images/bg-things-sm@3x.png) right bottom 17px/128px auto no-repeat
}

.things-logo {
  width: 101px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 7px
}

.things-heading {
  max-width: 320px;
  margin-right: auto;
  margin-left: auto
}

.things-list {
  display: grid;
  gap: 36px;
  max-width: 900px;
  margin-top: 42px;
  margin-right: auto;
  margin-left: auto
}

.things-list li {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-height: 171px;
  margin-right: auto;
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center
}

.things-list li:before, .things-list li:after {
  content: "";
  position: absolute;
  width: calc(100% - 7px);
  height: 100%;
  border-radius: 50vw
}

.things-list li:before {
  top: 5px;
  left: 6px;
  background-color: #e5002d
}

.things-list li:after {
  top: 0;
  left: 0;
  border: 1px solid #e5002d;
  background-color: #fff
}

.things-list li>div {
  position: relative;
  z-index: 1;
  height: 100%
}

.things-list li>div :before {
  content: "check!!";
  position: absolute;
  top: -25px;
  left: 3px;
  width: 65px;
  height: 68px;
  background: transparent url(../images/icon-check.svg) center/100% auto no-repeat;
  font-size: 0
}

.things-list li p+p {
  line-height: 1.6
}

.things-list li strong {
  display: inline-block;
  color: #e5002d;
  font-size: 1.33em;
  line-height: 1.35;
  letter-spacing: .05em
}

.things-list li:nth-of-type(1)>div {
  padding-top: 42px
}

.things-list li:nth-of-type(1) strong {
  margin-bottom: 12px
}

.things-list li:nth-of-type(2)>div {
  padding-top: 30px
}

.things-list li:nth-of-type(2) strong {
  margin-bottom: 10px
}

.things-list li:nth-of-type(3)>div {
  padding-top: 47px
}

.things-list li:nth-of-type(3) strong {
  margin-bottom: 20px
}

.things-list li:nth-of-type(4)>div {
  padding-top: 30px
}

.things-list li:nth-of-type(4) strong {
  margin-bottom: 10px
}

.things-list li:nth-of-type(5)>div {
  padding-top: 26px
}

.things-list li:nth-of-type(5) strong {
  margin-bottom: 8px
}

.things-list li:nth-of-type(6)>div {
  padding-top: 40px
}

.things-list li:nth-of-type(6) strong {
  margin-bottom: 20px
}

.rate {
  position: relative;
  padding-top: 65px;
  padding-bottom: 143px
}

.rate>p {
  width: 89.33%;
  margin-right: auto;
  margin-left: auto;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: .07em
}

.rate>p+p {
  margin-top: 26px
}

.rate-figure {
  max-width: 420px;
  margin: 38px auto 41px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 100vw;
  background-color: #e5002d;
  color: #fff;
  text-align: center
}

.rate-figure figcaption {
  margin-bottom: 20px;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: -.02em
}

.rate-figure figcaption em {
  display: inline-block;
  padding-bottom: 10px;
  background-image: linear-gradient(to top, #ffff00 0%, #ffff00 4px, transparent 4px, transparent 100%)
}

.rate-figure .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(692px, 53.2%);
  margin-top: -6px;
  margin-right: auto;
  margin-left: auto
}

.rate-figure small {
  font-size: 12px
}

.rate-figure .wrap p:nth-of-type(1) {
  flex: 1 0 auto
}

.rate-figure .wrap p:nth-of-type(2) {
  flex: 0 0 auto;
  letter-spacing: .05em
}

.rate-img {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 71px;
  text-align: center
}

.rate-img img {
  width: auto;
  height: 100%
}

.reason {
  margin-bottom: 60px;
  padding-top: 20px
}

.reason>p {
  padding-right: 5.33vw;
  padding-left: 5.33vw
}

.reason p+p {
  margin-top: 30px
}

.reason-heading {
  color: #e5002d;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: -.02em;
  text-align: center
}

.reason-heading span {
  padding-bottom: 3px;
  background-image: linear-gradient(to top, #ffff00 0%, #ffff00 8px, transparent 8px, transparent 100%)
}

.reason-img {
  position: relative;
  display: block;
  max-width: 600px;
  margin: 43px auto 40px;
  padding-left: 5.33vw;
  padding-bottom: 16vw;
  overflow-x: clip
}

.reason-img:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: min(56vw, 336px);
  display: block;
  width: min(72vw, 432px);
  aspect-ratio: 270/217;
  border-radius: 3px;
  background-color: #e5002d
}

.reason-img img {
  position: relative;
  z-index: 1;
  width: min(72vw, 432px);
  border-radius: 200px 3px 3px 200px
}

.reason-item-wrap+.reason-item-wrap {
  margin-top: 48px
}

.reason-item {
  position: relative;
  z-index: 1;
  width: 89.33vw;
  max-width: 1082px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 42px;
  padding-right: 5vw;
  padding-left: 5vw;
  border-radius: 5px;
  border: 1px solid #e5002d;
  background: #fff url(../images/bg-reason.svg) left top/100% auto no-repeat
}

.reason-item p+p {
  margin-top: 26px
}

.reason-item .heading-wrap {
  text-align: center
}

.reason-item .heading-wrap h3 {
  display: inline-block;
  padding: 8px 21px;
  border-radius: 0 0 35px 35px;
  background-color: #e5002d;
  color: #fff;
  font-size: 13px
}

.reason-item .heading-wrap h3 span {
  font-size: 20px
}

.reason-lead {
  margin-top: 24px;
  margin-bottom: 29px;
  text-align: center
}

.reason-lead>p {
  display: inline-block;
  text-align: left
}

.reason-lead:before {
  content: "";
  display: block;
  height: 41px;
  margin-bottom: 10px;
  background: transparent url(../images/img-reason-2@3x.png) center top/auto 100% no-repeat
}

.reason-lead strong {
  color: #e5002d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em
}

.reason-item p {
  margin-right: -.07em
}

.reason-figure * {
  display: block;
  width: 100%;
  max-width: initial
}

.reason-item.item-1 .figure-1 {
  margin-top: 26px;
  margin-bottom: 24px
}

.reason-item.item-1 .figure-2 {
  margin-top: 15px;
  margin-bottom: 25px
}

.reason-item.item-2 .figure-1 {
  margin-top: 34px;
  margin-bottom: 36px;
  text-align: center
}

.reason-item.item-2 .figure-2 {
  margin-bottom: 32px
}

.reason-item.item-2 .figure-2 img {
  border-radius: 5px
}

.reason-item.item-3 .figure-1 {
  margin-top: 37px;
  margin-bottom: 25px
}

.reason-item.item-3 .figure-2 {
  margin-top: 28px;
  margin-bottom: 27px
}

.reason-item.item-4 .reason-figure {
  margin-top: 30px;
  margin-bottom: 35px
}

.reason-item.item-4 .reason-figure img {
  border-radius: 5px
}

.reason-item.item-5 .reason-figure {
  margin-top: 32px;
  margin-bottom: 4px
}

.match {
  margin-top: 76px
}

.match .bg {
  fill: #fbe9e2
}

.match-container {
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 77px 5.33vw 83px;
  background-color: #fbe9e2
}

.match h2 {
  margin-bottom: 33px;
  color: #e5002d;
  font-size: 28px;
  line-height: 1.36;
  letter-spacing: -.02em;
  text-align: center
}

.match .heading-img {
  display: block;
  width: 218px;
  height: auto;
  margin-bottom: 27px;
  margin-right: auto;
  margin-left: auto
}

.match .heading-img img {
  width: 100%;
  height: auto
}

.match p+p {
  margin-top: 36px
}

.match p.bold {
  margin-top: 30px;
  margin-bottom: 52px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center
}

.match .bold span {
  display: block;
  margin-top: 17px;
  margin-bottom: 24px;
  color: #e5002d;
  line-height: 1.5
}

.match .bold em {
  background-image: linear-gradient(to top, #ffff00 0%, #ffff00 11px, transparent 11px, transparent 100%)
}

.roadmap {
  padding: 60px 5.33vw 80px
}

.roadmap-heading-img {
  display: block;
  text-align: center
}

.roadmap-heading-img img {
  width: 227px
}

.roadmap h2 {
  margin-top: 23px;
  margin-bottom: 30px;
  color: #e5002d;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -.02em;
  text-align: center
}

.roadmap h3 {
  margin-top: 34px;
  padding-left: 16.36%;
  text-align: center
}

.roadmap h3 img {
  width: 133px
}

.roadmap-item {
  margin-top: 82px;
  padding-bottom: 45px;
  border-radius: 5px;
  border: 1px solid #e5002d;
  background-color: #fff
}

.roadmap-item+h3 {
  margin-top: 50px
}

.roadmap-item>p {
  margin-right: 5vw;
  margin-left: 5vw
}

.roadmap-item>p+p {
  margin-top: 34px
}

.roadmap-item>figure {
  position: relative;
  margin-bottom: 46px;
  text-align: right
}

.roadmap-item>figure img {
  position: relative;
  width: 294px;
  border-radius: 150px 0 0 150px
}

.roadmap-item>figure:before {
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  width: 294px;
  height: 100%;
  border-radius: 150px 0 0 150px;
  background-color: #e5002d
}

.roadmap-item-head {
  width: 85.33vw;
  margin-top: -64px;
  margin-right: auto;
  margin-left: auto;
  padding: 14px 30px 18px;
  border-radius: 5px;
  background-color: #e5002d;
  color: #fff;
  font-weight: 700;
  text-align: center
}

.roadmap-item-head p {
  font-size: 22px;
  letter-spacing: .05em
}

.roadmap-item-head ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 10px
}

.roadmap-item-head li {
  display: inline-block;
  min-width: 116px;
  padding: 3px 14px 4px;
  border-radius: 100em;
  background-color: #fff;
  color: #e5002d;
  font-size: 12px;
  letter-spacing: .05em
}

.roadmap-item-head-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
  margin-top: -50px;
  margin-right: 1.86vw;
  margin-left: 1.86vw
}

.item-4 .roadmap-item-head-wrap {
  margin-top: -67px
}

.roadmap-item-head-wrap .roadmap-item-head {
  flex: 0 0 calc(50% - 3px);
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  padding-right: 20px;
  padding-left: 20px
}

.roadmap-lead {
  margin: 28px 5vw 26px;
  text-align: center
}

.roadmap-lead>p {
  display: inline-block;
  text-align: left
}

.roadmap-lead:before {
  content: "";
  display: block;
  height: 41px;
  margin-bottom: 10px;
  background: transparent url(../images/img-reason-2@3x.png) center top/auto 100% no-repeat
}

.roadmap-lead strong {
  display: inline-block;
  margin-left: -.05em;
  color: #e5002d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em
}

.course .bg {
  fill: #e5002d
}

.course-container {
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 70px 5.33vw 85px;
  background-color: #e5002d;
  color: #fff
}

.course h2 {
  margin-bottom: 45px;
  font-size: 24px;
  letter-spacing: -.02em;
  line-height: 1.36;
  text-align: center
}

.course h2 span {
  font-size: 28px;
  letter-spacing: -.02em
}

.course-target {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 32px
}

.course-target:after, .course-target:before {
  content: "";
  background: center top/100% auto no-repeat
}

.course-target:before {
  flex: 0 0 56px;
  height: 60px;
  margin-top: 23px;
  background-image: url(../images/img-course-4.svg)
}

.course-target:after {
  flex: 0 0 59px;
  height: 40px;
  margin-top: 54px;
  background-image: url(../images/img-course-5.svg)
}

.course-target picture {
  flex: 0 1 476px
}

.course p, .course-1 .course-item-box {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto
}

.course p {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto
}


.course p+p {
  margin-top: 33px
}

.course-item {
  position: relative;
  margin-right: -1.33vw;
  margin-left: -1.33vw;
  padding: 84px 6.67vw 57px;
  border: 1px solid #e5002d;
  border-radius: 8px;
  background-color: #fff;
  color: #272727
}

.course-item:nth-of-type(1) {
  margin-top: 120px
}
.course-item.item-1 {
  margin-top: 100px
}

.course-item+.course-item {
  margin-top: 110px
}

.course-item.item-4 {
  padding-bottom: 35px
}

.course-item-heading {
  position: absolute;
  top: -62px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 327px;
  height: 105px;
  border-radius: 150px;
  background-color: #fbe9e2;
  color: #e5002d;
  overflow: hidden
}

.course-item-heading h3 {
  position: absolute;
  top: 22px;
  left: 26px;
  font-size: 19px;
  line-height: 1.47;
  letter-spacing: .05em
}

.course-item-heading h3 span {
  background-color: #fbe9e2
}

.course-item-heading picture {
  display: block;
  width: 131px;
  margin-left: auto
}

.course-item-figure {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center
}

.course-item-figure img {
  display: block;
  max-width: 294px
}

.course-item-figure img+img {
  margin-top: 25px
}

.course-item.item-2 {
  padding-bottom: 22px
}

.course-item.item-2 h3 {
  top: 8px
}

.course-item.item-2 .figure-2 img {
  width: 203px;
  margin-right: auto;
  margin-left: auto
}

.course-item.item-3 img+img {
  margin-top: 32px
}

.course-item hr {
  height: 5px;
  margin: 45px 0 36px;
  border: none;
  background: transparent url(../images/img-course-6.svg) left center/auto 100% no-repeat
}

.course-sub-item+hr {
  margin-top: 60px
}

.course-item h4 {
  color: #e5002d;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .05em;
  margin-bottom: 1.5rem;
}

.course-item h4+figure {
  margin-top: 25px
}

.case {
  padding: 44px 4vw 45px
}

.case>p {
  width: 89.33vw;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto
}

.case>p+p {
  margin-top: 30px
}

.case-heading {
  margin-bottom: 32px;
  color: #e5002d;
  font-size: 28px;
  line-height: 1.36;
  letter-spacing: -.02em;
  text-align: center
}

.case-heading-img {
  display: block;
  margin-bottom: 17px
}

.case-heading-img img {
  width: 56px
}

.case-item {
  position: relative;
  max-width: 1082px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  padding: 55px 6.66vw 49px;
  border-radius: 8px;
  border: 1px solid #e5002d;
  background-color: #fff
}

.case-item h3 {
  position: absolute;
  top: -17px;
  right: 0;
  left: 0;
  font-size: 22px;
  letter-spacing: .05em;
  text-align: center
}

.case-item h3 span {
  display: inline-block;
  padding: 1px 21px 6px;
  border-radius: 100em;
  background-color: #e5002d;
  color: #fff
}

.case-item h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 18px;
  letter-spacing: .058em
}

.case-item h4:before {
  content: "";
  width: 56px;
  height: 56px;
  background: transparent url(../images/img-case-2.svg) center top/100% auto no-repeat
}

.case-item h4:nth-of-type(2) {
  margin-top: 53px
}

.case-item h4:nth-of-type(2):before {
  background-image: url(../images/img-case-3.svg)
}

.case-item h4 span {
  flex: 0 0 56px;
  padding-left: 8px
}

.case-item-figure {
  margin-top: 20px;
  margin-bottom: 26px;
  text-align: center
}

.voice {
  position: relative;
  padding: 204px 5.33vw 89px;
  background-color: #fbe9e2
}

.voice:before {
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  left: 0;
  height: 164px;
  background: transparent url(../images/img-voice-1.svg) center top/auto 100% no-repeat
}

.voice .voice-student {
  margin-bottom: 27px;
  font-size: 28px;
  line-height: 1.36;
  letter-spacing: -.02em;
  color: #e5002d;
  text-align: center
}

.voice-item {
  position: relative;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  padding: 28px 4.53vw 36px;
  border-radius: 8px;
  border: 3px solid #e5002d;
  background-color: #fff;
  background: #fff url(../images/bg-voice.png) right 7px bottom 20px/151px auto no-repeat
}

.voice-item+.voice-item {
  margin-top: 30px
}

.voice-item.parent {
  padding-top: 38px;
  border-color: #717069
}

.voice-item.parent h3 {
  color: #717069
}

.voice-item .text-default+.text-default {
  margin-top: 25px
}

.voice-item .more {
  grid-column: 1/3
}

.voice-item .more[inert] {
  opacity: 0;
  height: 0;
  overflow: hidden
}

.voice-item .more .inner {
  padding-top: 25px
}

.voice-item-img {
  display: block;
  width: 108px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 17px
}

.voice-item h3 {
  color: #e5002d;
  font-size: 22px;
  letter-spacing: .05em
}

.voice-item h3+p {
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: .07em
}

.voice-link-wrap {
  margin-top: 24px;
  text-align: center
}

.voice-link-wrap button {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  transition: opacity .3s
}

.voice-link-wrap button:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  height: 100%;
  border-radius: 100em;
  border: 1px solid #717069;
  background-color: #fff;
  transition: border-color .3s
}

.voice-link-wrap button:focus-visible span {
  background-color: #e5002d
}

.voice-link-wrap button:focus-visible:before {
  border-color: #e5002d
}

.voice-link-wrap span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2px 39px 5px;
  background-color: #717069;
  border-radius: 100em;
  color: #fff;
  transition: background-color .3s
}

.voice-parent {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 15px 13px;
  margin-top: 88px;
  margin-bottom: 32px;
  text-align: center
}

.voice-parent:before, .voice-parent:after {
  content: "";
  grid-row: 1/2;
  width: 55px;
  height: 100px;
  background-repeat: no-repeat
}

.voice-parent:before {
  justify-self: end;
  background-image: url(../images/img-voice-4.svg);
  background-position: right bottom;
  background-size: 55px auto
}

.voice-parent:after {
  justify-self: start;
  background-image: url(../images/img-voice-5.svg);
  background-position: right bottom;
  background-size: 51px auto
}

.voice-parent span {
  grid-column: 1/3
}

.voice-parent .black {
  position: relative;
  padding-bottom: 5px;
  font-size: 19px;
  letter-spacing: -.02em
}

.voice-parent .black:before, .voice-parent .black:after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background-color: currentColor
}

.voice-parent .black:before {
  left: -16px;
  rotate: -41deg
}

.voice-parent .black:after {
  right: -16px;
  rotate: 41deg
}

.voice-parent .red {
  color: #e5002d;
  font-size: 28px;
  letter-spacing: -.02em
}

.cv {
  text-align: center
}

.cv-1 {
  padding-top: 85px
}

.cv p {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .07em
}

.cv p:before, .cv p:after {
  content: "";
  width: 2px;
  height: 28px;
  border-radius: 2px;
  background-color: currentColor
}

.cv p:before {
  left: -16px;
  rotate: -45deg
}

.cv p:after {
  right: -16px;
  rotate: 45deg
}

.cv p span {
  padding-bottom: 4px
}

.cv a {
  position: relative;
  margin-top: 40px;
  color: #fff;
  font-size: 30px;
  letter-spacing: .05em
}

.cv a:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100em;
  border: 2px solid #e5002d;
  background-color: #fbe9e2;
  transition: background-color .3s
}

.cv a:after {
  content: "";
  position: absolute;
  top: -25px;
  left: 20px;
  width: 105px;
  height: 100px;
  background: transparent url(../images/img-cv@2x.webp) center top/100% auto no-repeat
}

.cv a>span {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 27px 32px 56px;
  border-radius: 100em;
  border: 1px solid #e5002d;
  background-color: #e5002d;
  transition: background-color .3s
}

.cv a em {
  display: inline-block;
  padding: 0 8px;
  border-radius: 50em;
  background-color: #ff0;
  color: #e5002d;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .05em
}

.cv .arrow {
  position: absolute;
  bottom: 19px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 30px;
  height: 30px
}

.cv a .triangle {
  fill: #e5002d
}

.cv a:focus-visible {
  color: #e5002d
}

.cv a:focus-visible span {
  background-color: #fff
}

.cv a:focus-visible:before {
  background-color: #e5002d
}

.cv a:focus-visible .triangle {
  fill: #fff
}

.faq {
  padding-top: 100px;
  padding-bottom: 117px
}

.faq-heading {
  position: relative;
  width: 89.33vw;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
  aspect-ratio: 335/139;
  border-radius: 500px;
  overflow: hidden
}

.faq-heading h2 {
  position: absolute;
  z-index: 1;
  top: 35px;
  left: 25px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  color: #fff;
  font-size: 39px
}

.faq-heading span {
  font-size: 24px
}

.faq-heading picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.faq-heading img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.faq-item {
  width: 89.33vw;
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 14px;
  border-radius: 5px;
  border: 1px solid #e5002d;
  background-color: #fff
}

.faq-item+.faq-item {
  margin-top: 18px
}

.faq-item p+p {
  margin-top: 1lh
}

.faq-question {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-top: 12px;
  padding-bottom: 15px
}

.faq-question:before {
  content: "Q";
  color: #e5002d;
  font-size: 30px;
  font-weight: 700;
  line-height: 1
}

.faq-question:after {
  content: "open";
  flex: 0 0 33px;
  align-self: center;
  height: 25px;
  margin-left: auto;
  padding-left: 8px;
  background: transparent url(../images/icon-plus.svg) right center/auto 100% no-repeat;
  font-size: 0
}

.faq-item[open] .faq-question:after {
  background-image: url(../images/icon-minus.svg)
}

.faq-answer .inner {
  padding-top: 16px;
  padding-bottom: 20px;
  border-top: 1px solid #fbe9e2
}

.strength {
  position: relative;
  margin-top: 4rem;
}

.strength .bg {
  fill: #e5002d
}

.strength:before {
  content: "";
  position: absolute;
  top: 93px;
  right: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 375/642;
  background: transparent url(../images/bg-strength-sm.svg) center top/100% auto no-repeat
}

.strength-container {
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 106px 5.33vw 64px;
  background-color: #e5002d;
  color: #fff
}

.strength-container * {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto
}

.strength-heading {
  margin-bottom: 52px;
  font-size: 28px;
  line-height: 1.36;
  letter-spacing: -.02em;
  text-align: center
}

.strength-pict {
  display: block;
  margin-bottom: 70px;
  text-align: center
}

.strength p+p {
  margin-top: 41px
}

.strength-figure {
  margin-top: 37px;
  padding: 28px 19px 30px;
  border-radius: 6px;
  border: 1px solid currentColor
}

.strength-figure p+p {
  margin-top: 19px
}

.strength-figure .smaller {
  font-size: 15px;
  line-height: 1.53;
  letter-spacing: .07em
}

.cv-2 {
  padding-top: 40px
}

.event {
  padding-top: 122px;
  padding-bottom: 73px
}

.event h2 {
  position: relative;
  margin-bottom: -19px;
  font-size: 20px;
  letter-spacing: .05em;
  text-align: center
}

.event h2 span {
  display: inline-block;
  padding: 3px 17px 4px;
  border-radius: 30px;
  background-color: #272727;
  color: #fff
}

.event-list {
  width: 91.73vw;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  padding: 30px 25px 31px;
  border-radius: 8px;
  border: 1px solid #272727;
  background-color: #fff
}

.event-list li {
  position: relative;
  padding-top: 20px;
  padding-bottom: 17px;
  padding-right: 46px
}

.event-list li+li {
  border-top: 1px solid #e6e6e6
}

.event-list time {
  display: block;
  font-size: 16px;
  letter-spacing: .07em
}

.event-list a {
  margin-top: 10px;
  margin-bottom: 14px;
  color: #e5002d;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .07em
}

.event-list a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.event-list a:focus-visible {
  color: #272727;
  text-decoration: underline
}

.event-list a:focus-visible~.icon {
  color: #272727
}

.event-list p {
  color: #666;
  font-size: 14px;
  line-height: 1.64;
  letter-spacing: .07em
}

.event-list .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  margin-top: auto;
  margin-bottom: auto;
  color: #e5002d
}

.event-list .icon .triangle {
  fill: #fff
}

footer {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 34px 1em;
  padding-bottom: 105px;
  font-size: 14px;
  letter-spacing: .07em;
  text-align: center
}

footer a {
  grid-row: 1/2;
  padding-top: 1em;
  padding-bottom: 1em
}

footer p {
  grid-column: 1/3;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase
}

.cv-3 {
  position: fixed;
  z-index: 1;
  bottom: 12px;
  right: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s
}

.cv-3.show {
  opacity: 1
}

.cv-3 a {
  margin-top: 0;
  font-size: 18px;
  letter-spacing: .05em
}

.cv-3 a:before {
  top: 4px;
  left: 3px;
  border-width: 1px
}

.cv-3 a>span {
  flex-direction: row;
  justify-content: center;
  width: 298px;
  padding: 12px
}

.cv-3 a em {
  padding-right: 5px;
  padding-left: 5px;
  font-size: 16px;
  letter-spacing: .05em
}

.cv-3 .arrow {
  bottom: 18px;
  right: 10px;
  left: auto;
  width: 16px;
  height: 16px
}

@media (max-width: 959.9px) {
  html {
    scroll-padding-top: 0
  }
}

@media (max-width: 767.9px) {
  .hide-sm {
    display: none
  }

  .cv-3 a:after {
    content: none
  }
}

@media (min-width: 600px) and (max-width: 959.9px) {
  .reason-item.item-1 .figure-1 img {
    width: 327px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-1 .figure-2 img {
    width: 100%;
    max-width: 587px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-2 .figure-2 img {
    width: 400px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-3 .figure-1 img, .reason-item.item-3 .figure-2 img {
    width: 460px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-4 .reason-figure img {
    width: 400px;
    margin-right: auto;
    margin-left: auto
  }
}

@media (min-width: 600px) {
  .reason-item.item-5 .reason-figure img {
    width: 68.8vw;
    max-width: 693px;
    margin-right: auto;
    margin-left: auto
  }

  .strength:before {
    aspect-ratio: initial;
    height: 642px
  }
}

@media (min-width: 768px) {
  .hide-md {
    display: none
  }

  .text-default {
    font-size: 17px;
    line-height: 1.94;
    letter-spacing: .07em
  }

  .fv-logo {
    left: 30px;
    width: 145px;
    height: 42px
  }

  .fv-bg {
    aspect-ratio: unset;
    text-align: center;
    overflow-x: clip
  }

  .fv-bg img {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: min(1952px, 122vw);
    max-width: initial;
    height: auto;
    -o-object-fit: unset;
    object-fit: unset
  }

  .fv-inner {
    padding-top: 32px;
    padding-bottom: min(136px, 12.36vw)
  }

  .fv-pict img {
    width: min(266px, 24.3vw)
  }

  .fv-bg-gray-rounded {
    margin-bottom: 20px;
    padding-right: 51px;
    padding-left: 51px
  }

  .fv-bg-gray-rounded>span {
    display: inline-block;
    text-align: left
  }

  .fv-bg-gray-rounded:before {
    top: 6px;
    left: 6px
  }

  .fv-bg-red-rounded {
    width: 94%;
    max-width: 1096px;
    margin-top: 83px;
    padding-top: 122px;
    padding-bottom: 121px
  }

  .fv-bg-red-rounded:before {
    top: 10px;
    left: 16px
  }

  .fv-bg-red-text-1 {
    writing-mode: horizontal-tb;
    letter-spacing: .038em;
    text-align: center
  }

  .fv-bg-red-text-2 {
    margin-top: 6px
  }

  .fv-bg-red-text-3 {
    margin-top: 20px
  }

  .fv-bg-red-text-4 {
    margin-top: 28px
  }

  .fv-bg-red-img-1 {
    width: min(110px, 10vw)
  }

  .fv-bg-red-img-2 {
    top: -19px;
    left: 83px;
    width: min(115px, 10.5vw)
  }

  .fv-bg-red-img-3 {
    top: 11px;
    right: 66px;
    width: min(126px, 11.5vw)
  }

  .fv-bg-red-img-4 {
    bottom: 50px;
    left: 20px;
    width: min(140px, 12.8vw)
  }

  .fv-bg-red-img-5 {
    right: 4px;
    bottom: 20px;
    width: min(155px, 14.1vw)
  }

  .fv-img-bottom {
    bottom: max(-53px, -4.8vw);
    width: min(226px, 20.6vw);
    height: min(226px, 20.6vw)
  }

  .things {
    padding: 110px 2.6vw 88px;
    background-image: url(../images/bg-things-lg@2x.png);
    background-position: right bottom 40px;
    background-size: min(391px, 39.1vw) auto
  }

  .things-logo {
    width: 145px
  }

  .things-heading {
    max-width: 536px
  }

  .things-list {
    grid-template-columns: 1fr 1fr;
    gap: 75px 0;
    margin-top: 56px
  }

  .things-list li {
    max-width: initial;
    min-height: initial;
    aspect-ratio: 450/206;
    padding-left: 8.88%
  }

  .things-list li:before, .things-list li:after {
    width: 87.11%
  }

  .things-list li:before {
    top: 12px;
    left: calc(8.88% + 10px)
  }

  .things-list li:after {
    left: 8.88%
  }

  .things-list li:nth-of-type(2n) {
    padding-left: 7.55%
  }

  .things-list li:nth-of-type(2n):before {
    left: calc(7.55% + 10px)
  }

  .things-list li:nth-of-type(2n):after {
    left: 7.55%
  }

  .things-list li>div {
    width: 95.6%
  }

  .things-list li>div :before {
    top: max(-36px, -4vw);
    left: -3px;
    width: min(92px, 10.2vw);
    height: min(97px, 10.7vw)
  }

  .things-list li strong {
    font-size: clamp(20px, -9px + 3.79vw, 25px)
  }

  .things-list li:nth-of-type(1)>div {
    padding-top: 10.88%
  }

  .things-list li:nth-of-type(1) strong {
    margin-bottom: 17px
  }

  .things-list li:nth-of-type(2)>div {
    padding-top: 6.66%
  }

  .things-list li:nth-of-type(2) strong {
    margin-bottom: 16px
  }

  .things-list li:nth-of-type(3)>div {
    padding-top: 11.77%
  }

  .things-list li:nth-of-type(4)>div {
    padding-top: 6.66%
  }

  .things-list li:nth-of-type(4) strong {
    margin-bottom: 19px
  }

  .things-list li:nth-of-type(5)>div {
    padding-top: 6.22%
  }

  .things-list li:nth-of-type(5) strong {
    margin-bottom: 10px
  }

  .things-list li:nth-of-type(6)>div {
    padding-top: 12.44%
  }

  .things-list li:nth-of-type(6) strong {
    margin-bottom: 12px
  }

  .rate {
    padding-top: 87px;
    padding-bottom: 207px
  }

  .rate>p {
    max-width: 900px;
    font-size: 17px
  }

  .rate>p+p {
    margin-top: 31px
  }

  .rate-figure {
    max-width: 1300px;
    margin-top: 67px;
    margin-bottom: 63px;
    padding-top: 60px;
    padding-bottom: 66px
  }

  .rate-figure figcaption {
    margin-bottom: 6px;
    font-size: 40px;
    letter-spacing: -.02em
  }

  .rate-figure figcaption em {
    padding-bottom: 0
  }

  .rate-figure img {
    width: min(699px, 53.77vw)
  }

  .rate-figure .wrap {
    justify-content: space-between
  }

  .rate-figure .wrap p {
    text-align: left
  }

  .rate-figure small {
    font-size: 14px
  }

  .rate-figure .wrap p:nth-of-type(1) {
    margin-top: 2px
  }

  .rate-figure .wrap p:nth-of-type(1) small {
    font-size: 13px;
    letter-spacing: 0
  }

  .rate-img {
    height: 102px
  }

  .rate p.bottom {
    max-width: 840px
  }

  .reason {
    display: grid;
    grid-template-columns: 1fr auto 42.25%;
    gap: 0 4.375%;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 64px
  }

  .reason :where(h2, p) {
    grid-column: 2/3;
    width: 100%;
    max-width: 594px
  }

  .reason>p {
    padding-right: 0;
    padding-left: 0
  }

  .reason p+p {
    margin-top: 21px
  }

  .reason-heading {
    grid-column: 2/4;
    grid-row: 1/2;
    margin-bottom: 48px;
    font-size: 46px;
    line-height: 1.37;
    letter-spacing: -.02em;
    text-align: left
  }

  .reason-heading span {
    padding-bottom: 0;
    background-image: linear-gradient(to top, #ffff00 0%, #ffff00 16px, transparent 16px, transparent 100%)
  }

  .reason-img {
    grid-column: 3/4;
    grid-row: span 3;
    align-self: self-start;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-bottom: min(116px, 7.25vw)
  }

  .reason-img:before {
    left: min(370px, 23.125vw);
    width: min(520px, 48.14vw);
    border-radius: 6px
  }

  .reason-img img {
    width: min(520px, 48.14vw);
    border-radius: 210px 6px 6px 210px
  }

  .reason-item-wrap {
    overflow-x: clip;
    position: relative
  }

  .reason-item-wrap:before, .reason-item-wrap:after {
    content: "";
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: 1838px;
    height: 418px;
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat
  }

  .reason-item-wrap.wrap-1:before {
    top: -63px;
    background-image: url(../images/bg-3-1.svg)
  }

  .reason-item-wrap.wrap-1:after {
    bottom: -6px;
    background-image: url(../images/bg-3-2.svg)
  }

  .reason-item-wrap.wrap-2:before {
    top: 236px;
    background-image: url(../images/bg-3-1.svg)
  }

  .reason-item-wrap.wrap-3:before {
    top: -60px;
    background-image: url(../images/bg-3-2.svg)
  }

  .reason-item-wrap.wrap-3:after {
    bottom: -4px;
    background-image: url(../images/bg-3-1.svg)
  }

  .reason-item-wrap.wrap-4:after {
    top: 229px;
    background-image: url(../images/bg-3-2.svg)
  }

  .reason-item-wrap.wrap-5:before {
    top: 178px;
    background-image: url(../images/bg-3-1.svg)
  }

  .reason-item-wrap+.reason-item-wrap {
    margin-top: 68px
  }

  .reason-item {
    padding-right: min(90px, 8.33vw);
    padding-left: min(90px, 8.33vw);
    padding-bottom: 65px
  }

  .reason-item p+p {
    margin-top: 31px
  }

  .reason-item .heading-wrap h3 {
    padding: 12px 51px;
    border-radius: 0 0 50px 50px;
    font-size: 18px;
    letter-spacing: .05em
  }

  .reason-item .heading-wrap h3 span {
    font-size: 28px;
    letter-spacing: .05em;
    font-feature-settings: normal
  }

  .reason-lead:before {
    height: 59px
  }

  .reason-lead strong {
    font-size: 32px;
    letter-spacing: .05em
  }

  .match-container {
    padding-top: 45px;
    padding-bottom: 90px
  }

  .match h2 {
    margin-bottom: 45px;
    font-size: 46px;
    letter-spacing: -.02em
  }

  .match .heading-img {
    width: 312px
  }

  .match p {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto
  }

  .match p+p {
    margin-top: 34px
  }

  .match p.bold {
    margin-top: 66px;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: .05em
  }

  .match .bold span {
    margin-top: 0;
    margin-bottom: 0
  }

  .match .bold em {
    background-image: linear-gradient(to top, #ffff00 0%, #ffff00 14px, transparent 14px, transparent 100%)
  }

  .roadmap {
    padding-top: 20px
  }

  .roadmap-heading-img {
    padding-right: 4.8%
  }

  .roadmap-heading-img img {
    width: 331px
  }

  .roadmap h2 {
    margin-bottom: 41px;
    font-size: 46px;
    line-height: 1.37;
    letter-spacing: -.02em
  }

  .roadmap h2+p {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto
  }

  .roadmap h3 {
    margin-top: 47px;
    padding-left: 4%
  }

  .roadmap h3 img {
    width: 190px
  }

  .roadmap-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr min(38.14vw, 412px);
    gap: 0 5.55%;
    align-items: start;
    max-width: 1080px;
    margin-top: 89px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 100px;
    padding-bottom: 69px
  }

  .roadmap-item:nth-of-type(4) {
    padding-top: 200px
  }

  .roadmap-item>p {
    grid-column: 1/2;
    margin-right: 0;
    margin-left: 0;
    padding-left: 5vw
  }

  .roadmap-item>p+p {
    margin-top: 26px
  }

  .roadmap-item>p:not([class]) {
    padding-left: min(90px, 7.4vw)
  }

  .roadmap-item>figure {
    grid-column: 2/3;
    grid-row: 2/6;
    margin-bottom: 0
  }

  .roadmap-item>figure img {
    width: min(412px, 38.14vw);
    border-radius: 210px 0 0 210px
  }

  .roadmap-item>figure:before {
    top: 18px;
    width: min(412px, 38.14vw);
    border-radius: 210px 0 0 210px
  }

  .roadmap-item-head {
    position: absolute;
    top: -70px;
    right: 0;
    left: 0;
    max-width: 707px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding-top: 14px;
    padding-bottom: 26px;
    border-radius: 100em
  }

  .roadmap-item-head p {
    font-size: 30px;
    letter-spacing: .05em
  }

  .roadmap-item-head ul {
    gap: 16px;
    margin-top: 10px
  }

  .roadmap-item-head li {
    min-width: 167px;
    font-size: 18px;
    letter-spacing: .05em
  }

  .item-4 .roadmap-item-head-wrap {
    margin-top: 0
  }

  .roadmap-item-head-wrap {
    position: absolute;
    top: -82px;
    right: 0;
    left: 0;
    gap: 0;
    max-width: 855px;
    margin: 0 auto;
    padding-top: 14px;
    padding-bottom: 26px;
    border-radius: 100em
  }

  .roadmap-item-head-wrap .roadmap-item-head {
    position: static;
    flex-basis: 303px;
    margin-right: -13px;
    margin-left: -13px
  }

  .roadmap-item-head-wrap .roadmap-item-head:nth-of-type(3) {
    margin-top: -13px
  }

  .roadmap-lead {
    grid-column: span 2 !important
  }

  .roadmap-lead:before {
    height: 59px
  }

  .roadmap-lead strong {
    font-size: 32px;
    letter-spacing: .05em
  }

  .course-container {
    padding-top: 35px;
    padding-bottom: 86px
  }

  .course h2 {
    margin-bottom: 57px;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -.02em
  }

  .course h2 span {
    font-size: 46px;
    letter-spacing: -.02em
  }

  .course-target {
    gap: 32px;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 64px
  }

  .course-target:before {
    bottom: 180px;
    left: 14.7%;
    width: 100px;
    height: 107px
  }

  .course-target:after {
    bottom: 207px;
    right: 14.8%;
    width: 105px;
    height: 72px
  }

  .course-target li {
    border-radius: 73px;
    flex-basis: 229px
  }

  .course-target p {
    padding-top: 35px;
    padding-bottom: 56px;
    font-size: 22px;
    letter-spacing: .07em
  }

  .course-item {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    padding: 167px min(90px, 8.33vw) 67px;
    background: #fff url(../images/bg-1.png) left top/16px repeat
  }

  .course-item:nth-of-type(1) {
    margin-top: 258px
  }
  .course-item.item-1 {
    margin-top: 158px
  }

  .course-item+.course-item {
    margin-top: 141px
  }

  .course-item.item-4 {
    padding-bottom: 69px
  }

  .course-item-heading {
    top: -90px;
    width: min(980px, 90.7%);
    height: 209px
  }

  .course-item-heading h3 {
    top: 53px;
    left: 45px;
    font-size: 32px;
    line-height: 1.31;
    letter-spacing: .05em
  }

  .course-item-heading picture {
    width: 282px;
    height: 100%
  }

  .course-item-heading picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .course-item-figure img {
    max-width: 100%
  }

  .course-item-figure img+img {
    margin-top: 0
  }

  .course-item.item-2 {
    padding-bottom: 75px
  }

  .course-item.item-2 h3 {
    top: 53px
  }

  .course-item.item-4 h3 {
    top: 76px
  }

  .course-item h4 {
    margin-bottom: 24px;
    font-size: 28px;
    letter-spacing: .05em
  }

  .course-item p+p {
    margin-top: 24px
  }

  .course-item .flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5.33%
  }

  .course-item.item-1 .flex {
    margin-bottom: 37px
  }

  .course-item.item-1 .flex figure {
    flex: 0 0 44.66%;
    margin-top: 0;
    margin-bottom: 0
  }

  .course-item.item-2 figure.flex {
    margin-bottom: 51px
  }

  .course-item.item-2 .figure-2 {
    flex: 0 0 45.11%;
    margin-top: 5px;
    margin-bottom: 0
  }

  .course-item.item-2 .figure-2 img {
    width: 265px;
    max-width: 100%;
    margin-left: 0
  }

  .course-item.item-3 img+img {
    margin-top: 0
  }

  .course-sub-item {
    margin-top: 32px;
    padding: 37px min(40px, 3.7vw) 26px;
    border-radius: 8px;
    border: 1px solid #e5002d;
    background-color: #fff
  }

  .course-sub-item:nth-of-type(3) {
    margin-top: 50px
  }

  .course-item.item-2 figure.flex img, .course-item.item-3 figure.flex img {
    width: 47%
  }

  .course-item.item-4 {
    padding-right: min(50px, 4.63vw);
    padding-left: min(50px, 4.63vw)
  }

  .course-item.item-4 .figure-1 {
    margin-top: 50px;
    text-align: center
  }

  .case {
    padding-top: 67px;
    padding-bottom: 98px
  }

  .case>p+p {
    margin-top: 24px
  }

  .case-heading {
    margin-bottom: 44px;
    font-size: 46px;
    line-height: 1.3;
    letter-spacing: -.02em
  }

  .case-heading-img {
    margin-bottom: 15px
  }

  .case-heading-img img {
    width: 80px
  }

  .case-item {
    margin-top: 82px;
    padding: 47px min(90px, 8.33vw) 84px
  }

  .case-item h4 {
    justify-content: flex-start;
    margin-left: -7px;
    margin-bottom: 26px;
    font-size: 30px;
    letter-spacing: .058em
  }

  .case-item h4:before {
    width: 80px;
    height: 80px
  }

  .case-item h4:nth-of-type(2) {
    margin-top: 40px
  }

  .case-item h4 span {
    flex-basis: auto;
    padding-left: 15px
  }

  .case-item-figure {
    margin-top: 24px;
    margin-bottom: 20px
  }

  .voice {
    padding-top: 170px;
    padding-bottom: 145px
  }

  .voice:before {
    top: 82px;
    max-width: 860px;
    height: 353px;
    margin-right: auto;
    margin-left: auto;
    background-position: left top
  }

  .voice .voice-student {
    margin-bottom: 40px;
    font-size: 46px;
    line-height: 1.3;
    letter-spacing: -.02em
  }

  .voice-item {
    display: grid;
    gap: 0 27px;
    padding: 40px min(85px, 7.87vw) 45px;
    border-width: 5px;
    background-position: right 11px bottom 11px;
    background-size: 216px auto
  }

  .voice-item+.voice-item {
    margin-top: 41px
  }

  .voice-item :where(h3, p) {
    grid-column: 2/3
  }

  .voice-item.parent :where(h3, p, div) {
    grid-column: 1/2
  }

  .voice-item .text-default+.text-default {
    margin-top: 32px
  }

  .voice-item .more .inner {
    padding-top: 32px
  }

  .voice-item-img {
    grid-column: 1/2;
    grid-row: span 5;
    width: 155px;
    margin-top: 5px;
    margin-bottom: 0
  }

  .voice-item h3 {
    font-size: 30px;
    letter-spacing: .058em
  }

  .voice-item h3+p {
    font-size: 15px;
    letter-spacing: .07em
  }

  .voice-link-wrap {
    grid-column: 1/3
  }

  .voice-parent {
    gap: 25px 41px;
    max-width: 530px;
    margin: 124px auto 20px
  }

  .voice-parent:before, .voice-parent:after {
    grid-row: 1/4;
    width: 79px;
    height: 144px
  }

  .voice-parent:before {
    grid-column: 1/2;
    background-size: 79px auto
  }

  .voice-parent:after {
    grid-column: 3/4;
    background-size: 73px auto
  }

  .voice-parent span {
    grid-column: 2/3
  }

  .voice-parent .black {
    grid-row: 2/3
  }

  .voice-parent .red {
    grid-row: 3/4;
    padding-bottom: 13px;
    font-size: 46px;
    letter-spacing: -.02em
  }

  .voice-logo {
    display: block;
    width: 145px;
    height: 42px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 14px
  }

  .cv-1 {
    padding-top: 100px
  }

  .cv p {
    gap: 25px
  }

  .cv p span {
    padding-bottom: 8px
  }

  .cv a {
    width: 90%;
    max-width: 800px;
    margin-top: 23px;
    margin-right: auto;
    margin-left: auto;
    font-size: 34px;
    letter-spacing: .05em
  }

  .cv a:before {
    left: 8px
  }

  .cv a:after {
    width: 115px;
    height: 104px
  }

  .cv a>span {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding: 46px 50px 43px
  }

  .cv a em {
    padding: 3px 11px 5px;
    font-size: 29px;
    line-height: 1;
    letter-spacing: .05em
  }

  .cv .arrow {
    top: 0;
    bottom: 0;
    right: 27px;
    left: auto;
    margin: auto 0;
    width: 44px;
    height: 44px
  }

  .faq {
    padding-top: 141px;
    padding-bottom: 130px
  }

  .faq-heading {
    aspect-ratio: initial;
    height: 400px;
    margin-bottom: 70px
  }

  .faq-heading h2 {
    top: 149px;
    left: 104px;
    gap: 8px;
    font-size: 65px
  }

  .faq-heading span {
    font-size: 40px
  }

  .faq-item {
    padding-right: 28px;
    padding-left: 32px
  }

  .faq-item+.faq-item {
    margin-top: 35px
  }

  .faq-question {
    gap: 25px;
    padding-top: 23px;
    padding-bottom: 27px
  }

  .faq-answer .inner {
    padding: 32px 10px 45px 48px
  }

  .strength p+p {
    margin-top: 36px
  }

  .strength-figure {
    margin-top: 56px;
    padding: 29px 40px 27px
  }

  .strength-figure p {
    line-height: 1.53
  }

  .strength-figure p+p {
    margin-top: 22px
  }

  .strength-figure .smaller {
    line-height: 1.86
  }

  .cv-2 {
    padding-top: 36px
  }

  .event {
    padding-top: 215px;
    padding-bottom: 193px
  }

  .event h2 {
    font-size: 22px;
    letter-spacing: .05em
  }

  .event h2 span {
    padding-right: 22px;
    padding-left: 22px
  }

  .event-list {
    padding: 22px min(4.53vw, 49px)
  }

  .event-list li {
    display: grid;
    grid-template-columns: 25.44% 1fr;
    padding: 26px 65px 39px 11px
  }

  .event-list time {
    grid-column: 1/2;
    grid-row: span 4;
    align-self: center
  }

  .event-list a {
    grid-column: 2/3;
    margin-top: 0;
    font-size: 20px
  }

  .event-list .icon {
    right: 16px;
    width: 30px;
    height: 30px
  }

  footer {
    row-gap: 23px;
    padding-bottom: 200px
  }

  footer p {
    font-size: 14px;
    letter-spacing: .07em
  }

  .cv-3 {
    bottom: 18px
  }

  .cv-3 a {
    max-width: 700px
  }

  .cv-3 a:before {
    top: 6px;
    left: 7px;
    border-width: 2px
  }

  .cv-3 a:after {
    width: 114px !important;
    height: 110px !important
  }

  .cv-3 a>span {
    padding-top: 13px;
    padding-bottom: 16px
  }
}

@media (min-width: 960px) {
  :root {
    --padding-base-horizontal: min(72px, 5.1vw)
  }

  .hide-lg {
    display: none
  }

  .fv-heading {
    font-size: 28px
  }

  .fv-lead-text {
    margin-top: 50px;
    font-size: 23px
  }

  .fv-bg-gray-rounded>span {
    font-size: 20px
  }

  .fv-bg-red-text-1 {
    font-size: 40px
  }

  .fv-bg-red-text-2 {
    font-size: 28px
  }

  .fv-bg-red-text-3 {
    font-size: 58px;
    letter-spacing: .01em
  }

  .fv-bg-red-text-3 strong {
    text-decoration-thickness: 6px;
    text-underline-offset: 16px
  }

  .fv-bg-red-text-4 {
    font-size: 45px;
    letter-spacing: .006em
  }

  .reason-heading {
    grid-column: 2/3;
    margin-top: 19px
  }

  .reason-img {
    grid-row: span 4
  }

  .reason-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 35px;
    margin-bottom: 34px
  }

  .reason-lead:before {
    flex: 0 0 62px;
    margin-bottom: 0
  }

  .reason-item.item-1 .figure-2 {
    margin-top: 19px;
    margin-bottom: 32px
  }

  .reason-item.item-2 .figure-1 {
    margin-top: 23px;
    margin-bottom: 45px
  }

  .reason-item.item-5 .reason-figure {
    margin-top: 40px
  }

  .reason-item .column {
    display: flex;
    justify-content: space-between
  }

  .reason-item .column .reason-figure {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0
  }

  .reason-item.item-1 .column {
    gap: 5.6%;
    margin-bottom: 20px;
    padding-right: .8%
  }

  .reason-item.item-1 .column .reason-figure {
    flex-basis: 36.65%
  }

  .reason-item.item-1 .figure-2 img {
    width: 54.3vw;
    max-width: 587px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-2 .figure-1 img {
    width: 68.8vw;
    max-width: 743px;
    margin-right: auto;
    margin-left: auto
  }

  .reason-item.item-2 .column {
    flex-direction: row-reverse;
    gap: 7.1%
  }

  .reason-item.item-2 .column .reason-figure {
    flex-basis: 44.44%;
    margin-top: 10px
  }

  .reason-item.item-3 {
    padding-bottom: 31px
  }

  .reason-item.item-3 .column {
    gap: 4.87%;
    margin-bottom: 29px;
    padding-right: 2%
  }

  .reason-item.item-3 .column .reason-figure {
    flex-basis: 52.15%
  }

  .reason-item.item-3 .column .figure-1 {
    margin-top: 7px
  }

  .reason-item.item-3 .column.column-2 {
    flex-direction: row-reverse;
    margin-top: 35px
  }

  .reason-item.item-3 .column .figure-2 {
    margin-top: 8px
  }

  .reason-item.item-4 {
    padding-bottom: 94px
  }

  .reason-item.item-4 .column {
    flex-direction: row-reverse;
    gap: 5%;
    margin-top: 40px;
    padding-right: 1%
  }

  .reason-item.item-4 .column .reason-figure {
    flex-basis: 44.9%;
    margin-top: 9px
  }

  .roadmap-item {
    padding-left: min(90px, 7.4vw)
  }

  .roadmap-item:nth-of-type(4) {
    padding-top: 100px
  }

  .roadmap-item>p {
    padding-left: 0
  }

  .roadmap-item>p:not([class]) {
    padding-left: 0
  }

  .roadmap-item-head-wrap {
    flex-wrap: nowrap
  }

  .roadmap-item-head-wrap .roadmap-item-head:nth-of-type(3) {
    margin-top: 0
  }

  .roadmap-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 34px;
    padding-right: min(90px, 7.4vw)
  }

  .roadmap-lead:before {
    flex: 0 0 62px;
    margin-bottom: 0
  }

  .course-item.item-2 figure.flex, .course-item.item-3 figure.flex {
    padding-right: min(30px, 2.78vw);
    padding-left: min(30px, 2.78vw)
  }

  .course-item.item-2 .figure-2 {
    padding-left: 4.44%
  }

  .cv a:after {
    top: -31px;
    left: 31px;
    width: 164px;
    height: 149px
  }

  .strength:before {
    top: 8.87vw;
    height: 440px;
    background-image: url(../images/bg-strength-lg.svg);
    background-size: auto 100%
  }

  .strength-container {
    padding-top: 0;
    padding-bottom: 121px
  }

  .strength-heading {
    /* margin-top: min(142px, 15.78vw); */
    margin-top: min(90px, 15.78vw);
    margin-bottom: 0;
    font-size: 46px;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-align: left;
    white-space: nowrap
  }

  .strength-pict {
    margin-bottom: 0
  }

  .strength-heading-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7.77%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 46px;
    padding-right: min(24px, 2.6vw)
  }
}

@media (any-hover: hover) {
  .voice-link-wrap button:hover span {
    background-color: #e5002d
  }

  .voice-link-wrap button:hover:before {
    border-color: #e5002d
  }

  .cv a:hover {
    color: #e5002d
  }

  .cv a:hover span {
    background-color: #fff
  }

  .cv a:hover:before {
    background-color: #e5002d
  }

  .cv a:hover .triangle {
    fill: #fff
  }

  .event-list a:hover {
    color: #272727;
    text-decoration: underline
  }

  .event-list a:hover~.icon {
    color: #272727
  }
}