@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* レイアウト計算を安定させる */
}

body {
  font-family: "Times New Roman", Times, serif;
  line-height: 1.6;
}

header {
  top: 0;
  width: 100%;
  background-color: #0e2262;
  position: fixed;
  z-index: 999999;
}

header {
  top: 0;
  width: 100%;
  background-color: #0e2262;
  position: fixed;
  z-index: 999999;
}

/*----new header------*/
.header {
  background-color: #0e2262;
  position: sticky;
  z-index: 10000;
  top: 0;
  width: 100%;
  transition: 0.2s;
  height: 60px;
}
.header__wrapper {
  height: 60px !important;
  display: flex !important;
  margin: 0 1vw !important;
}

.header__wrapper img {
  object-fit: cover;
}

.header__menu {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  flex-wrap: nowrap;
  z-index: 999999;
}

.logo {
  width: 90px;
  height: auto;
  margin: 9px;
}

.header__item {
  font-size: 20px;

  color: #fff;
  font-family: Helvetica;
  margin: auto 10px;
  align-items: center; /* Align items vertically within the link */
}
.header__item a {
  margin: 3px;
  text-decoration: none;
  color: #fff;
  display: flex; /* Ensure anchor tags use flexbox */
}
.header__item:hover {
  background-color: #002291;
  height: 60px;

  display: flex;
}

.header__item_a {
  margin-right: 8px;
}
.action {
  background-color: black;
  /* height: 60px; */
  display: flex;
  padding: 10px;
}
.action_2{
  background-color:#D90000;
  /* height: 60px; */
  display: flex;
  padding: 10px;
}

/*----new header end------*/

.header-wrapper a {
  color: #fff;
  list-style: none;
  text-decoration: none;
}

.mobile-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0e2262;
  padding: 10px 5px;
  /* height: 60px; */
}

/* ハンバーガーメニューのスタイル */
.hamburger-menu {
  display: block;
  /* position:fixed; */
  /* left: 10px; */
  /* top: 10px; */
  cursor: pointer;
  align-items: center;
  margin: 9px;
  /* margin-top: 15px; */
}

.hamburger-menu img {
  height: 20px;
  width: 30px;
}

/* 国選択メニュー */
.country-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60px; /* ヘッダーの高さ分下にずらす */
  left: -100%;
  width: 300px;
  height: 100%;
  background-color: rgba(14, 34, 98, 0.99);
  padding: 20px;
  align-items: left;
  justify-content: top;
  overflow-y: auto;
  transition: left 0.3s ease-in-out;
  max-height: 1000px;
  z-index: 9999;
}

/* メニューを開いた時 */
.country-menu.active {
  display: flex;
  left: 0;
  z-index: 9999;
}

/* 閉じるボタンのスタイル */
.close-menu {
  display: none;
  /* position: fixed; */
  /* right: 15px; */
  /* top: 10px; */
  cursor: pointer;
  text-align: right;
  margin: 9px;
  margin-top: 15px;
  margin-left: 120px;
}

.close-menu img {
  height: 30px;
  width: auto;
}

.close-menu.active {
  display: block;
}

/* 国選択メニューのリスト */
.country-list {
  list-style: none;
  margin: 10px 10px;
  margin-bottom: 100px;
  text-align: center;
}

.country-list li {
  margin: 10px 0;
}

.country-list a {
  text-decoration: none;
  font-size: 16px;
  color: white;
  font-weight: bold;
  display: block;
  padding: 5px;
  text-align: left;
  /* border-radius: 5px; */
  /* background: rgba(255, 255, 255, 0.2); */
}

.country-list a:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ナビゲーションメニューのスタイル */
.header__menu {
  display: flex;
}
/*----new SP  header end------*/

.top-head1 {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.top-head2 {
  width: 80%;
  margin: 0 auto;
  text-align: left;
}
.gnavi__lists {
  display: flex;
  text-decoration: none;
  list-style: none;
  width: 80%;
  white-space: nowrap;
}

.gnavi {
  margin: 10px;
}


/* ==========================================================================
   Jobs独自コンテンツ（メイン、検索、求人カードなど）※PCベース・共通調整
   ========================================================================== */
main {
  width: 100%;
  max-width: 1200px; /* 横に広がりすぎないようガード */
  margin: 0 auto 30px auto;
  margin-top:50px;
  padding: 0 20px;   /* 左右に最低限のセーフエリアを確保 */
  box-sizing: border-box;
}

/* 共通セクションタイトル */
.section-title {
  font-size: 1.5rem; /* スマホ・PC双方で破綻しない見出しサイズ */
  font-weight: bold;
  color: #0e2262;
  margin: 50px 0 25px 0;
  border-left: 5px solid #0e2262;
  padding-left: 12px;
}

/* ヒーローセクション */
.jobs-hero {
  background: linear-gradient(135deg, #0e2262 0%, #1a3a8f 100%); /* 高級感のあるグラデーションに */
  padding: 60px 20px; /* 求人が増えて検索箱を復活させるときはここを元の値に戻す */
    border-radius: 8px;
  text-align: center;
  background-size: cover;
  background-position: center;
  
  /* 子要素を中央に綺麗に配置するための設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.jobs-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 背景に埋もれないように影を追加 */
}

.jobs-hero__sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ffffff;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 検索ボックスがあった場所の下のコンテンツ（3ステップなど）との間隔 */
.jobs-flow {
  margin-top: 40px; 
}

.flow-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 25px;
}
.flow-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 30px 20px 20px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(14, 34, 98, 0.05);
  transition: transform 0.2s;
}
.flow-step-card:hover {
  transform: translateY(-2px);
}
.step-number {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff9900; /* 目立つようにアクセントに変更 */
  color: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(255, 153, 0, 0.3);
}
.step-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 12px;
  margin-top: 5px;
}
.flow-step-card h3 {
  font-size: 1rem;
  color: #0e2262;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}
.flow-step-card p {
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 5px;
}
.step-sub-text {
  font-size: 0.75rem;
  color: #94a3b8;
  display: block;
  margin-top: 4px;
}

/* 求人カード */
.job-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(14, 34, 98, 0.04);
  text-align: left;
  box-sizing: border-box;
}
.job-card__tags {
  margin-bottom: 12px;
}
.job-tag {
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  color: #0e2262;
  border: 1px solid #0e2262;
  background-color: #f1f3f9;
  display: inline-block;
}
.job-card__title {
  font-size: 1.3rem;
  color: #0e2262;
  margin-bottom: 8px;
  font-weight: bold;
  line-height: 1.4;
}
.job-card__company {
  font-size: 0.9rem;
  color: #4a5568;
  margin-bottom: 18px;
}
.job-card__details {
  background-color: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.job-detail-item {
  font-size: 0.85rem;
  color: #4a5568;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.job-detail-item:last-child { margin-bottom: 0; }
.job-detail-item .icon { margin-right: 8px; color: #0e2262; flex-shrink: 0; }
.job-detail-item.salary {
  font-weight: bold;
  color: #e53e3e; /* 金額はユーザーが最も見る場所なので赤系で視認性を確保 */
  font-size: 1.1rem;
}
.job-detail-item.salary-sub {
  color: #718096;
  font-size: 0.8rem;
  margin-left: 6px;
}
.btn-apply {
  width: 100%;
  background-color: #0e2262;
  color: #ffffff !important;
  text-decoration: none;
  text-align: center;
  padding: 14px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  display: block;
  box-shadow: 0 4px 6px rgba(14, 34, 98, 0.1);
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.btn-apply:hover {
  background-color: #ff9900; /* コンバージョンを意識してホバー時にオレンジへ */
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.job-card.is-hidden {
  display: none !important;
}
.load-more-container {
  text-align: center;
  margin: 40px 0;
}
.btn-load-more {
  background-color: #ffffff;
  color: #0e2262;
  border: 2px solid #0e2262;
  padding: 14px 50px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(14, 34, 98, 0.05);
}
.btn-load-more:hover {
  background-color: #0e2262;
  color: #ffffff;
}
.btn-load-more .btn-sub-text {
  font-size: 0.75rem;
  font-weight: normal;
  display: block;
  margin-top: 2px;
}


/*フッター*/
.footer-section {
  background-color: #0e2262;
  font-size: 1vw;
  line-height: 1.6;
  font-family: proxima-nova, sans-serif;
}

footer {
  width: 100%;
  background-color: #0e2262;
  padding: 50px 0;
}

footer a {
  color: #fff;
  list-style: none;
  text-decoration: none;
}

.footer-left {
  width: 80%;
  margin: 0 auto;
  /* display: flex; */
  justify-content: space-between;
  padding-top: 25px;
  /* float: left; */
}

.bottom-category {
  /* display: flex; */
  text-decoration: none;
  list-style: none;
  max-width: 80%;
  /* justify-content: space-between; */
  color: #fff;
  text-align: left;
  flex-wrap: wrap;
  /* white-space: nowrap; */
}

.footer a {
  color: #fff;
  text-decoration: none;
  list-style: none;
}

.sns {
  display: flex;
  list-style: none;
  width: 80%;
  /* justify-content: space-between; */
  margin: 0 auto;
  text-align: left;
  padding-top: 10px;
}

.footer-left {
  width: 80%;
}

.sns a {
  color: #fff;
  text-decoration: none;
  width: 100%;
}

.sns-list-right {
  padding-left: 10px;
}

.copyrights {
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
}

.special-article-wrapper {
  padding: 30px;
}

.special-article-wrapper h3 {
  color: #000;
  font-size: 14px;
}

.special-article-wrapper a {
  text-decoration: none;
  list-style: none;
}

/* ==========================================================================
   レスポンシブ (max-width: 768px) スマートフォン対応設定
   ========================================================================== */
@media (max-width: 768px) {
    /* ---- ヘッダー レresponsive設定 (List.cssに完全同期 - 変更なし) ---- */
  /*----new SP header------*/

  .header__wrapper {
    display: block !important;
    margin: 0 0 !important;
    /* position: fixed !important; */
  }

  .header__menu {
    top: 120px !important;
    height: 80px;
    background-color: #0e2262;
    padding-top: 10px;
    margin: 10px 0 0 auto;
    overflow-x: auto;
    justify-content: unset;
    z-index: -1;
    overflow-x: scroll;
    /* display: flex; */
  }

  .header__menu.active {
    display: flex;
  }

  .header__item {
    text-align: center;
    margin-right: 30px;
  }

  .Thema {
    margin: 80px 0 5px 0;
  }

  .hamburger-menu {
    position: absolute;
    width: 10%;
    margin-top: 50px !important;
    /* top:50%; */
  }

  .logo-link {
    margin-top: 40px;
    left: 40%;
    position: absolute;
  }

  .close-menu {
    margin-left: 10px !important;
    position: absolute;
  }
    /* ---- フッター レresponsive設定 (List.cssに完全同期 - 変更なし) ---- */
    .footer-left {
        font-size: 10px;
    }

    /* ==========================================
       【修正】Jobs独自コンテンツのスマホ対応調整
       ========================================== */
    main {
        padding: 0 15px; /* スマートフォン向けの左右セーフマージン */
        margin-top:80px; 
    }

    .section-title {
        font-size: 1.3rem;       /* 2.2remから適正化（文字のハミ出し防止） */
        border-left-width: 4px;  /* 6pxから細くして全体のバランス調整 */
        padding-left: 10px;
        margin: 35px 0 20px 0;
    }

/* --------------------------------------------------------
   ヒーローセクション（検索ボックス無しバージョン）
     -------------------------------------------------------- */
  .jobs-hero {
      padding: 40px 16px;      /* 検索ボックスが無いため、上下の余白を少しだけ広げて窮屈さを解消 */
      border-radius: 6px;      /* 角を落としてコンテンツ感を維持 */
  }

  .jobs-hero h1 {
      font-size: 1.5rem;       /* スマホの横幅でも1〜2行で綺麗に収まるサイズ */
      margin-bottom: 12px;
      line-height: 1.4;
  }

  .jobs-hero__sub {
      font-size: 0.85rem;      /* 小さめのデバイスでも文字がはみ出さないサイズ */
      line-height: 1.5;
      margin-bottom: 0;        /* 検索ボックスが無いので、下のマージンをリセット */
  }

    /* ステップ配置：3列並びだとスマホで潰れるため「縦1列」へ変更して可読性を最大化 */
    .flow-steps-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
        margin-top: 20px;
    }

    .flow-step-card {
        padding: 24px 15px 15px 15px;
    }

    .step-number {
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-size: 0.85rem;       /* 1.5remから適正化 */
        top: -13px;
    }

    .step-icon {
        font-size: 2.5rem;         /* 2.2remから微調整 */
        margin-bottom: 6px;
    }

    .flow-step-card h3 {
        font-size: 1rem;         /* 1.3remから調整 */
        margin-bottom: 4px;
        white-space: normal;     /* 折り返しを許可してヒンディー語等のハミ出しを防御 */
    }

    .flow-step-card p {
        font-size: 0.8rem;       /* 0.95remから調整 */
        line-height: 1.4;
        min-height: auto;        /* 1カラム化につき高さ固定を解除 */
    }

    .step-sub-text {
        font-size: 0.7rem;       /* 0.85remから調整 */
    }

    .job-card {
        padding: 16px;           /* 25pxから少し詰めて内側の表示幅を最大化 */
        margin-bottom: 16px;
    }

    .job-tag {
        font-size: 0.7rem;       /* 1.3remから適正化 */
        padding: 3px 8px;
    }

    .job-card__title {
        font-size: 1.2rem;       /* 2.4remから適正化（2〜3行になっても綺麗に収まるサイズ） */
        margin-top: 8px;
    }

    .job-card__company {
        font-size: 0.8rem;       /* 1.6remから適正化 */
        margin-bottom: 12px;
    }

    .job-card__details {
        padding: 12px;
    }

    .job-detail-item {
        font-size: 0.8rem;       /* 1.6remから適正化 */
        margin-bottom: 6px;
    }

    .job-detail-item.salary {
        font-size: 1rem;         /* 1.9remから適正化 */
    }

    .btn-apply {
        padding: 14px;           /* 20pxから親指で押しやすい適正サイズへ変更 */
        font-size: 0.95rem;      /* 1.8remから適正化 */
        border-radius: 6px;
    }

    .load-more-container {
        margin: 35px 0;
        padding: 0;
    }

    .btn-load-more {
        width: 100%;
        font-size: 1rem;         /* 1.4remから適正化 */
        padding: 14px 20px;
    }

    .btn-load-more .btn-sub-text {
        font-size: 0.75rem;      /* 0.95remから調整 */
    }
}