@charset "UTF-8";

    .job_wrap{
      width:calc(100% - 32px);
      max-width:860px;
      margin:40px auto 60px;
    }

    .job_wrap  *{
      box-sizing:border-box;
    }

    .job_h2{
	text-align:center;
	color:#355497;
	font-size:24px;
	font-weight:bold;
    }

    p.job_catch{
	border-bottom:solid 3px #355497;
	margin-bottom:40px;
	padding:20px 0 20px;
    }

    .job_wrap a{
	overflow-wrap: anywhere;
	word-break: break-word;
	color: #3464c9;
    }

    .job_tabs{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:28px;
    }

    .job_tab{
      appearance:none;
      border:none;
      background:#dbe4f7;
      color:#355497;
      font-size:16px;
      font-weight:700;
      padding:14px 22px;
      border-radius:999px;
      cursor:pointer;
      transition:.25s;
    }
    .job_tab:hover{
      opacity:.85;
    }
    .job_tab.is-active{
      background:#355497;
      color:#fff;
    }

    .job_panel{
      display:none;
    }
    .job_panel.is-active{
      display:block;
    }

    .job_area_title{
      margin:0 0 22px;
      padding-left:14px;
      border-left:7px solid #355497;
      color:#355497;
      font-size:30px;
      line-height:1.4;
    }

    .job_list{
      display:block;
    }

    .job_data{
      background:#fff;
      border-radius:18px;
      padding:24px 22px;
      margin-bottom:22px;
      box-shadow:0 8px 24px rgba(53,84,151,.08);
    }

    .flex_head{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    .flex_head span{
      display:inline-block;
      color:#fff;
      background:#355497;
      font-weight:700;
      padding:8px 14px;
      line-height:1.3;
    }
    .flex_head p{
      margin:0;
      font-size:20px;
      font-weight:700;
      line-height:1.4;
    }

    .job_data h3{
      margin:0 0 8px;
      color:#355497;
      font-size:26px;
      line-height:1.4;
    }

    .catch{
      margin:0 0 6px;
      font-weight:700;
      color:#444;
    }

    .adress{
      margin:0 0 18px;
      color:#666;
      font-size:15px;
    }

    .flex_bottom{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .job_row{
      display:flex;
      align-items:stretch;
      gap:14px;
    }

    .job_row .label{
      flex:0 0 132px;
    }

    .job_row .label span{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:100%;
      color:#fff;
      background:#355497;
      font-weight:700;
      padding:10px 12px;
      line-height:1.4;
      text-align:center;
    }

    .job_row .detail{
      flex:1 1 auto;
      background:#fff;
      border:1px solid #e2e9f7;
      padding:10px 14px;
      display:flex;
      align-items:center;
    }

    .job_row .detail p{
      margin:0;
      font-size:15px;
      line-height:1.7;
    }

    .pager{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin-top:28px;
    }

    .pager button{
      appearance:none;
      border:none;
      background:#355497;
      color:#fff;
      font-size:15px;
      font-weight:700;
      padding:12px 18px;
      border-radius:999px;
      cursor:pointer;
      transition:.25s;
    }

    .pager button:hover{
      opacity:.85;
    }

    .pager button:disabled{
      background:#bcc8e5;
      cursor:default;
      opacity:1;
    }

    .pager_info{
      min-width:90px;
      text-align:center;
      font-weight:700;
      color:#355497;
    }

    @media (max-width:767px){
      .job_wrap{
        width:calc(100% - 20px);
        margin:24px auto 40px;
      }

      .job_tabs{
        gap:8px;
        margin-bottom:20px;
      }

      .job_tab{
        width:calc(50% - 4px);
        padding:12px 10px;
        font-size:15px;
	text-align:center;
      }

      .job_area_title{
        font-size:24px;
        margin-bottom:16px;
      }

      .job_data{
        padding:18px 14px;
        margin-bottom:16px;
        border-radius:14px;
      }

      .flex_head{
        gap:10px;
        margin-bottom:12px;
      }

      .flex_head p{
        font-size:18px;
      }

      .job_data h3{
        font-size:22px;
      }

      .catch{
        font-size:15px;
      }

      .adress{
        font-size:14px;
        margin-bottom:14px;
      }

      .job_row{
        flex-direction:column;
        gap:6px;
      }

      .job_row .label{
        flex:none;
      }

      .job_row .label span{
        justify-content:flex-start;
        min-height:auto;
      }

      .job_row .detail{
	padding: 0 5px 10px;
	border: none;
      }

      .job_row .detail p{
        font-size:14px;
      }

      .pager{
        gap:8px;
        margin-top:20px;
      }

      .pager button{
        padding:11px 14px;
        font-size:14px;
      }

      .pager_info{
        min-width:auto;
        font-size:14px;
      }
    }