@charset "UTF-8";
/* CSS Document */
/* +++++++++++++++++++++ ipad右ずれ用css ++++++++++++++++++++++*/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #container {
    padding-top: 80px;
    overflow: hidden; } }
/* +++++++++++++++++++++++++++++++++++++

メインイメージ部分

++++++++++++++++++++++++++++++++++++++ */
.main {
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .main {
      padding-top: 60px;
      height: 40vh; } }
  .main p.title {
    font-size: 40px;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.15em;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    animation: title_anim 1.5s 2.5s ease-in-out;
    animation-fill-mode: forwards; }
    .main p.title br {
      display: none; }
    @media only screen and (max-width: 768px) {
      .main p.title {
        font-size: 6vw;
        top: 58%;
        line-height: 1.5em; }
        .main p.title br {
          display: block; } }
    .main p.title span {
      display: inline-block;
      margin-left: -20px; }
      @media only screen and (max-width: 768px) {
        .main p.title span {
          margin-left: 0; } }
    @media only screen and (max-width: 768px) {
      .main p.title span span {
        margin-left: -3vw; } }

/*.main*/
@keyframes title_anim {
  0% {
    opacity: 0;
    letter-spacing: 0.3em; }
  100% {
    opacity: 1;
    letter-spacing: 0.15em; } }
@keyframes en_anim {
  0% {
    opacity: 0;
    letter-spacing: 0.2em; }
  100% {
    opacity: 1;
    letter-spacing: 0.02em; } }
/*スクロールダウンボタン*/
.down {
  position: absolute;
  bottom: 140px;
  right: 0;
  z-index: 20;
  background-color: #ffffff;
  transform: rotate(90deg);
  /*.down_inner*/ }
  @media only screen and (max-width: 768px) {
    .down {
      display: none; } }
  .down:after {
    content: "";
    position: absolute;
    bottom: 8px;
    right: -100px;
    display: block;
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    z-index: -2; }
  .down .down_inner p a {
    display: block;
    color: #ed0100;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding: 2px 8px; }
  .down .point {
    position: absolute;
    z-index: 2;
    bottom: 4px;
    right: -15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ed0100;
    animation: point 1.5s ease-in-out;
    /* スピードなど */
    animation-iteration-count: infinite; }
    .down .point:before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      position: absolute;
      z-index: -1;
      bottom: -1px;
      right: -1px;
      animation: pulsate 1.5s ease-out;
      /* スピードなど */
      animation-iteration-count: infinite; }

/*.down*/
@keyframes pulsate {
  0% {
    transform: scale(1, 1); }
  50% {
    opacity: 1; }
  100% {
    transform: scale(3, 3);
    opacity: 0.0; } }
@keyframes point {
  0% {
    right: -15px; }
  50% {
    opacity: 1; }
  100% {
    right: -85px;
    opacity: 0.0; } }
/*メインイメージのアニメーション部分*/
.image_box {
  height: 100vh;
  overflow: hidden;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .image_box {
      height: 40vh; } }

.main_img {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../img/top/main_image02.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 24s 0s infinite;
  animation: anime 24s 0s infinite; }
  @media only screen and (max-width: 768px) {
    .main_img {
      height: 40vh; } }

.main_img:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  background-image: url("../img/top/main_image03.jpg"); }

.main_img:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
  background-image: url("../img/top/main_image04.jpg"); }

.main_img:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
  background-image: url("../img/top/main_image05.jpg"); }

/*↓メインイメージ ipad用css*/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .main {
    height: 40vh; }

  .image_box {
    height: 40vh; }

  .main_img {
    height: 40vh; } }
/*メインイメージアニメーション*/
@keyframes anime {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  20% {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale(1.1);
    z-index: 9; }
  100% {
    opacity: 0; } }
/* +++++++++++++++++++++++++++++++++++++

↓事業紹介

++++++++++++++++++++++++++++++++++++++ */
.services_area {
  width: 100%;
  min-width: 1000px;
  padding-top: 240px;
  margin-bottom: 150px;
  /*h2*/
  /*p*/
  /*.btn_area*/ }
  @media only screen and (max-width: 768px) {
    .services_area {
      width: 90%;
      min-width: 90%;
      padding-top: 100px;
      margin: 0 auto 50px; } }
  .services_area h2 {
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 45px;
    letter-spacing: 0.2em;
    position: relative;
    z-index: 2; }
    @media only screen and (max-width: 768px) {
      .services_area h2 {
        font-size: 20px;
        margin-bottom: 25px; } }
    .services_area h2:before {
      content: "Services";
      font-size: 130px;
      color: #fef1f0;
      font-family: Roboto;
      font-weight: 700;
      position: absolute;
      z-index: -1;
      top: -100px;
      left: 0;
      right: 0;
      margin: 0 auto;
      opacity: 0; }
      @media only screen and (max-width: 768px) {
        .services_area h2:before {
          font-size: 60px;
          top: -45px; } }
  .services_area h2.visible:before {
    animation: en_anim 1s  0.3s ease-in-out;
    animation-fill-mode: forwards; }
  .services_area p {
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 2.2em;
    margin-bottom: 50px; }
    @media only screen and (max-width: 768px) {
      .services_area p {
        text-align: left;
        line-height: 1.8em;
        margin-bottom: 30px; }
        .services_area p br {
          display: none; } }
  .services_area .btn_area {
    overflow: hidden;
    width: 100%;
    /*.service_btn a*/
    /*.service_btn a:hover*/ }
    .services_area .btn_area .service_btn a {
      display: block;
      width: 33.23%;
      height: auto;
      float: left;
      margin-right: 1px;
      margin-bottom: 1px;
      position: relative;
      overflow: hidden;
      /*h3*/ }
      @media only screen and (max-width: 768px) {
        .services_area .btn_area .service_btn a {
          width: 100%;
          margin-right: 0;
          float: none; } }
      .services_area .btn_area .service_btn a:nth-of-type(3n) {
        margin-right: 0; }
      .services_area .btn_area .service_btn a h3 {
        font-size: 16px;
        font-weight: 300;
        color: #fff;
        display: inline-block;
        background-color: #2b2b2b;
        letter-spacing: 0.1em;
        padding: 12px 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        transition: 0.3s;
        box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.5);
        transition: 0.3s;
        z-index: 1000; }
        @media only screen and (max-width: 768px) {
          .services_area .btn_area .service_btn a h3 {
            font-size: 4.5vw;
            padding: 10px 2vw; } }
      .services_area .btn_area .service_btn a img {
        transition: 0.5s;
        display: block; }
    .services_area .btn_area .service_btn a:hover h3 {
      top: 52%;
      left: 50%;
      box-shadow: 0 0 0 rgba(255, 255, 255, 0.5); }
    .services_area .btn_area .service_btn a:hover img {
      transform: scale(1.05, 1.05);
      opacity: 0.8; }

/*.services_area*/
/* +++++++++++++++++++++++++++++++++++++

↓こんなときはニッケ商事

++++++++++++++++++++++++++++++++++++++ */
.such_time_area {
  width: 100%;
  min-width: 1000px;
  height: 420px;
  position: relative;
  margin-bottom: 280px;
  /*.such_btn*/ }
  @media only screen and (max-width: 768px) {
    .such_time_area {
      min-width: 100%;
      height: auto;
      margin-bottom: 0px; } }
  .such_time_area .such_btn {
    width: 60%;
    height: 420px;
    background: #ff7d2e;
    background: -moz-linear-gradient(left, #ed0301 0%, #ff7d2e 100%);
    background: -webkit-gradient(linear, left center, right center, from(#ed0301), to(#ff7d2e));
    background: -webkit-linear-gradient(left, #ed0301 0%, #ff7d2e 100%);
    background: -o-linear-gradient(left, #ed0301 0%, #ff7d2e 100%);
    background: -ms-linear-gradient(left, #ed0301 0%, #ff7d2e 100%);
    background: linear-gradient(to right, #ed0301 0%, #ff7d2e 100%);
    position: absolute;
    top: 100px;
    right: 0;
    /*a*/ }
    @media only screen and (max-width: 768px) {
      .such_time_area .such_btn {
        width: 100%;
        height: auto;
        position: static;
        background: #ffffff; } }
    .such_time_area .such_btn:before {
      content: 'Nikke';
      font-size: 150px;
      color: rgba(237, 1, 0, 0.3);
      font-family: Roboto;
      font-weight: 700;
      position: absolute;
      top: -10px;
      left: 340px;
      letter-spacing: 0.02em; }
      @media only screen and (max-width: 768px) {
        .such_time_area .such_btn:before {
          display: none; } }
    .such_time_area .such_btn:after {
      content: 'Trading company';
      font-size: 46px;
      width: 400px;
      color: rgba(237, 1, 0, 0.3);
      font-family: Roboto;
      font-weight: 700;
      position: absolute;
      top: 130px;
      left: 350px;
      letter-spacing: 0.03em; }
      @media only screen and (max-width: 768px) {
        .such_time_area .such_btn:after {
          display: none; } }
    .such_time_area .such_btn a {
      display: block;
      overflow: hidden;
      width: 700px;
      height: 417px;
      background: url("../img/top/k_nikke_bg.jpg") top center no-repeat;
      background-size: contain;
      position: absolute;
      top: -80px;
      left: -350px;
      z-index: 20;
      box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: 0.3s;
      /*h2*/
      /*img*/ }
      @media only screen and (max-width: 768px) {
        .such_time_area .such_btn a {
          width: 100%;
          height: 70vw;
          position: static;
          box-shadow: none;
          background: url("../img/top/k_nikke_bg_sp.jpg") top center no-repeat;
          background-size: contain; } }
      .such_time_area .such_btn a:before {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        background-color: rgba(255, 255, 255, 0.2);
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        transition: 0.3s; }
      .such_time_area .such_btn a h2 {
        font-size: 26px;
        letter-spacing: 0.2em;
        color: #ed0100;
        font-weight: 500;
        position: absolute;
        right: 185px;
        top: 160px; }
        @media only screen and (max-width: 768px) {
          .such_time_area .such_btn a h2 {
            font-size: 5vw;
            position: static;
            text-align: center;
            padding-top: 16vw; } }
      .such_time_area .such_btn a p {
        text-align: center;
        position: absolute;
        top: 210px;
        right: 180px;
        letter-spacing: 0.05em;
        line-height: 1.8em;
        font-weight: 400; }
        @media only screen and (max-width: 768px) {
          .such_time_area .such_btn a p {
            font-size: 3vw;
            position: static;
            text-align: center;
            padding-top: 5vw; } }
        .such_time_area .such_btn a p br.sp_only {
          display: none; }
          @media only screen and (max-width: 768px) {
            .such_time_area .such_btn a p br.sp_only {
              display: block; } }
      .such_time_area .such_btn a img {
        display: block;
        position: absolute;
        opacity: 0; }
        @media only screen and (max-width: 768px) {
          .such_time_area .such_btn a img {
            display: none; } }
        .such_time_area .such_btn a img:first-of-type {
          width: 42px;
          height: 42px;
          top: 70px;
          right: 130px; }
        .such_time_area .such_btn a img:nth-of-type(2) {
          width: 36px;
          height: 65px;
          top: 30px;
          right: 230px; }
        .such_time_area .such_btn a img:nth-of-type(3) {
          width: 65px;
          height: 55px;
          top: 30px;
          right: 320px; }
        .such_time_area .such_btn a img:nth-of-type(4) {
          width: 53px;
          height: 47px;
          top: 40px;
          right: 435px; }
        .such_time_area .such_btn a img:nth-of-type(5) {
          width: 57px;
          height: 46px;
          top: 65px;
          right: 530px; }
        .such_time_area .such_btn a img:nth-of-type(6) {
          width: 55px;
          height: 45px;
          top: 140px;
          right: 590px; }
        .such_time_area .such_btn a img:nth-of-type(7) {
          width: 61px;
          height: 60px;
          top: 215px;
          right: 590px; }
        .such_time_area .such_btn a img:nth-of-type(8) {
          width: 57px;
          height: 59px;
          top: 300px;
          right: 530px; }
        .such_time_area .such_btn a img:nth-of-type(9) {
          width: 75px;
          height: 57px;
          top: 310px;
          right: 420px; }
        .such_time_area .such_btn a img:nth-of-type(10) {
          width: 71px;
          height: 40px;
          top: 325px;
          right: 300px; }
      .such_time_area .such_btn a img.visible:first-of-type {
        animation: fadeIn2 0.5s 1.5s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(2) {
        animation: fadeIn2 0.5s 2.0s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(3) {
        animation: fadeIn2 0.5s 1.5s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(4) {
        animation: fadeIn2 1.0s 2.0s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(5) {
        animation: fadeIn2 0.5s 1.5s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(6) {
        animation: fadeIn2 1.0s 2.0s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(7) {
        animation: fadeIn2 0.5s 1.5s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(8) {
        animation: fadeIn2 1.0s 2.0s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(9) {
        animation: fadeIn2 0.5s 1.5s ease-in-out;
        animation-fill-mode: forwards; }
      .such_time_area .such_btn a img.visible:nth-of-type(10) {
        animation: fadeIn2 1.0s 2.0s ease-in-out;
        animation-fill-mode: forwards; }
    .such_time_area .such_btn a.visible {
      animation: fadeIn 1.0s 0.5s ease-in-out;
      animation-fill-mode: forwards; }
    .such_time_area .such_btn a:hover:before {
      opacity: 1; }

/*.such_time_area*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: -20px; }
  100% {
    opacity: 1;
    top: -80px; } }
@keyframes fadeIn2 {
  0% {
    opacity: 0;
    transform: rotate(25deg); }
  100% {
    opacity: 1;
    transform: rotate(0); } }
/* +++++++++++++++++++++++++++++++++++++

↓企業情報

++++++++++++++++++++++++++++++++++++++ */
.info_inner {
  width: 1000px;
  margin: 0 auto 200px;
  overflow: hidden; }
  @media only screen and (max-width: 768px) {
    .info_inner {
      width: 90%;
      margin-bottom: 100px; } }

/*.info_inner*/
.about {
  width: 500px;
  height: 410px;
  float: left;
  background: url("../img/top/about_bg.jpg") no-repeat;
  background-size: contain;
  position: relative;
  opacity: 0;
  /*h2*/
  /*p*/
  /*.about_btn a*/ }
  @media only screen and (max-width: 768px) {
    .about {
      width: 100%;
      height: 75vw;
      margin-bottom: 30px;
      float: none; } }
  .about:before {
    content: "About";
    font-size: 130px;
    color: rgba(21, 38, 132, 0.2);
    font-family: Roboto;
    font-weight: 700;
    position: absolute;
    top: -15px;
    left: 0;
    z-index: 0;
    opacity: 0; }
    @media only screen and (max-width: 768px) {
      .about:before {
        font-size: 60px;
        top: 0; } }
  .about h2 {
    font-size: 26px;
    color: #ffffff;
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 50px;
    position: absolute;
    top: 75px;
    left: 60px;
    z-index: 1; }
    @media only screen and (max-width: 768px) {
      .about h2 {
        font-size: 20px;
        top: 45px;
        left: 20px;
        margin-bottom: 20px; } }
  .about p {
    color: #ffffff;
    letter-spacing: 0.2em;
    position: absolute;
    font-weight: 400;
    line-height: 2em;
    top: 160px;
    left: 60px;
    z-index: 1; }
    @media only screen and (max-width: 768px) {
      .about p {
        width: 90%;
        top: 90px;
        font-size: 14px;
        left: 20px;
        letter-spacing: 0.05em;
        line-height: 1.7em; }
        .about p br {
          display: none; } }
  .about .about_btn a {
    display: block;
    width: 216px;
    height: 48px;
    box-sizing: border-box;
    color: #ed0100;
    font-weight: 500;
    letter-spacing: 0.2em;
    font-size: 16px;
    background-color: #fff;
    text-align: center;
    padding-top: 15px;
    position: absolute;
    top: 280px;
    left: 60px;
    transition: 0.3s;
    /*&:hover*/ }
    @media only screen and (max-width: 768px) {
      .about .about_btn a {
        top: 54vw;
        left: 0;
        right: 0;
        margin: 0 auto; } }
    .about .about_btn a:after {
      content: '';
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6.9px;
      border-color: transparent transparent transparent #ed0100;
      position: absolute;
      top: 20px;
      right: 25px;
      transition: 0.3s; }
    .about .about_btn a:hover {
      color: #fff;
      background-color: #ed0100;
      /*&:after*/ }
      .about .about_btn a:hover:after {
        content: '';
        border-color: transparent transparent transparent #ffffff;
        right: 20px; }

/*.about*/
.about.visible {
  animation: fadeUp 1.0s 0.5s ease-in-out;
  animation-fill-mode: forwards; }

.about.visible:before {
  animation: en_anim 1s  1.8s ease-in-out;
  animation-fill-mode: forwards; }

/* +++++++++++++++++++++++++++++++++++++

↓ニュース

++++++++++++++++++++++++++++++++++++++ */
.news {
  width: 450px;
  padding-top: 72px;
  float: right;
  position: relative;
  opacity: 0;
  /*h2*/
  /*.news_btn a*/
  /*ul li*/ }
  @media only screen and (max-width: 768px) {
    .news {
      width: 100%;
      padding-bottom: 50px;
      padding-top: 47px;
      margin: 0 auto;
      float: none; } }
  .news:after {
    content: 'News';
    font-size: 130px;
    color: #fef1f0;
    font-family: Roboto;
    font-weight: 700;
    position: absolute;
    letter-spacing: 0.01em;
    top: -15px;
    right: 0;
    z-index: -1;
    opacity: 0; }
    @media only screen and (max-width: 768px) {
      .news:after {
        font-size: 60px;
        top: 0;
        right: auto;
        left: 0; } }
  .news h2 {
    font-size: 26px;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 34px; }
    @media only screen and (max-width: 768px) {
      .news h2 {
        font-size: 20px; } }
  .news .news_btn a {
    display: block;
    width: 120px;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #ed0100;
    font-weight: 500;
    letter-spacing: 0.2em;
    font-size: 16px;
    border-bottom: 1px solid #ffb2b2;
    position: absolute;
    top: 80px;
    right: 0;
    transition: 0.3s; }
    @media only screen and (max-width: 768px) {
      .news .news_btn a {
        top: auto;
        bottom: 10px;
        right: 0;
        left: 0;
        margin: 0 auto; } }
    .news .news_btn a:after {
      content: '';
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6.9px;
      border-color: transparent transparent transparent #ed0100;
      position: absolute;
      top: 6px;
      right: 10px;
      transition: 0.3s; }
    .news .news_btn a:hover {
      width: 110px; }
    .news .news_btn a:hover:after {
      content: '';
      right: 0px; }
  .news ul li {
    border-bottom: 1px solid #dddddd;
    margin-bottom: 15px;
    /*p*/
    /*　↓カテゴリアイコン　*/
    /*　↓カテゴリアイコン 190918 wp用追加　*/
    /*　↑カテゴリアイコン 190918 wp用追加　ここまで*/
    /*　↑カテゴリアイコン　ここまで*/
    /*p.news_title*/ }
    .news ul li p {
      margin-bottom: 8px;
      font-size: 12px;
      /*time*/ }
      .news ul li p time {
        font-weight: 500;
        margin-right: 10px; }
    .news ul li p .ico_01 {
      display: inline-block;
      padding: 3px 5px;
      background-color: #e20013;
      color: #fff; }
    .news ul li p .ico_02 {
      display: inline-block;
      padding: 3px 5px;
      background-color: #ffba00;
      color: #fff; }
    .news ul li p .ico_03 {
      display: inline-block;
      padding: 3px 5px;
      background-color: #3c7fc2;
      color: #fff; }
    .news ul li p .ico_04 {
      display: inline-block;
      padding: 3px 5px;
      background-color: #002e5c;
      color: #fff; }
    .news ul li p .info {
      font-size: 12px;
      display: inline-block;
      padding: 3px 5px;
      background-color: #e20013;
      color: #fff; }
      @media only screen and (max-width: 768px) {
        .news ul li p .info {
          line-height: 1; } }
    .news ul li p .event {
      font-size: 12px;
      display: inline-block;
      padding: 3px 5px;
      background-color: #ffba00;
      color: #fff; }
      @media only screen and (max-width: 768px) {
        .news ul li p .event {
          line-height: 1; } }
    .news ul li p .exhibition {
      font-size: 12px;
      display: inline-block;
      padding: 3px 5px;
      background-color: #3c7fc2;
      color: #fff; }
      @media only screen and (max-width: 768px) {
        .news ul li p .exhibition {
          line-height: 1; } }
    .news ul li p .alphanikke {
      font-size: 12px;
      display: inline-block;
      padding: 3px 5px;
      background-color: #002e5c;
      color: #fff; }
      @media only screen and (max-width: 768px) {
        .news ul li p .alphanikke {
          line-height: 1; } }
    .news ul li p.news_title {
      line-height: 1.5em;
      font-size: 14px;
      margin-bottom: 12px;
      /*a*/ }
      .news ul li p.news_title a {
        transition: 0.3s; }
        .news ul li p.news_title a:hover {
          color: #ed0100; }

/*.news*/
.news.visible {
  animation: fadeUp 1.0s 1.0s ease-in-out;
  animation-fill-mode: forwards; }

.news.visible:after {
  animation: en_anim 1s  2.3s ease-in-out;
  animation-fill-mode: forwards; }

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
/* +++++++++++++++++++++++++++++++++++++

↓採用情報

++++++++++++++++++++++++++++++++++++++ */
.recruit_area {
  width: 100%;
  min-width: 1000px;
  position: relative;
  margin-bottom: 20px;
  /*h2*/
  /*p*/
  /*.recruit_btn a*/
  /*↓無限スライダー部分*/
  /* =======================================
      ClearFixElements
  ======================================= */
  /*無限スライドここまで*/ }
  @media only screen and (max-width: 768px) {
    .recruit_area {
      min-width: 100%; } }
  .recruit_area h2 {
    font-size: 26px;
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 34px;
    text-align: center;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .recruit_area h2 {
        font-size: 20px;
        margin-bottom: 20px; } }
    .recruit_area h2:before {
      content: "Recruit";
      font-size: 130px;
      color: #fef1f0;
      font-family: Roboto;
      font-weight: 700;
      position: absolute;
      z-index: -1;
      top: -100px;
      left: 0;
      right: 0;
      margin: 0 auto;
      opacity: 0; }
      @media only screen and (max-width: 768px) {
        .recruit_area h2:before {
          font-size: 60px;
          top: -45px; } }
  .recruit_area h2.visible:before {
    animation: en_anim 1s  0.3s ease-in-out;
    animation-fill-mode: forwards; }
  .recruit_area p {
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 2.2em;
    margin-bottom: 50px; }
    @media only screen and (max-width: 768px) {
      .recruit_area p {
        width: 90%;
        margin: 0 auto 20px;
        text-align: left;
        line-height: 1.8em;
        font-size: 14px; } }
  .recruit_area .recruit_btn {
    width: 236px;
    height: 68px;
    position: absolute;
    z-index: 100;
    top: 105px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #fff; }
    @media only screen and (max-width: 768px) {
      .recruit_area .recruit_btn {
        top: 95px; } }
  .recruit_area .recruit_btn a {
    display: block;
    width: 216px;
    height: 48px;
    box-sizing: border-box;
    color: #ed0100;
    font-weight: 500;
    letter-spacing: 0.2em;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #f68888;
    text-align: center;
    padding-top: 15px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.3s;
    /*&:hover*/ }
    .recruit_area .recruit_btn a:after {
      content: '';
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6.9px;
      border-color: transparent transparent transparent #ed0100;
      position: absolute;
      top: 20px;
      right: 25px;
      transition: 0.3s; }
    .recruit_area .recruit_btn a:hover {
      color: #fff;
      background-color: #ed0100;
      /*&:after*/ }
      .recruit_area .recruit_btn a:hover:after {
        content: '';
        border-color: transparent transparent transparent #ffffff;
        right: 20px; }
  .recruit_area #loopslider {
    margin: 0 auto;
    width: 100%;
    height: 204px;
    text-align: left;
    position: relative;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .recruit_area #loopslider {
        margin-top: 55px;
        height: 150px; } }
  .recruit_area #loopslider ul {
    height: 204px;
    float: left;
    display: inline;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .recruit_area #loopslider ul {
        height: 150px; } }
  .recruit_area #loopslider ul li {
    width: 300px;
    height: 204px;
    float: left;
    display: inline;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .recruit_area #loopslider ul li {
        width: 220px;
        height: 150px; } }
  .recruit_area #loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden; }
  .recruit_area #loopslider ul {
    display: inline-block;
    overflow: hidden; }

/*.recruit_area*/