@charset "UTF-8";

/* modal
--------------------------------------------------*/

.modal {
  position: fixed;
  z-index: 100;
  top: 30rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #fff;
  max-width: 340rem;
  width: 100%;
  transition-property: visibility, opacity;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  visibility: visible;
  opacity: 1;
}

.modal:not(.is-open) {
  visibility: collapse;
  opacity: 0;
}

.modal__box {
  position: relative;
  padding: 33rem 25rem 45rem;
}

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50rem;
  height: 50rem;
}

.modal__info {
  margin-top: 16rem;
}

.modal__title {
  font-size: 24rem;
  text-align: center;
  font-weight: bold;
}

.modal__img {
  max-width: 166rem;
  margin-left: auto;
  margin-right: auto;
}

.modal__text-content {
  margin-top: 14rem;
}

.modal__name {
  font-size: 20rem;
  font-weight: bold;
  text-align: center;
}

.modal__text {
  margin-top: 15rem;
  font-weight: bold;
  line-height: 1.625;
}

/* company
--------------------------------------------------*/

.company {
  padding-top: 63rem;
}

.company__content {
  margin-top: 23rem;
}

.company__text-content {
  margin-top: 41rem;
  letter-spacing: 0;
}

.company__name {
  font-size: 20rem;
  font-weight: bold;
  padding: 0 20rem;
}

.company__address {
  margin-top: 10rem;
  padding: 0 20rem;
}

.company__access {
  padding: 0 20rem;
}

.company__link-wrapper {
  margin-top: 25rem;
}

.company__link {
  background-color: #398C39;
}

.company__link img {
  margin-left: 13rem;
}

.company__map {
  margin-top: 61rem;
  height: 58.354756vw;
}

/* course
--------------------------------------------------*/

.course {
  background-color: #F1FEE6;
  padding-top: 48rem;
  padding-bottom: 88rem;
}

.course__lead {
  font-size: 16rem;
  font-weight: bold;
  margin-top: 16rem;
}

.course__list {
  margin-top: 34rem;
}

.course__item {
  border-radius: 15rem;
  color: #fff;
  padding: 21rem 0 15rem;
  -webkit-filter: drop-shadow(0 3rem 6rem rgba(0, 0, 0, 0.16));
  filter: drop-shadow(0 3rem 6rem rgba(0, 0, 0, 0.16));
}

.course__item._expert {
  background-color: #348FD5;
}

.course__item._expert .course-card__price-block {
  color: #206DA8;
}

.course__item._standard {
  background-color: #398C39;
}

.course__item._standard .course-card__price-block {
  color: #398C39;
}

.course__item._diy {
  background-color: #F59B00;
}

.course__item._diy .course-card__info-block {
  padding-bottom: 20rem;
}

.course__item._diy .course-card__time {
  margin-bottom: 2rem;
}

.course__item._diy .course-card__price {
  display: flex;
  justify-content: space-between;
}

.course__item._diy .course-card__price-block {
  color: #F59B00;
  padding: 0;
}

.course__item._diy .course-card__price-inner {
  line-height: 1;
}

.course__item._diy .course-card__tax {
  padding-right: 2rem;
}

.course-card {
  height: 100%;
}

.course-card__heading-block {
  padding: 0 15rem;
}

.course-card__heading {
  font-size: 16rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.625;
  padding: 0 30rem;
  position: relative;
}

.course-card__heading::before,
.course-card__heading::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45rem;
  height: 1rem;
  background-color: #fff;
}

.course-card__heading::before {
  left: -6rem;
  -webkit-transform: rotate(-108deg);
  transform: rotate(-108deg);
}

.course-card__heading::after {
  right: -6rem;
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
}

.course-card__course {
  font-size: 28rem;
  font-weight: bold;
  margin-top: 9rem;
  text-align: center;
}

.course-card__info-block {
  padding: 0 15rem;
  margin-top: 15rem;
  background-color: #fff;
  border-radius: 13rem;
  padding: 16rem 17rem 15rem;
  color: #333333;
  width: calc(100% - 30rem);
  margin-left: auto;
  margin-right: auto;
}

.course-card__img-block {
  margin-top: 11rem;
}

.course-card__num-people {
  display: flex;
  align-items: center;
}

.course-card__icon {
  margin-right: 6rem;
  display: flex;
  align-items: center;
}

.course-card__info {
  font-weight: bold;
  font-size: 14rem;
}

.course-card__time {
  display: flex;
  align-items: flex-start;
  padding-bottom: 10rem;
  margin-bottom: 14rem;
  border-bottom: 1rem solid #ABABAB;
  line-height: 1.7;
}

.course-card__time .course-card__icon {
  padding-top: 4rem;
}

.course-card__price-block {
  padding-left: 46rem;
  font-size: 29rem;
  font-weight: bold;
}

.course-card__price-block + .course-card__price-block {
  position: relative;
}

.course-card__price-block + .course-card__price-block::before {
  content: "";
  display: block;
  position: absolute;
  width: 32rem;
  height: 1rem;
  background-color: #ABABAB;
  top: 71%;
  left: -27rem;
  -webkit-transform: translateY(-50%) rotate(106deg);
  transform: translateY(-50%) rotate(106deg);
}

.course-card__label,
.course-card__tax {
  font-size: 14rem;
  display: inline-block;
  padding-right: 6rem;
  color: #333;
}

.course-card__label {
  display: block;
  padding-left: 2em;
}

.course-card__label._no-padding {
  padding-left: 0;
}

.course-card__price-inner {
  display: flex;
  white-space: nowrap;
  align-items: flex-end;
}

.course-card__price-inner .course-card__tax {
  padding-bottom: 5rem;
}

.course__btn-wrapper {
  margin-top: 49rem;
  display: flex;
  justify-content: center;
}

.course__btn {
  background-color: #398C39;
  -webkit-filter: drop-shadow(0 9rem 0 #276B27);
  filter: drop-shadow(0 9rem 0 #276B27);
}

/* features
--------------------------------------------------*/

.features {
  position: relative;
  padding: 40rem 0 71rem;
}

.features .section-heading-img {
  width: 24rem;
}

.features__bg {
  position: absolute;
  max-width: 199rem;
  top: -73rem;
  z-index: -1;
}

.features__heading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features__content {
  position: relative;
}

.features__img-content {
  border-radius: 10rem;
  position: relative;
  max-width: 341rem;
  z-index: 1;
  margin-top: 32rem;
  -webkit-transform: translateX(-11rem);
  transform: translateX(-11rem);
}

.features__img-content picture {
  position: relative;
  z-index: 1;
}

.features__img-content img {
  display: block;
  border-radius: 10rem;
}

.features__img-content::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10rem;
  background-color: #AFE57F;
  top: 0;
  left: 0;
  -webkit-transform: translate(20rem, 20rem);
  transform: translate(20rem, 20rem);
  z-index: -1;
}

.features__text-content {
  margin-top: 39rem;
}

.features__sub-heading {
  font-size: 26rem;
  line-height: 1.4230769231;
  font-weight: bold;
}

.features__text {
  margin-top: 18rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.features__list {
  margin-top: 28rem;
  padding: 0 5rem;
}

.features__item {
  -webkit-filter: drop-shadow(0 3rem 10rem rgba(0, 0, 0, 0.16));
  filter: drop-shadow(0 3rem 10rem rgba(0, 0, 0, 0.16));
  background-color: #fff;
  border-radius: 10rem;
  padding: 24rem 19rem 30rem;
}

.features__item-heading {
  color: #398C39;
  text-align: center;
  font-size: 20rem;
  font-weight: bold;
}

.features__item-icon {
  margin-top: 26rem;
  display: flex;
  justify-content: center;
}

.features__item-text {
  margin-top: 20rem;
  line-height: 1.5;
}

.features__item-link-wrapper {
  text-align: right;
  margin-top: 34rem;
}

.features__item-link {
  font-size: 18rem;
  font-weight: bold;
}

/* flow
--------------------------------------------------*/

.flow {
  padding-top: 67rem;
  padding-bottom: 57rem;
  background-color: #fff;
  background-size: 20px 20px;
  background-image: radial-gradient(#ccc 1%, transparent 10%);
}

.flow__step-heading {
  margin-top: 23rem;
  text-align: center;
  font-size: 20rem;
  font-weight: bold;
  position: relative;
  max-width: 298rem;
  margin-left: auto;
  margin-right: auto;
}

.flow__step-heading::before,
.flow__step-heading::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rem;
  height: 1rem;
  background-color: #AFE57F;
}

.flow__step-heading::before {
  left: 0;
  -webkit-transform: rotate(-110deg);
  transform: rotate(-110deg);
}

.flow__step-heading::after {
  right: 0;
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.flow__step-heading .cr-2 {
  font-size: 34rem;
}

.flow__step-heading-inner {
  position: relative;
  letter-spacing: 0.1em;
}

.flow__step-heading-inner::before,
.flow__step-heading-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rem;
  height: 1rem;
  background-color: #AFE57F;
}

.flow__step-heading-inner::before {
  left: 10rem;
  -webkit-transform: rotate(-110deg);
  transform: rotate(-110deg);
}

.flow__step-heading-inner::after {
  right: 10rem;
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg);
}

.flow__list {
  margin-top: 54rem;
}

.flow__item + .flow__item {
  margin-top: 60rem;
  position: relative;
}

.flow__item + .flow__item::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 24rem solid transparent;
  border-left: 24rem solid transparent;
  border-top: 20rem solid #f59b00;
  border-bottom: 0;
  position: absolute;
  top: -35rem;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.flow-card {
  position: relative;
}

.flow-card__step-circle {
  padding-bottom: 7rem;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  width: 68rem;
  height: 68rem;
  background-color: #F59B00;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  flex-direction: column;
  z-index: 1;
}

.flow-card__step {
  color: #FFCF06;
  font-size: 12rem;
  line-height: 1;
}

.flow-card__step-no {
  font-size: 33rem;
  line-height: 1;
}

.flow-card__box {
  -webkit-filter: drop-shadow(8rem 8rem 0 #AFE57F);
  filter: drop-shadow(8rem 8rem 0 #AFE57F);
  background-color: #F1FEE6;
  padding: 40rem 32rem 24rem;
  border-radius: 15rem;
}

.flow-card__img {
  max-width: 300rem;
}

.flow-card__text-content {
  margin-top: 7rem;
}

.flow-card__title {
  font-size: 20rem;
  font-weight: bold;
}

.flow-card__text {
  font-size: 16rem;
}

.flow__complete {
  margin-top: 28rem;
  text-align: center;
}

.flow__complete-text {
  font-weight: bold;
  font-size: 20rem;
  display: inline-block;
  padding: 0 16rem;
  background: linear-gradient(transparent 70%, #FFCF06 70%);
}

/* key-visual
--------------------------------------------------*/

.key-visual {
  position: relative;
}

.key-visual__img img {
  -o-object-fit: cover;
  object-fit: cover;
}

.key-visual__title {
  font-weight: bold;
  position: absolute;
  font-size: 32rem;
  left: 0;
}

.key-visual__text {
  background-color: #fff;
  padding-left: 25rem;
  padding-right: 13rem;
  border-radius: 0 10rem 10rem 0;
  display: inline-block;
}

/* news
--------------------------------------------------*/

.news {
  padding-top: 54rem;
  padding-bottom: 70rem;
}

.news__list {
  margin-top: 12rem;
  height: 210rem;
  overflow-y: scroll;
  padding: 0 20rem;
}

.news-card {
  padding-top: 6rem;
  padding-bottom: 11rem;
  border-bottom: 1rem solid #EBEBEB;
  display: inline-block;
}

a.news-card .news-card__title {
  text-decoration: underline;
}

/* recommendation
--------------------------------------------------*/

.recommendation {
  padding-bottom: 66rem;
}

.recommendation__heading {
  color: #398C39;
  font-size: 24rem;
  font-weight: bold;
  text-align: center;
}

.recommendation__heading-inner {
  display: inline-block;
  padding: 0 70rem;
  position: relative;
  line-height: 1.3;
}

.recommendation__heading-inner::before,
.recommendation__heading-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 43rem;
  height: 2rem;
  background-color: #398C39;
}

.recommendation__heading-inner::before {
  left: 0;
  -webkit-transform: rotate(-114deg);
  transform: rotate(-114deg);
}

.recommendation__heading-inner::after {
  right: 0;
  -webkit-transform: rotate(114deg);
  transform: rotate(114deg);
}

.recommendation__list {
  margin-top: 19rem;
}

.recommendation__item {
  -webkit-filter: drop-shadow(0 3rem 10rem rgba(0, 0, 0, 0.16));
  filter: drop-shadow(0 3rem 10rem rgba(0, 0, 0, 0.16));
  background-color: #fff;
  border-radius: 25rem;
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 22rem;
  font-weight: bold;
  line-height: 1.3636363636;
  padding: 11rem 0;
  padding-left: 66rem;
}

.recommendation__item-inner {
  display: inline-block;
  text-align: left;
}

/* voice
--------------------------------------------------*/

.voice {
  background-color: #F1FEE6;
  padding-top: 48rem;
}

.voice .swiper-button-next,
.voice .swiper-button-prev {
  width: 46rem;
  height: 46rem;
  top: 48%;
}

.voice .swiper-button-next::after,
.voice .swiper-button-prev::after {
  display: none;
}

.voice__container {
  position: relative;
}

.voice__slider {
  padding-top: 72rem;
  padding-bottom: 94rem;
}

.voice-card {
  background-color: #fff;
  border-radius: 10rem;
  -webkit-filter: drop-shadow(0 0 10rem rgba(0, 0, 0, 0.16));
  filter: drop-shadow(0 0 10rem rgba(0, 0, 0, 0.16));
  position: relative;
  padding-top: 61rem;
  padding: 60rem 30rem 40rem;
}

.voice-card__img {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 88rem;
  height: 88rem;
  -webkit-filter: drop-shadow(0 0 10rem rgba(0, 0, 0, 0.16));
  filter: drop-shadow(0 0 10rem rgba(0, 0, 0, 0.16));
}

.voice-card__name {
  text-align: center;
}

.voice-card__review {
  margin-top: 15rem;
  text-align: center;
  font-weight: bold;
  font-size: 18rem;
}

.voice-card__review-text {
  display: inline-block;
  padding-right: 0.8em;
}

.voice-ard__text {
  margin-top: 18rem;
}

/* index | ページ固有スタイル
--------------------------------------------------*/

@media only screen and (min-width: 769px) {
  .modal {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 1000rem;
  }

  .modal__box {
    padding: 36rem 80rem 70rem;
  }

  .modal__info {
    margin-top: 34rem;
  }

  .modal__title {
    font-size: 32rem;
  }

  .modal__info {
    display: flex;
  }

  .modal__img {
    max-width: 253rem;
  }

  .modal__text-content {
    flex: 1;
    padding-left: 56rem;
    padding-top: 33rem;
  }

  .modal__name {
    font-size: 24rem;
    text-align: left;
  }

  .modal__text {
    margin-top: 36rem;
    font-size: 18rem;
    line-height: 2.1111111111;
  }

  .company {
    padding-top: 106rem;
  }

  .company__content {
    display: flex;
    margin-top: 33rem;
  }

  .company__img {
    width: 53.68%;
  }

  .company__text-content {
    width: 46.32%;
    margin-top: 0;
    padding-left: 84rem;
    padding-right: 75rem;
  }

  .company__name {
    font-size: 26rem;
  }

  .company__address {
    margin-top: 19rem;
    line-height: 2.5;
  }

  .company__access {
    line-height: 2.5;
  }

  .company__link-wrapper {
    margin-top: 29rem;
    padding-left: 20rem;
  }

  .company__link {
    height: 89rem;
  }

  .company__map {
    margin-top: 119rem;
    height: 24.166667vw;
  }

  .course {
    padding-top: 120rem;
    padding-bottom: 120rem;
  }

  .course__lead {
    font-size: 20rem;
    margin-top: 26rem;
  }

  .course__list {
    display: flex;
    margin-top: 50rem;
  }

  .course__item {
    width: calc(33.33333% - 10.6666666667rem);
    padding: 24rem 0 18rem;
  }

  .course__item + .course__item {
    margin-left: 16rem;
  }

  .course__item._diy .course-card__price-block:first-of-type {
    margin-left: -9rem;
  }

  .course-card {
    display: flex;
    flex-direction: column;
  }

  .course-card__heading {
    font-size: 20rem;
  }

  .course-card__course {
    font-size: 32rem;
    margin-top: 13rem;
  }

  .course-card__info-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 16rem;
    padding: 18rem 22rem 15rem;
  }

  .course-card__img-block {
    margin-top: 14rem;
  }

  .course-card__info {
    font-size: 18rem;
  }

  .course-card__time .course-card__icon {
    padding-top: 7rem;
  }

  .course-card__price {
    margin-top: auto;
  }

  .course-card__price-block {
    font-size: 36rem;
    padding-left: 60rem;
  }

  .course__btn-wrapper {
    margin-top: 78rem;
  }

  .course__btn {
    max-width: 560rem;
  }

  .features {
    padding: 46rem 0 68rem;
    overflow: hidden;
  }

  .features .section-heading-img {
    width: 39rem;
    margin-right: 15rem;
  }

  .features__bg {
    max-width: 645rem;
    top: 54rem;
    left: 50%;
    -webkit-transform: translateX(275rem);
    transform: translateX(275rem);
  }

  .features__heading-wrapper {
    flex-direction: row;
  }

  .features__content {
    margin-top: 22rem;
  }

  .features__img-content {
    max-width: 777rem;
    -webkit-transform: translateX(-17.447917vw);
    transform: translateX(-17.447917vw);
    position: absolute;
    top: 0;
    margin-top: 18rem;
  }

  .features__img-content::after {
    -webkit-transform: translate(50rem, 48rem);
    transform: translate(50rem, 48rem);
  }

  .features__text-content {
    margin-left: 640rem;
    max-width: 521rem;
    margin-top: 0;
  }

  .features__sub-heading {
    font-size: 44rem;
  }

  .features__text {
    line-height: 2.25;
    margin-top: 33rem;
  }

  .features__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 214rem;
    padding: 0;
  }

  .features__item {
    padding: 36rem 54rem 40rem;
    width: calc(50% - 15rem);
  }

  .features__item:nth-of-type(even) {
    margin-left: 30rem;
  }

  .features__item:nth-of-type(n + 3) {
    margin-top: 38rem;
  }

  .features__item:nth-of-type(4) .features__item-heading {
    min-height: 58rem;
  }

  .features__item-heading {
    font-size: 30rem;
    min-height: 90rem;
  }

  .features__item-icon {
    margin-top: 10rem;
  }

  .features__item-link-wrapper {
    margin-top: 14rem;
  }

  .features__item-link {
    font-size: 20rem;
  }

  .flow {
    padding-top: 111rem;
    padding-bottom: 120rem;
  }

  .flow__step-heading {
    font-size: 30rem;
    max-width: 434rem;
    margin-top: -11rem;
  }

  .flow__step-heading .cr-2 {
    font-size: 50rem;
  }

  .flow__list {
    margin-top: 18rem;
  }

  .flow__item + .flow__item {
    margin-top: 42rem;
  }

  .flow__item + .flow__item::before {
    top: -27rem;
    left: 53%;
  }

  .flow-card {
    max-width: 900rem;
    margin-left: 215rem;
  }

  .flow-card__step-circle {
    width: 142rem;
    height: 142rem;
    top: 50%;
    -webkit-transform: translate(-103rem, -50%);
    transform: translate(-103rem, -50%);
  }

  .flow-card__step {
    font-size: 16rem;
  }

  .flow-card__step-no {
    font-size: 70rem;
  }

  .flow-card__box {
    display: flex;
    padding-top: 15rem;
    padding-bottom: 15rem;
    padding-left: 74rem;
  }

  .flow-card__text-content {
    padding-top: 26rem;
    padding-left: 64rem;
    margin-top: 0;
  }

  .flow-card__title {
    font-size: 30rem;
  }

  .flow-card__text {
    margin-top: 4rem;
  }

  .flow__complete-text {
    font-size: 30rem;
  }

  .key-visual__title {
    bottom: 63rem;
    font-size: 65rem;
  }

  .key-visual__text {
    margin-top: 12rem;
    padding-right: 34rem;
    padding-left: 34rem;
  }

  .news {
    padding-top: 106rem;
    padding-bottom: 134rem;
  }

  .news__list {
    padding: 0 142rem;
    height: 183rem;
    margin-top: 33rem;
  }

  .news-card {
    padding-top: 15rem;
    padding-bottom: 21rem;
    display: flex;
  }

  .news-card__title {
    margin-left: 70rem;
  }

  .recommendation {
    padding-bottom: 150rem;
  }

  .recommendation__heading {
    font-size: 40rem;
  }

  .recommendation__heading-inner::before {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }

  .recommendation__heading-inner::after {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }

  .recommendation__list {
    display: flex;
    margin-top: 58rem;
  }

  .recommendation__item {
    width: calc(33.33333% - 11.3333333333rem);
    font-size: 30rem;
    padding: 30rem;
    padding-left: 58rem;
  }

  .recommendation__item + .recommendation__item {
    margin-left: 17rem;
  }

  .voice {
    padding-top: 122rem;
    padding-bottom: 40rem;
  }

  .voice .swiper-button-next,
  .voice .swiper-button-prev {
    top: 43.5%;
  }

  .voice .swiper-button-prev {
    left: -27rem;
  }

  .voice .swiper-button-next {
    right: -27rem;
  }

  .voice__container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--padding--rem);
    max-width: 1120rem;
  }

  .voice__slider {
    padding: 78rem 20rem;
  }
}

@media screen and (min-width: 1480px) {
  .features__text-content {
    margin-left: 590rem;
    max-width: 521rem;
  }
}

@media screen and (min-width: 1920px) {
  .features__img-content {
    -webkit-transform: translateX(-335px);
    transform: translateX(-335px);
  }
}

@media only screen and (max-width: 768px) {
  .course__item + .course__item {
    margin-top: 14rem;
  }

  .course__item._diy .course-card__price-block:first-of-type {
    margin-left: -9rem;
  }

  .features__bg {
    left: 0;
  }

  .features__text-content {
    padding: 0 20rem;
  }

  .features__item + .features__item {
    margin-top: 26rem;
  }

  .key-visual__title {
    top: 55rem;
  }

  .key-visual__text + .key-visual__text {
    margin-top: 6rem;
  }

  .recommendation__list {
    padding: 0 5rem;
  }

  .recommendation__item + .recommendation__item {
    margin-top: 16rem;
  }
}

@media (hover: hover) {
  a.news-card:hover .news-card__title {
    text-decoration: none;
  }
}