.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; } }
main {
  text-align: center;
  font-size: 0;
  line-height: 1; }

@media screen and (min-width: 769px) {
  .animation-up {
    opacity: 0;
    position: relative;
    top: 30px;
    transition: opacity 0.3s, top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

  .itemshow {
    opacity: 1;
    top: 0; }

  .section01 {
    background: url(/images/recruit/production02/mv.jpg) center top no-repeat;
    height: 2030px;
    border-top: 2px solid #000; }
    .section01:after {
      content: '';
      height: 121px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0; }
    .section01 h1 {
      background: url(/images/recruit/production02/catch.png) left top no-repeat;
      width: 1200px;
      margin: 0 auto;
      height: 590px; }
    .section01 p {
      padding: 0 0 39px 608px;
      color: #c5b877;
      font-size: 16px;
      line-height: 24px;
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: left;
      font-weight: bold;
      letter-spacing: 0.1em; }
      .section01 p span {
        display: block; }
    .section01 h2 {
      background: url(/images/recruit/production02/h202.png) center top no-repeat;
      height: 135px;
      margin: 40px 0 15px; }
    .section01 h3 {
      width: 1200px;
      margin: 0 auto; }
    .section01 .job01 {
      background: url(/images/recruit/production02/job01.png) center top no-repeat;
      height: 235px;
      margin-bottom: 15px; }
    .section01 .job02 {
      background-image: url(/images/recruit/production02/job02.png);
      height: 230px;
      margin-bottom: 12px; }
    .section01 .job03 {
      background-image: url(/images/recruit/production02/job03.png?1216);
      height: 256px;
      margin-bottom: 15px; }
    .section01 .job04 {
      background-image: url(/images/recruit/production02/job04.png);
      height: 290px;
      margin-bottom: 15px; }
    .section01 .job05 {
      background-image: url(/images/recruit/production02/job05.png);
      height: 150px;
      margin-bottom: 75px; }

  .section02 {
    background: #f9cb7a center top no-repeat;
    height: 150px;
    padding: 1px 30px; }
    .section02 .others {
      background: url(/images/recruit/production02/others.png) left top no-repeat;
      width: 1200px;
      height: 82px;
      margin: 30px auto;
      position: relative;
      padding-right: 6px; }
      .section02 .others .btn {
        float: left;
        border: 3px solid #4d290f;
        width: 404px;
        margin-left: 298px; }
        .section02 .others .btn a {
          background: url(/images/recruit/production02/btn-mid-career.png) center center no-repeat;
          width: 398px;
          height: 76px;
          display: block;
          position: relative;
          overflow: hidden; }
          .section02 .others .btn a:after {
            content: '';
            background: url(/images/recruit/production02/btn-mid-career-ov.png) center center no-repeat;
            width: 398px;
            height: 76px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 0.3s ease; }
          .section02 .others .btn a:before {
            content: '';
            background: #4d290f;
            width: 100%;
            height: 76px;
            display: block;
            position: absolute;
            left: -101%;
            top: 0;
            transition: 0.3s ease;
            pointer-events: none; }
          .section02 .others .btn a:hover:after {
            opacity: 1; }
          .section02 .others .btn a:hover:before {
            left: 0; }
      .section02 .others .btn2 {
        float: left;
        border: 3px solid #4d290f;
        width: 482px;
        margin-left: 10px; }
        .section02 .others .btn2 a {
          background: url(/images/recruit/production02/btn-freelance.png) center center no-repeat;
          width: 476px;
          height: 76px;
          display: block;
          position: relative;
          overflow: hidden; }
          .section02 .others .btn2 a:after {
            content: '';
            background: url(/images/recruit/production02/btn-freelance-ov.png) center center no-repeat;
            width: 476px;
            height: 76px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 0.3s ease; }
          .section02 .others .btn2 a:before {
            content: '';
            background: #4d290f;
            width: 100%;
            height: 76px;
            display: block;
            position: absolute;
            left: -101%;
            top: 0;
            transition: 0.3s ease;
            pointer-events: none; }
          .section02 .others .btn2 a:hover:after {
            opacity: 1; }
          .section02 .others .btn2 a:hover:before {
            left: 0; }

  nav.ln2 {
    background: #000;
    text-align: center;
    font-size: 0;
    line-height: 1;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 100; }
    nav.ln2 ul li {
      display: inline-block;
      vertical-align: top;
      padding: 0 25px; }
      nav.ln2 ul li a {
        line-height: 70px;
        display: inline-block;
        transition: 0.3s; }
        nav.ln2 ul li a img {
          vertical-align: middle; }
        nav.ln2 ul li a:hover {
          opacity: 0.5; }

  .recruit-subpage.zelda main {
    padding: 0; }
  .recruit-subpage.zelda section {
    width: auto; }
    .recruit-subpage.zelda section.section02 {
      padding: 1px 30px;
      height: 160px; }
    .recruit-subpage.zelda section + section {
      margin-top: 0; }
    .recruit-subpage.zelda section h2 {
      font-size: 0; }
    .recruit-subpage.zelda section ul li, .recruit-subpage.zelda section ol li {
      font-size: 0; }
    .recruit-subpage.zelda section .btn {
      font-size: 0; }
    .recruit-subpage.zelda section .btn2 {
      font-size: 0; } }
@media screen and (min-width: 1920px) {
  .section01 {
    background-size: 100% auto; }

  .section02 {
    background-size: 100% auto; } }
@media screen and (max-width: 768px) {
  .animation-up {
    opacity: 0;
    position: relative;
    top: 2.93vw;
    transition: opacity 0.3s, top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

  .itemshow {
    opacity: 1;
    top: 0; }

  html {
    font-size: calc(100vw / 32); }

  .section01 {
    background: url(/images/recruit/production02/sp/mv.jpg) center top no-repeat;
    height: auto;
    border-top: 1px solid #000;
    background-size: 100% auto;
    position: relative; }
    .section01 .wrap {
      position: relative;
      height: 70vw; }
    .section01 h1 {
      background: url(/images/recruit/production02/sp/catch.png) left top no-repeat;
      width: 100%;
      height: 70vw;
      background-size: 100% auto;
      position: absolute;
      left: 0;
      top: 0; }
    .section01 h2 {
      background: url(/images/recruit/production02/h202.png) center top no-repeat;
      height: 19.531vw;
      background-size: 100% auto;
      margin: 1.465vw 0 5.859vw !important; }
    .section01 h3 {
      width: 100%;
      background-size: 100% auto !important;
      background-repeat: no-repeat; }
    .section01 .job01 {
      background: url(/images/recruit/production02/sp/job01.png) center top no-repeat;
      height: 37.25vw;
      margin-bottom: 1.953vw; }
    .section01 .job02 {
      background-image: url(/images/recruit/production02/sp/job02.png?0214);
      height: 36.7vw;
      margin-bottom: 1.953vw; }
    .section01 .job03 {
      background-image: url(/images/recruit/production02/sp/job03.png?1216);
      height: 29.297vw;
      margin-bottom: 2.441vw; }
    .section01 .job04 {
      background-image: url(/images/recruit/production02/sp/job04.png);
      height: 45.898vw;
      margin-bottom: 2.441vw; }
    .section01 .job05 {
      background-image: url(/images/recruit/production02/sp/job05.png);
      height: 23.926vw;
      margin-bottom: 2.441vw; }

  .section02 {
    background: #f9cb7a;
    height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0);
    background-size: 100% auto;
    overflow: hidden;
    border-bottom: 1px solid #fff; }
    .section02 .others {
      background: url(/images/recruit/production02/sp/others.jpg) center top no-repeat;
      width: 100%;
      height: 56.641vw;
      position: relative;
      background-size: 120% auto;
      margin: 3.906vw auto; }
      .section02 .others .btn {
        border: 0.488vw solid #512903;
        position: absolute;
        top: 23.926vw;
        z-index: 10;
        left: 13.672vw; }
        .section02 .others .btn a {
          background: url(/images/recruit/production02/sp/btn-mid-career.jpg) center center no-repeat;
          width: 72.07vw;
          height: 12.891vw;
          display: block;
          overflow: hidden;
          background-size: 107% auto; }
          .section02 .others .btn a:after {
            content: '';
            opacity: 0; }
          .section02 .others .btn a:before {
            content: '';
            opacity: 0; }
          .section02 .others .btn a:hover:after {
            opacity: 0; }
      .section02 .others .btn2 {
        border: 0.488vw solid #512903;
        position: absolute;
        top: 39.063vw;
        z-index: 10;
        left: 13.672vw; }
        .section02 .others .btn2 a {
          background: url(/images/recruit/production02/sp/btn-freelance.jpg) center center no-repeat;
          width: 72.07vw;
          height: 12.891vw;
          display: block;
          overflow: hidden;
          background-size: 107% auto; }
          .section02 .others .btn2 a:after {
            content: '';
            opacity: 0; }
          .section02 .others .btn2 a:before {
            content: '';
            opacity: 0; }
          .section02 .others .btn2 a:hover:after {
            opacity: 0; } }
#siteHeader nav ul li:nth-child(5) a:before {
  opacity: 1; }
#siteHeader nav ul li:nth-child(5) a:hover:after {
  opacity: 0; }

.pageTitle b i {
  width: 186px; }

/* 2021 - 12 - 03  */
.recruit-subpage.zelda main {
  padding: 0; }
.recruit-subpage.zelda section {
  width: auto; }
  .recruit-subpage.zelda section + section {
    margin-top: 0; }
  .recruit-subpage.zelda section h2 {
    font-size: 0; }
  .recruit-subpage.zelda section ul li, .recruit-subpage.zelda section ol li {
    font-size: 0; }
  .recruit-subpage.zelda section .btn {
    font-size: 0; }
  .recruit-subpage.zelda section .btn2 {
    font-size: 0; }