@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *					style_jobIntroduction.css.css
 *
 *-------------------------------------------------------------*/

/* index */
.jobIntroduction .jobIntroduction-container             { display: flex; flex-wrap: wrap; justify-content: space-between; }
.jobIntroduction .jobIntroduction-box                   { width: 47.5%; padding-right: 69px; border-color: #e9ebec; border-width: 0 1px 1px 0; border-style: solid; box-sizing: border-box; padding-bottom: 50px; display: flex; flex-direction: column; }
.jobIntroduction .jobIntroduction-box p.colBlue         { font-size: clamp(26px, calc(100vw * 30 / 1200), 30px); }
.jobIntroduction .jobIntroduction-box img               { max-width: fit-content; width: 100%; height: auto; margin: 20px 0; }
.jobIntroduction .jobIntroduction-box img + div         { margin-bottom: 35px; }
.jobIntroduction .jobIntroduction-box div.text          { margin-bottom: 30px; }
.jobIntroduction .jobIntroduction-box div.btn           { margin: auto auto 0; }

.jobIntroduction .jobIntroduction-container + .jobIntroduction-container    { margin-top: 75px; }


/* job-introduction 子ページ */
.jobDetail-section                                      { display: flex; justify-content: space-between; align-items: flex-start; }
.jobDetail-section article                              { margin-right: 55px; flex: 1; }
.jobDetail-section article h1                           { line-height: 1.1; margin-bottom: 25px; }
.jobDetail-section  img                                 { width: 100%; max-width: fit-content; }

.jobIntroduction .gray-area                             { max-width: 1000px; margin: 50px auto 0; }
.jobIntroduction .gray                                  { background: #ebebeb; padding: 30px; border-radius: 30px; }
.jobIntroduction .gray-area p.colBlue                   { font-size: clamp(17px, calc(100vw * 19 / 1000), 19px); margin-bottom: 5px; }
.gray .dl-jobIntroduction							    { display:block; overflow:hidden; }
.gray .dl-jobIntroduction dt						    { float:left; width:1.7em; margin-bottom: 3px; }
.gray .dl-jobIntroduction dd						    { margin:0 0 3px 1.7em; }

.jobIntroduction .gray + .gray                          { margin-top: 30px; }


/* jobIntroduction-menuArea */
#jobIntroduction-menuArea                               { max-width: 700px; margin: 160px auto 0; }
#jobIntroduction-menuArea ul                            { row-gap: 28px; }
#jobIntroduction-menuArea li                            { width: 160px; line-height: 1.3; font-size: 14px; }
#jobIntroduction-menuArea li:hover                      { opacity: 0.8; }
#jobIntroduction-menuArea li:hover a                    { text-decoration: none; }
#jobIntroduction-menuArea li .protected-image-container { display: block; }
#jobIntroduction-menuArea li img                        { margin: 0 auto 8px; width: 100%; max-width: fit-content; }

@media screen and ( max-width:1400px ) {
    /* index */
    .jobIntroduction .jobIntroduction-box               { padding-right: 40px; }

}
@media screen and ( max-width:1100px ) {
    /* job-introduction 子ページ */
    .jobDetail-section                                  { flex-direction: column; }
    .jobDetail-section article                          { width: 100%; margin-bottom: 40px; margin-right: 0; }
    .jobDetail-section img                              { margin: 0 auto; }
}


@media screen and ( max-width:767px ) {

    /* index */
    .jobIntroduction .jobIntroduction-container         { flex-direction: column; }
    .jobIntroduction .jobIntroduction-container + .jobIntroduction-container    { margin-top: 0; }
    .jobIntroduction .jobIntroduction-box               { width: 100%; padding-right: 0; border-width: 0; padding-bottom: 100px; }
    .jobIntroduction .jobIntroduction-box:nth-child(odd)    { border-right: none; }
    .jobIntroduction .jobIntroduction-box:nth-child(even)   { padding-left: 0; }
    .jobIntroduction .jobIntroduction-box img           { margin: 20px auto; }

    /* jobIntroduction-menuArea */
    #jobIntroduction-menuArea                           { margin-top: 100px; }
    #jobIntroduction-menuArea li                        { width: calc(100% / 3); }

}

@media screen and ( max-width:480px ) {
    
    #jobIntroduction-menuArea li                        { width: calc(100% / 2); }

}