@charset 'UTF-8';

.modal-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 9999;
}

.modal-inner-box-wrap {
  width: 100%;
  height: 100%;
  display: table;
}

.modal-inner-box {
  display: table-cell;
  vertical-align: middle;
  padding: 4rem 0;
}

.modal-contents-wrap {
  width: 90%;
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 1.6rem;
  position: relative;
}

.modal-contents {
  padding: 4rem 2rem;
}

.modal-close-button {
  display: block;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: -1rem;
  right: -1rem;
  text-decoration: none;
}

.modal-close-button-icon {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal-close-button-icon::before,
.modal-close-button-icon::after {
  content: "";
  display: block;
  background-color: #FFF;
  width: 4rem;
  height: 0.4rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.modal-close-button-icon::before {
  transform: rotate(45deg);
}

.modal-close-button-icon::after {
  transform: rotate(-45deg);
}

.special-alloy-business-color {
  background-color: #0062B1;
}

.commercial-business-color {
  background-color: #005873;
}

.chemicals-business-color {
  background-color: #006600;
}

.energy-business-color {
  background-color: #947B47;
}

.business-logo-wrap img {
  width: 90%;
}

.business-image {
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 0;
  margin: 2rem 0;
  padding-top: 53.57142857142857% /* 可変にしたいので「150px(画像の高さ) ÷ 280px(画像の幅) × 100」で割合を算出 */
}

.special-alloy-business-image {
  background-image: url("../../img/recruit/works/recruit_works_special_alloy_business_sp.png");
}

.commercial-business-image {
  background-image: url("../../img/recruit/works/recruit_works_commercial_business_sp.png");
}

.chemicals-business-image {
  background-image: url("../../img/recruit/works/recruit_works_chemicals_business_sp.png");
}

.energy-business-image {
  background-image: url("../../img/recruit/works/recruit_works_energy_business_sp.png");
}

.business-map-box {
  margin: 0 0 4rem;
}

.divisions-map-box {
  margin: 0 0 6rem;
}

.business-map-box img, 
.divisions-map-box img {
  width: 100%;
}

.divisions-box {
  text-align: center;
}

.divisions-introduction {
  display: none;
}

.division-box-title-wrap {
  margin: 0 -1rem; /* ネガティブマージンで親要素を無視して画面いっぱいに広げる。 */
}

.division-box-title {
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 0;
  margin-bottom: 4rem;
  padding-top: 44.8%; /* 可変にしたいので「168px(画像の高さ) ÷ 375px(画像の幅) × 100」で割合を算出 */
}

.sales-title {
  background-image: url("../../img/recruit/works/recruit_works_sales_title_sp.png");
}

.manufacturing-title {
  background-image: url("../../img/recruit/works/recruit_works_manufacturing_title_sp.png");
}

.management-title {
  background-image: url("../../img/recruit/works/recruit_works_management_title_sp.png");
}

.production-engineering-title {
  background-image: url("../../img/recruit/works/recruit_works_production_engineering_title_sp.png");
}

.technological-development-title {
  background-image: url("../../img/recruit/works/recruit_works_technological_development_title_sp.png");
}

.interview-box {
  margin-bottom: 5rem;
}

.interview-image-wrap img {
  width: 100%;
}

.interview-content-wrap {
  margin: 2rem 0;
  text-align: left;
}

.interview-page-link-wrap img {
  width: 80%;
}

@media (min-width: 768px) {

  .modal-contents-wrap {
    width: 50%;
  }

  .modal-contents {
    padding: 4rem;
  }

  .business-logo-wrap img {
    width: 46%;
  }

  .business-image {
    padding-top: 38.13559322033898%; /* 可変にしたいので「225px(画像の高さ) ÷ 590px(画像の幅) × 100」で割合を算出 */
  }

  .special-alloy-business-image {
    background-image: url("../../img/recruit/works/recruit_works_special_alloy_business_pc.png");
  }

  .commercial-business-image {
    background-image: url("../../img/recruit/works/recruit_works_commercial_business_pc.png");
  }

  .chemicals-business-image {
    background-image: url("../../img/recruit/works/recruit_works_chemicals_business_pc.png");
  }

  .energy-business-image {
    background-image: url("../../img/recruit/works/recruit_works_energy_business_pc.png");
  }

  .business-map-box {
    width: 58%;
    margin: 0 auto 10rem;
  }

  .divisions-map-box {
    width: 50%;
    margin: 0 auto 6rem;
  }

  .divisions-introduction {
    display: block;
    margin-bottom: 10rem;
  }

  .division-box {
    margin-bottom: 12rem;
  }

  .division-box-title-wrap {
    /**********************************************************************
     *
     * ネガティブマージンで親要素を無視して画面いっぱいに広げる。
     *
     * 画面に対して親要素の横幅は「width: 96%」なので
     *
     * 96 : 2 = 100 : ネガティブマージン(左右)
     *
     * ネガティブマージン(左右) = (100 / 96 ) * 2
     *
     **********************************************************************/
    margin: 0 -2.083333333333333%;
  }

  .division-box-title {
    padding-top: 17.56954612005857%; /* 可変にしたいので「240px(画像の高さ) ÷ 1366px(画像の幅) × 100」で割合を算出 */
  }

  .sales-title {
    background-image: url("../../img/recruit/works/recruit_works_sales_title_pc.png");
  }

  .manufacturing-title {
    background-image: url("../../img/recruit/works/recruit_works_manufacturing_title_pc.png");
  }

  .management-title {
    background-image: url("../../img/recruit/works/recruit_works_management_title_pc.png");
  }

  .production-engineering-title {
    background-image: url("../../img/recruit/works/recruit_works_production_engineering_title_pc.png");
  }

  .technological-development-title {
    background-image: url("../../img/recruit/works/recruit_works_technological_development_title_pc.png");
  }

  .interview-box {
    display: grid;
    display: -ms-grid;
    grid-template-rows: repeat(2, auto);
    -ms-grid-rows: (auto)[2];
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: (1fr)[2];
  }

  .interview-box div:nth-child(1) {
    grid-row: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-column: 1 / 2;
    -ms-grid-column: 1;
  }

  .interview-box div:nth-child(2) {
    grid-row: 1 / 2;
    -ms-grid-row: 1;
    grid-column: 2 / 3;
    -ms-grid-column: 2;
  }

  .interview-box div:nth-child(3) {
    grid-row: 2 / 3;
    -ms-grid-row: 2;
    grid-column: 2 / 3;
    -ms-grid-column: 2;
  }

  .interview-content-wrap {
    margin: 0 0 0 2rem;
  }

  .interview-page-link-wrap img {
    width: 50%;
  }

}

@media (min-width: 1280px) {

  .division-box-title-wrap {
    /**********************************************************************
     *
     * ネガティブマージンで親要素を無視して画面いっぱいに広げる。
     *
     * 画面に対して親要素の横幅は「width: 72%」なので
     *
     * 72 : 14 = 100 : ネガティブマージン(左右)
     *
     * ネガティブマージン(左右) = (100 / 72) * 14
     *
     **********************************************************************/
    margin: 0 -19.44444444444444%;
  }

}