@charset "UTF-8";

.entry {

  /*--------------------------------------------
    ページタイトル
  ---------------------------------------------*/
  .page_title {
    background-image: url("/assets/img/logo_bg_w.png"), url("/assets/img/entry_title_bg.jpg");

    @media (width <= 767px) {
      /* ↓SP用背景画像を別で設定する場合に使用 */
      /* background: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/entry_title_bg_sp.jpg"); */
    }

    .cmn_ttl {
      img { /* ページタイトルsvg画像 */
        width: 252px;

        @media (768px <= width <= 1024px) {
          width: 190px;
        }
        @media (width <= 767px) {
          width: 160px;
        }
      }
    }
  }

  /*--------------------------------------------
    intro
  ---------------------------------------------*/
  .intro {
    padding: 0 0 5%;

    @media (width <= 767px) {
      padding: 0 0 10%;
    }

    .link_txt {
      font-weight: bold;
      text-decoration: underline;
    }
  }

  /*--------------------------------------------
    フォーム
  ---------------------------------------------*/
  .form_area {
    padding: 8% 0 15%;
    background: #F2F2F2;

    @media (width <= 767px) {
      padding: 15% 0 30%;
    }

    .form_ttl {
      font-size: 3.4rem;
      font-weight: bold;
      margin-bottom: 5%;

      @media (width <= 767px) {
        font-size: 2.8rem;
      }
    }

    /* 入力エリア */
    form {
      font-weight: bold;

      .bg_white {
        background-color: #FFF;
        padding: 3% 7% 6.5%;

        @media (width <= 767px) {
          padding: 5% 5% 10%;
        }
      }

      .form_item {
        border-bottom: 3px solid#0F5CA8 ;
        padding: 3.5% 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        @media (width <= 1023px) {
          padding: 4% 0;
          display: block;
        }
        @media (width <= 767px) {
          padding: 8% 0;
        }

        label {
          min-width: 292px;
          margin-right: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 2rem;
          color: #0F5CA8;
          cursor: auto;

          @media (1024px <= width <= 1070px) {
            min-width: 230px;
          }
          @media (width <= 1023px) {
            min-width: auto;
            justify-content: flex-start;
            margin-bottom: 3%;
          }
          @media (width <= 767px) {
            font-size: 1.8rem;
          }
          
          .required {
            padding: 6px 0 7px;
            color: #FFF;
            line-height: 1;
            font-size: 1.6rem;
            background-color: #0F5CA8;
            width: 80px;
            text-align: center;

            @media (width <= 1023px) {
              margin-left: 8px;
            }
            @media (width <= 767px) {
              font-size: 1.5rem;
              padding: 3px 0 5px;
              width: 70px;
            }

          }
        }

        .wrap {
          width: 100%;
        }
        .f_wrap {
          flex-wrap: wrap;
        }
        .a_center {
          align-items: center;
        }
        .f_text {
          margin: 12px 0;
          display: block;
          line-height: 1.75;

          @media (width <= 767px) {
            font-size: 1.5rem;
            line-height: 1.4;
          }
        }

        input,
        select {
          display: block;
          width: 100%;
          border: 2px solid #0F5CA8;
          font-weight: bold;
          font-family: "Noto Sans JP", "Roboto", Arial, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
          border-radius: 0;
        }
        input {
          font-size: 1.8rem;
          padding: 25px 50px 25px 28px;

          @media (width <= 767px) {
            padding: 12px;
            font-size: 1.6rem;
          }
        }
        select {
          font-size: 1.6rem;
          padding: 29px 28px;
          -webkit-appearance: none;
          appearance: none;
          cursor: pointer;
          background-color: #F2F2F2;

          @media (width <= 767px) {
            padding: 20px;
          }
        }

        ::placeholder {
          color: #989898;
        }

        .select_wrap {
          position: relative;
          width: 53.5%;

          @media (width <= 767px) {
            width: 100%;
          }

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            bottom: 0;
            right: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: right 0.3s;
            width: 10px;
            height: 10px;
            border-right: solid 2px #0F5CA8;
            border-bottom: solid 2px #0F5CA8;
            transform: translateY(-50%) rotate(45deg); 
          }
          &.post {
            max-width: 345px;
          }
        }

        /* 希望職種 */
        select[name="job"] {
          max-width: 735px;
        }

        /* 氏名・フリガナ */
        input[name="name[]"],
        input[name="kana[]"] {
          font-size: 1.6rem;

          &:first-of-type {
            margin-right: 4%;
          }
        }

        /* 生年月日 */
        input[name="year"] {
          width: 14.7vw;
          max-width: 200px;
          margin-right: 5%;
          font-size: 1.8rem;

          @media (width <= 1023px) {
            width: 100%;
          }
          @media (width <= 767px) {
            margin: 0 2%;
            font-size: 1.6rem;
          }
        }
        input[name="month"],
        input[name="date"] {
          width: 8.8vw;
          max-width: 120px;
          margin: 0 5%;
          font-size: 1.8rem;

          @media (width <= 1023px) {
            width: 100%;
          }
          @media (width <= 767px) {
            margin: 0 2%;
            width: 45%;
            font-size: 1.6rem;
          }
        }

        /* 住所 */
        .post_mark {
          margin-right: 20px;

          @media (width <= 767px) {
            margin-right: 2%;
          }
        }
        input[name="post"] { 
          width: 200px;
        }
        select[name="address"], 
        select[name="address[]"] {
          max-width: 345px;
          margin: 24px 0;

          @media (width <= 767px) {
            margin: 5% 0;
          }
        }
        input[name="address"] { 
          max-width: 603px;
          width: 47vw;

          @media (width <= 1070px) {
            width: 100%;
          }
        }

        /* 電話番号 */
        input[name="tel"] {
          width: 282px;
        }

        /* メールアドレス */
        input[name="email"] {
          max-width: 735px;

          &:first-of-type {
            margin-bottom: 35px;

            @media (width <= 767px) {
              margin-bottom: 5%;
            }
          }
          &:last-of-type {
            margin-top: 21px;

            @media (width <= 767px) {
              margin-top: 5%;
            }
          }
        }

        /* 履歴書・職務経歴書 */
        .file_up {
          position: relative;
          background-color: #F2F2F2;
          max-width: 345px;

          &::after {
            content: '';
            display: block;
            width: 20px;
            height: 24px;
            background: url("/assets/img/file_icon.svg") no-repeat;
            background-size: contain;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 2rem;
            cursor: pointer;
          }
        }
        input[name="file"], 
        input[name="history"], 
        input[name="resume"] {
          cursor: pointer;
          max-width: 345px;
          font-size: 1.6rem;

          @media (width <= 767px) {
            padding: 17px 45px 17px 17px;
            font-size: 1.5rem;
          }

          &::file-selector-button {
            font-size: 0;
            border: none;
            margin-left: -1.8rem;
            content: none;
          }
        }
      }

      /* ボタン */
      .btn_area {
        margin-top: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        @media (width <= 767px) {
          margin-top: 8%;
          display: block;
        }

        .form_btn {
          position: relative;
          width: 100%;
          max-width: 500px;
        
          @media (width <= 1070px) {
            margin: 0 auto;
          }

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: right 0.3s;
            width: 10px;
            height: 10px;
        
            @media (width <= 767px) {
              width: 13px;
              height: 13px;
            }
          }
          
          .submit {
            padding: 23px 0 26px;
            text-decoration: none;
            line-height: 1.8;
            font-weight: bold;
            font-size: 1.8rem;
            width: 100%;
            cursor: pointer;
            border: none;

            @media (width <= 767px) {
              padding: 17px 0 20px;
            }

            &:hover {
              opacity: 0.8;
            }
          }

          /* 青色ボタン */
          &.confirm_btn {
            .submit {
              background-color: #0F5CA8;
              color: #FFF;
            }
            &::after {
              right: 2rem;
              transform: translateY(-50%) rotate(45deg);
              border-top: solid 2px #FFF;
              border-right: solid 2px #FFF;
            }
          }
          /* 白色ボタン */
          &.back_btn {
            .submit {
              background-color: #FFF;
              color: #222222;
            }
            &::after {
              left: 2rem;
              transform: translateY(-50%) rotate(-135deg);
              border-top: solid 2px #0F5CA8;
              border-right: solid 2px #0F5CA8;
            }
          }
        }
      }
      
      #error-item {
        margin-bottom: 20px;
      }
      .error_text {
          display: block;
          color: #FF0000;
          line-height: 1.75;
          width: 100%;
      }
    }
  }

  /*--------------------------------------------
    確認画面
  ---------------------------------------------*/
  &.confirm {
    form {
      .form_item {
        align-items: center;

        @media (width <= 1023px) {
          padding: 5% 0 3%;
        }

        label {
          min-width: 240px;
        }

        p:nth-of-type(n+2) {
          margin-left: 1rem;
        }

        .flex_b.f_wrap {
          .confirm_address {
            width: 100%;
            display: block;
            margin-left: 0;
          }
        }

        &:last-child,
        &:nth-last-child(2) {
          flex-wrap: wrap;
        }
      }
        
      .btn_area {
        justify-content: center;
        column-gap: 5%;

        .confirm_btn {
          @media (width <= 767px) {
            margin-top: 5%;
          }
        }
      }

      .min {
        display: block;
        font-size: 1.3rem;
        line-height: 1.3;
        color: #0F5CA8;
        /* margin: 0 !important; */
        margin: 10px 0 0 27rem !important;

        @media (width <= 1023px) {
          margin: 10px 0 0 0 !important;
        }
      }
    }
  }

  /*--------------------------------------------
    完了画面
  ---------------------------------------------*/
  &.complete {
    padding-bottom: 16%;

    @media (width <= 767px) {
      padding-bottom: 30%;
    }

    .intro {

      h2 {
        margin: 0 0 2%;
      }
    }

    .btn.type_01 {
      width: 100%;
      max-width: 500px;
      margin: 69px  auto 0;

      @media (width <= 767px) {
        margin: 12% auto 0;
      }

      &:hover {
        opacity: 0.8;
        color: #FFF;
      }

      &::after {
        border-top: solid 2px #FFF;
        border-right: solid 2px #FFF;
      }
      &::before {
        display: none;
      }
      
    }
  }

}