@charset "utf-8";
/* CSS Document */

:root{
  --brand:#0b5cab;
  --brand-2:#1e88e5;
  --ink:#0f172a;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --line:#e5e7eb;
  --radius-xl: 18px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --container: 1280px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.eyebrow{display: inline-block;
  width: auto;
  padding-bottom: 40px;
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: bold;
  color: #005bac;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 100%; /* h1 の幅に合わせる */
  height: 4px; /* ラインの太さ */
  margin: 8px auto 0; /* タイトルとの余白 */
  background: linear-gradient(to right, #005bac, #E60019);
  border-radius: 2px;
}

/* Hero */
.mainimg { position: relative; isolation: isolate; }
.mainimg-media { position: relative; block-size: 24vh; min-block-size: 250px; display: grid; place-items: center; overflow: hidden; }
.mainimg-media::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 60%; }
.mainimg-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mainimg-heading {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%); /* 1280px幅を中央に固定 */
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* コンテナの右端に寄せる */
  text-align: right;       /* テキストも右揃え */
  padding: 0 20px;         /* 余白を確保 */
  box-sizing: border-box;
  z-index: 2;
}

.mainimg .title {
  font-size: clamp(36px, 4.7vw, 60px);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  text-align: center;
  /* シャドウを強化（濃く & 広め） */
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.8),   /* 下方向に濃い影 */
    0 0 8px rgba(0, 0, 0, 0.7);      /* 文字全体を縁取り */
}

.mainimg-heading .subtitle {
  margin-top: 8px;
  font-size: clamp(14px, 1.6vw, 20px);
  color: #fff;
  font-weight: 500;
  line-height: 1.4;

  /* サブタイトルも少し濃いめに */
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.7),
    0 0 6px rgba(0, 0, 0, 0.6);

  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.intro { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; }
.intro-card { max-width: 100%; }
.intro-grid { display: grid; }
.intro-copy { max-width: 1280px; width: 100%; }
.intro-copy h2 { margin: 60px 0 8px; font-size: clamp(16px, 2.0vw, 20px); }
.intro-copy p { margin: .25rem 0 70px; color: #000; font-size: 14px; }
.intro-copy-sefety {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.intro-copy-sefety img { display: block; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); }


.section.jobs { padding: 56px 0 0; background: #fff; }
.job-heading {
  margin: 0 8px 14px;
  line-height: 1.4;
}

.job-heading .label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 24px;
}

.job-heading .role {
  display: block;
  font-size: 1.0rem;
  font-weight: 600;
  color: #0b5cab;
}
/* card */
.job-card {
  background: #fff;
  margin: 20px 0 80px;
}
.job-title {
  margin: 4px 8px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b5cab;
}

/* table */
.job-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .9rem;
}
.job-table th,
.job-table td {
  border: 1px solid #e8eef7;
  padding: 10px 12px;
  vertical-align: top;
  background: #fff;
  word-break: break-word;
}
.job-table th {
  width: 160px;
  background: #f6f9ff;           /* 見出しセルの薄いブルー */
  color: #0e1b2b;
  font-weight: 600;
}
.job-table td ol {
  margin: 0; padding-left: 1.2em;
}
.job-table td ol li { margin: .35em 0; }

/* small */
@media (max-width: 720px) {
  .job-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .9rem;
}
  .job-card { padding: 10px; }
  .job-table th { width: 150px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #1E90FF, #005bac);
  color: #fff;
  font-size: 0.9rem;
  padding: 8px 20px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.3s ease; /* hoverの透過アニメーション */
}

.btn:hover {
  opacity: 0.8; /* 少し透過（80%） */
}