/*-----------------------------------

      recruit

    -----------------------------------*/
    #container .contents {
      width: 100%;
      margin: 0 auto;
      text-align: left;
      font-size: .9375rem;
      color: #333;
    }

    #container .key-visual {
      position: relative;
      width: 90%;
      max-width: 1460px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #container .key-visual .img-area,
    #container .key-visual .img-area img {
      width: 100%;
    }

    #container .key-visual h1 {
      position: absolute;
      top: 16%;
      transform: translateY(-50%) translateX(-50%);
      left: 18%;
      color: #fff;
      font-size: 2.375rem;
      font-weight: 700;
    }

    #container .key-visual .copy {
      top: 25%;
      left: 16%;
    }

    #container .key-visual .copy,
    #container .key-visual>p {
      position: absolute;
      transform: translateY(-50%) translateX(-50%);
      color: #fff;
      font-size: 1.375rem;
    }

    #container .key-visual>p {
      bottom: 10%;
      right: 4%;
    }

    #container .navi {
      width: 80%;
      margin: 0 auto;
    }

    #container .navi,
    #container .navi li {
      display: flex;
      justify-content: center;
    }

    #container .navi li {
      width: 332px;
      height: 66px;
      margin: 5px 2.5px 0;
      background-color: #f08300;
      align-items: center;
      position: relative;
    }

    #container .navi li a {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #fff;
      opacity: 0;
    }

    #container .navi li b {
      color: #fff;
      font-size: 1.125rem;
    }

    #container .navi li b .sp-br {
      display: none;
    }

    #container .navi .right-orange {
      background-color: #f5a200;
    }

    #container .top {
      width: 100%;
      margin: 144px auto 0;
      text-align: center;
    }

    #container .top .deco {
      font-size: .875rem;
      color: #e94709;
    }

    #container .top h2,
    #container .top h3 {
      margin-top: 17px;
      font-size: 1.5625rem;
      font-weight: 700;
    }

    #container .top h3 {
      margin-top: 55px;
      color: #e94709;
    }

    #container .top p {
      margin-top: 40px;
      line-height: 2;
    }

    #container .company-profile {
      margin-top: 126px;
      text-align: center;
    }

    #container .company-profile .company-container,
    #container .company-profile .facility-container {
      display: flex;
      justify-content: center;
    }

    #container .company-profile .company-container .photo,
    #container .company-profile .company-container .text,
    #container .company-profile .facility-container .photo,
    #container .company-profile .facility-container .text {
      width: 599px;
      height: 251px;
      background-color: #faf7f2;
    }

    #container .company-profile .company-container .photo>img,
    #container .company-profile .company-container .text>img,
    #container .company-profile .facility-container .photo>img,
    #container .company-profile .facility-container .text>img {
      display: none;
    }

    #container .company-profile .subtext {
      width: 476px;
      margin: 10px auto 0;
      line-height: 2;
    }

    #container .company-profile .text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #container .company-profile .text .button {
      margin-top: 30px;
      width: 240px;
      height: 43px;
      border: 2px solid #e94709;
      background-color: #faf7f2;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    #container .company-profile .text .button .hover {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: #e94709;
    }

    #container .company-profile .text .button div {
      color: #e94709;
    }

    #container .company-profile .text .button img {
      margin-left: 20px;
    }

    #container .company-profile .title {
      margin-top: 105px;
      color: #fff;
      font-size: 1.875rem;
      letter-spacing: 6px;
      font-weight: 400;;
    }

    #container .company-profile .subtitle {
      margin-top: 20px;
      color: #fff;
    }

    #container .company-profile .company-container .subtext {
      margin-top: 44px;
    }

    #container .company-profile .company-container .photo {
      background-image: url(../img/recruit/company.0bc4479.png);
    }

    #container .company-profile .facility-container .subtext {
      margin-top: 57px;
    }

    #container .company-profile .facility-container button {
      width: 230px;
    }

    #container .company-profile .facility-container .photo {
      background-image: url(../img/recruit/facility.d813427.png);
    }

    #container .band {
      width: 100%;
      max-width: 1460px;
      height: 220px;
      background-image: url(../img/recruit/band.0995d72.png);
      background-size: cover;
      background-repeat: no-repeat;
      margin: 99px auto auto;
    }

    #container .band .next {
      width: 195px;
      margin-left: 75%;
      padding-top: 95px;
      line-height: 2.5;
      border-bottom: 1px solid #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #container .band .next p {
      color: #fff;
    }

    #container .band .next img {
      width: 20px;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content;
    }

    #container .interview .back-color {
      width: 100%;
      height: auto;
      margin-top: 34px;
      padding: 57px 0;
      background-color: rgba(172, 176, 180, .241);
    }

    #container .interview .interview-container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    #container .interview .interview-container li {
      width: 50%;
      position: relative;
    }

    #container .interview .interview-container li>img {
      width: 100%;
    }

    .interview .interview-container li>div {
      position: absolute;
      top: 9%;
      left: 9%;
    }

    #container .interview .interview-container li>div .title {
      color: #fff;
      font-size: 1.5625rem;
      font-weight: 400;;
    }

    #container .interview .interview-container li>div .post {
      margin-top: 1em;
    }

    #container .interview .interview-container li>div .post span {
      color: #fff;
      margin-bottom: .5em;
      display: inline-block;
    }

    #container .interview .interview-container li>div .name {
      margin-top: .2em;
      margin-bottom: 7px;
      font-size: 1.875rem;
      color: #fff;
    }

    #container .interview .interview-container li>div .romanization {
      color: #fff;
    }

    #container .interview .interview-container li .next {
      position: absolute;
      bottom: 10%;
      right: 5%;
      display: flex;
      width: 30%;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #fff;
    }

    #container .interview .interview-container li .next p {
      color: #fff;
    }

    #container .interview .interview-container .sdgs-box {
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    #container .interview .interview-container .sdgs-box a {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #container .interview .interview-container .sdgs-box a .sdgs-title {
      color: #fff;
      font-size: 1.875rem;
      letter-spacing: 6px;
    }

    #container .interview .interview-container .sdgs-box a .sdgs-sub {
      color: #fff;
      font-size: .9375rem;
      margin-top: 20px;
    }

    #container .application .link {
      display: flex;
      justify-content: center;
      margin-top: 37px;
    }

    #container .application .link>div {
      width: calc(50vw - 40px);
      max-width: 420px;
      height: 120px;
      border: 2px solid #f08300;
      border-radius: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
    }

    #container .application .link>div .hover {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #e94709;
      opacity: 0;
    }

    #container .application .link>div>div {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding-left: 42px;
      text-align: center;
    }

    #container .application .link>div>div .subtext {
      font-size: .9375rem;
      text-align: left;
      color: #f08300;
      font-weight: 500;
      margin-bottom: 13px;
    }

    #container .application .link>div>div .main-text {
      color: #f08300;
      font-size: 1.5625rem;
    }

    #container .application .link>div>div .bnr {
      width: 25vw;
      max-width: 180px;
      height: auto;
    }

    #container .application .link>div .arrow {
      padding-right: 34px;
    }

    #container .application .link button {
      width: 420px;
      height: 105px;
      padding-left: 42px;
      padding-right: 34px;
      border: 2px solid #f08300;
      border-radius: 10px;
      background-color: #fff;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
    }

    #container .application .link button .subtext {
      font-size: .9375rem;
      color: #f08300;
      font-weight: 500;
      margin-bottom: 13px;
    }

    #container .application .link button .main-text {
      color: #f08300;
      font-size: 1.5625rem;
    }

    #container .application .link a:first-child {
      margin-right: 1%;
    }

    #container .application .table-title {
      width: 1200px;
      margin: 122px auto 27px;
      font-size: 1.5625rem;
      font-weight: 700;
    }

    #container .application table.info {
      width: 1200px !important;
      margin: 0 auto 164px;
      border-collapse: collapse;
    }

    #container .application table.info td,
    #container .application table.info th {
      border: 1px solid #ddd;
    }

    #container .application table.info th {
      width: 320px;
      padding-left: 28px;
      background-color: #fafafa;
      font-weight: 500;
    }

    #container .application table.info td {
      padding: 30px;
      line-height: 2;
    }

    #container .application table.info td .head {
      font-weight: 500;
    }

    #container .application table.info td .space {
      margin-top: 28px;
    }

    #container .application table.info td .space-bottom {
      margin-bottom: 28px;
    }

    #container .application table.time td,
    #container .application table.time th {
      width: 90px;
      border: none;
      background-color: #fff;
      font-weight: 400;
      vertical-align: top;
      padding: 0;
    }

    @media screen and (max-width:1240px) {
      #container .company-profile {
        margin-left: 25px;
        margin-right: 25px;
     }

      #container .interview .interview-container {
        width: 1000px;
        margin: 0 auto;
     }

      #container .interview .interview-container li {
        width: 500px;
     }

      #container .application .table-title,
      #container .application table.info {
        width: 94% !important;
     };
    }

    @media screen and (max-width:1080px) {
      #container .key-visual h1 {
        font-size: 1.5rem;
     }

      #container .key-visual .copy {
        font-size: 1rem;
     }

      #container .key-visual>p {
        font-size: .8rem;
     }

      #container .top {
        margin-top: 50px;
        width: 90%;
     }

      #container .company-profile {
        width: 90%;
        margin: 60px auto auto;
     }

      #container .company-profile .company-container {
        flex-direction: column-reverse;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        width: 100%;
     }

      #container .company-profile .company-container .photo {
        background-image: none;
        position: relative;
        width: 100%;
        height: auto;
     }

      #container .company-profile .company-container .photo img {
        display: block;
        width: 100%;
     }

      #container .company-profile .company-container .photo>div {
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left: 50%;
      }

      #container .company-profile .company-container .photo>div .title {
        margin-top: 0;
      }

      #container .company-profile .company-container .text {
        width: 100%;
        height: auto;
        padding-bottom: 30px;
      }

      #container .company-profile .company-container .text .subtext {
        width: auto;
      }

      #container .company-profile .facility-container {
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
      }

      #container .company-profile .facility-container .photo {
        background-image: none;
        position: relative;
        width: 100%;
        height: auto;
      }

      #container .company-profile .facility-container .photo img {
        display: block;
        width: 100%;
      }

      #container .company-profile .facility-container .photo>div {
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left: 50%;
      }

      #container .company-profile .facility-container .photo>div .title {
        margin-top: 0;
      }

      #container .company-profile .facility-container .text {
        width: 100%;
        height: auto;
        padding-bottom: 30px;
      }

      #container .company-profile .facility-container .text .subtext {
        width: auto;
      }

      #container .band {
        display: none;
      }

      #container .interview .interview-container {
        width: 90%;
        flex-direction: column;
      }

      #container .interview .interview-container li {
        width: 100%;
      }

      #container .application .link>div:first-child {
        margin-bottom: 1em;
      }
    }

    @media screen and (max-width:600px) {
      #container .key-visual h1 {
        font-size: 1.2rem;
      }

      #container .key-visual .copy {
        font-size: .8rem;
      }

      #container .key-visual>p {
        font-size: .7rem;
        bottom: 5%;
        right: -7%;
      }

      #container .navi li {
        width: 30%;
        height: auto;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      #container .navi li b .sp-br {
        display: block;
      }

      #container .interview .interview-container li>div .post {
        margin-top: .5em;
      }

      #container .interview .interview-container li>div .post span {
        margin-bottom: 0;
      }

      #container .interview .interview-container li>div .title {
        font-size: 1.3rem;
      }

      #container .interview .interview-container li>div .name {
        font-size: 1.5rem;
      }

      #container .interview .interview-container li .next {
        width: 40%;
      }

      #container .application .link {
        flex-direction: column;
        align-items: center;
      }

      #container .application .link>div {
        width: 100%;
      }

      #container .application .link>div>div img {
        padding-right: 0;
      }

      #container .application .link>div>div .bnr {
        width: 35vw;
      }

      #container .application .table-title {
        margin-top: 40px;
      }

      #container .application table.info {
        margin-bottom: 30px;
      }

      #container .application table.info th {
        padding: 0;
        text-align: center;
      }
    }

    @media (hover:hover) {

      #container .application .link>div .hover:hover,
      #container .company-profile .text .button .hover:hover,
      #container .navi li a:hover {
        opacity: .4;
      }
    }