/* ============================================================
   core.css — 構造CSS(テンプレ共通・全法人横展開)
   色・角丸・フォントの生値はここに書かない。すべて skin.css の
   CSS変数(var(--xxx))を参照すること。
   ============================================================ */

/* ---------- リセット・ベース ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

ul {
  list-style: none
}

button {
  font-family: inherit
}

.inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 20px
}

/* 写真プレースホルダ(実装時に実写真へ差し替え) */
.ph {
  background:
    repeating-linear-gradient(45deg, var(--gray-chip) 0 12px, #EAEEF1 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-fg);
  font-size: 12px;
  letter-spacing: .08em;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

.ph::after {
  content: attr(data-label)
}

/* スクロールリビール */
._rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease
}

._rv.is-in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  ._rv {
    opacity: 1;
    transform: none;
    transition: none
  }

  html {
    scroll-behavior: auto
  }
}

/* 見出しの型:英語大見出し+日本語小サブ */
.sec-head {
  margin-bottom: 40px
}

.sec-head .en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 48px);
  color: var(--brand);
  line-height: 1.1;
  letter-spacing: .01em;
}

.sec-head .jp {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: .12em;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  border-radius: var(--radius-pill);
  padding: 16px 36px;
  transition: .25s;
  border: none;
  cursor: pointer;
  font-family: var(--font-jp);
}

.btn .arw {
  font-family: var(--font-en);
  font-weight: 600;
  transition: transform .25s
}

.btn:hover .arw {
  transform: translateX(4px)
}

.btn-primary {
  /* 応募系のみ使用 */
  background: var(--cta);
  color: var(--white);
  box-shadow: 0 6px 20px var(--shadow-primary);
}

/* hover は暗くしすぎず、少し濃く+わずかに浮かせてクリックできる感じを出す */
.btn-primary:hover {
  background: var(--cta-hover);
  box-shadow: 0 8px 24px var(--shadow-primary);
  transform: translateY(-1px)
}

@media (prefers-reduced-motion:reduce) {
  .btn-primary:hover {
    transform: none
  }
}

.btn-line {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: var(--white);
}

.btn-line:hover {
  background: var(--ink);
  color: var(--white)
}

/* ============================================================
   ヘッダー(共通)
   サイト共通のヘッダーだけに効かせる。素の header セレクタにすると、
   求人詳細・企業ページのタイトル部分(これも <header>)まで画面上部に
   貼り付いて本文を隠してしまう。
   ============================================================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 20px
}

.hd .logo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto
}

.hd .logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto
}

.hd .logo img {
  height: 48px;
  width: auto;
  display: block
}

.hd .logo-divider {
  display: block;
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 14px;
  flex: 0 0 auto
}

.hd .logo-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .06em;
  white-space: nowrap;
  flex: 0 0 auto
}

.hd nav {
  display: none
}

.hd .hd-cta {
  display: flex;
  align-items: center;
  gap: 10px
}

.hd .hd-cta a {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}

.hd .hd-cta .jobs {
  background: var(--cta);
  color: var(--white)
}

.hd .hd-cta .jobs:hover {
  background: var(--cta-hover)
}

@media(max-width:399px) {

  .hd .logo-divider,
  .hd .logo-label {
    display: none
  }
}

@media(min-width:1000px) {
  .hd nav {
    display: block
  }

  .hd nav ul {
    display: flex;
    gap: 28px;
    font-size: 14px;
    font-weight: 500
  }

  .hd nav a {
    position: relative;
    padding: 4px 0
  }

  .hd nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--brand);
    transition: .25s
  }

  .hd nav a:hover::after {
    width: 100%
  }
}

/* ハンバーガーボタン(1000px未満のみ表示) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

@media(max-width:999px) {
  .hamburger {
    display: flex
  }
}

@media(prefers-reduced-motion:reduce) {
  .hamburger span {
    transition: none
  }
}

/* ドロワー表示中は背景スクロールをロックする */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
  height: 100%
}

/* モバイルメニュー用ドロワー(全画面オーバーレイ・右からスライドイン) */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  transform: translateX(100%);
  transition: transform .3s ease;
  pointer-events: none;
  overflow-y: auto;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto
}

.mobile-drawer-inner {
  padding: 88px 24px 40px;
  max-width: var(--inner);
  margin: 0 auto
}

.mobile-drawer-close {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.mobile-drawer nav ul {
  list-style: none
}

.mobile-drawer nav li {
  border-bottom: 1px solid var(--line)
}

.mobile-drawer nav a {
  display: block;
  padding: 18px 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink)
}

@media(min-width:1000px) {
  .mobile-drawer {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  .mobile-drawer {
    transition: none
  }
}

/* ============================================================
   パンくず・ページヘッダー(アーカイブ・詳細共通)
   ============================================================ */
.breadcrumb {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 16px 0
}

.breadcrumb a {
  color: var(--brand)
}

.page-head {
  padding: 16px 0 32px
}

.page-head .en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 48px);
  color: var(--brand);
  line-height: 1.1
}

.page-head .jp {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: .12em
}

.page-head .count {
  margin-top: 14px;
  font-size: 14px
}

.page-head .count b {
  font-family: var(--font-en);
  font-size: 22px;
  color: var(--brand)
}

/* ============================================================
   絞り込み(求人一覧)
   ============================================================ */
.filter {
  background: var(--gray-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  margin-bottom: 32px;
}

.filter .row {
  display: grid;
  gap: 10px
}

@media(min-width:760px) {
  .filter .row {
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end
  }
}

.filter label {
  font-size: 12px;
  font-weight: 700;
  display: block;
  margin-bottom: 6px
}

.filter select {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  appearance: none;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.filter .apply {
  background: var(--cta);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--font-jp)
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.filter-tags a {
  font-size: 12px;
  font-weight: 700;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 16px
}

/* ============================================================
   求人カード(トップ・一覧 共通)
   ============================================================ */
.job-list {
  display: grid;
  gap: 16px
}

@media(min-width:760px) {
  .job-list {
    grid-template-columns: 1fr 1fr
  }
}

@media(min-width:1060px) {
  .job-list {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.job-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .25s, transform .25s;
}

.job-card:hover {
  box-shadow: 0 10px 30px var(--shadow-card);
  transform: translateY(-3px)
}

.job-card .badge-new {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: .06em;
}

.job-card .badge-closed {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}

.job-card .school {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .04em
}

.job-card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5
}

.job-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.job-card .meta span {
  font-size: 12px;
  background: var(--gray-chip);
  border-radius: 6px;
  padding: 3px 10px;
  color: var(--ink-soft);
  font-weight: 500;
}

.job-card .nums {
  display: flex;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: auto
}

.job-card .nums dt {
  font-size: 11px;
  color: var(--ink-soft)
}

.job-card .nums dd {
  font-size: 15px;
  font-weight: 700
}

.job-card .nums dd b {
  font-family: var(--font-en);
  font-size: 18px;
  color: var(--ink)
}

.job-card.closed {
  opacity: .6
}

/* ============================================================
   0件時(求人一覧)
   ============================================================ */
.empty {
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-card);
  padding: 64px 24px;
}

.empty .en {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--brand);
  font-size: 14px;
  letter-spacing: .14em
}

.empty h2 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px
}

.empty p {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px
}

.empty .btn {
  margin-top: 24px
}

/* ============================================================
   フッター(共通)
   ============================================================ */
footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 56px 0 32px
}

footer .f-grid {
  display: grid;
  gap: 32px
}

@media(min-width:860px) {
  footer .f-grid {
    grid-template-columns: 1fr 2fr
  }
}

/* ロゴはヘッダーと同じ正式ロゴ(SVG 853:263)。ヘッダー(PC 38px / SP 26px)より一回り大きく */
footer .f-logo {
  display: inline-block
}

footer .logo img {
  height: 44px;
  width: auto;
  display: block
}

footer .f-tagline {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--footer-text)
}

footer .f-org {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--footer-text-soft)
}

@media (max-width: 767px) {
  footer .logo img {
    height: 36px
  }
}

footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px
}

footer nav a {
  color: var(--footer-text)
}

footer nav a:hover {
  color: var(--brand);
  text-decoration: underline
}

footer .corp {
  margin-top: 20px;
  font-size: 12px
}

footer .corp a {
  color: var(--brand);
  text-decoration: underline
}

/* 中段:キャリア登録の最終回収導線 */
/* 下段:運営者表記・個人情報保護方針・コピーライト */
footer .f-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-border);
  text-align: center
}

footer .f-bottom p {
  font-size: 11px;
  color: var(--footer-text-soft)
}

footer .f-legal {
  margin-top: 6px
}

footer .f-legal a {
  color: var(--footer-text-soft);
  text-decoration: underline
}

footer .f-legal a:hover {
  color: var(--brand)
}

footer .copy {
  margin-top: 6px;
  font-size: 11px;
  color: var(--footer-text-soft)
}

/* ============================================================
   追従バー(モバイル):トップ用CTA / 求人詳細用応募バー
   ============================================================ */
#sticky-cta,
#sticky-apply {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}

#sticky-cta {
  transform: translateY(110%);
  transition: transform .35s ease
}

#sticky-cta.is-show {
  transform: none
}

#sticky-cta a {
  flex: 1;
  padding: 13px 0;
  font-size: 14px
}

#sticky-apply {
  align-items: center
}

#sticky-apply .info {
  font-size: 11px;
  line-height: 1.5;
  flex: 1;
  min-width: 0
}

#sticky-apply .info b {
  font-size: 12px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

#sticky-apply .btn {
  flex: 0 0 auto;
  padding: 13px 26px;
  font-size: 14px
}

@media(min-width:1000px) {
  #sticky-cta {
    display: none
  }
}

@media(min-width:960px) {
  #sticky-apply {
    display: none
  }
}

/* ============================================================
   トップページ ① ヒーロー

   背景写真(images/dotojob-hero-01.webp)は ::before として敷く。
   情報ではなくブランド装飾なので HTML には画像要素を置かない。
   背景だけを操作したいので疑似要素を使う
   (#mv 自体に filter や opacity を掛けると文字まで影響を受ける)。
   地図のドットは背景写真の左側に焼き込み済み。
   ============================================================ */
#mv {
  position: relative;
  overflow: hidden;
  /* 白ではなく、ごく薄いミント。白いカードが浮いて見えるようにする。 */
  background: var(--brand-tint);
  padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 4.5vw, 64px)
}

#mv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 入稿されたヒーロー背景(1920x850)。道東の地図モチーフは
     画像の左側に焼き込み済みなので、別レイヤーでは重ねない。
     元から淡い画像なので opacity は下げない。 */
  background-image: url("../../images/dotojob-hero-01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 1;
}

/* 中身は背景より上。z-index を持たせないと ::before に隠れる。 */
#mv > .inner {
  position: relative;
  z-index: 1;
  padding: 0 35px;
}

/* キャッチコピーは SVG 画像。幅で大きさを決める(viewBox は 668x287)。 */
#mv .mv-copy {
  margin: 0;
  line-height: 0;
}

#mv .mv-copy img {
  width: clamp(260px, 30vw, 520px);
  height: auto;
  display: block;
}

#mv .lead {
  margin-top: 16px;
  font-size: clamp(15px, 1.9vw, 18px);
  /* 写真の上に乗るので、補助色ではなく本文色で出す */
  color: var(--ink);
  font-weight: 500
}

/* ---------- ヒーロー内の検索 ----------
   装飾は最小限。開いてすぐ打てることを優先する。 */
#mv .topsearch {
  margin-top: 32px;
  /* 3条件が横に並ぶのでヒーロー内では広めに取る */
  max-width: 880px;
}

/* ---------- 流れるタイポ ---------- */
.marquee {
  overflow: hidden;
  /* 上下に余白を取り、帯としての存在感を出す */
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  /* 装飾なので選択・ドラッグの対象にしない */
  user-select: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: dj-marquee 42s linear infinite;
}

.marquee-item {
  flex: 0 0 auto;
  /* 2つ並べたうちの片方ぶんが track の 50%。
     translateX(-50%) で1周し、継ぎ目なくつながる。 */
  padding-right: 28px;
  font-family: var(--font-en);
  font-weight: 800;
  /* 旧 clamp(13px,1.6vw,17px) の約1.3倍 */
  font-size: clamp(17px, 2.1vw, 23px);
  letter-spacing: .12em;
  color: var(--brand);
  white-space: nowrap;
}

@keyframes dj-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    /* 動きを止め、先頭を静止表示する。 */
    animation: none;
  }
}

/* PC時のみ有効な改行(オプションページのテキストエリア改行位置)。
   #mv .lead などで利用する。 */
.pc-only {
  display: none
}

@media(min-width:760px) {
  .pc-only {
    display: inline
  }
}


/* ============================================================
   トップページ ③ 募集中の求人(セクション枠。カード自体は上の共通スタイル)
   ============================================================ */
#jobs {
  padding: var(--section-pad) 0
}

.jobs-more {
  text-align: center;
  margin-top: 36px
}

/* ============================================================
   トップページ ⑦ 制度・環境(4カード)
   ============================================================ */
#env {
  padding: var(--section-pad) 0
}

.env-grid {
  display: grid;
  gap: 14px
}

@media(min-width:760px) {
  .env-grid {
    grid-template-columns: 1fr 1fr
  }
}

.env-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  transition: .25s;
  background: var(--white);
}

.env-card:hover {
  box-shadow: 0 10px 30px var(--shadow-card)
}

.env-card .main {
  font-size: 16px;
  font-weight: 700
}

.env-card .desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px
}

.env-card .icn {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--brand);
  font-size: 18px;
}

/* ============================================================
   トップページ ⑨ FAQ
   ============================================================ */
#faq {
  padding: var(--section-pad) 0;
  background: var(--gray-bg)
}

.faq-list {
  max-width: 760px;
  margin: 0 auto
}

.faq-item {
  border-bottom: 1px solid var(--line);
  background: transparent
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 20px 8px;
  font-weight: 700;
  font-size: 15px;
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-item summary .q {
  font-family: var(--font-en);
  color: var(--brand);
  font-weight: 700
}

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-en);
  color: var(--brand);
  font-size: 20px;
  transition: .2s
}

.faq-item[open] summary::after {
  transform: rotate(45deg)
}

.faq-item .a {
  display: flex;
  gap: 14px;
  padding: 0 8px 20px;
  font-size: 14px;
  color: var(--ink-soft)
}

.faq-item .a .mark {
  font-family: var(--font-en);
  color: var(--ink);
  font-weight: 700
}

/* ============================================================
   求人詳細:求人ヘッダー
   ============================================================ */
.job-head {
  padding: 8px 0 32px
}

.job-head .school-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-pill);
  padding: 4px 16px
}

.job-head h1 {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 14px
}

.job-head .job-no {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-family: var(--font-en)
}

.job-head .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.job-head .badges span {
  font-size: 12px;
  font-weight: 700;
  background: var(--yellow-soft);
  border-radius: var(--radius-pill);
  padding: 5px 16px
}

/* ---------- 上段:判断材料サマリー ---------- */
.summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 40px;
}

@media(min-width:760px) {
  .summary {
    grid-template-columns: repeat(5, 1fr)
  }
}

.summary .cell {
  background: var(--white);
  padding: 18px 16px
}

.summary dt {
  font-size: 11px;
  color: var(--brand);
  font-weight: 700
}

.summary dd {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.5
}

.summary dd b {
  font-family: var(--font-en);
  font-size: 20px
}

.summary dd small {
  font-size: 11px;
  color: var(--ink-soft);
  display: block;
  font-weight: 500
}

/* ---------- 2カラムレイアウト ---------- */
.job-body {
  display: grid;
  gap: 40px;
  padding-bottom: 64px
}

@media(min-width:960px) {
  .job-body {
    grid-template-columns: 1fr 340px;
    align-items: start
  }

  .job-side {
    position: sticky;
    top: 84px
  }
}

/* 中段:本文 */
.job-main section {
  margin-bottom: 44px
}

.job-main h2 {
  font-size: 19px;
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--line);
  position: relative;
}

.job-main h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--brand)
}

.job-main .duty-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.job-main .duty-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.school-intro {
  background: var(--gray-bg);
  border-radius: var(--radius-card);
  padding: 24px;
  font-size: 14px;
}

.school-intro .name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px
}

.school-intro a {
  color: var(--brand);
  font-weight: 700;
  font-size: 13px
}

/* 待遇テーブル */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.spec-table th {
  text-align: left;
  font-weight: 700;
  width: 32%;
  padding: 14px 12px;
  vertical-align: top;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--white);
}

.spec-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line)
}

/* この学校で働く人(school紐付け自動表示) */
.people-mini {
  display: grid;
  gap: 14px
}

@media(min-width:640px) {
  .people-mini {
    grid-template-columns: 1fr 1fr
  }
}

.pm-card {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
  transition: .2s
}

.pm-card:hover {
  border-color: var(--brand)
}

.pm-card .photo {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 50%
}

.pm-card .ttl {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5
}

.pm-card .detail {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px
}

/* ============================================================
   応募フォーム(2段階・1次エントリー)
   ============================================================ */
#apply-form {
  scroll-margin-top: 84px;
  background: var(--gray-bg);
  padding: 56px 0
}

#apply-form .form-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line)
}

#apply-form h2 {
  font-size: 20px;
  font-weight: 700
}

#apply-form .sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px
}

#apply-form .field {
  margin-top: 20px
}

#apply-form label {
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 6px
}

#apply-form label .req {
  color: var(--required);
  font-size: 11px;
  margin-left: 6px
}

#apply-form input,
#apply-form textarea,
#apply-form select {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 15px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

#apply-form input:focus,
#apply-form textarea:focus,
#apply-form select:focus {
  outline: 2px solid var(--brand);
  border-color: var(--brand)
}

#apply-form textarea {
  min-height: 110px;
  resize: vertical
}

#apply-form .privacy {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 18px
}

#apply-form .privacy a {
  color: var(--brand);
  text-decoration: underline
}

#apply-form .submit {
  width: 100%;
  margin-top: 22px
}

#apply-form .after-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 14px;
  text-align: center
}

#apply-form .job-type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px
}

#apply-form .job-type-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: 0;
}

#apply-form .job-type-checks input {
  width: auto
}

/* 関連求人 */
#related {
  padding: 56px 0
}

#related h2 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 20px
}

.rel-list {
  display: grid;
  gap: 14px
}

@media(min-width:760px) {
  .rel-list {
    grid-template-columns: 1fr 1fr
  }
}

.rel-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  transition: .2s
}

.rel-card:hover {
  border-color: var(--brand)
}

.rel-card .school {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand)
}

.rel-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px
}
/* ============================================================
   Phase 4:求人検索・一覧・詳細・企業ページ
   色・角丸・フォントの生値は書かない(skin.css のトークンを使う)
   ============================================================ */

/* ---------- 検索フォーム ---------- */
.jobsearch {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 24px;
}
.jobsearch-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.jobsearch-main { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.jobsearch-kw { flex: 1 1 260px; }
.jobsearch-kw input { width: 100%; box-sizing: border-box; }
.jobsearch input[type="search"],
.jobsearch input[type="number"],
.jobsearch select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
}
.jobsearch-submit { white-space: nowrap; }
.jobsearch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 720px) { .jobsearch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .jobsearch-grid { grid-template-columns: repeat(4, 1fr); } }
.jobsearch-grid select { width: 100%; box-sizing: border-box; }
.jobsearch-salary-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jobsearch-salary-row select { flex: 1 1 110px; }
.jobsearch-salary-row input { flex: 1 1 90px; width: 100%; box-sizing: border-box; }
.jobsearch-unit { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.jobsearch-note { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-soft); }
.jobsearch-features { border: 0; padding: 0; margin: 16px 0 0; }
.jobsearch-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.jobsearch-check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.jobsearch-foot { margin-top: 14px; text-align: right; }
.jobsearch-reset { font-size: 13px; color: var(--ink-soft); }

/* ---------- 結果バー ---------- */
.jobs-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.jobs-count { margin: 0; font-size: 15px; }
.jobs-count b { font-size: 20px; font-family: var(--font-en); }
.jobs-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; max-width: 100%; }
.jobs-sort label { flex: 0 0 auto; white-space: nowrap; }
.jobs-sort select {
  min-width: 0; max-width: 100%; text-overflow: ellipsis;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
}
.jobs-active-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 16px; padding: 0;
}
.jobs-active-filters li {
  background: var(--gray-chip);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 13px;
}

/* ---------- 求人カード ---------- */
.job-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .job-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .job-list { grid-template-columns: repeat(3, 1fr); } }

.job-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0; /* 余白は .job-card-link だけが持つ(旧 .job-card の padding と二重にしない) */
  transition: border-color .15s, transform .15s;
}
.job-card:hover { border-color: var(--cta); transform: translateY(-2px); }
.job-card.closed { opacity: .72; }
/* 画像・タグ・アイコン・テキストはすべてこの内側に入るので、左端が揃う */
.job-card-link { display: block; padding: 16px; color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
@media (min-width: 768px) { .job-card-link { padding: 20px; } }
.job-card-company { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); }
.job-card-title { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
/* 給与・勤務地・雇用形態:アイコン + 値。項目名は見えない文字で dt に入っている */
.job-card-specs { margin: 0; display: grid; gap: 7px; }
.job-card-specs > div { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.job-card-specs dt { margin: 0; display: flex; flex: 0 0 auto; }
.job-card-specs dt .dj-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--brand-dark); }
.job-card-specs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.job-card-specs .is-salary { font-weight: 700; font-size: 14px; }
.job-card-features { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.job-card-features li {
  background: var(--gray-chip);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 11px;
  color: var(--ink-soft);
}
/* 職種カテゴリ。特徴タグと見分けられるよう枠つきにする */
.job-card-features li.is-category {
  background: var(--white);
  border: 1px solid var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.job-card-features li.is-more { background: transparent; padding-left: 2px; padding-right: 2px; }
.job-card-updated { margin: 12px 0 0; font-size: 11px; color: var(--ink-soft); }
.badge-new, .badge-closed {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; margin-bottom: 8px;
}
.badge-new { background: var(--cta); color: var(--white); }
.badge-closed { background: var(--gray-chip); color: var(--ink-soft); }

/* ---------- 求人詳細 ---------- */
.job-ended {
  background: var(--gray-chip);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.job-ended strong { display: block; font-size: 16px; margin-bottom: 6px; }
.job-ended p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }

.job-head { margin-bottom: 20px; }
.job-head h1 { font-size: clamp(22px, 4vw, 30px); margin: 8px 0 12px; line-height: 1.4; }
.job-company-tag {
  display: inline-block; font-size: 13px; color: var(--cta);
  text-decoration: none; font-weight: 700;
}
.job-head-meta, .job-features {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0;
}
.job-head-meta li {
  background: var(--gray-chip); border-radius: var(--radius-pill);
  padding: 3px 12px; font-size: 13px;
}
.job-features li {
  border: 1px solid var(--cta); color: var(--cta);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px;
}

/* 主要条件(給与・勤務地・雇用形態・職種名)。求人カード(.job-card-specs)と同じ表現。
   見出し下では2列でコンパクトに、応募カードでは1列で並べる。 */
.job-specs { margin: 0; display: grid; gap: 8px; }
.job-specs > div { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; }
.job-specs dt { margin: 0; display: flex; flex: 0 0 auto; }
.job-specs dt .dj-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--brand-dark); }
.job-specs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.job-specs .is-salary { font-weight: 700; font-size: 16px; line-height: 1.5; }
.job-head-specs { margin-top: 14px; }
@media (min-width: 600px) {
  .job-head-specs { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 32px; }
}
.apply-specs { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* 応募・お気に入り。同じボタンが近くに無い幅でだけ出す。
     PC(1000px〜)   … 右の応募カードがすぐ隣にある
     SP(〜767px)    … 画面下の固定バーに常に出ている
   その間(タブレット幅)は応募カードが本文の下へ回り、固定バーも無いのでここで出す。 */
.job-head-actions { display: none; }
@media (min-width: 768px) and (max-width: 999px) {
  .job-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
  .job-head-actions .btn { flex: 1 1 260px; }
}

/* この求人のポイント */
.job-points-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.job-points-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.7; font-weight: 700; }
.job-points-list .dj-icon { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; color: var(--brand-dark); }

/* 仕事内容の上に出す具体的な職種名 */
.job-type-name { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.job-type-name span {
  display: inline-block; margin-right: 10px; padding: 1px 8px;
  font-size: 12px; font-weight: 400; color: var(--ink-soft);
  background: var(--gray-chip); border-radius: var(--radius-pill);
}

.job-body { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1000px) { .job-body { grid-template-columns: minmax(0,1fr) 300px; align-items: start; } }

.job-section { margin-bottom: 28px; }
.job-section h2 {
  font-size: 18px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--cta);
}
.job-content { font-size: 15px; line-height: 1.9; }
.job-headcount { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.spec-table th { width: 32%; color: var(--ink-soft); font-weight: 700; background: var(--gray-bg); }
@media (max-width: 599px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { border-bottom: 0; padding-bottom: 4px; }
  .spec-table td { padding-top: 0; }
}

/* 共通ヘッダー(高さ 約65px・追従)の下で止める。上に潜り込ませない */
.job-side { position: sticky; top: 88px; }
.apply-card, .closed-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 20px;
}
.apply-card .status, .closed-card .status {
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; margin-bottom: 10px;
  background: var(--status-ok-bg); color: var(--status-ok-fg);
}
.closed-card .status { background: var(--gray-chip); color: var(--ink-soft); }
.apply-card .btn, .closed-card .btn { width: 100%; justify-content: center; box-sizing: border-box; }
.apply-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
.btn-disabled {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--gray-chip); color: var(--placeholder-fg);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: not-allowed;
}
.btn-disabled small { font-weight: 400; font-size: 11px; }
.btn-ghost { color: var(--ink-soft); }

.company-box .company-name { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.company-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.related-jobs { margin-top: 40px; }
.related-jobs h2 { font-size: 18px; margin-bottom: 14px; }

/* ---------- 企業ページ ---------- */
.company-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.company-head h1 { font-size: clamp(20px, 4vw, 28px); margin: 4px 0 6px; }
/* 企業名 → 企業サイト(補助リンク)→ 求人への導線(コンパクトなボタン)の順に、
   間を空けて段階を付ける。ボタンは内容幅で、横いっぱいには広げない。 */
.company-head-site { margin: 0; font-size: 14px; }
.company-head-site a { color: var(--brand-ink); }
.company-head-cta { margin: 16px 0 0; }
.company-head-cta .btn-compact {
  padding: 10px 22px; font-size: 14px;
  box-shadow: 0 3px 10px var(--shadow-primary);
}
.company-logo img, .company-card-logo img {
  width: 96px; height: 96px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.company-section { margin-bottom: 32px; }
.company-section h2 {
  font-size: 18px; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--cta);
}
.company-job-count {
  display: inline-block; margin-left: 8px; font-size: 13px;
  background: var(--gray-chip); border-radius: var(--radius-pill); padding: 2px 10px;
}
.company-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .company-list { grid-template-columns: repeat(2, 1fr); } }
.company-card {
  display: flex; gap: 16px; padding: 18px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); text-decoration: none; color: inherit;
}
.company-card:hover { border-color: var(--cta); }
.company-card h2 { font-size: 16px; margin: 0 0 6px; }
.company-card-addr, .company-card-intro { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.company-card-count { margin: 0; font-size: 13px; }

/* ---------- ページ送り ---------- */
.pagination, .nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink); background: var(--bg); font-size: 14px;
}
.pagination .page-numbers.current, .nav-links .page-numbers.current {
  background: var(--cta); color: var(--white); border-color: var(--cta);
}
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   Phase 5:応募フォーム・応募完了
   ============================================================ */
.inner-narrow { max-width: 680px; }

.apply-target {
  background: var(--gray-chip);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.apply-target-company { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
.apply-target-title { margin: 0; font-weight: 700; font-size: 16px; }

.apply-notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.apply-notice.is-error { border-color: var(--required); color: var(--required); }
.apply-notice ul { margin: 8px 0 0; padding-left: 20px; }

.apply-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
}
.apply-field { margin-bottom: 18px; }
.apply-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.apply-field input, .apply-field select, .apply-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 16px; /* iOS の自動ズームを避ける */
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
}
.apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus {
  outline: 2px solid var(--cta); outline-offset: 1px; border-color: var(--cta);
}
.apply-field.has-error input,
.apply-field.has-error select,
.apply-field.has-error textarea { border-color: var(--required); }
.apply-field .req {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: 11px; font-weight: 700;
  background: var(--required); color: var(--white);
  border-radius: var(--radius-pill);
}
.apply-error { display: block; margin-top: 4px; font-size: 12px; color: var(--required); font-weight: 700; }
.apply-help { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.apply-privacy { font-size: 13px; color: var(--ink-soft); margin: 20px 0 14px; line-height: 1.8; }
.apply-submit { width: 100%; justify-content: center; font-size: 16px; padding: 14px; }
.apply-after { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }

.apply-complete {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 36px 24px;
  text-align: center;
}
.apply-complete-icon {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--cta); color: var(--white);
  font-size: 26px; font-weight: 700;
}
.apply-complete h1 { font-size: 22px; margin: 0 0 18px; }
.apply-complete p { font-size: 14px; color: var(--ink-soft); line-height: 1.9; margin: 0 0 8px; }
.apply-complete .apply-target { text-align: left; margin: 20px 0; }
.apply-complete-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* 応募フォーム:個人情報の取り扱いへの同意 */
.apply-consent {
	background: var(--gray-chip);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px;
}
.apply-consent.has-error {
	border-color: var(--required);
	background: #FDF3F2;
}
.apply-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	line-height: 1.7;
	cursor: pointer;
}
.apply-consent-label input[type="checkbox"] {
	/* ラベル1行目の中心に合わせる。タップ領域は 24px 確保する。 */
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 3px;
}
.apply-consent-label .req {
	margin-left: 6px;
}

/* ============================================================
   お気に入り
   ============================================================ */

/* --- ヘッダーの件数 --- */
.fav-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}
/* hover は枠とハートだけオレンジにする(文字は読める濃さのまま) */
.fav-nav:hover {
	border-color: var(--fav);
}
.fav-nav:hover .fav-nav-icon {
	color: var(--fav);
}
.fav-nav-icon::before {
	content: "♥";
	font-size: 15px;
	line-height: 1;
}
.fav-nav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--fav);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.fav-nav-count[hidden] {
	display: none;
}

/* --- お気に入りボタン --- */
.fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink-soft);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: color .15s, border-color .15s, background-color .15s;
}
.fav-btn[hidden] {
	display: none;
}
.fav-btn:hover {
	border-color: var(--fav);
	color: var(--ink);
}
.fav-btn:hover .fav-btn-icon {
	color: var(--fav);
}
.fav-btn:focus-visible {
	outline: 2px solid var(--fav);
	outline-offset: 2px;
}
.fav-btn-icon::before {
	content: "♡";
	font-size: 16px;
	line-height: 1;
}
/* 押下中(保存済み)は明るいオレンジの塗りに白文字 */
.fav-btn[aria-pressed="true"] {
	border-color: var(--fav);
	background: var(--fav);
	color: var(--white);
}
.fav-btn[aria-pressed="true"] .fav-btn-icon {
	color: inherit;
}
.fav-btn[aria-pressed="true"]:hover {
	border-color: var(--fav-hover);
	background: var(--fav-hover);
}
.fav-btn[aria-pressed="true"] .fav-btn-icon::before {
	content: "♥";
}

/* カード内:リンクの上に重ねる。押しても詳細へ飛ばない。 */
.job-card {
	position: relative;
}
.fav-btn-card {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
}
.fav-btn-card .fav-btn-text {
	/* アイコンだけ見せる。読み上げは aria-label が担う。 */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* お気に入りボタンはカード右上(画像の上)に重なり、タイトルとは重ならない。
   タイトルはカード幅いっぱいで折り返す。 */
.job-card-head {
	padding-right: 0;
}

/* 詳細ページ:文字も見せる */
.fav-btn-detail {
	width: 100%;
	margin-top: 12px;
	padding: 12px 16px;
	font-size: 15px;
}

/* --- /favorites/ --- */
.fav-page .page-head-lead {
	margin-top: 8px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.7;
}
.fav-empty,
.fav-message {
	padding: 56px 20px;
	text-align: center;
	border: 1px dashed var(--line);
	border-radius: 12px;
	background: var(--gray-chip);
}
.fav-empty-title {
	font-size: 17px;
	font-weight: 700;
}
.fav-empty-lead {
	margin-top: 8px;
	color: var(--ink-soft);
	font-size: 14px;
}
.fav-empty .btn,
.fav-message .btn {
	margin-top: 20px;
}
.fav-noscript {
	margin-top: 16px;
	color: var(--ink-soft);
	font-size: 14px;
}

@media (max-width: 767px) {
	.fav-nav .fav-nav-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.fav-nav {
		padding: 8px 10px;
	}
	.mobile-drawer .fav-nav {
		margin-top: 20px;
	}
	.mobile-drawer .fav-nav .fav-nav-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.fav-empty,
	.fav-message {
		padding: 40px 16px;
	}
}

/* ============================================================
   UXレビュー反映
   ============================================================ */

/* --- ヘッダー:企業管理画面への導線 --- */
.hd-company {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--gray-chip);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}
.hd-company:hover {
	border-color: var(--dj-accent);
	color: var(--dj-accent);
}
.hd-company-icon::before {
	content: "▤";
	font-size: 13px;
}

/* --- トップページの検索(ヒーロー内) ---
   職種・勤務地・雇用形態の3条件。PCは横並び、SPは縦並び。
   地図の上に乗るので、背景は不透明の白にして可読性を確保する。 */
.topsearch {
	display: grid;
	gap: 12px;
	padding: 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px var(--shadow-card);
}

.topsearch-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.topsearch-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-soft);
}

.topsearch-field select {
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	/* 右は矢印のぶんを空ける。文字が枠に近づかないようにする。 */
	padding: 12px 44px 12px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	appearance: none;
	background-image: var(--icon-chevron);
	background-repeat: no-repeat;
	background-position: right 18px center;
}

.topsearch-field select:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.topsearch-submit {
	min-height: 52px;
	padding-left: 28px;
	padding-right: 28px;
	white-space: nowrap;
}

/* --- 職種から探す / 道東で働く・暮らす --- */
#types,
#life {
	padding: var(--section-pad) 0;
}

#life {
	background: var(--gray-bg);
}

.type-list,
.life-list {
	display: grid;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.life-card-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.life-card-link:not(.is-sample):hover .card-thumb {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.type-card-link.is-sample,
.life-card-link.is-sample {
	cursor: default;
}

.life-card-body {
	padding-top: 12px;
}

/* 職種から探す:画像を使わないカテゴリーナビ。カード全体がリンク。
   白地+ブランドグリーン(#00b480)の枠。hover で枠を太くし、背景をごく薄いミントにする(影は使わない)。 */
.type-list {
	gap: 16px;
}

.type-card-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	min-height: 104px;
	padding: 20px 22px;
	border: 1px solid var(--brand);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.type-card-link:not(.is-sample):hover {
	box-shadow: inset 0 0 0 1px var(--brand);
	background: var(--brand-tint);
}

.type-card-link:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
}

.type-card-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.type-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.type-card-count {
	font-size: 14px;
	font-weight: 700;
	color: var(--brand-ink);
}

.type-card-arrow {
	margin-left: auto;
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1;
	color: var(--ink-soft);
	transition: transform .15s, color .15s;
}

.type-card-link:hover .type-card-arrow {
	color: var(--brand);
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.type-card-link:hover .type-card-arrow {
		transform: none;
	}
}

/* --- 道東で働く・暮らす --- */
.life-card-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.life-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ink-soft);
}

.life-card-tag {
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: var(--yellow-soft);
	color: var(--ink);
	font-weight: 700;
}

/* カードの下の「一覧を見る」(記事一覧 /articles/ へ) */
.life-more {
	margin-top: 40px;
	text-align: center;
}

/* --- セクション見出しの右寄せリンク・注記 --- */
.sec-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.sec-more {
	font-size: 14px;
	font-weight: 700;
	color: var(--brand-ink);
	text-decoration: none;
	white-space: nowrap;
}

.sec-more:hover {
	text-decoration: underline;
}

.sec-note {
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-soft);
}

/* --- 最終CTA --- */
/* 最終CTA。背景は入稿された写真(2000x999)。
   ヒーローと同じく元から淡い画像なので、薄くするレイヤーは重ねない。
   背景だけを扱いたいので ::before に敷く。 */
#top-cta {
	position: relative;
	overflow: hidden;
	padding: var(--section-pad) 0;
	background: var(--brand-tint);
	text-align: center;
}

#top-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../../images/dj-footerimg.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#top-cta > .inner {
	position: relative;
	z-index: 1;
}

.topcta-title {
	font-size: clamp(22px, 3.2vw, 34px);
	font-weight: 700;
	line-height: 1.6;
}

.topcta-lead {
	margin-top: 14px;
	font-size: 15px;
	/* 写真の上に乗るので、補助色ではなく本文色で出す
	   (--ink-soft だと背景の 55% で 4.5:1 を下回る) */
	color: var(--ink);
}

.topcta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

/* --- セクション見出し(日本語のみ) ---
   元デザインは「大きな英字 .en + 小さな日本語 .jp」の組だった。
   英字を使わない見出しでは .jp のラベル用スタイル(14px・薄色)が
   そのまま当たって見出しに見えないため、専用クラスを用意する。 */
.sec-title {
	font-size: clamp(22px, 3.2vw, 32px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--ink);
}
.sec-lead {
	margin-top: 8px;
	font-size: 14px;
	color: var(--ink-soft);
	font-weight: 500;
}

/* --- 検索フォームの開閉(PC・SP共通。初期は閉じる) --- */
.jobsearch-wrap .jobsearch[hidden] {
	display: none;
}
.jobsearch-wrap {
	margin-bottom: 24px;
}
.jobsearch-wrap .jobsearch {
	margin-top: 10px;
	margin-bottom: 0;
}
.jobsearch-toggle {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
}
.jobsearch-toggle-text {
	flex: 1 1 auto;
	text-align: left;
}
.jobsearch-toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--cta);
	color: #fff;
	font-size: 12px;
}
.jobsearch-toggle-count[hidden] {
	display: none;
}
.jobsearch-toggle-icon::before {
	content: "＋";
	display: inline-block;
	color: var(--dj-accent);
	font-weight: 700;
}
.jobsearch-wrap.is-open .jobsearch-toggle-icon::before {
	content: "−";
}

/* --- 選択中の条件 --- */
.jobsearch-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--dj-accent-bg);
	border-radius: 10px;
	font-size: 13px;
}
.jobsearch-active[hidden] {
	display: none;
}
.jobsearch-active-label {
	font-weight: 700;
	color: var(--dj-accent);
}
.jobsearch-active-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}
.jobsearch-active-list li {
	padding: 4px 10px;
	background: #fff;
	border-radius: 999px;
	border: 1px solid var(--line);
}
.jobsearch-active-clear {
	font-size: 13px;
	white-space: nowrap;
}

/* --- 勤務地(管内アコーディオン) --- */
.jobsearch-areas {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
}
.area-group {
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-top: 8px;
	background: #fff;
	overflow: hidden;
}
.area-group-head {
	display: flex;
	align-items: stretch;
}
.area-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
}
.area-check-parent {
	flex: 1 1 auto;
	font-weight: 700;
}
.area-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
}
.area-name {
	flex: 1 1 auto;
}
.area-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gray-chip);
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 400;
}
.area-toggle {
	flex: 0 0 auto;
	width: 48px;
	border: 0;
	border-left: 1px solid var(--line);
	background: transparent;
	cursor: pointer;
	color: var(--ink-soft);
}
.area-toggle-icon::before {
	content: "▾";
	display: inline-block;
	transition: transform .15s;
}
.area-group.is-open .area-toggle-icon::before {
	transform: rotate(180deg);
}
.area-children {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 2px 8px;
	padding: 6px 14px 14px 36px;
	border-top: 1px solid var(--line);
	background: var(--gray-chip);
}
.area-children[hidden] {
	display: none;
}
.jobsearch-submit-foot {
	display: none;
}

/* --- 求人詳細の固定CTA(スマートフォンのみ) --- */
.job-sticky-cta {
	display: none;
}

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width: 767px) {
	/* ヘッダーは狭い。企業管理画面への導線はドロワー側に任せ、
	   上部バーはお気に入りと求人一覧だけにする。 */
	.hd-cta .hd-company {
		display: none;
	}
	.mobile-drawer .hd-company {
		display: inline-flex;
		margin-top: 16px;
	}

	.jobsearch-submit-foot {
		display: inline-flex;
		width: 100%;
		justify-content: center;
	}
	.jobsearch-foot {
		flex-direction: column;
		gap: 12px;
		align-items: center;
	}
	.area-children {
		grid-template-columns: 1fr;
		padding-left: 30px;
	}
	.area-check {
		/* タップ領域を確保する */
		min-height: 44px;
	}

	/* 3条件は縦並び。各項目のタップ領域を確保する。 */
	.topsearch {
		padding: 14px;
	}
	.type-list {
		gap: 12px;
	}
	.life-list {
		gap: 20px;
	}
	.type-card-link {
		min-height: 88px;
		padding: 16px 18px;
	}
	.type-card-name {
		font-size: 16px;
	}

	/* 求人詳細:タイトルを少し小さくし、給与・勤務地を早く見せる */
	.job-head h1 {
		font-size: 20px;
		line-height: 1.5;
	}
	.job-head {
		padding-bottom: 12px;
	}
	.job-head-meta {
		margin-top: 8px;
	}
	.job-head .job-features {
		margin-top: 8px;
	}

	/* 固定CTA。本文の末尾が隠れないよう body 側に余白を足す。 */
	.job-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--line);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
	}
	.single-job main {
		padding-bottom: 96px;
	}
	.fav-btn-sticky {
		flex: 0 0 auto;
		width: 52px;
		height: 48px;
		padding: 0;
	}
	.fav-btn-sticky .fav-btn-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.job-sticky-apply {
		flex: 1 1 auto;
		justify-content: center;
		height: 48px;
	}
	.job-sticky-closed {
		flex: 1 1 auto;
		text-align: center;
		color: var(--ink-soft);
		font-size: 14px;
	}
}

/* ============================================================
   トップページの横幅

   グローバルの --inner(1120px)は変えない。
   .hd(ヘッダー)も var(--inner) を参照しているため、変数自体を
   上書きするとヘッダー幅まで変わる。

   body.home も使えない。/favorites/ は求人を1件も問い合わせない
   ルートなので WordPress がフロントページと判定し、body に home が
   付く。body.home で広げると、お気に入り一覧まで一緒に広がる。

   そこでトップ固有のセクション(front-page.php だけが出力する
   #mv と #jobs)の .inner に限定する。
   ============================================================ */
/* 新着求人・職種から探す・道東で働く暮らすは同じ幅(--inner)に揃える。
   広げるのはヒーローだけ。 */
body.home #mv > .inner {
	max-width: 1280px;
}

/* ============================================================
   ヘッダーのロゴ(SVG)
   ============================================================ */
.hd .logo img {
	/* SVG は viewBox 853:263(約3.25:1)。高さ基準で指定する。 */
	height: 38px;
	width: auto;
	display: block;
}

@media (max-width: 767px) {
	.hd .logo img {
		/* お気に入り・求人一覧と並ぶのでヘッダーが窮屈になりやすい。
		   SP では一段小さくして収める。 */
		height: 26px;
	}
}

@media (max-width: 399px) {
	.hd .logo img {
		height: 22px;
	}
}

/* ============================================================
   ヒーローの地図:画面幅ごとの見せ方
   ============================================================ */
@media (min-width: 1024px) {
	#mv {
		/* 余白を活かしてヒーローに高さを持たせる */
		padding: 96px 0 96px;
		min-height: 560px;
		display: flex;
		align-items: center;
	}
	#mv > .inner {
		width: 100%;
	}
}

@media (max-width: 767px) {
	#mv {
		padding: 24px 0 32px;
	}
	#mv::before {
		/* SP は左合わせ。画像の左側にある地図のドットが残り、
		   PC と同じ見え方になる。高さを基準に合わせて切り抜く。 */
		background-position: left top;
		background-size: auto 100%;
	}
	#mv .topsearch {
		padding: 12px;
		max-width: none;
	}
	.marquee {
		padding: 10px 0;
	}
	.marquee-item {
		padding-right: 18px;
	}
}

/* ============================================================
   カードのサムネイル(16:9 統一)

   画像の実寸がまちまちでも崩れないよう、比率はコンテナが持ち、
   画像側は object-fit: cover で切り抜く。
   ============================================================ */
.card-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--brand-soft) 0%, var(--gray-chip) 100%);
}

.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-thumb-ph {
	padding: 8px 12px;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ink-soft);
}


/* ============================================================
   トップページのカードとヒーロー検索(画面幅ごと)
   ============================================================ */
@media (min-width: 600px) {
	.type-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.life-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	/* 職種・勤務地・雇用形態 + ボタンを横並びにする */
	.topsearch {
		grid-template-columns: 1fr 1fr 1fr auto;
		align-items: end;
		gap: 14px;
	}
	.topsearch-submit {
		/* ラベル行のぶん下にそろえる */
		align-self: end;
	}
	/* 職種から探すは PC で3列(カテゴリーナビ) */
	.type-list {
		grid-template-columns: repeat(3, 1fr);
	}
	.life-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 長文欄(仕事内容・条件表の自由記述)。入力した段落と改行をそのまま見せる。
   段落の間は空行1つ分あける。 */
.job-content p,
.spec-table td p { margin: 0 0 .9em; }
.job-content p:last-child,
.spec-table td p:last-child { margin-bottom: 0; }

/* SVG アイコン(inc/icons.php)。色は currentColor で、既定はブランドカラー */
.dj-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -.15em; color: var(--brand-dark); flex-shrink: 0; }

/* 仕事内容イメージ画像(16:9)。「仕事内容」見出しの直下に大きく */
.job-content-image {
  margin: 0 0 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--gray-chip);
}
.job-content-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   iPhone Safari の入力時の自動ズーム対策(SP幅だけ)
   16px 未満の入力欄・select にフォーカスすると、Safari がページを拡大して
   画面がずれる。文字入力を伴うフォーム要素は SP では最低 16px にする。
   個別の指定(13〜15px)より必ず優先させるため !important を使う。
   チェックボックス・ラジオ・ボタン類は対象外。PC の文字サイズは変えない。
   ============================================================ */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}