@charset "UTF-8";
@media screen and (min-width: 768px) {
  .cat_mv {
    border-bottom: 5px solid #fff;
    height: 198px;
    overflow: hidden;
    position: relative;
  }
  .cat_mv .title {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .cat_mv .title strong {
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .cat_mv .title span {
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 4px;
    background: #8B7347;
    margin-top: 6px;
  }
  .cat_mv .img img {
    width: 100%;
    min-width: 1600px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    width: 1020px;
    margin: 20px auto;
    font-size: 14px;
  }
  .breadcrumb li:nth-of-type(n+2)::before {
    content: ">";
    margin: 0 4px;
  }
  .pagetitle {
    width: 1020px;
    margin: 40px auto 40px;
  }
  .pagetitle h1 {
    position: relative;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    padding-bottom: 26px;
    margin-bottom: 30px;
  }
  .pagetitle h1::after {
    content: "";
    display: block;
    background: #8B7347;
    width: 86px;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 43px);
  }
  .pagetitle p {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.65;
    text-align: center;
  }
  #joblist {
    width: 1020px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }
  #joblist.setsubi {
    justify-content: center;
  }
  #joblist.setsubi dl:nth-of-type(2) {
    margin-right: 0;
  }
  #joblist dl {
    background: #272727;
    width: 280px;
    padding: 20px;
    margin: 0 30px 30px 0;
  }
  #joblist dl:nth-of-type(3n) {
    margin-right: 0;
  }
  #joblist dt {
    margin-bottom: 12px;
  }
  #joblist dd h2 {
    background: url(../image/common/arrow.png) no-repeat left center;
    padding-left: 15px;
    font-size: 23px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
  }
  #joblist dd p {
    font-size: 16px;
    line-height: 1.55;
  }
  #joblist dd p.btn {
    display: none;
  }
  #companylist {
    width: 1020px;
    margin: 30px auto 0;
  }
  #companylist .line {
    width: 1020px;
    display: flex;
  }
  #companylist .line > dt {
    background: #272727;
    width: 90px;
    height: 90px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", serif;
  }
  #companylist .line > dt span {
    font-size: 24px;
  }
  #companylist .line > dd {
    flex-grow: 1;
  }
  #companylist .company {
    border-top: 4px solid #fff;
    background: #272727;
    margin-bottom: 40px;
    padding: 36px 30px 30px 40px;
    position: relative;
    display: flex;
  }
  #companylist .company .logo {
    position: absolute;
    right: 30px;
    top: 36px;
  }
  #companylist .company .info {
    width: 560px;
  }
  #companylist .company.wide .info {
    flex-grow: 1;
  }
  #companylist .company .info dt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  #companylist .company .info dt .job {
    background: #8B7347;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 10px;
  }
  #companylist .company .info dt strong {
    font-size: 31px;
    font-weight: bold;
    line-height: 1.15;
  }
  #companylist .company .info dt .ruby {
    display: block;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.15;
    letter-spacing: 0.05em;
    margin-top: 4px;
  }
  #companylist .company .info dd {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.45;
  }
  #companylist .company .info dd ul {
    display: flex;
    flex-wrap: wrap;
  }
  #companylist .company .info dd ul li {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }
  #companylist .company .info dd ul li.tel {
    margin-right: 40px;
  }
  #companylist .company .info dd ul span {
    background: #fff;
    color: #272727;
    font-size: 12px;
    letter-spacing: 0.1em;
    width: 4em;
    padding: 2px 0;
    margin-right: 8px;
    flex-shrink: 0;
    text-align: center;
  }
  #companylist .company .info dd ul .hp {
    width: 100%;
    font-size: 14px;
  }
  #companylist .company .btn {
    padding-top: 120px;
    flex-shrink: 0;
  }
  #companylist .company .btn li {
    width: 240px;
    text-align: center;
    margin-top: 15px;
    margin-left: 30px;
  }
  #companylist .company .btn li.tel {
    display: none;
  }
  #companylist .company .btn li.mail a {
    display: block;
    background: #fff;
    color: #272727;
    padding: 14px 20px;
    border-radius: 100px;
  }
  #companylist .company .btn li.mail a span {
    position: relative;
    padding-left: 20px;
  }
  #companylist .company .btn li.mail a span::before {
    content: "";
    display: block;
    background: url(../image/common/icon_mail.png) no-repeat;
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc(50% - 7px);
    left: 0;
  }
  #companylist + .backbtn {
    margin-top: 0;
  }
  .backbtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1020px;
    margin: 10px auto 40px;
  }
  .backbtn li {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 20px;
  }
  .backbtn li a {
    display: block;
    background: #fff url(../image/common/back_arrow.png) no-repeat 30px center;
    color: #272727;
    padding: 14px 30px 14px 50px;
    border-radius: 100px;
  }
}
@media screen and (max-width: 767.999px) {
  .cat_mv {
    border-bottom: 2px solid #fff;
    height: 180px;
    overflow: hidden;
    position: relative;
  }
  .cat_mv .title {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .cat_mv .title strong {
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .cat_mv .title span {
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 4px;
    background: #8B7347;
    margin-top: 6px;
  }
  .cat_mv .img img {
    width: 100%;
    min-width: 320px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 15px;
    font-size: 12px;
  }
  .breadcrumb li:nth-of-type(n+2)::before {
    content: ">";
    margin: 0 3px;
  }
  .pagetitle {
    margin: 32px 20px;
  }
  .pagetitle h1 {
    position: relative;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .pagetitle h1::after {
    content: "";
    display: block;
    background: #8B7347;
    width: 44px;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 22px);
  }
  .pagetitle p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
  }
  #joblist {
    margin: 20px;
  }
  #joblist dl {
    background: #272727;
    padding: 20px;
    margin-bottom: 15px;
  }
  #joblist dt {
    margin-bottom: 20px;
  }
  #joblist dt img {
    width: 100%;
    height: auto;
  }
  #joblist dd h2 {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
  }
  #joblist dd h2::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
  }
  #joblist dd p {
    font-size: 15px;
    line-height: 1.4;
  }
  #joblist dd p.btn {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin-top: 15px;
  }
  #joblist dd p.btn a {
    position: relative;
    display: block;
    background: #fff;
    color: #272727;
    padding: 14px 10px;
    border-radius: 100px;
  }
  #joblist dd p.btn span {
    position: relative;
    padding-left: 20px;
  }
  #joblist dd p.btn span::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #272727;
    border-top: 2px solid #272727;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
  }
  #companylist {
    margin: 20px 20px 0;
  }
  #companylist .line:nth-of-type(n+2) {
    margin-top: 30px;
  }
  #companylist .line > dt {
    background: #272727;
    border-bottom: 4px solid #fff;
    text-align: center;
    padding: 11px 0;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", serif;
  }
  #companylist .company {
    border-top: 2px solid #fff;
    background: #272727;
    margin-bottom: 20px;
    padding: 20px;
  }
  #companylist .company .logo {
    margin-bottom: 12px;
  }
  #companylist .company .logo img {
    width: 100%;
    height: auto;
  }
  #companylist .company .info dt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  #companylist .company .info dt .job {
    background: #8B7347;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  #companylist .company .info dt strong {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.15;
  }
  #companylist .company .info dt .ruby {
    display: block;
    color: #999;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin-top: 4px;
  }
  #companylist .company .info dd {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.45;
  }
  #companylist .company .info dd ul li {
    display: flex;
    align-items: center;
    margin-top: 6px;
    font-size: 15px;
  }
  #companylist .company .info dd ul li.tel {
    margin-right: 40px;
  }
  #companylist .company .info dd ul span {
    background: #fff;
    color: #272727;
    font-size: 9px;
    letter-spacing: 0.1em;
    width: 4em;
    padding: 4px 0;
    margin-right: 8px;
    flex-shrink: 0;
    text-align: center;
  }
  #companylist .company .info dd ul .hp {
    font-size: 10px;
  }
  #companylist .company .info dd ul .hp a {
    word-break: break-all;
  }
  #companylist .company .btn {
    margin: 14px 20px 0;
  }
  #companylist .company .btn li {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
  }
  #companylist .company .btn li a {
    display: block;
    background: #fff;
    color: #272727;
    padding: 14px 10px;
    border-radius: 100px;
  }
  #companylist .company .btn li.tel a span,
  #companylist .company .btn li.mail a span {
    position: relative;
    padding-left: 20px;
  }
  #companylist .company .btn li.tel a span::before {
    content: "";
    display: block;
    background: url(../image/common/icon_tel_sp.png) no-repeat;
    background-size: 12px 12px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc(50% - 6px);
    left: 1px;
  }
  #companylist .company .btn li.mail a span::before {
    content: "";
    display: block;
    background: url(../image/common/icon_mail_sp.png) no-repeat;
    background-size: 14px 14px;
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc(50% - 7px);
    left: 0;
  }
  #companylist + .backbtn {
    margin-top: 0;
  }
  .backbtn {
    margin: 20px 20px 40px;
  }
  .backbtn li {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    margin: 10px 0;
    text-align: center;
  }
  .backbtn li a {
    display: block;
    background: #fff;
    color: #272727;
    padding: 13px 20px;
    border-radius: 100px;
  }
  .backbtn li a span {
    position: relative;
    padding-left: 14px;
  }
  .backbtn li a span::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-left: 2px solid #272727;
    border-bottom: 2px solid #272727;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
  }
}