@charset "UTF-8";
/* ==========================================================================
   リデザイン 第1段階 (参考: buddica.jp / neo-career.co.jp)
   - 色: 白・ベージュ・黒を基調に、オレンジは差し色に絞る
   - 見出し: 大きな英字ラベル + 日本語見出し
   - 余白: セクションの上下余白を広げる
   - 斜め (clip-path) の区切りをやめる
   style.css より後に読み込んで上書きする。
   元に戻すときは layouts/default.blade.php の読み込み行を消す。
   ========================================================================== */

/* --- 色 ------------------------------------------------------------------ */

/* オレンジ寄りの薄い背景色を、ニュートラルなベージュにそろえる */
:root {
  --color-bg-green: #F8F5F1;
  --color-bg-purple: #F8F5F1;
  --color-bg-pink: #F8F5F1;
}

/* 求人検索エリア: オレンジ一面をやめ、ごく薄いオレンジからベージュへのグラデーションに白いカードを置く */
.top_job_search {
  padding: 64px 0;
  background-color: #F8F5F1;
  background-image: linear-gradient(170deg, #FFF1E2 0%, #F8F5F1 100%);
}

.top_job_search .ks_search_body {
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
}

/* 明るい背景になるので、白前提だった見出し・リンクの文字色を濃くする */
.top_job_search_content_wrap .top_job_search_content_form .top_job_search_content_title_block .top_job_search_content_title,
.top_job_search_content_wrap .top_job_search_content_form .top_job_search_content_title_block .top_job_search_content_sub_title {
  color: var(--color-black, #111111);
}

.top_job_search_content_wrap .top_job_search_content_form .top_job_search_content_title_block .top_job_search_content_sub_title span {
  color: var(--theme-color-primary-config-custom, #ff8000);
}

/* 白い虫眼鏡アイコンを黒に */
.top_job_search .top_job_search_content_title img {
  -webkit-filter: brightness(0);
  filter: brightness(0);
}

.ks_search_reset {
  color: var(--color-gray, #555555);
}

/* 求人検索のセレクトボックス: 白いカードに同化しないよう、選択チップと同じピル型の枠+オレンジの矢印 */
.top_job_search .common_select.ks_search_select {
  width: 260px;
  height: 44px;
  padding: 0 44px 0 20px;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ff8000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  border: 1px solid var(--color-border-gray, #dfdfdf);
  border-radius: 9999px;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.top_job_search .common_select.ks_search_select:hover {
  border-color: var(--theme-color-primary-config-custom, #ff8000);
}

.top_job_search .common_select.ks_search_select:focus {
  outline: none;
  border-color: var(--theme-color-primary-config-custom, #ff8000);
  box-shadow: 0 0 0 3px rgba(255, 128, 0, 0.18);
}

/* 給与の選択肢はラッパーなしでセレクト直後に並ぶので、地域 (ks_search_chip_wrap) と同じ余白をつける */
.top_job_search .ks_search_select + .ks_search_chip_group {
  margin: 10px 0 0;
}

/* 選択済みは文字を濃く */
.top_job_search .common_select.ks_search_select.active {
  color: var(--color-black, #111111);
  font-weight: 700;
}

/* --- 見出し -------------------------------------------------------------- */

.common_section_sub_title {
  display: block;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--color-black, #111111);
  margin: 0 0 16px;
}

.common_section_sub_title::before {
  display: none;
}

/* 日本語見出しの頭にブランドカラーの短い線 */
.common_section_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-text, #414141);
  margin: 0 0 56px;
}

.common_section_title::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  background-color: var(--theme-color-primary-config-custom, #ff8000);
}

.about_section .common_section_sub_title {
  padding: 96px 0 0;
}

/* --- 余白 ---------------------------------------------------------------- */

.top_pickup,
.top_news,
.top_new_job,
.top_category_column,
.ks_instagram,
.introduction,
.ranking_site_introduction,
.video,
.sns_topics,
.ks_sns_topics,
.media,
.special_column {
  padding: 120px 0;
}

.about_section {
  padding: 0 0 120px;
}

.ks_about_section {
  padding: 120px 0;
}

.common_register_btn_block {
  padding: 110px 0;
}

/* --- 斜めの区切りをやめる ------------------------------------------------ */

.about_section,
.media,
.special_column,
.common_register_btn_block,
.top_new_job {
  -webkit-clip-path: none;
  clip-path: none;
  margin-top: 0;
}

/* --- タブレット ---------------------------------------------------------- */

@media only screen and (max-width: 840px) {
  .top_job_search {
    padding: 56px 0;
  }

  .common_section_sub_title {
    font-size: 40px;
  }

  .common_section_title {
    margin: 0 0 40px;
  }

  .top_pickup,
  .top_news,
  .top_new_job,
  .top_category_column,
  .ks_instagram,
  .introduction,
  .ranking_site_introduction,
  .video,
  .sns_topics,
  .ks_sns_topics,
  .media,
  .special_column {
    padding: 96px 0;
  }

  .about_section {
    padding: 0 0 96px;
  }

  .about_section .common_section_sub_title {
    padding: 72px 0 0;
  }

  .ks_about_section {
    padding: 96px 0;
  }

  .common_register_btn_block {
    padding: 88px 0;
  }
}

/* --- スマホ -------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
  .top_job_search {
    padding: 44px 0;
  }

  .top_job_search .common_select.ks_search_select {
    width: 100%;
  }

  .common_section_sub_title {
    font-size: 32px;
    margin: 0 0 12px;
  }

  .common_section_title {
    gap: 10px;
    font-size: 16px;
    margin: 0 0 32px;
  }

  .common_section_title::before {
    width: 24px;
  }

  .top_pickup,
  .top_news,
  .top_new_job,
  .top_category_column,
  .ks_instagram,
  .introduction,
  .ranking_site_introduction,
  .video,
  .sns_topics,
  .ks_sns_topics,
  .media,
  .special_column {
    padding: 72px 0;
  }

  .about_section {
    padding: 0 0 72px;
  }

  .about_section .common_section_sub_title {
    padding: 56px 0 0;
  }

  .ks_about_section {
    padding: 72px 0;
  }

  .common_register_btn_block {
    padding: 72px 0;
  }
}