@charset "UTF-8";
/* ////////////////////////////////////////

ファーストビュー

//////////////////////////////////////// */
.fv {
  background: url(../img/top/fv_main.jpg) no-repeat center center;
  background-size: cover;
  position: relative; }
  .fv .fv_inner {
    width: 108rem;
    max-width: 94%;
    height: 36rem;
    margin: 0 auto;
    position: relative; }
    @media screen and (min-width: 768px) {
      .fv .fv_inner {
        height: 48rem; } }
    @media screen and (min-width: 1024px) {
      .fv .fv_inner {
        height: 60rem; } }
    @media screen and (min-width: 1280px) {
      .fv .fv_inner {
        height: 72rem; } }
    @media screen and (min-width: 768px) {
      .fv .fv_inner h1 {
        rotate: -4deg;
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%; } }
    @media screen and (min-width: 1024px) {
      .fv .fv_inner h1 {
        left: 0; } }
    .fv .fv_inner h1 span {
      display: block;
      position: absolute;
      rotate: -4deg; }
      @media screen and (min-width: 768px) {
        .fv .fv_inner h1 span {
          position: static;
          rotate: 0; } }
    .fv .fv_inner h1 .copy_en {
      font-size: 4.0rem;
      left: 0;
      bottom: 44%;
      color: #fff; }
      @media screen and (min-width: 768px) {
        .fv .fv_inner h1 .copy_en {
          font-size: 5.6rem; } }
      @media screen and (min-width: 1024px) {
        .fv .fv_inner h1 .copy_en {
          font-size: 7.2rem; } }
      @media screen and (min-width: 1280px) {
        .fv .fv_inner h1 .copy_en {
          font-size: 9.6rem;
          line-height: 0.8; } }
    .fv .fv_inner h1 .copy_jp {
      font-size: 2.4rem;
      right: 0;
      top: 56%; }
      @media screen and (min-width: 768px) {
        .fv .fv_inner h1 .copy_jp {
          font-size: 3.6rem; } }
      @media screen and (min-width: 1024px) {
        .fv .fv_inner h1 .copy_jp {
          font-size: 4.8rem; } }
  .fv::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10%;
    background-color: #fff;
    bottom: 0;
    left: 0;
    -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
    clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* ////////////////////////////////////////

冒頭（概要）

//////////////////////////////////////// */
.top_outline {
  background-image: url(../img/top/top_outline_img.png);
  background-repeat: no-repeat;
  background-position: right 120px;
  background-size: 200%; }
  @media screen and (min-width: 768px) {
    .top_outline {
      background-position: right 80px;
      background-size: 100%; } }
  @media screen and (min-width: 1280px) {
    .top_outline {
      background-position: right 96px; } }
  .top_outline .outline_body {
    margin-top: 36vw;
    text-align: center;
    line-height: 2.0;
    font-size: 1.6rem; }
    @media screen and (min-width: 768px) {
      .top_outline .outline_body {
        margin-top: 18vw; } }
    @media screen and (min-width: 1024px) {
      .top_outline .outline_body {
        margin-top: 14vw;
        font-size: 2.0rem; } }

/* ////////////////////////////////////////

メッセージ）

//////////////////////////////////////// */
.top_message {
  background-color: #F0FAFA; }

@media screen and (min-width: 768px) {
  .top_msg_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; } }

.top_msg_body p {
  margin-bottom: 4.0rem; }
  @media screen and (min-width: 768px) {
    .top_msg_body p {
      width: 70%;
      margin-bottom: 0; } }
  @media screen and (min-width: 1024px) {
    .top_msg_body p {
      width: 76%;
      margin-bottom: 0; } }

.top_msg_body figure {
  width: 50%;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .top_msg_body figure {
      width: 24%;
      margin: 0; } }
  @media screen and (min-width: 1024px) {
    .top_msg_body figure {
      width: 20%;
      margin: 0; } }
  .top_msg_body figure figcaption {
    font-size: 1.2rem; }

.top_course {
  background-color: #FAF8F4;
  padding-bottom: 4.0rem; }
  @media screen and (min-width: 1024px) {
    .top_course {
      padding-bottom: 6.4rem; } }
  .top_course .content {
    padding: 1.6rem 0 4.0rem; }
    @media screen and (min-width: 1024px) {
      .top_course .content {
        padding: 2.4rem 0 5.0rem; } }

@media screen and (min-width: 768px) {
  .top_course_body {
    text-align: center; } }

.top_slide_wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #8ACFD1;
  padding: 1.2rem 0; }

.top_slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 500%;
  position: relative;
  left: 0;
  -webkit-animation: top_slide_sp 10s linear infinite;
  animation: top_slide_sp 10s linear infinite; }
  @media screen and (min-width: 768px) {
    .top_slide {
      width: 300%;
      -webkit-animation: top_slide_sm 10s linear infinite;
      animation: top_slide_sm 10s linear infinite; } }
  @media screen and (min-width: 1024px) {
    .top_slide {
      width: 250%;
      -webkit-animation: top_slide_md 10s linear infinite;
      animation: top_slide_md 10s linear infinite; } }
  @media screen and (min-width: 1280px) {
    .top_slide {
      width: 200%;
      -webkit-animation: top_slide_lg 10s linear infinite;
      animation: top_slide_lg 10s linear infinite; } }
  .top_slide li {
    width: 9.4%;
    margin-right: 0.6%;
    border-radius: 0.8rem;
    overflow: hidden; }
    .top_slide li img {
      display: block; }

@-webkit-keyframes top_slide_sp {
  0% {
    left: 0; }
  100% {
    left: -250%; } }

@keyframes top_slide_sp {
  0% {
    left: 0; }
  100% {
    left: -250%; } }

@-webkit-keyframes top_slide_sm {
  0% {
    left: 0; }
  100% {
    left: -150%; } }

@keyframes top_slide_sm {
  0% {
    left: 0; }
  100% {
    left: -150%; } }

@-webkit-keyframes top_slide_md {
  0% {
    left: 0; }
  100% {
    left: -125%; } }

@keyframes top_slide_md {
  0% {
    left: 0; }
  100% {
    left: -125%; } }

@-webkit-keyframes top_slide_lg {
  0% {
    left: 0; }
  100% {
    left: -100%; } }

@keyframes top_slide_lg {
  0% {
    left: 0; }
  100% {
    left: -100%; } }