/* main */

.hs-home-top {
  padding-top: 130px;
  text-align: center;
  height: calc(100vh - 130px);
  max-width: 1200px;
  margin: 0px auto;
  min-height: 550px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (max-width: 1366px) {
    .hs-home-top {
      height: auto; } }
  @media screen and (max-width: 767px) {
    .hs-home-top {
      padding-top: 100px;
      height: calc(100vh - 100px);
      height: calc(100svh - 100px); } }
  .hs-home-top::before {
    content: "";
    width: 1200px;
    height: 1200px;
    border-radius: 600px;
    display: block;
    background-color: #FFEA91;
    position: absolute;
    left: calc(50% - 600px);
    top: calc(100vh - 300px);
    z-index: 0; }
    @media screen and (max-width: 1280px) {
      .hs-home-top::before {
        top: calc(50% + 100px); } }
    @media screen and (max-width: 767px) {
      .hs-home-top::before {
        width: 600px;
        height: 600px;
        border-radius: 300px;
        left: calc(50% - 300px);
        top: calc(100vh - 200px); } }
  .hs-home-top .fusion-text {
    margin-top: -200px; }
    @media screen and (max-width: 920px) {
      .hs-home-top .fusion-text {
        margin-top: -200px; } }
  .hs-home-top .tit01 {
    width: 54.06%;
    margin: 0px auto; }
    @media screen and (max-width: 767px) {
      .hs-home-top .tit01 {
        width: 96.28%; } }
    .hs-home-top .tit01 .top_img {
      width: 100%;
      height: auto; }
  .hs-home-top .txt01 {
    font-family: "Zen Maru Gothic";
    font-size: 25px;
    font-weight: bold;
    margin-top: 0;
    letter-spacing: 0.1em;
    /*.tab_l{
      @include dn;
      @include ms($breakpoint-tab_l) {
        @include db;
      }
    }*/ }
    @media screen and (max-width: 767px) {
      .hs-home-top .txt01 {
        margin-top: 0;
        font-size: 20px; } }
    .hs-home-top .txt01 .top_span {
      font-family: "Zen Maru Gothic";
      font-weight: bold;
      position: relative;
      display: inline-block;
      margin-bottom: 5px; }
      .hs-home-top .txt01 .top_span::after {
        content: "";
        width: 100%;
        height: 3px;
        border-radius: 1px;
        background-color: #FFEA91;
        position: absolute;
        left: 0;
        bottom: 0;
        display: inline-block; }
  .hs-home-top .btn_scroll {
    display: block;
    width: 80px;
    height: 70px;
    margin: 0px auto;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px; }
    @media screen and (max-width: 767px) {
      .hs-home-top .btn_scroll {
        margin-top: 10px;
        display: none; } }
    .hs-home-top .btn_scroll::before {
      content: "";
      width: 1px;
      height: 20px;
      background-color: #2C2C2C;
      position: absolute;
      left: calc(50% - 1px);
      top: calc(50% - 10px);
      display: block;
      -webkit-animation: circlemove 1.0s ease-in-out infinite;
      animation: circlemove 1.0s ease-in-out infinite;
      -webkit-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
      transform-origin: bottom center;
      z-index: 0; }

@-webkit-keyframes circlemove {
  0% {
    top: calc(50% - 15px);
    height: 0; }
  50% {
    height: 20px; }
  100% {
    top: calc(50% + 7px);
    height: 20px; } }

@keyframes circlemove {
  0% {
    top: calc(50% - 15px);
    height: 0; }
  50% {
    height: 20px; }
  100% {
    top: calc(50% + 7px);
    height: 20px; } }
    .hs-home-top .btn_scroll .top_span {
      font-family: "Quicksand-Bold";
      font-size: 13px;
      color: #2C2C2C; }
    .hs-home-top .btn_scroll .top_img {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 0;
      left: calc(50% - 10px); }
  .hs-home-top .ill_area_top {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    width: 76.56%;
    max-width: 980px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
    @media screen and (max-width: 767px) {
      .hs-home-top .ill_area_top {
        width: 980px;
        max-width: none;
        left: 0;
        bottom: 0; } }
    .hs-home-top .ill_area_top .top_span, .hs-home-top .ill_area_top a {
      display: block;
      height: 247px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
      -webkit-transition: all 1.0s;
      transition: all 1.0s; }
      @media screen and (max-width: 767px) {
        .hs-home-top .ill_area_top .top_span, .hs-home-top .ill_area_top a {
          height: 300px;
          -webkit-transition: all 0s;
          transition: all 0s; } }
      .hs-home-top .ill_area_top .top_span.ill_business, .hs-home-top .ill_area_top a.ill_business {
        width: 17.24%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_business, .hs-home-top .ill_area_top a.ill_business {
            width: calc(100% / 5);
            -webkit-animation: ill01 2.3s infinite;
            animation: ill01 2.3s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_business.ill_business_on, .hs-home-top .ill_area_top a.ill_business.ill_business_on {
          -webkit-animation: drop 2.3s;
          animation: drop 2.3s; }
      .hs-home-top .ill_area_top .top_span.ill_case_study, .hs-home-top .ill_area_top a.ill_case_study {
        width: 18.97%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_case_study, .hs-home-top .ill_area_top a.ill_case_study {
            width: calc(100% / 5);
            -webkit-animation: ill01 3.1s infinite;
            animation: ill01 3.1s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_case_study.ill_case_study_on, .hs-home-top .ill_area_top a.ill_case_study.ill_case_study_on {
          -webkit-animation: drop 3.1s;
          animation: drop 3.1s; }
      .hs-home-top .ill_area_top .top_span.ill_recruit, .hs-home-top .ill_area_top a.ill_recruit {
        width: 26.83%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_recruit, .hs-home-top .ill_area_top a.ill_recruit {
            width: calc(100% / 5);
            -webkit-animation: ill01 3.9s infinite;
            animation: ill01 3.9s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_recruit.ill_recruit_on, .hs-home-top .ill_area_top a.ill_recruit.ill_recruit_on {
          -webkit-animation: drop 3.9s;
          animation: drop 3.9s; }
      .hs-home-top .ill_area_top .top_span.ill_column, .hs-home-top .ill_area_top a.ill_column {
        width: 16.93%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_column, .hs-home-top .ill_area_top a.ill_column {
            width: calc(100% / 5);
            -webkit-animation: ill01 2.3s infinite;
            animation: ill01 2.3s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_column.ill_column_on, .hs-home-top .ill_area_top a.ill_column.ill_column_on {
          -webkit-animation: drop 2.3s;
          animation: drop 2.3s; }
      .hs-home-top .ill_area_top .top_span.ill_news, .hs-home-top .ill_area_top a.ill_news {
        width: 12.04%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_news, .hs-home-top .ill_area_top a.ill_news {
            width: calc(100% / 5);
            -webkit-animation: ill01 3.1s infinite;
            animation: ill01 3.1s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_news.ill_news_on, .hs-home-top .ill_area_top a.ill_news.ill_news_on {
          -webkit-animation: drop 3.1s;
          animation: drop 3.1s; }
      .hs-home-top .ill_area_top .top_span.ill_contact, .hs-home-top .ill_area_top a.ill_contact {
        width: 17.55%; }
        @media screen and (max-width: 767px) {
          .hs-home-top .ill_area_top .top_span.ill_contact, .hs-home-top .ill_area_top a.ill_contact {
            width: calc(100% / 5);
            -webkit-animation: ill01 2.9s infinite;
            animation: ill01 2.9s infinite; } }
        .hs-home-top .ill_area_top .top_span.ill_contact.ill_contact_on, .hs-home-top .ill_area_top a.ill_contact.ill_contact_on {
          -webkit-animation: drop 2.9s;
          animation: drop 2.9s; }
      @media screen and (max-width: 767px) {
        .hs-home-top .ill_area_top .top_span .top_img, .hs-home-top .ill_area_top a .top_img {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1);
          -webkit-transform-origin: bottom;
          -ms-transform-origin: bottom;
          transform-origin: bottom; } }
    .hs-home-top .ill_area_top.ill_area_pc {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media screen and (max-width: 767px) {
        .hs-home-top .ill_area_top.ill_area_pc {
          display: none; } }
    .hs-home-top .ill_area_top.ill_area_sp {
      display: none; }
      @media screen and (max-width: 767px) {
        .hs-home-top .ill_area_top.ill_area_sp {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }

@-webkit-keyframes drop {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, -400vh) rotate(10deg);
    transform: translate(0, -400vh) rotate(10deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  25% {
    opacity: 1;
    -webkit-transform: translate(0, -60px) rotate(10deg);
    transform: translate(0, -60px) rotate(10deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotate(10deg);
    transform: translate(0, 0px) rotate(10deg); }
  75% {
    opacity: 1;
    -webkit-transform: translate(0, -10px) rotate(0deg);
    transform: translate(0, -10px) rotate(0deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  90% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotate(0deg);
    transform: translate(0, 0px) rotate(0deg); }
  95% {
    opacity: 1;
    -webkit-transform: translate(0, -5px) rotate(0deg);
    transform: translate(0, -5px) rotate(0deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); } }

@keyframes drop {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, -400vh) rotate(10deg);
    transform: translate(0, -400vh) rotate(10deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  25% {
    opacity: 1;
    -webkit-transform: translate(0, -60px) rotate(10deg);
    transform: translate(0, -60px) rotate(10deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotate(10deg);
    transform: translate(0, 0px) rotate(10deg); }
  75% {
    opacity: 1;
    -webkit-transform: translate(0, -10px) rotate(0deg);
    transform: translate(0, -10px) rotate(0deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  90% {
    opacity: 1;
    -webkit-transform: translate(0, 0px) rotate(0deg);
    transform: translate(0, 0px) rotate(0deg); }
  95% {
    opacity: 1;
    -webkit-transform: translate(0, -5px) rotate(0deg);
    transform: translate(0, -5px) rotate(0deg);
    @media screen and (max-width: 767px) {
      -webkit-transform: translate(0, 0vh) rotate(10deg);
      transform: translate(0, 0vh) rotate(10deg); } }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); } }

/* common */

@-webkit-keyframes ill01 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); }
  25% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(2deg) translate(0, -45%);
    transform: translate(0, 45%) rotate(2deg) translate(0, -45%); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); }
  75% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(-2deg) translate(0, -45%);
    transform: translate(0, 45%) rotate(-2deg) translate(0, -45%); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); } }

@keyframes ill01 {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); }
  25% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(2deg) translate(0, -45%);
    transform: translate(0, 45%) rotate(2deg) translate(0, -45%); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); }
  75% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(-2deg) translate(0, -45%);
    transform: translate(0, 45%) rotate(-2deg) translate(0, -45%); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%);
    transform: translate(0, 45%) rotate(0) scaleY(0.99) translate(0, -45%); } }

.ill_on {
  -webkit-animation: ill01 2.4s infinite 0.3s ease-in-out !important;
  animation: ill01 2.4s infinite 0.3s ease-in-out !important; }

/* 消すと画像サイズがでかくなる */
.hs-home-top .top_img {
  width: 100%; }


.sp {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp {
      display: inherit; } }