@charset "UTF-8";
/* CSS Document */
/*グロナビ*/
#side_bar nav ul li:nth-of-type(4) a {
  color: #ed0100; }

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

採用情報　css

++++++++++++++++++++++++++++++++++++++ */
.first_image {
  width: 100%;
  min-width: 1000px;
  height: 420px;
  position: absolute;
  background: url("../img/recruit/recruit_main.jpg") center top no-repeat;
  background-size: cover;
  z-index: -1; }
  @media only screen and (max-width: 768px) {
    .first_image {
      min-width: 100%;
      margin-top: 60px;
      height: 160px; } }

/*.first_image*/
.cont_inner {
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  height: auto;
  display: block;
  right: 0px;
  left: 0px;
  top: 420px;
  z-index: 1;
  margin-bottom: 500px;
  /*h2*/
  /*.pan_nav*/
  /*p.read_copy*/
  /*↓無限スライダー部分*/
  /* =======================================
      ClearFixElements
  ======================================= */
  /*無限スライドここまで*/
  /*.message*/ }
  @media only screen and (max-width: 768px) {
    .cont_inner {
      top: 220px;
      margin-bottom: 350px; } }
  .cont_inner h2 {
    font-size: 28px;
    color: #fff;
    display: inline-block;
    padding: 35px 70px 45px 80px;
    letter-spacing: 0.3em;
    position: relative;
    top: -70px;
    left: 0;
    opacity: 0;
    background: #fe5822;
    background: -moz-linear-gradient(bottom left, #ed0201 0%, #fe5822 100%);
    background: -webkit-gradient(linear, left bottom, right top, from(#ed0201), to(#fe5822));
    background: -webkit-linear-gradient(bottom left, #ed0201 0%, #fe5822 100%);
    background: -o-linear-gradient(bottom left, #ed0201 0%, #fe5822 100%);
    background: linear-gradient(to top right, #ed0201 0%, #fe5822 100%);
    animation: fadeUp 0.8s 0.5s ease-in-out;
    animation-fill-mode: forwards; }
    @media only screen and (max-width: 768px) {
      .cont_inner h2 {
        font-size: 20px;
        padding: 15px 15px 30px 20px;
        letter-spacing: 0.2em;
        position: relative;
        top: -45px;
        animation: fadeUpSp 0.8s 0.5s ease-in-out;
        animation-fill-mode: forwards; } }
    .cont_inner h2:before {
      content: '';
      display: block;
      width: 10px;
      height: 1px;
      background-color: #f99b97;
      position: absolute;
      top: 76px;
      left: 80px; }
      @media only screen and (max-width: 768px) {
        .cont_inner h2:before {
          top: 45px;
          left: 20px; } }
    .cont_inner h2:after {
      content: 'Recruit';
      font-size: 12px;
      letter-spacing: 0.1em;
      color: #f99b97;
      position: absolute;
      top: 70px;
      left: 95px;
      font-family: Roboto;
      font-weight: 500; }
      @media only screen and (max-width: 768px) {
        .cont_inner h2:after {
          font-size: 10px;
          top: 40px;
          left: 35px; } }
  .cont_inner .pan_nav {
    font-size: 12px;
    position: absolute;
    width: 95%;
    top: 34px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: right;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .cont_inner .pan_nav {
        width: 90%;
        top: auto;
        bottom: -120px; } }
    .cont_inner .pan_nav ul li {
      display: inline-block;
      /*a*/ }
      .cont_inner .pan_nav ul li:last-child:after {
        display: none; }
      .cont_inner .pan_nav ul li:after {
        content: "〉";
        padding-left: 8px; }
      .cont_inner .pan_nav ul li a {
        color: #ed0100;
        transiton: 0.3; }
        .cont_inner .pan_nav ul li a:hover {
          opacity: 0.7; }
  .cont_inner p.read_copy {
    width: 1000px;
    margin: 30px auto 90px;
    line-height: 2em;
    font-size: 16px;
    letter-spacing: 0.1em;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .cont_inner p.read_copy {
        width: 90%;
        margin: 20px auto 30px;
        font-size: 14px;
        line-height: 1.8em; } }
    .cont_inner p.read_copy:after {
      content: "Recruit";
      font-size: 200px;
      letter-spacing: 0.01em;
      font-family: Roboto;
      font-weight: 600;
      color: #fef1f0;
      position: absolute;
      top: 20px;
      right: -50px;
      z-index: -1;
      opacity: 0;
      animation: en_anim 0.8s  1.0s ease-in-out;
      animation-fill-mode: forwards; }
      @media only screen and (max-width: 768px) {
        .cont_inner p.read_copy:after {
          font-size: 20vw;
          top: -25px;
          right: -20px; } }
  .cont_inner #loopslider {
    margin: 0 auto 100px;
    width: 100%;
    height: 204px;
    text-align: left;
    position: relative;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .cont_inner #loopslider {
        margin: 0 auto 50px;
        height: 150px; } }
  .cont_inner #loopslider ul {
    height: 204px;
    float: left;
    display: inline;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .cont_inner #loopslider ul {
        height: 150px; } }
  .cont_inner #loopslider ul li {
    width: 300px;
    height: 204px;
    float: left;
    display: inline;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .cont_inner #loopslider ul li {
        width: 220px;
        height: 150px; } }
  .cont_inner #loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden; }
  .cont_inner #loopslider ul {
    display: inline-block;
    overflow: hidden; }
  .cont_inner .message {
    width: 1000px;
    margin: 0 auto 50px; }
    @media only screen and (max-width: 768px) {
      .cont_inner .message {
        width: 90%;
        margin-bottom: 30px; } }
    .cont_inner .message h3 {
      font-size: 20px;
      margin-bottom: 20px;
      letter-spacing: 0.1em;
      font-weight: 500; }
    .cont_inner .message p {
      line-height: 2em; }
      @media only screen and (max-width: 768px) {
        .cont_inner .message p {
          line-height: 1.8em; } }

/*.cont_inner*/
.wrap {
  width: 1000px;
  height: 1100px;
  margin: 0 auto;
  /*.btn_area*/ }
  @media only screen and (max-width: 768px) {
    .wrap {
      width: 90%;
      height: auto; } }
  .wrap .btn_area {
    width: 900px;
    float: left;
    margin-bottom: 70px;
    position: relative;
    /*image*/
    /*.btn a*/ }
    @media only screen and (max-width: 768px) {
      .wrap .btn_area {
        width: 100%;
        float: none;
        margin-bottom: 130px; } }
    .wrap .btn_area .image {
      width: 780px;
      height: 380px;
      position: absolute;
      top: 0;
      left: 0; }
      @media only screen and (max-width: 768px) {
        .wrap .btn_area .image {
          width: 100%;
          height: auto;
          position: static; } }
    .wrap .btn_area .btn a {
      display: block;
      width: 380px;
      height: 150px;
      background-color: #2b2b2b;
      position: absolute;
      right: 0;
      top: 280px;
      z-index: 2;
      box-shadow: 20px 20px 0 #fff2f2;
      transition: 0.3s;
      cursor: pointer;
      /* h4*/
      /*p*/ }
      @media only screen and (max-width: 768px) {
        .wrap .btn_area .btn a {
          width: 65vw;
          height: 90px;
          top: auto;
          bottom: -70px;
          right: 0;
          left: 0;
          margin: 0 auto;
          box-shadow: none; } }
      .wrap .btn_area .btn a h4 {
        font-family: Roboto;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.1em;
        font-size: 40px;
        margin-bottom: 10px;
        padding-top: 40px; }
        @media only screen and (max-width: 768px) {
          .wrap .btn_area .btn a h4 {
            padding-top: 15px;
            font-size: 30px; } }
      .wrap .btn_area .btn a p {
        font-size: 12px;
        letter-spacing: 0.1em;
        font-weight: 500;
        position: relative; }
        .wrap .btn_area .btn a p:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 5px 0 5px 8.7px;
          border-color: transparent transparent transparent #ed0100;
          position: absolute;
          top: 2px;
          right: 120px;
          transition: 0.3s; }
          @media only screen and (max-width: 768px) {
            .wrap .btn_area .btn a p:after {
              right: 15vw; } }
      .wrap .btn_area .btn a:hover {
        background-color: #ed0100;
        top: 290px;
        right: -10px;
        box-shadow: none; }
        @media only screen and (max-width: 768px) {
          .wrap .btn_area .btn a:hover {
            top: auto;
            bottom: -60px; } }
        .wrap .btn_area .btn a:hover p:after {
          border-color: transparent transparent transparent #ffffff;
          right: 110px; }
          @media only screen and (max-width: 768px) {
            .wrap .btn_area .btn a:hover p:after {
              right: 14vw; } }
    .wrap .btn_area:nth-of-type(2) {
      float: right;
      /*.btn a*/ }
      @media only screen and (max-width: 768px) {
        .wrap .btn_area:nth-of-type(2) {
          float: none; } }
      .wrap .btn_area:nth-of-type(2) .image {
        left: auto;
        right: 0;
        top: 440px; }
      .wrap .btn_area:nth-of-type(2) .btn a {
        right: auto;
        left: 0;
        top: 720px;
        box-shadow: -20px 20px 0 #fff2f2; }
        @media only screen and (max-width: 768px) {
          .wrap .btn_area:nth-of-type(2) .btn a {
            width: 65vw;
            height: 90px;
            top: auto;
            bottom: -70px;
            right: 0;
            left: 0;
            margin: 0 auto;
            box-shadow: none; } }
        .wrap .btn_area:nth-of-type(2) .btn a p:after {
          content: "";
          right: 145px; }
          @media only screen and (max-width: 768px) {
            .wrap .btn_area:nth-of-type(2) .btn a p:after {
              right: 20vw; } }
        .wrap .btn_area:nth-of-type(2) .btn a:hover {
          background-color: #ed0100;
          top: 730px;
          left: -10px;
          box-shadow: none; }
          @media only screen and (max-width: 768px) {
            .wrap .btn_area:nth-of-type(2) .btn a:hover {
              top: auto;
              left: 0;
              bottom: -60px; } }
          .wrap .btn_area:nth-of-type(2) .btn a:hover p:after {
            border-color: transparent transparent transparent #ffffff;
            right: 135px; }
            @media only screen and (max-width: 768px) {
              .wrap .btn_area:nth-of-type(2) .btn a:hover p:after {
                right: 19vw; } }
  .wrap .btn a {
    opacity: 0; }
  .wrap .btn a.visible {
    animation: fadeUp2 1.0s 0.5s ease-in-out;
    animation-fill-mode: forwards; }

/*.wrap*/
@keyframes fadeUp2 {
  0% {
    opacity: 0;
    transform: translateY(30px); }
  100% {
    opacity: 1;
    transform: translateY(0px); } }
@keyframes fadeUp {
  0% {
    opacity: 0;
    top: -40px; }
  100% {
    opacity: 1;
    top: -70px; } }
@keyframes fadeUpSp {
  0% {
    opacity: 0;
    top: -10px; }
  100% {
    opacity: 1;
    top: -45px; } }
@keyframes en_anim {
  0% {
    opacity: 0;
    letter-spacing: 0.1em; }
  100% {
    opacity: 1;
    letter-spacing: 0.02em; } }
.contact_area {
  border-top: 1px solid #dddddd; }