@charset "utf-8";
/* ==============================================================
   RECRUIT
============================================================== */

/* ================ RECRUIT INTRO ================ */

.recruit-visual {
   background-image: url("../img/recruit/fv.jpg");

   background-repeat: no-repeat;
   background-position: center 53%;
   background-size: cover;
}

.recruit-intro {
   padding: 120px 0 0;

   .recruit-intro-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
   }

   .recruit-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.5rem;

      .recruit-read {
         font-size: clamp(18px, 2vw, 24px);
         font-weight: 700;
         line-height: 1.7;
      }

      .recruit-text {
         font-size: 0.875rem;
         line-height: 2.1;
      }
   }

   .recruit-image {
      overflow: hidden;
      border-radius: 8px;

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }
}

/* ================ RECRUIT BENEFITS ================ */
.recruit-benefits {
   padding: 120px 0 0;

   .recruit-benefits-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }

   .recruit-benefits-intro {
      font-size: 0.875rem;
      line-height: 2;
   }

   .recruit-benefit-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(1rem, 2.1vw, 2.5rem);

      .recruit-benefit-card {
         padding: 2rem 1.5rem;
         background-color: var(--background-beige);
         border-radius: 8px;
         text-align: center;

         .recruit-benefit-icon {
            width: 120px;
         }

         .recruit-benefit-content {
            display: flex;
            flex-direction: column;
            align-items: center;

            .recruit-benefit-title {
               min-height: 3.5rem;

               display: grid;
               place-items: center;

               font-size: clamp(1rem, calc(0.75rem + 0.5vw), 1.25rem);
               font-weight: 700;
               line-height: 1.4;
            }

            .recruit-benefit-line {
               width: 40px;
               height: 3px;
               margin: 0.5rem 0 1rem 0;
               background-color: var(--green);
            }

            .recruit-benefit-description {
               font-size: 0.875rem;
               line-height: 2;
            }
         }
      }
   }
}

/* ================ RECRUIT SUPPORT ================ */
.recruit-support {
   padding: 120px 0;

   .recruit-support-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .recruit-support-title {
         font-size: clamp(18px, 2vw, 24px);
         font-weight: 700;
         line-height: 1.7;
      }

      .recruit-support-description {
         font-size: 0.875rem;
         line-height: 2.1;
      }
   }
}

/* ================ RECRUIT WORKPLACE ================ */
.recruit-workplace {
   background-color: var(--background-beige);
   padding: 100px 0;

   .recruit-workplace-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }

   .recruit-workplace-title {
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      line-height: 1.7;
   }

   .recruit-workplace-description {
      font-size: 0.875rem;
      line-height: 2.1;
   }

   .recruit-workplace-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;

      .recruit-workplace-card {
         width: 100%;
         aspect-ratio: 1 / 1;
         box-sizing: border-box;

         display: grid;
         place-items: center;
         align-content: center;
         row-gap: 2rem;
         background-color: var(--white);
         padding: 1rem;
         border-radius: 8px;

         p {
            font-weight: 700;
            font-size: clamp(0.6875rem, 1vw, 1rem);
         }
      }
   }
}

/* ================ RECRUIT TABLE ================ */
.recruit-description {
   padding: 120px 0;

   .recruit-description-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .recruit-description-text {
         font-size: 0.875rem;
         line-height: 2.1;
      }
   }
}

.recruit-table {
   width: 100%;

   border-collapse: collapse;
   table-layout: fixed;

   th,
   td {
      padding: 20px 24px;

      text-align: left;
      vertical-align: middle;

      font-size: 0.875rem;
      line-height: 1.8;
   }

   th {
      width: 24%;

      border-top: 1px solid var(--green);
      border-bottom: 1px solid var(--green);

      font-weight: 700;
   }

   td {
      border-top: 1px solid var(--lightgray);
      border-bottom: 1px solid var(--lightgray);

      a {
         text-decoration: underline;
         text-underline-offset: 3px;

         transition: color 0.3s ease;

         @media (hover: hover) and (pointer: fine) {
            &:hover {
               color: var(--green);
            }
         }
      }
   }
}



@media (max-width: 1024px) {
   .recruit-workplace {
      .recruit-workplace-list {
         grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: 0.5rem;

         .recruit-workplace-card {
            grid-column: span 2;

            aspect-ratio: 1 / 1;
            padding: 0.75rem 0.5rem;

            align-content: center;
            gap: 0.5rem;

            img {
               width: clamp(36px, 12vw, 72px);
               height: auto;
               object-fit: contain;
            }

            p {
               font-size: 0.75rem;
               line-height: 1.4;
               white-space: normal;
               text-align: center;
            }

            &:nth-child(4) {
               grid-column: 2 / span 2;
            }

            &:nth-child(5) {
               grid-column: 4 / span 2;
            }
         }
      }
   }
}

/* ==============================
   900px以下
============================== */

@media (max-width: 900px) {
   .recruit-intro {
      padding: 80px 0 0;
   }

   .recruit-benefits {
      padding: 80px 0 0;
   }

   .recruit-support {
      padding: 80px 0;
   }

   .recruit-workplace {
      padding: 80px 0;
   }

   .recruit-description {
      padding: 80px 0;
   }

   .recruit-benefits {
      .recruit-benefit-list {
         grid-template-columns: 1fr;
         gap: 0.5rem;

         .recruit-benefit-card {
            min-height: 118px;
            padding: 1.25rem;

            display: grid;
            grid-template-columns: 1fr 3fr;
            align-items: center;
            gap: 1rem;

            text-align: left;

            .recruit-benefit-icon {
               width: clamp(64px, 15vw, 96px);
               justify-self: center;
            }

            .recruit-benefit-content {
               width: 100%;
               align-items: flex-start;
               text-align: left;

               .recruit-benefit-title {
                  min-height: 0;
                  display: block;

                  font-size: 1.1rem;
                  line-height: 1.5;
                  text-align: left;
               }

               .recruit-benefit-line {
                  width: 40px;
                  height: 3px;
                  margin: 0.6rem 0;
               }

               .recruit-benefit-description {
                  font-size: 0.875rem;
                  line-height: 1.8;
                  text-align: left;
               }
            }
         }
      }
   }
}

@media (min-width: 801px) {
   .recruit-benefit-list {
      .recruit-benefit-card.show:nth-child(2) {
         transition-delay: 0.1s;
      }

      .recruit-benefit-card.show:nth-child(3) {
         transition-delay: 0.2s;
      }

      .recruit-benefit-card.show:nth-child(4) {
         transition-delay: 0.3s;
      }
   }

   .recruit-workplace-list {
      .recruit-workplace-card.show:nth-child(2) {
         transition-delay: 0.1s;
      }

      .recruit-workplace-card.show:nth-child(3) {
         transition-delay: 0.2s;
      }

      .recruit-workplace-card.show:nth-child(4) {
         transition-delay: 0.3s;
      }

      .recruit-workplace-card.show:nth-child(5) {
         transition-delay: 0.4s;
      }
   }
}

/* ==============================
   800px以下
============================== */

@media (max-width: 800px) {
   .recruit-intro {
      .recruit-intro-inner {
         grid-template-columns: 1fr;
         grid-template-areas:
            "title"
            "image"
            "read"
            "text"
            "button";
         gap: 1.5rem;
      }

      .recruit-content {
         display: contents;
      }

      .recruit-content .section-title {
         grid-area: title;
      }

      .recruit-read {
         grid-area: read;
      }

      .recruit-text {
         grid-area: text;
         font-size: 0.875rem;
         letter-spacing: 0.06em;
      }

      .recruit-content .btn {
         grid-area: button;
      }

      .recruit-image {
         grid-area: image;
      }
   }


   .recruit-benefits {

      .recruit-benefits-intro {
         br {
            display: none;
         }
      }
   }


   .recruit-workplace {
      padding: 4rem 0;

      .recruit-workplace-description {
         br {
            display: none;
         }
      }
   }


   .recruit-table {
      margin-top: 36px;

      th,
      td {
         padding: 18px 16px;
      }

      th {
         width: 25%;
      }
   }
}


/* ==============================
   600px以下
============================== */

@media (max-width: 600px) {
   .recruit-intro {
      padding: 40px 0 0;
   }

   .recruit-benefits {
      padding: 40px 0 0;
   }

   .recruit-support {
      padding: 40px 0;
   }

   .recruit-workplace {
      padding: 40px 0;
   }

   .recruit-description {
      padding: 40px 0;
   }

   .recruit-table {
      margin-top: 28px;

      tbody {
         display: block;
      }

      tr {
         display: block;
         padding: 20px 0;
         border-bottom: 1px solid var(--lightgray);
      }

      tr:first-child {
         padding-top: 0;
      }

      tr:last-child {
         padding-bottom: 0;
         border-bottom: 0;
      }

      th,
      td {
         display: block;
         width: 100%;
         padding: 0;
         border: 0;

         text-align: left;
      }

      th {
         background-color: transparent;

         color: var(--green);
         font-size: 0.875rem;
         font-weight: 700;
         line-height: 1.5;
      }

      td {
         margin-top: 8px;

         font-size: 0.875rem;
         line-height: 1.8;

         a {
            color: var(--green);
         }
      }

      .company-phone-list {
         display: flex;
         align-items: flex-start;
         flex-direction: column;
         gap: 0;

         font-weight: 300;
      }

      .company-phone-item {
         color: inherit;
         white-space: normal;

         &+.company-phone-item {
            padding-left: 0;

            &::before {
               display: none;
            }
         }
      }
   }
}


/* ==============================
   480px以下
============================== */

@media (max-width: 480px) {
   .recruit-visual {
      background-image: url("../img/recruit/sp-fv.jpg");
      background-position: left center;
      background-size: cover;
   }

   .recruit-benefits {

      .recruit-benefit-list {
         .recruit-benefit-card {
            .recruit-benefit-content {
               .recruit-benefit-title {
                  font-size: 1rem;
               }

               .recruit-benefit-line {
                  width: 40px;
                  height: 3px;
                  margin: 0.5rem 0;
               }

               .recruit-benefit-description {
                  font-size: 0.8125rem;
               }
            }
         }
      }
   }
}