@charset "UTF-8";

/*　▼commonに切り替わったら移動　*/

#container {
  background: var(--color-bg);
}

/* 2026-07-27 private表示を応募ページではなくお仕事資料として表示するためのCSS追加開始 */

#page_job_detail.is_private_document #job_detail_main {
  width: 100%;
  max-width: none;
}

#page_job_detail.is_private_document #yuzawa_box,
#page_job_detail.is_private_document #footer_line,
#page_job_detail.is_private_document #common-bnr,
#page_job_detail.is_private_document .btm-conts,
#page_job_detail.is_private_document #f_search,
#page_job_detail.is_private_document #footer {
  display: none;
}

/* 2026-07-27 private表示を応募ページではなくお仕事資料として表示するためのCSS追加終了 */

/* =====================
  job_detail_layout
===================== */

#job_detail_side {
  display: none;
}

.btn_common._red.is_suspended {
  background: var(--color-gray);
}

.btn_common._red.is_suspended a {
  pointer-events: none;
  cursor: default;
}

/* =====================
  fv_job_detail
===================== */

#fv_job_detail .fv_meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#fv_job_detail .fv_notice {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

#fv_job_detail .fv_area {
  display: flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

#fv_job_detail .fv_area img {
  flex-shrink: 0;
}

#fv_job_detail .fv_no {
  color: var(--color-gray);
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0.02em;
}

#fv_job_detail .fv_ttl {
  letter-spacing: 0.02em;
}

#fv_job_detail .fv_img {
  width: 100%;
  aspect-ratio: 375 / 197;
  overflow: hidden;
}

#fv_job_detail .fv_img img {
  height: 100%;
  object-fit: cover;
}

/* =====================
  nav_job_detail
===================== */

#nav_job_detail {
  height: 40px;
  padding-top: 5px;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-gray-sub);
  z-index: 997;
}

#nav_job_detail.is_fixed {
  width: 100%;
  border-top: 1px solid #EEEEEE;
  position: fixed;
  left: 0;
}

#nav_job_detail ul {
  display: flex;
  height: 100%;
}

#nav_job_detail li {
  flex: 1;
  text-align: center;
}

#nav_job_detail li a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: 0.02em;
  position: relative;
}

#nav_job_detail li a::after {
  content: '';
  width: 100%;
  height: 2px;
  background: transparent;
  position: absolute;
  left: 0;
  bottom: -2px;
}

#nav_job_detail li.current a {
  color: var(--color-main);
}

#nav_job_detail li.current a::after {
  background: var(--color-main);
}

/* =====================
  overview
===================== */

#overview .overview_table table {
  width: 100%;
  border-collapse: collapse;
  letter-spacing: 0.02em;
}

#overview .overview_table tr {
  border-bottom: 1px solid var(--color-gray-sub);
}

#overview .overview_table th {
  font-weight: 700;
  line-height: 1.08;
  text-align: left;
}

#overview .overview_table td {
  line-height: 1.62;
}

#page_job_detail .tip {
  display: inline-block;
  position: relative;
}

#page_job_detail .tip_trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}

#page_job_detail .tip_trigger_text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#page_job_detail .tip_trigger img {
  flex-shrink: 0;
}

#page_job_detail .tip_body {
  border-radius: 5px;
  background: #333333;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.02em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  left: 100%;
  transform: translateY(-50%);
  z-index: 5;
}

#page_job_detail .tip:hover .tip_body,
#page_job_detail .tip:focus-within .tip_body,
#page_job_detail .tip.is_show .tip_body {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#overview .overview_point {
  background: #fff;
  position: relative;
}

#overview .overview_point_list li {
  display: flex;
  line-height: 1.57;
}

#overview .overview_point_list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 1px;
  background: url("../img/common/icon_check.svg") no-repeat center center / contain;
}

/* =====================
  detail_note
===================== */

.detail_note {
  color: var(--color-gray);
  line-height: 1.4;
}

/* =====================
  jobs
===================== */

#jobs .jobs_table table {
  width: 100%;
  border-collapse: collapse;
  letter-spacing: 0.02em;
}

#jobs .jobs_table tr:nth-child(even) {
  background: #ECEFF0;
}

#jobs .jobs_table th,
#jobs .jobs_table td {
  line-height: 1.6;
}

#jobs .jobs_table th {
  font-weight: 700;
  text-align: left;
}

#jobs .jobs_table_note {
  color: var(--color-gray);
  line-height: 1.5;
}

#jobs .jobs_table_note.is_normal {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

#jobs .jobs_table_note_red {
  color: var(--color-red);
}

#jobs .jobs_table a {
  text-decoration: underline;
}

/* =====================
  detail_slide
===================== */

.detail_slide {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.detail_slide_list {
  display: flex;
}

.detail_slide_list::after {
  content: "";
  display: block;
  flex: 0 0 1px;
}

.detail_slide_list li {
  flex-shrink: 0;
}

.detail_slide_img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
}

.detail_slide_img img {
  height: 100%;
  object-fit: cover;
}

.detail_slide figcaption {
  color: var(--color-gray);
  line-height: 1.82;
  letter-spacing: 0.02em;
}

/* =====================
  dorm
===================== */

#dorm .dorm_list {
  counter-reset: dorm_num;
}

#dorm .dorm_item {
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  counter-increment: dorm_num;
}

#dorm .dorm_head {
  width: 100%;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
}

#dorm .dorm_head::after {
  content: '';
  background: url("../img/common/icon_acc.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#dorm .dorm_item.is_open .dorm_head::after {
  background-image: url("../img/common/icon_acc_show.svg");
}

#dorm .dorm_head_ttl {
  display: flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#dorm .dorm_head_ttl span::after {
  content: counter(dorm_num);
}

#dorm .dorm_head_ttl img {
  flex-shrink: 0;
}

#dorm .dorm_body {
  display: none;
  position: relative;
}

#dorm .dorm_item.is_open .dorm_body {
  display: block;
}

#dorm .dorm_body::before {
  content: '';
  width: 100%;
  height: 1px;
  background: var(--color-gray-sub);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0
}

#dorm .dorm_sub_ttl {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/*  dorm_info_table
------------------------*/

#dorm .dorm_info_table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*  dorm_facility_table
------------------------*/

#dorm .dorm_facility_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#dorm .dorm_info_table th,
#dorm .dorm_info_table td {
  border: 1px solid var(--color-gray-sub);
  line-height: 1.6;
  text-align: left;
  letter-spacing: 0.02em;
}

#dorm .dorm_info_table th {
  background: #F5F7F8;
  font-weight: 700;
}

#dorm .dorm_facility_table tr:nth-child(odd) {
  background: #F5F7F8;
}

#dorm .dorm_facility_table tr:nth-child(even) {
  background: #ECEFF0;
}

#dorm .dorm_facility_table th,
#dorm .dorm_facility_table td {
  line-height: 1.42;
  vertical-align: middle;
}

#dorm .dorm_facility_table th {
  text-align: left;
  font-weight: 400;
}

#dorm .dorm_facility_table td {
  padding: 0;
  border-left: 1px solid var(--color-gray-sub);
  text-align: center;
}

#dorm .dorm_facility_table td:nth-child(2) {
  border-right: 1px solid var(--color-gray-sub);
}

#dorm .dorm_facility_table td:nth-child(4) {
  border-right: 1px solid var(--color-gray-sub);
}

#dorm .dorm_facility_table img {
  display: inline;
}

/*  dorm_feature
------------------------*/

#dorm .dorm_feature {
  background: #F5F7F8;
  position: relative;
}

#dorm .dorm_feature_text {
  line-height: 1.85;
  letter-spacing: 0.02em;
}

#dorm .dorm_environment_list li {
  position: relative;
}

#dorm .dorm_environment_list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gray);
  position: absolute;
  left: 0;
}

#dorm .dorm_environment_list a {
  text-decoration: underline;
}

#dorm .dorm_environment_list a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  background: url("../img/common/icon_newtab.svg") no-repeat center center / contain;
  vertical-align: middle;
}

/* =====================
  facility
===================== */

#facility .facility_ttl {
  display: flex;
  align-items: center;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
}

#facility .facility_ttl img {
  position: absolute;
}

#facility .facility_text {
  line-height: 1.846;
  letter-spacing: 0;
}

#facility .facility_map {
  overflow: hidden;
  background: #E8E8E8;
}

#facility .facility_map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

#facility .facility_related_list a {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-sub);
  border-radius: 5px;
  background: #fff;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
}

#facility .facility_related_list a::after {
  content: '';
  width: 6px;
  height: 10px;
  display: block;
  background: url("../img/common/icon_arrow_gray.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

#facility .facility_graph {
  width: 100%;
  max-width: 100%;
}

#facility .facility_graph_item {
  background: #fff;
  border-radius: 5px;
  position: relative;
}

#facility .facility_graph_item:not(.facility_graph_age) {
  height: 60px;
}

#facility .facility_graph_item + .facility_graph_item {
  margin-top: 5px;
}

#facility .facility_graph_age {
  height: 240px;
}

#facility .facility_graph_ttl {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: absolute;
  top: 50%;
  left: 4.478%;
  transform: translateY(-50%);
}

#facility .facility_graph_age .facility_graph_ttl {
  top: 20px;
  transform: none;
}

#facility .facility_gender_values {
  width: 49.552%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 12px;
  left: 40.299%;
}

#facility .facility_gender_values li {
  display: flex;
  align-items: baseline;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

#facility .facility_gender_values em,
#facility .facility_graph_percent em,
#facility .facility_age_percent em {
  margin-left: 1px;
  font-style: normal;
}

#facility .facility_gender_values strong {
  margin-left: 4px;
}

#facility .facility_gender_values .is_male {
  color: #6196DD;
}

#facility .facility_gender_values .is_female {
  color: #DE78A7;
}

#facility .facility_gender_bar {
  width: 62.687%;
  height: 10px;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  top: 35px;
  left: 32.836%;
}

#facility .facility_gender_bar span {
  height: 100%;
  display: block;
}

#facility .facility_gender_bar .is_male {
  width: var(--male-rate, 50%);
  border-radius: 5px 0 0 5px;
  background: #6196DD;
}

#facility .facility_gender_bar .is_female {
  width: var(--female-rate, 50%);
  border-radius: 0 5px 5px 0;
  background: #DE78A7;
}

#facility .facility_bar {
  width: 50.746%;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--color-bg);
  position: absolute;
  top: 26px;
  left: 32.836%;
}

#facility .facility_bar span {
  width: var(--percent, 0%);
  height: 100%;
  display: block;
  border-radius: 5px;
  background: var(--color-main);
}

#facility .facility_graph_percent {
  display: flex;
  align-items: baseline;
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  position: absolute;
  top: 50%;
  right: 2.388%;
  transform: translateY(-50%);
}

#facility .facility_age_chart {
  height: 170px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  right: 8.06%;
  bottom: 20px;
  left: 7.463%;
}

#facility .facility_age_chart::before {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background: var(--color-gray-sub);
  position: absolute;
  bottom: 25px;
  left: 0;
}

#facility .facility_age_chart li {
  width: 14.134%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

#facility .facility_age_percent {
  display: flex;
  align-items: baseline;
  margin-bottom: 3px;
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

#facility .facility_age_bar {
  width: 100%;
  height: var(--age-height, 0px);
  max-height: 115px;
  display: block;
  border-radius: 5px 5px 0 0;
  background: rgba(48, 189, 172, var(--age-opacity, 1));
}

#facility .facility_age_label {
  margin-top: 10px;
  color: var(--color-gray);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 700;
}

#facility .facility_data_table table {
  width: 100%;
  border-collapse: collapse;
  letter-spacing: 0.02em;
}

#facility .facility_data_table tr {
  border-bottom: 1px solid var(--color-gray-sub);
}

#facility .facility_data_table tr:first-of-type {
  border-top: 1px solid var(--color-gray-sub);
}

#facility .facility_data_table th {
  padding: 0;
  font-weight: 700;
  text-align: left;
}

#facility .facility_data_table td {
  padding: 0;
  line-height: 1.62;
}

/* =====================
  tanto
===================== */

#tanto .tanto_body {
  display: flex;
  align-items: flex-start;
}

#tanto .tanto_person {
  flex-shrink: 0;
}

#tanto .tanto_img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
}

#tanto .tanto_img img {
  height: 100%;
  object-fit: cover;
}

#tanto .tanto_person figcaption {
  color: var(--color-gray);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  font-weight: 700;
}

#tanto .tanto_text {
  flex: 1;
}

#tanto .tanto_comment {
  line-height: 1.846;
  letter-spacing: 0;
}

/* =====================
  job_detail_cta
===================== */

.job_detail_cta {
  padding: 32px 0;
}

.job_detail_cta .inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.job_detail_cta.is_fixed {
  height: var(--job-detail-cta-height, 114px);
  padding: 0;
}

.job_detail_cta.is_fixed .inner {
  position: fixed;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 0;
  z-index: 997;
  transform: translateZ(0);
}

.job_detail_cta .btn_common {
  width: auto;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.job_detail_cta .job_detail_favo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.job_detail_cta .job_detail_favo img {
  width: 22px;
  height: auto;
}

/* =====================
  社内管理項目（求人サイトには表示されない情報）
===================== */

.preview_internal_box {
  background: #fff5f5;
  padding: 20px 0;
}

.preview_internal_head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-red);
  margin-bottom: 8px;
}

.preview_internal_box .preview_section_title {
  flex: 1;
  min-width: 0;
  color: var(--color-red);
  font-size: 15px;
  margin-bottom: 0;
}

.preview_internal_actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview_internal_action_button {
  min-width: 50px;
  padding: 4px 9px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-red);
  border-radius: 4px;
  background: #fff;
  color: var(--color-red);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.preview_internal_action_button:hover,
.preview_internal_action_button:focus-visible,
.preview_internal_copy_button.is_copied {
  background: #fff0f4;
  color: var(--color-red);
}

.preview_internal_action_button:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.preview_internal_table {
  width: 100%;
  border-collapse: collapse;
}

.preview_internal_table th,
.preview_internal_table td {
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.6;
  vertical-align: top;
  text-align: left;
}

.preview_internal_table th {
  width: 120px;
  font-weight: 700;
  white-space: nowrap;
}

.preview_internal_table td {
  width: calc( 100% - 120px );
  overflow-wrap: anywhere;
}

.preview_internal_alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.preview_internal_alert_label {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--color-red);
  border-radius: 3px;
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.preview_internal_divider {
  border-top: 1px solid var(--color-red);
  margin: 10px 0;
}

.preview_internal_subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-red);
  margin: 8px 0 2px;
}

.preview_internal_divider + .preview_internal_memo .preview_internal_subtitle {
  margin-top: 0;
}

.preview_internal_text {
  font-size: 12px;
  line-height: 1.7;
}

/*-------------------------------------------*/
/*	PC
/*-------------------------------------------*/

@media screen and (min-width:900px) {

  /* =====================
    container
  ===================== */

  /*　▼commonに切り替わったら移動　*/

  #wrapper {
    overflow: clip;
  }

  #container {
    padding: 60px 0 80px;
  }

  .inner {
    max-width: 90%;
  }

  /* =====================
    job_detail_layout
  ===================== */

  #job_detail_layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  /*  job_detail_main
  ------------------------*/
  
  #job_detail_main {
    max-width: calc(100% - 280px);
    width: 68%;
    min-width: 0;
  }

  #job_detail_main .inner {
    width: 100%;
    max-width: 100%;
  }

  /*  job_detail_side
  ------------------------*/
  
  #job_detail_side {
    max-width: 280px;
    width: 29%;
    display: block;
    flex-shrink: 0;
    position: sticky;
    top: 85px;
  }

  #job_detail_side .side_job_box {
    padding: 20px;
    border: 1px solid var(--color-gray-sub);
    border-radius: 12px;
    background: #fff;
  }

  #job_detail_side .side_job_no {
    color: var(--color-gray);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: right;
    margin-bottom: 10px;
  }

  #job_detail_side .side_job_ttl {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-sub);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  #job_detail_side .side_job_summary {
    margin-top: 15px;
    letter-spacing: 0.02em;
  }

  #job_detail_side .side_job_summary div {
    display: flex;
    gap: 12px;
  }

  #job_detail_side .side_job_summary div:not(:last-child) {
    margin-bottom: 5px;
  }

  #job_detail_side .side_job_summary dt {
    width: 56px;
    flex-shrink: 0;
    color: var(--color-gray);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }

  #job_detail_side .side_job_summary dd {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
  }

  #job_detail_side .side_job_action {
    margin-top: 22px;
  }

  #job_detail_side .btn_common {
    width: 100%;
    height: 54px;
    margin: 0;
  }

  #job_detail_side .side_job_favo {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    border: 2px solid var(--color-gray-sub);
    border-radius: 100px;
    background: transparent;
    color: var(--color-gray);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  #job_detail_side .side_job_favo img {
    width: 22px;
    height: auto;
  }

  /* =====================
    fv_job_detail
  ===================== */

  #fv_job_detail {
    padding: 0 0 20px;
  }

  #fv_job_detail .fv_head {
    padding: 0 0 20px;
  }

  #fv_job_detail .fv_notice {
    font-size: 15px;
    padding: 25px 20px;
    margin-bottom: 20px;
  }

  #fv_job_detail .fv_meta {
    gap: 9px;
    margin-bottom: 16px;
  }

  #fv_job_detail .fv_area {
    gap: 5px;
    font-size: 12px;
    line-height: 1.4;
  }

  #fv_job_detail .fv_area img {
    width: 11px;
    height: 14px;
  }

  #fv_job_detail .fv_no {
    font-size: 11px;
    line-height: 1.4;
  }

  #fv_job_detail .fv_ttl {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
  }

  /* =====================
    nav_job_detail
  ===================== */

  #nav_job_detail {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 65px;
    border-width: 3px;
  }

  #nav_job_detail.is_fixed {
    width: 100%;
    position: sticky;
    top: 65px !important;
    left: auto;
  }

  #nav_job_detail li a {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  
  #nav_job_detail li a::after {
    height: 3px;
    bottom: -3px;
  }

  /* =====================
    overview
  ===================== */

  #overview {
    padding: 15px 0 0;
  }

  #overview .overview_table th,
  #overview .overview_table td {
    padding: 15px 0;
    font-size: 14px;
  }

  #overview .overview_table th {
    width: 150px;
    padding-right: 15px;
  }

  #overview .overview_table td {
    width: calc( 100% - 150px );
  }

  #page_job_detail .tip_trigger img {
    width: 18px;
    height: 17px;
  }

  #page_job_detail .tip_body {
    width: 194px;
    padding: 9px 11px;
    font-size: 11px;
    bottom: -11px;
  }

  #overview .overview_icons {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 21px;
  }

  #overview .overview_icons li {
    height: 45px;
    padding: 0 0 0 10px;
    gap: 5px;
  }

  #overview .overview_icons img {
    width: 34px;
    height: 34px;
  }

  #overview .overview_icons span {
    font-size: 12px;
    line-height: 1.2;
  }

  #overview .overview_point {
    margin-top: 35px;
    padding: 35px 40px 30px;
  }

  #overview .overview_point_list li {
    gap: 10px;
    font-size: 15px;
    line-height: 1.8;
  }

  #overview .overview_point_list li:not(:last-child) {
    margin-bottom: 7px;
  }

  #overview .overview_point_list li::before {
    width: 22px;
    height: 22px;
    margin-top: 2px;
  }

  /* =====================
    detail_note
  ===================== */

  .detail_note {
    font-size: 11px;
  }

  /* =====================
    jobs
  ===================== */

  #jobs .ttl_bar {
    margin-bottom: 15px;
  }

  #jobs .jobs_table th,
  #jobs .jobs_table td {
    padding: 15px 0;
    font-size: 14px;
    line-height: 1.8;
  }

  #jobs .jobs_table th {
    width: 180px;
    padding-left: 15px;
    padding-right: 15px;
  }

  #jobs .jobs_table td {
    width: calc( 100% - 180px );
    padding-right: 15px;
  }

  #jobs .jobs_table_note {
    margin-top: 6px;
    font-size: 11px;
  }

  #jobs .detail_slide {
    margin-top: 40px;
  }

  #jobs .detail_slide_list {
    gap: 22px;
    padding-bottom: 9px;
  }

  #jobs .detail_slide_list li {
    width: 250px;
  }

  #jobs .detail_slide figcaption {
    margin-top: 9px;
    font-size: 12px;
  }

  /* =====================
    dorm
  ===================== */

  #dorm .dorm_list {
    margin-top: 22px;
  }

  #dorm .dorm_item:not(:last-child) {
    margin-bottom: 11px;
  }

  #dorm .dorm_item .dorm_head {
    height: 57px;
  }

  #dorm .dorm_head {
    padding: 0 40px 0 11px;
  }

  #dorm .dorm_head::after {
    width: 15px;
    height: 15px;
    right: 15px;
  }

  #dorm .dorm_head_ttl {
    gap: 2px;
    font-size: 18px;
  }

  #dorm .dorm_head_ttl img {
    width: 34px;
    height: 34px;
  }

  #dorm .dorm_body_inner {
    padding: 25px 20px 30px;
  }

  #dorm .dorm_sub_ttl {
    margin-bottom: 11px;
    font-size: 16px;
  }

  #dorm .dorm_info_name {
    width: 150px;
  }

  #dorm .dorm_facility_name {
    width: calc((100% - 68px) / 2);
  }

  #dorm .dorm_facility_status {
    width: 34px;
  }

  #dorm .dorm_info_table th,
  #dorm .dorm_info_table td,
  #dorm .dorm_facility_table th,
  #dorm .dorm_facility_table td {
    font-size: 13px;
  }

  #dorm .dorm_info_table th {
    padding: 0 10px;
  }

  #dorm .dorm_info_table td {
    padding: 15px 10px;
  }

  #dorm .dorm_info_table .detail_note {
    margin-top: 5px;
  }

  #dorm .dorm_facility_table th,
  #dorm .dorm_facility_table td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #dorm .dorm_facility_table th {
    padding-left: 15px;
    padding-right: 15px;
  }

  #dorm .dorm_facility_table td {
    padding-left: 0;
    padding-right: 0;
  }

  #dorm .dorm_facility_table img {
    width: 16px;
    height: 16px;
  }

  #dorm .dorm_facility {
    margin-top: 30px;
  }

  #dorm .detail_slide {
    margin-top: 20px;
  }

  #dorm .detail_slide_list {
    gap: 22px;
    padding-bottom: 9px;
  }

  #dorm .detail_slide_list li {
    width: 250px;
  }

  #dorm .detail_slide figcaption {
    margin-top: 9px;
    font-size: 12px;
  }

  #dorm .dorm_feature {
    margin-top: 40px;
    padding: 25px 30px 20px;
  }

  #dorm .dorm_feature_text {
    font-size: 15px;
  }

  #dorm .dorm_environment {
    margin-top: 30px;
  }

  #dorm .dorm_environment_list li {
    font-size: 15px;
    padding-left: 17px;
    line-height: 1.6;
  }

  #dorm .dorm_environment_list li:not(:last-child) {
    margin-bottom: 5px;
  }

  #dorm .dorm_environment_list li::before {
    top: 9px;
    left: 2px;
  }

  #dorm .dorm_environment_list a::after {
    width: 13px;
    height: 13px;
    margin-bottom: 3px;
  }

  #dorm .dorm_environment .detail_note {
    margin-top: 10px;
  }

  #dorm .dorm_note {
    margin-top: 30px;
  }

  /* =====================
    facility
  ===================== */

  #facility .facility_ttl {
    padding-left: 32px;
    font-size: 18px;
    margin-bottom: 11px;
  }

  #facility .facility_ttl img {
    width: 34px;
    height: 34px;
    top: -5px;
    left: -5px;
  }

  #facility .facility_place .facility_ttl img {
    left: 5px;
  }

  #facility .facility_place img {
    width: 17px;
    height: 22px;
    top: 0;
    left: 0;
  }

  #facility .facility_section {
    margin-top: 30px;
  }

  #facility .facility_text {
    font-size: 15px;
  }

  /*  facility_map
  ------------------------*/
  
  #facility .facility_map {
    aspect-ratio: 4 / 2;
    margin-top: 20px;
  }

  /*  facility_related
  ------------------------*/

  #facility .facility_related_list {
    margin-top: 14px;
  }

  #facility .facility_related_list li:not(:last-child) {
    margin-bottom: 7px;
  }

  #facility .facility_related_list a {
    min-height: 48px;
    padding: 11px 34px 11px 13px;
    font-size: 14px;
  }

  /*  facility_data
  ------------------------*/
  
  #facility .facility_data {
    padding-top: 30px;
    border-top: 1px solid var(--color-gray-sub);
  }

  #facility .facility_graph_item + .facility_graph_item {
    margin-top: 7px;
  }

  #facility .facility_graph_ttl {
    font-size: 13px;
    left: 3%;
  }

  #facility .facility_gender_values span,
  #facility .facility_gender_values em,
  #facility .facility_graph_percent em,
  #facility .facility_age_percent em,
  #facility .facility_age_label {
    font-size: 11px;
  }

  #facility .facility_gender_values strong,
  #facility .facility_age_percent strong {
    font-size: 17px;
  }

  #facility .facility_graph_percent strong {
    font-size: 20px;
  }

  #facility .facility_graph_bar,
  #facility .facility_graph_gender {
    --facility_percent_width: 45px;
    --facility_percent_gap: 13px;
    --facility_percent_right: 9px;
    --facility_gender_bar_right: 22px;
  }

  #facility .facility_graph_bar .facility_bar {
    width: auto;
    right: calc(var(--facility_percent_right) + var(--facility_percent_width) + var(--facility_percent_gap));
  }

  #facility .facility_graph_bar .facility_graph_percent {
    width: var(--facility_percent_width);
    justify-content: flex-start;
    right: var(--facility_percent_right);
  }

  #facility .facility_graph_gender .facility_gender_bar {
    width: auto;
    right: var(--facility_gender_bar_right);
  }

  #facility .facility_graph_gender .facility_gender_values {
    width: auto;
    right: var(--facility_gender_bar_right);
    left: 32.836%;
  }

  #facility .facility_data_table {
    margin-top: 25px;
  }

  #facility .facility_age_chart::before {
    bottom: 26px;
  }

  #facility .facility_data_table th,
  #facility .facility_data_table td {
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.6;
  }

  #facility .facility_data_table th {
    width: 150px;
    padding-right: 10px;
  }

  #facility .facility_data_table td {
    width: calc( 100% - 150px );
  }

  /* =====================
    tanto
  ===================== */

  #tanto .ttl_bar {
    margin-bottom: 34px;
  }

  #tanto .tanto_body {
    gap: 28px;
  }

  #tanto .tanto_person {
    width: 91px;
  }

  #tanto .tanto_person figcaption {
    margin-top: 5px;
    font-size: 11px;
  }

  #tanto .tanto_comment {
    font-size: 15px;
  }

  .job_detail_cta {
    display: none;
  }

  /* =====================
    PC調整
  ===================== */
  
  @media screen and (max-width:1100px) {

    #overview .overview_icons {
      grid-template-columns: repeat(4, 1fr);
    }

  }

}

/*-------------------------------------------*/
/*	SP
/*-------------------------------------------*/

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

  /* =====================
    container
  ===================== */

  /*　▼commonに切り替わったら移動　*/  
  
  #container {
    padding-bottom: 20px;
  }

  /* =====================
    job_detail_layout
  ===================== */

  #job_detail_layout {
    width: 100%;
    max-width: none;
  }

  /* =====================
    fv_job_detail
  ===================== */

  #fv_job_detail {
    padding: 20px 0 15px;
  }

  #fv_job_detail .fv_head {
    padding: 0 0 15px;
  }

  #fv_job_detail .fv_notice {
    font-size: 13px;
    padding: 15px 20px;
    margin-bottom: 15px;
  }

  #fv_job_detail .fv_meta {
    gap: 8px;
    margin-bottom: 14px;
  }

  #fv_job_detail .fv_area {
    gap: 5px;
    font-size: 10px;
    line-height: 1.4;
  }

  #fv_job_detail .fv_area img {
    width: 10px;
    height: 13px;
  }

  #fv_job_detail .fv_no {
    font-size: 10px;
    line-height: 1.4;
  }

  #fv_job_detail .fv_ttl {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4375;
    letter-spacing: 0.02em;
  }

  #fv_job_detail .fv_visual {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  /* =====================
    nav_job_detail
  ===================== */

  #nav_job_detail li a {
    font-size: 11px;
  }

  /* =====================
    overview
  ===================== */

  #overview {
    padding: 13px 0 0;
    margin-bottom: 20px;
  }

  #overview .overview_table th,
  #overview .overview_table td {
    padding: 10px 0;
  }

  #overview .overview_table th {
    width: 90px;
    font-size: 13px;
    padding-right: 10px;
  }

  #overview .overview_table td {
    font-size: 13px;
  }

  #page_job_detail .tip_trigger img {
    width: 16px;
    height: 15px;
  }

  #page_job_detail .tip_body {
    width: 170px;
    padding: 8px 10px;
    font-size: 10px;
    bottom: -10px;
  }

  #overview .overview_icons {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 19px;
  }

  #overview .overview_icons li {
    height: 40px;
    padding: 0 0 0 9px;
    gap: 4px;
  }

  #overview .overview_icons img {
    width: 30px;
    height: 30px;
  }

  #overview .overview_icons span {
    font-size: 10px;
  }

  #overview .overview_point {
    width: 100vw;
    margin: 32px calc(50% - 50vw) 0;
    padding: 28px 5%;
  }

  #overview .overview_point_list li {
    gap: 8px;
    font-size: 14px;
  }

  #overview .overview_point_list li:not(:last-child) {
    margin-bottom: 10px;
  }

  #overview .overview_point_list li::before {
    width: 20px;
    height: 20px;
  }

  /* =====================
    detail_note
  ===================== */

  .detail_note {
    font-size: 10px;
  }

  /* =====================
    jobs
  ===================== */
  
  #jobs .ttl_bar {
    margin-bottom: 0;
  }
  
  #jobs .jobs_table {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  #jobs .jobs_table th,
  #jobs .jobs_table td {
    padding: 10px 0;
    font-size: 13px;
  }

  #jobs .jobs_table tr:first-child th,
  #jobs .jobs_table tr:first-child td {
    padding-top: 20px;
  }

  #jobs .jobs_table th {
    max-width: 100px;
    width: 30%;
    padding-left: 5%;
    padding-right: 10px;
  }

  #jobs .jobs_table td {
    max-width: calc( 100% - 100px );
    width: 70%;
    padding-right: 5%;
  }

  #jobs .jobs_table_note {
    margin-top: 6px;
    font-size: 10px;
  }

  #jobs .detail_slide {
    width: 100vw;
    margin: 24px calc(50% - 50vw) 0;
  }

  #jobs .detail_slide_list {
    gap: 20px;
    padding: 0 5% 8px;
  }

  #jobs .detail_slide_list li {
    width: 180px;
  }

  #jobs .detail_slide figcaption {
    margin-top: 8px;
    font-size: 11px;
  }

  /* =====================
    dorm
  ===================== */

  #dorm .dorm_item:not(:last-child) {
    margin-bottom: 10px;
  }

  #dorm .dorm_item .dorm_head {
    height: 55px;
  }

  #dorm .dorm_head {
    padding: 0 35px 0 10px;
  }

  #dorm .dorm_head::after {
    width: 14px;
    height: 14px;
    right: 15px;
  }

  #dorm .dorm_head_ttl {
    gap: 2px;
    font-size: 16px;
  }

  #dorm .dorm_head_ttl img {
    width: 30px;
    height: 30px;
  }

  #dorm .dorm_body_inner {
    padding: 20px 15px 25px;
  }

  #dorm .dorm_sub_ttl {
    margin-bottom: 10px;
    font-size: 14px;
  }

  #dorm .dorm_info_name {
    width: 100px;
  }

  #dorm .dorm_facility_name {
    width: calc((100% - 60px) / 2);
  }

  #dorm .dorm_facility_status {
    width: 30px;
  }

  #dorm .dorm_info_table th,
  #dorm .dorm_info_table td,
  #dorm .dorm_facility_table th,
  #dorm .dorm_facility_table td {
    font-size: 12px;
  }

  #dorm .dorm_info_table th {
    padding: 0 10px;
    width: 100px;
  }

  #dorm .dorm_info_table td {
    width: calc(100% - 100px);
    padding: 10px;
  }

  #dorm .dorm_info_table .detail_note {
    margin-top: 5px;
  }

  #dorm .dorm_facility_table th,
  #dorm .dorm_facility_table td {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #dorm .dorm_facility_table th {
    padding-left: 10px;
    padding-right: 10px;
  }

  #dorm .dorm_facility_table td {
    padding-left: 0;
    padding-right: 0;
  }

  #dorm .dorm_facility_table img {
    width: 14px;
    height: 14px;
  }

  #dorm .dorm_facility {
    margin-top: 20px;
  }

  #dorm .detail_slide {
    margin-top: 26px;
  }

  #dorm .detail_slide_list {
    gap: 20px;
    padding-bottom: 8px;
  }

  #dorm .detail_slide_list li {
    width: 180px;
  }

  #dorm .detail_slide figcaption {
    margin-top: 8px;
    font-size: 11px;
  }

  #dorm .dorm_feature {
    margin-top: 35px;
    padding: 20px 15px;
  }

  #dorm .dorm_feature_text {
    font-size: 13px;
  }

  #dorm .dorm_environment {
    margin-top: 20px;
  }

  #dorm .dorm_environment_list li {
    font-size: 13px;
    line-height: 1.6;
    padding-left: 15px;
  }

  #dorm .dorm_environment_list li:not(:last-child) {
    margin-bottom: 5px;
  }

  #dorm .dorm_environment_list li::before {
    top: 8px;
    left: 2px;
  }

  #dorm .dorm_environment_list a::after {
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
  }

  #dorm .dorm_environment .detail_note {
    margin-top: 9px;
  }

  #dorm .dorm_note {
    margin-top: 20px;
  }

  /* =====================
    facility
  ===================== */

  #facility .facility_ttl {
    padding-left: 23px;
    margin-bottom: 10px;
    font-size: 16px;
  }

  #facility .facility_ttl img {
    width: 30px;
    height: 30px;
    top: -4.5px;
    left: -9px;
  }

  #facility .facility_section {
    margin-top: 30px;
  }

  #facility .facility_place img {
    width: 15px;
    height: 20px;
    top: 0;
    left: 0;
  }

  #facility .facility_text {
    font-size: 13px;
  }

  /*  facility_map
  ------------------------*/
  
  #facility .facility_map {
    margin-top: 15px;
    aspect-ratio: 4 / 2;
  }

  /*  facility_related
  ------------------------*/

  #facility .facility_related_list {
    margin-top: 13px;
  }

  #facility .facility_related_list li:not(:last-child) {
    margin-bottom: 5px;
  }

  #facility .facility_related_list a {
    min-height: 42px;
    padding: 10px 34px 10px 12px;
    font-size: 13px;
  }
  
  /*  facility_data
  ------------------------*/
  
  #facility .facility_data {
    padding-top: 30px;
    position: relative;
  }

  #facility .facility_data::before {
    content: '';
    width: 100vw;
    height: 1px;
    display: block;
    background: var(--color-gray-sub);
    position: absolute;
    top: 0;
    left: calc( 50% - 50vw );
  }

  #facility .facility_graph_ttl {
    font-size: 12px;
  }

  #facility .facility_gender_values span,
  #facility .facility_gender_values em,
  #facility .facility_graph_percent em,
  #facility .facility_age_percent em,
  #facility .facility_age_label {
    font-size: 10px;
  }

  #facility .facility_gender_values strong,
  #facility .facility_age_percent strong {
    font-size: 15px;
  }

  #facility .facility_graph_percent strong {
    font-size: 18px;
  }

  #facility .facility_graph_bar,
  #facility .facility_graph_gender {
    --facility_percent_width: 40px;
    --facility_percent_gap: 12px;
    --facility_percent_right: 8px;
    --facility_gender_bar_right: 20px;
  }

  #facility .facility_graph_bar .facility_bar {
    width: auto;
    right: calc(var(--facility_percent_right) + var(--facility_percent_width) + var(--facility_percent_gap));
  }

  #facility .facility_graph_bar .facility_graph_percent {
    width: var(--facility_percent_width);
    justify-content: flex-start;
    right: var(--facility_percent_right);
  }

  #facility .facility_graph_gender .facility_gender_bar {
    width: auto;
    right: var(--facility_gender_bar_right);
  }

  #facility .facility_graph_gender .facility_gender_values {
    width: auto;
    right: var(--facility_gender_bar_right);
    left: 32.836%;
  }

  #facility .facility_data_table {
    margin-top: 20px;
  }

  #facility .facility_data_table th,
  #facility .facility_data_table td {
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.5;
  }

  #facility .facility_data_table th {
    width: 120px;
    padding-right: 10px;
  }

  #facility .facility_data_table td {
    width: calc( 100% - 120px );
  }

  /* =====================
    tanto
  ===================== */

  #tanto .ttl_bar {
    margin-bottom: 30px;
  }

  #tanto .tanto_body {
    gap: 25px;
  }

  #tanto .tanto_person {
    width: 80px;
  }

  #tanto .tanto_person figcaption {
    margin-top: 5px;
    font-size: 10px;
  }

  #tanto .tanto_comment {
    font-size: 13px;
  }

  /* =====================
    SP調整
  ===================== */
  
  @media screen and (min-width:501px) {

    #overview .overview_icons {
      grid-template-columns: repeat(4, 1fr);
    }

  }

  @media screen and (min-width:701px) {

    #overview .overview_icons {
      grid-template-columns: repeat(5, 1fr);
    }

  }

  @media screen and (min-width:778px) {

    #overview .overview_point {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    #jobs .jobs_table {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    #jobs .detail_slide_list {
      padding-left: calc( (100% - 700px) / 2);
      padding-right: calc( (100% - 700px) / 2);
    }

  }

}