/* 関西土木技術センター・トップページ・デザイン用CSS */

body {color: #666666;
      font-family: "メイリオ",Meiryo, Verdana, "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Arial, helvetica, sans-serif;
      -webkit-text-size-adjust: none;
      -webkit-print-color-adjust: exact;}

#contents {width: 882px;
           margin-top: 10px;
           margin-left: auto;
           margin-right: auto;
           padding-top: 10px;
           background-color: #ffffff;}

  #top {width: 882px;
        height: 110px;
        margin-top: 10px;
        margin-bottom: -30px;}
   #top_link {display: block:}
   #top_link  {text-decoration: none;}

  h1 {background-image: url('image/logo.png');
      background-size: 45px;
      background-position: left 40%;
      background-repeat: no-repeat;
      font-size: 25px;
      font-weight: 500;
      color: #000000;
      margin-top: 5px;
      margin-bottom: 0;
      padding-left: 60px;
      width: 740px;}

  h2 {font-size: 20px;
      font-weight: 500;
      color: #666666;
      margin-top: 0px;
      margin-bottom: 0;}

  #logo {width: 30px;}

  #title {margin-top: 0px;
          color: #000000;}
 
  #menu1 {width: 100vw;
          margin-left: calc(-50vw + 50%);
          display: grid;
          place-items: center;
          height: 70px;
          margin-bottom: 20px;
          background: #486d94;}

   .link-menu {border-collapse: collapse;
               border-spacing: 0;
               height: 70px;}

   .link-within {width: 175px;
                 border-right: solid 1px #ffffff;
                 border-left: solid 1px #ffffff;
                 text-align: center;
                 text-decoration: none;}

    .link-within a {display: -webkit-box;
                    display: -webkit-flexbox;
                    display: flex;
                    flex-wrap: wrap;
                    -webkit-box-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    width: 175px;
                    height: 70px;
                    font-size: 19px;
                    text-decoration: none;
                    color: #ffffff;}

   .link-1 {height: 16px;
            text-align: center;
            border-right: solid 1px #ffffff;
            border-bottom: solid 1px #ffffff;
            color: #ffe4c4;
            font-size: 13px;}

   
   .link-external {width: 175px;
                   border-right: solid 1px #ffffff;
                   border-left: solid 1px #ffffff;}

   .link-external a {display: -webkit-box;
                     display: -webkit-flexbox;
                     display: flex;
                     flex-wrap: wrap;
                     -webkit-box-pack: center;
                     -webkit-justify-content: center;
                     justify-content: center;
                     -webkit-box-align: center;
                     -webkit-align-items: center;
                     align-items: center;
                     width: 175px;
                     height: 48px;
                     color: #ffe4c4;
                     font-size: 17px;
                     text-decoration: none;
                     line-height: 110%;}

  .en-button {position: fixed;
              width: 100%;
              z-index: 2;}

  .entry {display: block;
          width: 882px;}
  
  .en-2 {text-decoration: none;
         display: block;
         margin-left: auto;
         text-align: center;
         vertical-align: middle;
         width: 150px;
         height: 60px;
         border-radius: 9999px;
         background: #486d94;
         font-size: 15px;
         color: #ffffff;}
 
  .en-1 {font-family: Calisto MT、Bookman Old Style、Bookman、Goudy Old 
         Style、Garamond、Hoefler Text、Bitstream Charter、Georgia, serif;
         font-size: 25px;}

  .main {width: 100vw;
         max-width: 2000px;
         height: auto;
         margin-left: calc(-50vw + 50%);
         aspect-ratio: 8 / 3;
         margin-bottom: 10px;
         background-image: url(image/irabu.jpg);
         background-repeat: no-repeat;
         background-size: cover;
         font-size: 22px;
         display: grid;}

   #policy {position: relative;
            top: 18%;
            left: 43%;}

   .main_1 {font-size: 35px;
            font-weight: 500;
            color: #2c245b;}

/*　求人ページ　*/

  .recruitment {width: 100vw;
                margin-left: calc(-50vw + 50%);
                aspect-ratio: 8 / 3;
                margin-bottom: 10px;
                background-image: url(image/highway.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                font-size: 35px;
                font-weight: 600;
                color: #2c245b;
                display: grid;
                place-items: center;}

  .button {display: flex;
           justify-content: center;
           align-items: center;
           width: 350px;
           height: 40px;
           margin: 10px 0px 10px 0px;
           padding: 5px;
           border: 1px solid #2589d0;
           border-radius: 5px;
           background-color: #fff;
           color: #2589d0;
           font-size: 1em;}

  .button::after {transform: rotate(45deg);
                  width: 5px;
                  height: 5px;
                  margin-left: 10px;
                  border-top: 2px solid #2589d0;
                  border-right: 2px solid #2589d0;
                  content: '';}

  .job {display: -webkit-box;
        display: -webkit-flexbox;
        display: flex;
        color: #000000;
        margin-top: 15px;
        margin-left: 10px;
        font-size: 16px;}
   .job1 {width: 100px;
          height: 30px;
          background: #000000;
          text-align: center;
          display: -webkit-box;
          display: -webkit-flexbox;
          display: flex;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          color: #ffffff;}
   .job2 {margin-left: 15px;
          margin-top: 5px;}

    /* 全体カッコ */
    .job2-1 {padding: 0rem 1.5rem;
	     position: relative;}
    .job2-1::before, .job2-1::after {display: block;
	                             position: absolute;
	                             top: 35%;  
	                             box-sizing: border-box;
	                             line-height: 0;
	                             font-size: 2.4rem;
	                             font-family:'M PLUS Rounded 1c', sans-seri;
	　                           } 
    .job2-1::before {content: '('; /* 開き括弧の種類*/
	             left: 0;}
    .job2-1::after {content: ')'; /* 閉じ括弧の種類*/
 	            right: 0;}
    /* 全体カッコここまで */
 
   .job ul {margin-top: 0;
            padding-left: 20px;}

  .job2 a {width: 350px;
           height: 40px;
           display: flex;
           justify-content: center;
           align-items: center;
           color: #2589d0;
           font-size: 1em;
           text-decoration: none;}

/*　求人ページここまで　*/

  .contents1 {width: 860px;
              height: auto;
              margin-bottom: 5px;
              padding: 10px;
              border: solid 1px #000000;}
 
  .contents1-1 {font-family: Calisto MT、Bookman Old Style、Bookman、Goudy Old Style、Garamond、Hoefler Text、Bitstream Charter、Georgia, serif;
                display: table-cell;
                width: 862px;
                height: 55px;
                background: #a7b1be;
                margin-top: 15px;
                padding-left: 40px;
                vertical-align: middle;
                font-size: 28px;
                color: #000000;
                position: relative;}
  .contents1-1:before {position: absolute;
                       background-color: #ffffff;
                       border-radius: 1em;
                       content: "";
                       left: 2%;
                       top: 25%;
                       bottom: 10%;
                       width: .1em;
                       height: 50%;
                       }
   .c_span1 {color: red;}
   .c_span2 {font-family: "メイリオ",Meiryo, Verdana, "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Arial, helvetica, sans-serif;
             color: #000000;
             font-size: 18px;}   

  .contents2 {margin-top: 5px;
              border-bottom: solid 1px #666666;} 
   .contents2-1 {display: flex;}
    .contents2-1 img {margin-right: 10px;
                      width: 207.5px;
                      height: 207.5px;}
   .contents2-2 {font-size: 16px;
                 padding-top: 10px;}
    .contents2-2 p {font-size: 18px;
                    font-weight: bolder;
                    display: inline;}
    .contents2-2 ul {margin-top: 0px;}

  .profile p {color: #000000;
              font-weight: bolder;}

  .profile ul {padding-left: 20px;}
  .profile li {color: #000000;
               font-weight: bolder;
               text-decoration: underline;
               text-underline-offset: 4px;}
  .profile li::marker {font-size: 0.5em;}

  .pro-1 {margin-left: 1em;}

#footer {font-family:"Times New Roman", Times, serif;
         font-size: 15px;
         text-align: center;
         margin-top: 20px;
         clear: both;}

/*お問い合わせ*/
#contact {width: 862px;
          margin-top: 10px;
          margin-bottom: 10px;
          padding: 10px;
          border: solid 1px #000000;
          background-color: #eeeeee;}

 input[type=text] {border: solid 1px #666666;}

 textarea {border: solid 1px #666666;}

 .contact_1 {font-size: 18px;
             color: #000000;
             margin-bottom: 10px;}

 .contact_2 {font-size: 14px;
             margin-bottom: 10px;}
  .contact_caution {color: red;}

 .contact_3 {font-size: 13px;
             margin-top: 15px;}
 
  .mail {margin-top: 5px;
         margin-bottom: 5px;
         font-size: 14px;}
  .mail2 {margin-top: 10px;}
  

  .bottom {padding: 5px;
           border: 1px solid #000000;
           border-radius: 5px;
           background: #486d94;
           color: #ffffff;}

 #caption {margin-top: 20px;
           display: -webkit-box;
           display: -webkit-flexbox;
           display: flex;
           justify-content: center;
           -webkit-box-align: center;
           -webkit-align-items: center;
           align-items: center;}

  #cap1 {display: block;}
   #cap1 a {text-decoration: none;
            margin: 10px;
            padding: 5px;
            border: 1px solid #000000;
            border-radius: 5px;
            background: #486d94;
            color: #ffffff;}

/*スマートフォンレイアウト*/
@media screen and (max-device-width: 480px)
{

  .main {width: 882px;
         background-image: url(image/irabu.jpg);
         background-repeat: no-repeat;
         background-size: 100%;
         aspect-ratio: 8 / 3;
         font-size: 13px;
         display: grid;
         place-items: center;
         margin: 10px 0px 10px 0px;}

   #policy {position: relative;
            top: -40px;
            left: 170px;}
   
   .main_1 {font-size: 25px;
            font-weight: 500;
            color: #2c245b;}
 
  .recruitment {width: 882px;
                background-image: url(image/highway.jpg);
                background-repeat: no-repeat;
                background-size: 100%;
                aspect-ratio: 8 / 3;
                font-size: 28px;
                color: #2c245b;
                display: grid;
                place-items: center;
                margin: 10px 0px 10px 0px;}

  #menu1 {width: 882px;
          display: block;
          place-items: center;
          height: 100%;
          margin-left: 0;
          margin-bottom: 20px;
          background: #486d94;}

  #footer {width: 823px;
           height: 60px;
           text-align: center;
           font-family:"Times New Roman", Times, serif;
           font-size: 20px;
           }

}

@media print {
  .main {width: 882px;
         background-image: url(image/irabu.jpg);
         background-repeat: no-repeat;
         background-size: 100%;
         aspect-ratio: 8 / 3;
         font-size: 22px;
         color: #ffffff;
         display: grid;
         place-items: center;
         margin: 10px 0px 10px 0px;}

  .recruitment {width: 882px;
                background-image: url(image/highway.jpg);
                background-repeat: no-repeat;
                background-size: 100%;
                aspect-ratio: 8 / 3;
                font-size: 28px;
                color: #2c245b;
                display: grid;
                place-items: center;
                margin: 10px 0px 10px 0px;}

  #menu1 {width: 882px;
          display: block;
          place-items: center;
          height: 100%;
          margin-left: 0;
          margin-bottom: 20px;
          background: #486d94;}
}