@charset "utf-8";
/* ------------------------------- job-catalog top ------------------------------- */
.jobcatalog a:hover {
  opacity: 0.6;
  transition: all 0.1s linear;
}
.job-catalog-top p, .jobcatalog p {
  font-weight: 400;
}
.job-catalog-top h2, .job-catalog-top h3, .job-catalog-top a, .job-catalog-top .sup_ttl {
  font-family: 'Zen Maru Gothic', sans-serif;
}
.job-catalog-top #tmp_page_bl1 .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 135px 0;
  position: relative;
}
.job-catalog-top #tmp_page_bl1 .container::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 13px;
  bottom: 0;
  left: 0;
  background: url("../images/jobcatalog/job-catalog-line1.png")no-repeat center/100% auto;
}
.job-catalog-top #tmp_page_bl1 .flex_box, .job-catalog-top #tmp_page_bl2 .flex_box {
  align-items: flex-end;
}
.job-catalog-top #tmp_page_bl1 .right_box {
  width: 460px
}
.job-catalog-top #tmp_page_bl1 .left_box {
  width: calc(100% - 460px);
}
.job-catalog-top #tmp_page_bl1 .left_box h2 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 60px;
}
.job-catalog-top #tmp_page_bl1 .left_box p {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
}
.job-catalog-top #tmp_page_bl2 .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 110px 0 0;
}
.job-catalog-top #tmp_page_bl2 .container .ttl_box {
  margin: 0 0 50px;
}
.job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  max-width: 340px;
  margin: 0 auto;
}
.job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl h2 {
  font-size: 50px;
  font-weight: 700;
  text-align: center;
}
.job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl .img_box {
  width: max(30px, 70px);
  height: max(36px, 75px);
  top: 50%;
  right: 0;
}
.job-catalog-top #tmp_page_bl2 .container .ttl_box p {
  font-size: 18px;
  text-align: center;
  margin: 35px 0 0;
}
.job-catalog-top #tmp_page_bl2 .left_box {
  width: calc(100% - 460px);
  margin-right: 70px;
}
.job-catalog-top #tmp_page_bl2 .right_box {
  width: 390px;
  position: relative;
}
.job-catalog-top #tmp_page_bl2 .inner1 .right_box::after {
  position: absolute;
  content: "";
  width: 132px;
  height: 155px;
  top: -65px;
  right: -20px;
  background: url(../images/jobcatalog/job-catalog-in1-ttl.png)no-repeat center/100% auto;
}
.job-catalog-top #tmp_page_bl2 .inner1 .right_box .sup_ttl {
  font-size: 16px;
  color: #CC7645;
  font-weight: 700;
}
.job-catalog-top #tmp_page_bl2 .inner2 .right_box .sup_ttl {
  font-size: 16px;
  color: #51BEC8;
  font-weight: 700;
}
.job-catalog-top #tmp_page_bl2 .inner3 .right_box .sup_ttl {
  color: #6CBC64;
}
.job-catalog-top #tmp_page_bl2 .right_box h3 {
  font-size: 34px;
  font-weight: 700;
  margin: 15px 0 0;
}
.job-catalog-top #tmp_page_bl2 p.txt {
  font-size: 18px;
  line-height: 2;
  margin: 35px 0;
}
.job-catalog-top .btn_box a {
  width: 247px;
  height: 53px;
  line-height: 50px;
  background: #23A4BD;
  color: #fff;
  font-weight: 500;
  display: flex;
  justify-content: center;
	align-items: inherit;
  border-radius: 50px;
  font-size: 20px;
  padding: 0;
  margin: 0;
  position: relative;
}
.job-catalog-top .inner1 .btn_box a {
  background: #CC7645;
}
.job-catalog-top .inner3 .btn_box a {
  background: #6CBC64;
}
.job-catalog-top .btn_box a::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background: url(../images/jobcatalog/job_arrow.svg)no-repeat center/100% auto;
  top: calc(50% - 9px);
  right: 22px;
  opacity: 1;
  transform: translate(0, 0);
}
.job-catalog-top #tmp_page_bl2 .inner2 .right_box::after {
  position: absolute;
  content: "";
  width: 147px;
  height: 129px;
  right: 80px;
  top: -95px;
  background: url(../images/jobcatalog/job-catalog-in2-ttl.png)no-repeat center/100% auto;
}
.job-catalog-top #tmp_page_bl2 .switch .left_box {
  margin-right: 0;
}
.job-catalog-top #tmp_page_bl2 .cnt_box {
  margin-bottom: 115px;
}
.job-catalog-top #tmp_page_bl2 .switch {
  flex-direction: row-reverse;
}
.job-catalog-top #tmp_page_bl2 .inner3 .right_box::after {
  position: absolute;
  content: "";
  width: 160px;
  height: 160px;
  right: -55px;
  top: -65px;
  background: url(../images/jobcatalog/job-catalog-in3-ttl.png)no-repeat center/100% auto;
}
.job-catalog-top #tmp_mainvisual {
  position: relative;
  z-index: 1;
  background: #FFF000;
	max-height: none;
}
.job-catalog-top #tmp_mainvisual a {
  position: absolute;
  content: "";
  bottom: 10%;
  left: 50%;
  width: 31%;
  height: 8.4%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.job-catalog-top #tmp_mainvisual .btn_box {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 31%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media only screen and (max-width: 1200px) {
  .job-catalog-top #tmp_page_bl1 .container {
    padding: 110px 10px;
  }
  .job-catalog-top #tmp_page_bl1 .left_box {
    width: calc(100% - 350px);
  }
  .job-catalog-top #tmp_page_bl1 .right_box {
    width: 350px;
  }
  .job-catalog-top #tmp_page_bl2 .container {
    padding: 110px 10px 0;
  }
  .job-catalog-top #tmp_page_bl2 .inner1 .right_box::after {
    width: 105px;
    height: 122px;
    top: -35px;
    right: 20px;
  }
  .job-catalog-top #tmp_page_bl2 .inner2 .right_box::after {
    width: 105px;
    height: 90px;
    right: 125px;
    top: -70px;
  }
  .job-catalog-top #tmp_page_bl2 .inner3 .right_box::after {
    width: 105px;
    height: 105px;
    right: 15px;
    top: -15px;
  }
}
@media only screen and (max-width: 870px) {
  .job-catalog-top #tmp_mainvisual .btn_box, .job-catalog-top #tmp_mainvisual a {
    bottom: 20%;
    width: 69.335%;
  }
  .job-catalog-top #tmp_mainvisual .btn_box {
    height: auto;
  }
  .job-catalog-top #tmp_mainvisual a {
    height: 7.5%;
  }
  .job-catalog-top #tmp_page_bl2 .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 25px 0;
  }
  .job-catalog-top #tmp_page_bl1 .container {
    max-width: 100%;
    padding: 35px 25px 40px;
  }
  .job-catalog-top #tmp_page_bl1 .flex_box {
    display: block;
  }
  .job-catalog-top #tmp_page_bl1 .left_box {
    width: 100%;
    margin-bottom: 20px;
  }
  .job-catalog-top #tmp_page_bl1 .right_box {
    width: 100%;
    padding: 0 25px;
  }
  .job-catalog-top #tmp_page_bl1 .left_box h2 {
    font-size: 27px;
    margin-bottom: 20px;
    text-align: center;
  }
  .job-catalog-top #tmp_page_bl1 .left_box p {
    font-size: 13px;
    text-align: center;
  }
  .job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl {
    justify-content: center;
    flex-direction: column;
  }
  .job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl h2 {
    font-size: 26px;
    text-align: center;
    margin: 5px;
    padding-bottom: 10px;
  }
  .job-catalog-top #tmp_page_bl2 .container .ttl_box .ttl .img_box {
    width: 29px;
    height: 36px;
    margin: 0 auto;
  }
  .job-catalog-top #tmp_page_bl2 .container .ttl_box p {
    font-size: 13px;
    margin: 0;
  }
  .job-catalog-top #tmp_page_bl1 .container::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
    background: url("../images/jobcatalog/job-catalog-line1_sp.png")no-repeat center/88% auto;
  }
  .job-catalog-top #tmp_page_bl2 .flex_box {
    display: block;
  }
  .job-catalog-top #tmp_page_bl2 .left_box {
    width: 100%;
    margin-right: 0;
    padding-bottom: 20px;
  }
  .job-catalog-top #tmp_page_bl2 .right_box {
    width: 100%;
  }
  .job-catalog-top #tmp_page_bl2 .right_box h3 {
    font-size: 26px;
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
  }
  .job-catalog-top #tmp_page_bl2 .right_box .sup_ttl {
    font-size: 13px !important;
    display: block;
    text-align: center;
  }
  .job-catalog-top #tmp_page_bl2 p.txt {
    font-size: 13px;
    margin: 15px 0 25px;
    text-align: center;
  }
  .job-catalog-top #tmp_page_bl2 .right_box::after {
    display: none;
  }
  .job-catalog-top #tmp_page_bl2 .inner1 .img_box {
    width: 70px;
    height: 100px;
    margin: 0 auto;
  }
  .job-catalog-top .btn_box a {
    width: 100%;
    max-width: 290px;
    height: 56px;
    font-size: 17px;
    margin: 0 auto;
  }
  .job-catalog-top #tmp_page_bl2 .inner2 .img_box {
    width: 91px;
    height: 81px;
    margin: 0 auto;
  }
  .job-catalog-top #tmp_page_bl2 .inner3 .img_box {
    width: 84px;
    height: 80px;
    margin: 0 auto;
  }
  .job-catalog-top #tmp_page_bl2 .inner5 .img_box, .job-catalog-top #tmp_page_bl2 .inner4 .img_box {
    width: 84px;
    height: 84px;
    margin: 0 auto;
  }
  .job-catalog-top #tmp_page_bl2 .container .ttl_box {
    margin-bottom: 38px;
  }
  .job-catalog-top #tmp_page_bl2 .cnt_box {
    margin-bottom: 55px;
  }
}
/* ------------------------------- job-catalog taxonomy ------------------------------- */
.jobcatalog {
  width: 100%;
}
.jobcatalog .padding {
  width: 100%;
  padding: 0 max(3vw, 25px) 0;
}
.jobcatalog.job_architecture-interior .bg_color {
  background: #E59E75;
}
.jobcatalog.job_it-game-web .bg_color {
  background: #90DDE3;
}
.jobcatalog.job_environment-bio .bg_color {
  background: #BFF0BA;
}
.jobcatalog_list .top_info {
  display: inline-block;
}
.jobcatalog_list .top_info .inner {
  width: 100%;
  max-width: 920px;
  padding: 0 0 73px;
  margin: 160px auto 0;
  text-align: center;
}
.jobcatalog_list .top_info h2 {
  color: #2a2c2c;
  font-size: clamp(27px, 4vw, 45px);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  margin: 30px 0 22px;
}
.jobcatalog_list .top_info p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 500;
  color: #2a2c2c;
  text-align: center;
}
.jobcatalog_list .top_info h1 {
  width: 220px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.1rem;
  text-align: center;
  background: #000;
  border-radius: 30px;
  display: block;
  margin: 0 auto;
  padding: 0 50px 0 30px;
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
}
.jobcatalog_list .top_info h1::after {
  position: absolute;
  content: "";
  width: 23px;
  height: 25px;
  background: url(../images/jobcatalog/jobcatalog_ttlicon.svg)no-repeat center center/22px auto;
  top: calc(50% - 13px);
  right: 26px;
}
.jobcatalog_list .container {
  width: 100%;
}
.jobcatalog_list ul.list {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: min(3vw, 20px);
  justify-content: space-between;
  padding: 0;
  margin: 0 auto -50px;
}
.jobcatalog_list ul.list::after {
  content: "";
  display: block;
  width: 30%;
}
.jobcatalog_list ul.list li {
  width: 100%;
  margin-bottom: clamp(30px,5vw,50px);
  display: flex;
  align-items: stretch;
  flex-direction: column;
  border-radius: 20px;
  position: relative;
}
.jobcatalog.job_architecture-interior ul.list li {
  background: #fff url(../images/jobcatalog/job_arrow01.svg)no-repeat center bottom 28px/28px auto;
}
.jobcatalog.job_it-game-web ul.list li {
  background: #fff url(../images/jobcatalog/job_arrow02.svg)no-repeat center bottom 28px/28px auto;
}
.jobcatalog.job_environment-bio ul.list li {
  background: #fff url(../images/jobcatalog/job_arrow03.svg)no-repeat center bottom 28px/28px auto;
}
.jobcatalog_list ul.list li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.jobcatalog_list ul.list li:hover {
  opacity: 0.6;
  transition: all 0.1s linear;
}
.jobcatalog_list ul.list li .img_box {
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: auto;
  max-height: 160px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jobcatalog_list ul.list li img {
  width: 100%;
  height: auto;
}
.jobcatalog_list ul.list li .cnt_box {
  padding: 24px 24px 80px;
  min-height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jobcatalog_list .cnt_box p {
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
  font-weight: 700;
}
.jobcatalog_list #recommend {
  margin: 0 0 -120px;
}
.jobcatalog_list #recommend .inner {
  width: 100%;
  max-width: 920px;
  padding: 100px 0 clamp(200px, 2.5vw, 260px);
  margin: 0 auto 0;
}
.jobcatalog_list #recommend .flex_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 50px;
}
.jobcatalog_list #recommend .container {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.jobcatalog_list #recommend .ttl_box h2 {
  font-size: clamp(27px, 3vw, 35px);
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin-bottom: 51px;
  font-weight: 700;
}
.jobcatalog_list #recommend .ttl_box span {
  font-size: 18px;
}
.jobcatalog_list #recommend .inner .left_box {
  width: 49%;
  max-width: 450px;
}
.jobcatalog_list #recommend .inner .left_box img {
  width: 100%;
  height: auto;
  border-radius: 20px 0 0 20px;
}
.jobcatalog_list #recommend .inner .right_box {
  width: 51%;
  max-width: 470px;
  display: flex;
  align-items: center;
}
.jobcatalog_list #recommend .inner .right_box .inner {
  padding: 0 min(4.5vw, 50px) 0 min(4.5vw, 50px);
}
.jobcatalog_list #recommend .inner .right_box .inner .ttl_box h2 {
  margin-bottom: 0;
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box {
  margin: min(4vw, 20px) auto 0 0;
  display: flex;
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box a {
  display: inline-block;
  border-radius: 36px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-family: "Zen Maru Gothic", sans-serif;
  width: auto;
  min-width: 200px;
  max-width: 300px;
  height: 40px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  padding: 10px 40px 10px 20px;
  margin: 0;
  position: relative;
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box a.type_a {
  max-width: 310px;
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box a span {
  font-size: clamp(10px, 1vw, 11px);
  margin: 0;
  display: inline;
}
.jobcatalog.job_architecture-interior #recommend .inner .right_box .inner .btn_box a {
  background: #CC7645;
}
.jobcatalog.job_it-game-web #recommend .inner .right_box .inner .btn_box a {
  background: #51BEC8;
}
.jobcatalog.job_environment-bio #recommend .inner .right_box .inner .btn_box a {
  background: #6CBC64;
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box a::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  background-color: #fff;
  top: 22px;
  right: 20px;
  border-radius: 25px;
  transform: rotate(-45deg);
}
.jobcatalog_list #recommend .inner .right_box .inner .btn_box a::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  background-color: #fff;
  top: 16px;
  right: 20px;
  border-radius: 25px;
  transform: rotate(45deg);
}
.jobcatalog_list #recommend .page_bl .ttl_box {
  border-bottom: none;
  margin-bottom: 49px;
  padding: 0;
}
.jobcatalog_list .st0 {
  fill: #74c8d3;
}
.jobcatalog_list #recommend .inner .right_box .inner .ttl_box span {
  font-size: clamp(13px, 3vw, 20px);
  font-weight: 500;
  color: #23A4BD;
  font-family: "Zen Maru Gothic", sans-serif;
  margin-bottom: 4px;
  text-align: left;
  letter-spacing: 1.5px;
  display: block;
}
.jobcatalog.job_architecture-interior #recommend .inner .right_box .inner .ttl_box span {
  color: #CC7645;
}
.jobcatalog.job_it-game-web #recommend .inner .right_box .inner .ttl_box span {
  color: #51BEC8;
}
.jobcatalog.job_environment-bio #recommend .inner .right_box .inner .ttl_box span {
  color: #6CBC64;
}
.jobcatalog_list #recommend .inner .right_box .inner .ttl_box h2 {
  font-size: clamp(22px, 3.6vw, 28px);
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: left;
  letter-spacing: 0.3rem;
  margin: 0 0 min(2vw, 20px) 0;
}
.jobcatalog_list #recommend .inner .right_box .inner .ttl_box h2 span {
  font-size: clamp(16px, 3.6vw, 18px);
  color: #000 !important;
  margin: 0;
  display: inline;
}
.jobcatalog_list #recommend .inner .right_box .inner p {
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.02em;
  text-align: left;
}
.jobcatalog_list #recommend .ttl_box {
  margin-bottom: 0;
}
.jobcatalog_list #recommend .btn_box a {
  font-size: 18px;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
  max-width: 388px;
  height: 60px;
  line-height: 40px;
  padding: 10px 0;
  text-align: center;
  color: #74c8d3;
  background: #fff;
  display: block;
  border-radius: 36px;
  margin: 0 auto;
  position: relative;
}
.jobcatalog.job_architecture-interior #recommend a {
  color: #CC7645;
}
.jobcatalog.job_it-game-web #recommend a {
  color: #51BEC8;
}
.jobcatalog.job_environment-bio #recommend a {
  color: #6CBC64;
}
.jobcatalog_list #recommend a::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 3px;
  background-color: #74c8d3;
  top: 33px;
  right: 30px;
  border-radius: 25px;
  transform: rotate(-45deg);
  background-image: none; /*継承元スタイル回避*/
}
.jobcatalog_list #recommend a::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 3px;
  background-color: #74c8d3;
  top: 24px;
  right: 30px;
  border-radius: 25px;
  transform: rotate(45deg);
  background-image: none; /*継承元スタイル回避*/
}
.jobcatalog.job_architecture-interior #recommend a::before, .jobcatalog.job_architecture-interior #recommend a::after {
  background-color: #CC7645;
}
.jobcatalog.job_it-game-web #recommend a::before, .jobcatalog.job_it-game-web #recommend a::after {
  background-color: #51BEC8;
}
.jobcatalog.job_environment-bio #recommend a::before, .jobcatalog.job_environment-bio #recommend a::after {
  background-color: #6CBC64;
}
@media only screen and (min-width: 768px) {
  .jobcatalog_list ul.list li span {
    display: inline-block;
  }
}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 920px) {
  .jobcatalog_list ul.list {
    grid-template-columns: repeat(2, 1fr);
  }
  .jobcatalog_list #recommend .flex_box {
    flex-direction: column;
  }
  .jobcatalog_list #recommend .inner .left_box, .jobcatalog_list #recommend .inner .right_box {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .jobcatalog_list #recommend .inner .left_box img {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }
  .jobcatalog_list #recommend .inner .right_box {
    border-radius: 0 0 20px 20px;
    padding: 20px 25px 25px;
  }
  .jobcatalog_list #recommend .inner .right_box .inner {
    padding: 0;
  }
  .jobcatalog_list #recommend .inner .right_box .inner .btn_box a {
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 480px) {
  .jobcatalog_list ul.list {
    grid-template-columns: repeat(1, 1fr);
  }
	.jobcatalog_list ul.list li {
    max-width: 100%;
  }
}
/* ------------------------------- job-catalog detail ------------------------------- */
.jobcatalog_detail .top_info {
  display: inline-block;
}
.jobcatalog_detail .top_info .inner {
  width: 100%;
  max-width: 1000px;
  padding: 0 0 73px 40px;
  margin: 160px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jobcatalog_detail .top_info .inner .top_info_txt {
  width: 62%;
  max-width: 620px;
}
.jobcatalog_detail .top_info .inner .top_info_illust {
  width: 34%;
  max-width: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jobcatalog_detail .top_info .inner .top_info_illust img {
  max-height: 310px;
  width: auto;
}
.jobcatalog_detail .top_info h2 {
  color: #2a2c2c;
  font-size: clamp(27px, 4vw, 36px);
  text-align: left;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  margin: 30px 0 22px;
}
.jobcatalog_detail .top_info p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 500;
  color: #2a2c2c;
  text-align: left;
}
.jobcatalog_detail .top_info .inner .top_info_txt .flex_box {
  justify-content: flex-start;
  align-items: stretch;
  margin: 0 auto;
}
.jobcatalog_detail .top_info h1 {
  width: 220px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.1rem;
  background: #000;
  border-radius: 30px;
  display: block;
  padding: 4px 50px 6px 30px;
  margin: 0;
  position: relative;
  text-align: center;
}
.jobcatalog_detail .top_info h1::after {
  position: absolute;
  content: "";
  width: 23px;
  height: 25px;
  background: url(../images/jobcatalog/jobcatalog_ttlicon.svg)no-repeat center center/22px auto;
  top: calc(50% - 13px);
  right: 26px;
}
.jobcatalog_detail .top_info h3 {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  padding: 0 0 0 30px;
  margin: 0;
}
.jobcatalog_detail .container {
  width: 100%;
}
.jobcatalog_detail .container article {
  max-width: 920px;
  width: 100%;
  padding: 100px 0 30px;
  margin: 0 auto;
}
.jobcatalog_detail .container article section {
  padding: 0 0 80px;
}
.jobcatalog_detail .container article h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(16px, 3vw, 30px);
  font-weight: 500;
  color: #23A4BD;
  text-align: left;
  height: max(30px, 38px);
  line-height: max(30px, 38px);
  padding: 0 0 0 max(36px, 50px);
  margin: 0 0 clamp(30px, 3vw, 50px);
  position: relative;
}
.jobcatalog.job_architecture-interior .container article h2 {
  color: #CC7645;
}
.jobcatalog.job_it-game-web .container article h2 {
  color: #51BEC8;
}
.jobcatalog.job_environment-bio .container article h2 {
  color: #6CBC64;
}
.jobcatalog_detail .container article section h2::after {
  position: absolute;
  content: "";
  width: max(30px, 38px);
  height: max(30px, 38px);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.jobcatalog.job_architecture-interior .container article section h2::after {
  background: url(../images/jobcatalog/jobcatalog_detail_ttlicon01.svg)no-repeat center center/100% auto;
}
.jobcatalog.job_it-game-web .container article section h2::after {
  background: url(../images/jobcatalog/jobcatalog_detail_ttlicon02.svg)no-repeat center center/100% auto;
}
.jobcatalog.job_environment-bio .container article section h2::after {
  background: url(../images/jobcatalog/jobcatalog_detail_ttlicon03.svg)no-repeat center center/100% auto;
}
.jobcatalog_detail .container article section img {
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto clamp(30px, 3vw, 50px);
  border-radius: 10px;
}
.jobcatalog_detail .container article section h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 500;
  padding: 26px 0 8px;
}
.jobcatalog_detail .container article section h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  padding: 20px 0 0;
  line-height: 2em;
}
.jobcatalog.job_architecture-interior .container article section h4 {
  color: #CC7645;
}
.jobcatalog.job_it-game-web .container article section h4 {
  color: #51BEC8;
}
.jobcatalog.job_environment-bio .container article section h4 {
  color: #6CBC64;
}
.jobcatalog_detail .container article section p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 2em;
}
.jobcatalog_detail .container article section a {
  display: inline-block;
  border-radius: 23px;
  font-size: 15px;
  font-weight: 500;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  color: #000;
  line-height: 45px;
  height: 45px;
  background: #E6E6E6;
  padding: 0 20px;
  margin: 0 6px 10px 0;
}
.jobcatalog_detail .container article section a:hover {
  background: #f2f2f2;
}

/* ------------ comment ------------ */
.jobcatalog_detail .container article section#comment {
	border-radius: 20px;
	padding: clamp(25px,4vw,40px);
	margin: 0 0 clamp(70px,10vw,100px);
	position: relative;
  font-family: 'Zen Maru Gothic', sans-serif;
}
.jobcatalog_detail.job_architecture-interior .container article section#comment {
  background: #F7F2EE;
}
.jobcatalog_detail.job_it-game-web .container article section#comment {
  background: #EFF4F3;
}
.jobcatalog_detail.job_environment-bio .container article section#comment {
  background: #E6F4E6;
}
.jobcatalog_detail .container article section#comment h3 {
  position: absolute;
	content: "";
	right: -12px;
	top: -10px;
  width: 194px;
	height: 40px;
	line-height: 40px;
  border-radius: 20px;
	padding: 0;
	text-align: center;
	color: #FFF;
	font-size: 15px;
	font-weight: 700;
}
.jobcatalog_detail.job_architecture-interior .container article section#comment h3 {
  background-color: #CC7645;
}
.jobcatalog_detail.job_it-game-web .container article section#comment h3 {
  background-color: #4BBEC6;
}
.jobcatalog_detail.job_environment-bio .container article section#comment h3 {
  background-color: #6CBC64;
}
.jobcatalog_detail .container article section#comment h3::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 36px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 9px 0px 0px;
}
.jobcatalog_detail.job_architecture-interior .container article section#comment h3::before {
  border-color: #CC7645 transparent transparent transparent;
}
.jobcatalog_detail.job_it-game-web .container article section#comment h3::before {
  border-color: #4BBEC6 transparent transparent transparent;
}
.jobcatalog_detail.job_environment-bio .container article section#comment h3::before {
  border-color: #6CBC64 transparent transparent transparent;
}
.jobcatalog_detail .container article section#comment div {
  display: grid;
	grid-template-columns: clamp(100px,13vw,132px) 1fr;
	align-items: center;
	grid-gap: clamp(10px,1.2vw,12px) clamp(20px,3.5vw,35px);
	position: relative;
}
.jobcatalog_detail .container article section#comment div * {
  transition: all 0.2s linear;
}
.jobcatalog_detail .container article section#comment div img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: clamp(100px,13vw,132px);
  height: clamp(100px,13vw,132px);
	margin: 0 auto;
}
.jobcatalog_detail .container article section#comment div h4 {
  grid-column: 2;
  grid-row: 1;
	color: #000;
  font-size: clamp(16px,2vw,20px);
  font-weight: 500;
  padding: clamp(0px,2vw,20px) 0 0;
	line-height: 1.2;
}
.jobcatalog_detail .container article section#comment div p {
  grid-column: 2;
  grid-row: 2;
	line-height: 1.6;
}

@media only screen and (max-width: 1000px) {
  .jobcatalog_detail .top_info .inner {
    width: 100%;
    max-width: 1000px;
    padding: 0 0 73px 0;
    margin: 160px auto 0;
    flex-direction: column;
  }
  .jobcatalog_detail .top_info .inner .top_info_txt, .jobcatalog_detail .top_info .inner .top_info_illust {
    width: 100%;
    max-width: 100%;
  }
  .jobcatalog_detail .top_info .inner .top_info_illust {
    padding: 28px 0 0;
  }
  .jobcatalog_detail .top_info .inner .top_info_illust img {
    max-height: 310px;
    width: auto;
  }
  .jobcatalog_detail .top_info h2, .jobcatalog_detail .top_info p {
    text-align: center;
  }
  .jobcatalog_detail .top_info .inner .top_info_txt .flex_box {
    max-width: 450px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) {
  .jobcatalog_list .top_info .inner {
    padding: 0 0 clamp(30px, 4vw, 73px);
    margin: clamp(100px, 10vw, 160px) auto 0;
  }
  .jobcatalog_detail .top_info .inner {
    padding: 0 0 0 0;
  }
  .jobcatalog_detail .top_info .inner .top_info_illust img {
    max-height: 180px;
  }
  .jobcatalog_detail .top_info .inner .top_info_txt .flex_box {
    flex-wrap: wrap;
		justify-content: center;
  }
  .jobcatalog_detail .top_info .inner .top_info_txt .flex_box h1, .jobcatalog_detail .top_info .inner .top_info_txt .flex_box h3 {
    width: 100%;
  }
  .jobcatalog_detail .top_info .inner .top_info_txt .flex_box h3 {
    font-size: 16px;
    justify-content: center;
    padding: 20px 0 0;
  }
}
@media only screen and (max-width: 640px) {
  .jobcatalog_detail .container article section#comment div {
    grid-template-columns: 1fr;
  }
  .jobcatalog_detail .container article section#comment div img {
    grid-column: 1;
    grid-row: 1;
    margin: 25px auto 15px ;
  }
  .jobcatalog_detail .container article section#comment div h4 {
    grid-column: 1;
    grid-row: 2;
  }
  .jobcatalog_detail .container article section#comment div p {
    grid-column: 1;
    grid-row: 3;
  }
}
. #tmp_single table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px 0;
}
. #tmp_single table th {
  background: #e5e5e5;
}
. #tmp_single table tr th:first-child {
  min-width: 200px;
}
. #tmp_single table th, . #tmp_single table td {
  border: 1px solid #262626;
  padding: 10px 20px;
}