@charset "utf-8";

/*======================================
Common CSS
======================================*/
.cv {
  margin-bottom: 144px;
}
footer.f_index {
  padding: 48px 0 0 0;
}

@media screen and (max-width: 768px) {
  .cv {
    margin-bottom: 32px;
  }
  footer.f_index {
    padding: 15px 0 100px 0;
  }
}
/*======================================
LP
======================================*/
.lp_note {
  width: 770px;
  margin: 20px auto 0;
}
.lp_note li {
  margin-top: 2px;
}
.lp_note .note_item {
  text-indent: -2.5em;
  padding-left: 2.5em;
}
@media screen and (max-width: 768px) {
  .lp_note {
    width: 91vw;
    margin-top: 3%;
  }
  .lp_note li {
    font-size: 12px;
  }
}

/*======================================
共通パーツ
======================================*/
/* btn */
.l_btn {
  width: 686px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  margin: 50px auto 0;
  text-align: center;
}
.l_btn:hover {
  opacity: 0.7;
}
.l_btn a {
  display: block;
  animation: yureru-j 2.5s infinite;
}

@keyframes yureru-j {
  0% {
    transform: translate(0px, 3px);
  }
  5% {
    transform: translate(0px, -3px);
  }
  10% {
    transform: translate(0px, 3px);
  }
  15% {
    transform: translate(0px, -3px);
  }
  20% {
    transform: translate(0px, 3px);
  }
  25% {
    transform: translate(0px, -3px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}

/*======================================
style
======================================*/
.sec_nbp {
  max-width: 944px;
  margin-left: auto;
  margin-right: auto;
}
.l_wrap_inr {
  width: 91vw;
  max-width: 685px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
.l_wrap_inr * {
  box-sizing: border-box;
}

/* mv */
.l_mv_area {
  width: 1000px;
  max-width: 100%;
  margin: auto;
}

@media (max-width: 768px) {
  .l_mv_area {
    width: 100%;
    max-width: 100%;
    margin: auto;
  }
}

/* banner */
.l_bnr {
  width: 658px;
  margin: auto;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  text-align: center;
}
.l_bnr:hover {
  opacity: 0.7;
}

/* head */
.l_head {
  font-size: 0;
  text-align: center;
  margin-bottom: 20px;
}
.l_head img {
  margin: auto;
}

/* img */
.l_img {
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.l_img img {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.l_bnr_area .l_img img {
  max-width: 944px;
}
.copy_img img {
  margin-bottom: 20px;
}

/* txt */
.l_txt {
  font-size: 10px;
}

/* parts */
.pt_20 {
  padding-top: 20px;
}
.pt_30 {
  padding-top: 30px;
}
.pt_40 {
  padding-top: 40px;
}
.pt_56 {
  padding-top: 56px;
}
.pt_60 {
  padding-top: 60px;
}

.mt_0 {
  margin-top: 0;
}
.mt_32 {
  margin-top: 32px;
}
.mt_40 {
  margin-top: 40px;
}
.mt_60 {
  margin-top: 60px;
}
.mt_64 {
  margin-top: 64px;
}
.mt_80 {
  margin-top: 80px;
}

.mb_25 {
  margin-bottom: 25px;
}
.mb_35 {
  margin-bottom: 35px;
}
.mb_40 {
  margin-bottom: 40px;
}

.mx_auto {
  margin-inline: auto !important;
}

.u_img,
.u_img_def {
  display: block;
  line-height: 1;
}
.u_img img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.u_img_def img {
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .l_wrap_inr {
    width: calc(100% - 16px * 2);
  }
  .l_mv_area,
  .l_bnr {
    width: 100%;
  }
  .l_btn {
    width: 91vw;
    margin: 30px auto 0;
  }
  .l_head {
    width: calc(100% - 16px * 2);
    margin: auto;
    margin-bottom: 24px;
  }
  .l_txt,
  .l_grid_txt {
    font-size: 7.5px;
  }

  /* parts */
  .pt_40 {
    padding-top: 40px;
  }
  .pt_60 {
    padding-top: 60px;
  }

  .mt_40 {
    margin-top: 20px;
  }
  /* .mt_60 {
    margin-top: 30px;
  } */

  .mt_0_md {
    margin-top: 0;
  }
  .mt_32_md {
    margin-top: 32px;
  }
  .pt_32_md {
    padding-top: 32px;
  }
}

/* flex */
.l_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.l_clm3 {
  width: 32%;
  margin: 35px 2% 0 0;
}
.mb_15 {
  margin-bottom: 15px !important;
}
.u_alignC {
  text-align: center;
}
.Course_itm .g_ttl_en {
  line-height: 1.4;
}
.g_ttl_en {
  line-height: 1;
  text-align: inherit;
}
.g_h5 {
  font-size: 20px;
  font-weight: bold;
}
.g_cap {
  position: relative;
  margin-block: 0;
  color: #000;
  text-align: center;
  font-family: "Zen Old Mincho";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.22px;
}
.g_cap::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  max-width: 194px;
  height: 100%;
  max-height: 1px;
  bottom: -5px;
  left: 0;
  right: 0;
  margin-inline: auto;
  background-image: url(../img/g_box_bd.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.g_ttl_ja {
  text-align: inherit;
  display: block;
  font-weight: bold;
  margin-top: 1em;
}
.g_c_or {
  color: #ff7708;
}
.mt_5 {
  margin-top: 5px !important;
}
.g_box__lay {
  width: calc(100% - 20px);
  margin: 0 auto;
  position: relative;
  top: -15px;
}
.g_box {
  position: relative;
  padding: 24px 30px;
  /* background-color: #fff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(164, 93, 40, 0.16);
  box-shadow: 0px 0px 10px 0px rgba(164, 93, 40, 0.16); */
  background-color: #faf6f7;
  -webkit-box-shadow: 0 4px 4px 0 #faf6f3;
  box-shadow: 0 4px 4px 0 #faf6f3;
}
.g_box * {
  position: relative;
}
.g_box::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/g_box_bg.png);
  background-repeat: repeat;
  aspect-ratio: 667 / 107;
}
.g_comments {
  margin-top: 16px;
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .g_h5 {
    font-size: 17px;
  }
  .g_cap {
    font-size: 20px;
  }
}

/*======================================
コース
======================================*/
.g_h2 {
  font-size: 44px;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
}
.g_bran {
  font-family: "Lato";
}
.g_ctab_lst {
  width: 100%;
  justify-content: center;
}
.g_ttl_en {
  line-height: 1;
  text-align: inherit;
  flex-wrap: wrap;
}
.g_ctab {
  color: #ddd;
  white-space: nowrap;
  font-size: 15px;
  text-align: center;
  font-family: "Zen Old Mincho";
  letter-spacing: -0.16px;
  text-align: center;
  background-color: #afa4a6;
  max-width: 170px;
  padding: 10px;
  transition: color 0.2s, 0.2s linear;
  cursor: pointer;
  width: 32% !important;
  margin: 5px;
  transition: color 0.2s, linear 0.2s;
}
.g_ctab:hover,
.g_ctab.js_crnt {
  background-color: #9e0122;
}

@media (max-width: 896px) {
  .g_ctab {
    width: 32.6%;
    margin: 2px 0.55%;
  }
}
@media (max-width: 576px) {
  .g_ctab {
    font-size: 2.9vw;
    max-width: none;
    padding: 1.85vw 1vw;
    margin: 2px 1.1% 2px 0;
  }
  .g_ctab:nth-of-type(3n),
  .g_ctab:last-of-type {
    margin-right: 0;
  }

  /* 2カラム */
  .g_ctab_lst__sm2 .g_ctab,
  .g_ctab_lst__sm2 .g_ctab:nth-of-type(3n) {
    width: 49% !important;
    margin: 4px 2% 4px 0;
  }
  .g_ctab_lst__sm2 .g_ctab:nth-of-type(2n),
  .g_ctab_lst__sm2 .g_ctab:last-of-type {
    margin-right: 0;
  }
}

/*    Change Tab - slider
=====================================================*/
/* 共通 */
#tabSlide_target .slick-slider {
  margin: auto;
  width: 100%;
  height: auto;
  min-height: auto;
  position: relative;
}
#tabSlide_target .slick-list,
#tabSlide_target .slick-track {
  overflow: visible;
  height: auto;
}
#tabSlide_target .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.g_slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.g_slider .slick-slide {
  height: auto;
}

/*======================================
  section03
======================================*/
.course_head {
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

/*======================================
  section04
======================================*/
/* .flow_tab_area {
  background-image: url(../img/flow_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 97px 120px;
} */
.flow_tab_area {
  position: relative;
  padding: 80px 97px 64px;
  background: radial-gradient(358.92% 124.51% at 107.79% 73.74%, #f5f1f4 0%, #f5f2f4 39.42%, #f8f4f6 100%);
}
.flow_tab_area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 820px;
  top: 0;
  left: 0;
  background-image: url(../img/flow_bg_01.png);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 945 / 820;
}
.flow_tab_area::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 2323px;
  bottom: 0;
  left: 0;
  background-image: url(../img/flow_bg_02.png);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 945 / 860;
}
.flow_tab_area * {
  position: relative;
  z-index: 2;
}
.flow_tab_area .l_head {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.flow_tab_lst {
  gap: 8px;
  max-width: 526px;
  width: 100%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.flow_tab_btn {
  flex: 1;
  color: #fff;
  white-space: nowrap;
  font-family: "Zen Old Mincho";
  letter-spacing: -0.16px;
  text-align: center;
  background-color: #afa4a6;
  padding: 10px;
  width: 32% !important;
  transition: color 0.2s, 0.2s linear;
  cursor: pointer;
}
.flow_tab_btn.js_flow_crnt {
  background-color: #9e0122;
}
.flow_lst {
  width: 100%;
}
.flow_itm + .flow_itm {
  margin-top: 50px;
}
.flow_txt__ttl {
  font-size: 30px;
  line-height: 1;
  font-family: "Zen Old Mincho";
  letter-spacing: 0.3px;
  margin-top: 24px;
}
.flow_txt__lead {
  margin-top: 18px;
  font-weight: 400;
}
.flow_txt__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
}
.flow_img img {
  border-radius: 10px;
}
.g_note {
  font-size: 18px;
}
.l_img .nbp_img {
  max-width: 650px;
}

@media (any-hover: hover) {
  .flow_tab_btn:hover {
    background-color: #9e0122;
  }
}
@media (max-width: 768px) {
  .flow_tab_area {
    padding: 48px 16px 32px;
  }
  .flow_tab_lst {
    align-items: center;
  }
  .flow_itm + .flow_itm {
    margin-top: 32px;
  }
  .flow_txt__ttl {
    font-size: 22px;
    margin-top: 20px;
  }
  .flow_txt__lead {
    margin-top: 14px;
  }
  .g_note {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  .flow_tab_btn {
    font-size: 2.9vw;
    padding: 1.85vw 1vw;
    width: inherit;
  }
}