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

.din-200 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 200; }

.din-400 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400; }

@keyframes hoverin {
  0% {
    transform: translateX(-101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout {
  0% {
    transform: translateX(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateX(0);
    left: 101%;
    opacity: 1; } }
@keyframes hoverinreverse {
  0% {
    transform: translateX(101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoveroutreverse {
  0% {
    transform: translateX(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateX(0);
    left: -101%;
    opacity: 1; } }
@keyframes hoverupout {
  0% {
    transform: translateY(0);
    opacity: 1;
    top: 0; }
  100% {
    transform: translateY(0);
    opacity: 1;
    top: -100%; } }
@keyframes hoverupin {
  0% {
    transform: translateY(101%);
    opacity: 1; }
  100% {
    transform: translateY(0);
    opacity: 1; } }


.special-contents main {
    width: 100%;
    padding: 60px 0;
}
  .special-contents main:before {
    content: "";
    width: 1920px;
    height: 1250px;
    background: url(/images/recruit/bg-recruit_top.jpg) no-repeat center top / 100% auto;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0;
  }
    .special-contents main .sec-archives {
      width: 1280px;
      margin: 0 auto 113px;
      padding: 0 90px;
      position: relative; }

      .special-contents main .sec-archives .wrap {
        background: #fff;
        padding: 80px 60px;
        position: relative; }

.special-contents-index { 
    display: flex;
    margin-top: 0;
}
  .special-contents-index:nth-of-type(2), .special-contents-index:nth-of-type(3) {
    margin-top: 60px;
    padding-top: 60px;
    border-top: solid 1px #a3a3a3;
  }
.special-contents-index article { 
    width:600px;
}
  .special-contents-index article img { 
    width:100%;
  }
     .special-contents-index article a img {  transition: filter 0.3s; display: block; }
      .special-contents-index article a:hover img {opacity: 0.7; transition: 0.3s; }


.special-contents main .sec-archives .special-contents-index .item {
    width: calc(100% - 600px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 0 0 60px;
    margin: 20px 0 0;
}
    .special-contents main .sec-archives .special-contents-index .item time {
      margin-bottom: 0.6em;
      font-size: 16px;
      font-family: "din-2014-narrow", sans-serif;
      font-weight: 400;
      color: #b8b8b8;
      letter-spacing: 0.1em;
    }
      .special-contents main .sec-archives .special-contents-index .item p {
        font-size: 18px;
        line-height: 1.42;
        font-weight: bold;
      }

  .special-contents main .sec-archives .special-contents-index .item .btn-base {
    width: 100%;
    margin-top: auto;
  }
  .special-contents main .sec-archives .special-contents-index .item .btn-base:after {
      background:#efefef;
  }
      .special-contents main .sec-archives .special-contents-index .item .btn-base span {
            padding: 13px 0 0 123px;
      }

@media (max-width: 768px) {
.special-contents main {  width: 100%; padding-bottom: 28.32vw; }
  .special-contents main:before { content: none;}
    .special-contents main .sec-archives { width: 100%; margin: 7.324vw auto 28.32vw; padding: 0; }
      .special-contents main .sec-archives .wrap { width: 100%; padding: 6.836vw 6.836vw 12.695vw; }

.special-contents-index { display: flex; flex-wrap: wrap; flex-direction: column;  }
  .special-contents-index:nth-of-type(2), .special-contents-index:nth-of-type(3) { margin-top: 6.836vw; padding-top: 6.836vw;  }
.special-contents-index article { width:100%; }

.special-contents main .sec-archives .special-contents-index .item { width: 100%; margin-top: 3.711vw; padding: 2.93vw; }
    .special-contents main .sec-archives .special-contents-index .item time { font-size: 2.93vw; }
      .special-contents main .sec-archives .special-contents-index .item p { font-size: 3.418vw;  }

  .special-contents main .sec-archives .special-contents-index .item .btn-base { width: 100%; margin-top: 6.836vw;   }